/* =========================================================
   LUCY CONNELLY — a world of mysteries
   Design system + homepage styles
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Core palette — deep blue, black, white. One hue.
     The book covers supply all the colour on this page; the chrome supplies none. */
  --ink:          #080A0E;   /* page ground — black, faintly blue */
  --ink-2:        #101520;   /* raised surface */
  --ink-3:        #1C2432;   /* hairline / border on dark */
  /* All three sampled directly out of the logo artwork. */
  --navy:       #02305A;   /* THE brand colour — the owl's fill */
  --navy-2:     #0A4A85;   /* one step up — hover on light grounds */
  --blue:       #4C86D8;   /* the same blue lifted so it reads on black */
  --blue-pale:  #A8C4EE;
  --gold:       #C59E59;   /* the logo's gold. DECORATIVE ONLY — never text. */

  --white:      #F5EFE8;   /* cream — the same value the logo uses for the owl's face and book pages */
  --white-2:    #F5EFE8;   /* the light section ground, same cream */
  --white-3:    #DFD6C7;   /* rule on light */

  /* Reserved for form validation only. Not a brand colour — red is doing a job
     here that blue cannot do, which is to read as "something is wrong". */
  --error:      #B3261E;

  /* Semantic — dark ground (default) */
  --bg:           var(--ink);
  --surface:      var(--ink-2);
  --rule:         var(--ink-3);
  --text:         #EDF1F6;
  --text-muted:   #97A3B4;
  --accent:       var(--blue);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* Space — "spacious" end of the scale; this is a reading site */
  --space-2xs: 6px;
  --space-xs: 12px;
  --space-s:  20px;
  --space-m:  32px;
  --space-l:  56px;
  --space-xl: 88px;
  --space-2xl: 128px;

  --measure: 62ch;
  --shell: 1240px;
  --radius: 3px;   /* books have square corners. so does this site. */

  /* Height of the sticky masthead. Everything that scrolls to an anchor has to
     clear it, or the top of the target section lands underneath the header. */
  --header-h: 69px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stop every in-page jump (nav links, skip link, footer links) from parking the
     target's first line behind the sticky masthead. The extra 14px is breathing
     room so a heading doesn't sit flush against the header edge. */
  scroll-padding-top: calc(var(--header-h) + 14px);
}
@media (max-width: 380px) { :root { --header-h: 65px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 40;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

/* Focus: never removed, always visible on both grounds */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: min(100% - 2 * var(--space-s), var(--shell)); margin-inline: auto; }
@media (min-width: 768px) { .shell { width: min(100% - 2 * var(--space-l), var(--shell)); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Skip link */
.skip {
  position: absolute; left: var(--space-s); top: -100px; z-index: 200;
  background: var(--navy); color: var(--white); padding: 10px 18px;
  font-weight: 700; text-decoration: none; transition: top 0.15s var(--ease);
}
.skip:focus { top: var(--space-s); }

/* ---------- 3. SHARED TYPE OBJECTS ---------- */

/* The eyebrow: small caps, blue, with a gold hairline trailing off it — the one
   place the logo's gold appears in the page chrome, so the mark does not read
   as if it wandered in from another brand. */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--space-s);
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  opacity: 0.75;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }
.eyebrow--center::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--text-muted); }
.prose strong { color: var(--text); font-weight: 700; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;                 /* touch target */
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--white); color: var(--ink); }
.btn--primary:hover { background: var(--blue-pale); }

.btn--ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.30); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

.btn--onlight { background: var(--navy); color: var(--white); }
.btn--onlight:hover { background: var(--navy-2); }

.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- 5. HEADER ---------- */
/* A cream band across the top — like the belly band on a hardcover.
   Its ground is the cream the logo also uses. */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--white-3);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding-block: 10px;
}
/* ---- APPROVED LOGO: the detailed owl, logo-lc.png ----
   The owner reviewed the simplified vector owl and did not approve it, so the header
   uses the detailed artwork. That artwork is one square, vertically-stacked lockup
   (owl, then wordmark, then tagline) with NO alpha channel, which forces two things:

     1. the mark is cropped out of the square with background-position, because at
        header height the baked-in wordmark and tagline would be a few pixels tall;
     2. "Lucy Connelly" is set alongside it in Fraunces rather than coming from the file.

   Both are workarounds for the missing transparency, not design choices. See
   "A faithful transparent recreation" in README.md — when that arrives, this whole
   block collapses to a single <img>. */
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.brand__mark {
  flex: none;
  width: 52px; height: 47px;   /* the owl-and-book region, measured off the artwork */
  background-image: url("../img/logo/logo-lc.png");
  background-repeat: no-repeat;
  background-size: 149% auto;
  background-position: 48% 6%;
}
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 6, "WONK" 0, "opsz" 40;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .brand__mark { width: 44px; height: 40px; }
}

.nav { display: none; }
@media (min-width: 900px) { .nav { display: flex; align-items: center; gap: var(--space-m); } }
.nav a {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #12161B;
  text-decoration: none;
  padding: 12px 0;
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile menu */
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 12px;
  background: none; border: 1px solid var(--white-3); border-radius: var(--radius);
  color: #12161B; font-family: var(--font-body); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 900px) { .menu-btn { display: none; } }
.menu-btn svg { width: 18px; height: 18px; }

.mobile-nav {
  display: none;
  background: var(--white);
  border-bottom: 1px solid var(--white-3);
  padding: var(--space-xs) 0 var(--space-s);
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--white-3);
  color: #12161B; text-decoration: none;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: var(--step--1);
}

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  /* Keyed to viewport HEIGHT, not width. The old width-based padding was 128px on
     any wide screen, which pushed the book cover past the fold on a 700-720px-tall
     laptop even though the screen was plenty wide. */
  --hero-pad: clamp(40px, 7vh, 112px);
  padding-block: var(--hero-pad);
  isolation: isolate;
}
/* Backdrop: the cover itself, blown up, blurred, and drowned in ink.
   Gives the cinematic ground without needing a separate hero photograph. */
.hero__backdrop {
  position: absolute; inset: -8%;
  z-index: -2;
  background-size: cover;
  background-position: center 30%;
  /* Drained almost to grey, then re-tinted navy by the layer below — otherwise the
     cover's greens fight the palette. It should read as texture, not as an image. */
  filter: blur(46px) saturate(0.18) contrast(1.05);
  opacity: 0.7;
  transform: scale(1.08);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 22% 40%, rgba(18,42,99,0.5) 0%, rgba(8,10,14,0.88) 58%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(8,10,14,0.45), var(--ink) 92%);
}
.hero__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--space-xl); }
  /* Cap the cover so the whole hero clears the fold. The cover is 2:3, so the widest
     it can be is (available height / 1.5). Below that cap the grid column governs. */
  .hero__grid > .book {
    max-width: calc((100svh - var(--header-h) - (2 * var(--hero-pad))) / 1.5);
    margin-inline: auto;
  }
}
.hero__title {
  font-size: var(--step-4);
  font-variation-settings: "SOFT" 8, "WONK" 1, "opsz" 144;
  margin-bottom: var(--space-s);
}
.hero__series {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--space-2xs);
}
.hero__blurb { color: #C4CFDE; font-size: var(--step-1); line-height: 1.55; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

/* ---------- 7. THE BOOK OBJECT ---------- */
/* Covers should read as physical objects. The ::before is the page edge,
   the ::after is the spine shadow. This is what stops a grid of covers
   from looking like a grid of flat rectangles. */
.book { position: relative; display: block; line-height: 0; text-decoration: none; }
.book__art {
  position: relative;
  aspect-ratio: 2 / 3;               /* reserves space — no layout shift */
  border-radius: 1px 3px 3px 1px;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    0 18px 38px -14px rgba(0,0,0,0.75);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.book__art img { width: 100%; height: 100%; object-fit: cover; }
.book__art::before {   /* spine gradient */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9%;
  background: linear-gradient(to right,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.14) 34%,
    rgba(255,255,255,0.14) 62%, rgba(0,0,0,0.06) 100%);
  z-index: 2; pointer-events: none;
}
.book:hover .book__art, .book:focus-visible .book__art {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 0 3px 4px rgba(0,0,0,0.5), 0 30px 55px -16px rgba(0,0,0,0.85);
}
.book__meta { line-height: 1.4; margin-top: var(--space-xs); }
.book__title {
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
  font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 24;
  color: var(--text); display: block;
}
.book__note {
  font-size: var(--step--1); color: var(--text-muted);
  letter-spacing: 0.06em; margin-top: 2px; display: block;
}

/* A title with no confirmed retailer link. Still a book, just not a control:
   no pointer, no hover lift, and it is a <div> rather than an <a> so nothing
   presents itself as clickable. */
.book--unavailable { cursor: default; }
.book--unavailable .book__art { opacity: 0.72; }
.book--unavailable:hover .book__art { transform: none; }

/* Status badge — "NEW SERIES", "PRE-ORDER".
   Sits in the caption, not on the artwork: every one of these covers already
   carries type edge to edge, and a ribbon over it collided every time. */
.flag {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 6px;
  background: var(--navy); color: var(--white);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;          /* never let a two-word badge wrap */
}
.flag--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------- 8. SECTIONS ---------- */
.section { padding-block: clamp(var(--space-xl), 8vw, var(--space-2xl)); }
.section--paper { background: var(--white-2); color: #12161B; }
.section--paper .eyebrow { color: var(--navy); }
.section--paper :focus-visible { outline-color: var(--navy); }
.section--paper h2, .section--paper h3 { color: #0B0F16; }
.section--paper .prose { color: #4E5359; }
.section--paper .book__title { color: #0B0F16; }
.section--paper .book__note { color: #63676E; }
.section__head { margin-bottom: var(--space-l); }
.section__head h2 { font-size: var(--step-3); max-width: 20ch; }

/* ---------- 9. COMING SOON (wide release cards) ---------- */
.releases { display: grid; gap: var(--space-l); }
@media (min-width: 820px) {
  .releases { grid-template-columns: 1fr 1fr; gap: var(--space-m); }
  /* With an odd number of releases the last card would leave a hole beside it.
     Let it run the full width instead, and hold its blurb to a readable measure
     so the wider card doesn't turn into one very long line. Self-correcting:
     with an even count no card matches this. */
  .release:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .release:last-child:nth-child(odd) .release__text { max-width: 68ch; }
}

.release {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.release:hover { border-color: rgba(76,134,216,0.45); background: #141A28; }
@media (min-width: 560px) { .release { grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-m); padding: var(--space-m); } }
/* Below ~520px the two-column card squeezes the blurb to three words a line.
   Stack it instead and cap the cover so it doesn't dominate. */
@media (max-width: 519px) {
  .release { grid-template-columns: minmax(0, 1fr); }
  .release > .book { max-width: 150px; }
}
.release__date {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-2xs);
}
.release__title { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.release__text { color: var(--text-muted); font-size: var(--step-0); margin-bottom: var(--space-s); }

/* ---------- 10. SCREEN BAND (the TV adaptations) ---------- */
.screen {
  position: relative;
  background: #05070B;
  border-block: 1px solid var(--ink-3);
  overflow: hidden;
}
.screen__art {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Height-capped so the key art, the heading and the two buttons land together
     when you jump to #screen, instead of the CTAs falling past the fold.
     62svh governs on normal screens; the calc only bites on short windows, where
     the copy block needs roughly 320px and the art has to give way. */
  max-height: min(62svh, calc(100svh - 320px));
}
@media (min-width: 900px) { .screen__art { aspect-ratio: 21 / 9; } }
.screen__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.screen__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #05070B 2%, rgba(5,7,11,0.72) 38%, rgba(5,7,11,0.1) 78%),
              linear-gradient(to right, rgba(5,7,11,0.85), transparent 55%);
}
.screen__copy {
  position: relative; z-index: 2;
  margin-top: -16svh;
  padding-bottom: clamp(40px, 6svh, 88px);
}
@media (min-width: 900px) { .screen__copy { margin-top: -22svh; } }
.screen__copy h2 { font-size: var(--step-3); margin-bottom: var(--space-s); max-width: 16ch; }
.screen__copy .prose { color: #B8C3D4; }
.screen__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

/* ---------- 11. SERIES SHELVES ---------- */
.shelf + .shelf { margin-top: var(--space-xl); }
.shelf__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--white-3);
  margin-bottom: var(--space-m);
}
.shelf__name { font-size: var(--step-2); }
.shelf__place {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy);
}
.shelf__books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-m) var(--space-s);
}
@media (min-width: 700px) {
  .shelf__books { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-l) var(--space-m); }
}

/* ---------- 12. ABOUT ---------- */
.about { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-xl); } }
.about h2 { font-size: var(--step-3); margin-bottom: var(--space-s); }
.about .prose p { font-size: var(--step-0); }
.aside-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.aside-card h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.aside-card p { color: var(--text-muted); font-size: var(--step--1); margin-bottom: 0; }
.aside-card + .aside-card { margin-top: var(--space-s); }

/* ---------- 13. NEWSLETTER ---------- */
.signup { text-align: center; }
/* The complete logo, at a size where the tagline is actually readable.
   It sits on --white-2, which is the artwork's own ground one step down,
   so the square edge of the PNG never shows. */
/* ---- TEMPORARY: edge feathering for the non-transparent logo ----
   Scope: this rule only. It exists solely because logo-lc.png has no alpha channel
   and its cream ground drifts by 2-3/255 across the file — enough to show a faint
   rectangle against a flat CSS colour. Feathering the outer 3.5% dissolves that edge.
   The artwork's content starts 4.4% from the top and 10.4% from the sides, so nothing
   is clipped.

   DELETE this masking the day a transparent version of the detailed artwork exists.
   Nothing else in the stylesheet depends on it. (The cream palette itself is a
   deliberate design choice and stays either way.) */
.signup__lockup {
  width: min(320px, 70vw);
  height: auto;
  margin: 0 auto var(--space-s);
  --edge: 3.5%;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  mask-composite: intersect;
}
.signup h2 { font-size: var(--step-3); margin-bottom: var(--space-xs); }
.signup .prose { margin-inline: auto; text-align: center; }
.signup__form {
  display: grid; gap: var(--space-s);
  max-width: 560px; margin: var(--space-m) auto 0;
  text-align: left;
}
/* The signup row holds exactly two things: the email input and the Subscribe
   button. Everything else — the label, the hint, the consent line — lives
   outside it, so nothing can ever drift into the button's column.

   No subgrid, no bottom-alignment, no row arithmetic. The row is a plain grid
   and both children stretch to its height (the grid default), so the input and
   the button are the same height and their top and bottom edges meet because
   they are literally the same grid row. */
.signup__row {
  display: grid;
  gap: var(--space-xs);        /* mobile: stacked, both full width */
}

@media (min-width: 560px) {
  .signup__row {
    grid-template-columns: 1fr auto;   /* input takes the space, button hugs its text */
    align-items: stretch;              /* equal heights, edge to edge */
  }
}

/* Belt and braces on the button: it is inline-flex elsewhere on the site, and
   this keeps it filling its grid cell rather than sitting on its own baseline. */
.signup__row > .btn { width: 100%; height: 100%; }

/* Consent tick box. Required by the endpoint, so it is a real control with a
   real label, not a line of small print. */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; margin: 0;
  font-size: var(--step--1); line-height: 1.5; color: #48525F;
}
.consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--navy); flex: none;
}
.consent label { cursor: pointer; }
.consent a { color: var(--navy); text-underline-offset: 2px; }

/* Subscription statement under the form. Same voice and weight the consent tick
   box had, minus the control: Mailchimp records the opt-in itself, so the line
   is small print rather than a second thing to click. */
.signup__terms {
  margin: 0;
  font-size: var(--step--1); line-height: 1.5; color: #48525F;
}
.signup__terms a { color: var(--navy); text-underline-offset: 2px; }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   display:none fields and the whole point is that a bot fills it in.
   aria-hidden + tabindex="-1" keep it away from screen readers and the keyboard.

   The same rules are ALSO written inline on the element in index.html. That is
   deliberate duplication, not an oversight: this field must stay hidden even if
   this stylesheet is stale in a cache, fails to upload, or is missing entirely.
   Never remove the inline copy. */
.hp,
.hp * {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* One live region for pending / success / error. */
.signup__status {
  margin: 0; min-height: 1.5em;
  font-size: var(--step--1); line-height: 1.5;
}
.signup__status:empty { min-height: 0; }
.signup__status[data-state="pending"] { color: #48525F; }
.signup__status[data-state="success"] { color: var(--navy); font-weight: 700; }
.signup__status[data-state="error"]   { color: var(--error); font-weight: 700; }

.btn[aria-disabled="true"],
.btn:disabled { opacity: 0.6; cursor: progress; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #4E5359;
}
.field input {
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: var(--step-0);
  color: #0B0F16; background: var(--white);
  border: 1px solid var(--white-3); border-radius: var(--radius);
}
.field input:focus-visible { border-color: var(--navy); }
.field .hint { font-size: var(--step--1); color: #63676E; }

/* ---------- 14. FOOTER ---------- */
.footer { background: #05070B; border-top: 1px solid var(--ink-3); padding-block: var(--space-xl) var(--space-m); }
.footer__grid { display: grid; gap: var(--space-l); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); } }
.footer__mark {
  font-family: var(--font-display); font-size: var(--step-2);
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 60;
  color: var(--blue); line-height: 1; margin-bottom: 6px;
}
.footer__tag { color: var(--text-muted); font-size: var(--step--1); letter-spacing: 0.06em; }
.footer h4 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--space-xs);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer a { color: var(--text-muted); text-decoration: none; font-size: var(--step--1); display: inline-block; padding-block: 6px; }
.footer a:hover { color: var(--blue); }
.social { display: flex; gap: var(--space-xs); }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;                 /* touch target */
  border: 1px solid var(--ink-3); border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.social a:hover { border-color: var(--blue); color: var(--blue); }
.social svg { width: 19px; height: 19px; fill: currentColor; }
.colophon {
  margin-top: var(--space-xl); padding-top: var(--space-s);
  border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
  justify-content: space-between;
  font-size: var(--step--1); color: #7C8798;
}

/* Build credit. Deliberately the quietest thing on the page: a step below the
   colophon, on its own line so it never shares space with Lucy's copyright, and
   with no rule or weight of its own to pull the eye. Still meets AA. */
.credit {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #79839A;
}
.credit a {
  color: #9AA4B8;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 164, 184, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.credit a:hover,
.credit a:focus-visible {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ---------- 15. SCROLL REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 16. MOTION / CONTRAST PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .book:hover .book__art { transform: none; }
}