/* ============================================================
   scenes.css · the homepage as a sequence of scenes, 27 Sept 2026
   Every chapter changes the visual language: monumental, dark,
   forensic, cinematic, technical, geographic, intimate, diagnostic,
   architectural, editorial, sculptural, quiet, dramatic.
   Uses the tokens in system.css. Homepage only.
   ============================================================ */
.scene{position:relative}
.chno{display:block;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;color:var(--stone);margin-bottom:18px}
.scene .meta{display:block;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.scene .go{display:inline-block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:7px;transition:border-color .4s}
.scene .go:hover{border-bottom-color:currentColor}
.sc-head{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:24px;margin-bottom:clamp(36px,4.4vw,64px)}
.sc-head .chno{margin:0}

/* 01 · POSITION: monumental, almost empty */
.sc-hero{min-height:calc(100svh - 72px);display:flex;align-items:center;overflow:hidden;background:#F1F1F0}
.sc-hero-img{position:absolute;inset:0;background:url('img/campaign/hero-staircase.webp') 72% center/cover no-repeat;
  transform:scale(1.04);animation:scSettle 2.6s cubic-bezier(.16,.84,.28,1) .1s forwards}
.sc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(241,241,240,.9) 0%,rgba(241,241,240,.72) 34%,rgba(241,241,240,0) 60%);pointer-events:none}
@keyframes scSettle{to{transform:scale(1)}}
.sc-hero-in{position:relative;z-index:2;width:100%;padding-top:var(--sp-m);padding-bottom:var(--sp-m)}
.sc-hero .who{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin-bottom:clamp(26px,4vh,44px)}
.sc-hero h1{font-family:var(--dsp);font-weight:300;font-size:var(--fs-display);line-height:.86;letter-spacing:-.045em;color:var(--ink)}
.sc-hero h1 .it{font-style:italic}
.sc-hero .line{margin-top:clamp(28px,4vh,46px);max-width:44ch;font-size:var(--fs-body);line-height:1.8;color:var(--body)}
.sc-hero .acts{margin-top:clamp(30px,4.4vh,50px);display:flex;gap:clamp(22px,3vw,40px);align-items:center;flex-wrap:wrap}
.sc-hero .acts .quiet{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:7px}
.sc-hero .btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sc-hero .btn.primary:hover{background:transparent;color:var(--ink)}
.sc-hero .hero-diag{margin-top:22px;font-size:var(--fs-small);color:var(--body)}
.sc-hero .hero-diag a{border-bottom:1px solid var(--stone)}
.sc-hero-cities{position:absolute;right:var(--gut);bottom:clamp(28px,5vh,56px);z-index:2;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.9;color:rgba(250,250,249,.86);text-align:left}
.sc-hero > .chno{position:absolute;left:var(--gut);bottom:clamp(28px,5vh,56px);z-index:2;margin:0}
.sc-hero-draw{position:absolute;left:calc(var(--gut) - 26px);top:14%;height:62%;width:20px;z-index:2;overflow:visible}
.sc-hero-draw path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.28;
  stroke-dasharray:700;stroke-dashoffset:700;animation:scDraw 2.8s cubic-bezier(.3,.6,.2,1) .5s forwards}
@keyframes scDraw{to{stroke-dashoffset:0}}
@media(max-width:1100px){.sc-hero-draw{display:none}}
@media(max-width:860px){
  .sc-hero{display:block;min-height:0;background:var(--paper)}
  .sc-hero::after{display:none}
  .sc-hero-img{position:relative;display:block;height:58svh;min-height:340px;background-image:url('img/campaign/hero-staircase-m.webp');background-position:60% center;animation:none;transform:none}
  .sc-hero-in{padding-top:var(--sp-s);padding-bottom:var(--sp-s)}
  .sc-hero-cities{top:calc(58svh - 120px);bottom:auto;right:18px}
  .sc-hero > .chno{top:18px;bottom:auto;left:18px;color:rgba(250,250,249,.8)}
}
@media(max-width:860px) and (max-height:600px){.sc-hero-cities{display:none}}

/* 02 · THESIS: dark, immersive, large type */
.sc-thesis{background:var(--ink);color:var(--paper);padding:var(--sp-l) 0;overflow:hidden}
.sc-thesis-bg{position:absolute;inset:0 0 0 38%;background-size:cover;background-position:center;filter:grayscale(.5) brightness(.8);opacity:.7;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.sc-thesis .wrap{position:relative;z-index:1}
.sc-thesis .chno{color:rgba(250,250,249,.45)}
.sc-thesis h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-display);line-height:.94;letter-spacing:-.045em;max-width:13ch}
.sc-thesis p{margin-top:clamp(36px,5vw,64px);max-width:46ch;color:rgba(250,250,249,.74);line-height:1.9}
.sc-thesis .go{margin-top:clamp(30px,4vw,48px);border-bottom-color:rgba(250,250,249,.3)}
@media(max-width:760px){.sc-thesis-bg{inset:auto 0 0 0;height:45%;-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}}

/* 02 · PROOF: numbers as objects, very airy */
.sc-proof{background:var(--paper);padding:var(--sp-l) 0}
.sc-proof-row{display:grid;grid-template-columns:repeat(4,1fr)}
.sc-proof-row > div{padding:0 clamp(18px,2.4vw,40px);border-left:1px solid var(--line)}
.sc-proof-row > div:first-child{border-left:0;padding-left:0}
.sc-proof b{display:block;font-family:var(--dsp);font-weight:300;font-size:var(--fs-h1);line-height:.9;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
.sc-proof i{display:block;font-style:normal;margin-top:22px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sc-proof span{display:block;margin-top:10px;font-size:var(--fs-small);line-height:1.6;color:var(--muted);max-width:26ch}
@media(max-width:1100px){.sc-proof b{font-size:var(--fs-h2)}}
@media(max-width:900px){.sc-proof-row{grid-template-columns:1fr 1fr;row-gap:var(--sp-s)}.sc-proof-row > div:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:520px){.sc-proof-row{grid-template-columns:1fr}.sc-proof-row > div{border-left:0;padding:0}.sc-proof b{font-size:var(--fs-h1)}}

/* 03 · WORK: cinematic, image-led */
.sc-work{background:var(--paper);padding:var(--sp-m) 0 var(--sp-l)}
.sc-case{display:grid;grid-template-columns:62% 1fr;align-items:end;color:inherit;margin-bottom:var(--sp-m)}
.sc-case:last-child{margin-bottom:0}
.sc-case.flip{grid-template-columns:1fr 62%}
.sc-case.flip .sc-case-img{order:2}
.sc-case-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#E3E3E1;
  filter:grayscale(1) contrast(1.04);transition:filter .8s ease}
.sc-case:hover .sc-case-img{filter:grayscale(.2)}
.sc-case-txt{display:flex;flex-direction:column;gap:12px;padding:0 var(--gut) 0 clamp(32px,4.4vw,80px)}
.sc-case.flip .sc-case-txt{padding:0 clamp(32px,4.4vw,80px) 0 var(--gut)}
.sc-case .mv-k{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sc-case-t{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
.sc-case .mv-c{font-size:var(--fs-small);line-height:1.6;color:var(--body);max-width:42ch}
.sc-case .mv-c b{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:2px}
.sc-case .mv-o{font-size:var(--fs-small);line-height:1.6;color:var(--ink);max-width:42ch;padding-top:12px;border-top:1px solid var(--line)}
.sc-case .mv-go{margin-top:8px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
@media(max-width:900px){
  .sc-case,.sc-case.flip{grid-template-columns:1fr;gap:26px}
  .sc-case.flip .sc-case-img{order:0}
  .sc-case-txt,.sc-case.flip .sc-case-txt{padding:0 var(--gut)}
  .sc-head{grid-template-columns:1fr;gap:8px}
}

/* 04 · SYSTEM: diagrammatic, assembles on scroll */
.sc-system{background:#F1F1F0;padding:var(--sp-l) 0}
.sc-system-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,90px);align-items:end}
.sc-system h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em;margin-top:14px;max-width:16ch}
.sc-system-head p{color:var(--body);max-width:40ch}
.sc-system .sysmap-scroll{margin-top:var(--sp-s)}
.sc-assemble .node,.sc-assemble .brace,.sc-assemble .cap{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease}
.sc-assemble .axis{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1)}
.sc-assemble.on .axis{stroke-dashoffset:0}
.sc-assemble.on .node{opacity:1;transform:none}
.sc-assemble.on .node:nth-of-type(1){transition-delay:.3s}
.sc-assemble.on .node:nth-of-type(2){transition-delay:.6s}
.sc-assemble.on .node:nth-of-type(3){transition-delay:.9s}
.sc-assemble.on .node:nth-of-type(4){transition-delay:1.2s}
.sc-assemble.on .node:nth-of-type(5){transition-delay:1.5s}
.sc-assemble.on .brace{opacity:.5;transform:none;transition-delay:1.9s}
.sc-assemble.on .cap{opacity:.75;transform:none;transition-delay:2.1s}
@media (prefers-reduced-motion:reduce){.sc-assemble *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;transition:none!important}}
@media(max-width:900px){.sc-system-head{grid-template-columns:1fr;align-items:start}}

/* 05 · WORLD: geographic, atmospheric, dark */
.sc-world{background:var(--ink);color:var(--paper);padding:var(--sp-l) 0 0}
.sc-world .chno{color:rgba(250,250,249,.45)}
.sc-world-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,90px);align-items:end}
.sc-world .said{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h1);line-height:.96;letter-spacing:-.04em;max-width:12ch}
.sc-world-head > p{color:rgba(250,250,249,.7);max-width:44ch}
.sc-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-top:var(--sp-m)}
.sc-strip figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1d1d1d;margin:0}
.sc-strip .im{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter 1s ease,transform 1.6s cubic-bezier(.16,.84,.28,1)}
.sc-strip figure:hover .im{filter:grayscale(.3) brightness(.95);transform:scale(1.04)}
.sc-strip figcaption{position:absolute;left:14px;bottom:14px;z-index:2;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.sc-strip figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.7),transparent 45%)}
@media(max-width:900px){.sc-world-head{grid-template-columns:1fr;align-items:start}.sc-strip{grid-template-columns:repeat(3,1fr)}}
/* the shared map, re-inked for the dark chapter */
.sc-world .mkmap-sec{background:transparent;padding:var(--sp-m) 0 var(--sp-l)}
.sc-world .mkmap-head{border-bottom-color:rgba(250,250,249,.14)}
.sc-world .mkmap-head p,.sc-world .mkmap-head .code{color:rgba(250,250,249,.6)}
.sc-world .mkmap .land{fill:rgba(250,250,249,.1)}
.sc-world .mk-dot{background:var(--paper)}
.sc-world .mk-city{color:rgba(250,250,249,.6)}
.sc-world .mk-pin:hover .mk-city,.sc-world .mk-pin.on .mk-city{color:var(--paper)}
.sc-world .mk-pin:hover .mk-dot,.sc-world .mk-pin.on .mk-dot{background:#C98B79;box-shadow:0 0 0 7px rgba(201,139,121,.18)}
.sc-world .mk-card{background:#1c1c1c;border-color:rgba(250,250,249,.14);color:var(--paper)}
.sc-world .mk-card p{color:rgba(250,250,249,.7)}

/* 06 · PERSON: intimate, photographic */
.sc-her{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.sc-her-pf{min-height:clamp(520px,92vh,980px);background:#1d1d1d url('img/about.webp') center 18%/cover}
.sc-her-txt{padding:var(--sp-m) clamp(30px,6vw,120px);display:flex;flex-direction:column;justify-content:center}
.sc-her h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.04em;max-width:12ch;margin-top:16px}
.sc-her p{margin-top:clamp(26px,3vw,38px);max-width:40ch;color:var(--body);line-height:1.85}
.sc-her p.small{margin-top:16px;font-size:var(--fs-small);color:var(--muted)}
.sc-her .go{margin-top:clamp(28px,3.4vw,40px);align-self:flex-start}
@media(max-width:860px){.sc-her{grid-template-columns:1fr}.sc-her-pf{min-height:0;aspect-ratio:4/5}.sc-her-txt{padding:var(--sp-s) var(--gut)}}

/* 07 · FIT: diagnostic, one statement at a time */
.sc-fit{background:var(--paper);padding:var(--sp-l) 0}
.sc-fit h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em;margin-top:14px}
.sc-fits{list-style:none;margin:var(--sp-m) 0 0;padding:0;counter-reset:f}
.sc-fits li{counter-increment:f;display:grid;grid-template-columns:clamp(40px,8vw,140px) 1fr;align-items:baseline;
  font-family:var(--dsp);font-weight:300;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em;color:var(--ink);
  max-width:30ch;padding:clamp(34px,9vh,110px) 0 0}
.sc-fits li:nth-child(even){margin-left:auto;max-width:34ch}
.sc-fits li::before{content:counter(f,decimal-leading-zero);font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;color:var(--stone)}
.sc-fit .fits-next{margin-top:var(--sp-m);font-size:var(--fs-body);color:var(--body)}
.sc-fit .fits-next a{border-bottom:1px solid var(--stone)}
@media(max-width:760px){.sc-fits li:nth-child(even){margin-left:0}.sc-fits li{grid-template-columns:44px 1fr;padding-top:40px}}

/* 08 · ENGAGEMENT: an architectural index */
.sc-ways{background:#F1F1F0;padding:var(--sp-l) 0}
.sc-ways-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:end;margin-bottom:var(--sp-s)}
.sc-ways h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.sc-ways-head > p{color:var(--body);max-width:48ch}
.sc-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sc-index > li{border-bottom:1px solid var(--line)}
.sc-row{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:clamp(50px,6vw,90px) minmax(0,1fr) minmax(0,1.1fr) 40px;
  align-items:baseline;gap:clamp(16px,2.4vw,40px);padding:clamp(24px,3.4vw,40px) 0}
.sc-row .n{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;color:var(--stone)}
.sc-row .t{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.02em;color:var(--ink);transition:transform .5s cubic-bezier(.16,.84,.28,1)}
.sc-row .d{font-size:var(--fs-small);line-height:1.6;color:var(--body)}
.sc-row .d em{display:block;margin-top:6px;font-style:normal;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sc-row .a{justify-self:end;font-size:var(--fs-lead);color:var(--muted);transition:transform .4s}
.sc-row:hover .t{transform:translateX(8px)}
.sc-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sc-index li.open .sc-row .a{transform:rotate(90deg);color:var(--accent)}
.sc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,.84,.28,1)}
.sc-more > *{overflow:hidden}
.sc-index li.open .sc-more{grid-template-rows:1fr}
.sc-more{padding-left:calc(clamp(50px,6vw,90px) + clamp(16px,2.4vw,40px))}
.sc-more dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px clamp(20px,3vw,50px);margin:0;max-width:900px}
.sc-more dt{grid-row:1;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sc-more dd{grid-row:2;margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--body)}
.sc-more .go{margin:22px 0 clamp(26px,3vw,40px)}
.sc-more-in{min-height:0}
.sc-how{margin-top:var(--sp-s);display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:clamp(20px,3.4vw,64px);align-items:start}
.sc-how .pg-seq{margin:0;max-width:74ch}
@media(max-width:900px){
  .sc-ways-head{grid-template-columns:1fr;align-items:start}
  .sc-row{grid-template-columns:40px 1fr 28px}
  .sc-row .d{grid-column:2 / 3;grid-row:2}
  .sc-more{padding-left:0}
  .sc-more dl{grid-template-columns:1fr}
  .sc-more dt,.sc-more dd{grid-row:auto}
  .sc-how{grid-template-columns:1fr}
}

/* 09 · VOICES: one enormous quotation, full screen */
.sc-voice{background:var(--ink);color:var(--paper);min-height:100svh;display:flex;align-items:center;padding:var(--sp-m) 0;overflow:hidden;text-align:center}
.sc-voice-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.3) brightness(.62)}
.sc-voice .wrap{position:relative;z-index:1;width:100%}
.sc-voice .chno{color:rgba(250,250,249,.45)}
.sc-voice .meta{color:rgba(250,250,249,.55)}
.sc-voice .ts-stage{position:relative;display:grid;margin-top:clamp(34px,4vw,56px)}
.sc-voice .ts-q{grid-area:1/1;align-self:center;margin:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.sc-voice .ts-q.on{opacity:1;pointer-events:auto;transition:opacity .9s ease .35s}
.sc-voice .ts-q p{font-family:var(--dsp);font-weight:300;font-style:italic;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;max-width:22ch;margin:0 auto;color:var(--paper);text-wrap:balance}
.sc-voice .ts-q cite{display:flex;align-items:center;justify-content:center;gap:14px;font-style:normal;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,249,.6);margin-top:34px}
.sc-voice .ts-av{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1);display:inline-flex;align-items:center;justify-content:center;background:#2a2a2a;font-size:var(--fs-label)}
.sc-voice .ts-nav{display:flex;align-items:center;justify-content:center;gap:26px;margin:clamp(30px,4vw,54px) 0 26px}
.sc-voice .ts-arrow{background:none;border:1px solid rgba(250,250,249,.3);color:rgba(250,250,249,.8);width:44px;height:44px;border-radius:50%;cursor:pointer;font-family:inherit;font-size:var(--fs-body);transition:.3s}
.sc-voice .ts-arrow:hover{border-color:var(--paper);color:var(--paper)}
.sc-voice .ts-count{font-size:var(--fs-label);letter-spacing:.16em;color:rgba(250,250,249,.5);min-width:4.5em}
.sc-voice .go{color:rgba(250,250,249,.8);border-bottom-color:rgba(250,250,249,.3)}
@media(max-width:760px){.sc-voice .ts-q p{font-size:var(--fs-h3)}.sc-voice{min-height:0}}

/* 10 · THEORY: sculptural */
.sc-shell{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.sc-shell-txt{padding:var(--sp-l) clamp(30px,5vw,100px) var(--sp-l) var(--gut)}
.sc-shell-title{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h1);line-height:.95;letter-spacing:-.035em}
.sc-shell-title sup{font-size:.22em;vertical-align:top;margin-left:.15em;opacity:.55;font-family:var(--sans);letter-spacing:.16em}
.sc-shell .said{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;max-width:15ch;margin-top:clamp(30px,4vw,56px)}
.sc-shell-txt > p:not(.said){margin-top:22px;max-width:40ch;color:var(--body)}
.sc-shell-txt > .go{margin-top:28px}
.sc-shell-img{min-height:clamp(520px,90vh,1000px);background-size:cover;background-position:center;background-color:#1d1d1d;background-position:64% center;filter:grayscale(.35)}
.sc-trio{margin-top:var(--sp-s);display:grid;gap:26px}
.sc-trio .label{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sc-trio p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--body);max-width:46ch}
.sc-trio b{font-family:var(--dsp);font-weight:400;font-size:var(--fs-lead);color:var(--ink);display:block;margin-bottom:2px}
.sc-trio .hl{border-bottom:1px solid var(--stone);font-size:var(--fs-small);letter-spacing:0;text-transform:none;padding-bottom:1px}
@media(max-width:900px){.sc-shell{grid-template-columns:1fr}.sc-shell-img{order:-1;min-height:0;aspect-ratio:1/1}.sc-shell-txt{padding:var(--sp-s) var(--gut)}}

/* 11 · THINKING: editorial */
.sc-think{background:var(--paper);padding:var(--sp-l) 0}
.sc-think-g{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,4vw,70px)}
.sc-note{display:block;color:inherit}
.sc-note .im{display:block;background-size:cover;background-position:center;background-color:#E3E3E1;filter:grayscale(1);transition:filter .8s}
.sc-note:hover .im{filter:grayscale(.3)}
.sc-note .k{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.sc-note .t{display:block;font-family:var(--dsp);font-weight:300;font-size:var(--fs-h4);line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin-top:8px;max-width:22ch}
.sc-note.lead .im{aspect-ratio:4/3}
.sc-note.lead .t{font-size:var(--fs-h2);max-width:16ch;line-height:1.02}
.sc-note-list{display:grid;gap:clamp(26px,3vw,44px);align-content:start}
.sc-note-list .sc-note{display:grid;grid-template-columns:42% 1fr;gap:24px;align-items:center}
.sc-note-list .im{aspect-ratio:4/3}
.sc-note-list .k{margin-top:0}
@media(max-width:900px){.sc-think-g{grid-template-columns:1fr}}

/* 12 · CREDITS: quiet, like film credits */
.sc-credits{background:var(--paper);padding:var(--sp-s) 0 var(--sp-m)}
.sc-credits .rail{position:relative;overflow:hidden;margin:clamp(26px,3vw,40px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.sc-credits .track{display:flex;align-items:center;gap:clamp(64px,8vw,130px);width:max-content;animation:scRail 90s linear infinite}
.sc-credits .track img{height:clamp(34px,3.4vw,46px);width:auto;flex:none;opacity:.38;filter:grayscale(1);transition:opacity .4s}
.sc-credits .track img:hover{opacity:.9}
.sc-credits .rail:hover .track{animation-play-state:paused}
@keyframes scRail{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sc-credits .track{animation:none;flex-wrap:wrap;width:auto;gap:30px 48px}}

/* 13 · ENQUIRE: minimal and dramatic */
.sc-close{background:var(--ink);color:var(--paper);min-height:88svh;display:flex;align-items:center;overflow:hidden;padding:var(--sp-l) 0}
.sc-close-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.35) brightness(.6) contrast(1.05)}
.sc-close::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,18,18,.82),rgba(18,18,18,.2) 70%)}
.sc-close .wrap{position:relative;z-index:1;width:100%}
.sc-close h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-display);line-height:.94;letter-spacing:-.045em;max-width:12ch}
.sc-close p{margin-top:clamp(26px,3vw,40px);max-width:40ch;color:rgba(250,250,249,.76)}
.sc-close .btn.primary{margin-top:clamp(34px,4vw,56px);background:var(--paper);color:var(--ink);border-color:var(--paper)}
.sc-close .btn.primary:hover{background:transparent;color:var(--paper)}

/* chapter rail: where you are in the argument */
.sc-rail{position:fixed;left:clamp(14px,1.4vw,24px);top:50%;z-index:40;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  display:flex;gap:14px;align-items:center;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);mix-blend-mode:difference;opacity:0;transition:opacity .5s}
.sc-rail.on{opacity:1}
.sc-rail .n{color:#bdbdbb}
.sc-rail .l{color:#8f8f8d}
@media(max-width:1180px){.sc-rail{display:none}}

/* footer sits straight after the dark close */
footer{background:var(--ink)}

/* breathing screen between System and World: one image, nothing else */
.sc-band{position:relative;height:clamp(360px,78vh,860px);overflow:hidden;background:var(--ink)}
.sc-band .im{position:absolute;inset:-6% 0;background-size:cover;background-position:center;filter:grayscale(.45)}
/* World: the globe sits behind the heading */
.sc-world-bg{position:absolute;top:0;right:0;width:62%;height:min(100vh,900px);background-size:cover;background-position:center;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%),linear-gradient(0deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 45%);filter:grayscale(.4)}
.sc-world .wrap,.sc-world .sc-strip,.sc-world #mve-map{position:relative;z-index:1}
@media(max-width:900px){.sc-world-bg{width:100%;height:60vh;opacity:.35}}
/* How to start, beside the desk */
.sc-how{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.sc-how-img{aspect-ratio:16/10;background-size:cover;background-position:center;filter:grayscale(.3)}
.sc-how .meta{margin-bottom:22px}
@media(max-width:900px){.sc-how{grid-template-columns:1fr}}

.sc-her h2 .it{font-style:italic}
.sc-her p b{font-weight:500;color:var(--ink)}
.sc-close h2{max-width:11ch}

/* ===== 27 Sept revision: calmer scale, portrait hero, images back to normal size ===== */
/* Hero: text left, headshot right, as before */
.sc-hero{display:grid;grid-template-columns:1fr 46%;min-height:calc(100svh - 72px);background:var(--paper)}
.sc-hero::after{display:none}
.sc-hero-img{position:relative;inset:auto;order:2;grid-column:2;grid-row:1;background:#1d1d1d url('img/about.webp') center 14%/cover no-repeat}
.sc-hero-in{grid-column:1;grid-row:1;align-self:center;padding-left:var(--gut);padding-right:clamp(32px,4vw,72px)}
.sc-hero-cities{color:rgba(250,250,249,.85)}
.sc-hero-draw{display:none}
.sc-hero h1{font-size:var(--fs-display);line-height:.9}
@media(max-width:860px){.sc-hero{display:block}.sc-hero-img{height:auto;aspect-ratio:4/4.5;background-image:url('img/about.webp');background-position:center 14%}}
/* Headlines one step down */
.sc-thesis h2{font-size:var(--fs-h1);max-width:14ch}
.sc-proof b{font-size:var(--fs-h2)}
.sc-world .said,.sc-her h2,.sc-shell-title{font-size:var(--fs-h2)}
.sc-close h2{font-size:var(--fs-h1)}
.sc-voice .ts-q p{font-size:var(--fs-h3);max-width:26ch}
.sc-fits li{font-size:var(--fs-h4);padding-top:clamp(24px,5vh,56px)}
.sc-case-t{font-size:var(--fs-h3)}
.sc-row .t{font-size:var(--fs-h4)}
.sc-note.lead .t{font-size:var(--fs-h3)}
/* Images back to their earlier proportions */
.sc-band{height:clamp(260px,48vh,520px)}
.sc-case{grid-template-columns:50% 1fr}.sc-case.flip{grid-template-columns:1fr 50%}
.sc-case-img{aspect-ratio:3/2}
.sc-her-pf{min-height:clamp(420px,74vh,820px)}
.sc-shell-img{min-height:clamp(420px,70vh,760px)}
.sc-voice{min-height:0;padding:var(--sp-l) 0}
.sc-close{min-height:0}
.sc-strip figure{aspect-ratio:1/1}
@media(max-width:900px){.sc-case,.sc-case.flip{grid-template-columns:1fr}}

/* Logos: back to the visible rotating rail, straight after the work */
.sc-credits{padding:var(--sp-s) 0}
.sc-credits .track img{height:clamp(44px,4.4vw,60px);opacity:.68}
.sc-credits .track{animation-duration:78s}

/* calmer still: quote and statements one step smaller, system diagram hidden on phones */
.sc-voice .ts-q p{font-size:var(--fs-h4);max-width:30ch}
.sc-fits li{font-size:var(--fs-lead)}
.sc-thesis h2,.sc-close h2{font-size:var(--fs-h2)}
.sc-hero h1{font-size:var(--fs-h1)}
@media(max-width:760px){.sc-system .sysmap-scroll{display:none}.sc-system .sysmap-list{display:block}}
@media(max-width:900px){.sc-her,.sc-shell{grid-template-columns:minmax(0,1fr)}.sc-shell-txt,.sc-her-txt{min-width:0}}
@media(max-width:900px){.sc-shell-img,.sc-her-pf{min-height:0!important;width:100%}}
@media(min-width:861px){
  .sc-hero{grid-template-rows:minmax(calc(100svh - 72px),auto)}
  .sc-hero-img{grid-area:1/2/2/3!important;height:auto;min-height:calc(100svh - 72px);align-self:stretch}
  .sc-hero-in{grid-area:1/1/2/2!important}
}
.sc-hero h1{font-size:var(--fs-display)}
.sc-hero-cities{bottom:clamp(90px,12vh,120px)!important}
.sc-her-pf{background-image:url('img/origin.webp')!important;background-position:center 30%!important}

/* ===== Tidy pass, 27 Sept ===== */
/* remove chapter numbers and the side rail: less clutter */
.scene .chno,.sc-hero > .chno,.sc-rail{display:none!important}
/* proof: less dead space before the work */
.sc-proof{padding:var(--sp-m) 0 var(--sp-s)}
.sc-work{padding-top:var(--sp-s)}
/* case studies: every image black and white, titles with presence */
.sc-case-img,.sc-case:hover .sc-case-img{filter:grayscale(1) contrast(1.04)!important}
.sc-case-t{font-size:var(--fs-h2)}
.sc-case{margin-bottom:var(--sp-s)}
/* system: tighter */
.sc-system{padding:var(--sp-m) 0}
/* world: globe sits behind, quieter, text stays readable */
.sc-world-bg{opacity:.28!important;width:55%}
.sc-world-head > p{color:rgba(250,250,249,.78)}
/* fit: a clean two-column list, not a zigzag */
.sc-fits{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,110px);margin-top:var(--sp-s)}
.sc-fits li,.sc-fits li:nth-child(even){margin:0;max-width:none;padding:26px 0;border-top:1px solid var(--line);
  grid-template-columns:56px 1fr;font-size:var(--fs-h4);line-height:1.25}
.sc-fit{padding:var(--sp-m) 0}
@media(max-width:760px){.sc-fits{grid-template-columns:1fr}}
/* logos: start clear of the edge fade */
.sc-credits .rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* section heads: label left, link right */
.sc-head{grid-template-columns:1fr auto}
/* close: light, image on the right, so it never runs dark into the dark footer */
.sc-close{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 50%;padding:0;min-height:clamp(420px,70vh,720px)}
.sc-close::after{display:none}
.sc-close-bg{position:relative;inset:auto;grid-column:2;grid-row:1;filter:grayscale(.2);min-height:100%}
.sc-close .wrap{grid-column:1;grid-row:1;align-self:center;padding:var(--sp-m) clamp(32px,5vw,90px) var(--sp-m) var(--gut);max-width:none;margin:0}
.sc-close h2{color:var(--ink)}
.sc-close p{color:var(--body)}
.sc-close .btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sc-close .btn.primary:hover{background:transparent;color:var(--ink)}
@media(max-width:860px){.sc-close{grid-template-columns:1fr}.sc-close-bg{grid-row:2;grid-column:1;aspect-ratio:16/10}.sc-close .wrap{grid-row:1}}
.sc-close h2{max-width:14ch}

/* ===== Alignment pass, 27 Sept ===== */
/* case studies sit inside the same margins as everything else */
.sc-case{max-width:var(--max);margin-left:auto;margin-right:auto;padding:0 var(--gut);gap:clamp(40px,5vw,90px);align-items:center}
.sc-case-txt,.sc-case.flip .sc-case-txt{padding:0}
.sc-case .mv-c,.sc-case .mv-o{max-width:46ch}
/* one consistent gap between sections */
.sc-proof,.sc-system,.sc-fit,.sc-ways,.sc-think{padding-top:var(--sp-m);padding-bottom:var(--sp-m)}
/* thinking: images top-aligned, titles in line */
.sc-think-g{align-items:start}
.sc-note-list .sc-note{align-items:start}
/* hero text vertically centred on the portrait */
.sc-hero-in{align-self:center}

/* ===== Bands, from Michelle's 27 Sept board ===== */
.bd-k{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.bd-link{display:inline-block;font-size:var(--fs-small);border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:28px}
/* work */
.bd-work{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;min-height:clamp(380px,48vw,560px);background:#121212;color:var(--paper)}
.bd-work-lead{padding:clamp(32px,4vw,64px) clamp(24px,3vw,48px) clamp(32px,4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:center}
.bd-work .bd-k{color:rgba(250,250,249,.55)}
.bd-work h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.01em;max-width:14ch}
.bd-card{position:relative;overflow:hidden;color:var(--paper);display:flex;align-items:flex-end}
.bd-card .im{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) brightness(.62);transition:transform 1.2s cubic-bezier(.16,.84,.28,1),filter .8s}
.bd-card:hover .im{transform:scale(1.04);filter:grayscale(.6) brightness(.7)}
.bd-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.85),transparent 60%)}
.bd-card-t{position:relative;z-index:1;padding:clamp(20px,2.2vw,32px);display:grid;gap:8px}
.bd-card .n{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h4)}
.bd-card b{font-weight:400;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
.bd-card .d{font-size:var(--fs-small);line-height:1.55;color:rgba(250,250,249,.78);max-width:30ch}
.bd-card .a{font-size:var(--fs-lead);margin-top:6px}
@media(max-width:1000px){.bd-work{grid-template-columns:1fr 1fr}.bd-work-lead{grid-column:1/-1}.bd-card{min-height:340px}}
@media(max-width:600px){.bd-work{grid-template-columns:1fr}}
/* system */
.bd-sys{background:#F1F1F0;padding:var(--sp-m) 0}
.bd-sys-g{display:grid;grid-template-columns:1fr 1.5fr .9fr;gap:clamp(30px,4vw,70px);align-items:center}
.bd-sys h2,.bd-ways h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.02em}
.bd-sys-lead p{margin-top:20px;max-width:34ch;color:var(--body);font-size:var(--fs-small);line-height:1.7}
.bd-sys-fig{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center}
.bd-sys-fig img{width:100%;height:auto;mix-blend-mode:multiply;opacity:.85}
.bd-sys-fig ol{list-style:none;margin:0 0 0 -8%;padding:0;display:grid;gap:clamp(14px,1.8vw,24px)}
.bd-sys-fig li{position:relative;padding-left:clamp(40px,5vw,80px)}
.bd-sys-fig li::before{content:"";position:absolute;left:0;top:.7em;width:clamp(32px,4.4vw,70px);border-top:1px solid var(--stone)}
.bd-sys-fig b{display:block;font-weight:400;font-size:var(--fs-small);color:var(--ink)}
.bd-sys-fig span{font-family:var(--dsp);font-style:italic;font-size:var(--fs-small);color:var(--muted)}
.bd-sys-q{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px);font-family:var(--dsp);font-weight:300;font-size:var(--fs-h4);line-height:1.3;color:var(--ink);max-width:16ch}
@media(max-width:1000px){.bd-sys-g{grid-template-columns:1fr}.bd-sys-q{border-left:0;padding-left:0}}
/* ways */
.bd-ways{background:var(--paper);padding:var(--sp-m) 0}
.bd-ways-g{display:grid;grid-template-columns:1.4fr repeat(5,1fr);align-items:stretch}
.bd-ways-lead{padding-right:clamp(24px,3vw,48px)}
.bd-col{display:flex;flex-direction:column;gap:10px;padding:0 clamp(16px,1.6vw,26px);border-left:1px solid var(--line);color:inherit;transition:background .4s}
.bd-col:hover b{text-decoration:underline;text-underline-offset:4px}
.bd-col .n{font-size:var(--fs-label);letter-spacing:.16em;color:var(--stone)}
.bd-col b{font-family:var(--dsp);font-weight:400;font-size:var(--fs-lead);line-height:1.2;color:var(--ink)}
.bd-col span:not(.n){font-size:var(--fs-small);line-height:1.6;color:var(--body)}
.bd-col em{margin-top:auto;font-style:normal;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bd-ways .sc-how{margin-top:var(--sp-s);padding-top:var(--sp-s);border-top:1px solid var(--line)}
@media(max-width:1100px){.bd-ways-g{grid-template-columns:repeat(3,1fr);row-gap:36px}.bd-ways-lead{grid-column:1/-1}.bd-col:nth-child(2),.bd-col:nth-child(5){border-left:0;padding-left:0}}
@media(max-width:600px){.bd-ways-g{grid-template-columns:1fr}.bd-col{border-left:0;padding:18px 0 0;border-top:1px solid var(--line)}}
.bd-sys-fig img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70%);filter:grayscale(1) contrast(1.1)}
.bd-card:nth-of-type(3) .im{background-position:78% center}

/* ===== Ultimate version, 28 Sept ===== */
/* hero: one faint chamber drawing behind the headline, drawn once */
.sc-hero-draw{display:block!important;position:absolute;left:auto;right:auto;top:50%;width:min(58vw,720px);height:auto;transform:translate(-18%,-50%);z-index:1;pointer-events:none}
.sc-hero-in{position:relative;z-index:2}
.sc-hero{position:relative}
.sc-hero-draw path{fill:none;stroke:var(--ink);stroke-width:.6;opacity:.11;stroke-dasharray:4000;stroke-dashoffset:4000;animation:scDraw 3.6s cubic-bezier(.3,.6,.2,1) .4s forwards}
.sc-hero-draw .ch{animation-delay:1.6s;opacity:.07}
@media(max-width:860px){.sc-hero-draw{display:none!important}}
@media (prefers-reduced-motion:reduce){.sc-hero-draw path{animation:none;stroke-dashoffset:0}}
/* system: each part lights as you reach it */
.bd-sys-fig li{opacity:.3;transition:opacity .8s ease}
.bd-sys-fig li.on{opacity:1}
@media (prefers-reduced-motion:reduce){.bd-sys-fig li{opacity:1}}
/* world: light, city grid 3 x 2, map on paper */
.sc-world{background:var(--paper)!important;color:var(--ink)!important;padding-top:var(--sp-m)}
.sc-world .said{color:var(--ink);font-size:var(--fs-h2)}
.sc-world-head > p{color:var(--body)!important}
.sc-strip{grid-template-columns:repeat(3,1fr)!important;gap:clamp(6px,.8vw,12px)!important;max-width:var(--max);margin-left:auto;margin-right:auto;padding:0 var(--gut)}
.sc-strip figure{aspect-ratio:3/2!important;background:#e3e3e1}
.sc-strip .im{filter:grayscale(.85) contrast(1.04)!important}
.sc-world .mkmap-sec{padding:var(--sp-m) 0 var(--sp-m)}
.sc-world .mkmap-head{border-bottom-color:var(--line)}
.sc-world .mkmap-head p,.sc-world .mkmap-head .code{color:var(--muted)}
.sc-world .mkmap .land{fill:var(--bone,#E3E3E1)}
.sc-world .mk-dot{background:var(--ink)}
.sc-world .mk-city{color:var(--muted)}
.sc-world .mk-pin:hover .mk-city,.sc-world .mk-pin.on .mk-city{color:var(--ink)}
.sc-world .mk-pin:hover .mk-dot,.sc-world .mk-pin.on .mk-dot{background:var(--accent);box-shadow:0 0 0 7px rgba(90,36,56,.12)}
.sc-world .mk-card{background:var(--paper);border-color:var(--line);color:var(--ink)}
.sc-world .mk-card p{color:var(--muted)}
@media(max-width:700px){.sc-strip{grid-template-columns:1fr 1fr!important}}
/* ways: tap a column, the detail opens in place */
.bd-col{padding:0;border-left:1px solid var(--line)}
.bd-col-b{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:0 clamp(16px,1.6vw,26px);width:100%;height:100%}
.bd-col-b .n{font-size:var(--fs-label);letter-spacing:.16em;color:var(--stone)}
.bd-col-b b{font-family:var(--dsp);font-weight:400;font-size:var(--fs-lead);line-height:1.2;color:var(--ink)}
.bd-col-b span:not(.n):not(.bd-plus){font-size:var(--fs-small);line-height:1.6;color:var(--body)}
.bd-col-b em{font-style:normal;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bd-plus{margin-top:auto;font-size:var(--fs-lead);color:var(--muted);transition:transform .4s}
.bd-col.open .bd-plus{transform:rotate(45deg);color:var(--accent)}
.bd-col-b:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.bd-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,.84,.28,1);padding:0 clamp(16px,1.6vw,26px)}
.bd-more > div{overflow:hidden}
.bd-col.open .bd-more{grid-template-rows:1fr}
.bd-more .l{display:block;margin-top:16px;font-family:var(--sans);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bd-more p{margin:4px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--body)}
.bd-more .bd-link{display:inline-block;margin:16px 0 4px;font-size:var(--fs-small)}
@media(max-width:600px){.bd-col{border-left:0;border-top:1px solid var(--line);padding-top:18px}.bd-col-b,.bd-more{padding-left:0;padding-right:0}}
/* Shell Theory and Field Notes read as one chapter */
.sc-think{padding-top:var(--sp-s)!important}
/* footer: link columns above the name */
footer .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,56px);padding:var(--sp-m) 0 var(--sp-s);border-bottom:1px solid rgba(250,250,249,.12);margin-bottom:var(--sp-s)}
footer .ft-cols b{display:block;font-family:var(--sans);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,249,.6);margin-bottom:16px}
footer .ft-cols a{display:block;font-size:var(--fs-small);line-height:2.1;color:rgba(250,250,249,.8);transition:color .3s}
footer .ft-cols a:hover{color:var(--paper)}
@media(max-width:860px){footer .ft-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .ft-cols{grid-template-columns:1fr}}
.sc-hero-draw{left:calc(var(--gut) + 8%)!important;top:50%;width:min(44vw,640px)!important;transform:translateY(-50%)!important}
.sc-hero-draw path{opacity:.14;stroke-width:.7}
footer .ft-cols{border-bottom:0;margin-bottom:0;padding-bottom:var(--sp-s)}
.bd-col-b b{text-decoration:none}
.bd-plus{font-size:var(--fs-h4)}
.sc-hero-draw{left:auto!important;right:calc(46% + 10px)!important;width:min(34vw,480px)!important}

/* ===== Rosewood pass, 28 Sept ===== */
/* centred, quiet section openings */
.rw-head{text-align:center;margin:0 auto var(--sp-s);max-width:40ch}
.rw-head .meta{display:block;margin-bottom:14px}
.rw-head h2{font-family:var(--dsp);font-weight:300;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
/* thesis: half image, half text */
.sc-thesis{display:grid;grid-template-columns:1fr 1fr;padding:0!important;min-height:clamp(480px,78vh,760px);overflow:hidden}
.sc-thesis-img{background-size:cover;background-position:center;filter:grayscale(.3);min-height:100%}
.sc-thesis .wrap{align-self:center;max-width:none;margin:0;padding:var(--sp-m) clamp(32px,6vw,110px)!important;text-align:center;display:flex;flex-direction:column;align-items:center}
.sc-thesis h2{font-size:var(--fs-h2)!important;max-width:15ch;margin:0 auto}
.sc-thesis p{max-width:42ch;margin-left:auto;margin-right:auto}
@media(max-width:860px){.sc-thesis{grid-template-columns:1fr}.sc-thesis-img{aspect-ratio:16/10;min-height:0}}
/* study of people: centred text panel */
.sc-her-txt{text-align:center;align-items:center}
.sc-her h2,.sc-her p{margin-left:auto;margin-right:auto}
.sc-her .go{align-self:center}
/* Shell Theory: centred text panel */
.sc-shell-txt{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sc-shell .said,.sc-shell-txt > p{margin-left:auto;margin-right:auto}
.sc-trio{text-align:left;max-width:46ch}
/* field notes: four equal cards */
.rw-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,32px)}
.rw-card{display:flex;flex-direction:column;color:inherit}
.rw-card .im{display:block;aspect-ratio:4/5;background-size:cover;background-position:center;background-color:#E3E3E1;filter:grayscale(1);transition:filter .8s}
.rw-card:hover .im{filter:grayscale(.3)}
.rw-card .k{margin-top:18px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rw-card .t{margin-top:8px;font-family:var(--dsp);font-weight:300;font-size:var(--fs-h4);line-height:1.2;color:var(--ink);flex:1}
.rw-btn{align-self:flex-start;margin-top:18px;padding:10px 18px;background:var(--ink);color:var(--paper);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;transition:background .3s}
.rw-card:hover .rw-btn{background:var(--accent)}
.rw-more{text-align:center;margin-top:var(--sp-s)}
@media(max-width:1000px){.rw-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rw-cards{grid-template-columns:1fr}}
/* close carries How to start */
.sc-close-steps{margin:clamp(24px,3vw,40px) 0}
.sc-close-steps .meta{display:block;margin-bottom:14px}
.sc-close-steps .pg-seq{margin:0}
/* footer: newsletter line, columns, centred monogram */
footer .ft-news{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:var(--sp-s) 0;border-bottom:1px solid rgba(250,250,249,.12)}
footer .ft-news p{margin:0;font-family:var(--dsp);font-weight:300;font-size:var(--fs-h4);color:var(--paper)}
footer .ft-news p span{display:block;font-family:var(--sans);font-size:var(--fs-small);color:rgba(250,250,249,.6);margin-top:6px}
footer .ft-news .btn{border:1px solid var(--paper);color:var(--paper);background:transparent}
footer .ft-news .btn:hover{background:var(--paper);color:var(--ink)}
.sc-trio{text-align:center;margin-left:auto;margin-right:auto}
.sc-trio p{margin-left:auto;margin-right:auto}
footer{padding-top:0!important}
.sc-world-head{text-align:center;grid-template-columns:1fr!important;justify-items:center}
.sc-world .said{margin:0 auto 18px;max-width:18ch}
.sc-world-head > p{max-width:56ch;margin:0 auto}

/* ===== Pressure-test fixes, 28 Sept ===== */
/* hero drawing read as a stray mark behind the paragraph: removed */
.sc-hero-draw{display:none!important}
/* thesis sat dark directly under the dark portrait: text panel now light */
.sc-thesis{background:var(--paper-2,#F1F1F0)!important;color:var(--ink)!important}
.sc-thesis h2{color:var(--ink)!important}
.sc-thesis p{color:var(--body)!important}
.sc-thesis .go{color:var(--ink)!important;border-bottom-color:var(--line)!important}
/* fit: centred opening like the other sections */
.sc-fit .wrap > .meta,.sc-fit h2{text-align:center;display:block}
.sc-fit .fits-next{text-align:center}
/* phones: field notes two across, proof numbers two by two */
@media(max-width:520px){
  .rw-cards{grid-template-columns:1fr 1fr!important;gap:14px}
  .rw-card .t{font-size:var(--fs-lead)}
  .rw-btn{padding:8px 12px}
  .sc-proof-row{grid-template-columns:1fr 1fr!important;row-gap:40px;column-gap:20px}
  .sc-proof-row > div{border-left:0!important;padding:0!important}
  .sc-proof b{font-size:var(--fs-h3)!important}
}

/* ===== Motion, 28 Sept (with motion2.js) ===== */
.m2 .bd-card,.m2 .sc-thesis-img,.m2 .sc-her-pf,.m2 .sc-shell-img,.m2 .sc-close-bg,.m2 .sc-strip figure,.m2 .rw-card .im{
  clip-path:inset(8% 8% 8% 8%);opacity:.001;transition:clip-path 1.3s cubic-bezier(.2,.7,.1,1) var(--m2d,0s),opacity .9s ease var(--m2d,0s)}
.m2 .m2-in.bd-card,.m2 .m2-in.sc-thesis-img,.m2 .m2-in.sc-her-pf,.m2 .m2-in.sc-shell-img,.m2 .m2-in.sc-close-bg,.m2 .sc-strip figure.m2-in,.m2 .rw-card .im.m2-in{clip-path:inset(0 0 0 0);opacity:1}
/* hairlines draw in from the left */
.m2 .sc-proof-row > div,.m2 .bd-col,.m2 .sc-fits li,.m2 footer .ft-cols > div{position:relative}
.m2 .sc-fits li{border-top-color:transparent!important}
.m2 .sc-fits li::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--m2d,0s)}
.m2 .sc-fits li.m2-in::after{transform:scaleX(1)}
.m2 .sc-proof-row > div,.m2 .bd-col{border-left-color:transparent!important}
.m2 .sc-proof-row > div::after,.m2 .bd-col::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--line);transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--m2d,0s)}
.m2 .sc-proof-row > div:first-child::after{display:none}
.m2 .sc-proof-row > div.m2-in::after,.m2 .bd-col.m2-in::after{transform:scaleY(1)}
@media(max-width:600px){.m2 .bd-col::after,.m2 .sc-proof-row > div::after{display:none}}
/* system connectors draw one after another */
.m2 .bd-sys-fig li::before{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.m2 .bd-sys-fig li.m2-in::before{transform:scaleX(1)}
.m2 .bd-sys-fig li:nth-child(2)::before{transition-delay:.15s}.m2 .bd-sys-fig li:nth-child(3)::before{transition-delay:.3s}
.m2 .bd-sys-fig li:nth-child(4)::before{transition-delay:.45s}.m2 .bd-sys-fig li:nth-child(5)::before{transition-delay:.6s}
/* cards: a slow lift of the image on hover */
.bd-card:hover .im,.rw-card:hover .im{transform:scale(1.04)}
.rw-card .im{transition:filter .8s,transform 1.4s cubic-bezier(.16,.84,.28,1)}
/* hero portrait settles once on load */
.sc-hero-img{animation:m2settle 2.4s cubic-bezier(.16,.84,.28,1) both}
@keyframes m2settle{from{transform:scale(1.05);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sc-hero-img{animation:none}}

/* ===== Hero headline larger, 28 Sept ===== */
.sc-hero h1{font-size:clamp(3.25rem,1rem + 7vw,8.25rem)!important;line-height:.86;letter-spacing:-.04em}
@media(max-width:860px){.sc-hero h1{font-size:clamp(3.5rem,17vw,5.5rem)!important}}

/* ===== System shell larger, 28 Sept ===== */
@media(min-width:1001px){
  .bd-sys-g{grid-template-columns:minmax(0,.8fr) minmax(0,2fr);grid-template-rows:auto auto;column-gap:clamp(40px,5vw,90px);row-gap:clamp(40px,6vh,70px);align-items:center}
  .bd-sys-lead{grid-column:1;grid-row:1;align-self:end}
  .bd-sys-q{grid-column:1;grid-row:2;align-self:start;max-width:22ch}
  .bd-sys-fig{grid-column:2;grid-row:1/3;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .bd-sys-fig img{transform:scale(1.28);transform-origin:60% 50%}
  .bd-sys-fig ol{margin-left:-4%;position:relative;z-index:1}
}
@media(max-width:1000px){
  .bd-sys-fig{grid-template-columns:minmax(0,1fr)}
  .bd-sys-fig img{width:min(92%,460px);margin:0 auto;transform:scale(1.2)}
  .bd-sys-fig ol{margin:clamp(10px,4vw,30px) 0 0}
}
/* person headline larger, 28 Sept */
.sc-her h2{font-size:clamp(2.6rem,1rem + 3.6vw,5rem)!important;line-height:.98;max-width:12ch;margin-left:auto;margin-right:auto}
.sc-her-txt > p:not(.small){font-size:var(--fs-body);max-width:40ch;margin-left:auto;margin-right:auto}

/* ===== Elite pass, 28 Sept ===== */
/* WhatsApp button waits until the visitor is past the hero, on every screen */
html body.wa-hold .wa-btn{opacity:0;transform:translateY(12px);pointer-events:none}
/* footer on the same side margin as the rest of the page */
footer > *{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
/* world: room below the city grid, larger statement */
.sc-world{padding-bottom:var(--sp-m)}
.sc-world .said{font-size:var(--fs-h1)!important;line-height:1}
/* fit: follow-up line centred on the page */
.sc-fit .fits-next{max-width:none;width:100%;margin-left:0;margin-right:0}
.sc-fits li{align-items:baseline}
/* voices: the quote carries the dark screen */
.sc-voice .ts-q p{font-size:var(--fs-h3)!important;line-height:1.35;max-width:28ch;margin-left:auto;margin-right:auto}
.sc-voice .ts-av{width:56px;height:56px}
/* shell theory: bigger title, the three parts as quiet ruled rows */
.sc-shell-title{font-size:var(--fs-h1)!important}
.sc-trio{gap:0;max-width:44ch}
.sc-trio > div{padding:22px 0;border-top:1px solid var(--line)}
.sc-trio > div:last-child{border-bottom:1px solid var(--line)}
/* thinking: heading on one line, quiet text links instead of four black blocks */
.rw-head h2{max-width:none}
.rw-btn{background:none!important;color:var(--ink)!important;padding:0 0 5px!important;border-bottom:1px solid var(--stone);margin-top:16px}
.rw-btn::after{content:" \2192"}
.rw-card:hover .rw-btn{color:var(--accent)!important;border-color:var(--accent)}
.sc-fit .fits-next{margin-top:var(--sp-s)!important}.sc-fit{padding-bottom:var(--sp-s)}
.sc-voice .ts-q p{font-size:clamp(1.375rem,1rem + 1.5vw,2.4rem)!important;max-width:30ch}
.rw-head,.rw-head h2{max-width:none!important;width:100%}
@media(max-width:480px){footer .ft-cols{grid-template-columns:1fr 1fr!important;row-gap:36px}}
/* work band: four cases */
.bd-work{grid-template-columns:1.1fr repeat(4,minmax(0,1fr))}
.bd-card:nth-of-type(4) .im{background-position:center 62%}
@media(max-width:1200px){.bd-work{grid-template-columns:1fr 1fr}.bd-work-lead{grid-column:1/-1}.bd-card{min-height:360px}}
@media(max-width:600px){.bd-work{grid-template-columns:1fr}}
.bd-work-lead .bd-link{align-self:flex-start}