/* The lockup, settled 2026-11-06 (wordmarks/round-7.html, Part I, then round-8.html; lockup/ is its reference page). This file and
   lockup.js are the one implementation: the holding page, the link preview card and the reference page all load
   them, so a change here changes every lockup at once. The CSS owns what can be said in ems (mark size, gaps, the
   K's kern, weights, word spaces); lockup.js measures what can't (the line's size and stretch, its drop below the g,
   centring the pair on the mark by ink). Mark files are built by emblem/tools/build_mark.py, not edited by hand.
   Inside holding/ because holding/ is the deploy and may not reach outside itself. */
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-italic.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/hanken-grotesk.woff2) format("woff2"); }

.lockup { display: flex; align-items: center; gap: .32em; margin: 0; font-weight: 400; }
.lockup .mark { width: 1.8em; height: 1.8em; flex: none; }
.lockup .name { display: block; width: max-content; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 1em; line-height: 1; letter-spacing: .01em; }
.lockup .name .k { display: inline-block; margin-right: -.02em; }   /* Fell's italic K stands a little off its a */
/* the line: Hanken capitals, stretched by lockup.js from the K's stem to the g's bowl. font-size here is only the
   fallback if the script never runs; the word spaces are narrowed because spaced capitals make them gape */
.lockup .sub { display: block; width: max-content; white-space: nowrap; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: .215em; font-weight: 500; line-height: 1.2; text-transform: uppercase; word-spacing: -.08em; letter-spacing: .15em; margin-top: .9em; }
/* light type on a dark ground reads heavier than the same weight dark on light, so the line steps down */
.on-dark .lockup .sub, .lockup.on-dark .sub { font-weight: 460; }

/* stacked: the mark above the name (the deck's stacked form, wordmarks/patrick.html), for wherever the ribbon sits
   beneath it: mark, name and ribbon read as one badge. lockup.js reads the flex direction, not the class, to know it
   needn't centre the pair on the mark, so a page may also stack it from a media query (added 2026-11-06) */
.lockup.stacked { flex-direction: column; gap: .2em; }
.lockup.stacked .mark { width: 1.9em; height: 1.9em; }
/* stack-narrow: beside the mark on wider screens, stacked on a phone (the painted holding page), in the same geometry */
@media (max-width: 700px) {
  .lockup.stack-narrow { flex-direction: column; gap: .2em; }
  .lockup.stack-narrow .mark { width: 1.9em; height: 1.9em; }
}

/* hidden until the faces are in and the line is measured, so it never jumps into place */
.js .lockup { opacity: 0; transition: opacity .5s ease; }
.js .ready .lockup { opacity: 1; }