/* ============================================================
   v3.css — "Low Anchor" · Swiss / International Typographic Style
   Built from the Northlit direction swiss-low-anchor (run mb_mu8kmutc_bai7ua).
   Contract: DESIGN.md at repo root · tokens at design/tokens.json.
   Monochrome; grotesque display (Archivo / Helvetica Neue) + Inter + JetBrains
   Mono; strict 12-col / 24px-gutter grid on an 8pt scale; zero radius on
   structure; the orange accent appears only on CTA hover, active section
   numbers and list markers. No entry choreography.
   ============================================================ */
/* registered color tokens — animatable (the scroll theme interpolates them) */
@property --bg{syntax:'<color>';inherits:true;initial-value:#f5f5f7}
@property --surface{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --surface-raised{syntax:'<color>';inherits:true;initial-value:#ebebee}
@property --fg{syntax:'<color>';inherits:true;initial-value:#0b0b0e}
@property --fg-mid{syntax:'<color>';inherits:true;initial-value:#4a4b52}
@property --muted{syntax:'<color>';inherits:true;initial-value:#e2e2e6}
@property --border{syntax:'<color>';inherits:true;initial-value:#c4c5cb}
@property --border-soft{syntax:'<color>';inherits:true;initial-value:#d6d7dc}
@property --grid-dot{syntax:'<color>';inherits:true;initial-value:#a5a6ad}
@property --accent{syntax:'<color>';inherits:true;initial-value:#ff6a3d}
@property --on-fg{syntax:'<color>';inherits:true;initial-value:#ffffff}
:root{
  /* color — light (Northlit tokens, oklch) */
  --bg:oklch(98.6% 0.003 264);
  --surface:oklch(100% 0 0);
  --surface-raised:oklch(95% 0.004 264);
  --fg:oklch(7% 0.008 264);
  --fg-mid:oklch(36% 0.01 264);
  --muted:oklch(91% 0.005 264);
  --border:oklch(84% 0.006 264);
  --border-soft:oklch(91% 0.005 264);
  --grid-dot:oklch(68% 0.006 264);
  --accent:oklch(62.5% 0.195 33);
  --on-fg:oklch(100% 0 0);
  --shadow-sm:0 1px 3px rgba(10,15,28,.06),0 2px 6px rgba(10,15,28,.10);
  --shadow-md:0 2px 6px rgba(10,15,28,.06),0 6px 16px rgba(10,15,28,.10);
  /* type */
  --font-display:"Helvetica Neue",Archivo,Arial,sans-serif;
  --font-body:Inter,system-ui,-apple-system,sans-serif;
  --font-mono:Inter,system-ui,-apple-system,sans-serif; /* labels are sans now: one family, tracked small caps */
  /* 8pt scale */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:160px;
  --gutter:24px;
  --pad-x:clamp(24px,7vw,120px);
  --maxw:1536px;
  --radius:6px;
  /* filled text fields: a quiet surface at rest that lifts when it takes
     focus. Mixed from the foreground so one pair of steps reads on both
     themes instead of two hand-picked greys. */
  --fld:color-mix(in oklab,var(--fg) 5%,transparent);
  --fld-hi:color-mix(in oklab,var(--fg) 9%,transparent);
  --fld-line:color-mix(in oklab,var(--fg) 11%,transparent);
  --fld-line-hi:color-mix(in oklab,var(--fg) 26%,transparent);
  --r-btn:10px;
  /* motion (the only permitted transitions) */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-hover:160ms var(--ease);
  --t-line:160ms var(--ease);
  --d-reveal:480ms;
  --d-hero:800ms;
}
html[data-theme="dark"],html[data-theme="auto"].scrolled{
  --bg:oklch(10.8% 0.018 264);
  --surface:oklch(13.2% 0.02 264);
  --surface-raised:oklch(17.4% 0.022 264);
  --fg:oklch(94.8% 0.01 264);
  --fg-mid:oklch(65% 0.016 264);
  --muted:oklch(19.5% 0.02 264);
  --border:oklch(28% 0.016 264);
  --border-soft:oklch(22% 0.016 264);
  --grid-dot:oklch(32% 0.016 264);
  --accent:oklch(65% 0.195 33);
  --on-fg:oklch(10.8% 0.018 264);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.5);
  --shadow-md:0 2px 6px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"tnum" 1,"lnum" 1}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.5;
  transition:background-color var(--t-hover),color var(--t-hover)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
p{margin:0}
/* focus: one ring everywhere, in the accent, rounded to match the radius
   language and offset so it never crowds the element it marks */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a:focus-visible,button:focus-visible{border-radius:6px}
.glass:focus-visible,.ibtn:focus-visible{border-radius:999px;outline-offset:4px}
.skip-link{position:absolute;left:0;top:-120px;background:var(--fg);color:var(--on-fg);padding:8px 16px;z-index:100}
.skip-link:focus{top:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);width:100%}
/* monochrome photography */
.bw{filter:none}

/* ── MASTHEAD — plain, not sticky, no blur ── */
.masthead{padding:var(--s2) 0;position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html.chat-open .masthead{visibility:hidden}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.mast-right{display:flex;align-items:center;gap:var(--s2)}
.nav-links{display:flex;gap:clamp(4px,1.2vw,14px);list-style:none}
.nav-links a{display:inline-block;font-size:14px;font-weight:500;padding:12px 10px 10px;border-bottom:1px solid transparent;transition:border-color var(--t-line)}
.nav-links a:hover{border-bottom-color:var(--fg)}
.ibtn{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;border-radius:var(--r-btn);color:var(--fg);cursor:pointer;transition:color var(--t-hover),background-color var(--t-hover)}
.ibtn:hover{background:var(--muted)}
.ibtn:hover{color:var(--accent)}
.ibtn .ic-moon,.ibtn .ic-auto{display:none}.ibtn .ic-sun{display:block}
html[data-theme="dark"] .ibtn .ic-sun{display:none}
html[data-theme="dark"] .ibtn .ic-moon{display:block}
html[data-theme="auto"] .ibtn .ic-sun{display:none}
html[data-theme="auto"] .ibtn .ic-auto{display:block}
.nav-toggle{display:none}

/* ── HOMEPAGE — Low Anchor variation var_mu8pf03d_ekjd ──
   Name high-left, a tall B&W column image with one accent diagonal,
   data annotated in the right margin, sections separated by air. */
.cta{display:inline-flex;align-items:center;gap:20px;font-size:14px;font-weight:500;padding:10px 0 8px;border-bottom:1px solid var(--fg);
  transition:gap 180ms ease-out,border-color var(--t-hover),color var(--t-hover);min-height:44px}
.cta .arw{width:24px;height:9px;flex:none}
.cta:hover{gap:28px;color:var(--accent);border-bottom-color:var(--accent)}
.cta-sm{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;padding:8px 0 6px;border-bottom:1px solid var(--fg);transition:gap 180ms ease-out,color var(--t-hover),border-color var(--t-hover);min-height:40px}
.cta-sm .arw{width:20px;height:8px;flex:none}
.cta-sm:hover{gap:20px;color:var(--accent);border-bottom-color:var(--accent)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}

/* hero */
.hero{position:relative;padding:clamp(16px,2vw,32px) 0 clamp(140px,15vw,240px)}
/* particle field behind the hero, masked so it fades out under the type */
.pfield{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 90%,transparent 100%)}
/* in the footer the terrain clears out above the legal line */
.footer .pfield{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 92%)}
@media(prefers-reduced-motion:reduce){.pfield{opacity:.6}}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:repeating-linear-gradient(90deg,var(--grid-dot) 0 1px,transparent 1px calc(100%/12))}
.hero-grid{position:relative;grid-template-rows:1fr auto auto auto 1fr;align-items:start}
.hero-name{grid-column:1/6;grid-row:2;font-weight:900;font-size:clamp(56px,8.6vw,136px);line-height:.9;letter-spacing:-.045em;margin-top:-.04em;position:relative;z-index:1}
.hero-sub{grid-column:1/5;grid-row:3;font-weight:600;font-size:clamp(18px,1.55vw,22px);line-height:1.32;letter-spacing:-.01em;margin-top:clamp(24px,3vw,48px);position:relative;z-index:1}
.hero-cta{grid-column:1/4;grid-row:4;align-self:start;position:relative;z-index:1;margin-top:clamp(32px,4vw,56px)}
.hero-image{grid-column:6/9;grid-row:1/5;position:relative;z-index:2;aspect-ratio:3/7;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised);margin-top:clamp(24px,3vw,48px);box-shadow:var(--shadow-md)}
.hero-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-image::after{content:"";position:absolute;left:-10%;top:38%;width:120%;height:9px;background:var(--accent);transform:rotate(-58deg);transform-origin:center}
.hero-ghost{grid-column:9/11;grid-row:4;align-self:end;justify-self:start;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,6vw,96px);line-height:.8;letter-spacing:-.04em;color:var(--muted);user-select:none;margin-left:-.35em}
.hero-dots{grid-column:12/13;grid-row:1/4;align-self:center;justify-self:end;list-style:none;display:flex;flex-direction:column;gap:8px;padding-top:clamp(80px,12vw,200px)}
.hero-dots a{display:grid;place-items:center;width:24px;height:24px}
.hero-dots a::before{content:"";width:5px;height:5px;background:var(--fg);border-radius:50%;transition:transform var(--t-hover),background var(--t-hover)}
.hero-dots a:hover::before{background:var(--accent);transform:scale(1.6)}


/* proof band — ruled grid on the 12 columns (no cards): gutters are cell padding
   so the hairlines run continuous; first/last columns sit flush to the wrap */
.bento-sec{padding-top:clamp(8px,1vw,16px)}
.bento{--bp:clamp(16px,2vw,28px);column-gap:0;row-gap:0;grid-auto-rows:minmax(148px,auto);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.bento-cell{position:relative;padding:var(--s3) var(--bp);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);min-width:0;color:inherit;border-left:1px solid var(--border-soft)}
.bento-cell.first{border-left:0;padding-left:0}
.bento-cell.last{padding-right:0}
.bento-cell.row2,.bento-cell.row3{border-top:1px solid var(--border-soft)}
.bento-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.bento-about{font-family:var(--font-body);font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.22;letter-spacing:-.02em;max-width:22ch}
.bento-h{display:block;font-family:var(--font-body);font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em}
.bento-line{display:block;font-size:15px;font-weight:500;line-height:1.5;color:var(--fg-mid);margin-top:6px}
.bento-cell .arw{width:24px;height:9px;flex:none;transition:transform 180ms ease-out,color var(--t-hover)}
a.bento-cell:hover .arw{transform:translateX(6px);color:var(--accent)}
a.bento-cell:hover .bento-h{color:var(--accent);transition:color var(--t-hover)}
.bento-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.b-about{grid-column:1/7;grid-row:1/3}
.b-portrait{grid-column:7/10;grid-row:1/3;display:block;overflow:hidden;padding:clamp(24px,3vw,44px)}
.b-portrait img{width:100%;height:100%;object-fit:cover;object-position:22% 52%;border-radius:var(--radius);display:block}
.b-now{grid-column:10/13;grid-row:1}
.b-build{grid-column:10/13;grid-row:2}
.b-ask{grid-column:1/7;grid-row:3;cursor:pointer;text-align:left;font:inherit;background:none;border-right:0;border-bottom:0}
.b-ask .fake{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--fld);border:1px solid var(--fld-line);border-radius:14px;
  padding:5px 5px 5px 16px;min-height:46px;font-size:15px;color:var(--fg-mid);
  transition:background-color 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease),color 220ms var(--ease)}
.b-ask:hover .fake{background:var(--fld-hi);color:var(--fg)}
.b-ask:focus-visible{outline:none}
.b-ask:focus-visible .fake{background:var(--fld-hi);border-color:var(--fld-line-hi);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--fg) 7%,transparent)}
.b-ask .fake .send{width:32px;height:32px;display:grid;place-items:center;background:var(--fg);color:var(--on-fg);border-radius:8px;flex:none}
.b-stats{grid-column:7/13;grid-row:3;flex-direction:row;align-items:stretch;padding:0 0 0 0;gap:0}
.b-stat{flex:1;padding:var(--s3) var(--bp);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);min-width:0}
.b-stat+.b-stat{border-left:1px solid var(--border-soft)}
.b-stat:last-child{padding-right:0}
.b-stat .n{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,3vw,44px);line-height:.95;letter-spacing:-.035em}


/* ── MOTION — reveals structure once, never performs ──
   one easing, three durations; hero only on load; scroll-driven layer
   is position-bound (no observers); everything collapses under
   prefers-reduced-motion. */
.hero-name .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-name .ln>span{display:block;transform:translateY(110%);animation:rise var(--d-hero) var(--ease) forwards}
.hero-name .ln:nth-child(2)>span{animation-delay:70ms}
.hero-sub,.hero-cta,.hero-dots,.hero-ghost{opacity:0;animation:fadeUp var(--d-hero) var(--ease) forwards}
.hero-sub{animation-delay:320ms}
.hero-dots{animation-delay:520ms}
.hero-cta{animation-delay:520ms}
.hero-ghost{animation-delay:600ms}
.hero-reel{opacity:0;animation:fadeIn 600ms var(--ease) 160ms forwards}
.hero-reel .slice{opacity:0;animation:fadeUp 700ms var(--ease) forwards}
.hero-reel .slice:nth-child(1){animation-delay:200ms}.hero-reel .slice:nth-child(2){animation-delay:260ms}.hero-reel .slice:nth-child(3){animation-delay:320ms}.hero-reel .slice:nth-child(4){animation-delay:380ms}.hero-reel .slice:nth-child(5){animation-delay:440ms}.hero-reel .slice:nth-child(6){animation-delay:500ms}.hero-reel .slice:nth-child(7){animation-delay:560ms}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes draw{to{clip-path:inset(0 0 0 0)}}
/* scroll-driven layer: progressive enhancement, no JS */
@supports (animation-timeline:scroll()){
  .hero-reel{animation:fadeIn 600ms var(--ease) 160ms forwards,heroDrift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .hero-ghost{animation:fadeUp var(--d-hero) var(--ease) 600ms forwards,ghostDrift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .sec-title::after{transform-origin:left center;animation:dashDraw linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .case-section__label::after,.case-result .rk::after{transform-origin:left center;animation:dashDraw linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .writing-shot{view-timeline:--wshot}
  .writing-shot img{animation:imgDrift linear both;animation-timeline:--wshot;animation-range:entry 0% exit 100%}
}
@keyframes heroDrift{to{transform:translateY(40px)}}
@keyframes ghostDrift{to{transform:translateY(-48px)}}
@keyframes dashDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes imgDrift{from{transform:translateY(-4%) scale(1.06)}to{transform:translateY(4%) scale(1.06)}}


/* ── UNDERLINE-DRAW — the one hover motion, applied everywhere ──
   the 1px rule is a pseudo that scales from the left in 160ms; lines
   that are always on redraw themselves; arrows slide 6px. */
.cta,.cta-sm,.proj-link,.clink,.nav-links a,.case-back,.case-cta,.card-btn,.case-next a{position:relative;border-bottom:0;transition:color var(--t-hover)}
.cta::after,.cta-sm::after,.proj-link::after,.clink::after,.nav-links a::after,.case-back::after,.case-cta::after,.card-btn::after,.case-next a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.38;transform-origin:left center;transform:scaleX(1);transition:transform 160ms var(--ease),opacity 160ms var(--ease)}
.cta:hover::after,.cta-sm:hover::after,.proj-link:hover::after,.clink:hover::after,.nav-links a:hover::after,.case-back:hover::after,.case-cta:hover::after,.card-btn:hover::after,.case-next a:hover::after,.work-cell:hover .proj-link::after{opacity:1}
/* links inside case sections size to their text instead of the column */
.case-section>.case-cta,.case-section>.card-btn,.case-section>.cta-sm,.case-section>.case-back{justify-self:start;width:fit-content}
.case-next a{width:fit-content}
.nav-links a::after{left:10px;right:10px}
.nav-links a::after,.clink::after,.proj-link::after,.case-next a:not(.next)::after{transform:scaleX(0)}
.nav-links a:hover::after,.clink:hover::after,.work-cell:hover .proj-link::after,.case-next a:not(.next):hover::after{transform:scaleX(1)}
.cta:hover::after,.cta-sm:hover::after,.case-back:hover::after,.case-cta:hover::after,.card-btn:hover::after,.case-next a.next:hover::after{animation:redraw 480ms var(--ease)}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:right center}45%{transform:scaleX(0);transform-origin:right center}50%{transform:scaleX(0);transform-origin:left center}100%{transform:scaleX(1);transform-origin:left center}}
.cta:hover{gap:20px}.cta-sm:hover{gap:14px}.clink:hover{gap:14px}.work-cell:hover .proj-link{gap:12px}
.arw{transition:transform 160ms var(--ease)}
.cta:hover .arw,.cta-sm:hover .arw,.clink:hover .arw,.work-cell:hover .proj-link .arw,.case-cta:hover .arw,.w-row:hover .arw,.case-next a:hover .arw{transform:translateX(6px)}
.b-stat .n,.signal .sn,.metric__n{font-variant-numeric:tabular-nums}


/* ── SCROLL THEME — data-theme="auto": light while scrolling up, dark while
   scrolling down (direction, not position; JS toggles .scrolled). Surfaces
   cross in 240ms and the ink flips at the midpoint so there is no grey
   in-between state. ── */
html[data-theme="auto"]{transition:--bg 220ms linear,--surface 220ms linear,--surface-raised 220ms linear,--muted 220ms linear,--border 220ms linear,--border-soft 220ms linear,--grid-dot 220ms linear,--accent 220ms linear,
  --fg 0s linear 110ms,--fg-mid 0s linear 110ms,--on-fg 0s linear 110ms}
html[data-theme="auto"] body{transition:none}


/* ── LOGO TILES · MOSAIC · LIGHTBOX ── */
@keyframes logoOut{0%,49.5%{opacity:1}50.5%,100%{opacity:0}}
@keyframes logoIn{0%,49.5%{opacity:0}50.5%,100%{opacity:1}}
/* case-page logo pair (light / dark artwork) */
.logo-pair{position:relative;height:44px;margin:clamp(32px,4vw,56px) 0 0;max-width:260px}
/* brand pages: the logo IS the title — the h1 stays in the DOM for crawlers,
   screen readers and answer engines, but is clipped from view */
.logo-pair.title{height:clamp(56px,7vw,96px);max-width:min(560px,100%);margin-top:clamp(40px,5vw,64px)}
.logo-pair.title.square{height:clamp(96px,12vw,160px)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.logo-pair.title+.vh+.case-sub{margin-top:clamp(28px,3.2vw,40px)}
.logo-pair img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:100%;object-fit:contain;transition:opacity 200ms var(--ease)}
.logo-pair .on-dark{opacity:0}
html[data-theme="dark"] .logo-pair .on-light,html[data-theme="auto"].scrolled .logo-pair .on-light{opacity:0}
html[data-theme="dark"] .logo-pair .on-dark,html[data-theme="auto"].scrolled .logo-pair .on-dark{opacity:1}
/* mosaic — tight 12-column grid, rows sized from the container width so
   every cell keeps a 16:9-derived proportion; dense packing fills holes */
.mosaic-wrap{container-type:inline-size;margin-top:var(--s3)}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc((100cqw - 132px)/12*1.125);gap:12px;list-style:none}
.mosaic li{margin:0}
.mosaic a{display:block;position:relative;height:100%;overflow:hidden;border-radius:calc(var(--radius) - 2px);background:var(--surface-raised)}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 480ms var(--ease)}
.mosaic a:hover img{transform:scale(1.03)}
.mosaic a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(128,128,136,.22);pointer-events:none}
.mosaic .m-hero{grid-column:1/-1;grid-row:span 6;display:flex;flex-direction:column;gap:10px}
.mosaic .m-hero a{flex:1;min-height:0}
.m-cap{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.mosaic .m-wide{grid-column:span 6;grid-row:span 3}
.mosaic li:not(.m-hero):not(.m-wide){grid-column:span 4;grid-row:span 2}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,9,12,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 200ms var(--ease),visibility 200ms}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;max-width:min(94vw,1600px);max-height:100vh;display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 64px;touch-action:pan-y;user-select:none}
.lb img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.5);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}
.lb.swap img{opacity:0;transform:translateX(var(--dir,0))}
.lb figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;gap:16px;align-items:baseline}
.lb figcaption .n{color:rgba(255,255,255,.45)}
.lb button{position:absolute;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-btn);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;transition:border-color var(--t-hover),background-color var(--t-hover)}
.lb button:hover{border-color:#fff;background:rgba(0,0,0,.6)}
.lb .lb-x{top:16px;right:16px}
.lb .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:16px;top:50%;transform:translateY(-50%)}
body.lb-lock{overflow:hidden}


/* project thumbnail row (HangarX) — six tiles on the imagery width */
.proj-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);list-style:none;margin-top:var(--s2)}
.proj-row li{min-width:0}
.proj-row .pr-media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.proj-row .pr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 480ms var(--ease)}
.proj-row .pr-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(128,128,136,.22);pointer-events:none}
.proj-row li:hover .pr-media img{transform:scale(1.03)}
.proj-row h3{font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:-.01em;margin-top:14px}
.proj-row p{font-size:12px!important;line-height:1.5!important;color:var(--fg-mid);margin-top:4px;max-width:none}
.proj-row .pr-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.proj-row .pr-links a{white-space:nowrap;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 0 4px;border-bottom:1px solid transparent;transition:color var(--t-hover),border-color var(--t-hover)}
.proj-row .pr-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}


/* ── GLASS BUTTONS — every button is a frosted, fully rounded control ──
   translucent surface + backdrop blur + hairline edge + inner highlight */
.glass{border-radius:999px;background:color-mix(in oklab,var(--surface) 62%,transparent);border:1px solid color-mix(in oklab,var(--fg) 14%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(10,15,28,.06),0 6px 20px rgba(10,15,28,.06);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  transition:background-color var(--t-hover),border-color var(--t-hover),box-shadow var(--t-hover),transform var(--t-hover),color var(--t-hover)}
.glass:hover{background:color-mix(in oklab,var(--surface) 82%,transparent);border-color:color-mix(in oklab,var(--fg) 28%,transparent);transform:translateY(-1px)}
.glass:active{transform:translateY(0)}
html[data-theme="dark"] .glass,html[data-theme="auto"].scrolled .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35)}
.ibtn.glass:hover{background:color-mix(in oklab,var(--surface) 82%,transparent)}
#toTop.glass{border-radius:999px;border-color:color-mix(in oklab,var(--fg) 14%,transparent);background:color-mix(in oklab,var(--surface) 62%,transparent)}
#toTop.glass:hover{color:var(--accent);border-color:color-mix(in oklab,var(--fg) 28%,transparent)}
.carousel__nav.glass{border-radius:999px;border-color:color-mix(in oklab,var(--fg) 14%,transparent);background:color-mix(in oklab,var(--surface) 62%,transparent)}
.lb button.glass{border-radius:999px;border-color:rgba(255,255,255,.22);background:rgba(20,20,26,.45);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lb button.glass:hover{background:rgba(20,20,26,.7);border-color:rgba(255,255,255,.5)}
.b-ask .fake .send.glass{border-radius:999px;background:color-mix(in oklab,var(--surface) 62%,transparent);color:var(--fg)}
.chat-send.glass,.chat-x.glass{border-radius:999px}
/* mobile: no double-tap zoom; page never accidentally resizes */
html,body{touch-action:manipulation}


/* ── HERO REEL — vertical slices that breathe on hover (flex-grow accordion),
   the lead frame opens larger at rest; click morphs the frame to full screen ── */
:root{--ease-lux:cubic-bezier(.22,1,.36,1)}
.hero-reel{grid-column:6/13;grid-row:1/6;position:relative;z-index:2;display:flex;gap:6px;height:clamp(440px,66vh,720px);margin-top:clamp(8px,1vw,16px);min-width:0}
.slice{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised);cursor:pointer;padding:0;border:0;text-align:left;color:#fff;
  transition:flex-grow .72s var(--ease-lux),transform .55s var(--ease-lux);will-change:flex-grow}
.slice:first-child{flex-grow:3}
.hero-reel:hover .slice:not(:hover){flex-grow:.62}
.hero-reel:hover .slice:hover{flex-grow:6}
.hero-reel:focus-within .slice:not(:focus-visible){flex-grow:.62}
.hero-reel:focus-within .slice:focus-visible{flex-grow:6}
.slice:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--radius)}
.slice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.15s var(--ease-lux)}
/* theme-aware slice: summer by day, aurora in dark mode */
.slice img.on-light,.slice img.on-dark{transition:opacity 220ms linear,transform 1.15s var(--ease-lux)}
.slice img.on-dark{opacity:0}
html[data-theme="dark"] .slice img.on-light,html[data-theme="auto"].scrolled .slice img.on-light{opacity:0}
html[data-theme="dark"] .slice img.on-dark,html[data-theme="auto"].scrolled .slice img.on-dark{opacity:1}
.slice:hover img{transform:scale(1.1)}
.slice::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 30%,rgba(0,0,0,0) 62%);opacity:.9;transition:opacity .55s ease}
.slice::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;z-index:3}
.slice .spine{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;justify-content:center;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.55);transition:opacity .35s ease}
.slice .spine .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em}
/* the project title rides the left edge, reading bottom to top. On hover
   it swings flat and grows out of the same corner as the slice widens. */
/* The title reads bottom to top, centred in the strip, sitting just above
   the index. Rotating about the top-left corner makes the rotated text grow
   upward from a known point, so left/top can be animated alongside the
   rotation: on hover it swings flat, moves to the corner and grows, and the
   description follows it in. */
.slice .t{position:absolute;left:calc(50% - 7px);top:calc(100% - 54px);z-index:2;
  transform-origin:0 0;transform:rotate(-90deg);
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1;letter-spacing:-.01em;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
  transition:left .66s var(--ease-lux),top .66s var(--ease-lux),transform .66s var(--ease-lux),font-size .66s var(--ease-lux),letter-spacing .66s var(--ease-lux)}
.slice:hover .t,.slice:focus-visible .t{left:20px;top:calc(100% - 158px);transform:rotate(0deg);
  font-size:clamp(22px,2.3vw,34px);letter-spacing:-.03em}
.slice .d{position:absolute;left:20px;right:20px;bottom:52px;z-index:2;
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(0,0,0,.7);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .5s var(--ease-lux)}
.slice:hover .d,.slice:focus-visible .d{opacity:1;transform:none;transition:opacity .45s ease .22s,transform .6s var(--ease-lux) .22s}
.slice .sgo{position:absolute;left:20px;bottom:22px;z-index:2;width:26px;height:9px;color:#fff;opacity:0;transform:translateY(10px);pointer-events:none;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.7));transition:opacity .3s ease,transform .5s var(--ease-lux)}
.slice:hover .sgo,.slice:focus-visible .sgo{opacity:1;transform:none;transition:opacity .4s ease .34s,transform .55s var(--ease-lux) .34s}
.slice:hover .spine,.slice:focus-visible .spine{opacity:0}
.hero-reel.opening .slice .t,.hero-reel.opening .slice .spine,.hero-reel.opening .slice .d,.hero-reel.opening .slice .sgo{opacity:0!important;transition:opacity .18s ease}
@media(hover:none){.hero-reel .slice{flex-grow:1!important}.hero-reel .slice:first-child{flex-grow:2.2!important}.slice .spine{opacity:1!important}.slice .t{transform:rotate(-90deg)!important;font-size:13px!important;left:calc(50% - 6.5px)!important;top:calc(100% - 50px)!important}.slice .d,.slice .sgo{display:none}}
/* full-screen detail (FLIP morph from the slice) */
.detail{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.detail.on{visibility:visible;pointer-events:auto}
/* below the pinned hero, a preview of the case page slides up: kicker,
   one line, a six-image mosaic and the link */
.detail-scroll{position:relative;z-index:4}
.detail-space{height:100vh;height:100dvh;pointer-events:none}
.detail-more{position:relative;background:var(--bg);color:var(--fg);padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,120px);border-top:1px solid var(--border-soft);opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease) .5s,transform .7s var(--ease-lux) .5s}
.detail.on .detail-more{opacity:1;transform:none}
.dm-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);display:block}
.dm-h{font-weight:600;font-size:clamp(22px,2.4vw,34px);line-height:1.2;letter-spacing:-.02em;max-width:30ch;margin-top:12px}
/* the preview reads like the case galleries: masonry at the images own
   aspect ratios, one column on phones */
.dm-grid{display:block;columns:3;column-gap:10px;margin-top:clamp(28px,3.4vw,48px)}
.dm-grid .t{display:block;break-inside:avoid;margin:0 0 10px;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.dm-grid .t img{display:block;width:100%;height:auto;transform:scale(1.02);transition:transform 1.1s var(--ease-lux)}
.dm-grid .t:hover img{transform:scale(1.07)}
@media(max-width:900px){.dm-grid{columns:2}}
@media(max-width:640px){.dm-grid{columns:1;column-gap:0}}
.dm-cta{margin-top:clamp(28px,3.4vw,48px)}
.dm-hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .5s ease 1.2s;pointer-events:none;padding-bottom:18px}
.dm-hint::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:12px;background:#fff;animation:hintBob 1.8s ease-in-out infinite}
.detail.on .dm-hint{opacity:.7}
.detail.on.scrolled .dm-hint{opacity:0;transition-delay:0s}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.detail-bg{position:absolute;inset:0;background:#0b0b0e;opacity:0;transition:opacity .6s var(--ease)}
.detail.on .detail-bg{opacity:.96}
.detail-fig{position:fixed;overflow:hidden;border-radius:var(--radius);margin:0;z-index:2;background:#0b0b0e;will-change:transform}
.detail-fig.animating{transition:top .66s var(--ease-lux),left .66s var(--ease-lux),width .66s var(--ease-lux),height .66s var(--ease-lux),border-radius .66s var(--ease-lux)}
.detail-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .34s var(--ease),transform .6s var(--ease-lux)}
.detail.swapping .detail-fig img{opacity:0;transform:scale(1.02)}
.detail-grad{position:fixed;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.3) 32%,rgba(0,0,0,0) 60%);opacity:0;transition:opacity .6s var(--ease)}
.detail.on .detail-grad{opacity:1}
.detail-content{pointer-events:none;--t0:.42s;position:fixed;left:clamp(20px,6vw,96px);bottom:clamp(28px,6vh,72px);z-index:5;color:#fff;max-width:min(640px,84vw)}
.detail-content .k,.detail-content .h,.detail-content .d{display:block}
/* kicker: a rule draws in, then the label uncovers left→right */
.detail-content .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;display:flex;align-items:center;gap:10px}
.detail-content .k::before{content:"";width:16px;height:1px;background:#fff;flex:none;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease)}
.detail-content .k span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease)}
.detail.on .k::before{transform:none;transition:transform .5s var(--ease) var(--t0)}
.detail.on .k span{clip-path:inset(0 -2% 0 0);transition:clip-path .55s var(--ease) calc(var(--t0) + .12s)}
/* headline: each word rises out of its own mask, staggered */
.detail-content .h{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,6vw,84px);line-height:.94;letter-spacing:-.04em;margin-top:10px}
.detail-content .h .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .08em 0;margin:0 0 -.08em 0}
.detail-content .h .w>span{display:inline-block;transform:translateY(112%);transition:transform .32s var(--ease) calc(var(--i)*12ms)}
.detail.on .h .w>span{transform:none;transition:transform .9s var(--ease) calc(var(--t0) + .16s + var(--i)*45ms)}
/* description and link settle in after the headline */
.detail-content .d{font-size:16px;line-height:1.55;opacity:0;margin-top:14px;max-width:48ch;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.detail.on .d{opacity:.88;transform:none;transition:opacity .6s var(--ease) calc(var(--t0) + .5s),transform .7s var(--ease) calc(var(--t0) + .5s)}
.detail-content .cta{pointer-events:auto;display:inline-flex;color:#fff;margin-top:20px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.detail-content .cta::after{background:#fff;transform:scaleX(0);transition:transform .25s var(--ease)}
.detail.on .cta{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--t0) + .62s),transform .6s var(--ease) calc(var(--t0) + .62s)}
.detail.on .cta::after{transform:scaleX(1);transition:transform .6s var(--ease) calc(var(--t0) + .72s)}
.detail.on .cta:hover::after{animation:redraw 480ms var(--ease)}
/* a swap plays the exit (fast, base rules) then the entry from a short --t0 */
.detail.on.swapping .k::before{transform:scaleX(0);transition:transform .25s var(--ease)}
.detail.on.swapping .k span{clip-path:inset(0 100% 0 0);transition:clip-path .25s var(--ease)}
.detail.on.swapping .h .w>span{transform:translateY(112%);transition:transform .32s var(--ease) calc(var(--i)*12ms)}
.detail.on.swapping .d,.detail.on.swapping .cta{opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.detail.on.swapping .cta::after{transform:scaleX(0);transition:transform .22s var(--ease)}
.detail.swapping .detail-fig img{opacity:0;transform:scale(1.03) translateX(var(--dx,0))}
.detail-counter{position:fixed;left:clamp(20px,6vw,96px);top:clamp(20px,3vw,36px);z-index:5;color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;opacity:0;transition:opacity .5s ease .15s}
.detail.on .detail-counter{opacity:1}
.detail-x,.detail-nav{position:fixed;z-index:6;width:48px;height:48px;display:grid;place-items:center;color:#fff;cursor:pointer;opacity:0;transition:opacity .4s ease .1s,background-color var(--t-hover),border-color var(--t-hover),transform var(--t-hover)}
.detail.on .detail-x,.detail.on .detail-nav{opacity:1}
.detail.on.scrolled .detail-nav,.detail.on.scrolled .detail-counter{opacity:0;pointer-events:none;transition-delay:0s}
.detail.on.scrolled .detail-content,.detail.on.scrolled .detail-content .cta{pointer-events:none}
.detail-x{top:clamp(16px,2.4vw,30px);right:clamp(16px,2.4vw,30px)}
.detail-nav{top:50%;transform:translateY(-50%)}
.detail-nav.prev{left:clamp(12px,2vw,28px)}.detail-nav.next{right:clamp(12px,2vw,28px)}
.detail-nav:hover{transform:translateY(-50%)}
.detail .glass{border-color:rgba(255,255,255,.22);background:rgba(20,20,26,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.detail .glass:hover{background:rgba(20,20,26,.7);border-color:rgba(255,255,255,.5)}
body.detail-lock{overflow:hidden}
@media(max-width:640px){.detail-content{bottom:calc(46px + env(safe-area-inset-bottom));max-width:calc(100vw - 40px)}}
@media(prefers-reduced-motion:reduce){.slice,.slice img,.detail-fig.animating,.detail-fig img,.detail-bg,.detail-content,.detail-content *,.detail-content .k::before,.detail-content .cta::after,.detail-grad{transition:none!important}.hero-reel .slice{animation:none!important;opacity:1!important}}


/* ── ARCHIVE — ruled grid of project tiles; each tile is a one-image mosaic
   whose hidden siblings feed the lightbox ── */
/* forty-four tiles at one size read as a template, so the grid runs a
   repeating 2 / 3 / 4 rhythm across the twelve columns, and the type scales
   with the tile it sits under */
.arch-grid{--wgap:clamp(24px,2.8vw,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--wgap);row-gap:clamp(44px,4.6vw,76px);margin-top:clamp(40px,5vw,64px)}
.arch-cell{position:relative;min-width:0;grid-column:span 3;--tt:15px;cursor:pointer}
.arch-cell:nth-child(9n+1),.arch-cell:nth-child(9n+2){grid-column:span 6;--tt:23px}
.arch-cell:nth-child(9n+3),.arch-cell:nth-child(9n+4),.arch-cell:nth-child(9n+5){grid-column:span 4;--tt:18px}
/* pin gallery: masonry columns, every image at its own aspect ratio,
   ordered so similar tones sit together */
.mosaic.pin{display:block;columns:4;column-gap:12px;grid:none}
.case-section>.mosaic-wrap:has(.mosaic.pin),.case-section.brand-sys>.mosaic-wrap{grid-column:1/-1;margin-top:var(--s2);width:100vw;margin-left:calc(50% - 50vw);padding:0 12px;box-sizing:border-box}
@media(max-width:1280px){.mosaic.pin{columns:3}}
.mosaic.pin li{break-inside:avoid;margin:0 0 12px;display:block}
.mosaic.pin a{height:auto}
.mosaic.pin img{position:static;width:100%;height:auto;display:block;object-fit:unset;aspect-ratio:auto}
@media(max-width:1024px){.mosaic.pin{columns:2}}
@media(max-width:640px){.mosaic.pin{columns:1;column-gap:0}.mosaic.pin li{margin-bottom:10px}}
.case-article .case-figure img,.case-article .carousel__slide{cursor:zoom-in}
/* the frames stack in place: the first one shows, the rest stay display:none
   until a hover asks for them, so their files are never fetched on a tap-only
   device and the lightbox set is unchanged */
.mosaic.arch{display:block;margin:0;position:relative;aspect-ratio:16/10}
.mosaic.arch li{display:none;position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.mosaic.arch li:first-child{display:block;opacity:1}
.mosaic.arch li.lit{display:block}
.mosaic.arch li.on{opacity:1;z-index:1}
.mosaic.arch.cy li:first-child{opacity:0}
.mosaic.arch.cy li:first-child.on{opacity:1}
.mosaic.arch a{border-radius:var(--radius)}
/* caption sits under its own rule, which an accent line sweeps on hover */
.arch-meta{position:relative;margin-top:15px;padding-top:12px;display:grid;grid-template-columns:1fr auto;
  column-gap:14px;border-top:1px solid var(--border-soft)}
.arch-meta::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-lux)}
.arch-cell:hover .arch-meta::after{transform:scaleX(1)}
.arch-n,.arch-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-mid);grid-row:1;line-height:1;transition:color 240ms var(--ease)}
.arch-n{grid-column:1}
.arch-count{grid-column:2;justify-self:end}
.arch-cell:hover .arch-n{color:var(--accent)}
.arch-meta h3{grid-column:1/-1;font-family:var(--font-body);font-weight:600;font-size:var(--tt);
  letter-spacing:-.022em;line-height:1.15;margin-top:9px}
/* two lines everywhere, so every caption is the same height and the tiles in
   a row land on one baseline */
.arch-meta p{grid-column:1/-1;font-size:13px!important;line-height:1.45!important;color:var(--fg-mid);
  margin-top:6px;max-width:52ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}


/* positioning line under the hero tagline */
.hero-pos{display:block;font-size:14px;font-weight:500;line-height:1.5;color:var(--fg-mid);margin-top:14px;max-width:34ch;letter-spacing:0}
/* how I lead — four ruled cells on the grid */
.lead-grid{--wgap:clamp(24px,2.8vw,44px);grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--wgap);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.lead-cell{position:relative;padding:var(--s4) 0;min-width:0}
.lead-cell+.lead-cell::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--wgap)/-2);border-left:1px solid var(--border-soft)}
.lead-n{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(30px,3vw,44px);line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.lead-cell h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:-.012em;margin-top:var(--s3)}
.lead-cell p{font-size:15px;line-height:1.55;color:var(--fg-mid);margin-top:8px}

/* section chrome */
.sec{padding-top:clamp(64px,8vw,112px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:clamp(32px,4vw,56px)}
.sec-title{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:-.012em;display:inline-flex;align-items:center;gap:14px}
.sec-title::after{content:"";width:16px;height:1px;background:var(--fg)}
.sec-note{font-size:15px;font-weight:500;line-height:1.5;max-width:22ch;color:var(--fg)}

/* work */
/* work, editorial case rows: image seven columns, text five, alternating,
   with an oversized numeral sitting behind the copy */
.case-rows{list-style:none;border-top:1px solid var(--border-soft);margin-top:var(--s2)}
.case-row{border-bottom:1px solid var(--border-soft)}
.cr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding:clamp(56px,6.4vw,104px) 0;color:inherit}
/* each row's media is a six-tile mosaic on a 6x4 cell grid; layout a and
   its mirror b alternate down the page */
/* justified rows: each tile's width is proportional to its aspect ratio
   (--ar), so a row fills the width at one shared height and nothing is
   cropped. Two rows, grouped by tone, the brand tile closing its row. */
.cr-media{grid-column:1/8;grid-row:1;display:flex;flex-direction:column;gap:8px}
.cr-media .row{display:flex;gap:8px;min-width:0}
.cr-media .t{position:relative;flex:var(--ar) 1 0;min-width:0;aspect-ratio:var(--ar);overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.cr-media .t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease-lux)}
.cr:hover .cr-media .t img{transform:scale(1.08)}
.cr-media .t:nth-child(2) img{transition-delay:40ms}.cr-media .t:nth-child(3) img{transition-delay:80ms}.cr-media .t:nth-child(4) img{transition-delay:120ms}.cr-media .t:nth-child(5) img{transition-delay:160ms}.cr-media .t:nth-child(6) img{transition-delay:200ms}
@supports (animation-timeline:scroll()){
  .cr-media .t{animation:rowIn linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  .cr-media .t:nth-child(2){animation-range:entry 5% entry 35%}.cr-media .t:nth-child(3){animation-range:entry 10% entry 40%}
  .cr-media .row:nth-child(2) .t{animation-range:entry 15% entry 45%}.cr-media .row:nth-child(2) .t:nth-child(2){animation-range:entry 20% entry 50%}.cr-media .row:nth-child(2) .t:nth-child(3){animation-range:entry 25% entry 55%}
}
.cr-body{grid-column:8/13;grid-row:1;position:relative;isolation:isolate;display:block;padding-left:var(--s2)}
.case-row:nth-child(even) .cr-media{grid-column:6/13}
.case-row:nth-child(even) .cr-body{grid-column:1/6;padding-left:0;padding-right:var(--s2)}
.cr-num{position:absolute;right:0;top:-.5em;z-index:-1;font-family:var(--font-display);font-weight:900;font-size:clamp(96px,11vw,168px);line-height:1;letter-spacing:-.05em;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;user-select:none;transition:color 220ms linear}
.cr-k{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.cr-title{display:block;font-weight:600;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;line-height:1.05;margin-top:12px}
.cr-desc{display:block;font-size:16px;line-height:1.55;color:var(--fg-mid);margin-top:14px;max-width:34ch}
.cr-go{display:inline-flex;margin-top:var(--s3);width:24px;height:9px;transition:transform 180ms ease-out,color var(--t-hover)}
.cr-go .arw{width:24px;height:9px}
.cr:hover .cr-go{transform:translateX(8px);color:var(--accent)}
/* oversized section words, set on the grid: title and note in the first
   four columns, the word right-aligned to column twelve with its foot on
   the rule below */
.sec-head--giant{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;margin-bottom:0}
.sec-head--giant .sec-title{grid-column:1/5;grid-row:1}
.sec-head--giant .sec-note{grid-column:1/5;grid-row:2;align-self:end;margin-top:var(--s3);padding-bottom:clamp(20px,2.4vw,32px)}
.giant{grid-column:5/13;grid-row:1/3;justify-self:end;align-self:end;font-family:var(--font-display);font-weight:900;font-size:clamp(96px,14vw,200px);line-height:.74;letter-spacing:-.05em;color:var(--muted);pointer-events:none;user-select:none;transition:color 220ms linear}
.sec-statement{font-weight:600;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;max-width:22ch;text-align:left}
/* running line in the left margin: the label sits at the foot with a
   hairline rising from it, stopping short of the top of the screen */
.margin-line{position:fixed;left:14px;top:0;bottom:36px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;pointer-events:none}
/* a dot every 8px, on the spacing scale. --grid-dot rather than --border
   because the rule now covers an eighth of its length and needs the weight
   back; it is also the token that exists for exactly this */
.margin-line::before{content:"";flex:1 1 auto;min-height:0;width:1px;margin-top:50px;
  background-image:repeating-linear-gradient(180deg,var(--grid-dot) 0 1px,transparent 1px 8px)}
.ml-t{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mid);opacity:.7}
@media(max-width:1279px){.margin-line{display:none}}

/* about */
.about-portrait{grid-column:6/9;position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}

/* archive orbit: a ring of thumbnails around a centre line */
.orbit{--ow:clamp(48px,5.2vw,74px);position:relative;height:clamp(440px,58vw,700px);display:grid;place-items:center;overflow:hidden;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.orbit-core{position:relative;z-index:60;text-align:center;max-width:30ch;padding:var(--s2)}
.orbit-core::before{content:"";position:absolute;inset:-18% -22%;z-index:-1;background:radial-gradient(closest-side,var(--bg) 58%,transparent);transition:background 220ms linear}
.orbit-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.orbit-h{font-weight:600;font-size:clamp(20px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;margin-top:10px}
.orbit-core .cta-sm{margin-top:var(--s2)}
.orbit-ring{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;left:50%;top:50%;width:var(--ow);height:calc(var(--ow)*.75);margin:calc(var(--ow)*-.375) 0 0 calc(var(--ow)*-.5);border-radius:var(--radius);pointer-events:auto;display:block;overflow:hidden;background:var(--surface-raised);box-shadow:0 0 0 1px color-mix(in oklab,var(--fg) 8%,transparent),0 16px 40px -16px rgba(0,0,0,.45);will-change:transform,opacity}
.orb img{width:100%;height:100%;object-fit:cover;display:block}

/* experience, a ruled ledger: big start year, role, outcome, arrow */
.ledger{list-style:none;border-top:1px solid var(--border-soft)}
.ledger li{border-bottom:1px solid var(--border-soft)}
.lrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;padding:clamp(20px,2.4vw,32px) 0;color:inherit}
.l-yr{grid-column:1/4;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.l-n{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,3.6vw,52px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color var(--t-hover)}
.l-to{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);display:inline-flex;align-items:center;gap:8px}
.l-to::before{content:"";width:12px;height:1px;background:var(--fg-mid)}
.live{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:livePulse 2.4s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.l-main{grid-column:4/9;min-width:0}
.l-role{display:block;font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.3;transition:color var(--t-hover)}
.l-org{display:block;font-size:14px;font-weight:500;color:var(--fg-mid);margin-top:4px}
.l-out{grid-column:9/12;font-size:15px;line-height:1.5;color:var(--fg-mid);padding-top:2px}
.lrow .arw{grid-column:12/13;justify-self:end;width:24px;height:9px;margin-top:8px;transition:transform 180ms ease-out,color var(--t-hover)}
a.lrow:hover .l-n,a.lrow:hover .l-role,a.lrow:hover .arw{color:var(--accent)}
a.lrow:hover .arw{transform:translateX(6px)}
.ledger+.cta-sm{margin-top:var(--s3)}
@keyframes rowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){.ledger li{animation:rowIn linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}

/* writing, featured essay on the 12-column grid */
.writing-feat{align-items:start}
.writing-shot{grid-column:1/8;display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised);transition:transform 260ms var(--ease)}
.writing-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.writing-shot:hover{transform:scale(1.02)}
.writing-body{grid-column:8/13;display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s1)}
.w-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);margin-bottom:10px}
.w-lead{font-family:var(--font-body);font-weight:600;font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.025em}
.w-note{font-size:15px;font-weight:500;line-height:1.55;color:var(--fg-mid);max-width:38ch}
.writing-body .cta-sm{margin-top:var(--s2)}
.w-list{list-style:none;margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--border-soft)}
.w-list li{border-bottom:1px solid var(--border-soft)}
.w-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s2);align-items:baseline;padding:14px 0;color:inherit;transition:color var(--t-hover)}
a.w-row:hover{color:var(--accent)}
.w-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-mid)}
.w-title{font-size:16px;font-weight:600;letter-spacing:-.01em;display:block}
.w-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);display:block;margin-top:3px}
.w-status{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);white-space:nowrap}
.w-row .arw{width:20px;height:8px}
/* an unwritten entry keeps the row's rhythm but takes the arrow's place with
   its status, so nothing in the list looks like a broken link */
.w-soon{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-mid);border:1px solid var(--border-soft);border-radius:999px;padding:3px 9px;white-space:nowrap}

/* contact */
.contact-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:start}
.contact-h{font-weight:900;font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.04em}
/* contact mark: the monogram inside a hairline circle. The geometry never
   moves, so the facets stay seamless; light sweeps across the five
   diamonds in a wave (a white overlay on the lit facet, a black one on the
   shaded facet) while the whole mark floats. Strokes matching each fill
   cover anti-aliasing seams between facets. */
/* the mark sizes the svg as a fraction of the circle rather than padding it:
   a percentage padding resolves against the parent, which collapsed the svg
   and knocked the dotted ring off centre */
.contact-mark{width:clamp(170px,17vw,250px);aspect-ratio:1;flex:none;margin-top:8px;justify-self:end;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-soft);transition:border-color 220ms linear}
.contact-mark svg{width:48%;height:auto;display:block;overflow:visible}
.contact-mark polygon{stroke-width:.6;stroke-linejoin:round;paint-order:stroke}
/* the five diamonds flip in a wave, like prisms turning */
.contact-mark .dm{transform-box:fill-box;transform-origin:center;animation:markFlip 5.2s cubic-bezier(.65,0,.35,1) infinite}
.contact-mark .d2{animation-delay:.18s}.contact-mark .d3{animation-delay:.36s}.contact-mark .d4{animation-delay:.54s}.contact-mark .d5{animation-delay:.72s}
@keyframes markFlip{0%,18%{transform:scaleX(1)}50%,68%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
/* a dotted ring turns slowly around the mark */
.contact-mark .ring{fill:none;stroke:currentColor;transform-box:fill-box;transform-origin:center;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:0 9.16;opacity:.35;animation:markSpin 80s linear infinite}
@keyframes markSpin{to{transform:rotate(360deg)}}
.contact-links{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.clink{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;padding:10px 0 8px;border-bottom:1px solid transparent;min-height:40px;transition:gap 180ms ease-out,color var(--t-hover),border-color var(--t-hover)}
.clink .arw{width:20px;height:8px;flex:none}
.clink:hover{gap:20px;color:var(--accent);border-bottom-color:var(--accent)}

/* testimonials (hidden until the array is filled) */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.tcard{padding:var(--s3) clamp(14px,1.8vw,28px) var(--s4);border-left:1px solid var(--border);margin:0}
.tcard:first-child{border-left:0;padding-left:0}
.tcard__quote{font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.01em}
.tcard__who{margin-top:var(--s2);border-top:1px solid var(--border-soft);padding-top:12px}
.tcard__name{font-size:12px;font-weight:600;display:block}
.tcard__role{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}

/* footer */
.footer{position:relative;isolation:isolate;margin-top:clamp(64px,8vw,112px);padding:clamp(150px,16vw,250px) 0 var(--s3);overflow:hidden}
.footer .wrap{position:relative;z-index:1}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer .fmid{margin-left:var(--s2)}
.footer .fmade{margin-left:auto}
.footer .foot__social{margin-left:var(--s4)}
.footer p{font-size:14px;font-weight:500}
.footer .fmark img{width:24px;height:24px;display:block}
.footer .fmid{display:flex;gap:var(--s4);flex-wrap:wrap}
.heart{color:var(--accent)}
.flink{border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent);padding-bottom:2px;transition:color var(--t-hover),border-color var(--t-hover)}
.flink:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ── SCROLL-TO-TOP (square, hairline) ── */
#toTop{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:50;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-btn);
  color:var(--fg);background:var(--bg);border:1px solid var(--fg);opacity:0;visibility:hidden;transition:opacity var(--t-hover),visibility var(--t-hover),color var(--t-hover),border-color var(--t-hover)}
#toTop.show{opacity:1;visibility:visible}
#toTop:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   CASE STUDIES & ESSAY — editorial two-column: section label left,
   content right; hairlines only, no boxes; air between sections.
   ============================================================ */
.case-article{padding-top:clamp(16px,2vw,32px);padding-bottom:0}
.case-back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:10px 0 8px;min-height:40px;border-bottom:1px solid var(--fg);transition:color var(--t-hover),border-color var(--t-hover)}
.case-back:hover{color:var(--accent);border-bottom-color:var(--accent)}
.case-kicker{display:flex;align-items:center;gap:10px;margin-top:clamp(32px,4vw,56px);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.case-kicker .dot{width:6px;height:6px;background:var(--fg);display:inline-block}
.case-logo{height:32px;width:auto;display:block;margin:clamp(32px,4vw,56px) 0 0;max-width:260px;object-fit:contain}
.invert-on-dark{filter:none}
.case-title{font-weight:900;font-size:clamp(52px,8.6vw,136px);line-height:.9;letter-spacing:-.045em;margin-top:var(--s4);max-width:9ch}
.case-sub{font-weight:600;font-size:clamp(18px,1.8vw,26px);line-height:1.28;letter-spacing:-.02em;margin-top:clamp(28px,3.2vw,40px);max-width:40ch}
/* at-a-glance row — same rhythm as the Work grid */
.signals,.metrics{--wgap:clamp(28px,3.6vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--wgap);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.signals{margin-top:clamp(48px,6vw,64px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.signal,.metric{position:relative;padding:var(--s4) 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.signal+.signal::before,.metric+.metric::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--wgap)/-2);border-left:1px solid var(--border-soft)}
.signal .sn,.metric__n{font-family:var(--font-body);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.025em}
.signal .sl,.metric__l{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);line-height:1.5}
.signal .sl a{border-bottom:1px solid color-mix(in oklab,currentColor 45%,transparent)}
.signal .sl a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* showcase carousel */
.showcase{margin-top:clamp(48px,6vw,80px);position:relative}
.carousel{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 100%;width:100%;scroll-snap-align:center;display:block;object-fit:cover;aspect-ratio:16/9}
.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid var(--fg);border-radius:var(--r-btn);background:var(--bg);color:var(--fg);display:none;place-items:center;cursor:pointer;z-index:3;transition:color var(--t-hover),border-color var(--t-hover)}
.carousel__nav:hover{color:var(--accent);border-color:var(--accent)}
.carousel__nav.glass:hover{transform:translateY(-50%)}
.carousel__nav.prev{left:12px}.carousel__nav.next{right:12px}
@media(hover:hover) and (pointer:fine){.carousel__nav{display:grid}}
.showcase__pills{display:flex;gap:8px;margin-top:12px}
.showcase__pill{width:8px;height:8px;border:1px solid var(--fg);border-radius:3px;background:transparent;cursor:pointer;padding:0;transition:background var(--t-hover)}
.showcase__pill.active{background:var(--fg)}
/* body */
.case-body{margin-top:clamp(48px,6vw,80px)}
.case-result{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s2);padding:var(--s5) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.case-result .rk{grid-column:1/4;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;align-self:start;padding-top:4px}
.case-result .rk::after{content:"";width:16px;height:1px;background:var(--fg)}
.case-result p{grid-column:4/11;font-size:18px;line-height:1.5;font-weight:500}
.case-result p strong{font-weight:600}
.case-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s2);padding-top:clamp(64px,8vw,96px)}
.case-section.brand-sys,.case-section.brand-sys+.case-section{padding-top:clamp(80px,10vw,128px)}
.case-section__label{grid-column:1/4;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;align-self:start;padding-top:4px;color:var(--fg)}
.case-section__label::after{content:"";width:14px;height:1px;background:var(--fg);flex:none}
.case-section>:not(.case-section__label){grid-column:4/11;min-width:0}
.case-section>.mosaic-wrap,.case-section>.highlights,.case-section>.projects,.case-section>.proj-row,.case-section>.case-gallery,.case-section>.metrics,.case-section>.brandbar{grid-column:4/12}
.case-section p{font-size:16px;line-height:1.65;max-width:64ch}
.case-section p strong{font-weight:600}
.case-section p a,.link{border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent);transition:color var(--t-hover),border-color var(--t-hover)}
.case-section p a:hover,.link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.case-lede{font-weight:600;font-size:clamp(22px,2.1vw,28px)!important;line-height:1.3!important;letter-spacing:-.02em;max-width:44ch!important;margin-bottom:8px}
.case-note{font-family:var(--font-mono);font-size:12px!important;line-height:1.6!important;color:var(--fg-mid)!important}
.highlights{--wgap:clamp(28px,3.6vw,56px);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--wgap);margin-top:var(--s2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.hl{position:relative;padding:var(--s4) 0}
.hl:nth-child(2n)::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--wgap)/-2);border-left:1px solid var(--border-soft)}
.hl:nth-child(n+3){border-top:1px solid var(--border-soft)}
.hl h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:-.012em;margin-bottom:8px}
.hl p{font-size:15px!important;line-height:1.55!important;color:var(--fg-mid)}
.metrics{margin-top:var(--s2)}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:6px;list-style:none;margin-top:var(--s1)}
.caps li{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.6;position:relative;padding-left:14px}
.caps li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;background:var(--accent);border-radius:1px}
.cv{list-style:none;border-top:1px solid var(--border-soft)}
.cv__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.cv__main{display:flex;flex-direction:column;gap:2px}
.cv__co{font-weight:600;font-size:16px}
.cv__role{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-mid)}
.cv__note{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--fg-mid);white-space:nowrap}
/* résumé page: roles are full-width ledger rows, like Experience on the
   homepage. Big start year, range beneath, role and organisation in the
   middle, the outcome in plain sentences on the right. */
.rs .rl{grid-column:1/-1;list-style:none;margin-top:var(--s3);border-top:1px solid var(--border-soft)}
.rs .case-lede{margin-bottom:0}
.rl-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;padding:clamp(24px,2.8vw,36px) 0;border-bottom:1px solid var(--border-soft)}
.rl-lead{grid-column:1/6;display:flex;flex-direction:column;min-width:0;padding-right:var(--s2)}
.rl-co{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.rl-title{font-size:15px;line-height:1.45;color:var(--fg);margin-top:8px}
.rl-rng{font-size:13px;line-height:1.4;color:var(--fg-mid);margin-top:4px;font-variant-numeric:tabular-nums}
.rl-pts{grid-column:6/13;list-style:none;max-width:56ch}
.rl-pts li{font-size:15px;line-height:1.55;color:var(--fg-mid);padding:7px 0}
.rl-pts li:first-child{padding-top:2px}
.rl-pts li+li{border-top:1px solid color-mix(in oklab,var(--border-soft) 60%,transparent)}
.resume .caps{row-gap:8px}
.resume .caps li{font-family:var(--font-body);font-size:14px;letter-spacing:0;line-height:1.5;padding-left:0}
.resume .caps li::before{display:none}
.case-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4)}
@media print{.resume-page .masthead,.resume-page .footer,.resume-page #chatBtn,.resume-page #toTop,.resume-page .case-back,.resume-page .case-next{display:none!important}.resume .case-section{padding-top:24px;display:block}.resume .rl-row{break-inside:avoid}}
.brandbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:var(--s2) 0 var(--s2)}
.brandbar img{height:22px;width:auto}
.project-group{margin-top:var(--s3)}
.project-group:first-child{margin-top:0}
.project-group__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);margin-bottom:8px}
.projects{--wgap:clamp(28px,3.6vw,56px);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--wgap);margin-top:var(--s2)}
.project{position:relative;display:flex;flex-direction:column;padding:0 0 var(--s4);min-width:0}
.project:nth-child(2n)::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--wgap)/-2);border-left:1px solid var(--border-soft)}
.project:nth-child(n+3){border-top:1px solid var(--border-soft);padding-top:var(--s4)}
.project__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--surface-raised)}
.project__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.project__body{padding:var(--s3) 0 0;display:flex;flex-direction:column;gap:10px;flex:1}
.project__body h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:-.012em}
.project__body p{font-size:14px!important;line-height:1.55!important;color:var(--fg-mid)}
.project__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:4px}
.project__tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.card-btn{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:4px;padding:8px 0 6px;min-height:40px;border-bottom:1px solid var(--fg);color:var(--fg);font-size:14px;font-weight:500;transition:color var(--t-hover),border-color var(--t-hover)}
.card-btn:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* pull quote, one per case page, set in the display face */
.case-quote{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:clamp(64px,8vw,96px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.case-quote p{grid-column:2/12;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,3.6vw,56px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.case-quote cite{grid-column:2/12;font-style:normal;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);margin-top:var(--s2)}
/* cross-document view transitions: a work row's image morphs into the case hero */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s1)}
.case-figure{overflow:hidden;margin:0}
.case-figure.wide{grid-column:1/-1}
.case-figure img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--surface-raised)}
.case-figure figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-mid);padding:10px 0 0}
.case-cta{display:inline-flex;align-items:center;gap:14px;margin-top:4px;font-size:14px;font-weight:500;padding:10px 0 8px;min-height:44px;border-bottom:1px solid var(--fg);transition:color var(--t-hover),border-color var(--t-hover)}
.case-cta:hover{color:var(--accent);border-bottom-color:var(--accent)}
.case-next{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:var(--s3);border-top:1px solid var(--border-soft);font-size:14px;font-weight:500}
.case-next a{padding:10px 0 8px;min-height:40px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:color var(--t-hover),border-color var(--t-hover)}
.case-next a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.case-next a.next{border-bottom-color:var(--fg)}
/* the drawn ::after line is the only underline; no border beneath it */
.case-back,.case-cta,.card-btn,.case-next a,.case-next a.next,.cta,.cta-sm,.clink{border-bottom:0}
/* essay */
.article__title{font-weight:900;font-size:clamp(44px,7.4vw,120px);line-height:.92;letter-spacing:-.045em;margin-top:var(--s3);max-width:12ch}
.article__standfirst{font-weight:600;font-size:clamp(18px,1.8vw,26px);line-height:1.3;letter-spacing:-.02em;margin-top:clamp(24px,3vw,40px);max-width:44ch}
.article__tldr{font-size:16px;line-height:1.55;color:var(--fg-mid);margin-top:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);max-width:60ch}
.article__tldr strong{color:var(--fg);font-weight:600}
.article__byline{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--fg-mid);margin-top:var(--s3)}
.prose{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s3);margin-top:clamp(40px,5vw,64px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--border-soft)}
.prose>*{grid-column:4/11;min-width:0}
.prose p{font-size:16px;line-height:1.7;max-width:68ch}
.prose p strong{font-weight:600}
.prose h2{grid-column:1/4;font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:-.012em;line-height:1.4;display:flex;align-items:flex-start;gap:14px;padding-top:4px}
.prose h2::after{content:"";width:16px;height:1px;background:var(--fg);flex:none;margin-top:.55em}
.prose h2,.prose h2+p{margin-top:clamp(24px,3vw,40px)}
.prose ul,.prose ol{padding-left:20px}
.prose li::marker{color:var(--accent)}
.article__note{font-family:var(--font-mono);font-size:14px!important;line-height:1.7!important;color:var(--fg-mid)!important;margin-top:var(--s4)!important;padding-top:var(--s3);border-top:1px solid var(--border-soft)}
/* footer social row (sub-pages) */
.foot__social{display:flex;gap:4px;align-items:center}
.foot__social a{width:44px;height:44px;display:grid;place-items:center;color:var(--fg);transition:color var(--t-hover)}
.foot__social a:hover{color:var(--accent)}
.foot__social svg{width:18px;height:18px;display:block}

/* ============================================================
   CHAT — a ruled transcript in a side sheet (Swiss, not chat-app)
   ============================================================ */
.chat-panel{position:fixed;z-index:120;top:0;right:0;height:100dvh;width:min(460px,100vw);display:flex;flex-direction:column;overflow:hidden;will-change:transform;
  background:var(--bg);border-left:1px solid var(--border-soft);box-shadow:-24px 0 64px rgba(10,15,28,.10);
  transform:translateX(100%);visibility:hidden;transition:transform 420ms var(--ease),visibility 420ms}
.chat-panel.open{transform:none;visibility:visible}
html[data-theme="dark"] .chat-panel,html[data-theme="auto"].scrolled .chat-panel{box-shadow:-24px 0 64px rgba(0,0,0,.5)}
.chat-head{display:flex;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top)) 16px 18px 24px;border-bottom:1px solid var(--border-soft);flex:none}
.chat-head img{width:28px;height:28px}
.chat-head strong{font-weight:600;font-size:16px;letter-spacing:-.015em}
.chat-head .live{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.chat-x{margin-left:auto;width:44px;height:44px;color:var(--fg);cursor:pointer;display:grid;place-items:center}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 24px;overscroll-behavior:contain;display:flex;flex-direction:column}
.chat-log>*{flex:none}
/* empty state */
/* the opening state reads from the top; pinning it to the floor left the
   panel opening on a screenful of nothing */
.chat-empty{padding:10px 0 4px;transition:opacity 480ms var(--ease)}
.chat-empty.collapsed{display:none}
.chat-empty .lead{font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--fg);max-width:34ch}
.chat-empty .sug{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);margin-top:26px}
.prompts{list-style:none;margin-top:10px;border-top:1px solid var(--border-soft)}
.prompts li{border-bottom:1px solid var(--border-soft)}
.prompts button,.prompts a{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;gap:12px;width:100%;padding:14px 0;background:none;border:0;text-align:left;font:inherit;color:var(--fg);cursor:pointer;transition:color var(--t-hover)}
.prompts .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--fg-mid)}
.prompts .q{font-size:14px;font-weight:500;line-height:1.35}
.prompts .arw{width:20px;height:8px;transition:transform var(--t-hover)}
.prompts button:hover,.prompts a:hover{color:var(--accent)}
.prompts button:hover .arw,.prompts a:hover .arw{transform:translateX(6px)}
.prompts .book .k{display:grid;place-items:center;justify-items:start;color:var(--accent)}
.prompts .book .k svg{width:15px;height:15px;display:block}
.prompts .book .q{font-weight:600}
/* turns */
.turn{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--border-soft);animation:turnIn var(--d-reveal) var(--ease) both}
@keyframes turnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.turn .who{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid);padding-top:3px}
.turn .who .n{color:var(--grid-dot)}
.turn.bot .who span:first-child{color:var(--fg)}
.turn .body{font-size:16px;line-height:1.6;min-width:0;white-space:pre-wrap}
.turn.bot .body{white-space:normal}
.turn.user .body{color:var(--fg-mid)}
.turn .body p{margin:0 0 10px}.turn .body>:last-child{margin-bottom:0}
.turn .body strong{font-weight:600}
.turn .body a{border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent);word-break:break-word;transition:color var(--t-hover),border-color var(--t-hover)}
.turn .body a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.turn .body ul,.turn .body ol{margin:8px 0;padding-left:18px}
.turn .body li{margin:5px 0}
.turn .body li::marker{color:var(--accent)}
.turn .body code{font-family:var(--font-mono);font-size:.88em;background:var(--muted);padding:1px 5px;border-radius:4px}
.turn .body h4,.turn .body h5{font-family:var(--font-body);font-weight:600;margin:14px 0 6px;line-height:1.25}
.turn .body h4{font-size:16px}.turn .body h5{font-size:14px}
.turn .thinking{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.turn.streaming .body::after{content:"";display:inline-block;width:8px;height:1em;margin-left:4px;vertical-align:-2px;background:var(--fg);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
/* composer */
.chat-form{flex:none;padding:12px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border-soft);background:var(--bg)}
.cf-row{display:flex;align-items:center;gap:8px;
  background:var(--fld);border:1px solid var(--fld-line);border-radius:14px;
  padding:5px 5px 5px 16px;
  transition:background-color 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease)}
.cf-row:hover{background:var(--fld-hi)}
/* the field itself is the focus indicator, which is why the input drops its
   own ring — a 2px outline inside a filled box reads as a mistake */
.cf-row:focus-within{background:var(--fld-hi);border-color:var(--fld-line-hi);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--fg) 7%,transparent)}
.chat-form input{flex:1;min-width:0;height:44px;font-family:var(--font-body);font-size:16px;color:var(--fg);background:transparent;border:0;padding:0;border-radius:0}
.chat-form input::placeholder{color:var(--fg-mid)}
.chat-form input:focus,.chat-form input:focus-visible{outline:none}
.chat-send{width:44px;height:44px;flex:none;color:var(--fg);cursor:pointer;display:grid;place-items:center}
.chat-send:disabled{opacity:.5}
.cf-hint{display:flex;align-items:center;gap:12px;margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mid)}
.cf-hint a{display:inline-flex;align-items:center;gap:6px;color:var(--fg);border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent);padding-bottom:2px;transition:color var(--t-hover),border-color var(--t-hover)}
.cf-hint a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* frosted scrim behind the open sheet — click to close */
.chat-scrim{position:fixed;inset:0;z-index:119;background:color-mix(in oklab,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);opacity:0;visibility:hidden;transition:opacity 420ms var(--ease),visibility 420ms;cursor:pointer}
.chat-scrim.on{opacity:1;visibility:visible}
html[data-theme="dark"] .chat-scrim,html[data-theme="auto"].scrolled .chat-scrim{background:color-mix(in oklab,var(--bg) 62%,transparent)}
@media(max-width:540px){.chat-scrim{display:none}}
/* while the sheet is open the page underneath is frozen and its floating
   controls are hidden, so nothing peeks through or scrolls behind it */
/* lock the page under the chat without moving it: the body is pinned in
   place at the current scroll offset (set inline by v3.js), so the scrim
   blurs whatever was on screen */
html.chat-open{overflow:hidden;overscroll-behavior:none}
html.chat-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html.chat-open #toTop,html.chat-open .masthead{visibility:hidden}
.chat-log{-webkit-overflow-scrolling:touch}
@media(max-width:540px){.chat-panel{width:100vw;border-left:0;transition:transform 360ms var(--ease),visibility 360ms}.chat-log{padding:8px 20px 20px}.chat-head{padding-left:20px}.chat-form{padding-left:20px;padding-right:20px}.turn{grid-template-columns:1fr;gap:8px}.turn .who{flex-direction:row;gap:10px}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero-grid{grid-template-rows:auto}
  .hero-name{grid-column:1/-1;grid-row:1}
  .hero-sub{grid-column:1/7;grid-row:2;margin-top:var(--s3)}
  .hero-reel{grid-column:1/-1;grid-row:3;height:clamp(320px,48vh,460px);margin-top:var(--s4)}
  .hero-dots{grid-column:12/13;grid-row:3;align-self:start;padding-top:var(--s5)}
  .hero-ghost{grid-column:7/11;grid-row:3;align-self:end;margin-left:0}
  .hero-cta{grid-column:1/7;grid-row:4;margin-top:var(--s4)}
  .bento{grid-auto-rows:minmax(132px,auto)}
  .b-about{grid-column:1/8;grid-row:1/3}
  .b-portrait{grid-column:8/13;grid-row:1/3;padding:var(--s3) 0 var(--s3) var(--s3)}
  .b-now{grid-column:1/7;grid-row:3;border-left:0;padding-left:0;border-top:1px solid var(--border-soft)}
  .b-build{grid-column:7/13;grid-row:3;padding-right:0}
  .b-ask{grid-column:1/-1;grid-row:4;padding-right:0}
  .b-stats{grid-column:1/-1;grid-row:5;border-left:0}
  .b-stat:first-child{padding-left:0}
  .lead-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead-cell:nth-child(2n+1)::before{display:none}
  .lead-cell:nth-child(n+3){border-top:1px solid var(--border-soft)}
  .cr{align-items:start}
  .cr-media,.case-row:nth-child(even) .cr-media{grid-column:1/-1;grid-row:1}
  .cr-body,.case-row:nth-child(even) .cr-body{grid-column:1/-1;grid-row:2;padding:var(--s3) 0 0}
  .cr-num{top:-.2em;right:0}
  .sec-head--giant .sec-title,.sec-head--giant .sec-note{grid-column:1/-1}
  .sec-head--giant .sec-note{padding-bottom:0}
  .giant{grid-column:1/-1;grid-row:3;font-size:clamp(72px,20vw,160px);margin-top:var(--s2)}
  .l-yr{grid-column:1/3}
  .l-main{grid-column:3/8}
  .l-out{grid-column:8/12}
  .rl-lead{grid-column:1/5}
  .rl-pts{grid-column:5/13}
  .writing-shot{grid-column:1/-1}
  .writing-body{grid-column:1/-1;padding-top:0;margin-top:var(--s3)}
  .proj-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* a shorter 2 / 3 rhythm; four across would be unreadable at this width */
  .arch-cell,.arch-cell:nth-child(9n+1),.arch-cell:nth-child(9n+2),
  .arch-cell:nth-child(9n+3),.arch-cell:nth-child(9n+4),.arch-cell:nth-child(9n+5){grid-column:span 4;--tt:17px}
  .arch-cell:nth-child(5n+1),.arch-cell:nth-child(5n+2){grid-column:span 6;--tt:20px}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcard{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-right:0}
  .tcard:nth-child(2){padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--border)}
  .tcard:first-child,.tcard:nth-child(2){border-top:0}
  .signals,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signal:nth-child(2n+1)::before,.metric:nth-child(2n+1)::before{display:none}
  .signal:nth-child(n+3),.metric:nth-child(n+3){border-top:1px solid var(--border-soft)}
}
@media(max-width:760px){
  .masthead{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg);padding:var(--s1) 0}
  html[data-theme="auto"] .masthead{transition:none}
  main{padding-top:64px}
  /* two across, evenly, before the phone index list takes over at 640.
     Matching the rhythm rules' specificity so the later source order wins */
  .arch-grid .arch-cell{grid-column:span 6;--tt:18px}
  /* footer on phones: brand and social share the top row, then a rule,
     then the legal line and the sign-off, each on its own full-width row */
  .footer{padding-top:clamp(150px,30vw,190px)}
  /* the canvas already ends above the legal line, so the mask only softens
     its own two edges instead of clearing the lower half */
  .footer .pfield{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 78%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 78%,transparent 100%)}
  .footer .wrap{justify-content:space-between;align-items:center;gap:0}
  .footer .fmark{order:1}
  .footer .foot__social{order:2;margin-left:0;margin-right:-13px}
  .footer .fmid{order:3;flex-basis:100%;margin-left:0;justify-content:space-between;align-items:baseline;gap:var(--s2);
    border-top:1px solid var(--border-soft);margin-top:var(--s2);padding-top:var(--s2)}
  .footer .fmade{order:4;flex-basis:100%;margin-left:0;margin-top:10px;color:var(--fg-mid)}
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .case-section__label,.case-section>:not(.case-section__label),.case-section>.mosaic-wrap,.case-section>.highlights,.case-section>.projects,.case-section>.proj-row,.case-section>.case-gallery,.case-section>.metrics,.case-section>.brandbar,.case-result .rk,.case-result p,.prose>*,.prose h2{grid-column:1/-1}
  .prose h2+p{margin-top:0}
}
@media(max-width:640px){
  .hero-name{font-size:clamp(52px,17vw,76px)}
  .hero-sub{grid-column:1/-1}
  .hero-reel{grid-column:1/-1;grid-row:3;height:clamp(300px,52vh,420px);margin-top:var(--s3)}
  .slice .spine{bottom:12px}
  .slice .spine .t{font-size:12px}
  .hero-dots{display:none}
  .hero-ghost{grid-column:9/13;font-size:44px}
  .hero-cta{grid-column:1/-1}
  .bento{grid-auto-rows:auto}
  .b-about,.b-portrait,.b-now,.b-build,.b-ask,.b-stats{grid-column:1/-1;grid-row:auto;border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--border-soft)}
  .b-about{border-top:0}
  .b-portrait{aspect-ratio:4/3;min-height:0;padding:var(--s3) 0}
  .b-stats{flex-direction:row}
  .b-stat{padding:var(--s2) var(--s2)}
  .b-stat:first-child{padding-left:0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .lead-grid{grid-template-columns:1fr}
  .lead-cell::before{display:none!important}
  .lead-cell+.lead-cell{border-top:1px solid var(--border-soft)}
  .tgrid{grid-template-columns:1fr}
  .cr{padding:var(--s3) 0}
  .cr-media{gap:6px}.cr-media .row{gap:6px}
  .cr-num{font-size:72px;top:-.15em}
  .cr-title{font-size:26px}
  .cr-desc{font-size:15px}
  .tcard{grid-column:1/-1;border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--border-soft)}
  .tcard:first-child{border-top:0}
  .tcard:nth-child(2){padding-left:0;border-left:0}
  .contact-body{grid-template-columns:1fr}
  .orbit{--ow:clamp(38px,12vw,54px);height:clamp(400px,110vw,520px)}
  .orbit-core{max-width:22ch;padding:var(--s1)}
  .orbit-h{font-size:18px}
  .lrow{padding:18px 0}
  .rl-row{padding:20px 0;row-gap:10px}
  .rl-lead,.rl-pts{grid-column:1/-1;padding-right:0;max-width:none}
  .l-yr{grid-column:1/11}
  .l-main{grid-column:1/-1;margin-top:10px}
  .l-out{grid-column:1/-1;margin-top:8px}
  .lrow .arw{grid-column:11/13;grid-row:1;margin-top:14px}
  .contact-mark{width:min(64vw,220px);justify-self:center;margin-top:var(--s3)}
  /* brand mosaics match the galleries on phones: one column at the
     images' own aspect ratios, nothing cropped */
  .mosaic:not(.pin):not(.arch){display:flex;flex-direction:column;gap:10px}
  .mosaic:not(.pin):not(.arch) li{grid-column:auto;grid-row:auto}
  .mosaic:not(.pin):not(.arch) a{height:auto}
  .mosaic:not(.pin):not(.arch) img{position:static;width:100%;height:auto;object-fit:unset}
  .lb figure{padding:64px 8px 24px}
  .lb .lb-prev{left:8px;top:auto;bottom:12px;transform:none}
  .lb .lb-next{right:8px;top:auto;bottom:12px;transform:none}
  .lb img{max-height:calc(100vh - 150px)}
  .proj-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* an index list, because a 4:3 screenshot two to a phone screen is mush;
     the imagery lives in the lightbox a tap away */
  .arch-grid{display:block;margin-top:clamp(28px,7vw,40px);border-top:1px solid var(--border-soft)}
  .arch-cell{display:grid;grid-template-columns:104px 1fr;column-gap:16px;align-items:start;
    padding:16px 0;border-bottom:1px solid var(--border-soft);--tt:16px}
  .mosaic.arch{aspect-ratio:4/3}
  .mosaic.arch a{border-radius:calc(var(--radius) - 2px)}
  .arch-meta{margin-top:0;padding-top:0;border-top:0;align-content:start}
  .arch-meta::after{display:none}
  .arch-meta h3{margin-top:5px}
  .highlights,.projects,.case-gallery,.caps{grid-template-columns:1fr}
  .cv__row{flex-direction:column;align-items:flex-start;gap:4px}
  .cv__note{white-space:normal}
  .case-figure.wide{grid-column:auto}
  .hl::before,.project::before{display:none}
  .hl:nth-child(n+2){border-top:1px solid var(--border-soft)}
  .project:nth-child(n+2){border-top:1px solid var(--border-soft);padding-top:var(--s4)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;opacity:1;transform:none}.hero-name .ln>span{transform:none}.hero-sub,.hero-cta,.hero-dots,.hero-ghost,.hero-image{opacity:1!important;transform:none!important}.hero-image::after{clip-path:none}.sec-title::after,.case-section__label::after,.case-result .rk::after{transform:none}}
@media print{nav,.nav-toggle,#toTop,.chat-panel{display:none!important}body{background:#fff;color:#000}.wrap{max-width:none;padding:0}}

/* ============================================================
   SCROLL REVEALS
   One vocabulary, applied by weight: headings travel furthest,
   body copy less, meta least, so a section resolves in order of
   importance rather than arriving all at once. Everything is a
   scroll-driven CSS animation on opacity and translate only, so it
   runs on the compositor and costs no script. Elements that carry a
   hover transform are faded rather than moved, so the reveal never
   clobbers their resting transform. Wrapped in @supports, so where
   scroll timelines are unavailable content simply renders.
   ============================================================ */
@keyframes revL{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes revM{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes revS{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes revFade{from{opacity:0}to{opacity:1}}
@keyframes revGiant{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

@supports (animation-timeline:view()){
  .rv-l,.sec-title,.case-title:not(.vh),.contact-h,.orbit-h,.w-lead,.case-quote p,.article__title,.rl .case-lede{
    animation:revL linear both;animation-timeline:view();animation-range:cover 0% cover 24%}
  .rv-m,.sec-note,.sec-statement,.case-sub,.logo-pair.title,.case-result,.case-section>p,.case-section>.caps,
  .case-section>.project-group,.article__standfirst,.article__tldr,.prose>p,.prose>h2,.orbit-core .cta-sm,
  .writing-body>div,.contact-links,.case-next,.case-quote cite,.orbit-k{
    animation:revM linear both;animation-timeline:view();animation-range:cover 0% cover 25%}
  .rv-s,.dm-k{animation:revS linear both;animation-timeline:view();animation-range:cover 0% cover 23%}

  /* the oversized section word drifts up a little further and later, so it
     settles behind the heading rather than with it */
  .giant{animation:revGiant linear both;animation-timeline:view();animation-range:cover 0% cover 30%}

  /* groups stagger by index; a repeating three-step wave for long lists so
     late items never feel delayed */
  .bento-cell,.lead-cell,.signal,.metric,.hl,.cv__row,.rl-row,.arch-cell,.w-list li,
  .mosaic li,.proj-row li,.case-figure,.contact-links a{
    animation:rowIn linear both;animation-timeline:view();animation-range:cover 0% cover 24%}
  .bento-cell:nth-child(2),.lead-cell:nth-child(2),.signal:nth-child(2),.metric:nth-child(2),
  .hl:nth-child(2),.contact-links a:nth-child(2),.mosaic li:nth-child(3n+2),.proj-row li:nth-child(3n+2),
  .arch-cell:nth-child(3n+2),.case-figure:nth-child(3n+2),.cv__row:nth-child(3n+2),.rl-row:nth-child(3n+2),
  .w-list li:nth-child(2){animation-range:cover 3% cover 25%}
  .bento-cell:nth-child(3),.lead-cell:nth-child(3),.signal:nth-child(3),.metric:nth-child(3),
  .hl:nth-child(3),.contact-links a:nth-child(3),.mosaic li:nth-child(3n),.proj-row li:nth-child(3n),
  .arch-cell:nth-child(3n),.case-figure:nth-child(3n),.cv__row:nth-child(3n),.rl-row:nth-child(3n),
  .w-list li:nth-child(3){animation-range:cover 6% cover 27%}
  .bento-cell:nth-child(4),.lead-cell:nth-child(4),.signal:nth-child(4),.metric:nth-child(4),
  .hl:nth-child(4),.contact-links a:nth-child(4){animation-range:cover 9% cover 28%}
  .bento-cell:nth-child(n+5),.lead-cell:nth-child(n+5),.hl:nth-child(n+5),
  .contact-links a:nth-child(n+5){animation-range:cover 12% cover 30%}

  /* the case row copy resolves kicker, title, description, arrow */
  .cr-k{animation:revS linear both;animation-timeline:view();animation-range:cover 0% cover 23%}
  .cr-title{animation:revL linear both;animation-timeline:view();animation-range:cover 2% cover 25%}
  .cr-desc{animation:revM linear both;animation-timeline:view();animation-range:cover 5% cover 27%}
  .cr-go{animation:revS linear both;animation-timeline:view();animation-range:cover 8% cover 27%}
  .cr-num{animation:revFade linear both;animation-timeline:view();animation-range:cover 0% cover 31%}

  /* these carry a hover transform, so they only fade */
  .writing-shot,.contact-mark,.orbit{animation:revFade linear both;animation-timeline:view();animation-range:cover 0% cover 24%}

  /* nothing inside the full-screen slice sheet: it has its own choreography */
  .detail *{animation-timeline:auto}

  /* the archive tile reveals as a whole cell; a reveal on its stacked frames
     would pin them all to opacity 1 and kill the hover crossfade */
  .mosaic.arch li{animation:none}
}


/* ── SHELL NAVIGATION ───────────────────────────────────────────────────────
   The menu is not a layer that arrives on top. It is always there, fixed
   behind the page, and opening it moves the page off it: the whole document
   is one surface that shifts left and scales down as a single transform, so
   the masthead, the content and the buttons travel together rather than each
   animating on their own.

   Three layers, painted bottom to top:
     .sidenav    the menu, fixed, behind everything
     .shell      the page itself, opaque, covering the menu when closed
     .nav-catch  an invisible sheet over the moved page, so a tap on it closes
                 the menu instead of falling through to a link underneath

   The shell must have NO transform at rest. A transform — even an identity
   one — makes it the containing block for its position:fixed descendants,
   which would strand the masthead and the back-to-top button mid-document. */

/* a damped spring, sampled: it arrives, overshoots two percent, and settles.
   A cubic-bezier cannot express the settle, which is the part that reads as
   weight rather than as a slide */
:root{
  /* how far the page travels, and how far it shrinks. The strip it uncovers is
     wider than the travel, because scaling pulls the right edge in as well:
     strip = --nav-w + 50vw * (1 - --nav-scale) */
  --nav-w:min(58vw,280px);
  --nav-scale:.9;
  --nav-gap:22px;
  --nav-r:26px;
  --nav-spring:linear(0, 0.0093 1.7%, 0.0344 3.4%, 0.0719 5.1%, 0.1185 6.8%, 0.1717 8.5%,
    0.4692 16.9%, 0.5801 20.3%, 0.6309 22%, 0.6783 23.7%, 0.7221 25.4%, 0.7622 27.1%,
    0.7986 28.8%, 0.8314 30.5%, 0.8608 32.2%, 0.8868 33.9%, 0.9297 37.3%, 0.9618 40.7%,
    0.9849 44.1%, 1.0064 49.2%, 1.0184 55.9%, 1);
  --nav-ease:cubic-bezier(.32,.72,0,1);
  --nav-t:560ms;
}
@supports (transition-timing-function:linear(0,1)){:root{--nav-ease:var(--nav-spring)}}

.shell{position:relative;z-index:1;background:var(--bg);min-height:100svh;
  transition:transform var(--nav-t) var(--nav-ease),border-radius var(--nav-t) var(--nav-ease)}

/* While the menu is out the page stops being a tall document and becomes a
   pane the size of the screen, showing the same place through a negative
   margin. That is what gives the slab real corners and a real bottom edge: a
   document-tall element carries its rounded corners thousands of pixels off
   screen, so all you see is a square, full-bleed edge with a rounded dim
   layer floating over it. It also bounds the composited surface to one
   screenful instead of the whole page.

   The margin is layout, not a transform, so position:fixed children still
   resolve against the shell — which is now exactly the viewport box — and the
   masthead pins to the top of the slab with nothing to correct.

   .nav-closing holds all of this in place for the flight back, because
   letting the shell drop into flow mid-transition would move the pivot to the
   middle of the document and the page would lurch. */
html.nav-open .shell,html.nav-closing .shell{
  position:fixed;inset:0;min-height:0;overflow:hidden;
  transform-origin:50% 50%;border-radius:var(--nav-r)}
html.nav-open .shell-view,html.nav-closing .shell-view{margin-top:calc(-1 * var(--sy))}
html.nav-closing .shell{border-radius:0}
html.nav-open .shell{transform:translateX(calc(-1 * var(--nav-w))) scale(var(--nav-scale));
  box-shadow:0 30px 70px -22px rgba(0,0,0,.55),
    0 0 0 1px color-mix(in oklab,var(--fg) 20%,transparent)}
html.nav-open,html.nav-closing{overflow:hidden;touch-action:none;overscroll-behavior:none}

/* The page's own bar goes with the page. Leaving the close mark on it put the
   one control you still need underneath the dim layer, which washed it out —
   the mark now lives in that layer instead, above the scrim. */
html.nav-open .masthead,html.nav-closing .masthead,
html.nav-open #toTop,html.nav-closing #toTop,
html.nav-open .margin-line,html.nav-closing .margin-line{visibility:hidden}

.sidenav{position:fixed;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;
  background:var(--bg);color:var(--fg);visibility:hidden}
html.nav-open .sidenav{visibility:visible}
/* sized to the strip the page uncovers, less a gap at each end, so the type
   never runs under the page's edge however the travel is tuned */
.sidenav-in{margin-left:auto;margin-right:var(--nav-gap);
  width:calc(var(--nav-w) + (50vw * (1 - var(--nav-scale))) - (var(--nav-gap) * 2))}
.sidenav h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mid);font-weight:500;margin-bottom:var(--s3)}
.sidenav ul{list-style:none}
.sidenav li+li{margin-top:2px}
.sidenav a{display:block;padding:9px 0;font-size:clamp(23px,6.4vw,29px);font-weight:600;letter-spacing:-.03em;
  color:var(--fg);border-bottom:0;transition:color 240ms var(--ease)}
/* An outline around a 29px word is loud and sits oddly on a list this open.
   The item in play is the one at full strength while the rest step back, which
   carries the focus state too — a strong enough change to stand in for a ring.
   The stepping-back is a variable on the list rather than a rule on the links,
   because :has() borrows the specificity of its argument and would otherwise
   outrank the very rule meant to lift one item back out of it. */
.sidenav ul{--ink:var(--fg)}
.sidenav ul:has(a:hover),.sidenav ul:has(a:focus){--ink:color-mix(in oklab,var(--fg) 44%,transparent)}
.sidenav ul a{color:var(--ink)}
.sidenav ul a:hover,.sidenav ul a:focus,.sidenav ul a:active{color:var(--fg);outline:none}
.sidenav-meta a:hover,.sidenav-meta a:focus{outline:none;color:var(--fg)}
.sidenav-meta{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:6px 18px}
.sidenav-meta a{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--fg-mid);padding:0;transition:color 240ms var(--ease)}
/* the links rise as the page uncovers them, a touch behind the page itself */
.sidenav li,.sidenav-meta{opacity:0;transform:translateY(14px);
  transition:opacity 260ms var(--ease),transform 420ms var(--nav-ease)}
html.nav-open .sidenav li,html.nav-open .sidenav-meta{opacity:1;transform:none}
html.nav-open .sidenav li:nth-child(1){transition-delay:130ms}
html.nav-open .sidenav li:nth-child(2){transition-delay:170ms}
html.nav-open .sidenav li:nth-child(3){transition-delay:210ms}
html.nav-open .sidenav li:nth-child(4){transition-delay:250ms}
html.nav-open .sidenav li:nth-child(n+5){transition-delay:290ms}
html.nav-open .sidenav-meta{transition-delay:330ms}

/* Rides the same transform as the page, so it covers exactly the moved surface
   and never the menu beside it. It absorbs the tap that would otherwise fall
   through to a link the visitor cannot see, dims the page to show it is out of
   play, and is itself the way back. */
.nav-catch{position:fixed;inset:0;z-index:2;cursor:pointer;background:rgba(6,8,14,.26);
  opacity:0;pointer-events:none;border-radius:var(--nav-r);
  transform:translateX(calc(-1 * var(--nav-w))) scale(var(--nav-scale));transform-origin:50% 50%;
  transition:opacity var(--nav-t) var(--nav-ease),transform var(--nav-t) var(--nav-ease)}
html.nav-open .nav-catch{opacity:1;pointer-events:auto}
html:not(.nav-open) .nav-catch{transform:none;border-radius:0}
.nav-x{position:absolute;top:22px;right:22px;width:48px;height:48px;display:grid;place-items:center;
  padding:0;cursor:pointer;border-radius:999px;color:var(--fg);
  background:color-mix(in oklab,var(--bg) 88%,var(--fg));
  border:1px solid color-mix(in oklab,var(--fg) 18%,transparent);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  opacity:0;transform:scale(.7) rotate(-60deg);
  transition:opacity 220ms var(--ease),transform 420ms var(--nav-ease)}
html.nav-open .nav-x{opacity:1;transform:none;transition-delay:140ms}
.nav-x:active{transform:scale(.94)}
/* the ring belongs to the keyboard; script moving focus back here is not the
   visitor asking for it (see the modality tracking in v3.js) */
.nav-toggle.nav-quiet:focus-visible,.nav-toggle.nav-quiet:focus{outline:none}

/* the hamburger becomes a close mark, on the same clock as everything else.
   The bars are drawn at y=12, 6 and 18 in a 24-unit view box, so the outer two
   are carried to the middle before they turn, or they cross off-centre */
.nav-toggle svg path{transition:transform var(--nav-t) var(--nav-ease),opacity 200ms var(--ease);
  transform-box:view-box;transform-origin:12px 12px}
html.nav-open .nav-toggle svg path:nth-child(1){opacity:0}
html.nav-open .nav-toggle svg path:nth-child(2){transform:translateY(6px) rotate(45deg)}
html.nav-open .nav-toggle svg path:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* The blanket reduced-motion rule flattens durations but not delays, and a
   staggered entrance is exactly what it is there to remove. */
@media(prefers-reduced-motion:reduce){
  html.nav-open .sidenav li,html.nav-open .sidenav-meta{transition-delay:0s!important}
}


/* ── ROLLING LABELS ─────────────────────────────────────────────────────────
   A label stacked twice inside a clipped box: hovering slides the second copy
   up into the first one's place. Only a transform moves, so it stays on the
   compositor and never touches the line it sits in.

   The roll inherits the link's own line-height rather than inventing one. That
   matters twice over: the glyphs land exactly where they did before the text
   was wrapped, and the box stays tall enough that the clip does not shear the
   descenders off. Both copies are the same word, so a roll caught mid-state —
   a focus left behind, a transition interrupted — is indistinguishable from
   rest, and there is no wrong state to land in. */
.roll{display:inline-block;overflow:hidden;vertical-align:bottom;height:1lh}
@supports not (height:1lh){.roll{height:1.5em}}
.roll-i{display:block;transition:transform .6s var(--ease-lux)}
.roll-l{display:block;white-space:nowrap}
/* the incoming copy is generated content, so it never joins the document's
   text and a crawler reads the label once */
.roll-l[data-t]::before{content:attr(data-t)}
:is(a,button):hover>.roll>.roll-i,
:is(a,button):focus-visible>.roll>.roll-i{transform:translateY(-50%)}
/* the second copy is decoration; it must never be read out or found in-page */
.roll-l[aria-hidden]{user-select:none}


/* ── VIDEO FACADE ───────────────────────────────────────────────────────────
   A poster and a play button standing in for an embed. The iframe is only
   built on the click, so a page carrying a video costs nothing until someone
   asks for it — a YouTube embed is hundreds of kilobytes and a pile of
   third-party requests, which is not a fair price for a frame most visitors
   scroll past. nocookie, and no request of any kind reaches Google until the
   visitor chooses to play. */
.case-video{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:var(--surface-raised);cursor:pointer}
.case-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:0;aspect-ratio:auto;transition:transform 620ms var(--ease),filter 380ms var(--ease)}
.case-video:hover img,.case-video:focus-within img{transform:scale(1.025);filter:brightness(.78)}
.cv-play{position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;padding:0;
  display:grid;place-items:center;cursor:pointer;border-radius:999px;color:#fff;
  background:color-mix(in oklab,#0b0e15 52%,transparent);
  border:1px solid color-mix(in oklab,#fff 34%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.7);
  transform:translate(-50%,-50%);
  transition:transform 420ms var(--ease-lux),background-color 260ms var(--ease),border-color 260ms var(--ease)}
/* the triangle sits optically centred, not geometrically */
.cv-play svg{margin-left:4px}
.case-video:hover .cv-play{transform:translate(-50%,-50%) scale(1.07);
  background:color-mix(in oklab,#0b0e15 38%,transparent);border-color:color-mix(in oklab,#fff 54%,transparent)}
.cv-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.case-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.case-video.on img,.case-video.on .cv-play{opacity:0;pointer-events:none;transition:opacity 220ms var(--ease)}
@media(max-width:640px){.cv-play{width:62px;height:62px}.cv-play svg{width:22px;height:22px}}


/* an unanswered section on a draft page. Loud on purpose: this must never be
   mistaken for finished copy, and the page carries noindex until they are gone */
.prose-todo{border-left:2px solid var(--accent);background:color-mix(in oklab,var(--accent) 7%,transparent);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;color:var(--fg-mid);
  font-size:15px;line-height:1.55}
.prose-todo strong{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}


/* the line under the contact headline: it narrows who should get in touch,
   so it reads as considered prose rather than another label */
.contact-note{max-width:44ch;margin-top:var(--s3);font-size:16px;line-height:1.6;color:var(--fg-mid)}
@media(max-width:640px){.contact-note{font-size:15px;margin-top:var(--s2)}}


/* the claim under the About statement, at the hero's positioning-line weight:
   three sentences of display type turned the cell into a wall */
.bento-pos{display:block;font-family:var(--font-body);font-size:15px;font-weight:500;
  line-height:1.6;letter-spacing:0;color:var(--fg-mid);margin-top:20px;max-width:42ch}
@media(max-width:640px){.bento-pos{font-size:14px;margin-top:16px}}