/* Hallmark · shape: Long Document · genre: editorial · theme: Editorial (deal 1/3, seed transla-translation-marketplace-app-7dd1·388edc88·2026-10-26·r0) · job: try · draw: 16a7f3
 * hero: Ledge · nav: masthead · footer: letter close · imagery: none · signature: the essay's claim resting at the base of a tall paper field
 * axes: light/display-condensed/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: E, CJK glyphs fall back to system faces where Bricolage carries none; accepted with swap and matched-voice fallback stacks */
/* Hallmark · waive 44a · stamp declares hero: Ledge · a Ledge sits low on purpose, the head rests at the base */
/* Hallmark · waive 78 · h2 median ~30px · compact type explicitly requested by the product owner for CJK reading comfort */

@import url("./tokens.css");
@import url("./base.css");

/* Ledge hero: the ink band with a green run under the head — same colour
   family as the homepage. */
.ledge {
  background: var(--color-ink);
  display: flex;
  align-items: flex-end;
  min-height: 58svh;
  padding-block: var(--space-2xl) var(--space-2xl);
}
.ledge .band-rule { width: 96px; height: var(--rule-heavy); background: var(--color-accent-bright); margin-bottom: var(--space-lg); }
.ledge h1 { max-width: 16ch; color: var(--color-paper); font-size: clamp(2.1rem, 2.6vw + 0.9rem, 3.1rem); }
.ledge .lead { margin-top: var(--space-md); max-width: 34em; font-size: clamp(1rem, 0.3vw + 0.9rem, 1.15rem); color: color-mix(in oklab, var(--color-paper) 84%, var(--color-ink)); }

/* The document: compact type, green markers on every section head. */
.document > section + section { margin-top: var(--section-gap-s); }
.document > section:nth-child(3) { margin-top: var(--section-gap-s); }
.document > section:nth-child(5) { margin-top: var(--section-gap); }
.document h2 {
  font-size: clamp(1.45rem, 1.1vw + 0.9rem, 2rem);
  line-height: 1.2;
  padding-top: var(--space-md);
  position: relative;
  margin-bottom: var(--space-md);
}
.document h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: var(--rule-heavy);
  background: var(--color-accent);
}
.document .prose { max-width: 62ch; }
.document .prose p { line-height: 1.75; margin-top: var(--space-md); font-size: 1rem; color: var(--color-ink); }
.document .prose p:first-child { margin-top: 0; }

/* The closing statement, quiet but with a green spine. */
.document .statement {
  font: 600 1.35rem/1.5 var(--font-body);
  color: var(--color-ink);
  border-left: var(--rule-heavy) solid var(--color-accent);
  padding-left: var(--space-lg);
  text-wrap: balance;
  max-width: none;
}
.document .opens > .container > .grid { margin-bottom: var(--space-lg); }

/* A ladder: usage rows. Green spines and green terms keep the page in
   the brand family; the type stays at reading size. */
.ladder { margin: var(--space-lg) 0 0; }
.ladder > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-top: 1px solid var(--color-accent-line); }
.ladder > div:first-child { border-top: var(--rule-heavy) solid var(--color-accent); }
.ladder dt { grid-column: 1 / 5; font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--color-accent-deep); }
.ladder dd { grid-column: 5 / 13; margin: 0; font-size: 1rem; color: var(--color-ink-2); }

.document .opens.close-band { background: var(--color-paper-2); padding-block: var(--space-xl); }

.document .close-actions { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: start; gap: var(--space-md); margin-top: var(--space-lg); }

@media (max-width: 60rem) {
  .ledge { min-height: 46svh; }
  .ladder dt, .ladder dd { grid-column: 1 / 13; }
  .ladder dd { margin-top: var(--space-2xs); }
}