/*
 * The landing page.
 *
 * Recast on 28 August 2026 after
 * `workshop/design/design_handoff_startseite/README.md`. Until then the page
 * lay as a narrow sheet of 58 rem on the table (`--table`), with the head, the
 * six doors, the book block and the list of byways under one another. It now
 * fills the window with `--sheet`, holds its content at 1140 px, and carries
 * three things: the head, six doors in two ranks, and one line of a foot.
 *
 * The sizes are set in px and not in rem. The design gives them in px, half of
 * them with a decimal (17.5, 16.5, 13.5, 12.5), and a root of 19 px turned
 * every one of them into a division. The head line is the one exception and
 * runs on `clamp`.
 */

:root {
  --sheet-deep: #ede8db;

  /* Five greys, and they are five on purpose: the design separates the running
     paragraph from the quotation and the foot from the bar above it. Two of
     them shadow the tokens of `css/base.css` under the same name, as they did
     before; the other two carry the base values under a name of their own,
     because a shadowed token cannot be had back. */
  --ink-quiet: #574f46;   /* the two paragraphs of the head */
  --ink-far:   #8b8376;   /* the foot, the hint beside a lesser door */
  --ink-said:  #635c52;   /* Christ's sentence, the name of a lesser door */
  --ink-bar:   #8d8578;   /* the bar at the top */

  /* Charter instead of Baskerville, 15 August 2026, as in `reading.css`; the
     reasoning and the specimen stand there. The web font comes out of
     `css/fonts.css`. */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--work);
}

a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- das Blatt ------------------------------------------------ */

/* No table, no edge, no shadow: the ground of the window is the sheet, and the
   content stands in the middle of it. */
.sheet {
  box-sizing: border-box;
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px var(--page-edge) 70px;
}

/* ---------- der Kopf ------------------------------------------------- */

/*
 * What a visitor should have in five seconds: who and when, the claim, what
 * Christ did, why it is asked again, and his own sentence. On the right the
 * title graphic, which says „bees, engraved, old" before a word is read.
 *
 * Two columns as long as there is room; below that it stacks and the picture
 * goes behind the words, because on a phone the first sentence counts for more
 * than the picture.
 */
.opening {
  display: grid;
  /* The right column is exactly as wide as the picture, so that its right edge
     meets the right edge of the doors below it. It was `1fr` and therefore
     wider than the 290 px of the graphic, which then stood left in it with a gap
     to the right; everything the reader sees lines up on both sides now, and the
     headline gets the room that was lying idle — measured at 1440 px, the text
     column grew from 627 to 706. */
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(40px, 5vw, 80px);
  /* start, nicht center: der Kicker beginnt auf derselben Linie wie die
     Oberkante der Titelgrafik. Zentriert hing der Textblock 60 px unter ihr,
     und die erste Zeile der Seite begann tiefer als ihr Bild — Stefans
     Korrektur vom 21. August 2026. */
  align-items: start;
  margin: 0 0 40px;
}

/* One line, and the quietest thing over the headline. It stood in two steps of
   eighteen and twenty-six pixels in verdigris until 29 August 2026; the bar
   above the page carries the green weight now, and two green voices one over
   the other compete instead of building a ladder. */
.kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  font-family: var(--apparatus);
  font-size: 18px;
  letter-spacing: .22em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--ink-far);
}
/* The whole line in one wrapper, so that the flex row holds two items and not
   four: name, middot and book are three text pieces, and the gap of sixteen
   pixels would have stepped between them. `min-width: 0` lets the wrapper give
   way and the line wrap where the window is narrow, instead of pushing the
   gold rule out of the sheet. */
.kicker-text { min-width: 0; }

/* A short rule in the gold of the bar, level with the line beside it. It gives
   the quietest line of the page a place to start from; without it the kicker
   floated over the headline with nothing under its left edge. */
.kicker::before {
  content: "";
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--mh-gold);
}

/* Regular and not bold: at 88 px a bold Charter is a poster, and the sentence
   is meant to be read rather than shouted. */
.opening h1 {
  margin: 0 0 40px;
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(54px, 5.8vw, 75px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* Charter Italic runs narrower than the roman, and at this size the difference
   tells: a hundredth of an em back brings the two halves of the line to the
   same colour. The face comes out of `css/fonts.css`, which has loaded it for
   the reading edition since 15 August 2026. */
.opening h1 em {
  font-style: italic;
  letter-spacing: -.01em;
}

/* The two paragraphs of the head step forward, 3 September 2026: they are what
   a first-time reader takes away, and at 21 px in the quiet grey they read as
   a caption under the headline. Ink and two pixels more, and the measure comes
   in by fifty so that the longer line does not run wider than the eye carries. */
.lead {
  margin: 0 0 22px;
  max-width: 700px;
  font-size: 23px;
  line-height: 1.55;
  color: var(--ink);
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* The first words of each paragraph, spaced and in verdigris: „Pfarrer Christ"
   against „Heute,", the then and the now of the two sentences. Smaller than the
   text they open, because spaced capitals in the apparatus face already carry
   further than a running line of Charter. */
.lead-in {
  font-family: var(--apparatus);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--verdigris);
}

/* The scan hangs in a mount, since 3 September 2026, on Stefan's screenshot: a
   ground one step lighter than the page, eighteen pixels of it round the sheet,
   a hairline and a shadow of one pixel. The frame keeps the 290 px of the
   column, so the right edge still meets the right edge of the doors below; what
   gives way is the picture inside, which now runs at 254. */
.opening-plate {
  margin: 0;
  padding: 18px;
  background: color-mix(in srgb, #fff 70%, var(--sheet));
  border: 1px solid var(--rule-fine);
  box-shadow: 0 1px 3px rgb(64 55 40 / .07);
}
/* The title page as a picture and no longer as a second column: 290 px at most,
   since 29 August 2026. It took the full width of its column, and beside a
   headline of 88 px the two competed for the first glance. */
.opening-plate img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* ---------- die Türen ------------------------------------------------ */

/*
 * Six ways in, in two ranks.
 *
 * Six of equal size were a display and not a guide. The book, its reading and
 * the practice are what somebody comes for; the man, the pictures and the tale
 * are what he finds afterwards, and one line each is enough for them.
 *
 * No box and no shadow: one pixel of `--rule` all round and the same between
 * the cells. The upper edge was a hard `--ink` line until 28 August 2026, the
 * only one of its weight on the page; Stefan: „der schwarze border on top des
 * link section grid ist zu dominant." On hover the cell darkens by one step.
 */
/* Die Türen tragen das Grün der Leiste, aber verdünnt.
 *
 * Am 29. August 2026 standen sie einen Nachmittag lang ganz umgekehrt, in
 * `--mh-base` mit Papierschrift. Stefan: „scheint zu schwer. der intro text geht
 * nun etwas verloren." Zwei dunkle Bänder mit dem Kopf dazwischen, und der Kopf
 * verlor. Neun Prozent des Grüns im Papier geben dem Block eine eigene Fläche,
 * ohne ihm Gewicht zu geben; die Linien nehmen dreißig, damit das Gitter sichtbar
 * bleibt. Schrift und Namen stehen wieder dunkel auf hell.
 */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 76px;
  background: color-mix(in srgb, var(--mh-base) 30%, var(--sheet));
  border: 1px solid color-mix(in srgb, var(--mh-base) 30%, var(--sheet));
}

.door {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 30px 36px;
  background: color-mix(in srgb, var(--mh-base) 9%, var(--sheet));
  color: inherit;
  text-decoration: none;
  transition: background .18s;
}
/* Eine Stufe tiefer beim Überfahren, in derselben Mischung. */
.door:hover,
.door:focus-visible {
  background: color-mix(in srgb, var(--mh-base) 18%, var(--sheet));
  outline: none;
}
.door:focus-visible { box-shadow: inset 0 0 0 2px var(--verdigris); }

/* One name breaks onto two lines, the other does not, so without help the
   descriptions would begin at different heights (measured: 33.1 px of offset,
   exactly one line). subgrid aligns the rows across all three doors and holds
   that when every name breaks on narrow screens as well. Where it is missing,
   the flex stack from above remains: slightly offset, but legible. */
@supports (grid-template-rows: subgrid) {
  /* `grid-auto-rows` repeats the pattern for the second row of doors: without
     it the three implicit rows below are `auto`, and the descriptions of the
     lower three no longer stand on one line. */
  .doors {
    grid-template-rows: auto 1fr;
    grid-auto-rows: auto 1fr;
  }
  .door {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

/* Name and subtitle are one cell of the subgrid. The door has two rows, the
   head above and the sentence below, and giving the subtitle a row of its own
   would have pulled the sentences of all six doors down by the height of the
   longest subtitle. */
.door-head { align-self: start; }
.door-name {
  display: block;
  font-family: var(--display);
  font-size: 29px;
  line-height: 1.14;
  color: var(--verdigris);
  text-wrap: balance;
}
/* The same words the bar shows under each name in its menu, out of the same
   key, and set here as the apparatus sets a running head: small, spaced, one
   step quieter than the sentence below it. It stays grey under the mouse; only
   the name takes the gold.

   `--ink-far`, which the design gives, stands at 2,96 to 1 on the ground of the
   door — twelve and a half pixels need 4,5. `--ink-said` reaches 5,22 and keeps
   the step, because the sentence under it runs in `--ink-quiet` at 6,36. */
.door-sub {
  display: block;
  margin-top: 7px;
  font-family: var(--apparatus);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-said);
}
.door:hover .door-name,
.door:focus-visible .door-name { color: var(--gold); }
.door-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-quiet);
  text-wrap: pretty;
}
/* The markup carries the chevron for the narrow screen alone, where a door is a
   button; here the description under the name says which way it leads. */
.door-chevron { display: none; }

/* ---------- die Fußzeile --------------------------------------------- */

/* The landing page links to the legal notice. */
.sheet-foot {
  max-width: 760px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.sheet-foot p {
  margin: 0;
  font-family: var(--apparatus);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-far);
}

/* ---------- schmale Schirme ------------------------------------------ */

/* ---------- schmale Schirme ------------------------------------------ */

/*
 * The mobile landing page, after
 * workshop/design/design_handoff_startseite_mobile/README.md.
 *
 * It was the desktop page poured into one column: a wall of text, and the ways
 * in began at about 1500 px down. The head is smaller now and keeps the title
 * page beside it rather than under it, both paragraphs stand before the ways
 * in — the thought from then to now is what makes the choice — and the six
 * doors part again: the three of the work as buttons one can hit with a thumb,
 * the other three as a list of lines under a mark.
 */
@media (max-width: 46rem) {
  .sheet { padding: 28px var(--page-edge) 48px; }

  /* The title page stays in the first glance, in a column of 108 px beside the
     kicker and the headline; it slipped under the text with `order: 2` until
     30 August 2026. The two paragraphs run under both, over the whole width —
     eighteen pixels of type in a column of 222 would be six words to the line.
     `display: contents` on the block that holds them lifts kicker, headline and
     paragraphs into the grid, so that each can say for itself which columns it
     takes. */
  .opening {
    grid-template-columns: minmax(0, 1fr) 108px;
    column-gap: 20px;
    row-gap: 0;
    margin-bottom: 0;
  }
  .opening > div { display: contents; }
  .kicker,
  .opening h1 { grid-column: 1; }
  /* The mount comes down to seven pixels here: eighteen of a column of 108
     would leave the scan 72 px wide, and the title page would be a stamp. */
  .opening-plate {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    padding: 7px;
    box-shadow: none;
  }
  .lead { grid-column: 1 / -1; }

  .kicker {
    gap: 11px;
    margin-bottom: 16px;
    font-size: 11px;
    letter-spacing: .16em;
    line-height: 1.7;
  }
  .kicker::before { width: 24px; }

  .opening h1 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -.015em;
  }

  .lead {
    margin-bottom: 22px;
    font-size: 19px;
    line-height: 1.55;
  }
  .lead + .lead { margin-bottom: 24px; }
  .lead-in {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .17em;
  }

  /* The grid of six becomes a column of six buttons, all of one weight.
     Three of them stood as buttons and three as a list of lines under a mark of
     their own until 3 September 2026; Stefan: „die hierarchierung des menus
     macht nicht wirklich sinn. wir sollten alle 6 doors gleichberechtigt
     darstellen, in einer und derselben gliederung." The line under the name
     came back the same day, when the names were shortened to one word: „Buch"
     and „Stabilbau" tell a first-time reader nothing on their own, and the line
     is four words where it used to be a sentence of four lines. */
  .doors {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
    background: none;
    border: 0;
  }
  /* Name and subtitle on the left, the chevron on the right. The `@supports`
     block above makes every door a grid of two rows out of a subgrid, so the
     placement is written out here rather than left to a `flex-direction` that a
     grid does not read. */
  .door {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 0 14px;
    min-height: 52px;
    padding: 11px 18px;
    border: 1px solid color-mix(in srgb, var(--mh-base) 30%, var(--sheet));
  }
  .door-head {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .door-name { font-size: 22px; }
  /* The subtitle carries the button here, so it is set as a line of prose and
     not as a spaced running head: the name alone („Buch", „Stabilbau") tells a
     first-time reader nothing. Gerechnet auf dem Grund der Schaltfläche: 4,96
     zu 1, über den 4,5, die vierzehn Pixel brauchen; `--ink-far` gäbe dort nur
     2,99. */
  .door-sub {
    margin-top: 2px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    color: color-mix(in srgb, var(--ink-quiet) 90%, var(--sheet));
  }
  /* The sentence stands on the desk alone: a button of two lines has no room
     for four lines of prose. */
  .door-text { display: none; }
  .door-chevron {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: .5em;
    height: .5em;
    border-right: 1.5px solid var(--verdigris);
    border-top: 1.5px solid var(--verdigris);
    transform: rotate(45deg);
  }

  .sheet-foot { padding-top: 18px; }
  .sheet-foot p { font-size: 13px; }
}