/* ============================================================
   refine.css — the same world, said more quietly.
   Loaded after styles.css. It adds the newest pieces (the portrait,
   the Shipped deck, the hero's two doors) and turns the rest
   down a notch: calmer type, smaller machinery, shorter falls.
   Nothing on this page holds the scroll.
   ============================================================ */

:root {
  --card: #fbf8f2;
  --line: rgba(23, 19, 16, 0.14);
  --red: #c8433a;
  --matrix: #7dff8a;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "Kode Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: var(--pad);
}

/* ---------- spacing: one scale for the whole page ----------
   8 / 16 / 24 / 40 / 64 / 96. every gap below is one of these steps, so
   related things sit close and sections breathe the same amount. */
:root { --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem; }
.section { padding-top: var(--s6); padding-bottom: var(--s6); }
#work { padding-top: var(--s5); }
.pixel-garden { margin-top: calc(var(--s2) - 260px); margin-bottom: var(--s5); }
.act-line { margin-bottom: var(--s1); }
.section-head { margin-bottom: var(--s4); }
.hero-actions { margin-top: var(--s4); }
.deck-tabs { padding-top: var(--s2); }
.choice-line { margin-top: var(--s2); }
.pill-row { margin-top: var(--s4); }
.contact-row { margin-top: var(--s4); gap: var(--s2) var(--s3); }
.guide-rabbit { margin: var(--s4) auto var(--s5); }
.footer { padding: var(--s3) var(--pad) var(--s5); }
#about .section-head { margin-bottom: var(--s3); }

/* ---------- type ----------
   three faces, one per world: Henny Penny for wonderland, VT323 for the matrix,
   Kode Mono for reading. Instrument Serif is gone from the page. */
.hud-mark { font-family: "VT323", var(--mono); font-size: 1.75rem; letter-spacing: 0.01em; }
.egg-panel-head, .ec-say, .egg-panel-note, .cer-say, .egg-panel li em, .choice-sub, .about-lede {
  font-family: "VT323", var(--mono); font-style: normal;
}
/* each section title speaks its world: wonderland in Henny Penny, the matrix in VT323 */
.section-head h2 { line-height: 1; }
#work .section-head h2 {
  font-family: "Henny Penny", var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
}
#about .section-head h2 {
  font-family: "VT323", var(--mono);
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: 0.02em;
  color: var(--matrix);
  text-shadow: 0 0 18px rgba(125, 255, 138, 0.45);
}
/* the headline keeps its wonderland face, with room for its descenders */
/* each line stays whole, and the type scales to the column it sits in:
   "welcome to the" is about 6 ems wide, so 16% of the column always fits */
.hero-text { container-type: inline-size; width: 100%; }
.hero h1 { font-family: "Henny Penny", var(--serif); font-size: min(6.4rem, 16cqi); line-height: 1.2; }
.hero h1 .hl { white-space: nowrap; }
.hero h1 em { font-style: italic; color: inherit; }
.hero { max-width: 1240px; margin-inline: auto; }
.hero-text { justify-self: center; }
/* both halves sit toward the middle, not pinned to the edges */

.hero-sub { max-width: 34em; margin-top: 1.8rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(23, 19, 16, 0.5); }
.btn-line { border: 1px solid var(--line); background: rgba(251, 248, 242, 0.6); }
.btn-line:hover { border-color: var(--ink); }


/* ---------- hero: words on the left, the portrait on the right ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.6rem; }
.hero-actions { align-items: center; gap: var(--s3); }
/* the way into wonderland: the DRINK ME tag, paper on a loop of string, printed
   in the card's two riso inks (navy letters, the red plate a little off) */
.cta-wonder {
  --navy-ink: #24284a;
  --red-ink: #c23a30;
  position: relative; display: inline-block;
  padding-left: 38px;
  text-decoration: none;
  rotate: -3deg;
  transform-origin: 30px 50%;
  transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cta-wonder:hover { rotate: 3deg; }
/* the string, looped through the eyelet and off to the left */
.cta-wonder::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 52px; height: 30px; translate: 0 -62%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 30'%3E%3Cpath d='M1 22 C 12 4, 26 2, 38 13 C 44 19, 49 18, 51 15' fill='none' stroke='%2324284a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* the outline and the off-register red plate live on an unclipped wrapper */
.tag-plate {
  display: block;
  filter:
    drop-shadow(1.5px 0 0 var(--navy-ink)) drop-shadow(-1.5px 0 0 var(--navy-ink))
    drop-shadow(0 1.5px 0 var(--navy-ink)) drop-shadow(0 -1.5px 0 var(--navy-ink))
    drop-shadow(4px 5px 0 color-mix(in srgb, var(--red-ink) 55%, transparent));
}
.tag {
  position: relative; display: block;
  padding: 13px 24px 14px 42px;
  background: var(--stock, #f6eedd);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  font: 400 1.18rem/1 "Henny Penny", var(--serif);
  color: var(--navy-ink);
  white-space: nowrap;
}
/* the eyelet the string goes through */
.tag::before {
  content: ""; position: absolute; left: 16px; top: 50%;
  width: 10px; height: 10px; translate: 0 -50%;
  border-radius: 50%;
  border: 1.5px solid var(--navy-ink);
  background: var(--paper);
}
/* the way out: a prompt on a black screen */
.cta-matrix {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  background: #0b0f0b;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  border: 1px solid rgba(125, 255, 138, 0.35); border-radius: 4px;
  box-shadow: 0 0 18px rgba(125, 255, 138, 0.18), inset 0 0 12px rgba(125, 255, 138, 0.08);
  font: 400 1.3rem/1 "VT323", var(--mono); letter-spacing: 0.04em;
  color: var(--matrix); text-decoration: none;
  text-shadow: 0 0 6px rgba(125, 255, 138, 0.6);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.cta-matrix:hover { border-color: var(--matrix); box-shadow: 0 0 26px rgba(125, 255, 138, 0.4), inset 0 0 14px rgba(125, 255, 138, 0.12); }
.cta-cursor { margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the portrait: robin as the queen of hearts — an engraved court card in the
   site's own collage style. under the cursor, a lens shows the card as code;
   the white rabbit peeks over the top edge. */
.portrait { position: relative; justify-self: center; width: min(100%, 360px); padding-top: 28px; }
/* the card is printed the way its picture is: two riso inks, navy and the queen's
   red, on warm stock, the red plate a few pixels out of register */
.pt-card {
  --navy-ink: #24284a;
  --red-ink: #c23a30;
  --stock: #f6eedd;
  display: block; position: relative;
  aspect-ratio: 5 / 7; max-width: 100%;
  padding: 11% 10%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--stock);
  border: 2px solid var(--navy-ink); border-radius: 16px;
  rotate: -2deg;
  transition: rotate 0.5s var(--ease);
}
/* the red plate: the same card edge, printed again and slightly off */
.pt-card::after {
  content: ""; position: absolute; inset: -2px;
  border: 2px solid var(--red-ink); border-radius: 16px;
  translate: 7px 8px;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: translate 0.5s var(--ease);
}
.portrait:hover .pt-card { rotate: 0deg; }
.portrait:hover .pt-card::after { translate: 2px 2px; }
.pt-window {
  display: block; position: relative; height: 100%;
  border: 1.5px solid var(--red-ink); border-radius: 3px;
  box-shadow: 0 0 0 4px var(--stock), 0 0 0 5.5px var(--navy-ink);
  overflow: hidden;
  background: transparent;
}
.pt-window img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pt-code { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the corner marks, screened in red dots, with the navy plate peeking out under them */
.pt-idx {
  position: absolute; top: 3%; left: 3.4%;
  display: flex; flex-direction: column; align-items: center;
  line-height: 0.85;
  color: transparent;
  background: radial-gradient(circle, var(--red-ink) 66%, transparent 70%) 0 0 / 2px 2px;
  -webkit-background-clip: text; background-clip: text;
}
.pt-idx b { font: 400 clamp(26px, 2.6vw, 36px)/1 "Henny Penny", var(--serif); }
.pt-idx i { font-style: normal; font-size: clamp(16px, 1.5vw, 21px); }
.pt-idx-flip { top: auto; left: auto; bottom: 3%; right: 3.4%; rotate: 180deg; }
/* the cheshire cat's grin, perched on the card's corner, coming and going */
.portrait .cheshire {
  right: auto; bottom: auto;
  top: -6px; left: 12%;
  width: clamp(72px, 6.4vw, 92px);
  z-index: 3;
}
/* the looking-glass version (?glass): the art is the whole object, no card around it */
.as-glass .pt-card { aspect-ratio: 3 / 4; padding: 0; background: none; border: 0; box-shadow: none; rotate: 0deg; }
.as-glass .pt-window { border: 0; box-shadow: none; background: none; border-radius: 0; }
.as-glass .pt-window img { object-fit: contain; filter: drop-shadow(8px 10px 0 color-mix(in srgb, var(--accent) 20%, transparent)); }
.as-glass .pt-idx { display: none; }
.as-glass .pt-peek { right: 27%; top: 6px; }
.as-glass .cheshire { top: 64px; left: 6%; rotate: -24deg; }
.pt-hint {
  margin-top: var(--s3); text-align: center;
  font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--soft);
  transition: opacity 0.4s;
}
.portrait.used .pt-hint { opacity: 0.35; }
.pt-peek {
  position: absolute; top: -32px; right: 16%;
  width: 64px; height: 62px;
  overflow: hidden; z-index: 2;
}
.pt-rabbit {
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 56px;
  translate: 0 100%;
  animation: ptPeek 9s var(--ease) 1s infinite;
}
.pt-rabbit img { position: absolute; left: 0; top: 0; width: 64px; image-rendering: pixelated; }
@keyframes ptPeek { 0%, 12% { translate: 0 100%; } 20%, 58% { translate: 0 0; } 66%, 100% { translate: 0 100%; } }
.portrait:hover .pt-rabbit { animation-play-state: paused; }


/* ---------- shipped: a deck you flip sideways; the page keeps scrolling ---------- */
#work { padding-left: 0; padding-right: 0; }
#work > .act-line, #work > .section-head, #work > .pixel-garden { padding-left: var(--pad); padding-right: var(--pad); }
/* the head reads as one line: number, title, years on a shared baseline,
   the act line sitting just above it */
.act-line { margin-bottom: 0.6rem; }
.section-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.section-head .index { order: 0; }
.section-head .era { grid-column: auto; order: 2; }
#work .section-head { margin-bottom: 2.2rem; }
.deck-controls { order: 3; margin-left: auto; align-self: center; display: flex; align-items: center; gap: 10px; }
.deck-count { font: 400 13px/1 var(--mono); color: var(--soft); margin-right: 10px; }
.deck-count b { color: var(--ink); font-weight: 400; }
.deck-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(251, 248, 242, 0.7);
  font: 400 18px/1 var(--sans); color: var(--ink); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.deck-arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--card); }
.deck-arrow-alice {
  border-radius: 4px; width: 54px;
  border: 0; background: none;
  filter: drop-shadow(1.5px 0 0 #24284a) drop-shadow(-1.5px 0 0 #24284a) drop-shadow(0 1.5px 0 #24284a) drop-shadow(0 -1.5px 0 #24284a);
}
.deck-arrow-alice span {
  display: grid; place-items: center; width: 100%; height: 100%; padding-left: 10px;
  background: #f6eedd; color: #24284a;
  clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%);
  font: 400 20px/1 "Henny Penny", var(--serif);
}
.deck-arrow-alice:hover:not(:disabled) { background: none; }
.deck-arrow-matrix {
  border-radius: 6px;
  background: #0b0f0b; border-color: rgba(125, 255, 138, 0.4);
  color: var(--matrix); font: 400 26px/1 "VT323", var(--mono);
  text-shadow: 0 0 8px rgba(125, 255, 138, 0.7);
  box-shadow: 0 0 16px rgba(125, 255, 138, 0.18);
}
.deck-arrow-matrix:hover:not(:disabled) { background: #0b0f0b; border-color: var(--matrix); }
.deck-arrow:disabled { opacity: 0.35; cursor: default; }

.deck {
  position: relative;
  display: flex;
  /* sideways only. left to itself, overflow-x: auto makes the deck a vertical
     scroller too (its cards are 12px taller than it), and a trackpad swipe that
     starts over the projects latches onto it: the page stops dead right where
     the terminal should come into view */
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.deck::-webkit-scrollbar { display: none; }
/* the big arrows: wonderland behind you, the matrix ahead.
   back is a paper signpost pointing left; next is a key on a black terminal */
.deck-wrap { position: relative; }
.deck-big {
  position: absolute; z-index: 3; top: calc(50% - 30px);
  height: 56px; min-width: 112px;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.deck-big[hidden] { display: none; }
.deck-big:not(.back) {
  right: clamp(12px, 2.5vw, 40px);
  padding: 0 18px;
  background: #0b0f0b;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  border: 1px solid rgba(125, 255, 138, 0.4); border-radius: 6px;
  box-shadow: 0 0 22px rgba(125, 255, 138, 0.22), inset 0 0 14px rgba(125, 255, 138, 0.1);
  font: 400 1.6rem/1 "VT323", var(--mono); letter-spacing: 0.04em;
  color: var(--matrix); text-shadow: 0 0 8px rgba(125, 255, 138, 0.7);
  animation: nudge 2.4s var(--ease) infinite;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.deck-big:not(.back):hover { border-color: var(--matrix); box-shadow: 0 0 34px rgba(125, 255, 138, 0.45), inset 0 0 16px rgba(125, 255, 138, 0.16); animation-play-state: paused; }
.deck-big.at-end { animation: none; }
.deck-big.back {
  left: clamp(12px, 2.5vw, 40px);
  --navy-ink: #24284a; --red-ink: #c23a30;
  filter:
    drop-shadow(1.5px 0 0 var(--navy-ink)) drop-shadow(-1.5px 0 0 var(--navy-ink))
    drop-shadow(0 1.5px 0 var(--navy-ink)) drop-shadow(0 -1.5px 0 var(--navy-ink))
    drop-shadow(3px 4px 0 color-mix(in srgb, var(--red-ink) 55%, transparent));
  rotate: -4deg;
  transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.deck-big.back:hover { rotate: 2deg; }
.deck-big.back span {
  display: grid; place-items: center;
  width: 100%; height: 100%; padding-left: 22px;
  background: #f6eedd;
  clip-path: polygon(0 50%, 26px 0, 100% 0, 100% 100%, 26px 100%);
  font: 400 1.25rem/1 "Henny Penny", var(--serif); color: var(--navy-ink);
}
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 8px 0; } }
.card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 400px);
  justify-content: center;
  align-items: center; gap: clamp(32px, 5vw, 72px);
  padding-inline: clamp(150px, 12vw, 200px) !important;
  padding: var(--s1) var(--gutter) var(--s4);
  /* --d: this card's distance from the middle, -1..1, set by home.js */
  transform: perspective(1600px) rotateY(calc(var(--d, 0) * -14deg)) scale(calc(1 - var(--ad, 0) * 0.06));
  opacity: calc(1 - var(--ad, 0) * 0.7);
  transform-origin: 50% 50%;
}
.card-shot {
  display: block;
  border-radius: 14px; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 50px 90px -50px rgba(23, 19, 16, 0.55), 0 2px 6px rgba(23, 19, 16, 0.06);
  transition: transform 0.4s var(--ease);
}
.card-shot:hover { transform: translateY(-4px); }
.chrome {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #f6f2ea;
}
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #ddd5c8; }
.chrome span {
  margin: 0 auto; padding: 4px 14px; border-radius: 999px;
  background: rgba(23, 19, 16, 0.05);
  font: 400 11px/1 var(--mono); color: var(--soft);
  translate: -18px 0;
}
.card-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* a site with a phone version: the desktop in its browser, the phone over its corner */
.card-shot:has(.phone-overlay) { overflow: visible; position: relative; }
.card-shot > img { border-radius: 0 0 13px 13px; }
.phone-overlay {
  position: absolute; right: -6%; bottom: -10%;
  width: 24%; aspect-ratio: 1206 / 2622;
  border: 4px solid #121212; border-radius: 20px;
  background: #121212; overflow: hidden;
  box-shadow: 0 24px 40px -18px rgba(23, 19, 16, 0.65);
  rotate: 4deg;
  transition: rotate 0.5s var(--ease), translate 0.5s var(--ease);
}
.phone-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: auto; border-radius: 16px; }
.card-shot:hover .phone-overlay { rotate: 0deg; translate: 0 -6px; }

/* the iOS apps show as three iPhones, fanned, the middle one in front */
.card-phones {
  display: flex; justify-content: center; align-items: center;
  padding: var(--s3) 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.card-phones .phone {
  display: block; position: relative;
  width: 30%; aspect-ratio: 1242 / 2688;
  border: 5px solid #121212; border-radius: 26px;
  background: #121212; overflow: hidden;
  box-shadow: 0 30px 50px -28px rgba(23, 19, 16, 0.6), 0 2px 6px rgba(23, 19, 16, 0.15);
  transition: rotate 0.5s var(--ease), translate 0.5s var(--ease);
}
.card-phones .phone img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 20px; }
.card-phones .phone::before { /* the dynamic island */
  content: ""; position: absolute; z-index: 1; top: 3%; left: 50%; translate: -50% 0;
  width: 30%; height: 3.2%; border-radius: 999px; background: #121212;
}
.card-phones .phone:nth-child(1) { rotate: -7deg; translate: 18% 6%; }
.card-phones .phone:nth-child(2) { z-index: 1; width: 34%; }
.card-phones .phone:nth-child(3) { rotate: 7deg; translate: -18% 6%; }
.card-phones:hover .phone:nth-child(1) { rotate: -10deg; translate: 8% 4%; }
.card-phones:hover .phone:nth-child(3) { rotate: 10deg; translate: -8% 4%; }
.card-phones:hover { transform: none; }

.card-pip { font: 400 26px/1 "VT323", var(--mono); color: var(--soft); margin-bottom: var(--s3); }
.suit { color: var(--ink); margin-right: 4px; }
.suit.red { color: var(--red); }
.card-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; margin-bottom: var(--s2); }
.card-logo-text {
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font: 400 26px/1 "VT323", var(--mono);
}
.card h3 {
  font-family: "VT323", var(--mono); font-weight: 400;
  font-size: clamp(52px, 5vw, 72px); line-height: 0.9; letter-spacing: 0.01em;
}
.card-desc { margin-top: var(--s2); font-size: 19px; line-height: 1.45; max-width: 24em; }
.card-meta { margin-top: var(--s1); font: 400 12px/1.6 var(--mono); color: var(--soft); }
.card-links { display: flex; gap: var(--s3); margin-top: var(--s3); }
.card-links a {
  font-size: 15px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: border-color 0.2s;
}
.card-links a:hover { border-color: var(--ink); }

.deck-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  padding: 8px var(--gutter) 0;
}
.deck-tabs button {
  border: 0; background: none; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  font: 400 14px/1 var(--sans); color: var(--soft);
  transition: background 0.2s, color 0.2s;
}
.deck-tabs button:hover { color: var(--ink); }
.deck-tabs button[aria-current="true"] { background: var(--ink); color: var(--paper); }

.card .enc-title { margin-top: 2px; }
.card .enc-mascot { width: 46px; }
.card .work-epithet { margin-top: 4px; }

/* ---------- the threshold: the terminal at full size, a glimpse on the way down ---------- */
.threshold-room { min-height: 70vh; min-height: 70svh; padding: 4vh var(--pad); }
.threshold-descent { height: 16vh; }
.threshold .terminal { cursor: default; }

/* ---------- the cursor: a heart in wonderland, a green pixel arrow once you reach the code ---------- */
:root {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2C6.2 16.9 2.5 13.6 2.5 9.4A4.9 4.9 0 0 1 12 6.8a4.9 4.9 0 0 1 9.5 2.6c0 4.2-3.7 7.5-9.5 11.8z' fill='%23c23a30' stroke='%2324284a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 7 6, auto;
  --cur-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2C6.2 16.9 2.5 13.6 2.5 9.4A4.9 4.9 0 0 1 12 6.8a4.9 4.9 0 0 1 9.5 2.6c0 4.2-3.7 7.5-9.5 11.8z' fill='%23c23a30' stroke='%2324284a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.2 9.2a2.6 2.6 0 0 1 3-2' fill='none' stroke='%23f6eedd' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 9 8, pointer;
}
body.in-matrix {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 24 34' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='2' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='4' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='4' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='6' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='6' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='8' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='8' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='8' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='16' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='16' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='18' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='16' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='18' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='20' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='6' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='4' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='2' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='0' y='28' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='28' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='28' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='28' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='16' y='28' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='30' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='30' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='30' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='16' y='30' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='32' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='32' width='2' height='2' fill='%237dff8a'/%3E%3C/svg%3E") 1 1, auto;
  --cur-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 24 34' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='2' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='4' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='4' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='6' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='6' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='8' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='8' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='8' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='10' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='12' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='12' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='14' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='14' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='16' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='16' y='16' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='16' y='18' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='18' y='18' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='8' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='20' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='16' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='18' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='20' y='20' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='6' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='10' y='22' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='22' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='4' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='24' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='24' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='2' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='8' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='12' y='26' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='26' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='0' y='28' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='28' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='28' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='28' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='16' y='28' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='10' y='30' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='30' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='14' y='30' width='2' height='2' fill='%237dff8a'/%3E%3Crect x='16' y='30' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='12' y='32' width='2' height='2' fill='%230b0f0b'/%3E%3Crect x='14' y='32' width='2' height='2' fill='%230b0f0b'/%3E%3C/svg%3E") 1 1, pointer;
}
html, body { cursor: var(--cur); }
a, button, .pt-window { cursor: var(--cur-link); }

/* the click burst (home.js): small riso hearts, or green glyphs past the terminal */
.burst-bit, .burst-ring { position: fixed; z-index: 1001; pointer-events: none; }
.burst-bit {
  translate: -50% -50%;
  font: 400 18px/1 var(--sans);
  color: #c23a30;
  -webkit-text-stroke: 0.8px #24284a;
}
.burst-bit.is-matrix {
  font: 400 21px/1 "VT323", var(--mono);
  color: var(--matrix); -webkit-text-stroke: 0;
  text-shadow: 0 0 6px rgba(125, 255, 138, 0.8);
}
.burst-ring {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1.5px solid #c23a30;
  box-shadow: 0 0 0 1px rgba(36, 40, 74, 0.25);
}
.burst-ring.is-matrix { border-color: var(--matrix); box-shadow: 0 0 10px rgba(125, 255, 138, 0.5); }

/* ---------- the white rabbit: he runs across the page, not across a curtain ---------- */
.rabbit-runner { background: none; }

/* ---------- printed matter: the queen card's riso print, all the way down ----------
   two inks (navy, the queen's red) on warm stock until the matrix takes over.
   picked from three directions on 2026-10-27. */
:root { --ink: #24284a; --soft: #5f5c74; --plate: rgba(194, 58, 48, 0.42); }
body { color: var(--ink); }
body::before { opacity: 0.09; }
@media (min-width: 761px) {
  .hero h1, #work .section-head h2 { color: var(--ink); text-shadow: 3px 3px 0 var(--plate); }
  .hud-mark .mark-rm, .hud-menu a { color: var(--ink); }
  /* project screenshots, printed as plates: navy edge, the red plate a little off */
  .card-shot:not(.card-phones) {
    border: 2px solid var(--ink); border-radius: 10px;
    box-shadow: 9px 10px 0 var(--plate);
  }
  .card-shot:not(.card-phones):hover { transform: translate(-2px, -2px); box-shadow: 12px 13px 0 var(--plate); }
  .chrome { background: #f6eedd; border-bottom: 1.5px solid var(--ink); }
  .chrome i { background: none; border: 1.5px solid var(--ink); }
  .card-phones .phone { border-color: var(--ink); box-shadow: 7px 8px 0 var(--plate); }
  .card h3, .card-desc { color: var(--ink); }
  .card-pip { color: var(--soft); }
  .deck-tabs button { color: var(--soft); }
  .deck-tabs button[aria-current="true"] { background: var(--ink); color: #f6eedd; box-shadow: 3px 3px 0 var(--plate); }
  .card-links a { border-bottom-color: var(--ink); }
  .egg-tracker { border-color: var(--ink) !important; color: var(--ink) !important; box-shadow: 4px 4px 0 var(--plate) !important; }
  .hero-cue { color: var(--soft); }
  .pixel-garden { zoom: 0.85; }
}

/* ============================================================
   PHONE: its own page. Name, queen and the first card on the first
   screen; the deck swipes, the next card always peeking.
   ============================================================ */
@media (max-width: 760px) {
  .section { padding-top: var(--s5); padding-bottom: var(--s5); }
  #work { padding-top: var(--s4); }
  .pixel-garden { margin-bottom: var(--s4); }
  .section-head { margin-bottom: var(--s3); }
  .hero-actions { margin-top: var(--s3); }
  .hero { grid-template-columns: 1fr 100px; column-gap: 16px; align-items: start; }
  /* the words and the queen share the first row; the note runs full width under them */
  .hero-text { display: contents; }
  .hero h1 { grid-column: 1; grid-row: 1; font-size: 2.6rem; align-self: center; }
  .hero-sub, .hero-actions { grid-column: 1 / -1; }
  .hero-sub { margin-top: 1rem; }
  .portrait { grid-column: 2; grid-row: 1; }
  .tag { font-size: 1rem; padding: 11px 18px 12px 38px; }
  .cta-matrix { font-size: 1.15rem; padding: 9px 14px; }
  .portrait { width: 104px; padding-top: 14px; }
  .pt-card, .pt-card::after { border-width: 1.5px; border-radius: 8px; }
  .pt-card::after { translate: 3px 4px; }
  .pt-window { border-width: 1px; box-shadow: 0 0 0 2px var(--stock), 0 0 0 3px var(--navy-ink); }
  .pt-idx { background-size: 1.5px 1.5px; }
  .pt-idx b { font-size: 12px; }
  .pt-idx i { font-size: 7px; }
  .pt-peek { top: -14px; right: 10%; width: 32px; height: 31px; }
  .pt-rabbit, .pt-rabbit img { width: 32px; }
  .pt-rabbit { height: 28px; }
  .pt-hint { display: none; }
  .portrait .cheshire { width: 40px; top: 2px; left: 8%; }


  #work .section-head { margin-bottom: var(--s3); }
  .deck-arrow { display: none; }
  .deck-big { top: 22%; height: 44px; min-width: 0; }
  .deck-big:not(.back) { right: 10px; padding: 0 12px; font-size: 1.25rem; }
  .deck-big.back { left: 10px; width: 84px; }
  .deck-big.back span { font-size: 1rem; padding-left: 18px; }
  .card { padding-inline: 0 !important; }
  .deck-count { margin: 0; }
  .deck { scroll-padding: 0 var(--gutter); padding: 0 var(--gutter); gap: 12px; }
  .card {
    flex: 0 0 86%;
    display: block;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transform: none; opacity: 1;
  }
  .card-shot { border: 0; border-radius: 0; box-shadow: none; }
  .card-shot:hover { transform: none; }
  .chrome { display: none; }
  .phone-overlay { right: 4%; bottom: 6%; width: 22%; border-width: 3px; border-radius: 12px; }
  .card-phones { padding: var(--s3) 0 var(--s2); background: linear-gradient(#efe8da, #e6ddcb); }
  .card-phones .phone { border-width: 3px; border-radius: 16px; }
  .card-phones .phone img { border-radius: 12px; }
  .card-text { padding: 16px 18px 18px; }
  .card-pip { font-size: 15px; margin-bottom: 8px; }
  .card-logo { display: none; }
  .card h3 { font-size: 30px; }
  .card-desc { font-size: 15px; margin-top: 8px; }
  .card-meta { font-size: 11px; margin-top: 8px; }
  .card-links { margin-top: 14px; gap: 20px; }
  .card-links a { font-size: 14px; }

  /* the tabs become a row of dots */
  .deck-tabs { gap: 2px; padding-top: 16px; }
  .deck-tabs button { width: 22px; height: 22px; padding: 0; font-size: 0; position: relative; background: none !important; }
  .deck-tabs button::after {
    content: ""; position: absolute; inset: 8px;
    border-radius: 50%; background: var(--line);
    transition: background 0.2s, inset 0.2s;
  }
  .deck-tabs button[aria-current="true"]::after { background: var(--ink); inset: 7px; }

  .card .enc-mascot { width: 36px; }
  .threshold-room { min-height: 52svh; }
  .threshold-descent { height: 16vh; }
  /* the garden: one short row, not a hedge */
  .pixel-garden { flex-wrap: nowrap !important; zoom: 0.55; justify-content: space-between; }
  .hero h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transform: none; opacity: 1; }
  .cta-cursor { animation: none; }
  .pt-rabbit { animation: none; translate: 0 0; }
  .deck-big { animation: none; }
}

/* ============================================================
   PHONE, FOCUSED (2026-10-27): the phone gets its own calm flow.
   One column, one idea per screen, nothing floating over the work.
   Every egg still works; they just stop shouting.
   ============================================================ */
@media (max-width: 760px) {
  /* the first screen: the card, the line, the two ways in */
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "card" "title" "actions";
    justify-items: center; text-align: center;
    row-gap: var(--s3);
    padding-top: 5.4rem; padding-bottom: var(--s5);
  }
  .portrait { grid-area: card; grid-column: auto; grid-row: auto; width: min(58vw, 230px); margin: 0; padding-top: 20px; }
  .hero h1 { grid-area: title; grid-column: auto; grid-row: auto; font-size: 2.35rem; line-height: 1.12; align-self: auto; }
  .hero-actions { grid-area: actions; grid-column: auto; flex-direction: column; align-items: center; gap: var(--s2); margin-top: 0; }
  .portrait .cheshire { width: 46px; top: 4px; left: 10%; }
  .pt-peek { top: -12px; right: 12%; width: 36px; height: 34px; }
  .pt-rabbit, .pt-rabbit img { width: 36px; }
  .pt-rabbit { height: 32px; }
  .pt-idx b { font-size: 16px; }
  .pt-idx i { font-size: 10px; }
  .hero-cue { display: none; }

  /* the garden: a slim border into the projects */
  .pixel-garden { zoom: 0.45 !important; margin-bottom: var(--s3) !important; }

  /* projects: cards as tall as their words, no buttons over the pictures */
  .deck { align-items: flex-start; }
  .deck-big { display: none !important; }
  .card { height: auto; }

  /* the terminal: a glimpse, not a room */
  .threshold-room { min-height: 0; padding: var(--s5) var(--pad) var(--s4); }
  .threshold .terminal { width: 100%; }
  .threshold .term-screen { min-height: 7.5em; }
  .threshold-descent { height: 8vh; }

  /* the choice and the end of the road, without the long silences */
  #about { padding-bottom: var(--s4); }
  .guide-rabbit { margin: var(--s3) auto var(--s4); }
  .footer { padding-bottom: 5rem; }

  /* the egg counter: a small pill with just the score */
  .egg-tracker { padding: 0.32rem 0.6rem; gap: 6px; box-shadow: 3px 3px 0 rgba(23, 19, 16, 0.25); }
  .egg-tracker .egg-count { display: inline-block; max-width: 4.6ch; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
}

/* ============================================================
   CALMER (2026-10-27): fewer things talking at once.
   ============================================================ */
/* the moving world steps back behind the wonderland, and comes forward at the terminal */
#world { transition: opacity 0.8s ease; }
body:not(.world-deep) #world { opacity: 0.45; }

@media (min-width: 761px) { .deck-tabs button { font-size: 13px; padding: 7px 12px; } }

/* each project says four things: what it is (logo, keeper, name), what it does,
   the facts, where to go */
.card-pip, .work-epithet { display: none; }
.card-text { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.card-text > * { grid-column: 1 / -1; }
.card-text > .card-logo { grid-column: 1; margin: 0; }
.card-text > .enc-title { grid-column: 2; }
.card-text > .card-logo + .enc-title { min-width: 0; }

/* the egg counter waits quietly until you go looking */
@media (min-width: 761px) {
  .egg-tracker.on { opacity: 0.5; }
  .egg-tracker.on:hover, .egg-tracker.on:focus-visible { opacity: 1; }
}

/* the phone: the work and the way to reach Robin. the hunt (door, garden,
   eggs, the cat) stays on the big screen */
@media (max-width: 760px) {
  .pixel-garden, .egg-tracker, .egg-panel, .guide-rabbit { display: none !important; }
  #work { padding-top: var(--s4); }
  .card-text { display: block; }
}

/* ============================================================
   COMPOSED (2026-10-27, second calm pass, desktop)
   ============================================================ */
@media (min-width: 761px) {
  /* a quiet band behind the mark and menu once the page moves, so nothing
     scrolls into them: paper in wonderland, dark in the matrix */
  body::after {
    content: ""; position: fixed; inset: 0 0 auto 0; height: 74px; z-index: 129;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(36, 40, 74, 0.1);
    opacity: 0; transition: opacity 0.35s ease, background 0.5s ease;
    pointer-events: none;
  }
  body.scrolled::after { opacity: 1; }
  body.in-matrix::after { background: rgba(9, 13, 10, 0.78); box-shadow: 0 1px 0 rgba(125, 255, 138, 0.12); }

  .pixel-garden { margin-top: calc(var(--s3) - 260px); }

  /* the terminal sits close to the choice, without a screen of nothing between */
  .threshold-room { min-height: 0; padding: var(--s6) var(--pad) var(--s4); }
  .threshold-descent { height: 6vh; }

  /* the end of the road, without the long silence */
  #about { padding-bottom: var(--s4); }
  .guide-rabbit { margin: var(--s3) auto var(--s4); }
}

/* ============================================================
   PHONE, COMPOSED (2026-10-27): one centred column, one thing per stop
   ============================================================ */
@media (max-width: 760px) {
  /* the mark alone at the top; the menu is two taps away at most */
  .hud-menu { display: none; }
  .hero { padding-top: 4.4rem; }
  .hero h1 { font-size: 2.15rem; }
  /* the projects heading centred, like everything else on the phone */
  #work .section-head { justify-content: center; text-align: center; }
  #work .section-head h2 { font-size: 2.4rem; }
  .deck-controls { display: none; }
  /* the running rabbit is a laptop joke; on a phone he only gets in the way */
  .rabbit-runner { display: none !important; }
  /* the choice, compact and centred: title, question, pills, then the three ways to reach Robin */
  #about { padding-top: var(--s5); }
  #about .about-body { display: flex; flex-direction: column; align-items: center; }
  .pill-row { gap: 10px; flex-wrap: nowrap; justify-content: center; }
  .pill { width: 74px; height: 32px; }
  .neo { width: 54px; margin: 0; }
  .contact-row { flex-direction: column; align-items: center; gap: 10px; margin-top: var(--s4); }
  .footer { padding: var(--s3) var(--pad) var(--s4); justify-content: center; text-align: center; }
}

/* ============================================================
   HERO, PROFESSIONAL (2026-10-27, approved by Robin): one order of reading —
   who (headline + one plain line), what next (one main button, the matrix as a
   quiet second), and the card as the picture
   ============================================================ */
#world { opacity: 0.25 !important; transition: opacity 0.8s ease; }
body.world-deep #world { opacity: 1 !important; }
.hero {
  max-width: 1200px; margin-inline: auto;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(48px, 6vw, 96px); align-items: center;
  min-height: min(100vh, 880px); padding: 112px var(--pad) 96px;
}
.hero-text { justify-self: start; max-width: 620px; container-type: normal; }
.hero h1 { font-size: clamp(3.6rem, 5.4vw, 5.4rem); line-height: 1.04; color: #1b1e3a; text-shadow: 3px 3px 0 var(--plate); letter-spacing: -0.005em; }
.hero-lede {
  margin-top: var(--s3); max-width: 30em;
  font: 400 1.18rem/1.55 var(--sans); color: #4c4a5e;
}
.hero-lede b { font-weight: 600; color: #1b1e3a; }
.hero-actions { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
/* the main way in: the drink-me tag, level and solid */
.cta-wonder { rotate: 0deg; padding-left: 0; }
.cta-wonder::before { display: none; }
.cta-wonder:hover { rotate: -1.5deg; }
.tag-plate { filter: drop-shadow(0 0 0 transparent); }
.tag {
  clip-path: none; border-radius: 999px; background: #1b1e3a; color: #f6eedd;
  padding: 0 28px; height: 52px; display: flex; align-items: center; font-size: 1.15rem;
  box-shadow: 4px 5px 0 rgba(194, 58, 48, 0.55);
}
.tag::before { display: none; }
/* the way out: a quiet line of code, not a second button */
.cta-matrix {
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: 1.2rem; color: #2a7a3e; text-shadow: none;
  border-bottom: 1px dashed rgba(42, 122, 62, 0.5); border-radius: 0;
}
.cta-matrix:hover { background: none; color: #1f5f2f; border-bottom-style: solid; box-shadow: none; }
/* the card: the picture, larger, straighter, lifted off the page */
.portrait { justify-self: end; width: min(100%, 400px); }
.pt-card { rotate: -2deg; box-shadow: 0 40px 70px -30px rgba(27, 30, 58, 0.45); }
.portrait .cheshire { opacity: 0; animation: none; transition: opacity 0.5s; }
.portrait:hover .cheshire { opacity: 1; }
.pt-hint, .hero-cue { display: none; }
body:not(.scrolled) .egg-tracker { opacity: 0 !important; pointer-events: none; }

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr; grid-template-areas: "card" "text";
    justify-items: center; text-align: center; row-gap: var(--s4);
    padding: 4.8rem var(--pad) var(--s5); min-height: 0;
  }
  .hero-text { display: block; grid-area: text; justify-self: center; }
  .hero h1 { font-size: 2.5rem; }
  .hero-lede { font-size: 1rem; margin-inline: auto; }
  .hero-actions { flex-direction: column; gap: var(--s3); align-items: center; }
  .portrait { grid-area: card; width: 66vw; justify-self: center; }
  .tag { height: 48px; font-size: 1.05rem; }
}

/* ============================================================
   HERO, SCALED (2026-10-27): the words and the card are one group, centred,
   with margins that grow with the screen; the card is sized so both buttons
   are always on the first screen, phone or laptop
   ============================================================ */
@media (min-width: 761px) {
  .hero {
    max-width: none;
    grid-template-columns: minmax(0, 540px) auto;
    justify-content: center;
    column-gap: clamp(40px, 6vw, 104px);
    padding-inline: clamp(32px, 6vw, 96px);
    padding-block: clamp(88px, 12vh, 120px) clamp(56px, 8vh, 96px);
    min-height: min(100svh, 880px);
  }
  .hero-text { max-width: none; }
  .hero h1 { font-size: clamp(3rem, 5vw, 5.2rem); }
  /* the card: never wider than a third of the screen, never taller than the screen allows */
  .portrait { width: min(400px, 32vw, calc((100svh - 220px) / 1.4)); justify-self: end; }
}
@media (max-width: 760px) {
  .hero { padding-top: 4.2rem; padding-bottom: var(--s4); row-gap: var(--s3); }
  /* the card shrinks on short phones so the buttons still land on the first screen */
  .portrait { width: min(56vw, calc((100svh - 450px) / 1.42)); padding-top: 12px; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero-lede { margin-top: var(--s2); font-size: 0.95rem; line-height: 1.5; }
  .hero-actions { margin-top: var(--s3); gap: var(--s2); }
}

/* ============================================================
   EVERY SECTION, ONE MAIN ACTION (2026-10-27): the hero's rules, carried down
   ============================================================ */
/* projects: "Visit" is the main way in, solid; "The brief" is a quiet second */
.card-links { align-items: center; gap: var(--s3); }
.card-links a[target="_blank"] {
  order: -1;
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: #1b1e3a; color: #f6eedd;
  box-shadow: 3px 4px 0 rgba(194, 58, 48, 0.55);
  font-weight: 500; font-size: 14px;
  transition: translate 0.2s var(--ease), box-shadow 0.2s;
}
.card-links a[target="_blank"]:hover { translate: 0 -1px; box-shadow: 4px 6px 0 rgba(194, 58, 48, 0.55); border: 0; }
.card-links a:not([target]) { font-size: 14px; color: var(--soft); border-bottom-color: rgba(36, 40, 74, 0.25); }
.card-links a:not([target]):hover { color: var(--ink); border-bottom-color: var(--ink); }
/* the screenshots lift off the page the same way the hero card does */
@media (min-width: 761px) {
  .card-shot:not(.card-phones) { box-shadow: 9px 10px 0 var(--plate), 0 40px 70px -40px rgba(27, 30, 58, 0.45); }
}

/* the choice: email is the main way to reach Robin; GitHub and LinkedIn are quiet seconds */
.contact-row { align-items: center; gap: var(--s3); }
.contact-row .contact-link:first-child {
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px;
  background: var(--matrix); color: #0b0f0b; border: 0; border-radius: 999px;
  font-weight: 600; text-shadow: none;
  box-shadow: 0 0 24px rgba(125, 255, 138, 0.35);
}
.contact-row .contact-link:first-child:hover { background: #a6ffb0; color: #0b0f0b; }
.contact-row .contact-link:not(:first-child) {
  background: none; border: 0; border-bottom: 1px solid rgba(243, 238, 227, 0.3); border-radius: 0;
  padding: 2px 0; color: rgba(243, 238, 227, 0.75);
}
.contact-row .contact-link:not(:first-child):hover { color: var(--paper); border-bottom-color: var(--matrix); background: none; }
@media (max-width: 760px) {
  .contact-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .contact-row .contact-link:first-child { flex-basis: 100%; justify-content: center; max-width: 280px; }
}

/* ============================================================
   RESPONSIVE (2026-10-27): every screen width, not just a laptop and a phone
   ============================================================ */
/* the choice is as tall as what's in it; the old full-screen minimum left a hole under the links */
#about { min-height: 0 !important; }
/* tablets and small laptops: the project picture sits above its words, full width,
   instead of a sliver squeezed between the big arrows */
@media (min-width: 761px) and (max-width: 960px) {
  .card {
    grid-template-columns: minmax(0, 560px) !important;
    justify-content: center; row-gap: var(--s3);
    padding-inline: 88px !important;
  }
  .card-text { max-width: 560px; }
  .deck-big { top: 22%; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    padding-inline: 116px !important;
    column-gap: var(--s4);
  }
}
/* very wide screens: the deck and the hero don't drift to the edges */
@media (min-width: 1600px) {
  .card { padding-inline: calc((100vw - 1240px) / 2) !important; }
  .deck-big:not(.back) { right: calc((100vw - 1240px) / 2 - 80px); }
  .deck-big.back { left: calc((100vw - 1240px) / 2 - 80px); }
  #work .section-head { max-width: 1240px; margin-inline: auto; }
}
/* where the margins are tight, the arrows move up into the projects header, beside the
   count, where they can't sit on a picture; the big side keys return on wide screens */
@media (min-width: 761px) and (max-width: 1360px) {
  .deck-big { display: none !important; }
  #deckPrev, #deckNext { display: grid !important; place-items: center; }
  .card { padding-inline: clamp(48px, 6vw, 80px) !important; }
}

/* the flowers' speech bubble sits just over the flowers, not floating in the air above them */
.garden-say { top: auto; bottom: 104px; }

/* the last line on the site, for whoever (or whatever) reads this far */
.footer { flex-wrap: wrap; }
.footer-agents {
  /* a full row of its own (so it always sits under the copyright), with the
     text itself kept to a readable width */
  flex: 0 0 100%; max-width: none;
  padding-right: max(0px, calc(100% - 64ch));
  margin: var(--s1) 0 0; text-align: left; order: 9;
  font: 400 11px/1.6 var(--mono); letter-spacing: 0.04em;
  color: rgba(243, 238, 227, 0.38);
}
@media (max-width: 760px) { .footer { justify-content: flex-start; text-align: left; } }

/* the garden grows under the projects, the last of wonderland before the terminal
   (desktop; the phone has no garden). its 260px of headroom is for defying gravity */
.pixel-garden { display: flex !important; margin-top: calc(var(--s6) + 24px - 260px) !important; margin-bottom: 0 !important; }
/* ============================================================
   PHONE: NO EASTER EGGS (Robin, 2026-10-27). the phone is a focused read: the
   work and the way to reach Robin. the hunt, and the cat it earns (a desktop
   browser extension), live on the big screen only.
   ============================================================ */
@media (max-width: 760px) {
  .pixel-garden, .egg-tracker, .egg-panel, .guide-rabbit,
  .tiny-door, .roro-cat-shell, .hud-cat, .rabbit-runner {
    display: none !important;
  }
  /* the pocket watch stays as part of the mark, but it doesn't wake a dragon here */
  .watch-wrap { pointer-events: none; }
}

/* retired faces, gone from the home page too */
.work-epithet { font-family: "Kode Mono", ui-monospace, monospace; font-style: normal; }

/* the cat's coat: a new colour steeps the whole site */
/* the tea: every pour steeps the whole site in its colour */
.tea-wash {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  background: rgb(var(--tea, 233, 199, 107));
  mix-blend-mode: multiply; opacity: 0.2;
  transition: background 1.4s ease, opacity 1.4s ease;
}
@media (max-width: 760px) { .tea-wash { display: none; } }

/* ============================================================
   THE RABBIT HOLE (2026-10-27): after the hero you fall into colour. the
   paper blooms into a soft moving wash over the checkered tunnel, and the
   cheshire grin hangs in the middle of it. tap the grin and it shows you
   what the cat can do; the whole cat is the reward for the eggs.
   ============================================================ */
.bloom { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--bloom, 0); overflow: hidden; mix-blend-mode: multiply; }
.bloom::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: conic-gradient(from 0deg, #f6b8cf, #cdb9ff, #a9e4d0, #ffe3a1, #f9c0a8, #f6b8cf);
  filter: blur(70px) saturate(1.15);
  animation: bloomTurn 70s linear infinite, bloomHue 24s ease-in-out infinite alternate;
}
@keyframes bloomTurn { to { rotate: 360deg; } }
@keyframes bloomHue { to { filter: blur(70px) saturate(1.25) hue-rotate(60deg); } }
/* the tunnel needs the world at full strength while you're in the hole */
body.in-hole #world { opacity: 1 !important; }

.rabbit-hole { position: relative; min-height: 96vh; display: grid; place-items: center; padding: var(--s6) var(--pad); overflow: clip; }
.rh-inner { display: grid; justify-items: center; gap: var(--s3); }
.rh-grin {
  position: relative; display: block; border: 0; padding: 0; background: none; cursor: pointer;
  width: clamp(220px, 24vw, 320px); aspect-ratio: 56 / 48;
  opacity: var(--grin, 0); transition: opacity 0.3s linear, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 30px rgba(205, 185, 255, 0.85));
  --coat: 0deg;
}
.rh-grin:hover { scale: 1.04; }
.rh-grin:focus-visible { outline: 2px solid #c23a30; outline-offset: 10px; border-radius: 20px; }
.rh-grin img { position: absolute; image-rendering: pixelated; transition: opacity 0.6s ease; filter: hue-rotate(var(--coat)); }
/* the grin sits where the cat's own mouth would be, so the cat can fill in around it */
.rh-cat { inset: 0; width: 100%; height: 100%; opacity: 0; }
.rh-mouth, .rh-eyes { left: 7.14%; top: 10%; width: 85.7%; }
.rh-eyes { opacity: 0; }
.rh-grin.eyes .rh-eyes { opacity: 1; }
.rh-grin.whole .rh-cat { opacity: 1; }
.rh-grin.whole .rh-mouth, .rh-grin.whole .rh-eyes { opacity: 0; }
/* now you see me: he goes in pieces and comes back somewhere else */
.rh-grin.vanish { opacity: 0 !important; transition: opacity 0.9s steps(6); }
.rh-grin { translate: var(--gx, 0) var(--gy, 0); }
.rh-line {
  font: 400 clamp(18px, 1.6vw, 24px)/1.2 "VT323", var(--mono); letter-spacing: 0.06em;
  color: #24284a; opacity: var(--grin, 0); min-height: 1.2em; text-align: center;
}
/* claw marks: three slashes raked across the colour */
.rh-claws { position: absolute; inset: 0; pointer-events: none; }
.rh-claws i {
  position: absolute; left: 30%; top: 26%; width: 40%; height: 7px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #24284a 18%, #24284a 82%, transparent);
  rotate: -24deg; transform-origin: 0 50%; scale: 0 1; opacity: 0.7;
}
.rh-claws i:nth-child(2) { top: 36%; left: 32%; } .rh-claws i:nth-child(3) { top: 46%; left: 34%; }
.rabbit-hole.clawed .rh-claws i { animation: rake 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.rabbit-hole.clawed .rh-claws i:nth-child(2) { animation-delay: 0.07s; } .rabbit-hole.clawed .rh-claws i:nth-child(3) { animation-delay: 0.14s; }
@keyframes rake { to { scale: 1 1; } }
.rabbit-hole.clawed .rh-claws { animation: clawsFade 2.6s ease 0.6s forwards; }
@keyframes clawsFade { to { opacity: 0; } }

@media (max-width: 760px) {
  .rabbit-hole { min-height: 70vh; }
  .rh-grin { width: 62vw; cursor: default; pointer-events: none; }
  .rh-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .bloom::before { animation: none; } }

/* the claws, gone mad: gashes torn through the page down to the code */
.rip-layer { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; transition: opacity 1.1s ease; }
.rip-layer.mend { opacity: 0; }
.rip {
  position: absolute; height: var(--h, 18px); translate: -50% calc(-50% + var(--off, 0px));
  transform-origin: 0% 50%; scale: 0 1;
  background: #070b07; color: rgba(125, 255, 138, 0.9);
  font: 400 22px/var(--h, 18px) "VT323", ui-monospace, monospace; letter-spacing: 0.12em;
  white-space: nowrap; overflow: hidden; text-shadow: 0 0 6px rgba(125, 255, 138, 0.8);
  /* torn edges, not a ruler line */
  clip-path: polygon(0 50%, 3% 18%, 9% 34%, 15% 6%, 24% 28%, 33% 0, 44% 22%, 55% 4%, 66% 26%, 76% 2%, 86% 24%, 94% 10%, 100% 50%, 95% 88%, 87% 72%, 77% 100%, 66% 76%, 55% 96%, 44% 74%, 33% 100%, 24% 70%, 15% 92%, 9% 64%, 3% 84%);
  box-shadow: 0 0 0 2px rgba(36, 40, 74, 0.6);
  animation: ripOpen 0.22s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes ripOpen { to { scale: 1 1; } }
body.shook main { animation: shook 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shook { 15% { translate: -9px 4px; } 35% { translate: 8px -5px; } 55% { translate: -6px -3px; } 75% { translate: 5px 3px; } 100% { translate: 0 0; } }
.rh-grin.hiss { animation: hiss 0.3s steps(2) 3; }
@keyframes hiss { 50% { scale: 1.12; rotate: -6deg; } }
@media (prefers-reduced-motion: reduce) { .rip { animation: none; scale: 1 1; } }

/* ============================================================
   ONE THING ASKING AT A TIME (2026-10-27, later): the grin beckons, the projects have one way through, the hunt moves up to the nav,
   and the blue pill gives in
   ============================================================ */
/* the grin beckons until you tap it */
.rabbit-hole:not(.met) .rh-grin { animation: grinBeckon 2.4s ease-in-out infinite; }
@keyframes grinBeckon { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

/* the title is the way in: it underlines on hover, and the arrow says where it goes */
.card-title {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat;
  transition: background-size 0.3s var(--ease);
}
.card-title:hover, .card-title:focus-visible { background-size: 100% 3px; }
.card-go {
  display: inline-block; margin-left: 0.12em; vertical-align: 0.6em;
  font: 400 0.42em/1 var(--sans); color: var(--red);
  transition: translate 0.2s var(--ease);
}
.card-title:hover .card-go { translate: 3px -3px; }
/* the briefs are held back while Robin revises them */
.card-links a[hidden], .card-links:not(:has(a:not([hidden]))) { display: none; }

@media (min-width: 761px) {
  /* the way through sits on the title's line, flush right: count, back, next */
  #work .section-head { margin-bottom: var(--s4); }
  .deck-controls { gap: 10px; }
  .deck-arrow { height: 44px; }
  .deck-arrow-alice { width: 50px; }
  .deck-arrow-matrix {
    width: auto; padding: 0 16px;
    font-size: 1.45rem; letter-spacing: 0.04em;
    animation: nudge 2.4s var(--ease) infinite;
  }
  .deck-arrow-matrix:hover, .deck-arrow-matrix.at-end { animation: none; }
  .deck-arrow-alice:disabled { visibility: hidden; }

  /* the projects as an index under the title, not a row of buttons */
  #deckTabs { justify-content: flex-start; gap: 4px 26px; padding: 0 var(--pad); margin-bottom: var(--s4); }
  #deckTabs button {
    padding: 6px 0; border-radius: 0; background: none;
    font: 400 14px/1 var(--sans); color: var(--soft);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  #deckTabs button:hover { color: var(--ink); background: none; }
  #deckTabs button[aria-current="true"] { color: var(--ink); background: none; border-bottom-color: var(--red); box-shadow: none; }

  /* the neighbours show at the edges, so it's plain there's more to the side */
  .deck { padding-inline: 8%; scroll-padding-inline: 8%; }
  .card { flex: 0 0 84%; padding-inline: clamp(16px, 3vw, 48px) !important; }
}
@media (max-width: 760px) {
  /* the dots stay under the cards on the phone */
  #work { display: flex; flex-direction: column; }
  #work > .section-head { order: 0; }
  #work > .deck-wrap { order: 1; }
  #work > .deck-tabs { order: 2; }
  #work > .pixel-garden { order: 3; }
}

/* the hunt: a small chip in the nav, under the links, instead of a badge over the work */
body .hud-menu .egg-tracker {
  /* beside the links, clear of the rabbit who hops along their left edge */
  position: absolute; right: calc(100% + 48px); top: 50%; left: auto; bottom: auto; translate: 0 -50% !important;
  white-space: nowrap; opacity: 1 !important; pointer-events: auto !important;
  padding: 0.26rem 0.6rem; gap: 6px; border-width: 1.5px;
  font-size: 0.64rem; letter-spacing: 0.12em;
  box-shadow: 2px 2px 0 var(--plate);
}
body .hud-menu .egg-tracker:hover { box-shadow: 3px 3px 0 var(--plate); }
.hud-menu .egg-tracker svg { width: 12px; }
.egg-panel { top: 120px; bottom: auto; left: auto; right: var(--hud); transform-origin: top right; translate: 0 -8px; }

/* the blue pill won't take you back: it shrinks, and the red one grows */
.pill { scale: var(--pill-scale, 1); transition: transform 0.15s, box-shadow 0.15s, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pill-blue { transform-origin: right center; }
.pill-red { transform-origin: left center; }
.pill-blue.refused { animation: pillNo 0.4s ease; }
@keyframes pillNo { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }