/* =========================================================================
   ZWARTBAERD — COMPONENTS
   Shared across sections. Every one reads contextual or semantic tokens
   only; none reads a primitive. Vol. XI §2.1.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · SECTION SCAFFOLDING
   ------------------------------------------------------------------------- */

.section { padding-block: var(--sp-8) var(--section-gap); }

@media (min-width: 64rem) {
  .section { padding-block: 6rem 9rem; }        /* 96 / 144 */
}

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

.section__heading {
  margin-block-start: 1.25rem;                  /* 20 mobile */
  font-size: var(--t-section);
  line-height: var(--lh-section);
  letter-spacing: var(--tr-section);
  color: var(--text);
}
@media (min-width: 64rem) {
  .section__heading { margin-block-start: 2rem; }   /* 32 */
}

.section__standfirst {
  margin-block-start: 2rem;                     /* 32 mobile */
  max-width: var(--measure-longform);
  color: var(--text-quiet);
}
@media (min-width: 64rem) {
  .section__standfirst { margin-block-start: 2.5rem; }  /* 40 */
}


/* -------------------------------------------------------------------------
   2 · RULES
   ------------------------------------------------------------------------- */

.rule {
  height: var(--rule-hairline);
  background: var(--rule);
  border: 0;
}

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

/* Rhumb — cobalt on light grounds, wash on dark. Static since Vol. VI
   Finding 4 removed the draw-in: a line appearing because you scrolled
   depicts nothing. */
.rhumb {
  height: 1px;
  background: var(--rhumb);
  border: 0;
}
.rhumb--v { width: 1px; height: auto; align-self: stretch; }

.node {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--rhumb);
}


/* -------------------------------------------------------------------------
   3 · THE PLATE MARK                                        Vol. V §3.7
   A copper plate pressed into damp paper. Debossed rectangle 8px outside
   the image; light on top and left, shadow on bottom and right. The 2px
   radius is the only radius on the site. Nothing lifts.
   ------------------------------------------------------------------------- */

.plate {
  display: block;
  padding: var(--plate-gap);
  box-shadow:
    inset 1px 1px 0 var(--plate-light),
    inset -1px -1px 0 var(--plate-shade);
  transition: box-shadow var(--motion-ink);
}

.plate > img,
.plate > svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--plate-radius);
}

@media (min-width: 64rem) {
  .plate--large { padding: 0.75rem; }           /* 12px above 600px wide */
}

.plate__caption {
  margin-block-start: var(--sp-3);
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--text-quiet);
}


/* -------------------------------------------------------------------------
   4 · THE LEDGER
   Ruled terms. The house stating facts. Used in § 4 and § 9 — and NOT in
   § 7, whose key is unruled so its leader lines read as part of the
   drawing.                                               Vol. VI Finding 2
   ------------------------------------------------------------------------- */

.ledger { border-block-start: var(--rule-hairline) solid var(--rule); }

.ledger__row {
  display: block;
  padding-block: var(--sp-5);
  border-block-end: var(--rule-hairline) solid var(--rule);
}

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

.ledger__def {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: var(--t-caption);
  line-height: 1.625;
  color: var(--text-quiet);
}

@media (min-width: 64rem) {
  .ledger__row {
    display: grid;
    grid-template-columns: 10rem 1fr;            /* term 160px */
    gap: var(--sp-5);
    align-items: baseline;
  }
  .ledger__def { margin-block-start: 0; max-width: var(--measure-body); }
}


/* -------------------------------------------------------------------------
   5 · BUTTONS
   One brass button per page. One secondary per page. Vol. V A4.
   Square corners. Small caps, +0.14em.
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 0;
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: 0.875rem;                           /* 14 */
  letter-spacing: var(--tr-smallcap);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--motion-press), background-color var(--motion-press),
              transform var(--motion-press), border-color var(--motion-ink);
}

/* Secondary — the engraved rule. Hover thickens the keyline to a double. */
.btn--rule {
  background: none;
  border: 1px solid var(--btn-rule-keyline);
  color: var(--btn-rule-text);
  box-shadow: inset 0 0 0 0 transparent;
}
.btn--rule:hover { box-shadow: inset 0 0 0 3px transparent, 0 0 0 3px transparent;
                   border-width: 1px; outline: 1px solid var(--btn-rule-keyline);
                   outline-offset: 3px; }
.btn--rule:active { transform: translateY(1px); box-shadow: var(--shade-press); }

/* Primary — the brass plate. It should read as struck, not as glowing. */
.btn--brass {
  position: relative;
  height: var(--btn-height);
  background-color: var(--btn-brass-face);
  border: 1px solid var(--btn-brass-keyline);
  color: var(--btn-brass-text);
  box-shadow: var(--emboss);
  overflow: hidden;
}
.btn--brass::before {                            /* the brushing, 8% */
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-brass);
  background-size: 16rem 16rem;
  mix-blend-mode: multiply;
  opacity: var(--alpha-brass);
  pointer-events: none;
}
.btn--brass::after {                             /* the sheen, 18°, upper-left */
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background: rgb(255 246 224 / var(--brass-sheen-alpha));
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn--brass:hover { background-color: var(--brass-lit); }
.btn--brass:active {
  background-color: var(--btn-brass-press);
  transform: translateY(1px);
  box-shadow: var(--shade-press);
}
.btn--brass[aria-disabled="true"] { pointer-events: none; opacity: 1; }

@media (max-width: 63.9375rem) {
  .btn--block { width: 100%; }                   /* full width is permitted on mobile only */
}


/* -------------------------------------------------------------------------
   6 · TERTIARY LINK — the ink link
   ------------------------------------------------------------------------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding-block: var(--sp-3);
  position: relative;
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: var(--t-label);
  letter-spacing: var(--tr-smallcap);
  color: var(--link-color);
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--sp-3) - var(--link-offset));
  inset-inline: 0 1.25rem;
  height: var(--link-underline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-ink);
}
.link:hover::after { transform: scaleX(1); }
.link svg { width: 1rem; height: 1rem; transition: transform var(--motion-ink); }
.link:hover svg { transform: translateX(3px); }

.link--inline {
  display: inline;
  min-height: 0;
  font-family: var(--face-text);
  font-variant-caps: normal;
  font-feature-settings: var(--num-prose);
  font-size: inherit;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: var(--link-offset);
  text-decoration-thickness: var(--link-underline);
}
.link--inline::after { content: none; }


/* -------------------------------------------------------------------------
   7 · CENTRED CLOSING DEVICE
   Permitted for a catalogue's closing rule and the colophon only.
   ------------------------------------------------------------------------- */

.centred { display: flex; justify-content: center; }