/* Girgit Labs — site v2. Direction: the signed-off style board (styleboard/),
   after Lumen Cat (layout, stickers, process cards, dark finale), Dino Lab and
   Susan Kare (pixel accents, the retro window). */

:root {
  --ink: #1C1A17;
  --paper: #F7F3EC;
  --graphite: #6E675D;
  --dim: #3A3630;
  --accent: #C6F135;            /* chameleon lime; only ever a fill behind ink */

  --wide: 'Unbounded', 'Arial Black', sans-serif;
  --hand: 'Shadows Into Light Two', 'Comic Sans MS', cursive;
  --text: 'Manrope', system-ui, sans-serif;
  --pixel: 'Silkscreen', ui-monospace, monospace;
  --deva: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --nav-h: 4.25rem;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --pop: cubic-bezier(0.3, 1.6, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color: var(--ink); background: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 500 1rem/1.55 var(--text); overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: 0; z-index: 100; padding: 0.5rem 0.9rem; background: var(--ink); color: var(--paper); transform: translateY(-120%); }
.skip:focus { transform: none; }

.paper { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.paper svg { width: 100%; height: 100%; }

/* ---------- Type helpers ---------- */
.hand { font-family: var(--hand); line-height: 1.05; }
.small { font: 800 0.66rem/1.6 var(--wide); text-transform: uppercase; letter-spacing: 0.02em; }
.center { text-align: center; }
.pixel { font-family: var(--pixel); }
.title { font: 600 clamp(2.3rem, 6.2vw, 5.2rem)/0.98 var(--wide); letter-spacing: -0.045em; }
.title--center { text-align: center; }
.title--paper { color: var(--paper); }
.aside { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.aside--center { text-align: center; margin-top: 0.4rem; }
.lede { max-width: 38rem; margin-top: 1.2rem; font-size: 1.1rem; }

/* Hindi words: dotted underline; swap to English on hover, focus or tap. */
.hi { font-family: var(--deva); font-weight: 700; border-bottom: 2px dotted currentColor; cursor: help; display: inline-block; text-align: center; transition: color 160ms; }
.hi.is-en { font-family: var(--text); color: var(--ink); background: var(--accent); border-bottom-color: transparent; padding: 0 0.15em; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: 0.35rem 0.95rem;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: 800 0.66rem/1 var(--wide); text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 220ms var(--pop);
}
.pill:hover { background: var(--accent); color: var(--ink); }
.pill:active { transform: scale(0.95); }
.pill--ink { background: var(--ink); color: var(--paper); }
.pill--big { min-height: 3rem; padding: 0.6rem 1.4rem; font-size: 0.76rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--nav-h); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
/* In the footer's theme (css/footer.css): forest green, ivory type, acid accents, a yellow-and-black
   checker strip along the bottom like the banner frame, and "let's talk" framed like the email box. */
.nav { --sq: 7px; color: #F4EFE5; font-family: 'Satoshi', var(--text); }
.nav::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: #142118; border-bottom: 2px solid #111; }
.nav::after { content: ''; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: var(--sq); z-index: -1; border-top: 2px solid #111; background: repeating-conic-gradient(#FFE500 0 25%, #111 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2); }
.nav.is-scrolled::before { box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.nav-logo img { height: 30px; width: auto; filter: brightness(0) invert(0.95); }
.nav-links { display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); }
.nav-links .pill { min-height: 2.25rem; padding: 0; border: 0; border-radius: 0; background: none; color: #F4EFE5; font: 700 0.86rem/1 'Satoshi', var(--text); letter-spacing: 0.08em; text-decoration: underline 2px transparent; text-underline-offset: 0.45em; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
.nav-links .pill:hover, .nav-links .pill.is-active { background: none; color: #43FF18; text-decoration-color: currentColor; }
.nav .pill--ink { min-height: 2.6rem; padding: 0.5rem 1.1rem; border: 3px solid #111; border-radius: 0; outline: 3px solid #43FF18; outline-offset: -6px; background: #F4EFE5; color: #111; font: 800 0.8rem/1 'Satoshi', var(--text); letter-spacing: 0.1em; box-shadow: 4px 4px 0 #111; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.nav .pill--ink:hover { background: #F4EFE5; color: #111; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; }
.nav a:focus-visible { outline: 3px solid #43FF18; outline-offset: 3px; }

/* ---------- 1. Hero: one full screen ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  height: calc(100svh - var(--nav-h));
  min-height: 34rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 1.6rem;
  text-align: center;
}
.hero-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 0; }
.corner { font: 800 0.66rem/1.5 var(--wide); text-transform: uppercase; text-align: left; max-width: 15rem; }
.corner--right { justify-self: end; text-align: right; }
.corner a { text-decoration: none; border-bottom: 2px solid var(--accent); }
.viewfinder { position: relative; height: min(42svh, 420px); aspect-ratio: 5 / 4; }
.viewfinder::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  --c: linear-gradient(var(--ink), var(--ink));
  background:
    var(--c) top left / 30px 2px, var(--c) top left / 2px 30px, var(--c) top right / 30px 2px, var(--c) top right / 2px 30px,
    var(--c) bottom left / 30px 2px, var(--c) bottom left / 2px 30px, var(--c) bottom right / 30px 2px, var(--c) bottom right / 2px 30px;
  background-repeat: no-repeat;
}
.flower { position: absolute; z-index: 0; pointer-events: none; }
.flower--big { width: 62%; right: -8%; top: -16%; }
.flower--small { width: 44%; left: -6%; top: 6%; rotate: -18deg; }
.mascot { position: absolute; left: 2%; right: 2%; bottom: -3%; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 220ms var(--pop); }
.mascot:hover { transform: rotate(-2deg) translateY(-4px); }
.mascot.is-changing { animation: shimmy 420ms var(--pop); }
@keyframes shimmy { 30% { transform: scale(1.06, 0.94); } 60% { transform: scale(0.97, 1.04) rotate(2deg); } }
.mascot-hint { position: absolute; right: -6%; bottom: 14%; z-index: 4; font-size: 1.35rem; rotate: -8deg; pointer-events: none; transition: opacity 300ms; }
.mascot-hint.is-gone { opacity: 0; }
.hero-type { padding-top: 0.6rem; }
.eyebrow { font-size: clamp(1.3rem, min(3vw, 4svh), 2.1rem); letter-spacing: 0.06em; }
.headline { margin-top: 0.3rem; font: 800 min(8vw, 10.5svh)/0.92 var(--wide); letter-spacing: -0.035em; text-transform: uppercase; }
.headline .line { display: block; padding-bottom: 0.05em; border-bottom: 1.5px solid var(--ink); }
.hero-sub { margin-top: 0.9rem; font: 600 clamp(0.9rem, 2.2svh, 1.1rem) var(--wide); letter-spacing: -0.02em; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 1.2rem; font-size: 1.3rem; text-decoration: none; rotate: -6deg; }

/* ---------- Ticker band between sections ---------- */
.ticker { overflow: hidden; background: var(--ink); color: var(--paper); border-block: 2px solid var(--ink); rotate: -1.2deg; margin: 0 -2vw; }
.ticker-track { display: flex; gap: 2.2rem; width: max-content; padding: 0.7rem 0; font-size: 1.7rem; white-space: nowrap; }
.ticker-track span:nth-child(even) { color: var(--accent); }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) var(--gutter); }

/* 2. What we do: the sticker pile */
.what { text-align: center; }
.what .lede { margin-inline: auto; }
.pile { position: relative; height: clamp(360px, 46vw, 460px); max-width: 1000px; margin: 2.5rem auto 0; }
.sticker { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.sticker:active { cursor: grabbing; }
.sticker svg { pointer-events: none; }
.pile-sleeper { position: absolute; width: clamp(100px, 13vw, 150px); z-index: 30; pointer-events: none; transition: transform 300ms var(--pop); }
.pile-note { margin-top: 1.4rem; }

/* 3. The name: retro dictionary window */
.name { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.window { position: relative; border: 2px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--ink); }
.window-bar { position: relative; display: flex; align-items: center; height: 2.1rem; padding: 0 0.6rem; border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--ink) 2px 3px) 0 0.45rem / 100% calc(100% - 0.9rem) no-repeat, var(--paper); }
.window-close { width: 0.95rem; height: 0.95rem; border: 2px solid var(--ink); background: var(--paper); position: relative; z-index: 1; }
.window-title { position: absolute; left: 50%; translate: -50% 0; padding: 0 0.6rem; background: var(--paper); font: 0.8rem var(--pixel); }
.window-walker { position: absolute; bottom: calc(100% - 4px); left: 0; width: 76px; }
.window-body { padding: 1.6rem 1.6rem 2rem; }
.entry-word { font: 800 clamp(3.4rem, 8vw, 6rem)/1 var(--deva); }
.entry-meta { margin-top: 0.4rem; font: 0.85rem var(--pixel); color: var(--graphite); }
.entry-defs { margin-top: 1.1rem; padding-left: 1.4rem; display: grid; gap: 0.7rem; font-size: 1.05rem; }
.entry-eg { display: inline-block; margin-top: 0.4rem; padding: 0.4rem 0.6rem; background: var(--paper); border-left: 4px solid var(--accent); }
.name-copy { display: grid; gap: 1.1rem; }
.name-copy p:not(.aside) { max-width: 34rem; font-size: 1.08rem; }

/* 4. Work tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 2.5rem; }
.tile {
  position: relative; overflow: hidden; height: clamp(220px, 26vw, 320px);
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgb(28 26 23 / 0.06) 14px 15px), rgb(255 255 255 / 0.45);
}
.tile--wide { grid-column: span 2; }
.tile-tag { position: absolute; left: 0; top: 0; padding: 0.35rem 0.6rem; background: var(--ink); color: var(--paper); font: 800 0.58rem var(--wide); text-transform: uppercase; z-index: 2; }
.tile-load { position: absolute; inset: auto 1rem 1rem 1rem; display: grid; gap: 0.5rem; font-size: 0.7rem; }
.tile-load .bar { display: block; height: 14px; border: 2px solid var(--ink); background: var(--paper); }
.tile-load .bar i { display: block; height: 100%; width: 30%; background: var(--accent); background-image: repeating-linear-gradient(90deg, transparent 0 8px, var(--ink) 8px 10px); }
.tile-peek { position: absolute; right: -12px; bottom: -40px; width: 150px; transform: translateY(100%) rotate(-8deg); transition: transform 420ms var(--pop); }
.tile:hover .tile-peek, .tile:focus-within .tile-peek { transform: translateY(0) rotate(-8deg); }
.work .small { margin-top: 1.2rem; }

/* 5. Why us */
.why-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.8rem; }
.why-card { display: grid; gap: 0.8rem; align-content: start; padding: 1.6rem; border: 2px solid var(--ink); background: rgb(255 255 255 / 0.5); transition: transform 300ms var(--pop), box-shadow 300ms var(--ease); }
.why-card:nth-child(1) { rotate: -1.5deg; } .why-card:nth-child(3) { rotate: 1.5deg; }
.why-card:hover { transform: translateY(-6px); box-shadow: 6px 6px 0 var(--ink); }
.why-doodle { width: 110px; }
.why-card h3 { font: 600 1.3rem/1.1 var(--wide); letter-spacing: -0.03em; }

/* 6. How we work */
.week { position: relative; margin-top: 3.2rem; }
.week-track { position: relative; height: 70px; margin: 0 2% 0.8rem; border-bottom: 2.5px dashed var(--ink); }
.week-walker { position: absolute; bottom: -6px; left: 0; width: 92px; translate: -50% 0; transition: left 120ms linear; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.card { position: relative; min-height: 220px; padding: 2.2rem 1rem 3.4rem; border: 2px solid var(--ink); border-radius: 3px; background: rgb(255 255 255 / 0.55); }
.card:nth-child(odd) { rotate: -1.8deg; } .card:nth-child(even) { rotate: 1.4deg; translate: 0 10px; }
.card-tab { position: absolute; top: -1.15rem; left: 0.8rem; padding: 0.1rem 0.6rem; border: 2px solid var(--ink); background: var(--paper); font-size: 1.35rem; }
.card p { font: 800 0.66rem/1.55 var(--wide); text-transform: uppercase; }
.card-num { position: absolute; left: 1rem; bottom: 0.2rem; font-size: 2.8rem; }
.card-stamp { position: absolute; right: 0.7rem; bottom: 0.8rem; padding: 0.2rem 0.45rem; border: 2px solid var(--ink); background: var(--accent); font: 0.72rem var(--pixel); rotate: -8deg; opacity: 0; scale: 2; }
.card.is-stamped .card-stamp { opacity: 1; scale: 1; transition: scale 320ms var(--pop), opacity 120ms; }
.how .small { margin-top: 2.2rem; }

/* 7. Who we're for */
.who-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); margin-top: 2.8rem; }
.who-head { font: 600 1.4rem var(--wide); letter-spacing: -0.03em; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
.who-list button { position: relative; display: block; width: 100%; padding: 1rem 4rem 1rem 0; border: 0; border-bottom: 1.5px dashed var(--ink); background: none; text-align: left; font-size: 1.05rem; cursor: pointer; }
.who-list button:hover { background: rgb(255 255 255 / 0.5); }
.who-list button::after { content: ''; position: absolute; right: 0.4rem; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; border-radius: 50%; display: grid; place-items: center; font: 800 1.1rem var(--wide); border: 2.5px solid var(--ink); opacity: 0; scale: 1.8; rotate: -14deg; }
.who-list[data-stamp="yes"] button.is-stamped::after { content: '✓'; background: var(--accent); }
.who-list[data-stamp="no"] button.is-stamped::after { content: '✕'; background: var(--paper); }
.who-list button.is-stamped::after { opacity: 1; scale: 1; transition: scale 300ms var(--pop), opacity 100ms; }
.who-note { margin-top: 1.4rem; font-family: var(--hand); font-size: 1.5rem; line-height: 1.15; }

/* 8. Finale */
.finale { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); }
.finale-jungle { position: relative; height: 170px; margin: 0 calc(var(--gutter) * -1); }
.finale-jungle .leaf { position: absolute; width: 110px; }
.hunt-target { position: absolute; width: 90px; cursor: pointer; padding: 0; border: 0; background: none; z-index: 2; }
.hunt-target.is-found { animation: shimmy 500ms var(--pop); }
.finale-inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2rem; max-width: var(--max); margin: 0 auto; }
.finale-copy { display: grid; gap: 1rem; }
.finale-copy > p:not(.hand) { max-width: 30rem; color: #D9D3C7; }
.finale-aside { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.finale-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.8rem; }
.round-cta { width: 150px; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); font: 800 0.72rem/1.3 var(--wide); text-transform: uppercase; cursor: pointer; transition: transform 260ms var(--pop), background-color 160ms; }
.round-cta:hover { transform: rotate(-10deg) scale(1.06); background: var(--accent); }
.finale-links { display: grid; gap: 0.5rem; font: 800 0.66rem var(--wide); text-transform: uppercase; }
.finale-links a { text-decoration: none; }
.linkish { padding: 0; border: 0; background: none; color: var(--paper); font: inherit; text-transform: inherit; cursor: pointer; }
.copied { color: var(--accent); font-family: var(--pixel); }
.finale-hunt { color: #A9A196; font-size: 1.4rem; }
.finale-hunt.is-found { color: var(--accent); }
.finale-cham { max-width: 460px; justify-self: end; width: 100%; }

.form-card {
  position: absolute; left: 50%; bottom: 0; z-index: 10;
  width: min(46rem, calc(100% - 2 * var(--gutter))); max-height: calc(100% - 2rem); overflow-y: auto;
  padding: 2rem; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0;
  translate: -50% 0; animation: card-up 700ms var(--pop) both;
}
@keyframes card-up { from { translate: -50% 105%; } }
.form-card .title { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0.3rem 0 1.4rem; }
.form-card .hand { font-size: 1.5rem; }
.form-close { position: absolute; right: 1.2rem; top: 1rem; border: 0; background: none; font-size: 1.3rem; cursor: pointer; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form label { display: grid; gap: 0.3rem; font: 800 0.62rem var(--wide); text-transform: uppercase; }
.form label span { color: var(--graphite); text-transform: none; font-family: var(--text); }
.form input, .form select, .form textarea { min-height: 2.8rem; padding: 0.6rem 0.8rem; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font: 500 1rem var(--text); color: var(--ink); }
.form [aria-invalid="true"] { border-color: #C2410C; box-shadow: 0 0 0 3px rgb(194 65 12 / 0.2); }
.form .wide { grid-column: 1 / -1; }
.form .hp { position: absolute; left: -9999px; }
.form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-status { font-size: 0.95rem; }

/* Footer */
.footer { display: grid; gap: 1.4rem; justify-items: center; padding: 3rem var(--gutter) 2.4rem; background: var(--ink); color: var(--paper); border-top: 1.5px solid var(--dim); text-align: center; }
.footer-logo { height: 34px; width: auto; filter: invert(1); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; font: 800 0.66rem var(--wide); text-transform: uppercase; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer .small { color: #A9A196; }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Scribbles draw themselves in when they get the .draw class. */
  .draw .stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; }
  .draw .stroke + .stroke { animation-delay: 0.25s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* Hero entrance */
  .headline .line { clip-path: inset(0 0 100% 0); animation: rise 700ms var(--ease) forwards; }
  .headline .line + .line { animation-delay: 140ms; }
  @keyframes rise { to { clip-path: inset(0 0 -0.2em 0); } }
  .mascot-art { display: block; animation: pop-in 700ms 150ms var(--pop) both; }
  @keyframes pop-in { from { transform: translateY(30%) scale(0.85); opacity: 0; } }
  .scroll-cue { animation: bob 1.6s ease-in-out infinite; }
  @keyframes bob { 50% { translate: 0 6px; } }

  /* Reveal on scroll */
  .js [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity 600ms var(--ease), translate 700ms var(--ease); }
  .js [data-reveal].in-view { opacity: 1; translate: none; }
  .js [data-reveal="window"] { translate: none; scale: 0.82; transition: opacity 300ms steps(3), scale 400ms steps(4); }
  .js [data-reveal="window"].in-view { scale: 1; }

  /* Ticker */
  .ticker-track { animation: ticker 28s linear infinite; }
  @keyframes ticker { to { transform: translateX(-50%); } }

  /* Walker across the dictionary window; it changes colour each lap (JS). */
  .window-walker { animation: walk 9s linear infinite; }
  @keyframes walk {
    0% { left: 0; transform: scaleX(1); } 48% { left: calc(100% - 76px); transform: scaleX(1); }
    50% { left: calc(100% - 76px); transform: scaleX(-1); } 98% { left: 0; transform: scaleX(-1); } 100% { left: 0; transform: scaleX(1); }
  }

  /* Loading bars in the work tiles */
  .tile-load .bar i { animation: load 2.6s steps(10) infinite; }
  @keyframes load { from { width: 6%; } to { width: 96%; } }

  /* Sticker drop-in */
  .sticker.is-dropping { animation: drop 700ms var(--pop) both; }
  @keyframes drop { from { translate: 0 -140%; opacity: 0; } 60% { opacity: 1; } }

  /* Glow pulse on the finale's eyes */
  .finale-cham { animation: breathe 3.2s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: translateY(-6px) scale(1.01); } }
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero-stage { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; }
  .corner { display: none; }
  .viewfinder { height: min(36svh, 340px); }
  .headline { font-size: min(11vw, 9svh); }
  .name, .who-cols, .finale-inner { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile--wide { grid-column: auto; }
  .why-cards, .cards { grid-template-columns: 1fr; }
  .card:nth-child(even) { translate: none; }
  .week-track { display: none; }
  .form { grid-template-columns: 1fr; }
  .finale-cham { justify-self: center; max-width: 320px; }
  .scroll-cue { display: none; }
}

/* =====================================================================
   v2.1 — redesigned hero, lime footer, appearing + ambient animation
   ===================================================================== */

/* ---------- Hero, redesigned (Lumen Cat layout) ---------- */
.viewfinder { height: min(46svh, 470px); }
.mascot { bottom: -5%; }
.corner--left { font-size: 0.72rem; line-height: 1.55; }
.headline { font-size: min(8.4vw, 10.5svh); }
.hero-type { position: relative; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 0.9rem; }
.hero-foot .hero-ctas { margin: 0; }
.hero-hunt { font-size: clamp(1.15rem, 2.4svh, 1.5rem); text-align: left; max-width: 34rem; }
.hero-hunt.is-done { background: var(--accent); padding: 0.1em 0.4em; rotate: -1deg; }

/* 7days.exe: a tiny retro window in the hero's right corner */
.mini-window { justify-self: end; display: block; width: 200px; rotate: 3deg; border: 2px solid var(--ink); background: #fff; box-shadow: 5px 5px 0 var(--ink); text-decoration: none; text-align: left; transition: rotate 300ms var(--pop), box-shadow 300ms var(--ease); }
.mini-window:hover { rotate: 0deg; box-shadow: 8px 8px 0 var(--ink); }
.mini-bar { display: flex; align-items: center; gap: 0.5rem; height: 1.5rem; padding: 0 0.4rem; border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--ink) 2px 3px) 0 0.3rem / 100% calc(100% - 0.6rem) no-repeat, var(--paper); }
.mini-bar i { width: 0.7rem; height: 0.7rem; border: 2px solid var(--ink); background: var(--paper); }
.mini-bar b { margin: 0 auto; padding: 0 0.4rem; background: var(--paper); font: 400 0.62rem var(--pixel); }
.mini-body { display: grid; gap: 0.55rem; padding: 0.7rem 0.8rem 0.8rem; font: 800 0.66rem/1.5 var(--wide); text-transform: uppercase; }
.mini-body .bar { display: block; height: 12px; border: 2px solid var(--ink); }
.mini-body .bar i { display: block; height: 100%; width: 40%; background: var(--accent); background-image: repeating-linear-gradient(90deg, transparent 0 7px, var(--ink) 7px 9px); }
.mini-link { font-family: var(--hand); text-transform: none; font-size: 1.05rem; font-weight: 400; }

/* Hidden spots: tiny, nearly invisible until found; then a detection box snaps on. */
.spot { position: absolute; z-index: 5; padding: 0; border: 0; background: none; cursor: pointer; }
.spot--a { width: 38px; right: 9%; top: 3%; rotate: 20deg; }
.spot--b { width: 22px; left: -11px; bottom: -11px; }
.spot--c { width: 20px; right: 21%; top: 40%; }
.spot-pixel { display: block; }
.spot.is-found::after {
  content: ""; position: absolute; inset: -10px;
  --c: linear-gradient(var(--ink), var(--ink));
  background: var(--c) top left / 10px 2.5px, var(--c) top left / 2.5px 10px, var(--c) top right / 10px 2.5px, var(--c) top right / 2.5px 10px,
    var(--c) bottom left / 10px 2.5px, var(--c) bottom left / 2.5px 10px, var(--c) bottom right / 10px 2.5px, var(--c) bottom right / 2.5px 10px;
  background-repeat: no-repeat;
  animation: snap 360ms var(--pop) both;
}
.spot.is-found::before { content: "spotted \2713"; position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; padding: 0.15rem 0.4rem; background: var(--accent); border: 1.5px solid var(--ink); font: 0.55rem var(--pixel); white-space: nowrap; animation: snap 360ms 80ms var(--pop) both; }
@keyframes snap { from { scale: 2; opacity: 0; } }

/* ---------- Footer: lime block ---------- */
.footer { display: block; position: relative; overflow: hidden; text-align: left; background: var(--accent); color: var(--ink); border-top: 2px solid var(--ink); padding: clamp(3rem, 7vw, 5rem) var(--gutter) 1.4rem; }
.footer > * { max-width: var(--max); margin-inline: auto; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer-note { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 34rem; }
.round-top { display: grid; place-items: center; flex: none; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); font: 800 0.62rem/1.3 var(--wide); text-transform: uppercase; text-align: center; text-decoration: none; transition: rotate 300ms var(--pop); }
.round-top:hover { rotate: -12deg; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.footer-label { font: 800 0.62rem var(--wide); text-transform: uppercase; margin-bottom: 0.7rem; }
.footer-email { padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 800 clamp(1.3rem, 3.4vw, 2.7rem)/1.05 var(--wide); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.footer-email:hover { text-decoration: underline wavy 3px; text-underline-offset: 0.15em; }
.footer .copied { display: block; margin-top: 0.4rem; color: var(--ink); font-family: var(--pixel); }
.footer-links { display: grid; justify-content: start; gap: 0.35rem; font: 800 0.78rem var(--wide); text-transform: uppercase; }
.footer-links a:hover { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 0.2em; }
.footer-place { font: 600 1rem/1.4 var(--wide); letter-spacing: -0.02em; }
.footer-time { margin-top: 0.6rem; font-size: 0.9rem; }
.footer-time .pixel { padding: 0.1rem 0.35rem; background: var(--ink); color: var(--accent); }
.footer-mark { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); }
.footer-word { position: relative; z-index: 2; font: 800 clamp(3rem, 11.2vw, 10.5rem)/0.8 var(--wide); letter-spacing: -0.06em; text-align: center; white-space: nowrap; }
.footer-cham { position: absolute; z-index: 1; left: 9%; bottom: 52%; width: clamp(110px, 15vw, 210px); transform: translateY(70%); transition: transform 900ms var(--pop); }
.footer-mark.in-view .footer-cham { transform: translateY(0); }
.footer-legal { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 2px solid var(--ink); font: 800 0.6rem var(--wide); text-transform: uppercase; }
@media (max-width: 860px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .mini-window { display: none; }
  .hero-foot { justify-content: center; }
  .hero-hunt { text-align: center; }
}

/* ---------- Decorative floating doodles ---------- */
.section { position: relative; }
.float { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; }
.float--a { width: 90px; left: 4%; top: 6rem; }
.float--b { width: 110px; right: 5%; top: 9rem; }
.float--c { width: 120px; right: 6%; top: 4rem; }
.float--d { width: 130px; left: 3%; top: 5rem; rotate: 10deg; }
@media (max-width: 860px) { .float { display: none; } }

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--ink); pointer-events: none; display: grid; place-items: center; font: 800 0.55rem var(--wide); text-transform: uppercase; color: var(--ink); transition: width 220ms var(--pop), height 220ms var(--pop), margin 220ms var(--pop), background-color 160ms; }
.cursor.has-label { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--accent); }
.cursor.on-dark { border-color: var(--paper); }
.cursor.on-dark.has-label { border-color: var(--ink); }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- Appearing animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Headings: words rise one by one. */
  .js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.12em 0.16em; margin: -0.14em -0.12em -0.16em;   /* room for the whole letter: tight tracking and line-height otherwise shave its edges */ }
  .js [data-split] .w > span { display: inline-block; transform: translateY(150%); transition: transform 800ms var(--ease); transition-delay: calc(var(--i) * 70ms); }
  .js [data-split].in-view .w > span { transform: none; }

  /* Hand-written asides write themselves on, left to right. */
  .js [data-write] { clip-path: inset(-0.3em 100% -0.3em 0); transition: clip-path 1.3s cubic-bezier(0.6, 0, 0.3, 1); }
  .js [data-write].in-view { clip-path: inset(-0.3em -2% -0.3em 0); }

  /* Groups: children stagger in with a little tumble. */
  .js [data-stagger] > * { opacity: 0; transform: translateY(42px) rotate(-2.5deg); transition: opacity 500ms var(--ease), transform 800ms var(--pop); transition-delay: calc(var(--i) * 90ms); }
  .js [data-stagger].in-view > * { opacity: 1; transform: none; }

  /* Ambient motion */
  .float { animation: float 9s ease-in-out infinite; }
  .float--b, .float--d { animation-duration: 12s; animation-direction: reverse; }
  @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(14deg); } }
  .finale-jungle .leaf { animation: sway 4.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  @keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  .ticker.is-reversed .ticker-track { animation-direction: reverse; }
  .mini-body .bar i { animation: load 2.4s steps(8) infinite; }
}
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* =====================================================================
   v2.2 — the generated 3D renders (website/assets/img)
   ===================================================================== */

/* Hero mascot: the render stands on the viewfinder's bottom edge. */
.mascot { left: 50%; right: auto; bottom: -4%; height: 108%; translate: -50% 0; }
.mascot-art { height: 100%; }
.mascot-art img { height: 100%; width: auto; transform: var(--look, none); transform-origin: 50% 90%; transition: transform 600ms var(--ease), filter 400ms var(--ease); }

/* Floating 3D props (Daisy-style objects) */
.prop { position: absolute; z-index: 1; pointer-events: none; height: auto; filter: drop-shadow(0 18px 22px rgb(28 26 23 / 0.16)); }
.prop--drop { width: 14%; left: -24%; top: 10%; }
.prop--squiggle { width: 34%; right: -36%; bottom: 6%; }
.prop--mac { width: min(36%, 230px); left: -14%; bottom: -26%; z-index: 4; rotate: -6deg; }
.prop--hourglass { width: clamp(70px, 8vw, 110px); left: 6%; top: 5.5rem; rotate: -10deg; }
.prop--seven { width: clamp(70px, 8vw, 120px); right: 8%; top: 3.5rem; rotate: 8deg; }

/* The real chameleon, stuck on the dictionary window like a sticker. */
.real-one { position: absolute; z-index: 4; right: -14%; top: -22%; width: min(48%, 300px); margin: 0; rotate: 7deg; }
.real-one img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgb(28 26 23 / 0.22)); }
.real-one figcaption { position: absolute; left: -2.5rem; bottom: -0.6rem; font-size: 1.4rem; rotate: -10deg; }

/* Sleeper and peekers */
.pile-sleeper { height: auto; filter: drop-shadow(0 8px 10px rgb(28 26 23 / 0.2)); }
.pile-sleeper.is-awake { width: clamp(80px, 10vw, 120px); }
.tile-peek { width: clamp(130px, 14vw, 180px); height: auto; right: 6%; bottom: -8px; transform: translateY(105%); }
.tile:hover .tile-peek, .tile:focus-within .tile-peek { transform: translateY(6%); }
.footer-cham { width: clamp(150px, 18vw, 260px); height: auto; left: 8%; bottom: 56%; }
/* Looser letters, so the heavy glyphs no longer run into each other. */
.footer-word { letter-spacing: -0.015em; }
/* The chameleon peeks over the end of "labs", one paw gripping the top of the b's bowl, the other the
   top of the s. Sized and placed in em of the wordmark, from Unbounded 800's own metrics, so he
   stays on the letters at any width:
   - the s's box starts where the b ends; both letters' x-height tops sit 0.615em above the box
     bottom (line-height 0.8 puts the baseline 0.025em above it; x-height 0.59em);
   - the image's ledge (where his paws grip) is 81.6% down it; drawn 1.3em wide, that ledge is
     0.191em above the image bottom, so the image bottom goes at 0.615 - 0.191 = 0.424em;
   - centred 0.1em into the s's box, his paws land on the b's bowl and on the s. */
.footer-s { position: relative; display: inline-block; }
.footer-s .footer-cham {
  left: 0.1em; bottom: 0.424em; width: 1.3em; z-index: 1;
  translate: -50% 0; transform: none;
  transition: transform 900ms var(--pop), opacity 400ms var(--ease);
}
.js .footer-mark:not(.in-view) .footer-s .footer-cham { transform: translateY(18%); opacity: 0; }   /* rises into place once seen */

@media (prefers-reduced-motion: no-preference) {
  .mascot-art img { animation: breathe-cham 3.6s ease-in-out infinite; }
  @keyframes breathe-cham { 50% { scale: 1.015; } }   /* uniform: never distorts the render */
  .prop--drop { animation: float 6s ease-in-out infinite; }
  .prop--squiggle { animation: float 8s ease-in-out infinite reverse; }
  .prop--seven { animation: bob-seven 4s ease-in-out infinite; }
  @keyframes bob-seven { 50% { transform: translateY(-16px) rotate(-4deg); } }
  .prop--hourglass { animation: tip 6s ease-in-out infinite; }
  @keyframes tip { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(180deg); } }
  .real-one { animation: peel 5s ease-in-out infinite; }
  @keyframes peel { 50% { transform: rotate(-2deg) translateY(-4px); } }
}

@media (max-width: 860px) {
  .prop--drop, .prop--squiggle, .prop--mac, .prop--hourglass { display: none; }
  .real-one { right: -2%; top: -16%; width: 40%; }
  .prop--seven { right: 4%; top: 2rem; }
}

/* =====================================================================
   v2.3 — finale redesign: rounded ink panel, sticky notes, spinning badge
   ===================================================================== */
.finale { background: none; padding: 2rem 0 0; color: var(--ink); overflow: visible; }
.finale-panel {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) clamp(4rem, 8vw, 6.5rem);
  border-radius: 48px 48px 0 0;
  background: var(--ink); color: var(--paper);
  text-align: center;
}
.finale-aside { font-size: clamp(1.4rem, 2.4vw, 2rem); color: #D9D3C7; }
.finale-title { margin-top: 0.4rem; font: 800 clamp(3.4rem, 12.5vw, 10.5rem)/0.9 var(--wide); letter-spacing: -0.06em; }
.finale-title mark { display: inline-block; padding: 0 0.12em 0.04em; border-radius: 0.14em; background: var(--accent); color: var(--ink); rotate: -2deg; }

.finale-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--max); margin: clamp(2.5rem, 6vw, 4rem) auto 0; text-align: left;
}

/* Sticky notes (Mark Levin), taped on */
.notes { display: grid; gap: 1.1rem; justify-items: start; }
.note { position: relative; max-width: 17rem; padding: 1.1rem 1.2rem 1.2rem; color: var(--ink); font: 800 0.74rem/1.4 var(--wide); text-transform: uppercase; box-shadow: 6px 6px 0 rgb(0 0 0 / 0.35); }
.note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; translate: -50% 0; rotate: 4deg; background: rgb(247 243 236 / 0.5); }
.note-num { display: block; margin-bottom: 0.15rem; font: 400 2.2rem/1 var(--hand); text-transform: none; }
.note--lime { background: var(--accent); rotate: -3deg; }
.note--paper { background: var(--paper); rotate: 2deg; margin-left: 1.6rem; }
.note--white { background: #fff; rotate: -1.5deg; margin-left: 0.6rem; }

/* The chameleon sits on a spinning "start a project" badge, lit from behind */
.badge-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: clamp(240px, 26vw, 340px); }
.badge-glow { position: absolute; inset: -18% -28% -10%; z-index: 0; background: radial-gradient(circle at 50% 45%, rgb(198 241 53 / 0.42), transparent 60%); filter: blur(8px); pointer-events: none; }
.badge-cham { position: relative; z-index: 2; width: 74%; height: auto; margin-bottom: -16%; transform: var(--look, none); transform-origin: 50% 90%; transition: transform 600ms var(--ease); filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.5)); }
.ring-badge { position: relative; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ring-badge svg { width: 100%; height: auto; }
.ring-bg { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.ring-text { font: 800 15.5px var(--wide); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink); }
.ring-core { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 800 0.85rem var(--wide); text-transform: uppercase; transition: background-color 200ms, color 200ms, scale 300ms var(--pop); }
.ring-badge:hover .ring-core, .ring-badge:focus-visible .ring-core { background: var(--paper); color: var(--ink); scale: 1.08; }
.ring-badge:focus-visible { outline-color: var(--accent); }

/* Contact */
.finale-contact { display: grid; gap: 0.7rem; justify-items: start; }
.finale-label { font: 400 1.7rem/1 var(--hand); color: #D9D3C7; }
.finale-email { color: var(--paper); text-decoration: none; font: 800 clamp(1.5rem, 2.8vw, 2.5rem)/1.02 var(--wide); letter-spacing: -0.045em; }
.finale-email:hover { color: var(--accent); }
.pill--paper { border-color: var(--paper); color: var(--paper); }
.pill--paper:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.finale-contact .copied { color: var(--accent); font-family: var(--pixel); }
.finale-small { max-width: 18rem; font-size: 0.9rem; color: #A9A196; }

@media (prefers-reduced-motion: no-preference) {
  .ring-badge svg { animation: spin 16s linear infinite; }
  .ring-badge:hover svg { animation-duration: 4s; }
  @keyframes spin { to { rotate: 360deg; } }
  .badge-glow { animation: glow 3.4s ease-in-out infinite; }
  @keyframes glow { 50% { opacity: 0.55; scale: 0.94; } }
  .badge-cham { animation: breathe-cham 3.6s ease-in-out infinite; }
  .finale-title mark { animation: wiggle 5s ease-in-out infinite; }
  @keyframes wiggle { 0%, 88%, 100% { rotate: -2deg; } 92% { rotate: 3deg; } 96% { rotate: -4deg; } }
}

@media (max-width: 860px) {
  .finale-panel { border-radius: 28px 28px 0 0; }
  .finale-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .notes { justify-items: center; }
  .note--paper, .note--white { margin-left: 0; }
  .finale-contact { justify-items: center; }
}

/* =====================================================================
   v2.4 — hero fixes from the 2026-10-26 screenshot
   ===================================================================== */
/* 7: a little more room so the hero never touches the bottom edge */
.viewfinder { height: min(40svh, 440px); }
.hero { padding-bottom: 2.6rem; }

/* 3: the chameleon sits inside the frame, feet on the bottom edge */
.mascot { height: 97%; bottom: 0; }

/* 1 + 2: "click me" moves to the open left side; the squiggle tucks in, clear of 7days.exe */
.mascot-hint { right: auto; left: -4%; bottom: 8%; rotate: 8deg; }
.prop--squiggle { width: 24%; right: -24%; bottom: -4%; }

/* 4 + 5: hidden things are actually hidden: small, low-key, inside the doodles */
.spot { opacity: 0.85; transition: opacity 200ms, scale 200ms var(--pop); }
.spot:hover, .spot:focus-visible { opacity: 1; scale: 1.25; }
.spot--b { width: 14px; left: 12%; bottom: auto; top: 34%; }          /* in the left flower's petals */
.spot--c { width: 16px; right: 27%; top: 0.3rem; }                    /* at the end of the hand-written line */
.spot.is-found { opacity: 1; }

/* 6: the scroll cue sits in the empty middle under the buttons row */
.scroll-cue { right: auto; left: 50%; bottom: 0.5rem; translate: -50% 0; }

@media (max-width: 860px) {
  .mascot-hint { left: 0; }
  .spot--c { right: 12%; }
}

/* =====================================================================
   v2.5 — image ratios: no render is ever stretched
   ===================================================================== */
img { height: auto; }

/* Hero mascot: the button takes the render's own proportions (1191 x 1200);
   the image fills it exactly, never capped by max-width. */
.mascot { height: 97%; width: auto; aspect-ratio: 1191 / 1200; }
.mascot-art { display: block; width: 100%; height: 100%; }
.mascot-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* ==========================================================================
   v2.6: section flow. Ivory bridges between the immersive sections, so each scene
   starts and ends cleanly instead of butting into the next.
   ========================================================================== */
/* Nothing may make the page wider than the window. The tilted ticker and the decorations bleed
   past the edges by design; each section clips its own sideways overflow (clip, not hidden, so
   the sticky scenes still stick), and the root never scrolls sideways. Without this the page
   could shift left and show the paper layer in a strip down the right edge. */
html { overflow-x: clip; }
main > *, .ft { overflow-x: clip; }

.bridge { display: grid; justify-items: center; gap: clamp(0.7rem, 1.6vw, 1.1rem); padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); text-align: center; }
.bridge--ticker { padding-top: clamp(3rem, 6vw, 5rem); }
.bridge--ticker .ticker { justify-self: stretch; margin: 0 calc(-1 * var(--gutter) - 2vw) clamp(1.5rem, 4vw, 3rem); }
.bridge-kicker { display: flex; align-items: center; gap: 0.9rem; margin: 0; font: 700 0.74rem/1 var(--satoshi, var(--text)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
.bridge-kicker::before, .bridge-kicker::after { content: ''; width: clamp(2rem, 8vw, 5.5rem); height: 1px; background: currentColor; opacity: 0.45; }
.bridge-aside { margin: 0; max-width: 24ch; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); }
.bridge-arrow svg { display: block; width: clamp(1.6rem, 2.6vw, 2.2rem); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .bridge-arrow.in-view svg { animation: bridge-nudge 2.4s var(--ease) 600ms infinite; }
  @keyframes bridge-nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 8px; } }
}

/* ---------- Copy email feedback (js/site.js): the button pops into a "Copied!" pill, a toast rises
   above it, sparks burst out. The .copied status line stays for screen readers only. ---------- */
.cta-copywrap, .ft-copyrow { position: relative; }
.cta-copywrap .copied, .ft-copyrow .copied { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cta-copy, .ft-copy { border-radius: 999px; transition: background-color 200ms var(--ease), color 200ms var(--ease), padding 200ms var(--ease); }
.cta-copy.is-copied, .ft-copy.is-copied { padding: 0.35rem 0.85rem; background: #43FF18; color: #111; font-weight: 800; text-decoration: none; animation: copy-pop 420ms var(--pop); }
.copy-toast {
  position: absolute; left: 0; bottom: calc(100% + 0.7rem); z-index: 5; padding: 0.55rem 0.8rem;
  border: 2px solid #111; background: #F4EFE5; color: #111; box-shadow: 4px 4px 0 #111;
  font: 600 0.82rem/1.2 'Satoshi', var(--text); white-space: nowrap; pointer-events: none;
  animation: copy-toast 2.2s var(--ease) forwards;
}
.copy-toast b { font-weight: 800; }
.copy-spark { position: absolute; z-index: 4; width: 8px; height: 8px; border-radius: 50%; background: var(--c); pointer-events: none; animation: copy-spark 650ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes copy-pop { 0% { scale: 0.85; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes copy-toast { 0% { opacity: 0; translate: 0 8px; } 10%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -6px; } }
@keyframes copy-spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-copy.is-copied, .ft-copy.is-copied, .copy-toast { animation: none; } }

/* The header's checker strip drifts slowly sideways. */
@media (prefers-reduced-motion: no-preference) {
  .nav::after { animation: nav-checker 4s linear infinite; }
  @keyframes nav-checker { to { background-position: calc(var(--sq) * 4) 0; } }
}