/* =========================================================================
   THE BRINE LEDGER — design system "Cellar and Crock", class prefix crk-.
   Vocabulary of the cellar shelf: aisle (reading corridor), gate (masthead),
   stamp (wordmark), lane (main navigation), placard (the opening block),
   shelf (section band), lattice (tile grid), panel (tile), frame (image
   frame), tag (caption block), ledger (dated register), date (date line),
   board (equipment strip), yard (page body), crown (page head), plate
   (image plate), batch (rail plus column), rail (standing outline), column
   (reading column), chart (scrolling table of figures), maxim (dark box),
   divider (section rule), onward (read next), base (footer), trail
   (breadcrumb), jump (skip link), notice (editorial note).
   Colour: salt paper, deep brine, chilli rust, brass. Titles in a workhorse
   old style serif, reading text in a clear bright serif, figures in a
   monospace so that a column of percentages lines up.
   No remote request, no CDN, no script, no ornament: the only ornament here
   is the rule. Right angles everywhere, 2px frames, automatic dark mode,
   print sheet without chrome.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOUR · salt paper, deep brine, chilli rust, brass ---------- */
  --mist:       #eef0e9;  /* salt paper: the page ground                 */
  --mist-dark:  #dee2d7;  /* reserved band, every third section          */
  --mist-light:  #f7f8f3;  /* table head, even rows of the register       */
  --ink:        #171c18;  /* soot: reading text, 13.5:1 on the ground    */
  --ink-soft:   #565f57;  /* standfirst, caption, details, 5.18:1        */
  --brine:        #2b4a48;  /* brine: masthead, footer, section bands      */
  --brine-deep:  #16302f;  /* brine at night: placard and dark box        */
  --rust:     #9e4e17;  /* rust: links, numbers, focus ring            */
  --rust-light:#e0a877;  /* rust on the brine ground, 5.6:1             */
  --amber:      #b08a3c;  /* brass: rules and figures on the brine band  */
  --rule:      #c6ccc0;  /* rule on a light ground                      */
  --rule-brine: #3d6260;  /* rule on the brine ground                    */

  /* ---- 2. TYPE · system faces only, nothing is ever downloaded --------- */
  --face-title: "Bookman Old Style", Bookman, "URW Bookman L", "Century Schoolbook", Georgia, serif;
  --face-body:  "Lucida Bright", "Lucida Fax", "Sitka Text", Charter, Georgia, serif;
  --face-figure: "Andale Mono", "Courier New", "Nimbus Mono PS", "Liberation Mono", monospace;

  --title-bold: 600;
  --caps-track: 0.18em;

  --run-step:        clamp(1.04rem, 0.99rem + 0.2vw, 1.15rem);
  --run-leading: 1.68;
  --size-h1:          clamp(2.05rem, 1.15rem + 3.1vw, 3.55rem);
  --size-h1-placard: clamp(2.15rem, 1.15rem + 2.9vw, 3.35rem);
  --size-h2:          clamp(1.42rem, 1.12rem + 1.15vw, 2.05rem);
  --size-h3:          clamp(1.1rem, 1.02rem + 0.38vw, 1.32rem);

  /* ---- 3. MEASURE AND RHYTHM ------------------------------------------ */
  --measure:      63ch;
  --measure-broad: 1150px;
  --edge-page:      clamp(1.05rem, 3.4vw, 3.2rem);
  --gutter:           clamp(0.9rem, 2vw, 1.8rem);
  --air:            clamp(2.2rem, 4.5vw, 4.2rem);
  --para:          clamp(1.1rem, 2.6vw, 2.4rem);
  --rail-width:   14rem;

  /* ---- 4. DETAIL ------------------------------------------------------- */
  --corner:        0;                          /* sharp corners, everywhere  */
  --rule-hair: 1px solid var(--rule);
  --rule-heavy: 2px solid var(--rule);
  --pace:       140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mist:       #0f1411;
    --mist-dark:  #171d19;
    --mist-light:  #1d2420;
    --ink:        #e3e7e0;
    --ink-soft:   #a6b0a6;
    --brine:        #18302e;
    --brine-deep:  #0c1f1e;
    --rust:     #e0a877;
    --rust-light:#e2a877;
    --amber:      #c6a55e;
    --rule:      #2a3430;
    --rule-brine: #2c524f;
  }
}

/* =========================================================================
   FOUNDATION
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--run-step);
  line-height: var(--run-leading);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--face-title);
  font-weight: var(--title-bold);
  letter-spacing: 0.004em;
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--pace);
}
a:hover { color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: var(--corner);
}
hr { border: 0; border-top: var(--rule-hair); margin: 0; }
::selection { background: var(--brine); color: #f0f3f2; }

/* Dates, tables and the register run in tabular figures. */
.crk-chart td, .crk-date, .crk-crown__details, .crk-shelf__nr,
.crk-placard__line, .crk-panel__number, .crk-maxim, .crk-rail {
  font-variant-numeric: tabular-nums;
}
/* The figures of the chart and of the register are set in the monospace face:
   a column of percentages and of days has to line up digit under digit, or it
   cannot be read across rows. */
.crk-chart td, .crk-date time { font-family: var(--face-figure); font-size: 0.9em; }

/* =========================================================================
   FRAME OF THE PAGE
   ========================================================================= */

.crk-jump {
  position: absolute; left: -9999px; top: 0;
  background: var(--brine-deep); color: #f0f3f2;
  padding: 0.7rem 1.15rem; z-index: 60;
}
.crk-jump:focus { left: 0.6rem; top: 0.6rem; }

/* The aisle: the usable width of the whole sheet. */
.crk-aisle {
  max-width: var(--measure-broad);
  margin: 0 auto;
  padding-left: var(--edge-page);
  padding-right: var(--edge-page);
}

/* =========================================================================
   GATE · masthead, wordmark, lane
   ========================================================================= */

.crk-gate {
  background: var(--brine);
  color: #eef2f0;
  border-bottom: 2px solid var(--rule-brine);
}
.crk-gate__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.7rem 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
a.crk-stamp {
  font-family: var(--face-title);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: #f0f3f2;
  text-decoration: none;
}
a.crk-stamp:hover { color: var(--amber); }
.crk-stamp span {
  display: block;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--amber);
  margin-top: 0.16rem;
}
.crk-gate__lanes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.6rem; }
.crk-lane ul, .crk-sidelane ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crk-lane a {
  font-family: var(--face-title);
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #dce6e1;
}
.crk-lane a:hover { color: var(--amber); }
.crk-sidelane a {
  font-family: var(--face-title);
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--amber);
  border-bottom: 1px solid var(--rule-brine);
  padding-bottom: 0.14rem;
}
.crk-sidelane a:hover { color: #f0f3f2; border-bottom-color: var(--amber); }

/* On a phone the full section bar would otherwise eat half the screen: set
   tighter and smaller, but every entry still visible. */
@media (max-width: 620px) {
  .crk-gate__row { padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 0.5rem 1rem; }
  a.crk-stamp { font-size: 1.02rem; }
  .crk-stamp span { font-size: 0.9rem; }
  .crk-lane ul, .crk-sidelane ul { gap: 0.1rem 0.85rem; }
  .crk-lane a, .crk-sidelane a { font-size: 0.7rem; letter-spacing: 0.08em; }
  .crk-gate__lanes { gap: 0.25rem 1rem; }
}

/* =========================================================================
   PLACARD · the opening split: photograph on the left, type on the right
   ========================================================================= */

.crk-placard { background: var(--brine-deep); color: #eef2f0; }

/* The opening split. The donor this shell comes from opened on a typographic
   band with no photograph; here the photograph is the first thing on the
   screen, set beside the type rather than behind it, so nothing is veiled and
   the text sits on a flat ground. */
.crk-placard__split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2.6rem);
  align-items: center;
  padding-top: clamp(1.2rem, 2.4vw, 2rem);
  padding-bottom: clamp(1.2rem, 2.4vw, 2rem);
}
.crk-placard__plate { margin: 0; }
.crk-placard__plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--rule-brine);
  background: var(--brine);
}
.crk-placard__plate figcaption {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #b9c6c1;
  border-left: 2px solid var(--amber);
  padding-left: 0.7rem;
}
@media (max-width: 860px) {
  .crk-placard__split { grid-template-columns: 1fr; gap: 1.1rem; }
  .crk-placard__plate { order: 2; }
  .crk-placard__inner { order: 1; }
}
.crk-placard__inner {
  padding-top: clamp(1.7rem, 2.8vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.4vw, 2.1rem);
  max-width: 72rem;
}
.crk-placard__overline {
  margin: 0 0 0.7rem;
  font-family: var(--face-title);
  font-size: 0.8rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--amber);
  border-top: 2px solid var(--amber);
  padding-top: 0.55rem;
  display: inline-block;
}
.crk-placard h1 {
  color: #f4f7f5;
  font-size: var(--size-h1-placard);
  margin: 0 0 0.7rem;
  max-width: 30ch;
}
/* Dans la colonne etroite du split, le titre doit rester un titre et non un
   pave de six lignes : il descend d'un cran et se resserre. */
.crk-placard--plate h1 {
  font-size: clamp(1.7rem, 0.9rem + 1.55vw, 2.5rem);
  line-height: 1.1;
  max-width: 22ch;
}
.crk-placard--plate .crk-placard__standfirst { font-size: 1rem; max-width: 46ch; }
.crk-placard__standfirst {
  max-width: 64ch;
  margin: 0 0 0.95rem;
  color: #cfd9d4;
  font-size: clamp(1.04rem, 1rem + 0.3vw, 1.16rem);
  line-height: 1.5;
}
.crk-placard__line {
  margin: 0;
  font-family: var(--face-title);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  border-top: 1px solid var(--rule-brine);
  padding-top: 0.65rem;
}

/* =========================================================================
   PLATE · full width image plate with a rule and a caption
   ========================================================================= */

.crk-plate { margin: var(--para) auto; }
.crk-plate img {
  width: 100%;
  height: auto;
  border: var(--rule-heavy);
  background: var(--mist-dark);
}
.crk-plate--ribbon img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.crk-plate figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 76ch;
}

/* =========================================================================
   SHELF · section band with its crownline and its number
   ========================================================================= */

.crk-shelf { padding-top: var(--air); padding-bottom: var(--para); }
/* The first shelf follows the placard directly: the head of the chart has to
   be visible without scrolling. Measured at 1456x800. */
.crk-shelf--first { padding-top: clamp(1rem, 2vw, 1.7rem); }
.crk-shelf--shaded { background: var(--mist-dark); }
.crk-shelf__crownline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
  margin-bottom: 1.15rem;
}
.crk-shelf__title {
  font-size: clamp(1.32rem, 1.1rem + 1vw, 1.9rem);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.crk-shelf__nr {
  font-family: var(--face-title);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--rust);
}
.crk-shelf__note { margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 48ch; }

/* =========================================================================
   LATTICE · three column grid of tall frames, no offsets
   ========================================================================= */

.crk-lattice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter) var(--gutter);
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}
.crk-lattice--large { grid-template-columns: 1fr; }
@media (max-width: 900px) { .crk-lattice { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .crk-lattice { grid-template-columns: 1fr; } }

.crk-panel { display: flex; flex-direction: column; }
.crk-panel__frame {
  overflow: hidden;
  border: var(--rule-heavy);
  background: var(--mist-dark);
}
.crk-panel__frame--wide   { aspect-ratio: 4 / 3; }
.crk-panel__frame--square{ aspect-ratio: 1 / 1; }
.crk-panel__frame--tall   { aspect-ratio: 3 / 4; }
.crk-panel__frame--broad   { aspect-ratio: 21 / 9; }
.crk-panel__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--pace);
}
.crk-panel:hover .crk-panel__frame img { opacity: 0.9; }

.crk-panel__tag { padding: 0.7rem 0 0; }
.crk-panel__number {
  margin: 0 0 0.3rem;
  font-family: var(--face-title);
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}
.crk-panel__title { font-size: 1.14rem; margin: 0 0 0.32rem; }
a.crk-panel__pointer { color: var(--ink); text-decoration: none; }
a.crk-panel__pointer:hover { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; }
.crk-panel__line { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }

/* =========================================================================
   BOARD · the equipment strip, square frames
   ========================================================================= */

.crk-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}
@media (max-width: 760px) { .crk-board { grid-template-columns: repeat(2, 1fr); } }
.crk-board__cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--rule-heavy);
  background: var(--mist-dark);
}
.crk-board__cell p {
  margin: 0.5rem 0 0;
  font-family: var(--face-title);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crk-board__cell strong {
  display: block;
  font-family: var(--face-body);
  font-size: 0.94rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================================
   LEDGER · dated register, dense ruled list, no thumbnail
   ========================================================================= */

.crk-ledger { list-style: none; margin: 0 0 1.2em; padding: 0; }
.crk-ledger__entry {
  display: grid;
  grid-template-columns: 8.5rem 11rem 1fr;
  gap: 0 1.6rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: var(--rule-hair);
}
.crk-ledger__entry:nth-child(even) { background: var(--mist-light); }
.crk-ledger__entry:last-child { border-bottom: var(--rule-hair); }
.crk-date {
  margin: 0;
  font-family: var(--face-title);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.crk-topicstamp {
  margin: 0;
  font-family: var(--face-title);
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
}
.crk-ledger h3 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.crk-ledger h3 a { color: var(--ink); text-decoration: none; }
.crk-ledger h3 a:hover { color: var(--rust); text-decoration: underline; }
.crk-ledger__line { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 820px) {
  .crk-ledger__entry { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.9rem 0.6rem; }
  .crk-date { letter-spacing: 0.1em; }
}

/* =========================================================================
   DIVIDER · a single rule across the full width
   ========================================================================= */

.crk-divider { border-top: 1px solid var(--rule); margin: 0; }

/* =========================================================================
   YARD · page body, trail, crown, batch
   ========================================================================= */

.crk-yard { padding-top: var(--para); padding-bottom: var(--air); }

.crk-trail { margin: 0 0 var(--para); }
.crk-trail ol {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--face-title);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.crk-trail li + li::before { content: "\203A"; margin-right: 0.3rem; color: var(--rust); }
.crk-trail a { color: var(--ink-soft); text-decoration: none; }
.crk-trail a:hover { color: var(--rust); }
.crk-trail [aria-current="page"] { color: var(--ink); }

.crk-crown { max-width: 54rem; }
.crk-crown__overline {
  display: inline-block;
  margin: 0 0 0.9rem;
  font-family: var(--face-title);
  font-size: 0.78rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--rust);
  border-top: 2px solid var(--rust);
  padding-top: 0.6rem;
}
.crk-crown h1 { margin: 0 0 0.9rem; }
.crk-crown__intro {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.3rem);
  line-height: 1.52;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 1.2rem;
}
.crk-crown__details {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem;
  list-style: none; margin: 0; padding: 0.75rem 0 0;
  border-top: var(--rule-hair);
  font-family: var(--face-title);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.crk-crown__details a { color: var(--ink-soft); text-decoration: none; }
.crk-crown__details a:hover { color: var(--rust); }

/* The batch: standing rail on the left, reading column set to its right. */
.crk-batch { margin-top: var(--para); }
@media (min-width: 1100px) {
  .crk-batch {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}
.crk-rail {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
  margin-bottom: var(--para);
  font-size: 0.9rem;
}
@media (min-width: 1100px) {
  .crk-rail { position: sticky; top: 1.4rem; margin-bottom: 0; }
  .crk-rail > summary { display: none; }
}
.crk-rail > summary {
  font-family: var(--face-title);
  font-size: 0.78rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
  padding-bottom: 0.5rem;
}
.crk-rail__title {
  font-family: var(--face-title);
  font-size: 0.78rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.6rem;
}
.crk-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.crk-rail li { margin: 0 0 0.5rem; padding-left: 2.1rem; position: relative; line-height: 1.4; }
.crk-rail li::before {
  counter-increment: rail;
  content: counter(rail, decimal-leading-zero);
  position: absolute; left: 0; top: 0.06rem;
  font-family: var(--face-title);
  font-size: 0.74rem; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.crk-rail a { color: var(--ink); text-decoration: none; }
.crk-rail a:hover { color: var(--rust); text-decoration: underline; }

.crk-column { max-width: var(--measure); }
.crk-column > p:first-of-type { font-size: 1.16rem; line-height: 1.6; }
.crk-column h2 {
  margin: 2em 0 0.55em;
  padding-top: 0.55em;
  border-top: var(--rule-hair);
  scroll-margin-top: 1.5rem;
}
.crk-column h3 { margin: 1.6em 0 0.4em; }
.crk-column ul, .crk-column ol { padding-left: 1.3rem; }
.crk-column li { margin-bottom: 0.4em; }

/* =========================================================================
   CHART · the scrolling table of figures, always captioned
   ========================================================================= */

.crk-chart {
  overflow-x: auto;
  margin: 1.3em 0 1.6em;
  border: var(--rule-heavy);
}
.crk-chart table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.93rem; }
.crk-chart caption {
  caption-side: top;
  text-align: left;
  font-family: var(--face-title);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--mist-light);
  /* The caption must not scroll away with the table: it sticks to the left
     edge of the scrolling box and stays readable on a phone. */
  position: sticky;
  left: 0;
  width: min(100%, 78ch);
  white-space: normal;
}
.crk-chart th, .crk-chart td {
  text-align: left; padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.crk-chart tr:last-child td { border-bottom: 0; }
.crk-chart th { font-family: var(--face-title); font-weight: 600; background: var(--mist-light); }

/* =========================================================================
   MAXIM · the dark box, one rule per page
   ========================================================================= */

.crk-maxim {
  margin: 1.5em 0;
  padding: 1rem 1.2rem;
  background: var(--brine-deep);
  color: #dfe6e2;
  border-left: 4px solid var(--amber);
}
.crk-maxim__label {
  margin: 0 0 0.55rem;
  font-family: var(--face-title);
  font-size: 0.78rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--amber);
}
.crk-maxim h4 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--amber);
}
.crk-maxim p { margin: 0; font-size: 0.97rem; line-height: 1.6; }

/* Editorial notice on a page not yet written out. */
.crk-notice {
  margin: 0 0 1.4em;
  padding: 0.9rem 1.1rem;
  border: var(--rule-heavy);
  background: var(--mist-light);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.crk-notice strong { color: var(--ink); }

/* =========================================================================
   ONWARD · read next, links inside sentences
   ========================================================================= */

.crk-onward {
  margin-top: var(--air);
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.crk-onward h2 { font-size: 1.14rem; margin: 0 0 0.55em; border: 0; padding: 0; }
.crk-onward ul { list-style: none; margin: 0; padding: 0; }
.crk-onward li { padding: 0.42rem 0; border-bottom: var(--rule-hair); margin: 0; }
.crk-onward li:last-child { border-bottom: 0; }

/* =========================================================================
   BASE · footer
   ========================================================================= */

.crk-base {
  background: var(--brine);
  color: #cfdcd6;
  border-top: 2px solid var(--rule-brine);
  margin-top: var(--air);
}
.crk-base__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-top: 2.2rem;
  padding-bottom: 1.5rem;
}
@media (max-width: 760px) { .crk-base__row { grid-template-columns: 1fr; } }
.crk-base h2 {
  font-family: var(--face-title);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.65em;
}
.crk-base ul { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.crk-base li { margin-bottom: 0.36em; }
.crk-base a { color: #dde7e2; text-decoration: none; }
.crk-base a:hover { color: var(--amber); }
.crk-base p { margin: 0 0 0.6em; font-size: 0.93rem; color: #b6c5be; }
.crk-base__foot {
  border-top: 1px solid var(--rule-brine);
  padding-top: 0.9rem;
  padding-bottom: 1.3rem;
  font-family: var(--face-title);
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  color: #9db0a8;
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  :root { --mist: #ffffff; --mist-dark: #ffffff; --mist-light: #ffffff; --ink: #000000; --ink-soft: #333333; }
  .crk-gate, .crk-base, .crk-jump, .crk-onward, .crk-rail { display: none !important; }
  .crk-placard { background: #fff; }
  .crk-placard h1, .crk-placard__standfirst, .crk-placard__overline, .crk-placard__line { color: #000; }
  body { font-size: 11pt; }
  .crk-column, .crk-batch { max-width: none; display: block; }
  .crk-chart { overflow: visible; border-color: #000; }
  a { color: #000; }
}