/* cosmicdroid: a square grid drawn with thin cobalt lines on light blue paper.
   Violet blocks at the corners, acid lime for the lettering and highlights,
   cream panels for artwork. Clean and boxy so the drawings do the talking. */
:root {
  /* color */
  --paper: #dce9fb;      /* page background */
  --panel: #fbf9ea;      /* cream panels behind artwork and cards */
  --line: #3326d6;       /* every line, button and link */
  --ink: #2a1fb0;        /* text */
  --muted: #5650b8;      /* secondary text */
  --violet: #7a3cf2;     /* corner blocks, call to action */
  --lime: #e6f43c;       /* lettering, highlights */
  --cyan: #33c4e6;
  --good: #16815a;
  --red: #d9385a;

  /* type */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "Courier New", monospace;

  --pad: clamp(16px, 2.4vw, 32px);
  --hh: 74px;            /* header height on desktop */

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--violet); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
button { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the outer frame: one thin line around everything */
.frame {
  margin: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}
main { display: block; }

/* shared type */
.num, .label, .crumb { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.label { margin: 0 0 6px; text-transform: lowercase; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--panel);
  background: var(--line);
  border: 1px solid var(--line);
  padding: 13px 18px 12px;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { color: var(--ink); background: var(--lime); }
.button.lime { color: var(--ink); background: var(--lime); }
.button.lime:hover { color: var(--lime); background: var(--ink); }
.button.ghost { color: var(--ink); background: transparent; }
.button.ghost:hover { background: var(--lime); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  display: grid;
  grid-template-columns: var(--hh) minmax(0, 420px) minmax(0, 1fr) auto;
  height: var(--hh);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header > * { min-width: 0; }
.brand-icon {
  display: grid;
  place-items: center;
  background: var(--violet);
  border-right: 1px solid var(--line);
}
.brand-icon svg, .brand-icon img { width: 66%; height: auto; }
.brand-word {
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 2vw, 28px);
  border-right: 1px solid var(--line);
  text-decoration: none;
}
.brand-word span {
  font-family: var(--sans);
  font-stretch: 125%;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
  -webkit-text-stroke: 1.5px var(--line);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--line);
  white-space: nowrap;
}
.brand-word img { max-height: 66%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 48px);
  padding-inline: clamp(16px, 3vw, 44px);
  border-right: 1px solid var(--line);
}
.nav a {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  padding: 2px 2px;
  background: linear-gradient(var(--lime), var(--lime)) left 100% / 0 45% no-repeat;
  transition: background-size 0.2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 45%; }
.nav-num, .nav-arrow { display: none; }
.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-inline: 26px;
  background: var(--violet);
  color: var(--lime);
}
.socials a { color: var(--lime); display: block; line-height: 0; }
.socials a:hover { color: var(--panel); }
.socials svg { width: 26px; height: 26px; }
.menu-toggle { display: none; }

@media (max-width: 1100px) {
  :root { --hh: 64px; }
  .site-header { grid-template-columns: var(--hh) minmax(0, 320px) minmax(0, 1fr) auto; }
  .nav a { font-size: 0.95rem; }
  .socials { padding-inline: 18px; gap: 14px; }
  .socials svg { width: 26px; height: 26px; }
}

/* ---------- home: the castle, alone on the first screen ---------- */
.castle-hero {
  position: relative;
  height: calc(100svh - 17px - var(--header-h, var(--hh))); /* fills the screen under the header */
  min-height: 520px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* square grid paper behind the castle, fading out toward it */
  background:
    radial-gradient(closest-side at 50% 52%, var(--paper) 0 58%, transparent 100%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--paper);
  --grid: rgba(51, 38, 214, 0.16);
}
.castle-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 14px;
  padding: 28px 24px;
}
.castle-frame { position: relative; line-height: 0; transition: opacity 0.25s ease; }
.castle-frame.is-leaving { opacity: 0; }
.castle-frame::before { /* a soft hard-edged shadow, like a sticker on the page */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  background: var(--line);
  opacity: 0.12;
}
.castle-frame canvas {
  position: relative;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.castle-frame canvas:focus { outline: none; }
.castle-frame canvas:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* little labels in the corners of the first screen */
.hero-meta {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.hero-meta span { color: var(--violet); }
.hero-tl { top: 18px; left: 22px; }
.hero-tr { top: 18px; right: 22px; }
.hero-bl { bottom: 18px; left: 22px; }
.hero-br { bottom: 18px; right: 22px; }
.scroll-cue { color: var(--line); text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel); }
.scroll-cue:hover { background: var(--lime); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span, .pad-scroll { animation: nudge 1.6s ease-in-out infinite; }
}
@keyframes nudge { 50% { transform: translateY(3px); } }
@media (max-width: 1000px) { .hero-tr { display: none; } }

/* ---------- phone controls: a stick on the left, buttons on the right ---------- */
.castle-pad {
  display: none;
  flex: none;
  width: 100%;
  max-width: 460px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse), (max-width: 760px) { .castle-pad { display: flex; } }
.stick {
  position: relative;
  flex: none;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 var(--line);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.stick-ring { /* the cross guide inside the base */
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px dashed rgba(51, 38, 214, 0.45);
  background:
    linear-gradient(var(--line), var(--line)) center / 1px 60% no-repeat,
    linear-gradient(90deg, var(--line), var(--line)) center / 60% 1px no-repeat;
  opacity: 0.5;
}
.stick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--violet);
  border: 3px solid var(--lime);
  box-shadow: 0 0 0 1px var(--line), 2px 3px 0 1px var(--line);
  transition: transform 0.12s ease-out;
  pointer-events: none;
}
.stick.is-down .stick-knob { transition: none; }
.pad-scroll {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.pad-buttons { display: flex; align-items: flex-end; gap: 12px; }
.pad-btn {
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 var(--line);
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pad-jump { width: 84px; height: 84px; font-size: 0.95rem; background: var(--lime); }
.pad-enter { width: 58px; height: 58px; font-size: 0.8rem; background: var(--panel); color: var(--muted); margin-bottom: 30px; }
.pad-enter.is-ready { background: var(--cyan); color: var(--ink); animation: ready 0.9s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 4px 4px 0 var(--line), 0 0 0 6px rgba(51, 196, 230, 0.35); } }
.pad-btn.is-down { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }
@media (prefers-reduced-motion: reduce) { .pad-enter.is-ready { animation: none; } }

/* ---------- home: hello + room list, right under the castle ---------- */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 0;
}
.castle-side { min-width: 0; display: flex; flex-direction: column; }
.castle-left { border-right: 1px solid var(--line); }
.castle-intro { padding: var(--pad); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.castle-intro p { margin: 0 0 16px; max-width: 46ch; }
.castle-hello {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.castle-now { padding: var(--pad); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex: 1; }
.castle-now p { margin: 0; max-width: 32ch; }
.peek-slot { width: 120px; flex: none; }
.castle-guide { padding: var(--pad) 0 0; }
.castle-guide h2 {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1;
  margin: 0 var(--pad) 10px;
}
.castle-keys { font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; color: var(--muted); margin: 0 var(--pad) 18px; }
.only-touch { display: none; }
@media (pointer: coarse) { .only-touch { display: inline; } .only-desktop { display: none; } }
.room-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.room-list li:last-child a { border-bottom: 0; }
.room-list a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto 1.4em;
  align-items: baseline;
  gap: 8px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.room-list b { font-weight: 700; }
.room-list .what { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.room-list .arrow { font-family: var(--mono); text-align: right; }
.room-list a:hover, .room-list a:focus-visible { background: var(--lime); outline: none; }

/* ---------- scrolling strip ---------- */
.ticker {
  overflow: hidden;
  background: var(--violet);
  color: var(--lime);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; align-items: center; gap: 22px; padding: 12px 0; }
.ticker-track i { font-style: normal; color: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 40s linear infinite; }
}
@keyframes ticker { to { transform: translateX(-33.333%); } }

/* ---------- blocks and bars ---------- */
.block { border-bottom: 1px solid var(--line); }
.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
}
.bar-title {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.bar-link { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); text-decoration: none; }
.bar-link:hover { background: var(--lime); color: var(--ink); }
.pad-cell { padding: var(--pad); }

/* rows of square cells sharing their borders */
.cells { display: grid; gap: 1px; background: var(--line); }
.cells > * { background: var(--paper); min-width: 0; }
.cells-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell-fig { margin: 0; padding: 14px; }

.service { padding: var(--pad); display: grid; gap: 12px; align-content: start; }
.service .slot { width: 72px; }
.service h3 {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
}
.service p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* ---------- media slots ---------- */
.slot {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 1 / 1);
  max-width: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  container-type: inline-size;
}
.slot > img, .slot > video { width: 100%; height: 100%; object-fit: cover; }
.slot.contain > img, .slot.contain > video { object-fit: contain; }
.slot-empty {
  position: absolute;
  inset: 6px;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  border: 1px dashed var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted);
  padding: 6px;
}
.slot-empty b { color: var(--line); font-weight: 700; }
@container (max-width: 130px) {
  .slot-empty { inset: 3px; padding: 2px; }
  .slot-empty b, .slot-empty span { display: none; }
  .slot-empty::before { content: "gif"; color: var(--line); }
}

/* ---------- works deck: cards side by side, the one you point at opens ---------- */
.deck-filters { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.deck-filters button {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--line);
  padding: 14px var(--pad);
  cursor: pointer;
}
.deck-filters button:hover { background: var(--panel); }
.deck-filters button[aria-selected="true"] { background: var(--lime); }
.deck {
  display: flex;
  height: clamp(380px, 62vh, 600px);
  background: var(--panel);
}
.deck-tall { height: clamp(420px, 72vh, 720px); }
.deck-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}
.deck-card:last-child { border-right: 0; }
.deck-card.is-open { flex-grow: 7; }
.deck-img { flex: 1; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.deck-img img { width: 100%; height: 100%; object-fit: cover; }
.deck-label { height: 78px; padding: 12px 16px; display: grid; align-content: center; gap: 2px; background: var(--panel); }
.deck-label b, .deck-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.25s ease; }
.deck-label b { font-stretch: 112%; font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.deck-label span { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.deck-card:not(.is-open) .deck-label b, .deck-card:not(.is-open) .deck-label span { opacity: 0; }
.deck-num {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  padding: 4px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.deck-go {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
  padding: 5px 8px;
  background: var(--lime);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.deck-card.is-open .deck-go { opacity: 1; }
.deck-card:focus-visible { box-shadow: inset 0 0 0 3px var(--violet); }
.deck-empty { padding: var(--pad); font-family: var(--mono); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }

/* ---------- page heads ---------- */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.page-head-title { padding: var(--pad); border-right: 1px solid var(--line); }
.page-title {
  font-stretch: 125%;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--lime);
  -webkit-text-stroke: 2px var(--line);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--line);
  overflow-wrap: anywhere;
}
.page-head-text { padding: var(--pad); display: grid; align-content: end; gap: 12px; }
.page-lede { font-size: 1.15rem; max-width: 46ch; margin: 0; }
.crumb { margin: 0; }
.crumb a { color: var(--ink); text-decoration: none; }
.crumb a:hover { background: var(--lime); }

/* ---------- two cells side by side ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  border-bottom: 1px solid var(--line);
}
.split-cell { padding: var(--pad); min-width: 0; }
.split-cell + .split-cell { border-left: 1px solid var(--line); }
.stack { display: grid; gap: 20px; align-content: start; }
.prose { max-width: 64ch; }
.prose p { margin: 0 0 1.1em; }
.prose h2 {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1.1;
  margin: 1.6em 0 0.6em;
}
.prose h2:first-child { margin-top: 0; }
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 6ch 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline .year { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li { font-family: var(--mono); font-size: 0.85rem; line-height: 1; border: 1px solid var(--line); padding: 8px 10px; background: var(--panel); }
.placeholder-note { font-family: var(--mono); font-size: 0.8rem; display: inline-block; background: var(--lime); padding: 3px 6px; }

/* frog page */
.dossier { border: 1px solid var(--line); background: var(--panel); }
.dossier-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.dossier h3 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 1.3rem; margin: 0; line-height: 1; }
.dossier .role { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 4px 0 0; }
.dossier ul { margin: 0; padding: 14px 14px 14px 34px; }
.dossier li { margin-bottom: 4px; }

/* ---------- contact ---------- */
.form { display: grid; gap: 16px; max-width: 640px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px;
  width: 100%;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.form-status { font-family: var(--mono); font-size: 0.9rem; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--good); }
.form-status.err { color: var(--red); }
.hidden-field { position: absolute; left: -9999px; }
.contact-aside { display: grid; gap: 22px; align-content: start; }
.contact-aside h2 { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; color: var(--muted); text-transform: lowercase; margin: 0 0 4px; }
.contact-aside p { margin: 0; }
.contact-aside .big { font-stretch: 112%; font-weight: 700; font-size: 1.3rem; word-break: break-word; }

/* ---------- project page ---------- */
.project-hero { margin: 0; border-bottom: 1px solid var(--line); }
.project-hero img { width: 100%; max-height: 80vh; object-fit: cover; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.facts div { background: var(--paper); padding: 14px var(--pad); }
.facts dt { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 700; }
.facts .todo { font-family: var(--mono); font-weight: 400; font-size: 0.85rem; background: var(--lime); display: inline-block; padding: 0 4px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1px; background: var(--line); }
.gallery button { padding: 0; border: 0; background: var(--paper); cursor: zoom-in; overflow: hidden; }
.gallery button:hover img { opacity: 0.85; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--pad);
  font-family: var(--mono);
  border-bottom: 1px solid var(--line);
}
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { background: var(--lime); }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.lightbox img { max-height: 86vh; width: auto; border: 1px solid var(--line); }
.lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--lime);
  border: 1px solid var(--line);
  padding: 8px 12px;
  cursor: pointer;
}

/* ---------- call to action ---------- */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: calc(var(--pad) * 1.5) var(--pad);
  background: var(--violet);
  border-bottom: 1px solid var(--line);
}
.cta p {
  margin: 0;
  max-width: 22ch;
  font-stretch: 125%;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
  -webkit-text-stroke: 1px var(--line);
  paint-order: stroke fill;
  text-wrap: balance;
}

/* ---------- footer ---------- */
.site-footer { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; }
.foot-cell { padding: 18px var(--pad); min-width: 0; }
.foot-cell + .foot-cell { border-left: 1px solid var(--line); }
.foot-critter { padding: 14px; background: var(--violet); }
.foot-text { display: grid; align-content: center; gap: 2px; }
.foot-text p { margin: 0; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.foot-text p:first-child { font-family: var(--sans); font-stretch: 125%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.3rem; color: var(--ink); }
.foot-links { display: grid; align-content: center; gap: 6px; font-family: var(--mono); font-size: 0.85rem; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { background: var(--lime); }

/* ---------- legacy grid (only used if a page asks for data-grid) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1px; background: var(--line); }
.card { display: block; background: var(--paper); color: inherit; text-decoration: none; padding: 12px; }
.card-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); }
.card-title { font-weight: 800; margin: 10px 0 0; font-size: 1.05rem; }
.card-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .cells-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --hh: 64px; }
  .frame { margin: 0; border: 0; }
  .site-header { grid-template-columns: var(--hh) minmax(0, 1fr) var(--hh); }
  .brand-word span { font-size: clamp(1.25rem, 6.4vw, 1.8rem); text-shadow: 2px 2px 0 var(--line); -webkit-text-stroke-width: 1px; }
  .nav, .socials { display: none; }
  .menu-toggle {
    display: grid;
    place-items: center;
    grid-column: 3;
    grid-row: 1;
    padding: 0;
    background: var(--paper);
    color: var(--line);
    border: 0;
    border-left: 1px solid var(--line);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .burger { position: relative; display: block; width: 28px; height: 20px; }
  .burger i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }
  .burger i:nth-child(1) { top: 0; }
  .burger i:nth-child(2) { top: 8.5px; }
  .burger i:nth-child(3) { top: 17px; }
  .site-header.is-open .burger i:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
  .site-header.is-open .burger i:nth-child(2) { opacity: 0; }
  .site-header.is-open .burger i:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }
  .menu-toggle:active, .site-header.is-open .menu-toggle { background: var(--lime); }
  .site-header.is-open { height: auto; grid-template-rows: var(--hh) auto auto; }
  .site-header.is-open .nav {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    padding: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .site-header.is-open .nav a {
    display: grid;
    grid-template-columns: 3em 1fr auto;
    align-items: center;
    padding: 18px 16px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .site-header.is-open .nav a[aria-current="page"], .site-header.is-open .nav a:hover { background: var(--lime); }
  .site-header.is-open .nav-num { display: inline; font-size: 0.8rem; color: var(--muted); }
  .site-header.is-open .nav-arrow { display: inline; }
  .site-header.is-open .socials { display: flex; grid-column: 1 / -1; justify-content: flex-start; padding: 14px 16px; }

  .castle-hero { height: calc(100svh - var(--header-h, var(--hh))); min-height: 520px; --grid: rgba(51, 38, 214, 0.12); }
  .castle-stage { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); row-gap: 12px; justify-content: space-between; }
  .castle-frame { margin: auto 0; }
  .castle-frame::before { transform: translate(5px, 5px); }
  .hero-meta { display: none; }
  .home-intro { grid-template-columns: minmax(0, 1fr); }
  .castle-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .peek-slot { width: 84px; }

  .deck, .deck-tall {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .deck::-webkit-scrollbar { display: none; }
  .deck-card, .deck-card.is-open { flex: 0 0 80%; scroll-snap-align: start; }
  .deck-img { flex: none; aspect-ratio: 4 / 5; }
  .deck-card:not(.is-open) .deck-label b, .deck-card:not(.is-open) .deck-label span { opacity: 1; }
  .deck-go { opacity: 1; }

  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-head-title { border-right: 0; border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-cell + .split-cell { border-left: 0; border-top: 1px solid var(--line); }
  .cells-6, .cells-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells-4 { grid-template-columns: minmax(0, 1fr); }
  .site-footer { grid-template-columns: 88px minmax(0, 1fr); }
  .foot-links { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }
}

/* ---------- Frog Jump overlay (keeps its own night look) ---------- */
html.intro-open { overflow: hidden; }
.intro {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #0f0b1a;
  color: #efe3cc;
  color-scheme: dark;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.35s ease;
}
.intro.leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .intro { transition: none; } }
.intro-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.intro-stage canvas { display: block; max-width: 100%; max-height: 100%; border: 1px solid #3a2a52; border-radius: 160px 160px 10px 10px; background: #0f0b1a; }
.intro-stage canvas:focus { outline: none; }
.intro-screen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-card {
  pointer-events: auto;
  width: min(330px, calc(100% - 24px));
  text-align: center;
  background: rgba(15, 11, 26, 0.86);
  border: 1px solid #3a2a52;
  border-radius: 999px 999px 12px 12px;
  padding: 44px 22px 22px;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.intro-card p { margin: 0; color: #a99cc4; }
.intro-card .intro-logo { font-family: "Pirata One", Georgia, serif; font-size: 2.6rem; line-height: 1; color: #efe3cc; }
.intro-card .intro-big { font-family: "VT323", monospace; font-size: 3.4rem; line-height: 0.9; color: #f2b24c; font-variant-numeric: tabular-nums; }
.intro-card .intro-keys { font-family: "VT323", monospace; font-size: 1.15rem; line-height: 1.2; }
.intro-actions { display: grid; gap: 10px; width: 100%; }
.intro .button { width: 100%; justify-content: center; font-family: "VT323", monospace; font-size: 1.45rem; color: #0f0b1a; background: #f2b24c; border-color: #f2b24c; border-radius: 999px; }
.intro .button:hover { background: #efe3cc; border-color: #efe3cc; color: #0f0b1a; }
.intro .button.ghost { background: transparent; color: #efe3cc; border-color: #3a2a52; }
.intro .button.ghost:hover { background: #1b1428; border-color: #efe3cc; }
.intro-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-top: 10px; font-family: "VT323", monospace; font-size: 1.2rem; color: #a99cc4; }
.intro-skip { font: inherit; color: #efe3cc; background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.intro-skip:hover { color: #f2b24c; }
.intro-controls { display: flex; justify-content: center; }
.tongue-btn {
  width: 66px; height: 66px; margin-top: 10px;
  border-radius: 50%;
  border: 2px solid #efe3cc;
  background: #ff7aa8;
  color: #0f0b1a;
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  line-height: 1;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.tongue-btn:active { transform: scale(0.94); }
@media (pointer: coarse) { .hero-bl { display: none; } }

/* the running Leap Kill guy (frames 3-6 of assets/castle/hero-sheet.png) */
.runner {
  display: block;
  width: 96px;
  height: 96px;
  background: url(../assets/castle/hero-sheet.png) 0 0 / 800% 100% no-repeat;
  background-position-x: 28.5714%;
  image-rendering: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .runner { animation: run 0.44s steps(4) infinite; }
}
@keyframes run { from { background-position-x: 28.5714%; } to { background-position-x: 85.7143%; } }

/* ---------- loading screen (first visit of each session) ---------- */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(51, 38, 214, 0.12) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(51, 38, 214, 0.12) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--paper);
  transition: opacity 0.35s ease, visibility 0.35s;
  animation: loader-failsafe 0s 6s forwards; /* never stay stuck */
}
html.is-loading .loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader-inner { display: grid; justify-items: center; }
.loader .runner { width: 120px; height: 120px; }
.loader-ground {
  display: block;
  width: 220px;
  height: 3px;
  margin-top: -6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 18px, transparent 18px 30px);
}
@media (prefers-reduced-motion: no-preference) {
  .loader-ground { animation: ground 0.44s linear infinite; }
}
@keyframes ground { to { background-position-x: -30px; } }
.loader-text {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.loader-dots::after { content: "..."; display: inline-block; width: 3ch; text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .loader-dots::after { animation: dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
}
@keyframes dots { from { width: 0; } to { width: 4ch; } }


.castle-intro .button { align-self: flex-start; }

/* ---------- homepage: the Leap Kill box (opens leapkill.html) ---------- */
.lk-cell {
  position: relative;
  flex: 1;
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 30px var(--pad);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.lk-cell img { width: auto; max-width: 70%; max-height: 150px; transition: transform 0.25s ease; }
.lk-cell .label { position: absolute; top: 14px; left: var(--pad); }
.lk-go { position: absolute; right: var(--pad); bottom: 14px; font-family: var(--mono); font-size: 0.85rem; }
.lk-cell:hover, .lk-cell:focus-visible { background: var(--panel); color: var(--ink); outline: none; }
.lk-cell:hover img, .lk-cell:focus-visible img { transform: scale(1.06) rotate(-2deg); }
.lk-cell:hover .lk-go { background: var(--lime); }

/* ---------- Leap Kill page ---------- */
.lk-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.lk-hero-art {
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  border-right: 1px solid var(--line);
  background:
    linear-gradient(rgba(51, 38, 214, 0.12) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(51, 38, 214, 0.12) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--panel);
}
.lk-hero-art img { width: min(560px, 100%); height: auto; }
.lk-hero-text { padding: var(--pad); display: flex; flex-direction: column; gap: 18px; }
.lk-hero-text .label { margin: 0; }
.lk-hero-text .page-lede { margin: 0; }
.lk-facts { border: 1px solid var(--line); }
.lk-hero-runner { width: 110px; height: 110px; margin-top: auto; }
.lk-hero-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lk-hero-row .sprite-cells { border-right: 1px solid var(--line); }
.sprite-cell { margin: 0; padding: 22px 14px 14px; display: grid; justify-items: center; gap: 10px; }
.sprite-cell figcaption { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.sprite-cell .num { color: var(--violet); margin-right: 8px; }
.sprite {
  display: block;
  width: min(150px, 100%);
  aspect-ratio: 1;
  background: url(../assets/castle/hero-sheet.png) 0 0 / 800% 100% no-repeat;
}
.sprite-run { background-position-x: 28.5714%; }
.sprite-attack { background-position-x: 85.7143%; }
@media (prefers-reduced-motion: no-preference) {
  .sprite-idle { animation: spr-idle 0.6s steps(2) infinite; }
  .sprite-run { animation: spr-run 0.6s steps(4) infinite; }
  .sprite-attack { animation: spr-attack 0.3s steps(2) infinite; }
}
@keyframes spr-idle { from { background-position-x: 0%; } to { background-position-x: 28.5714%; } }
@keyframes spr-run { from { background-position-x: 28.5714%; } to { background-position-x: 85.7143%; } }
@keyframes spr-attack { from { background-position-x: 85.7143%; } to { background-position-x: 114.2857%; } }
.lk-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lk-gallery img { aspect-ratio: 4 / 5; }

@media (max-width: 760px) {
  .lk-hero, .lk-hero-row { grid-template-columns: minmax(0, 1fr); }
  .lk-hero-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .lk-hero-row .sprite-cells { border-right: 0; border-bottom: 1px solid var(--line); }
  .lk-hero-runner { display: none; }
  .lk-gallery { grid-template-columns: minmax(0, 1fr); }
  .lk-cell { min-height: 170px; }
}

/* hello + castle rooms: two rows that share their lines left and right */
.home-intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro top" "comic bottom";
}
.home-intro > .castle-intro { grid-area: intro; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); justify-content: center; }
.home-intro > .guide-top { grid-area: top; border-bottom: 1px solid var(--line); padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.home-intro > .lk-cell { grid-area: comic; border-right: 1px solid var(--line); }
.home-intro > .guide-bottom { grid-area: bottom; padding: 0; }
.guide-head { padding: var(--pad) 0 0; }
.guide-top .room-list li:last-child a { border-bottom: 0; }
.guide-bottom .room-list { border-top: 0; }
.guide-bottom .room-list li:last-child a { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "comic" "top" "bottom"; }
  .home-intro > .castle-intro, .home-intro > .lk-cell { border-right: 0; }
  .home-intro > .lk-cell { border-bottom: 1px solid var(--line); }
  .home-intro > .guide-top { border-bottom: 1px solid var(--line); }
  .guide-bottom .room-list li:last-child a { border-bottom: 0; }
}

/* ---------- the six rooms: each row doubles in height on hover and a little guy walks across ---------- */
.home-intro { --rh: 88px; }
.home-intro .room-list a {
  position: relative;
  overflow: hidden;
  height: var(--rh);
  align-items: center;
  font-size: 1.15rem;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.home-intro .room-list a > :not(.room-art) { position: relative; z-index: 1; }
.room-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(rgba(51, 38, 214, 0.14) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(51, 38, 214, 0.14) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--panel);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.room-art img { position: absolute; right: 8%; bottom: 0; height: 92%; width: auto; }
.room-runner {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 84px;
  height: 84px;
  transform: translateX(-90px);
}
.home-intro .room-list a:hover, .home-intro .room-list a:focus-visible { background: var(--panel); }
.home-intro .room-list a:hover .room-art, .home-intro .room-list a:focus-visible .room-art { opacity: 1; }
.home-intro .room-list a:hover b, .home-intro .room-list a:focus-visible b { background: var(--lime); }
@media (hover: hover) {
  .home-intro .room-list a:hover, .home-intro .room-list a:focus-visible { height: calc(var(--rh) * 2); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-intro .room-list a:hover .room-runner, .home-intro .room-list a:focus-visible .room-runner {
    animation: run 0.44s steps(4) infinite, walk-across 4.5s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-intro .room-list a { transition: none; }
  .room-runner { transform: translateX(40px); }
}
@keyframes walk-across { from { transform: translateX(-90px); } to { transform: translateX(calc(48vw)); } }
.home-intro > .guide-top { justify-content: flex-end; }
@media (max-width: 760px) {
  .home-intro { --rh: 64px; }
  .room-runner { width: 60px; height: 60px; }
  @keyframes walk-across { from { transform: translateX(-70px); } to { transform: translateX(100vw); } }
}
.guide-top .room-list { border-top: 0; }
.home-intro .room-list a { align-items: start; padding-top: 32px; padding-bottom: 0; }
.home-intro .room-list b { justify-self: start; padding: 0 4px; margin-left: -4px; }
.home-intro > .castle-intro { justify-content: flex-start; }
@media (max-width: 760px) { .home-intro .room-list a { padding-top: 20px; } }
.home-intro .room-list a { align-items: baseline; }

/* ---------- hello + Leap Kill on the left, the six rooms on the right ----------
   The two left boxes always get equal heights, and the rooms column fills the
   same height, so the line under 03 meets the line between the left boxes.
   Hovering a room makes it twice as tall and the other five give up 20% each,
   so nothing outside the list moves. */
.home-intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "intro rooms" "comic rooms";
}
.home-intro > .guide-all { grid-area: rooms; padding: 0; display: flex; min-height: calc(var(--rh) * 6); }
.guide-all .room-list { flex: 1; display: flex; flex-direction: column; border-top: 0; }
.guide-all .room-list li {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  transition: flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-intro .guide-all .room-list a,
.home-intro .guide-all .room-list a:hover,
.home-intro .guide-all .room-list a:focus-visible { flex: 1; height: auto; min-height: 0; }
.guide-all .room-list li:last-child a { border-bottom: 0; }
@media (hover: hover) and (min-width: 761px) {
  .guide-all .room-list:hover li { flex-grow: 0.8; }
  .guide-all .room-list li:hover { flex-grow: 2; }
}
@media (max-width: 760px) {
  .home-intro { grid-template-rows: none; grid-template-areas: "intro" "comic" "rooms"; }
  .home-intro > .guide-all { min-height: 0; }
  .guide-all .room-list li { flex: none; }
  .home-intro .guide-all .room-list a { height: var(--rh); }
}

/* the COSMICDROID wordmark: 25% smaller on desktop only */
@media (min-width: 761px) {
  .brand-word img { max-height: 49.5%; max-width: 75%; }
}

/* the footer friend sits straight on the violet, no card behind it */
.foot-critter .slot:has(img) { background: transparent; border: 0; }
.foot-critter .slot img { width: 100%; height: 100%; object-fit: contain; }

/* five rooms: three next to the hello box, two next to the Leap Kill box */
.home-intro { grid-template-rows: 3fr 2fr; }
.home-intro > .guide-all { min-height: calc(var(--rh) * 5); }
.home-intro > .lk-cell { min-height: 0; }
.lk-cell img { max-height: 110px; }
@media (hover: hover) and (min-width: 761px) {
  /* the hovered room doubles, the other four give up 25% each */
  .guide-all .room-list:hover li { flex-grow: 0.75; }
  .guide-all .room-list li:hover { flex-grow: 2; }
}
@media (max-width: 760px) {
  .home-intro { grid-template-rows: none; }
  .home-intro > .lk-cell { min-height: 170px; }
}

/* desktop header: the wordmark box ends exactly on a line of the grid paper
   below (8 squares of 48px from the left edge), and the wordmark sits centered in it */
@media (min-width: 761px) {
  .site-header { grid-template-columns: var(--hh) calc(8 * 48px + 1px - var(--hh)) minmax(0, 1fr) auto; }
  .brand-word { justify-content: center; padding-inline: 12px; }
  .brand-word img { max-width: 100%; }
}

/* the tip of the tower roof, poking out of the castle and over the menu bar */
.castle-hero { overflow: visible; }
.castle-spire {
  position: absolute;
  z-index: 45;              /* above the sticky menu bar */
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.castle-spire.is-hidden { opacity: 0; }
/* on phones the castle sits a little lower, so the tip only just touches the menu bar */
@media (max-width: 760px) {
  .castle-stage { padding-top: 36px; }
}

/* the top-left logo square */
.brand-icon { background: #b377ff; }

/* the castle sits on cream grid paper (the same cream as a hovered room row) */
.castle-hero {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--panel);
  --grid: rgba(51, 38, 214, 0.14);
}
.castle-frame canvas.castle-spire { position: absolute; border: 0; background: none; box-shadow: none; }
@media (max-width: 760px) {
  .castle-stage { padding-top: 32px; }
  .castle-frame { margin: 0 0 auto; }
}

/* "scroll ↓" stops with the purple banner right under the menu bar */
#more { scroll-margin-top: var(--header-h, var(--hh)); }

/* phone controls: stick on the left, GO in the middle (well away from JUMP), JUMP on the right */
.pad-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pad-mid .pad-enter { margin: 0; }
.pad-enter:not(.is-ready) { opacity: 0.35; pointer-events: none; }   /* only tappable at a door */
.pad-scroll br { display: none; }

/* ---------- footer: the laptop frog on light paper, and the rotating frog facts ---------- */
.site-footer { grid-template-columns: 200px minmax(0, 1fr) auto; }
.foot-critter { background: var(--paper); padding: 12px 16px; display: grid; place-items: center; }
.foot-critter .slot { width: 100%; }
.foot-facts { overflow: hidden; align-content: center; gap: 6px; min-height: 108px; }
.foot-facts .fact-label {
  font-family: var(--mono) !important; font-style: normal !important; font-weight: 400 !important; font-stretch: 100% !important;
  text-transform: lowercase !important; font-size: 0.75rem !important; letter-spacing: 0.04em; color: var(--muted) !important;
}
.fact-num { color: var(--violet); }
.foot-facts .fact-text {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 62ch;
  transition: transform 0.28s ease-in, opacity 0.28s ease-in, filter 0.28s ease-in;
}
.foot-facts.is-swapping .fact-text { transform: translateY(-14px); opacity: 0; filter: blur(3px); }
.foot-facts.is-in .fact-text { animation: fact-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes fact-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .foot-facts .fact-text { transition: none; animation: none !important; } }
@media (max-width: 760px) {
  .site-footer { grid-template-columns: 120px minmax(0, 1fr); }
  .foot-critter { padding: 8px 10px; }
  .foot-facts { min-height: 130px; }
}

/* frog facts: the label in the chunky headline font, the facts in mono */
.foot-facts .fact-label {
  font-family: var(--sans) !important;
  font-stretch: 125% !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
}
.foot-facts .fact-text {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--muted);
}
/* the laptop frog, 15% smaller */
.foot-critter .slot { width: 85%; }
@media (max-width: 760px) {
  .foot-facts .fact-label { font-size: 1.15rem !important; }
}

/* ---------- homepage WORKS header: the purple of the moving banner ---------- */
.works-block .bar, .works-block .deck-filters { background: var(--violet); }
.works-block .bar-title {
  color: var(--lime);
  -webkit-text-stroke: 1.5px var(--line);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--line);
}
.works-block .bar-link { color: var(--panel); font-weight: 700; }
.works-block .bar-link:hover { background: var(--lime); color: var(--ink); }
.works-block .deck-filters button {
  background: transparent;
  color: var(--panel);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.works-block .deck-filters button:hover { background: rgba(251, 249, 234, 0.16); }
.works-block .deck-filters button[aria-selected="true"] { background: var(--lime); color: var(--ink); }
.works-block .deck-filters button:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }

/* ---------- page headers (Works, About, Contact…): half the height ---------- */
.page-head-title { padding: 14px var(--pad); display: flex; align-items: center; }
.page-title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 3px 3px 0 var(--line);
}
.page-head-text { padding: 14px var(--pad); align-content: center; gap: 6px; }
.page-lede { font-size: 0.98rem; line-height: 1.45; max-width: 60ch; }
.page-head-text .crumb { font-size: 0.85rem; }
@media (max-width: 760px) {
  .page-head-title { padding: 12px 16px; }
  .page-head-text { padding: 12px 16px; }
  .page-lede { font-size: 0.92rem; }
}

/* frog facts: the "FROG FACT" label stays put at the top; the fact fills in below it.
   The box is tall enough for the longest fact, so nothing jumps when facts change. */
.foot-facts { align-content: start; padding-top: 22px; padding-bottom: 22px; min-height: 150px; }
@media (min-width: 761px) {
  /* the fact text stops at the middle of the screen */
  .foot-facts .fact-text { max-width: calc(50vw - 16px - 200px - 2 * var(--pad)); }
}
@media (max-width: 760px) {
  .foot-facts { min-height: 200px; padding-top: 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) { .foot-facts { min-height: 206px; } }

/* mail + Instagram square: no purple fill, same box, icons in the line color */
.socials { background: transparent; color: var(--line); }
.socials a { color: var(--line); }
.socials a:hover { color: var(--violet); }
/* the tower tip hides while the phone menu is open */
.site-header.is-open ~ main .castle-spire { visibility: hidden; }

/* the menu bar's color is driven by js/main.js on the homepage (light → purple while scrolling) */
.site-header { background: var(--hdr-bg, var(--paper)); }
.site-header .brand-word, .site-header .nav, .site-header .socials { background: transparent; }
@media (max-width: 760px) {
  .menu-toggle { background: var(--hdr-bg, var(--paper)); }
  .site-header.is-open .nav a { background: var(--paper); }
}

/* once the bar is purple, the menu links and the mail/Instagram icons turn plain yellow */
.nav a, .socials a { transition: color 0.35s ease; }
.site-header.is-purple .nav a { color: var(--lime); }
.site-header.is-purple .socials a { color: var(--lime); }
.site-header.is-purple .socials a:hover { color: var(--panel); }
.site-header.is-purple .nav a:hover,
.site-header.is-purple .nav a[aria-current="page"] { background-image: linear-gradient(var(--line), var(--line)); }
/* yellow menu links get a thin outline in the page's line color */
.site-header.is-purple .nav a { -webkit-text-stroke: 1px var(--line); paint-order: stroke fill; font-weight: 700; }

/* ---------- phone menu: all purple, and it drops down OVER the page ----------
   The bar keeps its height; the menu rows hang below it on top of whatever is
   there (the castle), so nothing on the page moves. */
@media (max-width: 760px) {
  .site-header.is-open {
    height: var(--hh);
    grid-template-rows: var(--hh) auto auto;
    background: #b377ff !important;
  }
  .site-header.is-open .menu-toggle { background: #b377ff; }
  .site-header.is-open .nav,
  .site-header.is-open .socials {
    position: relative;
    z-index: 2;
    background: #b377ff !important;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .site-header.is-open .nav a,
  .site-header.is-open .nav a:hover { background: #b377ff; }
  .site-header.is-open .nav a {
    color: var(--lime);
    font-weight: 700;
    -webkit-text-stroke: 1px var(--line);
    paint-order: stroke fill;
  }
  .site-header.is-open .nav a[aria-current="page"] { background: var(--violet); }
  .site-header.is-open .nav-num, .site-header.is-open .nav-arrow { color: var(--line); -webkit-text-stroke: 0; }
  .site-header.is-open .socials { border-bottom: 1px solid var(--line); box-shadow: 0 8px 0 rgba(51, 38, 214, 0.18); }
  .site-header.is-open .socials a { color: var(--lime); }
}

/* ---------- menu colors follow the scroll fade, text stays the normal blue ----------
   (overrides the purple/yellow experiments above) */
.site-header.is-purple .nav a {
  color: var(--ink);
  -webkit-text-stroke: 0;
  font-weight: 400;
}
.site-header.is-purple .nav a:hover,
.site-header.is-purple .nav a[aria-current="page"] { background-image: linear-gradient(var(--lime), var(--lime)); }
.site-header.is-purple .socials a { color: var(--line); }
.site-header.is-purple .socials a:hover { color: var(--violet); }
@media (max-width: 760px) {
  /* the open phone menu uses the same color the bar has at that scroll position:
     light at the top of the page, purple once you've scrolled down to the banner */
  .site-header.is-open,
  .site-header.is-open .menu-toggle,
  .site-header.is-open .nav,
  .site-header.is-open .socials,
  .site-header.is-open .nav a,
  .site-header.is-open .nav a:hover { background: var(--hdr-bg, var(--paper)) !important; }
  .site-header.is-open .nav a {
    color: var(--ink);
    -webkit-text-stroke: 0;
    font-weight: 400;
  }
  .site-header.is-open .nav a[aria-current="page"] { background: var(--lime) !important; }
  .site-header.is-open .nav-num { color: var(--muted); }
  .site-header.is-open .nav-arrow { color: var(--ink); }
  .site-header.is-open .socials a { color: var(--line); }
}

/* phones: hello, Leap Kill and the rooms stack full-width (a later desktop rule was overriding this) */
@media (max-width: 760px) {
  .home-intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "comic" "rooms"; }
  .home-intro > .castle-intro, .home-intro > .lk-cell, .home-intro > .guide-all { border-right: 0; }
  .home-intro > .lk-cell { border-bottom: 1px solid var(--line); }
}

/* ---------- Oct 15: Instagram icon matches the mail icon's height ---------- */
.socials svg.ic-ig { width: 20px; height: 20px; }
/* home room list: no numbers any more, just name / description / arrow */
.room-list a { grid-template-columns: minmax(0, 1fr) auto 1.4em; }

/* ---------- Oct 15: project page galleries (All the Cores, Juno) ---------- */
.gallery.gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery button { position: relative; display: block; }
.gallery-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-tall img { aspect-ratio: 3 / 4; }
/* artwork: show the whole drawing on the cream panel, never cropped */
.gallery-art button { background: var(--panel); }
.gallery-art img { aspect-ratio: 1 / 1; object-fit: contain; padding: clamp(14px, 3vw, 36px); }
.gallery-art.gallery-tall img { aspect-ratio: 3 / 4; }
.gallery .g-cap {
  position: absolute; left: 0; bottom: 0;
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px;
  background: var(--paper); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink);
}
.gallery .g-cap .num { color: var(--muted); }
.gallery button:hover .g-cap { background: var(--lime); }
.project-intro .project-intro-art { padding: 0; background: var(--line); }
.project-intro-art img { aspect-ratio: 3 / 4; object-fit: cover; max-height: 80vh; }
.project-intro .stack { align-content: space-between; }
.project-hero img { aspect-ratio: 16 / 9; object-position: center 30%; }
@media (max-width: 760px) {
  .gallery.gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-art.gallery-3 { grid-template-columns: minmax(0, 1fr); }
  .project-hero img { aspect-ratio: 1 / 1; }
}

/* ---------- Oct 15: about portrait (real photo) ---------- */
.about-portrait { padding: 0; background: var(--panel); }
.about-portrait img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; object-position: center 35%; display: block; }
@media (max-width: 760px) { .about-portrait img { aspect-ratio: 4 / 5; height: auto; } }

/* ---------- Oct 15: contact, the animated room instead of the info column ---------- */
.contact-room { padding: 0; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.contact-room video { width: 100%; height: 100%; max-height: 760px; object-fit: contain; display: block; }

/* ---------- Oct 15: phone footer — fact across the top, laptop frog + links underneath ---------- */
@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "facts facts" "critter links";
  }
  .foot-facts { grid-area: facts; min-height: 0; height: 116px; padding: 14px 16px; border-left: 0 !important; }
  .foot-facts .fact-text { max-width: none; }
  .foot-critter { grid-area: critter; border-top: 1px solid var(--line); padding: 10px; }
  .foot-critter .slot { width: 100%; }
  .foot-links { grid-area: links; grid-column: auto; border-top: 1px solid var(--line); border-left: 1px solid var(--line) !important; padding: 14px 16px; align-content: center; }
}
.project-intro .project-intro-art.gallery { display: block; }
.project-intro-art button { width: 100%; height: 100%; }
.project-intro-art img { width: 100%; height: 100%; min-height: 420px; }
/* phones: the sketch → process → final steps become a swipeable row */
@media (max-width: 760px) {
  .gallery-art.gallery-3 {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gallery-art.gallery-3::-webkit-scrollbar { display: none; }
  .gallery-art.gallery-3 button { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (min-width: 761px) { .project-intro-art img { aspect-ratio: auto; min-height: 0; height: min(72vh, 720px); } }
.gallery-art.gallery-2 img { aspect-ratio: 4 / 3; padding: clamp(10px, 2vw, 24px); }

/* ---------- Oct 15: contact — intro line above the form; on desktop the room animation fits the form's height ---------- */
.form-intro { margin: 0; font-size: 1.15rem; max-width: 46ch; }
@media (min-width: 761px) {
  .contact-room { position: relative; }
  .contact-room video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; padding: 24px; box-sizing: border-box; }
}

/* ---------- Oct 16: more gallery shapes for project pages ---------- */
.gallery.gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-free { align-items: stretch; }
.gallery-free button { background: var(--panel); display: grid; place-items: center; }
.gallery-free img { aspect-ratio: auto; height: auto; max-height: 70vh; object-fit: contain; padding: clamp(10px, 2vw, 24px); }
.gallery-hero { grid-template-columns: minmax(0, 1fr); }
.gallery-hero button { display: grid; place-items: center; }
.gallery-hero img { aspect-ratio: auto; width: auto; max-width: 100%; max-height: 86vh; }
.gallery-phones img { max-height: 620px; }
.gallery-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.project-intro.intro-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (min-width: 761px) {
  .intro-wide .project-intro-art img { aspect-ratio: auto; height: auto; max-height: min(72vh, 720px); object-fit: contain; background: var(--panel); }
}
@media (max-width: 1100px) { .gallery-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gallery.gallery-4, .gallery-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-free.gallery-3, .gallery-free.gallery-2 { grid-template-columns: minmax(0, 1fr); }
  .project-intro.intro-wide { grid-template-columns: minmax(0, 1fr); }
}

/* videos that loop on project pages (they only play while on screen) */
.vid-row { display: grid; gap: 1px; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.vid-cell { position: relative; margin: 0; background: #120d24; display: grid; place-items: center; overflow: hidden; }
.vid-cell video { display: block; width: 100%; height: 100%; max-height: 80vh; object-fit: contain; }
.vid-single .vid-cell video { max-height: 78vh; }
.vid-portrait .vid-cell video, .vid-portrait-row .vid-cell video { max-height: 78vh; width: auto; max-width: 100%; }
.vid-portrait-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vid-mixed { grid-template-columns: 2fr 1fr; }
.vid-mixed .vid-cell video { max-height: 70vh; }
@media (max-width: 760px) { .vid-mixed { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Oct 16: Big cats viewer — the whole section takes the color of the cat you're looking at ---------- */
.cats {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  background: var(--cat-bg); transition: background-color 0.45s ease;
  border-bottom: 1px solid var(--line);
}
.cats-stage { position: relative; padding: clamp(18px, 3vw, 40px); display: grid; place-items: center; border-right: 1px solid var(--line); min-width: 0; }
.cats-main { margin: 0; width: min(100%, 620px); aspect-ratio: 1 / 1; touch-action: pan-y; }
.cats-main img { width: 100%; height: 100%; object-fit: contain; display: block; border: 1px solid var(--line); box-shadow: 10px 10px 0 var(--line); background: var(--cat-bg); }
.cats-main img.is-pop { animation: cat-pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.35); }
@keyframes cat-pop { from { transform: scale(0.94) rotate(-1.5deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
.cats-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--line);
  font: 700 1.1rem/1 var(--mono); cursor: pointer;
}
.cats-arrow:hover { background: var(--lime); }
.cats-prev { left: 12px; } .cats-next { right: 12px; }
.cats-hud { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.cats-hud > * { pointer-events: auto; }
.cats-count, .cats-shuffle { background: var(--panel); border: 1px solid var(--line); padding: 6px 10px; font: 400 0.85rem/1 var(--mono); color: var(--ink); }
.cats-count b { font-weight: 700; }
.cats-shuffle { cursor: pointer; }
.cats-shuffle:hover { background: var(--lime); }
.cats-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line);
  align-content: start; max-height: calc(min(620px, 100vw) + 2 * clamp(18px, 3vw, 40px)); overflow-y: auto; scrollbar-width: thin;
}
.cat-thumb { padding: 0; border: 0; background: var(--c); cursor: pointer; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease, opacity 0.25s; opacity: 0.85; }
.cat-thumb:hover img, .cat-thumb:focus-visible img { transform: scale(1.12); opacity: 1; }
.cat-thumb.is-on { outline: 3px solid var(--lime); outline-offset: -3px; z-index: 1; }
.cat-thumb.is-on img { opacity: 1; }
@media (max-width: 760px) {
  .cats { grid-template-columns: minmax(0, 1fr); }
  .cats-stage { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 16px 60px; }
  .cats-arrow { top: auto; bottom: 12px; transform: none; width: 40px; height: 36px; }
  .cats-prev { left: auto; right: 64px; }
  .cats-hud { right: 112px; }
  .cats-strip { display: flex; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: none; }
  .cats-strip::-webkit-scrollbar { display: none; }
  .cat-thumb { flex: 0 0 72px; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cats-main img.is-pop { animation: none; } .cats { transition: none; } }
/* facts: the last box stretches to fill its row, so no empty blue gap is left */
/* (replaced Oct 20: see facts rules at the end) */
/* big cats strip: tiles float on the cat's color instead of a blue grid */
.cats-strip { background: transparent; gap: 6px; padding: 10px; }
.cat-thumb { border: 1px solid var(--line); }
@media (max-width: 760px) { .cats-strip { padding: 10px 12px; } }
/* captions on videos match the gallery captions */
.vid-cell .g-cap {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px; background: var(--paper); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink);
}
.vid-cell .g-cap .num { color: var(--muted); }

/* ---------- Oct 16: home "my comic" box — a photo of the comic fades in behind the title on hover ---------- */
.lk-cell { overflow: hidden; isolation: isolate; }
.lk-cell::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(../assets/img/leapkill/hover.webp) center 60% / cover no-repeat;
  opacity: 0; transform: scale(1.08); transition: opacity 0.4s ease, transform 0.6s ease;
}
.lk-cell:hover::before, .lk-cell:focus-visible::before { opacity: 0.35; transform: scale(1); }
@media (hover: none) { .lk-cell::before { opacity: 0.18; transform: none; } }

/* ---------- Oct 16: Leap Kill "packed by hand" — speed-ramped video in a camcorder frame ---------- */
.lk-pack {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 5vw, 80px); padding: clamp(36px, 6vw, 90px) clamp(20px, 5vw, 80px);
  background:
    linear-gradient(rgba(179, 119, 255, 0.13) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(179, 119, 255, 0.13) 1px, transparent 1px) 0 0 / 48px 48px,
    #120d24;
  color: #efe3cc; border-bottom: 1px solid var(--line); overflow: hidden;
}
.lk-pack-screen { display: grid; place-items: center; }
.lk-pack-frame {
  position: relative; width: min(100%, 400px); aspect-ratio: 9 / 16; max-height: 78vh;
  border: 3px solid var(--lime); box-shadow: 12px 12px 0 var(--violet), 0 0 60px rgba(230, 244, 60, 0.12);
  transform: rotate(-2deg); transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2); background: #000; overflow: hidden;
}
.lk-pack-frame:hover { transform: rotate(0deg) scale(1.02); }
.lk-pack-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-pack-scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55);
}
.lk-pack-rec, .lk-pack-speed, .lk-pack-time {
  position: absolute; z-index: 1; font-family: "VT323", var(--mono); font-size: 1.35rem; line-height: 1; color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 2px 2px 0 rgba(0, 0, 0, 0.6); letter-spacing: 0.04em; text-transform: uppercase;
}
.lk-pack-rec { top: 14px; left: 14px; display: flex; align-items: center; gap: 6px; }
.lk-pack-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; }
@media (prefers-reduced-motion: no-preference) { .lk-pack-rec i { animation: rec-blink 1s steps(2) infinite; } }
@keyframes rec-blink { 50% { opacity: 0; } }
.lk-pack-speed { top: 12px; right: 12px; padding: 4px 7px 2px; background: rgba(0, 0, 0, 0.45); transition: background-color 0.2s, color 0.2s; }
.lk-pack-speed.is-fast { background: var(--lime); color: #120d24; text-shadow: none; }
.lk-pack-time { bottom: 22px; left: 14px; }
.lk-pack-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, 0.18); z-index: 1; }
.lk-pack-bar span { display: block; height: 100%; width: 0; background: var(--lime); }
.lk-pack-kicker { font-family: var(--mono); font-size: 0.85rem; color: var(--lime); margin: 0 0 10px; text-transform: lowercase; }
.lk-pack-title {
  margin: 0 0 22px; font-family: var(--sans); font-stretch: 125%; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.92; color: var(--lime);
  text-shadow: 4px 4px 0 var(--violet);
}
.lk-pack-text > p:not(.lk-pack-kicker) { max-width: 42ch; font-size: 1.08rem; line-height: 1.6; color: #efe3cc; margin: 0 0 24px; }
.lk-pack-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(179, 119, 255, 0.4); max-width: 420px; }
.lk-pack-list li {
  display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(179, 119, 255, 0.4);
  font-family: var(--mono); font-size: 0.95rem; transition: color 0.25s, padding-left 0.25s;
}
.lk-pack-list li b { color: var(--logo, #b377ff); font-weight: 700; }
.lk-pack-list li:hover { color: var(--lime); padding-left: 8px; }
@media (max-width: 760px) {
  .lk-pack { grid-template-columns: minmax(0, 1fr); padding: 40px 16px 48px; }
  .lk-pack-frame { width: min(78vw, 340px); }
  .lk-pack-text { order: -1; }
}

/* ---------- Oct 16: Frog Jump tilt warning + Instagram icon 5% bigger ---------- */
.intro-card .intro-warn { color: #d9485f; font-size: 2.6rem; text-transform: uppercase; }
.intro-card .intro-skip { margin-top: 6px; }
.socials svg.ic-ig { width: 21px; height: 21px; }

/* ---------- Oct 18: drawn castle — on phones the castle section hugs the castle + controls ---------- */
@media (max-width: 760px) {
  .castle-hero { height: auto; min-height: 0; }
  .castle-stage { height: auto; justify-content: flex-start; padding-bottom: 22px; }
}

/* ---------- Oct 20: drawn castle — just the drawing on the grid paper (no card, border or shadow), nudged up into the menu ---------- */
.castle-frame::before { display: none; }
.castle-frame canvas { background: none; border: 0; }
.castle-frame { top: -16px; } /* (not a transform: that would put the tower tip behind the menu bar) */
@media (max-width: 760px) { .castle-pad { margin-top: -16px; } }

/* ---------- Oct 20 ---------- */
/* Leap Kill: just the video, nothing added */
.lk-pack { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: clamp(20px, 4vw, 40px) 16px; background: var(--paper); gap: 0; }
.lk-pack video { display: block; width: auto; max-width: 100%; max-height: 80vh; }
/* Big cats: no blue shadow behind the big cat */
.cats-main img { box-shadow: none; }
/* Contact: the room animation a bit smaller */
@media (min-width: 761px) { .contact-room video { padding: 56px; } }
@media (max-width: 760px) { .contact-room video { max-width: 82%; margin: 0 auto; } }
/* Instagram icon 2% bigger */
.socials svg.ic-ig { width: 21.4px; height: 21.4px; }
/* Phones: drawings on project pages use the full width (sketch / final / line art were tiny) */
@media (max-width: 760px) {
  .gallery-art.gallery-2, .gallery-art.gallery-4, .gallery-art.gallery-hero { grid-template-columns: minmax(0, 1fr); }
  .gallery-art img, .gallery-art.gallery-2 img { padding: 12px; }
  .gallery-art.gallery-3 button { flex-basis: 88%; }
}

/* portrait drawings stay portrait (the 4:3 box is only for the landscape Juno designs) */
.gallery-art.gallery-2.gallery-tall img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) {
  /* phones: every drawing at its own shape, full width */
  .gallery-art img, .gallery-art.gallery-2 img, .gallery-art.gallery-tall img, .gallery-art.gallery-2.gallery-tall img { aspect-ratio: auto; height: auto; }
}
/* facts: lines between the boxes, and no empty blue box when a row isn't full */
.facts { gap: 0; background: none; }
.facts div { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
@media (max-width: 760px) {
  /* 2-up photo grids with an odd number of photos: the last one takes the full row (no empty box) */
  .gallery-photo.gallery-3 button:last-child:nth-child(odd), .gallery-photo.gallery-4 button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Germania One for every big title, solid blue (owner's Oct 20 design) ---------- */
.page-title, .bar-title, .castle-hello, .cta p, .proj-title {
  font-family: "Germania One", var(--sans);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: var(--line);
}
.page-title { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 0.95; }
.bar-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
/* titles sitting on the purple/violet blocks keep their yellow so they stay readable */
.works-block .bar-title, .cta p { color: var(--lime); text-shadow: none; -webkit-text-stroke: 0; }

/* ---------- purple menu bar with yellow links on every page except the castle home ---------- */
body.bar-purple .site-header { --hdr-bg: #b377ff; background: #b377ff; }
body.bar-purple .site-header .socials { background: #9d5cf5; }
body.bar-purple .site-header .nav a {
  color: var(--lime);
  font-weight: 700;
  -webkit-text-stroke: 1px var(--line);
  paint-order: stroke fill;
}
body.bar-purple .site-header .nav a:hover,
body.bar-purple .site-header .nav a[aria-current="page"] { background-image: linear-gradient(var(--line), var(--line)); }
body.bar-purple .site-header .nav-num,
body.bar-purple .site-header .nav-arrow { color: var(--line); -webkit-text-stroke: 0; }
body.bar-purple .site-header .socials a { color: var(--lime); }
body.bar-purple .site-header .socials a:hover { color: var(--panel); }
@media (max-width: 760px) {
  body.bar-purple .site-header .menu-toggle { color: var(--lime); background: #b377ff; }
  body.bar-purple .site-header.is-open,
  body.bar-purple .site-header.is-open .menu-toggle,
  body.bar-purple .site-header.is-open .nav,
  body.bar-purple .site-header.is-open .nav a { background: #b377ff !important; }
  body.bar-purple .site-header.is-open .socials { background: #9d5cf5 !important; }
  body.bar-purple .site-header.is-open .nav a[aria-current="page"] { background: var(--violet) !important; }
}

/* ---------- individual work pages (owner's Oct 20 design) ---------- */
.proj-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.proj-title { margin: 0; padding: 18px var(--pad); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.95; align-self: center; }
.proj-back {
  display: flex; align-items: center; gap: 14px;
  padding: 14px calc(var(--pad) + 8px);
  border-left: 1px solid var(--line);
  color: var(--line); text-decoration: none;
  font: 700 1.05rem/1 var(--mono);
}
.proj-back svg { width: 64px; height: 36px; transition: transform 0.2s ease; }
.proj-back:hover { background: var(--lime); }
.proj-back:hover svg { transform: translateX(-6px); }

.proj-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "art text" "art facts";
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.proj-intro-art { grid-area: art; display: block; border-right: 1px solid var(--line); min-height: 100%; }
.proj-intro-art button { display: block; width: 100%; height: 100%; background: #fff; }
.proj-intro-art img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; min-height: 340px; max-height: calc(100vh - 200px); }
.proj-intro-text { grid-area: text; padding: clamp(20px, 3vw, 44px) var(--pad); align-self: start; }
.proj-intro-text p { max-width: 60ch; }
.proj-facts { grid-area: facts; display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.proj-facts > div { padding: 18px var(--pad); }
.proj-facts > div + div { border-left: 1px solid var(--line); }
.proj-facts dt { font: 700 1.05rem/1.2 var(--mono); color: var(--line); margin-bottom: 6px; }
.proj-facts dd { margin: 0; font: 400 1rem/1.3 var(--mono); color: var(--ink); text-transform: lowercase; }

.proj-band { height: 46px; border-bottom: 1px solid var(--line); background: var(--paper); }

/* galleries on work pages sit flush: white behind, no padding, pictures at their own shape */
.proj-block { padding: 0 !important; border-bottom: 1px solid var(--line); }
.proj-block .gallery { gap: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff; }
.proj-block .gallery button { background: #fff; box-shadow: 0 0 0 0.5px var(--line); }
.proj-block .gallery img { aspect-ratio: auto !important; height: auto; object-fit: contain; padding: 0 !important; }
.proj-block .gallery-art button { background: #fff; }

@media (max-width: 760px) {
  .proj-back { display: none; }
  .proj-head { grid-template-columns: 1fr; }
  .proj-title { padding: 16px; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .proj-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "art facts" "text text";
  }
  .proj-intro-art { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .proj-intro-art img { min-height: 0; aspect-ratio: 1 / 1; }
  .proj-facts { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; border-top: 0; border-bottom: 1px solid var(--line); gap: 10px; padding: 10px; }
  .proj-facts > div { border: 4px solid #b377ff !important; padding: 10px 12px; background: var(--panel); align-content: center; display: grid; }
  .proj-facts dt { font-size: 0.95rem; }
  .proj-facts dd { font-size: 0.9rem; }
  .proj-intro-text { padding: 18px 16px; }
  .proj-band { height: 32px; }
}

/* ---------- Oct 20 (b): fixes from the owner's screenshots ---------- */
/* About / Contact: the line in the title row and the line below both sit in the middle of the page */
@media (min-width: 761px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* purple menu bar: the menu words go back to the normal dark blue (icons stay yellow) */
body.bar-purple .site-header .nav a {
  color: var(--ink);
  font-weight: 400;
  -webkit-text-stroke: 0;
}
body.bar-purple .site-header .nav a:hover,
body.bar-purple .site-header .nav a[aria-current="page"] { background-image: linear-gradient(var(--lime), var(--lime)); }
@media (max-width: 760px) {
  body.bar-purple .site-header.is-open .nav a { color: var(--ink); -webkit-text-stroke: 0; font-weight: 400; }
}
/* purple banner above the frog facts: text on 2 lines, same height as the frog fact row (desktop) */
@media (min-width: 761px) {
  .cta { min-height: 150px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .cta p { max-width: none; font-size: clamp(1.6rem, 2.7vw, 2.6rem); line-height: 1.05; max-width: 30ch; }
}

/* ---------- work pages, take 2: follows the owner's reference exactly ---------- */
.proj-title { text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3rem); padding: 20px var(--pad); }
.proj-back { gap: 10px; padding: 14px 18px; font-size: 1rem; }
.proj-back svg { width: 46px; height: 26px; }
.proj-intro {
  grid-template-columns: minmax(0, 24%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "art text" "art facts";
  background: var(--paper);
}
.proj-intro-art { border-right: 0; }
.proj-intro-art img { aspect-ratio: 1 / 1; height: 100%; min-height: 0; max-height: none; }
.proj-intro-text { padding: 14px var(--pad) 0; max-width: none; }
.proj-intro-text p { font-family: var(--mono); font-size: 0.98rem; line-height: 1.4; max-width: 62ch; margin: 0; }
.proj-facts {
  justify-self: start; align-self: start;
  margin: 14px var(--pad) 14px;
  grid-template-columns: repeat(2, minmax(0, 182px));
  border: 1px solid var(--line);
}
.proj-facts > div { padding: 12px 18px; }
.proj-facts dt { font-size: 1rem; margin-bottom: 8px; }
.proj-band { height: 16px; }
.proj-block .gallery-art button:nth-child(3n) { background: var(--panel); }

@media (max-width: 760px) {
  .proj-title { padding: 14px 12px; font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .proj-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art facts" "text text"; }
  .proj-intro-art { border-bottom: 1px solid var(--line); border-right: 0; }
  .proj-facts {
    align-self: end; justify-self: stretch;
    margin: 0; padding: 0; gap: 0;
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    border: 0; border-bottom: 1px solid var(--line);
    margin-left: 18px;
  }
  .proj-facts > div { border: 1px solid var(--line) !important; border-bottom: 0 !important; border-right: 0 !important; padding: 10px 12px; background: var(--paper); }
  .proj-facts dt { font-size: 0.82rem; margin-bottom: 4px; }
  .proj-facts dd { font-size: 0.78rem; }
  .proj-intro-text { padding: 12px 12px 40px; }
  .proj-intro-text p { font-size: 0.78rem; line-height: 1.45; }
  .proj-band { height: 12px; }
}
@media (max-width: 760px) {
  /* work pages on phones: one picture per row, like the reference */
  .proj-block .gallery { grid-template-columns: minmax(0, 1fr) !important; }
  .proj-block .gallery button { grid-column: auto !important; }
}

/* ---------- Oct 20 (c) ---------- */
/* Works / About / Contact: the title row is exactly as tall as the menu bar */
.page-head-title, .page-head-text { min-height: var(--hh); }
@media (min-width: 761px) {
  .page-head-title, .page-head-text { height: var(--hh); padding-top: 0; padding-bottom: 0; }
  .page-head-text { overflow: hidden; }
  .page-title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
}
@media (max-width: 760px) {
  .page-head-title { height: var(--hh); padding-top: 0; padding-bottom: 0; }
  .page-title { font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1; }
}
/* purple menu bar: the page you're on is yellow and bold, no yellow block behind it */
body.bar-purple .site-header .nav a:hover,
body.bar-purple .site-header .nav a[aria-current="page"] { background-image: none; }
body.bar-purple .site-header .nav a[aria-current="page"] { color: var(--lime); font-weight: 700; }
body.bar-purple .site-header .nav a:hover { color: var(--lime); }
@media (max-width: 760px) {
  body.bar-purple .site-header.is-open .nav a[aria-current="page"] { background: #b377ff !important; color: var(--lime); font-weight: 700; }
}

/* ---------- work pages: pictures and videos at most ~half the size they had (desktop) ---------- */
@media (min-width: 761px) {
  .proj-block .gallery img { max-height: 470px; width: 100%; object-fit: contain !important; }
  .proj-block video, .proj-block .vid-cell video { max-height: 470px !important; object-fit: contain; }
  .proj-block .vid-cell { background: #fff; }
}
@media (min-width: 761px) { .cats-main { width: min(100%, 470px); } }

/* ---------- Oct 20 (d) ---------- */
/* work pages: title in Title Case, and no white behind pictures — the same light blue as the page */
.proj-title { text-transform: capitalize; }
.proj-block .gallery,
.proj-block .gallery button,
.proj-block .gallery-art button,
.proj-block .gallery-art button:nth-child(3n),
.proj-block .vid-cell,
.proj-intro-art button { background: var(--paper) !important; }
/* About / Contact: the middle line of the title row and the one below are the same line
   (both drawn on the right edge of the left column) */
@media (min-width: 761px) {
  .split > .split-cell + .split-cell { border-left: 0; }
  .split > .split-cell:first-child { border-right: 1px solid var(--line); }
}
/* contact: the frog's room animation 10% bigger */
.contact-room video { scale: 1.1; }

/* ---------- Oct 20 (e) ---------- */
/* About: the cosmicdroid logo over the top of the photo, half see-through */
.about-portrait { position: relative; overflow: hidden; }
.about-logo { position: absolute; left: 50%; top: 4%; width: 72%; height: auto !important; max-height: none !important; transform: translateX(-50%); opacity: 0.5; pointer-events: none; object-fit: contain !important; }

/* work pages on phones: same gap on both sides of the type/year boxes, and bigger text */
@media (max-width: 760px) {
  .proj-facts { margin-left: 14px; margin-right: 14px; }
  .proj-facts > div { border: 1px solid var(--line) !important; }
  .proj-facts > div + div { border-top: 0 !important; }
  .proj-facts { border-bottom: 0; margin-bottom: 14px; }
  .proj-facts dt { font-size: 0.95rem; }
  .proj-facts dd { font-size: 0.9rem; }
  .proj-intro-text { padding: 16px 14px 28px; }
  .proj-intro-text p { font-size: 0.92rem; line-height: 1.55; }
  .proj-title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
}
@media (min-width: 761px) {
  .proj-intro-text p { font-size: 1.02rem; line-height: 1.5; }
}

/* ---------- Oct 20 (f) ---------- */
/* About: the logo over the photo 15% smaller */
.about-logo { width: 61%; }
/* loading screen: cosmicdroid's hooded frog animation */
.loader-art { display: block; width: 180px; height: auto; }
/* menu links everywhere (castle home too): on hover the word turns yellow, no yellow block */
.nav a:hover, .site-header.is-purple .nav a:hover { background-image: none !important; color: var(--lime); }

/* ---------- Oct 21 ---------- */
/* phone header: one thin line between the wordmark and the menu button (it was two lines side by side) */
@media (max-width: 760px) { .menu-toggle { border-left: 0; } }
/* castle home: hovered menu words turn yellow with a thin dark blue outline so they stay readable */
@media (min-width: 761px) {
  body:not(.bar-purple) .site-header .nav a:hover {
    color: var(--lime);
    -webkit-text-stroke: 1px var(--ink);
    paint-order: stroke fill;
    font-weight: 700;
  }
}

/* ---------- Oct 22: Works page = a grid of cards ----------
   cards rise in one after another as they come on screen; on hover a card lifts and tilts toward
   the pointer, gets a hard blue shadow, the picture zooms a little and the name strip turns yellow */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3.2vw, 56px);
  padding: clamp(24px, 3.2vw, 56px);
  perspective: 1200px;
}
.wg-card {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--panel);
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 0 0 var(--line);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
  animation: none;
}
.wg-card.is-in { animation: wg-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms) both; }
@keyframes wg-rise {
  from { opacity: 0; transform: translateY(36px) scale(0.96); clip-path: inset(0 0 100% 0); }
  60% { clip-path: inset(0 0 0 0); }
  to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
}
.wg-card.is-in { opacity: 1; }
.wg-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.wg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; }
/* a soft light that follows the pointer across the picture */
.wg-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 55%);
}
.wg-num, .wg-go {
  position: absolute; top: 10px; z-index: 2;
  font: 0.72rem/1 var(--mono); padding: 4px 6px 3px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.wg-num { left: 10px; }
.wg-go { right: 10px; background: var(--lime); transform: translateY(-4px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
.wg-go.wg-soon { background: var(--panel); }
.wg-label { display: grid; gap: 4px; padding: 12px 14px; background: var(--panel); transition: background 0.25s ease; }
.wg-label b { font: 700 1rem/1.15 var(--sans); }
.wg-meta { font: 0.74rem/1.2 var(--mono); color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }
.wg-card:hover, .wg-card:focus-visible { --lift: -8px; box-shadow: 10px 12px 0 var(--line); outline: none; }
.wg-card:hover .wg-img img, .wg-card:focus-visible .wg-img img { transform: scale(1.07); }
.wg-card:hover .wg-img::after { opacity: 1; }
.wg-card:hover .wg-go, .wg-card:focus-visible .wg-go { opacity: 1; transform: none; }
.wg-card:hover .wg-label, .wg-card:focus-visible .wg-label { background: var(--lime); }
.wg-card:hover .wg-meta, .wg-card:focus-visible .wg-meta { max-height: 2.6em; opacity: 1; }
.wg-card.is-last { box-shadow: 6px 6px 0 var(--violet); }
/* switching filters: the old cards drop away */
.works-grid.is-leaving .wg-card { transition: opacity 0.24s ease, transform 0.24s ease; opacity: 0; transform: translateY(18px) scale(0.97); animation: none; }
@media (max-width: 1100px) { .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
  .wg-label { padding: 9px 10px; }
  .wg-label b { font-size: 0.86rem; }
  .wg-go { opacity: 1; transform: none; }
  .wg-meta { max-height: 2.6em; opacity: 1; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-card, .wg-card.is-in { opacity: 1; animation: none; transform: none; }
  .wg-img img { transition: none; }
}

/* ---------- Oct 22: menu hover, take 3 ----------
   castle home, light bar: hovered word or icon turns yellow with a thin blue outline (normal weight)
   home once the bar has turned purple, and every other page: just yellow, no outline */
.site-header .nav a:hover { font-weight: 400 !important; background-image: none !important; }
body:not(.bar-purple) .site-header:not(.is-purple) .nav a:hover {
  color: var(--lime); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
}
body:not(.bar-purple) .site-header.is-purple .nav a:hover { color: var(--lime); -webkit-text-stroke: 0; }
/* the mail and Instagram icons: blue, yellow on hover (outlined while the home bar is light) */
.site-header .socials a { color: var(--line); transition: color 0.2s ease, filter 0.2s ease; }
body.bar-purple .site-header .socials a { color: var(--ink); }
.site-header .socials a:hover, body.bar-purple .site-header .socials a:hover { color: var(--lime); }
body:not(.bar-purple) .site-header:not(.is-purple) .socials a:hover {
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}
.wg-card.is-done { animation: none; opacity: 1; }

/* ---------- Works grid, calmer (owner, Oct 22): on hover the picture zooms a little and the
   name strip shows the type/year — no lift, no tilt, no hard shadow, no light ---------- */
.wg-card, .wg-card:hover, .wg-card:focus-visible { transform: none !important; box-shadow: none !important; --lift: 0; }
.wg-card.is-last { box-shadow: none !important; }
.wg-img::after { display: none; }
@keyframes wg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wg-card.is-in { animation-duration: 0.5s; }

/* ---------- work pages, new "story" layout (testing on Terp Wizard: the lab) ----------
   big finished piece first, a drag-to-compare sketch/final, photos in a magazine layout, a big next-project card */
.st-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.st-hero-art { background: var(--panel); border-right: 1px solid var(--line); display: grid; place-items: center; padding: clamp(20px, 3vw, 48px); }
.st-hero-art button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.st-hero-art img { display: block; width: auto; max-width: 100%; max-height: min(78vh, 760px); height: auto; aspect-ratio: auto !important; object-fit: contain; }
.st-hero-text { padding: clamp(24px, 4vw, 64px); display: flex; flex-direction: column; gap: 22px; align-self: center; }
.st-line { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 "Germania One", var(--sans); color: var(--line); max-width: 20ch; }
.st-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-tags li { font: 0.8rem/1 var(--mono); padding: 6px 9px 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.st-tags li:first-child { background: var(--lime); }
.st-copy p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.6; max-width: 52ch; color: var(--ink); }

.st-block { padding: clamp(32px, 5vw, 80px) var(--pad); border-bottom: 1px solid var(--line); }
.st-h { margin: 0 0 6px; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 "Germania One", var(--sans); color: var(--line); text-align: center; }
.st-sub { margin: 0 auto 26px; font: 0.85rem/1.4 var(--mono); color: var(--muted); text-align: center; }

/* drag to compare */
.compare { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 778 / 1000; border: 1px solid var(--line); background: var(--panel); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--line); pointer-events: none; }
.compare-knob { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid var(--line); background: var(--lime); color: var(--ink); font: 700 1rem/1 var(--mono); box-shadow: 3px 3px 0 var(--line); }
.compare-tag { position: absolute; top: 12px; font: 0.75rem/1 var(--mono); padding: 5px 7px 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); pointer-events: none; }
.compare-tag-l { left: 12px; }
.compare-tag-r { right: 12px; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.compare-range:focus-visible + * , .compare:focus-within .compare-knob { outline: 2px solid var(--violet); outline-offset: 2px; }

/* photos: one big, three around it */
.st-shots { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 300px)); gap: 12px; max-width: 1100px; margin: 0 auto; }
.st-shot { padding: 0; border: 1px solid var(--line); background: var(--panel); overflow: hidden; cursor: zoom-in; display: block; }
.st-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.st-shot:hover img { transform: scale(1.04); }
.st-shot-1 { grid-row: 1 / 3; }
.st-shot-4 { grid-column: 2 / 4; }
.st-shot-4 img { object-position: center 30%; }

/* next project */
.st-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; min-height: 260px; padding: clamp(24px, 4vw, 56px) var(--pad); text-decoration: none; color: var(--lime); background: var(--violet); overflow: hidden; border-bottom: 1px solid var(--line); }
.st-next img { position: absolute; right: var(--pad); top: 50%; width: clamp(140px, 18vw, 240px); aspect-ratio: 1 / 1; object-fit: cover; transform: translateY(-50%) rotate(4deg); border: 1px solid var(--line); box-shadow: 8px 8px 0 var(--line); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.st-next:hover img { transform: translateY(-50%) rotate(0deg) scale(1.04); }
.st-next-label { grid-column: 1; font: 0.85rem/1 var(--mono); color: var(--panel); }
.st-next-title { grid-column: 1; font: 400 clamp(2.2rem, 5vw, 4rem)/1 "Germania One", var(--sans); }
.st-next-tag { grid-column: 1; font: 0.8rem/1 var(--mono); color: var(--panel); opacity: 0.85; }
.st-next > span { position: relative; z-index: 1; padding-right: clamp(160px, 22vw, 280px); }

@media (max-width: 760px) {
  .st-hero { grid-template-columns: minmax(0, 1fr); }
  .st-hero-art { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .st-hero-art img { max-height: 70vh; }
  .st-hero-text { padding: 22px 16px 28px; gap: 16px; }
  .st-copy p { font-size: 0.98rem; }
  .st-block { padding: 32px 16px; }
  .st-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .st-shot-1 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .st-shot-2, .st-shot-3 { aspect-ratio: 3 / 4; }
  .st-shot-4 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .st-next { min-height: 200px; }
  .st-next > span { padding-right: 130px; }
  .st-next img { width: 110px; }
}
.st-hero-art.gallery { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
.st-hero-art button { justify-self: center; }
.st-shots.gallery { background: none !important; }

/* ---------- Oct 22 (b) ---------- */
/* work pages: "All works" is a real button, like "See my works" on the home page */
.proj-back { display: flex; align-items: center; padding: 0 var(--pad); border-left: 1px solid var(--line); background: none !important; }
.proj-back .button { white-space: nowrap; }
/* home "enter ↗" tag on the Leap Kill cell: room on the sides like on top */
.lk-go { padding: 5px 9px 4px; }
/* purple bar: the mail / Instagram cell is the same purple as the rest of the bar */
body.bar-purple .site-header .socials { background: #b377ff; }
@media (max-width: 760px) { body.bar-purple .site-header.is-open .socials { background: #b377ff !important; } }
/* contact on phones: some air above and below the frog's room */
@media (max-width: 760px) { .contact-room { padding: 44px 0 !important; } }
/* "email copied" note on mail links */
a[href^="mailto:"] { position: relative; }
.copied-note { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font: 0.72rem/1 var(--mono); padding: 5px 8px 4px; background: var(--lime); color: var(--ink); border: 1px solid var(--line); pointer-events: none; z-index: 50; animation: copied-pop 0.2s ease; }
@keyframes copied-pop { from { opacity: 0; transform: translate(-50%, 4px); } }

/* ---------- BENTO work pages (Oct 22) ----------
   like the Leap Kill page: boxes that fit together with thin lines and no gaps.
   Desktop: 6 columns of square units. Phones: 2 columns, each box with its own shape. */
.bento {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(100cqw / 6), auto);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.b-cell { grid-column: var(--c); grid-row: var(--r); position: relative; margin: 0; padding: 0; border: 0; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper); display: block; text-align: left; color: var(--ink); }
button.b-cell { cursor: zoom-in; }
.b-img img, .b-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.b-art { background: var(--panel); }
.b-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: clamp(10px, 1.6vw, 26px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
button.b-cell:hover img { transform: scale(1.04); }
.b-cap { position: absolute; left: 0; bottom: 0; z-index: 1; font: 0.72rem/1 var(--mono); padding: 6px 8px 5px; background: var(--panel); color: var(--ink); border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
button.b-cell:hover .b-cap { background: var(--lime); }
.b-text { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.2vw, 34px); }
.b-copy p { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.55; max-width: 56ch; }
.b-copy b { font-weight: 700; }
.b-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--line); max-width: 380px; }
.b-facts > div { padding: 10px 14px; }
.b-facts > div + div { border-left: 1px solid var(--line); }
.b-facts dt { font: 700 0.95rem/1.2 var(--mono); color: var(--line); margin-bottom: 6px; }
.b-facts dd { margin: 0; font: 0.92rem/1.3 var(--mono); }
.b-next { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px; background: var(--violet); color: var(--lime); text-decoration: none; }
.b-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.b-next:hover img { opacity: 0.6; transform: scale(1.05); }
.b-next-label, .b-next-title { position: relative; z-index: 1; }
.b-next-label { font: 0.75rem/1 var(--mono); color: var(--panel); }
.b-next-title { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1 "Germania One", var(--sans); text-shadow: 2px 2px 0 var(--line); }
@media (max-width: 760px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .b-cell { grid-column: span var(--m); grid-row: auto; aspect-ratio: var(--ar); }
  .b-text { aspect-ratio: auto; padding: 18px 16px 20px; }
  .b-copy p { font-size: 0.95rem; }
  .b-cap { font-size: 0.65rem; padding: 5px 6px 4px; }
}

/* ---------- work pages on phones (owner's reference): big picture, then type/year side by side, then the text ---------- */
@media (max-width: 760px) {
  .proj-intro { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "art" "facts" "text" !important; }
  .proj-intro-art { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .proj-intro-art img { aspect-ratio: 1 / 1 !important; height: auto !important; max-height: none !important; }
  .proj-facts {
    grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important;
    margin: 24px 16px 6px !important; padding: 0 !important; gap: 0 !important; align-self: auto !important;
  }
  .proj-facts > div { border: 1px solid var(--line) !important; padding: 12px 14px !important; }
  .proj-facts > div + div { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .proj-intro-text { padding: 14px 16px 26px !important; }
}
@media (max-width: 760px) { .proj-back { display: none !important; } }

/* ---------- Oct 22 (c): no numbers on the work cards (Works page and home deck) ---------- */
.wg-num, .deck-num { display: none !important; }

/* ---------- Oct 22 (d): "open the works page" looks like the yellow "enter ↗" tag ---------- */
.works-block .bar-link { font: 400 0.85rem/1 var(--mono); padding: 5px 9px 4px; background: var(--lime); color: var(--ink); text-transform: lowercase; transition: background 0.2s ease, color 0.2s ease; }
.works-block .bar-link:hover { background: var(--panel); color: var(--ink); }
/* phones: let small boxes fill gaps next to each other */
@media (max-width: 760px) { .bento { grid-auto-flow: row dense; } }
/* phones: two half-width boxes side by side are the same height (the taller one sets it) */
@media (max-width: 760px) { .b-cell { align-self: stretch; } }
@media (max-width: 760px) { .b-cell { width: 100%; max-width: 100%; } }
/* bento: a box can ask for less padding around its art (fills the box more) */
.b-art img { padding: var(--pad-art, clamp(10px, 1.6vw, 26px)) !important; }

/* Home works deck: cards keep their "All works" size in every filter (fixed widths from the full count) */
@media (min-width: 761px) {
  .deck-all { --deck-n: 25; }
  .deck-all .deck-card {
    flex: 0 0 calc(100% / (var(--deck-n) + 6));
    transition: flex-basis 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .deck-all .deck-card.is-open { flex-basis: calc(700% / (var(--deck-n) + 6)); }
  .deck-all .deck-card:last-child { border-right: 1px solid var(--line); }
}
@media (min-width: 761px) { .deck-all { background: var(--paper); } }

/* Home works deck: the open card's cream label turns lime, like the cards on the Works page */
.deck-label { transition: background 0.25s ease; }
.deck-card:hover .deck-label, .deck-card:focus-visible .deck-label { background: var(--lime); }

/* ---------- Arcade: the Leap Kill videogame in a full-screen window (js/arcade.js) ---------- */
html.arcade-open, html.arcade-open body { overflow: hidden; }
.arcade { position: fixed; inset: 0; z-index: 400; background: #160a52; color: var(--panel); display: grid; place-items: center; }
.arcade[hidden] { display: none; }
.arcade-stage { width: min(100vw - 48px, (100dvh - 110px) * 16 / 9, 1280px); display: grid; gap: 12px; }
.arcade-screen { aspect-ratio: 16 / 9; width: 100%; background: #000; border: 2px solid var(--lime); box-shadow: 10px 12px 0 var(--violet); }
.arcade-frame { display: block; width: 100%; height: 100%; border: 0; }
.arcade-keys { margin: 0; font: 0.8rem/1.3 var(--mono); color: #c9c4ff; text-align: center; }
.arcade-keys b { color: var(--lime); font-weight: 700; }
.arcade-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.arcade-btn { font: 700 1rem/1 var(--mono); min-width: 42px; height: 42px; padding: 0 12px; border: 2px solid var(--lime); background: var(--lime); color: #160a52; cursor: pointer; }
.arcade-btn[data-arcade="restart"] { background: transparent; color: var(--lime); }
.arcade-btn:hover, .arcade-btn:focus-visible { background: var(--panel); border-color: var(--panel); color: #160a52; outline: none; }

/* phones and small tablets: the game fills the screen sideways, buttons sit in the corner */
@media (max-width: 1024px) and (pointer: coarse) {
  .arcade-keys { display: none; }
  .arcade-stage { width: min(100vw, 100dvh * 16 / 9); }
  .arcade-screen { border: 0; box-shadow: none; }
  .arcade-tools { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); flex-direction: column; }
  .arcade-btn { min-width: 36px; height: 36px; padding: 0 8px; font-size: 0.9rem; }
}
/* full screen: the game takes the whole screen, no frame */
.arcade:fullscreen { background: #000; }
.arcade:fullscreen .arcade-stage { width: min(100vw, 100vh * 16 / 9); }
.arcade:fullscreen .arcade-screen { border: 0; box-shadow: none; }
.arcade:fullscreen .arcade-keys { display: none; }
.arcade, .arcade-frame { touch-action: none; }

/* Leap Kill page: clicking the game video opens the game */
.lk-game-video { cursor: pointer; }

/* Arcade on a phone held upright: the game is turned sideways (landscape) by default,
   so it fills the screen; touches still land right because they happen inside the game frame */
@media (orientation: portrait) and (pointer: coarse) {
  .arcade { display: block; }
  .arcade .arcade-stage, .arcade:fullscreen .arcade-stage {
    position: absolute; left: 50%; top: 50%;
    width: 100vh; width: 100dvh; height: 100vw;
    display: grid; place-items: center;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .arcade .arcade-screen, .arcade:fullscreen .arcade-screen { width: min(100vh, 100vw * 16 / 9); width: min(100dvh, 100vw * 16 / 9); }
  /* buttons in the bottom strip, right side = top right once the phone is turned */
  .arcade-tools { flex-direction: row; right: max(6px, env(safe-area-inset-right)); left: auto; top: auto; bottom: max(6px, env(safe-area-inset-bottom)); }
  .arcade-tools .arcade-btn { transform: rotate(90deg); }
}

/* home menu bar once it turns purple: mail + Instagram icons go yellow on hover too
   (an older rule turned them violet there, which looked like no change) */
body .site-header.is-purple .socials a:hover { color: var(--lime); }

/* ---------- Owner, Oct 26: the heavy wide Archivo look is retired. Every place that used it
   (services, frog fact, section titles in text, character cards, deck card names) uses
   Germania One, like "Hey, I'm cosmicdroid." ---------- */
.service h3, .foot-facts .fact-label, .split-cell h2, .dossier h3, .deck-label b {
  font-family: "Germania One", var(--sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
.service h3 { font-size: 1.7rem; line-height: 1.05; }
.foot-facts .fact-label { font-size: 1.75rem !important; line-height: 1; }
@media (max-width: 760px) { .foot-facts .fact-label { font-size: 1.5rem !important; } }
.split-cell h2 { font-size: 1.9rem; line-height: 1.05; }
.dossier h3 { font-size: 1.7rem; line-height: 1; }
.deck-label b { font-size: 1.35rem; line-height: 1.1; }

/* Works page (owner, Oct 26): bigger cards — tighter gaps and edges, bigger names */
@media (min-width: 761px) {
  .works-grid { gap: clamp(14px, 1.4vw, 22px); padding: clamp(18px, 1.8vw, 28px); }
  .wg-label { padding: 14px 18px; }
  .wg-label b { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
}
@media (min-width: 1000px) { .works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Light / dark switch in the menu bar (owner, Oct 26): tiny icon next to mail + IG ---------- */
.theme-toggle {
  display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: inherit; line-height: 0; -webkit-tap-highlight-color: transparent;
}
.theme-toggle svg { width: 23.1px; height: 23.1px; }
.theme-toggle .ic-sun, html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
.site-header .theme-toggle { color: var(--ink); transition: color 0.2s ease; }
.site-header .theme-toggle:hover, .site-header .theme-toggle:focus-visible { color: var(--lime); outline: none; }

/* ================= DARK MODE (owner, Oct 26) =================
   Dark blue instead of the light backgrounds, the joystick purple for every line,
   lavender text, lime titles. The menu bar looks exactly the same in both modes,
   and artwork/photos are never recoloured. */
html[data-theme="dark"] {
  --paper: #290a6f;      /* page background (the owner's dark blue) */
  --panel: #33137f;      /* cards and panels, a touch lighter */
  --line: #7a3cf2;       /* every line: the joystick purple */
  --ink: #ddd8ff;        /* text: light lavender */
  --muted: #ada3ec;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: #1e0754; }
/* the menu bar keeps the light-mode colours */
html[data-theme="dark"] .site-header {
  --paper: #dce9fb; --panel: #fbf9ea; --line: #3326d6; --ink: #2a1fb0; --muted: #5650b8;
}
/* grid paper: dark blue with purple lines (castle area, loader, comic reader, room previews) */
html[data-theme="dark"] .castle-hero { --grid: rgba(122, 60, 242, 0.8); background-color: var(--paper); }
html[data-theme="dark"] .castle-hero {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--paper);
}
html[data-theme="dark"] .loader,
html[data-theme="dark"] .lk-hero-art {
  background:
    linear-gradient(rgba(122, 60, 242, 0.6) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(122, 60, 242, 0.6) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--paper);
}
html[data-theme="dark"] .room-art {
  background:
    linear-gradient(rgba(122, 60, 242, 0.6) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(122, 60, 242, 0.6) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--panel);
}
/* titles in lime */
html[data-theme="dark"] .page-title, html[data-theme="dark"] .bar-title, html[data-theme="dark"] .castle-hello,
html[data-theme="dark"] .proj-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .fact-label { color: var(--lime) !important; }
html[data-theme="dark"] .site-header h1, html[data-theme="dark"] .site-header h2 { color: inherit !important; }
/* buttons: lime ones keep dark text; the blue ones become purple with light text */
html[data-theme="dark"] .button { color: #fff; }
html[data-theme="dark"] .button:hover, html[data-theme="dark"] .button.lime { color: #160a52; background: var(--lime); }
html[data-theme="dark"] .button.lime:hover { color: var(--lime); background: #160a52; }
html[data-theme="dark"] .button.ghost { color: var(--ink); }
html[data-theme="dark"] .button.ghost:hover { color: #160a52; }
/* hovered labels/rows that turn lime need dark text on top */
html[data-theme="dark"] .wg-card:hover .wg-label, html[data-theme="dark"] .wg-card:focus-visible .wg-label,
html[data-theme="dark"] .deck-card:hover .deck-label { color: #160a52; }
html[data-theme="dark"] .wg-card:hover .wg-meta, html[data-theme="dark"] .deck-card:hover .deck-label span { color: #3a2a8a; }
/* form fields */
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #1e0754; color: var(--ink); }
html[data-theme="dark"] ::placeholder { color: #8f86d0; }

/* ---------- Menu bar (owner, Oct 26): Works / About / Contact and the icons are yellow in both modes;
   on hover they get bold (a smooth thicker outline), the current page stays bold ---------- */
html body .site-header .nav a,
html body .site-header .nav a:hover,
html body .site-header .nav a[aria-current="page"] {
  color: var(--lime) !important;
  background-image: none !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0px var(--lime) !important;
  paint-order: normal !important;
  transition: -webkit-text-stroke-width 0.2s ease, color 0.2s ease;
}
html body .site-header .nav a:hover,
html body .site-header .nav a:focus-visible,
html body .site-header .nav a[aria-current="page"] { -webkit-text-stroke-width: 0.9px !important; }
html body .site-header .socials a,
html body .site-header .socials a:hover,
html body .site-header .theme-toggle,
html body .site-header .theme-toggle:hover { color: var(--lime) !important; filter: none !important; }
.site-header .socials svg *, .site-header .theme-toggle svg * { transition: stroke-width 0.2s ease; }
.site-header .socials a:hover svg *, .site-header .socials a:focus-visible svg *,
.site-header .theme-toggle:hover svg *, .site-header .theme-toggle:focus-visible svg * { stroke-width: 3.2px; }
.site-header .socials a:hover .ic-ig circle:last-child { stroke-width: 0; }
/* dark mode: anything that sits on lime keeps dark text so it stays readable */
html[data-theme="dark"] :is(
  .scroll-cue:hover, .pad-jump, .bar-link, .bar-link:hover,
  .deck-filters button[aria-selected="true"], .deck-go, .wg-go, .crumb a:hover, .placeholder-note, .facts .todo,
  .pager a:hover, .lightbox-close, .foot-links a:hover, .lk-cell:hover .lk-go, .home-intro .room-list a:hover b,
  .gallery button:hover .g-cap, .cats-arrow:hover, .cats-shuffle:hover, .proj-back:hover, .st-tags li:first-child,
  .compare-knob, .copied-note, button.b-cell:hover .b-cap, .lk-nudge, .lk-btn:hover:not(:disabled)
) { color: #160a52 !important; }
html[data-theme="dark"] .proj-back:hover * { color: #160a52 !important; }
/* dark mode: text that used the line colour gets the readable lavender/lime instead */
html[data-theme="dark"] a:not(.button):not(.bar-link) { color: var(--ink); }
html[data-theme="dark"] :is(.scroll-cue, .slot-empty b, .proj-back, .cats-arrow, .cats-shuffle) { color: var(--ink); }
html[data-theme="dark"] .slot-empty::before { color: var(--muted); }
html[data-theme="dark"] :is(.proj-facts dt, .b-facts dt, .facts dt) { color: var(--lime); }
html[data-theme="dark"] :is(.st-line, .st-h) { color: var(--lime); }

/* ---------- Owner's dark mode notes, Oct 26 (b) ---------- */
/* home Works block: the lines between the title, the tabs and each tab, in the dark blue */
html[data-theme="dark"] .works-block .bar,
html[data-theme="dark"] .works-block .deck-filters,
html[data-theme="dark"] .works-block .deck-filters button { border-color: var(--paper) !important; }
/* home room menu: names yellow; on hover the small text on the right stays light */
html[data-theme="dark"] .home-intro .room-list b { color: var(--lime); }
html[data-theme="dark"] .home-intro .room-list a:hover b, html[data-theme="dark"] .home-intro .room-list a:focus-visible b { color: #160a52; }
html[data-theme="dark"] .home-intro .room-list a:hover .what, html[data-theme="dark"] .home-intro .room-list a:hover .arrow,
html[data-theme="dark"] .home-intro .room-list a:focus-visible .what, html[data-theme="dark"] .home-intro .room-list a:focus-visible .arrow { color: var(--ink) !important; }
/* "What I make" descriptions: same colour as the intro text (both modes) */
.service p { color: var(--ink); }
/* Works deck names: same type as the room menu names (Works, Murals, About...) */
.deck-label b { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 1.15rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
/* castle phone controls in dark mode: stick base and GO button in the menu bar purple */
html[data-theme="dark"] .stick { background: #b377ff; }
html[data-theme="dark"] .pad-enter:not(.is-ready) { background: #b377ff; color: #2a1fb0; }
/* footer frog with the laptop: in dark mode it uses its own drawing (assets/img/cosmiclaptop-dark.webp, swapped in main.js)
   and its square uses the same dark blue as the rest of the page (owner Oct 29) */
html[data-theme="dark"] .foot-critter { background: var(--paper); }
/* phones: no empty row under the page title (About, Contact) */
@media (max-width: 760px) {
  .page-head-text:empty { display: none; }
  .page-head:has(.page-head-text:empty) .page-head-title { border-bottom: 0; }
}
/* phone menu: one clean line under the top bar when the menu opens */
@media (max-width: 760px) {
  .site-header.is-open { border-bottom-color: transparent !important; }
  .site-header.is-open .nav { border-top: 1px solid #3326d6 !important; }
}
html[data-theme="dark"] .pad-enter:not(.is-ready) { opacity: 0.6; }
/* dark mode, home Works block: inactive tabs in yellow letters */
html[data-theme="dark"] .works-block .deck-filters button[aria-selected="false"] { color: var(--lime); }
html[data-theme="dark"] .works-block .deck-filters button[aria-selected="false"]:hover { color: #160a52; background: var(--lime); }
/* castle GO button when it's ready (at a door): frog green, like the frog in the logo */
.pad-enter.is-ready, html[data-theme="dark"] .pad-enter.is-ready { background: #4fe0b8; color: #160a52; }

/* page descriptions under the titles (Works, Murals, Frog): same size as the Contact intro */
.page-head .page-lede { font-size: 1.15rem !important; line-height: 1.55; max-width: 52ch; }

/* Contact room: transparent animated pictures (no box behind them); the night room in dark mode */
.contact-room img { display: block; width: 100%; height: auto; max-width: 600px; margin: auto; padding: clamp(24px, 4vw, 56px); box-sizing: border-box; }
.contact-room .room-night, html[data-theme="dark"] .contact-room .room-day { display: none; }
html[data-theme="dark"] .contact-room .room-night { display: block; }
@media (min-width: 761px) { .contact-room img { max-width: 470px; } }

/* Owner, Oct 27: work names and the home room menu names in Germania One, like the other titles */
.wg-label b, .deck-label b, .room-list b {
  font-family: "Germania One", var(--sans) !important;
  font-weight: 400 !important; letter-spacing: 0.01em !important;
}
.wg-label b { font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important; line-height: 1.1 !important; }
.deck-label b { font-size: 1.45rem !important; line-height: 1.1 !important; }
.room-list b { font-size: 1.45rem; line-height: 1.1; }

/* "What I make" pictures (owner Oct 29): the boil drawings replace the empty gif boxes; see js/main.js for hover/touch behaviour */
.service .svc-art { display: block; width: min(100%, 230px); aspect-ratio: 1 / 1; }
.service .svc-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
@media (max-width: 760px) { .service .svc-art { width: 150px; } }   /* phone: smaller so the four cards don't take a whole screen each */

/* "What I make": drawings centred in their squares, numbers removed (owner Oct 29) */
.service { justify-items: center; }
.service h3, .service p { justify-self: stretch; }
.service .svc-art { margin: 0 auto; }

/* Home: four rooms now, so the hello box and the Leap Kill box are each half the height and the line between them
   meets the line between Arcade and About (owner Oct 29). The hello box is a bit tighter to fit. */
@media (min-width: 761px) {
  .home-intro { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .home-intro > .guide-all { min-height: calc(var(--rh) * 5); }
  .home-intro > .castle-intro { padding-top: 22px; padding-bottom: 18px; }
  .home-intro > .castle-intro .castle-hello { font-size: clamp(2rem, 2.9vw, 2.6rem); margin-bottom: 8px; }
  .home-intro > .castle-intro p { margin-bottom: 12px; }
}

/* Home: the six squares (hello, Leap Kill, four rooms) 15% shorter, and the hello paragraph uses the full width (owner Oct 29) */
@media (min-width: 761px) {
  .home-intro { --rh: 75px; }
  .home-intro > .castle-intro p { max-width: none; }
}
@media (min-width: 761px) {
  .home-intro > .castle-intro { padding-top: 18px; padding-bottom: 14px; }
  .home-intro > .castle-intro .castle-hello { margin-bottom: 6px; }
  .home-intro > .castle-intro p { margin-bottom: 10px; }
}
/* footer frog in dark mode drawn bigger (measured: its drawing has more empty margin, 9% matches), to match the size of the light-mode frog (owner Oct 29) */
html[data-theme="dark"] .foot-critter .slot img { transform: scale(1.09); }

/* About: the animated dragon drawing under the studies (owner Oct 29) */
.about-dragon { display: block; width: min(100%, 460px); height: auto; margin: 28px auto 0; }
/* desktop: smaller so the right column is no taller than the photo (photo keeps its original size) */
@media (min-width: 761px) { .about-dragon { width: min(100%, 580px); margin-top: 28px; } }

/* About: the drawn logo sits under the studies instead of the dragon (owner Oct 29); class name kept */
html[data-theme="dark"] .about-dragon { filter: brightness(2.5) saturate(0.8); } /* the dark violet logo is lightened on the dark blue */

/* About: the studies list is set in JetBrains Mono (owner Oct 29) */
.timeline, .timeline .year { font-family: "JetBrains Mono", var(--mono); }
.timeline li { grid-template-columns: 7ch 1fr; }

/* phone: the purple banner text runs the full width instead of stopping halfway (owner Oct 29) */
@media (max-width: 760px) { .cta p { max-width: none; width: 100%; } }

/* Phone: the menu rows have four items now (no empty fifth row), and touching a row no longer leaves the
   "hover" look stuck on it (cream grid + lime title) (owner Oct 29) */
@media (max-width: 760px) { .home-intro > .guide-all { min-height: 0; } }
@media (hover: none) {
  .home-intro .room-list a:hover { background: transparent; }
  .home-intro .room-list a:hover .room-art { opacity: 0; }
  .home-intro .room-list a:hover b { background: transparent; }
  html[data-theme="dark"] .home-intro .room-list a:hover b { color: var(--lime); }
  .room-list a:hover { background: transparent; }
  .room-list a:active { background: var(--lime); }
}

/* phone: shorter filter tab names so the three tabs fit on one line (owner Oct 29) */
@media (max-width: 760px) {
  .deck-filters { flex-wrap: nowrap; }
  .deck-filters button { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  .deck-filters .long { display: none; }
}

/* Phone: the pressed/tapped menu row grows a bit (it used to shrink to its text height) (owner Oct 29) */
@media (max-width: 760px) {
  .home-intro .guide-all .room-list a:hover,
  .home-intro .guide-all .room-list a:active,
  .home-intro .guide-all .room-list a:focus-visible { height: calc(var(--rh) * 1.35); }
}