/* Ruan Roo Books
   Literary design in the logo's colours: warm paper, navy headings and
   footer, one copper accent. The book covers provide the rest.

   Motion is progressive: .motion on <html> (set in each page's head) turns
   on the hidden start states, and the page shows normally without it.
   Shape rule: 6px on buttons and fields, 4px on image frames.
   Spacing: 8px base; sections use --space-section.
   Z-index: header 50. */

/* Fonts are served from this site (latin subsets of Newsreader and
   Source Sans 3, SIL Open Font License; see assets/fonts/LICENSE.txt), so
   no third-party stylesheet blocks the first paint. Each file is variable,
   so one file covers several weights. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/newsreader.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f6f1e7;
  --parchment: #ede5d8;
  --ink: #292720;
  --ink-2: #4b473e;   /* 8:1 on paper */
  --ink-3: #5f5a4f;   /* 5.9:1 on paper, 5.2:1 on parchment */
  --line: rgb(41 39 32 / 0.14);
  --line-strong: rgb(41 39 32 / 0.32);
  --navy: #274257;    /* the logo navy: headings and wordmark; 9.3:1 on paper */
  --accent: #8a5530;  /* the logo copper, darkened for text: 5.4:1 on paper, 4.9:1 on parchment */
  --accent-dark: #6e4224;
  --footer: #1d3346;  /* deep logo navy */
  --on-dark: #f6f1e7;
  --on-dark-2: #b4c2cf;  /* navy-tinted, 7.2:1 on the footer */
  --focus-on-dark: #e8ac8a;
  --shadow: 41 39 32;

  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-hero: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.4vw, 2.75rem);
  --t-h3: 1.3125rem;
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --space-section: clamp(56px, 7vw, 96px);
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: 260ms var(--ease-out);
  /* fine paper fibre, tiled behind every paper and parchment surface. The three grain
     textures are pre-rendered tiles (assets/textures), not live SVG noise filters, which
     cost seconds of paint time on phones. */
  --grain-paper: url("../textures/paper-grain.webp");

  color-scheme: light;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* no double-tap zoom delay on taps */
  -webkit-tap-highlight-color: rgb(138 85 48 / 0.12); /* a faint copper tap, not the browser's blue */
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--grain-paper), var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* the hidden attribute always wins, even over components that set display */
[hidden] { display: none !important; }

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

.h1,
.h2,
.h3 {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--navy);
  text-wrap: balance;
}
.h1 { font-size: var(--t-hero); line-height: 1.08; letter-spacing: -0.01em; }
.h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.005em; }
.h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.28; }
.h1 em,
.h2 em {
  font-style: italic;
  color: var(--accent);
}

.lead {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.btn--primary { background: var(--accent); color: var(--paper); }
@media (hover: hover) { .btn--primary:hover { background: var(--accent-dark); } }
.btn--secondary { border-color: var(--line-strong); color: var(--ink); background: transparent; }
@media (hover: hover) { .btn--secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } }
.btn--small { min-height: 44px; padding: 0 18px; font-size: var(--t-small); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--ease), text-decoration-thickness var(--ease);
}
.text-link:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
.text-link svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  background: linear-gradient(rgb(var(--shadow) / 0.1), transparent);
  z-index: -1; /* under the opened phone menu */
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
/* frosted paper: the page blurs softly as it passes underneath */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--grain-paper), rgb(246 241 231 / 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}
.site-header.is-scrolled::after { opacity: 1; }
.header__inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  text-decoration: none;
  color: var(--navy);
}
.brand img { width: auto; height: 44px; }
.brand__name {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-family: var(--f-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
}
/* the small spaced BOOKS under the name, as in the logo lockup */
.brand__books {
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}
.site-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-top: 2px;
  transition: color var(--ease), border-color var(--ease);
}
.site-nav__list a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.site-nav__list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 960px) {
  .js .nav-toggle { display: inline-flex; }
  /* Without JS the links simply stay visible under the brand */
  .header__inner { flex-wrap: wrap; padding-block: 8px; }
  .site-nav { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; padding-bottom: 16px; }
  .js .header__inner { flex-wrap: nowrap; padding-block: 0; }
  .js .site-nav {
    display: none;
    position: absolute;
    /* .header__inner is the .wrap, so its padding box already spans the viewport */
    left: 0;
    right: 0;
    width: auto;
    top: 100%;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgb(var(--shadow) / 0.5);
    overscroll-behavior: contain;
  }
  .js .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: flex;
    min-height: 52px;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--line);
    padding-top: 0;
  }
  .site-nav__list a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .site-nav .btn { width: 100%; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--space-section); }
.section--parchment { background: var(--grain-paper), var(--parchment); }
.section--after-intro { padding-top: clamp(24px, 3vw, 40px); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--ink-2); max-width: 62ch; }
.section-foot { margin-top: clamp(28px, 4vw, 40px); }
.section-foot--pair { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ----------
   Text on warm paper (about 44%), and a walnut bookcase (about 56%)
   running to the right edge. The three books stand face-out inside one
   open compartment and slide out toward you on hover or focus.

   Everything is built from one unit: --u is one inch. Book width and
   thickness come from the Amazon product details (8.5 x 11 x 0.35 in,
   8.5 x 8.5 x 0.24 in, 8.5 x 11 x 0.23 in). Height follows the cover
   artwork so it is never stretched (the 2:3 files are drawn 12.75 tall).

   Light: a warm key from the upper left, in front of the case. Front
   boards and the floor catch it; the ceiling and the left inner wall
   (which faces away) sit in shade; books cast down-right onto the back.

   Layers per book never overwrite each other:
     __enter   one-time entrance (moves the group; only faces fade)
     __lift    hover and focus: slides the book out of the case
     __body    resting position: leaning back slightly, gently turned
   The pointer moves the eye (perspective-origin), not the case. */

.hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  background: var(--grain-paper), var(--paper);
}
.hero__text {
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
  padding-right: clamp(28px, 4vw, 64px);
  /* line the copy up with the page container's left edge */
  padding-left: max(var(--gutter), calc((100cqw - var(--max)) / 2 + var(--gutter)));
}
/* the copy column is a size container so the headline can fit its two
   unwrapped lines to the space it actually has */
.hero__copy { display: grid; justify-items: start; width: 100%; max-width: 34rem; container-type: inline-size; }
.hero__title {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: min(clamp(2.625rem, 0.9rem + 4.6vw, 5.25rem), 15.5cqi); /* the longest line is 6.2em */
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 24px;
}
.hero__line { display: block; white-space: nowrap; }
.hero__title em { font-style: italic; color: var(--accent); padding-bottom: 0.06em; }
.hero__lead {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 28em;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-self: stretch; max-width: 30rem; }
.hero__actions .btn { flex: 1 1 200px; }
.btn--large { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn--primary:focus-visible { outline-offset: 4px; }
.hero__note { margin-top: 14px; font-size: 1rem; color: var(--ink-2); }

/* ---------- The bookcase ---------- */

.hero__display {
  --u: calc(56cqw / 33.8);        /* one inch; the display is 56% of the hero */
  --px: 0;
  --py: 0;
  --stile: calc(var(--u) * 1.2);  /* side panels */
  --rail: calc(var(--u) * 1.1);   /* top rail */
  --inner-h: calc(var(--u) * 15.3);
  --depth: calc(var(--u) * 7);
  --board: calc(var(--u) * 1.15); /* shelf board face */
  --floor: calc(var(--rail) + var(--inner-h));
  --tallest: 12.75;
  --eye: calc(var(--u) * 6.5);
  --wood: #5e3d27;
  --wood-back: #4a2f1e;
  --wood-light: #7a5236;
  --wood-shade: #3a2416;
  --grain-h: url("../textures/wood-grain-h.webp");
  --grain-v: url("../textures/wood-grain-v.webp");
  position: relative;
  overflow: hidden;
  min-height: calc(var(--floor) + var(--board) + var(--u) * 6);
  perspective: calc(var(--u) * 60);
  perspective-origin: calc(50% + var(--px) * 7%) calc(var(--eye) + var(--py) * var(--u) * 1.6);
  background: var(--wood-shade);
  isolation: isolate;
}

.case { position: absolute; inset: 0; transform-style: preserve-3d; }
.case__parts { position: absolute; inset: 0; transform-style: preserve-3d; }
.case__parts > span { position: absolute; display: block; }

/* back panels: vertical grain, shaded under the ceiling, a pool of light */
.case__back {
  left: var(--stile);
  right: var(--stile);
  top: var(--rail);
  height: var(--inner-h);
  transform: translateZ(calc(var(--depth) * -1));
  background:
    radial-gradient(55% 60% at 36% 30%, rgb(255 222 176 / 0.26), transparent 72%),
    linear-gradient(180deg, rgb(43 23 10 / 0.55) 0%, rgb(43 23 10 / 0.2) 16%, transparent 42%, rgb(43 23 10 / 0.16) 100%),
    var(--grain-v),
    var(--wood-back);
}
.case__back--lower {
  top: calc(var(--floor) + var(--board));
  height: auto;
  bottom: calc(var(--u) * -14);   /* runs past the bottom edge so perspective never exposes a gap */
  background:
    linear-gradient(180deg, rgb(35 18 8 / 0.72) 0%, rgb(35 18 8 / 0.42) 30%, rgb(35 18 8 / 0.3) 100%),
    var(--grain-v),
    var(--wood-back);
}
/* ceiling: the underside of the top board, in shade */
.case__ceiling {
  left: var(--stile);
  right: var(--stile);
  top: calc(var(--rail) - var(--depth) / 2);
  height: var(--depth);
  transform: translateZ(calc(var(--depth) / -2)) rotateX(90deg);
  background:
    linear-gradient(180deg, rgb(35 18 8 / 0.62), rgb(35 18 8 / 0.38)),
    var(--grain-h),
    var(--wood);
}
/* floor: the shelf the books stand on, lit toward the front */
.case__floor {
  left: var(--stile);
  right: var(--stile);
  top: calc(var(--floor) - var(--depth) / 2);
  height: var(--depth);
  transform: translateZ(calc(var(--depth) / -2)) rotateX(90deg);
  background:
    linear-gradient(180deg, rgb(43 23 10 / 0.42) 0%, rgb(43 23 10 / 0.08) 55%, rgb(255 236 205 / 0.12) 100%),
    var(--grain-h),
    var(--wood-light);
}
/* inner side walls: the left faces away from the light, the right faces into it */
.case__wall {
  top: var(--rail);
  height: var(--inner-h);
  width: var(--depth);
  transform: translateZ(calc(var(--depth) / -2)) rotateY(90deg);
}
.case__wall--l {
  left: calc(var(--stile) - var(--depth) / 2);
  background: linear-gradient(90deg, rgb(35 18 8 / 0.45), rgb(35 18 8 / 0.62)), var(--grain-h), var(--wood);
}
.case__wall--r {
  right: calc(var(--stile) - var(--depth) / 2);
  background: linear-gradient(90deg, rgb(255 236 205 / 0.08), rgb(43 23 10 / 0.24)), var(--grain-h), var(--wood);
}
.case__wall--lower { top: calc(var(--floor) + var(--board)); height: auto; bottom: calc(var(--u) * -14); filter: brightness(0.7); }

/* the front frame, facing the light */
.case__rail,
.case__shelf {
  left: 0;
  right: 0;
  background:
    linear-gradient(180deg, rgb(255 240 215 / 0.28) 0, rgb(255 240 215 / 0.06) 18%, transparent 60%, rgb(43 23 10 / 0.22) 100%),
    var(--grain-h),
    var(--wood);
  box-shadow: inset 0 -1px 0 rgb(43 23 10 / 0.35);
}
.case__rail { top: 0; height: var(--rail); }
.case__shelf { top: var(--floor); height: var(--board); }
.case__stile {
  top: 0;
  bottom: 0;
  width: var(--stile);
  background:
    linear-gradient(90deg, rgb(255 240 215 / 0.16), transparent 40%, rgb(43 23 10 / 0.24)),
    var(--grain-v),
    var(--wood);
}
.case__stile--l { left: 0; box-shadow: inset -1px 0 0 rgb(43 23 10 / 0.4); }
.case__stile--r { right: 0; box-shadow: inset 1px 0 0 rgb(43 23 10 / 0.4); }

/* ---------- Books ---------- */

.case__books {
  position: absolute;
  left: var(--stile);
  right: var(--stile);
  top: calc(var(--floor) - var(--u) * var(--tallest));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--u) * 1.3);
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}
.sbook {
  --w: 8.5;
  --bw: calc(var(--u) * var(--w));
  --bh: calc(var(--u) * var(--h));
  --bt: calc(var(--u) * var(--t));
  --z: calc(var(--depth) * -1 + var(--bt) / 2 + var(--u) * 1.3);  /* standing near the back, leaning on nothing */
  --delay: calc(var(--i) * 100ms + 60ms);
  position: relative;
  width: var(--bw);
  margin-top: calc(var(--u) * (var(--tallest) - var(--h)));
  transform-style: preserve-3d;
}
.sbook__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  transform-style: preserve-3d;
}
.sbook__enter,
.sbook__lift,
.sbook__body { display: block; position: relative; transform-style: preserve-3d; }
.sbook__enter { height: var(--bh); }
.sbook__lift {
  height: var(--bh);
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}
.sbook__body {
  width: var(--bw);
  height: var(--bh);
  transform-origin: 50% 100%;
  transform: translateZ(var(--z)) rotateY(var(--turn)) rotateX(4deg);   /* tops lean back a little */
}

.face { position: absolute; display: block; backface-visibility: hidden; }
.face--front {
  inset: 0;
  transform: translateZ(calc(var(--bt) / 2));
  background: #ddd;
}
.face--front img { display: block; width: 100%; height: 100%; }
.face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgb(255 236 210 / 0.14) 0%, transparent 40%, rgb(20 10 4 / 0.16) 100%);
  pointer-events: none;
}
.face--back {
  inset: 0;
  transform: rotateY(180deg) translateZ(calc(var(--bt) / 2));
  background: var(--spine);
}
.face--spine {
  top: 0;
  height: var(--bh);
  width: var(--bt);
  left: calc(50% - var(--bt) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
  background: linear-gradient(180deg, color-mix(in srgb, var(--spine) 82%, white), var(--spine));
}
.face--fore {
  top: 0;
  height: var(--bh);
  width: var(--bt);
  left: calc(50% - var(--bt) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.26)),
    repeating-linear-gradient(90deg, #e2dacb 0 1px, #c9c0b0 1px 2px);
}
.face--top {
  left: 0;
  width: var(--bw);
  height: var(--bt);
  top: calc(var(--bt) / -2);
  transform: rotateX(90deg);
  background: repeating-linear-gradient(0deg, #f3ede2 0 1px, #ddd5c6 1px 2px);
}

/* shadow cast down-right onto the back panel; it stays when the book comes out */
.sbook__cast {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--u) * 0.9), calc(var(--u) * 0.2), calc(var(--depth) * -1 + 1px));
  background: rgb(14 7 2 / 0.6);
  filter: blur(calc(var(--u) * 0.55));
  border-radius: calc(var(--u) * 0.3);
  transition: opacity 300ms ease;
}
/* contact shadow on the floor at the book's foot */
.sbook__contact {
  position: absolute;
  left: 0;
  width: 106%;
  top: calc(var(--bh) - var(--u) * 0.9);
  height: calc(var(--u) * 1.8);
  transform: translate3d(calc(var(--u) * 0.2), -0.5px, var(--z)) rotateX(90deg);
  background: radial-gradient(closest-side at 55% 50%, rgb(38 18 6 / 0.55), transparent);
  transition: opacity 300ms ease;
}

/* ---------- Shelf cards (the labels) ---------- */

.sbook__card {
  position: relative;
  display: grid;
  gap: calc(var(--u) * 0.18);
  /* one label size for every book, as on a real shelf, centred under its book */
  width: calc(var(--u) * 7.8);
  margin-left: calc((var(--bw) - var(--u) * 7.8) / 2);
  margin-top: calc(var(--u) * 0.28);
  padding: calc(var(--u) * 0.42) calc(var(--u) * 0.5) calc(var(--u) * 0.48);
  transform: translateZ(1px);
  background: var(--paper);
  border-top: calc(var(--u) * 0.16) solid #2c1a10;   /* the clip on the shelf edge */
  border-radius: 1px 1px 3px 3px;
  box-shadow: 0 calc(var(--u) * 0.22) calc(var(--u) * 0.4) rgb(38 18 6 / 0.4);
  color: var(--ink);
  text-align: left;
  transition: background-color 180ms ease;
}
.sbook__title {
  color: var(--navy);
  hyphens: manual;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(1rem, calc(var(--u) * 0.7), 1.125rem);
  line-height: 1.25;
}
.sbook__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.9375rem, calc(var(--u) * 0.6), 1rem);
  font-weight: 600;
  color: var(--accent);
  text-underline-offset: 3px;
}
.sbook__cta svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.nowrap { white-space: nowrap; }

/* Hover and keyboard focus: the book slides out of the case toward you,
   straightening up as it comes; its shadows fade from the case */
.sbook__link:hover .sbook__lift,
.sbook__link:focus-visible .sbook__lift {
  transform: translate3d(0, calc(var(--u) * -1), calc(var(--depth) * 1.5)) rotateX(-4deg) rotateY(calc(var(--turn) * -1));
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sbook__link:hover .sbook__cast,
.sbook__link:focus-visible .sbook__cast { opacity: 0.25; }
.sbook__link:hover .sbook__contact,
.sbook__link:focus-visible .sbook__contact { opacity: 0.15; }
.sbook__link:hover .sbook__card,
.sbook__link:focus-visible .sbook__card { background: #fffdf8; }
.sbook__link:hover .sbook__cta,
.sbook__link:focus-visible .sbook__cta { text-decoration: underline; }
.sbook__link:focus-visible .sbook__card { outline: 3px solid var(--focus-on-dark); outline-offset: 3px; }

/* Entrance: once, on load, only when JS has run and motion is welcome.
   The group only moves; the faces fade, so the 3D never flattens mid-way. */
@media (prefers-reduced-motion: no-preference) {
  .js .sbook__enter { animation: sbook-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay) both; }
  .js .sbook .face,
  .js .sbook__cast,
  .js .sbook__contact { animation: sbook-fade 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay) both; }
}
@keyframes sbook-rise { from { transform: translateY(calc(var(--u) * 0.6)); } to { transform: none; } }
@keyframes sbook-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__display { perspective-origin: 50% var(--eye); }
  .sbook__link:hover .sbook__lift,
  .sbook__link:focus-visible .sbook__lift { transform: none; }
}

/* Stacked: text first, then a full-width bookcase */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__text { padding: clamp(36px, 7vw, 56px) var(--gutter) 40px; }
  .hero__display { --u: calc(100cqw / 33.8); }
}

/* Small screens: the same case, smaller. The shelf cards would be too
   small to read, so they become screen reader text (the book links keep
   their names) and a caption list under the case takes their place. */
.shelf-captions { display: none; }
@media (max-width: 599px) {
  .hero__display { min-height: calc(var(--floor) + var(--board) + var(--u) * 3); }
  .case__books { gap: calc(var(--u) * 0.9); }
  .sbook__card {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sbook__link:focus-visible .face--front { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }
  .shelf-captions { display: grid; padding: 4px var(--gutter) 12px; }
  .shelf-captions a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    border-bottom: 1px solid var(--line);
    font-family: var(--f-serif);
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--navy);
    text-decoration: none;
  }
  .shelf-captions li:last-child a { border-bottom: 0; }
  .shelf-captions svg { width: 15px; height: 15px; flex: none; fill: var(--accent); }
}

/* ---------- Cover frames ----------
   The cover is placed inside a fixed-ratio frame and scaled to fit, so the
   whole artwork shows at its true proportions. drop-shadow follows the
   visible cover rather than the frame. */

.frame { position: relative; border-radius: 4px; background: var(--parchment); }
.frame > img {
  position: absolute;
  inset: var(--frame-pad, 9%);
  width: calc(100% - 2 * var(--frame-pad, 9%));
  height: calc(100% - 2 * var(--frame-pad, 9%));
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgb(var(--shadow) / 0.14)) drop-shadow(0 12px 14px rgb(var(--shadow) / 0.22));
  transition: transform var(--ease);
}
/* a clickable cover lifts a little toward the hand */
.book-card:hover .frame > img,
.pair__item:hover .frame > img,
.feature__media:hover > img {
  transform: translateY(-4px);
}

/* ---------- Product cards ---------- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 48px) clamp(16px, 2.4vw, 32px);
}
.book-card { display: flex; flex-direction: column; }
.book-card__media { aspect-ratio: 4 / 5; --frame-pad: 9%; }
.section--parchment .book-card__media { background: var(--paper); }
.book-card__body { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; flex: 1; }
.book-card__desc { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.book-card__meta { color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
/* word search titles: the theme leads, the series name follows quietly;
   together they still read as the exact published title */
.book-card__title { display: grid; gap: 2px; }
.book-card__theme { font-size: 1.5rem; line-height: 1.15; }
.book-card__series { font-family: var(--f-sans); font-size: 1rem; font-weight: 400; color: var(--ink-2); }
.book-card__also { font-size: 1rem; color: var(--ink-2); }
.book-card__also a { position: relative; z-index: 2; color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.book-card .text-link { margin-top: auto; padding-top: 4px; }
/* 6 x 9 in books are drawn at their true size against the 8.5 x 11 in
   ones (6 / 8.5 = 0.706): the whole frame shrinks, so no frame is left
   half empty */
.book-card--portable .book-card__media { width: 70.6%; }
/* The whole card opens Amazon: the card's Amazon link stretches over it,
   so the cover is clickable with no extra tab stop. Other links in the
   card sit above the stretch. Keyboard focus rings the whole card. */
.book-card,
.pair__item { position: relative; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 6px; }
.pair__item .text-link:not(.card__link) { position: relative; z-index: 2; }
.book-card:hover .card__link,
.pair__item:hover .card__link { color: var(--accent-dark); text-decoration-thickness: 2px; }

@media (max-width: 1024px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-card .h3 { font-size: 1.125rem; }
  .book-card__theme { font-size: 1.3125rem; }
}

/* ---------- Coloring pair (homepage) ---------- */

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px);
}
/* each coloring book: its cover beside what it holds and how to look inside */
.pair__item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.pair__media { aspect-ratio: 4 / 5; --frame-pad: 8%; }
@media (max-width: 560px) {
  .pair__item { grid-template-columns: 1fr; }
  .pair__media { max-width: 320px; }
}
.pair__body { display: flex; flex-direction: column; gap: 10px; }
.pair__body > p { color: var(--ink-2); font-size: 1rem; }
.subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (max-width: 1024px) {
  .pair { grid-template-columns: 1fr; }
}

/* ---------- Publisher story ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.story__body { display: grid; gap: 16px; }
.story__body p { color: var(--ink-2); max-width: 62ch; }
.story__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
@media (max-width: 720px) {
  .story { grid-template-columns: 1fr; }
}

/* ---------- Inner page intro ---------- */

.page-intro { padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 44px); }
.page-intro__note { margin-top: 12px; font-size: var(--t-small); color: var(--ink-3); }
.page-intro .h1 { margin-bottom: 16px; }

/* Word search page: the intro sits beside a small puzzle to try */
.page-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .page-intro__grid { grid-template-columns: 1fr; } }

.ws { display: grid; gap: 12px; max-width: 26rem; }
.ws__title { font-family: var(--f-serif); font-size: clamp(1.625rem, 1.4rem + 0.7vw, 2rem); font-weight: 500; line-height: 1.2; color: var(--navy); }
.ws__hint { color: var(--ink-2); font-size: 1rem; }
/* the grid is a printed page: white sheet, letters in a quiet sans */
.ws__board {
  position: relative;
  aspect-ratio: 1;
  padding: 3%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.08), 0 20px 30px -22px rgb(var(--shadow) / 0.45);
}
.ws__grid,
.ws__marks { position: absolute; inset: 3%; }
.ws__grid { display: grid; grid-template-rows: repeat(8, 1fr); }
.ws__row { display: grid; grid-template-columns: repeat(8, 1fr); }
.ws__cell {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 600;
  color: var(--navy);
  user-select: none;
}
.ws.is-live .ws__cell { cursor: pointer; transition: background-color var(--ease), color var(--ease); }
.ws.is-live .ws__cell:hover { background: rgb(138 85 48 / 0.08); }
.ws__cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ws__cell.is-start { background: var(--accent); color: var(--paper); }
.ws__cell.is-found { color: var(--accent); }
.ws__marks { pointer-events: none; }
.ws__loop {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 999px;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .ws__loop { animation: loop-in 420ms var(--ease-out); }
}
.ws__words { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--f-serif); font-size: 1.125rem; color: var(--navy); }
.ws__words .is-found { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.ws__status { color: var(--ink-2); font-size: 1rem; min-height: 1.6em; }
@keyframes loop-in { from { opacity: 0; } }
.ws__after { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ws__after:not(:has(:not([hidden]))) { display: none; }
.ws__reset {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ws__cell { -webkit-tap-highlight-color: transparent; }
/* on phones the puzzle sits after the large books */
.ws-mount:not(:empty) { margin-top: clamp(48px, 10vw, 72px); }
/* with JS on phones the puzzle belongs below the books: never paint it in the
   intro first, or the move shifts the whole page */
@media (max-width: 860px) { .js .page-intro .ws { display: none; } }
.ws-mount .ws { max-width: 26rem; }
.ws.is-done .ws__status { color: var(--accent); font-weight: 600; }

/* ---------- Coloring feature ---------- */

.feature { padding-block: var(--space-section); border-top: 1px solid var(--line); }
.feature--parchment { background: var(--grain-paper), var(--parchment); }
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.feature--reverse .feature__media { order: 2; }
.feature__media { display: block; aspect-ratio: 1; --frame-pad: 7%; }
.feature__media--portrait { aspect-ratio: 4 / 5; }
@media (min-width: 861px) {
  /* keep the cover beside its text while the description scrolls */
  .feature__media { position: sticky; top: calc(var(--header-h) + 32px); }
}
.feature--parchment .feature__media { background: var(--paper); }
.feature__body { display: grid; gap: 18px; }
.feature__title { display: grid; gap: 8px; }
.feature__body > p { color: var(--ink-2); max-width: 60ch; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
}
.facts div { padding-block: 12px; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { font-size: 1rem; color: var(--ink); }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* the interior pages get their own row under each book, big enough to judge */
.previews { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.previews__title { font-family: var(--f-serif); font-size: 1.375rem; font-weight: 500; line-height: 1.2; color: var(--navy); }
.previews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px); max-width: 960px; }
.previews__list a { display: block; text-decoration: none; color: var(--ink-3); }
.previews__list img {
  width: 100%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color var(--ease);
}
.previews--square img { aspect-ratio: 1; }
.previews--portrait img { aspect-ratio: 2 / 3; }
.previews--portrait { max-width: 760px; }
.previews__list figcaption { font-size: 1rem; line-height: 1.35; margin-top: 6px; }
.previews__list a:hover img { border-color: var(--line-strong); }
/* phones: the pages become a swipeable row, each large enough to judge */
@media (max-width: 600px) {
  .previews__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    min-width: 0; /* a grid child: without this the row grows instead of scrolling */
    contain: paint; /* keeps the off-screen pages from widening the page itself */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .previews__list li { scroll-snap-align: start; }
}

/* The page viewer: one interior page at a time over a dimmed navy backdrop */
.viewer {
  width: min(92vw, 900px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  overflow: visible;
  overscroll-behavior: contain;
}
.viewer::backdrop { background: rgb(17 31 43 / 0.88); }
html.is-viewing { overflow: hidden; }
.viewer__figure { display: grid; justify-items: center; gap: 14px; }
.viewer__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
}
.viewer__caption { font-family: var(--f-serif); font-size: 1.1875rem; text-align: center; }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 16px; }
.viewer__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(246 241 231 / 0.35);
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}
.viewer__btn:hover { background: rgb(246 241 231 / 0.12); border-color: rgb(246 241 231 / 0.6); }
.viewer__btn svg { width: 18px; height: 18px; fill: currentColor; }
.viewer__count { min-width: 4.5em; text-align: center; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.viewer :focus-visible { outline-color: var(--focus-on-dark); }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: rise-in 260ms var(--ease-out); }
}

@media (max-width: 860px) {
  .feature__grid { grid-template-columns: 1fr; gap: 28px; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { max-width: 520px; width: 100%; }
}


/* ---------- Closing block (catalogue pages) ---------- */


.closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 404 page: the two catalogue buttons under the lead */
.not-found__actions { margin-top: 28px; margin-bottom: clamp(48px, 10vw, 128px); }

/* ---------- Contact ---------- */

.contact { padding-bottom: var(--space-section); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}
.form { display: grid; gap: 22px; }
/* the form sends through JavaScript; without it, the noscript note gives the address */
html:not(.js) [data-contact] { display: none; }
.form__noscript { color: var(--ink-2); max-width: 34em; }
.form__noscript a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 1rem; }
.field label span { color: var(--ink-3); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgb(41 39 32 / 0.45);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--ease);
}
.field input,
.field textarea { caret-color: var(--accent); }
.field textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field [aria-invalid="true"] { border-color: #a12a1c; }
.field__error { color: #a12a1c; font-size: var(--t-small); font-weight: 600; }
.field__error:empty { display: none; }
.field__hint,
.field__count { color: var(--ink-3); font-size: var(--t-small); }
.field__count { font-variant-numeric: tabular-nums; }
.form__submit { display: grid; gap: 10px; justify-items: start; }
.form__status { color: var(--ink-2); font-size: var(--t-small); }
.form__status:empty { display: none; }
/* shown, collapsed, after sending: opened only by visitors whose email app did not open */
.form__fallback {
  padding: 4px 18px;
  border-radius: 6px;
  background: var(--parchment);
  color: var(--ink-2);
  font-size: var(--t-small);
}
.form__fallback[open] { padding-bottom: 18px; }
.form__fallback-title {
  padding-block: 11px;
  line-height: 1.3;
  cursor: pointer;
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--navy);
}
.form__fallback-title::marker { color: var(--accent); }
.form__fallback-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.aside { display: grid; gap: 28px; }
.aside__item { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 4px; }
.aside__item h2 { font-family: var(--f-serif); font-size: 1.25rem; font-weight: 500; color: var(--navy); }
.aside__item p { color: var(--ink-2); }
.aside__item a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Prose ---------- */

.prose { padding-bottom: var(--space-section); }
.prose__body { max-width: 66ch; }
.prose h2 {
  color: var(--navy);
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 40px 0 10px;
}
.prose p,
.prose li { color: var(--ink-2); }
.prose p + p { margin-top: 12px; }
.prose ul { margin-top: 12px; display: grid; gap: 10px; list-style: disc; padding-left: 1.25em; }
.prose a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--footer);
  color: var(--on-dark);
  padding-top: clamp(48px, 6vw, 72px);
}
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
  padding-bottom: clamp(36px, 5vw, 56px);
}
.footer__brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.footer__mark { display: flex; align-items: center; gap: 14px; }
.footer__mark img { width: auto; height: 52px; }
.footer__word .brand__books { font-size: 0.75rem; color: var(--on-dark-2); }
.footer__word {
  font-family: var(--f-serif);
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.footer__slogan { color: var(--on-dark-2); font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; }
.footer__label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 8px;
}
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--ease);
}
.footer__col a:hover { color: var(--focus-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding-block: 20px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(246 241 231 / 0.14);
  color: var(--on-dark-2);
  font-size: var(--t-small);
}
.footer__base a { color: var(--on-dark); text-underline-offset: 3px; transition: color var(--ease); }
.footer__base a:hover { color: var(--focus-on-dark); }
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Motion ----------
   Everything here waits for .motion on <html>, which only exists when the
   visitor has not asked for reduced motion and motion.js is running. */

/* pages cross-fade into each other (browsers that support it) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }

/* Reveals: a few pictures settle into place as they enter the view.
   Headings, Amazon links, forms and book grids never wait. */
.motion [data-reveal],
.motion [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.motion [data-reveal].is-in,
.motion [data-reveal-stagger] > .is-in { opacity: 1; transform: none; }

/* Homepage intro, the one authored moment: the headline's words, then
   the line and buttons under it, while the books rise onto the shelf */
.motion [data-intro] > :not([data-split]) { animation: rise-in 600ms var(--ease-out) both; }
.motion [data-intro] > :nth-child(2) { animation-delay: 420ms; }
.motion [data-intro] > :nth-child(3) { animation-delay: 500ms; }
.motion [data-intro] > :nth-child(4) { animation-delay: 580ms; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* The homepage headline: words come into focus one after another */
.motion [data-split]:not(.is-split) { opacity: 0; }
.split__text { display: block; }
.word { display: inline-block; }
.motion .word { animation: word-in 800ms var(--ease-out) calc(var(--wi) * 70ms + 80ms) both; }
@keyframes word-in {
  from { opacity: 0; transform: translateY(0.22em); }
}

/* Scribbles: hand-drawn marks on a headline word. On the homepage they
   wait for the words; on the other pages they are the page's moment. */
.scribbled { position: relative; display: inline-block; }
.scribble {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribble path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.scribble { --draw-at: 300ms; }
.hero .scribble { --draw-at: 760ms; }
.motion .scribble path { animation: scribble-draw 1000ms cubic-bezier(0.65, 0, 0.35, 1) var(--draw-at) both; }
.motion .scribble path + path { animation-delay: calc(var(--draw-at) + 340ms); }
@keyframes scribble-draw { from { stroke-dashoffset: 1; } }
/* homepage: an underline under "an adventure." */
.scribble--underline { left: -2%; right: -1%; bottom: -0.16em; width: 103%; height: 0.32em; stroke: var(--accent); stroke-width: 3; opacity: 0.85; }
/* word search: the answer circled, as in a solved puzzle */
.scribbled:has(> .scribble--circle) { margin-inline-start: 0.14em; }
.scribble--circle { left: -5%; top: -14%; width: 112%; height: 128%; stroke: var(--accent); stroke-width: 2.4; opacity: 0.8; }
/* coloring: a wash of colour behind "world." */
.scribble--wash { left: -4%; bottom: 0.02em; width: 108%; height: 0.62em; z-index: -1; stroke: #e7c27a; stroke-width: 26; opacity: 0.55; }
.scribbled--wash { isolation: isolate; }

/* Lens: a magnifier follows the pointer over the interior previews */
.previews__list figure { position: relative; }
.lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(120px, 11vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.18), 0 0 0 5px rgb(255 253 248 / 0.9), 0 18px 34px -10px rgb(var(--shadow) / 0.45);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 260ms var(--ease-out), scale 380ms var(--ease-out);
}
.is-lensing .lens { opacity: 1; scale: 1; }
.previews__list a { cursor: zoom-in; }

/* Marquee: the whole collection drifts slowly past.
   It pauses on hover, on keyboard focus and with its Pause button
   (WCAG 2.2.2). Without motion it is a row you can scroll sideways. */
.marquee { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.marquee__track { display: flex; width: max-content; }
.marquee__list { display: flex; gap: clamp(20px, 2.6vw, 36px); padding-right: clamp(20px, 2.6vw, 36px); padding-block: 12px 28px; }
.marquee__list:first-child { padding-left: var(--gutter); }
.marquee__list a { display: block; border-radius: 3px; }
.marquee__list img {
  height: clamp(180px, 20vw, 260px);
  width: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.16), 0 16px 22px -10px rgb(var(--shadow) / 0.35);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.marquee__list a:hover img,
.marquee__list a:focus-visible img { transform: translateY(-8px); box-shadow: 0 2px 3px rgb(var(--shadow) / 0.14), 0 26px 30px -12px rgb(var(--shadow) / 0.4); }
.marquee.is-looping {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee.is-looping .marquee__list:first-child { padding-left: 0; }
.marquee.is-looping .marquee__track { animation: marquee 90s linear infinite; }
.marquee.is-looping:hover .marquee__track,
.marquee.is-looping:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
/* a cover with keyboard focus is never left under the faded edge */
.marquee.is-looping:focus-within { -webkit-mask: none; mask: none; }
/* the heading row holds the pause control, which only appears while the row moves */
.collection__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.collection__intro { display: grid; gap: 12px; }
.marquee__toggle svg { width: 14px; height: 14px; }
.marquee__toggle .icon-play,
.marquee__toggle[data-paused] .icon-pause { display: none; }
.marquee__toggle[data-paused] .icon-play { display: block; }
@media (max-width: 560px) { .collection__head { grid-template-columns: 1fr; justify-items: start; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* printing never waits for a scroll */
@media print {
  .motion [data-reveal],
  .motion [data-reveal-stagger] > *,
  .motion [data-intro] > *,
  .motion .word { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}