/* ==========================================================================
   Rampradeep Cholan — Full-Stack Experience Design Leader
   "Paper workspace" system: hairline frame, ruled gutters, lime accent.
   ========================================================================== */

:root {
  /* paper + ink: green-tinted neutrals tuned to the lime accent */
  --paper: #FAFBF4;
  --paper-2: #FDFEF8;
  --paper-3: #F0F3E3;
  --paper-4: #E6EAD3;
  --ink: #12150B;
  --ink-2: #4A4F3D;
  --ink-3: #62675A;        /* small text: ≥4.7:1 on every paper */
  --ink-3-deco: #8A8F7A;   /* large headings + line art only */
  --ink-4: #C3C8B2;
  --line: rgba(18, 21, 11, .10);
  --line-2: rgba(18, 21, 11, .06);
  --line-3: rgba(18, 21, 11, .18);
  /* accent (theme colour) */
  --amber: #DDFF00;
  --amber-hover: #CCEB00;
  --amber-deep: #5A6600;   /* accent for text/lines on paper: 6:1 */
  --amber-side: #C6E400;
  --amber-side-2: #AECA00;
  --focus: #12150B;
  --note-lav: #E8E4F7;
  --note-blue: #DDEBF2;
  --term-bg: #14170D;
  --term-ink: #EEF2E0;
  --term-dim: #949983;
  --gutter: #F3F5EA;
  --rule: rgba(18, 21, 11, .045);
  --iso-top: #FDFEF8;
  --iso-left: #EEF1E2;
  --iso-right: #DFE4CC;
  --iso-stroke: #555A47;
  --shadow: 0 30px 60px -48px rgba(18, 21, 11, .45);

  --sans: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --frame: 1312px;
  --pad: clamp(20px, 3.2vw, 44px);
  --sec-pad: clamp(88px, 14vh, 168px);
  --fs-h1: clamp(38px, 4.05vw, 58px);
  --fs-h2: clamp(30px, 2.85vw, 41px);
  --fs-h3: clamp(24px, 2.15vw, 30px);
  --fs-lead: clamp(17px, 1.35vw, 19px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0E100A;
  --paper-2: #121509;
  --paper-3: #191C12;
  --paper-4: #21251A;
  --ink: #EEF2E0;
  --ink-2: #B5BAA3;
  --ink-3: #9A9F87;
  --ink-3-deco: #868B74;
  --ink-4: #454A39;
  --line: rgba(238, 242, 224, .12);
  --line-2: rgba(238, 242, 224, .06);
  --line-3: rgba(238, 242, 224, .22);
  --amber-deep: #C9E600;
  --focus: #DDFF00;
  --note-lav: #2A2838;
  --note-blue: #1D2832;
  --term-bg: #070805;
  --gutter: #0A0B07;
  --rule: rgba(238, 242, 224, .035);
  --iso-top: #262A1D;
  --iso-left: #1B1E14;
  --iso-right: #14170F;
  --iso-stroke: #A2A78F;
  --shadow: 0 30px 60px -40px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--gutter);
  background-image: repeating-linear-gradient(180deg, transparent 0 5px, var(--rule) 5px 6px);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--amber); color: #12150B; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cn-term, .consent { --focus: #DDFF00; }
.lb-bar, .cn-bar { --focus: #12150B; }
.cn-item:focus-visible { outline-offset: -3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--amber); color: #12150B; padding: 10px 14px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

.frame {
  position: relative;
  max-width: var(--frame);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  border-inline: 1px solid var(--line);
  overflow-x: clip;
}
.wrap { padding-inline: var(--pad); }
.dim { color: var(--ink-3-deco); }

.cap, .mono {
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 46px; padding: 0 22px;
  font: 500 15px/1 var(--sans);
  color: var(--ink); text-decoration: none;
  background: transparent;
  border: 1px solid var(--line-3); border-radius: 2px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .ar { width: 12px; height: 12px; transition: transform .25s var(--ease); flex: none; }
.btn:hover .ar { transform: translate(2px, -2px); }
.btn-primary { background: var(--amber); color: #12150B; border-color: rgba(107, 122, 0, .45); }
.btn-primary:hover { background: var(--amber-hover); }
.btn-ghost { background: var(--paper-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.link-arrow { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink); }
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-3); background: var(--paper-2); border-radius: 2px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 14px; height: 14px; }

/* ---------- curtain intro ---------- */
.curtain { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: none; }
html.intro .curtain { display: block; animation: curtainKill 0s 3.4s forwards; }
@keyframes curtainKill { to { visibility: hidden; } }
.curtain-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
.curtain-cols i {
  background-color: #F4F6EA;
  background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(18, 21, 11, .045) 5px 6px);
  border-bottom: 1px solid var(--amber);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
html.intro.go .curtain-cols i { transform: translateY(-101%); }
.curtain-label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px;
  color: var(--ink); transition: opacity .35s, transform .6s var(--ease);
}
.curtain-label .name { font: 600 clamp(48px, 7.4vw, 104px)/.95 var(--sans); letter-spacing: -.055em; }
.curtain-label .name b { color: var(--amber); }
.curtain-label .cap { color: var(--ink-3); }
:root[data-theme="dark"] .curtain-cols i {
  background-color: #121509;
  background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(238, 242, 224, .035) 5px 6px);
}
html.intro.go .curtain-label { opacity: 0; transform: translateY(-24px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-101%); }
.logo { font: 600 25px/1 var(--sans); letter-spacing: -.055em; text-decoration: none; display: inline-flex; align-items: flex-end; gap: 3px; }
.logo i { width: 6px; height: 6px; background: var(--amber); margin-bottom: 4px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) {
  position: relative; padding: 8px 12px; text-decoration: none; font-size: 16px; font-weight: 500;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--amber); transform: scale(0); transition: transform .3s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a.is-active::after { transform: scale(1); }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; margin: 0 6px 0 2px; }
.theme-toggle svg { width: 16px; height: 16px; transition: transform .5s var(--ease); }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
.nav-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-3); background: var(--paper-2); cursor: pointer; place-content: center; gap: 5px; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav.is-open .nav-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.is-open .nav-burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- reveal ---------- */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }
.lines { margin: 0; }
.lines .ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.lines .ln > span { display: block; }
html.js .lines .ln > span { transform: translateY(108%); transition: transform 1.05s var(--ease); }
html.js .lines .ln:nth-child(2) > span { transition-delay: .09s; }
html.js .lines .ln:nth-child(3) > span { transition-delay: .18s; }
html.js .lines.is-in .ln > span { transform: none; }

/* ---------- sections ---------- */
.sec { position: relative; border-top: 1px solid var(--line); padding: var(--sec-pad) 0; }
.sec-tag {
  position: absolute; top: 0; left: 0; z-index: 3;
  background: var(--amber); color: #12150B;
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 8px 5px;
}
.sec::after, .sec-chart::after, .mosaic-track::after, .footer::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px;
  border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); z-index: 3;
}
.sec-head h2, .h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.032em; line-height: 1.08; margin: 0 0 18px; }
.sec-head p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin-inline: auto; }
.sec-head .link-arrow { margin-top: 22px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(64px, 12.5vh, 118px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hero h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.032em; line-height: 1.04; }
.hero .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); margin: 6px 0 14px; max-width: 26em; }
.hero .cap { margin: 0 0 30px; }

.street { margin-top: clamp(44px, 8vh, 74px); padding: 0 var(--pad); }
.street-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 30px; }
.street-label { display: flex; align-items: baseline; gap: 10px; transition: opacity .35s, transform .35s var(--ease); white-space: nowrap; overflow: hidden; }
.street-label.is-out { opacity: 0; transform: translateY(6px); }
.street-label .n { font: 500 11px var(--mono); color: var(--amber-deep); letter-spacing: .08em; }
.street-label .co { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.street-label .role { color: var(--ink-3); font-size: 15.5px; }
.street-scene { position: relative; height: 112px; }
.street-scene > svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* line-art scene vocabulary (street + boardwalk) */
.s-ground { stroke: var(--ink-3-deco); stroke-width: 1; }
.s-tick { stroke: var(--ink-4); stroke-width: 1; }
.s-b, .s-tree, .s-house, .s-car, .s-board { fill: var(--paper-2); stroke: var(--ink-3-deco); stroke-width: 1; }
.s-line { fill: none; stroke: var(--ink-3-deco); stroke-width: 1; stroke-linecap: round; }
.s-win { fill: var(--ink-4); }
.s-lit, .s-amber { fill: var(--amber); }
.s-amber-line { fill: none; stroke: var(--amber-deep); stroke-width: 1; }
.s-text { fill: var(--ink-2); font: 500 9px var(--mono); letter-spacing: .06em; }
.s-num { fill: var(--ink-4); font: 500 7.5px var(--mono); }
.s-board.is-on { fill: var(--amber); stroke: var(--amber-deep); }
.s-board.is-on + .s-text { fill: #12150B; }
.s-board, .s-text { transition: fill .4s; }

.rider { position: absolute; bottom: 6px; left: -40px; width: 30px; height: 38px; animation: ride 30s linear infinite; overflow: visible; }
.rider .r-line { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rider .r-fill { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1.3; }
.rider .r-amber { fill: var(--amber); stroke: var(--amber-deep); stroke-width: 1; }
.rider .wheel { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }
@keyframes ride { from { left: -40px; } to { left: calc(100% + 10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- console (portfolio bench) ---------- */
.sec-console { padding: 0 0 var(--sec-pad); }
.console { border: 1px solid var(--line-3); background: var(--paper-3); border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); }
.cn-bar {
  height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--amber); border-bottom: 1px solid var(--amber-deep); color: #12150B;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.cn-dots { display: flex; gap: 4px; }
.cn-dots i { width: 8px; height: 8px; background: #12150B; }
.cn-dots i:nth-child(2) { opacity: .5; }
.cn-dots i:nth-child(3) { opacity: .25; }
.cn-path b { font-weight: 500; }
.cn-status { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cn-status i { width: 7px; height: 7px; background: #12150B; }
.cn-status.is-busy i { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cn-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.cn-side { display: flex; flex-direction: column; padding-top: 18px; border-right: 1px solid var(--line); }
.cn-side > .cap { padding: 0 18px 12px; }
.cn-list { list-style: none; margin: 0; padding: 0; }
.cn-item {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 18px 14px 36px; border: 0; border-top: 1px solid var(--line); background: none;
  font: 500 15.5px/1.2 var(--sans); color: var(--ink); transition: background .25s;
}
.cn-list li:last-child .cn-item { border-bottom: 1px solid var(--line); }
.cn-item::before { content: ""; position: absolute; left: 18px; top: 19px; width: 6px; height: 6px; background: var(--ink-4); transition: background .25s; }
.cn-item small { display: block; margin-top: 6px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.cn-item:hover { background: color-mix(in srgb, var(--paper-4) 55%, transparent); }
.cn-item.is-on { background: var(--paper-4); box-shadow: inset 3px 0 0 var(--ink); }
.cn-item.is-on::before { background: var(--ink); }
.cn-progress { margin-top: auto; padding: 22px 18px 20px; }
.cn-progress .track { display: block; height: 3px; margin-top: 10px; background: var(--line); }
.cn-progress .track b { display: block; height: 100%; width: 20%; background: var(--ink); transition: width .6s var(--ease); }

.cn-main { min-width: 0; display: flex; flex-direction: column; background: var(--paper-2); }
.cn-canvas {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 26px 5%;
  padding: 56px 5% 18px; align-items: start;
  background-color: var(--paper-2);
  background-image: radial-gradient(var(--ink-4) 1px, transparent 1.3px);
  background-size: 18px 18px; background-position: 9px 9px;
  border-bottom: 1px solid var(--line);
}
.cn-canvas-head { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.cn-frame { margin: 0; min-width: 0; }
.cn-frame-tag { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.cn-frame-tag b { color: var(--amber-deep); font-weight: 500; }
.cn-frame-tag em { font-style: normal; margin-left: auto; }
.cn-shot { display: block; position: relative; aspect-ratio: 1198 / 572; border-radius: 10px; background: #111; outline: 1.5px solid var(--amber); outline-offset: 3px; }
.cn-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.cn-shot img.is-new { clip-path: inset(0 100% 0 0 round 10px); animation: wipe .85s var(--ease) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0 round 10px); } }
.cn-shot .h { position: absolute; width: 7px; height: 7px; background: var(--paper); border: 1.5px solid var(--amber-deep); z-index: 2; }
.cn-shot .h:nth-of-type(1) { left: -7px; top: -7px; }
.cn-shot .h:nth-of-type(2) { right: -7px; top: -7px; }
.cn-shot .h:nth-of-type(3) { left: -7px; bottom: -7px; }
.cn-shot .h:nth-of-type(4) { right: -7px; bottom: -7px; }

.cn-aside { position: relative; display: flex; flex-direction: column; gap: 18px; padding-top: 22px; min-width: 0; }
.cn-aside::before { content: ""; position: absolute; top: 74px; right: 100%; width: 22%; border-top: 1px dashed var(--amber-deep); }
.cn-aside::after { content: ""; position: absolute; top: 71px; right: calc(100% + 22% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.cn-inspect { background: var(--paper); border: 1px solid var(--line-3); border-radius: 4px; padding: 14px 16px 6px; box-shadow: 0 20px 40px -30px rgba(18, 21, 11, .45); }
.cn-ask { margin: 10px 0 10px; padding: 9px 11px; background: var(--paper-3); border-radius: 3px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.cn-reply { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
.cn-reply i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ink); }
.cn-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.cn-row span:first-child { font: 500 9.5px/1.9 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.cn-row span:last-child { text-align: right; }
.cn-note {
  align-self: flex-end; width: 88%; padding: 13px 15px; font-size: 13px; line-height: 1.45; color: var(--ink);
  background: var(--note-lav); border: 1px solid var(--line); box-shadow: 0 16px 30px -24px rgba(18, 21, 11, .5);
  transform: rotate(-1.8deg); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 10px; border: 1px solid var(--line-3); background: var(--paper); color: var(--ink-2);
  cursor: pointer; border-radius: 2px; transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cn-chips .cap { margin-left: auto; }
.cn-cursor { position: absolute; left: 60%; top: 40%; z-index: 4; pointer-events: none; transition: left 1.1s var(--ease), top 1.1s var(--ease); }
.cn-cursor svg { width: 16px; height: 16px; display: block; }
.cn-cursor span { position: absolute; left: 14px; top: 14px; background: var(--ink); color: var(--paper); font: 500 9.5px var(--mono); letter-spacing: .06em; padding: 3px 6px; white-space: nowrap; }

.cn-term { background: var(--term-bg); color: var(--term-ink); font: 400 13px/1.75 var(--mono); padding: 14px 22px 12px; }
.cn-log { height: 154px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #353A2A transparent; }
.cn-log p { margin: 0; white-space: pre-wrap; }
.cn-log .t-dim { color: var(--term-dim); }
.cn-log .t-cmd::before { content: "❯ "; color: var(--amber); }
.cn-log .t-sub { color: var(--term-dim); padding-left: 18px; }
.cn-log .t-ok::before { content: "✓ "; color: var(--amber); }
.cn-log .t-err { color: #F09A7A; }
.cn-log code { color: var(--amber); }
.cn-input { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(238, 242, 224, .12); }
.cn-input > span { color: var(--amber); }
.cn-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--term-ink); font: inherit; }
.cn-input input::placeholder { color: var(--term-dim); }
.cn-btns { display: flex; gap: 6px; }
.cn-btns button { font: 500 10px/1 var(--mono); letter-spacing: .12em; padding: 8px 10px; background: rgba(238, 242, 224, .06); border: 1px solid rgba(238, 242, 224, .18); color: var(--term-ink); cursor: pointer; }
.cn-btns button:hover { background: rgba(238, 242, 224, .14); }
.cn-foot { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; background: var(--paper-4); border-top: 1px solid var(--line); }

/* ---------- stack (focus) ---------- */
.stack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1060px; margin: 56px auto 0; }
.stack-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.iso-top { fill: var(--iso-top); }
.iso-left { fill: var(--iso-left); }
.iso-right { fill: var(--iso-right); }
.iso-top, .iso-left, .iso-right { stroke: var(--iso-stroke); stroke-width: .9; stroke-linejoin: round; transition: fill .45s; }
.layer { transition: transform .7s var(--ease); }
.layer.is-on { transform: translateY(-12px); }
.layer.is-on .iso-top { fill: var(--amber); }
.layer.is-on .iso-left { fill: var(--amber-side); }
.layer.is-on .iso-right { fill: var(--amber-side-2); }
.layer.is-on .iso-top, .layer.is-on .iso-left, .layer.is-on .iso-right { stroke: #4A5500; }
.iso-lbl { font: 500 9.5px var(--mono); letter-spacing: .12em; fill: var(--ink-3); transition: fill .3s; }
.iso-lbl.is-on { fill: var(--ink); }
.iso-lead { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.iso-lead.is-on { stroke: var(--amber-deep); stroke-dasharray: none; }
.iso-dot { fill: var(--ink-4); }
.iso-dot.is-on { fill: var(--amber-deep); }
.iso-dim { font: 500 8px var(--mono); fill: var(--ink-3); letter-spacing: .08em; }
.stack-copy { min-height: 280px; }
.stack-copy .num { font: 500 11px var(--mono); color: var(--amber-deep); letter-spacing: .1em; }
.stack-copy h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.025em; margin: 10px 0 8px; }
.stack-copy .cap { margin-bottom: 18px; }
.stack-copy p { color: var(--ink-2); max-width: 36ch; margin: 0; font-size: 16.5px; }
.stack-swap { transition: opacity .35s, transform .45s var(--ease); }
.stack-swap.is-out { opacity: 0; transform: translateY(8px); }
.stack-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 30px; }
.stack-ctrl .cap { margin-left: 12px; }

/* ---------- numbers (pinned chart) ---------- */
.sec-chart { position: relative; height: 230vh; border-top: 1px solid var(--line); }
.chart-pin {
  position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, var(--rule) 7px 8px);
}
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); height: clamp(230px, 36vh, 340px); margin-top: clamp(32px, 6vh, 56px); }
.bar { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.bar-col { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.bar-val { opacity: var(--g, 1); font-size: clamp(24px, 2.3vw, 32px); font-weight: 500; letter-spacing: -.025em; margin-bottom: 8px; }
.bar-box {
  position: relative; height: calc(var(--h) * var(--g, 1) * 80%);
  border: 1px solid var(--ink-2); border-bottom-color: var(--ink);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px);
}
.bar-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 1) * 100%);
  background-color: var(--amber);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(18, 21, 11, .13) 7px 8px);
}
.bar-label { padding-top: 12px; font-size: 14px; color: var(--ink-2); }

/* ---------- industries (tiles) ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 44px; list-style: none; padding: 0; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.tile-box { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: var(--paper-3); border: 1px solid var(--line); transition: background .3s, transform .3s var(--ease), border-color .3s; }
.tile-box svg { width: 34%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tile-box b { position: absolute; top: 6px; right: 7px; font: 500 8.5px var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.tile:hover .tile-box { background: var(--amber); border-color: var(--amber-deep); transform: translateY(-3px); }
.tile:hover .tile-box svg { stroke: #12150B; }
.tile:hover .tile-box b { color: #12150B; }
.tile .cap { font-size: 9px; letter-spacing: .12em; }

/* ---------- board (career / profile) ---------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 52px; }
.board-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.card { position: relative; padding: 22px 22px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 200px; transition: background .3s; }
.card:last-child { border-right: 0; }
.card .idx { font: 500 10px var(--mono); color: var(--ink-3); letter-spacing: .08em; margin-bottom: 28px; }
.card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.2; }
.card .role { font: 500 9.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.card:hover, .card.is-current { background: var(--paper-3); }
.card.is-current .idx { color: var(--amber-deep); }
.card .live { display: inline-flex; align-items: center; gap: 6px; font: 500 9px var(--mono); letter-spacing: .14em; color: #12150B; background: var(--amber); padding: 4px 6px 3px; position: absolute; top: 18px; right: 18px; }

/* ---------- mosaic ---------- */
.mosaic-track { position: relative; height: 300vh; border-top: 1px solid var(--line); }
.mosaic-pin { position: sticky; top: 0; height: 100vh; padding: 28px var(--pad); overflow: hidden; }
.mosaic-window { position: relative; display: block; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-3); text-decoration: none; }
.mosaic-grid {
  position: absolute; left: 50%; top: 50%;
  width: min(1180px, 94%, calc((100vh - 150px) * 2.06));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center;
  will-change: transform;
}
.m-tile { position: relative; margin: 0; aspect-ratio: 1198 / 572; border-radius: 6px; overflow: hidden; background: var(--paper-4); clip-path: inset(var(--c, 0%) round 6px); }
.m-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.m-tile figcaption { position: absolute; left: 8px; bottom: 8px; background: var(--paper); color: var(--ink); font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px 3px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.m-tile:hover img { transform: scale(1.04); }
.m-tile:hover figcaption { opacity: 1; transform: none; }
.mosaic-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  background: var(--paper); border: 1px solid var(--line-3); padding: 22px 30px; text-align: center;
  opacity: var(--o, 0); box-shadow: var(--shadow); pointer-events: none;
}
.mosaic-center strong { display: block; font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.03em; margin: 8px 0 2px; }
.mosaic-center span:last-child { color: var(--ink-3); }

/* ---------- footer ---------- */
.footer {
  position: relative; border-top: 1px solid var(--line);
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, var(--rule) 7px 8px);
}
.foot-lead { padding: clamp(84px, 13vh, 140px) var(--pad) 0; text-align: center; }
.foot-lead .btn-row { justify-content: center; margin-top: 30px; }
.foot-ticker { display: inline-flex; gap: 10px; align-items: baseline; margin-top: 30px; min-height: 26px; transition: opacity .3s; }
.foot-ticker.is-out { opacity: 0; }
.foot-ticker .n { font: 500 10.5px var(--mono); color: var(--amber-deep); }
.foot-ticker b { font-weight: 500; font-size: 17px; }
.foot-ticker span:last-child { color: var(--ink-3); font-size: 15px; }
.boardwalk { position: relative; height: 128px; margin-top: 18px; }
.boardwalk > svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 44px; border-top: 1px solid var(--line); }
.foot-grid .cap { margin-bottom: 18px; }
.foot-grid a { display: block; width: max-content; padding: 4px 0; text-decoration: none; font-size: 15px; }
.foot-grid a:hover { color: var(--amber-deep); }
.foot-grid p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }
.foot-mail { font-weight: 500; margin-bottom: 12px; }
.legal { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 26px; border-top: 1px solid var(--line); }
.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }
.foot-marks { display: block; height: 12px; background: repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 12px); }

.legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.linkish { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.legal a:hover, .linkish:hover { color: var(--ink); }

/* cookie consent card */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(372px, calc(100vw - 32px));
  padding: 16px; border-radius: 4px; background: #12150B; color: #EEF2E0;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .45s var(--ease);
}
:root[data-theme="dark"] .consent { background: #20241A; border: 1px solid var(--line-3); }
.consent.is-in { opacity: 1; transform: none; }
.consent p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.consent a { color: var(--amber); }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-btns button { height: 40px; border: 1px solid rgba(238, 242, 224, .22); border-radius: 2px; background: rgba(238, 242, 224, .06); color: #EEF2E0; font: 500 14px var(--sans); cursor: pointer; }
.consent-btns button:first-child { background: var(--amber); border-color: var(--amber); color: #12150B; }
.consent-btns button:hover { filter: brightness(1.08); }

/* privacy + 404 */
.sec-flush { padding-top: 48px; }
.prose-board { margin-top: 0; }
.prose-board .card { min-height: 0; }
.prose-board .card p a { color: var(--ink); text-underline-offset: 3px; }
.prose-board code { font: 500 12.5px var(--mono); background: var(--paper-3); padding: 1px 5px; border-radius: 2px; }
.prose-board.board-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose-board .card:nth-child(3n) { border-right: 0; }
.hero-404 { padding-bottom: var(--sec-pad); min-height: 60vh; }

/* ==========================================================================
   Work page
   ========================================================================== */
.work-hero { padding-top: clamp(56px, 10vh, 104px); padding-bottom: 44px; }
.work-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.work-hero h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.032em; line-height: 1.04; }
.work-hero .lead { font-size: var(--fs-lead); color: var(--ink-2); margin: 0; max-width: 26em; }
.work-hero > .cap { margin-bottom: 22px; }
.filter { display: flex; flex-wrap: wrap; margin-top: 40px; border: 1px solid var(--line-3); width: max-content; max-width: 100%; background: var(--paper-2); }
.filter button { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.filter button:last-child { border-right: 0; }
.filter button sup { font: 500 9.5px var(--mono); color: var(--ink-3); letter-spacing: .06em; top: 0; }
.filter button:hover { color: var(--ink); background: var(--paper-3); }
.filter button.is-on { background: var(--amber); color: #12150B; }
.filter button.is-on sup { color: #12150B; }

.work-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); border-top: 1px solid var(--line); }
.work-index { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; scrollbar-width: none; padding: 44px var(--pad) 40px; border-right: 1px solid var(--line); background: var(--paper); transition: top .5s var(--ease); }
body:has(.nav:not(.is-hidden)) .work-index { top: 68px; height: calc(100vh - 68px); }
.wi-active { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.wi-swap { transition: opacity .3s, transform .4s var(--ease); }
.wi-swap.is-out { opacity: 0; transform: translateY(6px); }
.wi-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wi-title h2 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.badge { background: var(--amber); color: #12150B; font: 500 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; padding: 5px 6px 4px; }
.wi-meta { margin: 12px 0 14px; }
.wi-desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-3); margin-bottom: 16px; }
.seg button { padding: 10px 8px; border: 0; background: var(--paper-2); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-3); }
.seg button.is-on { background: var(--amber); color: #12150B; }
.wi-list { list-style: none; margin: 0; padding: 18px 0 0; }
.wi-group { margin: 18px 0 6px; }
.wi-group:first-child { margin-top: 0; }
.wi-list a { display: block; padding: 7px 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: color .2s, padding .3s var(--ease); }
.wi-list a:hover { color: var(--ink); }
.wi-list a.is-on { color: var(--ink); padding-left: 14px; position: relative; }
.wi-list a.is-on::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--amber); }

.work-stream { padding: 44px clamp(20px, 4vw, 56px) 80px; min-width: 0; }
.ws-group + .ws-group { margin-top: 40px; }
.ws-group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.ws-group-head h2 { font-size: 15px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 12px; }
.ws-items { display: grid; gap: 64px; }
.ws-item { scroll-margin-top: 90px; }
.ws-item h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.ws-sub { color: var(--ink-3); margin: 6px 0 18px; font-size: 16px; }
.ws-shot { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #111; cursor: zoom-in; }
.ws-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1198 / 572; object-fit: cover; transition: transform .8s var(--ease); }
.ws-shot:hover img { transform: scale(1.015); }
.ws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.ws-meta .cap b { color: var(--ink); font-weight: 500; }
.ws-meta a { margin-left: auto; font-size: 14px; }
.ws-desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin: 12px 0 0; max-width: 62ch; }
.work-stream.is-grid .ws-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.work-stream.is-grid .ws-item h3 { font-size: 22px; }
.work-stream.is-grid .ws-sub { font-size: 14.5px; margin-bottom: 12px; }
.work-stream.is-grid .ws-desc { display: none; }
.work-stream.is-grid .ws-meta a { display: none; }
.ws-group[hidden], .wi-list li[hidden] { display: none; }
.ws-item[hidden], .ws-empty[hidden], .sub-hint[hidden] { display: none; }

/* platform sub-filter (private portfolio, Web App group) */
.subfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -14px 0 34px; }
.subfilter-bar { display: flex; flex-wrap: wrap; border: 1px solid var(--line-3); background: var(--paper-2); }
.subfilter-bar button {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 14px; border: 0; border-right: 1px solid var(--line);
  background: none; color: var(--ink-2); font: 500 14px var(--sans); cursor: pointer; transition: background .2s, color .2s;
}
.subfilter-bar button:last-child { border-right: 0; }
.subfilter-bar button sup { top: 0; font: 500 9px var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.subfilter-bar button:hover { color: var(--ink); background: var(--paper-3); }
.subfilter-bar button[data-empty] { color: var(--ink-3); }
.subfilter-bar button.is-on { background: var(--ink); color: var(--paper); }
.subfilter-bar button.is-on sup { color: var(--paper); opacity: .75; }
.sub-hint { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ws-empty { margin: 0; padding: 40px 24px; border: 1px dashed var(--line-3); background: var(--paper-2); text-align: center; color: var(--ink-2); font-size: 15px; }
.stack-tag { color: var(--amber-deep) !important; }
@media (max-width: 600px) { .subfilter-bar { width: 100%; } .subfilter-bar button { flex: 1 1 auto; justify-content: center; padding: 9px 10px; border-bottom: 1px solid var(--line); } }

/* lightbox */
.lb { width: min(1320px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line-3); border-radius: 4px; background: var(--paper); color: var(--ink); overflow: hidden; }
.lb::backdrop { background: rgba(18, 21, 11, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lb-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 8px 0 16px; background: var(--amber); color: #12150B; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lb-bar button { margin-left: auto; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 18px; color: #12150B; }
.lb-img { display: block; width: 100%; height: auto; max-height: calc(94vh - 112px); object-fit: contain; background: #0B0D07; }
.lb-foot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.lb-foot strong { font-weight: 500; }
.lb-foot .cap { margin-left: 6px; }
.lb-nav { margin-left: auto; display: flex; gap: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board-3 { grid-template-columns: 1fr 1fr; }
  .board-3 .card:nth-child(2) { grid-row: span 2; }
  .card:last-child { border-right: 1px solid var(--line); }
  .cn-body { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .nav-burger { display: grid; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--pad) 18px; background: var(--paper); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .nav.is-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 18px; }
  .nav-links a:not(.btn)::after { left: auto; right: 4px; bottom: 50%; margin-bottom: -2.5px; }
  .theme-toggle { margin: 10px 0; width: auto; justify-content: start; display: flex; gap: 10px; align-items: center; }
  .theme-toggle::after { content: "Theme"; font-size: 16px; font-weight: 500; }
  .nav-links .btn { margin-top: 6px; height: 46px; }

  .hero-grid, .work-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .street-head .cap { display: none; }

  .cn-body { grid-template-columns: minmax(0, 1fr); }
  .cn-side { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); padding-top: 14px; }
  .cn-list { display: flex; overflow-x: auto; scrollbar-width: none; }
  .cn-list li { flex: none; }
  .cn-item { border-top: 0; border-right: 1px solid var(--line); padding: 12px 16px 12px 30px; }
  .cn-list li:last-child .cn-item { border-bottom: 0; }
  .cn-item::before { left: 14px; top: 17px; }
  .cn-item.is-on { box-shadow: inset 0 -3px 0 var(--ink); }
  .cn-progress { display: none; }
  .cn-canvas { grid-template-columns: minmax(0, 1fr); padding: 50px 18px 16px; }
  .cn-aside { padding-top: 0; }
  .cn-aside::before, .cn-aside::after, .cn-cursor { display: none; }
  .cn-note { width: 100%; }
  .cn-foot span:last-child { display: none; }
  .cn-btns button:not([data-cmd="next"]) { display: none; }

  .stack { grid-template-columns: minmax(0, 1fr); }
  .stack-copy { min-height: 0; }

  .sec-chart { height: auto; }
  .chart-pin { position: relative; height: auto; min-height: 0; padding: var(--sec-pad) 0; }
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; row-gap: 36px; }
  .bar-col { height: 210px; }

  .mosaic-track { height: auto; }
  .mosaic-pin { position: relative; height: auto; padding: 24px var(--pad); }
  .mosaic-window { height: auto; padding: 14px; }
  .mosaic-grid { position: relative; left: auto; top: auto; width: 100%; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-tile { clip-path: none; }
  .mosaic-center { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin-bottom: 14px; box-shadow: none; }

  .foot-grid { grid-template-columns: 1fr 1fr; }

  .work-layout { grid-template-columns: 1fr; }
  .work-index { display: none; }
  .work-stream { padding-top: 32px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .board, .board-3 { grid-template-columns: 1fr; }
  .board-3 .card:nth-child(2) { grid-row: auto; }
  .card { border-right: 0; min-height: 0; }
  .card:last-child { border-right: 0; }
  .card .idx { margin-bottom: 16px; }
  .street-label .role { display: none; }
  .cn-bar .cn-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cn-canvas-head span:last-child { display: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .legal { flex-direction: column; }
  .filter { width: 100%; }
  .filter button { flex: 1 1 auto; justify-content: center; padding: 11px 10px; border-bottom: 1px solid var(--line); }
  .work-stream.is-grid .ws-items { grid-template-columns: 1fr; }
  .ws-meta a { margin-left: 0; }
  .lb-foot { flex-wrap: wrap; }
}

/* reduced motion: no pinned scrubbing */
.calm .sec-chart, .calm .mosaic-track { height: auto; }
.calm .chart-pin { position: relative; height: auto; min-height: 0; padding: var(--sec-pad) 0; }
.calm .mosaic-pin { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rider { display: none; }
  html.intro .curtain { display: none; }
}

/* ==========================================================================
   Profile page
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ab-hero { position: relative; height: 270vh; margin-top: -68px; }
.ab-pin { position: sticky; top: 0; height: 100vh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.ab-intro { padding: clamp(84px, 13vh, 132px) var(--pad) 0; text-align: center; will-change: transform, opacity; }
.ab-lede { max-width: 25em; margin: 0 auto; font-size: clamp(21px, 1.95vw, 28px); font-weight: 500; line-height: 1.38; letter-spacing: -.022em; }
.room-wrap { margin-top: auto; padding: 0 var(--pad) 14px; will-change: transform; }
.room { display: block; width: 100%; height: auto; overflow: visible; }

/* room palette — light */
.room {
  --r-line: #8A8F7A; --r-wood: #D9CDB2; --r-wood2: #EEE8D8; --r-surface: #FDFEF8; --r-metal: #C5C9BA;
  --r-sky: #DDE8EC; --r-sun: #F4F6CF; --r-hill: #AEC292; --r-hill2: #93AC7C; --r-leaf: #A1B57F; --r-leaf2: #84A06A; --r-pot: #D8CFBD;
  --r-rug: #E5B39B; --r-sofa: #AAB9C3; --r-sofa2: #95A6B2; --r-glow: #EEFF7A; --r-glow-o: .5;
  --r-laptop: #E4E7DB; --r-scr: #1E2219; --r-ui: #4A5140; --r-uibar: #2B3024; --r-side: #252A1E; --r-ui2: #8FA0A8;
  --r-b1: #CFAE98; --r-b2: #93A9B8; --r-b3: #AEC292; --r-b4: #E0C373; --r-b5: #BBA4C8;
}
:root[data-theme="dark"] .room {
  --r-line: #6B705C; --r-wood: #5D5543; --r-wood2: #36332A; --r-surface: #23271C; --r-metal: #4B5043;
  --r-sky: #141B23; --r-sun: #E6E1B5; --r-hill: #2F3F2B; --r-hill2: #263322; --r-leaf: #4F633F; --r-leaf2: #405334; --r-pot: #4A4536;
  --r-rug: #C98E73; --r-sofa: #4A5661; --r-sofa2: #3E4954; --r-glow: #DDFF00; --r-glow-o: .16;
  --r-laptop: #C9CCC0; --r-scr: #EDF0E6; --r-ui: #B9BEAC; --r-uibar: #D7DBCF; --r-side: #DFE3D6; --r-ui2: #5F6E77;
  --r-b1: #8C6F5E; --r-b2: #5B6E7C; --r-b3: #5E7350; --r-b4: #9C8545; --r-b5: #74648A;
}
.room .ln { fill: none; stroke: var(--r-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room .ln.thin { stroke-width: 1; }
.room .o { stroke: var(--r-line); stroke-width: 1.6; stroke-linejoin: round; }
.room .wood { fill: var(--r-wood); } .room .wood2 { fill: var(--r-wood2); } .room .surface { fill: var(--r-surface); } .room .metal { fill: var(--r-metal); }
.room .glass { fill: var(--r-sky); } .room .sun { fill: var(--r-sun); } .room .hill { fill: var(--r-hill); } .room .hill2 { fill: var(--r-hill2); }
.room .leaf { fill: var(--r-leaf); } .room .leaf2 { fill: var(--r-leaf2); } .room .pot { fill: var(--r-pot); } .room .rug { fill: var(--r-rug); }
.room .sofa { fill: var(--r-sofa); } .room .sofa2 { fill: var(--r-sofa2); } .room .screen { fill: var(--r-scr); }
.room .b1 { fill: var(--r-b1); } .room .b2 { fill: var(--r-b2); } .room .b3 { fill: var(--r-b3); } .room .b4 { fill: var(--r-b4); } .room .b5 { fill: var(--r-b5); }
.room .shade { fill: var(--amber); stroke: var(--amber-deep); stroke-width: 1.2; }
.room .bulb { fill: #FFFFF0; }
.room .glow { fill: url(#rmGlow); }
.room .rm-glow-a { stop-color: var(--r-glow); stop-opacity: var(--r-glow-o); }
.room .rm-glow-b { stop-color: var(--r-glow); stop-opacity: 0; }
.room .laptop { fill: var(--r-laptop); }
.room .scr { fill: var(--r-scr); } .room .ui-bar { fill: var(--r-uibar); } .room .ui-side { fill: var(--r-side); }
.room .ui { fill: var(--r-ui); } .room .ui-hi { fill: var(--amber); } .room .ui2 { fill: var(--r-ui2); } .room .ui2.soft { opacity: .7; }
.room .handle { fill: #FFFFFF; stroke: #12150B; stroke-width: .4; }
.room .note { fill: var(--amber); }
.room .note-k { font: 500 3.4px var(--mono); letter-spacing: .12em; fill: rgba(18, 21, 11, .6); }
.room .note-t { font: 500 5.2px var(--sans); letter-spacing: -.01em; fill: #12150B; }
.room .note-s { font: italic 400 3.6px var(--sans); fill: rgba(18, 21, 11, .65); }
.room .cursor { fill: #12150B; stroke: #FFFFFF; stroke-width: .5; }
.room .btn-ui { fill: #4C7BD9; }
.room .pen1, .room .pen2, .room .pen3 { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.room .pen1 { stroke: #C77A6A; } .room .pen2 { stroke: #4C7BD9; } .room .pen3 { stroke: var(--amber-deep); }
.room .tee-lime { fill: var(--amber); } .room .tee-lime-stroke { stroke: var(--amber); fill: none; }

/* stone · paper · scissors */
.room .hand use { display: none; }
.room .hand[data-g="stone"] .g-stone, .room .hand[data-g="paper"] .g-paper, .room .hand[data-g="scissors"] .g-scissors { display: inline; }
.room .rps-lead { fill: none; stroke: var(--r-line); stroke-width: 1; stroke-dasharray: 2 3; }
.room .rps-result { font: 500 9.5px var(--mono); letter-spacing: .16em; fill: var(--ink-3); }
.room .bubble rect { fill: var(--paper-2); stroke: var(--r-line); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.room .bubble text { font: 500 12px var(--mono); letter-spacing: .12em; fill: var(--ink); }
.room .bubble.is-win rect { fill: var(--amber); stroke: var(--amber-deep); }
.room .bubble.is-win text { fill: #12150B; }
.room .play { transition: transform .2s; }
.room.is-chant .play-r { animation: pumpR .42s ease-in-out 3; }
.room.is-chant .play-l { animation: pumpL .42s ease-in-out 3; }
@keyframes pumpR { 50% { transform: rotate(-16deg); } }
@keyframes pumpL { 50% { transform: rotate(16deg); } }

/* game: pops, sparks, controls */
.room .hand use, .room .bub-in, .room .burst-in { transform-box: fill-box; transform-origin: center; }
.room .hand.pop use { animation: rpsPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.room .bubble.pop .bub-in { animation: rpsPop .42s cubic-bezier(.34, 1.56, .64, 1); }
.room .burst path { fill: none; stroke: var(--amber-deep); stroke-width: 2.4; stroke-linecap: round; }
.room .burst-in { opacity: 0; }
.room .burst.go .burst-in { animation: rpsBurst .8s ease-out; }
@keyframes rpsPop { 0% { transform: scale(.35); } 100% { transform: scale(1); } }
@keyframes rpsBurst { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.35); } }

.rps-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; max-width: 760px; margin: 30px auto 0; }
.rps-picks { display: flex; gap: 6px; }
.rps-picks button {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 9px;
  border: 1px solid var(--line-3); border-radius: 2px; background: var(--paper-2); color: var(--ink);
  font: 500 14px var(--sans); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .3s;
}
.rps-picks button svg { width: 27px; height: 22px; overflow: visible; }
.rps-picks button:hover { border-color: var(--ink); transform: translateY(-2px); }
.rps-picks button:disabled { cursor: progress; }
.rps-picks button:disabled:not(.is-picked) { opacity: .45; transform: none; }
.rps-picks button.is-picked { background: var(--amber); border-color: var(--amber-deep); color: #12150B; animation: rpsPick .5s cubic-bezier(.34, 1.56, .64, 1); }
.rps-picks button.is-shaking svg { animation: rpsShake .42s ease-in-out 3; }
.rps-picks button.is-win { box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 45%, transparent); }
.rps-score { display: flex; gap: 14px; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rps-score b { display: inline-block; min-width: 1.1em; color: var(--ink); font-weight: 500; }
.rps-score b.tick { animation: rpsTick .45s cubic-bezier(.34, 1.56, .64, 1); color: var(--amber-deep); }
.rps-say { flex-basis: 100%; margin: 0; min-height: 1.5em; text-align: center; font-size: 15px; color: var(--ink-2); }
.rps-say.is-win { color: var(--ink); font-weight: 500; }
.rps-say.is-win::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; background: var(--amber); outline: 1px solid var(--amber-deep); }
@keyframes rpsPick { 0% { transform: scale(.9); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes rpsShake { 50% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes rpsTick { 0% { transform: translateY(-7px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* statement + strip */
.ab-statement { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.ab-statement .h2 { max-width: 18em; margin: 0; }
.ab-statement p { color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 36ch; margin: 0 0 6px; }
.strip { display: grid; grid-template-columns: 1fr 1fr 2.2fr 1fr 1fr; gap: 10px; margin-top: 56px; padding: 0 var(--pad); }
.strip figure { position: relative; margin: 0; height: clamp(170px, 19vw, 250px); overflow: hidden; border-radius: 4px; background: var(--paper-4); }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }
.strip figcaption { position: absolute; left: 8px; bottom: 8px; background: var(--paper); font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px 3px; }

/* how I work */
.credo { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); }
.credo-side { position: sticky; top: 110px; align-self: start; }
.credo-side h2 { font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; }
.words { font-size: clamp(30px, 3.1vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.16; margin: 0 0 30px; }
html.js .words .w { opacity: .16; filter: blur(2px); transition: opacity .45s, filter .45s; }
html.js .words .w.is-lit { opacity: 1; filter: none; }
.credo-note { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.credo-note em { font-style: normal; color: var(--amber-deep); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips-row span { padding: 7px 11px; border: 1px solid var(--line-3); background: var(--paper-2); font-size: 13px; }

/* résumé */
.resume { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cover {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: min(330px, 100%); aspect-ratio: 3 / 4; margin: 0 auto;
  padding: 30px 28px 26px 38px; background: var(--paper-2); border: 1px solid var(--line-3);
  box-shadow: 16px 16px 0 -1px var(--paper-3), 16px 16px 0 0 var(--line-3), var(--shadow); transform: rotate(-2deg);
}
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--amber); border-right: 1px solid var(--amber-deep); }
.cover strong { margin-top: auto; font-size: clamp(32px, 3vw, 42px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.cover i { width: 40px; height: 3px; background: var(--amber-deep); }
.cover-sub { color: var(--ink-2); font-size: 14px; }
.resume-lead { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 44ch; margin: 0; }
.ticks { list-style: none; margin: 26px 0 30px; padding: 0; border-top: 1px solid var(--line); }
.ticks li { position: relative; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 6px; height: 6px; background: var(--amber-deep); }

.calm .ab-hero { height: auto; margin-top: 0; }
.calm .ab-pin { position: relative; height: auto; min-height: 0; overflow: visible; }
.calm .room-wrap { padding-top: 48px; }

@media (max-width: 900px) {
  .ab-hero { height: auto; margin-top: 0; }
  .ab-pin { position: relative; height: auto; min-height: 0; overflow: visible; }
  .ab-intro { padding-top: 64px; }
  .room-wrap { padding: 36px 0 0; overflow: hidden; }
  .room { height: 260px; }
  .ab-statement, .credo, .resume { grid-template-columns: minmax(0, 1fr); }
  .credo-side { position: static; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip figure:nth-child(3) { grid-column: 1 / -1; order: -1; }
  .strip figure:nth-child(n+6) { display: none; }
  .cover { width: min(280px, 80%); }
}

/* ==========================================================================
   AI Era page
   ========================================================================== */
.ai-hero { padding-bottom: 0; }
.pipe-wrap { margin-top: clamp(40px, 7vh, 64px); padding: 0 var(--pad) 8px; }
.pipe { display: block; width: 100%; height: auto; overflow: visible; }
.pipe .pl { fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke .3s; }
.pipe .pl.is-flow { stroke: var(--amber-deep); animation: plFlow .7s linear infinite; }
@keyframes plFlow { to { stroke-dashoffset: -18; } }
.pipe .pn-card { fill: var(--paper-2); stroke: var(--line-3); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.pipe .pn.is-on .pn-card { stroke: var(--amber-deep); fill: var(--paper); }
.pipe .pn-strip { transition: fill .3s; }
.pipe .s-lav { fill: #B9AEDC; } .pipe .s-blue { fill: #9DB8C9; } .pipe .s-green { fill: #A9BE8E; } .pipe .s-sand { fill: #D9CDB2; } .pipe .s-ink { fill: var(--ink-4); }
.pipe .pn.is-on .pn-strip { fill: var(--amber); }
.pipe .pn-t { font: 500 16px var(--sans); letter-spacing: -.01em; fill: var(--ink); }
.pipe .pn-s { font: 500 9px var(--mono); letter-spacing: .1em; fill: var(--ink-3); }
.pipe .pn-bar { fill: var(--ink-4); } .pipe .pn-bar.dim { opacity: .55; }
.pipe .pn-ico { fill: var(--paper-4); stroke: var(--line-3); stroke-width: 1; }
.pipe .pn.is-on .pn-ico { fill: var(--amber); stroke: var(--amber-deep); }
.pipe .pn-dot { fill: var(--paper-2); }
.pipe .pn-cloud { fill: var(--paper-2); stroke: var(--ink-3-deco); stroke-width: 1.4; }
.pipe .pn.is-on .pn-cloud { stroke: var(--amber-deep); fill: var(--paper); }
.pipe .pn-think { font: 500 10px var(--mono); letter-spacing: .12em; fill: var(--amber-deep); opacity: 0; transition: opacity .3s; }
.pipe .pn.is-on .pn-think { opacity: 1; }
.pipe .pf { stroke: var(--ink-3-deco); stroke-width: 1; }
.pipe .pf-ticks path { stroke: var(--ink-4); stroke-width: 1; }
.pipe .robot { transform: translate(120px, 286px); animation: rbWalk 46s linear infinite; }
.pipe .robot-b { animation: rbBob .32s ease-in-out infinite alternate; }
.pipe .rb-body, .pipe .rb-head { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1.3; }
.pipe .rb-eye { fill: var(--ink); } .pipe .rb-tip { fill: var(--amber); stroke: var(--amber-deep); stroke-width: 1; }
.pipe .rb-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }
.pipe .rb-leg1, .pipe .rb-leg2 { transform-box: fill-box; transform-origin: 50% 0; animation: rbLeg .32s ease-in-out infinite alternate; }
.pipe .rb-leg2 { animation-direction: alternate-reverse; }
@keyframes rbWalk { from { transform: translate(-40px, 286px); } to { transform: translate(1640px, 286px); } }
@keyframes rbBob { to { transform: translateY(-1.5px); } }
@keyframes rbLeg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

.ai-built { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 44px; }
.ai-item { border-top: 1px solid var(--line); }
.ai-item:last-child { border-bottom: 1px solid var(--line); }
.ai-item.is-open { border-bottom: 1px solid var(--amber-deep); }
.ai-item.is-open + .ai-item { border-top: 0; }
.ai-head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%;
  padding: 20px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.ai-head .n { font: 500 11px var(--mono); color: var(--ink-3); }
.ai-head .t { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); transition: color .25s; }
.ai-head:hover .t, .ai-item.is-open .ai-head .t { color: var(--ink); }
.ai-item.is-open .ai-head .n { color: var(--amber-deep); }
.ai-body { padding: 0 0 24px 52px; }
.ai-body p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 46ch; }
.ai-shot { position: sticky; top: 96px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #111; }
.ai-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1198 / 571; object-fit: cover; transition: opacity .3s; }
.ai-shot img.is-out { opacity: 0; }
.ai-cta { margin-top: 36px; }

.loop { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line); }
.loop li { display: grid; grid-template-columns: 56px 150px minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 24px; align-items: baseline; padding: 22px 8px; border-bottom: 1px solid var(--line); transition: background .25s; }
.loop li:hover { background: var(--paper-3); }
.loop .n { font: 500 11px var(--mono); color: var(--amber-deep); }
.loop h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.loop p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.tiles-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.tile .mg { font: 600 clamp(22px, 2.3vw, 32px)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); transition: color .3s; }
.tile:hover .mg { color: #12150B; }
.tile-for { margin-top: -6px; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 1100px) { .tiles-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pipe-wrap { overflow-x: auto; scrollbar-width: none; }
  .pipe { min-width: 880px; }
  .ai-built { grid-template-columns: minmax(0, 1fr); }
  .ai-shot { position: static; order: -1; }
  .loop li { grid-template-columns: 40px minmax(0, 1fr); }
  .loop li > .cap, .loop li > h3, .loop li > p { grid-column: 2; }
}
@media (max-width: 600px) { .tiles-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-body { padding-left: 0; } }