/* ============================================================
   LAWRENCE LEI-RAMIREZ — "The Bench Notebook"
   An engineer's sketchbook: paper grain, marker highlights,
   hand-drawn marginalia, letterpress display type.
   ============================================================ */

@font-face{
  font-family:"Inter var";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Bricolage var";
  src:url("fonts/bricolage.woff2") format("woff2");
  font-weight:200 800;
  font-stretch:75% 100%;
  font-display:swap;
}
@font-face{
  font-family:"Caveat var";
  src:url("fonts/caveat.woff2") format("woff2");
  font-weight:400 700;
  font-display:swap;
}

/* ---------- 1. TOKENS ---------- */

:root{
  /* paper + ink */
  --paper:       #f4eee2;
  --paper-2:     #ece4d4;
  --paper-3:     #e0d5c0;
  --card:        #fffaf0;
  --ink:         #16120e;
  --ink-2:       #5a4f42;
  --ink-3:       #8c7f6d;
  --rule:        #cbbfa9;

  /* brand */
  --orange:      #e4572e;
  --orange-deep: #c33f1b;
  --amber:       #f2b134;
  --lime:        #d7f24b;
  --cocoa:       #5c3b37;
  --cocoa-deep:  #3a2522;
  --blueprint:   #2b4c7e;
  --cam:         #3fa34d;

  /* semantic aliases (kept for legacy component CSS + JS) */
  --bg:          var(--paper);
  --bg-elevated: var(--card);
  --surface:     var(--paper-2);
  --surface-2:   var(--paper-3);
  --divider:     var(--rule);
  --accent:      var(--orange);
  --accent-ink:  #fffaf0;
  --focus:       var(--blueprint);

  /* type */
  --sans:    "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: "Bricolage var", "Inter var", Impact, sans-serif;
  --hand:    "Caveat var", "Bradley Hand", "Segoe Print", "Snell Roundhand", cursive;
  --mono:    "SF Mono", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
  --serif:   ui-serif, "New York", Georgia, serif;
  --fun:     var(--display);

  /* motion */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  /* geometry */
  --nav-h: 60px;
  --container: 1120px;

  /* the hand-drawn box: wobbly corners, no two alike */
  --wobble:   255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobble-2: 15px 225px 15px 255px / 225px 15px 255px 15px;
  --wobble-3: 120px 8px 150px 12px / 10px 160px 14px 130px;

  --shadow-hard:    5px 5px 0 var(--ink);
  --shadow-hard-lg: 9px 9px 0 var(--ink);
}

html[data-theme="dark"]{
  --paper:       #16120e;
  --paper-2:     #211b15;
  --paper-3:     #2e251d;
  --card:        #1d1710;
  --ink:         #f6f0e4;
  --ink-2:       #bcae99;
  --ink-3:       #8c7f6d;
  --rule:        #44382c;

  --orange:      #ff7a4d;
  --orange-deep: #e4572e;
  --amber:       #ffc75c;
  --lime:        #e2fb63;
  --cocoa:       #7a4f49;
  --cocoa-deep:  #2a1a18;
  --blueprint:   #6ea8ff;
  --cam:         #5ad06a;

  --accent-ink:  #16120e;
  --shadow-hard:    5px 5px 0 var(--ink);
  --shadow-hard-lg: 9px 9px 0 var(--ink);
}

/* ---------- 2. BASE ---------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background .5s var(--ease-soft), color .5s var(--ease-soft);
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:var(--ink)}
html[data-theme="dark"] ::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--blueprint);outline-offset:3px;border-radius:3px}

.wrap{width:min(var(--container),100% - 48px);margin-inline:auto}
.wrap-wide{width:min(1420px,100% - 48px);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - 48px);margin-inline:auto}
@media (max-width:600px){
  .wrap,.wrap-narrow{width:calc(100% - 28px)}
  .wrap-wide{width:calc(100% - 20px)}
}

section{scroll-margin-top:calc(var(--nav-h) + 16px)}
.pad{padding-block:clamp(72px,11vw,140px)}
.pad-sm{padding-block:clamp(48px,7vw,86px)}

/* ---------- 3. PAPER GRAIN + TEXTURE ---------- */

.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  will-change:transform;
}
/* screen over a near-black page lifts the blacks fast — keep it faint */
html[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.07}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grain-drift 7s steps(6) infinite}
}
@keyframes grain-drift{
  0%{transform:translate(0,0)}      16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}  50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)}   83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}

/* ruled-notebook background for selected bands */
.ruled{
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 33px,color-mix(in srgb,var(--rule) 48%,transparent) 33px 34px);
  background-position:0 6px;
}
.graph{
  background-image:
    linear-gradient(color-mix(in srgb,var(--rule) 34%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--rule) 34%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
}

/* ---------- 4. TYPE ---------- */

/* small wide-tracked label — from Onyx */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;flex:none;
  background:var(--orange);border-radius:2px;
}
.eyebrow.no-rule::before{display:none}
.eyebrow.centered{justify-content:center}

/* huge condensed uppercase — Trash / Airship / Pickles */
.display{
  font-family:var(--display);
  font-variation-settings:"wght" 800,"wdth" 78,"opsz" 96;
  font-size:clamp(52px,10.6vw,142px);
  line-height:.86;
  letter-spacing:-.022em;
  text-transform:uppercase;
  text-wrap:balance;
}
/* letterpress offset — Airship */
.display.press{
  color:var(--card);
  text-shadow:
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    6px 6px 0 var(--ink),
    10px 10px 0 color-mix(in srgb,var(--orange) 92%,transparent);
  paint-order:stroke fill;
  -webkit-text-stroke:2px var(--ink);
}
@media (max-width:620px){
  .display.press{
    text-shadow:2px 2px 0 var(--ink),3px 3px 0 var(--ink),6px 6px 0 var(--orange);
    -webkit-text-stroke:1.5px var(--ink);
  }
}
.display.outline{
  color:transparent;
  -webkit-text-stroke:2.5px var(--ink);
}
html[data-theme="dark"] .display.press{
  color:#f6f0e4;
  -webkit-text-stroke:2px #16120e;
  text-shadow:
    3px 3px 0 #16120e,4px 4px 0 #16120e,5px 5px 0 #16120e,
    6px 6px 0 #16120e,10px 10px 0 #e4572e;
}
@media (max-width:620px){
  html[data-theme="dark"] .display.press{
    text-shadow:2px 2px 0 #16120e,3px 3px 0 #16120e,6px 6px 0 #e4572e;
    -webkit-text-stroke:1.5px #16120e;
  }
}

.headline{
  font-family:var(--display);
  font-variation-settings:"wght" 720,"wdth" 84,"opsz" 48;
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.02;
  letter-spacing:-.018em;
  text-transform:uppercase;
  text-wrap:balance;
}
.headline.sentence{text-transform:none;letter-spacing:-.021em}

.sub{
  color:var(--ink-2);
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.58;
  max-width:58ch;
}

/* handwritten marginalia */
.hand{
  font-family:var(--hand);
  font-size:clamp(23px,2.9vw,33px);
  line-height:1.18;
  color:var(--orange);
  font-weight:600;
}
.hand-sm{font-family:var(--hand);font-size:21px;line-height:1.25;color:var(--ink-2);font-weight:600}

/* ---------- 5. MARKER HIGHLIGHT (Pickles) ---------- */
/* An SVG brush stroke as a background, so it survives line wraps
   (box-decoration-break paints one stroke per line fragment). */

.mark{
  padding:.04em .16em;
  background:no-repeat left center/0% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 9c38-6 78 4 118-2 40-5 65 3 78 0l-1 26c-39 5-79-3-119 3-45 5-72-3-87 0z' fill='%23d7f24b'/%3E%3C/svg%3E");
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .62s var(--ease-soft);
}
.mark.lit{background-size:100% 100%}
.mark.orange{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 9c38-6 78 4 118-2 40-5 65 3 78 0l-1 26c-39 5-79-3-119 3-45 5-72-3-87 0z' fill='%23e4572e'/%3E%3C/svg%3E");color:#fffaf0}
.mark.amber{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 9c38-6 78 4 118-2 40-5 65 3 78 0l-1 26c-39 5-79-3-119 3-45 5-72-3-87 0z' fill='%23f2b134'/%3E%3C/svg%3E")}
html[data-theme="dark"] .mark{color:#16120e}
html[data-theme="dark"] .mark.orange{color:#fffaf0}

/* ---------- 6. REVEAL SYSTEM ---------- */

[data-rv]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);
}
[data-rv].in{opacity:1;transform:none}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-30px)}
[data-rv="right"]{transform:translateX(30px)}
[data-rv="pop"]{transform:scale(.9) rotate(-2deg);transition-timing-function:var(--ease-back)}
[data-rv].in{transform:none}

/* staggered children */
[data-stagger] > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);
}
[data-stagger].in > *{opacity:1;transform:none}

/* per-word display reveal */
.rv-word{display:inline-block;overflow:hidden;vertical-align:top}
.rv-word > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%) rotate(4deg);
  transition:transform .85s var(--ease);
}
.in .rv-word > i,.rv-word.in > i{transform:none}

/* ---------- 7. HAND-DRAWN DOODLES ---------- */

.doodle{
  position:absolute;display:block;pointer-events:none;z-index:2;
  color:var(--ink);opacity:.9;
}
.doodle svg{width:100%;height:100%;overflow:visible}
.doodle path,.doodle circle,.doodle ellipse,.doodle rect,.doodle line{
  vector-effect:non-scaling-stroke;
}
.doodle.accent{color:var(--orange)}
.doodle.blue{color:var(--blueprint)}
.doodle.muted{color:var(--ink-3);opacity:.6}

@media (prefers-reduced-motion:no-preference){
  .doodle.sway{animation:sway 6s ease-in-out infinite}
  .doodle.sway-slow{animation:sway 9s ease-in-out infinite reverse}
}
@keyframes sway{
  0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(2.5deg) translateY(-7px)}
}
@media (max-width:820px){ .doodle.hide-sm{display:none} }

/* ---------- 8. BUTTONS ---------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);
  font-variation-settings:"wght" 700,"wdth" 90;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  padding:14px 28px;
  border:2.5px solid var(--ink);
  border-radius:var(--wobble);
  background:var(--card);
  color:var(--ink);
  box-shadow:var(--shadow-hard);
  transition:transform .22s var(--ease-back),box-shadow .22s var(--ease-back),background .22s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-solid{background:var(--orange);color:#fffaf0}
.btn-lime{background:var(--lime);color:#16120e}
.btn svg{width:15px;height:15px;flex:none}
.btn.plain{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  text-transform:none;font-variation-settings:normal;
}

.link-more{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  position:relative;padding-bottom:5px;
}
.link-more::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c22-3 42 1.6 60-.6 16-2 38 2.4 58 .2' fill='none' stroke='%23e4572e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-soft);
}
.link-more:hover::after{transform:scaleX(1)}
.link-more svg{width:10px;height:10px;transition:transform .25s var(--ease)}
.link-more:hover svg{transform:translateX(5px)}

.back-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);transition:color .2s,transform .2s var(--ease);
}
.back-link svg{width:9px;height:13px;transform:rotate(180deg)}
.back-link:hover{color:var(--orange);transform:translateX(-4px)}

/* ---------- 9. NAV ---------- */

.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:90;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:2.5px solid transparent;
  transition:border-color .3s ease,background .4s var(--ease-soft);
}
.nav.scrolled{border-bottom-color:var(--ink)}
.nav-in{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(var(--container),100% - 40px);margin-inline:auto;
}
.brand{
  font-family:var(--display);
  font-variation-settings:"wght" 800,"wdth" 80;
  font-size:17px;letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;display:inline-flex;align-items:center;gap:9px;
}
.brand .brand-dot{
  width:11px;height:11px;flex:none;border-radius:50%;
  background:var(--orange);border:2px solid var(--ink);
}
@media (prefers-reduced-motion:no-preference){
  .brand:hover .brand-dot{animation:brand-bounce .5s var(--ease-back)}
}
@keyframes brand-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px) scale(1.2)}}

.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding:4px 0;transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4c18-2.4 36 1.4 50-.4 13-1.7 32 2 48 .2' fill='none' stroke='%23e4572e' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-soft);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:20px}

.theme-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:2.5px solid var(--ink);border-radius:var(--wobble-2);
  background:var(--card);color:var(--ink);
  transition:transform .25s var(--ease-back),background .2s;
}
.theme-btn:hover{background:var(--amber);transform:rotate(-8deg) scale(1.06)}
.theme-btn svg{width:17px;height:17px}
@media (max-width:780px){ .nav-links{display:none} }

/* ---------- 10. STICKER CARDS (Trash) ---------- */

.sticker{
  position:relative;
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:var(--wobble);
  box-shadow:var(--shadow-hard);
  transition:transform .3s var(--ease-back),box-shadow .3s var(--ease-back);
}
.sticker:hover{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:var(--shadow-hard-lg)}
.sticker.alt{border-radius:var(--wobble-2)}

.tilt-a{transform:rotate(-1.6deg)}
.tilt-b{transform:rotate(1.4deg)}
.tilt-c{transform:rotate(-.7deg)}
.tilt-a:hover,.tilt-b:hover,.tilt-c:hover{transform:rotate(0deg) translateY(-4px)}

/* ---------- 11. STARBURST BADGE (Omsom) ---------- */

.burst{
  position:relative;display:grid;place-items:center;
  width:var(--burst-size,150px);height:var(--burst-size,150px);
  color:var(--ink);flex:none;
}
.burst > svg{position:absolute;inset:0;width:100%;height:100%;color:var(--amber)}
.burst > span{
  position:relative;z-index:1;text-align:center;
  font-family:var(--display);
  font-variation-settings:"wght" 760,"wdth" 84;
  font-size:13px;line-height:1.14;letter-spacing:.03em;text-transform:uppercase;
  transform:rotate(-7deg);padding:0 14%;
}
@media (prefers-reduced-motion:no-preference){
  .burst.spin > svg{animation:burst-spin 22s linear infinite}
  .burst.pulse{animation:burst-pulse 3.4s var(--ease-soft) infinite}
}
@keyframes burst-spin{to{transform:rotate(360deg)}}
@keyframes burst-pulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.055) rotate(2deg)}}

/* ---------- 12. MARQUEE TICKER (Airship) ---------- */

.ticker{
  position:relative;overflow:hidden;
  border-top:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
  background:var(--orange);
  color:var(--card);
  padding:13px 0;
}
.ticker.lime{background:var(--lime);color:var(--ink)}
.ticker.cocoa{background:var(--cocoa);color:var(--paper)}
.ticker.tilted{transform:rotate(-1.3deg) scale(1.04);margin-block:36px}
.ticker-track{display:flex;width:max-content;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:ticker-run var(--ticker-dur,34s) linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track span{
  font-family:var(--display);
  font-variation-settings:"wght" 740,"wdth" 86;
  font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  padding-inline:26px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:26px;
}
.ticker-track span::after{content:"\2726";font-size:13px;opacity:.85}

/* ---------- 13. COLOUR BANDS (Omsom) ---------- */
/* A colour block is a fixed design element, so each band pins literal
   values rather than theme tokens: `color` inherits as a resolved value,
   so redefining --ink alone would never reach the text. */

.band{position:relative;background:var(--paper-2)}

.band.cocoa{
  background:#5c3b37;color:#f4eee2;
  --ink:#f4eee2;--ink-2:#dcc9b9;--ink-3:#b79e8e;--rule:#7d5a53;
  --card:#4a2f2c;--paper:#5c3b37;--paper-2:#50332f;--paper-3:#452b28;
  --orange:#ff8a5c;--blueprint:#9bbcf0;
}
.band.lime{
  background:#d7f24b;color:#16120e;
  --ink:#16120e;--ink-2:#3f3d26;--ink-3:#5f5c3e;--rule:#a9c130;
  --card:#eafb7e;--paper:#d7f24b;--paper-2:#cce63f;--paper-3:#bed936;
  --orange:#c33f1b;--blueprint:#20406e;
}
.band.orange{
  background:#e4572e;color:#fffaf0;
  --ink:#fffaf0;--ink-2:#ffdccf;--ink-3:#f6bda8;--rule:#b8431f;
  --card:#c33f1b;--paper:#e4572e;--paper-2:#d44c26;--paper-3:#c44420;
  --orange:#2a0f06;--blueprint:#cfe0ff;
}
.band.ink{
  background:#16120e;color:#f4eee2;
  --ink:#f4eee2;--ink-2:#b5a894;--ink-3:#8c7f6d;--rule:#3a3028;
  --card:#241d16;--paper:#16120e;--paper-2:#211b15;--paper-3:#2e251d;
  --orange:#ff7a4d;--blueprint:#6ea8ff;
}

/* torn-paper + wavy edges */
.edge-wave{position:relative}
.edge-wave::before,.edge-wave::after{
  content:"";position:absolute;left:0;right:0;height:26px;
  background:no-repeat center/100% 100%;
  pointer-events:none;
}
.edge-top::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V9c70-11 140 9 210 5s140-16 210-9 140 17 210 13 140-16 210-11 140 14 210 9 140-13 210-6v16z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.divider-scribble{
  height:22px;width:100%;
  background:no-repeat center/auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M4 11c26-9 52 9 78 1s52-11 78-3 52 12 78 4 52-9 78-2 52 10 78 2' fill='none' stroke='%23cbbfa9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.8;
}

/* ---------- 14. WORK TILES ---------- */

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media (max-width:880px){ .tiles{grid-template-columns:1fr;gap:42px} }

.tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:var(--wobble);
  box-shadow:var(--shadow-hard);
  min-height:540px;
  transition:transform .35s var(--ease-back),box-shadow .35s var(--ease-back);
}
.tile:nth-child(odd){transform:rotate(-1deg)}
.tile:nth-child(even){transform:rotate(.8deg);border-radius:var(--wobble-2)}
.tile:hover{transform:rotate(0deg) translate(-4px,-5px);box-shadow:var(--shadow-hard-lg);z-index:3}
.tile-media{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-bottom:2.5px solid var(--ink);
  background:var(--paper-2);
}
.tile-body{padding:30px 32px 34px}
.tile-eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.tile h3{
  font-family:var(--display);
  font-variation-settings:"wght" 780,"wdth" 82;
  font-size:clamp(26px,3.3vw,36px);line-height:.98;letter-spacing:-.015em;
  text-transform:uppercase;margin-bottom:12px;
}
.tile p{color:var(--ink-2);font-size:16px;line-height:1.55;max-width:44ch;margin-bottom:22px}
.tile-links{display:flex;gap:24px;align-items:center}

.status-chip{
  position:absolute;top:18px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--amber);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:7px 14px;transform:rotate(-2.4deg);
  box-shadow:3px 3px 0 var(--ink);
}
.status-chip.live{background:var(--lime)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.dot.live{background:var(--orange-deep);animation:pulse-dot 1.9s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.72)}}

/* ---------- 15. NUMBERED STEPS (Pickles) ---------- */

.steps{list-style:none;display:grid;gap:0}
.steps li{position:relative;padding:0 0 46px 76px}
.steps li::before{
  counter-increment:stepc;content:counter(stepc);
  position:absolute;left:0;top:-2px;
  width:48px;height:48px;display:grid;place-items:center;
  font-family:var(--display);font-variation-settings:"wght" 800,"wdth" 90;
  font-size:19px;
  background:var(--lime);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
}
.steps{counter-reset:stepc}
.band.lime .steps li::before{background:#fffaf0}
.band.cocoa .steps li::before,.band.orange .steps li::before{background:var(--lime);color:#16120e}
.steps li::after{
  content:"";position:absolute;left:23px;top:54px;bottom:10px;width:3px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 5px,transparent 5px 12px);
  opacity:.5;
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h4{
  font-family:var(--display);font-variation-settings:"wght" 740,"wdth" 86;
  font-size:21px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px;
}
.steps p{color:var(--ink-2);font-size:16px;max-width:56ch}
@media (max-width:560px){
  .steps li{padding-left:60px}
  .steps li::before{width:40px;height:40px;font-size:16px}
  .steps li::after{left:19px;top:46px}
}

/* ---------- 16. PROSE + EDITORIAL ---------- */

.prose p{color:var(--ink-2);font-size:17.5px;line-height:1.68;max-width:64ch;margin-bottom:1.25em}
.prose p:last-child{margin-bottom:0}
.prose .lede{
  color:var(--ink);font-size:21px;line-height:1.5;font-weight:500;
}
.prose em{font-family:var(--hand);font-size:1.3em;font-style:normal;color:var(--orange)}
.prose strong{font-weight:650;color:var(--ink)}

.pull-quote{
  position:relative;
  font-family:var(--display);
  font-variation-settings:"wght" 640,"wdth" 88;
  font-size:clamp(24px,3.3vw,40px);line-height:1.12;
  letter-spacing:-.016em;text-transform:uppercase;
  color:var(--ink);max-width:22ch;
  padding:40px 34px 34px;
  background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--wobble-2);
  box-shadow:var(--shadow-hard);
  transform:rotate(-1.1deg);
}
.pull-quote::before{
  content:"\201C";
  position:absolute;top:-26px;left:22px;
  font-family:var(--display);font-size:92px;line-height:1;
  color:var(--orange);
}
.dev-note{
  position:relative;
  font-family:var(--hand);font-size:23px;line-height:1.3;
  color:var(--ink-2);max-width:54ch;
  padding:20px 24px 20px 56px;
  background:color-mix(in srgb,var(--amber) 22%,transparent);
  border:2.5px dashed var(--ink-3);border-radius:var(--wobble-3);
}
.dev-note::before{
  content:"";position:absolute;left:18px;top:19px;width:24px;height:24px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4572e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21l2-6 11-11 4 4-11 11z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E");
}

/* ---------- 17. FIGURES ---------- */

.ph{
  position:relative;overflow:hidden;
  background:var(--paper-2);
  border:2.5px solid var(--ink);
  border-radius:var(--wobble);
}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.r16x9{aspect-ratio:16/9}
.ph.r4x3{aspect-ratio:4/3}
.ph.r3x2{aspect-ratio:3/2}
.ph.r1x1{aspect-ratio:1/1}
.ph.missing{
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,transparent 0 11px,color-mix(in srgb,var(--rule) 45%,transparent) 11px 12px),
    var(--paper-2);
}
.ph.missing img{display:none}
.ph .ph-label{display:none}
.ph.missing .ph-label{
  display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:10px 16px;background:var(--card);
  text-align:center;line-height:1.75;transform:rotate(-1.2deg);
  box-shadow:3px 3px 0 var(--ink);
}
figure{position:relative}
figcaption{
  font-family:var(--hand);font-size:21px;color:var(--ink-2);
  margin-top:12px;transform:rotate(-.5deg);display:inline-block;
}
.gallery-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.gallery-2 > figure:first-child{transform:rotate(-1deg)}
.gallery-2 > figure:last-child{transform:rotate(.9deg)}
@media (max-width:640px){
  .gallery-2{grid-template-columns:1fr;gap:34px}
  .gallery-2 > figure{transform:none!important}
}
.hero-stage{transition:transform .6s var(--ease-soft);will-change:transform}

/* ---------- 18. DATA COMPONENTS ---------- */

.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.stat-row .stat{
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  box-shadow:4px 4px 0 var(--ink);padding:22px 20px;
  transition:transform .28s var(--ease-back);
}
.stat-row .stat:nth-child(odd){transform:rotate(-1.2deg)}
.stat-row .stat:nth-child(even){transform:rotate(1deg)}
.stat-row .stat:hover{transform:rotate(0) translateY(-4px)}
.stat .k{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}
.stat .v{
  font-family:var(--display);font-variation-settings:"wght" 800,"wdth" 82;
  font-size:clamp(26px,3.6vw,40px);line-height:1;letter-spacing:-.02em;
}
@media (max-width:700px){ .stat-row{grid-template-columns:1fr 1fr} }

.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.spec-grid .cell{
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wobble);
  box-shadow:4px 4px 0 var(--ink);padding:26px 24px;
  transition:transform .3s var(--ease-back),box-shadow .3s var(--ease-back);
}
.spec-grid .cell:nth-child(3n+1){transform:rotate(-.9deg)}
.spec-grid .cell:nth-child(3n+2){transform:rotate(.7deg)}
.spec-grid .cell:nth-child(3n){transform:rotate(-.4deg)}
.spec-grid .cell:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.spec-grid .cell .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:12px;
}
.spec-grid .cell .v{
  font-family:var(--display);font-variation-settings:"wght" 740,"wdth" 88;
  font-size:19px;text-transform:uppercase;letter-spacing:-.008em;margin-bottom:8px;
}
.spec-grid .cell .d{font-size:14.5px;color:var(--ink-2);line-height:1.56}
@media (max-width:860px){ .spec-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .spec-grid{grid-template-columns:1fr} }

.budget{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:52px}
.budget .card{
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wobble-2);
  box-shadow:4px 4px 0 var(--ink);padding:26px 24px;
}
.budget .card:nth-child(1){transform:rotate(-1.4deg)}
.budget .card:nth-child(2){transform:rotate(.6deg)}
.budget .card:nth-child(3){transform:rotate(1.2deg)}
.budget .card.total{background:var(--lime)}
.budget .card .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:12px;
}
.budget .card .v{
  font-family:var(--display);font-variation-settings:"wght" 800,"wdth" 80;
  font-size:clamp(30px,3.8vw,44px);line-height:1;letter-spacing:-.025em;
}
.budget .card .d{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.5}
@media (max-width:800px){ .budget{grid-template-columns:1fr} .budget .card{transform:none} }

.bom-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:2.5px solid var(--ink);border-radius:var(--wobble);
  background:var(--card);padding:22px 24px;box-shadow:var(--shadow-hard);
}
.bom{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.bom th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
  padding:0 16px 12px 0;border-bottom:2.5px solid var(--ink);
}
.bom th:last-child,.bom td:last-child{text-align:right;padding-right:0;white-space:nowrap}
.bom th.qty,.bom td.qty{text-align:right;white-space:nowrap;width:1%}
.bom td{padding:14px 16px 14px 0;border-bottom:1.5px dashed var(--rule);vertical-align:top}
.bom tbody tr{transition:background .2s}
.bom tbody tr:hover{background:color-mix(in srgb,var(--amber) 16%,transparent)}
.bom td.item{font-weight:600;width:26%}
.bom td.spec{color:var(--ink-2);font-size:14px}
.bom tr.group td{
  padding-top:32px;padding-bottom:10px;border-bottom:2.5px solid var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--orange);
  text-transform:uppercase;font-weight:500;
}
.bom tr.group:first-child td{padding-top:0}
.bom tr.group:hover{background:none}
.bom tr.sum td{border-bottom:0;color:var(--ink-2);font-size:14px;padding-top:16px}
.bom tr.sum td:last-child{color:var(--ink);font-weight:700;font-family:var(--display)}
.bom-note{
  font-family:var(--hand);font-size:21px;color:var(--ink-2);
  margin-top:22px;max-width:66ch;line-height:1.4;
}

.owned{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.owned span{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:8px 15px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .22s var(--ease-back);
}
.owned span:nth-child(odd){transform:rotate(-1.8deg)}
.owned span:nth-child(even){transform:rotate(1.5deg)}
.owned span:hover{transform:rotate(0) translateY(-3px);background:var(--lime)}

.bar-chart{
  display:flex;align-items:flex-end;gap:16px;height:290px;padding:18px 18px 0;
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wobble);
  box-shadow:var(--shadow-hard);
}
.bar-chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bar-chart .fill{
  width:100%;flex:none;min-height:0;
  /* tinted from the ink so the bars read on paper, lime or cocoa alike */
  background:color-mix(in srgb,var(--ink) 17%,transparent);
  border:2.5px solid var(--ink);border-bottom:0;
  border-radius:10px 10px 0 0;
  transform-origin:bottom;transform:scaleY(0);
  transition:transform 1.05s var(--ease-back);
}
.bar-chart .val,.bar-chart .lbl{flex:none}
.bar-chart.in .fill{transform:scaleY(1)}
.bar-chart .bar:nth-child(2) .fill{transition-delay:.1s}
.bar-chart .bar:nth-child(3) .fill{transition-delay:.2s}
.bar-chart .bar:nth-child(4) .fill{transition-delay:.3s}
.bar-chart .bar:nth-child(5) .fill{transition-delay:.4s}
.bar-chart .bar.peak .fill{background:var(--orange)}
.bar-chart .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-3);margin-top:10px}
.bar-chart .val{font-family:var(--hand);font-size:19px;color:var(--ink);margin-bottom:8px}

.timeline{list-style:none}
.timeline li{
  display:grid;grid-template-columns:140px 1fr;gap:26px;
  padding:22px 0;border-bottom:1.5px dashed var(--rule);
}
.timeline li:first-child{border-top:2.5px solid var(--ink)}
.timeline .t{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--card);background:var(--ink);
  padding:5px 10px;border-radius:var(--wobble-3);
  align-self:start;justify-self:start;transform:rotate(-1.4deg);
}
.timeline .c h4{
  font-family:var(--display);font-variation-settings:"wght" 740,"wdth" 86;
  font-size:19px;text-transform:uppercase;margin-bottom:6px;letter-spacing:-.008em;
}
.timeline .c p{color:var(--ink-2);font-size:15.5px;max-width:58ch;line-height:1.58}
@media (max-width:620px){ .timeline li{grid-template-columns:1fr;gap:10px} }

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:58px}
@media (max-width:860px){ .two-col{grid-template-columns:1fr!important;gap:36px} }

.facts{list-style:none;border-top:2.5px solid var(--ink)}
.facts li{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1.5px dashed var(--rule);
  transition:padding-left .25s var(--ease),background .25s;
}
.facts li:hover{padding-left:12px;background:color-mix(in srgb,var(--lime) 30%,transparent)}
.facts .f-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);flex:none;
}
.facts .f-v{text-align:right;font-size:15.5px;color:var(--ink)}

/* ---------- 19. SCROLL STAGE (Ferros 3D) ---------- */

.stage{position:relative;height:440vh}
.stage-pin{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding-bottom:22vh;
}
.stage-arm{width:min(720px,82vw);max-height:58vh;will-change:transform}
.stage-canvas{
  position:absolute;left:0;right:0;top:calc(var(--nav-h) + 10px);
  width:100%;height:calc(77vh - var(--nav-h) - 10px);
  opacity:0;transition:opacity .9s var(--ease-soft);
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);
}
.stage-canvas.live{opacity:1}
.stage-canvas.live ~ .stage-arm,
.has3d .stage-arm{display:none}
.stage-badge{
  position:absolute;top:calc(var(--nav-h) + 24px);left:max(24px,calc(50vw - 540px));
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--amber);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:8px 15px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);
  opacity:0;transition:opacity .6s var(--ease-soft) .5s;
}
.has3d .stage-badge{opacity:1}
.tile-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease-soft)}
.tile-3d.live{opacity:1}
.tile-media.has3d > svg{opacity:0}
.stage-caption{
  position:absolute;left:50%;transform:translateX(-50%);bottom:10vh;
  text-align:center;width:min(560px,88vw);pointer-events:none;
}
.stage-step{
  position:absolute;left:0;right:0;bottom:0;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
}
.stage-step.on{opacity:1;transform:none}
.stage-step .n{
  display:inline-grid;place-items:center;
  width:40px;height:40px;margin-bottom:14px;
  font-family:var(--display);font-variation-settings:"wght" 800,"wdth" 90;font-size:16px;
  background:var(--orange);color:var(--card);
  border:2.5px solid var(--ink);border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
}
.stage-step h3{
  font-family:var(--display);font-variation-settings:"wght" 760,"wdth" 84;
  font-size:clamp(22px,3vw,32px);text-transform:uppercase;letter-spacing:-.014em;margin-bottom:10px;
}
.stage-step p{color:var(--ink-2);font-size:16px;max-width:48ch;margin-inline:auto;line-height:1.55}
.stage-progress{position:absolute;left:50%;transform:translateX(-50%);bottom:4.5vh;display:flex;gap:9px}
.stage-progress i{
  width:30px;height:5px;border-radius:4px;
  background:var(--paper-3);border:1.5px solid var(--ink);
  transition:background .3s;
}
.stage-progress i.on{background:var(--orange)}
@media (max-width:700px){ .stage-arm{width:92vw} }

/* ---------- 20. WORDMARK GLYPH SWAP ---------- */

.wm-word{display:inline-block;white-space:nowrap}
.wm-cell{position:relative;display:inline-block}
.wm-ch{display:inline-block;transition:opacity .26s var(--ease-soft),transform .34s var(--ease-soft)}
.wm-cell.swapped .wm-ch{opacity:0;transform:translateY(-.12em) scale(.82)}
.wm-glyph{
  position:absolute;left:50%;top:52%;
  width:1.02em;height:1.02em;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;overflow:visible;pointer-events:none;
  color:var(--orange);
  transition:opacity .28s var(--ease-soft),transform .44s var(--ease);
}
.wm-cell.swapped .wm-glyph{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.16s,.1s}
.display .wm-glyph{width:1.1em;height:1.1em}
.display.press .wm-glyph{filter:drop-shadow(3px 3px 0 var(--ink))}

/* ---------- 21. SIGNATURE ---------- */

.sig-block{
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;
  -webkit-user-select:none;user-select:none;
}
/* The signature always sits on the cocoa contact band, so it is white in
   both themes. brightness(0) flattens whatever ink colour the PNG holds to
   black, then invert(1) lifts it to pure white — alpha is untouched, so this
   works regardless of how the file was exported. */
.sig{
  width:min(250px,62vw);opacity:.92;transform:rotate(-2deg);
  filter:brightness(0) invert(1);
}
.sig-missing{
  width:min(250px,62vw);height:82px;border-radius:var(--wobble-3);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);
  background:repeating-linear-gradient(135deg,transparent 0 10px,var(--paper-3) 10px 11px);
  border:2.5px dashed var(--rule);transform:rotate(-2deg);
}
.sig-cap{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 22. FOOTER ---------- */

.foot{border-top:2.5px solid var(--ink);padding:48px 0 30px;background:var(--paper-2)}
.foot-top{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:24px;color:var(--ink-3);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--ink-3);transition:color .2s}
.foot-links a:hover{color:var(--orange)}
.foot-console{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:20px;border-top:1.5px dashed var(--rule);
}
.console-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--card);
  border:2px solid var(--ink);border-radius:var(--wobble-3);
  padding:7px 12px;box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--ease-back),background .2s;
}
.console-btn:hover{background:var(--amber);transform:translate(-1px,-1px)}
.console-btn[aria-pressed="true"]{background:var(--orange);color:var(--card)}
.clock-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink-3);margin-left:auto;
}

.project-nav{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:34px 0;border-top:2.5px solid var(--ink);
  flex-wrap:wrap;
}

/* ---------- 23. SOCIAL ROW ---------- */

.socials{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.socials a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:10px 18px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .24s var(--ease-back),background .24s;
}
.socials a:nth-child(odd){transform:rotate(-1.8deg)}
.socials a:nth-child(even){transform:rotate(1.6deg)}
.socials a:hover{transform:rotate(0) translate(-2px,-3px);background:var(--lime)}

/* ---------- 24. OVERLAYS ---------- */

.grid-ol{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s;
  background-image:
    linear-gradient(color-mix(in srgb,var(--orange) 26%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--orange) 26%,transparent) 1px,transparent 1px);
  background-size:100px 100px;
}
html.grid-on .grid-ol{opacity:1}

#bench-light{
  position:fixed;left:0;top:0;width:540px;height:540px;margin:-270px 0 0 -270px;
  z-index:60;pointer-events:none;opacity:0;border-radius:50%;
  transition:opacity .6s var(--ease-soft);
  background:radial-gradient(circle closest-side,
    rgba(255,200,130,.2),rgba(255,150,60,.08) 45%,transparent 72%);
  mix-blend-mode:screen;will-change:transform;
}
html.bench-on #bench-light{opacity:1}

/* ---------- 24B. BENCH TV (hidden — dbl-click the signature) ---------- */

html.tv-lock,html.tv-lock body{overflow:hidden}

.tv-ol{
  position:fixed;inset:0;z-index:250;
  display:grid;place-items:center;padding:22px;
  background:color-mix(in srgb,var(--cocoa-deep) 84%,transparent);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  opacity:0;transition:opacity .26s var(--ease-soft);
}
.tv-ol.open{opacity:1}
.tv-ol[hidden]{display:none}

.tv-panel{
  width:min(920px,100%);max-height:min(88vh,880px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  box-shadow:var(--shadow-hard-lg);
  transform:translateY(16px) rotate(-.4deg);
  transition:transform .34s var(--ease-back);
}
.tv-ol.open .tv-panel{transform:none}

.tv-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;background:var(--paper-2);
  border-bottom:2.5px solid var(--ink);
}
.tv-title{
  font-family:var(--display);font-variation-settings:"wght" 700,"wdth" 90;
  font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.tv-chip{
  margin-left:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--card);
  border:2px solid var(--ink);border-radius:var(--wobble-3);
  padding:6px 10px;box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--ease-back),background .2s;
}
.tv-chip:hover{background:var(--amber);transform:translate(-1px,-1px)}
.tv-x{
  width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--ink);background:var(--card);
  border:2px solid var(--ink);border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--ease-back),background .2s,color .2s;
}
.tv-x:hover{background:var(--orange);color:#fffaf0;transform:translate(-1px,-1px)}
.tv-x svg{width:12px;height:12px}

/* The stage keeps 16:9 whether it holds the iframe or the idle card,
   so opening a video never jumps the panel's height. */
.tv-stage{
  position:relative;aspect-ratio:16/9;flex:0 0 auto;
  /* Capped so the results list always keeps a usable strip underneath;
     the player letterboxes itself inside whatever box it is given. */
  max-height:min(48vh,440px);
  background:var(--cocoa-deep);border-bottom:2.5px solid var(--ink);
}
.tv-stage iframe,.tv-stage video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.tv-stage video{background:#000;object-fit:contain}
.tv-idle{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px;text-align:center;
  background-image:repeating-linear-gradient(135deg,
    transparent 0 12px,rgba(255,250,240,.05) 12px 13px);
}
.tv-idle-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);
}
/* The stage is cocoa in both themes, so this text is pinned light the
   same way the signature is — a flipping token would vanish in dark. */
.tv-idle p{font-family:var(--hand);font-size:23px;color:#efe4d2;transform:rotate(-1.2deg)}
.tv-act{
  margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  /* amber and lime stay light in both themes, so the label is pinned
     dark — var(--ink) would go cream in dark mode and disappear. */
  color:#16120e;background:var(--amber);
  border:2px solid var(--ink);border-radius:var(--wobble-3);
  padding:7px 13px;box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--ease-back),background .2s;
}
.tv-act:hover{background:var(--lime);transform:translate(-1px,-1px)}

.tv-bar{display:flex;gap:10px;padding:14px 15px 9px}
.tv-in{
  flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);
  background:var(--paper);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  padding:11px 14px;-webkit-appearance:none;appearance:none;
}
.tv-in::placeholder{color:var(--ink-3)}
.tv-in:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 26%,transparent);
}
.tv-go{
  font-family:var(--display);font-variation-settings:"wght" 700,"wdth" 90;
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  padding:11px 20px;color:#fffaf0;background:var(--orange);
  border:2.5px solid var(--ink);border-radius:var(--wobble-3);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s var(--ease-back),box-shadow .2s var(--ease-back);
}
.tv-go:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.tv-go:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

.tv-note{
  padding:0 15px 9px;min-height:13px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}

.tv-list{
  flex:1;min-height:0;overflow-y:auto;
  padding:0 9px 12px;display:flex;flex-direction:column;gap:2px;
}
.tv-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:8px;border:2px solid transparent;border-radius:var(--wobble-3);
  transition:background .18s,border-color .18s,transform .18s var(--ease-back);
}
.tv-row:hover{background:var(--paper-2);border-color:var(--ink);transform:translateX(2px)}
.tv-thumb{
  position:relative;flex:0 0 auto;width:124px;aspect-ratio:16/9;overflow:hidden;
  border:2px solid var(--ink);border-radius:9px;
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--paper-3) 9px 10px);
}
.tv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tv-dur{
  position:absolute;right:3px;bottom:3px;padding:2px 4px;border-radius:4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  background:rgba(22,18,14,.84);color:#fffaf0;
}
.tv-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.tv-h{
  font-weight:600;font-size:14px;line-height:1.32;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tv-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Laptop-height windows: give the stage less so results stay visible. */
@media (max-height:720px){
  .tv-stage{max-height:40vh}
}

@media (max-width:640px){
  .tv-ol{padding:9px}
  /* Too little height left for a nested scroller, so the whole panel scrolls. */
  .tv-panel{max-height:94vh;overflow-y:auto}
  .tv-list{overflow:visible}
  .tv-thumb{width:94px}
  .tv-go{padding:11px 14px}
  .tv-idle p{font-size:19px}
}

/* ---------- 25. REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-stagger] > *{opacity:1!important;transform:none!important}
  .rv-word > i{transform:none!important}
  .mark::before{transform:rotate(-.9deg) scaleX(1)!important}
  .grain{animation:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---------- 26. PRINT ---------- */

@media print{
  .nav,.grain,.grid-ol,#bench-light,.ticker,.doodle,.foot-console,.tv-ol{display:none!important}
  body{background:#fff;color:#000}
  [data-rv],[data-stagger] > *{opacity:1!important;transform:none!important}
  .sticker,.tile,.ph{box-shadow:none;transform:none!important}
}