/* ============================================================
   V2 LAYER — additive components only. No new tokens.
   paper #EFEBE3 · ink #1B1A18 · ink-2 #4A4843 · mute #8E8777
   rule rgba(27,26,24,.13) · ease cubic-bezier(.2,.7,.2,1)
   ============================================================ */

/* ---------- LIGHT ARC (pages on the paper ground only) ---------- */
body.v2-arc{
  background:linear-gradient(to bottom,#EFEBE3 0%,#EFEBE3 55%,#F4F1EA 100%);
}

/* ---------- FILM GRAIN (canvas injected by v2.js) ---------- */
.v2-grain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;
  z-index:2147483000;opacity:.03;}
@media (prefers-reduced-motion:reduce){.v2-grain{display:none;}}
@media (max-width:767px){.v2-grain{display:none;}}

/* ---------- DARKROOM PLATE (homepage work index) ---------- */
#dk-plate{display:none;}
@media (hover:hover) and (min-width:1500px){
  #dk-plate{display:block;position:fixed;right:24px;top:50%;
    transform:translateY(-50%);width:clamp(180px,calc((100vw - var(--maxw,1180px))/2 - 48px),320px);pointer-events:none;
    z-index:5;opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1);}
  #dk-plate.is-on{opacity:1;}
  #dk-plate img{display:block;width:100%;height:auto;
    filter:grayscale(1) contrast(1.03);
    opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1);}
  #dk-plate.is-on img{opacity:1;}
  #dk-plate .dk-noise{position:absolute;inset:0;opacity:0;
    transition:opacity .25s cubic-bezier(.2,.7,.2,1);}
  #dk-plate.is-dev .dk-noise{opacity:.14;}
  /* inverted treatment: the plate develops on ink (dark rows) */
  #dk-plate.is-ink{background:#1B1A18;box-shadow:0 0 0 10px #1B1A18;}
  #dk-plate.is-ink .dk-noise{filter:invert(1);}
}
@media (prefers-reduced-motion:reduce){
  #dk-plate,#dk-plate img{transition:none;}
}
/* Touch elevation: same plate, populated by scroll (v2.js), fixed thumb. */
@media (hover:none){
  #dk-plate{display:block;position:fixed;right:14px;bottom:18px;
    width:clamp(96px,34vw,150px);pointer-events:none;z-index:5;opacity:0;
    background:#EFEBE3;box-shadow:0 0 0 6px #EFEBE3,0 2px 18px rgba(27,26,24,.18);
    transition:opacity .45s cubic-bezier(.2,.7,.2,1);}
  #dk-plate.is-on{opacity:1;}
  #dk-plate img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.03);}
  #dk-plate .dk-noise{display:none;}
  #dk-plate.is-ink{background:#1B1A18;box-shadow:0 0 0 6px #1B1A18,0 2px 18px rgba(27,26,24,.3);}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  #dk-plate{transition:none;}
}

/* ---------- MASKED HEADLINE RISE (v2.js wraps the page h1) ---------- */
.v2-hl{overflow:hidden;}
.v2-hl .v2-hl-inner{display:block;transform:translateY(103%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.v2-hl.v2-hl-in .v2-hl-inner{transform:none;}
@media (prefers-reduced-motion:reduce){
  .v2-hl .v2-hl-inner{transform:none;transition:none;}
}

/* ---------- SITEBAR NAV: underline draw-in from the left ---------- */
.js .sitebar .sb-links a{text-decoration:none;position:relative;}
.js .sitebar .sb-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.js .sitebar .sb-links a:hover,.js .sitebar .sb-links a:focus-visible{text-decoration:none;}
.js .sitebar .sb-links a:hover::after,.js .sitebar .sb-links a:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){.js .sitebar .sb-links a::after{transition:none;}}

/* ---------- CASE NAV (prev/next): title nudge + arrow slide ---------- */
.cnav a .cn-title{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.cnav a:hover .cn-title,.cnav a:focus-visible .cn-title{transform:translateX(-5px);}
.cnav a.cn-next:hover .cn-title,.cnav a.cn-next:focus-visible .cn-title{transform:translateX(5px);}
@media (prefers-reduced-motion:reduce){
  .cnav a .cn-title{transition:none;}
  .cnav a:hover .cn-title,.cnav a:focus-visible .cn-title,
  .cnav a.cn-next:hover .cn-title,.cnav a.cn-next:focus-visible .cn-title{transform:none;}
}

/* ---------- REVEAL PLATE (sketch beneath the surface) ---------- */
.rplate{margin:clamp(40px,7vh,88px) 0;}
.rplate .rp-stage{position:relative;overflow:hidden;}
.rplate .rp-stage img{display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(1.03);}
.rplate .rp-under{position:absolute;inset:0;}
.rplate .rp-under img{height:100%;object-fit:cover;}
.rplate .rp-top{position:relative;}
/* wipe mode: JS drives a feathered circular window via mask on the top image */
.rplate[data-mode="wipe"] .rp-top{
  -webkit-mask-image:radial-gradient(circle var(--rp-r,0px) at var(--rp-x,50%) var(--rp-y,50%),transparent 0,transparent 55%,#000 100%);
  mask-image:radial-gradient(circle var(--rp-r,0px) at var(--rp-x,50%) var(--rp-y,50%),transparent 0,transparent 55%,#000 100%);
}
/* fade mode: slow automatic crossfade once in viewport */
.rplate[data-mode="fade"] .rp-top{transition:opacity 2.6s cubic-bezier(.2,.7,.2,1);}
.rplate[data-mode="fade"].is-fading .rp-top{animation:rp-fade 9s cubic-bezier(.2,.7,.2,1) infinite alternate;}
@keyframes rp-fade{0%,22%{opacity:1}78%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rplate[data-mode="wipe"] .rp-top{-webkit-mask-image:none;mask-image:none;}
  .rplate[data-mode="fade"].is-fading .rp-top{animation:none;opacity:1;}
}
.rplate figcaption{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#6B654F;margin-top:18px;
  display:flex;justify-content:space-between;gap:16px;}
/* placeholder until sketch plates arrive */
.rplate .rp-placeholder{background:#EFEBE3;border-top:1px solid var(--rule, rgba(27,26,24,.13));
  border-bottom:1px solid var(--rule, rgba(27,26,24,.13));min-height:200px;display:flex;
  align-items:center;justify-content:center;}
.rplate .rp-placeholder span{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#8E8777;}

/* ---------- DEVICE FRAME (live product embed) ---------- */
.v2-device{display:flex;justify-content:center;margin:clamp(40px,7vh,88px) 0;}
.v2-device .frame{width:min(390px,88vw);aspect-ratio:390/844;
  border:1px solid #1B1A18;border-radius:44px;padding:10px;background:transparent;}
.v2-device iframe,.v2-device .app-placeholder{width:100%;height:100%;border:0;
  border-radius:34px;display:block;background:#EFEBE3;}
.v2-device .app-placeholder{display:flex;align-items:center;justify-content:center;}
.v2-device .app-placeholder span{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#8E8777;}

/* ---------- FILM SCRUB (Faultline) ---------- */
.v2-film{margin:clamp(40px,7vh,88px) 0;}
.v2-film video,.v2-film .film-placeholder{display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(1.03);}
.v2-film .film-placeholder{aspect-ratio:16/9;background:#EFEBE3;
  border-top:1px solid var(--rule, rgba(27,26,24,.13));border-bottom:1px solid var(--rule, rgba(27,26,24,.13));
  display:flex;align-items:center;justify-content:center;filter:none;}
.v2-film .film-placeholder span{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#8E8777;}
/* quiet excerpt player — tap-to-play, paper affordance, no native chrome */
.fs-wrap{position:relative;}
.fs-wrap video{display:block;width:100%;height:auto;}
.fs-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(27,26,24,.18);border:0;padding:0;margin:0;cursor:pointer;width:100%;
  transition:opacity .35s cubic-bezier(.2,.7,.2,1);}
.fs-play .fs-ring{display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(239,235,227,.85);}
.fs-play .fs-tri{display:block;width:0;height:0;margin-left:4px;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-left:14px solid #EFEBE3;}
.fs-wrap.is-playing .fs-play{opacity:0;pointer-events:none;}
.v2-film figcaption{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#6B654F;margin-top:18px;
  display:flex;justify-content:space-between;gap:16px;}

/* skip link — first focusable element, visually hidden until focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#1B1A18;color:#EFEBE3;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;text-decoration:none;}
.skip-link:focus{left:12px;top:12px;outline:2px solid #EFEBE3;outline-offset:2px;}

/* ---- Large-viewport type floor: nothing under 13px at >=1920px ---- */
@media (min-width:1920px){
  .anat-note,
  .aside-label,
  .aside-loc,
  .beat .num,
  .beatcap,
  .block .label,
  .card-num,
  .carve-hint{font-size:13px !important;}
  .cell .n,
  .cfig figcaption,
  .cfoot-links,
  .chapter,
  .closing .contact,
  .cn-eyebrow,
  .copy-btn,
  .cv .cv-lede{font-size:13px !important;}
  .cv figcaption,
  .cv-sub,
  .cv-top,
  .deliv-row .d-tag,
  .device .bar .hint,
  .device .bar .url,
  .device-cap,
  .eyebrow{font-size:13px !important;}
  .field label,
  .figure-label,
  .fn-grid figcaption,
  .fn-lede,
  .foot a,
  .founder .f-sub,
  .gate-tag,
  .he-plate figcaption{font-size:13px !important;}
  .hero .eymark span,
  .hero .he-kicker,
  .hero .meta span,
  .hero-eyebrow,
  .hero-links a,
  .hero-meta-label,
  .ib-cap,
  .inkfig figcaption{font-size:13px !important;}
  .kicker,
  .lens-mini .nm,
  .line-gallery .lg-caption,
  .menu a,
  .meta dt,
  .more-eyebrow,
  .note-label,
  .numeral-mini .gb .t{font-size:13px !important;}
  .open .kicker,
  .open-plate figcaption,
  .owned-label,
  .p-meta,
  .p-view,
  .pcard .tag,
  .phase-meta,
  .pivot .small{font-size:13px !important;}
  .plate figcaption,
  .pname,
  .pop-caprow,
  .pop-live,
  .principle-num,
  .projects-more .p-view,
  .ptime,
  .sb-links a{font-size:13px !important;}
  .scr .step,
  .scr .sub,
  .screen .bar .u,
  .script-x .sx-kicker,
  .scroll-hint,
  .scrollcue,
  .send,
  .showcase .bar .hint{font-size:13px !important;}
  .showcase .bar .url,
  .social-handle,
  .sound-btn,
  .src-line,
  .stage-cap,
  .stage-rail button,
  .step-time,
  .stills figcaption{font-size:13px !important;}
  .sv-eyebrow,
  .sv-kick,
  .tagmoment .mk,
  .tbl-cap,
  .th-cap,
  .thread-plates figcaption,
  .tile .lbl,
  .topbar .tb-cta{font-size:13px !important;}
  .topbar .tb-mid,
  .trip figcaption,
  .type-mini .ty .s,
  .v-cat .eye,
  .v-ey .eye,
  .v-gov .fl .t,
  .v-promise .mk,
  .v-proof .pv-cap{font-size:13px !important;}
  .v-proof .pv-lab,
  .v-sys .ty span,
  .work-count,
  .work-eyebrow,
  footer .copy,
  footer .lk,
  footer a,
  footer span{font-size:13px !important;}
  header.sitebar .menu a,
  table.data,
  table.data th{font-size:13px !important;}
  [style*="font-size:10"],[style*="font-size:11"],[style*="font-size:12"],
  [style*="font-size: 10"],[style*="font-size: 11"],[style*="font-size: 12"]{font-size:13px !important;}
}
@media (min-width:1920px){
  .skip-link,.lvlmeta,.hnote-label,.bcue .ci,.bcue .co,
  .fn-lede span,.cv .cv-lede span,.fn-grid figcaption span,.cv figcaption span,
  figcaption span{font-size:13px !important;}
}
@media (min-width:1920px){
  .runhead span,.rh-r,.bcue span,
  .meta .k,.proof .k,.flow .node .s,.nav .tag,
  .rm-tag,.founder-role{font-size:13px !important;}
}
@media (min-width:1920px){
  .scale-strip .sz,.sw .hex,.type-mini .sw i span,.ph{font-size:13px !important;}
}
@media (min-width:1920px){
  #bslabel,.role,[style*="--fs-label"]{font-size:13px !important;}
}
@media (min-width:1920px){
  .lbl,.demo-url,#p-paste,#p-voice,#p-reveal{font-size:13px !important;}
}
@media (min-width:1920px){
  figcaption,.rk{font-size:13px !important;}
  .scn-mini .rk{font-size:7.5px !important;} /* miniature screen facsimile — imagery-equivalent */
}
@media (min-width:1920px){
  footer,footer span,footer small{font-size:13px !important;}
}


/* Print: the site header never belongs on paper. */
@media print{.sitebar{display:none !important;}}

/* Single page-gutter token — every page's edge padding reads this,
   so content columns align with the header's own gutter. */
:root{--gutter:clamp(22px,5vw,40px);}

/* sticky editorial header (replaces pill nav) */
html{scroll-padding-top:70px;}
.sitebar{position:sticky;top:0;z-index:9998;background:var(--sb-bg);color:var(--sb-fg);
  border-bottom:1px solid var(--sb-rule);transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.sitebar.sb-hide{transform:translateY(-100%);}
.sb-in{max-width:1140px;margin:0 auto;padding:13px clamp(22px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sb-brand{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;letter-spacing:.2px;
  color:var(--sb-fg);text-decoration:none;white-space:nowrap;}
.sb-brand em{font-style:italic;font-weight:500;}
/* One deliberate addition to the promoted block: the brand's line box used to
   inherit each page's body line-height, so bar height varied 51-58px by page.
   Pin it to the work-page value so every header is byte-equal AND pixel-equal. */
.sb-brand{line-height:31px;}
.sb-links a{line-height:1;}
.sb-links{display:flex;gap:clamp(14px,2.4vw,26px);}
.sb-links a{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sb-fg);opacity:.78;text-decoration:none;white-space:nowrap;}
.sb-links a:hover,.sb-links a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.sb-links a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px;}
.sb-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.sb-lv{display:none;}
@media(max-width:430px){
  .sb-full{display:none;}.sb-lv{display:inline;}
  .sb-in{padding:11px 18px;}
  .sb-links{gap:13px;}
  .sb-links a{font-size:10.5px;letter-spacing:.1em;}
}
@media(prefers-reduced-motion:reduce){.sitebar{transition:none;}.sitebar.sb-hide{transform:none;}}

/* ---- scroll-progress rail ------------------------------------------------
   CSS only; v2.js injects the #rail div when the page doesn't already have
   one (Faultline carries its own and overrides background via its inline CSS).
   --ink gives a dark-on-light line for all the light-ground case pages. */
#rail{position:fixed;top:0;left:0;height:2px;width:100%;z-index:220;pointer-events:none;}
#rail i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--ink,#1B1A18);opacity:.75;}

/* ---- scroll reveals -------------------------------------------------------
   html.js-reveal is added by v2.js only after IntersectionObserver is
   confirmed and already-visible elements are pre-marked .in, so there is no
   flash of hidden content. Specificity (0,2,1) beats the per-page inline
   .js .reveal (0,2,0), so this takes precedence once the gate is open.
   Reduced motion: reveals are instant (content is never stuck hidden). */
html.js-reveal .reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);
}
html.js-reveal .reveal.in{opacity:1;transform:none;}
html.js-reveal .d1{transition-delay:.07s;}
html.js-reveal .d2{transition-delay:.14s;}
html.js-reveal .d3{transition-delay:.21s;}
html.js-reveal .d4{transition-delay:.28s;}
@media(prefers-reduced-motion:reduce){
  html.js-reveal .reveal{opacity:1!important;transform:none!important;transition:none;}
}

/* ---- Media lock -------------------------------------------------
   Blocks drag-to-desktop, drag-to-new-tab, and the iOS long-press
   save sheet on media only. Text stays selectable on purpose —
   recruiters copy names, titles and email addresses.
------------------------------------------------------------------ */
img, video, picture, svg, canvas {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}