/* The sheet: one sheet of paper. Two equal columns, one gutter. Eyebrow
   and plate span the sheet; title/verse and the colophon sit on that same
   pair of rails. */

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

/* A poster is sized by the frame it is hung in. Everything on this sheet is
   in rem, so the root size is the one lever: on a window too short to hold
   the sheet whole, the whole thing comes down together instead of the
   colophon — date, barcode, weekday — running past the fold. 58.938rem is
   the sheet's own height plus its margins, measured, so 61 leaves it a
   little air; it never grows past 1rem, so a tall window shows the sheet at
   its design size and no larger.
   Below 640px the sheet is bounded by the viewport width rather than by the
   height, so the phone keeps its own fixed size. */
@media (min-width: 640px) {
  html { font-size: clamp(0.625rem, calc(100vh / 61), 1rem); }
  html { font-size: clamp(0.625rem, calc(100dvh / 61), 1rem); }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-10) var(--wp);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--geo);
  font-size: var(--f-prose);
  line-height: var(--lh-prose);
}

.sheet {
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
}

.stack,
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}

/* ── Eyebrow ──────────────────────────────────────────────────────────────
   A catalogue mark, small and tracked out. Trailing tracking is cancelled
   so the last glyph sits on the plate's right edge. It is caps, like every
   other label on the sheet: the apparatus is caps, the reading is lowercase. */

.eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  margin: 0 0 var(--sp-4);
  font-size: var(--f-cap);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow p { margin: 0; }

.eyebrow-place {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
}

.wx {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.eyebrow-place [hidden] { display: none; }

/* ── Plate ────────────────────────────────────────────────────────────────
   A portrait 4:5 frame. The photograph fills it and is cropped to that
   ratio; the source is 717×1280 (~9:16). */

.plate {
  position: relative;
  margin: 0 0 var(--sp-6);
  aspect-ratio: var(--plate-r);
  width: 100%;
  overflow: hidden;
  background: var(--paper);
}

.plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Stack: title left, verse right ──────────────────────────────────────
   Same two columns as the colophon. They share a top edge. The title is
   the largest type and it is set in --word. */

.word {
  margin: 0 0 var(--sp-6);
  font-size: var(--f-word);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--word);
  /* Two lines, and the break is written in the markup (`Elegy for<br />a Park`),
     not left to the engine. */
  text-wrap: nowrap;
}

/* The ways out. Three destinations under the title, set in the page's own
   small register — the tracked caps the eyebrow and the colophon already
   speak (`.eyebrow`, `.bar-word`). Same size, same grey, same tracking; the
   title is the one loud thing and these stay a contents line, not a menu.

   Air, not a hairline, sits between the title and this index. The three
   rows are a single quiet register — no per-row rule, no arrows, no
   numbers. The rows stay a real 44px hit area: the padding below carries
   the reach, not a visible border. */
.nar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* The index of doors. Caps at the masthead's tracking, like every label on
   the sheet — the words are lowercase and the wave has to clear their
   descenders, which is why this row is not set in lowercase. */
.ways {
  display: grid;
  width: 100%;
  margin: 0;
  font-size: var(--f-cap);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.ways a {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 1.875rem;
  padding: 0.5rem 0;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 120ms ease-out;
}

.ways a:hover,
.ways a:focus-visible {
  color: var(--word);
}

.ways a:focus-visible {
  outline: var(--rule) solid var(--ume);
  outline-offset: 3px;
}

/* The mark that says a word is a door. A hand-drawn wave under it — the
   word's own grey at rest, the title's green under the cursor. It hugs the
   word, so it reads as a mark on the text and not as a rule drawn
   across the rail. It is always there, so a phone with no cursor still
   gets the hint. */
.ways-k {
  position: relative;
  display: inline-block;
}

.ways-k::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.18em; /* the trailing letter-space is not part of the word */
  bottom: -0.6em;
  height: 5px;
  background-color: currentColor;
  opacity: 0.45;
  -webkit-mask-image: var(--wave);
  mask-image: var(--wave);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 36px 5px;
  mask-size: 36px 5px;
  transition: opacity 120ms ease-out;
}

.ways a:hover .ways-k::after,
.ways a:focus-visible .ways-k::after {
  opacity: 1;
}

.verse {
  /* The first line of the verse sits on the same optical top as the
     title's first line. The title is 32px at line-height 1; the verse is
     12px at 1.45 — their ink tops disagree by 6px at the design size,
     which is 0.375rem. */
  margin: -0.375rem 0 0;
  color: var(--ink-2);
  display: grid;
  row-gap: 0.85em;
}

.verse p { margin: 0; text-wrap: pretty; }

/* The cover line. A supplement after the verse, same left edge, italic
   Jost — quieter than the title, different from the verse's roman.
   Pause after the reading, larger than the gap between the two
   paragraphs. `.verse p` would zero this, so the rule has to win. The
   grid already puts 0.85em between items; this is the remainder to
   --sp-4. */
.verse .cover-line {
  margin-top: calc(var(--sp-4) - 0.85em);
  font-size: var(--f-meta);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.stack { margin: 0 0 var(--sp-8); }

/* ── Colophon ────────────────────────────────────────────────────────────
   Date, small, bottom left. Barcode and weekday stay on the right, the
   barcode its own width and right-aligned. No credit line. No hairline. */

.foot {
  grid-template-rows: auto auto;
  row-gap: var(--sp-2);
  align-items: end;
}

.foot-date { grid-column: 1; grid-row: 2; }
.foot-issue { grid-column: 1; grid-row: 1; }
.bar { grid-column: 2; grid-row: 1; justify-self: end; }
.bar-word { grid-column: 2; grid-row: 2; justify-self: end; }

/* The colophon's two lines. They are the sheet's apparatus, so they take the
   caps the labels take — but they are data and not labels, so their tracking
   stays tight. Labels are tracked out; information is not. */
.foot-date,
.foot-issue {
  margin: 0;
  font-size: var(--f-cap);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.foot-date b { font-weight: 600; color: var(--ink-2); }
.foot-year { color: var(--ink-3); }

.bar {
  display: block;
  width: var(--bar-w);
  height: 1.5rem;
}

/* The weekday takes the same tracking as every other label, and sits at the
   right rail under the barcode. It used to be stretched to the barcode's own
   measure, which forced six letters across eighty pixels. */
.bar-word {
  margin: 0;
  font-size: var(--f-cap);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 639px) {
  body { padding: var(--sp-6) var(--wp); }
}

:where(a, button):focus-visible {
  outline: var(--rule) solid var(--ume);
  outline-offset: 3px;
}

::selection { background: oklch(0.9 0.04 160); color: var(--ink); }