/* ============================================================
   ADVANT — SITE DESIGN SYSTEM
   Extracted verbatim from advant-revision-5.html ("v5"), the design
   and behaviour source of truth. Section order mirrors v5. Page
   builders should not need more than tiny page-specific overrides
   beyond what's defined here.
   ============================================================ */

:root{
  --paper:#F5F1EA;
  --paper-deep:#EFE9DF;
  --ink:#191510;
  --muted:#6E665A;
  --faint:rgba(25,21,16,.14);
  --slate:#46606E;
  --periwinkle:#C6CEDF;
  --mist:#E4E8EF;
  --sage:#A6C8AF;
  --green:#569A6E;
  --sand:#EFDCC3;
  --shell:#F5EAE1;
  --blush:#E8B3A4;
  --terracotta:#D0806A;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --gutter:clamp(24px, 5vw, 72px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:76px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* Gentle bolding — the universal signal for "you are touching this".
   Done with a hairline text-shadow rather than font-weight so the glyphs
   thicken without changing their metrics: nothing reflows or jumps. */
::selection{background:var(--green);color:var(--paper);text-shadow:0 0 .3px currentColor;}
@media (hover:hover){
  a:hover,button:hover,summary:hover,[role="button"]:hover,.tool-tag:hover,label:hover{
    text-shadow:0 0 .3px currentColor;
  }
}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;}
.muted{color:var(--muted);}

/* ————— header —————
   Scoped to #hd: a bare `header{}` also captured the <header> inside journal
   articles, pinning the article masthead to the top of the viewport. */
header#hd{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--gutter);
  transition:background .4s ease, box-shadow .4s ease;
}
/* once the page scrolls past the hero the bar "locks in": charcoal glass,
   wordmark inverted to white, nav text to paper. */
header.scrolled{background:rgba(32,26,20,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.25);}
.wordmark{display:flex;align-items:baseline;gap:14px;text-decoration:none;}
.wordmark img{height:17px;width:auto;display:block;transition:filter .4s ease;}
header.scrolled .wordmark img{filter:invert(1) brightness(1.9);}
/* on every screen, once the bar locks to charcoal the type yields to the
   original lockup: the A glyph beside the buildings, already white so it
   never passes through the invert filter */
.wordmark{display:grid;align-items:center;justify-items:start;}
.wordmark > img{grid-area:1/1;transition:opacity .35s ease, filter .4s ease;}
.wordmark img.wordmark-alt{height:18px;width:auto;opacity:0;}
header#hd.scrolled .wordmark img{opacity:0;}
header#hd.scrolled .wordmark img.wordmark-alt{opacity:1;filter:none;}
@media (prefers-reduced-motion:reduce){ .wordmark > img{transition:none;} }
.wordmark span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .4s ease;}
header.scrolled .wordmark span{color:rgba(245,241,234,.55);}
nav{display:flex;gap:34px;}
nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;position:relative;padding-bottom:3px;
  transition:color .3s ease;
}
header.scrolled nav a{color:rgba(245,241,234,.82);}
/* hover / current page → a per-item accent (no underline). page builders add
   class="current" to the active nav <a> (data-page convention in templates/partials.html) */
@media (hover:hover){ nav a:hover{text-shadow:0 0 .5px currentColor, 0 0 .5px currentColor;} }
nav a:nth-of-type(1):hover,nav a:nth-of-type(1).current{color:#C86A43;}
nav a:nth-of-type(2):hover,nav a:nth-of-type(2).current{color:#4F9E70;}
nav a:nth-of-type(3):hover,nav a:nth-of-type(3).current{color:#5E8296;}
nav a:nth-of-type(4):hover,nav a:nth-of-type(4).current{color:#C1912F;}
nav a:nth-of-type(5):hover,nav a:nth-of-type(5).current{color:#BE7360;}
/* the mobile drop-down lives at the foot of this file. Nothing is hidden here:
   with JS off every link stays in the row. */
.nav-toggle{display:none;}
.nav-drop{display:none;}

/* ————— hero ————— */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 0;overflow:hidden;background:var(--paper);}
/* slow gradual fade of the wind into the page colour before the ticker — no hardline */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,0.55) 55%, rgba(245,241,234,0.9) 82%, var(--paper) 100%);}
#fieldCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
/* day/night terminator wash — a soft map of where it is light vs dark on Earth right now */
#dayNightCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-inner{position:relative;z-index:2;padding-bottom:7vh;}
.kicker{margin-bottom:28px;color:var(--muted);}
.kicker b{color:var(--green);font-weight:500;}
h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px, 7.2vw, 108px);line-height:1.08;letter-spacing:-0.006em;word-spacing:.03em;max-width:16ch;
}
h1 em{font-style:italic;}
/* pad the rise-mask downward so descenders (g, y, comma, period) aren't clipped;
   negative margin keeps the layout/spacing unchanged */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .14em;margin:0 -.04em -.14em;}
.w i{display:inline-block;font-style:inherit;transform:translateY(110%);animation:rise 1s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{margin-top:36px;max-width:44ch;font-size:17px;line-height:1.65;color:var(--muted);}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
.hero-cta{display:flex;gap:28px;align-items:center;margin-top:40px;position:relative;z-index:4;}
.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);text-decoration:none;
  padding:15px 26px;border-radius:100px;display:inline-block;
  transition:background .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.btn:hover{background:var(--green);transform:translateY(-2px);}
.link-plain{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--faint);padding-bottom:3px;transition:border-color .3s;
}
.link-plain:hover{border-color:var(--ink);}

/* ————— THE ATLAS (hero easter egg) ————— */
.atlas-hint{margin-top:16px;color:var(--muted);opacity:.62;}
/* fallback tap-marks: only rendered on touch / reduced-motion, where the
   hover field can't reveal nodes. Desktop mouse users never see these. */
.atlas-dot{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;
  border:0;background:transparent;border-radius:50%;cursor:pointer;z-index:2;
  color:var(--slate);-webkit-tap-highlight-color:transparent;
}
.atlas-dot::before{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:currentColor;opacity:.6;}
.atlas-dot::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid currentColor;opacity:.22;}
.atlas-dot:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;}
/* touch only (class added by atlasFallback): the marks sleep, so the hero copy
   is never a field of invisible tap targets, and wake where a finger is. The
   target is a full 44px even though the painted mark stays small. */
.atlas-dot.sleep{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:0;pointer-events:none;transition:opacity .38s ease;}
.atlas-dot.sleep.near{opacity:1;pointer-events:auto;z-index:4;}
@media (prefers-reduced-motion:reduce){ .atlas-dot.sleep{transition:none;} }
/* top-right label — a bordered box, stacked: name / sound / discovered count */
.atlas-counter-row{
  position:absolute;top:64px;right:var(--gutter);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  padding:14px 16px;border:1px solid var(--faint);border-radius:6px;
  background:rgba(245,241,234,.42);backdrop-filter:blur(3px);
}
/* persistent section label — makes it clear this is the Atlas */
.atlas-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity .6s ease;
}
.atlas-tag.in{opacity:.8;}
.atlas-sound{
  background:none;border:none;padding:0;cursor:pointer;appearance:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity .6s ease,color .3s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.atlas-sound:hover{color:var(--ink);}
.atlas-sound.in{opacity:1;}
.atlas-sound.on{color:var(--green);}
.atlas-counter{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.atlas-counter.in{opacity:1;}
.atlas-counter .ac-num{color:var(--terracotta);font-weight:500;font-size:13px;}
/* On a phone the hero is small and the headline is the point. The Atlas label,
   sound toggle and discovery counter only compete with it, so they step aside.
   Tapping the marks still works; it just keeps its own score quietly. */
@media (max-width:720px){ .atlas-counter-row{display:none;} }
/* phones show the property title only — coordinates, clock and weather crowd
   a 150px card (and the clock/weather never start; see atlas.js) */
@media (max-width:640px){ .atlas-window .t-data{display:none;} }
.atlas-window{
  position:absolute;width:195px;height:195px;z-index:15;background:var(--ink);
  border:1px solid var(--faint);border-radius:4px;box-shadow:0 20px 60px rgba(25,21,16,.28);
  overflow:hidden;opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;
}
@media (max-width:640px){ .atlas-window{width:150px;height:150px;} }
.atlas-window.on{opacity:1;pointer-events:auto;transform:none;}
.atlas-window .media{position:absolute;inset:0;}
.atlas-window .media-inner{position:absolute;inset:0;}
.atlas-window .media-inner img,.atlas-window .media-inner video{width:100%;height:100%;object-fit:cover;display:block;}
.atlas-window .media-inner img.kb{animation:atlas-kb 18s ease-in-out infinite alternate;}
@keyframes atlas-kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-2%)}}
.atlas-window .grade{position:absolute;inset:0;pointer-events:none;}
.atlas-window .grain{
  position:absolute;inset:0;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:atlas-grain .5s steps(2) infinite;
}
@keyframes atlas-grain{0%{transform:translate(0,0)}100%{transform:translate(-2%,2%)}}
.atlas-window .scrim{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(25,21,16,.88), rgba(25,21,16,0));
}
.atlas-window .tele{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;z-index:2;}
.atlas-window .t-name{font-family:var(--serif);font-size:15px;line-height:1.2;color:var(--paper);}
.atlas-window .t-data{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:rgba(245,241,234,.78);margin-top:6px;}

/* ————— logo ticker: uniform ink ————— */
.clients-strip{
  position:relative;z-index:2;border-top:1px solid var(--faint);
  padding:18px 0 26px;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(24px,3.4vh,38px);   /* the label needs air above the marque */
  overflow:hidden;white-space:nowrap;
}
.clients-strip .label{flex:none;color:var(--muted);}
/* full-width scrolling strip; edge masks fade logos in/out so they never collide
   with the label above or hit a hard edge */
.ticker{
  display:flex;align-items:center;width:max-content;animation:drift 55s linear infinite;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
}
/* the fixed 60/120px fades were sized for a desktop strip; on a phone they
   covered more than half the visible logos */
@media (max-width:480px){
  .ticker{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
  }
}
/* wordmark logos sit at 22px; compact / badge logos (.badge) run taller so
   they don't shrink to a dot next to the wide wordmarks — optical balance.
   Logos are pre-baked as transparent ink (no white box), so just mute them. */
.ticker img{
  height:22px;width:auto;margin-right:54px;flex:none;opacity:.62;
}
.ticker img.badge{height:34px;}
.ticker img.fg{height:18px;} /* Florence Guild wordmark runs wide — trim to ~80% */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker{animation:none;}}

/* ————— section scaffold ————— */
section{padding:clamp(90px,12vh,160px) var(--gutter);}
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--ink);padding-top:18px;margin-bottom:clamp(48px,7vh,90px);
}
.sec-head .mono{color:var(--muted);}
.sec-head .num{color:var(--terracotta);}

/* ————— manifesto ————— */
.manifesto p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.4vw,46px);line-height:1.28;letter-spacing:-0.01em;max-width:26ch;
}
.manifesto p + p{margin-top:1.2em;}
.manifesto em{font-style:italic;}
/* one colour, two italics: only the word the studio owns gets the green */
.manifesto em.acc-green{color:var(--green);}
.manifesto .aside{margin-top:56px;max-width:52ch;font-family:var(--sans);font-size:16px;color:var(--muted);line-height:1.7;}

/* ————— THE STUDIO: two-column gallery layout ————— */
/* the lattice centres against the full height of the statement, and within
   its own column, so the whitespace reads deliberate on both axes */
.studio-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(40px,6vw,90px);align-items:center;}
@media (max-width:900px){.studio-grid{grid-template-columns:1fr;}}
.studio-exhibit{position:relative;display:flex;flex-direction:column;align-items:center;}
.exhibit-frame{
  position:relative;width:min(300px,100%);aspect-ratio:1;
  border:1px solid var(--faint);border-radius:4px;overflow:hidden;
  background:var(--paper);
}
#lattice{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* gallery caption — two subtle lines below the frame, aligned to its right edge */
.exhibit-cap{width:min(300px,100%);text-align:right;margin-top:14px;pointer-events:none;}
.exhibit-cap span{display:block;}
.exhibit-cap span:first-child{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink);opacity:.72;}
.exhibit-cap span:last-child{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.62;margin-top:4px;}

/* §01 problem spine */
.fix-lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.4vw,46px);line-height:1.28;letter-spacing:-0.01em;max-width:26ch;
  margin-bottom:clamp(56px,8vh,100px);
}
.problem{border-top:1px solid var(--faint);padding:clamp(48px,7vh,80px) 0;}
.problem:first-of-type{border-top:none;padding-top:0;}
.problem-title{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(24px,2.8vw,38px);line-height:1.25;letter-spacing:-0.01em;max-width:24ch;
  margin-bottom:22px;color:var(--ink);
}
.problem-prose{font-size:16px;line-height:1.75;color:var(--muted);max-width:62ch;}
.problem-components{margin-top:20px;color:var(--green);}
.quote-compact{margin-top:32px;padding-top:20px;border-top:1px solid var(--faint);max-width:52ch;}
.quote-compact blockquote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:15px;line-height:1.55;color:var(--ink);
}
.quote-compact figcaption{margin-top:14px;}
.quote-compact .who{font-weight:500;font-size:13px;}
.quote-compact .role{display:block;margin-top:4px;color:var(--muted);}
.problem .work-row{margin-top:40px;}
.practice-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.practice-grid{grid-template-columns:repeat(2,1fr);gap:40px;}}
@media (max-width:640px){.practice-grid{grid-template-columns:1fr;}}

/* ————— work index ————— */
.work-row{border-bottom:1px solid var(--faint);}
.work-row:first-of-type{border-top:1px solid var(--faint);}
.work-summary{
  display:grid;grid-template-columns:30px 92px 1.2fr 1fr auto;gap:24px;align-items:baseline;
  padding:30px 0;cursor:pointer;list-style:none;transition:padding .35s cubic-bezier(.22,1,.36,1);
}
.work-summary > .wi{align-self:center;}
.work-num{letter-spacing:.12em;text-transform:uppercase;}
.work-summary::-webkit-details-marker{display:none;}
.work-summary:hover{padding-left:10px;}
.work-num{font-family:var(--mono);font-size:12px;color:var(--terracotta);}
.work-title{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:400;line-height:1.15;}
.work-summary:hover .work-title{color:var(--terracotta);}
.work-sub{font-size:14px;color:var(--muted);}
.work-toggle{font-family:var(--mono);font-size:16px;color:var(--muted);transition:transform .4s cubic-bezier(.22,1,.36,1);}
details[open] .work-toggle{transform:rotate(45deg);}
/* the fold wrapper: 0fr to 1fr collapses padding cleanly, unlike a height animation */
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1);}
.fold.closed{grid-template-rows:0fr;}
.fold > *{min-height:0;overflow:hidden;}
@media (prefers-reduced-motion:reduce){ .fold{transition:none;} }
.work-body{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;padding:6px 0 48px 170px;max-width:1180px;}
.work-body h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px;font-weight:700;}
.work-body p{font-size:14.5px;line-height:1.7;}
.work-body ul,.o-body ul{list-style:none;margin:11px 0 0;}
.work-more{grid-column:1/-1;justify-self:start;margin-top:26px;font-size:10.5px;letter-spacing:.14em;color:var(--terracotta);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.work-more:hover{color:var(--green);}
.work-body li,.o-body li{display:flex;align-items:center;gap:11px;font-size:14px;line-height:1.6;margin-bottom:10px;}
/* the marker is a small drawn icon rather than a dash, so a scan of the column
   reads as a sequence of ideas instead of a list of dashes */
/* fill/stroke are inheritable, so they cross into the <use> shadow tree.
   Class selectors do NOT, which is why the shapes carry attributes instead. */
.bi{flex:none;width:15px;height:15px;color:var(--terracotta);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:820px){
  .work-summary{grid-template-columns:26px auto 1fr auto;gap:16px;}
  .work-sub{display:none;}
  .work-body{grid-template-columns:1fr;padding-left:0;gap:0;} .work-body>div{margin-bottom:24px;}
  .wi{width:22px;height:22px;}
}

/* ————— THE WALL / BROWSE GRID: shared tile language ————— */
.board-wrap{padding:clamp(90px,12vh,160px) var(--gutter);background:var(--paper-deep);}
.board{
  display:grid;grid-template-columns:repeat(9,1fr);gap:5px;
  perspective:1600px;
}
@media (max-width:1100px){.board{grid-template-columns:repeat(6,1fr);}}
@media (max-width:640px){.board{grid-template-columns:repeat(4,1fr);gap:4px;}}
.cell{
  aspect-ratio:1;position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1), z-index 0s .45s;
  z-index:1;
}
.cell:hover{transform:scale(1.65);z-index:20;transition:transform .45s cubic-bezier(.22,1,.36,1), z-index 0s 0s;}
.cell:hover .flap{box-shadow:0 18px 50px rgba(25,21,16,.35);}
.flap{
  position:absolute;inset:0;border-radius:3px;
  transform-style:preserve-3d;
  transform:rotateX(-92deg);
  transition:transform .65s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.board.dealt .flap{transform:rotateX(0);}
.cell.flipped .flap{transform:rotateY(180deg) !important;}
.face{
  position:absolute;inset:0;border-radius:3px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.face.front img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:filter .4s;}
.cell:hover .face.front img{filter:saturate(1.12);}
.face.back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:9px 10px;
}
.face.back .name{font-family:var(--serif);font-weight:400;font-size:clamp(10px,.95vw,13.5px);line-height:1.2;letter-spacing:-.01em;}
.face.back .where{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;}
.board-note{margin-top:26px;color:var(--muted);}

/* ————— THE GAME (replaces the wall) ————— */
.game-status-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:6px;}
.game-status{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;max-width:52ch;color:var(--ink);}
.game-meter{display:flex;align-items:center;gap:16px;flex:none;}
.meter-track{width:120px;height:1px;background:var(--faint);position:relative;}
.meter-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--green);transition:width .5s cubic-bezier(.22,1,.36,1);}
.meter-count{color:var(--muted);white-space:nowrap;}
.game-status .cel-name{font-family:var(--serif);font-style:italic;font-size:1.12em;color:var(--green);margin-right:2px;}
.game-reset{white-space:nowrap;padding:11px 2px;min-height:44px;display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent;}
.game-stage{position:relative;margin-top:32px;overflow-x:clip;}/* clip, not hidden: the parked panel sits 26px off-stage and pushed the
   document past the viewport, but hidden would also cut a card's hover scale */
.board.game-board{grid-template-columns:repeat(8,1fr);}
@media (max-width:640px){.board.game-board{grid-template-columns:repeat(4,1fr);}}

/* ————— the board runs across panels —————
   Panels stack in one grid cell (not a scroller) so a card's hover/select
   scale is never clipped; only the active panel is visible and clickable. */
.board.game-board{display:grid;grid-template-columns:none;}
.g-panel{
  grid-area:1/1;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.g-panel.on{opacity:1;pointer-events:auto;transform:none;}
@media (max-width:1100px){.g-panel{grid-template-columns:repeat(6,1fr);}}
@media (max-width:640px){.g-panel{grid-template-columns:repeat(4,1fr);gap:4px;}}
.game-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px;}
.bc-arrow{
  width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--faint);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.bc-arrow:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink);}
.bc-arrow:disabled{opacity:.28;cursor:default;}
.bc-count{color:var(--muted);white-space:nowrap;}

/* ————— animated line icons: the copy, said in symbols ————— */
.wi{width:26px;height:26px;flex:none;overflow:visible;color:var(--ink);}
.wi *{vector-effect:non-scaling-stroke;}
.wi .s{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.wi .f{fill:currentColor;stroke:none;}
.wi .accent{color:var(--terracotta);}
/* percentage origins resolve against the shape; px origins against the viewBox */
.wi-bar,.wi-rise{transform-box:fill-box;}
.wi-hand,.wi-loop{transform-box:view-box;}
.o-head .wi{width:30px;height:30px;align-self:center;}
/* i1 — qualifying concierge: enquiries fall through a filter, one qualifies */
.wi-drop{animation:wiDrop 3.4s cubic-bezier(.5,0,.6,1) infinite;}
.wi-drop2{animation:wiDrop 3.4s cubic-bezier(.5,0,.6,1) .55s infinite;}
.wi-drop3{animation:wiDrop 3.4s cubic-bezier(.5,0,.6,1) 1.1s infinite;}
@keyframes wiDrop{0%{opacity:0;transform:translateY(-4px)}18%{opacity:1}55%{opacity:1;transform:translateY(5px)}75%,100%{opacity:0;transform:translateY(7px)}}
.wi-out{animation:wiOut 3.4s ease-out 1.5s infinite;}
@keyframes wiOut{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0}}
/* i2 — agent ledger: the network reports in, one signal at a time */
.wi-n1{animation:wiPulse 3.6s ease-in-out infinite;}
.wi-n2{animation:wiPulse 3.6s ease-in-out .45s infinite;}
.wi-n3{animation:wiPulse 3.6s ease-in-out .9s infinite;}
@keyframes wiPulse{0%,60%,100%{opacity:.32;r:1.5}20%{opacity:1;r:2.3}}
.wi-bar{transform-origin:50% 100%;animation:wiBar 3.6s cubic-bezier(.22,1,.36,1) infinite;}
@keyframes wiBar{0%,100%{transform:scaleY(.35)}45%{transform:scaleY(1)}}
/* i3 — first response: the clock sweeps, the reply is already gone */
/* origin must match the dial centre in the SVG, or the hand sweeps outside it */
.wi-hand{transform-origin:9.4px 14px;animation:wiSweep 3s linear infinite;}
@keyframes wiSweep{to{transform:rotate(360deg)}}
.wi-send{animation:wiSend 3s cubic-bezier(.3,0,.2,1) infinite;}
@keyframes wiSend{0%{opacity:0;transform:translateX(-5px)}20%{opacity:1}55%{opacity:1;transform:translateX(4px)}80%,100%{opacity:0;transform:translateX(7px)}}
/* i4 — design: the line is drawn */
.wi-draw{stroke-dasharray:44;stroke-dashoffset:44;animation:wiDraw 4s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes wiDraw{0%{stroke-dashoffset:44}45%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}}
.wi-nib{animation:wiNib 4s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes wiNib{0%{opacity:0;transform:translate(-6px,4px)}12%{opacity:1}45%,72%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(4px,-3px)}}
/* i5 — build: it stacks up */
.wi-b1{animation:wiStack 3.8s cubic-bezier(.22,1,.36,1) infinite;}
.wi-b2{animation:wiStack 3.8s cubic-bezier(.22,1,.36,1) .35s infinite;}
.wi-b3{animation:wiStack 3.8s cubic-bezier(.22,1,.36,1) .7s infinite;}
@keyframes wiStack{0%{opacity:0;transform:translateY(6px)}18%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
/* i6 — run: it keeps going, and it climbs */
.wi-loop{transform-origin:12px 12px;animation:wiSweep 5.5s linear infinite;}
.wi-rise{transform-origin:50% 100%;animation:wiRise 3.4s cubic-bezier(.22,1,.36,1) infinite;}
@keyframes wiRise{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* face-up media cards: the film/still is always visible; find the two faces
   (day + night) of the same place */
.g-card{
  aspect-ratio:1;position:relative;border-radius:3px;overflow:hidden;cursor:pointer;
  background:var(--ink);border:0;padding:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.g-card .g-media{position:absolute;inset:0;}
.g-card .g-media img,.g-card .g-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.84;transition:opacity .4s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.g-card:hover .g-media img,.g-card:hover .g-media video{opacity:1;}
/* ————— the flip: photo on the front, a playing card on the back —————
   Each face turns on its own axis (no preserve-3d): WebKit ignores
   backface-visibility inside a clipped 3D subtree, which showed the front
   mirrored through its own back. Self-rotating faces cannot mis-render. */
.g-card{perspective:700px;}
.g-flip{position:absolute;inset:0;}
.g-face{
  position:absolute;inset:0;border-radius:3px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.gf-front{transform:rotateY(0deg);}
.g-card.sel .gf-front{transform:rotateY(-180deg);}
.g-card.sel .gf-back{transform:rotateY(0deg);}
.gf-back{
  transform:rotateY(180deg);
  /* each back is washed and ruled in its property's own accent (--pc, set per
     card by game.js), so a spread of turned cards carries the whole palette */
  background:color-mix(in srgb, var(--pc, var(--terracotta)) 9%, var(--paper));
  border:1px solid var(--pc, var(--terracotta));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px;text-align:center;
}
/* the double frame of a playing card */
.gf-back::after{content:'';position:absolute;inset:4px;border:1px solid color-mix(in srgb, var(--pc, var(--terracotta)) 45%, transparent);border-radius:2px;pointer-events:none;}
.gb-ico{width:34px;height:34px;color:var(--pc, var(--terracotta));fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.gb-name{font-family:var(--serif);font-size:12.5px;line-height:1.15;color:var(--ink);}
.gb-where{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.gb-pip{position:absolute;width:12px;height:12px;color:var(--pc, var(--terracotta));opacity:.6;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.pip-tl{top:7px;left:7px;}
.pip-br{bottom:7px;right:7px;transform:rotate(180deg);}
.g-card.sel{box-shadow:inset 0 0 0 2px var(--terracotta);transform:scale(1.03);z-index:2;}
.g-card.sel .g-media img,.g-card.sel .g-media video{opacity:1;transform:scale(1.05);}
.g-card.matched{box-shadow:inset 0 0 0 2px var(--green);}
.g-card.matched .g-media img,.g-card.matched .g-media video{opacity:1;}
.g-card:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:4px;}
.g-card .g-name{
  position:absolute;left:0;right:0;bottom:0;padding:8px 9px 7px;pointer-events:none;
  font-family:var(--serif);font-size:13px;line-height:1.15;color:var(--paper);
  background:linear-gradient(to top, rgba(25,21,16,.82), rgba(25,21,16,0));
  opacity:0;transform:translateY(4px);transition:opacity .45s ease, transform .45s ease;
}
/* the card "flips" its name up the moment you choose it — that reveal is how
   the matching game teaches itself, so no instructions are needed */
.g-card.sel .g-name,.g-card.matched .g-name{opacity:1;transform:none;}

/* ————— services ————— */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
@media (max-width:820px){.svc-grid{grid-template-columns:1fr;gap:48px;}}
.svc .mono{color:var(--green);}
.svc h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin:16px 0 18px;letter-spacing:-.01em;}
.svc p{font-size:15px;color:var(--muted);line-height:1.7;}
.svc ul{margin-top:22px;list-style:none;}
.svc li{font-size:13.5px;padding:9px 0;border-top:1px solid var(--faint);}

/* practice accordion body — lead paragraph + grounded tools/tactics box */
.practice-body{display:block;max-width:860px;}
.practice-lead{font-size:15px;line-height:1.72;color:var(--muted);max-width:62ch;margin-bottom:26px;}
.tools-box{border:1px solid var(--faint);border-radius:8px;padding:20px 22px;background:rgba(25,21,16,.02);}
.tools-label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:14px;}
/* align-items:flex-start is load-bearing: a flex row stretches its items to the
   tallest one, so without it expanding one pill dragged its neighbour open too */
.tools-tags{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;}
/* built as a <button> in site.js — the explanation used to be hover-only, which
   left every one of them unreachable on a phone. It is now driven by .open. */
.tool-tag{flex-shrink:0;display:inline-flex;flex-direction:column;align-items:center;text-align:center;font-family:inherit;font-size:11px;letter-spacing:.05em;color:var(--ink);opacity:.86;border:1px solid var(--faint);border-radius:100px;padding:7px 14px;background:var(--paper);cursor:pointer;transition:border-color .35s,border-radius .35s,padding .35s;max-width:100%;-webkit-tap-highlight-color:transparent;}
.tool-tag.open,.tool-tag:focus-visible{border-color:var(--green);border-radius:13px;outline:none;}

@media (hover:hover){ .tool-tag:hover{border-color:var(--green);border-radius:13px;} }
.tool-tag .tt-label{white-space:nowrap;}
.tool-tag{position:relative;}
/* Two expansions, one markup. DESKTOP: the card is an overlay that grows out
   of the pill's own corner on hover — it repeats the label as its title and
   never touches the flex flow. (In-flow growth under a cursor is a feedback
   loop: the row re-wraps, the pill slides out from under the pointer, hover
   ends, it snaps back, forever — worst at row ends, which is exactly where
   "Reporting & iteration" used to glitch.) PHONES have no cursor, so there
   the SAME pop expands truly in place: the tapped pill widens to its row and
   the description unfolds inside it. */
.tt-pop-t{display:block;font-weight:600;color:var(--ink);}
@media (min-width:641px){
  /* each pill is its own stacking context (opacity:.86), so the active pill
     must outrank later siblings or its card paints beneath them */
  .tool-tag:hover,.tool-tag.open,.tool-tag:focus-visible{z-index:9;}
  .tool-tag .tt-pop{
    position:absolute;top:-1px;left:-1px;
    width:max-content;min-width:calc(100% + 2px);max-width:calc(100% + 2px);
    background:var(--paper);border:1px solid var(--green);border-radius:100px;
    padding:6px 13px;opacity:0;pointer-events:none;
    font-family:var(--sans);text-transform:none;letter-spacing:0;
    font-size:12px;line-height:1.6;color:var(--muted);text-align:left;
    transition:max-width .36s cubic-bezier(.22,1,.36,1),padding .36s cubic-bezier(.22,1,.36,1),border-radius .36s ease,opacity .16s ease,box-shadow .36s ease;
  }
  /* near the right edge of its box the card grows leftward instead (site.js) */
  .tool-tag .tt-pop.tt-flip{left:auto;right:-1px;}
  .tool-tag .tt-pop .tt-pop-t{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;margin-bottom:0;transition:margin-bottom .36s cubic-bezier(.22,1,.36,1);}
  .tool-tag .tt-pop .tt-pop-in{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.22,1,.36,1);}
  .tool-tag .tt-pop .tt-pop-x{display:block;min-height:0;overflow:hidden;}
  .tool-tag.open .tt-pop,.tool-tag:focus-visible .tt-pop,
  .tool-tag:hover .tt-pop{
    opacity:1;pointer-events:auto;max-width:min(340px,74vw);border-radius:13px;
    padding:11px 15px;box-shadow:0 18px 40px -18px rgba(25,21,16,.4);
  }
  .tool-tag.open .tt-pop .tt-pop-t,.tool-tag:focus-visible .tt-pop .tt-pop-t,.tool-tag:hover .tt-pop .tt-pop-t{margin-bottom:4px;}
  .tool-tag.open .tt-pop .tt-pop-in,.tool-tag:focus-visible .tt-pop .tt-pop-in,.tool-tag:hover .tt-pop .tt-pop-in{grid-template-rows:1fr;}
}
@media (max-width:640px){
  .tool-tag.open{flex-basis:100%;align-items:flex-start;text-align:left;padding:12px 14px;opacity:1;}
  .tool-tag.open .tt-label{font-weight:600;}
  .tool-tag .tt-pop{
    /* width:0 + min-width:100% = the pop tracks the pill's width without ever
       CONTRIBUTING width, so the text cannot fatten the closed pill */
    display:grid;grid-template-rows:0fr;opacity:0;width:0;min-width:100%;
    font-family:var(--sans);text-transform:none;letter-spacing:0;
    font-size:12px;line-height:1.62;color:var(--muted);text-align:left;
  }
  .tool-tag .tt-pop .tt-pop-in{min-height:0;overflow:hidden;}
  .tool-tag .tt-pop .tt-pop-t{display:none;} /* the pill's own label is the title */
  .tool-tag.open .tt-pop{
    grid-template-rows:1fr;opacity:1;margin-top:6px;
    transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1),opacity .26s ease .06s,margin-top .34s cubic-bezier(.22,1,.36,1);
  }
}
@media (prefers-reduced-motion:reduce){
  .tool-tag,.tool-tag .tt-pop,.tool-tag.open .tt-pop,.tool-tag .tt-pop .tt-pop-in,.tool-tag .tt-pop .tt-pop-t{transition:none;}
}

/* ————— VOICES: rotating testimonials ————— */
.voices{min-height:92vh;display:flex;flex-direction:column;justify-content:center;background:var(--paper-deep);}
.voice-stage{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,6vw,90px);align-items:center;
  max-width:1080px;margin:0 auto;width:100%;
}
@media (max-width:760px){.voice-stage{grid-template-columns:1fr;justify-items:center;text-align:center;}}
.voice-blob{
  width:clamp(180px,22vw,280px);height:clamp(180px,22vw,280px);
  position:relative;overflow:hidden;flex:none;
  animation:morph 11s ease-in-out infinite;
  box-shadow:0 24px 70px rgba(25,21,16,.18);
}
@keyframes morph{
  0%,100%{border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;}
  33%{border-radius:44% 56% 40% 60% / 60% 42% 58% 40%;}
  66%{border-radius:60% 40% 62% 38% / 40% 55% 45% 60%;}
}
.voice-blob .vb{
  position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  display:flex;align-items:center;justify-content:center;
}
.voice-blob .vb.on{opacity:1;}
.voice-blob .vb img{
  width:112%;height:112%;object-fit:cover;
  animation:vpan 16s ease-in-out infinite alternate;
}
@keyframes vpan{from{transform:translate(-3%,-3%) scale(1)}to{transform:translate(3%,3%) scale(1.07)}}
.voice-blob .vb.abstract span{font-family:var(--serif);font-style:italic;font-size:64px;color:var(--ink);opacity:.5;}
.voice-copy{display:grid;width:100%;}
.voice{
  grid-area:1/1;opacity:0;transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.voice.on{opacity:1;transform:none;pointer-events:auto;}
.voice blockquote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(18px,1.9vw,25px);line-height:1.55;max-width:44ch;text-wrap:balance;
}
.voice figcaption{margin-top:28px;}
.voice .who{font-weight:500;font-size:14px;}
.voice .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.voice-dots{display:flex;gap:0;justify-content:center;margin-top:clamp(40px,6vh,70px);}
/* the painted mark stays 9px; on touch the BUTTON grows to 44px so a
   fingertip can hit it. At 9px with a 10px gap these were a fifth of the
   minimum target and adjacent dots overlapped under one finger. */
.vdot{
  width:21px;height:21px;border:none;cursor:pointer;padding:0;background:none;
  border-radius:50%;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
}
@media (hover:none){ .vdot{width:44px;height:44px;} }
.vdot::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:var(--faint);transition:background .3s, transform .3s;
}
.vdot.on::before{background:var(--terracotta);transform:scale(1.35);}

/* ————— THE COLLECTIVE ————— */
.collective{background:var(--ink);color:var(--paper);}
.collective .sec-head{border-top-color:var(--paper);}
.collective .sec-head .mono{color:rgba(245,241,234,.55);}
.collective .sec-head .num{color:var(--blush);}
.collective-intro{
  font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.6vw,34px);
  line-height:1.35;max-width:30ch;margin-bottom:clamp(30px,4.5vh,54px);
}
.collective-intro em{font-style:italic;color:var(--sage);}

/* ————— collective: pill filter + collapsible body ————— */
.collective-filter{display:flex;flex-wrap:wrap;gap:10px;}
.cfilter{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:9px 17px;min-height:38px;border-radius:100px;cursor:pointer;line-height:1;
  background:transparent;color:rgba(245,241,234,.72);
  border:1px solid rgba(245,241,234,.24);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.cfilter:hover{color:var(--paper);border-color:rgba(245,241,234,.5);}
.cfilter .cf-x{opacity:.55;font-size:10px;}
.cfilter.on{border-color:transparent;}
.cfilter.cf-all.on{background:var(--paper);color:var(--ink);}
.cfilter.cf-partner.on{background:var(--terracotta);color:#2a140d;}
.cfilter.cf-collaborator.on{background:var(--green);color:#07210f;}
.cfilter.cf-advisor.on{background:#7E96A8;color:#0c1720;}
.collective-body{
  max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .8s cubic-bezier(.22,1,.36,1),opacity .55s ease,margin-top .55s ease;
}
/* max-height is measured and set inline by site.js, not guessed here */
#people.expanded .collective-body{opacity:1;margin-top:clamp(40px,6vh,72px);}
/* named profile cards — organic circular avatars, click to open a profile */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(30px,3.6vw,52px);align-items:start;max-width:1000px;}
/* phones read the collective as a rail, not a tower: swipe left to right,
   with the screen edge promising the next card */
@media (max-width:720px){
  .people-grid{
    display:grid;grid-auto-flow:column;grid-auto-columns:236px;grid-template-columns:none;
    gap:22px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 18px;
    scroll-padding-left:var(--gutter);
    scrollbar-width:none;max-width:none;
  }
  .people-grid::-webkit-scrollbar{display:none;}
  .people-grid > *{scroll-snap-align:start;}
}
/* rail affordance — ‹ › under the phone rail, in the journal-rail pattern.
   Hidden on desktop (the collective is a grid there) and hidden whenever the
   filtered set does not actually overflow (site.js toggles .scrollable). */
.c-nav{display:none;}
@media (max-width:720px){
  .c-nav{display:flex;gap:12px;justify-content:center;margin:8px 0 0;}
  .c-nav:not(.scrollable){display:none;}
  .c-arrow{
    width:40px;height:40px;border-radius:50%;border:1px solid rgba(245,241,234,.35);
    background:none;color:var(--paper);font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0 0 2px;
    transition:opacity .3s ease,border-color .3s ease;-webkit-tap-highlight-color:transparent;
  }
  .c-arrow:disabled{opacity:.28;}
  .c-arrow:not(:disabled):active{border-color:var(--blush);}
}
.people-group-label{margin:clamp(44px,6vh,76px) 0 clamp(22px,3vh,34px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,234,.4);}
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--paper);background:none;border:0;padding:0;cursor:pointer;font:inherit;}
.p-photo{
  width:clamp(148px,82%,186px);height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#2a2620;
  border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;   /* organic circle */
  animation:morph 16s ease-in-out infinite;
  filter:grayscale(.14) contrast(1.02);
  transition:filter .5s ease, transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.profile:hover .p-photo{filter:grayscale(0) contrast(1.02);transform:translateY(-4px) scale(1.02);box-shadow:0 18px 44px rgba(0,0,0,.34);}
.p-mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:clamp(38px,5vw,54px);color:var(--ink);}
.p-invite{background:transparent;border:1px dashed rgba(245,241,234,.3);color:rgba(245,241,234,.5);font-style:normal;transition:border-color .3s,color .3s;animation:none;}
.profile.you:hover .p-invite{border-color:var(--sage);color:var(--sage);transform:none;box-shadow:none;}
.p-name{font-family:var(--serif);font-size:19px;line-height:1.2;margin-top:20px;}
.p-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,234,.55);margin-top:7px;}
/* category pill — partner / collaborator / advisor, colour-coded, one grid */
.p-pill{display:inline-block;margin-top:10px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:var(--terracotta);border-radius:100px;padding:4px 11px;}
.pp-pill{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:var(--terracotta);border-radius:100px;padding:4px 12px;margin-right:10px;vertical-align:middle;}
.pp-role .pp-role-text{vertical-align:middle;}
.p-cat-partner,.pp-cat-partner{background:#D0806A;}
.p-cat-collaborator,.pp-cat-collaborator{background:#569A6E;}
.p-cat-advisor,.pp-cat-advisor{background:#46606E;}
.pp-bg{font-size:13.5px;line-height:1.65;color:rgba(245,241,234,.7);}
.p-bio{font-size:13px;line-height:1.6;color:rgba(245,241,234,.66);margin-top:12px;max-width:26ch;}
.p-more{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);margin-top:14px;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;}
.profile:hover .p-more,.profile:focus-visible .p-more{opacity:1;transform:none;}
.profile:focus-visible{outline:2px solid var(--sage);outline-offset:6px;border-radius:8px;}

/* slide-over profile panel */
.person-panel{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;visibility:hidden;}
.person-panel.on{visibility:visible;}
.pp-scrim{position:absolute;inset:0;background:rgba(12,10,7,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .5s ease;}
.person-panel.on .pp-scrim{opacity:1;}
.pp-sheet{overscroll-behavior:contain;
  position:relative;width:min(500px,94vw);height:100%;overflow-y:auto;
  background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,52px);
  transform:translateX(102%);transition:transform .62s cubic-bezier(.22,1,.36,1);
  box-shadow:-30px 0 80px rgba(0,0,0,.4);
}
.person-panel.on .pp-sheet{overscroll-behavior:contain;transform:none;}
.pp-close{position:absolute;top:14px;right:16px;width:44px;height:44px;border:1px solid rgba(245,241,234,.24);background:none;color:var(--paper);border-radius:50%;font-size:16px;line-height:1;cursor:pointer;transition:border-color .3s,color .3s,transform .3s;}
.pp-close:hover{border-color:var(--terracotta);color:var(--terracotta);transform:rotate(90deg);}
.pp-close:focus-visible{outline:2px solid var(--sage);outline-offset:2px;}
.pp-avatar{width:120px;aspect-ratio:1;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#2a2620;border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;animation:morph 16s ease-in-out infinite;font-family:var(--serif);font-style:italic;font-size:52px;color:var(--ink);}
.pp-name{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);line-height:1.1;margin-top:26px;}
.pp-role{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);margin-top:10px;}
.pp-bio{font-size:15px;line-height:1.7;color:rgba(245,241,234,.8);margin-top:24px;}
.pp-sec{margin-top:30px;padding-top:26px;border-top:1px solid rgba(245,241,234,.14);}
.pp-sec-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,241,234,.45);margin-bottom:14px;}
.pp-chips{display:flex;flex-wrap:wrap;gap:9px;}
.pp-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,241,234,.82);border:1px solid rgba(245,241,234,.2);border-radius:100px;padding:7px 14px;}
.pp-works{font-size:14px;line-height:1.7;color:rgba(245,241,234,.78);}
.pp-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--sage);text-decoration:none;border-bottom:1px solid rgba(86,154,110,.4);padding-bottom:3px;transition:color .3s,border-color .3s;}
.pp-link:hover{color:var(--blush);border-color:var(--blush);}
.pp-link .arr{transition:transform .3s;}
.pp-link:hover .arr{transform:translate(3px,-3px);}
.bench{margin-top:clamp(48px,7vh,84px);display:flex;flex-direction:column;gap:16px;}
.bench-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,234,.42);}
.bench-tags{display:flex;flex-wrap:wrap;gap:10px;}
.bench-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,241,234,.72);border:1px solid rgba(245,241,234,.18);border-radius:100px;padding:7px 14px;transition:border-color .3s,color .3s;}
.bench-tag:hover{border-color:var(--sage);color:var(--sage);}

/* ————— WORK: editorial case studies (work.html) ————— */
.o-section{border-top:1px solid var(--faint);padding:clamp(56px,8vh,88px) 0;}
section#work .o-section:first-of-type{border-top:none;}
.o-head{display:grid;grid-template-columns:88px 1fr;column-gap:20px;align-items:center;margin-bottom:10px;}
.o-head .wi{grid-column:1;grid-row:1;justify-self:center;align-self:end;}
.o-head .o-num{grid-column:1;grid-row:2;justify-self:center;width:auto;margin-top:6px;}
.o-head .o-title{grid-column:2;grid-row:1/3;}
.o-num{font-family:var(--mono);font-size:13px;color:var(--terracotta);letter-spacing:.12em;text-transform:uppercase;}
.o-title{font-family:var(--serif);font-size:clamp(30px,4.2vw,54px);font-weight:400;line-height:1.12;letter-spacing:-.01em;}
.o-context{font-size:15px;color:var(--muted);max-width:56ch;margin-bottom:clamp(36px,5vh,56px);}
.o-body{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;max-width:1120px;}
/* each column subgrids onto three shared rows (heading / intro / bullets), so
   the intros level with each other and every bullet list starts on one line */
.o-body > div,.work-body > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;}
/* the fixed label column makes every title start at the same x (icon 30 +
   gap 20 + num 88 + gap 20 = 158); the body and context then align to it */
@media (min-width:821px){ .o-body,.o-context{margin-left:108px;max-width:1050px;} }
.o-body h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px;font-weight:700;}
.o-body p{font-size:15px;line-height:1.75;}
@media (max-width:820px){.o-body{grid-template-columns:1fr;gap:0;} .o-body>div{margin-bottom:24px;}}
.o-band{
  position:relative;margin:clamp(48px,7vh,72px) calc(-1 * var(--gutter)) 0;
  width:calc(100% + var(--gutter) * 2);overflow:hidden;
  /* a letterbox, not a wall: the plate sets the scene without owning the page */
  height:clamp(170px,24vh,260px);
}
@media (max-width:640px){.o-band{height:clamp(140px,22vh,200px);}}
.o-band img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);will-change:transform;}
@media (prefers-reduced-motion:reduce){.o-band img{transform:none;}}

/* ————— footer band: ink-background footer container for pages that
   close on a plain (non-contact) section, so the light-on-dark footer
   styling above stays legible. Not present in v5 (single-page site had
   only one footer, inside .contact) — added for the multi-page split. ————— */
.foot-band{background:var(--ink);color:var(--paper);padding:56px var(--gutter) 48px;}
.foot-band .foot{margin-top:0;border-top:none;padding-top:0;}
.foot-top{display:flex;align-items:center;justify-content:space-between;}
.foot-social{display:flex;gap:4px;margin-right:-11px;}
.foot-social a{display:grid;place-items:center;width:42px;height:42px;color:rgba(245,241,234,.6);transition:color .3s ease;}
.foot-social a:hover{color:var(--paper);}
.foot-social svg{width:19px;height:19px;fill:currentColor;display:block;}
.foot-copy{color:rgba(245,241,234,.4);font-size:10px;}

/* ————— journal: editorial index ————— */
.j-masthead{max-width:60ch;margin-bottom:clamp(26px,3.5vh,44px);}
.j-standfirst{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px,4vw,52px);
  line-height:1.16;letter-spacing:-.02em;max-width:20ch;
}
.journal-note{color:var(--muted);margin-top:22px;}

/* ————— cookie notice —————
   A quiet paper card, bottom-left, in the house voice of the site: mono label,
   plain sentence, one dark button and one plain link. */
.cookie-bar{
  position:fixed;z-index:80;left:var(--gutter);bottom:clamp(18px,3vh,30px);
  width:min(430px,calc(100vw - var(--gutter)*2));
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 22px 60px rgba(25,21,16,.20);
  padding:22px 24px 20px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.cookie-bar.on{opacity:1;transform:none;pointer-events:auto;}
.cookie-bar .ck-label{display:block;color:var(--terracotta);margin-bottom:11px;}
.cookie-bar p{font-size:13.5px;line-height:1.62;color:var(--muted);margin-bottom:18px;}
.cookie-bar a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.ck-row{display:flex;align-items:center;gap:20px;}
.ck-accept{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  padding:12px 22px;border-radius:100px;transition:background .3s ease,transform .3s ease;
}
.ck-accept:hover{background:var(--terracotta);}
.ck-decline{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;color:var(--muted);padding:12px 4px;
  min-height:44px;text-decoration:underline;text-underline-offset:3px;transition:color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.ck-decline:hover{color:var(--ink);}
@media (max-width:620px){ .cookie-bar{left:12px;right:12px;width:auto;padding:18px;} }
@media (prefers-reduced-motion:reduce){ .cookie-bar{transition:none;} }

/* ————— journal: vertical-card carousel —————
   Each entry is a tall editorial card: hairline rule, category, image,
   headline, standfirst, read time. The rail scrolls horizontally and the
   arrows page it by one card; they disable themselves when nothing overflows. */
.j-rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px;}
.j-rail-label{color:var(--muted);}
/* arrows hold the right edge whether or not a label sits opposite them */
.j-nav{display:flex;gap:10px;flex:none;margin-left:auto;}
.j-arrow{
  width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--faint);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.j-arrow:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink);}
.j-arrow:disabled{opacity:.28;cursor:default;}
.j-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:clamp(22px,3vw,46px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.j-rail::-webkit-scrollbar{display:none;}
@media (max-width:1080px){ .j-rail{grid-auto-columns:minmax(300px,68%);} }
@media (max-width:620px){ .j-rail{grid-auto-columns:minmax(240px,86%);} }
.j-card{
  scroll-snap-align:start;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;min-width:0;
}
.j-card-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1.5px solid var(--ink);padding-top:13px;
}
.j-cat{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.9vw,25px);
  text-transform:uppercase;letter-spacing:.015em;line-height:1;
}
.j-see{
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s ease;
}
.j-card:hover .j-see{color:var(--terracotta);}
.j-shot{margin:17px 0 0;overflow:hidden;background:var(--paper-deep);aspect-ratio:4/3;}
.j-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:transform 1s cubic-bezier(.22,1,.36,1),filter .5s ease;
}
.j-card:hover .j-shot img{transform:scale(1.045);filter:saturate(1.06);}
.j-card h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.85vw,26px);
  line-height:1.22;letter-spacing:-.012em;margin-top:20px;
  transition:color .3s ease,font-style .2s ease;
}
.j-card:hover h3{color:var(--green);}
.j-card p{color:var(--muted);font-size:15px;line-height:1.62;margin-top:13px;}
.j-meta{
  margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:9px;
  color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
}
.j-meta svg{width:15px;height:15px;flex:none;opacity:.7;}

/* ————— journal article page ————— */
/* the trailing padding keeps the charcoal footer band off the prev/next titles */
.article{padding:calc(clamp(80px,11vh,140px) + 40px) var(--gutter) clamp(70px,10vh,120px);}
.a-wrap{max-width:1080px;margin:0 auto;}
.a-back{display:inline-flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none;transition:color .3s ease;}
.a-back:hover{color:var(--terracotta);}
.a-head{max-width:none;margin-top:clamp(30px,5vh,54px);}
.a-kicker{display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--muted);margin-bottom:26px;}
.a-kicker .a-cat{color:var(--terracotta);}
.a-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,70px);
  line-height:1.04;letter-spacing:-.028em;max-width:16ch;
}
.a-stand{
  font-family:var(--sans);font-size:clamp(17px,1.6vw,21px);line-height:1.55;
  color:var(--muted);max-width:56ch;margin-top:clamp(24px,3.5vh,36px);
}
.a-byline{
  margin-top:clamp(26px,4vh,40px);padding-top:18px;border-top:1px solid var(--faint);
  color:var(--muted);max-width:56ch;
}
.a-hero{margin:clamp(40px,6vh,72px) 0 0;overflow:hidden;background:var(--paper-deep);}
.a-hero img{width:100%;height:auto;display:block;}
.a-cap{margin-top:12px;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.a-body{max-width:68ch;margin:clamp(48px,7vh,88px) 0 0;}
.a-body > p{font-size:17px;line-height:1.75;margin-bottom:24px;}
.a-body > p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.1em;line-height:.82;float:left;
  padding:6px 12px 0 0;color:var(--ink);
}
.a-body h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.9vw,38px);
  line-height:1.14;letter-spacing:-.02em;margin:clamp(46px,6vh,74px) 0 22px;
}
.a-body h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);font-weight:500;margin:clamp(34px,4.5vh,52px) 0 16px;
}
.a-body ul{list-style:none;margin:0 0 26px;}
.a-body li{
  position:relative;padding-left:26px;font-size:16.5px;line-height:1.7;margin-bottom:13px;
}
.a-body li::before{
  content:'';position:absolute;left:2px;top:.72em;width:9px;height:1px;background:var(--terracotta);
}
.a-body li strong{font-weight:500;}
.a-body em{font-style:italic;}
.a-rule{border:0;border-top:1px solid var(--faint);margin:clamp(44px,6vh,72px) 0;}
.a-pull{
  margin:clamp(48px,6.5vh,84px) 0;padding:clamp(28px,4vh,44px) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.a-pull p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(22px,2.9vw,36px);line-height:1.26;letter-spacing:-.018em;max-width:24ch;
}
.a-pull cite{
  display:block;margin-top:20px;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.a-figure{margin:clamp(40px,5.5vh,68px) 0;}
.a-figure img{width:100%;height:auto;display:block;background:var(--paper-deep);}
.a-figure figcaption{margin-top:12px;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.a-note{
  background:var(--paper-deep);padding:clamp(24px,3.5vh,36px);margin:clamp(40px,5vh,64px) 0;
}
.a-note h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:14px;}
.a-note p{font-size:15.5px;line-height:1.7;color:var(--muted);}
.a-next{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);
  margin:clamp(60px,9vh,110px) 0 0;padding-top:34px;border-top:1px solid var(--ink);
}
.a-next a{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px;}
.a-next .an-dir{color:var(--muted);}
.a-next .an-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,27px);line-height:1.2;letter-spacing:-.015em;
  transition:color .3s ease,font-style .2s ease;
}
.a-next a:hover .an-title{color:var(--green);}
.a-next .an-r{text-align:right;align-items:flex-end;}

/* ————— legal: a document, not an article —————
   Same page furniture, none of the editorial flourish: no drop cap, no display
   headline, tighter measure and smaller type. It should read as a notice. */
.legal .a-title{font-size:clamp(23px,2.6vw,32px);line-height:1.15;letter-spacing:-.012em;max-width:24ch;}
.legal .a-kicker{margin-bottom:18px;}
.legal .a-stand{font-size:15px;line-height:1.6;max-width:66ch;margin-top:16px;}
.legal .a-byline{margin-top:20px;padding-top:14px;}
.legal .a-body{max-width:74ch;margin-top:clamp(34px,5vh,54px);}
.legal .a-body > p{font-size:15px;line-height:1.72;margin-bottom:16px;}
.legal .a-body > p:first-of-type::first-letter{font-size:inherit;line-height:inherit;float:none;padding:0;font-family:inherit;}
.legal .a-body h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin:clamp(34px,4.5vh,46px) 0 14px;
  padding-top:16px;border-top:1px solid var(--faint);
}
.legal .a-body h3{color:var(--muted);margin:24px 0 10px;letter-spacing:.12em;}
.legal .a-body li{font-size:15px;line-height:1.65;margin-bottom:9px;}
.legal .a-body li::before{background:var(--faint);}
.legal .a-rule{display:none;}
@media (max-width:700px){
  .a-next{grid-template-columns:1fr;gap:28px;}
  .a-next .an-r{text-align:left;align-items:flex-start;}
  .a-body > p:first-of-type::first-letter{font-size:2.6em;}
}

/* ————— contact / footer (with its own field) ————— */
.contact{
  position:relative;background:var(--ink);color:var(--paper);
  padding:clamp(100px,16vh,200px) var(--gutter) 48px;overflow:hidden;
}
#contactCanvas{position:absolute;inset:0;width:100%;height:100%;}
.contact > *:not(canvas){position:relative;z-index:2;}
.contact .mono{color:rgba(245,241,234,.5);}
.contact h2{
  font-family:var(--serif);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(38px,6vw,88px);line-height:1.05;margin-top:26px;max-width:18ch;
}
.contact h2 em{font-style:italic;}
.contact a.mail{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(245,241,234,.3);transition:border-color .3s,color .3s;}
.contact a.mail:hover{border-color:var(--sage);color:var(--sage);}
/* on contact.html this section is the whole page, so it fills the viewport and
   drops the footer to the floor. Scoped to .contact-page: on index.html the same
   .contact block is one section among many and must keep its natural height. */
.contact-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
.contact-page .foot{margin-top:auto;}
.foot{
  display:flex;flex-direction:column;gap:18px;
  border-top:1px solid rgba(245,241,234,.14);
  padding-top:clamp(26px,4vh,40px);margin-top:clamp(48px,7vh,80px);
}
.foot img{height:14px;width:auto;filter:invert(1) brightness(1.6);opacity:.75;}
.foot .mono{font-size:10px;}
/* wrap is load-bearing: the five links need 370px and the column is 312px on a
   phone, so without it "Email" left the screen and took the document 34px wider
   than the viewport with it. */
.foot-links{display:flex;flex-wrap:wrap;gap:12px 22px;}
.foot-links a{color:rgba(245,241,234,.6);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s;}
.foot-links a:hover{color:var(--paper);}

/* ————— 404 ————— */
.notfound{
  min-height:100vh;position:relative;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;padding:0 var(--gutter);overflow:hidden;
}
.notfound canvas{position:absolute;inset:0;width:100%;height:100%;}
.notfound > *{position:relative;z-index:2;}
.notfound h1{
  font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,56px);
  line-height:1.15;letter-spacing:-.01em;max-width:18ch;margin:22px 0 30px;
}

/* ————— reveal ————— */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .w i{animation:none;transform:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .flap{transition:none;transform:rotateX(0);}
  .person,.blob,.voice-blob,.vb img,.p-photo,.pp-avatar{animation:none;}
  .pp-sheet,.pp-scrim{transition:none;}
  .g-card,.g-card .g-media img,.g-card .g-media video{transition:none;}
  .g-flip{transition:none;}
  .atlas-window{transition:none;}
  .atlas-window .media-inner img.kb,.atlas-window .grain{animation:none;}
  .g-face.front img.live-still,.g-face.front .live-grain{animation:none;}
  .wi *{animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important;}
  .g-panel{transition:none;}
  .j-rail{scroll-behavior:auto;}
  .j-shot img,.j-card h3{transition:none;}
}

/* ============================================================
   MOBILE
   Phones read this site one column at a time, so the job here is to let each
   section fold down cleanly, keep everything thumb-reachable, and put controls
   where a hand will not cover the thing it is controlling.
   ============================================================ */
@media (max-width:720px){

  /* ————— header: Contact stays out, the rest folds away —————
     Five destinations will not sit legibly across a phone bar. Contact is the
     one a visitor reaches for in a hurry, so it keeps its place; Work, Clients,
     Studio and Field Notes move into the drop-down. The hiding rule is gated on
     .has-menu, which only JS adds, so a no-JS phone keeps the full row. */
  header#hd{padding:11px var(--gutter);}
  header#hd.has-menu nav a:not(.nav-contact){display:none;}
  nav{gap:0;align-items:center;}
  nav a{font-size:10.5px;letter-spacing:.12em;padding-bottom:0;}
  .nav-contact{padding:13px 0;}
  /* the bar and the open panel need to read as one sheet of paper, so the bar
     takes the panel's background early rather than waiting for .scrolled */
  header#hd.menu-open{background:var(--paper);}
  header#hd.scrolled.menu-open{background:#201A14;}

  .nav-toggle{
    display:grid;place-items:center;
    width:44px;height:44px;margin:0 -12px 0 14px;
    background:none;border:0;padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nt-bars{position:relative;display:block;width:19px;height:11px;}
  .nt-bars i{
    position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:var(--ink);
    transition:transform .42s cubic-bezier(.22,1,.36,1),background-color .4s ease;
  }
  .nt-bars i:nth-child(1){top:0;}
  .nt-bars i:nth-child(2){bottom:0;}
  header#hd.scrolled .nt-bars i,header#hd.scrolled.menu-open .nt-bars i{background:rgba(245,241,234,.9);}
  /* two rules fold into a cross — no icon swap, just the same two strokes */
  .menu-open .nt-bars i:nth-child(1){transform:translateY(4.75px) rotate(45deg);}
  .menu-open .nt-bars i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg);}

  .nav-drop{
    position:absolute;top:100%;left:0;right:0;
    display:grid;grid-template-rows:0fr;
    /* opaque, not glass: a menu that lets the page ghost through is unreadable,
       and backdrop-filter over a scrolling page is expensive on phones */
    background:var(--paper);
    transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1);
  }
  header#hd.scrolled .nav-drop{background:#201A14;}
  .menu-open .nav-drop{grid-template-rows:1fr;box-shadow:0 16px 28px -20px rgba(25,21,16,.55);}
  .nav-drop-inner{min-height:0;overflow:hidden;}
  .nav-drop a{
    display:block;padding:16px var(--gutter);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;border-top:1px solid var(--faint);
    opacity:0;transform:translateY(-7px);
    transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1),color .3s ease;
    transition-delay:calc(var(--i) * 45ms);
    -webkit-tap-highlight-color:transparent;
  }
  header#hd.scrolled .nav-drop a{color:rgba(245,241,234,.82);border-top-color:rgba(245,241,234,.12);}
  .menu-open .nav-drop a{opacity:1;transform:none;}
  /* the clones sit outside <nav>, so they need their own copy of the accents */
  .nav-drop a:nth-of-type(1).current,.nav-drop a:nth-of-type(1):active{color:#C86A43;}
  .nav-drop a:nth-of-type(2).current,.nav-drop a:nth-of-type(2):active{color:#4F9E70;}
  .nav-drop a:nth-of-type(3).current,.nav-drop a:nth-of-type(3):active{color:#5E8296;}
  .nav-drop a:nth-of-type(4).current,.nav-drop a:nth-of-type(4):active{color:#C1912F;}
  @media (prefers-reduced-motion:reduce){
    .nav-drop,.nav-drop a,.nt-bars i{transition:none;}
  }

  /* Studio: the lattice sits centred, and the closing aside drops below it */
  .studio-grid{display:flex;flex-direction:column;gap:30px;}
  .studio-text{display:contents;}
  .studio-text p{order:1;}
  .studio-exhibit{order:2;align-items:center;width:100%;}
  .exhibit-frame{margin:0 auto;}
  .manifesto .aside{order:3;margin-top:0;}

  /* Field Notes: arrows below the cards, where a thumb will not sit on top of
     the image it is paging */
  #journal{display:flex;flex-direction:column;}
  .j-rail-head{display:contents;}
  .j-rail-label{order:3;margin-bottom:18px;}
  .j-rail{order:4;}
  .j-nav{order:5;justify-content:center;margin:24px auto 0;}
  #journal .board-note{order:6;}
  .j-arrow{width:46px;height:46px;font-size:21px;}

  /* comfortable targets and no stray horizontal scroll */
  .bc-arrow{width:46px;height:46px;font-size:21px;}
  .game-nav{gap:22px;}
  .cfilter{padding:11px 18px;}
  .foot-links{flex-wrap:wrap;gap:14px 20px;}
}

/* the systems rows: label, title and sub stack rather than fight for a grid.
   The icon and its mono label read as one compact meta line, and the title
   drops beneath at FULL width with its left edge on the same axis as the icon
   — and as the body copy that unfolds below (padding-left:0). Indenting the
   title into the second column, as it used to, broke that axis by 34px and
   spent the width on nothing. Row-gap is tightened separately from column-gap
   so the label sits close enough to its title to read as one unit. */
@media (max-width:640px){
  .work-summary{grid-template-columns:22px 1fr auto;gap:7px 12px;padding:22px 0;}
  .work-num{grid-column:2;font-size:11px;}
  .work-title{grid-column:1/-1;font-size:clamp(23px,6.2vw,28px);}
  .work-toggle{grid-row:1;grid-column:3;}
  .work-body{padding-left:0;}
  .o-head{gap:12px;}
}



/* ————— touch: affordances that a mouse gets for free —————
   Anything revealed by :hover simply never appears on a phone, so the cue has
   to be there from the start. */
@media (hover:none){
  .p-more{opacity:1;transform:none;}
  .j-arrow,.bc-arrow{width:46px;height:46px;}
  .cfilter{min-height:44px;padding-block:12px;}
  /* a 17px logo and an 18px back-link are the two most-reached-for controls on
     a phone; both need a hand-sized target, not a hairline one */
  .wordmark{min-height:44px;align-items:center;}
  .a-back{display:inline-flex;align-items:center;min-height:44px;}
  .board-note .link-plain{display:inline-flex;align-items:center;min-height:44px;}
  /* the pills carry a whole sentence when open, so they earn a taller resting
     state rather than a hit area padded out with empty space */
  .tool-tag{padding:11px 16px;}
}


/* ————— In Depth: analysis, diagrams, conclusions ————— */
.o-deep{margin-top:clamp(38px,5.5vh,60px);}
@media (min-width:821px){
  .o-deep{margin-left:108px;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,4vw,60px);align-items:start;max-width:1050px;}
}
.o-deep p{font-size:15px;line-height:1.85;max-width:62ch;margin-bottom:1.25em;}
.od-analysis p:last-child{margin-bottom:0;}
/* the conclusion is the takeaway, set apart on its own shaded card */
.od-conclusion{
  background:#EFE8DB;border:1px solid var(--faint);border-radius:4px;
  padding:clamp(20px,2.6vw,30px);
}
.od-conclusion .od-label{margin-top:0;}
.od-conclusion p{font-size:13.5px;line-height:1.8;margin-bottom:0;max-width:none;}
@media (max-width:820px){ .od-conclusion{margin-top:26px;} }
.od-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);margin:30px 0 14px;font-weight:700;}
.o-deep .od-label:first-child{margin-top:0;}