/* ============ MONOIDX — scroll edition ============ */
/* tokens reused from styles.css (linked first). */

/* The landing drives its own smooth scrolling in JS (gsap), so disable the
   global CSS smooth-scroll here — it otherwise fights the scroll tween and gets
   cancelled by ScrollTrigger's pinning. */
html:has(body.scroll-edition){scroll-behavior:auto}
body.scroll-edition{background:var(--black);overflow-x:hidden}

/* progress bar at very top */
.scrub-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:transparent}
.scrub-progress .fill{height:100%;width:0;background:linear-gradient(90deg,rgba(216,216,216,.4),#fff);box-shadow:0 0 12px rgba(255,255,255,.4)}

/* ---------- parallax backdrop ---------- */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-field .vline{position:absolute;top:-10%;height:120%;width:1px;background:rgba(255,255,255,.04)}
.bg-field .ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:600;letter-spacing:.12em;
  font-size:34vw;color:rgba(255,255,255,.018);white-space:nowrap;user-select:none}

/* ===================== PINNED STAGE ===================== */
.scrolly{position:relative;height:640vh;z-index:1}
.stage{position:relative;height:100svh;width:100%;overflow:hidden}

.video-wrap{position:absolute;inset:0;z-index:1;will-change:transform}
.video-wrap canvas{width:100%;height:100%;display:block}
/* legibility scrims */
.stage .scrim{position:absolute;inset:0;z-index:2;pointer-events:none}
.stage .scrim.vig{background:radial-gradient(ellipse 90% 90% at 50% 42%,transparent 30%,rgba(5,5,5,.5) 78%,#050505 100%)}
.stage .scrim.left{background:linear-gradient(90deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.45) 28%,transparent 52%)}
.stage .scrim.bottom{background:linear-gradient(0deg,rgba(5,5,5,.85) 0%,transparent 38%)}

/* ---------- HUD frame ---------- */
.hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.hud .br{position:absolute;width:46px;height:46px;border:1px solid rgba(255,255,255,.22)}
.hud .br.tl{top:34px;left:34px;border-right:0;border-bottom:0}
.hud .br.tr{top:34px;right:34px;border-left:0;border-bottom:0}
.hud .br.bl{bottom:34px;left:34px;border-right:0;border-top:0}
.hud .br.br2{bottom:34px;right:34px;border-left:0;border-top:0}

.hud .reticle{position:absolute;top:50%;left:50%;width:120px;height:120px;
  transform:translate(-50%,-50%) rotate(0deg);opacity:.0}
.hud .reticle::before,.hud .reticle::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.2)}
.hud .reticle::before{border-radius:50%}
.hud .reticle::after{transform:rotate(45deg);border-radius:8px}

/* top-right live telemetry (single HUD readout block) */
.telemetry{position:absolute;top:94px;right:96px;z-index:5;text-align:right;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-2)}
.telemetry .row{display:block;margin-bottom:7px;white-space:nowrap}
.telemetry .row .v{color:#fff}
.telemetry .ang{color:var(--silver)}
.telemetry .row.code{color:var(--txt-3);margin-bottom:14px}
.telemetry .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--silver);
  margin-right:9px;box-shadow:0 0 10px rgba(216,216,216,.7);vertical-align:middle}

/* ---------- progress rail (right) ---------- */
.rail{position:absolute;right:38px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:0;align-items:flex-end}
.rail .seg{display:flex;align-items:center;gap:14px;height:54px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--txt-4);transition:color .4s var(--ease)}
.rail .seg:hover{color:var(--txt-2)}
.rail .seg:hover .tick{width:38px;background:var(--txt-2)}
.rail .seg:focus-visible{outline:1px solid var(--line-2);outline-offset:6px}
.rail .seg .tick{width:22px;height:1px;background:rgba(255,255,255,.16);transition:width .45s var(--ease),background .45s var(--ease)}
.rail .seg.active{color:#fff}
.rail .seg.active .tick{width:46px;background:var(--silver)}

/* ---------- big stage index ---------- */
.stage-index{position:absolute;left:96px;bottom:38px;z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--txt-3);text-transform:uppercase;
  display:flex;align-items:baseline;gap:14px}
.stage-index .big{font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:0;color:#fff;line-height:1}
.stage-index .sep{color:var(--txt-4)}

/* ===================== ACT PANELS ===================== */
.acts{position:absolute;inset:0;z-index:5;pointer-events:none}
.rail{pointer-events:auto}
.act{position:absolute;left:96px;bottom:118px;max-width:560px;will-change:transform,opacity}
.act .eyebrow{margin-bottom:24px}
.act h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.02;color:#fff;
  font-size:clamp(40px,6vw,86px)}
.act .lede{font-size:clamp(18px,2vw,26px);font-weight:300;line-height:1.5;color:var(--txt-2);margin-top:22px}
.act .lede b{color:#fff;font-weight:400}

/* hero act variant */
.act.act-hero{width:min(760px,88vw);max-width:none}
.act.act-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,7vw,104px);
  letter-spacing:.05em;line-height:.94;color:#fff;white-space:nowrap;margin-top:4px}
.act.act-hero .role{font-family:var(--mono);font-size:clamp(12px,1.4vw,15px);letter-spacing:.36em;
  text-transform:uppercase;color:var(--silver);margin-top:24px}
.act.act-hero .stmt{font-size:clamp(20px,2.4vw,30px);font-weight:300;color:var(--txt-1);margin-top:26px;line-height:1.25}
.act.act-hero .stmt span{display:block}
.act.act-hero .stmt .m{color:var(--txt-2)}

/* expertise chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:540px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-1);border:1px solid var(--line-2);padding:11px 16px;background:rgba(12,12,12,.5);
  backdrop-filter:blur(4px);will-change:transform,opacity}

/* "professional experience" cue with an animated horizontal "scroll" hint */
.exp-cue{pointer-events:auto;margin-top:34px;display:inline-flex;align-items:center;gap:16px;
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-3);
  transition:color .4s var(--ease)}
.exp-cue::before{content:"";width:26px;height:1px;background:var(--line-2);transition:width .45s var(--ease),background .45s var(--ease)}
.exp-cue:hover,.exp-cue:focus-visible{color:#fff;outline:none}
.exp-cue:hover::before,.exp-cue:focus-visible::before{width:40px;background:var(--silver)}
.exp-scroll{display:inline-flex;align-items:center;gap:12px;color:var(--silver)}
.id-more{pointer-events:auto;margin-top:clamp(18px,2.4vw,26px);display:inline-flex;align-items:center;gap:.55em;
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-2);
  transition:color .4s var(--ease)}
.id-more .ar{color:var(--silver);transition:transform .4s var(--ease)}
.id-more:hover,.id-more:focus-visible{color:#fff;outline:none}
.id-more:hover .ar,.id-more:focus-visible .ar{transform:translateX(4px)}
.exp-scroll .hline{display:inline-block;width:48px;height:1px;
  background:linear-gradient(90deg,var(--silver),transparent);
  animation:cueGoX 2.4s var(--ease) infinite}
@keyframes cueGoX{0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  50.1%{transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}}

/* bottom-left drag slider (Expertise only) — sits above "/ 05 — EXPERTISE", right of "02" */
.stage-index .idx-slider{display:none}
.stage-index.idx-expertise .idx-slider{display:inline-flex;align-items:center;gap:14px;
  position:absolute;left:74px;bottom:30px;height:16px;pointer-events:auto}
.idx-slider .slide-label{color:var(--txt-3);white-space:nowrap}
.idx-slider .track{position:relative;width:clamp(85px,9vw,150px);height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.idx-slider .fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--silver);border-radius:2px;
  box-shadow:0 0 10px rgba(216,216,216,.45)}
.idx-slider .knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:#fff;border:0;padding:0;cursor:grab;touch-action:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 14px rgba(255,255,255,.5);
  transition:box-shadow .3s var(--ease)}
.idx-slider .knob:hover{box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 20px rgba(255,255,255,.85)}
.idx-slider .knob:active{cursor:grabbing}
.idx-slider .knob:focus-visible{outline:1px solid var(--silver);outline-offset:4px}

/* ---------- professional experience drawer ---------- */
/* fade the nav out while the resume is open so it never overlaps the panel */
.scroll-edition .nav{transition:opacity .4s var(--ease)}
body.resume-open .nav{opacity:0;pointer-events:none}

/* disciplines content — slides out to the left as the resume panel comes in */
.act2-body{will-change:transform,opacity}

/* ---------- centered professional-experience HUD panel ---------- */
.resume-drawer{position:absolute;inset:0;z-index:50;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
.rd-panel{position:relative;pointer-events:none;opacity:0;
  width:min(960px,92vw);height:min(680px,82svh);
  background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-2);box-shadow:0 50px 130px rgba(0,0,0,.55);
  will-change:transform,opacity}
.rd-panel .br{position:absolute;width:16px;height:16px;border:1px solid var(--line-2);pointer-events:none;z-index:2}
.rd-panel .br.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.rd-panel .br.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.rd-panel .br.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.rd-panel .br.br2{bottom:14px;right:14px;border-left:0;border-top:0}
.rd-close{position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);z-index:3;
  background:rgba(5,5,5,.4);border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;
  width:34px;height:34px;line-height:1;font-size:20px;display:grid;place-items:center;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.rd-close:hover,.rd-close:focus-visible{color:#fff;border-color:var(--silver);transform:rotate(90deg);outline:none}

.rd-inner{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:clamp(30px,4vw,56px);-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.rd-inner::-webkit-scrollbar{width:6px}
.rd-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.rd-inner::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.rd-inner::-webkit-scrollbar-track{background:transparent}
.rd-head{margin-bottom:clamp(14px,2vw,20px)}

.rd-id h3{font-family:var(--display);font-weight:500;letter-spacing:.06em;font-size:clamp(30px,4vw,46px);
  color:#fff;line-height:1}
.rd-id .rd-role{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--silver);margin-top:14px}
.rd-id .rd-sum{font-size:clamp(14px,1.5vw,16px);font-weight:300;line-height:1.6;color:var(--txt-2);
  margin-top:18px;max-width:46ch}

.rd-exp{margin-top:34px;border-top:1px solid var(--line-2)}
.rd-job{padding:20px 0;border-bottom:1px solid var(--line)}
.rd-job-h{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.rd-job-role{font-family:var(--display);font-weight:400;font-size:clamp(18px,2.1vw,24px);color:#fff;letter-spacing:-.01em}
.rd-job-when{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.rd-job-org{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin-top:6px}
.rd-job-note{font-size:14px;font-weight:300;line-height:1.55;color:var(--txt-2);margin-top:10px;max-width:48ch}
.rd-job-notes{list-style:none;margin:10px 0 0;padding:0;max-width:48ch;display:flex;flex-direction:column;gap:6px}
.rd-job-notes li{position:relative;padding-left:18px;font-size:14px;font-weight:300;line-height:1.55;color:var(--txt-2)}
.rd-job-notes li::before{content:"";position:absolute;left:2px;top:.7em;width:4px;height:4px;border-radius:50%;background:var(--txt-3)}
.rd-note-link{font:inherit;color:#fff;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--txt-3);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.rd-note-link:hover,.rd-note-link:focus-visible{color:#fff;text-decoration-color:#fff;outline:none}

.rd-meta{margin-top:30px}
.rd-mrow{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.rd-meta .rd-mrow:last-child{border-bottom:none}
.rd-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.rd-meta .v{font-family:var(--display);font-size:clamp(15px,1.6vw,18px);color:#fff;letter-spacing:.01em}
.rd-meta .led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--silver);
  margin-right:10px;box-shadow:0 0 12px rgba(216,216,216,.8);animation:opPulse 2.6s ease-in-out infinite;vertical-align:middle}
/* per-row note: small text, left-aligned below the value */
.rd-mval{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rd-mrow-note{font-size:12px;font-weight:300;line-height:1.5;color:var(--txt-3);text-align:left;max-width:42ch}

/* core skills: categories listed on the right */
.rd-skill-groups{display:flex;flex-direction:column;gap:12px}
.rd-skill-group{display:flex;flex-direction:column;gap:3px}
.rd-skill-cat{font-family:var(--display);font-size:clamp(15px,1.6vw,18px);color:#fff;letter-spacing:.01em}
.rd-skill-items{font-size:14px;font-weight:300;line-height:1.55;color:var(--txt-2)}

/* résumé → portfolio links */
.rd-portfolio{margin-top:30px;border-top:1px solid var(--line-2)}
.rd-portfolio-link{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 2px;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2);
  transition:color .4s var(--ease),padding .4s var(--ease)}
.rd-portfolio-link:hover{color:#fff;padding-inline:14px}
.rd-portfolio-link .ar{color:var(--txt-3);transition:transform .4s var(--ease),color .4s var(--ease)}
.rd-portfolio-link:hover .ar{color:var(--silver);transform:translate(4px,-4px)}

/* operational → portfolio entry point */
.op-portfolio{pointer-events:auto;margin-top:30px;display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-3);
  transition:color .4s var(--ease)}
.op-portfolio::before{content:"";width:26px;height:1px;background:var(--line-2);transition:width .45s var(--ease),background .45s var(--ease)}
.op-portfolio .ar{color:var(--txt-3);transition:transform .45s var(--ease),color .4s var(--ease)}
.op-portfolio:hover,.op-portfolio:focus-visible{color:#fff;outline:none}
.op-portfolio:hover::before,.op-portfolio:focus-visible::before{width:40px;background:var(--silver)}
.op-portfolio:hover .ar,.op-portfolio:focus-visible .ar{color:var(--silver);transform:translate(4px,-4px)}

/* philosophy statements */
.tenets{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.tenet{display:flex;align-items:baseline;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);will-change:transform,opacity}
.tenet .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-3);width:26px}
.tenet .t{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.6vw,34px);color:#fff;letter-spacing:-.01em}

/* unit readout */
.manifest{margin-top:28px;border-top:1px solid var(--line-2)}
.manifest .mrow{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);will-change:transform,opacity}
.manifest .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.manifest .v{font-family:var(--display);font-size:clamp(18px,2vw,26px);color:#fff;letter-spacing:.02em}
.manifest .v.code{font-family:var(--mono);letter-spacing:.14em}
.manifest .led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--silver);
  margin-right:11px;box-shadow:0 0 12px rgba(216,216,216,.8);animation:opPulse 2.6s ease-in-out infinite}
@keyframes opPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* scroll cue */
.cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--txt-3);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.cue .line{width:1px;height:40px;background:linear-gradient(180deg,var(--silver),transparent);
  animation:cueGo 2.4s var(--ease) infinite}
@keyframes cueGo{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* back-to-top button (landing) — mirrors the blog .to-top styling */
.to-top{position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:70;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;appearance:none;
  border-radius:0;background:rgba(5,5,5,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);color:var(--txt-3);font-family:var(--mono);font-size:15px;line-height:1;cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--silver);color:var(--txt-1)}

@media (max-width:820px){
  .telemetry,.rail{display:none}
  .registry{left:24px;top:24px}
  .act{left:24px;right:24px;bottom:96px;max-width:none}
  .stage-index{left:24px;bottom:24px}
  .hud .br{width:28px;height:28px}
  .hud .br.tl,.hud .br.tr{top:18px}.hud .br.tl,.hud .br.bl{left:18px}
  .hud .br.tr,.hud .br.br2{right:18px}.hud .br.bl,.hud .br.br2{bottom:18px}
  .manifest .mrow{grid-template-columns:110px 1fr;gap:14px}
  .rd-panel{width:94vw;height:86svh}
  .rd-mrow{grid-template-columns:100px 1fr;gap:14px}
}

/* reduced motion: no animated scroll line; drawer still toggles via click/slider/Escape */
@media (prefers-reduced-motion:reduce){
  .exp-scroll .hline{animation:none;transform:scaleX(1);transform-origin:left}
}

/* ===================== CONTACT (post-pin) ===================== */
.outro{position:relative;z-index:2;background:linear-gradient(180deg,#050505,#0b0b0b);overflow:hidden}
.outro .wrap{position:relative;z-index:2}
.outro-bg{position:absolute;inset:-20% 0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.outro-bg span{font-family:var(--display);font-weight:600;font-size:30vw;letter-spacing:.04em;color:rgba(255,255,255,.022);white-space:nowrap}
.contact2{padding-block:clamp(120px,18vw,240px);text-align:center}
.contact2 .big{font-size:clamp(44px,9vw,128px);font-weight:400;letter-spacing:-.02em;color:#fff;line-height:1;margin:18px 0}
.contact2 .links{display:flex;flex-direction:column;max-width:560px;margin:64px auto 0;border-top:1px solid var(--line)}
.contact2 .links a{display:flex;justify-content:space-between;align-items:center;padding:24px 6px;
  border-bottom:1px solid var(--line);font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  font-size:13px;color:var(--txt-2);transition:color .4s var(--ease),padding .4s var(--ease)}
.contact2 .links a:hover{color:#fff;padding-inline:18px}
.contact2 .links a .ar{color:var(--txt-3);transition:transform .4s var(--ease),color .4s var(--ease)}
.contact2 .links a:hover .ar{color:var(--silver);transform:translateX(6px)}

.footer2{position:relative;z-index:2;border-top:1px solid var(--line);background:#0b0b0b;
  padding-block:clamp(48px,7vw,90px)}
.footer2 .fg{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.footer2 .fw{font-family:var(--display);font-weight:500;letter-spacing:.3em;font-size:clamp(28px,5vw,56px);color:#fff;line-height:1}
.footer2 .ftag{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-2);margin-top:14px}
.footer2 .ftag a{color:var(--txt-1);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s var(--ease)}
.footer2 .ftag a:hover{opacity:.6}
.footer2 .fmeta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8c;text-align:right;line-height:2}

/* ===================== PORTFOLIO (placeholder, post-pin) ===================== */
.portfolio{position:relative;z-index:2;background:linear-gradient(180deg,#0b0b0b,#050505);overflow:hidden}
.portfolio .wrap{position:relative;z-index:2}
.portfolio-bg{position:absolute;inset:-20% 0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.portfolio-bg span{font-family:var(--display);font-weight:600;font-size:34vw;letter-spacing:.06em;color:rgba(255,255,255,.022);white-space:nowrap}
.pf-wrap{padding-block:clamp(110px,16vw,220px)}
.pf-title{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.02;color:#fff;
  font-size:clamp(40px,7vw,96px);margin-top:18px}
.pf-lede{font-size:clamp(15px,1.7vw,19px);font-weight:300;color:var(--txt-2);margin-top:18px;max-width:48ch}
.pf-grid{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.pf-card{position:relative;display:flex;gap:22px;align-items:flex-start;
  background:#050505;padding:clamp(28px,3vw,40px);text-decoration:none;transition:background .5s var(--ease)}
.pf-card:hover{background:var(--graphite)}
.pf-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-2);padding-top:6px}
.pf-card-body{flex:1}
.pf-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.pf-date{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-top:6px}
.pf-client{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-top:4px}
.pf-context{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);margin-top:4px}
.pf-name{display:block;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,30px);color:#fff;letter-spacing:-.01em;margin-top:10px}
.pf-desc{font-size:14px;font-weight:300;line-height:1.55;color:var(--txt-2);margin-top:10px;max-width:42ch}
/* rendered markdown inside .pf-desc */
.pf-desc>*{margin:0}
.pf-desc>*+*{margin-top:.7em}
.pf-desc ul,.pf-desc ol{padding-left:1.2em;margin-top:.5em}
.pf-desc li+li{margin-top:.25em}
.pf-desc a{color:var(--silver);text-decoration:underline;text-underline-offset:2px}
.pf-card .ar{color:var(--txt-3);font-size:16px;transition:transform .4s var(--ease),color .4s var(--ease)}
.pf-card:hover .ar{color:var(--silver);transform:translate(4px,-4px)}
/* cards are <button>; strip native chrome */
.pf-card{appearance:none;border:0;text-align:left;cursor:pointer;font:inherit;width:100%}
.pf-card[hidden]{display:none}

/* Selected Work type filter */
.pf-filter{margin-top:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;gap:8px}
.pf-filter + .pf-grid{margin-top:clamp(22px,3vw,34px)}
.pf-filter-pill{appearance:none;background:none;cursor:pointer;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);padding:9px 16px;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.pf-filter-pill:hover{color:#fff;border-color:var(--silver)}
.pf-filter-pill.is-active{color:#000;background:var(--silver);border-color:var(--silver)}
.pf-filter-pill:focus-visible{outline:1px solid var(--line-2);outline-offset:3px}

/* Selected Work pager */
.pf-pager{margin-top:clamp(28px,4vw,44px);display:flex;align-items:center;justify-content:center;gap:18px}
.pf-pager[hidden]{display:none}
.pf-pager-nums{display:flex;align-items:center;gap:6px}
.pf-pager-num,.pf-pager-arrow{appearance:none;background:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-3);
  padding:8px 12px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.pf-pager-num:hover,.pf-pager-arrow:not(:disabled):hover{color:#fff}
.pf-pager-num.is-active{color:#fff;border-color:var(--line-2)}
.pf-pager-arrow{font-size:14px}
.pf-pager-arrow:disabled{opacity:.3;cursor:default}
.pf-pager-num:focus-visible,.pf-pager-arrow:focus-visible{outline:1px solid var(--line-2);outline-offset:3px}

@media (max-width:820px){
  .pf-grid{grid-template-columns:1fr}
}

/* ---------- portfolio project detail HUD (fade in / out only) ---------- */
.pf-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(5,5,5,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.pf-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s var(--ease)}
.pf-modal-panel{position:relative;display:none;
  width:min(960px,92vw);height:min(82svh,720px);
  background:rgba(5,5,5,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-2);box-shadow:0 50px 130px rgba(0,0,0,.55);
  transform:translateY(12px) scale(.985);transition:transform .35s var(--ease)}
.pf-modal-panel.is-active{display:block}
.pf-modal.is-open .pf-modal-panel.is-active{transform:none}
.pf-modal-panel .br{position:absolute;width:16px;height:16px;border:1px solid var(--line-2);pointer-events:none;z-index:2}
.pf-modal-panel .br.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.pf-modal-panel .br.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.pf-modal-panel .br.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.pf-modal-panel .br.br2{bottom:14px;right:14px;border-left:0;border-top:0}
.pf-modal-close{position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);z-index:3}

.pf-modal-inner{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:clamp(30px,4vw,56px);-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.pf-modal-inner::-webkit-scrollbar{width:6px}
.pf-modal-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.pf-modal-inner::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.pf-modal-inner::-webkit-scrollbar-track{background:transparent}
.pf-modal-eyebrow{color:var(--silver)}
.pf-modal-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:14px}
.pf-modal-title{font-family:var(--display);font-weight:500;letter-spacing:-.01em;color:#fff;
  font-size:clamp(28px,4vw,48px);line-height:1}
.pf-modal-date{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.pf-modal-desc{font-size:clamp(14px,1.5vw,16px);font-weight:300;line-height:1.6;color:var(--txt-2);margin-top:20px;max-width:60ch}
/* rendered markdown inside .pf-modal-desc */
.pf-modal-desc>*{margin:0}
.pf-modal-desc>*+*{margin-top:1em}
.pf-modal-desc ul,.pf-modal-desc ol{padding-left:1.3em;margin-top:.6em}
.pf-modal-desc li+li{margin-top:.3em}
.pf-modal-desc a{color:var(--silver);text-decoration:underline;text-underline-offset:2px}

.pf-specs{margin-top:28px;border-top:1px solid var(--line-2)}
.pf-spec-row{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.pf-spec-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.pf-spec-row .v{font-family:var(--display);font-size:clamp(15px,1.6vw,18px);color:#fff;letter-spacing:.01em}

.pf-gallery{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.pf-gallery img,.pf-gallery video{width:100%;height:auto;display:block;border:1px solid var(--line);background:var(--charcoal)}
/* external (YouTube/Vimeo) embeds — responsive 16:9 */
.pf-embed{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:var(--charcoal)}
.pf-embed iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}

.pf-modal-links{margin-top:30px;border-top:1px solid var(--line-2)}

@media (max-width:820px){
  .pf-modal-panel{width:94vw;height:88svh}
  .pf-spec-row{grid-template-columns:110px 1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .pf-modal,.pf-modal.is-open,.pf-modal-panel,.pf-modal.is-open .pf-modal-panel.is-active{transition:none}
}

/* loading veil */
.veil{position:fixed;inset:0;z-index:90;background:#050505;display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease)}
.veil.gone{opacity:0;pointer-events:none}
.veil .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--txt-3)}
.veil .lbl b{color:#fff;font-weight:500}

/* right-side cluster: row of [links + player + (mobile) hamburger] with the
   now-playing ticker on a second line beneath it */
.scroll-edition .nav-cluster{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.scroll-edition .nav-cluster-row{display:flex;align-items:center;gap:34px}

/* mobile nav: the links collapse into a dropdown panel toggled by the
   hamburger; the music player + hamburger stay in the bar. */
.scroll-edition .brand{cursor:pointer;transition:color .35s var(--ease)}
.scroll-edition .brand:hover{color:#fff}
.scroll-edition .brand:focus-visible{outline:1px solid var(--line-2);outline-offset:6px}

@media (max-width:760px){
  .scroll-edition .nav{padding-inline:16px}
  .scroll-edition .brand{letter-spacing:.14em}
  .scroll-edition .nav-cluster{gap:10px}
  .scroll-edition .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    padding:6px 16px 16px;
    background:rgba(5,5,5,.985);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;
  }
  .scroll-edition .nav-links.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .scroll-edition .nav-links a{
    font-size:12px;letter-spacing:.18em;padding:15px 2px;
    border-top:1px solid var(--line);
  }
  .scroll-edition .nav-links a:first-child{border-top:0}
}