/* =========================================================================
   ZWARTBAERD — § 2 · DE VOORREDE
   Vol. IV §6 · Vol. V §8.2 · Vol. VI Part One and Finding 3

   The paper. The asymmetric block. The confession.
   There is nothing to click in this section. Not one link. Deliberate:
   the visitor has been given something and asked for nothing.
   ========================================================================= */

.voorrede {
  --col-w: calc((100% - 11 * var(--gutter)) / 12);
  padding-block-end: var(--sp-9);            /* signature → section end 112 */
}

@media (min-width: 64rem) {
  .voorrede { padding-block-end: var(--sp-10); }
}


/* -------------------------------------------------------------------------
   1 · THE PAPER                                            Vol. IX §3.1–3.2

     content
     tide line     outer LEFT only, 3%, non-tiling
     foxing A      light, upper-left, text block kept clear
     laid paper    SVG line structure + fibre, 3.5%
     base          #E4D8BE

   Nothing above 6% passes beneath running text.
   ------------------------------------------------------------------------- */

/* The .paper stack lives in base.css beside .ground — both are ground
   layer stacks and belong together. See base.css §9.               */


/* -------------------------------------------------------------------------
   2 · THE DOUBLE RULE
   Full sheet width, cols 1–11. The section boundary, and the thing that
   peeks at the frontispiece's fold.
   ------------------------------------------------------------------------- */

.voorrede__rule {
  height: var(--rule-gap);
  border-block-start: var(--rule-heavy) solid var(--rule);
  border-block-end: 1px solid var(--rule);
}

@media (min-width: 64rem) {
  /* cols 1–11 — column 12 stays empty. */
  .voorrede__rule { width: calc(100% - (1 * var(--col-w)) - var(--gutter)); }
}


/* -------------------------------------------------------------------------
   3 · THE SPREAD
   Body cols 1–6. Marginalia cols 9–11. Column 12 empty and structural.
   The asymmetry looks wrong for half a second, then looks like a book.
   ------------------------------------------------------------------------- */

.voorrede__spread {
  margin-block-start: 4rem;                   /* 64 mobile */
}

@media (min-width: 64rem) {
  .voorrede__spread {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    margin-block-start: 6rem;                 /* 96 */
  }
  .voorrede__body   { grid-column: 1 / 7; }
  .voorrede__margin { grid-column: 9 / 12; }
}

.voorrede__body { max-width: var(--measure-longform); }


/* -------------------------------------------------------------------------
   4 · MARGINALIA
   Carries the section label only. The gathering mark lives in the fixed
   foliation on desktop and at the section foot on mobile — one device,
   not two.
   ------------------------------------------------------------------------- */

.voorrede__label {
  display: block;
  color: var(--label);
}

@media (min-width: 64rem) {
  .voorrede__label--inline { display: none; }
}

.voorrede__margin { display: none; }

@media (min-width: 64rem) {
  .voorrede__margin { display: block; }
}


/* -------------------------------------------------------------------------
   5 · THE EPIGRAPH                                        Vol. VI Finding 3
   The Dutch sentence, lifted out of the paragraph and set above the
   heading as a book sets an inscription in its original language. It is
   an inscription, not a sentence the reader must get past.
   ------------------------------------------------------------------------- */

.voorrede__epigraph {
  margin-block-start: 1.25rem;                /* 20 — after the mobile label */
  font-family: var(--face-display);
  font-style: italic;
  font-size: var(--t-subhead);
  line-height: 1.45;
  color: var(--text-quiet);
  max-width: 30ch;
}

@media (min-width: 64rem) {
  .voorrede__epigraph { margin-block-start: 0; }
}


/* -------------------------------------------------------------------------
   6 · HEADING
   ------------------------------------------------------------------------- */

.voorrede__heading {
  margin-block-start: 2rem;                   /* 32 */
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--text);
}


/* -------------------------------------------------------------------------
   7 · BODY
   The site's largest body setting — 21/34 at 58 characters. This is the
   most words anyone reads on the site and the section is state-invariant:
   light grounds take no wash.
   ------------------------------------------------------------------------- */

.voorrede__text {
  margin-block-start: 3.5rem;                 /* 56 desktop */
  font-size: var(--t-longform);
  line-height: var(--lh-longform);
  color: var(--text);
}

@media (max-width: 63.9375rem) {
  .voorrede__text { margin-block-start: 2.5rem; }   /* 40 */
}

.voorrede__text p + p { margin-block-start: 1.75rem; }  /* 28 */


/* -------------------------------------------------------------------------
   8 · THE DROP CAPITAL                                   Vol. VII Brief 6a
   An engraved T, three lines deep. It appears once on the entire website.
   Cap height aligns to line 1; baseline sits on line 3.

   Final optical alignment must be set against the real face — the value
   below is provisional.
   ------------------------------------------------------------------------- */

.dropcap {
  float: inline-start;
  height: 6.375rem;                           /* 102 = 3 × 34 */
  width: auto;
  margin-inline-end: 0.75rem;                 /* 12 */
  margin-block-start: 0.34em;                 /* provisional */
  color: var(--text);
  shape-margin: 0.5rem;
}

@media (max-width: 63.9375rem) {
  .dropcap { height: 5.25rem; }               /* 84 — tablet */
}

/* At 36 characters a three-line cap swallows the paragraph. */
@media (max-width: 29.9375rem) {
  .dropcap {
    height: 3.5rem;                           /* 56 — two lines */
    margin-inline-end: 0.625rem;
  }
}


/* -------------------------------------------------------------------------
   9 · SIGNATURE
   The one right-aligned element in the section, flush to the measure edge.
   ------------------------------------------------------------------------- */

.voorrede__signature {
  margin-block-start: 3rem;                   /* 48 */
  text-align: end;
  font-size: var(--t-body);
  font-style: italic;
  color: var(--text-quiet);
}

@media (max-width: 63.9375rem) {
  .voorrede__signature { margin-block-start: 2.5rem; }  /* 40 */
}