/* ============================================================
   JOAQUÍN — Independent Digital Art Direction & Development
   Design system: paper / ink / vermilion
   Type: Cormorant Garamond (display) · IBM Plex Mono (utility)
   ============================================================ */

:root{
  --paper:#EDE7DB;
  --paper-2:#E7E1D2;
  --paper-3:#F2EDE2;
  --ink:#191512;
  --ink-2:rgba(25,21,18,.66);
  --ink-3:rgba(25,21,18,.42);
  --line:rgba(25,21,18,.16);
  --line-strong:rgba(25,21,18,.34);
  --red:#C8371D;
  --coal:#0D0B09;
  --coal-2:#141210;
  --bone:#EAE3D4;
  --bone-2:rgba(234,227,212,.72);
  --bone-3:rgba(234,227,212,.45);
  --bone-line:rgba(234,227,212,.16);
  --sb:132px;
  --gut:clamp(26px,4.2vw,68px);
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}[data-theme="dark"]{
  --paper:#12100D;
  --paper-2:#181510;
  --paper-3:#1A1712;
  --ink:#E7E0D2;
  --ink-2:rgba(231,224,210,.68);
  --ink-3:rgba(231,224,210,.42);
  --line:rgba(231,224,210,.14);
  --line-strong:rgba(231,224,210,.3);
}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html:focus-within{scroll-behavior:smooth}body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}::selection{background:var(--red);color:var(--paper)}:focus-visible{outline:2px solid var(--red);outline-offset:3px}/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}/* ---------- utility type ---------- */
.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}.k em{font-style:normal;color:var(--ink-3)}.k-red{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red)}/* underline sweep for red links */
.sweep{position:relative;display:inline-flex;align-items:center;gap:10px}.sweep::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}.sweep:hover::after{transform:scaleX(1)}.sweep svg{transition:transform .45s cubic-bezier(.19,1,.22,1)}.sweep:hover svg{transform:translate(3px,-3px)}.sweep.dn:hover svg{transform:translateY(4px)}/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sb);z-index:60;
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:30px 0 26px;
}.brand{padding:0 24px}.brand-bar{width:36px;height:3px;background:var(--red);margin-bottom:15px}.brand-name{font-size:19px;font-weight:600;letter-spacing:.15em}.side-nav{margin-top:92px;display:grid;gap:27px;padding:0 24px 0 38px}.nav-item{position:relative;display:block;font-family:var(--mono);color:var(--ink-2);transition:color .3s}.nav-item .n{display:block;font-size:8.5px;letter-spacing:.24em;color:var(--ink-3);margin-bottom:6px;transition:color .3s}.nav-item .l{font-size:10px;letter-spacing:.26em}.nav-item:hover{color:var(--ink)}.nav-item.active,.nav-item.active .n{color:var(--red)}.nav-item.active::before{content:"";position:absolute;left:-15px;top:1px;width:5px;height:5px;border-radius:50%;background:var(--red)}.copyright-vert{
  position:absolute;left:14px;bottom:120px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--ink-3);
  text-transform:uppercase;white-space:nowrap;
}.side-foot{margin-top:auto;display:flex;gap:14px;padding:0 24px}.icon-btn{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2);border:1px solid transparent;transition:color .3s,border-color .3s}.icon-btn:hover{color:var(--ink);border-color:var(--line)}/* ============================================================
   FIXED CHROME — page counter + dot pager (blend adapts to bg)
   ============================================================ */
.sec-counter{
  position:fixed;top:36px;right:38px;z-index:55;
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:#fff;
  mix-blend-mode:difference;pointer-events:none;
}.pager-dots{
  position:fixed;right:34px;top:50%;transform:translateY(-50%);z-index:55;
  display:grid;gap:15px;mix-blend-mode:difference;
}.pdot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(255,255,255,.85);padding:0;position:relative}.pdot.active{background:#fff}.pdot.active::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,255,255,.55);border-radius:50%}/* ============================================================
   MAIN
   ============================================================ */
.main{margin-left:var(--sb)}.sec{padding:clamp(76px,9vw,132px) var(--gut);border-top:1px solid var(--line);position:relative}.kicker-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(38px,4.4vw,58px)}.arrows{display:flex;gap:6px}.arrow-btn{width:40px;height:30px;display:grid;place-items:center;color:var(--ink-2);transition:color .3s,transform .3s}.arrow-btn:hover{color:var(--red)}.arrow-btn:active{transform:scale(.92)}.sec-title{
  font-size:clamp(46px,5.6vw,86px);line-height:1.02;font-weight:500;
  letter-spacing:.015em;text-transform:uppercase;max-width:15ch;
  margin-bottom:clamp(42px,5vw,66px);
}.sec-title .fs{color:var(--red)}/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:660px;background:var(--coal);overflow:hidden;color:var(--bone)}.hero-img{position:absolute;inset:0}.hero-img img,.hero-img video{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.06)}.hero-img.loaded img,.hero-img.loaded video{animation:heroIn 2.6s cubic-bezier(.19,1,.22,1) forwards}
@keyframes heroIn{to{transform:scale(1)}}.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,9,7,.66) 0%,rgba(10,9,7,.3) 44%,rgba(10,9,7,.05) 72%),
  linear-gradient(0deg,rgba(10,9,7,.4) 0%,rgba(10,9,7,0) 38%)}.hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);max-width:1080px}.hero h1{
  font-size:clamp(54px,7.4vw,120px);line-height:.98;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;color:var(--bone);
}.hero h1 .fs{color:var(--red)}.hero-sub{margin-top:30px;font-size:clamp(19px,1.65vw,25px);font-weight:400;color:var(--bone-2)}.hero-cta{margin-top:46px}/* ============================================================
   MINI-SITE COMPONENT (the live "screenshots")
   ============================================================ */
.mini{
  container-type:inline-size;
  border:1px solid var(--line-strong);
  background:var(--paper-3);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;
}.mini[data-bar="dark"]{background:var(--coal-2);color:var(--bone);border-color:rgba(13,11,9,.7)}[data-theme="dark"] .mini[data-bar="dark"]{border-color:var(--line-strong)}.mini-bar{display:flex;align-items:center;gap:10px;padding:2.6cqw 3cqw;border-bottom:1px solid var(--line);min-height:0}.mini[data-bar="dark"] .mini-bar{border-color:var(--bone-line)}.mini-name{font-family:var(--serif);font-weight:600;font-size:4.2cqw;letter-spacing:.1em;white-space:nowrap}.mini-nav{display:flex;gap:2.6cqw;margin-left:auto;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.14em;color:var(--ink-3);white-space:nowrap;overflow:hidden}.mini[data-bar="dark"] .mini-nav{color:var(--bone-3)}.mini-right{margin-left:2.6cqw;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.12em;white-space:nowrap}.mini-right.pill{background:var(--ink);color:var(--paper);padding:1cqw 1.8cqw}.mini[data-bar="dark"] .mini-right.pill{background:var(--bone);color:var(--coal)}.mini-right.plain{color:var(--ink-3)}.mini[data-bar="dark"] .mini-right.plain{color:var(--bone-3)}.mini-stage{position:relative;flex:1;overflow:hidden;aspect-ratio:16/10}.mini-stage img,.mini-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.19,1,.22,1)}.mini:hover .mini-stage img,.mini:hover .mini-stage video{transform:scale(1.035)}.mini-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,7,.52),rgba(10,9,7,.06) 62%)}.mini-copy{position:absolute;left:4cqw;right:4cqw;bottom:4.5cqw;z-index:2}.mini-copy.top{bottom:auto;top:5cqw}.mini-h{font-family:var(--serif);font-weight:500;font-size:7.6cqw;line-height:1.04;letter-spacing:.03em;text-transform:uppercase;color:var(--bone)}.mini-h.sentence{text-transform:none;letter-spacing:.01em}.mini-sub{margin-top:2cqw;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-2)}.mini-cta{display:inline-block;margin-top:3.4cqw;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.18em;text-transform:uppercase}.mini-cta.ghost{border:1px solid rgba(234,227,212,.6);color:var(--bone);padding:1.5cqw 2.6cqw;background:rgba(13,11,9,.25)}.mini-cta.link{color:var(--bone);border-bottom:1px solid var(--red);padding-bottom:.8cqw}.mini-cta.dash{color:var(--bone-2)}/* split layout: copy pane + image pane */
.mini-stage.split{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/10}.mini-stage.split .pane-copy{position:relative;padding:5cqw 4cqw;display:flex;flex-direction:column;background:inherit}.mini-stage.split .pane-img{position:relative}.mini-stage.split .pane-img img,.mini-stage.split .pane-img video{position:absolute}.mini-stage.split .mini-h{color:currentColor}.mini-stage.split .mini-sub{color:var(--ink-3)}.mini[data-bar="dark"] .mini-stage.split .mini-sub{color:var(--bone-3)}.mini-stage.split .mini-cta.pilld{background:var(--ink);color:var(--paper);padding:1.6cqw 2.6cqw;margin-right:2cqw}.mini[data-bar="dark"] .mini-stage.split .mini-cta.pilld{background:var(--bone);color:var(--coal)}.mini-stage.split .mini-cta.ghost{border-color:var(--line-strong);color:currentColor;background:none}.mini-stage.split .mini-cta.dash{color:var(--ink-2)}.mini[data-bar="dark"] .mini-stage.split .mini-cta.dash{color:var(--bone-2)}.mini-ctas{margin-top:auto;display:flex;flex-wrap:wrap;gap:1cqw}.mini-meta{display:flex;justify-content:space-between;gap:10px;padding:1.8cqw 3cqw;border-top:1px solid var(--bone-line);font-family:var(--mono);font-size:1.8cqw;letter-spacing:.16em;color:var(--bone-2);position:absolute;left:0;right:0;bottom:0;z-index:2}.mini-foot{display:flex;justify-content:space-between;gap:10px;padding:2cqw 3cqw;border-top:1px solid var(--bone-line);font-family:var(--mono);font-size:1.8cqw;letter-spacing:.16em;color:var(--bone-2)}.mini[data-bar="dark"] .mini-foot{background:var(--coal-2)}.mini-foot .fnav{display:flex;gap:2.4cqw;overflow:hidden;white-space:nowrap}/* row under a world card */
.world-row{display:flex;align-items:baseline;gap:16px;margin-top:17px}.w-num{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-3)}.w-name{font-size:27px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.w-cat{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}.w-link{margin-left:auto;color:var(--ink-2);transition:color .3s,transform .3s}.w-link:hover{color:var(--red);transform:translate(2px,-2px)}/* worlds grid */
.worlds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,42px)}.world-card{display:block}/* ============================================================
   PRINCIPLES
   ============================================================ */
.prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,42px);align-items:start}.prin-fig{position:relative;aspect-ratio:10/10.8;overflow:hidden;background:var(--paper-2)}.prin-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}.prin-card:hover .prin-fig img{transform:scale(1.03)}.prin-fig .mini{position:absolute;inset:0;aspect-ratio:auto}.prin-fig .mini .mini-stage{aspect-ratio:auto}.prin-id{margin-top:22px;font-size:23px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}.prin-id .dash{color:var(--ink-3);margin:0 6px}.prin-txt{margin-top:10px;font-size:19px;color:var(--ink-2)}.prin-txt i{font-style:italic}.prin-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}.ev{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--red)}.count{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3)}/* ============================================================
   CASE STUDY
   ============================================================ */
.case{padding:0;border-top:1px solid var(--line)}.case-hero{display:grid;grid-template-columns:1.02fr 1.28fr;min-height:76vh}.case-copy{padding:clamp(64px,7vw,110px) var(--gut);display:flex;flex-direction:column;justify-content:center}.case-copy .k{margin-bottom:26px}.case-copy h2{font-size:clamp(42px,4.6vw,72px);line-height:1.04;font-weight:500;letter-spacing:.02em;text-transform:uppercase;max-width:13ch}.case-copy h2 .fs{color:var(--red)}.case-rule{width:64px;height:1px;background:var(--line-strong);margin:34px 0}.case-lede{font-size:clamp(18px,1.5vw,22px);color:var(--ink-2);max-width:34ch}.case-cta{margin-top:44px}.case-visual{position:relative;overflow:hidden;background:var(--coal)}.case-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.case-visual .k-count{position:absolute;top:34px;right:34px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--bone-2)}.case-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px);padding:clamp(56px,6vw,88px) var(--gut) clamp(40px,5vw,64px)}.col-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-strong);padding-bottom:9px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}.col-sub{margin:12px 0 16px;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}.shot{border:1px solid var(--line-strong);background:var(--paper-3)}.shot-bar{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line)}.shot-name{font-weight:600;font-size:11.5px;letter-spacing:.1em}.shot-nav{display:flex;gap:8px;margin-left:auto;font-family:var(--mono);font-size:6.5px;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap;overflow:hidden}.shot-body{padding:11px}.shot-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}.shot-h{font-size:15px;font-weight:600;letter-spacing:.08em}.shot-filter{font-family:var(--mono);font-size:6.5px;letter-spacing:.14em;color:var(--ink-3)}.plist{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pcell{aspect-ratio:3/4.5;background-size:400% 100%;background-repeat:no-repeat;filter:saturate(.92)}.pcap{margin-top:6px}.pcap .pn{font-family:var(--mono);font-size:5.8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:block}.pcap .pp{font-size:10.5px;color:var(--ink-2)}.col-note{margin-top:14px;font-size:16.5px;color:var(--ink-2)}.strip{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--line-strong)}.scell{aspect-ratio:3/3.4;background-size:400% 100%;background-repeat:no-repeat}.strip svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.spec{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}.spec:last-child{border-bottom:0}.spec .sl{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}.spec .sv{font-size:15.5px;color:var(--ink-2)}.specs{margin-top:16px}.case-next{display:flex;justify-content:flex-end;padding:0 var(--gut) clamp(48px,5vw,72px)}/* ============================================================
   ARCHIVE
   ============================================================ */
.filters{display:flex;gap:clamp(16px,2.4vw,30px);align-items:center}.f{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);transition:color .3s;position:relative;padding-bottom:10px}.f:hover{color:var(--ink)}.f.active{color:var(--ink)}.f.active::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--red)}.arch-wrap{display:grid;grid-template-columns:1fr minmax(180px,222px);gap:clamp(20px,2.4vw,34px);align-items:start}.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px) clamp(18px,2.2vw,30px)}.arch-card{display:block}.arch-card .world-row{margin-top:12px}.arch-card .w-name{font-size:17px}.arch-card .w-num{font-size:9px}.arch-card .w-cat{font-size:7.5px}.arch-card .w-link svg{width:13px;height:13px}.rail{display:grid;gap:18px;align-content:start}.rail-card{border:1px solid var(--line-strong);background:var(--paper-3);display:block}.rail-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line)}.rail-name{font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}.rail-bar svg{width:11px;height:11px;color:var(--ink-3)}.rail-stage{position:relative;aspect-ratio:16/9.6;overflow:hidden}.rail-stage img,.rail-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.19,1,.22,1)}.rail-card:hover .rail-stage img,.rail-card:hover .rail-stage video{transform:scale(1.05)}.rail-label{position:absolute;left:9px;bottom:8px;z-index:2;font-family:var(--serif);font-weight:500;font-size:12.5px;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:var(--bone)}.rail-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,7,.55),rgba(10,9,7,0) 55%)}.rail-foot{display:flex;justify-content:space-between;padding:6px 10px;font-family:var(--mono);font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}.arch-empty{grid-column:1/-1;padding:44px 0;font-size:19px;color:var(--ink-3);font-style:italic}/* ============================================================
   CTA / FOOTER
   ============================================================ */
.cta{position:relative;min-height:76vh;background:var(--coal);color:var(--bone);display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line)}.cta-img{position:absolute;inset:0}.cta-img img,.cta-img video{width:100%;height:100%;object-fit:cover;opacity:.94}.cta-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,7,.78) 8%,rgba(10,9,7,.28) 62%,rgba(10,9,7,.1))}.cta-copy{position:relative;z-index:2;padding:0 var(--gut);max-width:900px}.cta-copy h2{font-size:clamp(44px,5.6vw,92px);line-height:1.02;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--bone)}.cta-kicker{margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-2)}.cta-link{margin-top:44px}.cta-base{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:16px;padding:17px var(--gut);border-top:1px solid var(--bone-line);font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2)}/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-img.loaded img,.hero-img.loaded video{animation:none;transform:none}.mini-stage img,.rail-stage img,.prin-fig img,.mini-stage video,.rail-stage video{transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){.arch-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){.worlds-grid{grid-template-columns:repeat(2,1fr)}.prin-grid{grid-template-columns:1fr 1fr}.case-hero{grid-template-columns:1fr}.case-visual{min-height:52vh;order:-1}.case-cols{grid-template-columns:1fr}.arch-wrap{grid-template-columns:1fr}.rail{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:840px){:root{--sb:0px}.sidebar{
    inset:0 0 auto 0;width:auto;height:62px;flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);padding:0 18px;
  }.brand{padding:0}.brand-bar{display:none}.brand-name{font-size:16px}.side-nav{margin:0 0 0 auto;display:flex;gap:18px;padding:0}.nav-item .n{display:none}.nav-item .l{font-size:8.5px;letter-spacing:.18em}.nav-item.active::before{left:50%;transform:translateX(-50%);top:auto;bottom:-8px}.copyright-vert{display:none}.side-foot{margin:0 0 0 16px;padding:0}.icon-btn:last-child{display:none}.main{margin-left:0;margin-top:62px}.pager-dots{display:none}.sec-counter{top:auto;bottom:22px;right:22px}.hero{min-height:560px;height:calc(100svh - 62px)}.worlds-grid,.prin-grid{grid-template-columns:1fr}.rail{grid-template-columns:1fr 1fr}.spec{grid-template-columns:80px 1fr}.cta-base{flex-direction:column;gap:6px}
}
@media (max-height:840px){.copyright-vert{display:none}
}

/* ============================================================
   v3 · WEBGL SKIN + THE WALL + MOTION
   ============================================================ */

/* When a WebGL twin owns a surface, hide the DOM media beneath it
   (the shader plane renders the same texture, locked to this rect).
   If WebGL never inits, .no-webgl on <html> keeps DOM media visible. */
/* HOTFIX: DOM media is ALWAYS the source of truth and stays visible.
   The shader layer may only composite ON TOP once it proves it has a
   real texture (js adds .wgl-live per-tile). Never hide media blind. */
.webgl-twin img, .webgl-twin video { opacity: 1; }
/* .wgl-live hiding disabled while skin is off */
/* the shader canvas sits above stills but below all chrome/nav (z:5) */

/* ---- shared section heading idiom (wall) ---- */
.sec-h{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,68px);line-height:1.03;letter-spacing:.01em;margin:8px 0 0}
.sec-lead{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);max-width:52ch;margin:18px 0 0;line-height:1.7;text-transform:uppercase}

/* ---- THE WALL ---- */
.wall-sec{padding-bottom:clamp(76px,9vw,132px)}
.wall-stage{position:relative;margin:clamp(38px,4.4vw,58px) 0 0;height:min(76vh,720px);
  background:var(--coal);overflow:hidden;border:1px solid var(--line);cursor:grab;
  touch-action:none}
.wall-stage canvas{touch-action:none}
.wall-label{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:16px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-2);
  background:linear-gradient(0deg,rgba(13,11,9,.72),transparent);
  display:flex;justify-content:space-between}
.wall-label::after{content:"↔";opacity:.6}

/* static fallback grid (no webgl / reduced motion) */
.wall-fallback{position:absolute;inset:0;display:none;overflow-y:auto;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px;padding:2px;
  background:var(--coal)}
.wall-stage.is-fallback{cursor:default;height:auto;max-height:none}
.wall-stage.is-fallback .wall-fallback{display:grid;position:relative}
.wall-stage.is-fallback .wall-label{display:none}
.wf-cell{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--coal-2);display:block}
.wf-cell img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.19,1,.22,1),filter .5s;filter:brightness(.82)}
.wf-cell:hover img{transform:scale(1.05);filter:brightness(1)}
.wf-meta{position:absolute;left:0;right:0;bottom:0;padding:14px;display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(0deg,rgba(13,11,9,.8),transparent);pointer-events:none}
.wf-meta b{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.06em;color:var(--bone)}
.wf-meta i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}

/* SplitText: keep chars from breaking layout while animating */
[data-hero-title] .sc{display:inline-block;will-change:transform}
[data-hero-title]{opacity:0}
.no-webgl [data-hero-title],[data-hero-title].ready{opacity:1}

@media (prefers-reduced-motion:reduce){
  .webgl-twin img,.webgl-twin video{opacity:1}
  .wall-stage{cursor:default;height:auto}
  .wall-stage canvas{display:none}
  .wall-fallback{display:grid;position:relative}
  .wall-label{display:none}
  [data-hero-title]{opacity:1}
}
@media (max-width:760px){
  .wall-stage{height:min(64vh,540px)}
  .wall-fallback{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ============================================================
   v4 · THE FIELD — archive adopts the Wall's language
   No chrome. Dark ground. The work carries itself.
   ============================================================ */
#work{background:var(--coal);border-top-color:rgba(234,227,212,.14)}
#work .k,#work .sec-title,#work .f{color:var(--bone)}
#work .k em{color:var(--bone-3)}
#work .f{color:var(--bone-3)}
#work .f:hover,#work .f.active{color:var(--bone)}
#work .sec-counter{color:var(--bone-3)}
#work .arch-empty{color:var(--bone-3)}
#work .w-name{color:var(--bone)}
#work .w-num,#work .w-cat{color:var(--bone-3)}
#work .w-link{color:var(--bone-2)}
#work .world-row{border-color:rgba(234,227,212,.16)}

/* bare card: image + a single line of type, nothing else */
.bare{position:relative;display:block;background:var(--coal-2)}
.bare-stage{position:relative;aspect-ratio:16/10;overflow:hidden}
.bare-stage img,.bare-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.74);transition:transform 1.2s cubic-bezier(.19,1,.22,1),filter .7s ease}
.arch-card:hover .bare-stage img,.arch-card:hover .bare-stage video{transform:scale(1.045);filter:brightness(1)}
.bare-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,7,.62),rgba(10,9,7,0) 58%);
  opacity:1;transition:opacity .7s ease}
.arch-card:hover .bare-shade{opacity:.55}
.bare-h{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font-family:var(--serif);font-weight:500;
  font-size:clamp(15px,1.35vw,21px);line-height:1.08;letter-spacing:.03em;text-transform:uppercase;
  color:var(--bone);transform:translateY(6px);opacity:.92;
  transition:transform .7s cubic-bezier(.19,1,.22,1),opacity .7s}
.arch-card:hover .bare-h{transform:translateY(0);opacity:1}

/* rail: same field, tighter */
.rail-card{border:none;background:var(--coal-2)}
.rail-stage{aspect-ratio:16/10}
.rail-stage img,.rail-stage video{filter:brightness(.7);transition:transform 1s cubic-bezier(.19,1,.22,1),filter .6s}
.rail-card:hover .rail-stage img,.rail-card:hover .rail-stage video{filter:brightness(1)}
.rail-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  left:11px;bottom:9px;color:var(--bone-2)}
.rail-shade{background:linear-gradient(0deg,rgba(10,9,7,.6),rgba(10,9,7,0) 62%)}