/* Missional by Design editorial system, ported from editorial study 4 (23 October 2026).
   Source of truth for the study: bible-faith-patterns/research/design-directions/editorial-study-2026-10-23/.
   Motion lives only under html.motion (set by editorial.js when the reader allows motion).
   Without JS, with reduced motion, and in full-page captures, every page is a static, fully lit layout. */

@font-face{font-family:"Instrument Serif";src:url(../brand/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../brand/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Mona Sans";src:url(../brand/mona-sans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}

/* ===================================================================== tokens */
:root{
  /* surface and ink (contrast on --paper: ink 14.7:1, muted 6.8:1, faint 5.2:1, link 8.1:1, unlit 3.1:1 large text only) */
  --paper:#f6f8fa; --paper-hi:#ffffff; --paper-lo:#edf2f6;
  --ink:#0f2537; --muted:#44596c; --faint:#566b7e; --unlit:#7d8fa1;
  --link:#1d4f74; --rule:#d3dde6; --rule-strong:#b7c6d3; --focus:#1f5f8f; --select:#cfe0ee;
  /* metal: the pale blue-silver of the specimen */
  --metal-0:#ffffff; --metal-1:#e8eef3; --metal-2:#c9d6e1; --metal-3:#94aabd; --metal-4:#5d7790;
  --sheen:rgba(255,255,255,.95); --sheen-soft:rgba(255,255,255,.55);
  --shaft:rgba(255,255,255,.75); --shaft-edge:rgba(214,226,236,0);
  --glint:#ffffff; --glint-halo:rgba(170,200,226,.55); --glint-ink:#5f7d97; --glint-ink-halo:rgba(95,125,151,.3);
  --photo-filter:none;

  /* type */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-display:clamp(52px,8.8vw,144px);
  --t-statement:clamp(40px,6.2vw,100px);
  --t-h2:clamp(40px,5vw,80px);
  --t-h3:clamp(28px,2.7vw,42px);
  --t-lead:clamp(21px,1.75vw,27px);
  --t-body:clamp(17px,1.25vw,19px);
  --t-small:14px; --t-micro:12.5px;

  /* space and grid: 12 columns, max 1440 */
  --max:1440px;
  --gutter:clamp(20px,5.6vw,96px);
  --col-gap:clamp(14px,2.2vw,32px);
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:clamp(80px,9vw,128px);
  --s-7:clamp(112px,14vw,208px); --s-8:clamp(144px,20vw,300px);
  --measure:34rem;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0a141e; --paper-hi:#0f1c29; --paper-lo:#0d1925;
  --ink:#e6eef5; --muted:#b0c2d1; --faint:#8fa5b8; --unlit:#5a7084;
  --link:#a8d0ee; --rule:#1e3245; --rule-strong:#2d465c; --focus:#8cc8f2; --select:#22445f;
  --metal-0:#dfe9f2; --metal-1:#16283a; --metal-2:#2b4359; --metal-3:#6d89a3; --metal-4:#a9c3d9;
  --sheen:rgba(214,234,250,.9); --sheen-soft:rgba(190,218,242,.35);
  --shaft:rgba(160,196,226,.16); --shaft-edge:rgba(160,196,226,0);
  --glint:#f4fbff; --glint-halo:rgba(130,180,222,.45); --glint-ink:#eaf5ff; --glint-ink-halo:rgba(130,180,222,.55);
  --photo-filter:brightness(.86) contrast(1.04);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0a141e; --paper-hi:#0f1c29; --paper-lo:#0d1925;
  --ink:#e6eef5; --muted:#b0c2d1; --faint:#8fa5b8; --unlit:#5a7084;
  --link:#a8d0ee; --rule:#1e3245; --rule-strong:#2d465c; --focus:#8cc8f2; --select:#22445f;
  --metal-0:#dfe9f2; --metal-1:#16283a; --metal-2:#2b4359; --metal-3:#6d89a3; --metal-4:#a9c3d9;
  --sheen:rgba(214,234,250,.9); --sheen-soft:rgba(190,218,242,.35);
  --shaft:rgba(160,196,226,.16); --shaft-edge:rgba(160,196,226,0);
  --glint:#f4fbff; --glint-halo:rgba(130,180,222,.45); --glint-ink:#eaf5ff; --glint-ink-halo:rgba(130,180,222,.55);
  --photo-filter:brightness(.86) contrast(1.04);
  color-scheme:dark}

/* ===================================================================== base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.64 var(--sans);font-stretch:97%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--select)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.26em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-999px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:50}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em,i{font-style:italic}

/* type roles */
.serif{font-family:var(--serif);font-weight:400}
.display{font:400 var(--t-display)/.9 var(--serif);letter-spacing:-.022em}
.display em{font-style:italic;letter-spacing:-.03em}
.statement{font:400 var(--t-statement)/1.0 var(--serif);letter-spacing:-.018em}
.h2{font:400 var(--t-h2)/1.02 var(--serif);letter-spacing:-.016em}
.h3{font:400 var(--t-h3)/1.1 var(--serif);letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.45;letter-spacing:-.005em}
.small{font-size:var(--t-small);line-height:1.55}
.kicker{display:flex;align-items:center;gap:12px;font:500 var(--t-micro)/1.3 var(--sans);letter-spacing:.04em;color:var(--faint);font-stretch:105%}
.kicker .n{font-variant-numeric:tabular-nums;color:var(--ink)}
.muted{color:var(--muted)}
.measure{max-width:var(--measure)}
.prose p+p{margin-top:1em}

/* arrow link: words, a hairline, nothing boxed */
.go{display:inline-flex;align-items:baseline;gap:.55em;color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--t-small);letter-spacing:.01em;padding:6px 0;
  background:linear-gradient(90deg,var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.go::after{content:"→";transition:transform .5s var(--ease)}
.go:hover::after{transform:translateX(4px)}
.go:hover{background-image:linear-gradient(90deg,var(--ink) 0 40%,var(--metal-3) 50%,var(--ink) 60% 100%)}

/* ===================================================================== grid */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.g>*,.g>.ra>*,.g>.rb>*{min-width:0}
@media (max-width:900px){.g{grid-template-columns:repeat(6,minmax(0,1fr))}.g>*,.g>.ra>*,.g>.rb>*{grid-column:1/-1!important}}

/* ===================================================================== the glint */
.glint{display:inline-block;width:.42em;height:.54em;color:var(--glint-ink);vertical-align:.05em;
  filter:drop-shadow(0 0 .14em var(--glint-ink-halo))}
.nw{white-space:nowrap}
.nw>.glint{margin-left:.04em;margin-right:-.34em;vertical-align:.42em}
.glint svg{width:100%;height:100%;display:block;overflow:visible}
.glint-ink{color:var(--metal-4);filter:none}
/* glint that sits on an image at a specular point */
.spec{position:absolute;width:clamp(28px,3.4vw,52px);aspect-ratio:28/36;color:#fff;pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.75)) drop-shadow(0 0 2px rgba(190,215,235,.9));transform:translate(-50%,-50%)}
.spec svg{width:100%;height:100%;display:block}

/* sheen rule: a hairline with a moving highlight (light along an edge) */
.sheen{position:relative;height:1px;border:0;margin:0;background:var(--rule-strong);overflow:visible}
.sheen::after{content:"";position:absolute;inset:-1px 0;background:linear-gradient(90deg,transparent 0,transparent calc(var(--p,0.5)*100% - 14%),var(--sheen) calc(var(--p,0.5)*100%),transparent calc(var(--p,0.5)*100% + 14%),transparent 100%);
  opacity:.9;mix-blend-mode:normal}
:root[data-theme="dark"] .sheen::after{opacity:.55}
.sheen .bead{color:var(--glint-ink)!important;position:absolute;top:0;left:calc(var(--p,.5)*100%);width:22px;height:28px;transform:translate(-50%,-50%);color:var(--glint);
  filter:drop-shadow(0 0 6px var(--glint-halo))}
.sheen .bead svg{width:100%;height:100%;display:block}

/* ===================================================================== masthead */
.mast{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.wordmark{display:block;line-height:0}
.wordmark img{height:24px;width:auto}
.wordmark .on-dark{display:none}
:root[data-theme="dark"] .wordmark .on-light{display:none}
:root[data-theme="dark"] .wordmark .on-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark .on-light{display:none}:root:not([data-theme="light"]) .wordmark .on-dark{display:block}}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-size:14px;letter-spacing:.01em}
.nav a{color:var(--ink);text-decoration:none;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]::after{background:linear-gradient(90deg,var(--metal-3),var(--ink) 40%,var(--ink))}
.nav .meta{display:flex;gap:18px;align-items:center;color:var(--muted);padding-left:clamp(14px,1.8vw,28px);border-left:1px solid var(--rule)}
.nav .meta a{color:var(--muted)}
.theme-btn{appearance:none;background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:8px 0}
.menu-btn{display:none;appearance:none;background:none;border:0;color:var(--ink);font:500 15px/1 var(--sans);padding:12px 0 12px 12px;cursor:pointer}
/* progress: light travelling along the bottom edge of the masthead */
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.progress i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--read,0));background:linear-gradient(90deg,transparent,var(--metal-3) 60%,var(--sheen))}
@media (max-width:900px){
  .mast-in{height:64px}
  .menu-btn{display:block}
  .nav{display:none}
  .mast.menu-open .nav{display:flex;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:flex-start;gap:2px;background:var(--paper);
    padding:12px var(--gutter) 28px;border-bottom:1px solid var(--rule);font-size:20px}
  .mast.menu-open .nav .meta{border:0;padding:16px 0 0;font-size:16px}
  .wordmark img{height:20px}
}

/* ===================================================================== plates (images) */
.plate{position:relative;overflow:hidden;background:var(--paper-lo);isolation:isolate}
.plate img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.plate.light img{filter:none}
:root[data-theme="dark"] .plate.light img{filter:brightness(.62) contrast(1.08) saturate(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plate.light img{filter:brightness(.62) contrast(1.08) saturate(.9)}}
/* a sheen along the top edge of every plate, like light on a cut edge */
.plate::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--sheen) 30%,transparent 60%);opacity:.8}
/* the specular sweep: a narrow band of light that crosses the plate (moved by scroll under .motion) */
.plate .sweep{position:absolute;z-index:1;inset:-10% -40%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0) 43%,rgba(235,244,252,.38) 48.6%,rgba(255,255,255,.62) 50%,rgba(235,244,252,.38) 51.4%,rgba(255,255,255,0) 57%,transparent 60%)}

/* ===================================================================== reveal rhythm */
/* shared rhythm: everything that reveals uses the same distance (28px) and the same range */
.motion .rv{opacity:0;transform:translateY(28px)}
.motion .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.motion .rv.d1.in{transition-delay:.08s}.motion .rv.d2.in{transition-delay:.16s}.motion .rv.d3.in{transition-delay:.24s}
@supports (animation-timeline:view()){
  .motion.sda .rv,.motion.sda .rv.in{opacity:1;transform:none;transition:none;animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .motion.sda .rv.d1{animation-range:entry 6% entry 61%}.motion.sda .rv.d2{animation-range:entry 12% entry 67%}.motion.sda .rv.d3{animation-range:entry 18% entry 73%}
  @keyframes rv{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  .motion.sda .plate .sweep{opacity:1;animation:sweep linear both;animation-timeline:view();animation-range:entry 30% exit 70%}
  @keyframes sweep{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
  .motion.sda .drift img{animation:drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes drift{from{transform:scale(1.08) translateY(-3%)}to{transform:scale(1.08) translateY(3%)}}
}
.motion:not(.sda) .plate .sweep{opacity:1;transform:translateX(calc((var(--v,0) - .5) * 110%))}
.motion:not(.sda) .drift img{transform:scale(1.08) translateY(calc((var(--v,.5) - .5) * 6%))}

/* ===================================================================== HOME */
/* opening */
.open{padding-top:clamp(40px,6vw,88px)}
.open .kicker{grid-column:1/5;margin-bottom:clamp(28px,4vw,56px)}
.open h1{grid-column:1/12}
.open h1 .glint{width:.26em;height:.34em}
.open .deck{grid-column:1/5;grid-row:3;margin-top:clamp(56px,6vw,96px);align-self:start}
.open .deck p+p{margin-top:18px}
.open .hero-plate{margin-top:clamp(56px,6vw,96px);margin-right:calc(-1 * var(--gutter));grid-column:5/-1;grid-row:3;aspect-ratio:16/9.6}
.open .hero-note{grid-column:1/5;grid-row:3;align-self:end;padding-bottom:4px}
.open .hero-note p{color:var(--muted);font-size:var(--t-small);max-width:15rem}
.open .hero-note .go{margin-top:18px}
.hero-plate.light{aspect-ratio:2.25/1}
.hero-plate.light img{object-position:70% 50%}
@media (max-width:900px){
  .open .deck{margin-top:28px;grid-row:auto}
  .open .hero-plate,.open .hero-note{grid-row:auto}
  .open .hero-plate{margin-inline:calc(-1 * var(--gutter));aspect-ratio:4/3.4}
  .hero-plate.light{aspect-ratio:4/3}
  .open .hero-note{margin-top:28px;order:5}
}
/* the hero headline: one pass of light across the italic line on load */
.motion .open h1 em{background:linear-gradient(100deg,var(--ink) 0 40%,var(--metal-3) 47%,var(--sheen) 50%,var(--metal-3) 53%,var(--ink) 60% 100%) 120% 0/250% 100% no-repeat;
  background-color:var(--ink);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pass 2.6s .5s var(--ease) both}
@keyframes pass{from{background-position:120% 0}to{background-position:-20% 0}}

/* pinned statement whose words light up */
.lit{position:relative}
.lit-stage{min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden}
.motion .lit{height:260svh}
.motion .lit-short{height:200svh}
.motion .lit-stage{position:sticky;top:0;height:100svh}
.lit p{grid-column:2/12;position:relative;z-index:2}
.lit .w{color:var(--ink);transition:color .5s linear}
.motion .lit .w{color:var(--unlit)}
.motion .lit .w.on{color:var(--ink)}
.lit .w.k{font-style:italic}
.lit .after{grid-column:2/7;margin-top:clamp(28px,4vw,48px);color:var(--muted);font-size:var(--t-small);position:relative;z-index:2}
/* two shafts of window light that drift across the stage as you scroll */
.shafts{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.0}
.motion .shafts{opacity:1}
.shafts i{position:absolute;top:-20%;bottom:-20%;width:16vw;transform:translateX(calc(-30vw + var(--sp,0) * 130vw)) skewX(-18deg);
  background:linear-gradient(90deg,var(--shaft-edge),var(--shaft) 30%,var(--shaft) 70%,var(--shaft-edge))}
.shafts i+i{width:7vw;margin-left:21vw}
.lit .ground{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--rule-strong) 20%,var(--rule-strong) 80%,transparent)}

/* the three ways in: a horizontal sequence */
.ways{padding-top:var(--s-7)}
.ways-head{align-items:end}
.ways-head .kicker{grid-column:1/5}
.ways-head h2{grid-column:1/8;margin-top:20px}
.ways-head p{grid-column:9/13;color:var(--muted)}
.track-wrap{margin-top:var(--s-6)}
.track{display:grid;gap:clamp(40px,6vw,96px)}
.way{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:28px;position:relative}
.way .num{font:400 clamp(72px,9vw,150px)/.8 var(--serif);color:var(--metal-3);letter-spacing:-.04em;display:flex;align-items:flex-start;gap:.06em}
.way .num .glint{width:.22em;height:.3em;margin-top:.02em}
.way h3{margin-top:8px}
.way p{max-width:28rem}
.way .detail{margin-top:12px;padding-top:20px;border-top:1px solid var(--rule)}
.way .detail li{font:400 22px/1.5 var(--serif);color:var(--muted)}
.way .detail li+li{border-top:1px solid var(--rule)}
.way .detail.steps li{font:400 var(--t-small)/1.5 var(--sans);padding:10px 0;display:flex;gap:16px}
.way .detail.steps b{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.way .detail.areas{columns:2;column-gap:24px}
.way .detail.areas li{break-inside:avoid;padding:4px 0}
.way .detail.areas li+li{border:0}
.option-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.option{padding:18px 0 0;border-top:1px solid var(--rule)}
.option b{display:block;font:400 26px/1.1 var(--serif);color:var(--ink)}
.option span{display:block;font-size:var(--t-small);color:var(--muted);margin:6px 0 10px}
.option em{display:inline-block;font-style:normal;font-size:13px;color:var(--ink);border:1px solid var(--rule-strong);border-radius:999px;padding:5px 12px}
.option-note{font-size:var(--t-micro);color:var(--faint);margin-top:12px}
@media (min-width:1024px){
  .track{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px) and (min-height:740px){
  .way .num{font-size:clamp(72px,7vw,120px)}
  /* under motion, the three ways become a horizontal sequence moved by vertical scroll (no scroll-jacking: the page scrolls natively) */
  .motion .ways-seq{height:300svh;position:relative}
  .motion .ways-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:76px}
  .motion .track-wrap{margin-top:clamp(32px,4vh,56px)}
  .motion .ways-pin .ways-head{padding-top:0}
  .motion .ways-pin .ways-head h2{font-size:clamp(36px,3.6vw,56px)}
  .motion .track{display:flex;gap:0;width:max-content;padding-left:var(--gutter);transform:translateX(calc(var(--hx,0) * -1px))}
  .motion .way{display:block;position:relative;width:min(64vw,880px);padding:28px clamp(56px,6vw,110px) 0 clamp(230px,21vw,330px)}
  .motion .way>*+*{margin-top:22px}
  .motion .way .num+h3{margin-top:0}
  .motion .way .num{position:absolute;left:clamp(36px,3.4vw,56px);top:28px;margin:0;font-size:clamp(100px,11vw,170px)}
  .motion .way + .way{border-left:1px solid var(--rule)}
  .motion .way:first-child .num{left:0}
  .motion .way:first-child{padding-left:clamp(194px,17.6vw,274px)}
  .motion .way-end{width:30vw}
  .motion .ways-meter{display:flex}
}
.ways-meter{display:none;gap:10px;align-items:center;margin-top:var(--s-4);padding-left:var(--gutter);font:500 var(--t-micro)/1 var(--sans);color:var(--faint);letter-spacing:.04em}
.ways-meter span{position:relative;width:120px;height:1px;background:var(--rule-strong)}
.ways-meter span i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--hp,0));background:var(--ink)}

/* in practice: staggered editorial list (the dense moment) */
.practice{padding-top:var(--s-8)}
.practice-head .kicker{grid-column:1/5}
.practice-head h2{grid-column:1/9;margin-top:20px}
.practice-head p{grid-column:1/7;margin-top:28px;color:var(--muted)}
.cases{margin-top:var(--s-6)}
.case{padding-block:clamp(36px,4vw,56px);position:relative}
.case + .case{margin-top:clamp(8px,2vw,24px)}
.case .sheen{grid-column:1/-1;margin-bottom:clamp(28px,3vw,44px)}
@media (max-width:900px){.case .body{margin-top:18px}}

/* posture: a portrait plate with a statement crossing its edge */
.posture{padding-top:var(--s-8)}
.posture .portrait{grid-column:7/13;grid-row:1/4;aspect-ratio:4/5;margin-right:calc(-1 * var(--gutter))}
.posture .portrait.light{aspect-ratio:5/6}
.posture .portrait.light img{object-position:30% 50%}
.posture .kicker{grid-column:1/6;grid-row:1;align-self:start}
.posture h2{grid-column:1/7;grid-row:2;align-self:center}
.posture .copy{grid-column:1/6;grid-row:3;align-self:end}
.posture .copy p{color:var(--muted)}
.posture .copy p+p{margin-top:1em}
.posture .copy .go{margin-top:28px}
.pull{grid-column:4/12;margin-top:var(--s-6);font:italic 400 var(--t-statement)/1 var(--serif);letter-spacing:-.02em;position:relative;z-index:2}
.pull .glint{width:.26em;height:.34em;vertical-align:.6em;margin-left:.06em}
@media (max-width:900px){
  .posture .portrait{grid-row:auto;margin-inline:calc(-1 * var(--gutter));margin-top:var(--s-4);order:4}
  .posture .kicker,.posture h2,.posture .copy{grid-row:auto}
  .posture h2{margin-top:20px}
  .posture .copy{margin-top:28px}
  .pull{order:5}
}

/* closing: light on the floor */
.horizon{margin-top:var(--s-6);height:1px}
.horizon .bead{width:30px;height:40px}
.close{padding-top:var(--s-8);padding-bottom:var(--s-6)}
.close h2{grid-column:1/8;grid-row:1;align-self:end}
.close p{grid-column:1/6;grid-row:2;margin-top:var(--s-4);color:var(--muted)}
.close .go{grid-column:1/6;grid-row:3;justify-self:start;align-self:start;margin-top:20px}
.close .close-plate{grid-column:8/-1;grid-row:1/5;aspect-ratio:3/4;margin-right:calc(-1 * var(--gutter))}
@media (max-width:900px){.close h2,.close p,.close .go,.close .close-plate{grid-row:auto}.close .close-plate{margin:var(--s-5) calc(-1 * var(--gutter)) 0;aspect-ratio:4/5}}
.floor{margin-top:var(--s-6);height:clamp(120px,16vw,240px)}
.floor img{object-position:30% 50%}
.floor-css{margin-top:var(--s-6);height:clamp(80px,10vw,160px);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper),var(--paper-lo))}
.floor-css::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--sheen) calc(var(--fp,.4)*100%),transparent calc(var(--fp,.4)*100% + 30%))}
.floor-css::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22vw,var(--shaft) 22vw 34vw,transparent 34vw 40vw,var(--shaft) 40vw 44vw,transparent 44vw 100vw);
  transform:skewX(-30deg) translateX(calc(var(--fp,.4) * 20vw));opacity:.7}

/* ===================================================================== footer */
.foot{border-top:1px solid var(--rule);padding-block:var(--s-5) 96px;font-size:var(--t-small);color:var(--muted)}
.foot .g{row-gap:20px}
.foot .who{grid-column:1/5}
.foot .who img{height:20px;width:auto;margin-bottom:16px}
.foot nav{grid-column:6/9;display:flex;flex-direction:column;gap:6px}
.foot nav a{color:var(--muted)}
.foot .colophon{grid-column:9/13}
.foot .colophon b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}

/* ===================================================================== FRAMEWORK (main page) */
.fw-open{padding-top:clamp(56px,8vw,128px)}
.fw-open .kicker{grid-column:1/5;margin-bottom:clamp(28px,4vw,56px)}
.fw-open h1{grid-column:1/11;font-size:clamp(50px,8vw,128px)}
.fw-open .deck{grid-column:8/12;grid-row:3;margin-top:var(--s-6);align-self:end}
.fw-open .deck .go{margin-top:24px}
.fw-plate{margin-top:var(--s-6);grid-column:1/7;grid-row:3;margin-left:calc(-1 * var(--gutter));aspect-ratio:1/0.92}
.fw-plate img{object-position:50% 40%}
.fw-plate.light img{object-position:62% 50%}
@media (max-width:900px){.fw-open .deck,.fw-plate{grid-row:auto}.fw-plate{margin-inline:calc(-1 * var(--gutter))}.fw-open .deck{margin-top:var(--s-4)}}
.fw-intro{padding-top:var(--s-6)}
.fw-intro p{grid-column:3/11;font:400 clamp(26px,2.6vw,40px)/1.28 var(--serif);letter-spacing:-.005em}
.fw-intro p a{color:inherit}
.areas{padding-top:var(--s-7)}
.rail{grid-column:1/4;align-self:start;position:sticky;top:120px}
.rail h2{font:400 clamp(30px,2.6vw,40px)/1.05 var(--serif)}
.rail ol{margin-top:28px;border-top:1px solid var(--rule)}
.rail li a{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);color:var(--muted);text-decoration:none;font-size:15px;position:relative}
.rail li a b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--faint);width:1.6em}
.rail li a .glint{position:absolute;right:0;width:16px;height:20px;opacity:0;transition:opacity .4s}
.rail li a[aria-current="true"]{color:var(--ink)}
.rail li a[aria-current="true"] .glint{opacity:1}
.area-list{grid-column:5/13}
.area{padding-bottom:var(--s-7);scroll-margin-top:96px}
.area-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:end}
.area-top .n{font:400 clamp(80px,9vw,150px)/.78 var(--serif);color:var(--metal-3);letter-spacing:-.04em}
.area-top h3{font:400 clamp(44px,5vw,80px)/.95 var(--serif);letter-spacing:-.02em}
.area .q{margin-top:28px;font:italic 400 clamp(24px,2.2vw,32px)/1.25 var(--serif);color:var(--muted);max-width:30ch}
.principle{margin-top:clamp(40px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,13rem) minmax(0,var(--measure));gap:clamp(20px,3vw,48px)}
.principle h4{font:500 18px/1.35 var(--sans);letter-spacing:-.005em;padding-top:14px;border-top:1px solid var(--ink)}
.principle p{padding-top:14px;border-top:1px solid var(--rule);color:var(--muted)}
.area .more{margin-top:40px}
@media (max-width:900px){
  .rail{position:static;margin-bottom:var(--s-5)}
  .principle{grid-template-columns:1fr;gap:0}
  .principle p{border-top:0;padding-top:10px}
}
/* the three ways: light settles on the redemptive way */
.three{position:relative;padding-top:var(--s-7)}
.three-stage{position:relative;overflow:hidden}
.motion .three{height:240svh}
.motion .three-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.three h2{grid-column:1/8}
.three .src{grid-column:8/13;color:var(--muted);font-size:var(--t-small);align-self:end}
.three-cols{margin-top:var(--s-5);position:relative}
.three-cols .col{grid-column:span 4;padding-top:28px;border-top:1px solid var(--rule-strong);position:relative;z-index:2;transition:opacity .6s}
.three-cols .col h3{font:400 clamp(34px,3.4vw,54px)/1 var(--serif)}
.three-cols .col .tag{margin-top:12px;font-size:var(--t-small);color:var(--faint)}
.three-cols .col p{margin-top:18px;color:var(--muted);max-width:24rem}
.three-cols .col p b{color:var(--ink);font-weight:500}
.motion .three-cols .col h3{opacity:.55;transition:opacity .6s}
.motion .three-cols .col.on h3{opacity:1}
.three-cols .col .glint{position:absolute;top:-14px;left:-9px;width:18px;height:28px;opacity:0;transition:opacity .6s}
.three-cols .col.on .glint{opacity:1}
.three-cols .beam{position:absolute;z-index:1;top:-6%;bottom:-30%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,transparent);width:calc(100% / 3);left:0;pointer-events:none;opacity:0;
  transform:translateX(calc(var(--bp,2) * 100%));background:linear-gradient(90deg,var(--shaft-edge),var(--shaft) 35%,var(--shaft) 65%,var(--shaft-edge))}
.motion .three-cols .beam{opacity:1}
@media (max-width:900px){.three-cols .col{grid-column:1/-1;margin-top:28px}.motion .three{height:auto}.motion .three-stage{position:relative;height:auto}.motion .three-cols .col{opacity:1}.three-cols .beam{display:none}}

.hold{padding-top:var(--s-8)}
.hold h2{grid-column:1/6}
.hold .lede{grid-column:1/5;margin-top:24px;color:var(--muted);align-self:start}
.hold dl{grid-column:7/13;grid-row:1/4}
.hold dt{font:400 clamp(26px,2.4vw,36px)/1.1 var(--serif);padding-top:24px;border-top:1px solid var(--rule)}
.hold dd{margin:12px 0 48px;color:var(--muted)}
@media (max-width:900px){.hold dl{grid-row:auto;margin-top:var(--s-5)}}

.questions{padding-top:var(--s-8)}
.questions .head{grid-column:1/6}
.questions .head p{margin-top:20px;color:var(--muted)}
.questions ol{grid-column:1/-1;margin-top:var(--s-5)}
.questions li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding-block:28px}
.questions li .sheen{grid-column:1/-1;margin-bottom:28px}
.questions li b{grid-column:1/3;font:500 var(--t-micro)/1 var(--sans);color:var(--faint);letter-spacing:.06em;padding-top:.9em}
.questions li span{grid-column:3/11;font:400 clamp(26px,3vw,46px)/1.12 var(--serif);letter-spacing:-.01em}
.questions li:nth-child(even) span{grid-column:4/12}
@media (max-width:900px){.questions li{grid-template-columns:1fr}.questions li b,.questions li span,.questions li:nth-child(even) span{grid-column:1}.questions li b{padding:0 0 10px}}

.next{padding-top:var(--s-8)}
.next h2{grid-column:1/7}
.next .lede{grid-column:8/12;color:var(--muted);align-self:end}
.next .lede .go{margin-top:18px}
.next .pair{grid-column:1/-1;margin-top:var(--s-6);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.next .pair a{display:block;text-decoration:none;color:var(--ink);padding-top:24px;border-top:1px solid var(--ink)}
.next .pair a:first-child{grid-column:1/6}
.next .pair a:last-child{grid-column:7/13;margin-top:var(--s-6)}
.next .pair b{display:block;font:400 clamp(30px,3.2vw,50px)/1.05 var(--serif)}
.next .pair span{display:block;margin-top:14px;color:var(--muted);max-width:28rem}
.next .pair em{display:inline-block;margin-top:18px;font-style:normal;font-size:var(--t-small);font-weight:500}
.next .pair em::after{content:" →"}
@media (max-width:900px){.next .pair{grid-template-columns:1fr}.next .pair a:first-child,.next .pair a:last-child{grid-column:1;margin-top:var(--s-4)}}

/* ===================================================================== DEEP DIVE (article) */
.art-head{padding-top:clamp(40px,6vw,96px)}
.crumbs{grid-column:1/-1;font-size:var(--t-small);color:var(--muted);display:flex;gap:10px;align-items:center}
.crumbs a{color:var(--muted)}
.art-head h1{grid-column:1/11;margin-top:clamp(28px,4vw,56px);font:400 clamp(48px,7.4vw,118px)/.94 var(--serif);letter-spacing:-.022em}
.art-head .dek{grid-column:1/8;margin-top:28px;font:italic 400 clamp(24px,2.4vw,36px)/1.22 var(--serif);color:var(--muted)}
.art-head .intro{grid-column:1/7;margin-top:var(--s-5)}
.art-head .status{grid-column:9/13;margin-top:var(--s-5);font-size:var(--t-small);color:var(--muted);padding-left:20px;border-left:1px solid var(--metal-3);position:relative;align-self:start}
.art-head .status .glint{position:absolute;left:-9px;top:-6px;width:18px;height:24px}
.art-head .status b{display:block;color:var(--ink);font-weight:500;letter-spacing:.03em;margin-bottom:10px}
.art-head .status p+p{margin-top:10px}
.facts{grid-column:1/-1;margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:8px 32px;font-size:var(--t-small);color:var(--muted);padding-top:20px;border-top:1px solid var(--rule)}
.facts b{font-weight:500;color:var(--ink)}
@media (max-width:900px){.art-head .status{margin-top:var(--s-4)}}

.art{padding-top:var(--s-6)}
.toc{grid-column:1/3;align-self:start;position:sticky;top:110px;font-size:13.5px}
.toc p{color:var(--faint);font-weight:500;letter-spacing:.04em;margin-bottom:12px}
.toc a{display:block;padding:6px 0 6px 14px;color:var(--muted);text-decoration:none;border-left:1px solid var(--rule);position:relative}
.toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--ink)}
.toc a[aria-current="true"]{border-left-width:2px;padding-left:13px;box-shadow:-3px 0 10px -4px var(--glint-ink-halo)}
.body-col{grid-column:4/13}
@media (max-width:1100px){.toc{display:none}.body-col{grid-column:1/-1}}
.blk{padding-bottom:var(--s-7);scroll-margin-top:96px}
.blk>.kicker{margin-bottom:18px}
.blk>.h2{max-width:16ch}
.blk>.lede{margin-top:24px;max-width:40rem;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,15rem);gap:clamp(32px,5vw,80px);justify-content:start}
.two aside{font-size:var(--t-small);color:var(--muted);padding-top:6px}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:16px}.two aside{padding-top:12px;border-top:1px solid var(--rule)}}

/* spectrum: seven stops on one axis; a glint travels along it */
.axis{position:relative;margin-top:var(--s-5);padding-top:44px}
.axis .ends{display:flex;justify-content:space-between;font:500 var(--t-micro)/1 var(--sans);letter-spacing:.06em;color:var(--faint)}
.axis .line{position:relative;height:1px;margin:16px 0 0;background:linear-gradient(90deg,var(--metal-2),var(--metal-4))}
.axis .line .bead{position:absolute;top:0;left:calc(var(--ap,0) * 100%);width:24px;height:32px;transform:translate(-50%,-50%);color:var(--glint);filter:drop-shadow(0 0 8px var(--glint-halo)) drop-shadow(0 0 1px var(--metal-4))}
.axis .line .bead svg{width:100%;height:100%;display:block}
.stops{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;margin-top:0}
.stop{padding-top:22px;position:relative}
.stop::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--metal-4)}
.stop b{display:block;font:400 13px/1 var(--sans);color:var(--faint);font-variant-numeric:tabular-nums}
.stop h3{font:400 23px/1.08 var(--serif);margin-top:10px;min-height:2.2em}
.stop .st{display:block;font-size:12.5px;color:var(--faint);margin-top:8px}
.stop ul{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.stop li+li{margin-top:6px}
.stop.out h3{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--metal-3)}
@media (max-width:1100px){
  .stops{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:28px;padding-bottom:12px;margin-right:calc(-1 * var(--gutter))}
  .stop{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}
.tryit{margin-top:var(--s-5);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-top:28px;border-top:1px solid var(--rule)}
.tryit .opt .st{font-size:var(--t-micro);letter-spacing:.06em;color:var(--faint)}
.tryit .opt h3{margin-top:10px}
.tryit .opt p{margin-top:14px;color:var(--muted)}
.tryit dl{display:grid;gap:18px}
.tryit dt{font:500 var(--t-micro)/1 var(--sans);letter-spacing:.06em;color:var(--faint)}
.tryit dd{margin:6px 0 0}
.tryit .frame{grid-column:1/-1;margin-top:8px;padding:18px 0;border-top:1px dashed var(--rule-strong);border-bottom:1px dashed var(--rule-strong);font-size:var(--t-small);color:var(--faint)}
@media (max-width:900px){.tryit{grid-template-columns:1fr}}

.takeaways{margin-top:var(--s-5)}
.tk{display:grid;grid-template-columns:minmax(0,5rem) minmax(0,var(--measure)) minmax(0,13rem);gap:clamp(16px,3vw,48px);padding-block:32px;border-top:1px solid var(--rule)}
.tk .n{font:400 46px/.9 var(--serif);color:var(--metal-3)}
.tk h3{font:400 clamp(26px,2.3vw,34px)/1.1 var(--serif)}
.tk p{margin-top:12px;color:var(--muted)}
.tk aside{font-size:var(--t-small);padding-top:8px}
@media (max-width:900px){.tk{grid-template-columns:3.2rem minmax(0,1fr)}.tk aside{grid-column:2}}

.fit{width:100%;border-collapse:collapse;margin-top:var(--s-5);font-size:14px}
.fit th,.fit td{padding:14px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.fit thead th{font-weight:500;color:var(--faint);font-size:12.5px;letter-spacing:.02em;vertical-align:bottom}
.fit tbody th{font:400 19px/1.2 var(--serif);min-width:12rem}
.fit tbody th span{display:block;font:400 13px/1.4 var(--sans);color:var(--muted);margin-top:4px}
.fit td{text-align:center;color:var(--muted)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--metal-4);vertical-align:middle}
.dot.g{background:var(--ink);box-shadow:none}
.dot.p{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.fit-wrap{overflow-x:auto;position:relative}
.legend{display:flex;gap:24px;margin-top:16px;font-size:13px;color:var(--muted)}
.legend .dot{margin-right:6px}

.research{margin-top:var(--s-5)}
.rgroup+.rgroup{margin-top:var(--s-6)}
.rgroup>.kicker{margin-bottom:6px}
.rgroup>h3{margin-bottom:12px}
.ritem{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,15rem);gap:clamp(32px,5vw,80px);padding-block:22px;border-top:1px solid var(--rule)}
.ritem h4{font:500 17px/1.35 var(--sans)}
.ritem p{margin-top:8px;color:var(--muted)}
.ritem aside{font-size:13px;color:var(--faint);padding-top:3px}
@media (max-width:900px){.ritem{grid-template-columns:1fr;gap:6px}}

.ifs{margin-top:var(--s-5)}
.if{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);padding-block:22px;border-top:1px solid var(--rule)}
.if p{font:400 22px/1.25 var(--serif)}
.if div{color:var(--muted)}
.if small{display:block;font:500 11.5px/1 var(--sans);letter-spacing:.08em;color:var(--faint);margin-bottom:8px}
@media (max-width:700px){.if{grid-template-columns:1fr;gap:6px}}
.further{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin-top:var(--s-4)}
.further a{display:block;padding-top:18px;border-top:1px solid var(--ink);color:var(--ink);text-decoration:none;font:400 24px/1.15 var(--serif)}
.further a span{display:block;margin-top:8px;font:400 var(--t-small)/1.5 var(--sans);color:var(--muted)}
@media (max-width:700px){.further{grid-template-columns:1fr}}


/* ===================================================================== THE ROCK: silicon that reflects a light it does not make
   Layers of the approved specimen render: unlit stone, the lit stone revealed by a moving edge of light,
   a highlight-only facet pass that flares where the edge crosses, one four-point flare with halation,
   and caustic light falling on the floor. --lp = light progress, --fl = flare. Static state: fully lit. */
@property --lp{syntax:"<number>";inherits:true;initial-value:1}
@property --fl{syntax:"<number>";inherits:true;initial-value:.5}
.specimen{position:relative;margin:0;aspect-ratio:780/796;isolation:isolate;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.specimen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.specimen .l{--x:calc(var(--lp) * 150% - 25%);
  -webkit-mask-image:linear-gradient(118deg,#000 calc(var(--x) - 28%),transparent var(--x));mask-image:linear-gradient(118deg,#000 calc(var(--x) - 28%),transparent var(--x))}
.specimen .f{--x:calc(var(--lp) * 150% - 25%);mix-blend-mode:plus-lighter;opacity:calc(.95 - var(--lp) * .55);
  -webkit-mask-image:linear-gradient(118deg,transparent calc(var(--x) - 26%),#000 calc(var(--x) - 9%),transparent calc(var(--x) + 1%));mask-image:linear-gradient(118deg,transparent calc(var(--x) - 26%),#000 calc(var(--x) - 9%),transparent calc(var(--x) + 1%))}
.specimen .d{display:none}
:root[data-theme="dark"] .specimen .d{display:block}:root[data-theme="dark"] .specimen .n{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .specimen .d{display:block}:root:not([data-theme="light"]) .specimen .n{display:none}}
.specimen .caus{inset:auto -6% 0 -6%;width:112%;height:30%;object-fit:fill;mix-blend-mode:plus-lighter;opacity:calc(var(--lp) * .6);
  transform:translateX(calc((var(--lp) - .5) * -5%));-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.specimen .flare{position:absolute;left:calc(var(--gx) * 100%);top:calc(var(--gy) * 100%);width:62%;aspect-ratio:1;color:#f2f8ff;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc(.25 + var(--fl) * .75));opacity:var(--fl);mix-blend-mode:plus-lighter}
.specimen .flare svg{width:100%;height:100%;display:block;overflow:visible}
/* caustic light that spills onto the page beside the stone (visible on dark, a cool trace on light) */
.spill{position:absolute;pointer-events:none;width:120%;left:-10%;bottom:-14%;height:34%;opacity:calc(var(--lp) * .5);mix-blend-mode:multiply;filter:invert(1) sepia(1) hue-rotate(170deg) saturate(.35) brightness(1.02);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 50% 50% at 50% 30%,#000 30%,transparent 75%)}
:root[data-theme="dark"] .spill{mix-blend-mode:plus-lighter;filter:none;opacity:calc(var(--lp) * .55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spill{mix-blend-mode:plus-lighter;filter:none;opacity:calc(var(--lp) * .55)}}

.rock{padding-top:var(--s-6)}
.rock .lit-stage{align-items:center}
.rock .rock-g{align-items:center;row-gap:24px}
.rock .rock-copy{grid-column:1/7;position:relative;z-index:2}
.rock .rock-copy .statement{font-size:clamp(40px,5.2vw,84px)}
.rock .rock-copy .kicker{margin-bottom:28px}
.rock .rock-more{margin-top:clamp(28px,3.4vw,48px);max-width:30rem;color:var(--muted)}
.rock .rock-more p+p{margin-top:.9em}
.rock .rock-more cite{font-style:normal;font-size:var(--t-small);color:var(--faint)}
.rock .rock-more .go{margin-top:22px}
.rock .stage{grid-column:7/13;position:relative;margin-right:calc(-1 * var(--gutter));max-height:86svh;justify-self:center;width:100%}
.rock .stage .specimen{max-height:86svh;margin-inline:auto}
.motion .rock{height:300svh}
.motion .rock .rock-more{opacity:calc((var(--lp) - .55) * 2.4);transform:translateY(calc((1 - min(1, var(--lp) * 1.6)) * 10px))}
@media (max-width:900px){
  .rock .stage{margin-inline:calc(-1 * var(--gutter));width:auto;justify-self:stretch;order:-1}
  .rock .stage .specimen{max-height:none;width:100%}
  /* phones: no pinning; the light follows the stone through the viewport instead */
  .motion .rock{height:auto}
  .motion .rock .lit-stage{position:relative;height:auto;min-height:0;padding-block:24px 0}
}
@supports (animation-timeline:view()){@media (max-width:900px){
  html.motion.sda .rock .lit-stage{animation-timeline:view();animation-range:cover 25% cover 75%}
  html.motion.sda .rock .w{animation-timeline:view();animation-range:cover 30% cover 48%}
}}
/* metal type: numerals take a brushed blue-silver fill whose highlight moves with scroll */
.metal{background:linear-gradient(100deg,var(--metal-4) 0,var(--metal-3) calc(var(--p) * 100% - 16%),#c3d2df calc(var(--p) * 100% - 2%),#dfe8f0 calc(var(--p) * 100%),#c3d2df calc(var(--p) * 100% + 3%),var(--metal-3) calc(var(--p) * 100% + 18%),var(--metal-4) 100%);
  background-color:var(--metal-3);-webkit-background-clip:text;background-clip:text;color:transparent!important}
:root[data-theme="dark"] .metal{background-image:linear-gradient(100deg,var(--metal-3) 0,var(--metal-3) calc(var(--p) * 100% - 22%),var(--metal-4) calc(var(--p) * 100% - 4%),#fff calc(var(--p) * 100%),var(--metal-4) calc(var(--p) * 100% + 6%),var(--metal-3) calc(var(--p) * 100% + 24%),var(--metal-3) 100%)}

/* ===================================================================== scroll-linked light: registered properties
   One set of numbers drives every scroll effect. With CSS scroll-driven animations (html.sda) the browser animates them;
   otherwise study.js sets the same properties from an IntersectionObserver-gated scroll listener. */
@property --p{syntax:"<number>";inherits:true;initial-value:.5}
@property --v{syntax:"<number>";inherits:true;initial-value:.5}
@property --sp{syntax:"<number>";inherits:true;initial-value:0}
@property --ap{syntax:"<number>";inherits:true;initial-value:0}
@property --hp{syntax:"<number>";inherits:true;initial-value:0}
@property --read{syntax:"<number>";inherits:true;initial-value:0}
@property --fp{syntax:"<number>";inherits:true;initial-value:.4}
@property --bp{syntax:"<number>";inherits:true;initial-value:2}
.motion .ways-pin{overflow:clip}
.motion .ways-pin>.wrap{width:100%}
@supports (animation-timeline:view()){
  .motion.sda .sheen{animation:p-sheen linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
  @keyframes p-sheen{from{--p:.08}to{--p:.92}}
  .motion.sda .axis .line{animation:p-axis linear both;animation-timeline:view();animation-range:cover 25% cover 75%}
  @keyframes p-axis{from{--ap:0}to{--ap:1}}
  .motion.sda .floor-css{animation:p-floor linear both;animation-timeline:view();animation-range:cover}
  @keyframes p-floor{from{--fp:0}to{--fp:1}}
  .motion.sda .progress i{animation:p-read linear both;animation-timeline:scroll(root)}
  @keyframes p-read{from{--read:0}to{--read:1}}
  /* pinned statement */
  .motion.sda .lit{view-timeline:--lit block}
  .motion.sda .lit-stage{animation:p-shaft linear both;animation-timeline:--lit;animation-range:contain 0% contain 100%}
  @keyframes p-shaft{from{--sp:0}to{--sp:1}}
  .motion.sda .lit .w{animation:wl linear both;animation-timeline:--lit;
    animation-range:contain calc(var(--w0,6%) + var(--i) * var(--step)) contain calc(var(--w0,6%) + (var(--i) + 1.6) * var(--step))}
  @keyframes wl{from{color:var(--unlit)}to{color:var(--ink)}}
  /* horizontal ways */
  .motion.sda .ways-seq{view-timeline:--ways block}
  .motion.sda .ways-pin{animation:p-ways linear both;animation-timeline:--ways;animation-range:contain 4% contain 96%}
  @keyframes p-ways{from{--hp:0}to{--hp:1}}
  /* three ways beam */
  .motion.sda .three{view-timeline:--three block}
  .motion.sda .three-cols{animation:p-beam linear both;animation-timeline:--three;animation-range:contain 8% contain 70%}
  @keyframes p-beam{from{--bp:0}to{--bp:2}}
  /* the rock */
  .motion.sda .rock .lit-stage{animation:p-rock linear both;animation-timeline:--lit;animation-range:contain 0% contain 100%}
  @keyframes p-rock{0%{--lp:0;--fl:0}14%{--lp:0}52%{--fl:0}60%{--fl:1}72%{--lp:1}82%{--fl:.5}100%{--lp:1;--fl:.5}}
  .motion.sda .metal{animation:p-sheen linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
}
@media (min-width:1024px) and (min-height:740px){.motion .track{transform:translateX(calc(var(--hp) * var(--hmax,0) * -1px))}}
.lit-stage .shafts i{transform:translateX(calc(-45vw + var(--sp) * 150vw)) skewX(-18deg)}

/* ===================================================================== reduced motion: everything readable and still */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* Owner, 23 Oct 2026: no applied shine on photographs. Light belongs in the photo itself; the sweep stays on light plates only. */
.plate:not(.light) .sweep{display:none!important}


/* ===================================================================== STUDY 4
   One image route. Photographs carry their own light: no sweep, no edge sheen, no glint drawn on a photo.
   The light system (rock, glints, shafts, caustics, metal type) lives in the type and the interface. */
.plate.photo::before{display:none}
.plate.photo .sweep{display:none!important}
.posture .portrait.photo img{object-position:15% 50%}
.hero-plate.photo img{object-position:50% 45%}
.fw-plate.photo img{object-position:62% 50%}

/* the approach in practice: each case carries its own evidence */
.case .case-text h3{max-width:16ch}
.case .case-text .body{margin-top:20px;max-width:30rem}
.case .case-text .body p{color:var(--muted)}
.case .case-text .go{margin-top:20px}
.case-phones .case-text{grid-column:8/12;align-self:center}
.case-phones .phones{grid-column:1/7}
.case-right .case-text{grid-column:1/6}
.case-right .phones{grid-column:7/13}
@media (max-width:900px){.case-phones .phones{order:2;margin-top:var(--s-4)}}

/* film: scroll-scrubbed image sequence of the V7 neighborhood film */
.case-film .g{align-items:center}
.case-film .case-text{grid-column:1/5}
.film{grid-column:5/-1;margin:0 calc(-1 * var(--gutter)) 0 0;position:relative}
.film img,.film canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--paper-lo)}
.film canvas{display:none}
.film.ready canvas{display:block}
.film.ready .film-poster{display:none}
.film figcaption{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:var(--t-micro);color:var(--faint);padding-right:var(--gutter)}
.film-meter{position:relative;flex:0 0 120px;height:1px;background:var(--rule-strong)}
.film-meter i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--fp,1));background:var(--ink)}
.film-play{position:absolute;left:16px;bottom:44px;appearance:none;border:1px solid rgba(255,255,255,.7);background:rgba(15,37,55,.72);color:#fff;font:500 13px/1 var(--sans);
  padding:10px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.motion .film-play{display:none}
.film-steps{margin-top:24px;counter-reset:st;border-top:1px solid var(--rule)}
.film-steps li{counter-increment:st;display:grid;grid-template-columns:2.2em 1fr;padding:10px 0;border-bottom:1px solid var(--rule);font-size:var(--t-small);line-height:1.45;color:var(--muted);transition:color .4s}
.film-steps li::before{content:counter(st,decimal-leading-zero);color:var(--faint);font-variant-numeric:tabular-nums}
.motion .film-steps li{color:var(--unlit)}
.motion .film-steps li.on{color:var(--ink)}
.motion .film-steps li.on::before{color:var(--ink)}
@media (min-width:1024px) and (min-height:740px){
  .motion .case-film{height:210svh}
  .motion .case-film .film-pin{position:sticky;top:76px;padding-top:clamp(24px,4vh,48px)}
}
@media (max-width:900px){.film{margin:var(--s-4) calc(-1 * var(--gutter)) 0;order:2}.film figcaption{padding-left:var(--gutter)}.case-film .case-text{order:1}}

/* phone frames: the working examples, held in a thin blue-silver bezel that catches the light */
.phones{position:relative;margin:0;height:clamp(420px,46vw,620px)}
.phone{position:absolute;bottom:40px;width:clamp(180px,19vw,270px);aspect-ratio:600/1100;border-radius:30px;padding:7px;overflow:hidden;
  background:linear-gradient(135deg,var(--metal-2),#fff calc(var(--p) * 100%),var(--metal-3) calc(var(--p) * 100% + 18%),var(--metal-2));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 30px 60px -30px rgba(15,37,55,.45),0 2px 8px -2px rgba(15,37,55,.18)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:24px;display:block}
.phone .on-dark{display:none}
:root[data-theme="dark"] .phone .on-light{display:none}:root[data-theme="dark"] .phone .on-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone .on-light{display:none}:root:not([data-theme="light"]) .phone .on-dark{display:block}}
:root[data-theme="dark"] .phone{background:linear-gradient(135deg,#2b4359,#cfe2f2 calc(var(--p) * 100%),#43607a calc(var(--p) * 100% + 18%),#2b4359);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{background:linear-gradient(135deg,#2b4359,#cfe2f2 calc(var(--p) * 100%),#43607a calc(var(--p) * 100% + 18%),#2b4359);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}}
.phone.back{left:4%;transform:translateY(calc(-24px + var(--p) * 18px)) rotate(-4deg);opacity:.92;filter:saturate(.8)}
.phone.front{left:38%;transform:translateY(calc(40px - var(--p) * 48px)) rotate(2deg)}
.case-right .phone.back{left:auto;right:4%;transform:translateY(calc(-24px + var(--p) * 18px)) rotate(4deg)}
.case-right .phone.front{left:auto;right:38%;transform:translateY(calc(40px - var(--p) * 48px)) rotate(-2deg)}
.phones figcaption{position:absolute;left:4%;bottom:0;font-size:var(--t-micro);color:var(--faint)}
.case-right .phones figcaption{left:auto;right:4%}
@supports (animation-timeline:view()){.motion.sda .phones{animation:p-sheen linear both;animation-timeline:view();animation-range:cover 5% cover 95%}}
@media (max-width:900px){.phones{height:500px}.phone{width:170px;bottom:72px}.phone.front,.case-right .phone.front{left:auto;right:6%}.phone.back,.case-right .phone.back{left:6%;right:auto}}

/* Owner, 23 Oct 2026: the hero becomes one full-bleed light image (the specimen in its window-lit room) instead of a photo.
   Text sits on the open light at the left; the stone fills the right on desktop. On phones the image follows the text as a band. */
main{overflow-x:clip}
.open{position:relative;isolation:isolate;padding-bottom:clamp(56px,7vw,120px)}
.open>.g{position:relative;z-index:1}
.open .deck,.open .hero-note{grid-row:3}
.open .g{grid-template-rows:auto auto minmax(clamp(240px,24vw,400px),auto)}
.hero-ground{position:absolute;z-index:0;inset:0 auto 0 calc(50% - 50vw);width:100vw;margin:0;pointer-events:none;overflow:hidden}
.hero-ground img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 45%}
.hero-ground::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,var(--paper) 0,color-mix(in srgb,var(--paper) 55%,transparent) 30%,transparent 60%)}
.hero-ground::after{content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:24%;background:linear-gradient(to bottom,transparent,var(--paper))}
/* the italic headline needs room for its own overhang: the light pass paints only inside the em's box */
.open h1 em{padding-right:.22em;margin-right:-.22em}
.open h1 .nw>.glint{margin-left:.12em;margin-right:-.38em}
/* the hero room has its own light and dark renders (levels set in tools/build-hero-window.py); no CSS filters */
.hero-ground .on-dark{display:none}
:root[data-theme="dark"] .hero-ground .on-light{display:none}:root[data-theme="dark"] .hero-ground .on-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-ground .on-light{display:none}:root:not([data-theme="light"]) .hero-ground .on-dark{display:block}}
@media (max-width:900px){
  .open .g{grid-template-rows:none}
  .open .deck,.open .hero-note{grid-row:auto}
  .hero-ground img{object-position:85% 45%}
  .hero-ground::before{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 50%,transparent),transparent 70%)}
}

/* site: the framework's closing links sit in one wrapping row */
.next .next-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px}
.next .next-links .go{margin:0}
.principle h4 a{color:inherit;text-decoration-color:var(--rule-strong);text-underline-offset:.2em}
.principle h4 a:hover{text-decoration-color:currentColor}

/* theme switch: a moon in light mode (switch to dark), a sun in dark mode */
.theme-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:999px}
.theme-btn svg{width:18px;height:18px;display:block}
.theme-btn .i-sun,.theme-btn[data-mode="dark"] .i-moon{display:none}
.theme-btn[data-mode="dark"] .i-sun{display:block}
.theme-btn:hover{color:var(--ink);background:var(--paper-lo)}