/* ─────────────────────────────────────────────────────────────────────────────
   Shared across every page. Tokens, page ground, and the footer chrome.
   Every dimension is calc(<figma-px> * var(--s)); the literal in each calc is the
   exact value from the Figma file. --page is the single knob. See HANDOFF.md.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --page:.96;                     /* THE knob: page scale against the 1280 Figma frame */
  --s:var(--page);                /* everything scales from this */
  --card-tighten:.94;             /* cards sit a step below the page scale */
  --display-tighten:.86;          /* so does the section heading */
  /* Two tokens, deliberately separate:
     --screen is the page SURFACE. Anything that must disappear into the page uses
     it — the card notch, the LIV hero's multiply backdrop. If these drift apart
     they stop being invisible and become visible rectangles.
     --ground is light INK on dark fills (rail numerals, active nav label, callout
     quotes). It stays warm so type on navy/steel keeps its paper feel. */
  --screen:#FAFAF8;               /* page fill — cooler, a touch brighter */
  --ground:#F8F8F3;               /* light ink on dark surfaces */
  --card:#FFFFFF;                 /* card stock, lifted off the paper */
  --ink:#1D3354;--steel:#467599;--sail:#D64045;--deep:#B8333A;--teal:#9ED8DB;
  --hair:rgb(29 51 84 / .16);
  --pad:40px;                     /* viewport gutter — not a Figma value */
  /* Top edge of the pill lines up with the peak inked pixel of the masthead text
     either side of it (measured, not eyeballed: both land on y=41–42). The text
     box starts at --pad 40, but half-leading plus the cap inset push the first
     visible pixel down ~1px, so this is 41 rather than 40. */
  --nav-top:41px;
  --nav-h:calc(50px * var(--s));  /* Figma track height 50 */
  --nav-clear:calc(var(--nav-top) + var(--nav-h) + 18px);
  --col:calc(1280px * var(--s) + var(--pad) * 2);
  --ease:cubic-bezier(.34,1.4,.5,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--screen);position:relative;color:var(--ink);
  font-family:"Libre Baskerville",Georgia,serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url(img/canvas.jpg);background-size:512px 512px;background-repeat:repeat;
  opacity:.02}
.wrap{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:var(--pad) var(--pad) 0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* visually hidden, still announced */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── primary nav ── Figma `track` (Frame 3 / LIV 176:1548): 375 wide, pad 6, gap 6,
   r999, fill ink@.06 · items pad 9/20, 14px, r999. Shared, so any page can carry it. ── */
/* Fixed rather than sticky: it needs to hold 62px off the top on every page, and a
   sticky element can only travel inside its own parent — the masthead is ~50px tall,
   so sticky there would never actually stick. Pages reserve space with --nav-clear. */
.nav{position:fixed;top:var(--nav-top);left:50%;transform:translateX(-50%);z-index:50;
  display:flex;gap:calc(6px * var(--s));background:rgb(29 51 84 / .06);
  backdrop-filter:blur(8px);
  border-radius:999px;padding:calc(6px * var(--s));width:max-content;
  transition:opacity .32s ease}
/* Once you're reading, the nav drops back so it isn't competing for attention;
   hover, keyboard focus, or an open menu brings it straight back. */
.nav.dim{opacity:.32}
.nav.dim:hover,.nav.dim:focus-within,.nav.dim.menu-open{opacity:1}
.nav a,.nav .trigger{position:relative;display:flex;align-items:center;
  gap:calc(6px * var(--s));font:inherit;font-size:calc(14px * var(--s));line-height:1.4;
  color:var(--steel);background:none;border:0;cursor:pointer;
  padding:calc(9px * var(--s)) calc(20px * var(--s));border-radius:999px;
  transform-origin:50% 150%;white-space:nowrap;
  transition:transform .34s var(--ease),color .3s ease}
/* the hand-drawn heel + squiggle */
.nav a::after,.nav .trigger::after{content:"";position:absolute;
  left:calc(16px * var(--s));right:calc(16px * var(--s));bottom:2px;height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5%206.3%20Q13.5%201.5%2025.5%205.5%20T49.5%205%20T73.5%206.4%20T98.5%204.8' fill='none' stroke='%239ED8DB' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 7px;transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.4,0,.2,1)}
.nav a:hover,.nav .trigger:hover{color:var(--ink);transform:rotate(-3deg) translateY(-3px)}
.nav a:hover::after,.nav .trigger:hover::after{transform:scaleX(1)}
.nav a[aria-current],.nav .trigger[aria-current]{background:var(--steel);color:var(--ground)}
.nav a[aria-current]::after,.nav .trigger[aria-current]::after{display:none}
.nav a[aria-current]:hover,.nav .trigger[aria-current]:hover{transform:none}
.has-menu.open .trigger[aria-current]{background:var(--steel);color:var(--ground)}
/* an open trigger stays put — heeling over while a panel hangs off it looks broken */
.has-menu.open .trigger{transform:none;color:var(--ink)}
.has-menu.open .trigger::after{transform:scaleX(0)}
.trigger .caret{width:.62em;height:.62em;flex:none;
  transition:transform .28s var(--ease)}
.has-menu.open .caret{transform:rotate(180deg)}

/* ── the work menu ── stands in for a /work index page ─────────────────────── */
.has-menu{position:relative;display:flex}
.menu{position:absolute;top:calc(100% + 9px * var(--s));left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:calc(168px * var(--s));padding:calc(8px * var(--s));
  background:var(--card);border:1px solid var(--hair);border-radius:calc(14px * var(--s));
  box-shadow:0 calc(18px * var(--s)) calc(36px * var(--s)) calc(-14px * var(--s)) rgb(29 51 84 / .30);
  display:flex;flex-direction:column;gap:1px;z-index:40;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .28s var(--ease),visibility .2s}
.has-menu.open .menu{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.menu a,.menu .soon{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:calc(12px * var(--s));padding:calc(9px * var(--s)) calc(11px * var(--s));
  border-radius:calc(9px * var(--s));font-size:calc(14px * var(--s));line-height:1.4;
  color:var(--ink);transition:background .18s ease,color .18s ease}
.menu a:hover,.menu a:focus-visible{background:rgb(29 51 84 / .06);color:var(--deep);outline:none}
.menu a:focus-visible{box-shadow:inset 0 0 0 1px var(--hair)}
.menu a[aria-current]{background:rgb(29 51 84 / .06);color:var(--deep)}
/* Unbuilt studies carry no visible label — the dimming is the whole signal. Their
   status still reaches assistive tech via aria-disabled plus the .vh text, so a
   screen reader doesn't just meet an unexplained inert row. */
.menu .soon{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .menu{transition:opacity .01s linear,visibility .01s}
  .nav a,.nav .trigger,.trigger .caret{transition:none}
}

/* ── footer ── one centred stack, shared by every page ──────────────────────
   The flag mark stands in for a portrait: two blocks, ink and sail, the same
   two-tone device used in the masthead. Sign-off leads in roman and lands on an
   italic invitation, so the emphasis carries without a second typeface. */
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(18px * var(--s));
  padding:calc(64px * var(--s)) 0 calc(56px * var(--s))}
.foot .flag{width:calc(34px * var(--s));height:calc(23px * var(--s));
  display:flex;overflow:hidden;border-radius:calc(3px * var(--s))}
.foot .flag i{flex:1}
.foot .flag i:first-child{background:var(--ink)}
.foot .flag i:last-child{background:var(--sail)}
.foot .sign{font-size:calc(26px * var(--s));line-height:1.35;color:var(--ink)}
.foot .sign em{font-style:italic;font-weight:700;color:var(--deep)}
.foot .links{display:flex;flex-wrap:wrap;justify-content:center;
  gap:calc(30px * var(--s));font-size:calc(17px * var(--s));line-height:1.4}
.foot .links a{position:relative;color:var(--steel)}
.foot .links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.foot .links a:hover{color:var(--ink)}
.foot .links a:hover::after{transform:scaleX(1)}
.foot .copy{font-size:calc(13px * var(--s));line-height:1.4;color:var(--steel);
  margin-top:calc(6px * var(--s))}

@media (max-width:1000px){
  :root{--s:.86;--pad:24px}
  .menu{left:0;right:auto;transform:translateX(0) translateY(-6px)}
  .has-menu.open .menu{transform:translateX(0) translateY(0)}
  /* Contact is the rightmost trigger, so a left-anchored menu hangs off the
     right edge of a phone — anchor the last one to its right instead. */
  .has-menu:last-of-type .menu{left:auto;right:0}
}