:root{
  --quiet:#f4f6f3;
  --quiet-2:#e5e9e5;
  --ink:#0c1418;
  --ink-soft:#526067;
  --world:#5059ff;
  --signal:#ff4b36;
  --mist:#cbd5df;
  --white:#fff;
  --sans:"Manrope",Arial,sans-serif;
  --serif:"Bodoni Moda",Didot,serif;
  --mono:"Fragment Mono",ui-monospace,monospace;
  --pad:clamp(20px,3.4vw,58px);
  --rule:rgba(12,20,24,.22);
  --seam-n:38;
  --seam:calc(var(--seam-n) * 1%);
  --seam-x:calc(var(--seam-n) * 1vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--quiet)}
body{font-family:var(--sans);color:var(--ink);background:var(--quiet);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::selection{background:var(--world);color:#fff}
button,input,a{font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{color:inherit}
.skip{position:fixed;z-index:100;left:12px;top:-80px;padding:10px 14px;background:#fff;color:#000}
.skip:focus{top:12px}
.eyebrow{font:11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.wrap{padding-inline:var(--pad)}

/* Navigation is intentionally orthodox: the disruption belongs to the thesis. */
.nav{
  position:absolute;z-index:20;top:0;left:0;right:0;height:76px;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--ink);
}
.nav a,.nav button{color:#fff}
.wordmark{display:block;font-size:clamp(13px,1.35vw,18px);width:calc(9.0556em + 12px);max-width:100%;padding:0;margin:0;background:none}
.wordmark img{display:block;width:100%;height:auto}
.nav-center{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85)}
/* On the home page the bar floats over both sides of the seam; the glow keeps
   the links legible when the visitor pulls the light side under them. */
.nav:not(.solid) .nav-links a{text-shadow:0 1px 8px rgba(0,0,0,.85)}
.nav-links{justify-self:end;display:flex;gap:18px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
/* The three offerings carry the menu; work and contact are secondary and
   step aside first when the bar gets tight. */
.nav-links a[aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:3px}
/* 11px of glyph is not a touch target. Pad the hit area, pull the margin back
   so the bar keeps its height. */
.nav-links a{padding-block:16px;margin-block:-16px}
.nav a:focus-visible,.nav button:focus-visible,.link:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* HERO — two exact layers. The visitor chooses how much world enters. */
/* The story world fills the hero on every screen. */
.hero{position:relative;isolation:isolate;background:#111;color:#fff}
.hero-world{position:relative;isolation:isolate}
.hero-world::before{content:"";position:absolute;z-index:-2;inset:0;background:url("../images/hero-threshold.jpg") 58% center/cover;filter:saturate(1.14) contrast(1.02) brightness(1.06)}
.hero-world::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.66),rgba(14,10,7,0) 30%,rgba(12,9,7,.3) 62%,rgba(10,8,7,.82))}
.hero-copy{position:relative;min-height:100svh;padding:128px var(--pad) 58px;display:flex;flex-direction:column;gap:30px}
.hero-kicker{max-width:30ch;margin:0;color:#fff;font:500 17px/1.5 var(--sans)}
.hero-title{margin-top:clamp(70px,15svh,150px);font-weight:600;font-size:clamp(54px,15vw,104px);line-height:.94;letter-spacing:-.065em;color:#fff}
.hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:auto}
.hero-thesis{max-width:34ch;margin:0;font-size:17px;line-height:1.55;letter-spacing:-.015em;color:#fff}
.hero-cta{font-size:16px;font-weight:600;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.6);color:#fff}
.hero-cta span{margin-left:24px}
.hero-cta:focus-visible{outline:2px solid #fff;outline-offset:6px}
@media(min-width:821px){
  .hero-copy{min-height:max(760px,100svh);display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto 1fr;column-gap:8vw;row-gap:80px;padding-bottom:80px}
  .hero-title{grid-column:1;grid-row:2;align-self:end;margin:0;font-size:clamp(96px,10.5vw,170px)}
  .hero-foot{grid-column:2;grid-row:2;align-self:end;margin:0 0 8px}
  .hero-thesis{font-size:clamp(18px,1.5vw,23px)}
  .hero-kicker{font-size:19px}
}

/* A generous manifesto. The grid is allowed to breathe. */
.manifesto{background:var(--quiet-2);min-height:96svh;padding:clamp(120px,17vw,260px) var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px;border-bottom:1px solid var(--rule)}
.manifesto .eyebrow{grid-column:1/3;color:var(--ink-soft);padding-top:11px}
.manifesto h2{grid-column:4/12;font-size:clamp(45px,7.4vw,116px);line-height:.96;letter-spacing:-.065em;font-weight:500}
.manifesto h2 em{font-family:var(--serif);font-weight:400}
.manifesto p{grid-column:8/12;margin-top:54px;font-size:clamp(16px,1.4vw,21px);line-height:1.55;max-width:38ch;color:var(--ink-soft)}

.practice{border-bottom:1px solid var(--rule)}
.practice-head{padding:30px var(--pad);display:grid;grid-template-columns:1fr 3fr;gap:20px;border-bottom:1px solid var(--rule)}
.practice-head h2{font-size:clamp(26px,3vw,48px);font-weight:500;letter-spacing:-.045em}
.practice-list{list-style:none}
.practice-row{position:relative;border-bottom:1px solid var(--rule)}
.practice-row:last-child{border-bottom:0}
/* Each door is a seam you cross in one move: the row wipes to ink under the
   cursor, then hands the visitor to that offering's own page. */
.practice-enter{position:relative;display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;width:100%;text-align:left;padding:34px var(--pad);overflow:hidden;transition:color .35s ease}
.practice-enter::before{content:"";position:absolute;inset:0;translate:-101% 0;background:var(--ink);transition:translate .55s cubic-bezier(.2,.8,.2,1);z-index:0}
.practice-enter:hover,.practice-enter:focus-visible{color:#fff}
.practice-enter:hover::before,.practice-enter:focus-visible::before{translate:0}
.practice-enter:focus-visible{outline:2px solid var(--world);outline-offset:-2px}
.practice-enter>*{position:relative;z-index:1}
.practice-no{font:11px var(--mono);letter-spacing:.08em}
.practice-enter h3{font-size:clamp(33px,5.2vw,78px);line-height:.9;font-weight:500;letter-spacing:-.06em}
.practice-enter h3 em{font-family:var(--serif);font-weight:400}
.practice-copy{align-self:end;max-width:32ch;font-size:13px;line-height:1.55}
.practice-cue{position:absolute;right:var(--pad);top:36px;font:9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;z-index:1}
/* CASES — photographs are treated as breaches, not cards. */
.cases{background:var(--ink);color:#fff;padding:clamp(110px,14vw,210px) var(--pad)}
.cases-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:end;margin-bottom:80px}
.cases-head h2{grid-column:2;font-size:clamp(48px,7vw,105px);line-height:.9;letter-spacing:-.07em;font-weight:500}
.cases-head p{grid-column:4;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
/* The four cases are the proof; this is the practice they were cut from.
   Set on the same dark ground, quieter than a case and louder than a footnote. */
.cases-foot{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;
  padding-top:clamp(52px,6vw,86px);border-top:1px solid rgba(255,255,255,.28)}
.cases-foot h3{grid-column:2/4;font-size:clamp(30px,4vw,58px);line-height:.98;letter-spacing:-.055em;font-weight:500}
.cases-foot h3 em{font-family:var(--serif);font-weight:400;font-style:italic}
.cases-foot p{grid-column:2/4;margin-top:26px;font-size:clamp(14px,1.2vw,17px);line-height:1.65;color:rgba(255,255,255,.68);max-width:62ch}
.cases-foot p em{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.92)}
.cases-foot p + p{margin-top:20px}

.case{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:20px;min-height:80vh;align-items:center;margin-bottom:clamp(110px,16vw,220px)}
.case:last-child{margin-bottom:0}
.case-image{position:relative;grid-column:1/9;aspect-ratio:16/10;overflow:hidden;background:#1b252b}
.case:nth-child(even) .case-image{grid-column:5/13;grid-row:1}
.case-image img{height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:scale 1.2s cubic-bezier(.2,.75,.2,1),filter .5s ease}
.case:hover img{scale:1.025;filter:saturate(1) contrast(1)}
.case-image::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.case-data{grid-column:9/13;align-self:end;padding:0 0 8%;position:relative;z-index:2}
.case:nth-child(even) .case-data{grid-column:1/5;grid-row:1}
.case-data .eyebrow{color:rgba(255,255,255,.52);margin-bottom:16px}
.case-data h3{font-size:clamp(50px,7vw,104px);font-weight:500;line-height:.82;letter-spacing:-.075em;margin-left:-18%;margin-bottom:28px}
.case:nth-child(even) .case-data h3{margin-left:0;margin-right:-32%;position:relative}
.case-data h3 em{font-family:var(--serif);font-weight:400}
.case-data p{font-size:14px;line-height:1.6;max-width:34ch;color:rgba(255,255,255,.72)}
/* The photographer follows the picture: the credit sits on the image, not the page. */
.case-credit{position:absolute;right:10px;bottom:8px;z-index:2;font:9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none}
/* A visible cue, plus a stretched hit area so the whole card leads to the full case. */
.case-cue{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font:11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;padding-block:14px}
.case-cue::after{content:"";position:absolute;inset:0;z-index:3}
.case-cue:hover,.case-cue:focus-visible{color:#fff}
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.26)}
.proof strong{display:block;font:500 clamp(23px,2.6vw,38px)/1 var(--sans);letter-spacing:-.05em;color:#fff}
.proof span{font:9px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55)}

.method{padding:clamp(120px,15vw,220px) var(--pad);border-bottom:1px solid var(--rule)}
.method-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;margin-bottom:100px}
.method-head h2{grid-column:2/4;font-size:clamp(43px,6vw,88px);line-height:.98;letter-spacing:-.06em;font-weight:500}
/* The claim under the heading: the one sentence that answers the assumption
   that participation means a rougher result. */
.method-claim{grid-column:2/4;margin-top:26px;font-size:clamp(17px,1.7vw,25px);line-height:1.4;color:var(--ink-soft);max-width:36ch}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.method-step{min-height:330px;padding:22px 22px 28px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.method-step+.method-step{padding-left:22px}
.method-step:last-child{border-right:0}
.method-step .eyebrow{color:var(--ink-soft)}
.method-step h3{margin:auto 0 24px;font-size:clamp(32px,4.3vw,64px);font-weight:500;letter-spacing:-.06em;line-height:.92}
.method-step p{font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:34ch}
.method-step.threshold{background:var(--world);color:#fff;margin-top:-36px;padding:58px 22px 28px}
.method-step.threshold p,.method-step.threshold .eyebrow{color:rgba(255,255,255,.94)}

/* LEDGER — 25 years of documented crossings between reality and story. */

/* INSTRUMENTS — what holds a seam open. */
.instruments{padding:clamp(100px,13vw,190px) var(--pad);border-bottom:1px solid var(--rule);background:var(--quiet-2)}
.instr-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;margin-bottom:64px}
.instr-head h2{grid-column:2/4;font-size:clamp(40px,5.6vw,84px);line-height:.95;letter-spacing:-.06em;font-weight:500}
.instr-head h2 em{font-family:var(--serif);font-weight:400}
.instr-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
.instr-cell{min-height:200px;padding:18px 20px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column}
.instr-cell .eyebrow{color:var(--ink-soft)}
.instr-cell h3{margin:auto 0 12px;font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.045em;line-height:1}
.instr-cell h3 em{font-family:var(--serif);font-weight:400}
.instr-cell p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);max-width:30ch}

/* Credit lines — used by the team cards on the team page. */
.cred-lines{list-style:none;margin-top:16px}
.cred-lines li{font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);border-top:1px solid var(--rule);padding:7px 0}
.cred-lines b{color:var(--ink);font-weight:400}

.wayout{border-top:1px solid var(--rule)}
.wayout-head{padding:clamp(84px,10vw,150px) var(--pad) clamp(48px,5vw,74px);
  display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px}
.wayout-head .eyebrow{grid-column:1;color:var(--ink-soft)}
.wayout-head h2{grid-column:2/4;font-size:clamp(40px,5.6vw,84px);line-height:.95;letter-spacing:-.06em;font-weight:500}
.wayout-head h2 em{font-family:var(--serif);font-weight:400}
.wayout-head p{grid-column:2/4;margin-top:26px;font-size:clamp(15px,1.35vw,19px);line-height:1.6;color:var(--ink-soft);max-width:58ch}

/* THE WAY OUT — the page ends where the offer begins, so the last thing a
   visitor meets is a door rather than an email address. */
.doors-out{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);background:var(--quiet-2)}
.doors-out a{position:relative;display:block;padding:36px var(--pad) 44px;border-right:1px solid var(--rule);overflow:hidden;transition:color .35s ease}
.doors-out a:last-child{border-right:0}
.doors-out a::before{content:"";position:absolute;inset:0;translate:0 101%;background:var(--ink);transition:translate .5s cubic-bezier(.2,.8,.2,1);z-index:0}
.doors-out a:hover,.doors-out a:focus-visible{color:#fff}
.doors-out a:hover::before,.doors-out a:focus-visible::before{translate:0}
.doors-out a>*{position:relative;z-index:1}
.doors-out .do-no{display:block;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
.doors-out a:hover .do-no,.doors-out a:focus-visible .do-no{color:rgba(255,255,255,.6)}
.doors-out .do-name{display:block;font-size:clamp(26px,3vw,46px);line-height:.98;letter-spacing:-.055em;font-weight:500}
.doors-out .do-name em{font-family:var(--serif);font-weight:400;font-style:italic}
.doors-out .do-cue{display:block;margin-top:22px;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.doors-out a:hover .do-cue,.doors-out a:focus-visible .do-cue{color:#fff}

.contact{min-height:90svh;background:var(--world);color:#fff;padding:var(--pad);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr auto;gap:20px}
.contact .eyebrow{grid-column:1/2}
.contact h2{grid-column:1/5;align-self:center;font-size:clamp(67px,13vw,200px);text-transform:uppercase;line-height:.76;letter-spacing:-.085em;font-weight:600}
.contact h2 em{font-family:var(--serif);font-weight:400;text-transform:none}
.contact-links{grid-column:1/5;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;align-items:end}
.contact-links a{font-size:clamp(15px,1.4vw,21px);border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px}
.contact-links a:hover{border-color:#fff}
.contact-links p{grid-column:4;text-align:right;font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em}

@media(max-width:1080px){
  .nav{grid-template-columns:1fr auto}.nav-center{display:none}
}
@media(max-width:820px){
  .nav-links .nav-extra{display:none}.nav-links{gap:14px}
  .wordmark{font-size:14px}
  .manifesto{grid-template-columns:repeat(4,1fr);min-height:auto}.manifesto .eyebrow{grid-column:1/3}.manifesto h2{grid-column:1/5;margin-top:46px}.manifesto p{grid-column:2/5}
  .practice-head{grid-template-columns:1fr}.practice-enter{grid-template-columns:48px 1fr}.practice-copy{grid-column:2;margin-top:28px}
  .instr-head{grid-template-columns:1fr}.instr-head h2{grid-column:1;margin-top:20px}
  .instr-grid{grid-template-columns:1fr}.instr-cell{min-height:150px}
  .cases-foot{grid-template-columns:1fr}
  .cases-foot h3,.cases-foot p{grid-column:1}
  .cases-head{grid-template-columns:1fr}.cases-head h2,.cases-head p{grid-column:1}.cases-head p{margin-top:24px}
  .case{display:block;min-height:auto}.case-image,.case:nth-child(even) .case-image{aspect-ratio:4/3}.case-data,.case:nth-child(even) .case-data{padding:32px 0 0}.case-data h3,.case:nth-child(even) .case-data h3{margin:0 0 28px;text-shadow:none}
  .method-head{grid-template-columns:1fr}.method-head h2,.method-claim{grid-column:1}.method-grid{grid-template-columns:1fr}.method-step{border-right:0;border-bottom:1px solid var(--rule);min-height:260px;padding:24px 0}.method-step+.method-step{padding-left:0}.method-step.threshold{margin:0 calc(var(--pad)*-1);padding:36px var(--pad)}
  .wayout-head{grid-template-columns:1fr}
  .wayout-head h2,.wayout-head p{grid-column:1}
  .wayout-head h2{margin-top:18px}
  .doors-out{grid-template-columns:1fr}
  .doors-out a{border-right:0;border-bottom:1px solid var(--rule)}
  .doors-out a:last-child{border-bottom:0}
  .contact{grid-template-columns:1fr 1fr}.contact h2,.contact-links{grid-column:1/3}.contact h2{font-size:clamp(64px,21vw,150px)}.contact-links{grid-template-columns:1fr}.contact-links p{grid-column:1;text-align:left;margin-top:32px}
}
@media(max-width:520px){
  :root{--pad:18px;--seam-n:46}
  .nav-links{gap:10px;font-size:10px}
  /* The smallest mono text on the page was 9px. Give it a 10px floor. */
  .proof span,.practice-cue,.cred-lines li{font-size:10px}
  .manifesto h2{font-size:14vw}.manifesto p{grid-column:1/5}
  .practice-enter{padding-block:26px}.practice-enter h3{font-size:12vw}.practice-cue{top:28px}
  .case-data h3,.case:nth-child(even) .case-data h3{font-size:15vw}
  .proof{grid-template-columns:1fr 1fr}
}
/* At 320px the wordmark and the first nav item met with no gap, and Team sat
   flush against the right edge. Tighten the row rather than drop an item. */
/* PARTICIPATORY ART is seventeen characters. Below 430px it and the four
   links no longer share a line at a readable size, so the bar takes two rows
   instead of shrinking the type into the ground. */
@media(max-width:430px){
  .nav{height:auto;padding-block:14px;grid-template-columns:1fr;justify-items:start;row-gap:9px}
  .nav-links{justify-self:start;gap:12px;font-size:10px}
  .wordmark{font-size:15px}
}
@media(max-width:340px){
  .nav-links{gap:9px;letter-spacing:.03em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .practice-enter::before,.case-image img{transition:none}
}