/* ═══════════════════════════════════════════════════════════════════
   ACME BOOKS — nautical chart bookstore
   A fixed chart plane that pans between destinations; paper "windows"
   fly in and out over it. Every corner is a concave circular scoop, never a radius.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root{
  --sea:        #1c5073;
  --sea-deep:   #16405d;
  --paper:      #f1e4c7;
  --navy:       #12294e;
  --navy-lift:  #1b3a63;

  --ink:        #163150;   /* text on paper   */
  --ink-soft:   #3d5570;
  --cream:      #f3e7ce;   /* text on navy/sea */
  --rust:       #b04a2f;
  --rust-deep:  #8d3821;
  --rust-lift:  #c8654a;
  --gold:       #c7a877;
  --sepia:      #9a8055;
  --sepia-deep: #6b5636;

  /* Tone-mapped tiles (tools/temper.py) — already the right colour and
     grain strength, so they go down flat with no blend mode. */
  --tex-ocean: url("../assets/paper-ocean.webp");
  --tex-cream: url("../assets/paper-cream.webp");
  --tex-navy:  url("../assets/paper-navy.webp");
  --tile: 430px;

  --edge:   2px;
  --keyin:  9px;

  /* Concave corner scoops. Every corner has a quarter-disc bitten out of it,
     centred exactly on the corner point — four quadrant mask layers union
     together (mask-composite defaults to `add`) to cover the rest of the box.

     --r is the scoop radius at the outermost edge; --o is how far this layer
     sits inside that edge. Offsetting a boundary inward past a concave arc
     grows the same circle, so a nested layer is `--r + --o` about a centre
     pushed out by --o — which keeps every arc concentric and parallel.

     The cut is scaled to the object: a big paper window can carry a deep
     scoop, but the same radius on a button eats most of its height, so
     controls step down sharply. */
  --r-panel:   15px;    /* full paper windows                        */
  --r-plate:    9px;    /* mid-size plates — wordmark, book cards    */
  --r-control:  4.5px;  /* buttons, inputs, search, account, covers  */
  --r-chip:     2.5px;  /* checkboxes, pager, date chips             */

  --r: var(--r-control);
  --o: 0px;

  /* The pan itself is eased in JS (chart.js) so the canvas can track it
     frame-for-frame; this curve is shared with the compass drift. */
  --pan-ease: cubic-bezier(.66,.01,.16,1);

  --f-display: "Cormorant Garamond", "Hoefler Text", Garamond, serif;
  --f-title:   "Lora", "Iowan Old Style", Georgia, serif;
  --f-body:    "EB Garamond", "Iowan Old Style", Georgia, serif;

  --gutter: 46px;
  --head-h: 150px;
}

@media (max-width: 1180px){ :root{ --gutter: 30px; --head-h: 138px; } }


/* ── The scoop, applied ───────────────────────────────────────────────
   Written here rather than as a `--scoop` custom property on :root,
   because a custom property substitutes its own var()s on the element that
   DECLARES it — a :root definition bakes in :root's --r/--o and silently
   ignores every local override. Listing the elements keeps resolution local,
   so each one gets its own radius and its own offset.

   --R = --r + --o: a nested layer's arc is the outer radius plus its distance
   in from the outer edge, which is what keeps the arcs concentric. --o is
   always measured from the OUTERMOST edge, not from the immediate parent. */
.panel, .panel__face, .panel__key, .panel__key::before,
.mark__plate, .mark__plate::before, .mark__key, .mark__key::before,
.search, .search::before,
.account, .account::before, .account__key, .account__key::before,
.btn, .btn::before, .btn__key, .btn__key::before,
.input, .input::before,
.cover, .bcard, .bcard::before,
.check__box, .check__box::before,
.pager button, .disc__date{
  --R: calc(var(--r) + var(--o));
  -webkit-mask:
    radial-gradient(circle var(--R) at calc(0px - var(--o)) calc(0px - var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) left top / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(100% + var(--o)) calc(0px - var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) right top / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(0px - var(--o)) calc(100% + var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) left bottom / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(100% + var(--o)) calc(100% + var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) right bottom / 51% 51% no-repeat;
  mask:
    radial-gradient(circle var(--R) at calc(0px - var(--o)) calc(0px - var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) left top / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(100% + var(--o)) calc(0px - var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) right top / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(0px - var(--o)) calc(100% + var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) left bottom / 51% 51% no-repeat,
    radial-gradient(circle var(--R) at calc(100% + var(--o)) calc(100% + var(--o)),
      #0000 calc(100% - .6px), #000 calc(100% + .6px)) right bottom / 51% 51% no-repeat;
}

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

html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  background: var(--sea-deep);
  font-family: var(--f-body);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══ THE CHART ═══════════════════════════════════════════════════ */
/* Deliberately untransformed. Scroll parallax is folded into the pan offset
   instead, so the lit canvas stays in true screen space — otherwise the lamp
   would drift away from the pointer as a route scrolls. */
.chart{ position:fixed; inset:0; overflow:hidden; z-index:0; }

/* The lit background. Sits under every DOM chart layer; when it is running
   it takes over the sea, the linework and the island art, and the DOM keeps
   only the things that must stay crisp text or vector. */
.chart__gl{
  position:absolute; inset:0; z-index:0;
  display:block; pointer-events:none;
}

.chart__world{
  position:absolute; top:0; left:0; z-index:1;
  width: var(--world-w); height: var(--world-h);
  transform: translate3d(var(--tx), var(--ty), 0);
  will-change: transform;
}
.is-gl .sea, .is-gl .depth, .is-gl .isle img{ display:none; }
.is-gl .isle{ aspect-ratio:1; filter:none; }

.sea{
  position:absolute; inset:-2400px;
  background: var(--tex-ocean) repeat var(--sea);
  background-size: 560px 560px;
}
/* Vignette + a slow wash of tonal drift so the paper never reads as flat. */
.sea::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(100% 80% at 78% 76%, rgba(0,0,0,.20), transparent 60%);
}

.depth, .routes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.isles{ position:absolute; inset:0; }

.isle{
  position:absolute;
  transform: translate(-50%,-50%) rotate(var(--rot,0deg));
  opacity:.96;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.isle img{ display:block; width:100%; height:auto; }

.isle__name{
  position:absolute; left:50%; top:100%;
  transform: translate(-50%, 6px) rotate(calc(-1 * var(--rot,0deg)));
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(243,231,206,.62);
  white-space:nowrap;
}

/* Ink drawings floating on the open water */
.seamark{ position:absolute; transform: translate(-50%,-50%); opacity:.5; mix-blend-mode:luminosity; }
.seamark img{ display:block; width:100%; height:auto; }

/* Hand-lettered chart notes */
.note{
  position:absolute; transform: translate(-50%,-50%);
  display:grid; gap:4px; text-align:left; white-space:nowrap;
  font-family: var(--f-display); font-weight:600;
  font-size:14px; letter-spacing:.24em; text-transform:uppercase; line-height:1.42;
  color: rgba(243,231,206,.5);
}
.note--big{
  font-style:italic; font-size:19px; letter-spacing:.16em;
  color: rgba(243,231,206,.4);
}
.note__c{
  font-family: var(--f-body); font-weight:400; font-size:13px;
  letter-spacing:.14em; color: rgba(200,101,74,.62);
}
/* The voyage line marches slowly, like a plotted course being laid down. */
.routes__line{ animation: sail 5.5s linear infinite; }
@keyframes sail{ to{ stroke-dashoffset: -56; } }
@media (prefers-reduced-motion: reduce){ .routes__line{ animation:none; } }

/* ═══ RULERS ══════════════════════════════════════════════════════ */
.rule{ position:fixed; z-index:55; pointer-events:none; overflow:hidden; }
.rule--top   { top:10px;  left:10px; right:10px; height:38px; }
.rule--bottom{ bottom:10px; left:10px; right:10px; height:38px; }
.rule--right { top:10px;  right:10px; bottom:10px; width:58px; }
.rule--left  { top:10px;  left:10px;  bottom:10px; width:20px; }

/* The track must fill its ruler so ticks anchored with right:0 land on
   the ruler's edge rather than collapsing to a zero-width box. */
.rule__track{
  position:absolute; top:0; left:0;
  will-change: transform;
}
.rule--top .rule__track, .rule--bottom .rule__track{
  width:100%; height:100%; transform: translate3d(var(--rtx,0px),0,0);
}
.rule--right .rule__track, .rule--left .rule__track{
  width:100%; height:100%; transform: translate3d(0,var(--rty,0px),0);
}

.tick{ position:absolute; background: rgba(243,231,206,.42); }
.rule--top .tick, .rule--bottom .tick{ width:1px; }
.rule--right .tick, .rule--left .tick{ height:1px; }

.rule--top .tick   { top:0; height:6px; }
.rule--top .tick--maj{ height:11px; background: rgba(243,231,206,.72); }
.rule--bottom .tick{ bottom:0; height:6px; }
.rule--bottom .tick--maj{ height:11px; background: rgba(243,231,206,.72); }
.rule--right .tick { right:0; width:6px; }
.rule--right .tick--maj{ width:11px; background: rgba(243,231,206,.72); }
.rule--left .tick  { left:0; width:5px; }
.rule--left .tick--maj{ width:9px; background: rgba(243,231,206,.6); }

.tick__lab{
  position:absolute;
  font-family: var(--f-body);
  font-size: 12.5px;
  letter-spacing:.13em;
  color: rgba(243,231,206,.8);
  white-space:nowrap;
}
.rule--top .tick__lab   { top:14px; left:50%; transform: translateX(-50%); }
.rule--bottom .tick__lab{ bottom:14px; left:50%; transform: translateX(-50%); }
.rule--right .tick__lab { right:15px; top:50%; transform: translateY(-50%); }
.rule--right .tick, .rule--left .tick{ right:0; }

.rule__legend{
  position:absolute; left:50%; bottom:11px; transform:translateX(-50%);
  font-family: var(--f-display);
  font-size:14px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color: rgba(243,231,206,.62);
  background: transparent;
  padding: 0 16px;
}

/* ═══ CHART FRAME ═════════════════════════════════════════════════ */
.chart-frame{
  position:fixed; inset:0; z-index:58; pointer-events:none;
  padding:10px;
  background: var(--tex-cream) repeat var(--paper);
  background-size: 300px 300px;
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.chart-frame::after{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(107,86,54,.85);
}
.chart-frame::before{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(107,86,54,.5);
}

/* ═══ COMPASS ROSE ════════════════════════════════════════════════ */
.rose{
  position:fixed; z-index:12; pointer-events:none;
  right: 3.2vw; top: 20vh;
  width: min(23vw, 300px); aspect-ratio:1;
  opacity:.9;
  transition: transform 2400ms var(--pan-ease), opacity 700ms ease;
}
.rose svg{ width:100%; height:100%; display:block; }
@media (max-width: 1180px){ .rose{ opacity:.4; } }

/* ═══ POSITION READOUT ════════════════════════════════════════════ */
.fix{
  position:fixed; z-index:12; pointer-events:none;
  left: calc(var(--gutter) + 4px); bottom: 74px;
  display:grid; gap:2px;
}
.fix__label{
  font-family: var(--f-display); font-size:12.5px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color: rgba(243,231,206,.5);
}
.fix__place{
  font-family: var(--f-title); font-size:19px; font-style:italic;
  color: rgba(243,231,206,.9);
}
.fix__coord{
  font-family: var(--f-body); font-size:13px; letter-spacing:.14em;
  color: var(--rust-lift);
}
@media (max-width: 1180px){ .fix{ display:none; } }

/* ═══ MASTHEAD ════════════════════════════════════════════════════ */
.masthead{
  position:fixed; z-index:70;
  top:26px; left: var(--gutter); right: var(--gutter);
  display:flex; align-items:flex-start; gap:30px;
}

/* Wordmark plate — a small chamfered paper card */
.mark{ text-decoration:none; flex:none; }
.mark__plate{
  --r: var(--r-plate); --o: 0px;
  position:relative; display:grid; justify-items:center;
  padding:13px 30px 11px;
  background: rgba(107,86,54,.9);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.34));
  transition: transform 400ms cubic-bezier(.2,.8,.3,1);
}
.mark:hover .mark__plate{ transform: translateY(-2px); }
.mark__plate::before{
  content:""; position:absolute; inset:2px; z-index:-1;
  --r: var(--r-plate); --o: 2px;
  background: var(--tex-cream) repeat var(--paper); background-size:330px 330px;
}
/* Keylines are a two-layer sandwich, not a border — a border only paints the
   four straight edges, so it would break across every scooped corner. */
.mark__key{
  --r: var(--r-plate); --o: 7px;
  /* Behind the wordmark text but in front of the plate's paper fill. */
  position:absolute; inset:7px; z-index:-1; pointer-events:none;
  background: rgba(107,86,54,.55);
}
.mark__key::before{
  --o: 8px;
  content:""; position:absolute; inset:1px;
  background: var(--tex-cream) repeat var(--paper);
  background-size: 330px 330px;
  background-position: -6px -6px;
}
.mark__anchor{ width:17px; height:21px; color: var(--ink); margin-bottom:1px; }
.mark__name{
  font-family: var(--f-display); font-weight:600; font-size:34px;
  letter-spacing:.045em; line-height:1; color: var(--ink);
  font-variant: small-caps; text-transform: lowercase;
}
.mark__rule{
  font-family: var(--f-body); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--ink-soft); margin-top:5px;
}
.mark__est{
  font-family: var(--f-body); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color: var(--sepia); margin-top:2px;
}

/* Nav */
.nav{ display:flex; gap:clamp(18px,3.2vw,56px); padding-top:26px; flex:1; justify-content:center; }
.nav__item{
  position:relative; display:grid; justify-items:center; gap:7px;
  text-decoration:none; color: var(--cream);
  font-family: var(--f-display); font-weight:600; font-size:16px;
  letter-spacing:.19em; text-transform:uppercase;
  opacity:.82; transition: opacity 260ms ease, transform 260ms ease;
}
.nav__item:hover{ opacity:1; transform: translateY(-2px); }
.nav__glyph{ width:22px; height:22px; color: var(--cream); opacity:.78; }
.nav__glyph--wide{ width:58px; height:22px; }
.nav__item span{ position:relative; }
.nav__item span::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--cream); transform: scaleX(0); transform-origin:center;
  transition: transform 340ms cubic-bezier(.2,.8,.3,1);
}
.nav__item:hover span::after, .nav__item.is-active span::after{ transform: scaleX(1); }
.nav__item.is-active{ opacity:1; }

/* Search + account */
.masthead__tools{ display:flex; align-items:center; gap:16px; padding-top:24px; flex:none; }

.search{
  --r: var(--r-control);  --o: 0px;
  position:relative; display:flex; align-items:center; gap:9px;
  width: clamp(190px, 20vw, 268px);
  padding:9px 15px;
  background: rgba(107,86,54,.75);
}
.search::before{
  content:""; position:absolute; inset:1px; z-index:0;
  --r: var(--r-control);  --o: 1px;
  background: rgba(241,228,199,.93);
}
.search__icon{ position:relative; width:15px; height:15px; color: var(--ink-soft); flex:none; }
.search__input{
  position:relative; flex:1; min-width:0;
  border:0; background:transparent; outline:none;
  font-family: var(--f-body); font-size:14.5px; color: var(--ink);
}
.search__input::placeholder{ color: rgba(61,85,112,.62); font-style:italic; }
.search__input::-webkit-search-cancel-button{ display:none; }

.account{
  --r: var(--r-control);  --o: 0px;
  position:relative; display:flex; align-items:center; gap:9px;
  padding:10px 20px; text-decoration:none;
  background: rgba(243,231,206,.55);
  transition: background 300ms ease;
}
/* Near-opaque rather than a light wash: the keyline below is a stacked
   sandwich, so the fill has to hide the layer beneath it. At .93 the double
   overlap inside the keyline is imperceptible. */
.account::before{
  content:""; position:absolute; inset:1px;
  --r: var(--r-control);  --o: 1px;
  background: rgba(23,60,89,.93);
  backdrop-filter: blur(2px);
}
.account__key{
  --r: var(--r-control);  --o: 4px;
  position:absolute; inset:4px; pointer-events:none;
  background: rgba(243,231,206,.4);
}
.account__key::before{
  content:""; position:absolute; inset:1px;
  --o: 5px;
  background: rgba(23,60,89,.93);
}
.account:hover{ background: rgba(243,231,206,.85); }
.account:hover .account__key{ background: rgba(243,231,206,.6); }
.account span{
  position:relative; font-family: var(--f-display); font-weight:600; font-size:15px;
  letter-spacing:.17em; text-transform:uppercase; color: var(--cream);
}
.account__icon{ position:relative; width:16px; height:16px; color: var(--cream); }

@media (max-width: 1180px){
  .masthead{ gap:16px; }
  .nav{ gap:20px; }
  .search{ display:none; }
  .mark__name{ font-size:27px; }
}

/* ═══ STAGE ═══════════════════════════════════════════════════════ */
.stage{
  position:fixed; z-index:40;
  top: var(--head-h); left: var(--gutter); right: var(--gutter);
  bottom: 62px;
}
/* Views scroll on their own so a route can be taller than the viewport
   without the chart, rulers or masthead moving with it. */
.view{
  position:absolute; inset:0; display:grid; gap:22px;
  align-content:start; grid-auto-rows:auto;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color: rgba(243,231,206,.32) transparent;
  padding-right:4px;
}
.view::-webkit-scrollbar{ width:9px; }
.view::-webkit-scrollbar-track{ background: rgba(6,24,40,.22); }
.view::-webkit-scrollbar-thumb{ background: rgba(243,231,206,.3); }
.view::-webkit-scrollbar-thumb:hover{ background: rgba(243,231,206,.5); }

/* ── Panel: the chamfered paper window ──────────────────────────── */
/* Flex all the way down instead of percentage heights — a stretched grid
   item makes `height:100%` circular, which silently clamps tall routes. */
.panel{
  --r: var(--r-panel); --o: 0px;
  position:relative; display:flex;
  padding: var(--edge);
  background: rgba(107,86,54,.92);
  filter: drop-shadow(0 22px 34px rgba(4,16,28,.42)) drop-shadow(0 3px 6px rgba(4,16,28,.3));
}
.panel--navy{ background: rgba(199,168,119,.55); }

.panel__face{
  --o: var(--edge);
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  background: var(--tex-cream) repeat var(--paper);
  background-size: var(--tile) var(--tile);
}
.panel--navy .panel__face{ background: var(--tex-navy) repeat var(--navy); background-size: var(--tile) var(--tile); }
/* A whisper of wear toward the edges so each sheet reads as a real cut page. */
.panel__face::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(125% 105% at 50% 42%, transparent 58%, rgba(107,86,54,.13));
}
.panel--navy .panel__face::after{
  background: radial-gradient(125% 105% at 50% 42%, transparent 55%, rgba(0,0,0,.3));
}

/* Inset keyline, drawn as a clipped ring so the 45° cuts stay mitred */
.panel__key{
  --o: calc(var(--edge) + var(--keyin));
  position:absolute; inset: var(--keyin); z-index:1; pointer-events:none;
  background: rgba(107,86,54,.5);
}
/* The well is offset back by exactly its own inset so the paper grain runs
   continuously across the keyline instead of restarting inside it. */
.panel__key::before{
  --o: calc(var(--edge) + var(--keyin) + 1px);
  content:""; position:absolute; inset:1px;
  background: var(--tex-cream) repeat var(--paper);
  background-size: var(--tile) var(--tile);
  background-position: calc(-1 * (var(--keyin) + 1px)) calc(-1 * (var(--keyin) + 1px));
}
.panel--navy .panel__key{ background: rgba(199,168,119,.4); }
.panel--navy .panel__key::before{
  background: var(--tex-navy) repeat var(--navy);
  background-size: var(--tile) var(--tile);
  background-position: calc(-1 * (var(--keyin) + 1px)) calc(-1 * (var(--keyin) + 1px));
}

.panel__body{
  position:relative; z-index:2; flex:1 1 auto;
  display:flex; flex-direction:column;
  padding: 30px 34px 26px;
  color: var(--ink);
}
.panel--navy .panel__body{ color: var(--cream); }
@media (max-width:1180px){ .panel__body{ padding:22px 22px 18px; } }

/* Panel flight choreography */
.view--out .panel{
  animation: panel-out 620ms cubic-bezier(.55,0,.85,.3) forwards;
  animation-delay: calc(var(--i,0) * 55ms);
}
.view--in .panel{
  animation: panel-in 900ms cubic-bezier(.16,.9,.24,1) both;
  animation-delay: calc(360ms + var(--i,0) * 90ms);
}
@keyframes panel-out{
  to{ opacity:0; transform: translate(calc(var(--fx) * -70px), calc(var(--fy) * -70px)) rotate(var(--spin,-1.1deg)) scale(.955); }
}
@keyframes panel-in{
  from{ opacity:0; transform: translate(calc(var(--fx) * 92px), calc(var(--fy) * 92px)) rotate(calc(var(--spin,-1.1deg) * -1)) scale(.955); }
  to  { opacity:1; transform: none; }
}
.view--in .hero, .view--in .stack{
  animation: panel-in 900ms cubic-bezier(.16,.9,.24,1) both;
  animation-delay: calc(300ms + var(--i,0) * 90ms);
}
.view--out .hero, .view--out .stack{
  animation: panel-out 620ms cubic-bezier(.55,0,.85,.3) forwards;
  animation-delay: calc(var(--i,0) * 55ms);
}
@media (prefers-reduced-motion: reduce){
  .view--in .panel,.view--out .panel,.view--in .hero,.view--out .hero,
  .view--in .stack,.view--out .stack{ animation-duration:1ms; animation-delay:0ms; }
  .rose{ transition-duration:1ms; }   /* the pan is shortened in chart.js */
}

/* ═══ TYPE ════════════════════════════════════════════════════════ */
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family: var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.36em; text-transform:uppercase; color: rgba(243,231,206,.78);
}
.eyebrow::before,.eyebrow::after{ content:""; width:34px; height:1px; background: rgba(243,231,206,.5); }

.hero{ display:grid; justify-items:center; align-content:center; gap:16px; text-align:center; }
.hero__title{
  margin:0; font-family: var(--f-title); font-weight:600;
  font-size: clamp(46px, 6.2vw, 96px); line-height:.99;
  letter-spacing:-.014em; color: var(--cream);
  text-shadow: 0 4px 22px rgba(6,20,34,.45);
}
.hero__title em{ font-style:italic; }
.hero__sub{
  margin:0; max-width:34ch; font-size: clamp(17px,1.45vw,22px); line-height:1.5;
  color: rgba(243,231,206,.86);
}

.sect-title{
  margin:0; font-family: var(--f-display); font-weight:600;
  font-size: clamp(30px,3vw,44px); letter-spacing:.04em;
  font-variant: small-caps; text-transform: lowercase;
  line-height:1.06; color: var(--ink);
}
.panel--navy .sect-title{ color: var(--cream); }
.sect-sub{
  margin:5px 0 0; font-style:italic; font-size:17px; color: var(--ink-soft);
}
.panel--navy .sect-sub{ color: rgba(243,231,206,.76); }

.sect-head{ display:grid; justify-items:center; text-align:center; flex:none; }
.sect-head--star{ display:flex; align-items:center; justify-content:center; gap:18px; }
.star-mark{ width:17px; height:17px; color: var(--rust); flex:none; }

.hr-anchor{
  display:flex; align-items:center; gap:14px; margin:14px 0 4px; flex:none;
  color: rgba(107,86,54,.4);
}
.hr-anchor::before,.hr-anchor::after{ content:""; height:1px; flex:1; background: currentColor; }
.hr-anchor svg{ width:14px; height:17px; opacity:.85; }
.panel--navy .hr-anchor{ color: rgba(199,168,119,.45); }

/* ═══ BUTTONS ═════════════════════════════════════════════════════ */
.btn{
  --r: var(--r-control); --o: 0px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding: 15px 34px; border:0; cursor:pointer; text-decoration:none;
  background: var(--rust-deep);
  transition: transform 300ms cubic-bezier(.2,.8,.3,1), filter 300ms ease;
  filter: drop-shadow(0 6px 12px rgba(4,16,28,.3));
}
.btn::before{
  content:""; position:absolute; inset:1px; z-index:0;
  --r: var(--r-control);  --o: 1px;
  background: var(--rust);
}
.btn__key{
  --r: var(--r-control); --o: 5px;
  position:absolute; inset:5px; z-index:1; pointer-events:none;
  background: rgba(243,231,206,.42);
}
.btn__key::before{
  --o: 6px;
  content:""; position:absolute; inset:1px;
  background: var(--rust);
}
.btn--ghost .btn__key{ background: rgba(107,86,54,.4); }
.btn--ghost .btn__key::before{
  background: var(--tex-cream) repeat var(--paper);
  background-size: 330px 330px;
  background-position: -5px -5px;
}
.btn > *{ position:relative; z-index:2; }
.btn:hover{ transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(4,16,28,.4)); }
.btn:active{ transform: translateY(0); }
.btn__label{
  font-family: var(--f-display); font-weight:600; font-size:17px;
  letter-spacing:.2em; text-transform:uppercase; color: var(--cream);
}
.btn svg{ width:17px; height:17px; color: var(--cream); }
.btn--wide{ width:100%; }
.btn--sm{ padding:11px 22px; }
.btn--sm .btn__label{ font-size:14.5px; }

/* Ghost button: paper plate on the open sea */
.btn--ghost{ background: rgba(107,86,54,.85); }
.btn--ghost::before{
  background: var(--tex-cream) repeat var(--paper);
  background-size:330px 330px;
}
.btn--ghost::after{ background: rgba(107,86,54,.4); }
.btn--ghost .btn__label{ color: var(--ink); }
.btn--ghost svg{ color: var(--rust); }

/* Text link with an arrow */
.morelink{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family: var(--f-display); font-weight:600; font-size:15.5px;
  letter-spacing:.2em; text-transform:uppercase; color: var(--ink);
  transition: gap 300ms cubic-bezier(.2,.8,.3,1), color 260ms ease;
}
.morelink svg{ width:24px; height:16px; }
.morelink:hover{ gap:19px; color: var(--rust); }
.panel--navy .morelink{ color: var(--cream); }
.panel--navy .morelink:hover{ color: var(--gold); }

/* ═══ SCROLL AREAS ════════════════════════════════════════════════
   Panels grow to their content and the view scrolls; only opt-in
   regions (.scroll--y) get their own scrollbar.                    */
.scroll{ flex:1 1 auto; }
.scroll--y{ min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.scroll::-webkit-scrollbar{ width:9px; }
.scroll::-webkit-scrollbar-track{ background: rgba(107,86,54,.10); }
.scroll::-webkit-scrollbar-thumb{ background: rgba(107,86,54,.4); }
.scroll::-webkit-scrollbar-thumb:hover{ background: rgba(107,86,54,.62); }
.panel--navy .scroll{ scrollbar-color: rgba(199,168,119,.5) rgba(0,0,0,.2); }
.panel--navy .scroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.22); }
.panel--navy .scroll::-webkit-scrollbar-thumb{ background: rgba(199,168,119,.42); }

/* ═══ BOOK COVER ══════════════════════════════════════════════════ */
.cover{
  --r: var(--r-control); --o: 0px;
  position:relative; display:block; aspect-ratio: 2/3; overflow:hidden;
  background: var(--navy);
  filter: drop-shadow(0 8px 14px rgba(4,16,28,.36));
  transition: transform 420ms cubic-bezier(.2,.8,.3,1);
}
.cover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.cover__type{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; align-items:center; text-align:center;
  padding: 11% 9%;
}
.cover__title{
  font-family: var(--f-title); font-weight:600;
  font-size: clamp(11px, 1.35cqw, 20px); line-height:1.14;
  letter-spacing:.01em; color: var(--cream);
  text-shadow: 0 1px 7px rgba(0,0,0,.55);
}
.cover__author{
  font-family: var(--f-display); font-weight:600;
  font-size: clamp(8px, .92cqw, 13px); line-height:1.25;
  letter-spacing:.19em; text-transform:uppercase; color: rgba(243,231,206,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.cover--light .cover__title,
.cover--split .cover__title{ color:#33291c; text-shadow: 0 1px 5px rgba(255,250,235,.75); }
.cover--light .cover__author{ color:#57472f; text-shadow: 0 1px 5px rgba(255,250,235,.75); }

/* Scrims sized to where the type actually sits, so every cover keeps
   contrast regardless of what the artwork happens to be doing. */
.cover__type::before, .cover__type::after{
  content:""; position:absolute; left:0; right:0; height:38%; pointer-events:none; z-index:-1;
}
.cover__type{ z-index:1; }
.cover__type::before{ top:0; background: linear-gradient(rgba(6,14,26,.5), transparent); }
.cover__type::after{ bottom:0; background: linear-gradient(transparent, rgba(6,14,26,.5)); }
.cover--light .cover__type::before{ background: linear-gradient(rgba(255,250,238,.62), transparent); }
.cover--light .cover__type::after { background: linear-gradient(transparent, rgba(255,250,238,.62)); }
.cover--split .cover__type::before{ background: linear-gradient(rgba(255,250,238,.6), transparent); }

.cover::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow: inset 0 0 0 1px rgba(243,231,206,.18), inset 0 0 34px rgba(0,0,0,.3);
}
.cover--light::after{ box-shadow: inset 0 0 0 1px rgba(58,47,33,.22), inset 0 0 30px rgba(90,70,40,.14); }
.cover--split::after{ box-shadow: inset 0 0 0 1px rgba(58,47,33,.2), inset 0 0 30px rgba(0,0,0,.16); }

/* ═══ RATING STARS ════════════════════════════════════════════════ */
.stars{ display:inline-flex; align-items:center; gap:2.5px; color: var(--rust); }
.stars svg{ width:13px; height:13px; }
.stars .is-empty{ opacity:.28; }
.stars__n{
  margin-left:7px; font-size:14px; color: var(--ink-soft); letter-spacing:.05em;
}

/* ═══ STAMPS & MARGINALIA ═════════════════════════════════════════ */
.stamp{
  position:absolute; top:16px; right:18px; z-index:3;
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  border:1.5px solid rgba(176,74,47,.5);
  color: rgba(176,74,47,.62);
  transform: rotate(-11deg);
  pointer-events:none;
}
.stamp::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px solid rgba(176,74,47,.4);
}
.stamp__txt{
  font-family: var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.17em; text-transform:uppercase; line-height:1.3;
}
.stamp svg{ width:17px; height:21px; margin:2px auto; display:block; }

.manifest{
  position:absolute; top:-8px; right:22px; z-index:3;
  padding:9px 15px 8px; transform: rotate(4.5deg);
  background: rgba(243,231,206,.14);
  border:1px dashed rgba(199,168,119,.5);
  font-family: var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; line-height:1.35;
  color: rgba(243,231,206,.66); text-align:center; pointer-events:none;
}

/* ═══ FORM CONTROLS ═══════════════════════════════════════════════ */
.field{ display:grid; gap:7px; margin-bottom:15px; }
.field__label{
  font-family: var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:.19em; text-transform:uppercase; color: var(--ink);
}
.input{
  --r: var(--r-control); --o: 0px;
  position:relative; display:flex; align-items:center; gap:11px;
  padding:12px 15px;
  background: rgba(107,86,54,.42);
  transition: background 260ms ease;
}
.input::before{
  content:""; position:absolute; inset:1px;
  --r: var(--r-control); --o: 1px;
  background: rgba(255,250,237,.62);
}
.input:focus-within{ background: var(--rust); }
.input svg{ position:relative; width:16px; height:16px; color: var(--ink-soft); flex:none; }
.input input, .input select{
  position:relative; flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family: var(--f-body); font-size:16px; color: var(--ink);
}
.input input::placeholder{ color: rgba(61,85,112,.55); font-style:italic; }
.input select{ appearance:none; cursor:pointer; }
.input__caret{ position:relative; width:11px; height:7px; flex:none; color: var(--ink-soft); }
.input__btn{
  position:relative; border:0; background:transparent; cursor:pointer; padding:0;
  display:grid; place-items:center; color: var(--ink-soft);
}
.input__btn:hover{ color: var(--rust); }

.checks{ display:flex; flex-wrap:wrap; gap:20px; }
.check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:16.5px; }
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check__box{
  --r: var(--r-chip); --o: 0px;
  position:relative; width:19px; height:19px; flex:none;
  background: rgba(107,86,54,.55);
}
.check__box::before{
  content:""; position:absolute; inset:1px;
  --r: var(--r-chip); --o: 1px;
  background: rgba(255,250,237,.7);
}
.check__box::after{
  content:""; position:absolute; left:5.5px; top:2.5px; width:5px; height:10px;
  border:solid var(--ink); border-width:0 2px 2px 0;
  transform: rotate(42deg) scale(0); transform-origin:center;
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.4);
}
.check input:checked + .check__box{ background: var(--ink); }
.check input:checked + .check__box::after{ transform: rotate(42deg) scale(1); }
.check__label{ font-style:italic; color: var(--ink); }

.link-inline{
  color: var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(22,49,80,.45); padding-bottom:1px;
  transition: color 240ms ease, border-color 240ms ease;
}
.link-inline:hover{ color: var(--rust); border-color: var(--rust); }

.fineprint{ font-size:14px; font-style:italic; color: var(--ink-soft); text-align:center; }
.panel--navy .fineprint{ color: rgba(243,231,206,.6); }

/* ═══════════════════════════════════════════════════════════════════
   ROUTE LAYOUTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Home ────────────────────────────────────────────────────────── */
.view--home{
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: minmax(230px,auto) minmax(430px,auto) minmax(0,auto);
  grid-template-areas: "hero hero" "picks best" "club club";
  gap:20px;
}
.view--home .hero{ grid-area:hero; }
.view--home .panel--picks{ grid-area:picks; }
.view--home .panel--best { grid-area:best; }
.view--home .panel--club { grid-area:club; }
.view--home .hero__title{ font-size: clamp(34px,3.6vw,56px); }
.view--home .hero{ gap:9px; }
.view--home .hero__sub{ font-size: clamp(15px,1.1vw,18px); line-height:1.42; }
.view--home .eyebrow{ font-size:12.5px; }
.view--home .panel--picks .panel__body,
.view--home .panel--best  .panel__body{ padding:22px 26px 18px; }
.view--home .panel--club  .panel__body{ padding:18px 30px; }
.view--home .sect-title{ font-size: clamp(26px,2.4vw,36px); }

.hero__cta{ margin-top:4px; }

.picks-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:18px;
  flex:1; min-height:0; margin-top:12px;
  container-type: inline-size;
}
.pick{ display:flex; flex-direction:column; min-height:0; }
/* Height comes from the flex row; the 2:3 ratio then sets the width, so the
   cover stays a book shape instead of stretching into a letterbox. */
.pick .cover{
  flex:1 1 0; min-height:0; width:auto; max-width:100%;
  align-self:center; margin-bottom:10px;
}
.pick__title{
  font-family: var(--f-title); font-weight:600; font-size:17.5px; line-height:1.18;
  margin:0; text-align:center; color: var(--ink);
}
.pick__author{
  font-family: var(--f-body); font-style:italic; font-size:15px;
  text-align:center; color: var(--ink-soft); margin:1px 0 6px;
}
.pick__blurb{
  font-size:14.5px; line-height:1.38; text-align:center; color: var(--ink-soft);
  margin:0 0 8px;
}
.pick__stars{ display:flex; justify-content:center; margin-top:auto; }

.rank-list{ display:flex; flex-direction:column; gap:0; flex:1; min-height:0; }
.rank{
  display:grid; grid-template-columns: auto 62px 1fr; gap:13px; align-items:start;
  padding:12px 0; min-height:0;
}
.rank + .rank{ border-top:1px dashed rgba(199,168,119,.34); }
.rank__n{
  width:29px; height:29px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background: var(--rust); color: var(--cream);
  font-family: var(--f-title); font-weight:600; font-size:15.5px;
}
.rank__n--alt{ background: var(--navy-lift); border:1px solid rgba(199,168,119,.45); }
.rank__title{
  font-family: var(--f-title); font-weight:600; font-size:16.5px; line-height:1.18;
  margin:0; color: var(--cream);
}
.rank__author{
  font-style:italic; font-size:14.5px; color: rgba(243,231,206,.7); margin:1px 0 4px;
}
.rank__blurb{ font-size:14px; line-height:1.36; color: rgba(243,231,206,.82); margin:0; }
.rank .cover{ width:62px; }

.club{ display:grid; grid-template-columns: auto 1fr auto; gap:30px; align-items:center; }
.club__flag{ width:82px; flex:none; }
.club__flag svg{ width:100%; height:auto; }
.club__copy h3{
  margin:0 0 6px; font-family: var(--f-display); font-weight:600;
  font-size: clamp(24px,2.2vw,32px); font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.03em; color: var(--ink); line-height:1.05;
}
.club__copy p{ margin:0; font-size:16px; line-height:1.42; color: var(--ink-soft); max-width:46ch; }
.club__tag{
  display:flex; align-items:center; gap:9px; margin-top:9px;
  font-family: var(--f-display); font-weight:600; font-size:12.5px;
  letter-spacing:.19em; text-transform:uppercase; color: var(--rust);
  line-height:1.2; white-space:nowrap;
}
.club__tag svg{ width:13px; height:16px; }
.club__form{ display:grid; gap:9px; width: clamp(300px, 26vw, 400px); }
.club__row{ display:flex; }
.club__row .input{ flex:1; }
.club__row .btn{ margin-left:-1px; }
@media (max-width:1180px){
  .club{ grid-template-columns:1fr; gap:16px; }
  .club__flag{ display:none; }
  .club__form{ width:100%; }
}

/* ── Staff picks ─────────────────────────────────────────────────── */
.view--picks{ grid-template-columns: 250px 1fr; align-items:start; }
/* The facet rail hugs its content and rides along as the grid scrolls. */
.view--picks .panel:first-child{ position:sticky; top:0; }
.facets{ display:grid; gap:22px; align-content:start; }
.facet__head{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.21em; text-transform:uppercase; color: var(--ink);
  padding-bottom:9px; border-bottom:1px solid rgba(107,86,54,.3); margin-bottom:11px;
}
.facet__list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.facet__list a{
  text-decoration:none; color: var(--ink-soft); font-size:16px;
  transition: color 220ms ease, padding-left 260ms cubic-bezier(.2,.8,.3,1);
}
.facet__list a:hover{ color: var(--rust); padding-left:5px; }
.facet__list--it a{ font-style:italic; }
.count{
  font-family: var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.19em; text-transform:uppercase; color: var(--ink);
}

.list-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:none; margin-bottom:16px;
}
.sortby{ display:flex; align-items:center; gap:12px; }
.sortby__label{
  font-family: var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:.19em; text-transform:uppercase; color: var(--ink);
}
.sortby .input{ padding:8px 14px; min-width:170px; }

.book-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:22px 20px;
  container-type: inline-size;
}
@media (max-width:1400px){ .book-grid{ grid-template-columns: repeat(3,1fr); } }
.bcard{
  --r: var(--r-plate);  --o: 0px;
  position:relative; padding:12px 12px 0; text-align:center;
  background: rgba(107,86,54,.24);
  transition: transform 380ms cubic-bezier(.2,.8,.3,1), background 380ms ease;
}
.bcard::before{
  content:""; position:absolute; inset:1px; z-index:0;
  --r: var(--r-plate);  --o: 1px;
  background: rgba(255,250,237,.5);
}
.bcard > *{ position:relative; z-index:1; }
.bcard:hover{ transform: translateY(-5px); background: rgba(176,74,47,.42); }
.bcard:hover .cover{ transform: scale(1.025); }
.bcard__title{
  font-family: var(--f-title); font-weight:600; font-size:17px; line-height:1.18;
  margin:11px 0 0; color: var(--ink);
}
.bcard__author{ font-style:italic; font-size:15px; color: var(--ink-soft); margin:2px 0 5px; }
.bcard__blurb{ font-size:14.5px; line-height:1.38; color: var(--ink-soft); margin:7px 0 10px; }
.bcard__tag{
  display:block; margin:0 -12px; padding:7px 0;
  border-top:1px solid rgba(107,86,54,.26);
  font-family: var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color: var(--sepia-deep);
}

.pager{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex:none; padding-top:16px;
}
.pager button{
  --r: var(--r-chip);  --o: 0px;
  min-width:31px; height:31px; padding:0 9px; border:0; cursor:pointer;
  background: rgba(107,86,54,.2); color: var(--ink);
  font-family: var(--f-body); font-size:16px;
  transition: background 240ms ease, color 240ms ease;
}
.pager button:hover{ background: rgba(107,86,54,.36); }
.pager button.is-on{ background: var(--rust); color: var(--cream); }

/* ── Best sellers ────────────────────────────────────────────────── */
.view--best{ grid-template-columns: minmax(0, 1080px); justify-content:center; }
.bs-row{
  display:grid; grid-template-columns: 62px 118px 1fr auto; gap:26px;
  align-items:start; padding:22px 0; position:relative;
}
.bs-row + .bs-row{ border-top:1px dashed rgba(107,86,54,.32); }
.bs-row__n{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-family: var(--f-title); font-weight:600; font-size:25px;
  background: var(--rust); color: var(--cream);
  box-shadow: 0 3px 9px rgba(4,16,28,.2);
}
.bs-row:nth-child(n+4) .bs-row__n{ background: var(--navy); }
.bs-row__title{
  margin:0; font-family: var(--f-title); font-weight:600;
  font-size: clamp(24px,2.1vw,31px); line-height:1.1; color: var(--ink);
}
.bs-row__author{ font-style:italic; font-size:19px; color: var(--rust); margin:5px 0 12px; }
.bs-row__blurb{ font-size:17px; line-height:1.5; color: var(--ink-soft); margin:0 0 14px; max-width:56ch; }
.bs-row__genre{
  font-family: var(--f-display); font-weight:600; font-size:12.5px;
  letter-spacing:.21em; text-transform:uppercase; color: var(--sepia-deep);
}
.bs-row__seal{
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  border:1px dashed rgba(107,86,54,.4); color: rgba(107,86,54,.42);
  transform: rotate(-8deg);
}
.bs-row__seal svg{ width:26px; height:26px; }
.bs-foot{
  display:flex; align-items:center; justify-content:center; gap:18px;
  flex:none; padding-top:20px; margin-top:6px;
  border-top:1px solid rgba(107,86,54,.28);
  font-family: var(--f-display); font-weight:600; font-size:17px;
  letter-spacing:.28em; text-transform:uppercase; color: var(--ink);
}
.bs-foot svg{ width:17px; height:17px; color: var(--rust); }
@media (max-width:1180px){
  .bs-row{ grid-template-columns: 46px 96px 1fr; gap:16px; }
  .bs-row__seal{ display:none; }
}

/* ── Reading club ────────────────────────────────────────────────── */
.view--club{ grid-template-columns: 1fr 1fr 1.08fr; }
.benefit{
  display:grid; grid-template-columns: auto 1fr; gap:17px; align-items:start;
  padding:15px 0;
}
.benefit + .benefit{ border-top:1px solid rgba(199,168,119,.24); }
.benefit__ico{
  width:47px; height:47px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(199,168,119,.55); color: var(--gold); flex:none;
}
.benefit__ico svg{ width:23px; height:23px; }
.benefit__t{
  margin:0 0 3px; font-family: var(--f-display); font-weight:600; font-size:16px;
  letter-spacing:.15em; text-transform:uppercase; color: var(--gold);
}
.benefit__d{ margin:0; font-size:16px; line-height:1.42; color: rgba(243,231,206,.84); }

.disc{ display:grid; grid-template-columns: 56px 74px 1fr; gap:15px; padding:14px 0; align-items:start; }
.disc + .disc{ border-top:1px solid rgba(107,86,54,.24); }
.disc__date{
  --r: var(--r-chip);  --o: 0px;
  display:grid; place-items:center; padding:8px 4px; background: var(--navy);
  color: var(--cream); text-align:center;
}
.disc__mon{ font-family: var(--f-display); font-weight:600; font-size:12px; letter-spacing:.19em; text-transform:uppercase; }
.disc__day{ font-family: var(--f-title); font-weight:600; font-size:25px; line-height:1; }
.disc__t{ margin:0; font-family: var(--f-title); font-weight:600; font-size:18px; color: var(--ink); }
.disc__by{ font-style:italic; font-size:15.5px; color: var(--ink-soft); margin:1px 0 3px; }
.disc__when{
  font-family: var(--f-display); font-weight:600; font-size:12.5px;
  letter-spacing:.17em; text-transform:uppercase; color: var(--sepia-deep); margin:0 0 5px;
}
.disc__blurb{ font-size:15px; line-height:1.38; color: var(--ink-soft); margin:0; }

.club-foot{
  text-align:center; padding-top:14px; margin-top:10px;
  border-top:1px solid rgba(107,86,54,.28); flex:none;
}
.club-foot__t{
  font-family: var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.17em; text-transform:uppercase; color: var(--ink); line-height:1.5;
}

/* ── Sign in ─────────────────────────────────────────────────────── */
.view--signin{
  grid-template-columns: minmax(0, 620px);
  grid-template-rows: auto minmax(0,auto);
  justify-content:center; align-content:center; gap:34px;
}
.signin-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; }
.signin-foot{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:20px; padding-top:18px; font-size:17px; color: var(--ink);
  border-top:1px solid rgba(107,86,54,.3);
}

/* ═══ MISC ════════════════════════════════════════════════════════ */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.stack{ display:grid; gap:22px; min-height:0; }

/* ═══════════════════════════════════════════════════════════════════
   NARROW VIEWPORTS
   The chart, its rulers and the voyage pan all survive as-is; only the
   window layouts collapse to a single column.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px){
  :root{ --gutter:14px; --head-h:172px; --keyin:7px; --tile:300px; }
  .panel{ --r: var(--r-panel); }

  .masthead{ flex-direction:column; align-items:center; gap:9px; top:16px; }
  .mark__plate{ padding:8px 20px 7px; }
  .mark__anchor{ width:13px; height:16px; }
  .mark__name{ font-size:22px; }
  .mark__rule{ font-size:8.5px; letter-spacing:.16em; }
  .mark__est{ display:none; }
  .nav{ padding-top:0; gap:16px; flex-wrap:wrap; }
  .nav__glyph{ display:none; }
  .nav__item{ font-size:12.5px; letter-spacing:.12em; }
  .masthead__tools{ padding-top:0; }
  .account{ padding:7px 14px; }
  .account span{ font-size:12.5px; }

  .rule--right{ width:34px; }
  .rule--right .tick__lab{ right:11px; font-size:10.5px; }
  .rule--top .tick__lab, .rule--bottom .tick__lab{ font-size:10.5px; }
  .rule__legend{ font-size:11px; letter-spacing:.22em; }
  .rose{ display:none; }
  .stamp, .manifest{ display:none; }

  .stage{ bottom:48px; }
  .view{ gap:14px; }
  .panel__body{ padding:18px 16px 15px; }

  /* Every route becomes one column. */
  .view--home, .view--picks, .view--best, .view--club, .view--signin{
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: none;
    justify-content: stretch;
  }
  .view--home{ grid-template-areas: "hero" "picks" "best" "club"; }
  .view--home .hero__title{ font-size: clamp(30px,8.4vw,42px); }
  .view--home .panel--picks .panel__body,
  .view--home .panel--best .panel__body,
  .view--home .panel--club .panel__body{ padding:18px 16px 15px; }
  .view--picks .panel:first-child{ position:static; }
  .view--signin{ align-content:start; }

  /* Home staff picks read better as rows than as three slivers. The cover
     spans every text row down the left, so grid — not flex — is the fit. */
  .picks-grid{ grid-template-columns: minmax(0,1fr); gap:16px; }
  .pick{
    display:grid; grid-template-columns: 84px minmax(0,1fr);
    grid-template-rows: auto auto 1fr auto; gap:2px 14px;
    align-items:start; text-align:left;
  }
  .pick .cover{ grid-column:1; grid-row:1 / -1; width:84px; margin:0; align-self:start; }
  .pick__title{ text-align:left; font-size:17px; }
  .pick__author{ text-align:left; margin:1px 0 4px; }
  .pick__blurb{ text-align:left; margin:0 0 6px; }
  .pick__stars{ justify-content:flex-start; margin:0; }

  .book-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .rank{ grid-template-columns: auto 52px minmax(0,1fr); gap:11px; }
  .rank .cover{ width:52px; }
  .bs-row{ grid-template-columns: 40px 74px minmax(0,1fr); gap:13px; }
  .bs-row .cover{ width:74px; }
  .bs-row__n{ width:38px; height:38px; font-size:18px; }
  .bs-row__title{ font-size:21px; }
  .bs-row__author{ font-size:16px; }
  .bs-row__blurb{ font-size:15px; }
  .bs-foot{ font-size:13px; letter-spacing:.18em; text-align:center; }
  .disc{ grid-template-columns: 46px 58px minmax(0,1fr); gap:11px; }
  .disc .cover{ width:58px; }
  .club__row{ flex-direction:column; gap:9px; }
  .club__row .btn{ margin-left:0; }
  .checks{ gap:12px; }
  .signin-row{ flex-wrap:wrap; gap:10px; }
}