/* ==========================================================================
   Walter Blair — shared stylesheet
   "Billboard walk": the hero is the square; each section below is a lit
   billboard in its own colour, with stretches of night in between.

   Night #0b0b1a · Marquee Gold #ffc531 · Scarf Red #d91f37 · Coral #ff5c6c
   Lagoon Teal #2ee6d6 · Dusk #2a1146 → Ember #ff7a45 · Morning #ffe9d1
   Giving section only: Ukraine Blue #0057b7 · Ukraine Yellow #ffd500

   Type: Big Shoulders (signage headlines) · Newsreader italic (the books'
   and readers' voice) · Schibsted Grotesk (everything you read and click)
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("../fonts/big-shoulders-stencil-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #0b0b1a;
  --night-2: #14152a;
  --night-3: #1d1f3a;
  --line: rgba(251, 247, 239, 0.1);
  --line-strong: rgba(251, 247, 239, 0.22);

  --gold: #ffc531;
  --gold-hot: #ffd666;
  --gold-deep: #c8900d;
  --red: #d91f37;
  --coral: #ff5c6c;
  --teal: #2ee6d6;
  --dusk: #2a1146;
  --ember: #ff7a45;
  --morning: #ffe9d1;
  --cocoa: #35200f;
  --ua-blue: #0057b7;
  --ua-yellow: #ffd500;

  --paper: #fbf7ef;
  --text: #e4e2ee;
  --muted: #a3a8c3;

  --display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", sans-serif;
  --stencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 72px;
  --radius: 22px;
  --section-y: clamp(80px, 10vw, 148px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* themed scrollbar (Firefox + modern Chromium) */
  scrollbar-color: var(--gold) var(--night);
  scrollbar-width: thin;
}
/* themed scrollbar (WebKit / older Chromium) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--coral) 55%, var(--teal));
  border: 3px solid var(--night);
  border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-hot); }
::-webkit-scrollbar-corner { background: var(--night); }

::selection { background: var(--gold); color: var(--night); }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
em { font-style: italic; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
button, input, select, textarea { font: inherit; }

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

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* film grain on the colour fields: printed-poster texture, under the content */
.grain { isolation: isolate; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.32;
}

/* ---------------------------------------------------------------- type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.eyebrow--warm { color: #ffc28f; }
.section-head--center .eyebrow::before { display: none; }

.display-2,
.display-3 {
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-2 { font-size: clamp(2.8rem, 5.8vw, 5.3rem); line-height: 0.92; }
.display-3 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 0.95; }

/* the headline accent: one phrase in the books' serif italic */
.accent {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.07em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-transform: none;
}

.text-link {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 197, 49, 0.7);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.text-link:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ---------------------------------------------------------------- buttons & tags */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.btn::after {
  content: "→";
  font-weight: 500;
  transition: transform 0.25s var(--ease);
}
.btn:hover::after { transform: translateX(3px); }
.btn--plain::after { content: none; }
.btn--gold {
  background: var(--gold);
  color: #140f02;
  box-shadow: 0 14px 34px -14px rgba(255, 197, 49, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--gold:hover { background: var(--gold-hot); transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(255, 197, 49, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn--ghost {
  background: rgba(11, 11, 26, 0.35);
  border-color: rgba(251, 247, 239, 0.45);
  color: var(--paper);
}
.btn--ghost:hover { border-color: var(--paper); background: rgba(251, 247, 239, 0.1); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: #241035; }
.btn--light:hover { background: #fff; transform: translateY(-2px); }
.btn--dark { background: var(--night); color: var(--paper); }
.btn--dark:hover { background: #1c1d3a; transform: translateY(-2px); }
.btn--sun {
  background: var(--ua-yellow);
  color: #082556;
  box-shadow: 0 14px 34px -14px rgba(255, 213, 0, 0.7);
}
.btn--sun:hover { background: #ffe14d; transform: translateY(-2px); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 0.94rem; }
.btn--block { width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.badge--red { background: var(--red); color: #fff; }
.badge--gold { background: var(--gold); color: #140f02; }

.stars { color: var(--gold); letter-spacing: 0.12em; }
a[href^="tel:"] { white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--night);
}
.site-header::after {
  /* a neon tube along the bottom edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--coral) 45%, var(--teal));
  opacity: 0.85;
  pointer-events: none;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--container) + var(--gutter) * 2);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.brand__name {
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.brand__imprint {
  margin-top: 5px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.site-nav__list a:hover { background: rgba(251, 247, 239, 0.08); color: var(--paper); }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--night-2);
  color: var(--paper);
  cursor: pointer;
}
.menu-toggle__bars { display: grid; gap: 5px; width: 22px; }
.menu-toggle__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-toggle__bars span:nth-child(2) { width: 70%; justify-self: end; background: var(--gold); }

/* mobile / tablet panel: solid, full screen, links from the top */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 36px;
  overflow-y: auto;
  background: var(--night);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
}
.menu-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--night-2);
  color: var(--paper);
  cursor: pointer;
}
.mobile-menu__nav ul { margin: 6px 0 0; padding: 0; list-style: none; }
.mobile-menu__nav a {
  display: block;
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(2rem, 7.5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.mobile-menu__nav a:hover { color: var(--gold); }
.mobile-menu__cta { margin-top: 28px; }
.mobile-menu__lines { display: grid; gap: 8px; margin: 26px 0 0; }
.mobile-menu__lines a { color: var(--text); text-decoration: none; }

@media (max-width: 1023px) {
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 559px) {
  .site-header__cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .brand__name { font-size: 1.62rem; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(660px, calc(100svh - var(--header-h)), 980px);
  overflow: hidden;
  background: #05060d;
}
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__poster { object-fit: cover; object-position: 62% 50%; }
.hero__canvas {
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__stage.is-live .hero__canvas { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 6, 16, 0.94) 0%, rgba(6, 6, 16, 0.84) 28%, rgba(6, 6, 16, 0.6) 44%, rgba(6, 6, 16, 0.2) 54%, rgba(6, 6, 16, 0) 64%),
    linear-gradient(0deg, rgba(11, 11, 26, 1) 0%, rgba(11, 11, 26, 0) 20%);
  pointer-events: none;
}
.hero__content {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 110px var(--gutter) clamp(52px, 8vh, 96px);
}
.hero__content > * { max-width: 660px; }
.hero__tagline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 197, 49, 0.4);
  border-radius: 999px;
  background: rgba(11, 11, 26, 0.6);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__title {
  margin-top: 24px;
  font-family: var(--display);
  line-height: 0.84;
  text-transform: uppercase;
}
.hero__kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 650;
  letter-spacing: 0.2em;
  line-height: 1.2;
}
.hero__title-a {
  display: block;
  color: var(--gold);
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  font-weight: 800;
  letter-spacing: 0.012em;
  text-shadow: 0 0 34px rgba(255, 197, 49, 0.35);
}
.hero__title-b {
  display: block;
  margin-top: 0.02em;
  color: var(--paper);
  font-size: clamp(3.8rem, 8.6vw, 8.4rem);
  font-weight: 900;
  letter-spacing: -0.004em;
  text-shadow: 0 0 46px rgba(0, 0, 0, 0.5);
}
.hero__lede {
  margin: 24px 0 0;
  color: var(--paper);
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.45;
}
.pulse {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ua-blue) 50%, var(--ua-yellow) 50%);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 213, 0, 0.55); }
  70% { box-shadow: 0 0 0 13px rgba(255, 213, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 213, 0, 0); }
}

@media (max-width: 1023px) {
  /* Phones and tablets: the headline sits on the lower part and gets its own backdrop, starting 56px
     above it (hero.js frames the tower to end by then), so the busy lower half of the scene never
     sits behind the text. */
  .hero { --hero-text-min: 44svh; min-height: max(720px, calc(100svh - var(--header-h))); }
  .hero__scrim { background: none; }
  .hero__content { position: relative; padding-top: var(--hero-text-min); padding-bottom: 48px; }
  .hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--hero-text-min) - 56px);
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(11, 11, 26, 0) 0, rgba(11, 11, 26, 0.88) 48px, rgba(11, 11, 26, 0.94) 140px, #0b0b1a 100%);
    pointer-events: none;
  }
}
@media (max-width: 1023px) and (orientation: portrait) {
  .hero__poster { object-position: 50% 0; }
}
@media (max-width: 719px) {
  .hero { --hero-text-min: 30svh; }
  .hero__content { padding-bottom: 36px; }
  .hero__tagline { gap: 4px 8px; padding: 0; border: 0; background: none; font-size: 0.7rem; letter-spacing: 0.05em; }
  .hero__tagline .stars { letter-spacing: 0.04em; }
  .hero__title { margin-top: 16px; }
  .hero__kicker { margin-bottom: 12px; font-size: 0.76rem; letter-spacing: 0.16em; }
  .hero__lede { margin-top: 16px; font-size: 1.08rem; }
  .hero__actions { margin-top: 22px; gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__note { margin-top: 20px; font-size: 0.93rem; }
}

/* poster capture mode (used to render the still images of the scene) */
html.poster-mode .site-header { display: none; }
html.poster-mode .hero__content,
html.poster-mode .hero__scrim,
html.poster-mode .hero__poster { visibility: hidden; }
html.poster-mode .hero { min-height: 100vh; }

/* ---------------------------------------------------------------- the zipper (one belt) */
.zipper {
  position: relative;
  overflow: hidden;
  padding: 15px 0 13px;
  background: #030407;
  border-block: 1px solid rgba(255, 197, 49, 0.22);
}
.zipper__screen {
  /* fixed LED grid: the words travel through it */
  -webkit-mask-image: radial-gradient(circle at center, #000 1.15px, transparent 1.75px);
  mask-image: radial-gradient(circle at center, #000 1.15px, transparent 1.75px);
  -webkit-mask-size: 4px 4px;
  mask-size: 4px 4px;
}
.zipper__track {
  display: flex;
  width: max-content;
  animation: belt 78s linear infinite;
}
.zipper:hover .zipper__track { animation-play-state: paused; }
.zipper__copy {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zipper__item,
.zipper__sep {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.zipper__item {
  color: var(--gold);
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(255, 197, 49, 0.8);
}
.zipper__sep {
  align-self: center;
  padding: 0 0.85em;
  color: var(--coral);
  font-size: 1.25rem;
  text-shadow: 0 0 10px rgba(255, 92, 108, 0.85);
}
@keyframes belt {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* the gold ribbon: one belt, two identical copies, tilted inside a clipping band */
.ribbon {
  position: relative;
  overflow: hidden;
  padding: 44px 0;
  background: var(--night);
}
/* clip only the band's ends, so its glow can fade out below the section instead of being cut off */
@supports (overflow: clip) {
  .ribbon { overflow: visible; overflow-x: clip; }
}
.ribbon__band {
  width: 112%;
  margin-left: -6%;
  padding: 18px 0 16px;
  background: var(--gold);
  box-shadow: 0 24px 60px -24px rgba(255, 197, 49, 0.6);
  transform: rotate(-2deg);
}
.ribbon__track {
  display: flex;
  width: max-content;
  animation: belt 128s linear infinite;
}
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__copy {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ribbon__item,
.ribbon__sep {
  flex-shrink: 0;
  color: var(--night);
  font-family: var(--display);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon__item { font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: 0.01em; }
.ribbon__item--italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
.ribbon__sep {
  align-self: center;
  padding: 0 0.6em;
  color: var(--red);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

/* ---------------------------------------------------------------- 3D books */
.book3d {
  --w: 190px;
  --d: calc(var(--w) * 0.13);
  position: relative;
  width: var(--w);
  perspective: 1500px;
}
.book3d::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -6%;
  bottom: -16px;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(3px);
  z-index: -1;
}
.book3d__body {
  position: relative;
  width: var(--w);
  transform: rotateY(28deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}
.book3d:hover .book3d__body,
.book-card:focus-within .book3d__body { transform: rotateY(9deg) rotateX(2deg) translateY(-8px); }
.book3d__front {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--d) / 2));
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.9);
}
.book3d__front img { width: 100%; height: auto; }
.book3d__front::after {
  /* hinge crease and a soft gloss across the jacket */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0.2) 2.4%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}
.book3d__spine {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: var(--d);
  height: 100%;
  padding: 12% 0 7%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.3)), var(--spine, #222);
  color: var(--spine-ink, #fff);
  font-family: var(--display);
  text-transform: uppercase;
  transform: translateZ(calc(var(--d) / -2)) rotateY(-90deg);
  transform-origin: left center;
}
.book3d__spine-title {
  font-size: calc(var(--d) * 0.5);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.book3d__spine-author {
  font-size: calc(var(--d) * 0.42);
  font-weight: 800;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
}
.book3d__pages {
  position: absolute;
  top: 1.5%;
  right: 0;
  width: calc(var(--d) - 2px);
  height: 97%;
  background: repeating-linear-gradient(90deg, #f1eadb 0 1px, #d6cbb4 1px 2px);
  transform: translateZ(calc(var(--d) / -2)) rotateY(90deg);
  transform-origin: right center;
}

/* ---------------------------------------------------------------- featured release (night + lagoon light) */
.feature {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(46% 58% at 24% 52%, rgba(46, 230, 214, 0.26), rgba(46, 230, 214, 0) 70%),
    radial-gradient(26% 34% at 30% 40%, rgba(255, 197, 49, 0.22), rgba(255, 197, 49, 0) 70%),
    var(--night);
}
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.feature__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
}
.feature__visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(580px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, rgba(46, 230, 214, 0.5), rgba(46, 230, 214, 0.14) 46%, rgba(46, 230, 214, 0) 70%);
  transform: translate(-50%, -52%);
}
.feature__visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(430px, 78%);
  aspect-ratio: 1;
  border: 1px solid rgba(46, 230, 214, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(46, 230, 214, 0.045), 0 0 0 92px rgba(46, 230, 214, 0.025);
  transform: translate(-50%, -52%);
  pointer-events: none;
}
.feature__visual > * { position: relative; z-index: 1; }
.feature__visual > .feature__badge { position: absolute; }
.feature__halo {
  position: absolute !important;
  bottom: 40px;
  width: min(520px, 90%);
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 230, 214, 0.45), rgba(46, 230, 214, 0));
  filter: blur(6px);
}
.book3d--feature { --w: clamp(250px, 25vw, 350px); }
.feature__badge { position: absolute; left: 50%; bottom: 0; margin: 0; transform: translateX(-50%); white-space: nowrap; }
.feature .eyebrow { color: var(--teal); }
.feature__byline {
  margin: 12px 0 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
}
.pull-quote {
  position: relative;
  margin: 34px 0 26px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(46, 230, 214, 0.12), rgba(46, 230, 214, 0.02));
  border: 1px solid rgba(46, 230, 214, 0.25);
}
.pull-quote p {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-style: italic;
  line-height: 1.18;
}
.pull-quote footer {
  margin-top: 12px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.feature__copy { max-width: 56ch; }
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 30px;
}
.facts__row {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.facts__row--wide { grid-column: 1 / -1; }
.facts dt {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.facts dd { margin: 0; color: var(--paper); font-size: 1.02rem; font-weight: 500; line-height: 1.4; }
.feature__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.retailers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.retailer {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.retailer__name { color: var(--paper); font-weight: 650; }
.retailer__status { color: var(--muted); font-size: 0.86rem; }

@media (max-width: 899px) {
  .feature { background: var(--night); }
  .feature__grid { grid-template-columns: 1fr; }
  .feature__visual { min-height: 0; padding: 20px 0 70px; }
  .book3d--feature { --w: min(62vw, 300px); }
}
@media (max-width: 1100px) and (min-width: 900px), (max-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__row:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- praise: a red billboard with an LED sign */
.praise {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 70% at 50% 115%, rgba(70, 0, 16, 0.5), rgba(70, 0, 16, 0) 70%),
    var(--red);
  color: #fff;
}
.praise .eyebrow { color: #fff; }
.praise .display-2 { color: #fff; }
.section-head { max-width: 800px; margin-bottom: 54px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__intro { margin: 20px 0 0; color: var(--muted); font-size: 1.14rem; }

.ledboard { max-width: 1140px; margin: 0 auto; }
.ledboard__housing {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #23243a 0%, #111222 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 60px 100px -40px rgba(60, 0, 12, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}
.ledboard__bolt {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9aa0ae, #2b2f39 70%);
}
.ledboard__bolt--tl { top: 6px; left: 6px; }
.ledboard__bolt--tr { top: 6px; right: 6px; }
.ledboard__bolt--bl { bottom: 6px; left: 6px; }
.ledboard__bolt--br { bottom: 6px; right: 6px; }
.ledboard__screen {
  position: relative;
  aspect-ratio: 4.6 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 12px 30px rgba(0, 0, 0, 0.85);
}
.ledboard__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ledboard__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(2.4rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 197, 49, 0.8);
  text-transform: uppercase;
  -webkit-mask-image: radial-gradient(circle at center, #000 1.8px, transparent 2.5px);
  mask-image: radial-gradient(circle at center, #000 1.8px, transparent 2.5px);
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
}
.ledboard.is-live .ledboard__fallback { display: none; }

.quotes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1040px;
  margin: 56px auto 0;
  padding: 0;
  list-style: none;
}
.quote {
  padding: 10px 22px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(70, 0, 16, 0.2);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.3;
}
.quotes__note { margin: 26px 0 0; color: #fff; font-size: 0.95rem; text-align: center; }

@media (max-width: 719px) {
  .ledboard__housing { padding: 12px; border-radius: 16px; }
  .ledboard__screen { aspect-ratio: 2.3 / 1; }
  .quotes { gap: 8px; }
  .quote { padding: 8px 16px 9px; }
}

/* ---------------------------------------------------------------- coming 2027: the cover's storm-blue dusk and lamplight */
.next {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background: linear-gradient(118deg, #050a1c 0%, #0b1a42 34%, #17377a 64%, #8f4a1a 90%, #c06f2a 100%);
  color: #fff;
}
.next__backdrop {
  position: absolute;
  inset: 0;
  background: url("../img/photos/dusk-backdrop.jpg") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.6;
}
.next__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 48px;
}
.next .display-2 { color: #fff; }
.next__line {
  margin: 20px 0 10px;
  color: #ffd59a;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-style: italic;
  line-height: 1.2;
}
.next__copy { max-width: 46ch; margin-bottom: 30px; color: #e9eefb; }
.next__visual { position: relative; display: grid; place-items: center; padding: 20px 0 30px; }
.next__visual::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 172, 70, 0.5), rgba(255, 172, 70, 0));
}
.book3d--next { --w: clamp(220px, 22vw, 300px); }
@media (max-width: 899px) {
  .next__grid { grid-template-columns: 1fr; }
  .next__visual { order: -1; }
  .book3d--next { --w: min(56vw, 250px); }
}

/* ---------------------------------------------------------------- the bookshelf */
.books { padding: calc(var(--section-y) * 0.7) 0 var(--section-y); background: var(--night); }
.books .display-2 { max-width: 15ch; }
.shelf-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 70px 0 30px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shelf-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.shelf-label__count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--night-3);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0;
}
.section-head + .shelf-label { margin-top: 0; }
.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelf--soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-card {
  --glow: #ffc531;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  padding: 0 26px 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 75%),
    var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.book-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--glow) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -36px color-mix(in srgb, var(--glow) 70%, transparent);
}
.book-card__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 370px;
  padding-bottom: 30px;
}
.book-card__stage::before {
  /* the lit display shelf */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glow) 60%, #fff 10%), transparent);
  box-shadow: 0 0 30px 4px color-mix(in srgb, var(--glow) 40%, transparent);
  opacity: 0.8;
}
.book-card__stage .book3d { --w: 196px; z-index: 1; }
.book-card__body { display: flex; flex-direction: column; padding-top: 14px; }
.book-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.book-card__series { color: var(--muted); font-size: 0.86rem; font-weight: 600; }
.book-card__title {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.95rem, 2.6vw, 2.45rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}
.book-card__hook {
  margin: 12px 0 16px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.38;
}
.book-card__story { margin: 0 0 18px; border-top: 1px solid var(--line); }
.book-card__story summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  color: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
}
.book-card__story summary::-webkit-details-marker { display: none; }
.book-card__story summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--night-3);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
.book-card__story[open] summary::after { transform: rotate(45deg); }
.book-card__story p { font-size: 0.98rem; }
.book-card__facts { color: var(--muted); font-size: 0.9rem !important; }
.book-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: auto; }

/* coming-soon cards sit book-beside-text on wide screens */
@media (min-width: 900px) {
  .shelf--soon .book-card { grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto; gap: 26px; align-items: end; }
  .shelf--soon .book-card__body { padding: 0 0 30px; }
}

.series {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 36px 56px;
  margin-top: 72px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(80, 140, 255, 0.3);
  border-radius: 32px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(59, 123, 255, 0.35), rgba(59, 123, 255, 0) 70%),
    linear-gradient(135deg, #172350 0%, #14152a 70%);
}
.series .eyebrow { color: #9cc0ff; }
.series__title {
  margin-bottom: 14px;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}
.series__title .accent { color: #9cc0ff; }
.series__text p { margin-bottom: 26px; }
.series__order {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.series__item { display: grid; gap: 8px; }
.series__item img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.85);
  transform: rotate(-2deg);
}
.series__item:nth-child(2) img { transform: rotate(2deg); }
.series__num {
  margin-top: 10px;
  color: #9cc0ff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.series__book { color: var(--paper); font-family: var(--display); font-size: 1.4rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.series__year { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 1023px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .shelf,
  .shelf--soon {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-color: var(--gold) transparent;
    scrollbar-width: thin;
  }
  .shelf::-webkit-scrollbar { height: 6px; }
  .shelf::-webkit-scrollbar-track { background: transparent; }
  .shelf::-webkit-scrollbar-thumb { border: 0; border-radius: 6px; background: var(--gold); }
  .book-card { padding: 0 20px 24px; scroll-snap-align: start; }
  .book-card:hover { transform: none; }
  .book-card__stage { height: 300px; }
  .book-card__stage .book3d { --w: 172px; }
  .series__order { max-width: 360px; }
}

/* ---------------------------------------------------------------- what to expect: lagoon billboard */
.expect {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
    var(--teal);
  color: #0d2f2d;
}
.expect .eyebrow { color: #0b3d3a; }
.expect .display-2 { color: var(--night); }
.expect .accent { color: #8c1026; }
.expect__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
}
.expect__fans { max-width: 34ch; margin: 26px 0 0; font-size: 1.12rem; }
.expect__fans em { color: var(--night); font-family: var(--serif); font-size: 1.12em; }
.expect__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.expect__item {
  padding: 24px 24px 26px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.expect__item h3 {
  margin-bottom: 10px;
  color: var(--night);
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-transform: uppercase;
}
.expect__item p { margin: 0; color: #0d2f2d; }
.expect__item em { font-family: var(--serif); font-size: 1.08em; }
@media (max-width: 899px) {
  .expect__grid { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .expect__list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- about */
.about {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(40% 50% at 12% 50%, rgba(217, 31, 55, 0.2), rgba(217, 31, 55, 0) 70%),
    var(--night);
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(48px, 6vw, 104px);
}
.about__photo { position: relative; margin: 0 26px 26px 0; }
.about__photo::before {
  /* a block of scarf red behind the portrait */
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--red), #8f0f22);
}
.about__photo img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
}
.about .accent { color: var(--coral); }
.about__lead {
  margin: 22px 0 22px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  font-style: italic;
  line-height: 1.3;
}
.about__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.about__facts li {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--night-2);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 550;
}
.about__quote { margin: 34px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--coral); }
.about__quote p { margin: 0; color: var(--paper); font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.45; }
.about__quote footer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 440px; }
}

/* ---------------------------------------------------------------- family: morning light */
.family {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 90% 10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%),
    var(--morning);
  color: var(--cocoa);
}
.family .eyebrow { color: #a8361f; }
.family .display-2 { color: #2a160a; }
.family .accent { color: #c0283c; }
.family__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.family__copy { max-width: 46ch; font-size: 1.14rem; }
.family .display-2 + .family__copy { margin-top: 26px; }
.family__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}
.family__photo { margin: 0; }
.family__photo--b { margin-top: 70px; }
.family__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -36px rgba(110, 50, 10, 0.55);
}
.family__photo figcaption { margin-top: 12px; color: #6b4a2f; font-family: var(--serif); font-size: 1.08rem; font-style: italic; }
@media (max-width: 899px) {
  .family__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- written after dark (lamp) */
.vault {
  --lx: 70%;
  --ly: 66%;
  position: relative;
  min-height: 760px;
  padding: clamp(96px, 12vw, 170px) 0;
  overflow: hidden;
  background: #050608;
}
.vault__photo { position: absolute; inset: 0; }
.vault__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.vault__photo--dim img { filter: brightness(0.3) saturate(0.7); }
.vault__photo--lit {
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.82) 14%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 46%);
  mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.82) 14%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 46%);
}
.vault__photo--lit img { filter: brightness(1.08) saturate(1.1); }
.vault__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 198, 112, 0.24) 0%, rgba(255, 198, 112, 0) 34%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.vault__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: end;
  gap: 48px;
}
.vault__text {
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid rgba(251, 247, 239, 0.12);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(8, 8, 16, 0.9), rgba(8, 8, 16, 0.74));
}
.vault__text p:not(.eyebrow) { margin: 20px 0 28px; color: var(--text); }
.folders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.folder {
  --r: 0deg;
  position: relative;
  min-height: 128px;
  padding: 28px 14px 16px;
  border-radius: 3px 10px 8px 8px;
  background: linear-gradient(172deg, #e6cd92 0%, #cfae6c 100%);
  color: #2e2416;
  box-shadow: 0 18px 28px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: rotate(var(--r));
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.folder:nth-child(4n + 1) { --r: -1.6deg; }
.folder:nth-child(4n + 2) { --r: 1.1deg; }
.folder:nth-child(4n + 3) { --r: -0.6deg; }
.folder:nth-child(4n + 4) { --r: 1.8deg; }
.folder:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 28px 34px -16px rgba(0, 0, 0, 0.9); }
.folder__tab {
  position: absolute;
  top: -13px;
  left: 12px;
  padding: 4px 10px 3px;
  border-radius: 6px 6px 0 0;
  background: #e6cd92;
  color: #3a2d18;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.folder__redact { display: block; width: 84%; height: 12px; margin: 0 0 8px; border-radius: 2px; background: #121212; }
.folder__redact--short { width: 52%; }
.folder__stamp {
  position: absolute;
  right: 12px;
  bottom: 14px;
  padding: 1px 8px 0;
  border: 3px solid #8e1b24;
  border-radius: 4px;
  color: #8e1b24;
  font-family: var(--stencil);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
  transform: rotate(-10deg);
}
@media (max-width: 1023px) {
  .vault__inner { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .vault { min-height: 0; }
  .folders { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; }
  .folder { min-height: 84px; padding: 20px 7px 10px; }
  .folder__tab { left: 6px; padding: 3px 5px 2px; font-size: 0.5rem; letter-spacing: 0.08em; }
  .folder__redact { height: 7px; margin-bottom: 5px; }
  .folder__stamp { right: 5px; bottom: 9px; padding: 0 4px; border-width: 2px; font-size: 0.78rem; letter-spacing: 0.06em; }
}

/* ---------------------------------------------------------------- giving: Ukraine blue (stacked over the gold sign-up) */
.giving {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 88% 25%, rgba(90, 170, 255, 0.4), rgba(90, 170, 255, 0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 25, 80, 0.45), rgba(0, 25, 80, 0) 70%),
    var(--ua-blue);
  color: #fff;
}
.giving .eyebrow { color: #ffe680; }
.giving__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}
.giving__number {
  margin: 0;
  color: var(--ua-yellow);
  font-family: var(--display);
  font-size: clamp(8rem, 19vw, 15.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.78;
  text-shadow: 0 18px 50px rgba(0, 20, 70, 0.4);
}
.giving__number span { font-size: 0.52em; vertical-align: 0.62em; margin-left: 0.04em; }
.giving__title {
  max-width: 17ch;
  margin-top: 18px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}
.giving__title .accent { color: var(--ua-yellow); }
.giving__copy { max-width: 48ch; margin: 22px 0 30px; color: #fff; }
.giving__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 50px 90px -40px rgba(0, 18, 60, 0.85), 0 0 0 6px rgba(255, 213, 0, 0.9);
}
.giving__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.giving__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 30, 90, 0.72);
  color: #fff;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-style: italic;
}
@media (max-width: 899px) {
  .giving__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- notify: a Broadway marquee on a gold wall */
.notify {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(255, 236, 170, 0.75), rgba(255, 236, 170, 0) 70%),
    var(--gold);
}
.marquee {
  position: relative;
  padding: 28px;
  border-radius: 32px;
  background: linear-gradient(180deg, #1f1a2c 0%, #0f0d18 100%);
  box-shadow: 0 60px 110px -50px rgba(90, 50, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.marquee__bulbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 204, 96, 0.95));
}
.marquee__ring {
  x: 14px;
  y: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  rx: 18px;
  fill: none;
  stroke: #ffe6a3;
  stroke-dasharray: 0 26;
  stroke-linecap: round;
  stroke-width: 7;
}
.marquee__ring--a { animation: bulbs 1.6s steps(1, end) infinite; }
.marquee__ring--b { stroke-dashoffset: 13; animation: bulbs 1.6s steps(1, end) 0.8s infinite; }
@keyframes bulbs {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
}
.marquee__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(28px, 4.4vw, 60px);
  border-radius: 20px;
  background: #0d0c16;
  box-shadow: inset 0 0 0 1px rgba(255, 197, 49, 0.22);
}
.notify__title {
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  font-weight: 900;
  line-height: 0.9;
  text-shadow: 0 0 34px rgba(255, 197, 49, 0.35);
  text-transform: uppercase;
}
.notify__title .accent { color: var(--paper); }
.notify__copy { margin: 22px 0 0; color: var(--text); }
.steps { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: 14px; }
.step__n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(255, 197, 49, 0.5);
  color: #140f02;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
}
.step__t { padding-top: 7px; color: var(--text); line-height: 1.5; }
.step__t strong { color: var(--paper); font-weight: 650; }
@media (max-width: 899px) {
  .marquee { padding: 20px; border-radius: 26px; }
  .marquee__panel { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- forms */
.form { display: grid; align-content: start; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label,
.field legend {
  padding: 0;
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.field__opt { color: var(--muted); font-weight: 500; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(251, 247, 239, 0.16);
  border-radius: 14px;
  background: #0f1024;
  color: var(--paper);
  font-size: 1.02rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: rgba(251, 247, 239, 0.3); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 197, 49, 0.22); background-color: #121330; }
.field--checks { gap: 10px; margin: 0; padding: 0; border: 0; }
.field--checks legend { margin-bottom: 4px; }
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 247, 239, 0.12);
  border-radius: 14px;
  background: #0f1024;
  color: var(--paper);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 550;
  line-height: 1.3;
  transition: border-color 0.2s, background-color 0.2s;
}
.field .check { padding: 12px 14px; font-size: 0.98rem; font-weight: 550; letter-spacing: 0; }
.check:hover { border-color: rgba(255, 197, 49, 0.45); }
.check:has(input:checked) { border-color: rgba(255, 197, 49, 0.7); background: #1a1830; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--gold); }
.check small { margin-left: 6px; color: var(--muted); font-size: 0.86rem; font-weight: 500; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__fine { margin: 0; color: var(--muted); font-size: 0.9rem; }
.form__status {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 197, 49, 0.45);
  border-radius: 14px;
  background: #1c1709;
  color: var(--paper);
}
.form__status[hidden] { display: none; }
@media (max-width: 559px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- FAQ */
.faq { padding: var(--section-y) 0; background: var(--night); }
.faq .accent { color: var(--teal); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(40px, 6vw, 96px);
}
.faq__head p:last-child { margin-top: 22px; }
.faq__list { display: grid; gap: 10px; }
.qa {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--night-2);
  transition: border-color 0.2s, background-color 0.2s;
}
.qa[open] { border-color: rgba(46, 230, 214, 0.35); background: #15192e; }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  color: var(--paper);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 550;
  line-height: 1.4;
  list-style: none;
}
.qa summary em { font-family: var(--serif); font-size: 1.1em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--night-3);
  color: var(--teal);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.qa[open] summary::after { transform: rotate(45deg); background: rgba(46, 230, 214, 0.18); }
.qa summary:hover { color: var(--teal); }
.qa p { max-width: 62ch; margin: -4px 22px 22px; }
@media (max-width: 899px) {
  .faq__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- contact */
.contact {
  padding: var(--section-y) 0;
  background:
    radial-gradient(closest-side at 18% 62%, rgba(255, 92, 108, 0.13), rgba(255, 92, 108, 0)),
    var(--night-2);
}
.contact .accent { color: var(--coral); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
}
.contact__text > p:not(.eyebrow) { margin-top: 20px; }
.contact__lines { display: grid; gap: 20px; margin: 34px 0 0; padding: 0; list-style: none; }
.contact__label {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contact__value {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 0.2s;
}
.contact__value:hover { color: var(--gold); }
.social { display: flex; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--paper);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.social a:hover { border-color: var(--gold); background: var(--gold); color: var(--night); transform: translateY(-2px); }
.contact__form {
  align-self: start;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--night-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.contact__form .field input,
.contact__form .field select,
.contact__form .field textarea { background: #11122a; }
.contact__form .btn { justify-self: start; }
@media (max-width: 899px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- map (area) */
.area { padding: clamp(70px, 8vw, 110px) 0; background: var(--night); }
.area .accent { color: var(--gold); }
.area__head { max-width: 700px; margin-bottom: 30px; }
.area__head p:last-child { margin: 16px 0 0; color: var(--muted); }
.area__map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 197, 49, 0.4);
  border-radius: 28px;
  background: #0d0e1e;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.area__map iframe {
  display: block;
  width: 100%;
  height: 360px;
  filter: grayscale(1) invert(0.9) sepia(0.32) hue-rotate(-12deg) saturate(1.3) contrast(0.92) brightness(0.92);
}
@media (max-width: 719px) {
  .area__map iframe { height: 300px; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  padding: 80px 0 30px;
  background: #06060f;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--coral) 55%, var(--gold));
  opacity: 0.85;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.brand--footer .brand__name { font-size: 2.3rem; }
.site-footer__tag {
  margin: 22px 0 10px;
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-footer__give { max-width: 40ch; color: var(--muted); font-size: 0.95rem; }
.site-footer__heading {
  margin: 6px 0 16px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-footer__nav ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--gold); }
.site-footer__contact p { margin: 0 0 10px; overflow-wrap: anywhere; }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}
.site-footer__base p { margin: 0; }
@media (max-width: 899px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zipper__track,
  .ribbon__track,
  .marquee__ring,
  .pulse { animation: none; }
  .hero__canvas { transition: none; }
  .book3d__body,
  .book-card,
  .folder,
  .btn,
  .btn::after { transition: none; }
}

/* ==========================================================================
   Multi-page additions: navigation, inner page heroes, book pages, books,
   about, contact and privacy pages.
   ========================================================================== */

/* ---------------------------------------------------------------- nav: books menu + current page */
.site-nav__group { position: relative; }
.site-nav__list .site-nav__books { display: inline-flex; align-items: center; gap: 9px; }
.site-nav__books::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.75;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.site-nav__group:hover .site-nav__books::after,
.site-nav__group:focus-within .site-nav__books::after { transform: translateY(3px) rotate(225deg); }
.site-nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 80;
  width: 330px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--night-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0.2s;
}
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.site-nav__group:hover .site-nav__sub,
.site-nav__group:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.site-nav__list .site-nav__sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 14px;
}
.site-nav__sub small { color: var(--muted); font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.site-nav__all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.site-nav__list .site-nav__all a { color: var(--gold); }
.site-nav__list a[aria-current="page"] { background: rgba(255, 197, 49, 0.14); color: var(--gold); }
.site-nav__list .site-nav__books.is-section { color: var(--gold); }

.mobile-menu__sub {
  margin: 0 0 12px;
  padding: 4px 0 4px 18px;
  list-style: none;
  border-left: 2px solid rgba(255, 197, 49, 0.4);
}
.mobile-menu__nav .mobile-menu__sub a {
  padding: 9px 0;
  border-bottom: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
.mobile-menu__nav a[aria-current="page"],
.mobile-menu__nav .mobile-menu__sub a[aria-current="page"],
.mobile-menu__lines a[aria-current="page"] { color: var(--gold); }

/* ---------------------------------------------------------------- breadcrumbs + inner page heroes */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.88rem;
}
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; opacity: 0.55; }
.crumbs a { color: var(--text); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current="page"] { color: var(--paper); font-weight: 550; }

.page-hero {
  --glow-a: rgba(255, 197, 49, 0.16);
  --glow-b: rgba(46, 230, 214, 0.1);
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 110px);
  overflow: hidden;
  /* closest-side: each light reaches zero before it meets an edge of the section */
  background:
    radial-gradient(closest-side at 78% 50%, var(--glow-a), transparent),
    radial-gradient(closest-side at 12% 70%, var(--glow-b), transparent),
    var(--night);
}
.page-hero--contact { --glow-a: rgba(255, 92, 108, 0.2); --glow-b: rgba(255, 197, 49, 0.09); }
.page-hero--privacy { --glow-a: rgba(46, 230, 214, 0.15); --glow-b: transparent; }
@media (max-width: 899px) {
  .page-hero { background: radial-gradient(circle 220px at 86% 230px, var(--glow-a), transparent), var(--night); }
}
.page-hero__title { max-width: 16ch; }
.page-hero__lead { max-width: 60ch; margin: 22px 0 0; color: var(--text); font-size: 1.18rem; }
.page-hero__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; gap: 40px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.jump a {
  display: inline-flex;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.jump a:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 899px) {
  .page-hero__split { grid-template-columns: 1fr; align-items: start; }
}

/* ---------------------------------------------------------------- book pages: the hero billboard in the cover's colours */
.book-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px) 0 clamp(72px, 9vw, 120px);
  background:
    radial-gradient(45% 60% at 26% 58%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 70%),
    linear-gradient(135deg, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%);
  color: #fff;
}
.book-hero .crumbs ol { color: rgba(255, 255, 255, 0.78); }
.book-hero .crumbs a { color: #fff; }
.book-hero .crumbs [aria-current="page"] { color: #fff; }
.book-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.book-hero__visual { position: relative; display: grid; place-items: center; min-height: 540px; }
.book-hero__visual::before {
  content: "";
  position: absolute;
  width: min(520px, 96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent), transparent 68%);
}
.book-hero__visual > * { position: relative; }
.book3d--hero { --w: clamp(240px, 25vw, 340px); }
.book-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.book-hero__series { color: rgba(255, 255, 255, 0.9); font-size: 0.92rem; font-weight: 600; }
.book-hero__title {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(3.4rem, 8vw, 7.6rem);
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}
.book-hero__byline { margin: 16px 0 0; color: var(--accent); font-family: var(--serif); font-size: 1.55rem; font-style: italic; }
.book-hero__hook {
  max-width: 30ch;
  margin: 22px 0 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-style: italic;
  line-height: 1.25;
}
.book-hero__hook-attr {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.book-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.92rem;
  font-weight: 600;
}
.chip small { font-weight: 500; opacity: 0.85; }
@media (max-width: 899px) {
  .book-hero__grid { grid-template-columns: 1fr; }
  .book-hero__visual { min-height: 0; padding: 10px 0 34px; }
  .book3d--hero { --w: min(60vw, 280px); }
}

/* the story + book details */
.story { padding: var(--section-y) 0; background: var(--night); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1.1em; }
.prose__lead { color: var(--paper); font-size: 1.28rem; line-height: 1.55; }
.story .prose { margin-top: 26px; }
.story__pull {
  margin: 34px 0 0;
  padding: 28px 30px;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--night-2);
}
.story__pull p { margin: 0; color: var(--paper); font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-style: italic; line-height: 1.25; }
.story__pull footer { margin-top: 12px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* book pages: a short author card under the story; the red offset echoes the block behind the About portrait */
.author-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  max-width: 66ch;
  margin-top: 44px;
  padding: 22px 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--night-2);
}
.author-card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--red);
}
.author-card__name {
  margin: 6px 0 8px;
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.author-card__text p:not(.eyebrow) { margin: 0 0 12px; color: var(--text); font-size: 0.98rem; line-height: 1.55; }
@media (max-width: 479px) {
  /* phones: the photo beside the label and name, the bio full width below */
  .author-card {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: "photo eyebrow" "photo name" "text text" "link link";
    align-items: end;
    gap: 0 16px;
    padding: 18px;
  }
  .author-card__text { display: contents; }
  .author-card__photo { grid-area: photo; align-self: start; box-shadow: 6px 6px 0 var(--red); }
  .author-card .eyebrow { grid-area: eyebrow; margin: 0; }
  .author-card__name { grid-area: name; align-self: start; margin: 6px 0 0; }
  .author-card__text p:not(.eyebrow) { grid-area: text; margin: 18px 0 12px; }
  .author-card .text-link { grid-area: link; justify-self: start; }
}
@media (max-width: 399px) {
  .author-card .eyebrow::before { display: none; }
}
.details {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.details__title { margin-bottom: 12px; color: var(--paper); font-family: var(--display); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
.details__list { margin: 0 0 22px; }
.details__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.details__row dt { color: var(--accent, var(--gold)); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.9; text-transform: uppercase; }
.details__row dd { margin: 0; color: var(--paper); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .story__grid { grid-template-columns: 1fr; }
  .details { position: static; }
}

.series-wrap { padding: 0 0 var(--section-y); background: var(--night); }
.series-wrap .series,
#series .series { margin-top: 0; }
#series { margin-top: 72px; }
.series__item a { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.series__item img { transition: transform 0.3s var(--ease); }
.series__item a:hover img { transform: rotate(0deg) translateY(-6px); }
.series__item a:hover .series__book { color: var(--gold); }
.series__here {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.buy-band {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(255, 240, 190, 0.7), rgba(255, 240, 190, 0) 70%),
    var(--gold);
  color: #2b2106;
}
.buy-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.buy-band .eyebrow { color: #5a4207; }
.buy-band .display-3 { max-width: 30ch; color: var(--night); }
.buy-band .accent { color: #8c1026; }
.buy-band p { margin: 14px 0 0; color: #2b2106; font-weight: 500; }

.more { padding: var(--section-y) 0; background: var(--night); border-top: 1px solid var(--line); }
.more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.more__head .display-3 { margin: 0; }
.mini-books {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mini-book { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.mini-book__cover {
  display: grid;
  place-items: end center;
  height: 300px;
  margin-bottom: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 75%),
    var(--night-2);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.mini-book__cover img { width: auto; max-height: 250px; border-radius: 4px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.mini-book:hover .mini-book__cover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--glow) 50%, transparent); }
.mini-book__status { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mini-book__title { color: var(--paper); font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mini-book:hover .mini-book__title { color: var(--gold); }
@media (max-width: 899px) {
  .mini-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .mini-book__cover { height: 220px; padding: 16px; }
  .mini-book__cover img { max-height: 180px; }
  .mini-book__title { font-size: 1.25rem; }
}

/* links on shelves and cards */
.book-card__stage { text-decoration: none; }
.book-card__title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.book-card__title a:hover { color: var(--gold); }
.next__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about__actions { margin-top: 30px; }

/* ---------------------------------------------------------------- books page */
.catalog { padding: 34px 0 var(--section-y); background: var(--night); }
.catalog > .container > .shelf-label:first-child { margin-top: 0; }
.billboards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.billboard {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: end;
  gap: 28px;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background:
    radial-gradient(60% 70% at 18% 82%, color-mix(in srgb, var(--glow) 50%, transparent), transparent 70%),
    linear-gradient(135deg, var(--b1), var(--b2) 60%, var(--b3));
  color: #fff;
}
.billboard__visual { display: grid; place-items: end center; text-decoration: none; }
.billboard__visual .book3d { --w: 176px; }
.billboard__meta { margin: 0 0 12px; }
.billboard__title { font-family: var(--display); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 900; line-height: 0.92; text-transform: uppercase; }
.billboard__title a { color: #fff; text-decoration: none; }
.billboard__title a:hover { color: var(--accent); }
.billboard__hook { margin: 12px 0 18px; font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1.35; }
.billboard__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1023px) {
  .billboards { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .billboard { grid-template-columns: 1fr; padding: 26px; }
  .billboard__visual { justify-self: center; padding-bottom: 10px; }
}

.sealed {
  padding: var(--section-y) 0;
  background:
    radial-gradient(50% 70% at 100% 50%, rgba(255, 197, 49, 0.12), rgba(255, 197, 49, 0) 70%),
    var(--night-2);
}
.sealed__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 90px); }
.sealed__text p:not(.eyebrow) { margin: 20px 0 28px; }
@media (max-width: 1023px) {
  .sealed__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- about page */
.about-hero {
  position: relative;
  padding: clamp(36px, 5vw, 64px) 0 var(--section-y);
  background:
    radial-gradient(40% 50% at 12% 62%, rgba(217, 31, 55, 0.22), rgba(217, 31, 55, 0) 70%),
    var(--night);
}
.about-hero .about__grid { margin-top: 8px; }
.about-hero .accent { color: var(--coral); }
.chapter { padding: var(--section-y) 0; background: var(--night); }
.chapter--alt { background: var(--night-2); }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); }
.chapter__head--wide { max-width: 760px; margin-bottom: 44px; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.steps-row__item { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--night-3); }
.steps-row__n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: #140f02;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 900;
}
.steps-row__item h3 { margin-bottom: 10px; color: var(--paper); font-family: var(--display); font-size: 1.75rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.steps-row__item p { margin: 0; }
@media (max-width: 899px) {
  .chapter__grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr; }
}

.novels { padding: var(--section-y) 0; background: var(--night); }
.novels__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.novels__list--next { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.novel a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "cover n" "cover title" "cover note";
  grid-template-rows: 1fr auto 1fr;
  column-gap: 20px;
  row-gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--night-2);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.novel a:hover { transform: translateY(-3px); border-color: rgba(255, 197, 49, 0.45); }
.novel__n { grid-area: n; align-self: end; color: var(--gold); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.novel__cover { grid-area: cover; align-self: center; }
.novel__cover img { width: 100%; border-radius: 4px; box-shadow: 0 20px 34px -16px rgba(0, 0, 0, 0.9); }
.novel__title { grid-area: title; color: var(--paper); font-family: var(--display); font-size: 1.7rem; font-weight: 900; line-height: 0.95; text-transform: uppercase; }
.novel__note { grid-area: note; align-self: start; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.novel--next a { background: linear-gradient(135deg, rgba(46, 230, 214, 0.12), rgba(46, 230, 214, 0) 70%), var(--night-2); }
.novel--next .novel__n { color: var(--teal); }
@media (max-width: 1023px) {
  .novels__list,
  .novels__list--next { grid-template-columns: 1fr; }
}

.cta-band {
  position: relative;
  padding: clamp(64px, 8vw, 110px) 0;
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(255, 240, 190, 0.7), rgba(255, 240, 190, 0) 70%),
    var(--gold);
  color: #2b2106;
}
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.cta-band__quote { margin: 0; }
.cta-band__quote p { margin: 0; color: var(--night); font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-style: italic; line-height: 1.22; }
.cta-band__quote footer { margin-top: 14px; color: #5a4207; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta-band__title { flex-basis: 100%; margin-bottom: 6px; color: var(--night); font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; line-height: 0.95; text-transform: uppercase; }
.text-link--dark { color: var(--night); text-decoration-color: rgba(11, 11, 26, 0.5); }
.text-link--dark:hover { color: #8c1026; text-decoration-color: #8c1026; }
@media (max-width: 899px) {
  .cta-band__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- contact page */
.contact__lines--hero { margin: 0; }
.reasons { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.reason a {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--night-3);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.25s var(--ease), background-color 0.2s;
}
.reason a:hover,
.reason a:focus-visible { border-color: rgba(255, 197, 49, 0.55); transform: translateX(4px); }
.reason a.is-picked { border-color: var(--gold); background: #24223e; }
.reason__title { color: var(--paper); font-weight: 650; }
.reason__copy { color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------- privacy page */
.policy { padding: 10px 0 var(--section-y); background: var(--night); }
.policy .prose { max-width: 72ch; }
.policy .prose h2 { margin: 46px 0 14px; color: var(--paper); font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.policy .prose h2:first-child { margin-top: 0; }
.policy .prose ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.policy .prose li { margin-bottom: 0.5em; }
.policy .prose strong { color: var(--paper); }

/* ---------------------------------------------------------------- footer additions */
.social--footer { margin: 24px 0 0; }
.site-footer .social a { color: var(--paper); }
.site-footer .social a:hover { color: var(--night); }
.site-footer__area { color: var(--muted); }
.site-footer a[aria-current="page"] { color: var(--gold); }

/* books page: the five covers fanned beside the headline. The new novel stands in front; each cover
   behind it shows about 60% of its face. */
.page-hero__split--fan { align-items: center; }
.cover-fan { position: relative; width: min(100%, 540px); aspect-ratio: 27 / 17; margin-inline: auto; }
.cover-fan::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  background: radial-gradient(closest-side, rgba(255, 197, 49, 0.2), rgba(255, 197, 49, 0));
  pointer-events: none;
}
.cover-fan img {
  position: absolute;
  bottom: 6%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease);
}
.cover-fan img:nth-child(1) { left: 0; z-index: 1; width: 26%; transform: rotate(-9deg) translateY(3%); }
.cover-fan img:nth-child(2) { left: 15.5%; z-index: 2; width: 28%; transform: rotate(-4.5deg); }
.cover-fan img:nth-child(3) { left: 32.5%; z-index: 3; width: 35%; transform: translateY(-5%); }
.cover-fan img:nth-child(4) { left: 56.5%; z-index: 2; width: 28%; transform: rotate(4.5deg); }
.cover-fan img:nth-child(5) { left: 74%; z-index: 1; width: 26%; transform: rotate(9deg) translateY(3%); }
.cover-fan:hover img:nth-child(1) { transform: rotate(-12deg) translate(-4%, 2%); }
.cover-fan:hover img:nth-child(2) { transform: rotate(-6deg) translateX(-3%); }
.cover-fan:hover img:nth-child(3) { transform: translateY(-8%); }
.cover-fan:hover img:nth-child(4) { transform: rotate(6deg) translateX(3%); }
.cover-fan:hover img:nth-child(5) { transform: rotate(12deg) translate(4%, 2%); }
@media (max-width: 899px) {
  .cover-fan { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-fan img { transition: none; }
}

.notify__anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ==========================================================================
   2026-10-14, from Walter's calls: his imprint line ("Published by" and his name, with the oblong WBP logo),
   the genre line in a Times Roman face, store lists without Amazon, and daylight sections
   (white, sky and sand) between the night billboards.
   ========================================================================== */
.brand { flex-direction: row; align-items: center; gap: 12px; }
.brand__words { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__mark { flex: none; width: auto; height: 34px; }
.brand__imprint { letter-spacing: 0.16em; }
.brand--footer .brand__mark { height: 74px; }
@media (max-width: 420px) {
  .brand { gap: 9px; }
  .brand__mark { height: 28px; }
  .brand__name { font-size: 1.6rem; }
  .brand__imprint { font-size: 0.56rem; letter-spacing: 0.12em; }
}

.imprint { display: inline-flex; align-items: center; gap: 10px; }
.imprint__mark { flex: none; width: auto; height: 1.6em; }
.imprint__text { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.imprint--dd .imprint__mark { height: 20px; }
.imprint--dd .imprint__text { font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.imprint--lg .imprint__mark { height: 54px; }
.imprint--lg .imprint__text { font-size: 0.9rem; }
.hero__tagline .imprint__mark { width: auto; height: 22px; }
.book-hero__imprint { margin: 14px 0 0; color: var(--paper); font-size: 0.78rem; }
.book-hero__imprint .imprint__mark { height: 26px; }

.genre {
  margin: 18px 0 0;
  color: var(--paper);
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.genre--footer { margin: 20px 0 10px; }

.retailers__label {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.retailers__label + .retailers { margin-top: 10px; }
.retailer--more { border-style: dashed; }
.retailer--more .retailer__name { color: var(--muted); font-weight: 600; }

.stores { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.store {
  padding: 7px 14px;
  border: 1px solid rgba(43, 33, 6, 0.35);
  border-radius: 999px;
  color: #2b2106;
  font-size: 0.92rem;
  font-weight: 650;
}
.store--more { border-style: dashed; font-weight: 500; }

/* COVID-19 Retribution: the Times Square illustration on a white page */
.spotlight { padding: var(--section-y) 0; background: var(--paper); color: #1d1a14; }
.spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.spotlight__photo { margin: 0; }
.spotlight__photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 40px 70px -32px rgba(11, 11, 26, 0.6); }
.spotlight .eyebrow { color: #8c1026; }
.spotlight .display-2 { color: var(--night); }
.spotlight .accent { color: #c8202f; }
.spotlight__copy { max-width: 44ch; margin: 22px 0 0; color: #2a2620; font-size: 1.16rem; }
.spotlight__copy em { font-family: var(--serif); font-size: 1.06em; }
.spotlight__imprint { margin: 24px 0 0; color: var(--night); }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.spotlight .btn--ghost { background: transparent; border-color: rgba(11, 11, 26, 0.35); color: var(--night); }
.spotlight .btn--ghost:hover { border-color: var(--night); background: rgba(11, 11, 26, 0.05); }
@media (max-width: 899px) {
  .spotlight__grid { grid-template-columns: 1fr; }
  .spotlight__photo { max-width: 420px; }
}

.spotlight__photo figcaption,
.world__lead figcaption,
.world__note,
.setting__note {
  margin: 10px 0 0;
  color: rgba(29, 26, 20, 0.62);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* a daylight band for a book's real setting */
.setting {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 50vw, 620px);
  overflow: hidden;
  background: #1b2a44; /* under the photo: the text stays readable if it hasn't loaded */
}
.setting__photo { position: absolute; inset: 0; margin: 0; }
.setting__photo img { width: 100%; height: 100%; object-fit: cover; }
.setting::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 10, 24, 0.74) 0%, rgba(5, 10, 24, 0.28) 42%, rgba(5, 10, 24, 0) 68%);
  pointer-events: none;
}
.setting__text { position: relative; z-index: 1; width: 100%; padding-block: 40px 44px; }
.setting .eyebrow { color: var(--gold); }
.setting .display-2 { color: #fff; }
.setting__line { max-width: 44ch; margin: 14px 0 0; color: #fff; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); font-style: italic; }
.setting__note { color: rgba(255, 255, 255, 0.72); }

/* home: from the White House to the whole world, on white */
.world { padding: var(--section-y) 0; background: #fff; color: #1d1a14; }
.world .eyebrow { color: #8c1026; }
.world .display-2 { color: var(--night); }
.world .accent { color: #c8202f; }
.world .section-head__intro { color: #3a352c; }
.world__lead { margin: 40px 0 0; }
.world__lead img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 30px 60px -32px rgba(11, 11, 26, 0.5); }
.places {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.place { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #1b2a44; }
.place__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.place img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.place:hover img { transform: scale(1.04); }
.place::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 10, 24, 0.72), rgba(5, 10, 24, 0) 52%);
  pointer-events: none;
}
.place__name {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.place:has(.place__book) .place__name { bottom: 40px; }
.place__book { position: absolute; left: 16px; bottom: 15px; z-index: 1; color: var(--gold); font-family: var(--serif); font-size: 1rem; font-style: italic; }
.place__link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (max-width: 1099px) {
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .place:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .place__name { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .place img { transition: none; }
}

/* books page: the Hudson in daylight behind the covers */
.page-hero--day { background: #d6e8f7; }
.page-hero__day { position: absolute; inset: 0; z-index: 0; }
.page-hero__day img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-hero--day::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(244, 249, 255, 0.92) 0%, rgba(244, 249, 255, 0.74) 42%, rgba(244, 249, 255, 0) 74%);
  pointer-events: none;
}
.page-hero--day > .container { position: relative; z-index: 1; }
.page-hero--day .crumbs ol,
.page-hero--day .crumbs a,
.page-hero--day .crumbs [aria-current="page"] { color: var(--night); }
.page-hero--day .eyebrow { color: #8c1026; }
.page-hero--day .page-hero__title { color: var(--night); }
.page-hero--day .accent { color: #c8202f; }
.page-hero--day .page-hero__lead { color: #1f2a3a; }
.page-hero--day .genre { color: var(--night); }
.page-hero--day .jump a { border-color: rgba(11, 11, 26, 0.3); background: rgba(255, 255, 255, 0.6); color: var(--night); }
.page-hero--day .cover-fan::before { display: none; }
@media (max-width: 899px) {
  .page-hero--day { background: #d6e8f7; }
  .page-hero--day::after { background: linear-gradient(180deg, rgba(244, 249, 255, 0.94) 0%, rgba(244, 249, 255, 0.78) 58%, rgba(244, 249, 255, 0.25) 100%); }
}
/* phones: the hero headline must stay low enough for the tower above it (hero.js frames to the headline) */
@media (max-width: 639px) {
  .genre--hero { display: none; }
}

/* ==========================================================================
   2026-10-21, from Walter's calls of 2026-10-20 (notes/calls-2026-10-21.md):
   - "Published by" in italics, his name in capitals, larger wherever it appears, in a serif whose
     J has a top serif (from a distance the old grotesque "JD" read as "3D");
   - the logo larger in the top-left corner, and repeated in the book sections and beside the copyright;
   - his spine on the two new 3D books; "Contact the author" under the copyright; the Keyway Websites credit.
   ========================================================================== */
@font-face {
  font-family: "Newsreader Caps";
  src: url("../fonts/newsreader-caps-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-005F, U+00A9, U+00B7, U+2013-2014, U+2019, U+2022;
}
:root { --imprint: "Newsreader Caps", Georgia, "Times New Roman", serif; }

/* the two halves of the imprint, wherever it is set */
.imprint__by {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.imprint__name {
  font-family: var(--imprint);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.imprint__text { font-weight: inherit; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* header, mobile menu and footer brand: a bigger logo, a bigger imprint line */
.brand__mark { height: 50px; }
.brand__imprint {
  display: block;
  margin-top: 6px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.brand__imprint .imprint__name { font-size: 0.88em; letter-spacing: 0.07em; }
.brand--footer .brand__mark { height: 84px; }
.brand--footer .brand__imprint { font-size: 1.08rem; }
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand__mark { height: 40px; }
  .brand__name { font-size: 1.55rem; }
  .brand__imprint { margin-top: 5px; font-size: 0.86rem; letter-spacing: 0; }
  .brand--footer .brand__mark { height: 70px; }
}
@media (max-width: 359px) {
  .brand { gap: 8px; }
  .brand__mark { height: 34px; }
  .brand__name { font-size: 1.4rem; }
  .brand__imprint { font-size: 0.76rem; }
}

/* the hero: the big impression ("Do we have a big impression of that, though, anywhere?") */
.hero__imprint { display: flex; align-items: center; gap: 18px; margin: 0; }
.hero__imprint .imprint__mark { flex: none; width: auto; height: 64px; }
.hero__imprint .imprint__text { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.hero__imprint .imprint__by { color: var(--gold); font-size: 1.3rem; }
.hero__imprint .imprint__name { color: var(--paper); font-size: clamp(1.6rem, 2.3vw, 2.05rem); letter-spacing: 0.06em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
@media (max-width: 719px) {
  .hero__imprint { gap: 13px; }
  .hero__imprint .imprint__mark { height: 46px; }
  .hero__imprint .imprint__text { gap: 4px; }
  .hero__imprint .imprint__by { font-size: 1.02rem; }
  .hero__imprint .imprint__name { font-size: 1.36rem; }
}

/* the same lockup, smaller, in the book sections */
.imprint .imprint__by { margin-right: 0.12em; }
.next__imprint { margin: 0 0 22px; }
.imprint--next { gap: 14px; color: #fff; }
.imprint--next .imprint__mark { height: 44px; }
.imprint--next .imprint__by { color: #ffd59a; font-size: 1.15rem; }
.imprint--next .imprint__name { font-size: 1.12rem; }
.book-card__imprint,
.billboard__imprint { margin: -4px 0 16px; color: var(--paper); }
.imprint--card { gap: 10px; }
.imprint--card .imprint__mark { height: 30px; }
.imprint--card .imprint__by { color: var(--gold); font-size: 1.02rem; }
.imprint--card .imprint__name { font-size: 0.95rem; }
.book-hero__imprint { margin: 16px 0 0; font-size: 1rem; }
.book-hero__imprint .imprint__mark { height: 40px; }
.book-hero__imprint .imprint__by { color: var(--gold); font-size: 1.12rem; }
.book-hero__imprint .imprint__name { font-size: 1.05rem; }
.imprint--lg { gap: 16px; }
.imprint--lg .imprint__mark { height: 62px; }
.imprint--lg .imprint__by { font-size: 1.25rem; }
.imprint--lg .imprint__name { font-size: 1.3rem; }
.imprint--dd { gap: 10px; }
.imprint--dd .imprint__mark { height: 28px; }
.imprint--dd .imprint__name { font-size: 0.98rem; letter-spacing: 0.06em; }
@media (max-width: 420px) {
  .imprint--next .imprint__mark { height: 38px; }
  .imprint--next .imprint__by { font-size: 1.02rem; }
  .imprint--next .imprint__name { font-size: 1rem; }
  .imprint--card .imprint__mark { height: 26px; }
  .imprint--card .imprint__by { font-size: 0.95rem; }
  .imprint--card .imprint__name { font-size: 0.88rem; }
  .imprint--lg .imprint__mark { height: 50px; }
  .imprint--lg .imprint__by { font-size: 1.08rem; }
  .imprint--lg .imprint__name { font-size: 1.08rem; }
}

/* the gold ribbon and the LED ticker */
.ribbon__item--imprint em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.ribbon__item--imprint { letter-spacing: 0.02em; }
.zipper__item--imprint em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }

/* 3D books: the spine's depth can follow the real book (Collateral Consequences: 1 1/4 in on 9 1/4 in) */
.book3d { --d: calc(var(--w) * var(--spine-k, 0.13)); }
.book3d__spine--art { padding: 0; overflow: hidden; background: var(--spine, #222); }
.book3d__spine--art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.book3d__spine--art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.08) 45%, rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* footer: his contact block under the copyright, the logo beside it; the credit apart, at the right */
.site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.site-footer__base { align-items: flex-start; gap: 24px 40px; }
.site-footer__imprint { display: grid; gap: 18px; }
.site-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--text); }
.site-footer__mark { flex: none; width: auto; height: 34px; }
.site-footer__address { display: grid; gap: 4px; color: var(--text); font-style: normal; line-height: 1.5; }
.site-footer__address .site-footer__heading { margin: 0 0 6px; }
.site-footer__address a { overflow-wrap: anywhere; }
.site-footer__fine { display: grid; gap: 8px; justify-items: end; text-align: right; }
.site-footer .site-footer__credit a { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site-footer .site-footer__credit a:hover { color: var(--gold); }
@media (max-width: 899px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .site-footer__base { flex-direction: column; }
  .site-footer__fine { justify-items: start; text-align: left; }
}

/* contact lines: the mailing address, in the same voice but smaller than the email and phone */
.contact__value--addr { display: block; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }

/* 2026-10-21 fixes from the width checks: the imprint may wrap between its parts (never inside the name) in
   narrow boxes such as the Publisher cell at 1024px, and the footer brand shrinks on very small phones. */
.imprint { flex-wrap: wrap; row-gap: 6px; }
.imprint__text { white-space: normal; }
.imprint__by, .imprint__name { white-space: nowrap; }
.brand--footer { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 359px) {
  .brand--footer .brand__mark { height: 54px; }
  .brand--footer .brand__name { font-size: 1.9rem; }
  .brand--footer .brand__imprint { font-size: 0.9rem; }
}
/* (an older 11px overflow at 320px on the About page's novel cards) */
@media (max-width: 359px) {
  .novel a { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
}

/* ==========================================================================
   2026-10-22 (round 5): Walter's list prices, "tastefully, probably in white, somewhere next to each book or on the
   bottom centered": small white figures under each book wherever the books are shown, and a Price row in each book's
   details. None for Collateral Consequences (not out yet).
   ========================================================================== */
.price {
  color: #fff;
  font-family: var(--imprint);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
/* the shelves: centred under the book, below its lit shelf */
.book-card__price { position: absolute; left: 0; right: 0; bottom: -12px; z-index: 2; text-align: center; }
.book-card--priced .book-card__body { padding-top: 30px; }
@media (min-width: 900px) {
  .shelf--soon .book-card--priced .book-card__body { padding-top: 0; }
}
/* the books page's coming-soon boards */
.billboard__price { margin-top: 18px; text-align: center; }
/* each book's own page: under the 3D book */
.book-hero__price { margin: 26px 0 0; font-size: 1.12rem; text-align: center; }
/* the series card, "Keep reading" and the About page's list */
.series__price,
.mini-book__price { font-size: 0.95rem; }
.novel__price { display: block; margin-top: 8px; font-size: 0.95rem; }

/* ==========================================================================
   2026-10-24 (round 6, notes/round6-worklist-2026-10-24.md section A):
   - his imprint is now "Published by WALTER BLAIR, JD" (his page 7): "Published by" in italics and not bold, the name
     in bold capitals. The longer name keeps the same lockup everywhere; it gets room on narrow screens below;
   - his statement under the first Collateral Consequences cover on the site (the home page's "Coming next");
   - the D.C.-area map in its own colours (his voicemail: "Trees are green, water is blue ... is it attractive?").
   ========================================================================== */
.foot-copy-line .imprint__name { font-size: 0.98em; letter-spacing: 0.05em; }
.about__fact-imprint { white-space: nowrap; }
.about__fact-imprint .imprint__name { letter-spacing: 0.05em; }

.next__statement {
  position: relative;
  max-width: 40ch;
  margin: 34px auto 0;
  color: #eef2fc;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}
.next__statement::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 18px;
  background: #ffd59a;
  opacity: 0.8;
}
@media (max-width: 899px) {
  .next__statement { margin-top: 30px; font-size: 1rem; }
}

/* the map: Google's own colours (green parks, blue water, white and yellow roads), a touch richer; no night filter */
.area__map iframe { filter: saturate(1.35) contrast(1.05); }

/* the longer name on narrow phones (checked at 320, 360, 375 and 390 px): the header line steps down a little and,
   below 360 px, puts "Published by" above the name; the hero lockup and the Publisher cell get the same care */
@media (max-width: 389px) {
  .brand__imprint { font-size: 0.78rem; }
}
@media (max-width: 374px) {
  .brand { gap: 8px; }
  .brand__mark { height: 34px; }
  .brand__imprint { font-size: 0.75rem; }
  .imprint--dd .imprint__name { font-size: 0.86rem; letter-spacing: 0.03em; }
}
@media (max-width: 359px) {
  .brand__imprint { font-size: 0.8rem; line-height: 1.15; }
  .brand__imprint .imprint__by { display: block; }
  .hero__imprint { gap: 10px; }
  .hero__imprint .imprint__mark { height: 38px; }
  .hero__imprint .imprint__name { font-size: 1.12rem; }
  .details__row { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .imprint--dd .imprint__name { font-size: 0.75rem; letter-spacing: 0.02em; }
  /* (older: the 12-letter titles, e.g. CONSEQUENCES, were a little wider than a 320 px screen) */
  .book-hero__title { font-size: 3rem; }
}

/* ==========================================================================
   2026-10-25 (round 7, notes/round7-worklist-2026-10-25.md section B):
   - the e-book price ($9 for every e-book) right under each book's price, a little smaller;
   - the COVID-19 RETRIBUTION price under the home page's big 3D book;
   - the books page: one board for the new novel first and one for the book coming next last, around the three
     published ones (the QR codes on the jackets will open this page);
   - "Second Edition" under The Sanction's title wherever the book is shown: small gold capitals.
   ========================================================================== */
.price__main,
.price__ebook { display: block; }
.price__ebook {
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.86;
}
/* the shelves: the first line stays where the price always sat; the e-book line goes below it */
.book-card__price { top: calc(100% - 7px); bottom: auto; }
.book-card--priced .book-card__body { padding-top: 48px; }
/* the coming-soon cards sit book-beside-text on wide screens: lift both books and their shelf a little (so the two
   stay level), and hang the price under the shelf inside the card */
@media (min-width: 900px) {
  .shelf--soon .book-card__stage { height: 390px; padding-bottom: 50px; }
  .shelf--soon .book-card__stage::before { bottom: 36px; }
  .shelf--soon .book-card__price { top: auto; bottom: -2px; }
}

/* the home page's new novel: its price under the book, kept together with it */
.feature__visual { align-content: center; }
.feature__price { margin: 18px 0 0; font-size: 1.12rem; text-align: center; }
@media (min-width: 900px) {
  .feature__visual { padding-bottom: 50px; }   /* room for the "Coming December 10, 2026" badge under the price */
}

/* the books page: a single board in its row */
.billboards--single { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .billboards--single .billboard { grid-template-columns: 230px minmax(0, 640px); padding: 40px 48px; }
}

/* "Second Edition" (The Sanction) */
.edition {
  display: block;
  margin: 10px 0 0;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.book-hero__edition { margin-top: 16px; font-size: 0.88rem; letter-spacing: 0.2em; }
.series__edition,
.mini-book__edition { margin-top: 0; }
.novel__edition { margin: 0 0 6px; }

/* ==========================================================================
   2026-10-27 (round 8, notes/round8-worklist-2026-10-27.md section B, item 5):
   Walter's Ukrainian embroidered cloth replaces the old field photo in "Giving back" (his Ukrainian friends asked
   for the cloth), with his caption typed below the photo ("This cloth reflects the cultural identity of Ukraine.").
   His photo is a portrait phone picture of only 560 x 746 pixels, so it is a portrait figure no larger than it stays
   sharp (at most 400 px wide), beside the text from tablet width up and under it on phones; the caption sits
   under the photo instead of on it.
   ========================================================================== */
.giving__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
.giving__photo {
  justify-self: center;
  width: min(100%, 400px);
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.giving__photo picture { display: block; }
.giving__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 746;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 50px 90px -40px rgba(0, 18, 60, 0.85), 0 0 0 6px rgba(255, 213, 0, 0.9);
}
.giving__photo figcaption {
  position: static;
  margin: 26px auto 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 899px) {
  .giving__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
}
@media (max-width: 639px) {
  .giving__grid { grid-template-columns: minmax(0, 1fr); }
  .giving__photo { width: min(100%, 300px); }
  .giving__photo figcaption { font-size: 1.08rem; }
}

/* ==========================================================================
   2026-10-29 (round 9, Walter's call of 2026-10-28):
   1. The home page's footer, right after the Washington map, leads with his signature portrait (the photo on both
      back covers) where the WBP logo was ("Take the logo out, and put my picture right there"). Only the home page
      has it (build_pages.py footer(portrait=True)); the small logo by the copyright stays. The photo is 739 px wide,
      so at 168 px it stays sharp up to 3x screens. It stands beside the brand text wherever the brand block is
      wide enough (640-899 px, where it spans the footer, and from 1240 px); on phones and between 900 and 1239 px,
      where the brand column is narrower, it sits above the text, as the logo did on phones.
   2. The "Coming soon" shelf: from 900 px its two cards put the book beside the text, which only fits from about
      1180 px; between 900 and 1179 px the text column was 81 to 218 px wide, so "Consequences" and the imprint line
      ran out of the card (and, at 900 to 966 px, past the page edge: up to 34 px of sideways scroll). Between those
      widths the two cards now take a full row each, book beside text as before.
   3. The new COVID-19 RETRIBUTION price ("$29.99 US · $38.99 CAN") is too long for one line in the narrow cards
      ("Keep reading" on the book pages, the About page's list): there it shows one currency per line.
   4. The photo strip on the narrowest phones (under 360 px): the place names step down a little, so the new
      WASHINGTON (and SAUDI ARABIA, which already touched it) stays inside its card.
   ========================================================================== */
.site-footer__portrait { width: 168px; margin: 0 0 24px; }
.site-footer__portrait picture { display: block; }
.site-footer__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 739 / 1490;
  border-radius: 16px;
  box-shadow: 0 0 0 2px rgba(255, 197, 49, 0.7), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
@media (min-width: 640px) and (max-width: 899px), (min-width: 1240px) {
  .site-footer__brand--portrait {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 30px;
    align-items: start;
  }
  .site-footer__brand--portrait > .site-footer__portrait { grid-row: 1 / -1; margin: 0; }
  .site-footer__brand--portrait > :not(.site-footer__portrait) { grid-column: 2; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .shelf--soon { grid-template-columns: minmax(0, 1fr); }
}
.mini-book__price .price__part,
.novel__price .price__part { display: block; }
.mini-book__price .price__sep,
.novel__price .price__sep { display: none; }
@media (max-width: 359px) {
  .place__name { font-size: 1.3rem; }
}

/* ==========================================================================
   2026-11-01 (round 10, Walter's calls and voicemails of Oct 30 - Nov 1; record notes/round10-site-2026-11-01.md):
   1. His statement under the Collateral Consequences cover: he found the italic hard to read, so it is now the site's
      clearer italic (Schibsted Grotesk, the text face) a little larger, with the sentence finished.
   2. His signature portrait leaves the footer for its own big band right after the Washington map ("that big dead
      space ... about twice the size of the Ukrainian cloth ... almost close to half the size of the page"), brightened.
      About 460 px wide on computers but never taller than the window; the full content width on phones (up to 360 px).
   3. The Editor's Cup by Walter Blair: the crown over The Sanction's 3D book, the band on the home page and on The
      Sanction's page, the menu items, and the page itself (editors-cup.html).
   ========================================================================== */

/* 1. the Collateral Consequences statement: a clearer italic, a little larger */
.next__statement {
  max-width: 44ch;
  color: #f5f7fd;
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 450;
  line-height: 1.62;
  letter-spacing: 0.002em;
}
@media (max-width: 899px) {
  .next__statement { font-size: 1.1rem; }
}

/* 2. his portrait, big, right after the map */
.signature {
  position: relative;
  padding: clamp(40px, 5vw, 80px) 0 clamp(72px, 9vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(closest-side at 26% 50%, rgba(255, 197, 49, 0.17), transparent),
    radial-gradient(closest-side at 78% 62%, rgba(255, 92, 108, 0.08), transparent),
    var(--night);
}
.signature__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.signature__photo { margin: 0; }
.signature__photo picture { display: block; }
.signature__photo img {
  display: block;
  /* about 460 px wide, but the whole portrait always fits in the window (739 x 1490 is about 1 : 2) */
  width: min(460px, calc(92vh * 739 / 1490));
  height: auto;
  aspect-ratio: 739 / 1490;
  border-radius: 26px;
  box-shadow: 0 0 0 3px rgba(255, 197, 49, 0.85), 0 0 70px -12px rgba(255, 197, 49, 0.4), 0 60px 100px -40px rgba(0, 0, 0, 0.95);
}
.signature__text .display-2 { font-size: clamp(3rem, 6.4vw, 6rem); }
.signature__line { max-width: 34ch; margin: 22px 0 0; color: var(--text); font-size: 1.22rem; line-height: 1.5; }
.signature__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 899px) {
  /* phones and tablets: the full content width, up to 360 px (350 px on a 390 px iPhone, about 706 px tall) */
  .signature__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .signature__photo { justify-self: center; width: min(100%, 360px); }
  .signature__photo img { width: 100%; }
}
@media (min-width: 640px) and (max-width: 899px) {
  /* tablets: photo and text side by side, as on computers; the whole photo still fits the window */
  .signature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signature__photo { width: min(100%, 360px, calc(92vh * 739 / 1490)); }
}

/* 3. The Editor's Cup ------------------------------------------------------------------------------ */
/* before and after the close date (main.js initCup swaps them; without script the page shows "open") */
[data-cup-open][hidden],
[data-cup-closed][hidden] { display: none !important; }

/* the menus */
.site-nav__cup { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.site-nav__list .site-nav__cup a { color: var(--gold); }
.site-nav__list .site-nav__cup a span { display: inline-flex; align-items: center; gap: 9px; }
.site-nav__list .site-nav__cup a span::before {
  content: "";
  flex: none;
  width: 21px;
  height: 15px;
  background: url("../img/editors-cup-crown.svg") center / contain no-repeat;
}
.site-nav__cup small { color: rgba(255, 197, 49, 0.82); }
/* phones: the item in the menu's own colours (gold there means "the page you're on"), with a small gold tag */
.mobile-menu__cup small {
  display: inline-block;
  margin-left: 12px;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #140f02;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: 0.45em;
}

/* the crown over The Sanction's 3D book: always above the book, never over its SECOND EDITION / WALTER BLAIR */
.cup-crowned {
  --cw: 190px;                        /* the book's width; the crown is sized from it */
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: calc(var(--cw) * 0.5);
}
.cup-crowned .book3d { --w: var(--cw); }
.cup-crowned__crown {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: calc(var(--cw) * 0.66);
  height: auto;
  margin-left: calc(var(--cw) * -0.31);
  transform: rotate(3deg);
  transform-origin: 50% 90%;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(255, 197, 49, 0.45));
  pointer-events: none;
  transition: top 0.7s var(--ease);
  animation: crown-float 4.5s ease-in-out infinite alternate;
}
.cup-crowned:hover .cup-crowned__crown { top: -8px; }   /* rises with the book */
@keyframes crown-float {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}

/* the band: home page (after "The books") and The Sanction's page (after its hero) */
.cup-band { padding: 0 0 var(--section-y); background: var(--night); }
.cup-band--sanction { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(40px, 5vw, 70px); }
.cup-band__board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 64px);
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(55% 75% at 22% 48%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 70%),
    radial-gradient(35% 45% at 22% 22%, rgba(255, 197, 49, 0.22), transparent 70%),
    linear-gradient(135deg, var(--b1) 0%, var(--b2) 58%, var(--b3) 100%);
  box-shadow: 0 0 0 1px rgba(255, 197, 49, 0.5), 0 0 0 7px rgba(255, 197, 49, 0.07), 0 60px 110px -50px rgba(0, 0, 0, 0.9);
  color: #fff;
}
.cup-band__visual { display: grid; place-items: center; padding: 6px 0 18px; }
.cup-crowned--band { --cw: clamp(150px, 15vw, 200px); }
.cup-band__text .eyebrow { margin-bottom: 14px; color: var(--gold); }
.cup-by {
  color: #ffe2a0;
  font-family: var(--serif);
  font-size: 1.3em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.cup-band__title {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}
.cup-band__title .accent { color: var(--gold); }
.cup-band__copy { max-width: 52ch; margin: 20px 0 0; color: rgba(255, 255, 255, 0.94); font-size: 1.08rem; }
.cup-band__dates { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; }
.cup-band__dates span {
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.92rem;
  font-weight: 600;
}
.cup-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
@media (max-width: 899px) {
  .cup-band__board { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .cup-band__visual { padding-bottom: 8px; }
  .cup-crowned--band { --cw: min(46vw, 190px); }
}

/* the page: hero */
.cup-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px) 0 clamp(72px, 9vw, 120px);
  background:
    radial-gradient(40% 60% at 76% 56%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 70%),
    radial-gradient(26% 36% at 76% 26%, rgba(255, 197, 49, 0.24), transparent 70%),
    linear-gradient(135deg, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%);
  color: #fff;
}
.cup-hero .crumbs ol { color: rgba(255, 255, 255, 0.78); }
.cup-hero .crumbs a,
.cup-hero .crumbs [aria-current="page"] { color: #fff; }
.cup-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.cup-hero .eyebrow { color: var(--gold); }
.cup-title { margin: 0; }
.cup-title__name {
  display: block;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(3.4rem, 8vw, 7.4rem);
  font-weight: 900;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}
.cup-title__by {
  display: block;
  margin-top: 14px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}
.cup-hero__lead { max-width: 40ch; margin: 22px 0 0; color: #fff; font-size: 1.22rem; line-height: 1.5; }
.cup-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.cup-fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.24);
}
.cup-fact__big { color: var(--gold); font-family: var(--display); font-size: 2.1rem; font-weight: 900; line-height: 0.9; text-transform: uppercase; }
.cup-fact__label { color: rgba(255, 255, 255, 0.92); font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.cup-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cup-status { margin: 16px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; font-weight: 600; }
.cup-status--closed { color: #fff; font-size: 1.05rem; }
.cup-hero__visual { display: grid; place-items: center; }
.cup-crowned--hero { --cw: clamp(230px, 22vw, 300px); }
@media (max-width: 899px) {
  .cup-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cup-hero__visual { order: -1; }
  .cup-crowned--hero { --cw: min(54vw, 240px); }
  .cup-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the page: Walter's letter, on paper */
.cup-letter { padding: var(--section-y) 0 calc(var(--section-y) * 0.55); background: var(--night); }
.cup-letter__card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 60px);
  border-radius: 28px;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ead2 100%);
  box-shadow: 0 0 0 1px rgba(255, 197, 49, 0.55), 0 50px 100px -50px rgba(0, 0, 0, 0.95);
  color: #2a2116;
  font-size: 1.14rem;
  line-height: 1.7;
}
.cup-letter__card .eyebrow { color: #a3101f; }
.cup-letter__card p:not(.eyebrow) { margin: 0 0 1em; }
.cup-letter__card em { font-family: var(--sans); }
.cup-letter__hi { font-weight: 700; }
.cup-letter__card .cup-letter__sign { margin: 1.5em 0 0.35em; color: #15131f; font-family: var(--serif); font-size: 2.3rem; font-style: italic; line-height: 1; }
.cup-letter__card .cup-letter__imprint { margin: 0; color: #4a3b26; font-size: 1rem; }
.cup-letter__imprint .imprint__by { color: #8f0f22; }

/* the page: how to enter */
.cup-how { padding: calc(var(--section-y) * 0.55) 0 var(--section-y); background: var(--night); }
.cup-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(36px, 6vw, 90px);
}
.cup-steps { margin-top: 30px; }
.cup-steps .step__t { font-size: 1.06rem; }
.cup-how__mail { margin: 18px 0 0; color: var(--text); }
.cup-how__actions { margin-top: 32px; }
.cup-sample {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 197, 49, 0.38);
  border-radius: 24px;
  background: var(--night-2);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, 0.9);
}
.cup-sample__title { margin: 0 0 14px; color: var(--paper); font-family: var(--display); font-size: 1.7rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.cup-sample__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cup-sample__table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.cup-sample__table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--paper); vertical-align: top; }
.cup-sample__table td:first-child { width: 3.6em; color: var(--gold); font-weight: 700; }
.cup-sample__table tr:last-child td { border-bottom: 0; }
.cup-sample__note { margin: 16px 0 0; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 899px) {
  .cup-how__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .cup-sample__table { font-size: 0.95rem; }
  .cup-sample__table th,
  .cup-sample__table td { padding: 10px 6px; }
}

/* the page: the prize, on the gold wall */
.cup-prize {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 24% 40%, rgba(255, 240, 190, 0.8), rgba(255, 240, 190, 0) 70%),
    var(--gold);
  color: #1a1204;
}
.cup-prize__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}
.cup-prize__number {
  margin: 0;
  color: var(--night);
  font-family: var(--display);
  font-size: clamp(7rem, 17vw, 13.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.8;
}
.cup-prize__title {
  max-width: 18ch;
  margin-top: 18px;
  color: var(--night);
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}
.cup-prize__title .accent { color: #8f0f22; }
.cup-prize__copy { max-width: 44ch; margin: 20px 0 0; color: #2a1f08; font-size: 1.1rem; }
.cup-timeline { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cup-timeline__stop {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px 22px 18px 60px;
  border-radius: 20px;
  background: #0d0c16;
  box-shadow: 0 30px 60px -36px rgba(90, 50, 0, 0.8);
  color: var(--paper);
}
.cup-timeline__stop::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 197, 49, 0.75);
}
.cup-timeline__date { color: var(--gold); font-family: var(--display); font-size: 1.75rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.cup-timeline__what { color: var(--text); font-size: 0.98rem; line-height: 1.35; }
@media (max-width: 899px) {
  .cup-prize__grid { grid-template-columns: minmax(0, 1fr); }
}

/* the page: the official rules */
.cup-rules { padding: var(--section-y) 0; background: var(--night); }
.cup-rules__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(36px, 6vw, 90px);
}
.cup-rules__head { position: sticky; top: calc(var(--header-h) + 30px); }
.cup-rules__intro { margin: 18px 0 0; color: var(--muted); }
.cup-rules__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.cup-rules__list li {
  position: relative;
  padding: 18px 22px 18px 66px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--night-2);
  color: var(--text);
  line-height: 1.6;
  counter-increment: rule;
}
.cup-rules__list li::before {
  content: counter(rule);
  position: absolute;
  left: 18px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 197, 49, 0.14);
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
}
.cup-rules__list strong { color: var(--paper); font-weight: 700; }
.cup-rules__list .text-link { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .cup-rules__grid { grid-template-columns: minmax(0, 1fr); }
  .cup-rules__head { position: static; }
}
@media (max-width: 479px) {
  .cup-rules__list li { padding: 16px 16px 16px 58px; }
  .cup-rules__list li::before { left: 14px; }
}

/* the page: the closing band, in The Sanction's red */
.cup-cta {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0309 0%, #8f0f22 60%, #d91f37 100%);
  color: #fff;
}
.cup-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 40px; }
.cup-cta__title { color: #fff; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; line-height: 0.95; text-transform: uppercase; }
.cup-cta__text p { max-width: 48ch; margin: 12px 0 0; color: rgba(255, 255, 255, 0.94); font-size: 1.1rem; }
.cup-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

@media (prefers-reduced-motion: reduce) {
  .cup-crowned__crown { animation: none; transition: none; }
}

/* 2026-11-01 shop:start */
/* ==========================================================================
   2026-11-01: the buying flow (notes/build/shop_2026_11_01.py). The cart in the header, on every page, and the red
   10% note on the Books page. The buying pages themselves are styled by assets/css/shop.css.
   The count is the number of books in the cart (assets/js/cart.js); the badge hides when the cart is empty.
   ========================================================================== */
.cart-link {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: 44px;
  margin-left: -18px;               /* 14 px after "Notify me" (the bar's gap is 32 px) */
  padding: 0 14px 0 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--night-2);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.cart-link:hover,
.cart-link[aria-current="page"] { border-color: var(--gold); color: var(--gold); }
.cart-link__icon { flex: none; width: 24px; height: 24px; }
.cart-link__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #140f02;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
}
.cart-link__count[hidden] { display: none; }
.cart-link.is-bumped .cart-link__count { animation: cart-bump 0.5s var(--ease); }
@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-link.is-bumped .cart-link__count { animation: none; }
}
/* narrower than 1180 px: the icon alone (as square as the menu button), the count on its corner */
@media (max-width: 1179px) {
  .cart-link { justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; }
  .cart-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cart-link__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.78rem;
    box-shadow: 0 0 0 2px var(--night);
  }
}
/* 1024-1179 px: the menu links and the bar's gaps a little closer, so the cart fits beside "Notify me" */
@media (min-width: 1024px) and (max-width: 1179px) {
  .site-header__bar { gap: 20px; }
  .site-nav__list { gap: 2px; }
  .site-nav__list a { padding-inline: 11px; }
  .cart-link { margin-left: -8px; }
}
/* tablets: "Notify me", the cart and the menu button 12 px apart */
@media (max-width: 1023px) {
  .cart-link { margin-left: -20px; }
  .cart-link + .menu-toggle { margin-left: -20px; }
}
/* under 720 px there is no room for "Notify me" too (it is in the menu) */
@media (max-width: 719px) {
  .site-header__cta { display: none; }
  .cart-link { margin-left: auto; }
}
/* phones: the logo, the cart and the menu button 12 px apart */
@media (max-width: 559px) {
  .site-header__bar { gap: 12px; }
  .cart-link + .menu-toggle { margin-left: 0; }
}
/* under 520 px: "Published by" goes above his name, as it already did under 360 px, to make room for the cart */
@media (max-width: 519px) {
  .site-header__bar .brand__name { white-space: nowrap; }
  .site-header__bar .brand__imprint { line-height: 1.15; }
  .site-header__bar .brand__imprint .imprint__by { display: block; }
}
@media (max-width: 389px) {
  .cart-link,
  .menu-toggle { width: 44px; height: 44px; }
}
/* the smallest phones: the header's logo and name a little smaller, so the cart and the menu button still fit */
@media (max-width: 359px) {
  .site-header__bar { gap: 8px; }
  .site-header__bar .brand { gap: 7px; }
  .site-header__bar .brand__mark { height: 28px; }
  .site-header__bar .brand__name { font-size: 1.28rem; }
  .site-header__bar .brand__imprint { font-size: 0.74rem; }
}

/* the Books page: Walter's 10% for 2 or more books, in the red of the order pages */
.deal-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
  margin: 0 0 clamp(34px, 4vw, 48px);
  padding: 16px 20px;
  border: 1.5px solid rgba(217, 31, 55, 0.55);
  border-radius: 16px;
  background: #fdecef;
  color: #b3132b;
  line-height: 1.35;
}
.deal-note__icon { flex: none; width: 32px; height: 32px; }
.deal-note__text { min-width: 0; }
.deal-note__head { display: block; font-size: 1.3rem; font-weight: 800; }
.deal-note__sub { display: block; margin-top: 4px; color: #4b4759; font-size: 1.04rem; font-weight: 600; }
.deal-note__sub strong { color: #14152a; font-weight: 800; }
.deal-note .nowrap { white-space: nowrap; }
/* 2026-11-01 shop:end */

/* 2026-11-02 round11:start */
/* ==========================================================================
   2026-11-02 (round 11, Walter's texts and call of Nov 1; record notes/round11-site-2026-11-02.md).
   Put in by notes/build/round11_2026_11_02.py from notes/build/round11/round11.css (a re-run replaces this block).
   1. The Editor's Cup crown in the menus, always visible: Walter, "make the red (or gold) crown show up on the dropdown
      menu ... on the top right of the word (item) of that menu. and so even without mousing over the dropdown menu
      the crown shows, and its evident this is something special and grabs attention."
   2. His art-show note near the twins ("please add this photo and info to my website near where I have the twins"): a
      small card in the family section of the home page and the About page; it hides itself after December 5, 2026.
   3. The children's section, "It Will Be Great" by Maisha M., coming soon: lighter and warmer than the thrillers
      (Walter: "not as dark"), in the site's own type and buttons. Its page (childrens-books.html) and the home band.
   ========================================================================== */

/* 1. The crown: the Editor's Cup page's own gold crown (assets/img/editors-cup-crown.svg, a drawing, so it is sharp at
   every size), at the top right of "Books" in the bar, of "The Editor's Cup" in the Books menu, of the menu button on
   phones and tablets, and of Books and The Editor's Cup in the phone menu. It is placed over the corner (absolute), so
   it never moves a word, widens the menu or wraps it. A slow glint crosses it and a small star twinkles at its tip
   every few seconds; both stay still for anyone who asks for reduced motion. build_pages.py adds the markup only while
   CUP["promote"] is on, so the crowns go with the Cup's links. */
.crowned { position: relative; display: inline-block; }
.nav-crown {
  position: absolute;
  top: -0.5em;
  left: calc(100% - 0.1em);
  z-index: 1;
  display: block;
  width: 1.36em;
  aspect-ratio: 240 / 170;
  background: url("../img/editors-cup-crown.svg") center / contain no-repeat;
  transform: rotate(16deg);
  transform-origin: 30% 100%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px rgba(255, 197, 49, 0.5));
  pointer-events: none;
}
/* the glint: a band of light across the crown's gold, clipped to its shape */
.nav-crown::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask: url("../img/editors-cup-crown.svg") center / contain no-repeat;
  mask: url("../img/editors-cup-crown.svg") center / contain no-repeat;
  animation: nav-crown-glint 6s ease-in-out 1.2s infinite;
}
/* the twinkle: a four-point star at the crown's top right */
.nav-crown::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -22%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 22%, #fff3c4 34%, rgba(255, 214, 102, 0) 66%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  transform: scale(0.2);
  animation: nav-crown-twinkle 6s ease-in-out 1.2s infinite;
}
@keyframes nav-crown-glint {
  0%, 64% { background-position: 100% 0; }
  86%, 100% { background-position: 0 0; }
}
@keyframes nav-crown-twinkle {
  0%, 78% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  86% { opacity: 1; transform: scale(1) rotate(45deg); }
  96%, 100% { opacity: 0; transform: scale(0.2) rotate(90deg); }
}

/* the bar's "Books": a little more room before the arrow, which sits under the crown's overhang */
.site-nav__list .site-nav__books { gap: 17px; }

/* the Books menu: the crown leaves its place before "The Editor's Cup" (round 10) for the words' top right */
.site-nav__list .site-nav__cup a .crowned { display: inline-block; }
.site-nav__list .site-nav__cup a .crowned::before { content: none; }

/* the menu button (under 1024 px): the crown on its top right corner */
.menu-toggle { position: relative; }
.nav-crown--toggle {
  top: -9px;
  right: -9px;
  left: auto;
  width: 26px;
  transform: rotate(18deg);
  transform-origin: 50% 100%;
}

/* the phone menu: big capitals, so a slightly smaller crown for its size */
.mobile-menu__nav .nav-crown { top: -0.36em; width: 0.78em; }
.mobile-menu__cup .crowned + small { margin-left: 0.7em; }

@media (prefers-reduced-motion: reduce) {
  .nav-crown::after,
  .nav-crown::before { animation: none; }
}

/* 2. His art-show note: a small card in the family section's morning light, right after the twins. On computers the
   photo sits beside his words; on phones it sits beside the title, with his words below. The card's wrapper carries
   data-show-until (build_pages.py EVENT): after the end of December 5 main.js hides it. */
[data-show-until][hidden] { display: none !important; }
.family__event { margin-top: clamp(48px, 6vw, 84px); }
.event-card {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-areas: "photo head" "photo note" "photo details";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(24px, 3vw, 40px);
  max-width: 860px;
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(53, 32, 15, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 40px 70px -46px rgba(110, 50, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.event-card__photo { grid-area: photo; margin: 0; }
.event-card__photo picture { display: block; }
.event-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 40px -28px rgba(110, 50, 10, 0.6);
}
.event-card__head { grid-area: head; padding-top: 8px; }
.family .event-card__head .eyebrow { margin-bottom: 10px; }
.event-card__title {
  margin: 0;
  color: #2a160a;
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 0.004em;
  line-height: 0.95;
  text-transform: uppercase;
}
.event-card__note {
  grid-area: note;
  margin: 18px 0 0;
  color: #3b2414;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.45;
}
.event-card__note p { margin: 0; }
.event-card__note p + p { margin-top: 6px; }
.event-card__note footer {
  margin-top: 12px;
  color: #a8361f;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.event-card__details { grid-area: details; display: flex; flex-wrap: wrap; align-self: end; gap: 8px; margin: 20px 0 0; }
.event-card__details span {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff0db;
  color: #5a3a1e;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}
@media (max-width: 559px) {
  .event-card {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas: "photo head" "note note" "details details";
    grid-template-rows: auto;
    column-gap: 16px;
    padding: 14px;
    border-radius: 22px;
  }
  .event-card__photo img { border-radius: 14px; }
  .event-card__head { align-self: center; padding-top: 0; }
  .family .event-card__head .eyebrow::before { display: none; }
  .event-card__title { font-size: 1.7rem; }
  .event-card__note { margin-top: 16px; font-size: 1.1rem; }
  .event-card__details { margin-top: 16px; }
  .event-card__details span { font-size: 0.86rem; }
}
@media (max-width: 359px) {
  .event-card { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; }
}

/* 3. The children's section: a sunny sky (soft blue to warm cream, a low sun, two clouds), plum and coral, her book's
   title in the books' serif italic. The site's own header, footer, type and buttons, so it is clearly the same site. */
:root {
  --kid-ink: #2f2152;
  --kid-plum: #4a2f86;
  --kid-coral: #b5351f;
  --kid-sun: #ffcf4a;
  --kid-sky: #d4ecff;
  --kid-cream: #fff7e6;
}
/* the sky behind the band and the page: soft blue down to warm cream (on the section itself, so its colour is known) */
.kids-board,
.kids-hero {
  background-color: #eaf6ff;
  background-image: linear-gradient(180deg, var(--kid-sky) 0%, #eaf6ff 46%, var(--kid-cream) 100%);
}
/* the sun rising behind the book and a cloud at its foot: they go with the book, so they are never behind the words */
.kids-art { position: relative; isolation: isolate; }
.kids-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe27a 0 27%, rgba(255, 214, 92, 0.55) 40%, rgba(255, 214, 92, 0) 70%);
}
.kids-art::after {
  /* a cloud: a long rounded body with two puffs on top (box shadows) */
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 9%;
  left: -14%;
  width: 124px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 28px -19px 0 4px #fff, 64px -9px 0 0 #fff;
  opacity: 0.94;
}

.kids-title {
  margin: 0;
  color: var(--kid-plum);
  font-family: var(--serif);
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-wrap: balance;
}
.kids-board .eyebrow,
.kids-hero .eyebrow,
.kids-author .eyebrow { color: var(--kid-coral); }
.kids-byline { margin: 16px 0 0; color: var(--kid-ink); font-size: 1.18rem; line-height: 1.6; }
.kids-byline strong { font-weight: 750; }
.kids-pill {
  display: inline-block;
  margin-left: 10px;
  vertical-align: 0.12em;
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: var(--kid-sun);
  color: #3a2a00;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.kids-copy { max-width: 44ch; margin: 18px 0 0; color: #3e3459; font-size: 1.14rem; line-height: 1.55; }
.kids-copy--small { font-size: 1rem; color: #5a5076; }
.kids-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.btn--plum { background: var(--kid-plum); color: #fff; box-shadow: 0 16px 30px -16px rgba(74, 47, 134, 0.8); }
.btn--plum:hover { background: #5b3ba3; transform: translateY(-2px); }
.text-link--plum { color: var(--kid-plum); text-decoration-color: rgba(74, 47, 134, 0.45); }
.text-link--plum:hover { color: var(--kid-coral); text-decoration-color: var(--kid-coral); }
.kids-board :focus-visible,
.kids-hero :focus-visible,
.kids-author :focus-visible { outline-color: var(--kid-plum); }

/* "cover coming soon": a plain card with the title, never a made-up cover */
.kids-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;      /* the words in the upper part: the lower right stays free for her photo */
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 18px 12px 26px;          /* fixed, so the words (sized by the card's width, cqw) keep their proportions */
  overflow: hidden;
  container-type: inline-size;
  border-radius: 8px 18px 18px 8px;
  background: linear-gradient(180deg, #c4e6ff 0%, #e9f5ff 50%, #fff1cc 100%);
  box-shadow: inset 8px 0 0 rgba(74, 47, 134, 0.14), 0 0 0 1px rgba(47, 33, 82, 0.08), 0 34px 54px -28px rgba(47, 33, 82, 0.55);
  color: var(--kid-plum);
  text-align: center;
}
.kids-cover__title {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-size: 14.5cqw;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
  text-wrap: balance;
}
.kids-cover__author {
  margin-top: 0.9rem;
  margin-top: 6cqw;
  color: var(--kid-ink);
  font-size: 0.8rem;
  font-size: 5.8cqw;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kids-cover__soon {
  margin-top: 2rem;
  margin-top: 14cqw;
  margin-bottom: 1.2rem;
  margin-bottom: 9cqw;
  padding: 0.55em 1em 0.5em;
  border: 1.5px dashed rgba(74, 47, 134, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--kid-plum);
  font-size: 0.7rem;
  font-size: 4.6cqw;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the home page's band: a light board on the night background, like the Editor's Cup board above it */
.kids-band { padding: 0 0 var(--section-y); background: var(--night); }
.kids-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px);
  overflow: hidden;
  border-radius: 34px;
  color: var(--kid-ink);
}
.kids-board__art { display: flex; justify-content: center; padding: 10px 92px 34px 0; }
.kids-cover--band { width: clamp(190px, 21vw, 260px); transform: rotate(-3deg); }
.kids-board__author { position: absolute; right: 0; bottom: 0; width: 136px; margin: 0; text-align: center; }
.kids-board__author picture { display: block; }
.kids-board__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 18px 30px -16px rgba(47, 33, 82, 0.6);
}
.kids-board__author figcaption { margin-top: 6px; color: var(--kid-plum); font-size: 0.92rem; font-weight: 750; }
@media (max-width: 899px) {
  .kids-board { grid-template-columns: minmax(0, 1fr); }
  .kids-board__art { justify-self: center; padding-right: 84px; padding-bottom: 44px; }
  .kids-board__author { width: 120px; }
}
@media (max-width: 559px) {
  .kids-board { padding: 30px 20px 34px; border-radius: 26px; }
  .kids-board__art { padding: 0 52px 22px 0; }
  .kids-cover--band { width: min(200px, 58vw); }
  .kids-board__author { width: 104px; }
  .kids-board__author figcaption { font-size: 0.86rem; }
  .kids-title { font-size: clamp(2.5rem, 12vw, 3.2rem); }
}

/* the page: childrens-books.html */
.page-kids main { background: var(--kid-cream); }
.kids-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 5vw, 70px) 0 clamp(64px, 8vw, 110px);
  color: var(--kid-ink);
}
.kids-hero .crumbs ol { color: #6c6390; }
.kids-hero .crumbs a { color: var(--kid-plum); }
.kids-hero .crumbs a:hover { color: var(--kid-coral); }
.kids-hero .crumbs [aria-current="page"] { color: var(--kid-ink); }
.kids-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}
.kids-title--page { font-size: clamp(3rem, 7vw, 6rem); }
.kids-hero__book { display: flex; justify-content: center; }
.kids-cover--page { width: min(100%, 360px); transform: rotate(2deg); }
.kids-author { padding: clamp(16px, 3vw, 40px) 0 var(--section-y); background: var(--kid-cream); color: var(--kid-ink); }
.kids-author__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.kids-author__photo { width: clamp(220px, 26vw, 340px); margin: 0; }
.kids-author__photo picture { display: block; }
.kids-author__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 0 0 6px #fff, 0 40px 70px -40px rgba(47, 33, 82, 0.55);
}
.kids-title--name { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
@media (max-width: 899px) {
  .kids-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .kids-author__grid { grid-template-columns: minmax(0, 1fr); }
  .kids-author__photo { justify-self: center; width: min(72vw, 320px); }
}
@media (max-width: 559px) {
  .kids-cover--page { width: min(78vw, 300px); }
}
/* 2026-11-02 round11:end */

/* 2026-11-04 round12:start */
/* ==========================================================================
   2026-11-04 (round 12, Walter's calls of Nov 1-2 and his Nov 3 text and voicemail; record notes/round12-site-2026-11-04.md).
   Put in by notes/build/round12_2026_11_04.py from notes/build/round12/round12.css (a re-run replaces this block).
   1. The Editor's Cup in the top bar with a RED crown, like a notification badge; every menu crown red; on phones and
      tablets a slim red Cup strip right under the header.
   2. The Cup's five key facts as big tiles (the Cup page's top and the home band), and its "not open yet" state.
   3. The home page's Cup band, much bigger ("blow it up ... pump it up").
   4. Paul Blair's short section, the last thing before the footer on the home page ("distinct and short").
   ========================================================================== */

/* 1. The crowns in the menus are red now (the same drawing as the gold one: assets/img/editors-cup-crown-red.svg), with a
   soft red glow instead of the gold one. The glint and the twinkle stay as they were. */
.nav-crown {
  background-image: url("../img/editors-cup-crown-red.svg");
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 5px rgba(255, 59, 78, 0.6));
}
.nav-crown::after {
  -webkit-mask-image: url("../img/editors-cup-crown-red.svg");
  mask-image: url("../img/editors-cup-crown-red.svg");
}
/* "Books" in the bar has no crown any more (the Cup's own item sits right beside it): its arrow back to round 10's gap */
.site-nav__list .site-nav__books { gap: 9px; }

/* the Cup's own item in the bar: gold words, the red crown at their top right like a badge, room kept for it so it never
   touches "About Walter" */
.site-nav__list .site-nav__cuplink { padding-right: calc(14px + 1.3em); color: var(--gold); }
.site-nav__list .site-nav__cuplink:hover { color: var(--gold-hot); }
.site-nav__cuplink .nav-crown { top: -0.72em; left: calc(100% - 0.1em); width: 1.62em; }
@media (min-width: 1024px) {
  .site-nav__list > li > a { white-space: nowrap; }           /* five items: never two lines */
}
/* 1024-1179 px: a little closer still (round 11's shop block set 11 px), so the five items fit on one line */
@media (min-width: 1024px) and (max-width: 1179px) {
  .site-header__bar { gap: 16px; }
  .site-nav__list a { padding-inline: 9px; }
  .site-nav__list .site-nav__cuplink { padding-right: calc(9px + 1.3em); }
}
/* 1024-1279 px: the bar is short of room for five items, so its small "Notify me" button steps aside there (the same link
   is in the home page's hero, on COVID-19 RETRIBUTION's page and in every footer) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__cta { display: none; }
}

/* the strip under the header, on phones and tablets (where the bar has no room for the Cup's own item). It scrolls away
   with the page; the header itself stays as it was. Not on the Cup page itself, nor in the 3D scene's still captures. */
.cup-strip { display: none; }
@media (max-width: 1023px) {
  .cup-strip {
    position: relative;
    z-index: 40;
    display: block;
    border-bottom: 1px solid rgba(255, 197, 49, 0.5);
    background:
      radial-gradient(60% 140% at 50% 0, rgba(255, 197, 49, 0.18), transparent 70%),
      linear-gradient(90deg, #6a0818 0%, #b3132c 46%, #d91f37 100%);
    color: #fff;
    text-decoration: none;
  }
  .cup-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px var(--gutter);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }
  .cup-strip__crown { flex: none; width: 34px; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
  .cup-strip__text strong { color: #ffe2a0; font-weight: 800; }
  .cup-strip__arrow { flex: none; font-size: 1.15em; line-height: 1; transition: transform 0.2s var(--ease); }
  .cup-strip:hover .cup-strip__arrow,
  .cup-strip:focus-visible .cup-strip__arrow { transform: translateX(3px); }
  .page-cup .cup-strip { display: none; }
}
@media (max-width: 359px) {
  .cup-strip__inner { gap: 8px; font-size: 0.94rem; }
  .cup-strip__crown { width: 28px; }
}
html.poster-mode .cup-strip { display: none; }

/* 2. The Cup's states: before the opening day the entry buttons step aside and the opening date shows (main.js initCup) */
[data-cup-now][hidden],
[data-cup-soon][hidden] { display: none !important; }

/* the five key facts: the prize, the three dates, "free" (five across on computers, three then two on small computers,
   two by two on phones with "Free" across the bottom) */
.cup-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 720px; }
.cup-fact { min-width: 0; padding: 14px 12px 16px; }
.cup-fact__big { font-size: clamp(1.75rem, 2.2vw, 2.1rem); white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .cup-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cup-fact { grid-column: span 2; }
  .cup-fact:nth-child(4),
  .cup-fact--free { grid-column: span 3; }
}
@media (max-width: 899px) {
  .cup-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cup-fact--free { grid-column: 1 / -1; }
  .cup-fact__big { font-size: 2rem; }
}

/* 3. The home page's Cup band, much bigger: close to the window's height on computers, a bigger book and crown, a bigger
   headline and the key facts in big type. The Sanction's own band keeps its size. */
.cup-band__closed { margin: 22px 0 0; font-size: 1.05rem; font-weight: 700; }
@media (min-width: 900px) {
  .cup-band--home .cup-band__board {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    min-height: min(88vh, 880px);
    padding: clamp(48px, 5.5vw, 84px) clamp(36px, 5vw, 80px);
  }
  .cup-band--home .cup-crowned--band { --cw: clamp(240px, 23vw, 340px); }
  .cup-band--home .cup-band__text .eyebrow { margin-bottom: 18px; font-size: 0.95rem; }
  .cup-band--home .cup-band__title { font-size: clamp(3.6rem, 6.6vw, 6.6rem); }
  .cup-band--home .cup-band__copy { max-width: 44ch; margin-top: 24px; font-size: 1.24rem; line-height: 1.5; }
  .cup-band--home .cup-facts { margin-top: 30px; }
  .cup-band--home .cup-band__actions { margin-top: 32px; }
}
@media (max-width: 899px) {
  .cup-band--home .cup-crowned--band { --cw: min(62vw, 260px); }
  .cup-band--home .cup-band__title { font-size: clamp(3rem, 12.5vw, 4.4rem); }
  .cup-band--home .cup-band__copy { font-size: 1.14rem; }
  .cup-band--home .cup-facts { margin-top: 24px; }
}

/* 4. Paul Blair's short section: a violet board of its own (Alien 51's colours), clearly apart from Walter's books, right
   before the footer: his photo, Alien 51 (a card with the video's picture that opens YouTube), Proof of Life and how to
   book him. */
.paul { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); background: var(--night); }
.paul__board {
  --paul-ink: #e7dcff;
  --paul-line: rgba(205, 184, 255, 0.34);
  display: grid;
  grid-template-columns: 250px minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "photo title title" "photo film items";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 24px clamp(28px, 3.4vw, 48px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 32px;
  background:
    radial-gradient(55% 70% at 88% 8%, rgba(176, 140, 255, 0.3), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(120, 80, 230, 0.22), transparent 70%),
    linear-gradient(135deg, #110a28 0%, #22134f 55%, #3a2176 100%);
  box-shadow: 0 0 0 1px var(--paul-line), 0 50px 100px -50px rgba(0, 0, 0, 0.9);
  color: #fff;
}
.paul__photo { grid-area: photo; margin: 0; }
.paul__photo picture { display: block; }
.paul__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 636 / 960;
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--paul-line), 0 30px 50px -30px rgba(0, 0, 0, 0.85);
}
.paul__title {
  grid-area: title;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.8vw, 4.4rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
}
.paul__by {
  display: block;
  margin-top: 10px;
  color: var(--paul-ink);
  font-family: var(--serif);
  font-size: 0.5em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
.paul-film { grid-area: film; display: block; color: #fff; text-decoration: none; }
.paul-film__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--paul-line), 0 24px 50px -24px rgba(0, 0, 0, 0.85);
}
.paul-film__frame picture { display: block; }
.paul-film__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; transition: transform 0.5s var(--ease); }
.paul-film:hover .paul-film__frame img { transform: scale(1.03); }
.paul-film__play {
  position: absolute;
  top: 21%;                                   /* on the alien's dark forehead, clear of the poster's own lettering */
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(14, 7, 34, 0.74);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s;
}
.paul-film__play::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 28px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.paul-film:hover .paul-film__play,
.paul-film:focus-visible .paul-film__play { background: rgba(217, 31, 55, 0.92); }
.paul-film__label {
  display: inline-block;
  margin-top: 14px;
  color: var(--paul-ink);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.paul-film:hover .paul-film__label { color: #fff; }
.paul__items { grid-area: items; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.paul-item { padding: 18px 20px 20px; border: 1px solid var(--paul-line); border-radius: 18px; background: rgba(8, 4, 24, 0.36); }
.paul-item__title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.paul-item__text { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.4; }
.paul-item__soon {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(205, 184, 255, 0.16);
  color: var(--paul-ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.paul-item__link {
  color: var(--paul-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.paul-item__link:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .paul-film__frame img { transition: none; }
  .paul-film:hover .paul-film__frame img { transform: none; }
}
/* small computers and tablets: the photo on the left, the film under the title, the two notes side by side below */
@media (max-width: 1099px) {
  .paul__board {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "photo title" "photo film" "items items";
    grid-template-rows: auto 1fr auto;
  }
  .paul__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: the photo beside the title, then the film, then the two notes */
@media (max-width: 639px) {
  .paul__board {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas: "photo title" "film film" "items items";
    grid-template-rows: auto;
    align-items: center;
    gap: 20px 18px;
    padding: 20px 18px 22px;
    border-radius: 26px;
  }
  .paul__photo img { border-radius: 16px; }
  .paul__title { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .paul__items { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .paul-item { padding: 16px 16px 18px; }
  .paul-item__title { font-size: 1.55rem; }
  .paul-film__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .paul-film__play::before { top: 15px; left: 20px; border-width: 11px 0 11px 17px; }
}
/* 2026-11-04 round12:end */

/* 2026-11-05 round13:start */
/* ==========================================================================
   2026-11-05 (round 13, Walter's "last things" of Nov 5; record notes/round13-site-2026-11-05.md).
   Put in by notes/build/round13_2026_11_05.py from notes/build/round13/round13.css (a re-run replaces this block).
   1. Maisha M.'s "It Will Be Great", for sale like Walter's books: the title and "by Maisha M." big and in a warm,
      rounded type wherever they show (Walter: the writing looked small), the release date and the price, the 3D book
      with its cover on the home page's band and on her book's page (the children's page), the "Look inside" place for
      the pages, and her book on the Books page in the card Walter's coming books use.
   2. The art show: a caption under the photo (Walter and Iryna) and his invitation to guests and friends under his note.
   3. Paul Blair's section, rebuilt in Walter's order: his name, three photographs, the film, the trailer, how to contact.
   ========================================================================== */

/* 1. Maisha's book --------------------------------------------------------------------------------------------------- */
/* Fredoka (SIL Open Font License), weights 500 to 700, Latin only: assets/fonts/fredoka-kids.woff2 (18 KB). It loads
   only where the children's book's words use it. */
@font-face {
  font-family: "Fredoka Kids";
  src: url("../fonts/fredoka-kids.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --kids-display: "Fredoka Kids", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --kid-red: #cf1f2b;                 /* the cover's red, one step deeper for words on the light sky */
}

/* the title and her name: big, rounded, the cover's red and near-black */
.kids-title {
  color: var(--kid-red);
  font-family: var(--kids-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 0.96;
}
.kids-title--name { color: var(--kid-plum); }
.kids-byline {
  margin: 14px 0 0;
  color: var(--kid-ink);
  font-family: var(--kids-display);
  font-size: clamp(1.75rem, 2.9vw, 2.45rem);
  font-weight: 500;
  line-height: 1.12;
}
.kids-byline strong { font-weight: 700; }
.kids-byline--page { font-size: clamp(2rem, 3.6vw, 3rem); }
/* the release date and the price, side by side */
.kids-sale { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 20px 0 0; }
.kids-sale .kids-pill { margin-left: 0; padding: 9px 15px 8px; font-size: 0.84rem; vertical-align: baseline; }
.kids-price {
  color: var(--kid-ink);
  font-family: var(--kids-display);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}
.kids-copy { margin-top: 16px; }

/* the 3D book with her cover (the same book as on Walter's pages), on the band and on her page */
.kids-board__book { display: block; text-decoration: none; }
.book3d--kids-band { --w: clamp(200px, 21vw, 262px); }
.book3d--kids-page { --w: clamp(240px, 27vw, 340px); }
.kids-hero__book { min-height: 380px; align-items: center; }
.kids-art .book3d::after { background: radial-gradient(ellipse at center, rgba(47, 33, 82, 0.5) 0%, rgba(47, 33, 82, 0) 70%); }
@media (max-width: 899px) {
  .kids-hero__book { min-height: 0; padding: 8px 0 12px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .kids-board__art { padding-right: 112px; }      /* her round photo beside the book, clear of the cover's words */
}
@media (max-width: 559px) {
  /* her round photo beside the book, not over the cover's "by Maisha M." */
  .kids-board__art { padding: 0 90px 26px 0; }
  .kids-board__author { width: 100px; }
  .book3d--kids-band { --w: min(196px, calc(100vw - 190px)); }
  .book3d--kids-page { --w: min(230px, 62vw); }
  .kids-title--page { font-size: clamp(2.9rem, 14vw, 3.6rem); }
  .kids-byline { font-size: 1.8rem; }
  .kids-byline--page { font-size: 2.05rem; }
  .kids-price { font-size: 2.1rem; }
}

/* "Look inside": until the pages arrive, one neat, clearly marked line; then the pages in a grid */
.kids-inside { padding: clamp(8px, 2vw, 20px) 0 clamp(40px, 5vw, 64px); background: var(--kid-cream); color: var(--kid-ink); }
.kids-inside__soon {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  padding: 20px 26px 22px;
  border: 2px dashed rgba(74, 47, 134, 0.38);
  border-radius: 24px;
  background: #fffdf8;
}
.kids-inside__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--kid-sun);
  color: var(--kid-ink);
}
.kids-inside__icon svg { width: 30px; height: 30px; }
.kids-inside__title { margin: 0; color: var(--kid-plum); font-family: var(--kids-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kids-inside__text { margin: 6px 0 0; color: #3e3459; font-size: 1.1rem; line-height: 1.5; }
.kids-inside--pages .kids-title { margin-bottom: 26px; }
.kids-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.kids-page img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 22px 40px -26px rgba(47, 33, 82, 0.6); }
.kids-page__n { display: block; margin-top: 10px; color: var(--kid-plum); font-weight: 750; text-align: center; }
@media (max-width: 559px) {
  .kids-inside__soon { gap: 14px; padding: 16px 16px 18px; }
  .kids-inside__icon { width: 48px; height: 48px; }
  .kids-inside__icon svg { width: 25px; height: 25px; }
  .kids-inside__title { font-size: 1.45rem; }
  .kids-inside__text { font-size: 1.02rem; }
}

/* Maisha and Moses (only when the photo and Walter's statement have arrived) */
.kids-moses { padding: 0 0 clamp(40px, 5vw, 64px); background: var(--kid-cream); color: var(--kid-ink); }
.kids-moses__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 64px); }
.kids-moses__photo { margin: 0; }
.kids-moses__photo img { display: block; width: 100%; height: auto; border: 6px solid #fff; border-radius: 26px; box-shadow: 0 30px 50px -30px rgba(47, 33, 82, 0.6); }
.kids-moses__words { margin: 0; color: var(--kid-ink); font-family: var(--kids-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.3; }
.kids-moses__words footer { margin-top: 12px; color: var(--kid-coral); font-family: var(--sans); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 719px) { .kids-moses__grid { grid-template-columns: minmax(0, 1fr); } }

/* the Books page: her book in the card Walter's coming books use, with her name big under the title */
.billboard--kids .billboard__title { font-family: var(--kids-display); font-weight: 700; letter-spacing: -0.005em; line-height: 0.98; text-transform: none; }
.billboard__by,
.book-card__by {
  margin: 10px 0 0;
  color: #fff;
  font-family: var(--kids-display);
  font-size: clamp(1.55rem, 2.3vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
}
.billboard__by strong,
.book-card__by strong { color: var(--accent, var(--gold)); font-weight: 700; }
.billboard--kids .billboard__hook { margin-top: 14px; }

/* 2. The art show: the caption under the photo, and his invitation under his note -------------------------------------- */
.event-card { grid-template-areas: "photo head" "photo note" "photo invite" "photo details"; grid-template-rows: auto auto auto 1fr; }
.event-card__caption { margin-top: 10px; color: #5a3a1e; font-size: 0.92rem; font-weight: 700; line-height: 1.3; text-align: center; }
.event-card__invite {
  grid-area: invite;
  margin: 16px 0 0;
  padding: 11px 16px 12px;
  border-left: 4px solid #c8472c;
  border-radius: 4px 14px 14px 4px;
  background: #fff3e4;
  color: #7a2c16;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 559px) {
  .event-card { grid-template-areas: "photo head" "note note" "invite invite" "details details"; grid-template-rows: auto; }
  .event-card__caption { margin-top: 6px; font-size: 0.82rem; }
  .event-card__invite { font-size: 1rem; }
}

/* 3. Paul Blair's section, in Walter's order ------------------------------------------------------------------------------
   One column inside round 12's violet board: his name, the three photographs in one row (the same height, each in its
   own shape; on phones two above and the film still below), the film and the trailer side by side (stacked on phones),
   then how to contact him. Round 12's grid for its older layout is switched off here. */
.paul--r13 .paul__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: none;
  align-items: start;
  gap: clamp(24px, 3vw, 38px);
}
.paul--r13 .paul__title { grid-area: auto; font-size: clamp(2.9rem, 5.6vw, 5rem); }
.paul-photos { display: flex; gap: clamp(10px, 1.4vw, 16px); }
.paul-photo { flex: var(--r) 1 0%; min-width: 0; margin: 0; }
.paul-photo picture { display: block; }
.paul-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--paul-line), 0 26px 44px -28px rgba(0, 0, 0, 0.85);
}
.paul-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.8vw, 36px); }
.paul-video { min-width: 0; }
.paul-video__title {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.paul--r13 .paul-film { grid-area: auto; }
.paul-film__play--center { top: 50%; }
.paul-contact { padding: 22px 24px 24px; border: 1px solid var(--paul-line); border-radius: 20px; background: rgba(8, 4, 24, 0.36); }
.paul-contact__title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.paul-contact__lines { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 1.15rem; line-height: 1.35; }
.paul-contact__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.paul-contact__label {
  min-width: 4.6em;
  color: var(--paul-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.paul-contact__line--producer { color: #fff; }
.paul-contact__line--producer em { color: var(--paul-ink); font-family: var(--serif); font-size: 1.12em; font-style: italic; }
.paul-contact__line--producer .imprint__name { font-size: 1.02em; letter-spacing: 0.05em; }
.paul-contact__phone { white-space: nowrap; }
@media (max-width: 639px) {
  .paul--r13 .paul__board { gap: 22px; }
  .paul--r13 .paul__title { font-size: clamp(2.5rem, 12vw, 3.1rem); }
  .paul-photos { flex-wrap: wrap; gap: 10px; }
  .paul-photo:last-child { flex-basis: 100%; }
  .paul-photo img { border-radius: 14px; }
  .paul-videos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .paul-video__title { font-size: 1.65rem; }
  .paul-contact { padding: 18px 16px 20px; }
  .paul-contact__title { font-size: 1.65rem; }
  .paul-contact__lines { gap: 14px; font-size: 1.08rem; }
  .paul-contact__line { display: block; }
  .paul-contact__label { display: block; margin-bottom: 2px; }
}
/* 2026-11-05 round13:end */
/* 2026-11-06 paul-energy:start */
/* ==========================================================================
   2026-11-06: Paul Blair's section, "a little bit of ... some purple energy animation in there, make it look cooler"
   (the owner on the Nov 5 call with Walter). Record: notes/paul-energy-2026-11-06.md.
   Put in by notes/build/paul_energy_2026_11_06.py from notes/build/paul-energy/paul-energy.css (a re-run replaces this
   block). The layer it draws, div.paul-energy, is written first in the violet board by build_pages.py paul_band()
   (aria-hidden, no words, no links).
   Under everything in the board, never over it, and never outside it: two soft violet glows that breathe and drift
   slowly, and two sparks of violet light that run slowly around the board's edge, one each way. Transforms and opacity
   only (the sparks ride a motion path); it takes no clicks; with "reduce motion" it is a still picture. Nothing else in
   the section changes.
   ========================================================================== */
.paul--r13 .paul__board {
  --paul-radius: 32px;                 /* round 12's corner (26 px on phones, below) */
  position: relative;
  isolation: isolate;                  /* the layer stays with the board, under its content */
}
.paul-energy {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;                    /* inside the board's rounded shape only */
  border-radius: inherit;
  pointer-events: none;
}
.paul-energy__glow,
.paul-energy__spark {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

/* the glows: over the board's own light at the top right, and a warmer violet at the bottom left */
.paul-energy__glow { aspect-ratio: 1; border-radius: 50%; }
.paul-energy__glow--a {
  top: -26%;
  right: -18%;
  width: 70%;
  background: radial-gradient(closest-side, rgba(178, 128, 255, 0.46), rgba(140, 90, 245, 0.2) 45%, rgba(120, 70, 230, 0));
  animation: paul-glow-a 12s ease-in-out infinite alternate;
}
.paul-energy__glow--b {
  bottom: -24%;
  left: -18%;
  width: 62%;
  background: radial-gradient(closest-side, rgba(196, 92, 255, 0.34), rgba(150, 70, 240, 0.15) 50%, rgba(120, 60, 230, 0));
  animation: paul-glow-b 15s ease-in-out infinite alternate;
}
@keyframes paul-glow-a {
  from { opacity: 0.55; transform: translate(0, 0) scale(0.92); }
  to { opacity: 1; transform: translate(-9%, 7%) scale(1.1); }
}
@keyframes paul-glow-b {
  from { opacity: 1; transform: translate(0, 0) scale(1.06); }
  to { opacity: 0.5; transform: translate(10%, -6%) scale(0.9); }
}

/* the sparks: a thin line of light on the board's edge with a violet bloom inside it. Each rides the board's rounded
   outline (offset-path), turned along it, with its line on the edge (the half outside the board is cut off). */
.paul-energy__spark {
  --spark-w: 380px;
  --spark-in: 90px;                    /* how far the bloom reaches into the board */
  --spark-line: 7px;
  top: 0;
  left: 0;
  width: var(--spark-w);
  height: calc(10px + var(--spark-in));
  background:
    radial-gradient(ellipse 50% var(--spark-line) at 50% 10px, rgba(255, 251, 255, 0.96), rgba(230, 210, 255, 0.75) 40%, rgba(196, 160, 255, 0)),
    radial-gradient(ellipse 48% var(--spark-in) at 50% 10px, rgba(176, 122, 255, 0.6), rgba(148, 94, 250, 0.24) 45%, rgba(128, 76, 245, 0));
  opacity: 0;                          /* shown only where it can travel (below) */
}
.paul-energy__spark--b { --spark-w: 280px; --spark-in: 72px; --spark-line: 6px; }
@supports (offset-path: inset(0 round 1px)) {
  .paul-energy__spark {
    offset-path: inset(0 round var(--paul-radius));
    offset-anchor: 50% 10px;
    offset-rotate: auto;
    opacity: 1;
    animation: paul-spark 15s linear infinite;
  }
  .paul-energy__spark--b {
    opacity: 0.72;
    animation-duration: 21s;
    animation-direction: reverse;      /* the other way round */
    animation-delay: -6s;
  }
}
@keyframes paul-spark {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@media (max-width: 639px) {
  .paul--r13 .paul__board { --paul-radius: 26px; }
  .paul-energy__glow--a { top: -10%; right: -40%; width: 120%; }
  .paul-energy__glow--b { bottom: -8%; left: -40%; width: 110%; }
  .paul-energy__spark { --spark-w: 260px; --spark-in: 66px; --spark-line: 6px; }
  .paul-energy__spark--b { --spark-w: 190px; --spark-in: 54px; --spark-line: 5px; }
}

/* "reduce motion": the same light, held still: the glows where they start, and one spark resting on the top edge toward
   the right. It is placed without the motion path (a path that never moves is not always placed right after the page
   changes size), so its line sits on the edge by plain positioning. */
@media (prefers-reduced-motion: reduce) {
  .paul-energy__glow,
  .paul-energy__spark { animation: none; }
  .paul-energy__spark {
    offset-path: none;
    top: -10px;
    left: auto;
    right: 9%;
  }
  .paul-energy__spark--b { display: none; }
}
/* 2026-11-06 paul-energy:end */
/* 2026-11-07 round14:start */
/* Round 14 (2026-11-07), Walter's texts and voicemail of Nov 6 (notes/round14-site-2026-11-07.md).
   1 + 5. The family photos (Home and About): the twins (a licensed stand-in, when chosen) and, right beside them in the
      same row, Walter with Iryna (the photo from the art-show card, which now keeps only his words). Two across on
      every screen, so on phones the two photos sit side by side. */
.family__photos--r14 .family__photo picture { display: block; }
.family__photos--r14 .family__photo figcaption { line-height: 1.3; }
.family__photo--iryna figcaption { color: #5a3a1e; font-family: var(--sans); font-size: 1rem; font-style: normal; font-weight: 700; }
@media (max-width: 899px) {
  .family__photos--r14 { width: min(100%, 620px); }
}
@media (max-width: 559px) {
  .family__photos--r14 { gap: 14px; }
  .family__photos--r14 .family__photo--b { margin-top: 34px; }
  .family__photos--r14 .family__photo figcaption { margin-top: 8px; font-size: 0.95rem; }
}
/* the art-show card without its photo: his words, the invitation and the details, one column */
.event-card--words {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "note" "invite" "details";
  grid-template-rows: auto;
  max-width: 760px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
}
@media (max-width: 559px) {
  .event-card--words { padding: 18px 16px 20px; }
  .family .event-card--words .event-card__head .eyebrow::before { display: inline-block; }
}

/* 2. Maisha's book: $11.99 right under her book, like the price under each of Walter's books (his white figures in the
      imprint face), on a small night-blue tag so it reads on the light children's boards. */
.kids-book-price {
  position: relative;
  z-index: 2;
  display: table;
  margin: 16px auto 0;
  padding: 7px 18px 8px;
  border-radius: 999px;
  background: var(--night);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 16px 28px -16px rgba(47, 33, 82, 0.75);
}
.kids-hero__book { flex-direction: column; }
.kids-hero__book .kids-book-price { margin-top: 20px; font-size: 1.45rem; }

/* 3. Big white area titles where Walter's own books meet Children's Books and Paul Blair: the name in the site's tall
      display type, white, between two short lines in the area's colour; a genre line under Walter's and Paul's. */
.area-title { padding: 0 0 clamp(30px, 4.4vw, 60px); background: var(--night); }
.area-title--inline { padding: 0; background: none; }
.area-title__text {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}
.area-title__text::before,
.area-title__text::after {
  content: "";
  flex: 1 1 0;
  min-width: 16px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--area-line, #f5c451));
}
.area-title__text::after { background: linear-gradient(270deg, transparent, var(--area-line, #f5c451)); }
.area-title__text span { flex: 0 1 auto; min-width: 0; }
.area-title__genre { margin: 14px 0 0; text-align: center; }
.area-title--walter { --area-line: #f5c451; }
.area-title--kids { --area-line: #ffd447; }
.area-title--paul { --area-line: #b993ff; }
.catalog .area-title--inline { margin: clamp(64px, 8vw, 104px) 0 clamp(28px, 3.4vw, 44px); }
.more--area .area-title--inline { margin: 0 0 clamp(34px, 4.4vw, 56px); }
.paul--r14 .area-title--inline { margin: 0 0 clamp(24px, 3vw, 38px); }
/* the children's band is always followed by Walter's title now: a little less night between them */
.kids-band { padding-bottom: clamp(56px, 7vw, 100px); }
/* phones: the title on its own line (one line for each of the three), a short bar in the area's colour under it */
@media (max-width: 559px) {
  .area-title__text { flex-direction: column; gap: 12px; font-size: clamp(2.2rem, 11vw, 2.9rem); }
  .area-title__text::before { display: none; }
  .area-title__text::after { flex: none; width: 72px; min-width: 0; height: 4px; background: var(--area-line, #f5c451); }
  .area-title__genre { margin-top: 12px; }
}

/* 4. Paul's film: "Genre: Sci-Fi" under its title, in Walter's genre line style */
.paul-video__genre { margin: -4px 0 14px; }
/* 2026-11-07 round14:end */

/* 2026-11-07 round15:start */
/* Round 15 (2026-11-07), Walter on the Nov 7 call (notes/round15-site-2026-11-07.md).
   1. The "Presenting" boxes: "a white long rectangle" with "black lettering" for each person, in his order (Walter, then
      Maisha, then Paul): PRESENTING WALTER BLAIR · THE AUTHOR. They replace round 14's big white titles everywhere.
      One line on computers and phones; only where the box is narrower than 300 px (the smallest phones) does the
      part after the dot go on a second line, without the dot. The letters are sized by the box itself (container units),
      so they can never run out of it; browsers without container units get a smaller size that wraps instead. */
.area-title--r15 { padding: clamp(34px, 4.6vw, 60px) 0 clamp(30px, 4vw, 54px); background: var(--night); }
.area-title--r15.area-title--inline { padding: 0; background: none; }
.presenting {
  margin: 0;
  padding: clamp(13px, 1.5vw, 20px) clamp(12px, 2.2vw, 34px) clamp(12px, 1.4vw, 19px);
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-family: var(--display);
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.95);
}
.presenting__line {
  display: block;
  font-size: clamp(16px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.presenting__name { font-weight: 900; }
.presenting__dot { font-weight: 900; }
.presenting__half { white-space: nowrap; }
@supports (container-type: inline-size) {
  .presenting { container-type: inline-size; }
  .presenting__line { font-size: min(50px, 5.3cqi); white-space: nowrap; }
  @container (max-width: 300px) {
    .presenting__line { font-size: min(50px, 8.8cqi); line-height: 1.12; }
    .presenting__half { display: block; }
    .presenting__dot { display: none; }
  }
}
.area-title--r15 .area-title__genre { margin: 14px 0 0; }
/* Walter's box on the home page sits right above "The new novel": less night between the two */
.area-title--r15 + .feature { padding-top: clamp(40px, 5vw, 80px); }
.catalog .area-title--r15.area-title--first { margin-top: 0; }
.catalog--kids { padding-top: calc(var(--section-y) * 0.6); }
/* the children's band now follows Walter's portrait and comes before Paul's section */
.kids-band { padding-bottom: clamp(48px, 6vw, 88px); }

/* 2. His portrait, "the second one" (the suit and the red tie), big: "at least half the page ... at least 3 in wide ...
      like Grisham or Baldacci". Round 10 kept the whole photo inside the window's height, so on a short window it
      shrank to about 300 px; now its width sets its size: 54% of the content width on computers (670 px of 1240, and
      never wider than the photo's own 739 px), up to 620 px on tablets, the full screen width on phones. It is taller
      than a computer window now; his name and the two buttons stay beside it while it scrolls. */
.signature { overflow: clip; }      /* clips like round 10's "hidden", but lets the name and buttons stay in view */
.signature__photo img { width: 100%; }
@media (min-width: 1000px) {
  .signature__grid { grid-template-columns: 54% minmax(0, 1fr); align-items: start; gap: clamp(40px, 5vw, 80px); }
  .signature__photo { width: 100%; }
  .signature__text { position: sticky; top: calc(var(--header-h) + 72px); padding-top: clamp(24px, 6vw, 96px); }
}
@media (max-width: 999px) {
  .signature__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .signature__photo { justify-self: center; width: min(100%, 620px); }
  .signature__text { justify-self: center; width: min(100%, 620px); }
}
@media (max-width: 559px) {
  .signature { padding-top: 28px; }
  .signature__photo { justify-self: stretch; width: auto; margin-inline: calc(var(--gutter) * -1); }
  .signature__photo img { border-radius: 0; box-shadow: 0 -3px 0 rgba(255, 197, 49, 0.85), 0 3px 0 rgba(255, 197, 49, 0.85); }
  .signature__text { width: 100%; }
}
/* 2026-11-07 round15:end */

/* 2026-11-08 round16:start */
/* Round 16 (2026-11-08), Walter's texts of Nov 7-8 (notes/round16-site-2026-11-08.md).
   Omar Blair's section, the last thing on the home page before the footer with the office address, in Walter's order:
   his "Presenting" box, his photo beside "Meet Omar Blair" and his introduction as a Transportation Innovator, the
   costume picture with Walter's words, "A vehicle that also flies" (four concept images), and how to contact him.
   A blue board of its own (the sky and sea of his pictures), built like Paul's violet one; nothing moves. */
.omar { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); background: var(--night); }
.area-title--omar { --area-line: #6cc8ff; }
.omar .area-title--inline { margin: 0 0 clamp(24px, 3vw, 38px); }

/* 0. His box is longer than the others ("TRANSPORTATION INNOVATOR"): one line wherever the box is wide enough for the
      letters to stay big (computers and tablets), and on phones two lines, PRESENTING OMAR BLAIR / TRANSPORTATION
      INNOVATOR, in the same letter size as the other boxes there. Like theirs, the letters are sized by the box itself,
      so they cannot run out of it; without container units the line wraps between its two halves instead. */
@supports (container-type: inline-size) {
  .presenting--long .presenting__line { font-size: min(50px, 4.3cqi); }
  @container (max-width: 620px) {
    .presenting--long .presenting__line { font-size: min(50px, 5.3cqi); line-height: 1.12; }
    .presenting--long .presenting__half { display: block; }
    .presenting--long .presenting__dot { display: none; }
  }
  @container (max-width: 300px) {
    .presenting--long .presenting__line { font-size: min(50px, 7.6cqi); }
  }
}

.omar__board {
  --omar-ink: #cfeeff;
  --omar-line: rgba(140, 214, 255, 0.34);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 3.6vw, 48px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 32px;
  background:
    radial-gradient(55% 70% at 88% 8%, rgba(110, 200, 255, 0.26), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(30, 150, 230, 0.2), transparent 70%),
    linear-gradient(135deg, #04131f 0%, #0a2b46 55%, #0f4a70 100%);
  box-shadow: 0 0 0 1px var(--omar-line), 0 50px 100px -50px rgba(0, 0, 0, 0.9);
  color: #fff;
}
.omar-title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

/* 1 + 2. His photo beside "Meet Omar Blair" and his introduction (on phones the introduction goes under both) */
.omar-meet {
  display: grid;
  grid-template-columns: clamp(124px, 30vw, 250px) minmax(0, 1fr);
  grid-template-areas: "photo ." "photo title" "photo text" "photo .";
  grid-template-rows: 1fr auto auto 1fr;
  gap: 0 clamp(22px, 3.6vw, 52px);
}
.omar-meet__photo { grid-area: photo; margin: 0; }
.omar-meet__photo picture { display: block; }
.omar-meet__photo img,
.omar-costume img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--omar-line), 0 26px 44px -28px rgba(0, 0, 0, 0.85);
}
.omar-meet__title { grid-area: title; margin-bottom: 16px; font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 0.95; }
.omar-meet__text { grid-area: text; }
.omar-meet__text p { max-width: 40ch; margin: 0 0 12px; color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; }
.omar-meet__text p:last-child { margin-bottom: 0; }
.omar-meet__text strong { color: var(--omar-ink); font-weight: 700; }

/* 2. The costume picture with Walter's words: the words beside it on computers and tablets, under it on phones */
.omar-costume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(400px, 46%);
  grid-template-areas: "words picture";
  align-items: center;
  gap: clamp(22px, 3.6vw, 52px);
  margin: 0;
}
.omar-costume picture { grid-area: picture; display: block; }
.omar-costume__words { grid-area: words; }
.omar-costume__title {
  display: block;
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.7vw, 2.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}
.omar-costume__text { display: block; max-width: 34ch; color: var(--omar-ink); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; }

/* 3. His vehicle: four concept images, in one row on computers, two by two on tablets and phones */
.omar-vehicle__eyebrow { margin-bottom: 12px; color: var(--omar-ink); }
.omar-vehicle__label {
  margin: 12px 0 16px;
  color: var(--omar-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.omar-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.omar-shot { min-width: 0; margin: 0; }
.omar-shot picture { display: block; }
.omar-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--omar-line), 0 22px 40px -26px rgba(0, 0, 0, 0.85);
}

/* 4. How to contact him: like Paul's */
.omar-contact { padding: 22px 24px 24px; border: 1px solid var(--omar-line); border-radius: 20px; background: rgba(2, 10, 22, 0.36); }
.omar-contact__lines { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 1.15rem; line-height: 1.35; }
.omar-contact__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.omar-contact__label {
  min-width: 4.6em;
  color: var(--omar-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.omar-contact__link {
  color: var(--omar-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.omar-contact__link:hover { color: #fff; }
.omar-contact__line--production { color: #fff; }
.omar-contact__line--production .imprint__name { font-size: 1.02em; letter-spacing: 0.05em; }

/* The company's new name, THE WALTER BLAIR, JD PRODUCTION (Paul's contact and Omar's): the imprint name never wraps
   (2026-10-21), but this one is longer than a phone's contact box, so it may wrap after THE or before PRODUCTION, never
   inside WALTER BLAIR, JD. */
.production-name { white-space: normal; }
.production-name__core { white-space: nowrap; }

@media (max-width: 899px) {
  .omar-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .omar-costume { grid-template-columns: minmax(0, 1fr); grid-template-areas: "picture" "words"; gap: 16px; }
  .omar-costume picture { justify-self: center; width: min(100%, 460px); }
  .omar-costume__words { justify-self: center; width: min(100%, 460px); }
  .omar-costume__title { margin-bottom: 8px; }
}
/* phones: his photo beside "Meet Omar Blair", the introduction under both */
@media (max-width: 639px) {
  .omar__board { gap: 28px; padding: 20px 18px 22px; border-radius: 26px; }
  .omar-title { font-size: 1.65rem; }
  .omar-meet {
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-areas: "photo title" "text text";
    grid-template-rows: auto auto;
    gap: 16px 18px;
  }
  .omar-meet__title { align-self: center; margin: 0; font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .omar-meet__photo img,
  .omar-costume img { border-radius: 14px; }
  .omar-gallery { gap: 10px; }
  .omar-shot img { border-radius: 12px; }
  .omar-contact { padding: 18px 16px 20px; }
  .omar-contact__lines { gap: 14px; font-size: 1.08rem; }
  .omar-contact__line { display: block; }
  .omar-contact__label { display: block; margin-bottom: 2px; }
  .omar-contact__line--production .production-name { display: block; margin-top: 2px; }
}
/* 2026-11-08 round16:end */

/* 2026-11-09 round17:start */
/* Round 17 (2026-11-09), Walter's texts and voicemail of Nov 9 (notes/round17-site-2026-11-09.md). Put in by
   notes/build/round17_2026_11_09.py from notes/build/round17/round17.css (a re-run replaces this block). */

/* 1. The "Presenting" boxes, "the white heading above each of my members": every box in the style of Omar's (round 16).
      One line where the box is wide; where it is 620 px or narrower (phones and small tablets), the name on one line and
      what they do on the next, without the dot, in the same letter size as before. Omar's own rules are unchanged. */
@supports (container-type: inline-size) {
  @container (max-width: 620px) {
    .presenting__line { line-height: 1.12; }
    .presenting__half { display: block; }
    .presenting__dot { display: none; }
  }
}

/*    Maisha's box: "it should have a long rectangle area, children's section or something, as opposed to mine or the
      other people". A white band with black lettering across the whole screen, edge to edge (the other boxes stop at
      the content's width and have round corners): CHILDREN'S SECTION, then PRESENTING MAISHA M. · THE AUTHOR. The letters
      are sized by the band itself, like the boxes, so they cannot run out of it. Home page and Books page. */
.presenting--section {
  border-radius: 0;
  padding: clamp(16px, 2.2vw, 28px) var(--gutter) clamp(15px, 2vw, 26px);
}
.presenting__section {
  display: block;
  margin: 0 0 clamp(5px, 0.8vw, 10px);
  font-size: clamp(22px, 4.4vw, 60px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
@supports (container-type: inline-size) {
  .presenting__section { font-size: min(60px, 7.2cqi); white-space: nowrap; }
  @container (max-width: 300px) {
    .presenting__section { font-size: min(60px, 9.4cqi); }
  }
}

/* 2. Omar's photo: the whole photo of Walter with his son, large, with Walter's words under it. On computers beside
      "Meet Omar Blair" and his introduction (44% of the board, at most 480 px, so its own 576 px is never stretched on an
      ordinary screen); on tablets and phones above them, centered, at most 480 px wide. */
.omar-meet--r17 { grid-template-columns: min(480px, 44%) minmax(0, 1fr); }
.omar-meet--r17 .omar-meet__photo img { aspect-ratio: 576 / 1024; }
.omar-meet__caption {
  margin: 14px 0 0;
  color: var(--omar-ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-style: italic;
  line-height: 1.35;
}
@media (max-width: 999px) {
  .omar-meet--r17 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "title" "text";
    grid-template-rows: auto;
    gap: 0;
  }
  .omar-meet--r17 .omar-meet__photo { justify-self: center; width: min(100%, 480px); margin-bottom: clamp(24px, 3.4vw, 34px); }
  .omar-meet--r17 .omar-meet__title { margin: 0 0 14px; }
}

/* 3. The picture of his vehicle flying over the harbor, "half a page": the whole picture, the full width of the board
      (on a computer about half the screen's height or more), above the other three concept images. Those keep their
      look: three across on computers, and on tablets and phones two across with the third centered under them, at the
      same size as before. */
.omar-feature { margin: 0 0 clamp(10px, 1.4vw, 16px); }
.omar-feature picture { display: block; }
.omar-feature img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1170 / 658;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--omar-line), 0 30px 50px -30px rgba(0, 0, 0, 0.85);
}
.omar-gallery--three { --omar-gap: clamp(10px, 1.4vw, 16px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--omar-gap); }
@media (max-width: 899px) {
  .omar-gallery--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omar-gallery--three .omar-shot:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--omar-gap)) / 2);
  }
}

/* 4. Paul's coming novel, in Walter's words: the last thing in Paul's board, in a panel like his contact's. */
.paul-novel {
  margin: 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--paul-line);
  border-radius: 20px;
  background: rgba(8, 4, 24, 0.36);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.5;
}

/* 5. "A Song For Kamala" in Walter's part, right after his books: the album picture beside his caption and the YouTube
      link on computers, above them on tablets and phones. */
.song { padding: 0 0 var(--section-y); background: var(--night); }
.song__board {
  display: grid;
  grid-template-columns: min(400px, 40%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: clamp(24px, 3.6vw, 48px);
  border: 1px solid var(--line-strong);
  border-radius: 32px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 197, 49, 0.12), transparent 70%),
    linear-gradient(135deg, #1d1f3a 0%, #14152a 70%);
}
.song__board picture { display: block; }
.song__board img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9);
}
.song__words { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.song__caption {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
@media (max-width: 899px) {
  .song__board { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .song__board picture { width: min(100%, 440px); }
  .song__words { align-items: center; width: min(100%, 440px); text-align: center; }
}

/* 6. THE WALTER BLAIR, JD PRODUCTION in place of "Published by WALTER BLAIR, JD" (the owner's note of Nov 9, from Walter's
      11:37 AM voicemail), set like his name was: bold capitals in the imprint face. It is longer than the phrase was, so
      in the header it is one line on computers and tablets, a little smaller than his name was there (the header keeps
      its room for the menu and the buttons), and on phones two lines, THE WALTER BLAIR, JD / PRODUCTION (three under
      360 px: THE / WALTER BLAIR, JD / PRODUCTION), never broken inside WALTER BLAIR, JD and never taller than the bar. */
.site-header__bar .brand__imprint .production-name { font-size: 0.8em; letter-spacing: 0.03em; white-space: nowrap; }
/* (from 1280 px the bar also holds the menu and Notify me: 10 px less between its parts until it is at full width) */
@media (min-width: 1280px) and (max-width: 1339px) {
  .site-header__bar { gap: 22px; }
}
/* where the name takes two lines (the book cards, the book pages, the Publisher rows, "Coming next", the Editor's Cup
   letter), the lines sit together */
.imprint .imprint__text,
.cup-letter__imprint { line-height: 1.3; }
@media (max-width: 519px) {
  .site-header__bar .brand__imprint .production-name { font-size: 0.755rem; letter-spacing: 0.03em; }
  .site-header__bar .brand__imprint .production-name__core::after { content: "\A"; white-space: pre; }
}
@media (max-width: 420px) {
  .site-header__bar .brand__imprint .production-name { font-size: 0.67rem; }
}
@media (max-width: 389px) {
  .site-header__bar .brand__imprint .production-name { font-size: 0.645rem; }
}
@media (max-width: 374px) {
  .site-header__bar .brand__imprint .production-name { font-size: 0.635rem; }
}
@media (max-width: 359px) {
  .site-header__bar .brand__imprint .production-name { font-size: 0.65rem; }
  .site-header__bar .brand__imprint .production-name__core::before { content: "\A"; white-space: pre; }
}

@media (max-width: 639px) {
  .omar-feature img { border-radius: 14px; }
  .omar-gallery--three { --omar-gap: 10px; }
  .paul-novel { padding: 18px 16px 20px; font-size: 1.2rem; }
  .song__board { gap: 20px; padding: 18px 18px 24px; border-radius: 26px; }
  .song__board img { border-radius: 12px; }
}
/* 2026-11-09 round17:end */

/* 2026-11-09 round18:start */
/* Round 18 (2026-11-09), Walter's call of Nov 9, 3:31 PM (notes/round18-site-2026-11-09.md). Put in by
   notes/build/round18_2026_11_09.py from notes/build/round18/round18.css (a re-run replaces this block). */

/* 1. Omar's photo: Omar on his own, head to shoes (272 x 720), large. On computers beside "Meet Omar Blair" and his
      introduction, about as tall as round 17's photo of the two of them (322 px wide); on tablets and phones above them,
      centered, 300 px wide (260 px on phones, so all of him fits on the screen). No caption. */
.omar-meet--r17.omar-meet--r18 { grid-template-columns: min(322px, 30%) minmax(0, 1fr); }
.omar-meet--r18 .omar-meet__photo img { aspect-ratio: 272 / 720; }
@media (max-width: 999px) {
  .omar-meet--r17.omar-meet--r18 { grid-template-columns: minmax(0, 1fr); }
  .omar-meet--r18 .omar-meet__photo { width: min(100%, 300px); }
}
@media (max-width: 639px) {
  .omar-meet--r18 .omar-meet__photo { width: min(100%, 260px); }
}

/* 2. "At the bottom of the site" the company's name: the copyright line is the company's, and the company's name heads
      his address (his email ends it), in the name's bold capitals, a little brighter than the address lines. */
.site-footer__company .imprint__name { color: var(--paper); font-size: 0.98em; letter-spacing: 0.05em; }
/* 2026-11-09 round18:end */