/* ============================================================
   ANDREW SHAW — author home ("The Imprint")
   ------------------------------------------------------------
   ⛔ This file is deliberately NOT /assets/site.css.
   site.css is THE FALSE EAGLE's identity: it hard-sets a near-black
   body, parchment text, a gold :focus-visible outline and a gold
   ::selection. Linking it here would re-import the very theme the
   author asked to remove from the front door. Everything the home
   page needs is self-contained below.

   Four font files only (93KB). Cinzel is dropped — it is carved
   Roman capitals and is Book One's signature. IM Fell (17th-century)
   and La Belle Aurore (handwriting) are dropped too: neither belongs
   on a page that has to speak for a 1971 New Brunswick adventure as
   evenly as for a Tuscan mystery. 284KB of fonts removed.
   ============================================================ */

@font-face { font-family:"Cormorant Garamond"; font-weight:400; font-style:normal;
  font-display:swap; src:url(/fonts/CG-400.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:400; font-style:italic;
  font-display:swap; src:url(/fonts/CG-400i.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:500; font-style:normal;
  font-display:swap; src:url(/fonts/CG-500.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:600; font-style:normal;
  font-display:swap; src:url(/fonts/CG-600.woff2) format("woff2"); }

:root{
  --paper:#F4EFE5;        /* warm uncoated book stock */
  --sheet:#FBF8F2;        /* top-of-page lightener, motivates the cover shadows */
  --paper-2:#EBE4D6;      /* the one recessed tone */
  --ink:#2A2118;          /* 13.79:1 on paper */
  --ink-2:#5C5347;        /*  6.58:1 */
  --ink-3:#6F6759;        /*  4.87:1 — do not go lighter */
  --accent:#7B2D26;       /* oxblood: bookbinding, not Tuscany/Venice/Fundy. 8.16:1 */
  --accent-deep:#5E211C;
  --rule:#D9D0BE;
  --rule-strong:#C2B7A0;

  /* Cormorant is optically light with a small x-height. Never below 17px,
     and always one weight heavier than instinct — that is the whole
     difference between a Garamond page and a cheap Garamond page. */
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --micro:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
          "Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.page{
  background:linear-gradient(180deg,var(--sheet) 0,var(--paper) 520px) no-repeat;
  min-height:100svh;
}
/* The landing page closes with a second .page holding nothing but the footer
   strip. One-screen-minimum is right for a column of content and wrong for a
   94px copyright line — it left a blank screen under it. */
.page-foot{ min-height:0; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 clamp(24px,6vw,64px); }
img{ max-width:100%; }
a{ color:inherit; }
::selection{ background:rgba(123,45,38,.16); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- micro labels (the only sans on the page) ---------- */
.micro{ font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:13px; line-height:1; }

/* ---------- running head ---------- */
.rhead{ padding-top:36px; }
.rhead-row{ display:flex; justify-content:flex-end; }
.rhead a{ color:var(--ink-2); text-decoration:none; letter-spacing:.14em;
  transition:color .25s ease; }
.rhead a:hover{ color:var(--accent); }
.rhead .hair{ height:1px; background:var(--rule-strong); margin-top:14px; }

/* ---------- title block ---------- */
.title-block{ text-align:center;
  padding:clamp(80px,13vh,152px) 0 clamp(84px,12vh,136px); }
.title-block h1{
  font-weight:600; font-size:clamp(2.55rem,6.2vw,4.25rem);
  letter-spacing:.015em; line-height:1.04; margin:0; color:var(--ink);
}
.title-block .dash{ width:64px; height:1px; background:var(--rule-strong);
  margin:30px auto 28px; }
.title-block p{
  font-style:italic; font-weight:400;
  font-size:clamp(1.14rem,2.1vw,1.42rem); line-height:1.52;
  color:var(--ink-2); margin:0 auto; max-width:34ch; text-wrap:balance;
}

/* ---------- shelf heading: label, then a rule filling the measure ---------- */
.shelf{ display:flex; align-items:center; gap:20px; }
.shelf .label{ flex:none; color:var(--ink-2); }
.shelf .fill{ flex:1 1 auto; height:1px; background:var(--rule-strong); }
.shelf + .entry{ margin-top:4px; }
.shelf.next{ margin-top:clamp(64px,8vh,96px); }

/* ---------- catalogue entry: a row, not a card ----------
   Rows because the standalone shelf holds ONE book. In a grid it
   becomes a half-width orphan — the 13+ novel literally laid out as
   the lesser item. In rows all three are identical in size. */
.entry{ display:grid; grid-template-columns:240px 1fr; column-gap:52px;
  align-items:start; padding:44px 0 48px; text-decoration:none; color:inherit; }
.entry + .entry{ border-top:1px solid var(--rule); }

/* the cover is NOT cropped — fixed height, natural width, so each
   book keeps its own proportion and its painted frame survives */
.plate{ position:relative; display:block; width:fit-content; justify-self:start;
  line-height:0; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.plate img{ display:block; height:340px; width:auto;
  box-shadow:0 1px 2px rgba(42,33,24,.34), 0 18px 30px -14px rgba(42,33,24,.30);
  transition:box-shadow .45s ease; }
/* ⚠ the ring lives on a wrapper, NOT on the <img>. An inset box-shadow
   paints behind replaced content, so on an opaque JPEG it is invisible.
   The white hairline inside the dark one is the catch-light that tips a
   near-black cover from "crisp" to "luminous". */
.plate::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(42,33,24,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.entry:hover .plate,.entry:focus-visible .plate{ transform:translateY(-3px); }
.entry:hover .plate img,.entry:focus-visible .plate img{
  box-shadow:0 2px 3px rgba(42,33,24,.30), 0 40px 64px -28px rgba(42,33,24,.36); }

.entry .meta{ display:flex; align-items:center; gap:14px; margin:2px 0 14px; }
.entry .series{ color:var(--ink-2); font-family:var(--micro); font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; font-size:13px; }
/* status carries a SHAPE as well as a colour — never colour-only */
.entry .status{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:13px; color:var(--ink-2); }
.entry .status .dot{ width:5px; height:5px; border-radius:50%; }
.entry .status.live{ color:var(--accent); }
.entry .status.live .dot{ background:var(--accent); }
.entry .status.soon .dot{ border:1px solid var(--ink-2); }

.entry h2{ font-weight:600; font-size:clamp(1.75rem,3.4vw,2.15rem);
  letter-spacing:.006em; line-height:1.16; margin:0 0 14px; color:var(--ink);
  transition:color .3s ease; }
.entry:hover h2,.entry:focus-visible h2{ color:var(--accent); }
.entry .blurb{ font-weight:500; font-size:1.3rem; line-height:1.62;
  color:var(--ink-2); margin:0 0 22px; max-width:46ch; }
.entry .cue{ font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px; transition:gap .35s ease; }
.entry .cue .arrow{ width:22px; height:1px; background:currentColor; }
.entry:hover .cue,.entry:focus-visible .cue{ gap:16px; color:var(--accent-deep); }

/* ---------- about ---------- */
.about{ padding:44px 0 8px; display:grid; grid-template-columns:240px 1fr;
  column-gap:52px; align-items:start; }
.about .portrait{ position:relative; display:block; width:fit-content;
  justify-self:start; line-height:0; }
.about .portrait img{ display:block; width:240px; height:auto;
  box-shadow:0 1px 2px rgba(42,33,24,.30), 0 18px 30px -16px rgba(42,33,24,.26); }
.about .portrait::after{ content:""; position:absolute; inset:0;
  border:1px solid rgba(42,33,24,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.about p{ font-weight:500; font-size:1.3rem; line-height:1.66; color:var(--ink-2);
  margin:0 0 18px; max-width:52ch; }
.about p:first-of-type{ margin-top:-4px; }
.about .note{ font-style:italic; font-weight:400; color:var(--ink-2);
  border-left:2px solid var(--rule-strong); padding-left:20px; margin:26px 0 20px; }
.about .sign{ font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:13px; color:var(--ink-3); }
.about a.mail{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(123,45,38,.32); }
.about a.mail:hover{ color:var(--accent-deep); border-bottom-color:var(--accent-deep); }

/* ---------- footer colophon ---------- */
.foot{ margin-top:clamp(56px,7vh,80px); border-top:1px solid var(--rule-strong);
  padding:26px 0 56px; display:flex; justify-content:space-between;
  align-items:baseline; gap:14px; }
.foot .c{ color:var(--ink-3); }
.foot a{ color:var(--ink-2); text-decoration:none; letter-spacing:.14em;
  transition:color .25s ease; }
.foot a:hover{ color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .entry,.about{ grid-template-columns:176px 1fr; column-gap:34px; }
  .entry{ padding:36px 0 40px; }
  .plate img{ height:250px; }
  .about .portrait img{ width:176px; }
}
@media (max-width:619px){
  .entry,.about{ grid-template-columns:1fr; row-gap:26px; }
  .plate img{ height:250px; }
  .about .portrait img{ width:200px; }
  .entry h2{ font-size:1.7rem; }
  .entry .blurb,.about p{ font-size:1.25rem; }
  .shelf{ gap:14px; }
  .foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  /* Stack the genre and the status on a phone. Side by side, a label long
     enough to wrap — "Historical mystery · Ages 13+" — leaves the status
     floating vertically centred against two lines, and the row reads
     lopsided. Stacked, every entry starts on the same left edge. */
  .entry .meta{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   THE HERO — full-viewport, covers dominant
   ------------------------------------------------------------
   Andrew: "Make the covers bigger. Elevate this site."

   Composition is CENTRED and stacked, not two-column: a side-by-side
   hero caps the covers at whatever width the text leaves over. Centred,
   they get the full measure and can run to 540px tall — which is the
   whole point.

   Every atmospheric photograph on this site belongs to The False Eagle,
   so the drama here is built from the covers, light and grain. Nothing
   borrowed from one book's world.
   ============================================================ */
:root{
  --night:#141A21; --night-2:#1C242E; --night-3:#0C1116;
  --on-night:#F4EFE5; --on-night-2:#9AA3AE;
}

.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; isolation:isolate;
  padding:clamp(48px,6.5vh,84px) clamp(20px,5vw,56px) clamp(34px,5vh,60px);
  background:
    radial-gradient(1200px 760px at 50% 26%, rgba(214,186,138,.15) 0%, transparent 64%),
    radial-gradient(900px 620px at 82% 92%, rgba(123,45,38,.13) 0%, transparent 68%),
    radial-gradient(760px 560px at 12% 8%, rgba(88,116,140,.12) 0%, transparent 70%),
    linear-gradient(163deg, var(--night-2) 0%, var(--night) 44%, var(--night-3) 100%);
  color:var(--on-night);
}
/* film grain — what stops a dark ground reading as flat colour */
.hero::before{
  content:""; position:absolute; inset:-50%; pointer-events:none; z-index:0; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* vignette */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 44%, transparent 46%, rgba(0,0,0,.46) 100%);
}
.hero > *{ position:relative; z-index:1; }

.hero .lede{ text-align:center; max-width:900px; margin:0 auto; }
.hero .eyebrow{ font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.34em; font-size:13px; color:var(--on-night-2); margin:0 0 16px; }
.hero h1{ font-weight:600; font-size:clamp(2.6rem,7vw,5rem); line-height:.98;
  letter-spacing:.01em; margin:0; color:var(--on-night);
  text-shadow:0 2px 40px rgba(0,0,0,.5); }
.hero h1 .w{ display:inline-block; }
/* The tagline scales WITH the name. The name is 7vw up to 5rem; if the sub
   caps out low the gap widens on every big screen and the line reads as a
   caption. Keep them within ~3x of each other at any width. */
.hero .sub{ font-style:italic; font-weight:400; font-size:clamp(1.25rem,1.9vw,1.8rem);
  line-height:1.5; color:var(--on-night-2); margin:18px auto 0; max-width:44ch;
  text-wrap:balance; }

/* ---- the fan: big, deep, lit ---- */
.fan-wrap{ perspective:1600px; margin:clamp(26px,4vh,48px) auto 0; }
.fan{ display:flex; align-items:flex-end; justify-content:center;
  transform-style:preserve-3d; }
.fan a{ display:block; line-height:0; position:relative; text-decoration:none;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .5s ease; }
.fan img{ display:block; height:min(clamp(260px,40vw,620px),54vh); width:auto; max-width:none;
  box-shadow:0 3px 6px rgba(0,0,0,.55), 0 46px 80px -26px rgba(0,0,0,.8),
             0 90px 120px -60px rgba(0,0,0,.7);
  outline:1px solid rgba(255,255,255,.11); outline-offset:-1px; }
.fan a:nth-child(1){ --base:rotate(-8deg) translateY(20px); z-index:1; }
/* Overlap is what makes these read as objects rather than three flat images,
   but it was eating the outer two titles. Enough to keep them stacked, not
   enough to clip "THE FALSE EAGLE" or "THE BOAR'S HEAD BLADE". */
.fan a:nth-child(2){ --base:rotate(-1deg) translateY(-10px); z-index:3;
  margin-left:clamp(-46px,-3vw,-22px); }
.fan a:nth-child(3){ --base:rotate(7deg)  translateY(16px); z-index:2;
  margin-left:clamp(-46px,-3vw,-22px); }
.fan a{ transform:var(--base); }
.fan:hover a{ filter:brightness(.5) saturate(.72); }
.fan a:hover, .fan a:focus-visible{
  transform:rotate(0deg) translateY(-26px) scale(1.06) !important;
  filter:brightness(1.08) saturate(1.04) !important; z-index:9; }
.fan a::after{ content:attr(data-title); position:absolute; left:50%; bottom:-34px;
  transform:translateX(-50%); white-space:nowrap; opacity:0;
  font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:13px; color:var(--on-night);
  transition:opacity .3s ease; }
.fan a:hover::after, .fan a:focus-visible::after{ opacity:1; }

/* scroll cue */
.cue-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:clamp(20px,3.2vh,40px) auto 0; text-decoration:none;
  font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; font-size:13px; color:var(--on-night-2);
  transition:color .3s ease; }
.cue-scroll:hover{ color:var(--on-night); }
.cue-scroll .line{ width:1px; height:32px;
  background:linear-gradient(180deg,rgba(244,239,229,.5),transparent); }
@keyframes drop{ 0%{ transform:translateY(-6px); opacity:0 } 40%{ opacity:1 }
  100%{ transform:translateY(10px); opacity:0 } }
.cue-scroll .line::after{ content:""; display:block; width:1px; height:12px;
  background:var(--on-night); animation:drop 2.4s ease-in-out infinite; }

/* ---- one orchestrated arrival ---- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1 } }
.hero .eyebrow,.hero .sub,.cue-scroll{ animation:riseIn .9s cubic-bezier(.2,.7,.3,1) backwards }
.hero .eyebrow{ animation-delay:.08s } .hero .sub{ animation-delay:.5s }
.cue-scroll{ animation-delay:1.35s }
@keyframes wordIn{ from{ opacity:0; transform:translateY(38px) rotate(2deg) } to{ opacity:1 } }
.hero h1 .w{ animation:wordIn .95s cubic-bezier(.2,.7,.3,1) backwards }
.hero h1 .w:nth-child(1){ animation-delay:.18s } .hero h1 .w:nth-child(2){ animation-delay:.3s }
@keyframes dealIn{ from{ opacity:0; transform:translateY(64px) rotate(0deg) scale(.9) } }
.fan a{ animation:dealIn 1.05s cubic-bezier(.2,.7,.3,1) backwards }
.fan a:nth-child(1){ animation-delay:.62s }
.fan a:nth-child(2){ animation-delay:.78s }
.fan a:nth-child(3){ animation-delay:.94s }

.page{ background:var(--paper); }
.title-block{ display:none; }
.rhead{ padding-top:26px; }

/* Short viewports (laptops at 700-800px tall). The hero is a vertical
   budget: padding + eyebrow + name + tagline + cue is fixed chrome, and
   whatever is left belongs to the covers. On a short screen that budget
   goes negative, the covers push the scroll cue off the fold, and the
   composition stops reading as one image. Give the chrome back some
   room and let the covers take a smaller share. */
@media (max-height:820px){
  .hero{ padding-top:clamp(34px,5vh,64px); padding-bottom:clamp(22px,3.5vh,44px); }
  .hero h1{ font-size:clamp(2.3rem,5.6vw,3.9rem); }
  .hero .eyebrow{ margin-bottom:12px; }
  .hero .sub{ margin-top:12px; font-size:clamp(1.15rem,1.6vw,1.45rem); }
  .fan-wrap{ margin-top:clamp(18px,2.6vh,32px); }
  .fan img{ height:min(clamp(210px,30vw,430px),45vh); }
  /* covers shrink here but the overlap is in px, so it would eat a BIGGER
     share of a smaller cover and clip the outer two titles again */
  .fan a:nth-child(2),.fan a:nth-child(3){ margin-left:clamp(-30px,-2vw,-15px); }
  .cue-scroll{ margin-top:clamp(14px,2.2vh,26px); }
  .cue-scroll .line{ height:24px; }
}
@media (max-height:620px){
  .fan img{ height:min(clamp(180px,26vw,340px),42vh); }
  .hero h1{ font-size:clamp(2rem,4.6vw,3rem); }
  .fan a:nth-child(2),.fan a:nth-child(3){ margin-left:clamp(-24px,-1.6vw,-12px); }
}

@media (max-width:760px){
  .hero{ min-height:auto; padding-top:clamp(72px,11vh,110px); }
  /* A phone cannot hold three covers at a readable size side by side. Sized
     so the whole fan fits the screen rather than bleeding off both edges —
     the catalogue below names each book at full width anyway. */
  .fan img{ height:clamp(160px,38vw,300px); }
  .fan a:nth-child(2),.fan a:nth-child(3){ margin-left:-18px; }
  /* the rotated covers overhang their layout box; the cue needs to clear
     the corners, not just the box */
  .cue-scroll{ margin-top:clamp(30px,5vh,48px); }
}
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero .sub,.hero h1 .w,.fan a,.cue-scroll,.cue-scroll .line::after{
    animation:none !important; }
  .fan:hover a{ filter:none }
}

/* ============================================================
   FEATURED BAND — the one book a visitor can actually enter today.
   Also solves a gap: The False Eagle's best rooms (the Atlas, the
   Sixth Bell, the Field Kit) were two clicks deep and unlinked from
   the front door.
   ============================================================ */
.featured{ background:var(--paper-2);
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); }
.featured-in{ max-width:1080px; margin:0 auto;
  padding:clamp(46px,7vh,80px) clamp(24px,6vw,64px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(34px,5vw,68px); align-items:center; }
.featured .shot{ position:relative; display:block; width:fit-content; line-height:0;
  transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.featured .shot img{ display:block; height:clamp(240px,26vw,380px); width:auto; max-width:none;
  box-shadow:0 3px 6px rgba(42,33,24,.34), 0 34px 56px -22px rgba(42,33,24,.46);
  transition:box-shadow .6s ease; }
.featured .shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(42,33,24,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.featured .shot:hover{ transform:translateY(-5px) }
.featured .shot:hover img{ box-shadow:0 4px 8px rgba(42,33,24,.30), 0 50px 76px -26px rgba(42,33,24,.5) }
.featured .tag{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--micro); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  font-size:13px; color:var(--accent); }
.featured .tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.featured h2{ font-weight:600; font-size:clamp(2rem,4vw,2.9rem); line-height:1.12;
  letter-spacing:.006em; margin:0 0 16px; color:var(--ink); }
.featured p{ font-weight:500; font-size:1.3rem; line-height:1.64; color:var(--ink-2);
  margin:0 0 24px; max-width:50ch; }
.rooms{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; list-style:none; }
.rooms a{ display:inline-block; padding:7px 13px; text-decoration:none;
  border:1px solid var(--rule-strong); color:var(--ink-2);
  font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; font-size:13px;
  transition:background .3s ease,color .3s ease,border-color .3s ease; }
.rooms a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.featured .go{ display:inline-flex; align-items:center; gap:12px;
  font-family:var(--micro); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; color:var(--paper); background:var(--accent); border:1px solid var(--accent);
  padding:14px 24px; text-decoration:none;
  transition:background .3s ease,border-color .3s ease,gap .3s ease; }
.featured .go .arrow{ width:22px; height:1px; background:currentColor; }
.featured .go:hover{ background:var(--accent-deep); border-color:var(--accent-deep); gap:18px; }
@media (max-width:820px){
  .featured-in{ grid-template-columns:1fr; gap:30px; }
  .featured .shot img{ height:clamp(220px,44vw,300px); }
}

/* ---------- catalogue covers: bigger, deeper ---------- */
.entry{ grid-template-columns:284px 1fr; column-gap:56px; }
.plate img{ height:404px;
  box-shadow:0 2px 4px rgba(42,33,24,.30), 0 28px 46px -18px rgba(42,33,24,.36); }
.entry:hover .plate img,.entry:focus-visible .plate img{
  box-shadow:0 3px 6px rgba(42,33,24,.28), 0 52px 78px -30px rgba(42,33,24,.44); }
@media (max-width:900px){ .entry{ grid-template-columns:190px 1fr; column-gap:36px; }
  .plate img{ height:272px; } }
@media (max-width:619px){ .entry{ grid-template-columns:1fr; } .plate img{ height:280px; } }

/* ---------- mailing list ---------- */
.signup{ margin-top:clamp(56px,8vh,92px); background:var(--night);
  color:var(--on-night); position:relative; overflow:hidden; isolation:isolate; }
.signup::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(760px 380px at 22% 0%, rgba(214,186,138,.14), transparent 66%),
             radial-gradient(560px 320px at 88% 100%, rgba(123,45,38,.16), transparent 70%); }
.signup-in{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;
  padding:clamp(46px,7vh,78px) clamp(24px,6vw,48px); }
.signup .eyebrow{ font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; font-size:13px; color:var(--on-night-2); margin:0 0 16px; }
.signup h2{ font-weight:600; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.16;
  margin:0 0 14px; color:var(--on-night); }
.signup p{ font-weight:400; font-style:italic; font-size:1.25rem; line-height:1.56;
  color:var(--on-night-2); margin:0 auto 28px; max-width:46ch; }
/* The form is a column of rows now, not one line: name + email, then book +
   format, then the early-reader opt-in. Same list, more to say to it. */
.signup form{ display:block; max-width:560px; margin:0 auto; text-align:left; }
.sg-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.sg-row > *{ flex:1 1 200px; min-width:0; }
.signup input[type=text], .signup select{
  background:rgba(255,255,255,.06); border:1px solid rgba(244,239,229,.26);
  color:var(--on-night); font-family:var(--serif); font-size:1.06rem; font-weight:500;
  padding:14px 18px; width:100%; border-radius:0;
  transition:border-color .3s ease, background .3s ease; }
.signup select{ font-family:var(--micro); font-size:15px; }
.signup input[type=text]::placeholder{ color:rgba(154,163,174,.85); font-style:italic; }
.signup input[type=text]:focus, .signup select:focus{ outline:none;
  border-color:var(--on-night); background:rgba(255,255,255,.1); }
.signup .sg-chk{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px;
  color:var(--on-night-2); font-size:1.02rem; cursor:pointer; }
.signup .sg-chk input{ margin-top:6px; flex:none; }
.signup .sg-fine{ margin:16px 0 0; font-size:.98rem; color:var(--on-night-2);
  font-style:normal; }
.signup input[type=email]{ flex:1 1 300px; max-width:none; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(244,239,229,.26);
  color:var(--on-night); font-family:var(--serif); font-size:1.08rem; font-weight:500;
  padding:14px 18px; transition:border-color .3s ease, background .3s ease; }
.signup input[type=email]::placeholder{ color:rgba(154,163,174,.85); font-style:italic; }
.signup input[type=email]:focus{ outline:none; border-color:var(--on-night);
  background:rgba(255,255,255,.1); }
.signup button{ flex:none; font-family:var(--micro); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:13px; color:var(--night); background:var(--on-night);
  border:1px solid var(--on-night); padding:14px 26px; cursor:pointer;
  transition:opacity .3s ease, transform .2s ease; }
.signup button:hover{ opacity:.88 } .signup button:active{ transform:translateY(1px) }
.signup button[disabled]{ opacity:.5; cursor:default }
.signup .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.signup .msg{ margin:18px 0 0; min-height:1.4em; font-style:normal; font-size:1rem;
  color:var(--on-night-2); }
.signup .msg.ok{ color:#CBB98C } .signup .msg.err{ color:#E0A49C }
.foot{ margin-top:0; }

/* The featured book also appears in the catalogue below (marquee + index —
   the same pattern Silva uses). Back to back with an identical cover it
   read as a duplication bug, so give the index real separation. */
.featured + .page .rhead{ padding-top:44px; }
.featured + .page .shelf:first-of-type{ margin-top:26px; }