/* Pick a Card (D365-4434) -- the READING page only, /r/<slug>.
   A poster, not a console: read from the back of a room on a projector.
   Deliberately does NOT use site.css or the shared header -- this is stage
   furniture, not an el.ai product surface. See routes/reading.js.

   LAYOUT RULE, boss 2026-08-28: the page must not need scrolling. Cards sit in
   ONE ROW, each card's own prose directly beneath it, and the closing read
   beside the last card with its own treatment -- someone who reads only that
   panel should still come away with the answer. Everything below is sized to
   that: the card images are capped in vh (not px) so the whole spread scales
   to the screen it is shown on rather than to a guess about it. */
:root {
  --bg: #FFFFFF; --fg: #0B0B0D; --muted: #5A5A66;
  --action: #FF6B1A; --action-text: #AD4206; --rule: #E4E4E0;
  --panel: #FAF7F2;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B0B0D; --fg: #FFFFFF; --muted: #A0A0AC;
          --action-text: #FF6B1A; --rule: #26262C; --panel: #17181B; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 400 17px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* height, not min-height: this bounds the flex column, which is what lets the
   card images below absorb the leftover space instead of overflowing it. A
   fixed vh cap on the image cannot do that -- it guesses at how much room the
   prose will take, and it guessed wrong by 45-61px at 900px and 800px tall. */
/* The stage shell: readings pane on the left, the reading itself filling the
   rest. The pane costs no vertical space -- it is a column, and the
   one-screen rule is about height -- so both asks hold at once. */
.stage { display: grid; grid-template-columns: 240px minmax(0, 1fr);
  height: 100vh; }
/* The pane costs horizontal room the card columns need. Below 1600px it gets
   narrower rather than squeezing the spread into wrapping (and therefore
   scrolling) territory. */
@media (max-width: 1599px) { .stage { grid-template-columns: 194px minmax(0, 1fr); } }
.stage-side { border-right: 1px solid var(--rule); overflow-y: auto;
  padding: 1.3rem .8rem 1.5rem; }
.side-h { margin: 0 0 .7rem; padding: 0 .6rem; text-transform: uppercase;
  letter-spacing: .16em; font-size: .64rem; color: var(--muted); }
.idx-item { display: block; text-decoration: none; color: var(--fg);
  padding: .5rem .6rem; border-radius: 8px; margin-bottom: .1rem; }
.idx-item:hover { background: var(--panel); }
.idx-active { background: var(--panel); box-shadow: inset 3px 0 0 var(--action); }
.idx-name { display: block; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.idx-date { display: block; font-size: .66rem; color: var(--muted); margin-top: .1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.idx-cards { display: block; font-size: .7rem; color: var(--muted); margin-top: .15rem;
  line-height: 1.3; }
.idx-empty { font-size: .8rem; color: var(--muted); padding: 0 .6rem; margin: 0; }

.reading { max-width: 96rem; margin: 0 auto; padding: 1.3rem 2rem 1.1rem;
  height: 100%; min-height: 0; display: flex; flex-direction: column; }

/* ---- head band: name, date and focus on one line, not three ---------- */
.head { display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
  padding-bottom: .6rem; border-bottom: 1px solid var(--rule); margin-bottom: .9rem; }
.head .who { display: flex; align-items: baseline; gap: .8rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: var(--muted); }
h1 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.02; }
.head .meta { display: flex; align-items: baseline; gap: 1.2rem; margin-left: auto;
  flex-wrap: wrap; }
.drawn-date { margin: 0; color: var(--muted); font-size: .85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.focus { margin: 0; padding-left: .9rem; border-left: 3px solid var(--action);
  font-size: clamp(1rem, 1.5vw, 1.3rem); font-style: italic; }

/* ---- the spread: cards across, closing read beside the last one ------ */
.spread { display: flex; align-items: stretch; gap: 1.6rem; flex: 1; min-height: 0; }
.card-entry { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.position { margin: 0 0 .15em; text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--muted); }
/* Name and meta each get their OWN line, always. Sharing a line let a longer
   card name wrap on one column and not the others, which pushed that card's
   image down and broke the row -- measured at 1440x900 once the pane took
   240px off the width. Fixed lines make the figure start at the same y in
   every column regardless of name length. */
.card-line { margin: 0 0 .5rem; }
.card-name { display: block; font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 700; color: var(--action-text); line-height: 1.15; }
.card-meta { display: block; color: var(--muted); font-size: .72rem;
  margin-left: 0; }
.reversed { font-size: .72rem; border: 1px solid var(--action); border-radius: 999px;
  padding: .1em .6em; margin-left: .4rem; }
/* One shared height for every card image, in vh so it still scales to the
   screen. NOT flex:1 -- that was tried and looked wrong: a flexed figure
   absorbs its OWN column's leftover space, and since the three paragraphs are
   different lengths the three cards came out different sizes with their prose
   starting at three different heights. A spread has to read as one row. */
.card-entry figure { flex: 0 0 auto; height: clamp(150px, 26vh, 400px);
  margin: 0 0 .8rem; display: flex; align-items: flex-start; justify-content: center; }
.card-entry img { display: block; max-width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.16); }
.card-read p { margin: 0 0 .55em; font-size: clamp(.78rem, .95vw, .95rem);
  line-height: 1.42; color: var(--fg); }
.card-read p:last-child { margin-bottom: 0; }
.card-read em { font-style: italic; color: var(--action-text); font-weight: 600; }

/* ---- the closing read: the one panel that must stand on its own ------ */
/* Vertically centred, not top-aligned: the panel is as tall as the card
   column beside it but its text is a few lines, and left at the top it read as
   an unfinished box rather than the conclusion. Centring is also what makes it
   findable for someone who only wants this panel. */
.overall { flex: 1.35 1 0; min-width: 0; align-self: stretch;
  background: var(--panel); border-left: 4px solid var(--action);
  border-radius: 0 12px 12px 0; padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; justify-content: center; }
.overall-h { margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .16em;
  font-size: .7rem; color: var(--action-text); font-weight: 700; }
.overall-body p { margin: 0 0 .8em; font-size: clamp(1.02rem, 1.42vw, 1.4rem);
  line-height: 1.45; }
.overall-body p:last-child { margin-bottom: 0; }
.overall-body em { font-style: italic; }

/* ---- footer ---------------------------------------------------------- */
footer { margin-top: .8rem; padding-top: .55rem; border-top: 1px solid var(--rule);
  font-size: .72rem; color: var(--muted); display: flex; gap: 1.2rem;
  flex-wrap: wrap; align-items: baseline; }
footer p { margin: 0; }
.slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.disclaimer { margin-left: auto; }

/* A single-card reading is not a three-card spread with two gaps: it wants a
   narrower measure, and its closing read sits to the height of its own text
   rather than being stretched to the card beside it. */
.spread.cards-1 { max-width: 74rem; margin: 0 auto; width: 100%; }
.spread.cards-1 .card-entry { flex: 0 1 22rem; }
.spread.cards-1 .overall { align-self: center; flex: 1 1 0; }

@media (max-width: 900px) {
  /* Below this the row stops being readable, so it stacks and the page is
     allowed to scroll -- a phone is not the projector this layout is for. */
  .stage { grid-template-columns: minmax(0, 1fr); height: auto; }
  .stage-side { border-right: none; border-bottom: 1px solid var(--rule); }
  .reading { height: auto; padding: 1.2rem 1.1rem 1.5rem; }
  .spread { flex-direction: column; gap: 1.6rem; }
  .card-entry figure { flex: 0 0 auto; min-height: 0; }
  .card-entry img { height: auto; width: 100%; }
  .overall { border-radius: 0 12px 12px 0; }
  .head .meta { margin-left: 0; }
}