/* =================================================================
   GOVIND — portfolio
   ================================================================= */

:root{
  --bg:        #07070b;
  --bg-2:      #0d0d14;
  --ink:       #f2f0ee;
  --ink-dim:   #9c9aa6;
  --ink-faint: #55535f;
  --line:      rgba(255,255,255,.10);
  /* monochrome system — one fluorescent accent, used only for live state */
  --c1:#5a5a62;  --c2:#8e8e96;  --c3:#c8c8d0;
  --accent:      #ff5a12;
  --accent-glow: #ff9048;
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

#stage{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
}

/* ---------------- INTRO ---------------- */
.intro{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 45%, #14141d 0%, var(--bg) 60%, #030305 100%);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
.intro.is-out{ opacity:0; transform:scale(1.06); pointer-events:none; }
.intro__inner{ text-align:center; padding:0 24px; }

[data-stagger]{
  opacity:0;
  transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;
}
[data-stagger]:nth-child(1){ animation-delay:.10s; }
[data-stagger]:nth-child(2){ animation-delay:.22s; }
[data-stagger]:nth-child(3){ animation-delay:.42s; }
[data-stagger]:nth-child(4){ animation-delay:.60s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.intro__hello{
  margin:0 0 10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-dim);
}
.intro__name{
  margin:0;
  font-size:clamp(52px, 13vw, 148px);
  font-weight:700; letter-spacing:.06em; line-height:.95;
  background:linear-gradient(100deg,#6e6e78 0%, var(--ink) 40%, #9a9aa4 72%, #55555e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intro__roles{
  margin:20px 0 0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
  font-size:clamp(12px,2.2vw,15px); letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink);
}
.intro__roles i{ color:var(--ink-faint); font-style:normal; }
.intro__tag{
  margin:14px 0 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--ink-dim);
}
.intro__bar{
  margin:44px auto 0; width:min(240px,52vw); height:1px;
  background:var(--line); overflow:hidden;
}
.intro__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-glow));
}

/* keeps the fixed UI readable whatever world is behind it */
.scrim{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,4,8,.62) 0%, rgba(4,4,8,0) 20%),
    linear-gradient(0deg,   rgba(4,4,8,.62) 0%, rgba(4,4,8,0) 18%);
}
/* the landing page carries copy down its first third, so that column
   gets its own falloff and the backdrop never reads through the type */
body:not(.is-section) .scrim{
  background:
    linear-gradient(180deg, rgba(4,4,8,.62) 0%, rgba(4,4,8,0) 20%),
    linear-gradient(0deg,   rgba(4,4,8,.62) 0%, rgba(4,4,8,0) 18%),
    linear-gradient(90deg,  rgba(4,4,8,.86) 0%, rgba(4,4,8,.55) 22%, rgba(4,4,8,0) 42%);
}

/* ---------------- SELECTION UI ---------------- */
.ui{
  position:fixed; inset:0; z-index:20;
  pointer-events:none;
  opacity:0; transition:opacity .8s var(--ease) .1s;
}
.ui.is-in{ opacity:1; }

.topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:clamp(18px,3vw,34px);
}
.topbar__id strong{
  display:block; font-size:14px; letter-spacing:.30em; font-weight:600;
}
.topbar__id span{
  display:block; margin-top:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-dim); text-transform:uppercase;
}
.topbar__nav{ display:flex; gap:22px; pointer-events:auto; }
.topbar__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.topbar__nav a:hover{ color:var(--ink); border-color:var(--accent); }

/* --- projected sector labels --- */
.labels{ position:absolute; inset:0; }
.label{
  position:absolute; top:0; left:0;
  width:230px;                     /* JS centres it with translate(-50%,-50%) */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  color:var(--ink);                /* the mark is white by default */
  transition:opacity .4s var(--ease), color .35s var(--ease);
  will-change:transform,opacity;
  pointer-events:auto; cursor:pointer;
  text-decoration:none;
}
.label:focus-visible{ outline:none; }
.label__icon{
  width:52px; height:52px; margin:0 auto;
  opacity:.92; transform:scale(.94);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.label__icon svg{ width:100%; height:100%; display:block; overflow:visible; }
.label__icon svg path,
.label__icon svg circle{
  stroke-dasharray:var(--len,120);
  stroke-dashoffset:0;
}

.label__title{
  margin:12px 0 0;
  font-size:clamp(10px,0.98vw,12.8px); font-weight:700; letter-spacing:.06em;
  line-height:1.25; text-transform:uppercase;
  max-width:100%; overflow-wrap:break-word;   /* never clipped, wraps instead */
  opacity:0; transform:translateY(8px);
  color:currentColor;
  transition:opacity .45s var(--ease), transform .5s var(--ease), color .35s;
}

.label:focus-visible .label__title{ opacity:1; transform:none; }
.label:focus-visible .label__icon{ opacity:1; }
.label.is-active{ color:#08080a; }          /* black on the lit slice */
.label.is-active .label__icon{ opacity:1; transform:scale(1.04); filter:none; }
.label.is-active .label__title{ text-shadow:none; }
.label.is-active .label__title{ opacity:1; transform:none; }
/* icon line-draw on activation */
.label.is-active .label__icon svg path,
.label.is-active .label__icon svg circle{
  animation:draw .75s var(--ease) forwards;
}
@keyframes draw{
  0%   { stroke-dashoffset:var(--len,120); }
  100% { stroke-dashoffset:0; }
}

/* --- landing page lede: first third of the screen --- */
.lede{
  position:absolute; left:clamp(24px,6.2vw,96px);
  top:33.3%; transform:translateY(-30%);
  width:min(30vw,380px);
  pointer-events:none;
}
.lede__k{
  margin:0 0 14px; font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent);
}
.lede__h{
  margin:0; font-size:clamp(30px,3.6vw,54px); font-weight:700; line-height:1.02;
  letter-spacing:-.015em; color:var(--ink);
  text-shadow:0 4px 34px rgba(0,0,0,.55);
}
.lede__p{
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.8; color:var(--ink-dim); max-width:34ch;
}
.lede .hint{
  position:static; margin-top:30px; justify-content:flex-start; text-align:left;
}

/* --- centre hub --- */
.hub{
  position:absolute; top:0; left:0;
  text-align:center; pointer-events:none;
  will-change:transform;
}
.hub__k{
  display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.34em; color:var(--ink-faint);
}
.hub__v{
  display:block; margin-top:7px;
  font-size:12px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink);
  transition:color .4s;
}

/* --- footer hint --- */
.hint{
  position:absolute; left:0; right:0; bottom:clamp(18px,3vw,32px);
  display:flex; gap:10px; align-items:center; justify-content:center;
  flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}
.hint__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  animation:pulse 2.4s ease-in-out infinite;
  transition:background .4s;
}
@keyframes pulse{ 0%,100%{opacity:.25; transform:scale(.8);} 50%{opacity:1; transform:scale(1);} }

/* ---------------- SECTION PANEL ---------------- */
.panel{
  position:fixed; z-index:30;
  top:0; right:0; bottom:0;
  width:min(38.2vw, 660px); min-width:420px; max-width:100%;
  background:linear-gradient(180deg, rgba(10,10,16,.80), rgba(6,6,10,.94));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--line);
}
.panel__scroll{
  height:100%; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none;
  padding:clamp(26px,4vw,44px) clamp(24px,4vw,52px) 72px;
}
.panel__scroll::-webkit-scrollbar{ width:6px; }
.panel__scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }

.panel__back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:34px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s, gap .3s;
}
.panel__back:hover{ color:var(--accent); gap:12px; }

.panel__index{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--accent);
}
.panel__title{
  margin:12px 0 0;
  font-size:clamp(32px,4.4vw,52px); font-weight:700; line-height:1.0; letter-spacing:.005em;
}
.panel__sub{ margin:14px 0 0; font-size:14.5px; color:var(--ink); opacity:.85; }
.panel__blurb{
  margin:20px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.78; color:var(--ink-dim); max-width:52ch;
}

@keyframes cardIn{ to{ opacity:1; transform:none; } }
.panel__nav{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px;
}
.panel__nav a{ display:grid; gap:6px; max-width:48%; }
.panel__nav a.is-next{ text-align:right; }
.panel__nav span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
.panel__nav strong{
  font-size:14px; font-weight:600; color:var(--ink-dim); transition:color .3s;
}
.panel__nav a:hover strong{ color:var(--lc,var(--accent)); }

/* ---------------- PUBLISHED-WORK INDEX ---------------- */
.plinks{ margin-top:40px; }
.gal .plinks{ padding-top:clamp(48px,7vw,96px); }
.plinks__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.plinks__head h2{ margin:0; font-size:clamp(18px,2.4vw,26px); font-weight:700; }
.plinks__head a{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s;
}
.plinks__head a:hover{ color:var(--accent); }
.plinks__note{
  margin:14px 0 4px; font-size:12.5px; line-height:1.7; color:var(--ink-dim); max-width:52ch;
}

.plinks__tags{ margin:14px 0 2px; display:flex; flex-wrap:wrap; gap:7px; }
.plinks__tags span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
  border:1px solid var(--line); color:var(--ink-dim);
}
.plinks + .plinks{ margin-top:clamp(38px,5vw,64px); }

.plink{
  position:relative;
  display:grid; grid-template-columns:30px 1fr auto 16px; align-items:baseline; gap:14px;
  padding:15px 6px 15px 4px;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease), border-color .35s;
}
.plink::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.plink:hover{ padding-left:14px; border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.plink:hover::before{ transform:scaleY(1); }
.plink__n{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--ink-faint);
}
.plink__t{
  font-size:14.5px; font-weight:500; line-height:1.35; color:var(--ink-dim);
  transition:color .3s;
}
.plink:hover .plink__t{ color:var(--ink); }
.plink__y{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); white-space:nowrap; }
.plink__go{ color:var(--ink-faint); opacity:0; transform:translate(-4px,4px);
  transition:opacity .3s, transform .35s var(--ease); align-self:center; }
.plink:hover .plink__go{ opacity:1; transform:none; color:var(--accent); }

@media (max-width:620px){
  .plink{ grid-template-columns:26px 1fr auto; }
  .plink__go{ display:none; }
}

/* ================================================================
   PER-SECTOR LAYOUTS
   Each class gets its own arrangement — a drawing sheet, a pipeline
   column, and a mosaic.
   ================================================================ */

/* --- 01 · Industrial Design: sheet on the LEFT, drafting rules --- */
body[data-layout="sheet"] .panel{
  left:0; right:auto;
  border-left:0; border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,10,16,.84), rgba(6,6,10,.95));
}
body[data-layout="sheet"] .panel__scroll{
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
}
/* the sheet occupies the top-left, so the identity moves out of its way */
body[data-layout="sheet"] .topbar__id{ display:none; }

body[data-layout="sheet"] .panel__head{
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
body[data-layout="sheet"] .panel__title::after{
  content:''; display:block; width:56px; height:1px; margin-top:18px;
  background:var(--accent);
}
/* the index runs as a two-column drafting register */
body[data-layout="sheet"] .plinks__list{
  display:grid; grid-template-columns:1fr 1fr; column-gap:22px;
}
body[data-layout="sheet"] .plink{ grid-template-columns:26px 1fr 16px; }
body[data-layout="sheet"] .plink__y{ display:none; }
body[data-layout="sheet"] .plink::after{
  content:''; position:absolute; left:0; bottom:-1px; width:7px; height:5px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:1180px){
  body[data-layout="sheet"] .plinks__list{ grid-template-columns:1fr; }
}

/* --- 02 · Technical Art: one centred column, chained like a graph --- */

/* rows hang off a single spine, node-graph style */

/* --- 03 · Visualization: the whole page is the mosaic --- */
.galbar{
  position:relative; z-index:2;
  display:flex; align-items:baseline; gap:clamp(16px,3vw,40px); flex-wrap:wrap;
  padding:clamp(74px,10vh,110px) clamp(16px,4vw,64px) clamp(16px,2vw,26px);
  background:linear-gradient(180deg, rgba(6,6,10,.94), rgba(6,6,10,.86));
  border-bottom:1px solid var(--line);
}
.galbar__back{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s;
}
.galbar__back:hover{ color:var(--accent); }
.galbar__title{
  margin:0; display:flex; align-items:baseline; gap:14px;
  font-size:clamp(24px,3.2vw,40px); font-weight:700; letter-spacing:-.01em;
}
.galbar__title span{
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.3em;
  color:var(--accent);
}
.galbar__count{
  margin-left:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gal--mosaic{ background:rgba(6,6,10,.86); }

.gal--mosaic{ padding-top:0; }
/* a published entry with no image of its own still reads as a card */
.tile--link.is-flat .tile__media{
  aspect-ratio:4 / 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%),
    #0e0e14;
}
.tile__glyph{
  width:34px; height:34px; color:var(--accent); opacity:.75;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.tile__glyph svg{ width:100%; height:100%; display:block; }
.tile--link.is-flat:hover .tile__glyph{ opacity:1; transform:scale(1.08); }
.tile__mark{
  font-family:var(--mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tile--link .tile__title{ font-size:12px; }

@media (max-width:900px){
  body[data-layout="sheet"] .panel{
    left:0; right:0; transform:none; width:100%; min-width:0;
    border-left:0; border-right:0;
  }

}

/* the compact hero needs its own scrim — its copy sits over live 3D */

/* ================================================================
   PREVIEW STAGE  —  what used to be the wheel's space
   ================================================================ */
.stage{
  position:fixed; z-index:14; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease);
}
.stage.is-on{ opacity:1; }

body[data-layout="sheet"] .stage{
  top:50%; right:clamp(24px,5vw,80px); transform:translateY(-50%);
  width:min(46vw, 620px);
}
/* Technical Art: the work plays full-bleed behind the centred column */

.stage__frame{
  position:relative; width:100%; aspect-ratio:16 / 10;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0a0a10;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}

.stage__still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0;
  transition:opacity .45s var(--ease);
}
.stage__frame[data-mode="still"] .stage__still{ opacity:1; }
/* covers are whole compositions — show them entire, not cropped */
.stage__still{ object-fit:contain; background:#0a0a10; }

.stage__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0;
  transition:opacity .45s var(--ease);
}
.stage__frame[data-mode="play"] .stage__still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0;
  transition:opacity .45s var(--ease);
}
.stage__frame[data-mode="still"] .stage__still{ opacity:1; }
/* covers are whole compositions — show them entire, not cropped */
.stage__still{ object-fit:contain; background:#0a0a10; }

.stage__video{ opacity:1; }

.stage__empty, .stage__idle{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:26px; text-align:center;
}
.stage__frame[data-mode="empty"] .stage__empty{ display:flex; }
.stage__frame[data-mode="idle"]  .stage__idle{ display:flex; }
/* full-bleed has no frame to caption, and the column would swallow a
   centred block, so the states ride above it as a pill */

.stage__title{ font-size:16px; font-weight:600; color:var(--ink); max-width:26ch; }
.stage__note, .stage__hint{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.stage__sector{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent);
}

/* sector switcher, since the wheel no longer does it */
.sectors{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:30px 0 4px; padding-top:22px; border-top:1px solid var(--line);
}
.sectors a{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:7px 13px; border-radius:99px; border:1px solid var(--line);
  font-size:11.5px; color:var(--ink-dim);
  transition:color .3s, border-color .3s, background .3s;
}
.sectors a span{ font-family:var(--mono); font-size:9px; color:var(--ink-faint); }
.sectors a:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.sectors a.is-current{
  color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.sectors a.is-current span{ color:var(--accent); }

/* ================================================================
   FLOATING WINDOW  —  Experience
   ================================================================ */
.win{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(4,4,7,.74);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.win.is-open{ opacity:1; pointer-events:auto; }
.win__panel{
  position:relative;
  width:min(1120px, 94vw); max-height:88vh; overflow-y:auto;
  padding:clamp(26px,3.4vw,46px);
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,#101018,#0a0a10);
  transform:translateY(20px); transition:transform .6s var(--ease);
}
.win.is-open .win__panel{ transform:none; }
.win__panel::-webkit-scrollbar{ width:6px; }
.win__panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }
.win__close{
  position:absolute; top:14px; right:20px; font-size:26px; line-height:1;
  color:var(--ink-faint); transition:color .3s; z-index:2;
}
.win__close:hover{ color:var(--ink); }

.win__head h2{ margin:0; font-size:clamp(26px,3.2vw,40px); font-weight:700; }
.win__lede{
  margin:16px 0 0; max-width:62ch; font-size:13.5px; line-height:1.8; color:var(--ink-dim);
}
.win__meta{
  margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.win__meta a{ color:var(--accent); }
.win__body{
  display:grid; grid-template-columns:1fr 300px; gap:clamp(24px,3vw,52px);
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
}
.win__k{
  margin:0 0 18px; font-family:var(--mono); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.win__side .win__k:not(:first-child){ margin-top:34px; }
.win__k--gap{ margin-top:38px; padding-top:26px; border-top:1px solid var(--line); }

.skills{ display:grid; gap:16px; }
.skill{ display:grid; gap:5px; }
.skill__k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}
.skill__v{ margin:0; font-size:12.5px; line-height:1.7; color:var(--ink-dim); }

.win__tags{ margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.win__tags span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  padding:4px 9px; border-radius:99px;
  border:1px solid var(--line); color:var(--ink-dim);
}

.xp{ padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.xp:last-child{ border-bottom:0; margin-bottom:0; }
.xp__head{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:baseline; }
.xp__role{ margin:0; font-size:15.5px; font-weight:600; letter-spacing:.005em; }
.xp__org{
  grid-column:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}
.xp__when{
  grid-row:1 / span 2; grid-column:2; align-self:start;
  font-family:var(--mono); font-size:10px; color:var(--ink-faint); white-space:nowrap;
}
.xp.is-now .xp__when{ color:var(--accent); }
.xp__points{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.xp__points li{
  position:relative; padding-left:16px;
  font-size:12.5px; line-height:1.72; color:var(--ink-dim);
}
.xp__points li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--ink-faint);
}

.edus, .awards{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.edu{ display:grid; gap:3px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.edu:last-child{ border-bottom:0; }
.edu__what{ font-size:13px; font-weight:600; }
.edu__note{ font-size:11.5px; color:var(--ink-dim); line-height:1.55; }
.edu__when, .edu__score{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.edu__score{ color:var(--ink-dim); }

.award{ display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:baseline; }
.award__n{ font-family:var(--mono); font-size:10px; color:var(--accent); }
.award__t{ font-size:12px; line-height:1.5; color:var(--ink-dim); }
.award__w{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }

@media (max-width:900px){
  .win__body{ grid-template-columns:1fr; }
  body[data-layout="sheet"] .stage{
    position:fixed; top:auto; bottom:16px; right:16px; left:16px;
    width:auto; transform:none;
  }
}

/* ---------------- TRANSITION VEIL ---------------- */
.veil{
  position:fixed; inset:0; z-index:70;
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
  mix-blend-mode:screen;
}
.veil.is-on{ opacity:.80; }

.noscript{
  position:fixed; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; line-height:2; text-align:center;
  background:var(--bg); z-index:80;
}
.noscript ul{ list-style:none; padding:0; margin:18px 0 0; }
.noscript a{ color:var(--c2); border-bottom:1px solid currentColor; }
.is-section .topbar__id a{ transition:opacity .3s; }
.is-section .topbar__id a:hover{ opacity:.65; }

/* ---------------- RESPONSIVE ---------------- */
body.is-narrow .lede{
  position:absolute; top:auto; bottom:clamp(18px,5vh,54px); transform:none;
  width:calc(100% - 48px);
}
body.is-narrow .lede__h{ font-size:clamp(26px,7vw,38px); }
body.is-narrow .lede__p{ display:none; }

@media (max-width:860px){
  .label{ width:170px; }
  .label__icon{ width:42px; height:42px; }
  .label__icon{ width:34px; height:34px; }
  .topbar__id span{ display:none; }
}

@media (max-width:900px){
  .panel{
    width:100%; top:40vh; border-left:0; border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;
    background:linear-gradient(180deg, rgba(10,10,16,.86), rgba(6,6,10,.97));
  }
  .panel__scroll{ padding-top:30px; }
  
  .panel__nav{ flex-direction:column; }
  .panel__nav a, .panel__nav a.is-next{ max-width:100%; text-align:left; }
}

/* ================================================================
   GALLERY PAGE
   ================================================================ */
body.is-gallery{ overflow:visible; height:auto; min-height:100%; }
body.is-gallery.is-locked{ overflow:hidden; }
.is-gallery #stage{ touch-action:pan-y; }     /* let the page scroll over the canvas */

.page{ position:relative; z-index:12; display:block; }

/* --- hero --- */

/* keeps the hero copy readable over a busy world */

@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* --- groups --- */
.gal{
  padding:0 clamp(16px,4vw,64px) 40px;
  background:linear-gradient(180deg, rgba(6,6,10,0) 0%, rgba(6,6,10,.86) 6%, rgba(6,6,10,.93) 100%);
}
/* --- masonry --- */
.gal-grid{ columns:5; column-gap:14px; }
@media (max-width:1600px){ .gal-grid{ columns:4; } }
@media (max-width:1200px){ .gal-grid{ columns:3; } }
@media (max-width:820px){  .gal-grid{ columns:2; } }
@media (max-width:520px){  .gal-grid{ columns:1; } }

.tile{
  break-inside:avoid; margin:0 0 14px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#0c0c13; cursor:zoom-in;
  transition:border-color .35s, transform .5s var(--ease);
}
.tile:hover,
.tile.is-live{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); transform:translateY(-3px); }
.tile.has-link{ cursor:alias; }
.tile__media{
  position:relative; width:100%;
  aspect-ratio:var(--ar, 3 / 4);
  max-height:62vh;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    #0c0c13;
}
.tile__el{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0;
  /* the wall rests desaturated; hover brings the piece back to colour */
  filter:saturate(.14) contrast(1.04) brightness(.86);
  transition:opacity .6s var(--ease), filter .55s var(--ease), transform .7s var(--ease);
}
.tile.is-ready .tile__el{ opacity:1; }
.tile.is-live .tile__el{ filter:none; transform:scale(1.015); }
.tile__spin{
  position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:1px solid var(--line); border-top-color:var(--accent); border-radius:50%;
  animation:spin 1s linear infinite;
}
.tile.is-ready .tile__spin{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.tile__cap{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:2px 10px; padding:10px 12px 11px;
}
.tile__group{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tile__title{ font-size:12px; font-weight:600; letter-spacing:.01em; line-height:1.35; }
.tile__src{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; transition:color .3s;
}
.tile:hover .tile__src{ color:var(--accent); }

/* --- lightbox --- */
.lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; gap:14px; align-content:center;
  padding:clamp(20px,5vw,64px);
  background:rgba(3,3,6,.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; cursor:zoom-out; }
.lightbox__stage{ display:grid; place-items:center; max-width:100%; }
.lightbox__stage video, .lightbox__stage img{
  max-width:min(1400px,92vw); max-height:80vh; border-radius:10px; display:block;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lightbox__cap{
  margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim);
}
.lightbox__close{
  position:absolute; top:22px; right:26px; font-size:30px; line-height:1; color:var(--ink-dim);
}
.lightbox__close:hover{ color:var(--ink); }

/* --- foot --- */
.page-foot{
  padding:clamp(40px,6vw,80px) clamp(16px,4vw,64px) clamp(48px,8vw,110px);
  background:rgba(6,6,10,.93);
}
.page-foot .panel__nav{ margin-top:0; }
.page-foot__note{
  margin:34px 0 0; font-family:var(--mono); font-size:10px; line-height:1.9; color:var(--ink-faint);
}
.page-foot__note code{ color:var(--ink-dim); }

@media (max-width:900px){
  
  .lede{ position:static; width:auto; margin:0; padding:0 24px; transform:none; }

}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.05ms !important; }
}

/* ================================================================
   BOOT GUARD  —  a usable page if the 3D never comes up
   ================================================================ */
.boot{
  position:fixed; inset:0; z-index:95;
  display:none; place-items:center; text-align:center;
  padding:32px; background:var(--bg);
}
body.is-stalled .boot{ display:grid; }
.boot__inner h1{
  margin:0; font-size:clamp(28px,5vw,54px); font-weight:700; letter-spacing:.02em;
}
.boot__inner > p{
  margin:12px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim);
}
.boot__note{ margin-top:26px !important; text-transform:none !important; letter-spacing:.04em !important; }
.boot__inner ul{
  list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; justify-items:center;
}
.boot__inner a{ color:var(--accent); border-bottom:1px solid currentColor; }
.boot__inner li a{ font-size:17px; font-weight:600; }

/* keyboard focus, everywhere it matters */
a:focus-visible, button:focus-visible, .tile:focus-visible, .gal-group__head:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}
.tile:focus-visible{ outline-offset:2px; }

/* ================================================================
   TOUCH & SMALL SCREENS
   A phone has no hover, so anything that only appears on hover has to
   be there already — and anything that only works with a cursor has to
   get out of the way.
   ================================================================ */

/* the wheel's titles are permanent without a pointer to reveal them */
@media (max-width: 900px), (hover: none) {
  .label__title{ opacity:1; transform:none; }
  .label{ width:150px; }
  .label__icon{ width:38px; height:38px; }
  .label__title{ font-size:10.5px; letter-spacing:.04em; margin-top:8px; }
}

@media (max-width: 900px) {
  /* the preview stage needs a cursor; on touch it is dead space */
  .stage{ display:none !important; }
  body[data-layout="sheet"] .panel{ top:0; }
  
  body[data-layout="sheet"] .panel__scroll{ padding-top:76px; }

  /* the mosaic bar has to clear the fixed identity */
  .galbar{ padding-top:96px; row-gap:6px; }
  .galbar__count{ margin-left:0; }

  /* comfortable touch targets */
  .sectors a{ padding:10px 15px; }
  .plink{ padding:17px 6px; }
  .topbar__nav{ gap:16px; }
  .topbar__nav a{ padding:6px 0; }

  /* the landing copy sits under the wheel, so keep it tight */
  .lede__p{ font-size:12px; }
  .hint{ font-size:9.5px; letter-spacing:.14em; }
}

@media (max-width: 520px) {
  .galbar__title{ font-size:22px; }
  .win__panel{ padding:22px 18px; }
  .xp__head{ grid-template-columns:1fr; }
  .xp__when{ grid-row:auto; grid-column:1; }
  .tile__cap{ padding:9px 11px 10px; }
}

/* iOS: honour the safe area so nothing hides under the home indicator */
@supports (padding: max(0px)) {
  .hint, .lede{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .panel__scroll, .gal, .page-foot{ padding-bottom: max(48px, env(safe-area-inset-bottom)); }
}