/* LOSTFALL home page: direction 06, "the facing plate", chosen by the book on
   30/09/2026, with the lettering of 02 and the numbered steps of 01.

   One source order for every width: title, picture, pitch and button, then the
   book, the city, how to read, the status. A screen reader meets the picture
   where the eye does, next to the title, not after the footer. */

/* ---- the opening ------------------------------------------------------- */
/* Stacked by default: phones, tablets, and any screen too short for a split.
   The picture is capped against the viewport height, not its width: the book
   asked for title, pitch and button in the first 390 x 844 screen, and a
   width-based square ate 390px of it. */
.opening {
  display: flex; flex-direction: column;
  /* 38rem of text plus the gutters, so its left edge meets the chapter's below */
  max-width: calc(38rem + 2 * var(--gutter)); margin: 0 auto; padding: .5rem var(--gutter) 0;
}
.opening h1 { margin: 0; font-weight: 400; }
.opening .worn { display: block; font-size: min(4.25rem, 17vw); line-height: .92; }
.opening .subtitle { display: block; margin-top: .35rem; font-size: 1.625rem; font-style: italic; line-height: 1.15; }
.descr { margin: .6rem 0 0; font-size: 1.125rem; line-height: 1.45; color: var(--cream-soft); }

.opening-plate { margin: 1rem 0; }
.opening-plate img { width: clamp(15rem, 36vh, 24rem); width: clamp(15rem, 36svh, 24rem); }

.lead { margin: 0; max-width: 36ch; font-size: 1.125rem; line-height: 1.5; }
.onward {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  min-height: 3.25rem; margin-top: 1.25rem; padding: 0 1.5rem;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: 1.0625rem;
}
.onward::after { content: "\2192" / ""; font-size: 1.375rem; }
.onward:hover { background: var(--accent-hover); }

@media (min-width: 40em) {
  .opening .worn { font-size: 5rem; }
  .opening .subtitle { font-size: 1.875rem; }
  .lead { font-size: 1.25rem; }
  .onward { display: inline-flex; align-self: flex-start; }
}

/* The split, only where it is comfortable: 960px wide AND 640px tall. A
   1280 x 600 laptop gets the stacked layout rather than a picture it cannot
   see whole. No sticky plate: it ends with this block, as the book asked. */
@media (min-width: 60em) and (min-height: 40em) {
  .opening {
    display: grid; max-width: none; padding: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "plate ." "plate head" "plate lead" "plate .";
    min-height: calc(100vh - 3.5rem); min-height: calc(100svh - 3.5rem);
  }
  .opening-head { grid-area: head; padding: 0 clamp(2.5rem, 6vw, 6rem); }
  .opening-lead { grid-area: lead; padding: 0 clamp(2.5rem, 6vw, 6rem) 1rem; }
  .opening-plate {
    grid-area: plate; display: grid; place-items: center;
    margin: 0; padding: 2.5rem; background: var(--panel);
  }
  /* square and whole: never wider than the panel, never taller than the screen */
  .opening-plate img { width: min(100%, calc(100vh - 8.5rem)); width: min(100%, calc(100svh - 8.5rem)); }
  .opening .worn { font-size: clamp(4.5rem, 7.2vw, 7rem); }
  .opening .subtitle { font-size: clamp(1.75rem, 2.4vw, 2.375rem); }
  .descr { margin-top: .9rem; }
  .lead { margin-top: 1.75rem; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.45; }
  .onward { margin-top: 2rem; }
}

/* ---- the rest reads like a chapter ------------------------------------ */
.chapter { max-width: 48rem; margin: 0 auto; padding: 0 var(--gutter); }
.chapter > section { max-width: 38rem; margin-inline: auto; }
.chapter h2 { margin: 0 0 1.25rem; font-size: clamp(1.625rem, 3vw, 2.125rem); font-weight: 500; line-height: 1.2; }

#book { padding-top: 5rem; }
.blurb { margin: 0; font-size: 1.1875rem; line-height: 1.7; color: var(--cream-soft); }
.tally { margin: 1.5rem 0 0; font-size: 1rem; color: var(--silver); }

.city-plate { margin: 4rem 0; }

.reading-order { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.reading-order li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px dotted var(--hairline-strong);
  font-size: 1.25rem; line-height: 1.4;
}
.reading-order li:first-child { border-top: 1px dotted var(--hairline-strong); }
.reading-order li::before { content: counter(step); color: var(--accent-line); font-size: 1.5rem; font-variant-numeric: oldstyle-nums; }
.no-dice { margin: 1.25rem 0 0; color: var(--silver); font-style: italic; }
.over-the-air { margin: 1rem 0 0; color: var(--cream-soft); }

/* flex, not a two-column grid: at 200 % text on a phone "preparation" alone is
   wider than what a grid leaves beside the slot, and the page scrolled sideways */
.status {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
  margin-top: 4.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline);
}
.status .cover-slot { flex: 0 0 5rem; }
/* The English cover, in the slot since 05/10. It keeps its own shape (992 x
   1586, a hair taller than the 2:3 placeholder): squeezing it into 2:3 means
   cropping the frame or the subtitle line. The French page still has the
   empty slot, so .cover-slot in house.css stays as it is. */
.status .the-cover { aspect-ratio: auto; margin: 0; background: none; }
.the-cover img { width: 100%; }
.status > div { flex: 1 1 14rem; }
.chapter .status h2 { margin: 0 0 .5rem; font-size: 1.75rem; font-style: italic; font-weight: 400; }
.status p { margin: 0 0 .35rem; font-size: 1.0625rem; color: var(--cream-soft); }
.status .age { margin-top: .75rem; color: var(--silver); }
/* The way to the shop, since the English edition is out. Same block as the
   opening button, but that one never wraps: this label does at 320 px and at
   200 % text, so it gets air above and below its two lines. */
.status .grab-a-copy { margin: .85rem 0 1.1rem; padding-block: .7rem; }

@media (max-width: 40em) {
  #book { padding-top: 3.5rem; }
  .blurb { font-size: 1.125rem; }
  .city-plate { margin: 3rem calc(-1 * var(--gutter)); }
  .reading-order li { font-size: 1.125rem; }
  .status { gap: 1.125rem; }
  .status .cover-slot { flex-basis: 4rem; }
}

/* Japanese and Hindi. Neither script has an italic: a browser shears one out
   of the upright face and it reads as a rendering fault, so these stay upright.
   36ch is thirty-six zeros wide, which is about eighteen kanji: the pitch gets
   a measure counted in its own characters. Devanagari hangs marks above and
   below the line, and a title leaded for Latin capitals clips them. */
:lang(ja) :is(.opening .subtitle, .chapter .status h2, .no-dice),
:lang(hi) :is(.opening .subtitle, .chapter .status h2, .no-dice) { font-style: normal; }
:lang(ja) .lead { max-width: 23em; }
:lang(ja) :is(.opening .subtitle, .chapter h2) { line-height: 1.35; }
:lang(hi) :is(.opening .subtitle, .chapter h2) { line-height: 1.45; }