/* 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.

   One hairline over the block closes it off from the title above, and the
   three rows are a single quiet register — no per-row rule, no arrows, no
   numbers. At 9px a rule reads louder than the word it separates, so the
   block gets one line and the rows get air. 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 0 var(--sp-6);
  font-size: var(--f-cap);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  border-top: var(--rule) solid var(--hair);
}

.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 cover line. The one piece of running prose in this column, so it takes
   the italic Jost the page ships and had never used — a cover's own voice,
   quieter than the title, different from the verse's roman. */
.cover-line {
  margin: 0;
  font-size: var(--f-meta);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 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 another rule drawn
   across the rail; the sheet keeps its single hairline at the top of the
   block. 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 {
  margin: 0;
  color: var(--ink-2);
  display: grid;
  row-gap: 0.85em;
}

.verse p { margin: 0; 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); }