/* Fraunces and Inter, vendored from Google Fonts on 2026-08-15.
   Both are licensed under the SIL Open Font License 1.1.
   Generated by scripts/fetch-fonts.mjs. Do not edit by hand. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   KALDERNO · shared stylesheet
   Design system: style-refs/d-editorial-bold.html ("Editorial Bold").
   Warm broadsheet ground, oversized Fraunces display, visible
   column rules, numbered sections, one electric accent.
   Source file: src/kalderno.css. Copied to site/assets/ by
   scripts/build-site.mjs. Never edit the copy under site/.
   ============================================================ */

:root{
  --paper:      #F7F3EB;
  --paper-2:    #F0E9DC;
  --paper-3:    #E7DECD;
  --ink:        #16130E;
  --ink-2:      #4C463C;
  --ink-3:      #7D7568;
  --rule:       rgba(22,19,14,.16);
  --rule-soft:  rgba(22,19,14,.08);
  --accent:     #E0175E;
  --accent-dk:  #B30F49;
  --gold:       #C08C33;
  --navy:       #1E2A47;

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(18px, 4.4vw, 64px);
  --maxw: 1360px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* shelf heights: covers keep their real trim ratio, only height is shared */
  --shelfH: clamp(220px, 23vw, 320px);
  --mqH:    clamp(148px, 15vw, 214px);
  --stackH: clamp(104px, 11vw, 148px);
  --gridH:  clamp(200px, 19vw, 268px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
/* Covers are the product. object-fit is a guarantee: in any box, at any
   breakpoint, a cover keeps its real trim ratio rather than stretching. */
img.cover{ object-fit:contain; object-position:center bottom; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none!important; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:13px;
}
.skip:focus{ left:8px; top:8px; }

/* ---------- display type ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  line-height:.94;
  letter-spacing:-.026em;
  margin:0;
}
.serif{ font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40; }

.kicker{
  font-family:var(--ff-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:120;
  background:rgba(247,243,235,.97);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  display:flex; align-items:center; gap:clamp(12px,2.4vw,32px);
  height:66px;
}
.brand{
  font-family:var(--ff-display);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 90;
  font-weight:700; font-size:24px; letter-spacing:-.03em;
  line-height:1; white-space:nowrap;
}
.brand sup{
  font-family:var(--ff-sans); font-size:8px; font-weight:600;
  letter-spacing:.18em; vertical-align:super; color:var(--accent);
  margin-left:6px;
}
.nav{ display:flex; align-items:center; gap:clamp(10px,1.5vw,20px); margin-left:auto; }
.nav a{
  font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--ink-2);
  padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.here{ color:var(--ink); }
.nav a.here::after{ transform:scaleX(1); background:var(--ink); }
.nav .sep{ width:1px; height:16px; background:var(--rule); flex:0 0 auto; }
.nav-lines{ color:var(--ink-3)!important; font-size:12px; letter-spacing:.05em; }
.nav-lines.here{ color:var(--ink)!important; }

.lang{
  display:inline-flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden;
  margin-left:14px; flex:0 0 auto;
}
.lang button{
  font-size:11px; font-weight:600; letter-spacing:.12em; padding:6px 9px;
  color:var(--ink-3); transition:background .25s var(--ease),color .25s var(--ease);
}
.lang button.on{ background:var(--ink); color:var(--paper); }
.menu-btn{ display:none; margin-left:12px; padding:6px 2px; }
.menu-btn span{
  display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HOME HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(22,19,14,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,19,14,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 0%, #000 30%, transparent 76%);
  mask-image:radial-gradient(ellipse 72% 62% at 50% 0%, #000 30%, transparent 76%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% -6%, rgba(224,23,94,.13), transparent 64%),
    radial-gradient(ellipse 46% 40% at 88% 6%, rgba(192,140,51,.20), transparent 66%);
}
.hero-in{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
  padding-top:clamp(38px,6vw,84px);
  padding-bottom:clamp(30px,4vw,54px);
}
.hero-left{ min-width:0; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--rule); border-radius:999px;
  padding:6px 14px 6px 10px; background:rgba(255,255,255,.5);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:clamp(18px,2.4vw,30px);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:560px){
  .hero-badge{ font-size:10px; letter-spacing:.12em; padding:5px 12px 5px 9px; }
}
.hero-badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(224,23,94,.16);
}
h1.hero-h1{
  font-size:clamp(46px,10.2vw,132px);
  font-weight:700;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  letter-spacing:-.038em;
  line-height:.87;
}
h1.hero-h1 .it{ font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144; }
.uline{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10.2C56 4.6 108 3.2 160 4.4c48 1.1 92 3.6 136 2.2' fill='none' stroke='%23E0175E' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M18 12.6c48-3.4 96-4.4 144-3.4' fill='none' stroke='%23E0175E' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:0% .26em;
  animation:draw 1.15s var(--ease) .55s forwards;
  padding-bottom:.06em;
}
@keyframes draw{ to{ background-size:100% .26em; } }
.hero-sub{
  max-width:46ch; margin:clamp(20px,2.6vw,32px) 0 0;
  font-size:clamp(15px,1.15vw,17px); line-height:1.62; color:var(--ink-2);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,36px); }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:2px;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--accent); border-color:var(--accent); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn.ghost:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn.sm{ padding:10px 16px; font-size:11.5px; }
/* The quietest button in the system: hairline outline, no fill, small. Used
   where a retailer link should be available without competing with the CTAs. */
.btn.micro{
  padding:6px 11px; font-size:10px; letter-spacing:.1em; border-radius:2px;
  background:transparent; color:var(--ink-2); border:1px solid var(--rule);
  gap:6px;
}
.btn.micro:hover{
  transform:none; background:transparent;
  color:var(--accent); border-color:var(--accent);
}
.btn.micro .arw{ font-size:9px; }
.btn.micro:hover .arw{ transform:none; }
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* hero cover carousel: one title per line, sliding sideways.
   All slides live in the SAME grid cell, so the stage is always as tall as the
   tallest slide and nothing jumps when the covers change shape. Sizing is by
   HEIGHT, so a square picture book and a portrait journal have equal stature. */
.hero-right{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-width:0; }
.hero-carousel{
  --heroH:clamp(300px,31vw,480px);
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.hero-stage{ position:relative; display:grid; width:100%; }
.hero-slide{
  grid-area:1/1; min-width:0;
  display:flex; justify-content:center; align-items:flex-end;
  opacity:0; transform:translateX(34%); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* .back flips the direction: the reader went backwards, so the incoming slide
   arrives from the left and the outgoing one leaves to the right. */
.hero-slide.back{ transform:translateX(-34%); }
.hero-slide.out{ opacity:0; transform:translateX(-34%); z-index:1; }
.hero-slide.out.back{ transform:translateX(34%); }
.hero-slide.on{ opacity:1; transform:none; pointer-events:auto; z-index:2; }
.hero-carousel .hero-book{ width:auto; max-width:100%; }
/* Two ceilings, no stretching: a portrait trim is limited by height, a square
   or landscape one by width, so a picture book and a journal take up about the
   same room instead of the square swamping the column. */
.hero-carousel .hero-book img{
  width:auto; height:auto;
  max-height:var(--heroH);
  max-width:min(100%, calc(var(--heroH) * .82));
}
/* Ten dots have to stay compact without shrinking the thing a finger aims at:
   the mark is 7px, the button around it is 20px of quiet hit area. */
.hero-dots{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.hero-dot{
  width:20px; height:20px; padding:0; border:0; background:transparent;
  display:grid; place-items:center;
}
.hero-dot::before{
  content:""; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--ink-3); background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.hero-dot:hover::before{ border-color:var(--accent); }
.hero-dot.on::before{ background:var(--accent); border-color:var(--accent); transform:scale(1.25); }
/* the badge rotates with the cover: one line per slide, only the live one shown */
.hb-rot{ display:inline-flex; min-width:0; }
.hb-txt{ display:none; }
.hb-txt.on{ display:inline; }
.hero-book{ position:relative; width:min(100%,400px); perspective:1400px; }
.hero-book .frame{
  position:relative;
  transform:rotate(-3.2deg) rotateY(9deg) rotateX(2deg);
  transform-style:preserve-3d;
  transition:transform .9s var(--ease);
  filter:drop-shadow(0 42px 60px rgba(22,19,14,.34)) drop-shadow(0 8px 16px rgba(22,19,14,.18));
}
.hero-book:hover .frame{ transform:rotate(0deg) rotateY(0deg) rotateX(0deg) translateY(-8px); }
.hero-book img{ width:100%; border-radius:2px; }
.hero-book .glow{
  position:absolute; left:50%; top:52%; width:118%; aspect-ratio:1/1;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(192,140,51,.42), rgba(224,23,94,.14) 45%, transparent 68%);
  filter:blur(24px);
}
.hero-tag{
  position:absolute; left:-6px; bottom:-16px; z-index:3;
  background:var(--paper); border:1px solid var(--rule);
  padding:9px 14px; max-width:250px;
  font-size:11px; line-height:1.5; color:var(--ink-2);
  transform:rotate(-1.4deg);
}
.hero-tag b{ display:block; font-family:var(--ff-display); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin-bottom:2px; }
.hero-tag .who{ display:block; margin-bottom:9px; }
.hero-tag .who a{ border-bottom:1px solid var(--rule); }
.hero-tag .who a:hover{ color:var(--accent); border-color:var(--accent); }
.hero-stamp{
  position:absolute; right:-4px; top:6px; z-index:3;
  writing-mode:vertical-rl;
  font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent);
}

/* hero footer strip */
.hero-strip{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,48px);
  border-top:1px solid var(--rule);
  padding:16px 0 20px;
}
.hero-strip div{ display:flex; align-items:baseline; gap:9px; }
.hero-strip .n{
  font-family:var(--ff-display); font-size:22px; font-weight:600;
  font-variation-settings:"opsz" 60; letter-spacing:-.02em;
}
.hero-strip .l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ============================================================
   PAGE HERO (compact editorial header for interior pages)
   ============================================================ */
.phero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.phero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(22,19,14,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,19,14,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 80% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 78% 80% at 50% 0%, #000 20%, transparent 78%);
}
.phero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 52% 60% at 18% -20%, rgba(224,23,94,.10), transparent 62%);
}
.phero-in{
  position:relative; z-index:1;
  padding-top:clamp(34px,4.6vw,66px);
  padding-bottom:clamp(26px,3.4vw,46px);
}
.phero.bare .phero-in{ padding-top:clamp(20px,2.4vw,32px); padding-bottom:clamp(14px,1.6vw,22px); }
.phero.bare .crumb{ margin-bottom:0; }
.crumb{ display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(16px,2vw,26px); }
.crumb a:hover{ color:var(--accent); }
.crumb .s{ color:var(--rule); }
.phero h1{
  margin:0; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:clamp(38px,7.4vw,92px); line-height:.9; letter-spacing:-.036em;
  max-width:20ch;
}
.phero h1 em{ font-style:italic; color:var(--accent); }
.phero .lead{
  margin:clamp(18px,2.2vw,28px) 0 0; max-width:56ch;
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 24;
  font-size:clamp(16px,1.5vw,21px); line-height:1.56; color:var(--ink-2);
}
.phero-rule{ border-top:1px solid var(--ink); margin-top:clamp(22px,3vw,38px); }

/* ============================================================
   MARQUEES
   ============================================================ */
.band{
  background:var(--ink); color:var(--paper);
  padding:13px 0; overflow:hidden; white-space:nowrap;
  border-block:1px solid var(--ink);
}
.band-track{ display:inline-flex; animation:slide 34s linear infinite; }
.band span{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-size:clamp(16px,1.9vw,24px); letter-spacing:-.01em;
  padding-inline:.55em; display:inline-flex; align-items:center; gap:.55em;
}
.band span::after{ content:"\2726"; font-size:.44em; color:var(--accent); font-style:normal; }

.shelf-sec{ padding:clamp(38px,5vw,64px) 0 clamp(30px,4vw,52px); }
.marquee{
  position:relative;
  /* Only the horizontal ends are masked. Vertical padding gives the tilted cards
     and their lifted hover state room, so nothing is ever clipped top or bottom. */
  overflow-x:hidden; overflow-y:visible;
  padding-block:clamp(26px,3.4vw,52px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  perspective:1000px;
}
.marquee-track{ display:flex; align-items:flex-end; gap:20px; width:max-content; animation:slide 78s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* The band is grabbable with the mouse and swipeable with a finger. pan-y hands
   horizontal gestures to the script while the page still scrolls vertically. */
.marquee{ touch-action:pan-y; cursor:grab; }
.marquee.dragging{ cursor:grabbing; user-select:none; }
.marquee.dragging .mq-card{ pointer-events:none; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-card{
  flex:0 0 auto;
  transition:transform .45s var(--ease), filter .45s var(--ease);
  filter:saturate(.92);
}
.mq-card img{
  height:var(--mqH); width:auto; max-width:none; border-radius:2px;
  box-shadow:0 10px 24px rgba(22,19,14,.16), 0 1px 2px rgba(22,19,14,.14);
}
.mq-card:nth-child(odd){ transform:rotate(-1.6deg); }
.mq-card:nth-child(even){ transform:rotate(1.4deg) translateY(8px); }
.marquee-track:hover .mq-card{ filter:saturate(.62) opacity(.62); }
.marquee-track .mq-card:hover{
  transform:translateY(-15px) rotate(0deg) rotateY(-5deg) scale(1.05)!important;
  filter:saturate(1.05) opacity(1);
  z-index:4;
}

/* ============================================================
   SECTION HEADS (numbered broadsheet rules)
   ============================================================ */
.sec{ padding:clamp(46px,6.4vw,104px) 0; position:relative; }
.sec + .sec{ border-top:1px solid var(--rule); }
.sec.tight{ padding-top:clamp(34px,4vw,58px); }
.sechead{
  display:grid; grid-template-columns:auto 1fr auto; align-items:end;
  gap:clamp(14px,2.4vw,30px); margin-bottom:clamp(26px,3.4vw,48px);
  border-bottom:1px solid var(--ink); padding-bottom:14px;
}
.sechead.nonum{ grid-template-columns:1fr auto; }
.sechead .num{
  font-family:var(--ff-display); font-weight:600; font-variation-settings:"opsz" 20;
  font-size:12px; letter-spacing:.06em; color:var(--accent);
  border:1px solid var(--accent); border-radius:2px; padding:3px 7px; line-height:1;
  align-self:center;
}
.sechead h2{
  margin:0; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(30px,5.4vw,68px); line-height:.92; letter-spacing:-.032em;
}
.sechead.sm h2{ font-size:clamp(26px,3.6vw,44px); }
.sechead .aside{
  font-size:12px; letter-spacing:.05em; color:var(--ink-3); text-align:right;
  padding-bottom:6px; max-width:32ch;
}
.sechead .aside a{ border-bottom:1px solid var(--rule); }
.sechead .aside a:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   RAILS / BOOK CARDS
   ============================================================ */
.rail{
  display:flex; gap:clamp(16px,2vw,28px);
  overflow-x:auto;
  padding:6px 0 22px; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter);
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
/* The gutter bleed rounds a few sub-pixels wide on narrow viewports, which the
   page would report as horizontal scroll. Below the tablet break the rail keeps
   its left gutter and ends in a peek so it reads as scrollable. */
@media (max-width:900px){
  .rail{ margin-inline:0; padding-inline:0; padding-right:22%; scroll-padding-left:0; }
  .rail::after{
    content:""; flex:0 0 1px; height:1px;
  }
}
/* a soft fade at the right edge, the visual cue that the shelf continues */
.railwrap{ position:relative; }
.railwrap::after{
  content:""; position:absolute; right:0; top:0; bottom:22px; width:clamp(28px,7vw,72px);
  background:linear-gradient(90deg, transparent, var(--paper));
  pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
}
@media (max-width:900px){ .railwrap::after{ opacity:1; } }
.rail-cue{
  display:none; align-items:center; gap:8px; margin:2px 0 0;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.rail-cue .arw{ color:var(--accent); }
@media (max-width:900px){ .rail-cue{ display:flex; } }
.rail::-webkit-scrollbar{ height:4px; }
.rail::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:2px; }
.rail::-webkit-scrollbar-track{ background:transparent; }

/* Every horizontal shelf answers to the same two gestures: a finger swipes it
   (native momentum scrolling), a held mouse button drags it. The drag state
   kills pointer events on the cards, so a drag can never end in a navigation. */
.rail, .spot-rail, .spot-tabs{
  touch-action:pan-x pan-y; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
.dragx{ cursor:grab; }
.dragx.dragging{ cursor:grabbing; user-select:none; scroll-behavior:auto; }
.dragx.dragging a, .dragx.dragging button{ pointer-events:none; }

.bcard{ flex:0 0 auto; }
.bcard .shot{
  position:relative; perspective:1000px; margin-bottom:14px;
  height:var(--shelfH); display:flex; align-items:flex-end;
}
.bcard img{
  flex:0 0 auto;
  height:var(--shelfH); width:auto; max-width:none; border-radius:2px;
  box-shadow:0 14px 30px rgba(22,19,14,.18), 0 1px 2px rgba(22,19,14,.16);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  transform-origin:center bottom;
}
.bcard:nth-child(3n+1) img{ transform:rotate(-2deg); }
.bcard:nth-child(3n+2) img{ transform:rotate(1.5deg); }
.bcard:nth-child(3n)   img{ transform:rotate(-.8deg); }
.bcard:hover img{
  transform:rotate(0deg) translateY(-10px) rotateY(-5deg) scale(1.03);
  box-shadow:0 30px 48px rgba(22,19,14,.26);
}
.lbl{
  display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule); border-radius:2px; padding:2px 6px; margin-bottom:8px;
}
.lbl.acc{ color:var(--accent); border-color:rgba(224,23,94,.4); }
.bcard h3{
  margin:0 0 5px; font-family:var(--ff-display); font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40;
  font-size:17px; line-height:1.2; letter-spacing:-.016em;
  transition:color .3s var(--ease);
  max-width:22ch;
}
.bcard:hover h3{ color:var(--accent); }
.by{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.by.im{ font-family:var(--ff-display); font-style:italic; font-size:13px; font-variation-settings:"opsz" 20; }
.ret{ font-size:11px; color:var(--ink-3); margin-top:7px; display:flex; align-items:center; gap:6px; }
.ret::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

/* ============================================================
   BOOK GRID (catalog, line pages, author works)
   ============================================================ */
.bgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:clamp(26px,3vw,46px) clamp(18px,2.2vw,32px);
}
.gcard{ min-width:0; }
.gcard .shot{
  height:var(--gridH); margin-bottom:14px; perspective:1000px;
  display:flex; align-items:flex-end; justify-content:center;
}
.gcard .shot img{
  height:100%; width:auto; max-width:100%; border-radius:2px;
  object-fit:contain;
  box-shadow:0 14px 30px rgba(22,19,14,.18), 0 1px 2px rgba(22,19,14,.16);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  transform-origin:center bottom;
  transform:rotate(-1.4deg);
}
.gcard:nth-child(even) .shot img{ transform:rotate(1.2deg); }
.gcard:hover .shot img{
  transform:rotate(0deg) translateY(-10px) rotateY(-5deg) scale(1.03);
  box-shadow:0 30px 48px rgba(22,19,14,.26);
}
.gcard h3{
  margin:0 0 5px; font-family:var(--ff-display); font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40;
  font-size:16.5px; line-height:1.22; letter-spacing:-.016em;
  transition:color .3s var(--ease);
}
.gcard:hover h3{ color:var(--accent); }
.empty-note{
  border:1px dashed var(--rule); padding:clamp(24px,3vw,40px);
  font-family:var(--ff-display); font-size:17px; color:var(--ink-3);
  font-variation-settings:"opsz" 30;
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filters{
  display:flex; flex-wrap:wrap; gap:22px 34px; align-items:flex-start;
  border-bottom:1px solid var(--rule); padding-bottom:22px; margin-bottom:clamp(28px,3.4vw,44px);
}
.fgroup{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.fgroup .k{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-right:4px;
}
.chip{
  font-size:12px; font-weight:500; letter-spacing:.04em;
  border:1px solid var(--rule); border-radius:999px; padding:6px 14px;
  color:var(--ink-2); background:transparent; white-space:nowrap;
  transition:border-color .28s var(--ease), color .28s var(--ease), background .28s var(--ease);
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.fcount{ margin-left:auto; font-size:12px; letter-spacing:.05em; color:var(--ink-3); padding-top:6px; white-space:nowrap; }
.no-hits{ padding:clamp(30px,4vw,56px) 0; font-family:var(--ff-display); font-size:20px; color:var(--ink-3); }

/* ============================================================
   LINE TILES
   ============================================================ */
.lines{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--rule);
  border-block:1px solid var(--rule);
}
.line{
  grid-column:span 2;
  position:relative; background:var(--paper);
  padding:clamp(24px,3vw,40px) clamp(18px,2.2vw,32px) clamp(26px,3vw,40px);
  overflow:hidden; transition:background .5s var(--ease);
  display:flex; flex-direction:column; min-width:0;
}
.line.w3{ grid-column:span 3; }
.line:hover{ background:var(--paper-2); }
.line .idx{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.2em;
  color:var(--ink-3); margin-bottom:auto;
}
.line h3{
  margin:clamp(30px,5vw,64px) 0 10px; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-size:clamp(24px,2.7vw,38px); line-height:.98; letter-spacing:-.028em;
}
.line h3 em{ font-style:italic; color:var(--accent); }
.line p{ margin:0 0 20px; font-size:14px; line-height:1.58; color:var(--ink-2); max-width:34ch; }
.line .stack{ display:flex; align-items:flex-end; min-height:var(--stackH); margin-bottom:20px; }
.line .stack img{
  flex:0 0 auto;
  height:var(--stackH); width:auto; max-width:none; border-radius:2px;
  box-shadow:0 12px 24px rgba(22,19,14,.2);
  transition:transform .55s var(--ease);
}
.line .stack img:nth-child(1){ transform:rotate(-6deg); z-index:3; }
.line .stack img:nth-child(2){ transform:rotate(2deg) translateY(-6px); margin-left:-24px; z-index:2; }
.line .stack img:nth-child(3){ transform:rotate(8deg) translateY(4px); margin-left:-24px; z-index:1; }
.line .stack.solo{ gap:28px; }
.line .stack.solo img{ height:calc(var(--stackH) * 1.22); transform:rotate(-4deg); }
.line:hover .stack.solo img{ transform:rotate(0deg) translateY(-8px); }
.line .stack.solo .solo-note{
  display:flex; flex-direction:column; gap:2px; padding-bottom:6px;
  font-size:11px; letter-spacing:.06em; color:var(--ink-3); max-width:9ch; line-height:1.3;
}
.line .stack.solo .solo-note b{
  font-family:var(--ff-display); font-size:26px; font-weight:600;
  font-variation-settings:"opsz" 60; color:var(--accent); letter-spacing:-.02em; line-height:1;
}
.line:hover .stack img:nth-child(1){ transform:rotate(-2deg) translateY(-8px); }
.line:hover .stack img:nth-child(2){ transform:rotate(0deg) translateY(-12px); }
.line:hover .stack img:nth-child(3){ transform:rotate(3deg) translateY(-4px); }
.line .more{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--ink);
}
.line .more .arw{ transition:transform .3s var(--ease); color:var(--accent); }
.line:hover .more .arw{ transform:translateX(6px); }

/* ============================================================
   AUTHOR SPOTLIGHT + AUTHOR PAGES
   ============================================================ */
.spot{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4.4vw,72px); align-items:center;
}
.spot-art{ position:relative; }
.spot-art .mono{
  position:absolute; inset:0; display:grid; place-items:center; z-index:0;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144;
  font-size:clamp(120px,18vw,260px); line-height:1;
  color:rgba(22,19,14,.055); letter-spacing:-.05em; pointer-events:none;
}
.spot-art .covers{ position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end; }
.spot-art .covers img{
  width:min(64%,290px); border-radius:2px;
  transform:rotate(-4deg);
  box-shadow:0 36px 54px rgba(22,19,14,.3);
  transition:transform .7s var(--ease);
}
.spot-art:hover .covers img{ transform:rotate(0deg) translateY(-8px); }
.spot h3{
  margin:0 0 4px; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(34px,5.6vw,74px); line-height:.9; letter-spacing:-.034em;
}
.spot .role{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.spot p.bio{
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 24;
  font-size:clamp(16px,1.5vw,21px); line-height:1.56; color:var(--ink-2);
  max-width:46ch; margin:0 0 24px;
}
.flourish{ display:block; width:170px; height:14px; margin:0 0 22px; color:var(--gold); }
.facts{ display:flex; flex-wrap:wrap; gap:10px 26px; border-top:1px solid var(--rule); padding-top:18px; margin-bottom:24px; }
.facts div .k{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.facts div .v{ font-family:var(--ff-display); font-size:17px; font-variation-settings:"opsz" 30; letter-spacing:-.01em; }

/* author grid */
.agrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.acard{
  position:relative; background:var(--paper); overflow:hidden;
  padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px) clamp(26px,3vw,36px);
  display:flex; flex-direction:column; min-height:290px;
  transition:background .5s var(--ease);
}
.acard:hover{ background:var(--paper-2); }
/* The ghost initials are fully contained inside their own card. Bleeding them
   through the column rules read as an overflow bug, not as a flourish. */
.acard .mono{
  position:absolute; right:clamp(14px,2vw,26px); top:clamp(10px,1.4vw,18px);
  z-index:0; pointer-events:none;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144;
  font-size:clamp(64px,7vw,96px); line-height:1;
  color:rgba(22,19,14,.07); letter-spacing:-.05em;
  max-width:calc(100% - clamp(28px,4vw,52px)); text-align:right;
}
.acard .role{ position:relative; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:auto; }
.acard h3{
  position:relative; margin:clamp(34px,5vw,56px) 0 10px;
  font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-size:clamp(26px,2.9vw,38px); line-height:.98; letter-spacing:-.03em;
  transition:color .3s var(--ease);
}
.acard:hover h3{ color:var(--accent); }
.acard p{ position:relative; margin:0 0 18px; font-size:13.5px; line-height:1.56; color:var(--ink-2); max-width:34ch; }
.acard .more{ position:relative; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center; }
.acard .more .arw{ color:var(--accent); transition:transform .3s var(--ease); }
.acard:hover .more .arw{ transform:translateX(6px); }

/* author page hero */
.ahero{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(26px,4vw,64px); align-items:center; }
.ahero .emblem{
  position:relative; aspect-ratio:1/1; border:1px solid var(--rule);
  display:grid; place-items:center; background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,255,255,.7), transparent 70%), var(--paper-2);
  overflow:hidden;
}
.ahero .emblem span{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144;
  font-size:clamp(90px,14vw,190px); line-height:1; letter-spacing:-.05em;
  color:var(--ink); opacity:.14;
}
.ahero .emblem::after{ content:""; position:absolute; inset:12px; border:1px solid var(--rule-soft); pointer-events:none; }

/* ============================================================
   BOOK DETAIL
   ============================================================ */
.detail{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,84px); align-items:start; }
.detail-cover{ position:relative; perspective:1400px; }
.detail-cover .frame{
  position:relative;
  transition:transform .9s var(--ease);
  filter:drop-shadow(0 34px 52px rgba(22,19,14,.26)) drop-shadow(0 5px 12px rgba(22,19,14,.14));
}
.detail-cover:hover .frame{ transform:translateY(-8px); }
.detail-cover img{ width:100%; border-radius:2px; }
.detail-cover .glow{
  position:absolute; left:50%; top:52%; width:112%; aspect-ratio:1/1;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(192,140,51,.36), rgba(224,23,94,.12) 45%, transparent 68%);
  filter:blur(24px);
}
.detail h1{
  margin:0 0 10px; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(30px,4.4vw,58px); line-height:.96; letter-spacing:-.032em;
}
.detail .series-line{ font-family:var(--ff-display); font-style:italic; font-size:16px; color:var(--ink-2); margin-bottom:6px; font-variation-settings:"opsz" 24; }
.detail .author-line{ font-size:14px; color:var(--ink-2); margin-bottom:22px; }
.detail .author-line a{ border-bottom:1px solid var(--rule); }
.detail .author-line a:hover{ color:var(--accent); border-color:var(--accent); }
.detail .desc{
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 24;
  font-size:clamp(16px,1.4vw,19px); line-height:1.62; color:var(--ink-2);
  max-width:56ch; margin:0 0 clamp(26px,3vw,38px);
}
.metatable{ border-top:1px solid var(--ink); margin-bottom:clamp(26px,3vw,38px); }
.metatable .row{
  display:grid; grid-template-columns:minmax(96px,.34fr) 1fr; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.metatable .row .k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.metatable .row .v{ font-family:var(--ff-display); font-size:16px; font-variation-settings:"opsz" 30; letter-spacing:-.012em; }
.retail{ border-top:1px solid var(--rule); padding-top:22px; }
.retail .k{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.retail .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.retail .soonnote{
  font-family:var(--ff-display); font-size:17px; color:var(--ink-2);
  font-variation-settings:"opsz" 30; max-width:44ch; margin:0 0 16px;
}
.retail .grow{ flex:1 1 100%; font-size:11.5px; color:var(--ink-3); margin-top:4px; }

/* other language editions of the same case */
.editions{ border-top:1px solid var(--rule); padding-top:20px; margin-bottom:clamp(22px,2.6vw,32px); }
.editions .k{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.editions .row{ display:flex; flex-wrap:wrap; gap:9px; }
.edchip{
  font-size:12px; font-weight:500; letter-spacing:.04em;
  border:1px solid var(--rule); border-radius:999px; padding:6px 14px; color:var(--ink-2);
  transition:border-color .28s var(--ease), color .28s var(--ease);
}
.edchip:hover{ border-color:var(--accent); color:var(--accent); }

/* the international block on a line page */
.edgroups{ display:grid; gap:clamp(24px,3vw,40px); margin-bottom:clamp(38px,4.6vw,68px); }
.edgroup-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--rule); padding-bottom:10px; margin-bottom:20px; }
.edgroup-head .t{
  font-family:var(--ff-display); font-weight:600; font-variation-settings:"SOFT" 20,"opsz" 40;
  font-size:clamp(19px,2vw,26px); letter-spacing:-.02em;
}
.edgroup-head .c{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-left:auto; }
.edrow{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px); }
.edcard{ flex:0 0 auto; width:max(108px, calc(var(--stackH) * .92)); }
.edcard img{
  width:100%; border-radius:2px; margin-bottom:9px;
  box-shadow:0 12px 24px rgba(22,19,14,.18), 0 1px 2px rgba(22,19,14,.14);
  transform:rotate(-1.4deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.edcard:nth-child(even) img{ transform:rotate(1.2deg); }
.edcard:hover img{ transform:rotate(0deg) translateY(-8px); box-shadow:0 26px 40px rgba(22,19,14,.26); }
.edcard .lg{
  display:block; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); transition:color .3s var(--ease);
}
.edcard:hover .lg{ color:var(--accent); }

/* series navigator */
.seriesnav{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.snode{
  border:1px solid var(--rule); padding:16px 16px 18px; background:var(--paper);
  transition:background .4s var(--ease), border-color .4s var(--ease);
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.snode:hover{ background:var(--paper-2); border-color:var(--ink-3); }
.snode.on{ border-color:var(--ink); background:var(--paper-2); }
.snode .vol{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.snode .t{ font-family:var(--ff-display); font-size:15.5px; font-weight:600; line-height:1.2; letter-spacing:-.014em; font-variation-settings:"opsz" 30; }
.snode .st{ font-size:11.5px; color:var(--ink-3); margin-top:auto; }

/* ============================================================
   COMING SOON PLATES
   ============================================================ */
.ph{ flex:0 0 auto; width:max(150px, calc(var(--shelfH) / 1.5)); }
.bgrid .ph, .seriesgrid .ph{ width:auto; }
/* An unpublished volume is an ANNOUNCEMENT, not a product. It sits in the page
   ground with a hairline frame and one magenta rule, deliberately quieter and
   smaller than a real cover so a shelf of them never outshouts the books. */
.plate{
  position:relative; height:calc(var(--shelfH) * .88); border-radius:2px; overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--rule);
  box-shadow:0 6px 16px rgba(22,19,14,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center; padding:24px 16px 20px;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.ph .plate, .gcard .shot .plate{ align-self:flex-end; }
.ph:hover .plate, .gcard:hover .shot .plate{ transform:translateY(-8px); border-color:var(--ink-3); box-shadow:0 18px 32px rgba(22,19,14,.14); }
/* one hairline frame, one magenta rule: the whole ornament budget */
.plate::before{ content:""; position:absolute; inset:10px; border:1px solid var(--rule-soft); }
.plate .prule{ display:block; width:38px; height:2px; background:var(--accent); margin:14px auto 12px; }
.plate .vol{
  font-family:var(--ff-sans); font-size:9px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}

/* Artwork variant: a generated, TEXT-FREE Regency scene as the ground, with the
   lettering set over it in HTML. Nothing is ever baked into the picture. */
.plate.art{
  background:var(--ink);
  border-color:rgba(22,19,14,.28);
  box-shadow:0 14px 30px rgba(22,19,14,.22);
  padding:22px 16px 20px;
}
.plate.art{
  /* The generated scene is decoration, so it rides in as a background: it fills
     the card and crops, and is not an image a reader could mistake for a cover.
     The url itself is set inline by the generator, because a url() passed through
     a custom property would resolve against this stylesheet instead of the page. */
  background-size:cover;
  background-position:center;
}
/* a scrim so the typography always has contrast, whatever the scene does */
.plate.art::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(10,8,5,.62) 0%, rgba(10,8,5,.18) 34%, rgba(10,8,5,.24) 62%, rgba(10,8,5,.76) 100%);
}
.plate.art::before{ inset:9px; border-color:rgba(247,243,235,.34); z-index:2; }
.plate.art .ser, .plate.art .mid, .plate.art .auth{ z-index:2; }
.plate.art .ser{ color:rgba(247,243,235,.82); }
.plate.art .ttl{ color:var(--paper); text-shadow:0 2px 14px rgba(10,8,5,.7); }
.plate.art .vol{ color:rgba(247,243,235,.72); }
.plate.art .auth{ color:rgba(247,243,235,.76); }
.plate.art .prule{ background:var(--accent); box-shadow:0 0 12px rgba(224,23,94,.5); }
.plate .ser{
  position:relative; font-family:var(--ff-display); font-style:italic;
  font-size:11px; color:var(--ink-3); line-height:1.4; max-width:16ch;
}
.plate .mid{ position:relative; display:flex; flex-direction:column; align-items:center; }
.plate .ttl{
  font-family:var(--ff-display); font-weight:600; font-style:italic;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  font-size:clamp(15px,1.5vw,19px); line-height:1.12; letter-spacing:-.02em;
  color:var(--ink-2); max-width:15ch;
}
.plate .orn{ display:none; }
.plate .auth{
  position:relative; font-family:var(--ff-sans); font-size:9.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}
/* the same plate inside a catalog grid cell */
.gcard .shot .plate{ height:calc(var(--gridH) * .88); width:calc(var(--gridH) * .88 / 1.5); }
.ph .meta{ margin-top:14px; }
.ph .meta h3{
  margin:0 0 4px; font-family:var(--ff-display); font-weight:600;
  font-variation-settings:"opsz" 40; font-size:16px; letter-spacing:-.014em;
  transition:color .3s var(--ease);
}
.ph:hover .meta h3{ color:var(--accent); }
/* the big plate on a coming-soon detail page */
.plate-xl{ width:100%; aspect-ratio:2/3; height:auto; padding:clamp(26px,3vw,44px) clamp(16px,2vw,28px); }
.detail-cover:hover .plate-xl{ transform:translateY(-8px); }
.plate-xl .ttl{ font-size:clamp(26px,3vw,40px); max-width:14ch; }
.plate-xl .prule{ width:56px; margin-top:22px; }
.plate-xl .ser{ font-size:clamp(12px,1.2vw,16px); max-width:20ch; }
.plate-xl .auth{ font-size:clamp(11px,1vw,13px); }
.plate-xl .orn{ width:96px; }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.quote{ background:var(--ink); color:var(--paper); padding:clamp(56px,8vw,132px) 0; position:relative; overflow:hidden; }
.quote::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(247,243,235,.05) 1px, transparent 1px);
  background-size:56px 100%;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 78%);
}
.quote-in{ position:relative; text-align:center; }
.quote .mark{
  font-family:var(--ff-display); font-size:clamp(70px,10vw,140px); line-height:.5;
  color:var(--accent); display:block; margin-bottom:.22em;
}
.quote blockquote{
  margin:0 auto; max-width:15ch;
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 144;
  font-size:clamp(28px,5.2vw,66px); line-height:1.06; letter-spacing:-.028em;
}
.quote cite{
  display:block; margin-top:clamp(22px,3vw,38px); font-style:normal;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,243,235,.6);
}

/* ============================================================
   OUR STORY / PROSE PAGES
   ============================================================ */
.story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:start; }
.story h2{
  margin:0; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(30px,4.6vw,60px); line-height:.95; letter-spacing:-.032em;
}
.story .lede{
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 24;
  font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:var(--ink-2); margin:0 0 26px;
}
.storyfacts{ border-top:1px solid var(--ink); }
.storyfacts .row{
  display:grid; grid-template-columns:minmax(90px,.42fr) 1fr; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.storyfacts .row .k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.storyfacts .row .v{ font-family:var(--ff-display); font-size:16px; font-variation-settings:"opsz" 30; letter-spacing:-.012em; }

.prose{ display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,.68fr); gap:clamp(20px,3.4vw,58px); align-items:start; }
.prose + .prose{ margin-top:clamp(34px,4.4vw,64px); padding-top:clamp(34px,4.4vw,64px); border-top:1px solid var(--rule); }
.prose h2{
  margin:0; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 90;
  font-size:clamp(23px,2.6vw,34px); line-height:1.02; letter-spacing:-.028em;
  position:sticky; top:96px;
}
.prose p{ margin:0 0 1.05em; font-size:16px; line-height:1.72; color:var(--ink-2); max-width:64ch; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ border-bottom:1px solid var(--rule); }
.prose a:hover{ color:var(--accent); border-color:var(--accent); }
.addr{
  font-family:var(--ff-display); font-style:normal; font-size:17px; line-height:1.62;
  font-variation-settings:"opsz" 30; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:18px; margin:0 0 1.05em;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{ background:var(--paper-2); border-top:1px solid var(--rule); }
.news-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(22px,4vw,64px); align-items:center;
  padding-block:clamp(44px,6vw,88px);
}
.news h2{
  margin:0 0 10px; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:clamp(34px,6vw,80px); line-height:.9; letter-spacing:-.036em;
}
.news p{ margin:0; font-size:15px; color:var(--ink-2); max-width:40ch; }
.nform{ display:flex; gap:10px; flex-wrap:wrap; }
.nform input{
  flex:1 1 220px; min-width:0; padding:15px 16px; font-size:14px; font-family:var(--ff-sans);
  background:transparent; color:var(--ink);
  border:0; border-bottom:1.5px solid var(--ink); border-radius:0;
  transition:border-color .3s var(--ease);
}
.nform input::placeholder{ color:var(--ink-3); }
.nform input:focus{ outline:none; border-color:var(--accent); }
.nform .note{ flex:1 1 100%; font-size:11px; color:var(--ink-3); margin-top:4px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--ink); color:rgba(247,243,235,.78); padding-top:clamp(46px,6vw,86px); }
.fgrid{
  display:grid; grid-template-columns:1.5fr repeat(4,1fr);
  gap:clamp(22px,3vw,44px); padding-bottom:clamp(34px,4vw,58px);
}
.fbrand{
  font-family:var(--ff-display); font-weight:700; font-size:34px; letter-spacing:-.03em;
  color:var(--paper); line-height:1; margin-bottom:14px;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 100;
}
.fbrand + p{ font-size:13px; line-height:1.6; max-width:32ch; margin:0 0 18px; }
.fbadge{
  display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(247,243,235,.24); border-radius:2px; padding:5px 10px; color:rgba(247,243,235,.7);
}
.fcol h4{
  margin:0 0 14px; font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); padding-bottom:10px; border-bottom:1px solid rgba(247,243,235,.16);
}
.fcol a{ display:block; font-size:13px; padding:5px 0; color:rgba(247,243,235,.72); transition:color .25s var(--ease), transform .25s var(--ease); }
.fcol a:hover{ color:var(--accent); transform:translateX(3px); }
.fbot{
  border-top:1px solid rgba(247,243,235,.16); padding:20px 0 30px;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-size:11.5px; color:rgba(247,243,235,.56);
}
.fbot .rt{ margin-left:auto; }

/* ============================================================
   404
   ============================================================ */
.nf{ padding:clamp(70px,12vw,180px) 0 clamp(50px,8vw,120px); text-align:center; }
.nf h1{
  margin:0 0 18px; font-family:var(--ff-display); font-weight:700; font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-size:clamp(32px,6.4vw,84px); line-height:.94; letter-spacing:-.034em;
}
.nf p{ margin:0 auto clamp(28px,3.4vw,42px); max-width:48ch; font-family:var(--ff-display); font-size:clamp(16px,1.5vw,20px); line-height:1.58; color:var(--ink-2); font-variation-settings:"opsz" 24; }
.nf .row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FIX ROUND 1 ADDITIONS
   ============================================================ */

/* Card titles reserve two lines so the byline and the availability dot sit on
   one baseline across every row of a grid. */
.gcard h3, .bcard h3{ min-height:2.44em; }

/* Small collections: enlarge and centre rather than leaving dead columns. */
.bgrid.few{
  grid-template-columns:repeat(auto-fit, minmax(210px, 250px));
  justify-content:center;
}
.bgrid.few .gcard .shot{ height:calc(var(--gridH) * 1.14); }

/* Announcement plates read quieter than the covers around them. */
.ret.soon::before{ background:var(--accent); }

/* The line disclaimer sits under the intro, plain and unmissable. */
.line-disclaimer{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:13px; line-height:1.56; color:var(--ink-3); max-width:52ch;
}

/* Newsletter: an address that works today instead of a form that does not. */
.nsub{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.nsub .addr-line{
  font-family:var(--ff-display); font-size:clamp(18px,1.8vw,24px);
  font-variation-settings:"opsz" 40; letter-spacing:-.014em; color:var(--ink-2);
}
.nsub .note{ font-size:12px; color:var(--ink-3); max-width:46ch; line-height:1.55; }
.nsub .note a{ border-bottom:1px solid var(--rule); }
.nsub .note a:hover{ color:var(--accent); border-color:var(--accent); }
.mailbig{
  font-family:var(--ff-display); font-size:clamp(20px,2.2vw,30px);
  font-variation-settings:"opsz" 60; letter-spacing:-.02em;
  border-bottom:1px solid var(--rule);
}
.mailbig:hover{ color:var(--accent); border-color:var(--accent); }

/* The numbered device, extended to the prose pages. */
.prose-head{ display:flex; align-items:baseline; gap:12px; position:sticky; top:96px; }
.prose .prose-head h2{ position:static; }
.prose-head .num{
  font-family:var(--ff-display); font-weight:600; font-variation-settings:"opsz" 20;
  font-size:11px; letter-spacing:.06em; color:var(--accent);
  border:1px solid var(--accent); border-radius:2px; padding:3px 6px; line-height:1;
  flex:0 0 auto;
}

/* House pull-quote inside a prose page. */
.pquote{
  margin:clamp(34px,4.4vw,64px) 0 0; padding:clamp(28px,3.4vw,48px) 0;
  border-block:1px solid var(--rule); text-align:center;
}
.pquote .mark{
  display:block; font-family:var(--ff-display); font-size:clamp(48px,6vw,86px);
  line-height:.5; color:var(--accent); margin-bottom:.3em;
}
.pquote blockquote{
  margin:0 auto; max-width:26ch;
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 90;
  font-size:clamp(22px,3.2vw,40px); line-height:1.14; letter-spacing:-.024em;
}
.pquote figcaption{
  margin-top:clamp(16px,2vw,26px);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
}

/* Author page: the line name carries the hero, the eyebrow says Author. */
.ahero-role{
  display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}

/* ============================================================
   ROTATING AUTHOR SPOTLIGHT
   ============================================================ */
.spotlight{ position:relative; }

/* Five names do not fit on a phone, so the tab row is itself a swipe rail with
   a peek. The progress hairline lives in the wrapper, not in the scroller, or
   it would slide away with the tabs. */
.spot-tabsw{
  position:relative;
  border-bottom:1px solid var(--rule); margin-bottom:clamp(26px,3.4vw,44px);
}
.spot-tabs{
  position:relative; display:flex; gap:clamp(14px,2.4vw,34px);
  padding-bottom:14px; overflow-x:auto;
  scrollbar-width:none;
}
.spot-tabs::-webkit-scrollbar{ display:none; }
.spot-tab{ flex:0 0 auto; white-space:nowrap;
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 40;
  font-size:clamp(16px,1.7vw,21px); letter-spacing:-.016em; line-height:1.1;
  color:var(--ink-3); padding:2px 0; position:relative;
  transition:color .35s var(--ease);
}
.spot-tab:hover{ color:var(--ink); }
.spot-tab.on{ color:var(--ink); }
.spot-tab.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-13px; height:2px; background:var(--accent);
}
/* the rotation timer, drawn as a hairline that fills across the active tab */
.spot-progress{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; overflow:hidden; }
.spot-progress i{
  display:block; height:100%; width:100%; background:var(--accent); opacity:.36;
  transform:scaleX(0); transform-origin:left;
}
.spotlight.running .spot-progress i{ animation:spotfill var(--rotate,7000ms) linear forwards; }
@keyframes spotfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.spot-panel{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4.4vw,72px); align-items:center;
}
.spot-panel[hidden]{ display:none!important; }
.spot-panel.fading{ opacity:0; transform:translateY(10px); }
.spot-panel{ transition:opacity .5s var(--ease), transform .5s var(--ease); }

.spot-text{ position:relative; min-width:0; }
.spot-text .mono{
  position:absolute; left:-.06em; top:-.42em; z-index:0; pointer-events:none;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144;
  font-size:clamp(96px,12vw,170px); line-height:1;
  color:rgba(22,19,14,.05); letter-spacing:-.05em;
}
.spot-text > *{ position:relative; }
.spot-text .role{
  display:block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.spot-text h3{
  margin:0 0 6px; font-family:var(--ff-display); font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-size:clamp(32px,4.6vw,62px); line-height:.94; letter-spacing:-.034em;
}
.spot-text .bio{
  font-family:var(--ff-display); font-variation-settings:"SOFT" 20,"opsz" 24;
  font-size:clamp(16px,1.4vw,20px); line-height:1.56; color:var(--ink-2);
  max-width:42ch; margin:0 0 24px;
}

/* The author's whole shelf as one swipe rail. A fan could only ever hold five
   covers; a rail holds everything the author has written and says so with a
   peek at its right edge. */
.spot-shelf{ position:relative; min-width:0; }
.spot-rail{
  display:flex; align-items:flex-start; gap:clamp(13px,1.5vw,22px);
  overflow-x:auto; padding:22px 16% 24px 2px;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
  perspective:1000px;
}
.spot-rail::-webkit-scrollbar{ height:4px; }
.spot-rail::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:2px; }
.spot-rail::-webkit-scrollbar-track{ background:transparent; }
.spot-shelf::after{
  content:""; position:absolute; right:0; top:0; bottom:24px; width:clamp(24px,5vw,64px);
  background:linear-gradient(90deg, transparent, var(--paper));
  pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
}
/* .hasmore is set by the script when the rail really does overflow */
.spot-shelf.hasmore::after{ opacity:1; }
.spot-shelf.hasmore .spot-cue{ display:flex; }
.spot-shelf:not(.hasmore) .spot-cue{ display:none; }
.spot-cue{ margin-top:0; }

.spot-card{
  --spotH:clamp(154px,14.5vw,208px);
  position:relative; flex:0 0 auto;
  transition:filter .45s var(--ease);
}
/* a fixed-height box per cover: the shelf line is straight, the trims are not */
.spot-shot{ display:flex; align-items:flex-end; height:var(--spotH); }
.spot-card img, .spot-card .plate{
  height:var(--spotH); width:auto; max-width:none; object-fit:contain; border-radius:2px;
  box-shadow:0 14px 30px rgba(22,19,14,.2), 0 1px 2px rgba(22,19,14,.16);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-origin:center bottom;
}
.spot-card .plate{ aspect-ratio:2/3; }
.spot-card .plate .ttl{ font-size:clamp(11px,1.05vw,13px); }
.spot-card .plate .ser{ font-size:8.5px; }
.spot-card .plate .auth{ font-size:7.5px; letter-spacing:.16em; }
.spot-card .plate .prule{ width:22px; margin:8px auto 7px; }
.spot-card .plate .vol{ font-size:7.5px; }
.spot-rail:hover .spot-card{ filter:saturate(.72) opacity(.62); }
.spot-card:hover, .spot-card:focus-visible{ z-index:5; filter:saturate(1.04) opacity(1); }
.spot-card:hover img, .spot-card:focus-visible img,
.spot-card:hover .plate, .spot-card:focus-visible .plate{
  transform:translateY(-10px) rotateY(-5deg) scale(1.03);
  box-shadow:0 30px 48px rgba(22,19,14,.28);
}
.spot-card:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }
.spot-cardtitle{
  display:block; margin-top:10px; max-width:19ch;
  font-size:11px; line-height:1.35; color:var(--ink-3);
  transition:color .3s var(--ease);
}
.spot-card:hover .spot-cardtitle, .spot-card:focus-visible .spot-cardtitle{ color:var(--accent); }
.spot-badge{
  position:absolute; left:6px; top:-10px;
  font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(224,23,94,.4); border-radius:2px;
  padding:2px 5px; background:var(--paper); white-space:nowrap;
}

@media (max-width:1080px){
  .spot-panel{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .spot-rail{ gap:clamp(14px,3vw,24px); padding:14px 22% 22px 2px; perspective:none; }
  .spot-card{ --spotH:clamp(168px,44vw,215px); }
}
@media (max-width:820px){
  /* the tab row keeps a peek so it reads as swipeable */
  .spot-tabs{ padding-right:18%; }
}

/* ============================================================
   REVEAL
   ============================================================ */
/* No rotation in the resting state: on full-bleed rails a fraction of a degree
   widens the bounding box and the page picks up a stray pixel of scroll. */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.visible{ opacity:1; transform:none; }
.rv.dim{ opacity:0; transform:translateY(14px); }
.rv.dim.visible{ opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .lines{ grid-template-columns:repeat(4,1fr); }
  .line, .line.w3{ grid-column:span 2; }
}
@media (max-width:1080px){
  .hero-in{ grid-template-columns:1fr; align-items:start; gap:36px; }
  .hero-right{ justify-content:flex-start; }
  .hero-book{ width:min(74%,320px); }
  .hero-stamp{ display:none; }
  .spot{ grid-template-columns:1fr; }
  .story{ grid-template-columns:1fr; }
  .news-in{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr 1fr 1fr; }
  .detail{ grid-template-columns:1fr; }
  .detail-cover{ width:min(70%,340px); }
  .ahero{ grid-template-columns:1fr; }
  .ahero .emblem{ width:min(52%,260px); }
  .prose{ grid-template-columns:1fr; gap:14px; }
  /* single column: a sticky heading would ride over its own body copy */
  .prose h2, .prose-head{ position:static; }
}
@media (max-width:820px){
  .menu-btn{ display:block; }
  .topbar-in{ position:relative; }
  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 20px;
    box-shadow:0 24px 40px rgba(22,19,14,.1);
    max-height:calc(100vh - 66px); overflow-y:auto;
  }
  .nav.open{ display:flex; }
  .nav a{
    font-size:17px; font-family:var(--ff-display); letter-spacing:-.012em;
    color:var(--ink); padding:11px 0; border-bottom:1px solid var(--rule-soft);
  }
  .nav a::after{ display:none; }
  .nav .nav-lines{ font-size:15px!important; color:var(--ink-2)!important; padding-left:14px; }
  .nav .sep{ display:none; }
  .lines{ grid-template-columns:1fr; }
  .line, .line.w3{ grid-column:span 1; }
  /* the cover fan uses the whole column width on a phone */
  .line .stack{ justify-content:flex-start; min-height:0; }
  .line .stack img{ height:auto; width:calc(38% - 8px); }
  .line .stack img:nth-child(2), .line .stack img:nth-child(3){ margin-left:-9%; }
  .line .stack.solo{ align-items:center; }
  .line .stack.solo img{ height:auto; width:44%; }
  .line .stack.solo .solo-note{ max-width:none; }
  .sechead{ grid-template-columns:auto 1fr; }
  .sechead.nonum{ grid-template-columns:1fr; }
  .sechead .aside{ grid-column:1/-1; text-align:left; padding-bottom:0; }
  .fcount{ margin-left:0; }
}
/* Tim's phone law: the book stands straight, centred, with its caption below
   it and also centred. Nothing here is decoration; a tilted, left-hugging cover
   with a caption floating over its corner is exactly what this replaces. */
@media (max-width:900px){
  .hero-right{ justify-content:center; }
  .hero-carousel{ --heroH:clamp(250px,54vw,360px); gap:24px; }
  .hero-book .frame{
    transform:none!important;
    filter:drop-shadow(0 22px 34px rgba(22,19,14,.26)) drop-shadow(0 4px 10px rgba(22,19,14,.16));
  }
  .hero-slide{ flex-direction:column; align-items:center; justify-content:flex-start; }
  .hero-carousel .hero-book{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .hero-carousel .hero-tag{
    position:static; transform:none; width:auto; max-width:34ch;
    margin:18px auto 0; text-align:center;
    display:flex; flex-direction:column; align-items:center;
  }
}
@media (max-width:560px){
  .fgrid{ grid-template-columns:1fr 1fr; }
  .hero-book{ width:min(88%,300px); }
  .hero-tag{ position:static; margin-top:22px; transform:none; max-width:none; }
  .quote blockquote{ max-width:12ch; }
  .bgrid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .detail-cover{ width:min(86%,320px); }
  .ahero .emblem{ width:min(70%,240px); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .rv{ opacity:1; transform:none; }
  .uline{ background-size:100% .26em; }
  .marquee-track,.band-track{ animation:none; }
}