/* ============================================================
   MOMO'S AFTER SCHOOL CLUB — club stylesheet
   1990s grunge scrapbook meets middle-school art room.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --paper: #F3E8D2;
  --paper-light: #F8F3E8;
  --newsprint: #E6D8BC;
  --ink: #171717;
  --pink: #EF2B83;
  --pink-soft: #F36FA3;
  --teal: #27B8B0;
  --aqua: #43C4D8;
  --yellow: #F3C62D;
  --purple: #8B5BB6;
  --red: #E9504F;
  --lime: #A7D93D;

  --border-heavy: 3px solid var(--ink);
  --border-mid: 2px solid var(--ink);
  --shadow-paper: 5px 5px 0 var(--ink);
  --shadow-paper-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 2px 3px 6px rgba(23, 23, 23, 0.18);

  --content-width: 1280px;
  --section-space: 72px;
  --card-gap: 24px;

  --font-display: "Anton", Impact, "Arial Black", sans-serif;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;
  --font-note: "Schoolbell", "Comic Sans MS", cursive;
  --font-body: "Atkinson Hyperlegible", "Nunito", Arial, sans-serif;

  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ---------- 2. RESET + BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* keep anchor targets clear of the sticky header */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* recycled-paper grain over everything, never interactive */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.55'/></svg>");
}

img { max-width: 100%; display: block; }

/* the filter and backpack code toggles [hidden]; component display rules must not win */
[hidden] { display: none !important; }

a { color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px dashed var(--teal);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9500;
  background: var(--yellow);
  border: var(--border-heavy);
  padding: 12px 18px;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

.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;
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

.hand {
  font-family: var(--font-hand);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}

.note {
  font-family: var(--font-note);
  text-transform: none;
  font-size: 1.15rem;
  line-height: 1.45;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  background: var(--ink);
  color: var(--paper-light);
  padding: 5px 12px 4px;
  transform: rotate(-1.5deg);
}

.lead { font-size: 1.15rem; }

.tiny {
  font-size: 0.85rem;
  line-height: 1.45;
}

/* marker highlighter behind text */
.hl {
  background: var(--pink);
  box-shadow: 0.14em 0 0 var(--pink), -0.14em 0 0 var(--pink);
  border-radius: 0.2em 0.45em 0.25em 0.4em;
  padding: 0 0.05em;
}
.hl--yellow { background: var(--yellow); box-shadow: 0.14em 0 0 var(--yellow), -0.14em 0 0 var(--yellow); }
.hl--teal { background: var(--teal); box-shadow: 0.14em 0 0 var(--teal), -0.14em 0 0 var(--teal); }
.hl--lime { background: var(--lime); box-shadow: 0.14em 0 0 var(--lime), -0.14em 0 0 var(--lime); }

/* marker underline that draws in on hover */
.marker-link {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.marker-link::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  height: 7px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease);
  border-radius: 40% 60% 50% 45%;
  z-index: -1;
}
.marker-link:hover::after,
.marker-link:focus-visible::after { transform: scaleX(1); }

/* ---------- 4. LAYOUT HELPERS ---------- */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}
.section--tight { padding-block: 44px; }

.stack > * + * { margin-top: 1em; }

.rot-l { transform: rotate(-2deg); }
.rot-r { transform: rotate(2deg); }
.rot-l1 { transform: rotate(-1deg); }
.rot-r1 { transform: rotate(1deg); }

.grid { display: grid; gap: var(--card-gap); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- 5. PAPER SURFACES + TEXTURES ---------- */
.paper {
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper);
  padding: 24px;
}
.paper--heavy { border: var(--border-heavy); }
.paper--cream { background: var(--newsprint); }

.checker {
  background-color: var(--paper-light);
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--paper-light) 0% 50%);
  background-size: var(--sq, 26px) var(--sq, 26px);
}
.checker--sm { --sq: 16px; }

.notebook {
  background-color: var(--paper-light);
  background-image:
    linear-gradient(90deg, transparent 0 44px, rgba(239, 43, 131, 0.35) 44px 46px, transparent 46px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(39, 184, 176, 0.3) 27px 28px);
}

.graph {
  background-color: var(--paper-light);
  background-image:
    repeating-linear-gradient(90deg, rgba(39, 184, 176, 0.28) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(39, 184, 176, 0.28) 0 1px, transparent 1px 18px);
}

.leopard {
  background-color: var(--yellow);
  background-image:
    radial-gradient(ellipse 9px 7px at 20% 25%, var(--ink) 60%, transparent 62%),
    radial-gradient(ellipse 7px 9px at 62% 42%, var(--ink) 60%, transparent 62%),
    radial-gradient(ellipse 10px 6px at 85% 70%, var(--ink) 60%, transparent 62%),
    radial-gradient(ellipse 6px 8px at 38% 82%, var(--ink) 60%, transparent 62%);
  background-size: 64px 64px;
}

/* torn / photocopied edges */
.torn-top {
  clip-path: polygon(0 7px, 5% 2px, 11% 8px, 17% 1px, 24% 6px, 31% 2px, 38% 9px, 45% 3px,
    52% 7px, 59% 1px, 66% 6px, 73% 2px, 80% 8px, 87% 3px, 94% 7px, 100% 2px, 100% 100%, 0 100%);
}
.torn-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3px), 94% calc(100% - 8px), 87% calc(100% - 2px),
    80% calc(100% - 7px), 73% calc(100% - 1px), 66% calc(100% - 6px), 59% calc(100% - 2px),
    52% calc(100% - 8px), 45% calc(100% - 3px), 38% calc(100% - 7px), 31% calc(100% - 1px),
    24% calc(100% - 6px), 17% calc(100% - 2px), 11% calc(100% - 8px), 5% calc(100% - 3px), 0 calc(100% - 7px));
}
.torn-both {
  clip-path: polygon(0 7px, 6% 2px, 13% 8px, 21% 1px, 29% 6px, 37% 2px, 46% 9px, 54% 3px,
    62% 7px, 71% 1px, 79% 6px, 88% 2px, 95% 8px, 100% 3px,
    100% calc(100% - 4px), 93% calc(100% - 9px), 85% calc(100% - 2px), 77% calc(100% - 7px),
    68% calc(100% - 1px), 59% calc(100% - 6px), 50% calc(100% - 2px), 41% calc(100% - 8px),
    32% calc(100% - 3px), 23% calc(100% - 7px), 14% calc(100% - 1px), 6% calc(100% - 6px), 0 calc(100% - 2px));
}

/* tape strips */
.tape {
  position: absolute;
  z-index: 4;
  width: var(--tape-w, 108px);
  height: 30px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.45) 0 18%, rgba(255, 255, 255, 0) 19% 100%),
    rgba(243, 198, 45, 0.6);
  border-left: 1px dashed rgba(23, 23, 23, 0.16);
  border-right: 1px dashed rgba(23, 23, 23, 0.16);
  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.22);
  pointer-events: none;
}
.tape--clear { background: linear-gradient(105deg, rgba(255,255,255,0.55) 0 18%, rgba(255,255,255,0.12) 19% 100%), rgba(230, 216, 188, 0.5); }
.tape--pink { background: linear-gradient(105deg, rgba(255,255,255,0.4) 0 18%, rgba(255,255,255,0) 19% 100%), rgba(243, 111, 163, 0.65); }
.tape--tl { top: -14px; left: -16px; transform: rotate(-24deg); }
.tape--tr { top: -14px; right: -16px; transform: rotate(22deg); }
.tape--bl { bottom: -14px; left: -16px; transform: rotate(18deg); }
.tape--br { bottom: -14px; right: -16px; transform: rotate(-20deg); }
.tape--top { top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

/* staple */
.staple {
  position: absolute;
  z-index: 4;
  width: 26px; height: 9px;
  border: 2px solid rgba(23, 23, 23, 0.55);
  border-bottom-color: transparent;
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- 6. CROP SYSTEM (photo cutouts from the club poster) ---------- */
.crop {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 1);
  background: var(--newsprint);
}
.crop > img {
  position: absolute;
  height: auto;
  width: calc(100% / var(--w));
  left: calc(-100% * var(--x) / var(--w));
  top: calc(-100% * var(--y) / var(--h));
  max-width: none;
  filter: contrast(1.05) saturate(1.06);
}
/* photocopy grain on top of every crop, so upscaled bits read as intentional */
.crop::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.28;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23p)'/></svg>");
}

/* crop presets — club poster (momo-poster.jpg, 1201x805) */
.c-momo-bust    { --x:.1099; --y:.1863; --w:.2131; --h:.3913; --ar:.813; }
.c-momo-portrait{ --x:.1166; --y:.1925; --w:.2040; --h:.4534; --ar:.671; }
.c-momo-face    { --x:.1291; --y:.2050; --w:.1665; --h:.2484; --ar:1; }
.c-logo-band    { --x:.3139; --y:.0547; --w:.6811; --h:.5665; --ar:1.794; }
.c-books        { --x:.0075; --y:.5714; --w:.1066; --h:.3118; --ar:.510; }
.c-disco        { --x:.8326; --y:0;     --w:.1024; --h:.1528; --ar:1; }
.c-leopard-star { --x:.8767; --y:.1199; --w:.1091; --h:.1627; --ar:1; }
.c-gummy-purple { --x:.7710; --y:.7938; --w:.0466; --h:.0696; --ar:1; }
.c-heart        { --x:.8368; --y:.8093; --w:.0691; --h:.1031; --ar:1; }
.c-smiley       { --x:.1607; --y:.0509; --w:.0733; --h:.1093; --ar:1; }
.c-members      { --x:.5037; --y:.7627; --w:.2123; --h:.1416; --ar:2.237; }
.c-bellnote     { --x:0;     --y:.1304; --w:.1099; --h:.2832; --ar:.579; }
.c-gradesnote   { --x:.9351; --y:.7627; --w:.0649; --h:.1739; --ar:.557; }

/* crop presets — brand mood board (momo-moodboard.jpg, 1083x1619) */
.c-momo-head    { --x:.7294; --y:.4355; --w:.1247; --h:.1359; --ar:.614; }
.c-stickers     { --x:.4441; --y:.4379; --w:.1616; --h:.1081; --ar:1; }
.c-gummy-pink   { --x:.5166; --y:.5185; --w:.0739; --h:.0494; --ar:1; }
.c-toyshelf     { --x:.0162; --y:.6127; --w:.1293; --h:.0865; --ar:1; }
.c-neon         { --x:.1408; --y:.6186; --w:.1016; --h:.0679; --ar:1; }
.c-gumball      { --x:.2650; --y:.6038; --w:.0757; --h:.0506; --ar:1; }
.c-lockers      { --x:.2419; --y:.7234; --w:.1053; --h:.0704; --ar:1; }
.c-vhs          { --x:.0240; --y:.7103; --w:.1293; --h:.0865; --ar:1; }
.c-necklace     { --x:.3555; --y:.6337; --w:.1154; --h:.0772; --ar:1; }
.c-handbag      { --x:.4668; --y:.6309; --w:.1163; --h:.0778; --ar:1; }
.c-bunny        { --x:.5735; --y:.6235; --w:.1293; --h:.0865; --ar:1; }
.c-jacket       { --x:.3647; --y:.7310; --w:.1477; --h:.0988; --ar:1; }
.c-cherries     { --x:.4866; --y:.7810; --w:.0794; --h:.0531; --ar:1; }
.c-packaging    { --x:.7170; --y:.6196; --w:.1662; --h:.1112; --ar:1; }
.c-approved     { --x:.7364; --y:.7465; --w:.1182; --h:.0791; --ar:1; }
.c-thankyou     { --x:.8634; --y:.7310; --w:.1154; --h:.0772; --ar:1; }

/* sticker cutout treatment */
.sticker {
  background: var(--paper-light);
  padding: 9px;
  filter: drop-shadow(4px 5px 0 rgba(23, 23, 23, 0.85));
  clip-path: polygon(2% 4%, 14% 1%, 29% 3%, 45% 0%, 61% 3%, 76% 1%, 90% 4%, 99% 9%,
    97% 24%, 100% 40%, 98% 56%, 100% 72%, 97% 87%, 91% 98%, 76% 99%, 60% 97%,
    44% 100%, 28% 97%, 13% 99%, 3% 94%, 1% 79%, 3% 63%, 0% 47%, 2% 31%, 0% 16%);
}
.sticker--tight { padding: 6px; }

.frame {
  background: var(--paper-light);
  border: var(--border-mid);
  padding: 8px 8px 8px;
  box-shadow: var(--shadow-paper-sm);
}

/* scalloped photo frame */
.scallop {
  background: var(--paper-light);
  padding: 10px;
  --s: 11px;
  filter: drop-shadow(3px 4px 0 rgba(23, 23, 23, 0.8));
  mask:
    radial-gradient(var(--s) at 50% 0, #0000 98%, #000) 50% / calc(2 * var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% 100%, #0000 98%, #000) 50% / calc(2 * var(--s)) 100% repeat-x,
    linear-gradient(#000 0 0) 50% / calc(100% - 2px) calc(100% - 2 * var(--s)) no-repeat;
  -webkit-mask:
    radial-gradient(var(--s) at 50% 0, #0000 98%, #000) 50% / calc(2 * var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% 100%, #0000 98%, #000) 50% / calc(2 * var(--s)) 100% repeat-x,
    linear-gradient(#000 0 0) 50% / calc(100% - 2px) calc(100% - 2 * var(--s)) no-repeat;
}

/* ---------- 7. DOODLES ---------- */
.doodle {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.doodle svg { display: block; width: 100%; height: auto; }
.doodle--behind { z-index: 0; }

/* ---------- 8. RANSOM-NOTE LETTERING ---------- */
.ransom {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.ransom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 14px;
}
.rn-word {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.rn {
  display: inline-block;
  padding: 0.06em 0.12em 0.02em;
  background: var(--newsprint);
  color: var(--ink);
  box-shadow: 1px 2px 3px rgba(23, 23, 23, 0.25);
  position: relative;
}
.rn-pink { background: var(--pink); }
.rn-ink { background: var(--ink); color: var(--paper-light); }
.rn-teal { background: var(--teal); }
.rn-yellow { background: var(--yellow); }
.rn-purple { background: var(--purple); color: var(--paper-light); }
.rn-cream { background: var(--paper-light); }
.rn-red { background: var(--red); }
.rn-lime { background: var(--lime); }
.rn-pinksoft { background: var(--pink-soft); }

/* word-level scraps, used in the header + page banners */
.scrap-word {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--newsprint);
  padding: 2px 7px 1px;
  box-shadow: 1px 2px 0 rgba(23, 23, 23, 0.35);
  letter-spacing: 0.02em;
}
/* the paper-color modifiers have to out-rank .scrap-word's own background */
.scrap-word.rn-pink { background: var(--pink); }
.scrap-word.rn-teal { background: var(--teal); }
.scrap-word.rn-yellow { background: var(--yellow); }
.scrap-word.rn-lime { background: var(--lime); }
.scrap-word.rn-cream { background: var(--paper-light); }
.scrap-word.rn-ink { background: var(--ink); color: var(--paper-light); }
.scrap-word.rn-purple { background: var(--purple); color: var(--paper-light); }

/* ---------- 9. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.65em 1.25em 0.55em;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink);
  background: var(--pink);
  border: var(--border-heavy);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--secondary { background: var(--yellow); }
.btn--teal { background: var(--teal); }
.btn--paper { background: var(--paper-light); }
.btn--sm { min-height: 44px; font-size: 0.9rem; padding: 0.5em 0.9em 0.42em; box-shadow: 3px 3px 0 var(--ink); }
.btn--block { width: 100%; }
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--newsprint);
  color: rgba(23, 23, 23, 0.6);
  box-shadow: 3px 3px 0 rgba(23, 23, 23, 0.4);
  cursor: not-allowed;
  transform: none;
}

/* ---------- 10. HEADER + NAV ---------- */
.topbar {
  height: 14px;
  background-color: var(--ink);
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--paper-light) 0% 50%);
  background-size: 14px 14px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--paper);
  border-bottom: var(--border-heavy);
  box-shadow: 0 4px 0 rgba(23, 23, 23, 0.12);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 2px 2px 0 var(--pink);
}
.logo-mark .crop { border-radius: 50%; }
.logo-words { display: grid; gap: 3px; }
.logo-words .l1 { font-size: 1.15rem; }
.logo-words .l2 { font-size: 0.72rem; letter-spacing: 0.04em; }
.logo-words .scrap-word + .scrap-word { margin-left: 3px; }
.logo:hover .logo-mark { transform: rotate(-4deg); }
.logo-mark { transition: transform 0.2s var(--ease); }

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--yellow);
  border: var(--border-heavy);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transform: rotate(-2deg);
}

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 11px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  position: relative;
  transition: transform 0.16s var(--ease), color 0.16s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  height: 8px;
  background: var(--pink);
  z-index: -1;
  transform: scaleX(0) rotate(-0.6deg);
  transform-origin: left center;
  transition: transform 0.2s var(--ease);
  border-radius: 45% 55% 50% 40%;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1) rotate(-0.6deg); }
.site-nav a:hover { transform: rotate(-1.5deg); }
.site-nav a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper-light);
  transform: rotate(-1.5deg);
}
.site-nav a[aria-current="page"]::after { display: none; }

.nav-cta a {
  background: var(--pink);
  border: var(--border-mid);
  box-shadow: 2px 2px 0 var(--ink);
}
.nav-cta a:hover { background: var(--yellow); }

.backpack-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  background: var(--teal);
  border: var(--border-mid);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transform: rotate(1.5deg);
  transition: transform 0.16s var(--ease);
}
.backpack-btn:hover { transform: rotate(-1.5deg) translateY(-2px); }
.backpack-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  background: var(--ink);
  color: var(--paper-light);
  border-radius: 50%;
  font-size: 0.78rem;
}

/* ticker */
.ticker {
  overflow: hidden;
  border-bottom: var(--border-mid);
  background: var(--ink);
  color: var(--paper-light);
}
.ticker-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 7px 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  animation: slide 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { white-space: nowrap; }
.ticker-track .star { color: var(--pink); }
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 11. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 64px;
  background-color: var(--paper);
  background-image: repeating-conic-gradient(rgba(23, 23, 23, 0.9) 0% 25%, rgba(248, 243, 232, 0.9) 0% 50%);
  background-size: 34px 34px;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}
.hero-card {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border: var(--border-heavy);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 30px 30px 34px;
  transform: rotate(-1deg);
}
.hero .ransom { font-size: clamp(2.1rem, 5.6vw, 4.1rem); }
.hero .ransom-line--2 { font-size: 0.62em; margin-top: 6px; }
.hero-tagline {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  background: var(--pink-soft);
  padding: 4px 18px 6px;
  margin: 18px 0 14px;
  transform: rotate(-1.5deg);
  border-radius: 40% 60% 45% 55% / 60% 45% 55% 40%;
}
.hero-copy { max-width: 46ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.hero-momo {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(100%, 370px);
}
.hero-momo-photo { position: relative; }
.hero-momo .sticker { transform: rotate(2deg); }
.hero-badge {
  position: absolute;
  z-index: 5;
  right: -16px;
  bottom: 10px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 10px;
  transform: rotate(-12deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-subjects {
  position: relative;
  z-index: 4;
  margin-top: 20px;
  transform: rotate(-1deg);
}

/* subject spines (recreated from the club poster) */
.spines { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.spine {
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 9px 4px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(23, 23, 23, 0.55);
}
.spine:nth-child(1) { background: var(--yellow); transform: rotate(-0.8deg); }
.spine:nth-child(2) { background: var(--teal); transform: rotate(0.7deg); }
.spine:nth-child(3) { background: var(--purple); color: var(--paper-light); transform: rotate(-0.5deg); }
.spine:nth-child(4) { background: var(--lime); transform: rotate(0.9deg); }
.spine:nth-child(5) { background: var(--pink); transform: rotate(-0.7deg); }
.spine:nth-child(6) { background: var(--red); transform: rotate(0.6deg); }
.spine:nth-child(7) { background: var(--paper-light); transform: rotate(-0.4deg); }

/* ---------- 12. PAGE BANNER (inner pages) ---------- */
.page-banner {
  position: relative;
  overflow: hidden;
  padding-block: 40px 46px;
  background-color: var(--newsprint);
  background-image: repeating-conic-gradient(rgba(23, 23, 23, 0.85) 0% 25%, rgba(243, 232, 210, 0.9) 0% 50%);
  background-size: 26px 26px;
  border-bottom: var(--border-heavy);
}
.page-banner-card {
  position: relative;
  z-index: 3;
  display: inline-block;
  max-width: 760px;
  background: var(--paper);
  border: var(--border-heavy);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 22px 28px 26px;
  transform: rotate(-0.8deg);
}
.page-banner-card h1 { margin-bottom: 0.25em; }
.page-banner-card .note { margin: 0; max-width: 58ch; }
.crumbs {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.crumbs a { text-decoration: none; }

/* ---------- 13. SECTION HEADINGS ---------- */
.section-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.section-head h2 { margin: 0; }
.section-head .note { margin: 0; max-width: 44ch; }
.heading-scrap {
  display: inline-block;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 10px 18px 12px;
  transform: rotate(-1.2deg);
}
.heading-scrap--pink { background: var(--pink); }
.heading-scrap--teal { background: var(--teal); }
.heading-scrap--yellow { background: var(--yellow); }

/* ---------- 14. PRODUCT CARDS ---------- */
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper);
  padding: 12px 14px 16px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.project:hover {
  transform: rotate(var(--rot, 0deg)) translate(-3px, -4px);
  box-shadow: 8px 9px 0 var(--ink);
}
.project-photo {
  position: relative;
  margin-bottom: 12px;
  background: var(--newsprint);
  border: var(--border-mid);
}
.project-title {
  font-size: 1.1rem;
  margin: 0 0 6px;
  line-height: 1.05;
}
.project-title a { text-decoration: none; }
.project-blurb {
  font-size: 0.92rem;
  margin: 0 0 12px;
  color: rgba(23, 23, 23, 0.85);
}
.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  margin-bottom: 12px;
}
.price {
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.collection-tag {
  font-family: var(--font-note);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
}
.badge {
  position: absolute;
  z-index: 5;
  top: -12px;
  left: -10px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 4px 8px 3px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-6deg);
}
.badge--pink { background: var(--pink); }
.badge--teal { background: var(--teal); }
.badge--lime { background: var(--lime); }
.badge--ink { background: var(--ink); color: var(--paper-light); }
.badge--right { left: auto; right: -10px; transform: rotate(6deg); }
.sold-stamp {
  position: absolute;
  z-index: 6;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  color: var(--red);
  border: 4px double var(--red);
  background: rgba(248, 243, 232, 0.9);
  padding: 7px 12px 6px;
  max-width: 88%;
}


/* count badge on cards with more than one photo */
.photo-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 5;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  padding: 2px 6px 1px;
}

/* ---------- 15. COLLECTION CARDS (paper folders) ---------- */
.folder {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--newsprint);
  border: var(--border-heavy);
  box-shadow: var(--shadow-paper);
  padding: 46px 20px 22px;
  min-height: 190px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.folder::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 16px;
  width: 42%;
  height: 18px;
  background: inherit;
  border: var(--border-heavy);
  border-bottom: none;
  border-radius: 8px 14px 0 0;
}
.folder:hover {
  transform: rotate(var(--rot, 0deg)) translate(-3px, -5px);
  box-shadow: 9px 10px 0 var(--ink);
}
.folder-label {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--font-note);
  font-size: 0.95rem;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  padding: 1px 8px;
  transform: rotate(2deg);
}
.folder h3 { margin: 0 0 8px; }
.folder p { font-size: 0.93rem; margin: 0 0 14px; }
.folder-go {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.folder--pink { background: var(--pink); }
.folder--teal { background: var(--teal); }
.folder--yellow { background: var(--yellow); }
.folder--lime { background: var(--lime); }
.folder--cream { background: var(--paper-light); }
.folder--purple { background: var(--purple); color: var(--paper-light); }
.folder--purple .folder-label { color: var(--ink); }

/* ---------- 16. PRESIDENT / STORY BLOCK ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
}
.story-photo { position: relative; }
.story-photo .sticker { transform: rotate(-2deg); max-width: 330px; }
.speech {
  position: relative;
  background: var(--paper-light);
  border: var(--border-heavy);
  padding: 16px 20px;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  box-shadow: var(--shadow-paper-sm);
  transform: rotate(1deg);
}
.speech::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -18px;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-top-color: var(--ink);
}
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
}
.facts li::before {
  content: "✔";
  color: var(--pink);
  font-size: 1.1rem;
  line-height: 1.3;
}
/* on a colored paper surface the pink tick disappears — switch to ink */
.callout--pink .facts li::before,
.callout--teal .facts li::before,
.callout--yellow .facts li::before,
.folder .facts li::before { color: var(--ink); }

/* ---------- 17. NEW SEMESTER BAND ---------- */
.band {
  position: relative;
  overflow: hidden;
  padding-block: 56px;
  background: var(--ink);
  color: var(--paper-light);
}
.band h2 { color: var(--paper-light); }
.band .note { color: var(--paper-light); }
/* anything sitting on a paper surface inside the dark band keeps ink text */
.band .frame,
.band .paper,
.band .callout { color: var(--ink); }
.band .frame .note,
.band .paper .note,
.band .callout .note { color: var(--ink); }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: repeating-conic-gradient(var(--paper-light) 0% 25%, transparent 0% 50%);
  background-size: 30px 30px;
}
.band-inner { position: relative; z-index: 2; }
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  list-style: none;
  padding: 0;
}
.countdown li {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  background: var(--paper-light);
  color: var(--ink);
  border: 2px solid var(--paper-light);
  padding: 6px 11px 5px;
}
.countdown li:nth-child(2) { background: var(--pink); }
.countdown li:nth-child(3) { background: var(--teal); }

/* ---------- 18. SOCIAL WALL ---------- */
.wall-tile {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 8px 8px 10px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wall-tile:hover {
  transform: rotate(var(--rot, 0deg)) scale(1.03);
  box-shadow: 6px 7px 0 var(--ink);
}
.wall-caption {
  font-family: var(--font-note);
  font-size: 0.95rem;
  margin: 8px 0 0;
  line-height: 1.3;
}
.wall-handle {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--yellow);
  padding: 2px 6px;
  display: inline-block;
  margin-bottom: 6px;
}

/* ---------- 19. NEWSLETTER / CLIPBOARD ---------- */
.clipboard {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  background: var(--paper-light);
  border: var(--border-heavy);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 46px 28px 30px;
  transform: rotate(-0.6deg);
}
.clipboard::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: var(--newsprint);
  border: var(--border-heavy);
  border-radius: 6px;
  box-shadow: inset 0 -6px 0 rgba(23, 23, 23, 0.12);
}
.clipboard::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 14px;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.field { flex: 1 1 220px; display: grid; gap: 6px; }
.field label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-mid);
  border-radius: 0;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; }
.form-note { font-size: 0.86rem; margin: 12px 0 0; }
.form-status {
  margin: 14px 0 0;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  min-height: 1.4em;
}
.form-status[data-state="ok"] { color: var(--ink); }
.form-status[data-state="err"] { color: var(--red); }

/* the ruled roster lines under the signup sheet */
.roster-lines {
  margin-top: 22px;
  border-top: 2px dashed rgba(23, 23, 23, 0.35);
  padding-top: 14px;
  display: grid;
  gap: 10px;
  font-family: var(--font-note);
  font-size: 1.05rem;
}
.roster-lines div {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.25);
  padding-bottom: 4px;
}
.roster-lines span:first-child { width: 2ch; font-family: var(--font-display); font-size: 0.85rem; }

/* ---------- 20. TESTIMONIALS / BULLETIN BOARD ---------- */
.corkboard {
  position: relative;
  padding: 34px 22px;
  background-color: #C9A77B;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='90' height='90' filter='url(%23c)' opacity='0.35'/></svg>");
  border: 10px solid #7A5230;
  box-shadow: var(--shadow-paper);
}
.pinned {
  position: relative;
  background: var(--paper-light);
  border: 1px solid rgba(23, 23, 23, 0.4);
  box-shadow: 3px 4px 8px rgba(23, 23, 23, 0.3);
  padding: 22px 18px 16px;
  font-family: var(--font-note);
  font-size: 1.08rem;
  transform: rotate(var(--rot, -1deg));
}
.pinned--yellow { background: #FBF0B8; }
.pinned--pink { background: #FBD8E6; }
.pinned--teal { background: #CFF0EE; }
.pinned::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid rgba(23, 23, 23, 0.5);
  box-shadow: 1px 2px 3px rgba(23, 23, 23, 0.4);
}
.pinned cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- 21. BULLETIN POSTS (journal) ---------- */
.post {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper);
  padding: 20px;
  transform: rotate(var(--rot, 0deg));
}
.post-date {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: var(--paper-light);
  display: inline-block;
  padding: 4px 9px 3px;
  margin-bottom: 10px;
}
.post h3 { margin-bottom: 8px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.post-tags li {
  font-family: var(--font-note);
  font-size: 0.9rem;
  background: var(--newsprint);
  border: 1px solid var(--ink);
  padding: 1px 8px;
}

/* ---------- 22. FILTER CHIPS ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 16px 18px;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
}
.filters-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--newsprint);
  border: var(--border-mid);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s;
}
.chip:hover { transform: translate(-1px, -2px); background: var(--yellow); }
.chip[aria-pressed="true"] {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--ink), inset 0 0 0 2px var(--paper-light);
}
.chip[aria-pressed="true"]::after { content: " ✔"; }
.result-count {
  margin-left: auto;
  font-family: var(--font-note);
  font-size: 1rem;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
}

/* ---------- 23. BACKPACK DRAWER ---------- */
.backpack {
  position: fixed;
  top: 0; right: 0;
  z-index: 8000;
  width: min(400px, 100%);
  height: 100%;
  background: var(--paper);
  border-left: var(--border-heavy);
  box-shadow: -8px 0 0 rgba(23, 23, 23, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.26s var(--ease);
}
.backpack[data-open="true"] { transform: translateX(0); }
.backpack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: var(--border-heavy);
  background: var(--pink);
}
.backpack-head h2 { margin: 0; font-size: 1.4rem; }
.icon-btn {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.backpack-body { flex: 1; overflow-y: auto; padding: 18px; }
.backpack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.backpack-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 10px;
}
.backpack-item h3 { font-size: 0.95rem; margin: 0 0 3px; }
.backpack-item .price { font-size: 1rem; }
.backpack-empty {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  text-align: center;
  padding: 40px 10px;
}
.backpack-foot {
  border-top: var(--border-heavy);
  padding: 16px 18px;
  background: var(--newsprint);
}
.backpack-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
/* ---------- PRODUCT PAGE ---------- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
}

.product-gallery { display: grid; gap: 14px; }

.product-main {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--paper-light);
  border: var(--border-heavy);
  box-shadow: var(--shadow-paper);
  cursor: zoom-in;
  transform: rotate(-0.8deg);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.product-main:hover { transform: rotate(-0.8deg) translate(-2px, -3px); box-shadow: 8px 9px 0 var(--ink); }
.product-main .crop { border: var(--border-mid); }

.product-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 4px 8px 3px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(2deg);
}

.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-thumb {
  width: 76px;
  padding: 5px;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: 2px 2px 0 rgba(23, 23, 23, 0.4);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.product-thumb:hover { transform: translateY(-2px); background: var(--yellow); }
.product-thumb[aria-selected="true"] {
  background: var(--pink);
  box-shadow: 2px 2px 0 var(--ink), inset 0 0 0 2px var(--paper-light);
}

.product-info { position: relative; transform: rotate(0.5deg); }
.product-info h2 { margin-top: 6px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.badge--static { position: static; display: inline-block; transform: rotate(-2deg); margin-bottom: 6px; }

.product-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.product-oneof {
  font-family: var(--font-note);
  font-size: 1rem;
  background: var(--pink);
  border: 2px solid var(--ink);
  padding: 2px 9px;
  transform: rotate(-1.5deg);
}
.product-note { margin: 10px 0 0; }
.product-gone {
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--red);
  border: var(--border-mid);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.product-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 2px dashed rgba(23, 23, 23, 0.3);
  font-size: 0.92rem;
}
.product-facts dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.product-facts dd { margin: 0; }

.related-card {
  display: block;
  text-decoration: none;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 10px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.related-card:hover {
  transform: rotate(var(--rot, 0deg)) translate(-3px, -4px);
  box-shadow: 7px 8px 0 var(--ink);
}
.related-card h3 { font-size: 1rem; margin: 10px 0 4px; }
.related-card .price { font-size: 1rem; }

/* the shop card becomes a link to the product page */
.project-link { text-decoration: none; color: inherit; display: block; }
.project-link:hover .project-title { text-decoration: underline; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(23, 23, 23, 0.92);
}
.lightbox[data-open="true"] { display: grid; }
.lightbox-figure {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  background: var(--paper-light);
  border: var(--border-heavy);
  padding: 10px;
  box-shadow: 10px 10px 0 rgba(239, 43, 131, 0.8);
}
.lightbox-figure .crop {
  max-height: calc(84vh - 74px);
  /* keep the aspect ratio while fitting tall crops on screen */
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--ar, 1);
  margin-inline: auto;
}
.lightbox-caption {
  font-family: var(--font-note);
  font-size: 1rem;
  margin: 8px 2px 0;
  text-align: center;
}
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.lightbox-count {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--paper-light);
}
.lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  background: var(--yellow);
  border: var(--border-heavy);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

/* checkout feedback under the Take It Home button */
#backpack-receipt[data-state="err"] {
  background: var(--red);
  border: 2px solid var(--ink);
  padding: 8px 10px;
  font-size: 0.9rem;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 7500;
  background: rgba(23, 23, 23, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* little "added!" pop */
.pop {
  position: fixed;
  z-index: 8500;
  pointer-events: none;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  background: var(--yellow);
  border: var(--border-mid);
  padding: 4px 10px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: popup 0.9s var(--ease) forwards;
}
@keyframes popup {
  0% { transform: translate(-50%, 0) scale(0.7) rotate(-6deg); opacity: 0; }
  25% { transform: translate(-50%, -14px) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -52px) scale(1) rotate(3deg); opacity: 0; }
}

/* ---------- 24. FOOTER ---------- */
.site-footer { position: relative; margin-top: var(--section-space); }
.footer-checker {
  height: 46px;
  background-color: var(--ink);
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--paper-light) 0% 50%);
  background-size: 23px 23px;
}
.footer-strip {
  background: var(--pink);
  border-block: var(--border-heavy);
  padding: 10px 0;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  text-align: center;
}
.footer-main {
  background: var(--ink);
  color: var(--paper-light);
  padding-block: 44px 20px;
}
.footer-main h3 { color: var(--paper-light); font-size: 1.05rem; margin-bottom: 14px; }
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.footer-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-main a { text-decoration: none; }
.footer-main a:hover { color: var(--yellow); text-decoration: underline; }
.footer-momo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.footer-momo .logo-mark { box-shadow: 2px 2px 0 var(--teal); }
.footer-bottom {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 2px dashed rgba(248, 243, 232, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ---------- 25. MISC BLOCKS ---------- */
.callout {
  background: var(--yellow);
  border: var(--border-heavy);
  box-shadow: var(--shadow-paper);
  padding: 22px 24px;
  transform: rotate(-0.8deg);
}
.callout--teal { background: var(--teal); }
.callout--pink { background: var(--pink); }
.callout--paper { background: var(--paper-light); }

.rules { counter-reset: rule; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rules li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 14px 16px;
}
.rules li::before {
  content: counter(rule);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  background: var(--pink);
  border: 2px solid var(--ink);
  padding: 6px 0 4px;
  transform: rotate(-3deg);
}
.rules li:nth-child(even)::before { background: var(--teal); transform: rotate(3deg); }

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 14px 18px;
}
.faq summary {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  cursor: pointer;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
/* flex summaries drop the default marker, so draw our own */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pink);
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] { background: var(--paper); }
.faq p { margin: 10px 0 0; }

.who {
  background: var(--paper-light);
  border: var(--border-mid);
  box-shadow: var(--shadow-paper-sm);
  padding: 14px;
  transform: rotate(var(--rot, 0deg));
}
.who h3 { font-size: 1rem; margin: 12px 0 4px; }
.who p { font-size: 0.9rem; margin: 0; }
.who .role {
  font-family: var(--font-note);
  font-size: 0.95rem;
  color: rgba(23, 23, 23, 0.8);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* big "404" style display number */
.big-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 14rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---------- 26. MOTION ---------- */
.wiggle:hover { animation: wiggle 0.28s var(--ease) 2; }
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  33% { transform: rotate(-3deg); }
  66% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ticker-track { animation: none; transform: none; }
  .btn:hover, .project:hover, .folder:hover, .wall-tile:hover { transform: rotate(var(--rot, 0deg)); }
}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  :root { --section-space: 56px; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-subjects { display: none; }
}

@media (max-width: 900px) {
  :root { --section-space: 48px; --card-gap: 20px; }
  .header-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    margin-left: 0;
    padding-bottom: 12px;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 8px; }
  .site-nav a {
    justify-content: flex-start;
    background: var(--paper-light);
    border: var(--border-mid);
    box-shadow: 2px 2px 0 var(--ink);
  }
  .site-nav a::after { display: none; }
  .backpack-btn { order: 3; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero-card { transform: none; }
  .story, .split, .product-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post { grid-template-columns: minmax(0, 1fr); }
  .doodle--desk { display: none; }
}

@media (max-width: 620px) {
  :root { --section-space: 32px; }
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .paper { padding: 18px; }
  .hero { padding-block: 34px 44px; background-size: 24px 24px; }
  .hero-card { padding: 20px 18px 24px; }
  .hero-tagline { border-radius: 26px; padding: 6px 16px 8px; }
  .hero-badge { width: 92px; height: 92px; font-size: 0.68rem; right: -6px; bottom: 10px; }
  .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .section-head { margin-bottom: 24px; }
  .project, .folder, .wall-tile, .pinned, .post, .hero-card, .clipboard, .callout, .page-banner-card,
  .heading-scrap, .eyebrow, .product-main, .product-info, .related-card { transform: none !important; }
  .lightbox { padding: 10px; }
  .lightbox-close { top: -14px; right: -10px; width: 42px; height: 42px; }
  .doodle--mob { display: none; }
  .tape { display: none; }
  .corkboard { padding: 22px 14px; border-width: 7px; }
  .rules li { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .backpack { width: 100%; border-left: none; }
}