/* ============================================================================
   DINOROOST — the storefront stylesheet.

   The design argument, in one line: the Roost is painted and the Tally is
   printed. Everything a person reads or presses on this site is painted —
   flat house-paint colour, no rounded corners, hand-cut edges, mismatched by
   a degree. The one machine-even surface is the order ledger, set in
   monospace, because that is what a ledger is and the books know it.

   Colour is canon. docs/ART-BIBLE.md sets the palette and one rule that
   decides most of this file: paper is never pure white, and true white is
   reserved for the thing that is supposed to break. On this site true white
   appears in exactly one place — the Three Laws, painted on the rail.
   ========================================================================= */

:root {
  /* --- ground and surface --------------------------------------------- */
  --slough:      #121714;   /* the river at night. Warm, never neutral */
  --slough-deep: #0C100E;
  --plank:       #1B231D;   /* a deck board */
  --plank-hi:    #232D25;
  --hair:        #2B352C;
  --edge:        #576957;   /* 3.1:1 on the ground. It borders the quantity
                              stepper, the buy box and the country select, so it
                              is an interactive edge and carries meaning: the
                              floor is 3.0, not decoration's zero. It was #3A463A
                              at 1.8:1, invisible to a good half of readers. */

  /* --- ink ------------------------------------------------------------- */
  --paper:       #F2EDE1;   /* the ground of every printed page here */
  --pale:        #E7E3D6;   /* fingernail pale */
  --muted:       #ABB29E;
  --faint:        #848D74;   /* 5.2:1 on the ground, 4.6:1 on a card */

  /* --- the three Roost paints ------------------------------------------ */
  --signal:      #86AE68;   /* signal green */
  --signal-hi:   #A6CB86;
  --cutline:     #C0402F;   /* cut-line red — the pin, the rail, Pia's hat */
  --cutline-hi:  #E34C37;   /* the same red, light enough to set type in */
  --housepaint:  #FFFFFF;   /* reserved. The Laws, and nothing else */

  /* --- light ----------------------------------------------------------- */
  --drift:       #E0A03A;   /* Drift gold. Lamp light. The buy action */
  --drift-hi:    #F2BD63;
  --drift-dim:   #8A6524;

  /* --- the other side -------------------------------------------------- */
  --tally:       #7C827E;   /* flat, even, cool. One hue. Machine finish */

  /* --- type ------------------------------------------------------------ */
  --wordmark: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --display:  "Anton", "Archivo Black", Impact, sans-serif;
  --body:     "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ledger:   "Courier Prime", "Courier New", ui-monospace, monospace;

  --measure: 64ch;
  --gut: clamp(20px, 4vw, 34px);
  --rail: 74px;             /* the bell rail, desktop only */
}

/* ============================================================================
   RESET AND BASE
   ========================================================================= */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--slough);
  color: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 380;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--drift); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--drift-hi); }

/* Keyboard focus is loud on purpose. This is a shop; people tab through it. */
:focus-visible {
  outline: 3px solid var(--drift-hi);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--drift); color: #16110A; padding: 12px 18px;
  font-family: var(--ledger); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

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

/* ============================================================================
   SHELL
   ========================================================================= */

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: var(--measure); }

section { padding: clamp(52px, 7.4vw, 88px) 0; position: relative; }
.hr { height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent); }

/* ============================================================================
   TYPE ROLES
   ========================================================================= */

/* The wordmark, matched to the one printed on all ten covers. */
.wordmark {
  font-family: var(--wordmark);
  letter-spacing: .19em;
  text-transform: uppercase;
  padding-left: .19em;      /* tracking pads the right; put it back on the left */
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
}

/* The title face, matched to the one printed on all ten covers. */
.display {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
}

h2.display { font-size: clamp(30px, 5.2vw, 52px); }
h3.display { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.06; }
/* SIZE IS A CLASS, NOT A TAG. A card heading that sits directly under the page's
   h1 has to BE an h2 - a document that jumps h1 to h3 is one a screen reader
   cannot outline - but it must not be set at h2 size, or every card on the shop
   becomes a fifty-two point headline. `.sub` is the h3 size on any tag. */
.display.sub, h2.display.sub { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.06; }

.lede {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.5;
  color: var(--pale);
  max-width: 54ch;
}

.small { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* The ledger voice. Every number on this site is set in it: prices, counts,
   page extents, order lines. Machine-even, and the only thing here that is. */
.ledger {
  font-family: var(--ledger);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.stencil {
  font-family: var(--ledger);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--drift);
}

em { color: var(--pale); }
strong { font-weight: 640; color: var(--pale); }

/* ============================================================================
   THE PLATE — a section marker, hand-lettered in the world and set in the
   ledger face here, carrying the bell signal that opens the section. The bell
   code is on the endpapers of every volume; it is the series' own index.
   ========================================================================= */

.plate {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-family: var(--ledger);
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--drift);
}
.plate::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.plate .bell { display: inline-flex; align-items: center; gap: 4px; }
.plate .bell i { display: block; width: 5px; height: 5px; background: var(--drift); border-radius: 50%; }
.plate .bell i.long { width: 15px; border-radius: 0; }
.plate .bell i.soft { background: var(--drift-dim); }

/* ============================================================================
   BUTTONS — painted stencil labels. Flat colour, square, cut by hand: the
   clip-path is a fixed set of offsets, not a random one, so the shape is the
   same every load, the way a real painted sign is the same every morning.
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  font-family: var(--display);
  font-size: 16px; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1;
  border: 0; border-radius: 0;
  background: var(--drift); color: #17120A;
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, transform .14s ease;
  clip-path: polygon(0 3px, 6px 0, calc(100% - 4px) 2px, 100% 5px, calc(100% - 2px) calc(100% - 3px),
                     calc(100% - 8px) 100%, 5px calc(100% - 1px), 1px calc(100% - 6px));
}
.btn:hover { background: var(--drift-hi); color: #17120A; }
.btn:active { transform: translateY(1px); }
/* clip-path clips everything the element paints, an outline included, so the
   ring has to be drawn INSIDE the shape. Two inset shadows: dark against the
   gold, light against the dark ghost button. */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #17120A, inset 0 0 0 5px var(--drift-hi);
}
.btn.ghost:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--edge), inset 0 0 0 3px var(--drift-hi);
}

.btn.ghost {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  clip-path: none;
}
.btn.ghost:hover { color: var(--drift-hi); box-shadow: inset 0 0 0 1.5px var(--drift-dim); }

.btn.red { background: var(--cutline); color: #FFF3F0; }
.btn.red:hover { background: #D14A38; }

.btn.small { padding: 11px 18px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================================
   NAV
   ========================================================================= */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 16, 14, .88);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-bottom: 1px solid var(--hair);
}
.nav-in {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--gut);
  height: 62px; display: flex; align-items: center; gap: 26px;
}
.nav .wordmark { font-size: 17px; flex: none; }
.nav .wordmark span { color: var(--drift); }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a {
  font-family: var(--ledger); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--drift); }

.cartbtn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--ledger); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper);
}
.cartbtn .count {
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--drift); color: #17120A; font-size: 12px; font-weight: 700;
}
.cartbtn .count[data-empty="1"] { background: var(--edge); color: var(--muted); }

.navtoggle { display: none; background: none; border: 0; color: var(--paper); cursor: pointer; padding: 8px; }

@media (max-width: 860px) {
  .navtoggle { display: block; order: 3; margin-left: 4px; }
  .nav-links {
    order: 4; margin-left: 0; width: 100%; display: none;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 0 18px;
  }
  .nav-in { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; gap: 14px; }
  .nav[data-open="1"] .nav-links { display: flex; }
  .nav-links a { padding: 11px 0; width: 100%; border-bottom: 1px solid var(--hair); }
  .cartbtn { order: 2; margin-left: auto; }
}

/* ============================================================================
   THE BELL RAIL — the site's own signal system, and its scroll index. Quiet
   until you point at it. Desktop only; below 1180px the plates carry it.
   ========================================================================= */

.bellrail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; flex-direction: column; gap: 3px;
  padding: 14px 10px;
}
@media (min-width: 1180px) { .bellrail { display: flex; } }
@media (max-height: 620px) { .bellrail { display: none !important; } }

.bellrail a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 4px; text-decoration: none; color: var(--faint);
  font-family: var(--ledger); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.bellrail .dots { display: flex; align-items: center; gap: 3px; width: 42px; flex: none; }
.bellrail .dots i { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: .55; }
.bellrail .dots i.long { width: 13px; border-radius: 0; }
.bellrail .lbl { opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; white-space: nowrap; }
.bellrail a:hover, .bellrail a:focus-visible { color: var(--paper); }
.bellrail a:hover .lbl, .bellrail a:focus-visible .lbl { opacity: 1; transform: none; }
.bellrail a[aria-current="true"] { color: var(--drift); }
.bellrail a[aria-current="true"] .dots i { opacity: 1; }

/* ============================================================================
   HERO
   ========================================================================= */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hair); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,11,.96) 0%, rgba(10,13,11,.88) 30%, rgba(10,13,11,.42) 55%, rgba(10,13,11,.12) 78%, rgba(10,13,11,.34) 100%),
    linear-gradient(180deg, rgba(10,13,11,.72) 0%, rgba(10,13,11,0) 26%, rgba(10,13,11,0) 62%, rgba(10,13,11,.86) 100%);
}
.hero-in {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto; padding: clamp(72px, 12vw, 132px) var(--gut) clamp(52px, 8vw, 88px);
  min-height: min(84vh, 760px); display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-copy { max-width: 640px; }
.hero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(36px, 5.1vw, 66px); line-height: .95; letter-spacing: .004em;
  color: var(--paper);
  text-shadow: 0 3px 40px rgba(0,0,0,.7);
}
.hero h1 .g { color: var(--drift); }
.hero .sub {
  margin: 22px 0 0; max-width: 42ch;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; color: var(--pale);
  text-shadow: 0 2px 22px rgba(0,0,0,.75);
}
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .under {
  margin-top: 22px; font-family: var(--ledger); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); max-width: 46ch;
}
.hero .under b { color: var(--paper); font-weight: 400; }

@media (max-width: 760px) {
  .hero-img img { object-position: 52% 46%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(10,13,11,.55) 0%, rgba(10,13,11,.2) 30%, rgba(10,13,11,.86) 62%, rgba(10,13,11,.97) 100%);
  }
  .hero-in { min-height: 76svh; }
  .hero-copy { max-width: none; }
}

/* ============================================================================
   THE SHELF — ten covers, face out, in order. The product is a season, so the
   shop is a shelf and reading order is the only order there is.
   ========================================================================= */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
/* Inside the season box the covers are a shelf, not a catalogue: five and
   five, captions off, because the caption is the panel beside them. */
.shelf.tight { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.shelf.tight .n, .shelf.tight .t { display: none; }
.shelf.tight .spine:hover { transform: translateY(-3px); }

.spine {
  display: block; text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
.spine img {
  width: 100%; aspect-ratio: 1600 / 2560; object-fit: cover;
  background: var(--plank);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
}
.spine:hover { transform: translateY(-5px); }
.spine .n {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 10px;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.spine .t {
  margin-top: 3px; font-family: var(--display); text-transform: uppercase;
  font-size: 15px; line-height: 1.06; color: var(--paper);
}
.spine:hover .t { color: var(--drift-hi); }

/* ============================================================================
   CARDS — a slab of painted plank. No radius anywhere on this site.
   ========================================================================= */

.card {
  background: var(--plank);
  border: 1px solid var(--hair);
  padding: clamp(20px, 3vw, 30px);
}
.card.lit { border-color: var(--drift-dim); background: var(--plank-hi); }
/* A card whose call to action must sit on the same line as its neighbours'
   whatever length the copy above it runs to. */
.buildcard { display: flex; flex-direction: column; }
.buildcard .foot-cta { margin-top: auto; padding-top: 26px; }

.grid { display: grid; gap: clamp(16px, 2.4vw, 26px); }
/* Explicit column counts, not auto-fit. auto-fit decides the count from the
   container and leaves an orphan whenever the card count does not divide into
   it; four cards in three columns is the shape that keeps happening. */
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3, .g3w { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .g3, .g3w, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .g2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .g3, .g3w, .g4 { grid-template-columns: 1fr; } }

/* ============================================================================
   THE LAW RAIL — the only true white on this site. Three sentences in house
   paint on the bell rail at ninety feet, and the reason the series exists.
   ========================================================================= */

.laws {
  background:
    linear-gradient(180deg, rgba(192,64,47,.10), rgba(192,64,47,0) 60%),
    var(--slough-deep);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.lawrail {
  border-top: 5px solid var(--cutline);
  padding-top: clamp(26px, 4vw, 40px);
  display: grid; gap: clamp(18px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.law { display: flex; flex-direction: column; }
.law .v { flex: 1 0 auto; }
.law .k {
  font-family: var(--ledger); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cutline-hi); margin-bottom: 12px;
}
.law .v {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 2.5vw, 27px); line-height: 1.02;
  color: var(--housepaint);     /* reserved. This is the only place it is used */
}
.law .s { margin-top: 12px; font-size: 15.5px; color: var(--muted); font-style: italic; }

/* ============================================================================
   THE BELL CODE TABLE
   ========================================================================= */

.code { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.code th {
  text-align: left; padding: 0 14px 11px 0;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; border-bottom: 1px solid var(--hair);
}
.code td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.code td:first-child { font-family: var(--ledger); font-size: 13px; color: var(--paper); white-space: nowrap; }
.code td:last-child { color: var(--muted); padding-right: 0; }
.code tr:last-child td { border-bottom: 0; color: var(--faint); }
.code tr.never td:first-child { color: var(--drift); }

/* ============================================================================
   PRODUCT PAGE
   ========================================================================= */

.product { display: grid; gap: clamp(26px, 4vw, 54px); grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
@media (max-width: 880px) { .product { grid-template-columns: 1fr; } }

.product-cover img {
  width: 100%; aspect-ratio: 1600 / 2560; object-fit: cover;
  box-shadow: 0 24px 60px rgba(0,0,0,.62);
}

/* The buy box is the ledger. It is the one machine-even surface on the site
   and it is set in the ledger face for exactly that reason. */
.buybox { background: var(--plank); border: 1px solid var(--edge); padding: 22px; margin-top: 22px; }
.buybox .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--hair);
  font-family: var(--ledger); font-size: 13.5px; color: var(--muted);
}
.buybox .row:last-of-type { border-bottom: 0; }
.buybox .row b { color: var(--paper); font-weight: 400; }
.buybox .price {
  font-family: var(--display); font-size: 40px; color: var(--drift); line-height: 1;
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.buybox .price small { font-family: var(--ledger); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--edge); }
.qty button {
  width: 40px; background: none; border: 0; color: var(--paper); cursor: pointer;
  font-family: var(--ledger); font-size: 18px; line-height: 1;
}
.qty button:hover { background: var(--plank-hi); color: var(--drift); }
.qty input {
  width: 54px; background: none; border: 0; border-left: 1px solid var(--edge); border-right: 1px solid var(--edge);
  color: var(--paper); text-align: center; font-family: var(--ledger); font-size: 15px; padding: 11px 0;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================================
   CART DRAWER
   ========================================================================= */

.scrim {
  position: fixed; inset: 0; background: rgba(6,9,7,.72); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.scrim[data-open="1"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--slough-deep); border-left: 1px solid var(--edge);
  z-index: 95; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.drawer[data-open="1"] { transform: none; }
.drawer[hidden] { display: none; }
.drawer header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px var(--gut); border-bottom: 1px solid var(--hair);
}
.drawer header h2 { font-family: var(--display); text-transform: uppercase; font-size: 20px; }
.drawer .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 24px; line-height: 1; padding: 4px 8px; }
.drawer .x:hover { color: var(--paper); }
.drawer .lines { flex: 1; overflow-y: auto; padding: 8px var(--gut) 20px; }
.drawer footer { border-top: 1px solid var(--hair); padding: 20px var(--gut) 24px; }

.line { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.line img { width: 52px; aspect-ratio: 1600/2560; object-fit: cover; }
.line .t { font-family: var(--display); text-transform: uppercase; font-size: 14px; line-height: 1.1; }
.line .f { font-family: var(--ledger); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }
.line .p { font-family: var(--ledger); font-size: 14px; color: var(--paper); text-align: right; white-space: nowrap; }
.line .rm { background: none; border: 0; color: var(--faint); cursor: pointer; font-family: var(--ledger); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 0 0; text-align: right; display: block; margin-left: auto; }
.line .rm:hover { color: var(--cutline); }

.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-family: var(--ledger); }
.total .lbl { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.total .amt { font-family: var(--display); font-size: 30px; color: var(--drift); }

.empty { padding: 48px 0; text-align: center; color: var(--faint); }
.empty p { font-family: var(--ledger); font-size: 13px; letter-spacing: .06em; }

/* ============================================================================
   NOTES — the honest boxes. A cut-line-red left edge means read this before
   you press the button.
   ========================================================================= */

.note {
  border-left: 3px solid var(--drift-dim); background: rgba(224,160,58,.05);
  padding: 16px 20px; font-size: 15.5px; color: var(--muted);
}
.note.red { border-left-color: var(--cutline); background: rgba(192,64,47,.06); }
.note b { color: var(--paper); }

/* THE REFRAIN. Three of the ten builds close on the same standalone line, set
   in the books in bold italic on its own. It is not a note about the build, so
   it does not get a note's box; it gets the width of the page and a cut line
   under it, the way the printed page gives it a whole line to itself. */
.refrain {
  margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--cutline);
  font-family: var(--display); font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .01em; line-height: 1.05; color: var(--cutline-hi);
  text-transform: uppercase;
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.foot { background: var(--slough-deep); border-top: 1px solid var(--hair); padding: clamp(44px, 6vw, 68px) 0 40px; }
.foot .cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot .footh { font-family: var(--ledger); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--muted); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--drift); }
.foot .fine { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--hair); color: var(--faint); font-size: 13.5px; max-width: 78ch; }
.foot .fine p { margin-bottom: .7em; }

/* ============================================================================
   UTILITIES
   ========================================================================= */

.stack > * + * { margin-top: var(--s, 18px); }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 14px; } .mt2 { margin-top: 26px; } .mt3 { margin-top: 44px; }
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ============================================================================
   THE PAPER BLOCK — the sample. The site inverts here: cream ground, warm
   black ink, a book measure and a serif, because the thing being sold is a
   printed page and this is the one place the visitor gets to stand on one.
   ========================================================================= */

.paperblock { background: var(--slough-deep); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: clamp(48px, 7vw, 88px) 0; }

.paper {
  background: var(--paper);
  color: #1B1A17;                       /* Roost black. Warm, never neutral */
  max-width: 720px; margin: 0 auto;
  padding: clamp(30px, 5vw, 62px) clamp(24px, 5vw, 68px) clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  position: relative;
}
.paper::before {
  /* the gutter: a perfect-bound page curves into the spine on its left edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  background: linear-gradient(90deg, rgba(120,110,88,.20), rgba(120,110,88,0));
  pointer-events: none;
}
.paper-plate {
  font-family: var(--ledger); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: #6D695A; margin: 0 0 30px; padding-bottom: 14px; border-bottom: 1px solid #DCD6C6;
}
.paper-body { font-size: 18.5px; line-height: 1.68; }
.paper-body p { margin: 0 0 1.05em; }
.paper-body p:first-child { font-size: 21px; line-height: 1.5; }
/* Dialogue lines in the cold open are short and stack; keep them tight so the
   page reads like a page and not like a list. */
.paper-body p + p { text-indent: 1.4em; }
.paper-body p:first-child, .paper-body p:nth-child(2) { text-indent: 0; }

.paper-foot {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid #DCD6C6;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.paper-foot p { margin: 0; font-family: var(--ledger); font-size: 13px; color: #6D695A; max-width: 34ch; }

/* ============================================================================
   SHOP
   ========================================================================= */

.shoplist { border-top: 1px solid var(--hair); }
.shoprow {
  display: grid; grid-template-columns: 116px minmax(0,1fr) 190px;
  gap: clamp(18px, 3vw, 34px); align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--hair);
}
.shoprow-cover img { width: 116px; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.shoprow-body h2 a, .shoprow-body h3 a { color: var(--paper); text-decoration: none; }
.shoprow-body h2 a:hover, .shoprow-body h3 a:hover { color: var(--drift-hi); }
.shoprow-buy { border-left: 1px solid var(--hair); padding-left: clamp(16px, 2vw, 26px); }
@media (max-width: 820px) {
  .shoprow { grid-template-columns: 96px minmax(0,1fr); }
  .shoprow-cover img { width: 96px; }
  .shoprow-buy { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-items: end; }
  .shoprow-buy > * { margin: 0; }
}

.tag {
  display: inline-block; padding: 3px 9px; margin-right: 6px;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(224,160,58,.13); color: var(--drift);
}
.tag.muted { background: none; box-shadow: inset 0 0 0 1px var(--hair); color: var(--faint); }

.setbox {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  background: var(--plank); border: 1px solid var(--drift-dim);
  padding: clamp(22px, 3.4vw, 40px);
}
@media (max-width: 900px) { .setbox { grid-template-columns: 1fr; } }

.select {
  width: 100%; padding: 12px 14px; background: var(--slough); color: var(--paper);
  border: 1px solid var(--edge); border-radius: 0;
  font-family: var(--body); font-size: 15px;
}

/* ============================================================================
   SCHOOLS
   ========================================================================= */

.statrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--hair);
}
.stat { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--hair); }
.stat .v { display: block; font-family: var(--display); font-size: clamp(28px,3.4vw,40px); color: var(--drift); line-height: 1; }
.stat .k { display: block; margin-top: 9px; font-size: 14px; color: var(--muted); max-width: 22ch; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 16px; color: var(--pale); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 2px; background: var(--signal);
}

/* ============================================================================
   PICTURES

   Three kinds, and they behave differently. A PLATE is a painted sheet with a
   ground of its own, so it sits in a frame. A CUTOUT has no ground, so it
   stands on the page and needs a line to stand on. An INK drawing arrives on
   cream paper already, which is why the ink tiles need no treatment at all —
   they are little pages lying on the deck.
   ========================================================================= */

.bigplate { margin: 0; }
.bigplate img { width: 100%; border: 1px solid var(--hair); }
.bigplate figcaption,
.plainfig figcaption {
  margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 66ch;
}
.bigplate figcaption b, .plainfig figcaption b { color: var(--paper); font-weight: 600; }

.plainfig { margin: 0; }
.plainfig img { width: 100%; border: 1px solid var(--hair); }

/* A card that leads with a picture. The picture box is a fixed height so three
   cards in a row start their headlines on the same line. */
.figcard .figbox {
  height: 190px; margin: -6px 0 20px;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1px solid var(--hair);
}
.figcard .figbox img { max-height: 190px; width: auto; max-width: 100%; object-fit: contain; }

/* ---- the line-up ----------------------------------------------------------
   Nine figures on one ground line, scaled to the canon height ladder, so the
   row itself is the information: Odji tallest, Pia smallest by a head. */

.lineup {
  display: flex; align-items: flex-end; gap: clamp(6px, 1.6vw, 22px);
  padding: 20px 0 0; overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--edge);
  scrollbar-width: thin;
}
.who { margin: 0; flex: none; text-align: center; }
.whofig {
  height: calc(var(--s) * clamp(120px, 21vw, 260px));
  width: auto; max-width: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.who figcaption {
  margin-top: 10px; padding-top: 9px;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: flex; flex-direction: column; gap: 2px;
}
.who figcaption span { color: var(--faint); }

/* ---- the animals ---------------------------------------------------------- */

.aniband .ani { margin: 0; }
.anibox {
  height: 150px; margin-bottom: 14px;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1px solid var(--hair);
}
.anifig { max-height: 150px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.aniband h3.display { font-size: 20px; }

/* ---- ink drawings --------------------------------------------------------- */

.inkrow {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.inkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.ink { margin: 0; }
.ink img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
.ink figcaption {
  margin-top: 7px; font-family: var(--ledger); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.ink a { display: block; }
.ink a:hover img { outline: 2px solid var(--drift); outline-offset: 2px; }

/* ---- the spotlight, on a product page ------------------------------------- */

.spotlight {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px);
  align-items: end;
  background: var(--plank); border: 1px solid var(--hair);
  padding: clamp(18px, 2.6vw, 26px);
}
.spotlight:has(.spotfig:only-of-type) { grid-template-columns: auto minmax(0, 1fr); }
.spotfig img { height: 170px; width: auto; max-width: 150px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.spotfig.ani img { max-width: 190px; height: 120px; }
.spotbody { align-self: center; }
@media (max-width: 700px) {
  .spotlight { grid-template-columns: auto auto; }
  .spotbody { grid-column: 1 / -1; }
  .spotfig img { height: 130px; }
}

/* ---- the author ----------------------------------------------------------- */

.authorstrip {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px); align-items: start;
}
.authorfig img { width: 100%; border: 1px solid var(--hair); }
@media (max-width: 820px) {
  .authorstrip { grid-template-columns: 1fr; }
  .authorfig { max-width: 260px; }
}

/* Small screens: the picture boxes shrink with everything else. */
@media (max-width: 620px) {
  .figcard .figbox { height: 150px; }
  .figcard .figbox img { max-height: 150px; }
  .anibox { height: 120px; }
  .anifig { max-height: 120px; }
}

/* The format label above a price in the shop list. */
.shoprow-buy .fmt {
  font-family: var(--ledger); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 4px;
}

/* A cutout standing on the page rather than sitting in a frame: no border,
   and a shadow so it has somewhere to stand. */
.cutfig { margin: 0; }
.cutfig img { max-width: 100%; width: auto; margin: 0 auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.6)); }
.cutfig figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.authorfig img { border: 0; width: auto; max-width: 100%; margin: 0 auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }

/* Where the books are going, in the basket. */
.shipzone { display: block; margin-top: 6px; }
.shipzone span {
  display: block; margin-bottom: 6px;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}

/* With JavaScript off there is no basket, and saying so beats a dead button. */
.noscript {
  margin: 0; padding: 12px var(--gut);
  background: var(--cutline); color: #FFF3F0;
  font-size: 15px; text-align: center;
}
.noscript a { color: #FFF3F0; }

/* ============================================================================
   THE FREE PAGES — Field Notes, Make It, the world guide, the first chapter.
   These are the pages somebody links to, so they are built to be read rather
   than skimmed: one column, a wider measure, and nothing selling until the
   foot.
   ========================================================================= */

.crumbs {
  font-family: var(--ledger); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 22px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--drift); }
.crumbs span { color: var(--edge); }
.crumbs [aria-current] { color: var(--paper); }

/* How a word is said. It wants to look like a note in the margin of a book. */
.say { font-size: 17px; color: var(--muted); }
.say b { font-family: var(--ledger); font-size: 15.5px; color: var(--drift); letter-spacing: .02em; }

.epigraph {
  margin: 0; padding: 22px 0 22px 24px;
  border-left: 3px solid var(--drift-dim);
  font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--pale); font-style: italic;
  max-width: 62ch;
}
.epigraph cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--ledger); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}

/* One piece of evidence. The heading is the claim; the paragraph is why it
   holds. Numbered, because the books number them. */
.claim { counter-increment: claim; position: relative; padding-left: 46px; }
.claim::before {
  content: counter(claim); position: absolute; left: 0; top: 2px;
  font-family: var(--display); font-size: 30px; line-height: 1; color: var(--drift-dim);
}
.stack { counter-reset: claim; }
.claim h2.display { font-size: clamp(21px, 2.6vw, 27px); }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 40px; margin-bottom: 16px;
  font-size: 16.5px; line-height: 1.55;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--plank-hi); box-shadow: inset 0 0 0 1px var(--edge);
  font-family: var(--ledger); font-size: 13px; color: var(--drift);
}

/* The one selling thing on a free page, and it comes last. */
.buystrip {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: clamp(18px, 3vw, 32px);
  align-items: center;
  background: var(--plank); border: 1px solid var(--drift-dim);
  padding: clamp(20px, 3vw, 30px);
}
.buystrip-cover img { width: 132px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.buystrip h2.display { font-size: clamp(22px, 2.8vw, 30px); }
@media (max-width: 620px) {
  .buystrip { grid-template-columns: 92px minmax(0, 1fr); }
  .buystrip-cover img { width: 92px; }
}

/* A scene break inside a chapter. It is a pause, not a rule. */
.paper-body .brk {
  text-indent: 0; text-align: center; letter-spacing: .5em;
  color: #A9A392; margin: 1.9em 0;
}

/* A build plate: the same little cream tile as a chapter spot, but given room
   because on these pages it is the subject rather than an ornament. */
.ink.big { margin: 0; }
.ink.big img { aspect-ratio: 1; width: 100%; max-width: 460px; }
.ink.big figcaption { margin-top: 12px; letter-spacing: .12em; }
.ink.mt2 img { aspect-ratio: 1; }

/* THE SEASON AS TEN OBJECTS. Ten covers, five across, small enough that the
   grid reads as a shelf rather than a catalogue page. */
.spines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.spines a { display: block; line-height: 0; outline-offset: 3px; }
.spines img { width: 100%; height: auto; box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: transform .15s ease; }
.spines a:hover img { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .spines a:hover img { transform: none; } }
@media (max-width: 520px) { .spines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The two nonfiction pages, on a product page: the animal and the finished
   build, both drawn, both linked to the free page that carries them in full. */
.backcard .backfig {
  height: 130px; margin: 14px 0 4px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  border-bottom: 1px solid var(--hair);
}
.backcard .backfig img { max-height: 130px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.backink { margin: 14px 0 4px; height: 130px; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--hair); padding-bottom: 0; }
.backink img { width: 130px; height: 130px; aspect-ratio: 1; object-fit: cover; background: var(--paper); }

/* The animal, leading its card on the Field Notes index. A cut-out stands on
   the rule the way the reference sheets stand it on the ground line, and the
   fixed height keeps ten animals of very different proportions on one baseline
   instead of setting every card to a different depth. */
.beastfig {
  height: 150px; margin: 0 0 16px; display: flex;
  align-items: flex-end; justify-content: center;
  border-bottom: 1px solid var(--hair);
}
.beastfig a { display: block; height: 100%; display: flex; align-items: flex-end; }
.beastfig img { max-height: 150px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.beastfig a:hover img { filter: drop-shadow(0 8px 16px rgba(224,160,58,.35)); }

/* A chapter-head drawing, on the cream page, sized the way the book sets it. */
.chapterhead { margin: 0 0 26px; }
.chapterhead img { width: min(300px, 62%); aspect-ratio: 1; object-fit: cover; }