/* =========================================================================
   RETRO LAYER: "Night Shift"
   A cartoon / pixel skin on top of style.css, scoped to html.retro.
   Remove that one class from <html> and the original theme comes back.

   Rules this layer keeps to:
   - One page theme (dark ink-green night). One colour block: contact.
   - One UI accent: portal green. The candy colours belong to the
     characters (critters.js) and nothing else.
   - Pixel type for headlines and scores only. Everything you read at
     length is set in Bricolage Grotesque, sized for comfort.
   - One shape rule: square corners. The only round things are the tool
     nodes in the stack orbit, because the orbit itself is circular.
   ========================================================================= */

@font-face{font-family:'Pixelify Sans';src:url(../fonts/pixelify-sans.woff2) format('woff2');
  font-weight:400 700;font-display:swap;size-adjust:112%}
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque.woff2) format('woff2');
  font-weight:400 800;font-display:swap}
@font-face{font-family:'Press Start 2P';src:url(../fonts/press-start-2p.woff2) format('woff2');font-display:swap}

/* ----------------------------- Tokens ---------------------------------- */
html.retro{
  --bg:#101714;
  --bg-raise:#131c18;
  --bg-panel:#18231e;
  --ink:#070b09;
  --edge:#2b3b33;
  --text:#f3eedf;
  --text-dim:#d3cebf;
  --muted:#a3a193;
  --line:rgba(243,238,223,.12);
  --line-strong:rgba(243,238,223,.24);

  --green:#8fe06b;          /* the one accent */
  --green-deep:#4f9a3a;
  /* character palette, used by the critters only */
  --pink:#f08db3;--yellow:#f2cb4e;--orange:#ef9651;--cyan:#72cfdb;

  --coral:var(--green);
  --bronze:var(--green);
  --olive:var(--green);

  --glass:var(--bg-panel);
  --glass-strong:var(--bg-panel);
  --glass-brd:var(--edge);

  --serif:'Pixelify Sans', 'Bricolage Grotesque', system-ui, sans-serif;
  --sans:'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --mono:'Bricolage Grotesque', system-ui, sans-serif;
  --pixel:'Press Start 2P', ui-monospace, monospace;
  --script:'Pixelify Sans', sans-serif;

  --shadow:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.34,1.4,.5,1);   /* a little cartoon overshoot */
}

html.retro *,html.retro *::before,html.retro *::after{border-radius:0!important}
html.retro .stack-node,html.retro .stack-map__hub,html.retro .stack-map__hub::before,html.retro .stack-map__pulse,
html.retro .stack-map__stage::before,html.retro .stack-map__stage::after,
html.retro .stack-pill__disc,html.retro .hero__avail .dot{border-radius:50%!important}

/* ----------------------------- Ground ---------------------------------- */
html.retro body{
  background-color:var(--bg);
  /* a sparse pixel night sky; two tile sizes so the repeat never reads */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' shape-rendering='crispEdges'%3E%3Cg fill='%23f3eedf'%3E%3Crect x='18' y='26' width='2' height='2' opacity='.5'/%3E%3Crect x='150' y='70' width='2' height='2' opacity='.3'/%3E%3Crect x='236' y='150' width='3' height='3' opacity='.45'/%3E%3Crect x='70' y='190' width='2' height='2' opacity='.3'/%3E%3Crect x='190' y='244' width='2' height='2' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430' shape-rendering='crispEdges'%3E%3Cpath fill='%238fe06b' opacity='.35' d='M330 170h3v3h-3zM327 173h3v3h-3zM333 173h3v3h-3zM330 176h3v3h-3z'/%3E%3Crect x='60' y='320' width='2' height='2' fill='%23f3eedf' opacity='.25'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed;
  font-size:clamp(16.5px,1.12vw,18px);
  line-height:1.62;
  letter-spacing:.003em;
}
html.retro ::selection{background:var(--green);color:var(--ink)}
html.retro :focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* retired decoration: grain, blobs, grid lines, custom cursor */
html.retro .grain{inset:0;opacity:.035;animation:none;will-change:auto;z-index:400;
  background-image:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
html.retro .blob,html.retro .gridlines,html.retro .cursor-dot,html.retro .cursor-ring{display:none!important}
html.retro body.cursor-on,html.retro body.cursor-on *{cursor:auto}
html.retro body.cursor-on a,html.retro body.cursor-on button,html.retro body.cursor-on [role=tab]{cursor:pointer}
html.retro .scroll-prog{height:4px;box-shadow:none;background:var(--green)}

/* ------------------------------- Type ---------------------------------- */
html.retro h1,html.retro h2,html.retro h3,html.retro h4{font-weight:600;letter-spacing:0;line-height:1.08;text-wrap:balance}
html.retro p{text-wrap:pretty}
html.retro .h-xl{font-size:clamp(2rem,4.3vw,3.5rem)}
html.retro .h-lg{font-size:clamp(1.8rem,3.4vw,2.8rem)}
html.retro .display,html.retro .h-xl,html.retro .h-lg{text-shadow:.05em .05em 0 var(--ink)}
html.retro em,html.retro .serif-italic{font-style:normal}
html.retro .hl{color:var(--green);font-style:normal}
html.retro .grad-text{background:none;color:var(--green);-webkit-text-fill-color:currentColor}
html.retro .lede{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.55;font-weight:400;color:var(--text-dim);max-width:58ch}
html.retro .muted{color:var(--muted)}
/* small labels: sentence case, no wide tracking, so they read instead of decorate */
html.retro .eyebrow,html.retro .mono-label,html.retro .stat__l,html.retro .rel__meta,html.retro .rel__plat,html.retro .rel__kpi,
html.retro .tl__date,html.retro .tl__side,html.retro .tl__skills span,html.retro .rel__grid .k,html.retro .rel__lesson .k,
html.retro .rel__art .k,html.retro .rel__art em,html.retro .work-card__idx,html.retro .work-card__link,html.retro .about__facts dt,
html.retro .stack-legend button,html.retro .stack-grid__hd,html.retro .cs-hero__meta dt,html.retro .cs-nav a,html.retro .cs-callout .k,
html.retro .cs-metrics .l,html.retro .footer small,html.retro .footer__links,html.retro .to-top,html.retro .menu__foot,
html.retro .stack-readout__cat,html.retro .band__l,html.retro .cs-hero__idx,html.retro .placeholder-note{
  font-family:var(--sans);text-transform:none;letter-spacing:.01em}
html.retro .eyebrow{font-size:.95rem;font-weight:600;color:var(--green);gap:.6em}
html.retro .eyebrow::before{width:10px;height:10px;background:var(--green);opacity:1}

/* ------------------------------ Loader --------------------------------- */
html.retro .loader__mesh,html.retro .loader__sweep,html.retro .loader__glow{display:none}
html.retro .loader__grain{display:none}
html.retro .loader__mark{font-weight:700;text-shadow:.07em .07em 0 var(--ink)}
html.retro .loader__mark .ma{background:none;color:var(--text)}
html.retro .loader__mark .dot{color:var(--green)}
html.retro .loader__line{height:12px;border:3px solid var(--text);background:transparent;width:min(220px,56vw)}
html.retro .loader__line i{background:repeating-linear-gradient(90deg,var(--green) 0 8px,transparent 8px 10px);box-shadow:none;inset:1px auto 1px 1px}
html.retro .loader__pct{font-family:var(--pixel);font-size:10px;letter-spacing:.1em}

/* ------------------------------- Nav ----------------------------------- */
html.retro .nav{background:rgba(19,28,24,.92);border:2px solid var(--edge);box-shadow:var(--shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 9px 9px 18px}
html.retro .nav.scrolled{background:rgba(19,28,24,.96);box-shadow:var(--shadow)}
html.retro .nav__brand .sig{font-weight:700;font-size:1.35rem}
html.retro .nav__links a{font-size:.95rem;font-weight:500;padding:7px 12px;color:var(--text-dim)}
html.retro .nav__links a::after{height:3px;inset:auto 12px 1px;background:var(--green)}
html.retro .nav__links a:hover{color:var(--text)}
html.retro .nav__cta{font-size:.92rem;font-weight:700;padding:10px 16px;background:var(--green);color:var(--ink);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
html.retro .nav__cta:hover{background:var(--green);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
html.retro .nav__burger span{height:3px;background:var(--text)}
html.retro .menu{background:rgba(16,23,20,.98)}
html.retro .menu a{font-weight:700}
html.retro .menu a:hover{color:var(--green)}

/* ----------------------------- Buttons --------------------------------- */
html.retro .btn{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:0;line-height:1.2;
  padding:14px 22px;border:2px solid var(--text);background:transparent;color:var(--text);overflow:visible;white-space:nowrap;
  box-shadow:4px 4px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s}
html.retro .btn::before{display:none}
html.retro .btn:hover{color:var(--ink);background:var(--text);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
html.retro .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
html.retro .btn--solid{background:var(--green);color:var(--ink);border-color:var(--ink)}
html.retro .btn--solid:hover{background:var(--green);color:var(--ink)}
html.retro .btn:hover .arrow{transform:translate(2px,-2px)}

/* ------------------------------- Hero ---------------------------------- */
html.retro .hero{min-height:100dvh;align-items:center;padding-bottom:clamp(40px,5vw,72px)}
html.retro .hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);align-items:center}
html.retro .hero__avail{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
html.retro .hero__avail .dot{width:10px;height:10px;background:var(--green);box-shadow:none;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
html.retro .hero h1.display{font-size:clamp(2.1rem,3.5vw,3.6rem);line-height:1.06;margin-top:.35em}
html.retro .hero .line > span{line-height:1.1}
html.retro .hero__sub{font-size:clamp(1.12rem,1.45vw,1.35rem);max-width:40ch}
html.retro .hero__sub strong{color:var(--text);font-weight:700}

/* the game cabinet */
html.retro .portrait-frame{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);outline:2px solid var(--edge);outline-offset:-6px;overflow:visible}
html.retro .portrait-frame .hero-fluid{outline:none}
html.retro .portrait-frame.hero-fluid-frame{background:#0b120f}
html.retro .portrait-frame::after{background:none}
html.retro .hero-fluid__cap{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;color:var(--text)}
html.retro .hero-fluid__cap > span{background:var(--ink);border:2px solid var(--edge);backdrop-filter:none;-webkit-backdrop-filter:none;padding:7px 9px}
html.retro .hero-game__score b{color:var(--green);font-size:9px}
html.retro .hero-game__hint{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none;background:var(--ink);
  border:2px solid var(--green);color:var(--text);backdrop-filter:none;-webkit-backdrop-filter:none}
html.retro .hero-game__hint.gone{animation:none;opacity:0}

/* ----------------------------- Marquee --------------------------------- */
html.retro .marquee{background:var(--bg-raise);border-block:2px solid var(--edge);padding:14px 0}
html.retro .marquee__track span{font-family:var(--serif);font-weight:600;color:var(--text-dim)}
html.retro .marquee__track span::after{content:"";width:.34em;height:.34em;background:var(--green)}

/* ---------------------- Section headers, stacked ----------------------- */
html.retro .sec-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
html.retro .sec-head > div{display:flex;flex-direction:column;gap:12px}

/* --------------------- Intro stats: plain, no boxes -------------------- */
html.retro .stats{gap:0;background:none;border:none;border-top:2px solid var(--edge);overflow:visible}
html.retro .stat{background:none;border:none;padding:26px 24px 0 0}
html.retro .stat::before{display:none}
html.retro .stat__n{font-family:var(--pixel);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.2;color:var(--text)}
html.retro .stat__l{font-size:.98rem;color:var(--muted);line-height:1.45;margin-top:14px}

/* ------------------------------- Work ---------------------------------- */
html.retro .work-card{background:var(--bg-panel);border:2px solid var(--edge);backdrop-filter:none;overflow:visible;
  box-shadow:8px 8px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
html.retro .work-card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink);border-color:var(--green)}
html.retro .work-card__bg{display:none}
html.retro .work-card__title{font-weight:700;line-height:1;font-size:clamp(2.4rem,6vw,4.8rem);text-shadow:.05em .05em 0 var(--ink)}
html.retro .work-card__idx{font-size:.95rem;font-weight:600;color:var(--green)}
html.retro .work-card__meta li{font-size:.92rem;border:2px solid var(--edge);background:var(--bg);color:var(--text-dim)}
html.retro .work-card__desc{font-weight:400;font-size:1.05rem;color:var(--text-dim)}
html.retro .work-card__link{font-size:1rem;font-weight:700;color:var(--green)}

/* ----------------------------- Shipped --------------------------------- */
html.retro .rel__rail{padding:6px 10px 16px 4px}
html.retro .rel__card{background:var(--bg-panel);border:2px solid var(--edge);box-shadow:5px 5px 0 var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
html.retro .rel__card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
html.retro .rel__card.is-on{background:var(--bg-panel);border-color:var(--green);box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}
html.retro .rel__cover{border:2px solid var(--ink)}
html.retro .rel__meta{font-size:.85rem;color:var(--muted)}
html.retro .rel__t{font-weight:600;font-size:clamp(1.1rem,1.5vw,1.3rem)}
html.retro .rel__plat{font-size:.85rem}
html.retro .rel__kpi{font-size:.85rem;border-top:2px solid var(--edge)}
html.retro .rel__kpi b{font-family:var(--pixel);font-weight:400;font-size:.9rem;color:var(--green)}
html.retro .rel__panels{background:var(--bg-panel);border:2px solid var(--edge);box-shadow:8px 8px 0 var(--ink)}
html.retro .rel__hook{font-weight:500;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--text)}
html.retro .rel__grid{border-top:2px solid var(--edge)}
html.retro .rel__grid p,html.retro .rel__lesson p{font-weight:400;font-size:1rem;line-height:1.62}
html.retro .rel__grid .k,html.retro .rel__lesson .k,html.retro .rel__art .k{font-size:.9rem;font-weight:700;color:var(--green)}
html.retro .rel__lesson{border-left:4px solid var(--green);background:rgba(143,224,107,.06)}
html.retro .rel__lesson em{font-style:italic;color:var(--text)}
html.retro .rel__art em{font-size:.85rem;border:2px solid var(--edge)}

/* ----------------------- Scoreboard (impact band) ---------------------- */
html.retro .band{background:transparent;color:var(--text);border:none;padding-block:clamp(40px,5vw,72px)}
html.retro .band__inner{background:var(--bg-panel);border:2px solid var(--edge);box-shadow:8px 8px 0 var(--ink);padding:clamp(24px,4vw,48px)}
html.retro .band__title{font-weight:700;color:var(--text);font-size:clamp(2rem,4.3vw,3.5rem);margin-top:0;text-shadow:.05em .05em 0 var(--ink)}
html.retro .band__stats{gap:0;background:none;border:none;margin-top:clamp(26px,3.5vw,44px)}
html.retro .band__stats li{background:var(--ink);border:none;border-right:2px solid var(--bg-panel);padding:22px 20px}
html.retro .band__stats li:last-child{border-right:none}
html.retro .band__stats li:hover{background:#0b110e}
html.retro .band__stats b{font-family:var(--pixel);font-weight:400;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.2;color:var(--green);margin-top:0}
html.retro .band__l{font-size:.95rem;color:var(--text-dim);margin-top:12px}

/* ---------------------------- Services --------------------------------- */
html.retro .services-grid{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px) clamp(32px,5vw,72px);
  background:none;border:none;overflow:visible}
html.retro .svc{background:none;border:none;border-left:3px solid var(--edge);padding:4px 0 4px 20px;min-height:0;display:block;
  transition:border-color .2s}
html.retro .svc::before,html.retro .svc__arrow,html.retro .svc__n{display:none}
html.retro .svc:hover{background:none;border-left-color:var(--green)}
html.retro .svc__t{font-weight:600;font-size:clamp(1.25rem,1.8vw,1.55rem);margin:0}
html.retro .svc__d{opacity:1;max-height:none;margin-top:8px;font-size:1rem;color:var(--text-dim);line-height:1.55}

/* ------------------------------ About ---------------------------------- */
html.retro .about__portrait{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:visible}
html.retro .about__facts{gap:0;background:none;border:none;border-top:2px solid var(--edge)}
html.retro .about__facts div{background:transparent;border-bottom:none;padding:12px 0;font-size:.98rem}
html.retro .about__facts dt{font-size:.9rem;font-weight:600;color:var(--muted)}
html.retro .prose{max-width:62ch}
html.retro .prose p{font-weight:400;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.68;color:var(--text-dim)}
html.retro .prose strong{color:var(--text);font-weight:700}
html.retro .prose .drop::first-letter{initial-letter:normal;-webkit-initial-letter:normal;float:none;font-size:inherit;
  font-family:inherit;font-weight:inherit;color:inherit;margin:0}
html.retro .pull{font-style:normal;font-weight:600;border-left:4px solid var(--green);color:var(--text);font-size:clamp(1.5rem,2.6vw,2.1rem)}

/* ---------------------------- Experience ------------------------------- */
html.retro .timeline{border-top:2px solid var(--edge)}
html.retro .tl{border-bottom:2px solid var(--edge)}
html.retro .tl::before{width:4px;background:var(--green)}
html.retro .tl__date{font-size:.95rem;font-weight:600;color:var(--muted)}
html.retro .tl__role{font-weight:600;font-size:clamp(1.4rem,2.3vw,2rem)}
html.retro .tl__co{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--green)}
html.retro .tl__body{font-weight:400;font-size:1.02rem;color:var(--text-dim)}
html.retro .tl__skills span{font-size:.85rem;border:2px solid var(--edge);color:var(--text-dim)}
html.retro .tl__side{font-size:.9rem;font-weight:600;color:var(--muted)}

/* ------------------------------ Skills --------------------------------- */
html.retro .skills-cloud .sk{font-weight:600;letter-spacing:0;color:var(--text-dim)}
html.retro .skills-cloud .sk[data-w="3"]{font-style:normal;color:var(--text)}
html.retro .skills-cloud .sk:hover,html.retro .skills-cloud .sk[data-accent]:hover{color:var(--green)}
html.retro .skills-cloud .sep{color:var(--edge)}

/* ------------------------------ Stack ---------------------------------- */
html.retro .cat-ai,html.retro .cat-prod,html.retro .cat-seo,html.retro .cat-comm{--c:var(--green)}
html.retro .stack-legend .cat-ai{background:var(--green)}
html.retro .stack-legend .cat-prod{background:var(--text)}
html.retro .stack-legend .cat-seo{background:var(--muted)}
html.retro .stack-legend .cat-comm{background:var(--edge);outline:1px solid var(--muted)}
html.retro .stack{border-top:2px solid var(--edge)}
html.retro .stack-row{border-bottom:2px solid var(--edge)}
html.retro .stack-row::before{width:4px;background:var(--green)}
html.retro .stack-row__label{font-weight:600}
html.retro .stack-chips li{font-size:.95rem;border:2px solid var(--edge);background:var(--bg-panel)}
html.retro .stack-chips li.is-ai{border-color:var(--green-deep);background:var(--bg-panel)}
html.retro .stack-map__stage::before{border:2px dashed rgba(143,224,107,.25)}
html.retro .stack-map__stage::after{border:2px dashed rgba(243,238,223,.12)}
html.retro .stack-map__line{stroke:rgba(243,238,223,.14);stroke-width:2;stroke-dasharray:4 5}
html.retro .stack-map__line.hot{stroke:var(--green);stroke-width:2.5;stroke-dasharray:none}
/* the hub is a little portal: rings turn underneath, the mark stays still */
html.retro .stack-map__hub{border:3px solid var(--ink);backdrop-filter:none;color:var(--ink);background:var(--green-deep);
  box-shadow:0 0 0 3px var(--green)}
html.retro .stack-map__hub::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle,var(--green) 0 30%,transparent 31%),repeating-conic-gradient(var(--green) 0 15deg,var(--green-deep) 15deg 30deg)}
html.retro.js .stack-map__hub::before{animation:portalSpin 9s linear infinite}
@keyframes portalSpin{to{rotate:360deg}}
html.retro .stack-map__pulse{border:2px solid var(--green)}
html.retro .stack-node{background:var(--bg-panel);border:2px solid var(--edge);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.retro .stack-node.ai{background:var(--bg-panel);border-color:var(--green-deep)}
html.retro .stack-node__name{font-family:var(--sans);font-weight:600;color:var(--text)}
html.retro .stack-node:hover,html.retro .stack-node.active{background:var(--bg-raise);border-color:var(--green);box-shadow:4px 4px 0 var(--ink)}
html.retro .stack-readout__cat{font-size:.9rem;font-weight:600;color:var(--green)}
html.retro .stack-readout__name{font-weight:700}
html.retro .stack-readout__desc{font-weight:400;color:var(--text-dim)}
html.retro .stack-legend button{font-size:.9rem;font-weight:600;border:2px solid var(--edge);background:var(--bg-panel);color:var(--text-dim)}
html.retro .stack-legend button:hover{border-color:var(--green);color:var(--text)}
html.retro .stack-legend .dot{width:10px;height:10px}
html.retro .stack-pill{background:var(--bg-panel);border:2px solid var(--edge);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:.98rem}
html.retro .stack-pill.ai{border-color:var(--green-deep)}
html.retro .stack-pill__disc{background:var(--bg);border:2px solid var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
html.retro .stack-grid__grp{border-bottom:2px solid var(--edge)}
html.retro .stack-grid__hd{font-size:.95rem;font-weight:700}

/* ---------------- Contact: the page's one colour block ----------------- */
html.retro .contact--bold{background:var(--green);border-top:3px solid var(--ink);overflow:visible}
html.retro .contact--bold .lede{color:var(--ink);font-weight:500;max-width:34ch}
html.retro .contact__sig{font-weight:700;letter-spacing:0}
html.retro .contact--bold .contact__sig{color:var(--ink)}
html.retro .contact__mail{font-family:var(--sans);font-weight:700;border-bottom-width:3px}
html.retro .contact--bold .contact__mail{color:var(--ink);border-bottom-color:var(--ink)}
html.retro .contact--bold .contact__mail:hover{color:var(--ink);border-bottom-color:transparent}
html.retro .contact--bold .btn{color:var(--ink);border-color:var(--ink);background:transparent;box-shadow:4px 4px 0 var(--ink)}
html.retro .contact--bold .btn:hover{background:var(--ink);color:var(--green)}
html.retro .contact--bold .btn--solid{background:var(--ink);color:var(--green)}
html.retro .contact--bold .btn--solid:hover{background:var(--ink);color:var(--text)}

/* ------------------------------ Footer --------------------------------- */
html.retro .footer{border-top:3px solid var(--ink);background:var(--bg-raise)}
html.retro .footer__sig{font-weight:700}
html.retro .footer small{font-size:.9rem}
html.retro .footer__links{font-size:.95rem;font-weight:600}
html.retro .footer__links a:hover,html.retro .to-top:hover{color:var(--green)}
html.retro .to-top{font-size:.9rem;font-weight:600}

/* ---------------------------- Case study ------------------------------- */
html.retro .cs-hero{min-height:auto;padding-top:calc(var(--nav-h) + 64px)}
html.retro .cs-hero__idx{font-size:.95rem;font-weight:600;color:var(--green)}
html.retro .cs-hero h1{font-weight:700;font-size:clamp(2.6rem,7vw,5.6rem);text-shadow:.05em .05em 0 var(--ink)}
html.retro .cs-hero__meta{border-top:2px solid var(--edge)}
html.retro .cs-hero__meta dt{font-size:.9rem;font-weight:600;color:var(--muted)}
html.retro .cs-hero__meta dd{font-size:1.02rem}
html.retro .cs-nav a{font-size:.95rem;font-weight:500;border-bottom:none;padding:7px 0}
html.retro .cs-nav a:hover,html.retro .cs-nav a.active{color:var(--green)}
html.retro .cs-block{border-bottom:2px solid var(--edge)}
html.retro .cs-block h2{font-weight:700;font-size:clamp(1.6rem,2.8vw,2.3rem)}
html.retro .cs-block h2 .cs-num{display:none}
html.retro .cs-block p,html.retro .cs-block ul li{font-weight:400;font-size:clamp(1.03rem,1.25vw,1.15rem);line-height:1.68;color:var(--text-dim)}
html.retro .cs-block strong{color:var(--text)}
html.retro .cs-block ul li::before{content:"";top:.62em;width:8px;height:8px;background:var(--green)}
html.retro .cs-callout,html.retro .cs-deck{background:var(--bg-panel);border:2px solid var(--edge);box-shadow:var(--shadow);backdrop-filter:none}
html.retro .cs-callout .k{font-size:.9rem;font-weight:700;color:var(--green)}
html.retro .cs-deck__t{font-weight:700;color:var(--text)}
html.retro .cs-deck__d{color:var(--text-dim)}
html.retro .cs-metrics{gap:0;background:none;border:none;border-top:2px solid var(--edge);overflow:visible}
html.retro .cs-metrics div{background:none;padding:22px 20px 0 0}
html.retro .cs-metrics .n{font-family:var(--pixel);font-weight:400;font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.3;color:var(--green)}
html.retro .cs-metrics .l{font-size:.92rem}
html.retro .placeholder-note{font-size:.85rem;color:var(--muted)}
html.retro .cs-next a{font-weight:700}
html.retro .cs-next a:hover{color:var(--green)}

/* ------------------------------ Critters ------------------------------ */
/* A peek window sits on the host's edge. Its clip-path only cuts below that
   edge, so the character can hop and talk above it but hides behind the host. */
html.retro .peek{position:absolute;pointer-events:none;z-index:3;
  clip-path:inset(-400px -400px 0 -400px)}
html.retro .peek--top{bottom:100%}
html.retro .critter{display:block;position:relative;line-height:0;pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
html.retro .critter:focus{outline:none}
html.retro .critter:focus-visible .critter__sprite{outline:3px solid var(--green);outline-offset:3px}
html.retro .peek .critter{position:absolute;left:0;top:0;transform:translateY(100%);transition:transform .55s var(--ease)}
html.retro .peek.up .critter{transform:translateY(0)}
html.retro .critter__sprite{display:block;position:relative}
html.retro .critter__frame{display:none}
html.retro .critter__frame.on{display:block}
html.retro .critter__frame svg{display:block}
html.retro .critter__sprite.hop{animation:critterHop .5s var(--ease)}
@keyframes critterHop{35%{translate:0 -16%}70%{translate:0 2%}}
html.retro .critter__pupil{position:absolute;background:var(--ink);transition:transform .12s steps(2)}
html.retro .critter__sprite:has(.critter__frame:last-child.on) .critter__pupil{opacity:0}
html.retro .critter__say{position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50% 6px;z-index:6;
  white-space:nowrap;background:var(--text);color:var(--ink);font:600 .9rem/1.25 var(--sans);letter-spacing:0;
  padding:8px 12px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  opacity:0;pointer-events:none;transition:opacity .18s,translate .3s var(--ease)}
html.retro .critter__say::after{content:"";position:absolute;top:100%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  background:var(--text);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);rotate:45deg}
html.retro .critter.say-left .critter__say{left:auto;right:-4px;translate:0 6px}
html.retro .critter.say-left .critter__say::after{left:auto;right:18px}
html.retro .critter.talking .critter__say{opacity:1;translate:-50% 0}
html.retro .peek:not(.up) .critter__say{opacity:0!important}
html.retro .critter.say-left.talking .critter__say{translate:0 0}
html.retro .critter-lane{position:relative;height:0;z-index:3}
html.retro .critter-lane .critter{position:absolute;left:0;bottom:0}
html.retro .critter-lane .critter__sprite{transition:none}
/* the saucer drifts across the hero sky, then waits off-screen */
html.retro .saucer{position:absolute;left:0;top:clamp(90px,14vh,150px);z-index:1;pointer-events:none;
  animation:saucerFly 24s linear 3s infinite;translate:-140px 0}
html.retro .saucer .critter{cursor:default;pointer-events:none;animation:critterBob 1.8s ease-in-out infinite}
@keyframes saucerFly{0%{translate:-140px 0}55%{translate:calc(100vw + 40px) 40px}100%{translate:calc(100vw + 40px) 40px}}
html.retro .critter--float{position:absolute;z-index:4;animation:critterBob 3.4s ease-in-out infinite}
@keyframes critterBob{50%{translate:0 -12px}}
html.retro .critter--float .critter__say{left:auto;right:0;translate:0 6px}
html.retro .critter--float.talking .critter__say{translate:0 0}
html.retro .critter--float .critter__say::after{left:auto;right:18px}
@media (prefers-reduced-motion:reduce){
  html.retro .critter--float,html.retro .critter__sprite.hop{animation:none}
  html.retro .peek .critter{transition:none}
}

/* ---------------------------- Responsive ------------------------------- */
@media (max-width:1024px){
  html.retro .cs-nav a{border:2px solid var(--edge);padding:7px 12px}
  html.retro .band__stats{grid-template-columns:repeat(2,1fr)}
  html.retro .band__stats li{border-right:none;border-bottom:2px solid var(--bg-panel)}
}
@media (max-width:760px){
  html.retro .hero__grid{grid-template-columns:1fr}
  html.retro .services-grid{grid-template-columns:1fr}
  html.retro .stats{grid-template-columns:repeat(2,1fr)}
  html.retro .contact__sig{font-size:11vw}
  html.retro .work-card{box-shadow:6px 6px 0 var(--ink)}
  html.retro .hero__portrait{margin-top:64px}
  html.retro .hero h1.display{font-size:clamp(1.8rem,7.6vw,2.5rem)}
  html.retro .hero .line,html.retro .hero .line > span{display:inline;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html.retro .stack-map__hub::before,html.retro .hero__avail .dot{animation:none!important}
}