/* ==========================================================================
   theme B, DARK ACADEMIC
   the splash page's material carried into the archive: engraved ground, paper
   grain, gold hairlines, ruled frame, small caps.

   the brief says "data is the ornament." thats about not decorating the
   DATA, no rustic flourishes competing with a formula table. its not an
   argument for a bare document. the ornament lives in the ground, the rules,
   and the type; the numbers stay clean and monospaced on top of it.
   ========================================================================== */

:root {
  --paper:     #0B0A08;
  --paper-lit: #17130D;
  --panel:     rgba(233, 224, 203, 0.028);
  --panel-hi:  rgba(233, 224, 203, 0.055);

  --ink:       #E9E0CB;
  --ink-dim:   #C4B89C;
  --muted:     #8C8069;

  --semola:    #C9A24A;
  --semola-hi: #E9CE8C;
  --semola-lo: #7C6026;
  --oliva:     #8AA063;
  --conflict:  #C2564A;

  --rule:      rgba(201, 162, 74, 0.20);
  --rule-firm: rgba(201, 162, 74, 0.42);
  --rule-ink:  rgba(233, 224, 203, 0.10);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  /* newsreader removed 2026-08-13, theme.css overrides --font-body, so it
     never rendered. see theme-fonts.css. */
  --font-body:    "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, serif;
  --font-data:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo,
                  Consolas, "DejaVu Sans Mono", monospace;

  /* paper grain. data URI so it needs no extra request and no CDN. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   ground
   -------------------------------------------------------------------------- */

body {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(201, 162, 74, 0.10) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 0%, var(--paper-lit) 0%, var(--paper) 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* grain and vignette sit above the ground, below the content. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
body::after {
  background: radial-gradient(130% 100% at 50% 30%,
    transparent 40%, rgba(6, 5, 4, 0.55) 100%);
}

.shell { position: relative; z-index: 1; }

/* the ruled frame from the splash page. */
.shell::before {
  content: "";
  position: fixed;
  inset: clamp(0.6rem, 1.6vw, 1.25rem);
  border: 1px solid var(--rule);
  outline: 1px solid rgba(201, 162, 74, 0.09);
  outline-offset: 4px;
  pointer-events: none;
  z-index: 2;
}

::selection { background: var(--semola); color: var(--paper); }

a { color: var(--semola); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--semola-hi); }
a:focus-visible { outline: 1px solid var(--semola); outline-offset: 4px; }

.skip { background: var(--semola); color: var(--paper); }

.num, .rail__id, .formula .num, .stat dd, .gauge__val,
.scale__g, .chip, .meta dt, .stat dt, .formula thead th, .tick {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   rail
   -------------------------------------------------------------------------- */

.rail {
  border-right: 1px solid var(--rule);
  padding-right: var(--sp-md);
}

.rail__archive {
  font-size: var(--t-xs);
  font-variant: small-caps;
  letter-spacing: 0.26em;
  color: var(--semola-hi);
}

.rail__id {
  font-family: var(--font-data);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--semola);
  text-shadow: 0 0 28px rgba(201, 162, 74, 0.28);
}

.rail__conf, .rail__switch {
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}

.rail__nav { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.rail__nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--t-sm);
  font-variant: small-caps;
  letter-spacing: 0.12em;
}
.rail__nav a:hover { color: var(--semola-hi); }

.marker--leonardough { background: var(--semola); box-shadow: 0 0 10px rgba(201,162,74,.55); }
.marker--lineage     { background: var(--oliva); }

/* --------------------------------------------------------------------------
   header, the plate
   -------------------------------------------------------------------------- */

.head {
  position: relative;
  border-bottom: none;
  padding-bottom: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}

/* double rule with a centred diamond, like an engraved title plate. */
.head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background:
    linear-gradient(to right, var(--rule-firm), var(--rule-firm)) top/100% 1px no-repeat,
    linear-gradient(to right, transparent, var(--rule), transparent) bottom/100% 1px no-repeat;
}

.head__kicker {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--semola);
  opacity: 0.9;
}

.head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  letter-spacing: 0.005em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6, 5, 4, 0.8);
}

.meta dt {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--muted);
}
.meta dd { color: var(--ink-dim); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   panels, each section headed by a gold diamond and a small-caps label
   -------------------------------------------------------------------------- */

.panel { margin-bottom: var(--sp-xl); }

.panel > h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  padding-bottom: 0;
  border-bottom: none;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.26em;
  text-transform: none;
  color: var(--semola-hi);
}

.panel > h2::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  background: var(--semola);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(201, 162, 74, 0.6);
}

.panel > h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--rule-firm), transparent);
}

/* --------------------------------------------------------------------------
   status chips
   -------------------------------------------------------------------------- */

.chip {
  border-color: var(--semola);
  background: linear-gradient(160deg, var(--semola-hi), var(--semola));
  color: #17120A;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  box-shadow: 0 2px 16px rgba(201, 162, 74, 0.22);
}
.chip--outlined { background: transparent; color: var(--semola-hi); box-shadow: none; }
.chip--dashed   { background: transparent; color: var(--muted); border-color: var(--muted); box-shadow: none; }
.chip--hatched  {
  background: repeating-linear-gradient(45deg,
    rgba(201,162,74,.22) 0 3px, transparent 3px 7px);
  color: var(--semola-hi);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   key figures, specimen plates
   -------------------------------------------------------------------------- */

.stats {
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule-firm);
  box-shadow: inset 0 1px 0 rgba(233,224,203,.05), 0 8px 34px rgba(0,0,0,.42);
}

.stat {
  background:
    linear-gradient(180deg, var(--panel-hi), var(--panel)) ,
    var(--paper);
  padding: var(--sp-sm);
  text-align: center;
}
.stat dt {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat dd {
  margin-top: var(--sp-2xs);
  font-size: var(--t-lg);
  font-weight: 300;
  color: var(--semola-hi);
  text-shadow: 0 0 22px rgba(201, 162, 74, 0.3);
}

/* --------------------------------------------------------------------------
   formula table, an engraved plate
   -------------------------------------------------------------------------- */

.formula {
  border-top: 1px solid var(--rule-firm);
  border-bottom: 1px solid var(--rule-firm);
}
.formula caption {
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
}
.formula thead th {
  padding-top: 0.7rem;
  padding-bottom: 0.55rem;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--semola);
  border-bottom: 1px solid var(--rule);
}
.formula tbody th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-base);
  color: var(--ink);
}
.formula tbody tr + tr th,
.formula tbody tr + tr td { border-top: 1px solid var(--rule-ink); }
.formula tbody tr:nth-child(odd) th,
.formula tbody tr:nth-child(odd) td { background: rgba(233, 224, 203, 0.018); }
.formula tbody tr:hover th,
.formula tbody tr:hover td { background: rgba(201, 162, 74, 0.07); }
.formula .num { color: var(--semola-hi); font-size: var(--t-base); }
.formula .note { color: var(--muted); font-style: italic; font-size: var(--t-sm); }
.formula tfoot th,
.formula tfoot td {
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.65rem;
  color: var(--semola-hi);
  font-variant: small-caps;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   hydration gauge
   -------------------------------------------------------------------------- */

.gauge__label { font-variant: small-caps; letter-spacing: 0.13em; color: var(--ink-dim); font-size: var(--t-sm); }
.gauge__track {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
.gauge__fill { box-shadow: 0 0 18px rgba(201, 162, 74, 0.34); }
.gauge__fill--added { background: linear-gradient(90deg, #4A422F, var(--muted)); box-shadow: none; }
.gauge__fill--true  { background: linear-gradient(90deg, var(--semola-lo), var(--semola-hi)); }
.gauge__val { color: var(--semola-hi); }
.gauge__desc { color: var(--muted); font-style: italic; }

/* --------------------------------------------------------------------------
   flags & notices
   -------------------------------------------------------------------------- */

.flags {
  border: 1px solid rgba(194, 86, 74, 0.4);
  border-left: 3px solid var(--conflict);
  background:
    linear-gradient(180deg, rgba(194, 86, 74, 0.13), rgba(194, 86, 74, 0.05));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.flags h2 {
  color: var(--conflict);
  font-variant: small-caps;
  letter-spacing: 0.2em;
  font-family: var(--font-display);
}
.alert {
  border-left: 3px solid var(--conflict);
  background: rgba(194, 86, 74, 0.11);
}
.hint, .empty { color: var(--muted); font-style: italic; }
.nr { color: var(--muted); }

/* --------------------------------------------------------------------------
   prose, this is where the serif earns its keep
   -------------------------------------------------------------------------- */

#process p, #bake p, #outcome p, #next p {
  max-width: 40rem;
  font-size: var(--t-md);
  line-height: 1.78;
  color: var(--ink-dim);
}

#process p::first-letter,
#outcome p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem);
  line-height: 0.84;
  padding: 0.1em 0.12em 0 0;
  color: var(--semola);
  text-shadow: 0 0 24px rgba(201, 162, 74, 0.35);
}
#process p.empty::first-letter,
#outcome p.empty::first-letter { float: none; font-size: inherit; color: inherit; text-shadow: none; padding: 0; }

/* --------------------------------------------------------------------------
   scale
   -------------------------------------------------------------------------- */

.scale__controls label { color: var(--muted); font-size: var(--t-xs); letter-spacing: 0.18em; }
.scale__controls input {
  background: rgba(0, 0, 0, 0.4);
  color: var(--semola-hi);
  border: 1px solid var(--rule-firm);
  font-family: var(--font-data);
}
.scale__controls input:focus-visible { outline: 1px solid var(--semola); outline-offset: 2px; }
.scale__controls button {
  background: transparent;
  color: var(--semola-hi);
  border: 1px solid var(--semola);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  text-transform: none;
  font-size: var(--t-sm);
}
.scale__controls button:hover { background: var(--semola); color: var(--paper); }
.scale__list li + li { border-top: 1px solid var(--rule-ink); }
.scale__item { font-family: var(--font-display); }
.scale__g { color: var(--semola-hi); }
.scale__u { color: var(--muted); }
.scale__total {
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.7rem;
  color: var(--semola-hi);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: var(--t-md);
}

/* --------------------------------------------------------------------------
   plot
   -------------------------------------------------------------------------- */

.plot svg {
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.5rem;
}
.axis { stroke: var(--rule-firm); }
.tick, .axlabel { fill: var(--muted); font-size: 10px; letter-spacing: 0.08em; }
.dot { fill: none; stroke: var(--semola); stroke-width: 1.5; opacity: 0.85; }
.dot--solid   { fill: var(--semola); fill-opacity: 0.28; }
.dot--current {
  fill: var(--conflict); fill-opacity: 1;
  stroke: #E07C6E; stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(194, 86, 74, 0.9));
}
.plot figcaption { color: var(--muted); font-style: italic; }

/* --------------------------------------------------------------------------
   tags & footer
   -------------------------------------------------------------------------- */

.tags li {
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: var(--t-sm);
  background: rgba(233, 224, 203, 0.03);
}

.foot {
  position: relative;
  border-top: none;
  padding-top: var(--sp-lg);
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
.foot::before {
  content: "❦";
  position: absolute;
  top: 0.6rem; left: 50%;
  transform: translateX(-50%);
  color: var(--semola);
  font-style: normal;
  font-size: 1rem;
  opacity: 0.75;
}
.foot p { max-width: 46rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   print, a dark theme must become ink on paper
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  body::before, body::after, .shell::before { display: none !important; }
  .stat, .panel, .flags, .alert, .formula tbody tr, .plot svg { background: #fff !important; }
  .rail__id, .panel > h2, .head__kicker, .formula thead th, .formula .num,
  .stat dd, .scale__total, .formula tfoot th, .formula tfoot td,
  .gauge__val, .foot::before { color: #000 !important; text-shadow: none !important; }
  .chip { background: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; }
  .chip--hatched { background: repeating-linear-gradient(45deg, #ccc 0 3px, #fff 3px 7px) !important; }
  .gauge__fill--true  { background: #555 !important; box-shadow: none !important; }
  .gauge__fill--added { background: #bbb !important; }
  #process p::first-letter, #outcome p::first-letter { color: #000 !important; text-shadow: none !important; }
  .dot { stroke: #000 !important; }
  .dot--current { fill: #000 !important; filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   small screens, the ornament has to shrink with everything else, or it
   starts competing with the content instead of framing it.
   ========================================================================== */

@media (max-width: 900px) {
  /* the rail is a header strip now; a right border makes no sense. */
  .rail {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
  }
  .rail__nav { border-top: none; padding-top: 0; }
  .rail__id { text-shadow: 0 0 18px rgba(201, 162, 74, 0.24); }
}

@media (max-width: 620px) {
  /* pull the frame in tight so it doesnt crowd the text. */
  .shell::before { inset: 0.45rem; outline-offset: 3px; }

  /* tracking that reads as elegant at 1200px reads as broken at 380px. */
  .head__kicker { letter-spacing: 0.22em; }
  .panel > h2   { letter-spacing: 0.16em; gap: 0.5rem; }
  .rail__archive { letter-spacing: 0.18em; }


  /* row striping is noise once the table is a stack; the rule does the work. */
  .formula tbody tr:nth-child(odd) th,
  .formula tbody tr:nth-child(odd) td { background: none; }
  .formula tbody tr + tr { border-top: 1px solid var(--rule-ink); }
  .formula tbody tr + tr th,
  .formula tbody tr + tr td { border-top: none; }
  .formula tbody th { color: var(--semola-hi); }
  .formula td::before { color: var(--muted); }
  .formula tfoot tr { border-top: 1px solid var(--rule-firm); }

  .stat { padding: var(--sp-sm) var(--sp-xs) 0.7rem; }
  .flags { box-shadow: none; }
  .stats { box-shadow: inset 0 1px 0 rgba(233,224,203,.05), 0 4px 18px rgba(0,0,0,.4); }
}

@media (max-width: 420px) {
  .head__kicker { letter-spacing: 0.16em; font-size: 0.6rem; }
}

/* ==========================================================================
   THE RECIPE BOX, index pages
   pale cards scattered on the dark ground, like a box tipped out onto a table.
   the tilt is deterministic per record ID, so the deck looks tossed but never
   reshuffles between builds or between visits.
   ========================================================================== */

.idx {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--gutter);
}

/* --- Index header --------------------------------------------------------- */

.idx__head { text-align: center; margin-bottom: var(--sp-xl); }

.idx__kicker {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--semola);
}

.idx__head h1 {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6, 5, 4, 0.85);
}

.idx__starter {
  max-width: 40rem;
  margin: 0 auto var(--sp-sm);
  font-size: var(--t-base);
  font-style: italic;
  color: var(--ink-dim);
}

.idx__count {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.idx__head .hint { max-width: 40rem; margin-inline: auto; }

.idx__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--rule);
}
.idx__nav a {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  text-decoration: none;
  font-size: var(--t-sm);
  padding: 0.4rem 0;
}
.idx__nav a:hover { text-decoration: underline; }

/* --- The deck ------------------------------------------------------------- */

.deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(1.4rem, 1rem + 2.4vw, 2.8rem);
  margin: 0;
  padding: var(--sp-sm) 0;
  list-style: none;
}

.card-slot { display: flex; }

.card {
  --card-paper: #E7DFCB;
  --card-ink:   #23201A;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: var(--card-ink);
  background: var(--card-paper);
  border: 1px solid rgba(35, 32, 26, 0.28);
  border-radius: 2px;
  overflow: hidden;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.36);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
}

/* aged tint + a faint fibre, so it reads as card stock rather than a white box. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(190deg, rgba(122, 96, 46, 0.07), rgba(76, 58, 30, 0.16));
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.card:hover,
.card:focus-visible {
  transform: rotate(0deg) translateY(-8px) scale(1.025);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.58),
    0 40px 90px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--semola);
  z-index: 5;
}
.card:focus-visible { outline: 2px solid var(--semola); outline-offset: 4px; }

/* --- Card photograph ------------------------------------------------------ */

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #191510;
  border-bottom: 1px solid rgba(35, 32, 26, 0.3);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* warm the photo toward the archive's palette without washing it out. */
  filter: saturate(0.82) contrast(1.06) sepia(0.14);
  transition: transform 500ms cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__conf {
  position: absolute;
  right: 0; bottom: 0;
  padding: 0.15em 0.5em;
  font-family: var(--font-data);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(11, 10, 8, 0.8);
  color: #D9C79A;
}

/* no photograph: a typographic plate, ruled like a blank index card. */
.card__media--none {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 21px, rgba(35, 32, 26, 0.14) 21px 22px),
    linear-gradient(165deg, #DED4BB, #CFC3A5);
}
.card__stamp {
  font-family: var(--font-data);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.1rem);
  letter-spacing: 0.08em;
  color: rgba(35, 32, 26, 0.24);
}

/* --- Card body ------------------------------------------------------------ */

.card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-sm) var(--sp-sm) var(--sp-md);
  flex: 1 1 auto;
}

.card__id {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  color: #6E5A2C;
}

.card__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.24;
  color: var(--card-ink);
  text-wrap: balance;
}

.card__status {
  margin-top: 0.1rem;
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B665A;
}

/* status as a stripe down the card's left edge, survives greyscale. */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 2;
  background: #6E5A2C;
}
.card--outlined::before { background: repeating-linear-gradient(to bottom, #6E5A2C 0 7px, transparent 7px 11px); }
.card--dashed::before   { background: repeating-linear-gradient(to bottom, #8C8069 0 3px, transparent 3px 9px); }
.card--hatched::before  { background: repeating-linear-gradient(45deg, #8C4A3C 0 3px, transparent 3px 6px); }

.card__figs { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.card__fig {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #4E4738;
}
.card__fig b { color: #7A6430; font-weight: 400; }

.card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.card__tags span {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 0.08em 0.4em;
  border: 1px solid rgba(35, 32, 26, 0.22);
  color: #5C564A;
}

/* --- Landing gates -------------------------------------------------------- */

.gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
}
.gate {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--panel-hi), transparent);
  transition: border-color 240ms ease, transform 240ms ease;
}
.gate:hover { border-color: var(--semola); transform: translateY(-4px); }
.gate__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #17130D; }
.gate__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05) sepia(.16); }
.gate__body { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--sp-md); }
.gate__kicker { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.16em; color: var(--muted); }
.gate__title { font-family: var(--font-display); font-size: var(--t-lg); color: var(--semola-hi); }
.gate__starter { font-size: var(--t-sm); font-style: italic; color: var(--ink-dim); }

/* --- Detail-page photograph plate ---------------------------------------- */

.plate-photo { margin: 0 0 var(--sp-xl); }
.plate-photo > img {
  width: 100%;
  max-height: min(60vh, 30rem);
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-firm);
  filter: saturate(0.85) contrast(1.05) sepia(0.12);
}
.plate-photo__more { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.plate-photo__more img {
  width: clamp(4.5rem, 14vw, 7rem);
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  filter: saturate(0.85) contrast(1.05) sepia(0.12);
}
.plate-photo figcaption {
  margin-top: var(--sp-xs);
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--muted);
}

.idx__foot {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}
.idx__foot p { max-width: 46rem; margin: 0 auto var(--sp-xs); }

@media (prefers-reduced-motion: reduce) {
  .card { transform: none; transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
  .card__media img, .card:hover .card__media img { transition: none; transform: none; }
}

@media print {
  .card { transform: none !important; box-shadow: none !important; break-inside: avoid; }
  .deck { display: block; }
}

/* ==========================================================================
   COURSES, Cucina Archive, structure without content
   deliberately quieter than a recipe card. an empty room should not dress
   itself up as a full one.
   ========================================================================== */

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.1rem, 0.8rem + 1.8vw, 2rem);
  margin: 0;
  padding: var(--sp-sm) 0;
  list-style: none;
  counter-reset: none;
}

.course-slot { display: flex; }

.course {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: var(--sp-md);
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px dashed var(--rule-firm);
  background: linear-gradient(180deg, rgba(233, 224, 203, 0.03), transparent 70%);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), border-color 260ms ease,
              background 260ms ease;
}
.course:hover, .course:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--semola);
  border-style: solid;
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.09), transparent 70%);
  color: var(--ink);
}
.course:focus-visible { outline: 1px solid var(--semola); outline-offset: 4px; }

.course__n {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  color: var(--muted);
}
.course__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--semola-hi);
}
.course__desc { font-size: var(--t-sm); font-style: italic; line-height: 1.5; }
.course__state {
  margin-top: auto;
  padding-top: var(--sp-sm);
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Whether a course holds anything, as a mark rather than a sentence.

   Solid dot: there is something in the room. Dashed ring: there is not, and
   that is recorded rather than hidden - the same read as the dashed day on the
   sourdough calendar. The words stay for anyone not going by colour, and the
   dot is aria-hidden so a screen reader gets the sentence and not a bullet. */
.course__state {
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.course__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.course__state--filled { color: var(--ink-dim); }
.course__state--filled .course__dot { background: var(--oliva); }

.course__state--empty .course__dot {
  background: none;
  border: 1px dashed var(--muted);
}

/* On a course page the same mark sits in the standfirst, where it is one line
   of running text rather than the last row of a card. */
.course__state--inline {
  display: inline-flex;
  margin-top: 0;
  padding-top: 0;
}

/* An empty room reads a shade quieter than a full one, without going invisible. */
.course-slot.is-empty .course__name { color: var(--ink-dim); }

/* --- The empty-room notice ------------------------------------------------ */

.awaiting {
  max-width: 38rem;
  margin: var(--sp-xl) auto;
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
  border: 1px dashed var(--rule);
}
.awaiting__mark { margin: 0 0 var(--sp-sm); font-size: 1.4rem; color: var(--semola); opacity: 0.7; }
.awaiting h2 {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.awaiting p { margin: 0 auto var(--sp-sm); max-width: 32rem; color: var(--ink-dim); }
.awaiting__foot { font-style: italic; font-size: var(--t-sm); color: var(--muted); }

/* --- Empty gate (Cucina, on the hub) -------------------------------------- */

.gate--empty .gate__img {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(233,224,203,.022) 0 8px, transparent 8px 16px),
    #14110D;
}
.gate__empty { font-size: 2rem; color: var(--semola); opacity: 0.5; }
.gate--empty { border-style: dashed; }

.marker--cucina { background: var(--oliva); }

/* --- Grouped decks on the taste pages ------------------------------------- */

.group { margin-bottom: var(--sp-xl); }
.group__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 var(--sp-md);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--semola-hi);
}
.group__n {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-left: auto;
}

.card__judged {
  border-style: dashed !important;
  color: #7A6430 !important;
  font-style: italic;
}

/* --- By-starter list on the sourdough hub --------------------------------- */

.byarchive { margin-top: var(--sp-xl); }
.byarchive h2 {
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-sm);
  font-variant: small-caps;
  letter-spacing: 0.24em;
  color: var(--semola);
}
.byarchive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.byarchive a {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  text-decoration: none;
  border: 1px solid var(--rule);
  transition: border-color 220ms ease, background 220ms ease;
}
.byarchive a:hover { border-color: var(--semola); background: rgba(201,162,74,.06); }
.byarchive strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  color: var(--semola-hi);
}
.byarchive em { display: block; margin-top: 0.2rem; font-size: var(--t-sm); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .course, .course:hover, .course:focus-visible { transform: none; transition: none; }
}

/* --- Cucina photography ---------------------------------------------------
   the sepia wash that suits a monochrome crumb shot kills a plate of food.
   Cucina images keep their colour; only the contrast is nudged.
   ------------------------------------------------------------------------- */

.gate--cucina .gate__img img,
.gate--cucina .gate__img picture { width: 100%; height: 100%; display: block; }
.gate--cucina .gate__img img { object-fit: cover; filter: saturate(0.98) contrast(1.03); }
.gate--cucina .gate__img { background: #14110D; }

.cucina-hero {
  margin: 0 0 var(--sp-xl);
  position: relative;
}
.cucina-hero img {
  width: 100%;
  max-height: min(52vh, 26rem);
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-firm);
  filter: saturate(0.98) contrast(1.03);
}
/* sink the bottom edge into the page rather than cutting it off hard. */
.cucina-hero::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(11, 10, 8, 0.82));
}

/* --- Showcase photography -------------------------------------------------
   gate and hero images are the shopfront; they keep their colour. only the
   small catalogue thumbnails inside a deck take the archive's warm wash, where
   the point is texture and consistency rather than appetite.
   ------------------------------------------------------------------------- */

.gate--photo .gate__img img,
.gate--photo .gate__img picture { width: 100%; height: 100%; display: block; }
.gate--photo .gate__img img { object-fit: cover; filter: saturate(0.98) contrast(1.03); }

.cucina-hero picture { display: block; }

/* course tilt as classes rather than a style attribute, thats what lets the
   Cucina subdomain run a CSP with no 'unsafe-inline' for styles at all. */
.course-slot.tilt0 .course{ --tilt:-3deg }
.course-slot.tilt1 .course{ --tilt:-2deg }
.course-slot.tilt2 .course{ --tilt:-1deg }
.course-slot.tilt3 .course{ --tilt: 0deg }
.course-slot.tilt4 .course{ --tilt: 1deg }
.course-slot.tilt5 .course{ --tilt: 2deg }
.course-slot.tilt6 .course{ --tilt: 3deg }

/* one starter, said once and plainly, the two record sets are a difference of
   source document, not of culture. */
.starterline{
  max-width:46rem;
  margin:0 0 var(--sp-lg);
  padding:var(--sp-sm) var(--sp-md);
  border-left:2px solid var(--rule-firm);
  background:linear-gradient(90deg, rgba(201,162,74,.06), transparent 70%);
  font-size:var(--t-sm);
  font-style:italic;
  line-height:1.7;
  color:var(--ink-dim);
}
.starterline b{
  font-style:normal;
  font-variant:small-caps;
  letter-spacing:.14em;
  color:var(--semola-hi);
  margin-right:.4em;
}
.is-index .starterline{ margin-inline:auto; }

/* the two halves of the archive get their own marker colour */
.marker--savory{ background:var(--semola); box-shadow:0 0 10px rgba(201,162,74,.55); }
.marker--sweet { background:var(--conflict); box-shadow:0 0 10px rgba(194,86,74,.5); }

/* ---- Method ----------------------------------------------------------------
   Its own class, not .deck. Method used to borrow the card grid the course
   pages browse with: three columns at desktop, list-style stripped, no numerals
   and no way to tell whether to read across or down. A browsing layout aimed at
   a sequence.

   One column now, with the numerals hung in the margin on a hairline. The line
   is the whole point - it draws the thread from one step to the next, which is
   what the grid could never do. */
.method__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 3.1rem;
  border-left: 1px solid var(--rule, #3a3323);
}

.method__steps li { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }
.method__steps li:last-child { margin-bottom: 0; }

.method__steps li::before {
  content: counter(list-item);
  position: absolute;
  left: -4.05rem;
  top: -0.15rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg, #14100a);
  border: 1px solid var(--oliva);
  color: var(--semola-hi);
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.method__steps li p { margin: 0; line-height: 1.75; }

/* The first word of a step, so scanning the ledes gives the procedure. */
.method__steps b {
  color: var(--semola-hi);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* Only appears when a recipe declares stages. Two of nine do. */
.method__stage {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--oliva);
  font-size: 1.05rem;
  margin: 2.2rem 0 1rem;
  padding-left: 3.1rem;
}

.method__stage:first-of-type { margin-top: 0; }