/* =========================================================================
   ZWARTBAERD — SECTIONS § 3 – § 11
   Each block is one section. Vol. IV §7–§15, Vol. V §8.3–§8.11.
   ========================================================================= */


/* =========================================================================
   § 3 · DE KUST                                              Vol. IV §7
   A full-bleed band. The only element on the site that ignores the sheet
   entirely — which is why it feels like nothing else on the page.
   ========================================================================= */

.kust {
  position: relative;
  padding-block: var(--sp-6) var(--sp-5);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .kust { padding-block: var(--sp-7) var(--sp-6); }
}

.kust__profile {
  display: block;
  width: 100%;
  height: 7.5rem;                                /* 120 mobile */
  color: var(--text);
}

@media (min-width: 64rem) {
  .kust__profile { height: 11.25rem; }           /* 180 */
}

/* Surprise #1 — the coastline draws itself left to right, 900ms, once,
   never on re-entry. The only animation on the site permitted to exceed
   500ms, because it depicts an act of drawing.               Vol. IV §7.1 */
[data-anim="ready"] .kust__profile .draw-order path {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
}
[data-anim="ready"] .kust[data-drawn] .kust__profile .draw-order path {
  transition: stroke-dashoffset var(--draw-coast) cubic-bezier(.4,0,.2,1);
  stroke-dashoffset: 0;
}
[data-anim="ready"] .kust__profile .colour-wash { opacity: 0; }
[data-anim="ready"] .kust[data-drawn] .kust__profile .colour-wash {
  transition: opacity 200ms linear var(--draw-coast);
  opacity: 0.85;
}

.kust__instruments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sp-4);
}

.kust__scale {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-quiet);
}
.kust__scale-bar {
  width: 7.5rem;                                 /* 120 */
  height: 0.5rem;
  border: 1px solid currentColor;
  border-block-start: 0;
}

/* Caption flush to the sheet, not to the viewport edge: the type sits on
   the grid even though the drawing does not. That tension is the point. */
.kust__caption { margin-block-start: var(--sp-4); }

.kust__caption dt { color: var(--text-quiet); }
.kust__caption dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--text-quiet);
}

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

.kust__note {
  display: none;
  font-size: var(--t-marginal);
  font-style: italic;
  color: var(--text-quiet);
}
@media (min-width: 64rem) { .kust__note { display: block; text-align: end; } }


/* =========================================================================
   § 4 · DE WERKPLAATS                                        Vol. IV §8
   The one section where the asymmetry flips: images left, text right.
   A plate bound facing its description.
   ========================================================================= */

/* Mobile interleaves the images with the prose — an image every ~400px is
   what keeps a two-thousand-pixel section readable. This is a different
   layout, not a collapsed one.                              Vol. IV §8.2
   The two wrappers go display:contents so their children become direct
   flex items and can be ordered against each other. */
.werkplaats__spread { display: flex; flex-direction: column; }
.werkplaats__plates,
.werkplaats__text { display: contents; }

.werkplaats__rhumb  { order: 0; }
.werkplaats__head   { order: 1; }
.werkplaats__img-1  { order: 2; margin-block-start: var(--sp-7); }
.werkplaats__body-1 { order: 3; margin-block-start: var(--sp-7); }
.werkplaats__img-2  { order: 4; margin-block-start: var(--sp-7); }
.werkplaats__body-2 { order: 5; margin-block-start: var(--sp-7); }
.werkplaats__ledger { order: 6; margin-block-start: 3rem; }
.werkplaats__cta    { order: 7; margin-block-start: 3rem; }

.werkplaats__body-1,
.werkplaats__body-2 { max-width: var(--measure-body); }
.werkplaats__body-1 p + p { margin-block-start: 1.75rem; }

@media (min-width: 64rem) {
  .werkplaats__spread {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .werkplaats__plates { display: block; grid-column: 1 / 6; }   /* cols 1–5 */
  .werkplaats__text   { display: block; grid-column: 7 / 12; }  /* col 12 empty */

  .werkplaats__img-1 { margin-block-start: 0; }
  /* Never two images at the same size — that reads as a gallery. */
  .werkplaats__img-2 { width: 79%; margin-block-start: var(--sp-8); margin-inline-start: 2.5rem; }

  .werkplaats__head   { margin-block-start: 0; }
  .werkplaats__body-1 { margin-block-start: 3rem; }
  .werkplaats__body-2 { margin-block-start: 1.75rem; }
  .werkplaats__ledger { margin-block-start: 3.5rem; }
  .werkplaats__cta    { margin-block-start: 3.5rem; }
}

/* The rhumb entering from De Kust's node, running down the text column. */
.werkplaats__rhumb { display: none; }
@media (min-width: 64rem) {
  .werkplaats__rhumb {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-5);
  }
  .werkplaats__rhumb .rhumb { flex: 1; }
}


/* =========================================================================
   § 5 · DE WAREN                                              Vol. V §8.5
   Not a catalogue. No prices, no weights, no thumbnails, no row links.
   Nothing here is clickable and that is the point.
   ========================================================================= */

.waren__shelf { margin-block-start: 2.5rem; }
@media (min-width: 64rem) { .waren__shelf { margin-block-start: 4rem; } }

.waren__list {
  margin-block-start: 2.5rem;
  list-style: none;
  padding: 0;
  border-block: 0;
}
@media (min-width: 64rem) { .waren__list { margin-block-start: 3.5rem; } }

.waren__item { padding-block: var(--sp-5); border-block-end: var(--rule-hairline) solid var(--rule); }
.waren__item:first-child { border-block-start: 0; }

.waren__name {
  display: block;
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: 1rem;
  letter-spacing: var(--tr-name);
  color: var(--text);
}
@media (min-width: 64rem) { .waren__name { font-size: 1.0625rem; } }

.waren__desc {
  margin-block-start: var(--sp-2);
  max-width: var(--measure-longform);
  font-size: var(--t-caption);
  font-style: italic;
  line-height: 1.65;
  color: var(--text-quiet);
}

.waren__cta { margin-block-start: 2.5rem; }


/* =========================================================================
   § 6 · DE STOFFEN                                            Vol. V §8.6
   A vellum panel on parchment. No border — the 1.5% value difference is
   the frame, and it is just enough.
   ========================================================================= */

.stoffen__fleuron {
  display: block;
  width: 1.5rem;
  margin: var(--sp-5) auto 0;
  color: var(--text-quiet);
}

.stoffen__panel {
  margin-block-start: 2rem;
  padding-block: var(--sp-6);
  background-color: var(--surface-inset);
}
@media (min-width: 64rem) {
  .stoffen__panel { margin-block-start: 2.5rem; padding: 3rem; }
}

.stoffen__plates {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding-inline: var(--page-margin);
  list-style: none;
  /* Mobile: a true overflow scroller. The peeking edge is the affordance.
     No dots, no arrows, no auto-advance.                    Vol. V §8.6 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.stoffen__plate {
  flex: 0 0 12.5rem;                             /* 200 */
  scroll-snap-align: start;
}

@media (min-width: 43.75rem) {
  .stoffen__plates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
    overflow: visible;
    padding-inline: 0;
  }
  .stoffen__plate { flex: none; }
}
@media (min-width: 64rem) {
  .stoffen__plates { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

.stoffen__plate svg { display: block; width: 100%; height: auto; color: var(--text); }

.stoffen__name {
  display: block;
  margin-block-start: var(--sp-4);
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--text);
}
.stoffen__binomial {
  display: block;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text-quiet);
}
.stoffen__plateno { display: block; color: var(--text-quiet); }
.stoffen__note {
  margin-block-start: var(--sp-3);
  font-size: var(--t-caption);
  line-height: 1.625;
  color: var(--text);
}


/* =========================================================================
   § 7 · HET ONTLEEDSTUK                                      Vol. IV §11
   The most air on the page. Do not let this tighten in production —
   the air is the section's luxury.
   ========================================================================= */

.ontleedstuk { padding-block: 6rem 7.5rem; }
@media (min-width: 64rem) { .ontleedstuk { padding-block: 6rem 7.5rem; } }

/* The candle must not flicker behind a precise hairline drawing: any
   luminance movement behind fine line work reads as a failing screen.
   Vol. VI Finding 6. */
.ontleedstuk.ground--dark::after { animation: none; }

.ontleedstuk__node { display: block; margin: 3.5rem auto 0; color: var(--rhumb); }
@media (min-width: 64rem) { .ontleedstuk__node { margin-block-start: 5.5rem; } }

.ontleedstuk__plate {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: var(--sp-5);
  color: var(--text);
}

.ontleedstuk__plate--h { display: none; }
@media (min-width: 43.75rem) {
  .ontleedstuk__plate--v { display: none; }
  .ontleedstuk__plate--h { display: block; }
}

.ontleedstuk__caption {
  margin-block-start: var(--sp-4);
  color: var(--text-quiet);
  opacity: 0.75;
}

/* Surprise #2 — parts arrive a→g, 120ms apart, each stopping dead.
   No overshoot; a part arrives like a stamp. */
[data-anim="ready"] .ontleedstuk .part { opacity: 0; }
[data-anim="ready"] .ontleedstuk .leader { opacity: 0; }
[data-anim="ready"] .ontleedstuk[data-assembled] .part,
[data-anim="ready"] .ontleedstuk[data-assembled] .leader {
  opacity: 1;
  transition: opacity 90ms linear;
  transition-delay: calc(var(--i, 0) * var(--seq-razor-step));
}
[data-anim="ready"] .ontleedstuk[data-assembled] .leader {
  transition-delay: calc(var(--i, 0) * var(--seq-razor-step) + 60ms);
}

/* The only bidirectional hover on the site: key entry ↔ plate part.
   Justified because the key and the plate are one object. */
.part.is-lit path { stroke: var(--brass-lit); }
.leader.is-lit path { stroke: var(--brass-lit); opacity: 1; }

.ontleedstuk__key {
  margin-block-start: 3rem;
  padding-block: var(--sp-5);
  border-block: var(--rule-hairline) solid var(--rule);
}
@media (min-width: 64rem) {
  .ontleedstuk__key {
    margin-block-start: 4.5rem;                  /* 72 */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter) var(--gutter);
    border-block-width: var(--rule-heavy) var(--rule-heavy);
  }
  .ontleedstuk__col:first-child { grid-column: 1 / 6; }
  .ontleedstuk__col:last-child  { grid-column: 7 / 12; }
}

/* NO hairline rules between entries. Real instrument plates set legends
   unruled so the rules do not compete with the leader lines above.
   Vol. VI Finding 2. */
.ontleedstuk__entry {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-start: 1.25rem;                   /* 20 */
  background: none;
  border: 0;
  text-align: start;
  cursor: default;
}
.ontleedstuk__col > .ontleedstuk__entry:first-child { margin-block-start: 0; }

.ontleedstuk__term { display: block; color: var(--label); }
.ontleedstuk__def {
  display: block;
  margin-block-start: var(--sp-1);
  max-width: var(--measure-body);
  font-size: var(--t-caption);
  line-height: 1.625;
  color: var(--text-quiet);
}

.ontleedstuk__closing {
  margin-block-start: 3rem;
  max-width: var(--measure-longform);
  font-family: var(--face-text);
  font-style: italic;
  font-size: var(--t-longform);
  line-height: 1.52;
  color: var(--text);
}
.ontleedstuk__cta { margin-block-start: 2rem; }


/* =========================================================================
   § 8 · HET SCHEEPSJOURNAAL                                  Vol. IV §12
   The oldest sheet. Foxing gathers toward the right margin, exactly where
   a reader's hand would have rested.
   ========================================================================= */

.journaal__spread { margin-block-start: 3rem; }

@media (min-width: 64rem) {
  .journaal__spread {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    margin-block-start: 4rem;
  }
  .journaal__body   { grid-column: 1 / 7; }
  .journaal__margin { grid-column: 9 / 12; position: relative; }
}

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

.journaal__date { display: block; margin-block-start: 2rem; color: var(--text-quiet); }

/* 128 words of italic is at the outer limit of comfortable reading, and
   it is the right call: the entry is a quotation from a document. */
.journaal__entry {
  margin-block-start: 1.5rem;
  font-size: var(--t-longform);
  line-height: var(--lh-longform);
  font-style: italic;
  color: var(--text);
}
.journaal__entry p + p { margin-block-start: 1.75rem; }

/* Surprise #3 — the annotation writes itself when the visitor is reading
   the line, not when the section enters the screen. That distinction is
   the difference between the effect working and being a gimmick. */
.journaal__annotation { color: var(--text-quiet); }

.journaal__annotation svg { width: 11.25rem; height: auto; display: block; }

@media (max-width: 63.9375rem) {
  .journaal__margin {
    margin-block-start: var(--sp-5);
    padding-inline-start: var(--sp-4);
    border-inline-start: var(--rule-hairline) solid var(--rule);
  }
  .journaal__annotation svg { width: 9rem; }
  .journaal__leader { display: none; }
}

@media (min-width: 64rem) {
  .journaal__annotation { margin-block-start: 16rem; }
  .journaal__leader {
    display: block;
    width: 6rem;
    height: 1px;
    margin-block-end: var(--sp-3);
    margin-inline-start: -7.5rem;
    background: var(--rule);
  }
}

[data-anim="ready"] .journaal__annotation .s {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
[data-anim="ready"] .journaal[data-written] .journaal__annotation .s {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--draw-annotate) / 3) cubic-bezier(.3,.05,.5,1);
  transition-delay: calc(var(--i, 0) * (var(--draw-annotate) / 9));
}
[data-anim="ready"] .journaal__leader { transform: scaleX(0); transform-origin: right; }
[data-anim="ready"] .journaal[data-written] .journaal__leader {
  transform: scaleX(1);
  transition: transform 200ms linear;
}

.journaal__photo { margin-block-start: 3rem; max-width: 18.75rem; }
@media (max-width: 63.9375rem) { .journaal__photo { max-width: none; } }
.journaal__cta { margin-block-start: 2rem; }


/* =========================================================================
   § 9 · DE VOORWAARDEN                                       Vol. IV §13
   The plainest surface on the site. No foxing, no vignette, no ornament —
   not one rule that is not doing structural work.
   ========================================================================= */

.voorwaarden { background-color: var(--surface); }
.voorwaarden__ledger { margin-block-start: 2rem; }
@media (min-width: 64rem) {
  .voorwaarden__ledger { margin-block-start: 3rem; width: calc(75% - var(--gutter)); }
}


/* =========================================================================
   § 10 · DE BRIEF                                            Vol. IV §14
   The one ceremony. The only brass button on the page.
   ========================================================================= */

.brief__fan { margin-block-end: 3rem; }
.brief__fan .rhumb + .rhumb { margin-block-start: var(--sp-2); opacity: 0.7; }

.brief__spread { display: block; }

@media (min-width: 64rem) {
  .brief__spread {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .brief__argument { grid-column: 1 / 6; }
  .brief__form     { grid-column: 7 / 12; }
}

.brief__argument p + p { margin-block-start: 1.75rem; }
.brief__argument { max-width: var(--measure-longform); }

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

.field + .field { margin-block-start: 2rem; }

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

/* Ruled lines, not boxes. No floating labels — a modern SaaS tell and an
   accessibility liability.                                  Vol. IV §8.4 */
.field__input {
  display: block;
  width: 100%;
  max-width: 23.75rem;                           /* 380 */
  height: var(--field-height-sm);
  margin-block-start: var(--sp-3);
  padding: 0 var(--sp-4);
  background-color: var(--surface-inset);
  color: var(--ink-iron);
  border: 0;
  border-block-end: var(--field-rule);
  border-radius: 0;
  font-size: 1.125rem;                           /* ≥16 prevents iOS zoom */
}
@media (min-width: 64rem) { .field__input { height: var(--field-height); font-size: 1.0625rem; } }

.field__input:focus-visible { border-block-end: var(--field-rule-focus); }

.field__help {
  display: block;
  margin-block-start: var(--sp-2);
  max-width: 23.75rem;
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--text-quiet);
}

.field__error {
  display: none;
  margin-block-start: var(--sp-2);
  font-size: var(--t-caption);
  color: var(--sealing-wax);
}
.field[data-invalid] .field__input { border-block-end: var(--field-rule-error); }
.field[data-invalid] .field__error { display: block; }

.brief__submit { margin-block-start: 2.5rem; }

.brief__consent {
  margin-block-start: 1.75rem;
  max-width: 26rem;
  font-size: var(--t-body);                      /* same size as body. never smaller. */
  color: var(--text-quiet);
}

/* Surprise #4 — the ceremony. Scale 1.06 → 1.00, no bounce, the shadow
   deepening as it settles. The only place wax appears on the homepage. */
.brief__sealed { display: none; }
.brief[data-sent] .brief__sealed { display: block; }
.brief[data-sent] .brief__fields { display: none; }

.seal {
  width: var(--seal-size-sm);
  height: auto;
  color: var(--seal-face);
}
@media (min-width: 64rem) { .seal { width: var(--seal-size); } }
.seal .wax { fill: currentColor; }

[data-anim="ready"] .brief[data-sent] .seal {
  animation: seal-press var(--motion-seal) forwards;
}
@keyframes seal-press {
  from { transform: scale(1.06); filter: drop-shadow(1px 1px 0 rgb(30 20 14 / .18)); }
  to   { transform: scale(1);    filter: drop-shadow(2px 3px 6px rgb(30 20 14 / .16)); }
}

.seal__ribbon { width: 8.75rem; height: auto; margin-block-start: var(--sp-4); color: var(--text-quiet); }

.brief__confirm {
  margin-block-start: var(--sp-5);
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  letter-spacing: var(--tr-smallcap);
  color: var(--text);
}
.brief__confirm span { display: block; font-variant-caps: normal; letter-spacing: 0;
  font-family: var(--face-text); font-size: var(--t-caption); color: var(--text-quiet);
  margin-block-start: var(--sp-2); }


/* =========================================================================
   § 11 · HET COLOFON                                         Vol. IV §15
   The chart's edge. The rose appears once on the entire site, and the
   navigation sits in the gaps between its rhumbs — ornament and structure
   as one object.
   ========================================================================= */

.colofon { padding-block: 4rem 5rem; }
@media (min-width: 64rem) { .colofon { padding-block: 5rem 5rem; } }

.colofon__upper { display: block; }

@media (min-width: 64rem) {
  .colofon__upper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .colofon__rose-cell { grid-column: 1 / 4; }
  .colofon__nav       { grid-column: 5 / 12; }
}

.colofon__rose-cell { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 64rem) { .colofon__rose-cell { align-items: start; } }

.colofon__rose { width: 8.75rem; height: auto; color: var(--rhumb); }
@media (min-width: 64rem) { .colofon__rose { width: 16.25rem; } }

.colofon__rose--32 { display: none; }
@media (min-width: 64rem) {
  .colofon__rose--8  { display: none; }
  .colofon__rose--32 { display: block; }
}

.colofon__monogram { width: 4rem; height: 4rem; margin-block-start: var(--sp-6); color: var(--text); }

.colofon__nav { margin-block-start: 3rem; }
@media (min-width: 64rem) { .colofon__nav { margin-block-start: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }

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

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

.colofon__items { margin: var(--sp-3) 0 0; padding: 0; list-style: none; }

/* Mobile sets the list inline with middots — four stacked lists would add
   400px to an already 13,000px page, and a middot run is closer to how a
   colophon actually sets a list. */
@media (max-width: 63.9375rem) {
  .colofon__items { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); }
  .colofon__items li:not(:last-child)::after { content: " ·"; color: var(--text-quiet); }
}

.colofon__items a {
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--text-quiet);
  text-decoration: none;
  position: relative;
}
.colofon__items a:hover { color: var(--text); text-decoration: underline;
  text-underline-offset: var(--link-offset); text-decoration-thickness: 1px; }

.colofon__office { margin-block-start: 2rem; }
@media (min-width: 64rem) { .colofon__office { grid-column: 1 / 3; margin-block-start: 2.5rem; } }
.colofon__office p { margin-block-start: var(--sp-3); font-size: var(--t-caption);
  color: var(--text-quiet); max-width: 30ch; }

.colofon__lower { margin-block-start: 3rem; }
@media (min-width: 64rem) { .colofon__lower { margin-block-start: 4rem; } }

/* Full contrast. Not smaller, not greyer, not folded away behind a link.
   Vol. II NEVER #39 — this is the render spec's job to enforce. */
.colofon__note {
  margin-block-start: 2rem;
  max-width: var(--measure-body);
  font-size: var(--t-caption);
  font-style: italic;
  line-height: var(--lh-caption);
  color: var(--ink-chalk);
}

.colofon__printer {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: var(--rule-hairline) solid var(--rule);
  max-width: var(--measure-body);
  font-size: var(--t-caption);
  font-style: italic;
  line-height: var(--lh-caption);
  color: var(--text-quiet);
}

.colofon__signature { display: block; width: 12.5rem; height: auto;
  margin: var(--sp-5) 0 0 auto; color: var(--text-quiet); }

/* Same size as everything else. Small print is a modern dishonesty and
   there is no eighteenth-century excuse for it. */
.colofon__legal {
  margin-block-start: 2rem;
  font-size: var(--t-caption);
  color: var(--text-quiet);
}
.colofon__legal a { color: inherit; text-decoration: underline;
  text-underline-offset: var(--link-offset); }