/* 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-blue: #1038e8;
  --sign-blue-deep: #0d2ba8;
  --ink: #14181c;
  --ink-2: #4d5560;
  --paper: #fbf9f4;
  --brick: #a64f3f;
  --hairline: #ddd8cc;
  --max: 1080px;
  --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;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

p { margin: 0 0 1rem; }

a { color: var(--sign-blue-deep); text-underline-offset: 0.16em; }

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

:focus-visible {
  outline: 3px solid var(--sign-blue);
  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-blue);
  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);
  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: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease-out;
}

.nav a:hover { color: var(--sign-blue-deep); }

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

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

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

@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.08em;
  text-transform: uppercase;
  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-blue);
  text-decoration: none;
  border-radius: 4px;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}

.phone:hover, .phone:focus-visible { background: var(--sign-blue-deep); 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: 2px solid var(--brick);
  border-radius: 2px;
  padding: 20px;
  margin: 32px 0;
  text-align: center;
}

.offer-line {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 8px;
}

.offer p:last-child { margin: 0; }

/* ---------- 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.08em;
  text-transform: uppercase;
  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-blue); }

@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-inline: calc(50% - 50vw);
    max-width: 100vw;
  }
  .aisle img { max-height: 56vh; 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;
}

.wall { display: block; }

/* one shelf = one run: its name, what is inside it, then its covers */
.run { padding: 26px 0 0; }

.runhead {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

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

.runhead .arrow { margin-left: 6px; }

.rundepth {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}

.runcovers {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* the covers run edge to edge; the shelf name above them stays in the text column */
  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) {
  .runcovers { margin-inline: calc(50% - 50vw); }
  .wall { max-width: 1440px; margin: 0 auto; }
  .wall .tile { width: 12.5%; }
}

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

.shelves { padding-top: 32px; }

.shelf-head {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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-blue);
}

.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-blue); outline-offset: 3px; }

@media (min-width: 900px) {
  .stripwrap { margin-inline: calc(50% - 50vw); }
  .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.08em;
  text-transform: uppercase;
  color: var(--sign-blue-deep);
  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-blue); }

.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; }

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

.foot {
  border-top: 1px solid var(--hairline);
  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; }
}