/* ============================================================
   Agency. — base
   Reset, shared shell, and the chapter-scroll system.
   Changing this file needs one other founder's approval.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{overflow-x:clip;scroll-behavior:auto}   /* motion law: scroll is 1:1, never smoothed */
/* THE CANVAS (Julian, 14 Sep 2026): the ground that paints where no
   chapter does — beyond the document's end, and in the gap a mobile
   browser opens under the chapters for a frame as its toolbar
   re-expands (an iPad in Chrome: a cream strip at the page's foot, and
   a flash of one on a fast scroll back up). shell.js sets --canvas to
   the ground of the chapter at the bottom of the screen every frame, so
   whatever gap the browser opens is painted in that chapter's colour
   and disappears. Without the shell (a section harness, no JS) it is
   the cream it always was. html and body both, since the gap can fall
   inside the body's box or beyond it. */
html{background:var(--canvas, var(--cream))}

body{
  background:var(--canvas, var(--cream));
  color:var(--ink);
  font-family:var(--deck);
  /* no -webkit-font-smoothing:antialiased (removed 10 Sep 2026, Julian): on a
     Mac it forces greyscale antialiasing, which thins every stroke — most on
     cream type over moss and ink — and the book's Regular body read too light.
     Subpixel rendering shows the cut's true weight. (Composited layers —
     will-change:transform — stay greyscale regardless.) */
  overflow-x:clip;
}

img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit}

/* ------------------------------------------------------------
   THE CHAPTER SYSTEM  (board note: "Overall scroll behavior")
   The site reads as a sequence of full-bleed coloured pages,
   not one long scrolling page. Rules:
   · every major section is a .chapter: it fills the viewport
     and OWNS its ground colour — the colour travels with the
     section, so the next chapter physically pushes the last
     one off. No fades between grounds, ever.
   · pinned sections wrap a .chapter in an .act: the act's
     height is the scroll distance (e.g. 420vh), the chapter
     goes position:sticky and holds full-screen while scroll
     drives its internal states.
   · nothing here eases, snaps or animates. Plain document
     flow IS the transition.
   ------------------------------------------------------------ */
.chapter{
  position:relative;
  min-height:100lvh;
  background:var(--chapter-bg, var(--cream));
  overflow:hidden;
}

.act{position:relative}                /* height set per-section, e.g. height:420vh */
.act > .chapter{
  position:sticky;
  top:0;
  height:100lvh;
  min-height:0;
}
/* THE LARGE VIEWPORT (Julian, 6 Sep 2026, phones; every width since
   14 Sep 2026): the chapter fills the toolbar-collapsed height. Mobile
   browsers collapse their toolbar as you scroll and the viewport grows
   by 60–100px; svh is the toolbar-visible height, so a chapter sized
   with it stopped short of the foot once the toolbar was gone — an
   iPhone 16 in Chrome, then an iPad in landscape, which is wider than
   the 760 breakpoint the first fix was scoped to (a strip of cream
   under every chapter). dvh was tried and reversed the same day: it
   follows the toolbar's animation, so thirty screens of chapters
   re-laid out under the thumb and the page glitched both ways. lvh
   never changes during a scroll: the chapter fills the expanded state
   exactly and, with the toolbar showing, its last 60–100px sit behind
   the toolbar. On a desktop browser lvh and svh are the same number,
   so nothing there moves. Type and internal offsets stay in svh (and
   the JS fits measure the small height, utils.js smallVH) so the
   composition fits the compact state; the extra height goes to each
   layout's free row. */

/* Board-fit stage: a 1440×900 (or per-spec) artboard scaled to
   the viewport by utils.js fitBoard(). Positions inside it are
   absolute board pixels read off the design. */
.stage{position:absolute;left:0;top:0;transform-origin:0 0}

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */
/* The band is OPAQUE and scales with the frame (44px @1440 → 3.056vw):
   section content scrolls in under it, and shell.js paints its ground
   as the chapters' colours passing beneath — the §12 #13 answer
   (Julian, 26 Aug 2026). */
/* The band condenses as you scroll (Julian, 26 Aug 2026): full height at
   the page top — Maddie's 44px paddings around the wordmark, ~127px at
   1440 — lerping to a compact 72px over the first stretch of scroll.
   --nav-shrink (0..1) is set by shell.js from scrollY: a pure function
   of scroll, no transition, reverses exactly (§4.1).
   --nav-full = 2×padding + the wordmark's line box. */
#site-nav{position:fixed;top:0;left:0;right:0;z-index:100;
  --nav-full:calc(2*clamp(24px,3.056vw,60px) + clamp(31.7px,2.928vw,39.1px));
  height:calc((1 - var(--nav-shrink,0))*var(--nav-full) + var(--nav-shrink,0)*72px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--m);pointer-events:none;color:var(--ink)}
#site-nav a,#site-nav button{pointer-events:auto}
#site-nav .nav-links{display:flex;gap:clamp(20px,3.4vw,58px)}
#site-nav.nav-light{color:var(--cream)}

/* ---- the mobile menu (Julian, 6 Sep 2026) ----
   THE BREAKPOINT IS 760px — the one narrow-width query on the site (§3;
   was 700 / 760 / 860 across sections). Below it the links leave the
   band and the wordmark becomes the menu's handle: a caret after the
   full stop says so, and tapping either opens a panel under the band,
   painted in the ground the band's bottom edge is over (shell.js). The
   caret flips as a cut — no transition (§4.2). Desktop is untouched. */
#site-nav .nav-toggle{display:none;margin-right:auto;margin-left:2px;padding:0 12px;
  min-width:44px;min-height:44px;justify-content:center;   /* the tap floor (§8) */
  font-size:clamp(26px,2.4vw,32px);line-height:1}
#site-nav .caret{display:inline-block;width:.32em;height:.32em;margin-top:-.3em;
  border-right:.09em solid currentColor;border-bottom:.09em solid currentColor;
  transform:rotate(45deg)}
#site-nav .nav-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg);margin-top:.12em}
#site-nav .nav-menu{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - 100%);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3svh,28px);
  padding:0 var(--m) 8svh;overflow:auto;pointer-events:auto}
#site-nav .nav-menu[hidden]{display:none}
#site-nav .nav-menu:focus{outline:none;box-shadow:none}   /* the panel takes focus when a tap opens it (shell.js) — no ring round the whole panel; box-shadow too, the ring's cream half, or its top edge shows as a line under the band (Julian, 26 Sep 2026) */
#site-nav .menu-link{font-family:var(--display);font-size:clamp(34px,10vw,48px);
  line-height:1;letter-spacing:-.015em;text-decoration:none;padding:6px 0}   /* the brand book's Aqva tracking (was −2%, 10 Sep 2026) */
/* the current page is underlined in the text colour, not set in coral:
   the panel can sit on any of the eight grounds, coral included, and
   only the text colour is guaranteed to contrast (Julian, 6 Sep 2026) */
#site-nav .menu-link[aria-current]{text-decoration:underline;
  text-decoration-thickness:.07em;text-underline-offset:.14em}
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #site-nav .nav-links{display:none}
  #site-nav .nav-toggle{display:inline-flex;align-items:center}
}

/* Footer: the nav's twin (Julian, 3 Sep 2026 — replaces the comp's
   links + large wordmark). The condensed nav's 72px band, the same
   .wordmark at the same size on the left, and the quote where the nav
   has its links, set in the links' face. Lives inside the contact
   chapter (sections/16-contact.html), which slides it up from the foot
   as the nav slides off the top; positioned there. */
/* three columns, the outer two equal, so the quote sits on the bar's
   centre line whatever the wordmark and the link measure (Julian,
   12 Sep 2026; it was right-aligned beside the wordmark) */
#site-footer{background:var(--ink);color:var(--cream);height:72px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;
  padding:0 var(--m)}
#site-footer .wordmark{justify-self:start}
#site-footer .foot-quote{font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;text-align:center}
/* the privacy link (Julian, 12 Sep 2026, §9): after the quote, at the far
   right, in the links' face; set apart from the quote by colour, not an
   underline — coral by default, and the close sets --foot-link per ground
   (15-get-agency.css) where coral would not read */
#site-footer .foot-link{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--foot-link,var(--coral));
  min-height:44px;display:inline-flex;align-items:center}
#site-footer .foot-link:focus-visible{outline-color:var(--acid)}
/* below 760 there isn't room for the quote beside the wordmark and the
   privacy link and stay legible (the two-line-each stacked version this
   replaced was still cramped down near 360px) — the bar drops the quote
   and keeps only the functional link, the site's one breakpoint (§3)
   rather than a second number tuned just for this (Julian, 16 Sep 2026;
   was max-width:359px, under every real phone width) */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #site-footer .foot-quote{display:none}
  #site-footer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
  #site-footer .foot-link{grid-column:2;justify-self:end;font-size:10px;letter-spacing:.12em;position:relative}
  #site-footer .foot-link::before{content:'';position:absolute;left:-8px;right:-8px;top:-17px;bottom:-17px}
}

.wordmark{
  font-family:var(--display);
  font-size:clamp(26px, 2.4vw, 32px);
  letter-spacing:-.02em;
  text-decoration:none;
}
.wordmark i{font-style:normal;color:var(--coral)}   /* the full stop */
/* ZOOMED (the zoom pass, WCAG 1.4.4, 25 Sep 2026): at a narrow or short
   window on a computer the wordmark's vw clamp sat at its 26px floor,
   cancelling zoom; set it in rem so zoom enlarges it */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  .wordmark{font-size:2rem!important}
  /* the band at the phone's 72px: its full height grows with the window's
     width (90px at a 960 window, 150% on a laptop), which ran it over
     the sections' first lines at 84px and the sticky heads at 72px */
  #site-nav{--nav-full:72px}
}

.navlink{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */
/* the focus ring is two-tone (the a11y pass, 24 Sep 2026; was a coral
   outline, 2.74:1 on cream — under WCAG 1.4.11's 3:1): an ink ring with
   a cream band inside it, so one of the two clears 3:1 on every ground
   the site has. Sections that set their own outline-color keep the band */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}

/* skip link (WCAG 2.4.1, 24 Sep 2026): the first thing a Tab reaches on
   every page, off-screen until focused, then a chip over the nav band */
.skip-link{position:fixed;left:var(--m);top:12px;z-index:1000;
  transform:translateY(-200%);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:var(--ink);text-decoration:none;
  padding:14px 18px;border-radius:999px}
.skip-link:focus{transform:none}
#main:focus{outline:none;box-shadow:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Reduced motion: sections define their own conclusion-state
   fallbacks (§4). The base contribution: release every pin so
   nothing depends on scroll-driven travel. */
@media (prefers-reduced-motion: reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  .act{height:auto !important}
  .act > .chapter{position:relative;height:auto;min-height:100lvh}
}