@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:wght@300;400;500;700&display=swap');

@font-face{font-family:"AO Mono";src:url("assets/fonts/AOMono-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"AO Mono";src:url("assets/fonts/AOMono-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"AO Mono";src:url("assets/fonts/AOMono-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
:root{
  --site-bg-light:#f2f0eb;
  --site-ink-light:#0d0d0b;
  --site-bg-dark:#0d0d0b;
  --site-ink-dark:#f2f0eb;
  --site-accent:#b6ff00;
  --font-display:"AO Mono", "Iosevka Charon Mono", ui-monospace, monospace;
  --font-body:"AO Mono", "Iosevka Charon Mono", ui-monospace, monospace;
  --font-utility:"AO Mono", "Iosevka Charon Mono", ui-monospace, monospace;
  --display-tracking:-.05em;
  --body-tracking:-.015em;
  --utility-tracking:.08em;
  --display-line-height:.83;
  --body-line-height:1.38;
  --bg:var(--site-bg-light);
  --bg-soft:color-mix(in srgb,var(--bg) 88%,transparent);
  --ink:var(--site-ink-light);
  --ink-soft:color-mix(in srgb,var(--ink) 58%,transparent);
  --line:color-mix(in srgb,var(--ink) 38%,transparent);
  --line-soft:color-mix(in srgb,var(--ink) 14%,transparent);
  --green:var(--site-accent);
  --green-soft:var(--site-accent);
  --shadow:0 18px 32px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family:var(--font-body,"AO Mono", "Iosevka Charon Mono", ui-monospace, monospace);
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%}
::selection{background:var(--green);color:var(--ink)}

.system-chip,
.nav-link,
.header-badge,
.brand,
.project-chip,
.meta-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:1.2em;
  transition:background-color .14s ease,color .14s ease, transform .18s ease, box-shadow .16s ease;
}
.system-chip:hover,
.nav-link:hover,
.brand:hover,
.header-badge:hover,
.project-chip:hover,
.meta-badge:hover,
.system-chip:focus-visible,
.nav-link:focus-visible,
.brand:focus-visible,
.header-badge:focus-visible,
.project-chip:focus-visible,
.meta-badge:focus-visible{
  background:var(--green-soft);
  color:var(--green-ink);
  box-shadow:0 0 0 1px rgba(13,13,11,.08);
  outline:none;
}
.nav-link:hover,
.nav-link:focus-visible,
.brand:hover,
.brand:focus-visible{transform:translateY(-1px)}

/* LANDING */
.landing{
  height:100svh;
  min-height:620px;
  position:relative;
  overflow:hidden;
  background:var(--bg);
  cursor:crosshair;
  isolation:isolate;
}
.world-shell{position:absolute;inset:0;overflow:hidden}
.world{position:absolute;left:0;top:0;will-change:transform;transform:translate3d(0,0,0)}
#nodes{position:absolute;inset:0;z-index:2}
.network{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.network line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .16s ease,stroke-width .16s ease, stroke .16s ease;opacity:.58}
.network line.hot{stroke-width:1.5;opacity:.96}
.network line.dim{opacity:.12}

.node{position:absolute;z-index:4;will-change:transform;transform:translate3d(0,0,0)}
.node:hover{z-index:220}
.node-hit{position:absolute;inset:-12px;z-index:4}
.node-visual{
  position:absolute;inset:0;
  transform-origin:center;
  transform:scale(var(--scale,1));
  transition:filter .28s ease;
  will-change:transform;
}
.node:hover .node-visual{filter:drop-shadow(0 18px 24px rgba(0,0,0,.15))}
.image-window{position:absolute;inset:0;overflow:hidden;z-index:1;background:#d9d9d3;outline:1px solid rgba(13,13,11,.14);opacity:var(--attention-image,1);transition:opacity .12s linear}
.node-img{
  width:100%;height:100%;object-fit:cover;background:#d9d9d3;
  position:absolute;inset:0;z-index:1;
  transform:scale(1.08);
  transition:transform .58s cubic-bezier(.16,1,.3,1);
}
.node.is-active .node-img{transform:scale(1.015)}
.node[data-fit="contain"] .node-img{object-fit:contain;background:#f0efea}
.track-box{position:absolute;inset:-8px;z-index:5;pointer-events:none;border:1px solid rgba(13,13,11,.34);opacity:var(--attention-ui,1);transition:border-color .16s ease,opacity .12s linear}
.corner{position:absolute;width:15px;height:15px;border-color:var(--ink);border-style:solid;transition:width .18s ease,height .18s ease,border-color .18s ease}
.c1{left:0;top:0;border-width:1px 0 0 1px}
.c2{right:0;top:0;border-width:1px 1px 0 0}
.c3{right:0;bottom:0;border-width:0 1px 1px 0}
.c4{left:0;bottom:0;border-width:0 0 1px 1px}
.node:hover .track-box{border-color:rgba(13,13,11,.82)}
.node:hover .corner{width:21px;height:21px}
.track-label{
  position:absolute;left:0;top:-20px;display:flex;gap:8px;align-items:center;
  white-space:nowrap;font-size:8px;line-height:1;letter-spacing:.03em;text-transform:uppercase;
  background:var(--bg);padding:2px 4px 2px 0;color:var(--ink)
}
.track-dot{width:4px;height:4px;background:var(--ink);display:inline-block}
.track-status{opacity:.46}
.node:hover .track-status{opacity:1}
.track-index{
  position:absolute;right:-1px;bottom:-20px;font-size:8px;letter-spacing:.035em;background:var(--bg);padding:2px 0 2px 4px;white-space:nowrap
}

.site-nav{
  position:fixed;
  top:12px;
  right:14px;
  z-index:520;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-link{
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 6px 4px;
  background:rgba(242,240,235,.52);
}
.nav-link.active{background:rgba(242,240,235,.88)}

.center-id{
  position:fixed;
  z-index:500;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:auto;
  width:min(780px,86vw);
  color:var(--ink);
}
.center-main{
  display:inline-block;
  font-size:clamp(11px,.92vw,15px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:.03em;
  padding:4px 6px;
  background:var(--bg-soft);
}
.center-sub{
  display:inline-block;
  margin-top:4px;
  font-size:clamp(7px,.56vw,9px);
  line-height:1.25;
  letter-spacing:.05em;
  padding:3px 5px;
  color:rgba(13,13,11,.78);
  background:var(--bg-soft);
}

.micro{
  position:fixed;
  z-index:510;
  display:flex;
  gap:10px;
  font-size:8px;
  line-height:1.1;
  letter-spacing:.055em;
  text-transform:uppercase;
  pointer-events:auto;
  background:var(--bg-soft);
  padding:5px 6px 4px;
}
.micro span{display:inline-block}
.micro-tl{left:14px;top:12px}
.micro-tr{right:14px;top:44px}
.micro-bl{left:14px;bottom:12px}
.micro-br{right:14px;bottom:12px}
.edge-mark{position:fixed;z-index:510;top:50%;font-size:7px;opacity:.45;pointer-events:none}
.edge-mark-l{left:5px;transform:translateY(-50%) rotate(-90deg)}
.edge-mark-r{right:5px;transform:translateY(-50%) rotate(90deg)}

.console{
  position:fixed;
  z-index:1000;
  max-width:min(360px,42vw);
  min-width:190px;
  background:#fff;
  color:#000;
  border:1px solid #000;
  padding:10px 11px 11px;
  font-size:9px;
  line-height:1.35;
  letter-spacing:.03em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .24s ease,transform .34s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  white-space:pre-line;
  box-shadow:5px 5px 0 rgba(0,0,0,.08)
}
.console.show{opacity:1;transform:none}
.console-cursor{display:inline-block;animation:blink .68s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* PROJECT PAGES */
.project-page{background:var(--bg);overflow:auto}
.project-page body{overflow:auto}
.site-header{
  position:fixed;
  inset:0 0 auto;
  min-height:58px;
  padding:12px clamp(18px,2.1vw,38px) 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  z-index:1000;
}
.brand{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 6px 4px;
  background:var(--bg-soft);
}
.header-right{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.header-badge{
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 6px 4px;
  background:var(--bg-soft);
}
.project-main{padding-top:110px}
.project-intro{
  padding:0 clamp(18px,2.1vw,38px) 76px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.62fr);
  gap:7vw;
  align-items:end;
}
.project-kicker{
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:20px;
  color:var(--ink-soft);
}
.project-title{
  font-size:clamp(60px,10.3vw,175px);
  line-height:var(--display-line-height);
  letter-spacing:-.05em;
  text-transform:uppercase;
  margin:0;
  max-width:1200px;
  font-weight:900;
}

.project-title-index{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(22px,3.2vw,58px);align-items:start;margin:0;max-width:1300px}
.project-title-index .project-title-num{font-size:clamp(48px,6.1vw,102px);line-height:var(--display-line-height);letter-spacing:-.05em;font-weight:400;white-space:nowrap;padding-top:.02em}
.project-title-index .project-title{margin:0;max-width:none}

.project-summary{
  font-size:clamp(18px,2.25vw,30px);
  line-height:1.16;
  letter-spacing:-.02em;
  max-width:820px;
  margin:28px 0 0;
}
.project-meta{font-size:13px;line-height:1.58;padding-bottom:4px}
.project-meta dl{margin:0;display:grid;grid-template-columns:84px 1fr;gap:7px 16px}
.project-meta dt{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-size:9px}
.project-meta dd{margin:0}
.media-block{margin:0 clamp(18px,2.1vw,38px) 24px;background:#ddd;overflow:hidden;position:relative}
.media-block.full{margin-left:0;margin-right:0}
.media-block img{width:100%;height:auto}
.media-block.crop{height:min(76vw,920px)}
.media-block.crop img{height:100%;object-fit:cover}
.media-caption{display:flex;justify-content:space-between;gap:30px;padding:10px 0 0;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--bg)}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 clamp(18px,2.1vw,38px);margin-bottom:24px}
.media-grid .media-block{margin:0}
.project-text{padding:88px clamp(18px,2.1vw,38px) 105px;display:grid;grid-template-columns:minmax(100px,.72fr) minmax(0,1.28fr);gap:clamp(40px,8vw,140px);border-top:1px solid var(--line-soft)}
.project-text h2{margin:0;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.project-text .project-copy,.project-text .about-copy{min-width:0;max-width:70ch}
.project-text p{margin:0;font-size:clamp(18px,1.55vw,26px);line-height:1.38;letter-spacing:-.015em;max-width:70ch}
.project-text p + p{margin-top:1.35em}
.motion-demo{margin:0 clamp(18px,2.1vw,38px) 24px;height:min(65vw,800px);position:relative;overflow:hidden;background:#140e13;color:#fff}
.motion-demo .motion-image{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:slowpan 10s ease-in-out infinite alternate;filter:saturate(1.05) contrast(1.03)}
.motion-demo:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 42%)}
.motion-ui{position:absolute;z-index:3;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:end;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.motion-ui .play{width:44px;height:44px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:14px}
@keyframes slowpan{0%{transform:scale(1.02) translate3d(-1.2%,-.5%,0)}100%{transform:scale(1.1) translate3d(1.2%,.8%,0)}}
.next-project{display:block;padding:50px clamp(18px,2.1vw,38px) 58px;border-top:1px solid var(--line-soft)}
.next-project span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.next-project strong{display:block;margin-top:12px;font-size:clamp(42px,7vw,110px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase;transition:transform .3s ease}
.next-project:hover strong{transform:translateX(12px)}
.project-end-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.project-end-link{display:flex;align-items:center;min-height:86px;padding:22px clamp(18px,2.1vw,38px);font-size:clamp(11px,1.05vw,16px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:background-color .14s ease,color .14s ease}
.project-end-link.back{justify-content:flex-start;text-align:left;border-right:1px solid var(--line-soft)}
.project-end-link.next{justify-content:flex-end;text-align:right}
.project-end-link:hover,.project-end-link:focus-visible{background:var(--green);color:var(--green-ink);outline:none}
.project-end-link .arrow{display:inline-block;transition:transform .24s cubic-bezier(.16,1,.3,1)}
.project-end-link.back:hover .arrow,.project-end-link.back:focus-visible .arrow{transform:translateX(-6px)}
.project-end-link.next:hover .arrow,.project-end-link.next:focus-visible .arrow{transform:translateX(6px)}
.project-footer{display:flex;justify-content:space-between;padding:18px clamp(18px,2.1vw,38px) 28px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--line-soft);color:var(--ink-soft)}

.contact-system{border-top:1px solid var(--line-soft);padding:72px clamp(18px,2.1vw,38px) 90px;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.5fr);gap:8vw;align-items:start}
.contact-side>p{font-size:clamp(17px,1.7vw,25px);line-height:1.22;max-width:480px;margin:0 0 30px}
.social-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.social-links a,.inline-green{display:inline-block;padding:5px 6px 4px;margin-left:-6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;transition:background-color .14s ease,font-weight .14s ease}
.social-links a:hover,.social-links a:focus-visible,.inline-green:hover,.inline-green:focus-visible{background:var(--green);color:var(--green-ink);font-weight:900;outline:none}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;max-width:980px}
.form-bot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.form-field{display:flex;flex-direction:column;gap:8px;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.form-field span{display:flex;justify-content:space-between;gap:10px}.form-field span i{font-style:normal;opacity:.55}
.form-field input,.form-field textarea{width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-family:inherit;font-size:clamp(15px,1.35vw,21px);line-height:1.2;padding:10px 0 11px;outline:none;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(13,13,11,.28)}
.form-field input:focus,.form-field textarea:focus{border-bottom-color:var(--ink);box-shadow:0 3px 0 -1px var(--green)}
.form-message{grid-column:1/-1}.form-message textarea{min-height:150px}
.send-button{grid-column:1/-1;justify-self:start;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 14px 11px;cursor:pointer;transition:background-color .14s ease,color .14s ease,transform .18s ease}
.send-button:hover,.send-button:focus-visible{background:var(--green);color:#000;outline:none;transform:translateY(-1px)}
.info-page .project-intro{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.info-page .project-title{font-size:clamp(48px,8vw,128px)}
.info-page .info-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.project-chip{font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:6px 7px 5px;background:var(--bg-soft)}
.meta-badge{font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:4px 6px;background:var(--bg-soft)}

@media(max-width:820px){
  body{overflow:auto}
  .landing{height:auto;min-height:100svh;overflow:auto;padding:88px 12px 72px;cursor:default}
  .world-shell{position:relative;inset:auto;overflow:visible}
  .world{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;transform:none!important}
  #nodes{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .network{display:none}
  .node{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;transform:none!important;z-index:auto}
  .node-visual{position:relative;inset:auto;transform:none!important;aspect-ratio:4/3}
  .node:nth-child(4n+1) .node-visual{aspect-ratio:3/4}.node:nth-child(4n+2) .node-visual{aspect-ratio:1/1}
  .track-box{inset:-5px}.track-label{top:-16px;font-size:6.5px}.track-index{bottom:-16px;font-size:6.5px}
  .center-id{position:fixed;top:50%;width:92vw}
  .center-main{font-size:8px}
  .center-sub{font-size:6px}
  .site-nav{left:14px;right:14px;top:12px;gap:6px;justify-content:flex-end}
  .nav-link{font-size:7px}
  .micro-tl,.micro-tr{top:40px}
  .micro-bl,.micro-br{bottom:7px}
  .micro{font-size:6px;gap:5px;max-width:48vw;flex-wrap:wrap}
  .micro-tr,.micro-br{justify-content:flex-end;text-align:right}
  .edge-mark{display:none}.console{display:none}
  .site-header{padding-top:10px}
  .project-main{padding-top:84px}
  .project-intro{grid-template-columns:1fr;padding-bottom:44px;gap:30px}
  .project-title{font-size:18vw}
  .project-title-index{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .project-title-index .project-title-num{font-size:11vw;line-height:var(--display-line-height)}
  .project-summary{font-size:21px}
  .media-grid{grid-template-columns:1fr;gap:14px}
  .media-block{margin-bottom:14px}
  .project-text{grid-template-columns:1fr;gap:25px;padding-top:56px;padding-bottom:70px}
  .project-text p{font-size:clamp(18px,5vw,20px);line-height:1.4}
  .project-text p + p{margin-top:1.3em}
  .motion-demo{height:76vh;min-height:520px}
  .project-end-link{min-height:70px;padding:18px 12px;font-size:9px}
  .contact-system{grid-template-columns:1fr;gap:42px;padding-top:56px;padding-bottom:70px}
  .contact-form{grid-template-columns:1fr;gap:20px}
  .form-message,.send-button{grid-column:1}
  .contact-side>p{font-size:20px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* WORK INDEX */
.work-index-page{background:var(--bg);overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable}
.work-index-page .site-nav{z-index:1400}
.work-index{min-height:100vh;position:relative;overflow:visible;background:var(--bg);padding-top:92px}
.work-index-head{position:fixed;z-index:1200;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;gap:20px;padding-right:470px;font-size:8px;letter-spacing:.07em;text-transform:uppercase;pointer-events:none}
.work-index-foot{position:relative;z-index:1200;margin:48px 18px 18px;width:min(940px,68vw);display:flex;justify-content:space-between;gap:20px;padding-top:14px;border-top:1px solid rgba(13,13,11,.11);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.work-tags{position:fixed;z-index:1250;left:18px;top:50px;display:flex;gap:5px;flex-wrap:wrap;max-width:min(920px,70vw)}
.work-tag{border:0;background:rgba(242,240,235,.92);color:var(--ink);font-family:inherit;font-size:7px;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:5px 6px 4px;cursor:pointer;transition:background-color .14s ease,font-weight .14s ease}
.work-tag:hover,.work-tag:focus-visible,.work-tag.active{background:var(--green);color:#000;font-weight:900;outline:none}
.work-list{position:relative;z-index:100;margin-left:18px;width:min(940px,68vw);display:flex;flex-direction:column;justify-content:flex-start;gap:0;overflow:visible;padding-right:0}
.work-row{position:relative;display:grid;grid-template-columns:clamp(82px,6.8vw,108px) minmax(0,1fr) 84px;grid-template-areas:'num title meta';column-gap:clamp(18px,1.8vw,30px);align-items:center;padding:12px 8px;border-bottom:1px solid rgba(13,13,11,.11);cursor:crosshair;min-height:72px;color:var(--ink);transition:background-color .14s ease,color .14s ease}
.work-row.is-filtered-out{display:none}
.work-row.is-loading .work-num,.work-row.is-loading .work-year,.work-row.is-loading .work-live{opacity:0}
.work-row:hover,.work-row.active,.work-row:focus-visible{background:var(--green);outline:none;color:#000}
.work-num{grid-area:num;align-self:center;display:block;font-size:clamp(24px,2.55vw,41px);font-weight:400;line-height:.94;letter-spacing:-.02em;color:var(--ink);padding:0;transition:opacity .12s ease,color .12s ease}
.work-title{grid-area:title;align-self:center;font-size:clamp(23px,2.65vw,43px);line-height:.94;text-transform:uppercase;white-space:nowrap;overflow:visible;letter-spacing:-.025em;font-weight:400;min-height:1em;padding:0}
.work-title-text{display:inline}
.work-wait-cursor{display:inline-block;margin-left:.08em;font-weight:400;animation:blink .68s steps(1) infinite;transform:translateY(.04em)}
.work-meta{grid-area:meta;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:0}
.work-year{display:block;text-align:right;font-size:9px;color:var(--ink-soft);letter-spacing:.05em;transition:opacity .12s ease}
.work-live{display:block;text-align:right;font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);transition:opacity .12s ease}.work-live.quiet{color:var(--ink-soft)}
.work-row:hover .work-title,.work-row.active .work-title,.work-row:focus-visible .work-title{font-weight:900;color:#000}
.work-row:hover .work-num,.work-row.active .work-num,.work-row:focus-visible .work-num{font-weight:400;color:#000}
.work-row:hover .work-year,.work-row:hover .work-live,.work-row.active .work-year,.work-row.active .work-live,.work-row:focus-visible .work-year,.work-row:focus-visible .work-live{color:#000;opacity:1}
.work-preview-lines{position:fixed;inset:0;z-index:140;pointer-events:none;overflow:visible}
.work-preview-lines line{stroke:rgba(13,13,11,.58);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .25s ease}
.work-preview{position:fixed;z-index:150;inset:0;pointer-events:none;opacity:0;transition:opacity .28s ease;transform:translate3d(var(--px,0),var(--py,0),0)}
.work-preview.show{opacity:1}
.work-index.has-preview .work-preview-lines line{opacity:.56}
.preview-node{position:absolute;background:#ddd;box-shadow:var(--shadow);transform:scale(.96);transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;will-change:top,transform}.work-preview.show .preview-node{transform:scale(1)}
.preview-node-a{left:68vw;top:23vh;width:min(270px,20vw);height:min(330px,31vh)}
.preview-node-b{left:80vw;top:55vh;width:min(180px,14vw);height:min(210px,21vh)}
.preview-node img{width:100%;height:100%;object-fit:cover;background:#ddd}
.preview-node .track-box{inset:-9px}.preview-label{position:absolute;top:-20px;left:0;font-size:7px;letter-spacing:.07em;text-transform:uppercase;background:var(--bg);padding:2px 4px 2px 0;white-space:nowrap}
.preview-console{position:absolute;right:18px;top:12vh;width:260px;min-height:96px;border:1px solid var(--ink);background:#fff;padding:10px 11px;font-size:9px;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;white-space:pre-line;box-shadow:5px 5px 0 rgba(0,0,0,.07)}

/* smoother scale on the tracked home canvas; JS interpolates --scale every frame */
.node-visual{transition:filter .28s ease!important}
.node.is-active .node-visual{filter:drop-shadow(0 18px 24px rgba(0,0,0,.15))}

@media(max-width:1000px){
 .work-list{width:min(780px,74vw)}
 .work-row{grid-template-columns:clamp(78px,8vw,96px) minmax(0,1fr) 68px;column-gap:14px}
 .work-title{font-size:clamp(20px,3vw,34px)}
 .work-num{font-size:clamp(22px,2.8vw,32px);font-weight:400}
 .preview-node-a{left:70vw;width:23vw}.preview-node-b{left:82vw;width:15vw}
 .preview-console{display:none}
}
@media(max-width:820px){
 .work-index-page{overflow:auto}.work-index{min-height:100svh;overflow:visible;padding:84px 12px 58px}
 .work-index .site-nav{position:fixed}
 .work-index-head{position:fixed;top:46px;left:12px;right:12px;padding-right:0;font-size:6px}.work-index-head span:last-child{display:none}
 .work-tags{position:relative;left:auto;top:auto;max-width:none;margin:-18px 0 16px;gap:4px}.work-tag{font-size:6px;padding:5px 5px 4px}
 .work-index-foot{position:relative;left:auto;right:auto;margin:36px 0 0;width:auto;font-size:6px}
 .work-list{position:relative;left:auto;top:auto;bottom:auto;width:auto;display:block;overflow:visible;padding-right:0}
 .work-row{grid-template-columns:58px 1fr 50px;grid-template-areas:'num title meta';column-gap:10px;min-height:64px;padding:9px 4px;align-items:center}
 .work-num{font-size:clamp(20px,6.4vw,28px);font-weight:400;padding-top:0}
 .work-title{font-size:clamp(18px,6.4vw,28px);white-space:normal;line-height:1}
 .work-live{font-size:6px}.work-year{font-size:7px}.work-meta{gap:5px;padding-top:0}
 .work-preview,.work-preview-lines{display:none}
}

/* THEME + COMPACT SYSTEM MENU */
:root{
  --green-ink:#0d0d0b;
  --surface:#d9d9d3;
  --menu-shadow:6px 6px 0 rgba(13,13,11,.10);
}
html[data-theme="dark"]{
  --bg:var(--site-bg-dark,#0d0d0b);
  --bg-soft:color-mix(in srgb,var(--bg) 90%,transparent);
  --ink:var(--site-ink-dark,#f2f0eb);
  --ink-soft:color-mix(in srgb,var(--ink) 62%,transparent);
  --line:color-mix(in srgb,var(--ink) 42%,transparent);
  --line-soft:color-mix(in srgb,var(--ink) 15%,transparent);
  --green:var(--site-accent,#b6ff00);
  --green-soft:var(--site-accent,#b6ff00);
  --green-ink:#0d0d0b;
  --surface:#20211e;
  --shadow:0 18px 32px rgba(0,0,0,.32);
  --menu-shadow:6px 6px 0 rgba(242,240,235,.07);
}

.menu-system{
  position:relative;
  z-index:1600;
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body > .menu-system,
.landing > .menu-system{
  position:fixed;
  right:14px;
  top:12px;
}
.menu-toggle,
.menu-panel a,
.menu-panel button{
  border:0;
  border-radius:0;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:var(--ink);
  background:var(--bg-soft);
  padding:6px 7px 5px;
  cursor:pointer;
}
.menu-toggle{display:block;margin-left:auto}
.menu-toggle:hover,.menu-toggle:focus-visible,
.menu-panel a:hover,.menu-panel a:focus-visible,
.menu-panel button:hover,.menu-panel button:focus-visible{
  background:var(--green);
  color:var(--green-ink);
  font-weight:900;
  outline:none;
}
.menu-panel{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  min-width:150px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border:1px solid var(--ink);
  background:var(--bg);
  padding:5px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility .16s;
  box-shadow:var(--menu-shadow);
}
.menu-system.is-open .menu-panel{opacity:1;visibility:visible;transform:translateY(0)}
.menu-panel a,.menu-panel button{text-align:left;width:100%;background:transparent}
.menu-rule{height:1px;background:var(--line-soft);margin:4px 0}
.site-header .menu-system{position:relative;top:auto;right:auto}
.site-header .header-right{overflow:visible}

/* In dark mode HOME becomes the machine-vision / dithered archive. */
.node-img-dither{opacity:0;z-index:1}
.node-img-original{opacity:1;z-index:2}
.node-img-dither,.node-img-original{
  transition:opacity .52s cubic-bezier(.16,1,.3,1),transform .58s cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] .landing .image-window{background:var(--bg);outline-color:rgba(242,240,235,.16)}
html[data-theme="dark"] .landing .node-img-dither{opacity:1}
html[data-theme="dark"] .landing .node-img-original{opacity:0}
html[data-theme="dark"] .landing .node.is-active .node-img-dither{opacity:0}
html[data-theme="dark"] .landing .node.is-active .node-img-original{opacity:1}
html[data-theme="dark"] .landing .node:hover .node-visual{filter:drop-shadow(0 18px 24px rgba(0,0,0,.46))}
html[data-theme="dark"] .landing .track-box{border-color:rgba(242,240,235,.38)}
html[data-theme="dark"] .landing .node:hover .track-box{border-color:rgba(242,240,235,.9)}
html[data-theme="dark"] .landing .track-label,
html[data-theme="dark"] .landing .track-index{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .landing .console{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:5px 5px 0 rgba(242,240,235,.08)}

/* Theme-safe interactive states */
html[data-theme="dark"] .system-chip:hover,
html[data-theme="dark"] .system-chip:focus-visible,
html[data-theme="dark"] .brand:hover,
html[data-theme="dark"] .brand:focus-visible,
html[data-theme="dark"] .header-badge:hover,
html[data-theme="dark"] .header-badge:focus-visible,
html[data-theme="dark"] .project-chip:hover,
html[data-theme="dark"] .project-chip:focus-visible{color:var(--green-ink)}
html[data-theme="dark"] .center-sub{color:var(--ink-soft)}
html[data-theme="dark"] .work-row,
html[data-theme="dark"] .project-text,
html[data-theme="dark"] .next-project,
html[data-theme="dark"] .project-end-nav,
html[data-theme="dark"] .project-end-link,
html[data-theme="dark"] .project-footer,
html[data-theme="dark"] .contact-system{border-color:var(--line-soft)}
html[data-theme="dark"] .work-tag{background:var(--bg-soft);color:var(--ink)}
html[data-theme="dark"] .work-preview-lines line{stroke:var(--line)}
html[data-theme="dark"] .preview-node{background:var(--surface)}
html[data-theme="dark"] .preview-label{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder{color:rgba(242,240,235,.28)}
html[data-theme="dark"] .send-button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-theme="dark"] .send-button:hover,
html[data-theme="dark"] .send-button:focus-visible{background:var(--green);color:var(--green-ink)}

/* The compact menu replaces the older horizontal nav. */
.site-nav{display:none!important}
.work-index-head{padding-right:150px}
.micro-tr{right:14px;top:44px}

@media(max-width:820px){
  body > .menu-system,.landing > .menu-system{right:10px;top:9px}
  .menu-system{font-size:7px}
  .menu-panel{min-width:138px}
}
html[data-theme="dark"] .preview-console{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:5px 5px 0 rgba(242,240,235,.08)}
html[data-theme="dark"] .media-block{background:var(--surface)}
html[data-theme="dark"] .motion-demo{background:#050505}


/* ============================================================
   INTENTIONAL MOBILE RENDERER — HOME + WORK
   Desktop remains the finite 2D tracked canvas. On phones,
   vertical scroll becomes the navigation axis and viewport center
   becomes the machine-attention cursor.
   ============================================================ */
.mobile-home-brand{display:none}
.mobile-acquire{display:none}
.mobile-work-preview{display:none}

@media(max-width:820px){
  html,body{overflow-x:hidden}

  /* HOME */
  .landing-page{overflow:auto}
  .landing{
    min-height:100%;height:auto;overflow:visible;
    padding:76px 0 88px;cursor:default;
  }
  .mobile-home-brand{
    display:block;position:fixed;z-index:1580;left:10px;top:9px;
    background:var(--bg-soft);color:var(--ink);padding:6px 7px 5px;
    font-size:7px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  }
  .mobile-home-brand:active{background:var(--green);color:var(--green-ink);font-weight:900}
  .center-id,.landing .micro,.landing .edge-mark,.landing>.console{display:none!important}
  .world-shell{position:relative;inset:auto;overflow:visible;width:100%}
  .world{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;transform:none!important}
  #nodes{
    position:relative;inset:auto;display:flex;flex-direction:column;
    gap:clamp(52px,15vw,76px);padding:34px 18px 72px;
  }
  .network{display:none!important}
  .node{
    position:relative!important;left:auto!important;top:auto!important;
    width:clamp(142px,52vw,238px)!important;height:auto!important;
    z-index:4;transform:none!important;align-self:flex-start;
  }
  .node:nth-child(6n+2),.node:nth-child(6n+5){align-self:flex-end}
  .node:nth-child(6n+3){align-self:center;margin-left:12vw}
  .node:nth-child(6n+4){align-self:flex-start;margin-left:7vw}
  .node:nth-child(6n+6){align-self:flex-end;margin-right:8vw}
  .node:nth-child(9n+1){width:clamp(160px,58vw,258px)!important}
  .node:nth-child(8n+4){width:clamp(128px,46vw,212px)!important}
  .node-visual{position:relative;inset:auto;aspect-ratio:4/5;transform:scale(var(--scale,1))!important;transform-origin:center}
  .node:nth-child(5n+2) .node-visual,.node:nth-child(7n+4) .node-visual{aspect-ratio:1/1}
  .node:nth-child(11n+3) .node-visual{aspect-ratio:3/4}
  .node::after{
    content:"";position:absolute;z-index:-1;left:50%;top:calc(100% + 9px);
    width:1px;height:clamp(48px,14vw,72px);background:var(--line);
    transform-origin:top;transform:rotate(var(--mobile-line-angle,-14deg));
    opacity:calc(var(--attention-ui,1) * .42);pointer-events:none;
  }
  .node:nth-child(even)::after{--mobile-line-angle:17deg}
  .node:nth-child(3n)::after{--mobile-line-angle:-28deg}
  .node:last-child::after{display:none}
  .node-hit{inset:-8px}
  .image-window{outline-color:var(--line-soft);transition:opacity .16s linear}
  .node-img{transform:scale(1.07)}
  .node.is-active .node-img{transform:scale(1.015)}
  .track-box{inset:-6px}
  .corner{width:13px;height:13px}
  .track-label{top:-17px;font-size:6.5px;gap:5px;padding-right:2px}
  .track-index{bottom:-17px;font-size:6.5px}
  .track-status{display:none}
  .mobile-acquire{
    display:flex;position:absolute;z-index:20;left:0;top:calc(100% + 27px);
    width:min(270px,72vw);flex-direction:column;gap:3px;
    background:var(--bg);color:var(--ink);border:1px solid var(--ink);
    padding:8px 9px 9px;font-size:7px;line-height:1.25;letter-spacing:.045em;text-transform:uppercase;
    opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1);
    box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 8%,transparent);
  }
  .mobile-acquire span{font-size:8px;font-weight:700}
  .mobile-acquire i{font-style:normal;color:var(--ink-soft);margin-top:2px}
  .node.is-active{z-index:30;margin-bottom:54px}
  .node.is-active .mobile-acquire{opacity:1;transform:none}
  .node.is-active .track-box{border-color:var(--ink)}
  .node.is-active .corner{width:18px;height:18px}
  html[data-theme="dark"] .mobile-acquire{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  html[data-theme="dark"] .mobile-acquire i{color:rgba(13,13,11,.6)}

  /* WORK — ordinary page scroll + tap-to-query inline visual result */
  .work-index-page{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:auto}
  .work-index{min-height:100%;padding:74px 10px 54px}
  .work-index-head{
    position:relative;left:auto;right:auto;top:auto;padding:0;margin:0 0 42px;
    font-size:6px;pointer-events:none;
  }
  .work-index-head span:last-child{display:none}
  .work-tags{
    position:sticky;z-index:900;left:auto;top:39px;max-width:none;margin:0 -10px 18px;
    padding:6px 10px;background:var(--bg);display:flex;flex-wrap:nowrap;overflow-x:auto;
    gap:5px;scrollbar-width:none;border-bottom:1px solid var(--line-soft)
  }
  .work-tags::-webkit-scrollbar{display:none}
  .work-tag{flex:0 0 auto;font-size:6px;padding:6px 6px 5px}
  .work-list{margin-left:0;width:100%;display:block;overflow:visible;padding:0}
  .work-row{
    grid-template-columns:48px minmax(0,1fr) 48px;column-gap:10px;align-items:center;
    min-height:70px;padding:12px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  }
  .work-num{font-size:clamp(19px,6vw,27px);line-height:1;font-weight:400}
  .work-title{font-size:clamp(18px,6.1vw,28px);line-height:.96;white-space:normal}
  .work-meta{gap:4px}
  .work-year{font-size:6.5px}.work-live{font-size:5.5px;line-height:1.1}
  .work-preview,.work-preview-lines{display:none!important}
  .work-index-foot{margin:38px 0 0;width:100%;font-size:6px;padding-top:12px}
  .mobile-work-preview{
    display:grid;grid-template-columns:minmax(120px,42vw) minmax(0,1fr);gap:16px;
    align-items:start;padding:22px 4px 30px;border-bottom:1px solid var(--line-soft);
    opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1)
  }
  .mobile-work-preview.show{opacity:1;transform:none}
  .mobile-preview-frame{position:relative;aspect-ratio:4/5;background:var(--surface)}
  .mobile-preview-frame img{width:100%;height:100%;object-fit:cover}
  .mobile-preview-frame .track-box{inset:-6px}
  .mobile-preview-label{position:absolute;left:0;top:-17px;background:var(--bg);color:var(--ink);font-size:6px;padding:2px 3px 2px 0;white-space:nowrap}
  .mobile-preview-copy{display:flex;min-width:0;flex-direction:column;gap:7px;font-size:7px;line-height:1.25;text-transform:uppercase;letter-spacing:.045em}
  .mobile-preview-copy b{font-size:10px;line-height:1.1}
  .mobile-preview-copy span{color:var(--ink-soft)}
  .mobile-preview-open{display:inline-flex;align-self:flex-start;margin-top:6px;background:var(--green);color:var(--green-ink);padding:7px 8px 6px;font-weight:900;line-height:1}

  /* Existing inner-page stack remains our canonical phone template. */
  .site-header{min-height:50px;padding:9px 10px 0}
  .site-header .brand{font-size:7px}
  .site-header .menu-system{font-size:7px}
  .project-main{padding-top:76px}
  .project-intro{padding-left:12px;padding-right:12px}
  .project-footer{padding-left:12px;padding-right:12px}
}

@media(max-width:390px){
  #nodes{padding-left:14px;padding-right:14px}
  .node{width:52vw!important}
  .node:nth-child(9n+1){width:58vw!important}
  .mobile-work-preview{grid-template-columns:38vw minmax(0,1fr);gap:12px}
}


/* ============================================================
   MOBILE V14 — SIMPLIFIED EDITORIAL ARCHIVE
   Mobile is intentionally not a shrunken desktop canvas.
   Images remain fully legible, float in a loose vertical collage,
   and keep only the border/corner tracking language.
   ============================================================ */
@media(max-width:820px){
  /* Full-screen mobile navigation */
  body > .menu-system,.landing > .menu-system{
    position:fixed;right:12px;top:12px;z-index:3000;
  }
  .menu-system{font-size:10px}
  .menu-toggle{
    position:relative;z-index:3002;
    min-height:38px;padding:10px 10px 9px;
    background:var(--bg);font-size:10px;
  }
  .menu-panel{
    position:fixed;z-index:3001;inset:0;
    min-width:0;width:100%;height:100%;
    padding:92px 20px 28px;
    border:0;background:var(--bg);box-shadow:none;
    display:flex;flex-direction:column;align-items:stretch;
    opacity:0;visibility:hidden;transform:none;
    transition:opacity .2s ease,visibility .2s;
  }
  .menu-system.is-open .menu-panel{opacity:1;visibility:visible;transform:none}
  .menu-panel a,
  .menu-panel button{
    flex:0 0 auto;width:100%;padding:12px 8px 10px;
    font-size:clamp(26px,8.8vw,42px);line-height:.94;
    letter-spacing:.015em;text-align:left;background:transparent;
    border-bottom:1px solid var(--line-soft);
  }
  .menu-panel a:active,
  .menu-panel button:active{background:var(--green);color:var(--green-ink);font-weight:900}
  .menu-rule{margin:auto 0 12px;height:1px;background:var(--line-soft)}
  .menu-panel [data-theme-toggle]{
    font-size:clamp(18px,5.8vw,28px);border:1px solid var(--line-soft);
    padding:12px 10px 10px;
  }
  html.menu-open,html.menu-open body{overflow:hidden!important}

  /* HOME: loose vertical image composition, no connecting lines or idle metadata */
  .landing{padding:86px 0 110px}
  #nodes{
    display:flex!important;flex-direction:column!important;
    gap:clamp(28px,8vw,48px)!important;
    padding:30px 16px 82px!important;
  }
  .network,.node::after{display:none!important}
  .node{
    width:clamp(168px,58vw,272px)!important;
    margin:0!important;align-self:flex-start;
    opacity:1!important;
  }
  .node:nth-child(6n+1){align-self:flex-start;margin-left:3vw!important;width:62vw!important}
  .node:nth-child(6n+2){align-self:flex-end;margin-right:2vw!important;width:45vw!important;margin-top:0!important}
  .node:nth-child(6n+3){align-self:center;width:55vw!important;margin-top:1vw!important;margin-left:7vw!important}
  .node:nth-child(6n+4){align-self:flex-start;margin-left:13vw!important;width:43vw!important;margin-top:-6vw!important}
  .node:nth-child(6n+5){align-self:flex-end;margin-right:7vw!important;width:61vw!important;margin-top:1vw!important}
  .node:nth-child(6n+6){align-self:flex-start;margin-left:1vw!important;width:49vw!important;margin-top:0!important}
  .node:nth-child(10n+3){width:67vw!important}
  .node:nth-child(10n+7){width:42vw!important}
  .node-visual{aspect-ratio:4/5!important;transform:scale(var(--scale,1))!important}
  .node:nth-child(5n+2) .node-visual,.node:nth-child(7n+4) .node-visual{aspect-ratio:1/1!important}
  .node:nth-child(9n+3) .node-visual{aspect-ratio:3/4!important}
  .node:nth-child(11n+6) .node-visual{aspect-ratio:5/6!important}
  .image-window{
    opacity:1!important;outline:1px solid var(--line);
    background:var(--surface);
  }
  .node-img{transform:scale(1.055)}
  .node.is-active .node-img{transform:scale(1.01)}
  .track-box{inset:-6px;opacity:1!important;border-color:var(--line)}
  .track-label,.track-index{display:none!important}
  .corner{width:14px;height:14px}
  .node.is-active{z-index:40;margin-bottom:52px!important}
  .node.is-active .corner{width:19px;height:19px}
  .node.is-active .track-box{border-color:var(--ink)}
  .mobile-acquire{
    top:calc(100% + 20px);width:min(310px,82vw);
    font-size:8px;padding:9px 10px 10px;
  }
  .mobile-acquire span{font-size:10px}
  html[data-theme="dark"] .landing .image-window{opacity:1!important}
  html[data-theme="dark"] .landing .track-box{opacity:1!important;border-color:rgba(242,240,235,.56)}
  html[data-theme="dark"] .landing .node.is-active .track-box{border-color:var(--ink)}

  /* WORK: no tiny filter rail on phones. The list itself is the navigation. */
  .work-tags{display:none!important}
  .work-index{padding-top:74px}
  .work-index-head{margin-bottom:28px}
  .work-list{border-top:1px solid var(--line-soft)}
  .work-row{min-height:76px;padding-top:14px;padding-bottom:14px}

  /* Inner pages inherit the same full-screen menu. */
  .site-header .menu-system{position:relative;z-index:3000}
}

@media(max-width:390px){
  .node:nth-child(n){max-width:72vw}
  .menu-panel{padding-left:16px;padding-right:16px}
}


/* ============================================================
   MOBILE V15 — STATIC IMAGE ARCHIVE + TRUE CENTERED MENU ROWS
   Mobile HOME is deliberately simple: real/dithered image cards,
   corner boxes, no acquisition UI, no connector lines, no hover logic.
   ============================================================ */
@media(max-width:820px){
  /* Critical: anchors are inline by default; make each mobile image node
     a real block so its width/aspect-ratio produces a visible image card. */
  .landing #nodes .node{
    display:block!important;
  }
  .landing .node-visual{
    display:block!important;
    width:100%!important;
    height:auto!important;
  }
  .landing .image-window{
    display:block!important;
  }

  /* Mobile HOME is not interactive beyond normal navigation. */
  .landing .node-hit,
  .landing .mobile-acquire{
    display:none!important;
  }
  .landing .node.is-active{
    margin-bottom:0!important;
    z-index:4!important;
  }
  .landing .node.is-active .node-img,
  .landing .node-img{
    transform:scale(1.035)!important;
  }
  .landing .node.is-active .corner,
  .landing .corner{
    width:14px!important;
    height:14px!important;
  }
  .landing .node.is-active .track-box,
  .landing .track-box{
    border-color:var(--line)!important;
  }

  /* No hover/acquisition reveal on touch. Dark mode simply displays the
     supplied dither asset; light mode displays the original image. */
  html[data-theme="dark"] .landing .node-img-dither{opacity:1!important}
  html[data-theme="dark"] .landing .node-img-original{opacity:0!important}
  html[data-theme="light"] .landing .node-img-dither{opacity:0!important}
  html[data-theme="light"] .landing .node-img-original{opacity:1!important}

  /* Full-screen mobile menu: each word is optically centered within
     the ruled row rather than sitting high/low against the divider. */
  .menu-panel a{
    display:flex!important;
    align-items:center!important;
    min-height:74px!important;
    padding:0 8px!important;
    line-height:1!important;
  }
  .menu-panel [data-theme-toggle]{
    display:flex!important;
    align-items:center!important;
    min-height:66px!important;
    padding:0 10px!important;
    line-height:1!important;
  }
}

/* ============================================================
   MOBILE V18 — AUTHORED FIELD + STRONG SCROLL FOCUS
   The phone HOME is a long graphic composition: connected boxes,
   live X/Y labels and no hover/acquisition UI. Scroll position grows
   the card nearest the viewport focus line. Mobile uses originals only.
   ============================================================ */
@media(max-width:820px){
  /* MOBILE MENU — fixed row geometry + optical baseline correction */
  .menu-panel{
    padding:88px 18px 24px!important;
  }
  .menu-panel a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    height:78px!important;
    min-height:78px!important;
    padding:0.06em 12px 0!important;
    line-height:1!important;
    border-bottom:1px solid var(--line-soft)!important;
    transform:none!important;
  }
  .menu-panel [data-theme-toggle]{
    display:flex!important;
    align-items:center!important;
    height:68px!important;
    min-height:68px!important;
    padding:0.05em 12px 0!important;
    line-height:1!important;
  }

  /* HOME layout */
  .landing{padding:82px 0 104px!important;overflow:visible!important}
  .landing .world-shell{position:relative!important;overflow:visible!important;width:100%!important}
  .landing .world{position:relative!important;width:100%!important;height:auto!important;overflow:visible!important}
  .landing #nodes{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(92px,24vw,150px)!important;
    padding:64px 16px 132px!important;
    overflow:visible!important;
  }
  .landing .network{
    display:block!important;
    position:absolute!important;
    inset:0 auto auto 0!important;
    z-index:1!important;
    pointer-events:none!important;
    overflow:visible!important;
  }
  .landing .network line.mobile-static-line{
    stroke:var(--line)!important;
    stroke-width:1!important;
    opacity:.34!important;
    vector-effect:non-scaling-stroke!important;
  }
  html[data-theme="dark"] .landing .network line.mobile-static-line{opacity:.28!important}

  .landing .node.mobile-hide{display:none!important}
  .landing #nodes .node{
    display:block!important;
    position:relative!important;
    left:auto!important;top:auto!important;
    width:clamp(154px,52vw,238px)!important;
    height:auto!important;
    max-width:68vw!important;
    margin:0!important;
    opacity:1!important;
    transform:none!important;
    z-index:4!important;
  }

  /* Authored positions: intentionally varied, not a regular feed. */
  .landing .node[data-index="0"]{align-self:flex-start!important;margin-left:4vw!important;width:58vw!important}
  .landing .node[data-index="2"]{align-self:flex-end!important;margin-right:2vw!important;width:43vw!important;margin-top:0!important}
  .landing .node[data-index="5"]{align-self:center!important;margin-left:13vw!important;width:55vw!important}
  .landing .node[data-index="7"]{align-self:flex-start!important;margin-left:1vw!important;width:42vw!important;margin-top:0!important}
  .landing .node[data-index="10"]{align-self:flex-end!important;margin-right:6vw!important;width:62vw!important}
  .landing .node[data-index="12"]{align-self:flex-start!important;margin-left:12vw!important;width:46vw!important;margin-top:0!important}
  .landing .node[data-index="15"]{align-self:flex-end!important;margin-right:0!important;width:52vw!important}
  .landing .node[data-index="17"]{align-self:center!important;margin-left:-11vw!important;width:44vw!important;margin-top:0!important}
  .landing .node[data-index="19"]{align-self:flex-start!important;margin-left:3vw!important;width:56vw!important}
  .landing .node[data-index="21"]{align-self:flex-end!important;margin-right:5vw!important;width:49vw!important;margin-top:0!important}
  .landing .node[data-index="23"]{align-self:center!important;margin-left:10vw!important;width:60vw!important}
  .landing .node[data-index="25"]{align-self:flex-start!important;margin-left:9vw!important;width:43vw!important;margin-top:0!important}
  .landing .node[data-index="27"]{align-self:flex-end!important;margin-right:1vw!important;width:55vw!important}
  .landing .node[data-index="30"]{align-self:center!important;margin-left:-14vw!important;width:47vw!important;margin-top:0!important}
  .landing .node[data-index="32"]{align-self:flex-end!important;margin-right:10vw!important;width:58vw!important}

  /* Controlled irregular vertical rhythm. Larger pauses make each object
     earn a clear focus moment and expose more of the connector network. */
  .landing .node[data-index="0"]{margin-bottom:34px!important}
  .landing .node[data-index="2"]{margin-bottom:78px!important}
  .landing .node[data-index="5"]{margin-bottom:18px!important}
  .landing .node[data-index="7"]{margin-bottom:92px!important}
  .landing .node[data-index="10"]{margin-bottom:44px!important}
  .landing .node[data-index="12"]{margin-bottom:112px!important}
  .landing .node[data-index="15"]{margin-bottom:26px!important}
  .landing .node[data-index="17"]{margin-bottom:84px!important}
  .landing .node[data-index="19"]{margin-bottom:54px!important}
  .landing .node[data-index="21"]{margin-bottom:104px!important}
  .landing .node[data-index="23"]{margin-bottom:30px!important}
  .landing .node[data-index="25"]{margin-bottom:76px!important}
  .landing .node[data-index="27"]{margin-bottom:48px!important}
  .landing .node[data-index="30"]{margin-bottom:96px!important}

  /* Keep a controlled family of crop windows. */
  .landing .node-visual{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/5!important;
    transform:scale(var(--mobile-card-scale,1))!important;
    transform-origin:center!important;
    transition:none!important;
    will-change:transform!important;
  }
  .landing .node[data-index="2"] .node-visual,
  .landing .node[data-index="7"] .node-visual,
  .landing .node[data-index="17"] .node-visual,
  .landing .node[data-index="25"] .node-visual{aspect-ratio:1/1!important}
  .landing .node[data-index="5"] .node-visual,
  .landing .node[data-index="12"] .node-visual,
  .landing .node[data-index="30"] .node-visual{aspect-ratio:3/4!important}

  .landing .image-window{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    overflow:hidden!important;
    opacity:1!important;
    outline:1px solid var(--line)!important;
    background:var(--surface)!important;
  }
  .landing .node-img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;height:100%!important;
    object-fit:cover!important;
    transform:scale(var(--mobile-image-scale,1.01))!important;
    transform-origin:center!important;
    transition:none!important;
    will-change:opacity,transform!important;
  }
  /* Mobile uses the real portfolio image in both modes. Dither stays desktop-only. */
  html[data-theme="light"] .landing .node-img-original,
  html[data-theme="dark"] .landing .node-img-original{opacity:1!important}
  html[data-theme="light"] .landing .node-img-dither,
  html[data-theme="dark"] .landing .node-img-dither{display:none!important;opacity:0!important}

  /* No hover/acquisition cards. Every image keeps a live machine readout. */
  .landing .node-hit,.landing .mobile-acquire,.landing .track-index{display:none!important}
  .landing .track-label{
    display:flex!important;
    position:absolute!important;
    left:0!important;top:-22px!important;
    align-items:center!important;gap:5px!important;
    width:max-content!important;max-width:76vw!important;
    padding:2px 4px 2px 0!important;
    background:var(--bg-soft)!important;color:var(--ink)!important;
    font-size:6.5px!important;line-height:1!important;
    letter-spacing:.045em!important;text-transform:uppercase!important;
    white-space:nowrap!important;opacity:1!important;
  }
  .landing .track-label b{font-weight:700!important}
  .landing .track-label .track-status{display:none!important}
  .landing .track-label .track-dot{width:4px!important;height:4px!important;flex:0 0 4px!important}
  .landing .track-label .track-coord{display:inline!important;color:var(--ink-soft)!important;font-variant-numeric:tabular-nums!important}
  .landing .track-box{
    display:block!important;
    inset:-7px!important;
    opacity:1!important;
    border:1px solid var(--line)!important;
    pointer-events:none!important;
  }
  .landing .corner,.landing .node.is-active .corner{
    width:15px!important;height:15px!important;border-color:var(--ink)!important
  }
  html[data-theme="dark"] .landing .corner{border-color:var(--ink)!important}
  .landing .node.is-active{margin:0!important;z-index:4!important}
  .landing .node.mobile-focus .track-box{border-color:var(--ink)!important}
  .landing .node.mobile-focus .corner{width:18px!important;height:18px!important}

  /* Sparse, static micro-copy embedded in the composition. */
  .landing .node.has-mobile-note::before{
    content:attr(data-mobile-note);
    display:block!important;
    position:absolute!important;
    z-index:8!important;
    top:-43px!important;
    left:-7px!important;
    width:max-content!important;
    max-width:74vw!important;
    font-size:6.5px!important;
    line-height:1.15!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    color:var(--ink-soft)!important;
    background:var(--bg-soft)!important;
    padding:3px 4px 2px!important;
    pointer-events:none!important;
  }
  .landing .node[data-index="10"]::before,
  .landing .node[data-index="21"]::before,
  .landing .node[data-index="32"]::before{left:auto!important;right:-6px!important;text-align:right!important}

  /* WORK mobile remains tap-to-preview; filters stay hidden. */
  .work-tags{display:none!important}
}

@media(max-width:390px){
  .landing #nodes{padding-left:13px!important;padding-right:13px!important}
  .landing #nodes .node{max-width:70vw!important}
  .menu-panel{padding-left:14px!important;padding-right:14px!important}
}

/* ============================================================
   MOBILE V19 — CURATED NODE VISIBILITY FIX
   A later #nodes rule had higher CSS specificity than .mobile-hide,
   causing desktop-only nodes to leak into mobile while JS correctly
   skipped them. Keep the curated mobile set as the only visible nodes.
   ============================================================ */
@media(max-width:820px){
  .landing #nodes .node.mobile-hide{
    display:none!important;
  }
}

/* ============================================================
   MOBILE V20 — SHARED HEADER + OPTICAL MENU + WIDER FIELD RHYTHM
   One 58px header geometry across HOME / WORK / inner pages.
   Menu labels get an explicit optical baseline adjustment for AO Mono.
   HOME keeps the V18 focus system but starts smaller and uses a more
   authored, irregular rhythm so the connector network has room to read.
   ============================================================ */
@media(max-width:820px){
  :root{--mobile-header-h:58px}

  /* ---------- Shared mobile header geometry ---------- */
  .mobile-home-brand{
    top:0!important;left:0!important;height:var(--mobile-header-h)!important;
    display:flex!important;align-items:center!important;
    padding:3px 12px 0!important;background:var(--bg)!important;
    line-height:1!important;
  }
  .landing > .menu-system,
  body > .menu-system{
    top:0!important;right:12px!important;height:var(--mobile-header-h)!important;
    display:flex!important;align-items:center!important;
  }
  .landing > .menu-system .menu-toggle,
  body > .menu-system .menu-toggle{
    min-height:0!important;height:var(--mobile-header-h)!important;
    display:flex!important;align-items:center!important;
    padding:3px 0 0 10px!important;background:var(--bg)!important;
  }

  /* Project / Contact / About / Playground use the exact same 3-zone header. */
  .site-header{
    height:var(--mobile-header-h)!important;min-height:var(--mobile-header-h)!important;
    padding:0 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    background:var(--bg)!important;
  }
  .site-header .brand{
    grid-column:1!important;justify-self:start!important;
    display:flex!important;align-items:center!important;
    min-height:0!important;height:var(--mobile-header-h)!important;
    padding:3px 0 0!important;background:transparent!important;
    font-size:7px!important;line-height:1!important;
  }
  .site-header .header-right{display:contents!important}
  .site-header .header-badge{
    grid-column:2!important;justify-self:center!important;
    display:flex!important;align-items:center!important;
    min-height:0!important;height:var(--mobile-header-h)!important;
    padding:3px 8px 0!important;background:transparent!important;
    font-size:7px!important;line-height:1!important;white-space:nowrap!important;
  }
  .site-header .menu-system{
    grid-column:3!important;justify-self:end!important;
    position:relative!important;height:var(--mobile-header-h)!important;
    display:flex!important;align-items:center!important;
  }
  .site-header .menu-toggle{
    min-height:0!important;height:var(--mobile-header-h)!important;
    display:flex!important;align-items:center!important;
    padding:3px 0 0 10px!important;background:transparent!important;
  }

  /* WORK gets the same left / center / right header geometry. */
  .work-index-head{
    position:fixed!important;z-index:1450!important;
    top:0!important;left:0!important;right:0!important;
    height:var(--mobile-header-h)!important;
    margin:0!important;padding:0 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    background:var(--bg)!important;
    font-size:7px!important;line-height:1!important;
    letter-spacing:.08em!important;text-transform:uppercase!important;
  }
  .work-head-primary{display:contents!important}
  .work-head-brand{
    grid-column:1!important;justify-self:start!important;
    display:flex!important;align-items:center!important;
    height:var(--mobile-header-h)!important;padding-top:3px!important;
  }
  .work-head-divider{display:none!important}
  .work-head-section{
    grid-column:2!important;justify-self:center!important;
    display:flex!important;align-items:center!important;
    height:var(--mobile-header-h)!important;padding-top:3px!important;
  }
  .work-head-context{display:none!important}
  .work-index{padding-top:92px!important}

  /* ---------- Full-screen menu: optically center AO Mono in each ruled row ---------- */
  .menu-panel{padding:88px 18px 24px!important}
  .menu-panel a{
    position:relative!important;
    display:flex!important;align-items:center!important;
    height:82px!important;min-height:82px!important;
    padding:0 12px!important;
    line-height:1!important;
    border-bottom:1px solid var(--line-soft)!important;
  }
  .menu-panel a > .menu-label{
    display:block!important;
    line-height:1!important;
    transform:translateY(5px)!important;
  }
  .menu-panel [data-theme-toggle]{
    display:flex!important;align-items:center!important;
    height:70px!important;min-height:70px!important;
    padding:0 12px!important;line-height:1!important;
  }
  .menu-panel [data-theme-label]{
    display:block!important;line-height:1!important;
    transform:translateY(4px)!important;
  }

  /* ---------- HOME: smaller resting cards + intentionally irregular vertical rhythm ---------- */
  .landing{padding-top:calc(var(--mobile-header-h) + 24px)!important}
  .landing #nodes{
    gap:clamp(56px,14vw,84px)!important;
    padding:72px 16px 164px!important;
  }

  /* Smaller resting footprints. Focus-scale JS is unchanged, so the contrast
     between resting and acquired-in-scroll states becomes stronger. */
  .landing .node[data-index="0"]{width:48vw!important}
  .landing .node[data-index="2"]{width:35vw!important}
  .landing .node[data-index="5"]{width:45vw!important}
  .landing .node[data-index="7"]{width:34vw!important}
  .landing .node[data-index="10"]{width:50vw!important}
  .landing .node[data-index="12"]{width:38vw!important}
  .landing .node[data-index="15"]{width:44vw!important}
  .landing .node[data-index="17"]{width:36vw!important}
  .landing .node[data-index="19"]{width:46vw!important}
  .landing .node[data-index="21"]{width:40vw!important}
  .landing .node[data-index="23"]{width:49vw!important}
  .landing .node[data-index="25"]{width:35vw!important}
  .landing .node[data-index="27"]{width:45vw!important}
  .landing .node[data-index="30"]{width:38vw!important}
  .landing .node[data-index="32"]{width:47vw!important}

  /* Authored pauses: not random on each load, but deliberately uneven. */
  .landing .node[data-index="0"]{margin-bottom:58px!important}
  .landing .node[data-index="2"]{margin-bottom:142px!important}
  .landing .node[data-index="5"]{margin-bottom:34px!important}
  .landing .node[data-index="7"]{margin-bottom:184px!important}
  .landing .node[data-index="10"]{margin-bottom:72px!important}
  .landing .node[data-index="12"]{margin-bottom:156px!important}
  .landing .node[data-index="15"]{margin-bottom:42px!important}
  .landing .node[data-index="17"]{margin-bottom:132px!important}
  .landing .node[data-index="19"]{margin-bottom:86px!important}
  .landing .node[data-index="21"]{margin-bottom:174px!important}
  .landing .node[data-index="23"]{margin-bottom:52px!important}
  .landing .node[data-index="25"]{margin-bottom:126px!important}
  .landing .node[data-index="27"]{margin-bottom:78px!important}
  .landing .node[data-index="30"]{margin-bottom:162px!important}

  /* Make the static line network a visible compositional layer, especially in dark mode. */
  .landing .network line.mobile-static-line{opacity:.42!important}
  html[data-theme="dark"] .landing .network line.mobile-static-line{opacity:.52!important}
}

@media(max-width:390px){
  .site-header,.work-index-head{padding-left:10px!important;padding-right:10px!important}
  .landing .node[data-index="0"],.landing .node[data-index="10"],.landing .node[data-index="23"],.landing .node[data-index="32"]{max-width:50vw!important}
}

/* ============================================================
   V21 — HOME HEADER SURFACE
   HOME now uses a continuous fixed header surface like the rest
   of the site, so imagery/lines never show through between the
   left system label and the menu control.
   ============================================================ */
.landing::before{
  content:"";
  position:fixed;
  z-index:505;
  left:0;
  right:0;
  top:0;
  height:38px;
  background:var(--bg);
  pointer-events:none;
}

@media(max-width:820px){
  .landing::before{
    z-index:1500;
    height:var(--mobile-header-h,58px);
    background:var(--bg);
  }
  .mobile-home-brand,
  .landing > .menu-system{
    z-index:1580!important;
  }
}


/* ============================================================
   MOBILE V22 — PULLED-BACK STARTING FIELD
   The phone HOME now begins at a wider visual "zoom level":
   3–4 scattered objects can coexist in the first viewport, with
   smaller resting frames and authored uneven pauses. Scroll focus
   still brings the nearest object dramatically forward.
   ============================================================ */
@media(max-width:820px){
  .landing #nodes{
    gap:clamp(24px,7vw,42px)!important;
    padding:58px 16px 150px!important;
  }

  /* Smaller resting footprints — deliberately mixed rather than uniform. */
  .landing .node[data-index="0"]{width:38vw!important;margin-bottom:18px!important}
  .landing .node[data-index="2"]{width:28vw!important;margin-bottom:52px!important}
  .landing .node[data-index="5"]{width:34vw!important;margin-bottom:12px!important}
  .landing .node[data-index="7"]{width:26vw!important;margin-bottom:68px!important}
  .landing .node[data-index="10"]{width:40vw!important;margin-bottom:30px!important}
  .landing .node[data-index="12"]{width:30vw!important;margin-bottom:82px!important}
  .landing .node[data-index="15"]{width:35vw!important;margin-bottom:16px!important}
  .landing .node[data-index="17"]{width:27vw!important;margin-bottom:62px!important}
  .landing .node[data-index="19"]{width:36vw!important;margin-bottom:38px!important}
  .landing .node[data-index="21"]{width:31vw!important;margin-bottom:76px!important}
  .landing .node[data-index="23"]{width:39vw!important;margin-bottom:22px!important}
  .landing .node[data-index="25"]{width:27vw!important;margin-bottom:58px!important}
  .landing .node[data-index="27"]{width:34vw!important;margin-bottom:34px!important}
  .landing .node[data-index="30"]{width:29vw!important;margin-bottom:72px!important}
  .landing .node[data-index="32"]{width:37vw!important;margin-bottom:28px!important}

  /* Preserve the authored lateral scatter, but open the field a touch. */
  .landing .node[data-index="0"]{margin-left:3vw!important}
  .landing .node[data-index="2"]{margin-right:5vw!important}
  .landing .node[data-index="5"]{margin-left:18vw!important}
  .landing .node[data-index="7"]{margin-left:0!important}
  .landing .node[data-index="10"]{margin-right:3vw!important}
  .landing .node[data-index="12"]{margin-left:15vw!important}
  .landing .node[data-index="15"]{margin-right:1vw!important}
  .landing .node[data-index="17"]{margin-left:-8vw!important}
  .landing .node[data-index="19"]{margin-left:5vw!important}
  .landing .node[data-index="21"]{margin-right:8vw!important}
  .landing .node[data-index="23"]{margin-left:12vw!important}
  .landing .node[data-index="25"]{margin-left:6vw!important}
  .landing .node[data-index="27"]{margin-right:2vw!important}
  .landing .node[data-index="30"]{margin-left:-10vw!important}
  .landing .node[data-index="32"]{margin-right:7vw!important}

  /* Labels scale back with the resting field so they read as micrographics. */
  .landing .track-label{top:-20px!important;font-size:6px!important}
  .landing .node.has-mobile-note::before{top:-39px!important;font-size:6px!important}
}

@media(max-width:390px){
  .landing #nodes .node{max-width:42vw!important}
}


/* ============================================================
   MOBILE V23 — FOUR-OBJECT RESTING FIELD
   Pull the initial phone composition back one more step so the
   first viewport reads as a field of ~4 objects, not 2–3 large
   cards. Spacing stays authored and irregular; focus animation
   remains a separate foreground event once scrolling begins.
   ============================================================ */
@media(max-width:820px){
  .landing #nodes{
    gap:clamp(16px,4.5vw,28px)!important;
    padding:48px 16px 150px!important;
  }

  /* Resting scale family: 22–34vw. The first four visible objects
     are deliberately small enough to coexist in one phone viewport. */
  .landing .node[data-index="0"]{width:28vw!important;margin-bottom:22px!important}
  .landing .node[data-index="2"]{width:22vw!important;margin-bottom:46px!important}
  .landing .node[data-index="5"]{width:25vw!important;margin-bottom:18px!important}
  .landing .node[data-index="7"]{width:23vw!important;margin-bottom:70px!important}

  .landing .node[data-index="10"]{width:32vw!important;margin-bottom:28px!important}
  .landing .node[data-index="12"]{width:24vw!important;margin-bottom:96px!important}
  .landing .node[data-index="15"]{width:29vw!important;margin-bottom:20px!important}
  .landing .node[data-index="17"]{width:22vw!important;margin-bottom:62px!important}
  .landing .node[data-index="19"]{width:30vw!important;margin-bottom:34px!important}
  .landing .node[data-index="21"]{width:25vw!important;margin-bottom:108px!important}
  .landing .node[data-index="23"]{width:33vw!important;margin-bottom:24px!important}
  .landing .node[data-index="25"]{width:23vw!important;margin-bottom:58px!important}
  .landing .node[data-index="27"]{width:28vw!important;margin-bottom:38px!important}
  .landing .node[data-index="30"]{width:24vw!important;margin-bottom:118px!important}
  .landing .node[data-index="32"]{width:31vw!important;margin-bottom:30px!important}

  /* Re-compose the opening field so the first screen immediately
     shows different horizontal anchors rather than one visual column. */
  .landing .node[data-index="0"]{align-self:flex-start!important;margin-left:4vw!important}
  .landing .node[data-index="2"]{align-self:flex-end!important;margin-right:7vw!important}
  .landing .node[data-index="5"]{align-self:center!important;margin-left:10vw!important}
  .landing .node[data-index="7"]{align-self:flex-start!important;margin-left:14vw!important}

  /* Keep later objects distributed across the canvas. */
  .landing .node[data-index="10"]{margin-right:2vw!important}
  .landing .node[data-index="12"]{margin-left:17vw!important}
  .landing .node[data-index="15"]{margin-right:4vw!important}
  .landing .node[data-index="17"]{margin-left:-5vw!important}
  .landing .node[data-index="19"]{margin-left:8vw!important}
  .landing .node[data-index="21"]{margin-right:10vw!important}
  .landing .node[data-index="23"]{margin-left:15vw!important}
  .landing .node[data-index="25"]{margin-left:4vw!important}
  .landing .node[data-index="27"]{margin-right:5vw!important}
  .landing .node[data-index="30"]{margin-left:-7vw!important}
  .landing .node[data-index="32"]{margin-right:9vw!important}

  .landing .track-label{font-size:5.8px!important;top:-19px!important}
  .landing .node.has-mobile-note::before{font-size:5.8px!important;top:-37px!important}
}

@media(max-width:390px){
  .landing #nodes .node{max-width:35vw!important}
}

/* Production archive blocks */
.media-grid.one{grid-template-columns:1fr}
.archive-media{position:relative}
.archive-caption{font-size:9px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;padding:10px clamp(18px,2.1vw,38px) 0;color:var(--ink-soft)}
.archive-media .archive-caption{padding-left:0;padding-right:0}
.archive-caption-wide{margin:0 clamp(18px,2.1vw,38px) 32px}
.archive-embed{margin:0 clamp(18px,2.1vw,38px) 32px;position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.archive-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){.archive-embed{margin-left:12px;margin-right:12px}.archive-caption-wide{margin-left:12px;margin-right:12px}}

/* Production archive blocks */
.media-grid.one{grid-template-columns:1fr}
.archive-media{position:relative}
.archive-caption{font-size:9px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;padding:10px clamp(18px,2.1vw,38px) 0;color:var(--ink-soft)}
.archive-media .archive-caption{padding-left:0;padding-right:0}
.archive-caption-wide{margin:0 clamp(18px,2.1vw,38px) 32px}
.archive-embed{margin:0 clamp(18px,2.1vw,38px) 32px;position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.archive-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){.archive-embed{margin-left:12px;margin-right:12px}.archive-caption-wide{margin-left:12px;margin-right:12px}}

/* ============================================================
   PRODUCTION V2 — PROJECT HERO SAFETY + DATA-DRIVEN HOME
   ============================================================ */

/* Migrated portfolio projects: give the number/title the full page width,
   then split summary + metadata on the following row. This prevents long
   titles from colliding with project metadata. */
.portfolio-project .project-intro{
  grid-template-columns:minmax(0,1fr) minmax(280px,.46fr);
  grid-template-areas:
    "kicker kicker"
    "title title"
    "summary meta";
  column-gap:clamp(44px,7vw,128px);
  row-gap:0;
  align-items:start;
}
.portfolio-project .project-intro > div:first-child{display:contents}
.portfolio-project .project-kicker{grid-area:kicker;margin:0 0 22px}
.portfolio-project .project-title-index{
  grid-area:title;
  width:100%;max-width:none;
  margin:0 0 clamp(34px,4vw,68px);
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,3vw,54px);
  align-items:start;
}
.portfolio-project .project-title-index .project-title-num{
  font-size:clamp(46px,5.8vw,96px);
  line-height:var(--display-line-height);
}
.portfolio-project .project-title-index .project-title{
  min-width:0;
  max-width:none;
  font-size:clamp(58px,8.4vw,154px);
  line-height:var(--display-line-height);
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.portfolio-project .project-summary{
  grid-area:summary;
  margin:0;
  align-self:start;
  max-width:900px;
}
.portfolio-project .project-meta{
  grid-area:meta;
  align-self:start;
  min-width:0;
  padding:0;
}
.portfolio-project .project-meta dd{overflow-wrap:anywhere}

/* Curated HOME images without a purpose-built dither asset stay visible in
   dark mode instead of falling transparent. */
.landing .node.no-dither .node-img-original{opacity:1!important}
html[data-theme="dark"] .landing .node.no-dither.is-active .node-img-original{opacity:1!important}

@media(max-width:1100px) and (min-width:821px){
  .portfolio-project .project-title-index .project-title{font-size:clamp(54px,8vw,116px)}
  .portfolio-project .project-title-index .project-title-num{font-size:clamp(42px,5.4vw,76px)}
}

@media(max-width:820px){
  .portfolio-project .project-intro{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"kicker" "title" "summary" "meta"!important;
    row-gap:0!important;
    padding-bottom:48px!important;
  }
  .portfolio-project .project-kicker{margin-bottom:18px!important}
  .portfolio-project .project-title-index{
    margin-bottom:28px!important;
    column-gap:10px!important;
  }
  .portfolio-project .project-title-index .project-title-num{
    font-size:10.5vw!important;
    line-height:var(--display-line-height)!important;
  }
  .portfolio-project .project-title-index .project-title{
    font-size:clamp(42px,15vw,78px)!important;
    line-height:var(--display-line-height)!important;
    overflow-wrap:anywhere;
  }
  .portfolio-project .project-summary{font-size:21px!important;margin-bottom:30px!important}
  .portfolio-project .project-meta{padding-top:0!important}

  /* V2 HOME uses the first 15 selected items as the authored mobile sequence.
     data-mobile-slot decouples mobile composition from desktop node count. */
  .landing .node[data-mobile-slot="0"]{width:28vw!important;margin-bottom:22px!important;align-self:flex-start!important;margin-left:4vw!important}
  .landing .node[data-mobile-slot="1"]{width:22vw!important;margin-bottom:46px!important;align-self:flex-end!important;margin-right:7vw!important}
  .landing .node[data-mobile-slot="2"]{width:25vw!important;margin-bottom:18px!important;align-self:center!important;margin-left:10vw!important}
  .landing .node[data-mobile-slot="3"]{width:23vw!important;margin-bottom:70px!important;align-self:flex-start!important;margin-left:14vw!important}
  .landing .node[data-mobile-slot="4"]{width:32vw!important;margin-bottom:28px!important;align-self:flex-end!important;margin-right:2vw!important}
  .landing .node[data-mobile-slot="5"]{width:24vw!important;margin-bottom:96px!important;align-self:flex-start!important;margin-left:17vw!important}
  .landing .node[data-mobile-slot="6"]{width:29vw!important;margin-bottom:20px!important;align-self:flex-end!important;margin-right:4vw!important}
  .landing .node[data-mobile-slot="7"]{width:22vw!important;margin-bottom:62px!important;align-self:flex-start!important;margin-left:2vw!important}
  .landing .node[data-mobile-slot="8"]{width:30vw!important;margin-bottom:34px!important;align-self:center!important;margin-left:8vw!important}
  .landing .node[data-mobile-slot="9"]{width:25vw!important;margin-bottom:108px!important;align-self:flex-end!important;margin-right:10vw!important}
  .landing .node[data-mobile-slot="10"]{width:33vw!important;margin-bottom:24px!important;align-self:flex-start!important;margin-left:15vw!important}
  .landing .node[data-mobile-slot="11"]{width:23vw!important;margin-bottom:58px!important;align-self:flex-start!important;margin-left:4vw!important}
  .landing .node[data-mobile-slot="12"]{width:28vw!important;margin-bottom:38px!important;align-self:flex-end!important;margin-right:5vw!important}
  .landing .node[data-mobile-slot="13"]{width:24vw!important;margin-bottom:118px!important;align-self:flex-start!important;margin-left:1vw!important}
  .landing .node[data-mobile-slot="14"]{width:31vw!important;margin-bottom:30px!important;align-self:flex-end!important;margin-right:9vw!important}
}

/* AJ.SYS CMS dynamic content */
.archive-media video,.embed-block iframe{display:block;width:100%;border:0;background:#0d0d0b}
.archive-media video{height:auto;max-height:92vh}
.embed-block iframe{aspect-ratio:16/9;min-height:320px}
.cms-spacer.small{height:4vh}.cms-spacer.medium{height:9vh}.cms-spacer.large{height:16vh}
@media(max-width:820px){.embed-block iframe{min-height:0;aspect-ratio:16/9}.cms-spacer.small{height:24px}.cms-spacer.medium{height:48px}.cms-spacer.large{height:84px}}


/* CMS GLOBAL DESIGN TOKENS — defaults preserve the existing AJ.SYS look. */
.project-title,.project-title-index .project-title-num,.work-title,.center-main{font-family:var(--font-display);letter-spacing:var(--display-tracking)}
.project-title,.project-title-index .project-title-num{line-height:var(--display-line-height)}
.project-summary,.project-copy,.about-copy,.contact-side>p,.form-field input,.form-field textarea{font-family:var(--font-body);letter-spacing:var(--body-tracking)}
.project-text p{line-height:var(--body-line-height)}
.brand,.header-badge,.project-kicker,.project-meta,.project-text h2,.project-chip,.meta-badge,.work-tag,.work-num,.work-meta,.micro,.track-label,.track-index,.menu-system,.project-footer,.project-end-link,.media-caption{font-family:var(--font-utility);letter-spacing:var(--utility-tracking)}

/* CMS gallery grid v2: structured rows + editable image/text cells. */
.cms-gallery-grid{display:block!important;width:100%}
.cms-gallery-row{display:grid;grid-template-columns:var(--cms-gallery-cols,1fr);width:100%;align-items:stretch}
.cms-gallery-cell{min-width:0;overflow:hidden}
.cms-gallery-cell>.media-block{width:100%;height:100%;margin:0}
.cms-gallery-cell>.media-block img{width:100%;height:100%;object-fit:cover;display:block}
.cms-gallery-cell-text{display:flex;align-items:stretch;background:var(--bg)}
.cms-gallery-text{width:100%;min-height:100%;padding:clamp(28px,5vw,84px);display:flex;flex-direction:column;justify-content:center}
.cms-gallery-text>*:first-child{margin-top:0}.cms-gallery-text>*:last-child{margin-bottom:0}
@media(max-width:820px){
  .cms-gallery-row{grid-template-columns:1fr!important}
  .cms-gallery-cell>.media-block img{height:auto;object-fit:contain}
  .cms-gallery-text{padding:28px 18px}
}

/* VISUAL EDITOR v3 — responsive block sizing + gallery spacing ---------------- */
/* Captions get a small readable inset even when the image itself is full bleed. */
.media-caption{padding-left:clamp(12px,1.25vw,20px);padding-right:clamp(12px,1.25vw,20px)}

/* Image block desktop layout controls. */
.media-block[data-cms-custom-layout="1"]{box-sizing:border-box}
.media-block[data-cms-custom-layout="1"] img{max-height:var(--cms-block-max-height,none);object-fit:contain}

/* Gallery v3 controls. Legacy galleries without layout data keep the old page inset. */
.cms-gallery-grid[data-cms-custom-layout="1"]{width:var(--cms-gallery-width,100%)!important;max-width:100%;padding-left:0!important;padding-right:0!important;box-sizing:border-box}
.cms-gallery-row{column-gap:var(--cms-gallery-column-gap,24px);margin-bottom:var(--cms-gallery-row-gap,24px)}
.cms-gallery-row:last-of-type{margin-bottom:0}
.cms-gallery-cell{padding:var(--cms-gallery-cell-padding,0px);box-sizing:border-box}
.cms-gallery-text{justify-content:var(--cms-cell-v-align,center);text-align:var(--cms-cell-h-align,left)}

@media(max-width:820px){
  /* Desktop width / height choices never make mobile artwork feel timid. */
  .media-block[data-cms-custom-layout="1"],
  .cms-gallery-grid[data-cms-custom-layout="1"]{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  .media-block[data-cms-custom-layout="1"] img{max-height:none!important;width:100%!important;height:auto!important;object-fit:contain!important}
  .cms-gallery-grid[data-cms-custom-layout="1"]{padding-left:0!important;padding-right:0!important}
  .cms-gallery-row{column-gap:0}
}

/* VIDEO BLOCK — merge candidate */
.video-block video{display:block;width:100%;height:auto;background:#0d0d0b}
.video-block[data-cms-custom-layout="1"] video{max-height:var(--cms-block-max-height,none);object-fit:contain}
@media(max-width:820px){
  .video-block[data-cms-custom-layout="1"]{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  .video-block[data-cms-custom-layout="1"] video{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
}