/* ============================================================================
   THE KITCHEN  ·  /kuhinja/  ·  V7 "SREBRO"
   Composed from scratch 2026-07-31. The sheet that stood here was the rejected
   build's layout with its colours remapped: a centred hero, a floating rail
   with dead voids between stations, gradient bands, arch-topped photographs and
   a ruled kicker under every headline. All of it is gone.

   The page is silver on ink, ranged left, and built out of two structures only:
   the shared chapter opener (a margin column with a vertical hairline, and a
   body column carrying the display headline) and ruled rows.

   TWO MOMENTS OWN THIS PAGE
     1. THE CHAIN. The chapter's own margin rule becomes a rail that is drawn
        silver station by station as you descend, and each roman numeral sits ON
        that rail and ignites as the drawn head reaches it. The rule is the
        RIGHT BORDER of the numeral cell, so it is continuous by construction:
        no absolutely positioned line to keep in register, and no masking
        rectangle in a colour that has to match the band underneath. That
        mismatched rectangle is what put a grey box behind every numeral before.
     2. THE TWELVE MONTHS. A ruled serif index the visitor turns, with the month
        on the stage beside it and the standing photograph in a third column, so
        turning the year never opens onto an empty half page.

   THINGS THIS SHEET MUST NOT REACQUIRE
     - centred anything (page.css states the site's one alignment)
     - -webkit-text-stroke: page.css nulls it site wide, so an outlined numeral
       renders as an INVISIBLE numeral. Unlit is a dim fill, never an outline.
     - background-image on a band: page.css strips it, and it was a rejection.
     - the class name "card" on a section: page.css turns every direct child of
       a .card into a ruled row with `padding: Xpx 0`, which zeroes the inline
       gutter and tore that whole section off the left edge of the page.
   ========================================================================== */

/* ----------------------------------------------------------- 00 the opening */

.opening {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  background: var(--pitch);
  overflow: hidden;
  isolation: isolate;
}
.op-bed { position: absolute; inset: 0; z-index: 0; }
.op-bed picture { display: block; height: 100%; }
.op-bed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a wide landscape in a tall viewport otherwise crops to the hillside and
     loses the boats the sentence stands on */
  object-position: 50% 62%;
  filter: saturate(.82) contrast(1.05) brightness(.88);
}
.op-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, .80) 0%, rgba(8, 9, 11, .58) 7%, rgba(8, 9, 11, .36) 16%,
      rgba(8, 9, 11, .20) 26%, rgba(8, 9, 11, .12) 35%, rgba(8, 9, 11, .18) 46%,
      rgba(8, 9, 11, .32) 57%, rgba(8, 9, 11, .50) 68%, rgba(8, 9, 11, .68) 79%,
      rgba(8, 9, 11, .86) 90%, rgba(8, 9, 11, .98) 100%),
    linear-gradient(96deg,
      rgba(8, 9, 11, .74) 0%, rgba(8, 9, 11, .54) 14%, rgba(8, 9, 11, .36) 27%,
      rgba(8, 9, 11, .20) 40%, rgba(8, 9, 11, .08) 53%, rgba(8, 9, 11, 0) 66%);
}

.op-in {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: clamp(16px, 2.4vh, 30px);
  padding-top: calc(var(--hd-h) + clamp(40px, 9vh, 110px));
  padding-bottom: clamp(30px, 6vh, 76px);
  min-height: calc(100svh - var(--hd-h) - 170px);
}
.op-eye {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--lume-3);
}
/* The sentence IS the page. Melodrama 300, ranged left, two lines at 1440.
   Tracking stays near zero on purpose: Melodrama is a wide, high-contrast
   display face and negative tracking closes its counters up, which is exactly
   the note base.css carries against the face this replaced. */
.kt-h1 {
  font-size: clamp(2.4rem, 7vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.012em;
  max-width: 15ch;
}
.op-in .lede { color: var(--lume-2); max-width: 52ch; }

/* THE RULED DATA ROW, after designxhand: one hairline with cells hung under it,
   divided by vertical hairlines and each opened by a ring. This is where the
   three fixed facts live. They were a centred middot list before. */
.op-row {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hair);
}
.op-row-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
}
.op-c {
  display: flex;
  align-items: center;
  gap: .75em;
  min-width: 0;
  padding: clamp(18px, 2.8vh, 30px) clamp(14px, 1.9vw, 34px) clamp(22px, 3.6vh, 40px);
  border-left: 1px solid var(--hair-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--lume-2);
}
.op-c > span { min-width: 0; }
.op-c:first-child { padding-left: 0; border-left: 0; }
.op-c--go { padding-right: 0; justify-self: end; }

.op-down {
  position: absolute;
  z-index: 3;
  right: var(--gut);
  bottom: clamp(104px, 17vh, 158px);
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.op-down i {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--hair);
  position: relative;
  overflow: hidden;
}
.op-down i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: var(--ag);
  animation: kt-travel 3.4s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes kt-travel {
  0%   { transform: translateX(-100%); }
  70%, 100% { transform: translateX(300%); }
}

/* the plate hangs at the right edge of its band, in a void */
.plate-hold { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.plate-hold .plate { grid-column: 2; }

/* The two chapters that stand in air open on the full sec--air void and close
   on a smaller one. A 207px foot followed by the next section's 117px head put
   324px of nothing between a closing line and the heading under it, which is a
   void bounded on both sides by content: a bug, not a margin. */
#ponta, #veceras { padding-bottom: clamp(92px, 12vh, 156px); }

/* ------------------------------------------------------------- 01 the pier */

.creed {
  border-top: 1px solid var(--hair);
  margin-top: clamp(38px, 5.6vh, 78px);
}
.creed li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 30px);
  align-items: baseline;
  padding: clamp(15px, 2.2vh, 27px) 0;
  border-bottom: 1px solid var(--hair);
}
.creed-n {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--lume-3);
  font-variant-numeric: tabular-nums;
}
/* Melodrama ships no italic, so every italic on this page resolves to the
   Cormorant cut fonts.css attaches under the same family name. Cormorant sets
   noticeably smaller on the same body, so each italic here is given the size
   back, exactly as base.css does for an <em> clause inside a headline. */
.creed-t {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.36rem, 2.5vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: .002em;
  color: var(--lume-2);
  transition: color .4s ease;
}
.creed li:last-child .creed-n { color: var(--ag); }
.creed li:last-child .creed-t { color: var(--lume); }

/* ================================================ 02 THE CHAIN, the signature */

.chain-body { margin-top: clamp(40px, 6vh, 88px); }

.stn {
  display: grid;
  grid-template-columns: minmax(112px, 200px) minmax(0, 1fr) minmax(0, 31%);
  gap: clamp(22px, 3.6vw, 66px);
  align-items: start;
}
.stn + .stn { border-top: 1px solid var(--hair-2); }

/* THE RAIL. It is this cell's right border, so six cells stacked with no gap
   between them make one unbroken line without a single measured coordinate.
   ::after is the drawn silver, ::before the head travelling down it. */
.stn-no {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  border-right: 1px solid var(--hair);
}
.stn-no::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: calc(var(--fill, 1) * 100%);
  background: var(--ag);
  opacity: .62;
}
.stn-no::before {
  content: '';
  position: absolute;
  right: -2.5px;
  top: calc(var(--fill, 1) * 100%);
  width: 5px;
  height: 5px;
  background: var(--ag);
  opacity: var(--tip, 0);
  box-shadow: 0 0 12px 2px rgba(169, 175, 178, .5);
}
/* the numeral sits ON the rail and breaks it. Never an outline: page.css nulls
   -webkit-text-stroke site wide, so a stroked numeral is an invisible one. */
.stn-no i {
  position: absolute;
  top: clamp(22px, 2.8vw, 40px);
  right: 0;
  transform: translateX(50%);
  padding: 9px 0;
  background: var(--slate);
  font: italic 300 clamp(20px, 2.5vw, 35px)/1 var(--serif);
  letter-spacing: .02em;
  color: var(--ag);
  transition: color .9s var(--ease);
}
.stn-no.dim i { color: rgba(243, 241, 236, .17); }

.stn-t { grid-column: 2; padding-block: clamp(24px, 2.8vw, 42px); }
.stn-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  line-height: 1.04;
  letter-spacing: .002em;
  color: var(--lume);
  margin: 0;
}
.stn-when { margin-top: .8em; color: var(--ag); }
.stn-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.98rem, .92rem + .28vw, 1.09rem);
  line-height: 1.62;
  color: var(--lume-2);
  max-width: 54ch;
  margin-top: 1.05em;
}
/* the row height is set by whichever is taller, so the two ratios are picked to
   land near the height of the copy beside them: a 4/5 portrait here opened a
   250px hole in the middle of every second row */
.stn-f { grid-column: 3; margin-block: clamp(24px, 2.8vw, 42px); }
.stn-f img, .stn-f video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.stn:nth-of-type(even) .stn-f img,
.stn:nth-of-type(even) .stn-f video { aspect-ratio: 3 / 2; }

/* --------------------------------------------- 03 the same evening, said once */

.ev-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: clamp(30px, 5vw, 92px);
  align-items: end;
  margin-top: clamp(34px, 5vh, 70px);
}
.ev-q {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.9vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--lume);
  max-width: 21ch;
}
.ev-s { border-top: 1px solid var(--hair); padding-top: clamp(16px, 2.2vh, 26px); }
.ev-s .prose { font-size: 1rem; color: var(--lume-3); }

/* ============================================ 04 the twelve months, the dial */

.mo {
  display: grid;
  grid-template-columns: minmax(168px, 228px) minmax(0, 1fr) minmax(0, 26%);
  gap: clamp(26px, 3.4vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 84px);
}

.mo-tabs { border-top: 1px solid var(--hair); }
.mo-tabs li { border-bottom: 1px solid var(--hair-2); }
.mo-tabs a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: .8em;
  position: relative;
  padding: clamp(9px, 1.3vh, 14px) 0;
  transition: padding-left .5s var(--ease);
}
.mo-tabs b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .66rem;
  color: var(--lume-3);
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}
.mo-tabs span {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.4vw, 1.26rem);
  line-height: 1.2;
  color: var(--lume-3);
  transition: color .35s ease;
}
.mo-tabs a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--ag);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
}
.mo-tabs a:hover { padding-left: 8px; }
.mo-tabs a:hover span { color: var(--lume-2); }
.mo-tabs a[aria-selected="true"] span { color: var(--lume); font-style: italic; }
.mo-tabs a[aria-selected="true"] b { color: var(--ag); }
.mo-tabs a[aria-selected="true"]::after { transform: scaleX(1); }

.mo-hint {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--lume-3);
  margin-top: 1.2em;
  max-width: 26ch;
}
.mo-hint[hidden] { display: none; }

/* the stage opens on a hairline that carries the counter and the two arms, so
   the controls belong to something instead of floating in the margin */
.mo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--hair);
  padding-top: 10px;
}
.mo-head[hidden] { display: none; }
/* NOT the shared .mono label register: that register is now the display serif,
   and Melodrama's lining zero is SLASHED, so "01 / 12" set in it reads as
   "O with a stroke, 1". Counters on this page use the text face's figures, the
   same ones the station and refusal numbers use. */
.mo-count {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .11em;
  color: var(--lume-3);
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: none;
}
.mo-count b { font-weight: 400; color: var(--ag); }
.mo-arms { display: flex; gap: 4px; }
.mo-arm {
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--lume-3);
  transition: color .35s ease;
}
.mo-arm svg { width: 14px; height: 14px; }
.mo-arm:hover { color: var(--ag); }

.mopane { padding-top: clamp(20px, 3vh, 34px); }
.mopane + .mopane { margin-top: clamp(26px, 3.4vh, 40px); border-top: 1px solid var(--hair-2); }
.mopane h3 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--lume);
}
.mo-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.36rem, 2.1vw, 1.8rem);
  line-height: 1.34;
  color: var(--ag);
  max-width: 30ch;
  margin-top: .6em;
}
.mo-p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.98rem, .93rem + .26vw, 1.09rem);
  line-height: 1.62;
  color: var(--lume-2);
  max-width: 52ch;
  margin-top: 1.2em;
}
.mo-sp-h { margin-top: clamp(24px, 3.4vh, 40px); }
.mo-sp { border-top: 1px solid var(--hair); margin-top: .8em; }
.mo-sp li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.4em;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-2);
}
.mo-sp i {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.14rem, 1.55vw, 1.4rem);
  color: var(--lume);
}
.mo-sp span {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .82rem;
  color: var(--lume-3);
  text-align: right;
}

.mo-side { display: grid; gap: clamp(20px, 3vh, 32px); align-content: start; }
.mo-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mo-note { border-top: 1px solid var(--hair); padding-top: clamp(14px, 2vh, 22px); }

/* one month at a time, arriving out of the same silver */
.mo.is-live .mopane { display: none; margin-top: 0; border-top: 0; }
.mo.is-live .mopane.is-on { display: block; animation: kt-turn .8s var(--ease); }
@keyframes kt-turn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------- 05 the gardens and the growers */

.gd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: clamp(30px, 4.6vw, 84px);
  align-items: start;
  margin-top: clamp(38px, 5.6vh, 76px);
}
.qlist { border-top: 1px solid var(--hair); }
.qlist > div {
  display: grid;
  grid-template-columns: minmax(96px, 26%) minmax(0, 1fr);
  gap: .2em clamp(18px, 2.6vw, 42px);
  align-items: baseline;
  padding: clamp(13px, 1.9vh, 22px) 0;
  border-bottom: 1px solid var(--hair-2);
}
.qlist dt {
  font-family: var(--serif);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  padding-top: .2em;
}
.qlist dd {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.98rem, .93rem + .26vw, 1.09rem);
  line-height: 1.5;
  color: var(--lume-2);
}
.gd-f img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* -------------------------------------------------------------------- 06 wine */

.wn-f { margin-top: clamp(38px, 5.6vh, 80px); max-width: 820px; }
.wn-f img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------ 07 the coast, from Belgrade */

.bg-km {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.36rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--lume);
  max-width: 34ch;
}
.rooms {
  border-top: 1px solid var(--hair);
  margin-top: clamp(38px, 5.6vh, 76px);
}
.rooms li {
  display: grid;
  grid-template-columns: minmax(120px, 20%) minmax(0, 1fr);
  gap: .35em clamp(20px, 3.4vw, 56px);
  padding: clamp(20px, 2.8vh, 34px) 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left .45s var(--ease);
}
.rooms li:hover { padding-left: 10px; }
.rm-w {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  padding-top: .5em;
}
.rm-n {
  grid-column: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -.006em;
  color: var(--lume);
  transition: color .35s ease;
}
.rooms li:hover .rm-n { font-style: italic; }
.rm-t {
  grid-column: 2;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--lume-3);
  max-width: 58ch;
  margin-top: .3em;
}

/* ------------------------------------------- 08 how the card gets written */

.halves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.4vw, 84px);
  align-items: start;
  margin-top: clamp(38px, 5.6vh, 76px);
}
/* the half the sea writes sits lower than the half that never moves, so the
   pair is never a symmetric grid */
.half--sea { margin-top: clamp(20px, 3.4vw, 58px); }
.half-h { padding-bottom: .9em; border-bottom: 1px solid var(--hair); }
.half li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.98rem, .93rem + .26vw, 1.09rem);
  line-height: 1.5;
  color: var(--lume-2);
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-2);
}
.half--sea li {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.18rem, 1.65vw, 1.5rem);
  color: var(--lume);
}

/* the pair of frames under the two halves is the same two columns, so each
   frame sits exactly under the list it belongs to. It used to be a full-shell
   grid of its own, which put the left frame 252px left of the copy above it
   and the right one 42px off its column: a near miss reads as a mistake. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.4vw, 84px);
  align-items: start;
  margin-top: clamp(44px, 6.4vh, 92px);
}
.duo figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.duo-v { margin-top: clamp(22px, 4.4vw, 76px); }
.duo-v video { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.crd-note { margin-top: clamp(34px, 4.8vh, 62px); }

/* -------------------------------------------------------- 09 the refusals */

.refuse {
  border-top: 1px solid var(--hair);
  margin-top: clamp(38px, 5.6vh, 76px);
}
.refuse li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 42%);
  gap: .5em clamp(20px, 3.4vw, 56px);
  align-items: baseline;
  padding: clamp(19px, 2.6vh, 32px) 0;
  border-bottom: 1px solid var(--hair-2);
}
.rf-n {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--lume-3);
  font-variant-numeric: tabular-nums;
}
.rf-h {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.26rem, 2.15vw, 1.9rem);
  line-height: 1.16;
  letter-spacing: -.006em;
  color: var(--lume);
}
.rf-w {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.58;
  color: var(--lume-3);
}
/* the closing line of this chapter is the last row of the same table, so it
   takes the refusals' own three tracks: the statement sits under the refusal
   headlines and its gloss under their notes. On its own grid it started 198px
   right of every headline above it, which read as a slipped row. */
.nolink {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 42%);
  gap: 12px clamp(20px, 3.4vw, 56px);
  align-items: baseline;
  margin-top: clamp(34px, 4.8vh, 60px);
}
.nolink .mono { line-height: 1.6; grid-column: 3; grid-row: 1; }
.nolink a { justify-self: start; grid-column: 2; grid-row: 1; }

/* ---------------------------------------------------------------- onward */

.out {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: clamp(30px, 4.6vw, 88px);
  align-items: center;
}
.out-t > * + * { margin-top: clamp(16px, 2.2vh, 28px); }
.out-c {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.36rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--ag);
  max-width: 26ch;
}
.out-go { margin-top: clamp(24px, 3.4vh, 40px); }
.out-f img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------------------- responsive
   Not a set of patches: below 1024 nothing on this site is pinned, three
   column bands become two, and below 860 the chapter opener itself collapses
   (base.css), so every band here collapses with it. */

@media (max-width: 1200px) {
  .stn { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(0, 32%); }
  .refuse li { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 40%); }
}

@media (max-width: 1023px) {
  /* the year keeps its index, but the standing photograph moves under the
     stage instead of squeezing a third column into a phone-width page */
  .mo { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); }
  .mo-side {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 40px);
    align-items: end;
    margin-top: clamp(28px, 4vh, 44px);
  }
  .mo-fig img { aspect-ratio: 3 / 2; }
  .ev-g { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); }
  .ev-q { max-width: 26ch; }
  .ev-s { max-width: 56ch; }
  .out { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); }
}

@media (max-width: 900px) {
  .op-row-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-c { border-left: 0; padding-inline: 0; padding-block: 14px; }
  .op-c:nth-child(2) { border-left: 1px solid var(--hair-2); padding-left: clamp(14px, 3vw, 26px); }
  .op-c--go { grid-column: 1 / -1; justify-self: start; padding-top: 18px; }
  .kt-h1 { max-width: 17ch; }

  .gd, .out { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .gd-f, .out-f { max-width: 440px; }
  .gd-f img, .out-f img { aspect-ratio: 4 / 3; }
  .duo { grid-template-columns: 1fr; }
  .duo-v { margin-top: 0; max-width: 440px; }
  .rooms li { grid-template-columns: 1fr; }
  .rm-w { grid-row: 1; }
  .rm-n, .rm-t { grid-column: 1; }
  .refuse li { grid-template-columns: 46px minmax(0, 1fr); }
  .rf-w { grid-column: 2; }
  /* the third track is gone here, so the explicit column placements above have
     to be released or the gloss lands in an implicit fourth column and pushes
     the document wider than the viewport */
  .nolink { grid-template-columns: 1fr; }
  .nolink a, .nolink .mono { grid-column: 1; grid-row: auto; }
  .nolink a { order: 1; }
  .nolink .mono { order: 2; }
}

@media (max-width: 860px) {
  /* the chapter opener has collapsed to one column, so the rail moves to the
     left edge of the reading column and the photograph drops under the copy */
  .stn, .stn:nth-of-type(even) { grid-template-columns: 46px minmax(0, 1fr); }
  /* the photograph drops to a second row inside the same station, so the
     numeral cell has to span both or the rail breaks between every station.
     `1 / -1` does NOT do this: -1 counts lines of the EXPLICIT grid, and these
     rows are implicit, so it silently collapses back to a single row. */
  .stn-no { grid-row: 1 / span 2; }
  .stn-t { grid-column: 2; padding-block: clamp(22px, 4vh, 34px) 0; }
  .stn-f {
    grid-column: 2;
    margin-block: clamp(20px, 3.4vh, 30px) clamp(24px, 4vh, 36px);
    max-width: 460px;
  }
  .stn-f img, .stn-f video,
  .stn:nth-of-type(even) .stn-f img,
  .stn:nth-of-type(even) .stn-f video { aspect-ratio: 4 / 3; }
  .stn-no i { top: clamp(20px, 4vh, 30px); font-size: 18px; padding: 7px 0; }
  .halves { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px); }
  .half--sea { margin-top: 0; }
  .mo { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 36px); }
  .mo-tabs { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 4vw, 40px); }
  .mo-tabs li:nth-child(2) { border-top: 0; }
  .mo-side { grid-column: 1; }
}

@media (max-width: 700px) {
  /* on a phone the opening's ruled row stands where the cue used to hang, and
     the two collided: the cue printed straight through the second cell */
  .op-down { display: none; }
}

@media (max-width: 620px) {
  .op-row-in { grid-template-columns: 1fr; }
  .op-c, .op-c:nth-child(2) {
    border-left: 0;
    border-top: 1px solid var(--hair-2);
    padding: 12px 0;
  }
  .op-c:first-child { border-top: 0; }
  .kt-h1 { font-size: clamp(2.15rem, 9.4vw, 3rem); max-width: 14ch; }
  .op-in { min-height: calc(100svh - var(--hd-h) - 210px); }
  .plate-hold { grid-template-columns: 1fr; }
  .plate-hold .plate { grid-column: 1; }
  .creed li { grid-template-columns: 38px minmax(0, 1fr); }
  .mo-side { grid-template-columns: 1fr; }
  .mo-sp li { grid-template-columns: 1fr; gap: .2em; }
  .mo-sp span { text-align: left; }
  .qlist > div { grid-template-columns: 1fr; gap: .35em; }
}

/* The index stays two columns down to the narrowest phone on purpose: twelve
   full-height rows push January itself a thousand pixels below the heading, and
   the visitor never sees that the year is operable at all. */

/* ------------------------------------------------------------ reduced motion
   Lands composed, never disabled: the rail is fully drawn, every numeral lit,
   and the year still turns because that is interaction and not motion. */
@media (prefers-reduced-motion: reduce) {
  .op-down i::after { animation: none; }
  .stn-no { --fill: 1; --tip: 0; }
  .stn-no.dim i { color: var(--ag); }
  .mo.is-live .mopane.is-on { animation: none; }
}