/* Crayon Cottage Press. Principle: the interface is ink on paper; color only
   arrives as crayon (the drawings and the book covers). */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Shantell";
  src: url("/assets/fonts/shantell.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  --paper: #fffdf8;
  --paper-2: #f5efe3;
  --paper-3: #ebe3d3;
  --ink: #26233f;
  --ink-2: #4f4b66;
  --ink-3: #67627d;
  --rule: #ddd5c5;

  --red: #e4412f;
  --yellow: #f5c02e;
  --blue: #2f6fe0;
  --green: #3baa5c;

  --font: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --hand: "Shantell", "Bricolage", cursive;

  /* type scale, ratio 1.25 on an 18px base */
  --t-sm: 0.889rem;
  --t-base: 1.125rem;
  --t-md: 1.406rem;
  --t-lg: 1.758rem;
  --t-xl: clamp(2rem, 3.6vw, 2.75rem);
  --t-2xl: clamp(2.6rem, 6.4vw, 5.4rem);

  /* spacing on an 8px ladder */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem;

  --r-sm: 6px; --r-md: 14px; --r-lg: 22px;
  --shadow-1: 0 1px 1px rgba(64, 50, 20, 0.06), 0 6px 18px -6px rgba(64, 50, 20, 0.18);
  --shadow-2: 0 2px 2px rgba(64, 50, 20, 0.06), 0 22px 44px -16px rgba(64, 50, 20, 0.32);

  --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --z-nav: 10; --z-grain: 20; --z-skip: 30;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  font-variation-settings: "opsz" 18;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
h1, h2 { font-weight: 760; font-stretch: 82%; font-variation-settings: "opsz" 96; }
h3 { font-weight: 680; font-stretch: 90%; font-variation-settings: "opsz" 40; line-height: 1.15; letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--yellow) 55%, transparent); }

/* paper grain over everything, never intercepting clicks */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
  opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: min(1240px, 100% - 2 * clamp(1rem, 4vw, 3rem)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -100px; z-index: var(--z-skip); background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: var(--s2); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--blue); border-radius: var(--r-sm); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); padding: 12px 0; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px 12px 10px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(38, 35, 63, 0.07), 0 8px 24px -14px rgba(64, 50, 20, 0.35);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 720; font-stretch: 85%; font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand svg { width: 38px; height: 38px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { position: relative; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 560; color: var(--ink-2); transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); background: var(--paper-2); } }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C20 2 40 7 60 4 S90 3 98 5' fill='none' stroke='%23e4412f' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.nav-links .short { display: none; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 14px; border: 0; font: inherit; font-weight: 620; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 10px 20px -10px rgba(38, 35, 63, 0.7);
  transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) { .btn:hover { background: #3a3660; transform: translateY(-1px); } }
.btn:active { transform: scale(0.97); }
.link {
  font-weight: 620; text-decoration: none; padding: 4px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .link:hover { background-size: 0% 2px; background-position: 100% 100%; } }
.hand { font-family: var(--hand); font-weight: 500; letter-spacing: 0; }

/* ---------- hero ---------- */
.hero { padding: clamp(2rem, 6vw, 5rem) 0 var(--s6); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--t-2xl); }
.hero-copy > p { margin-top: var(--s3); font-size: 1.25rem; color: var(--ink-2); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.hero-note { margin-top: var(--s5); display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: var(--t-sm); }
.hero-note > span:first-child { flex: none; }
.hero-note img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--paper); margin-left: -14px; box-shadow: var(--shadow-1); }
.hero-note img:first-child { margin-left: 0; }

.sheet {
  position: relative; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 1px rgba(64, 50, 20, 0.08), 0 30px 60px -28px rgba(64, 50, 20, 0.45);
}
.sheet::before, .sheet::after { /* masking tape */
  content: ""; position: absolute; width: 96px; height: 28px; top: -12px;
  background: color-mix(in srgb, var(--yellow) 30%, #fff8e2); opacity: 0.85;
  box-shadow: 0 1px 2px rgba(64, 50, 20, 0.12);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.sheet::before { left: 8%; transform: rotate(-6deg); }
.sheet::after { right: 8%; transform: rotate(5deg); }
.hero-sheet { transform: rotate(1.2deg); padding: 2%; }
.hero-sheet svg { display: block; width: 100%; height: auto; }

/* hero stage: the book first, then a page slides out and gets colored */
.stage { position: relative; aspect-ratio: 1 / 0.86; }
.stage .stage-book { position: absolute; left: 0; top: 7%; width: 47%; z-index: 2; }
.stage-page {
  position: absolute; right: 1%; top: 2%; width: 53%; margin: 0; z-index: 1;
  background: #fff; border-radius: 3px;
  box-shadow: 0 1px 1px rgba(64, 50, 20, 0.08), 0 26px 50px -24px rgba(64, 50, 20, 0.5);
  transform: translateX(-62%) rotate(-3deg) scale(0.94); opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 300ms var(--ease-standard);
}
.stage.out .stage-page { transform: translateX(0) rotate(2.5deg) scale(1); opacity: 1; }
.stage-page > svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.pg-full { transition: opacity 600ms var(--ease-standard); }
.stamp {
  position: absolute; right: -7%; bottom: -6%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--paper);
  box-shadow: 0 0 0 2px var(--ink), 0 10px 22px -10px rgba(38, 35, 63, 0.6);
  font-weight: 760; font-stretch: 82%; font-size: 0.95rem; line-height: 1.02; letter-spacing: -0.01em;
  opacity: 0; transform: rotate(-8deg) scale(1.35);
  transition: opacity 180ms var(--ease-standard), transform 420ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.stamp svg { width: 40px; height: 40px; flex: none; }
.stage.stamped .stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
.stage-bar {
  position: absolute; left: 0; right: 0; bottom: -3.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.stage-bar p { color: var(--ink-2); font-size: 1rem; }
.stage-bar .hand { color: var(--ink-3); }
.stage-next {
  font: inherit; font-weight: 620; font-size: 0.95rem; color: var(--ink); cursor: pointer;
  min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 0;
  background: var(--paper-2); transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) { .stage-next:hover:not(:disabled) { background: var(--paper-3); } }
.stage-next:active:not(:disabled) { transform: scale(0.97); }
.stage-next:disabled { color: var(--ink-3); cursor: progress; }

/* SVG drawing pieces */
.ink, .fillstroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fillgroup { mix-blend-mode: multiply; }
.crayon { pointer-events: none; }
.crayon-tip, .crayon-core { fill: var(--c); }
.crayon-wrap { fill: color-mix(in srgb, var(--c) 78%, #1b1830); }
.crayon-label { fill: color-mix(in srgb, var(--c) 35%, #fff); }
.crayon-line { stroke: color-mix(in srgb, var(--c) 30%, #fff); stroke-width: 1.6; fill: none; }
.crayon-squiggle { stroke: color-mix(in srgb, var(--c) 70%, #1b1830); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.crayon-shine { fill: #fff; opacity: 0.32; }
.crayon-shade { fill: #000; opacity: 0.14; }
.crayon-shadow { fill: #3a2c10; }
@media (prefers-reduced-motion: no-preference) {
  .crayon-bob > g { animation: bob 3.2s ease-in-out infinite; }
}
@keyframes bob { 50% { translate: 0 -3px; } }
.dot { fill: var(--ink); }
.dot-num { font-family: var(--hand); font-size: 17px; fill: var(--ink-2); }
.chart-label { font-family: var(--font); font-size: 17px; font-weight: 560; fill: var(--ink); }
.chart-num { font-family: var(--hand); font-size: 19px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.svg-note { font-family: var(--hand); font-size: 19px; fill: var(--ink); }

/* ---------- section scaffolding ---------- */
section[id] { scroll-margin-top: 96px; }
.section { padding: var(--s7) 0 calc(var(--s7) + 1rem); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: end; margin-bottom: var(--s6); }
.section-head h2 { font-size: var(--t-xl); }
.section-head p { color: var(--ink-2); max-width: 46ch; justify-self: end; }
.tint { background: var(--paper-2); }

/* ---------- shelf ---------- */
.shelves { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.shelf-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4); }
.shelf-label h3 { font-size: var(--t-lg); }
.shelf-label .hand { color: var(--ink-3); font-size: 1rem; }
.shelf-books { display: flex; align-items: flex-end; gap: clamp(1.5rem, 4vw, 3.5rem); padding: 0 var(--s2); min-height: 360px; }
.shelf-plank { height: 18px; margin-top: -2px; border-radius: 3px; background: linear-gradient(#e2d6bf, #cdbd9f); box-shadow: 0 14px 22px -12px rgba(64, 50, 20, 0.55); }
.shelf-item { flex: 1; max-width: 230px; }
.shelf-captions { min-height: 0; align-items: flex-start; }
.shelf-meta { margin-top: var(--s3); }
.shelf-meta h4 { margin: 0; font-size: 1.1rem; font-weight: 660; font-stretch: 90%; line-height: 1.25; }
.shelf-meta p { color: var(--ink-3); font-size: var(--t-sm); margin-top: 4px; }
.shelf-more { margin-top: var(--s4); }

/* 3D book */
.book3d {
  --w: 210px; --t: 9px;
  display: block; position: relative; width: var(--w); aspect-ratio: 1000 / 1293; max-width: 100%;
  perspective: 1400px; text-decoration: none;
}
.book3d-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.book3d img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px 5px 5px 2px; transform: translateZ(var(--t)); box-shadow: inset 4px 0 6px -2px rgba(0, 0, 0, 0.3); }
.book3d-inner::before { /* page block */
  content: ""; position: absolute; top: 4px; bottom: 4px; right: 0; width: calc(var(--t) * 2 - 2px);
  transform: translateX(calc(var(--t) - 1px)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fffdf6 0 2px, #e8e0cf 2px 3px);
}
.book3d-inner::after { /* back cover and cast shadow */
  content: ""; position: absolute; inset: 0; transform: translateZ(calc(var(--t) * -1));
  background: #1f1c33; border-radius: 2px 5px 5px 2px;
  box-shadow: 18px 20px 30px -8px rgba(40, 30, 10, 0.4);
}
.book3d::after { /* spine sheen */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent); pointer-events: none;
  transform: rotateY(-24deg); transform-origin: left; opacity: 0;
}
@media (hover: hover) { a.book3d:hover .book3d-inner { transform: rotateY(-6deg) rotateX(0deg) translateY(-6px); } }

/* ---------- inside (drawing demos) ---------- */
.inside-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.demo { position: relative; margin: 0; padding: var(--s3); }
.demo svg { display: block; width: 100%; height: auto; }
.demo figcaption { margin-top: var(--s2); display: grid; gap: 4px; }
.demo figcaption b { font-family: var(--hand); font-weight: 600; font-size: 1.25rem; }
.demo figcaption span { color: var(--ink-2); font-size: 1rem; }
.inside-grid { align-items: start; }
.demo-a { grid-column: 1 / span 6; transform: rotate(-0.8deg); }
.demo-b { grid-column: 8 / span 5; transform: rotate(0.7deg); margin-top: var(--s6); }
.demo-c { grid-column: 1 / span 5; transform: rotate(0.5deg); margin-top: calc(var(--s5) * -1); }
.demo-chart { grid-column: 6 / span 7; transform: rotate(-0.3deg); margin-top: var(--s5); padding: var(--s4); }
.demo-a svg, .demo-c svg { max-width: 420px; margin-inline: auto; }
.demo-chart h3 { font-size: var(--t-lg); }
.demo-chart > p { color: var(--ink-2); margin: 6px 0 var(--s3); }

/* ---------- friends ---------- */
.friends-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.sticker { margin: 0; text-align: center; }
.sticker img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 32% 38% 34% 36% / 36% 32% 38% 34%;
  border: 7px solid #fff; box-shadow: var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticker:nth-child(1) img { rotate: -4deg; }
.sticker:nth-child(2) { margin-top: var(--s5); } .sticker:nth-child(2) img { rotate: 3deg; }
.sticker:nth-child(3) img { rotate: -2deg; }
.sticker:nth-child(4) { margin-top: var(--s4); } .sticker:nth-child(4) img { rotate: 5deg; }
@media (hover: hover) { .sticker:hover img { transform: scale(1.04) rotate(-3deg); } }
.sticker figcaption { margin-top: var(--s2); font-family: var(--hand); font-size: 1.6rem; font-weight: 600; }

/* ---------- little hands ---------- */
.hands { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hands svg { width: 100%; height: auto; display: block; }
.hands-copy h2 { font-size: var(--t-xl); }
.hands-copy > p { color: var(--ink-2); margin-top: var(--s3); max-width: 40ch; }
.facts { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.facts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); }
.facts b { font-weight: 650; }
.facts span { color: var(--ink-2); }

/* ---------- footer ---------- */
.footer { padding: var(--s6) 0 var(--s4); border-top: 1px solid var(--rule); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s4); }
.footer .footer-mark { display: flex; color: var(--ink); align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 760; font-stretch: 82%; letter-spacing: -0.02em; }
.footer-mark svg { width: 52px; height: 52px; }
.footer p { color: var(--ink-2); font-size: 1rem; }
.footer h2 { font-size: 1rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; margin-bottom: var(--s2); font-variation-settings: "opsz" 18; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer ul a { text-decoration: none; color: var(--ink-2); }
@media (hover: hover) { .footer ul a:hover { color: var(--ink); text-decoration: underline; } }
.fine { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.fine p { font-size: 0.86rem; color: var(--ink-3); }

/* ---------- category pages ---------- */
.cat-hero { padding: clamp(2rem, 5vw, 4rem) 0 var(--s5); }
.crumbs { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s3); }
.crumbs a { color: var(--ink-2); }
.cat-hero h1 { font-size: var(--t-2xl); display: inline-block; position: relative; }
.cat-hero h1 svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.32em; z-index: -1; overflow: visible; }
.cat-hero > .wrap > p { margin-top: var(--s3); font-size: 1.25rem; color: var(--ink-2); max-width: 52ch; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.feature:nth-of-type(even) .feature-art { order: 2; }
.feature-art { display: grid; place-items: center; padding: var(--s4) 0; }
.feature .book3d { --w: min(330px, 70vw); --t: 11px; }
.feature h2 { font-size: var(--t-xl); }
.feature .sub { margin-top: var(--s1); font-size: var(--t-md); font-weight: 520; color: var(--ink-2); line-height: 1.3; }
.feature .desc { margin-top: var(--s3); color: var(--ink-2); max-width: 58ch; }
.ticks { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 11 C5 13 7 16 8.5 18 C11 11 15 6 20.5 2' fill='none' stroke='%233baa5c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.spec { margin-top: var(--s3); color: var(--ink-3); font-size: var(--t-sm); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.cross { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--r-lg); background: var(--paper-2); text-decoration: none; margin-top: var(--s5); }
.cross-covers { display: flex; }
.cross-covers img { width: 64px; border-radius: 3px; box-shadow: var(--shadow-1); margin-left: -18px; rotate: 4deg; }
.cross-covers img:first-child { margin-left: 0; rotate: -4deg; }
.cross b { display: block; font-size: var(--t-md); font-weight: 680; }
.cross span { color: var(--ink-2); }
@media (hover: hover) { .cross:hover { background: var(--paper-3); } }

/* ---------- free pages ---------- */
.free-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); padding: var(--s3) 0 var(--s6); }
.free-card { display: grid; gap: var(--s2); justify-items: start; }
.free-card img { width: 100%; border-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgba(64, 50, 20, 0.08), 0 20px 40px -22px rgba(64, 50, 20, 0.5); }
.free-card:nth-child(odd) img { rotate: -1deg; } .free-card:nth-child(even) img { rotate: 1deg; }
.free-card h2 { font-size: var(--t-md); margin-top: var(--s1); }
.free-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.free-teaser h2 { font-size: var(--t-xl); }
.free-teaser p { color: var(--ink-2); margin-top: var(--s2); max-width: 40ch; }
.free-fan { display: flex; justify-content: center; padding: var(--s3) 0; }
.free-fan img { width: 30%; margin-left: -9%; border-radius: 3px; background: #fff; box-shadow: 0 18px 34px -18px rgba(64, 50, 20, 0.55); transition: transform var(--dur-slow) var(--ease-out); }
.free-fan img:first-child { margin-left: 0; rotate: -8deg; } .free-fan img:nth-child(2) { rotate: -3deg; translate: 0 -8px; }
.free-fan img:nth-child(3) { rotate: 3deg; translate: 0 -8px; } .free-fan img:nth-child(4) { rotate: 8deg; }
@media (hover: hover) { .free-fan:hover img { transform: translateY(-8px); } }
@media (max-width: 980px) { .free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .free-teaser { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------- */
.prose { max-width: 70ch; padding: var(--s4) 0 var(--s7); }
.prose h1 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.prose h2 { font-size: var(--t-md); margin: var(--s5) 0 var(--s2); font-stretch: 90%; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: var(--s2); }
.prose ul { padding-left: 1.2em; display: grid; gap: 6px; }
.prose .updated { color: var(--ink-3); font-size: var(--t-sm); }

/* ---------- 404 ---------- */
.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s6) 0 var(--s7); }
.lost h1 { font-size: var(--t-2xl); }
.lost p { margin: var(--s3) 0 var(--s4); color: var(--ink-2); font-size: 1.2rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .hands, .lost { grid-template-columns: 1fr; }
  .hero-art { order: -1; margin-bottom: 3.5rem; }
  .section-head { grid-template-columns: 1fr; }
  .section-head p { justify-self: start; }
  .shelves { grid-template-columns: 1fr; }
  .inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-a, .demo-b, .demo-c, .demo-chart { grid-column: auto; margin-top: 0; transform: none; }
  .demo-a, .demo-chart { grid-column: 1 / -1; }
  .feature { grid-template-columns: 1fr; }
  .feature:nth-of-type(even) .feature-art { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav-links .long, .nav-links .nav-friends { display: none; }
  .nav-links .short { display: inline; }
  .nav-links a { padding: 10px 10px; }
  .nav-links a[aria-current="page"]::after { left: 10px; right: 10px; }
  .section { padding: var(--s6) 0; }
  .shelf-books { min-height: 0; padding: 0; gap: var(--s3); }
  .friends-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticker:nth-child(n) { margin-top: 0; }
  .inside-grid { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
  .cross { grid-template-columns: 1fr; }
  .hero-note { margin-top: var(--s4); }
}
@media (max-width: 560px) {
  .nav-bar { flex-wrap: wrap; justify-content: center; row-gap: 0; padding: 8px 10px 4px; }
  .nav-links { width: 100%; justify-content: center; border-top: 1px solid var(--rule); margin-top: 6px; }
  .nav-links .long { display: none; }
  .nav-links .short { display: inline; }
  .hands svg { width: calc(100% + 2rem); margin-inline: -1rem; }
}
@media (max-width: 420px) {
  .brand span { font-size: 1rem; }
  .stamp { font-size: 0.75rem; padding: 5px 8px 5px 5px; gap: 5px; }
  .stamp svg { width: 28px; height: 28px; }
  .stage-bar { flex-direction: column; align-items: flex-start; gap: 4px; bottom: -5.2rem; }
  .hero-art { margin-bottom: 6.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

@media (max-width: 480px) { .free-card .btn { font-size: 0.92rem; padding: 10px 14px; min-height: 44px; } }