/* ==========================================================================
   Design G, Other fiction: a 1960s drugstore wire rack of SF paperbacks.
   Pick a book up and turn it over to read the back; open one and it reads as
   a paperback's page. Loaded after the console shell (fonts, tokens, strip,
   base panel).
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* the rack's wire */
  --chrome-hi: #fbfcfa;
  --chrome: #c3c8c2;
  --chrome-lo: #4b514c;

  /* the enamel sign and the shelf cards */
  --enamel: #171717;
  --enamel-ink: #efeee7;
  --tab: #e2a72a;
  --card: #f5f5f0;
  --card-ink: #1b1b1b;
  --card-line: #c9cbc3;

  /* newsprint, for the backs of the books and their pages */
  --news: #e9ecea;
  --news-ink: #1c1c1b;
  --news-ink-2: #4a4a46;

  /* the covers */
  --c-vermilion: #e2583b;
  --c-mustard: #e2a72a;
  --c-ultramarine: #2b3f9a;
  --c-teal: #1c6d6c;
  --c-navy: #172447;
  --c-olive: #a39a33;
  --c-night: #121417;
  --c-magenta: #d94a8c;
  --c-black: #151515;
  --c-light: #f3f1ea;

  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --rk-pad: max(var(--g-gutter), calc((100% - 62rem) / 2));
  /* never wider than a phone column can hold, even with the text enlarged */
  --bw: min(clamp(9.5rem, 40vw - 1rem, 11.25rem), calc(100vw - 2 * var(--g-gutter) - 3.5rem));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--paint-deep) var(--paint-lo); }
body.rk {
  margin: 0;
  background: var(--paint-lo);
  color: var(--g-ink);
  font-family: var(--f-set);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.rk ::selection { background: var(--tab); color: var(--c-black); }
:where(.rk main) :where(p, h1, h2, ul, blockquote) { margin: 0; }
:where(.rk main) :where(ul) { padding: 0; list-style: none; }
:where(.rk main, .rk-top) :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rk :focus-visible { outline: 2px solid var(--g-ink); outline-offset: 3px; border-radius: 2px; }
.rk img, .rk svg { display: block; max-width: 100%; }
.rk .arw { display: inline-block; vertical-align: 0.05em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--g-ink);
  color: var(--paint-hi);
  font-weight: 600;
}
.skip:focus { top: 1rem; }

/* ---------- the sign on top of the rack ---------- */
/* the site's header: the author's nav, above the sign on the home page and above the page on a reading page */
.rk-top { padding: clamp(1.1rem, 3vw, 2.2rem) var(--rk-pad) 0; }
.rk-read .rk-top { padding-inline: max(var(--g-gutter), calc((100% - 62rem) / 2)); }
.rk-sign {
  display: grid;
  gap: 1rem;
  padding: 1rem var(--rk-pad) 0;
}
.rk-sign-plate {
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 4vw, 2.6rem);
  border-radius: 0.5rem;
  background: var(--enamel);
  color: var(--enamel-ink);
  box-shadow: inset 0 0 0 4px var(--enamel), inset 0 0 0 6px var(--tab), 0 12px 22px -14px rgba(0, 0, 0, 0.6);
}
.rk-sign-row { display: grid; gap: 1.2rem; }
@media (min-width: 64rem) {
  .rk-sign-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; }
  .rk-sign-row .rk-credo { margin-top: 0; }
}
.rk-title {
  min-width: 0;
  color: var(--tab);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem);
  line-height: 0.92;
  overflow-wrap: break-word;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.rk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.6rem;
  font-stretch: 80%;
  font-weight: 650;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rk-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.rk-nav a:hover { text-decoration: underline; }
/* where you are: the section a reading page belongs to wears the sign's tab colour; the home page's own name is underlined */
.rk-nav a[aria-current="true"] { padding: 0 0.65rem; border-radius: 0.2rem; background: var(--tab); color: var(--c-black); }
.rk-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.rk-nav-mark { font-stretch: 125%; font-weight: 800; letter-spacing: 0.06em; }
.rk-nav-out { margin-left: auto; }

/* ---------- the floor, the shelf cards ---------- */
.rk-floor { padding: 0 var(--rk-pad) clamp(3rem, 6vw, 5rem); }
.rk-talker {
  padding: 1rem 1.2rem;
  border-radius: 0.2rem;
  background: var(--card);
  color: var(--card-ink);
  box-shadow: 0 0 0 1px var(--card-line), 0 8px 16px -10px rgba(0, 0, 0, 0.45);
}
.rk-credo {
  max-width: 46ch;
  margin-top: 1.4rem;
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.5;
}

/* ---------- the rack: two chrome posts, a wire across each tier ---------- */
.rk-rack {
  position: relative;
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
.rk-rack::before, .rk-rack::after {
  content: "";
  position: absolute;
  top: -1.2rem;
  bottom: -0.6rem;
  width: 9px;
  border-radius: 4.5px;
  background: linear-gradient(90deg, var(--chrome-lo), var(--chrome-hi) 40%, var(--chrome) 70%, var(--chrome-lo));
  filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.35));
}
/* each post is a pair of rods, the inner one a step behind */
.rk-rack::before { left: 0; box-shadow: 13px 0 0 -2px var(--chrome-lo), 14px 0 0 -3px var(--chrome); }
.rk-rack::after { right: 0; box-shadow: -13px 0 0 -2px var(--chrome-lo), -14px 0 0 -3px var(--chrome); }

.rk-tier {
  position: relative;
  padding: 2.6rem 0 2.4rem;
}
/* the tier's top is two wires, a hand's width apart */
.rk-tier::before, .rk-tier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(180deg, var(--chrome-hi), var(--chrome) 50%, var(--chrome-lo));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.rk-tier::before { top: 0; }
.rk-tier::after { top: 0.7rem; height: 3px; }
.rk-tier + .rk-tier { margin-top: 1.4rem; }
.rk-card, .rk-set-card {
  display: inline-grid;
  gap: 0.1rem;
  padding: 0.35rem 0.7rem 0.3rem;
  border-radius: 0.15rem;
  background: var(--card);
  color: var(--card-ink);
  box-shadow: 0 0 0 1px var(--card-line), 0 3px 6px -3px rgba(0, 0, 0, 0.4);
  font-stretch: 80%;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}
.rk-card { position: absolute; top: -1.35rem; left: 1.2rem; max-width: calc(100% - 1.2rem); padding: 0.4rem 0.9rem 0.35rem; font-stretch: 115%; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.04em; }
.rk-tier { padding-top: 3.4rem; }
.rk-set-card { font-size: 1.25rem; }
.rk-set-name { font-stretch: 100%; font-weight: 800; letter-spacing: 0.03em; }
.rk-set-card { margin-bottom: 1.4rem; }
.rk-set-line { font-weight: 500; font-size: 0.8rem; letter-spacing: 0.01em; text-transform: none; font-stretch: 90%; }
.rk-sets { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2.8rem 2.6rem; }
.rk-set { min-width: 0; max-width: 100%; }
.rk-set-card, .rk-card, .rk-rain-title, .rk-lintel-name { overflow-wrap: anywhere; }
/* every set's links under its books take the same room, so the covers along a row hang from one rod */
.rk-set .pb-tag { min-height: 5.5rem; }
.rk-note { margin-top: 1.6rem; font-family: var(--f-serif); font-style: italic; font-size: 0.95rem; color: var(--g-ink); }
.rk-note i { font-style: normal; }

.rk-pocket { display: flex; flex-wrap: wrap; gap: 1.7rem 1.4rem; }

/* ---------- a paperback ---------- */
.pb {
  --pb-field: var(--c-mustard);
  --pb-ink: var(--c-black);
  --pb-accent: var(--pb-ink);
  position: relative;
  width: var(--bw);
  container-type: inline-size;
  perspective: 1100px;
}
.pb--vermilion { --pb-field: var(--c-vermilion); --pb-ink: var(--c-black); }
.pb--mustard { --pb-field: var(--c-mustard); --pb-ink: var(--c-black); --pb-a: var(--c-vermilion); --pb-c: var(--c-light); --pb-d: var(--c-black); }
.pb--ultramarine { --pb-field: var(--c-ultramarine); --pb-ink: var(--c-light); }
.pb--teal { --pb-field: var(--c-teal); --pb-ink: var(--c-light); --pb-a: var(--c-mustard); --pb-b: #6fb3a6; --pb-c: #0e3b3b; }
.pb--navy { --pb-field: var(--c-navy); --pb-ink: var(--c-light); --pb-a: #4f6fc2; --pb-b: #2c3f7e; --pb-c: #0d1530; --pb-d: var(--c-light); }
.pb--olive { --pb-field: var(--c-olive); --pb-ink: var(--c-black); --pb-a: #d9cf6a; --pb-b: #6b6420; --pb-c: #c4ba4c; --pb-d: var(--c-black); }
.pb--split { --pb-field: var(--c-vermilion); --pb-ink: var(--c-black); --pb-a: var(--c-mustard); --pb-b: var(--c-vermilion); --pb-d: var(--c-black); }
.pb--night { --pb-field: var(--c-night); --pb-ink: var(--c-light); --pb-a: #f1ead0; --pb-c: #1f2a33; }
.pb--steel { --pb-field: #4f6272; --pb-ink: var(--c-light); --pb-a: #cfe36a; --pb-b: var(--c-vermilion); --pb-c: #f1ead0; --pb-d: #1b242c; }
.pb--plum { --pb-field: #4b2946; --pb-ink: var(--c-light); --pb-a: #140b16; --pb-b: #8a5680; --pb-c: #f1ead0; }

/* the rack's front wire runs across the foot of every cover */
.pb::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -0.75rem;
  right: -0.75rem;
  top: calc(var(--bw) * 1.6235 - 0.95rem);
  transition: opacity 200ms linear;
  height: 0.6rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, var(--chrome-hi), var(--chrome) 45%, var(--chrome-lo));
  box-shadow: 0 0 0 1px rgba(40, 45, 41, 0.55), 0 3px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* the pocket's wire lip: a U of wire hanging under the front rod, holding the book's foot */
.pb::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  top: calc(var(--bw) * 1.6235 - 0.7rem);
  height: 1.3rem;
  border: 3px solid var(--chrome-hi);
  border-top: 0;
  border-radius: 0 0 0.6rem 0.6rem;
  filter: drop-shadow(0 1px 0 var(--chrome-lo)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
html:not(.rk-live) .pb::before { display: none; }
.pb-flip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.pb-front, .pb-back { min-width: 0; min-height: calc(var(--bw) * 1.6235); }


.pb-front {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 2px 5px 5px 2px;
  background: var(--pb-field);
  color: var(--pb-ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 18px -12px rgba(0, 0, 0, 0.6);
}
/* the spine's fold, and a little gloss on the laminate */
.pb-front::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}
.pb-front::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.pb-author {
  padding: 8cqi 9cqi 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: max(0.68rem, 6cqi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pb-art { grid-row: 3; position: relative; min-height: 0; margin: 6cqi 0 3cqi; overflow: hidden; }
.pb-art-svg { width: 100%; height: 100%; }
.pa-a { fill: var(--pb-a); }
.pa-b { fill: var(--pb-b); }
.pa-c { fill: var(--pb-c); }
.pa-d { fill: var(--pb-d); }
.pa-field { fill: var(--pb-field); }
.pa-dot { fill: var(--c-magenta); }
.rk-defs { position: absolute; width: 0; height: 0; }
/* the author's paintings run edge to edge, under bands of the cover's colour that carry the lettering */
.pb-art:has(img) { position: absolute; z-index: 0; inset: 0; margin: 0; }
.pb-art img { width: 100%; height: 100%; object-fit: cover; }
.pb-front:has(img) .pb-author, .pb-front:has(img) .pb-title, .pb-front:has(img) .pb-line { position: relative; z-index: 1; background: var(--pb-field); }
.pb-front:has(img) .pb-title { padding-bottom: 5cqi; }
.pb-front:has(img) .pb-line { padding-top: 3.5cqi; }
.pb-title {
  grid-row: 2;
  padding: 4cqi 9cqi 0;
  font-stretch: 125%;
  font-weight: 820;
  font-size: 11cqi;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pb-title--long { font-stretch: 72%; font-size: 10cqi; }
.pb-line {
  grid-row: 4;
  padding: 2cqi 9cqi 17cqi;
  white-space: nowrap;
  overflow: hidden;
  font-stretch: 90%;
  font-weight: 650;
  font-size: max(0.66rem, 5.5cqi);
  font-stretch: 75%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the back: newsprint under a band of the cover's colour */
.pb-back {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
  padding: 19cqi 9cqi 20cqi;
  border-radius: 5px 2px 2px 5px;
  background: var(--news);
  color: var(--news-ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 18px -12px rgba(0, 0, 0, 0.6);
}
/* the band of the cover's colour across the top of the back */
.pb-back::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10cqi;
  border-radius: 5px 2px 0 0;
  background: var(--pb-field);
}
.pb-back-kind, .pb-back-no, .pb-back-line, .pb-back-status, .pb-back-meta {
  font-stretch: 80%;
  font-weight: 650;
  font-size: max(0.78rem, 5.8cqi);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--news-ink-2);
}
.pb-back-title {
  font-stretch: 90%;
  font-weight: 800;
  font-size: max(0.9rem, 7.6cqi);
  overflow-wrap: normal;
  line-height: 1.05;
  text-transform: uppercase;
}
.pb-back-hook { font-family: var(--f-serif); font-size: max(0.8rem, 7.2cqi); line-height: 1.38; }
.pb-back-status { margin-top: auto; color: var(--news-ink); }
.pb-back-offer { font-family: var(--f-serif); font-style: italic; font-size: max(0.8rem, 6.6cqi); line-height: 1.35; }
.pb-back-status + .pb-back-offer { margin-top: 0.2rem; }
.pb-back-line + .pb-back-offer, .pb-back-no + .pb-back-offer { margin-top: auto; }
.pb-back-meta { margin-top: auto; }

.pb-turn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.55rem;
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--g-ink);
  font: 650 0.8rem/1 var(--f-set);
  font-stretch: 80%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.pb-turn:hover { text-decoration-thickness: 2px; }
.pb-turn[hidden] { display: none; }
.pb-turn[aria-pressed="true"] { color: var(--g-ink-2); }
.pb-tag { min-height: 1.5rem; font-size: 0.92rem; line-height: 1.35; }
/* inline, so a title that wraps keeps its arrow on the last word; the padding keeps the target 44px tall */
.pb-read { display: inline-block; padding-block: 0.7rem; line-height: 1.3; font-weight: 650; }
.pb-read .arw { display: inline-block; margin-left: 0.35rem; vertical-align: 0.1em; }
.pb-read:hover { text-decoration-thickness: 2px; }
.pb-tag--note { display: flex; align-items: center; min-height: 2.75rem; font-stretch: 80%; font-weight: 650; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-ink); }

/* with script the two faces share one place, and the book turns over */
html.rk-live .pb-front, html.rk-live .pb-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.rk-live .pb-back { transform: rotateY(180deg); }
/* the cover keeps its own height when a longer back shares its cell, so its foot stays at the wire */
html.rk-live .pb-front { align-self: start; height: calc(var(--bw) * 1.6235); }
/* an unturned book is only as tall as its cover, so the buttons along a row line up under the wire */
html.rk-live .pb:not(.is-turned) .pb-back { height: calc(var(--bw) * 1.6235); overflow: hidden; }
html.rk-live .pb-flip {
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 700ms var(--g-ease), translate 220ms var(--g-ease);
}
html.rk-live .pb.is-turned .pb-flip { transform: rotateY(180deg); }
/* a turned book is picked up off the rack: it comes forward over the wire, so the rod never crosses its back */
html.rk-live .pb.is-turned .pb-flip { z-index: 4; }
@media (hover: hover) {
  html.rk-live .pb:hover .pb-flip { translate: 0 -0.4rem; }
}
html.rk-live .pb:focus-within .pb-flip { translate: 0 -0.4rem; }
/* without script the back simply stands under the front */
html:not(.rk-live) .pb-flip { gap: 0.8rem; }
html:not(.rk-live) .pb::after { display: none; }
html:not(.rk-live) .pb-back { min-height: 0; }

/* ---------- The Thousand-Year Rain: the other world, on its own console screen ---------- */
.rk-rain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem clamp(1.6rem, 4vw, 3rem);
  margin: clamp(3rem, 7vw, 4.5rem) 0.5rem 0;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 0.8rem / 1.1rem;
  background: var(--glass);
  color: var(--phos);
  box-shadow: 0 0 0 0.5rem var(--bezel), 0 1px 0 0.5rem var(--hi), 0 18px 28px -18px rgba(0, 0, 0, 0.7);
}
@media (min-width: 52rem) {
  .rk-rain { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
}
.rk-rain-head { display: grid; gap: 0.55rem; justify-items: start; }
.rk-rain-title { font-stretch: 72%; font-weight: 760; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 0.95; text-transform: uppercase; }
.rk-rain-title a { text-decoration: none; }
.rk-rain-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.rk-rain-k { font-stretch: 80%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--phos-2); }
.rk-rain-deck { max-width: 34ch; margin-top: 0.3rem; font-family: var(--f-type); font-size: 0.98rem; line-height: 1.5; }
.rk-rain-go { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-stretch: 80%; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); text-decoration: none; }
.rk-rain-go:hover { text-decoration: underline; }
.rk-rain-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.6rem; }
.rk-rain-key {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 0.7rem 0.8rem 0.8rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--phos-3);
  text-decoration: none;
}
.rk-rain-when { font-stretch: 80%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--phos-2); }
.rk-rain-label { font-stretch: 110%; font-weight: 780; font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rk-rain-blurb { font-family: var(--f-type); font-size: 0.85rem; line-height: 1.35; color: var(--phos-2); }
.rk-rain-key:hover { box-shadow: inset 0 0 0 1px var(--amber); }
.rk-rain-key:hover .rk-rain-label { color: var(--amber); }
.rk-rain :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* on a phone the six keys sit two by two, era and name only */
@media (max-width: 36rem) {
  .rk-rain-keys { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
  .rk-rain-blurb { display: none; }
  .rk-rain-label { font-size: 0.92rem; font-stretch: 90%; letter-spacing: 0.02em; }
}

/* ---------- the lintel: a strip of the console's glass under the sign ---------- */
.rk-lintel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.1rem;
  margin: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0.4rem / 0.6rem;
  background: var(--glass);
  color: var(--phos);
  text-decoration: none;
  box-shadow: 0 0 0 0.35rem var(--bezel), 0 1px 0 0.35rem var(--hi);
}
.rk-lintel-name { font-stretch: 72%; font-weight: 760; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; }
.rk-lintel-deck { font-family: var(--f-type); font-size: 0.9rem; color: var(--phos-2); }
.rk-lintel-go { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-stretch: 80%; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.rk-lintel:hover .rk-lintel-go { text-decoration: underline; }
.rk-lintel:focus-visible { outline: 3px solid var(--c-black); outline-offset: calc(0.35rem + 3px); }

/* ---------- contact: an editor's one action, across the column ---------- */
.rk-contact { display: grid; align-content: start; gap: 0.6rem 2rem; margin-top: clamp(2.6rem, 6vw, 4rem); padding: clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem); font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.5; }
@media (min-width: 52rem) {
  .rk-contact { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .rk-contact .rk-talker-title { grid-column: 1 / -1; }
}
.rk-talker-title { font-family: var(--f-set); font-stretch: 125%; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rk-mail a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--f-set); font-stretch: 90%; font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); overflow-wrap: anywhere; }

@media (min-width: 64rem) {
  :root { --bw: 14.5rem; }
}
@media (max-width: 44rem) {
  .rk-nav-out { margin-left: 0; }
  .rk-pocket { gap: 1.6rem 1rem; }
  .pb::after { left: -0.55rem; right: -0.55rem; }
}

/* ---------- a paperback's page ---------- */
/* the footer's links run in one row, in the header's order */
.rk .base-nav ul { display: flex; flex-wrap: wrap; gap: 0.55rem 2rem; }
.rk-read main { padding: clamp(0.6rem, 2vw, 1.4rem) var(--g-gutter) clamp(3rem, 6vw, 5rem); }
.bk {
  container-type: inline-size;
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1.3rem, 5vw, 3.4rem) clamp(2.2rem, 5vw, 3.6rem);
  background: var(--news);
  color: var(--news-ink);
  font-family: var(--f-serif);
  box-shadow: inset 14px 0 18px -16px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2), 0 18px 30px -18px rgba(0, 0, 0, 0.55);
}
.bk-run {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--news-ink-2);
  font-family: var(--f-set);
  font-stretch: 90%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-ink-2);
}
.bk-head { display: grid; justify-items: center; gap: 0.55rem; padding: clamp(2.2rem, 6vw, 3.6rem) 0 clamp(1.6rem, 4vw, 2.4rem); text-align: center; }
.bk-kind, .bk-part, .bk-meta {
  font-family: var(--f-set);
  font-stretch: 80%;
  font-weight: 650;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--news-ink-2);
}
.bk-title {
  font-family: var(--f-set);
  font-stretch: 125%;
  font-weight: 820;
  font-size: min(clamp(1.9rem, 1.2rem + 3vw, 3.1rem), 8.4cqi);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.bk-by { font-style: italic; font-size: 1.15rem; }
@media (max-width: 30rem) {
  .bk-title { font-stretch: 85%; font-size: 9.4vw; }
}
.bk-dateline { margin-bottom: 1.6rem; font-style: italic; text-align: center; color: var(--news-ink-2); }
.bk-body {
  font-size: clamp(1.03rem, 0.99rem + 0.2vw, 1.13rem);
  line-height: 1.58;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}
@media (min-width: 40rem) {
  .bk-body { text-align: justify; }
}
.bk-body p + p { margin-top: 0.8em; }
.bk-body h2 {
  margin: 2.4rem 0 1.2rem;
  font-family: var(--f-set);
  font-stretch: 90%;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}
.bk-body hr {
  width: 3.2rem;
  margin: 2rem auto;
  border: 0;
  border-top: 1px solid var(--news-ink-2);
}
.bk-end { display: grid; justify-items: center; gap: 1rem; margin-top: 2.8rem; text-align: center; }
.bk-end-mark { width: 0.6rem; height: 0.6rem; background: var(--news-ink); transform: rotate(45deg); }
.bk-end-by { max-width: 30rem; font-size: 1rem; line-height: 1.5; color: var(--news-ink-2); }
.bk-end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; }
.bk-end-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--f-set);
  font-stretch: 80%;
  font-weight: 650;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  html.rk-live .pb-flip { transition: none; }
}

/* ---------- a book's own page: its cover beside its title, then the back-cover copy ---------- */
/* the cover stands over the title, as a title page's frontispiece; its lettering is the rack's, not the paper's */
.bk-head--book { gap: 1.2rem; }
.bk-cover { --bw: clamp(9.5rem, 36cqi, 12rem); font-family: var(--f-set); text-align: left; }
.bk-head-words { display: grid; justify-items: center; gap: 0.55rem; }
.bk-blurb { margin-top: 0.4rem; }