/* The Book Emporium — one stylesheet, no JavaScript, no webfonts.
   Colours sampled from the shop's own sign and brickwork (Quill, 30 Oct 2026).
   Round two (31 Oct 2026): the wall and the eight shelves.
   Design: quill-proposal-03, adjudicated by Jess. */

:root {
  --sign: var(--brick);   /* the fascia */
  --accent: var(--brick); /* the one colour the shop raises its voice with */
  --ink: #14181c;
  --ink-2: #4d5560;
  --paper: #fbf9f4;
  --brick: #1269c7;   /* Greek Blue — Helen's call, 31 Oct (was oxblood, then #14407a) */
  --band: var(--brick);          /* the banner behind a section heading */
  --offer-blue: var(--brick);    /* the shop's blue */
  --on-band: #fff;
  --ground: #ece4d6;             /* the gutter either side of the paper column —
                                    where a background photograph will sit */
  --hairline: #ddd8cc;
  --max: 1000px;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

/* The full-bleed rows are sized in vw, and 100vw counts the vertical scrollbar, so on a
   desktop they overhang by its width. `clip` cuts that overhang without making a scroll
   container — `hidden` would turn the page into one and break position: sticky later. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  /* The gutter is the shop itself: the second aisle photograph, darkened and muted,
     holding still while the paper column scrolls over it. `fixed` on desktop only —
     iOS has never behaved with fixed backgrounds and stops the page repainting them. */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

@media (min-width: 900px) {
  /* Three pages, three beats of the same walk: the street, the shelves, the door. */
  body { background: #17130f center center / cover no-repeat fixed; }
  body.page-index { background-image: url(images/bg-home.webp); }
  body.page-browse, body.page-what-we-have { background-image: url(images/bg-shelves.webp); }
  body.page-visit { background-image: url(images/bg-visit.webp); }
  body[class*="page-"]:not(.page-index):not(.page-browse):not(.page-what-we-have):not(.page-visit) {
    background-image: url(images/bg-shelves.webp);
  }
}

p { margin: 0 0 1rem; }

a { color: var(--accent); text-underline-offset: 0.16em; }

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

:focus-visible {
  outline: 3px solid var(--sign);
  outline-offset: 3px;
  border-radius: 2px;
}

/* for screen readers only */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the fascia: the shop's own sign ---------- */

.fascia {
  background: var(--sign);
  color: #fff;
  text-align: center;
  padding: 28px 16px 26px;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.windowline {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.92;
}

@media (min-width: 900px) {
  .fascia { padding: 40px 24px 36px; }
  .wordmark { font-size: 48px; }
}

/* ---------- nav ---------- */

.nav {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  padding: 0 16px;
  display: flex;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  overflow-x: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease-out;
}

.nav a:hover { color: var(--accent); }

.nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--sign);
}

/* ---------- layout ---------- */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 24px;
  background: var(--paper);
}

@media (min-width: 900px) { main { padding: 0 24px 40px; } }

section { padding: 32px 0; border-bottom: 1px solid var(--hairline); }
section:last-of-type { border-bottom: 0; }

@media (min-width: 900px) { section { padding: 48px 0; } }

.label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  margin: 0 0 8px;
}

h1 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; font-weight: 700; }
h1.figure { font-family: var(--serif); font-size: 48px; line-height: 1; margin: 0 0 8px; }

.pointer { margin: 24px 0 0; font-weight: 600; }

/* ---------- the errand: number, then hours ---------- */

.errand { text-align: center; padding-top: 32px; }

.phone-wrap { margin: 0 0 24px; }

.phone {
  display: block;
  padding: 14px 16px;
  min-height: 60px;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  background: var(--sign);
  text-decoration: none;
  border-radius: 4px;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}

.phone:hover, .phone:focus-visible { background: var(--accent); transform: translateY(-1px); }
.phone:active { transform: translateY(1px); transition-duration: 90ms; }

@media (min-width: 900px) {
  .phone { display: inline-block; min-width: 360px; padding: 14px 32px; }
}

.hours { text-align: center; }
.hours-line { font-size: 17px; margin: 0 0 4px; }
.checked { font-size: 16px; color: var(--ink-2); margin: 8px 0 0; }

/* ---------- the offer ---------- */

.offer {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  text-align: center;
}

/* A banner: the same brick band the shelf names sit on, so the shop says one
   thing in one voice wherever it raises its head. */
.banner {
  margin: 0 -16px 14px;
  padding: 14px 16px;
  background: var(--band);
  color: var(--on-band);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

@media (min-width: 900px) {
  .banner { margin: 0 -24px 18px; padding: 16px 24px; font-size: 32px; }
}

/* Helen's call, 31 Oct 2026: the offer speaks in blue rather than oxblood. */
.offer .banner { background: var(--offer-blue); }

.offer p:last-child {
  margin: 0;
  /* Helen's eye, 31 Oct: the sentence broke so that "day." sat alone on a
     second line. `balance` splits it into two even lines instead (measured:
     471 px and 496 px). Narrowing the measure made it worse — three lines,
     the last one 83 px — so the full width is what this needs. */
  text-wrap: balance;
}

/* ---------- come in ---------- */

.comein { padding: 0 0 32px; }

.comein picture { display: block; margin: 0 -16px 16px; }
.comein img { width: 100%; }

.comein-text { text-align: center; }
.address { font-size: 22px; line-height: 1.35; margin: 0 0 8px; }
.address.big { font-size: 32px; line-height: 1.25; }

@media (min-width: 900px) {
  .comein {
    display: grid;
    grid-template-columns: 620px 1fr;
    gap: 60px;
    align-items: center;
    padding: 48px 0;
  }
  .comein picture { margin: 0; }
  .comein-text { text-align: left; }
}

/* ---------- the doorway: step inside ---------- */

.doorway { padding: 40px 0 8px; border-bottom: 0; }

.doorway-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.doorway-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  margin: 0 -16px 16px;
}

.doorway-strip img {
  flex: 0 0 calc(100% / 5.2);
  width: calc(100% / 5.2);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  opacity: 0.94;
  transition: opacity 120ms ease-out;
}

.doorway-link:hover .doorway-strip img { opacity: 1; }

.doorway-text { display: block; }

.doorway-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.doorway-fold {
  display: block;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hairline);
}

.doorway-link:hover .doorway-fold { text-decoration-color: var(--sign); }

@media (min-width: 900px) {
  .doorway-strip { margin: 0 0 24px; }
  .doorway-strip img { flex-basis: 12.5%; width: 12.5%; }
}

/* ---------- what we have: the aisle, the figure, the wall ---------- */

.aisle {
  padding: 0;
  border-bottom: 0;
  margin: 0 -16px;
}

.aisle img { width: 100%; }

@media (min-width: 900px) {
  .aisle { margin: 0 -24px; }
  .aisle img { max-height: 34vh; object-fit: cover; }
}

.scale { border-bottom: 0; padding-bottom: 0; }
.scale .lede { font-size: 22px; line-height: 1.35; margin: 0 0 16px; }
.scale .example { font-size: 16px; color: var(--ink-2); max-width: 34em; margin: 0; }

.wallbox {
  padding: 24px 0 0;
  border-bottom: 0;
}

/* The counter at the door: the eight names, so 4,800 px of paper can be
   interrogated rather than scrolled. Borrowed from the way a big shop numbers
   its aisles on a board by the entrance. */
.wallnav { margin: 0 0 24px; }

.wallnav-lede {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.wallnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wallnav-list a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}

.wallnav-list a:hover,
.wallnav-list a:focus-visible {
  border-color: var(--brick);
  color: var(--brick);
}

.wall { display: block; }

/* one shelf = one run: a banner with its name, then its covers. The description
   that used to sit here now waits on the shelf page itself, where the visitor
   has already chosen. A white rule cuts one section from the next. */
.run { padding: 0 0 24px; }
.run + .run { border-top: 1px solid #fff; padding-top: 24px; }

.runhead {
  margin: 0 -16px 14px;
  padding: 12px 16px;
  background: var(--band);
  color: var(--on-band);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

.runhead a { color: var(--on-band); text-decoration: none; }
.runhead a:hover, .runhead a:focus-visible { text-decoration: underline; text-underline-offset: 0.16em; }

.runhead .arrow { margin-left: 10px; font-size: 0.8em; }

@media (min-width: 900px) {
  .runhead { margin: 0 -24px 18px; padding: 14px 24px; font-size: 32px; }
}

.runcovers {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* the covers run to the edge of the paper, not of the screen */
  margin: 0 -16px;
}

.runcovers .tile {
  display: block;
  width: 25%;
  line-height: 0;
  text-decoration: none;
}

.wall .tile {
  display: block;
  width: 25%;
  line-height: 0;
  text-decoration: none;
  position: relative;
}

.wall .tile img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: opacity 120ms ease-out;
}

.wall .tile:hover img, .wall .tile:focus-visible img { opacity: 0.82; }

@media (min-width: 900px) {
  /* the covers stay inside the paper column now — the gutter is the point of the
     page, and a full-bleed row was eating it. 12.5% of a narrower sheet is also
     the "slightly smaller" the tiles were asked for. */
  .runcovers { margin: 0 -24px; }
  .wall .tile { width: 12.5%; }
}

/* ---------- the named shelves ---------- */

.shelves { padding-top: 32px; }

.shelf-head {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.shelf-head-quiet { margin-top: 40px; }

.shelf-list { list-style: none; margin: 0; padding: 0; }

.shelfrow {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}

.shelf-list li:last-child .shelfrow { border-bottom: 0; }

.shelf-name {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  transition: text-decoration-color 120ms ease-out;
}

.shelf-depth {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 4px;
  max-width: 34em;
}

a.shelfrow:hover .shelf-name, a.shelfrow:focus-visible .shelf-name {
  text-decoration-color: var(--sign);
}

.shelfrow-quiet { color: var(--ink-2); }
.shelfrow-quiet .shelf-name { color: var(--ink-2); text-decoration: none; }

/* ---------- a shelf page ---------- */

.crumb { font-size: 16px; margin: 0 0 16px; }

.shelf-name-big {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 12px;
  text-decoration: none;
}

@media (min-width: 900px) { .shelf-name-big { font-size: 48px; } }

.shelf .example { font-size: 16px; color: var(--ink-2); max-width: 34em; margin: 16px 0 0; }

.stripwrap {
  padding: 0;
  border-bottom: 0;
  margin: 0 -16px;
}

.strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  padding-bottom: 8px;
}

.strip img {
  flex: 0 0 calc(100% / 4.5);
  width: calc(100% / 4.5);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  scroll-snap-align: start;
}

.strip-wide img { flex-basis: calc(100% / 3.5); width: calc(100% / 3.5); }

.strip:focus-visible { outline: 3px solid var(--sign); outline-offset: 3px; }

@media (min-width: 900px) {
  .stripwrap { margin: 0 -24px; }
  .strip img { flex-basis: calc(100% / 8.5); width: calc(100% / 8.5); }
  .strip-wide img { flex-basis: calc(100% / 6.5); width: calc(100% / 6.5); }
}

/* ---------- the next shelf ---------- */

.next { padding: 32px 0 8px; }

.next-link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
}

.next-cover img {
  width: 45vw;
  max-width: 180px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  flex: 0 0 auto;
}

.next-text { display: block; }

.next-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: 6px;
}

.next-name {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 120ms ease-out;
}

.next-link:hover .next-name { text-decoration-color: var(--sign); }

.next-depth {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 6px;
  max-width: 34em;
}

@media (max-width: 700px) {
  /* stacked: the bookmark on top, the words full width, so the sentence is not squeezed */
  .next-link { display: block; }
  .next-cover img { width: 110px; margin-bottom: 14px; }
}

@media (min-width: 900px) {
  .next-link { align-items: center; gap: 32px; }
  .next-cover img { width: 180px; }
}

/* ---------- visit ---------- */

.visitpage .hours { text-align: left; margin: 24px 0; }
.visitpage .phone-wrap { margin: 24px 0 0; }
.seasonal { max-width: 34em; margin: 16px 0 0; }

/* The week at a glance. Seven rows, one per day, so the eye can run down the
   Day column and stop at its own line — the way a person reads a maps listing. */
.hours-table {
  width: 22em;
  max-width: 100%;
  table-layout: fixed;
  margin: 24px 0 0;
  border-collapse: collapse;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.hours-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  padding: 0 0 8px;
}

.hours-table th,
.hours-table td { padding: 7px 0; text-align: left; font-weight: normal; }

.hours-table thead th {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
}

.hours-table tbody th { color: var(--ink-2); }
.hours-table tbody td { font-weight: 600; }
.hours-table tbody td.closed { color: var(--ink-2); font-weight: normal; font-style: italic; }
.hours-table tbody td + td { padding-left: 8px; }
.hours-table tbody tr + tr th,
.hours-table tbody tr + tr td { border-top: 1px solid var(--hairline); }

.visit-grid { display: block; }

.visit-map { margin: 32px 0 0; }

.visit-map img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

.visit-map figcaption {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}

.map-credit { display: block; margin-top: 4px; font-size: 13px; }

.email-line { margin: 12px 0 0; font-size: 17px; }
.nowrap { white-space: nowrap; }

@media (min-width: 900px) {
  .visit-grid {
    display: grid;
    grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  /* The map gets the full width of the sheet, not a column: at 430px the street
     names shrank to four pixels and the map became decoration rather than a way
     to find the door. Full width, it is a map you can actually read. */
  .visit-map { grid-column: 1 / -1; margin: 8px 0 0; }
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 16px 32px;
  font-size: 16px;
  color: var(--ink-2);
}

.foot-line { margin: 0 0 4px; }
.foot-quiet a { color: var(--ink-2); }

@media (min-width: 900px) { .foot { padding: 24px 24px 32px; } }

/* ---------- motion: only where it earns its place ---------- */

a { transition: color 120ms ease-out, opacity 120ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .phone:hover, .phone:focus-visible, .phone:active { transform: none; }
}

/* Motion is states only: hover, focus, the press on the phone button, and the scroll
   of a strip that only moves because a thumb moved it. A scroll-linked fade was built
   and removed on 30 Oct 2026 — it computed to opacity 0 outside a live scroll and hid
   the categories. Any motion that can hide content is a page that is broken. */

/* ---------- print ---------- */

@media print {
  .fascia { background: none; color: #000; border-bottom: 2px solid #000; }
  .nav, .offer, .doorway, .wall, .stripwrap { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; }
}

/* ---------- the shop sign: the errand, hung as a sign rather than a paragraph ----------
   Borrowed from the hanging plaques in the shop's own window: a bar, two short chains,
   a cream plaque with a double rule. The words inside are still the facts from shop.txt. */

.errand { padding-top: 40px; }

.shopsign {
  display: inline-block;
  width: 100%;
  max-width: 30em;
}

.shopsign-plaque {
  margin: 0;
  padding: 26px 20px 22px;
  background: var(--paper);
  border: 4px double var(--sign);
  box-shadow: 0 2px 0 rgba(20, 24, 28, 0.06);
}

.shopsign-plaque .label { color: var(--ink-2); }

@media (min-width: 900px) {
  .shopsign-plaque { padding: 30px 34px 26px; }
}

/* ---------- the shelf strips: arrows you can press, and a shelf you can drag ---------- */

.stripwrap { position: relative; }

.stripbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(20, 24, 28, 0.30);
  background: rgba(251, 249, 244, 0.97);
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 24, 28, 0.16);
}

.stripbtn:hover,
.stripbtn:focus-visible { border-color: var(--accent); color: var(--accent); }
.stripbtn[hidden] { display: none; }
.stripbtn-prev { left: 8px; }
.stripbtn-next { right: 8px; }

.strip { cursor: grab; }
.strip.dragging { cursor: grabbing; }

/* The scrollbar is only hidden once the script has run — without it the strip still
   shows that it scrolls, which is the affordance the arrows were added to replace. */
.strip-js .strip { scrollbar-width: none; -ms-overflow-style: none; }
.strip-js .strip::-webkit-scrollbar { display: none; }

/* The cover tiles are links, and the browser's pointer cursor is honest — but a
   link can also be *picked up* and dragged, which on a wall of covers looks like a
   shelf you can slide and does nothing. Only the shelf strips are draggable. */
.wall .tile,
.wall .tile img { -webkit-user-drag: none; user-drag: none; }
.wall .tile img { pointer-events: none; }

/* A cover is an image, and an image can be picked up and dragged by the browser —
   which cancels the pointer drag underneath it. The strip is draggable; the picture
   inside it is not a thing to be dragged anywhere. */
.strip,
.strip img { -webkit-user-drag: none; user-drag: none; }
.strip img { pointer-events: none; }

/* While a finger or mouse is dragging, snapping must not tug back at every frame —
   that is what makes the strip feel sticky. It returns the moment the drag ends. */
.strip.dragging { scroll-snap-type: none; }


/* ---------- the contact form ---------- */

.contact {
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline);
}

.contact .label { margin-bottom: 12px; }

.field { margin: 0 0 14px; }

.field label {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 4px;
}

.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 9px 10px;
}

.contact input:focus-visible,
.contact textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.contact textarea { resize: vertical; min-height: 120px; }

.send {
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  padding: 12px 26px;
  cursor: pointer;
}

.send:hover, .send:focus-visible { background: #0d55a4; }

.fineprint { font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }

/* the honeypot: invisible to people, and out of the tab order */
.honey { position: absolute; left: -9999px; }

/* the redirect lands on visit.html#thanks — no script, no extra page */
.thanks { display: none; }
.thanks:target {
  display: block;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: #f2ece0;
  border-left: 4px solid var(--accent);
  font-weight: 600;
}

/* ---------- the shop front, moving ---------- */

.comein-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 -16px 16px;
  background: #17130f;      /* the clip is a night shot: the frame is dark before the poster paints */
  aspect-ratio: 720 / 406;
}

@media (min-width: 900px) {
  .comein-video { margin: 0; max-width: 620px; }
}

/* ===================================================================================
   PASS 3 — the design tokens, converted page by page.  Home first, 2 Nov 2026.
   Everything below is scoped to .page-index so the other eleven pages keep the old
   styles until they are converted. When the last page is converted, the old rules
   above come out and the scoping goes with them.
   Tokens: one accent (the sign), a 1.30 type scale, an 8px spacing base, two radii.
   Brass is a second material colour with exactly one job on the site: this frame.
   =================================================================================== */

@font-face {
  font-family: "Inter var";
  src: url(fonts/inter.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Gelasio";
  src: url(fonts/gelasio-700.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

body.pass3 {
  --accent: #1269c7;
  --brass: #b08a3e;
  --ink: #14181c;
  --ink-2: #4d5560;
  --paper: #fbf9f4;
  --hairline: #ddd8cc;

  --sans: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Gelasio, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --s1: 13px;
  --s2: 17px;
  --s3: 22px;
  --s4: 29px;
  --s5: 37px;
  --s6: 48px;

  --sp1: 8px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 48px;
  --sp5: 96px;
  --sp6: 144px;

  --r: 0;
  --r-pill: 999px;
}

/* ---------- a clean slate for the converted page ----------
   The old pass painted these elements (the blue plaque box, the filled banner, the
   padded phone button) and a scoped rule only overrides the properties it names, so
   whatever it does not name survives. Neutralise first, then set only what pass 3 wants. */
body.pass3 .errand,
body.pass3 .shopsign,
body.pass3 .shopsign-plaque,
body.pass3 .phone-wrap,
body.pass3 .phone,
body.pass3 .hours,
body.pass3 .hours-line,
body.pass3 .comein-text,
body.pass3 .address,
body.pass3 .offer,
body.pass3 .banner,
body.pass3 .offer p,
body.pass3 .comein,
body.pass3 .comein-video,
body.pass3 .about,
body.pass3 .about p,
body.pass3 .doorway,
body.pass3 .doorway-link,
body.pass3 .doorway-text,
body.pass3 .doorway-label,
body.pass3 .doorway-fold,
body.pass3 .foot,
body.pass3 .foot-line {
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  min-width: 0;
  transform: none;
}

/* ---------- the sign ---------- */
body.pass3 .fascia {
  background: var(--accent);
  color: #fff;
  padding: 18px 16px 16px;
  text-align: center;
}
@media (min-width: 900px) { body.pass3 .fascia { padding: 32px 24px 28px; } }

body.pass3 .wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #fff;
}
@media (min-width: 900px) { body.pass3 .wordmark { font-size: var(--s6); } }

body.pass3 .windowline {
  font-size: var(--s1);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  opacity: 0.92;
}

/* ---------- the doors ---------- */
body.pass3 .nav {
  gap: var(--sp3);
  justify-content: center;          /* the items were hugging the left edge */
  background: var(--paper);
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 16px 0;
  font-size: var(--s2);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
body.pass3 .nav a { text-decoration: none; padding: 0 0 12px; }
body.pass3 .nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);   /* sits ON the divider instead of above it */
}

/* the paper column the page sits in */
body.pass3 main,
body.pass3 .foot {
  background: var(--paper);
  max-width: var(--max);
  margin: 0 auto;
}

/* ---------- the errand ---------- */
body.pass3 .errand { padding: 0 16px var(--sp4); }
@media (min-width: 900px) { body.pass3 .errand { padding: 0 40px var(--sp5); } }

body.pass3 .shopsign-plaque {
  border-top: 0;                 /* the nav's own divider is the line above the errand */
  padding-top: var(--sp3);
  text-align: center;
}
@media (min-width: 900px) { body.pass3 .shopsign-plaque { text-align: left; } }

body.pass3 .label {
  font-size: var(--s1);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp1);
}

/* inline-block so the wrap hugs the number: the brass rule is a percentage of the wrap,
   and when the wrap was the full column the rule centred on the column instead */
body.pass3 .phone-wrap { display: inline-block; margin: 0 0 var(--sp3); }

body.pass3 .phone {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  background: none;
  border-radius: var(--r);
}
@media (min-width: 900px) { body.pass3 .phone { font-size: var(--s5); } }

/* the old button's hover painted a blue fill and lifted it: this is a link, not a button */
body.pass3 .phone:hover,
body.pass3 .phone:focus-visible {
  background: none;
  color: var(--accent);
  transform: none;
}

/* the number's footing — scales with the number, never a fixed tick */
body.pass3 .phone-wrap::after {
  content: "";
  display: block;
  width: 62%;
  height: 3px;
  margin: 14px auto 0;
  background: var(--brass);
}

body.pass3 .hours { margin: 0; text-align: inherit; }
body.pass3 .hours-line { font-size: var(--s2); line-height: 1.55; margin: 0 0 4px; }

body.pass3 .comein-text { padding: var(--sp3) 0 0; }
body.pass3 .comein-text .address { font-size: var(--s3); }
body.pass3 .comein-text p:last-child { margin: 0; }

/* ---------- the offer: two rules of the same width ---------- */
body.pass3 .offer {
  padding: 0 16px var(--sp4);
  text-align: center;
}
@media (min-width: 900px) { body.pass3 .offer { padding: 0 40px var(--sp5); } }

body.pass3 .offer .banner {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s5);
  line-height: 1.2;
  margin: 0 auto;
  padding: var(--sp3) 0 0;
  max-width: 44rem;
  border-top: 2px solid var(--brass);
  color: var(--ink);
}

/* the offer earns a second colour's worth of attention: brass rules and a small label,
   and the headline kept to one line at every width */
body.pass3 .offer .banner::before {
  content: "Every day, in the shop";
  display: block;
  font-family: var(--sans);
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp2);
}

body.pass3 .offer p:last-child {
  margin: var(--sp2) auto 0;
  padding-bottom: var(--sp3);
  border-bottom: 2px solid var(--brass);
  max-width: 44rem;
  color: var(--ink);
}

/* ---------- the clip, framed ---------- */
body.pass3 .comein { display: block; padding: 0 0 var(--sp4); }
@media (min-width: 900px) { body.pass3 .comein { padding: 0 40px var(--sp5); } }

body.pass3 .comein-video {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  background: var(--ground);
  border: 0;
}
@media (min-width: 900px) { body.pass3 .comein-video { aspect-ratio: 16 / 9; } }

/* ---------- about ---------- */
body.pass3 .about { padding: 0 16px var(--sp4); max-width: 34em; }
@media (min-width: 900px) { body.pass3 .about { padding: 0 40px var(--sp5); } }
body.pass3 .about p { margin: 0; font-size: var(--s3); line-height: 1.45; }

/* ---------- the threshold ---------- */
body.pass3 .doorway { padding: 0 0 var(--sp4); }
@media (min-width: 900px) { body.pass3 .doorway { padding: 0 40px var(--sp5); } }

body.pass3 .doorway-link { text-decoration: none; display: block; color: var(--ink); }
body.pass3 .doorway-link:hover,
body.pass3 .doorway-link:focus-visible { color: var(--accent); text-decoration: none; }
body.pass3 .doorway-strip {
  display: flex;
  gap: 6px;
  overflow: hidden;
  height: 200px;
  align-items: center;
}
body.pass3 .doorway-strip img { height: 100%; width: auto; flex: 0 0 auto; }

body.pass3 .doorway-text { display: block; padding: var(--sp2) 16px 0; }
@media (min-width: 900px) { body.pass3 .doorway-text { padding: var(--sp2) 0 0; } }

body.pass3 .doorway-label {
  display: block;
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp1);
}

body.pass3 .doorway-fold {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s3);
  line-height: 1.35;
  max-width: 28em;
  padding-bottom: 2px;
  /* the 2px rule that used to sit here fought the link's own hover underline, and on a
     two-line line of type it read as a stray table border. The link's colour carries it. */
}

/* ---------- the quiet repeat ---------- */
body.pass3 .foot {
  border-top: 2px solid var(--accent);   /* the same rule the shelves use, on every page */
  padding: var(--sp3) 16px var(--sp4);
  font-size: var(--s1);
  line-height: 1.5;
  color: var(--ink-2);
}
@media (min-width: 900px) { body.pass3 .foot { padding: var(--sp3) 40px var(--sp4); } }

body.pass3 .foot-line { margin: 0; }
body.pass3 .foot-quiet { margin-top: 4px; }
body.pass3 .foot a { color: var(--ink-2); }
body.pass3 .foot a:hover { color: var(--accent); }

/* ---------- the framed shelf photograph, desktop only ---------- */
@media (min-width: 900px) {
  body.pass3 .errand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: var(--sp4);
    align-items: start;
  }
  body.pass3 .errand .shopsign-plaque { grid-column: 1; align-self: start; }

  /* the display case: the frame is fixed, only the photograph inside changes */
  body.pass3 .errand-photo { display: block; }
}

/* ---------- the display case — desktop only, and the frame never moves ---------- */
body.pass3 .errand-photo { display: none; }

@media (min-width: 900px) {
  body.pass3 .errand-photo {
    display: block;
    grid-column: 2;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;           /* landscape, like a phone's own camera — so the next
                                      photograph dropped in needs cropping only at the sides */
    align-self: center;            /* the width comes from the column, the height from the ratio */
    margin-right: 0;               /* flush with the paper column, no more overhang */
    margin-bottom: 0;
    border: 6px solid var(--brass);
    background: var(--ground);
    cursor: pointer;
  }
  body.pass3 .errand-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  body.pass3 .errand-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    opacity: 0;
    transition: opacity 900ms ease;
  }
  body.pass3 .errand-photo img.is-on { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.pass3 .errand-photo img { transition: none; }
}

/* ---------- the ground photograph behind the paper column, kept from the old rules ---------- */
@media (min-width: 900px) {
  body.pass3 {
    background: #17130f url(images/bg-home.webp) center center / cover no-repeat fixed;
  }
}

/* ===================================================================================
   PASS 3 — Browse.  The same tokens as Home: one accent field (the fascia), the 1.30
   scale, the 8px rhythm, two radii. The eight shelf names stop being blue slabs and
   become what they are — a list of subjects, set in the shop's serif.
   =================================================================================== */

/* the ground photograph behind the paper column, per page */
@media (min-width: 900px) {
  body.pass3 { background: #17130f center center / cover no-repeat fixed; }
  body.pass3.page-index { background-image: url(images/bg-home.webp); }
  body.pass3.page-browse { background-image: url(images/bg-shelves.webp); }
}

/* ---------- the aisle photograph ---------- */
body.pass3.page-browse .aisle { margin: 0; padding: 0; }
body.pass3.page-browse .aisle img { display: block; width: 100%; }
@media (min-width: 900px) {
  body.pass3.page-browse .aisle img { max-height: 38vh; object-fit: cover; }
}

/* ---------- the number, written once ---------- */
body.pass3.page-browse .scale { padding: var(--sp4) 16px; }
@media (min-width: 900px) { body.pass3.page-browse .scale { padding: var(--sp5) 40px; } }

body.pass3.page-browse .figure {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s5);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 var(--sp2);
  color: var(--ink);
}
@media (min-width: 900px) { body.pass3.page-browse .figure { font-size: var(--s6); } }

body.pass3.page-browse .lede {
  font-size: var(--s3);
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
}

/* ---------- the wall ---------- */
body.pass3.page-browse .wallbox { padding: 0 16px var(--sp4); text-align: left; }
@media (min-width: 900px) { body.pass3.page-browse .wallbox { padding: 0 40px var(--sp5); } }

body.pass3.page-browse .wall,
body.pass3.page-browse .run,
body.pass3.page-browse .runhead { text-align: left; }

body.pass3.page-browse .wallnav { margin: 0 0 var(--sp4); }

body.pass3.page-browse .wallnav-lede {
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp2);
}

body.pass3.page-browse .wallnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp1);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.pass3.page-browse .wallnav-list a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--s2);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none;
}
body.pass3.page-browse .wallnav-list a:hover,
body.pass3.page-browse .wallnav-list a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

body.pass3.page-browse .run { padding: 0 0 var(--sp3); }
/* shelf against shelf: a 2px accent rule, which is the one job besides text a
   hairlines-and-edges colour is allowed to do */
body.pass3.page-browse .run + .run {
  border-top: 2px solid var(--accent);
  padding-top: var(--sp4);
  margin-top: var(--sp4);
}

body.pass3.page-browse .runhead {
  margin: 0 0 var(--sp2);
  padding: 0;
  background: none;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s3);
  line-height: 1.15;
}
@media (min-width: 900px) { body.pass3.page-browse .runhead { font-size: var(--s4); } }

body.pass3.page-browse .runhead a { color: var(--ink); text-decoration: none; }
body.pass3.page-browse .runhead a:hover,
body.pass3.page-browse .runhead a:focus-visible { color: var(--accent); }
body.pass3.page-browse .runhead .arrow { color: var(--accent); margin-left: var(--sp1); font-size: 0.85em; }

body.pass3.page-browse .runcovers { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
body.pass3.page-browse .runcovers .tile { display: block; width: 25%; line-height: 0; }
@media (min-width: 900px) { body.pass3.page-browse .runcovers .tile { width: 12.5%; } }
body.pass3.page-browse .tile img { width: 100%; height: auto; display: block; }

/* ---------- the index of shelves ---------- */
body.pass3.page-browse .shelves { padding: 0 16px var(--sp4); }
@media (min-width: 900px) { body.pass3.page-browse .shelves { padding: var(--sp4) 40px var(--sp5); border-top: 1px solid var(--hairline); } }

body.pass3.page-browse .shelf-head {
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp2);
}
body.pass3.page-browse .shelf-head-quiet { margin-top: var(--sp4); }

body.pass3.page-browse .shelf-list { list-style: none; margin: 0; padding: 0; }
body.pass3.page-browse .shelfrow {
  display: block;
  padding: var(--sp3) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
body.pass3.page-browse .shelf-list li:last-child .shelfrow { border-bottom: 0; }
body.pass3.page-browse .shelfrow:hover .shelf-name { color: var(--accent); }

body.pass3.page-browse .shelf-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s3);
  line-height: 1.25;
  color: var(--ink);
}
@media (min-width: 900px) { body.pass3.page-browse .shelf-name { font-size: var(--s4); } }

body.pass3.page-browse .shelf-depth {
  display: block;
  font-size: var(--s2);
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 4px;
  max-width: 34em;
}

/* ===================================================================================
   PASS 3 — Visit.  The same tokens. The page has two filled fields of accent: the sign
   and the send button, which is the one action on the page that is not a link.
   =================================================================================== */

@media (min-width: 900px) {
  body.pass3.page-visit { background-image: url(images/bg-visit.webp); }
}

body.pass3.page-visit .visitpage { padding: var(--sp4) 16px; }
@media (min-width: 900px) { body.pass3.page-visit .visitpage { padding: var(--sp5) 40px; } }

body.pass3.page-visit h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s5);
  line-height: 1.1;
  margin: 0 0 var(--sp4);
  color: var(--ink);
  text-align: left;
}
@media (min-width: 900px) { body.pass3.page-visit h1 { font-size: var(--s6); } }

body.pass3.page-visit .visit-grid { display: block; text-align: left; }
@media (min-width: 900px) {
  body.pass3.page-visit .visit-grid {
    display: grid;
    grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
    column-gap: var(--sp5);
    align-items: start;
  }
}

body.pass3.page-visit .address,
body.pass3.page-visit .address.big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s3);
  line-height: 1.25;
  margin: 0 0 var(--sp3);
  text-align: left;
}
@media (min-width: 900px) {
  body.pass3.page-visit .address,
  body.pass3.page-visit .address.big { font-size: var(--s4); }
}

body.pass3.page-visit .hours-table {
  width: 100%;
  max-width: 22em;
  table-layout: fixed;
  margin: var(--sp3) 0 0;
  border-collapse: collapse;
  font-size: var(--s2);
  text-align: left;
}
body.pass3.page-visit .hours-table th,
body.pass3.page-visit .hours-table td { padding: var(--sp1) 0; text-align: left; font-weight: 400; }
body.pass3.page-visit .hours-table thead th {
  font-size: var(--s1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
}
body.pass3.page-visit .hours-table tbody th { color: var(--ink-2); }
body.pass3.page-visit .hours-table tbody td { font-weight: 500; }
body.pass3.page-visit .hours-table tbody td + td { padding-left: var(--sp1); }
body.pass3.page-visit .hours-table tbody tr + tr th,
body.pass3.page-visit .hours-table tbody tr + tr td { border-top: 1px solid var(--hairline); }

body.pass3.page-visit .seasonal {
  font-size: var(--s2);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30em;
  margin: var(--sp3) 0 0;
}
body.pass3.page-visit .seasonal a { color: var(--accent); }

body.pass3.page-visit .phone-wrap { margin: var(--sp3) 0 0; }
body.pass3.page-visit .email-line { margin: var(--sp2) 0 0; font-size: var(--s2); }
body.pass3.page-visit .email-line a { color: var(--accent); }

body.pass3.page-visit .visit-map { margin: var(--sp4) 0 0; }
@media (min-width: 900px) {
  /* the map belongs beside the address, not below it */
  body.pass3.page-visit .visit-map { grid-column: 2; grid-row: 1; margin: 0; align-self: start; }
  body.pass3.page-visit .visit-ask { grid-column: 1 / -1; margin-top: var(--sp5); }
}

/* the honeypot is not inside .field, so it needs the same shape as the rest */
body.pass3.page-visit input,
body.pass3.page-visit textarea { border-radius: var(--r); }
body.pass3.page-visit .visit-map img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }
body.pass3.page-visit .map-credit { display: block; margin-top: var(--sp1); font-size: var(--s1); color: var(--ink-2); }

/* ---------- the form ---------- */
body.pass3.page-visit .contact {
  margin: var(--sp5) 0 0;
  padding: var(--sp4) 0 0;
  border-top: 1px solid var(--hairline);
  max-width: 34em;
  text-align: left;
}

body.pass3.page-visit .contact .label {
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp3);
}

body.pass3.page-visit .field { margin: 0 0 var(--sp3); }
body.pass3.page-visit .field label {
  display: block;
  font-size: var(--s1);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--sp1);
}

body.pass3.page-visit .field input,
body.pass3.page-visit .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--s2);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 12px 14px;
}
body.pass3.page-visit .field textarea { min-height: 140px; resize: vertical; }
body.pass3.page-visit .field input:focus-visible,
body.pass3.page-visit .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* the one action that is not a link */
body.pass3.page-visit .send {
  font-family: var(--sans);
  font-size: var(--s2);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--r);
  padding: 12px 28px;
  cursor: pointer;
}
body.pass3.page-visit .send:hover,
body.pass3.page-visit .send:focus-visible { background: #0d55a4; }

body.pass3.page-visit .fineprint { font-size: var(--s1); color: var(--ink-2); margin: var(--sp2) 0 0; }
body.pass3.page-visit .thanks { font-size: var(--s2); color: var(--ink); margin: var(--sp2) 0 0; }

/* ===================================================================================
   PASS 3 — a shelf page.  All eight share this markup, so the rules hang off the
   classes rather than the page name. The shelf's name is the page's display; the
   covers are the contents; the next shelf is the door out.
   =================================================================================== */

/* the ground: shelves behind the paper column, by default now that most pages are converted */
@media (min-width: 900px) {
  body.pass3 { background: #17130f url(images/bg-shelves.webp) center center / cover no-repeat fixed; }
  body.pass3.page-index { background-image: url(images/bg-home.webp); }
  body.pass3.page-visit { background-image: url(images/bg-visit.webp); }
}

body.pass3 .shelf { padding: var(--sp4) 16px; }
@media (min-width: 900px) { body.pass3 .shelf { padding: var(--sp5) 40px; } }

body.pass3 .crumb { font-size: var(--s2); margin: 0 0 var(--sp3); }
body.pass3 .crumb a { color: var(--accent); text-decoration: none; }
body.pass3 .crumb a:hover, body.pass3 .crumb a:focus-visible { text-decoration: underline; text-underline-offset: 0.16em; }

body.pass3 .shelf-name-big,
body.pass3 h1.shelf-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s5);
  line-height: 1.1;
  margin: 0 0 var(--sp2);
  text-decoration: none;
  color: var(--ink);
  display: block;
}
@media (min-width: 900px) {
  body.pass3 .shelf-name-big,
  body.pass3 h1.shelf-name { font-size: var(--s6); }
}

body.pass3 .shelf .shelf-depth {
  font-size: var(--s3);
  line-height: 1.45;
  color: var(--ink);
  max-width: 34em;
  margin: 0 0 var(--sp4);
}

body.pass3 .stripwrap { margin: 0; padding: 0; }
body.pass3 .strip { padding-bottom: var(--sp2); }

/* the two round controls: the only other thing on the site allowed a pill */
body.pass3 .stripbtn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--s3);
}
body.pass3 .stripbtn:hover,
body.pass3 .stripbtn:focus-visible { border-color: var(--accent); color: var(--accent); }

/* the hand-off to the next shelf */
body.pass3 .next {
  margin: var(--sp4) 0 0;
  padding: var(--sp4) 0 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
}
@media (min-width: 900px) { body.pass3 .next { margin-top: var(--sp4); padding-top: var(--sp4); } }

/* the cover sits beside the words, as it did before — a hand-off, not a poster */
body.pass3 .next-link {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp3);
  align-items: start;
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 900px) {
  body.pass3 .next-link { grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp4); }
}
body.pass3 .next-link img { display: block; width: 100%; height: auto; }

body.pass3 .next-label {
  display: block;
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp1);
}

body.pass3 .next-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--s3);
  line-height: 1.2;
  margin: 0 0 var(--sp1);
}
@media (min-width: 900px) { body.pass3 .next-name { font-size: var(--s4); } }
body.pass3 .next-link:hover .next-name,
body.pass3 .next-link:focus-visible .next-name { color: var(--accent); }

body.pass3 .next-depth {
  display: block;
  font-size: var(--s2);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}
body.pass3 .next-text { display: block; }