:root{
  --paper:#f4f2ed;--ink:#11110f;--muted:#6c6b66;--signal:#eaff00;--line:rgba(17,17,15,.24);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;--sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;--pad:clamp(18px,3vw,48px);--top:48px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}::selection{background:var(--signal);color:var(--ink)}
.topbar{height:var(--top);position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);border-bottom:1px solid var(--ink);background:rgba(244,242,237,.94);backdrop-filter:blur(8px);font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase}
.brand{font-family:var(--sans);font-weight:700;font-size:13px;text-transform:none;letter-spacing:-.025em}.topbar .center{color:var(--muted)}.topbar nav{display:flex;justify-content:flex-end;gap:18px}.topbar a:hover{opacity:.5}
.page-hero{min-height:76svh;padding:calc(var(--top) + var(--pad)) var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--ink)}
.eyebrow,.meta{font-family:var(--mono);font-size:9px;letter-spacing:.065em;text-transform:uppercase;color:var(--muted)}
.page-hero h1{font-family:var(--display);font-size:clamp(64px,11vw,180px);line-height:.79;letter-spacing:-.06em;text-transform:uppercase;margin:40px 0 0;max-width:10ch}
.page-hero .dek{font-size:clamp(18px,1.8vw,28px);line-height:1.18;letter-spacing:-.03em;max-width:42ch;margin:24px 0 0}
.hero-foot{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;border-top:1px solid var(--ink);padding-top:18px;align-items:end}
.hero-foot p{margin:0;font-size:14px;line-height:1.45;max-width:54ch}
.section{padding:clamp(70px,9vw,136px) var(--pad);border-bottom:1px solid var(--ink)}
.section-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:var(--pad);margin-bottom:50px}.section-head h2{margin:0;font-family:var(--display);font-size:clamp(48px,6.5vw,102px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase;max-width:10ch}
.footer-cta{min-height:65svh;background:var(--ink);color:var(--paper);padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.footer-cta h2{font-family:var(--display);font-size:clamp(64px,10vw,160px);line-height:.78;letter-spacing:-.06em;text-transform:uppercase;margin:0;max-width:11ch}.footer-cta .footline{display:flex;justify-content:space-between;border-top:1px solid rgba(244,242,237,.5);padding-top:16px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em}

/* PROJECT INDEX */
.project-list{border-top:1px solid var(--ink)}
.project-row{display:grid;grid-template-columns:80px 1fr 1.4fr 140px;gap:20px;align-items:center;padding:22px var(--pad);border-bottom:1px solid var(--ink);transition:.2s ease}
.project-row:hover{background:var(--ink);color:var(--paper);padding-left:calc(var(--pad) + 10px)}
.project-row .num,.project-row .type{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.055em}.project-row h2{font-family:var(--display);font-size:clamp(26px,3vw,46px);letter-spacing:-.035em;line-height:.95;margin:0}.project-row p{margin:0;font-size:14px;line-height:1.4;max-width:48ch}.project-row .year{text-align:right;font-family:var(--mono);font-size:10px}

/* PROJECT PAGE */
.case-hero{min-height:94svh;padding:calc(var(--top) + var(--pad)) var(--pad) var(--pad);display:grid;grid-template-rows:auto 1fr auto;border-bottom:1px solid var(--ink);position:relative;overflow:hidden}
.case-hero:after{content:"";position:absolute;width:clamp(110px,14vw,230px);aspect-ratio:1;border-radius:50%;background:var(--accent);right:6vw;top:28%;z-index:-1}
.case-title{align-self:center;margin:0;max-width:12ch;font-family:var(--display);font-size:clamp(58px,9.3vw,150px);line-height:.83;letter-spacing:-.057em;text-transform:uppercase}
.case-title .outline{-webkit-text-stroke:1.2px var(--ink);color:transparent}
.case-meta{display:flex;gap:12px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.case-bottom{border-top:1px solid var(--ink);padding-top:18px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px}.case-bottom .lead{font-size:clamp(18px,1.7vw,26px);letter-spacing:-.03em;line-height:1.16;margin:0;max-width:38ch}.case-bottom .role{font-size:13px;line-height:1.45;margin:0}
.stage{height:min(86svh,920px);border-bottom:1px solid var(--ink);position:relative;overflow:hidden;background:var(--accent);display:flex;align-items:center;justify-content:center}
.stage .word{font-family:var(--display);font-size:clamp(76px,16vw,260px);font-weight:900;line-height:.68;letter-spacing:-.07em;text-transform:uppercase;color:var(--ink);mix-blend-mode:multiply;opacity:.85;text-align:center}
.stage .badge{position:absolute;left:var(--pad);bottom:var(--pad);padding:8px 10px 7px;border:1px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:9px;letter-spacing:.055em;text-transform:uppercase}
.stage.real-board{height:auto;min-height:0;display:block;background:#111}
.stage.real-board img{display:block;width:100%;height:auto}
.stage.collection:before{content:"";position:absolute;width:42%;height:65%;background:conic-gradient(from 30deg,var(--accent2),#ff5b85,#755cff,#62d6a2,var(--accent2));clip-path:polygon(50% 0,68% 22%,100% 28%,80% 52%,94% 80%,60% 74%,48% 100%,34% 73%,0 84%,18% 52%,5% 28%,35% 22%);transform:rotate(-8deg)}
.stage.experience{background:#1727d9}.stage.experience:before{content:"";position:absolute;inset:-20%;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:48px 48px;transform:perspective(600px) rotateX(58deg) rotateZ(-10deg)}.stage.experience .word{color:#fff;mix-blend-mode:normal}
.stage.exhibition{background:var(--paper)}.stage.exhibition:before{content:"";position:absolute;inset:10%;background:linear-gradient(90deg,#3c5fff 0 31%,#f57eb4 31% 65%,#34b77b 65%);clip-path:polygon(0 18%,27% 4%,34% 28%,57% 14%,65% 42%,100% 23%,95% 78%,70% 65%,59% 88%,30% 75%,4% 94%)}.stage.exhibition .word{z-index:2;color:#111;opacity:.95}
.stage.brand{background:var(--accent)}.stage.brand .word{color:var(--accent2);mix-blend-mode:normal}
.stage.game{background:#0d4531}.stage.game:before{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 56px rgba(255,255,255,.03)}.stage.game .word{color:#fff;mix-blend-mode:normal}
.stage.thriller{background:#0b0f0d}.stage.thriller:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(184,255,36,.1) 7px 8px)}.stage.thriller .word{color:var(--accent);mix-blend-mode:normal}
.stage.fiction{background:#111}.stage.fiction:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,59,48,.55),transparent 38%)}.stage.fiction .word{color:#fff;mix-blend-mode:normal}
.stage.show{background:#1c102f}.stage.show:before{content:"";position:absolute;width:45%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--accent2),var(--accent),transparent 70%);filter:blur(18px)}.stage.show .word{color:#fff;mix-blend-mode:normal;z-index:2}
.stage.festival{background:var(--accent2)}.stage.festival:before{content:"";position:absolute;left:15%;top:12%;width:32%;height:76%;background:var(--accent);transform:rotate(-8deg)}.stage.festival .word{z-index:2}
.stage.campaign{background:var(--paper)}.stage.campaign:before{content:"";position:absolute;inset:12% 8%;border:clamp(16px,4vw,60px) solid var(--accent);transform:rotate(-3deg)}.stage.campaign .word{z-index:2}
.stage.event{background:#1735a5}.stage.event:before{content:"";position:absolute;width:56%;aspect-ratio:1;border:clamp(16px,3vw,45px) solid var(--accent2);border-radius:50%}.stage.event .word{z-index:2;color:#fff;mix-blend-mode:normal}
.case-chapter{display:grid;grid-template-columns:minmax(200px,.5fr) 1.5fr;border-bottom:1px solid var(--ink);min-height:62svh}
.case-index{padding:var(--pad);border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.case-index b{font-family:var(--display);font-size:clamp(52px,6vw,100px);letter-spacing:-.055em;line-height:.8}
.case-body{padding:clamp(58px,8vw,116px) var(--pad);display:grid;grid-template-columns:1.05fr .75fr;gap:clamp(30px,6vw,90px);align-content:center}.case-body h2{margin:0;font-family:var(--display);font-size:clamp(46px,5.8vw,94px);line-height:.87;letter-spacing:-.049em;text-transform:uppercase;max-width:11ch}.case-body p{margin:0;align-self:end;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:41ch}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}.step{min-height:300px;padding:var(--pad);border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}.step:last-child{border-right:0}.step span{font-family:var(--mono);font-size:9px;text-transform:uppercase}.step h3{font-family:var(--display);font-size:clamp(28px,3vw,46px);letter-spacing:-.035em;line-height:.95;margin:0;max-width:10ch}
.proof{padding:clamp(70px,9vw,140px) var(--pad);background:var(--accent);border-bottom:1px solid var(--ink)}.proof span{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.proof h2{font-family:var(--display);font-size:clamp(54px,8vw,130px);line-height:.82;letter-spacing:-.057em;text-transform:uppercase;margin:20px 0 0;max-width:12ch}
.next-project{min-height:55svh;background:var(--ink);color:var(--paper);padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}.next-project h2{font-family:var(--display);font-size:clamp(60px,9vw,145px);letter-spacing:-.06em;line-height:.8;text-transform:uppercase;margin:0}.next-project .top,.next-project .bottom{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.next-project .bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(244,242,237,.45);padding-top:14px}

/* Wakam / RATP real images */
.image-strip{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}.image-strip figure{margin:0;min-height:52svh;overflow:hidden;border-right:1px solid var(--ink)}.image-strip figure:last-child{border-right:0}.image-strip img{width:100%;height:100%;object-fit:cover}

/* EXPERTISE */
.service-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.service{min-height:360px;padding:var(--pad);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}.service h2{font-family:var(--display);font-size:clamp(40px,5vw,78px);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;margin:0;max-width:9ch}.service p{max-width:42ch;font-size:16px;line-height:1.45}.service ul{list-style:none;padding:0;margin:20px 0 0;font-family:var(--mono);font-size:9px;text-transform:uppercase;line-height:1.9}

/* JOURNAL */
.article-list{border-top:1px solid var(--ink)}.article-row{display:grid;grid-template-columns:70px 150px 1fr 70px;gap:20px;align-items:center;padding:22px var(--pad);border-bottom:1px solid var(--ink);transition:.2s}.article-row:hover{background:var(--ink);color:var(--paper);padding-left:calc(var(--pad) + 10px)}.article-row .n,.article-row time,.article-row .min{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.article-row h2{font-family:var(--display);font-size:clamp(28px,3.5vw,54px);line-height:.94;letter-spacing:-.04em;margin:0}
.article-hero{padding:calc(var(--top) + 70px) var(--pad) 70px;border-bottom:1px solid var(--ink)}.article-hero .back{font-family:var(--mono);font-size:9px;text-transform:uppercase}.article-hero h1{font-family:var(--display);font-size:clamp(62px,10vw,160px);line-height:.8;letter-spacing:-.06em;text-transform:uppercase;max-width:10ch;margin:70px 0 30px}.article-hero .intro{font-size:clamp(20px,2vw,30px);line-height:1.23;letter-spacing:-.03em;max-width:38ch}.article-meta{display:flex;gap:16px;margin-top:40px;font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--muted)}
.article-body{display:grid;grid-template-columns:.55fr 1fr .45fr;padding:clamp(60px,8vw,120px) var(--pad);border-bottom:1px solid var(--ink)}.article-body .side{font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--muted)}.prose{max-width:720px}.prose p{font-size:clamp(19px,1.7vw,25px);line-height:1.55;letter-spacing:-.018em;margin:0 0 1.5em}.prose p:first-child::first-letter{font-family:var(--display);font-weight:900;font-size:4.2em;line-height:.75;float:left;margin:.07em .08em 0 0}

/* ABOUT / PERSONAL / AILLEURS */
.big-copy{font-family:var(--display);font-size:clamp(40px,5.8vw,92px);line-height:.92;letter-spacing:-.048em;text-transform:uppercase;max-width:14ch;margin:0}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.fact{min-height:180px;padding:20px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}.fact dt{font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--muted)}.fact dd{font-family:var(--display);font-size:clamp(26px,3vw,44px);letter-spacing:-.04em;margin:38px 0 0}
.personal-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.personal{min-height:530px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column}.personal-art{flex:1;min-height:300px;position:relative;overflow:hidden}.personal:nth-child(1) .personal-art{background:#111}.personal:nth-child(1) .personal-art:before{content:"DOG / LAND";position:absolute;font-family:var(--display);font-size:70px;font-weight:900;color:#fff;left:20px;bottom:20px;line-height:.75}.personal:nth-child(2) .personal-art{background:var(--paper)}.personal:nth-child(2) .personal-art:before{content:"WORDS / PAPER / VOID";position:absolute;inset:18%;border:1px solid #111;padding:20px;font-family:var(--mono);font-size:12px}.personal:nth-child(3) .personal-art{background:#f5a5c2}.personal:nth-child(3) .personal-art:before{content:"";position:absolute;left:12%;right:12%;bottom:18%;height:38%;background:#79c6e7;border-radius:50% 50% 8% 8%}.personal-copy{padding:22px;min-height:190px;border-top:1px solid var(--ink)}.personal-copy h2{font-family:var(--display);font-size:38px;letter-spacing:-.04em;margin:0 0 10px}.personal-copy p{font-size:14px;line-height:1.45;margin:0}
.away-list{border-top:1px solid var(--ink)}.away{display:grid;grid-template-columns:90px 1fr 180px;gap:20px;padding:28px 0;border-bottom:1px solid var(--ink);align-items:center}.away .year,.away .kind{font-family:var(--mono);font-size:9px;text-transform:uppercase}.away h2{font-family:var(--display);font-size:clamp(30px,4vw,58px);letter-spacing:-.04em;margin:0}

@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto}.topbar .center{display:none}
  .page-hero{min-height:68svh}.hero-foot{grid-template-columns:1fr}
  .project-row{grid-template-columns:55px 1fr 90px}.project-row p{display:none}
  .case-chapter{grid-template-columns:1fr}.case-index{min-height:100px;border-right:0;border-bottom:1px solid var(--ink);flex-direction:row;align-items:end}.case-body{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr}.step{min-height:210px;border-right:0;border-bottom:1px solid var(--ink)}.step:last-child{border-bottom:0}
  .service-grid,.personal-grid{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr 1fr}
  .article-row{grid-template-columns:50px 110px 1fr}.article-row .min{display:none}
  .article-body{grid-template-columns:120px 1fr}.article-body .right{display:none}
}
@media(max-width:600px){
  .topbar nav a:first-child{display:none}
  .page-hero h1{font-size:15vw}.project-row{grid-template-columns:44px 1fr 55px;padding-top:18px;padding-bottom:18px}.project-row h2{font-size:26px}.project-row .type{display:none}
  .case-title{font-size:13vw}.case-bottom{grid-template-columns:1fr}.stage{height:64svh}.stage .word{font-size:19vw}
  .service-grid,.personal-grid,.facts{grid-template-columns:1fr}
  .article-row{grid-template-columns:36px 1fr}.article-row time{display:none}.article-row h2{font-size:27px}
  .article-hero h1{font-size:14vw}.article-body{grid-template-columns:1fr}.article-body .side{margin-bottom:30px}
  .away{grid-template-columns:60px 1fr}.away .kind{display:none}.image-strip{grid-template-columns:1fr}.image-strip figure{min-height:42svh;border-right:0;border-bottom:1px solid var(--ink)}
}


/* ─────────────────────────────────────────────────────────────
   FINAL — production polish
   ───────────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
}
.footer-cta:focus-visible,.next-project:focus-visible{
  outline-color:var(--paper);
  outline-offset:-6px;
}
.skip-link{
  position:fixed;left:12px;top:10px;z-index:1000;
  transform:translateY(-160%);
  background:var(--signal);color:var(--ink);
  border:1px solid var(--ink);
  padding:8px 10px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  transition:transform .15s ease;
}
.skip-link:focus{transform:translateY(0)}
img{background:#ece9e2}
a,button{-webkit-tap-highlight-color:transparent}
body{min-width:320px}
.case-hero,.page-hero{isolation:isolate}
.case-hero:after{pointer-events:none}
.stage{isolation:isolate}
.stage .word{position:relative;z-index:3}
.stage .badge{z-index:4}
.project-row,.article-row,.away,.personal,.footer-cta,.next-project{
  text-underline-offset:3px;
}
.project-row:hover,.article-row:hover{will-change:padding-left}
.article-body blockquote{
  margin:2.2em 0;padding:0 0 0 22px;border-left:3px solid var(--ink);
  font-size:1.16em;line-height:1.45;
}
.prose h2,.prose h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.04em;
  line-height:.95;margin:2.1em 0 .7em;
}
.prose h2{font-size:clamp(34px,4vw,58px)}
.prose h3{font-size:clamp(26px,3vw,40px)}
.prose ul{padding-left:1.15em;font-size:clamp(18px,1.55vw,23px);line-height:1.55}
.production-note{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);max-width:70ch;
}
.case-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--ink);
}
.case-fact{
  min-height:150px;padding:22px var(--pad);
  border-right:1px solid var(--ink);
}
.case-fact:last-child{border-right:0}
.case-fact dt{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:24px;
}
.case-fact dd{
  margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em;
}
@media(max-width:900px){
  .case-facts{grid-template-columns:1fr 1fr}
  .case-fact:nth-child(2){border-right:0}
  .case-fact:nth-child(-n+2){border-bottom:1px solid var(--ink)}
}
@media(max-width:600px){
  .case-facts{grid-template-columns:1fr}
  .case-fact{border-right:0!important;border-bottom:1px solid var(--ink)!important}
  .case-fact:last-child{border-bottom:0!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* HARNESS PASS — case studies: the actual problem and idea become the headings.
   No generic explanatory filler is needed beside them. */
.case-body.case-body-single{
  grid-template-columns:1fr;
}
.case-body.case-body-single h2{
  max-width:14ch;
}
.step p{
  margin:18px 0 0;
  max-width:34ch;
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
}
.source-link{
  display:inline-block;
  margin-top:18px;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:4px;
}
.prose .external-ref{
  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.04em;
}


/* ─────────────────────────────────────────────
   ABOUT V2 — editorial, personal, disciplined
   ───────────────────────────────────────────── */
.about-hero{
  min-height:100svh;
  padding:calc(var(--top) + var(--pad)) var(--pad) var(--pad);
  display:grid;
  grid-template-rows:auto 1fr auto;
  border-bottom:1px solid var(--ink);
  overflow:hidden;
}
.about-kicker{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.about-kicker span:last-child{color:var(--muted)}
.about-statement{
  align-self:center;
  margin:0;
  max-width:12.5ch;
  font-family:var(--display);
  font-size:clamp(58px,9.2vw,150px);
  line-height:.82;
  letter-spacing:-.058em;
  text-transform:uppercase;
}
.about-statement em{
  font-style:normal;
  -webkit-text-stroke:1.2px var(--ink);
  color:transparent;
}
.about-statement .shift{
  display:block;
  padding-left:8vw;
}
.about-bottom{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(28px,6vw,90px);
  align-items:end;
  border-top:1px solid var(--ink);
  padding-top:18px;
}
.about-bottom p{
  margin:0;
  max-width:46ch;
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.28;
  letter-spacing:-.02em;
}
.about-bottom .about-meta{
  font-family:var(--mono);
  font-size:9px;
  line-height:1.65;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

.about-rule{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:var(--pad);
  padding:clamp(50px,7vw,100px) var(--pad);
  border-bottom:1px solid var(--ink);
}
.about-rule-index{
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.about-rule-copy h2{
  margin:0;
  max-width:13ch;
  font-family:var(--display);
  font-size:clamp(44px,6vw,94px);
  line-height:.87;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.about-rule-copy p{
  margin:24px 0 0;
  max-width:48ch;
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.45;
  letter-spacing:-.015em;
}
.about-rule-copy .small{
  margin-top:16px;
  font-size:14px;
  color:var(--muted);
}

.about-work{
  border-bottom:1px solid var(--ink);
}
.about-work-head{
  padding:clamp(72px,9vw,130px) var(--pad) 44px;
  display:grid;
  grid-template-columns:.5fr 1.5fr;
  gap:var(--pad);
}
.about-work-head h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(48px,7vw,108px);
  line-height:.84;
  letter-spacing:-.055em;
  text-transform:uppercase;
  max-width:10ch;
}
.about-work-list{
  border-top:1px solid var(--ink);
}
.about-work-row{
  display:grid;
  grid-template-columns:80px .65fr 1.35fr;
  gap:24px;
  padding:22px var(--pad);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.about-work-row:last-child{border-bottom:0}
.about-work-row .n{
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  color:var(--muted);
}
.about-work-row h3{
  margin:0;
  font-family:var(--display);
  font-size:clamp(26px,3vw,44px);
  line-height:.95;
  letter-spacing:-.04em;
}
.about-work-row p{
  margin:2px 0 0;
  max-width:58ch;
  font-size:15px;
  line-height:1.42;
  color:var(--muted);
}

.about-personal{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:75svh;
  border-bottom:1px solid var(--ink);
}
.about-personal-copy{
  padding:clamp(60px,8vw,120px) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--ink);
}
.about-personal-copy h2{
  margin:20px 0 0;
  font-family:var(--display);
  font-size:clamp(52px,7vw,110px);
  line-height:.82;
  letter-spacing:-.055em;
  text-transform:uppercase;
  max-width:8ch;
}
.about-personal-copy p{
  max-width:42ch;
  margin:34px 0 0;
  font-size:17px;
  line-height:1.45;
}
.about-personal-links{
  margin-top:50px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
  text-transform:uppercase;
}
.about-personal-links a{text-decoration:underline;text-underline-offset:4px}
.about-dog{
  position:relative;
  overflow:hidden;
  background:#111;
}
.about-dog:before{
  content:"DOG";
  position:absolute;
  left:-2vw;
  top:3vw;
  font-family:var(--display);
  font-size:clamp(100px,18vw,310px);
  font-weight:900;
  line-height:.7;
  letter-spacing:-.08em;
  color:var(--paper);
}
.about-dog:after{
  content:"LAND.";
  position:absolute;
  right:-1vw;
  bottom:4vw;
  font-family:var(--display);
  font-size:clamp(85px,15vw,260px);
  font-weight:900;
  line-height:.7;
  letter-spacing:-.08em;
  -webkit-text-stroke:1.3px var(--paper);
  color:transparent;
}

.about-side-note{
  padding:clamp(70px,9vw,140px) var(--pad);
  border-bottom:1px solid var(--ink);
  display:grid;
  grid-template-columns:.45fr 1.55fr;
  gap:var(--pad);
}
.about-side-note blockquote{
  margin:0;
  max-width:14ch;
  font-family:var(--display);
  font-size:clamp(42px,5.8vw,90px);
  line-height:.9;
  letter-spacing:-.048em;
  text-transform:uppercase;
}
.about-side-note .note{
  align-self:end;
  max-width:48ch;
  font-size:17px;
  line-height:1.5;
}

@media(max-width:800px){
  .about-statement .shift{padding-left:0}
  .about-bottom{grid-template-columns:1fr}
  .about-rule{grid-template-columns:55px 1fr}
  .about-work-head{grid-template-columns:1fr}
  .about-work-row{grid-template-columns:42px 1fr}
  .about-work-row p{grid-column:2}
  .about-personal{grid-template-columns:1fr}
  .about-personal-copy{border-right:0;border-bottom:1px solid var(--ink);min-height:62svh}
  .about-dog{min-height:58svh}
  .about-side-note{grid-template-columns:1fr}
}
@media(max-width:520px){
  .about-hero{min-height:92svh}
  .about-statement{font-size:14vw}
  .about-kicker span:last-child{display:none}
  .about-rule{grid-template-columns:1fr;gap:28px}
  .about-work-row{grid-template-columns:32px 1fr;gap:12px}
}


/* ─────────────────────────────────────────────
   SITES V4 — real project media
   ───────────────────────────────────────────── */
.case-real-media{
  margin:0;
  border-bottom:1px solid var(--ink);
  background:#111;
  overflow:hidden;
  position:relative;
}
.case-real-media.board{
  background:#e9e6df;
  padding:clamp(18px,3vw,46px);
}
.case-real-media.board img{
  width:100%;
  height:auto;
  max-height:90svh;
  object-fit:contain;
  margin:auto;
}
.case-real-media.cover{
  min-height:66svh;
  height:min(86svh,900px);
}
.case-real-media.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-real-media.portrait{
  background:#111;
  min-height:78svh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:clamp(20px,4vw,60px);
}
.case-real-media.portrait img{
  height:min(82svh,900px);
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.case-real-media figcaption{
  position:absolute;
  z-index:3;
  left:var(--pad);
  bottom:var(--pad);
  background:var(--paper);
  border:1px solid var(--ink);
  padding:7px 9px 6px;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.2;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}
.case-media-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--ink);
  background:var(--paper);
}
.case-media-gallery figure{
  margin:0;
  min-height:55svh;
  padding:clamp(18px,3vw,44px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--ink);
  overflow:hidden;
}
.case-media-gallery figure:last-child{border-right:0}
.case-media-gallery img{
  max-width:100%;
  max-height:75svh;
  object-fit:contain;
}
.case-video-block{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(60px,8vw,120px) var(--pad);
  border-bottom:1px solid var(--ink);
}
.case-video-head{
  display:grid;
  grid-template-columns:.5fr 1.5fr;
  gap:var(--pad);
  margin-bottom:38px;
}
.case-video-head h2{
  font-family:var(--display);
  text-transform:uppercase;
  margin:0;
  max-width:10ch;
  font-size:clamp(42px,6vw,90px);
  line-height:.87;
  letter-spacing:-.05em;
}
.case-video-frame{
  aspect-ratio:16/9;
  border:1px solid rgba(244,242,237,.6);
  background:#000;
}
.case-video-frame iframe{width:100%;height:100%;border:0;display:block}
.asset-source-note{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
@media(max-width:700px){
  .case-media-gallery{grid-template-columns:1fr}
  .case-media-gallery figure{border-right:0;border-bottom:1px solid var(--ink);min-height:auto}
  .case-media-gallery figure:last-child{border-bottom:0}
  .case-video-head{grid-template-columns:1fr}
}

/* Home: real media must fill the same stage as graphic interludes. */
.project-visual.real-project-media{
  background:#111;
}
.project-visual.real-project-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-visual.real-project-media.contain{
  background:#e9e6df;
  padding:clamp(14px,2vw,30px);
}
.project-visual.real-project-media.contain img{
  object-fit:contain;
  transform:none!important;
}

.project-hover-preview{
  position:fixed;
  z-index:80;
  right:var(--pad);
  top:50%;
  width:min(30vw,460px);
  aspect-ratio:16/10;
  transform:translateY(-50%) scale(.96);
  opacity:0;
  pointer-events:none;
  background:#111;
  border:1px solid var(--ink);
  overflow:hidden;
  transition:opacity .16s ease, transform .16s ease;
}
.project-hover-preview.visible{opacity:1;transform:translateY(-50%) scale(1)}
.project-hover-preview img{width:100%;height:100%;object-fit:cover;background:#111}
@media(max-width:1000px){.project-hover-preview{display:none}}

/* QA V5 — mobile navigation and dark-block contrast */
@media(max-width:600px){
  .topbar{grid-template-columns:1fr auto;gap:12px}
  .topbar .center{display:none}
  .topbar nav{gap:10px}
  .topbar nav a:first-child{display:block}
}
.case-video-block .meta{color:#c4c1ba}

/* SITES port — keep editorial breaks inside the mobile viewport. */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:600px){
  .case-title{font-size:12.6vw}
}