/* =========================================================================
   Ajax Fantasy Football League
   An honour board: ceremonial structure, ridiculous content, straight face.
   Gilt is reserved for championships. If it is gold, someone won something.
   ========================================================================= */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Baize: the green of a card table, not a country club. */
  --baize: #0f3d2e;
  --baize-deep: #082017;
  --brass: #b8873b;
  --brass-bright: #d8ac5e;

  --paper: #eff1ec;
  --paper-sunk: #e5e8e0;
  --ink: #12211a;
  --ink-soft: #55625a;
  --rule: #ccd1c8;

  --display: "Bodoni Moda", Didot, "Bodoni MT", "Times New Roman", serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;

  --gutter: 1rem;
  --measure: 34rem;
  --max: 68rem;
}

@media (min-width: 40em) {
  :root { --gutter: 2rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1510;
    --paper-sunk: #121c16;
    --ink: #e7eae2;
    --ink-soft: #97a397;
    --rule: #2a3a31;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1510;
  --paper-sunk: #121c16;
  --ink: #e7eae2;
  --ink-soft: #97a397;
  --rule: #2a3a31;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--brass);
  color: var(--baize-deep);
  padding: .6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; top: 0; }

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  background: var(--baize-deep);
  color: var(--paper);
  border-bottom: 1px solid rgba(184, 135, 59, .3);
}
.masthead-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.wordmark { text-decoration: none; display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.wordmark-a {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brass-bright);
  letter-spacing: .01em;
}
.wordmark-b {
  font-size: .78rem;
  color: #b8c5bb;
  letter-spacing: .04em;
}
.masthead nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.masthead nav a {
  text-decoration: none;
  font-size: .88rem;
  color: #cdd8cf;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--brass-bright); }
.masthead nav a[aria-current="page"] {
  color: var(--brass-bright);
  border-bottom-color: var(--brass);
}

/* ---- the board: champions roll as hero --------------------------------- */

.board {
  background: var(--baize);
  color: #eef3ee;
  padding: 2.5rem var(--gutter) 3rem;
}
.board-tagline {
  max-width: var(--max);
  padding-right: min(40%, 22rem);
  margin: 0 auto 2rem;
  font-size: .82rem;
  line-height: 1.5;
  color: #9dbaa8;
}

.reign { max-width: var(--max); margin: 0 auto 2.75rem; }
.reign-year {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--brass);
  margin: 0;
}
.reign-name {
  font-size: clamp(3.75rem, 19vw, 8.5rem);
  margin: -.02em 0 .1em -.04em;
  color: var(--brass-bright);
}
.reign-team {
  font-size: clamp(1.05rem, 4.5vw, 1.6rem);
  margin: 0 0 .5rem;
  color: #eef3ee;
  max-inline-size: 34ch;
}
.reign-line { margin: 0; font-size: .9rem; color: #9dbaa8; }
.reign-score { font-variant-numeric: tabular-nums; color: #cfded3; }

/* The roll itself. Year column left, name dominant, team trailing. */
.roll {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(184, 135, 59, .3);
}
.roll-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 .9rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(157, 186, 168, .16);
  align-items: baseline;
}
.roll-year {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.roll-year a { text-decoration: none; }
.roll-year a:hover { color: var(--brass-bright); }
.roll-name {
  font-family: var(--display);
  font-size: 1.35rem;
  color: #eef3ee;
}
.roll-name a { text-decoration: none; }
.roll-name a:hover { color: var(--brass-bright); }
.roll-team {
  grid-column: 2;
  font-size: .82rem;
  color: #9dbaa8;
}
.roll-none { color: #7d9689; font-family: var(--text); font-size: .9rem; }

@media (min-width: 46em) {
  .roll-row { grid-template-columns: 5rem 14rem 1fr; padding: .7rem 0; }
  .roll-team { grid-column: 3; }
  .roll-name { font-size: 1.5rem; }
  .roll-year { font-size: 1.15rem; }
}

/* ---- crest: interior page headers -------------------------------------- */

.crest {
  background: var(--baize);
  color: #eef3ee;
  padding: 2.25rem var(--gutter) 2.5rem;
}
.crest-in { max-width: var(--max); margin: 0 auto; }
.crest-kicker {
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: #9dbaa8;
}
.crest-year, .crest-name {
  margin: 0;
  color: var(--brass-bright);
  font-size: clamp(2.75rem, 12vw, 6rem);
  letter-spacing: -.01em;
}
.crest-year { font-variant-numeric: lining-nums; }
.crest-sub, .crest-champ {
  margin: .6rem 0 0;
  font-size: 1rem;
  color: #cfded3;
  max-inline-size: 42ch;
}
.crest-champ a { color: var(--brass-bright); }
.crest-team { color: #eef3ee; }

.titlelist { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.titlelist li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .8rem;
  align-items: baseline;
  padding: .45rem 0;
  border-top: 1px solid rgba(184, 135, 59, .28);
}
.titlelist-year {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.titlelist a { text-decoration: none; }
.titlelist a:hover .titlelist-year { color: var(--brass-bright); }
.titlelist-team { color: #cfded3; font-size: .95rem; }

/* ---- sheet: the reading surface ---------------------------------------- */

.sheet { padding: 2.25rem var(--gutter) 3.5rem; }
.sheet-in { max-width: var(--max); margin: 0 auto; }

.sheet h2 {
  font-size: clamp(1.45rem, 5vw, 2.1rem);
  margin: 2.75rem 0 .35rem;
}
.sheet h2:first-child { margin-top: 0; }
.sheet h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }

.lede { margin: 0 0 1.1rem; color: var(--ink-soft); max-inline-size: var(--measure); }
.fine {
  margin: 1.2rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-inline-size: var(--measure);
}

.gap {
  border-left: 3px solid var(--brass);
  padding: .1rem 0 .1rem 1.1rem;
  margin: 0 0 2rem;
}
.gap h2 { margin-top: 0; }
.gap p { margin: 0; color: var(--ink-soft); max-inline-size: var(--measure); }

/* ---- ledger: the tables ------------------------------------------------ */

.ledger {
  width: 100%;
  border-collapse: collapse;
  margin: .9rem 0 0;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.ledger caption {
  text-align: left;
  color: var(--ink-soft);
  font-size: .82rem;
  padding-bottom: .6rem;
  max-inline-size: var(--measure);
}
.ledger th, .ledger td {
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.ledger thead th {
  font-family: var(--text);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.ledger tbody th { font-weight: 600; }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger thead .num { text-align: right; }
.ledger .c-name { min-width: 0; }
.ledger a { text-decoration-color: var(--rule); text-underline-offset: 2px; }
.ledger tbody tr:hover { background: var(--paper-sunk); }

.ledger .rank { color: var(--ink-soft); }
.ledger .nil { color: var(--ink-soft); }

/* Championship rows carry the only gold on a paper surface. */
.is-champ th, .is-champ td { background: color-mix(in srgb, var(--brass) 9%, transparent); }
.titles { color: #7d5615; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .titles { color: var(--brass-bright); }
}
.fig-gold { color: #7d5615; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fig-gold { color: var(--brass-bright); }
}

/* Drop the lower-priority columns on a phone rather than scrolling sideways. */
.opt { display: none; }
@media (min-width: 46em) {
  .opt { display: table-cell; }
  .ledger { font-size: .92rem; }
}

/* ---- figures ----------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.1rem 1.5rem;
  margin: 1rem 0 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.figures div { margin: 0; }
.figures dt { font-size: .78rem; color: var(--ink-soft); margin: 0 0 .15rem; }
.figures dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- champions directory ----------------------------------------------- */

.champlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.champcard {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .2rem .9rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.champcard:first-child { border-top: 1px solid var(--ink); }
.champcard > a { text-decoration: none; display: contents; }
.champcard-count {
  /* Archivo, not the display face: Bodoni's "1" is a bare stem and eight of
     the twelve champions have exactly one title. */
  font-family: var(--text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.45;
  color: #7d5615;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.champcard-name { font-family: var(--display); font-size: 1.85rem; line-height: 1.1; }
.champcard > a:hover .champcard-name { text-decoration: underline; text-underline-offset: 3px; }
.champcard-years { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.champcard-years li { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .champcard-count { color: var(--brass-bright); }
}

/* ---- playoff games ----------------------------------------------------- */

.round { margin: 0 0 1.4rem; }
.byes { margin: 0 0 .8rem; font-size: .85rem; color: var(--ink-soft); }
.byes-team { color: var(--ink-soft); }
.games {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem 1.5rem; align-items: start;
}
@media (min-width: 46em) {
  .games { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}
.game {
  border-top: 1px solid var(--ink);
  padding-top: .1rem;
}
.game-final { border-top-color: var(--brass); border-top-width: 2px; }
.side, .game-bye {
  display: grid;
  grid-template-columns: 1.3rem 1fr auto;
  gap: .1rem .6rem;
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  font-size: .9rem;
}
.seed { color: var(--ink-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.game-team { font-weight: 600; }
.game-mgr { grid-column: 2; font-size: .8rem; color: var(--ink-soft); }
.game-score { grid-row: 1; grid-column: 3; font-variant-numeric: tabular-nums; }
.bye { grid-column: 3; font-size: .8rem; color: var(--ink-soft); }
.side.won .game-team { color: #7d5615; }
.side.won .game-score { font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side.won .game-team { color: var(--brass-bright); }
}

/* ---- season nav -------------------------------------------------------- */

.seasonnav {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}
.seasonnav .all { margin-inline: auto; color: var(--ink-soft); }

/* ---- prose (charter) --------------------------------------------------- */

.prose { max-inline-size: var(--measure); }
.prose h2 { font-size: clamp(1.35rem, 4.5vw, 1.8rem); margin: 2.2rem 0 .5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }

/* ---- footer ------------------------------------------------------------ */

.foot {
  background: var(--baize-deep);
  color: #b8c5bb;
  padding: 2rem var(--gutter);
  margin-top: 2rem;
}
.foot-in { max-width: var(--max); margin: 0 auto; }
.foot p { margin: 0 0 .5rem; font-size: .88rem; }
.foot-note { color: #7d9689; font-size: .8rem; max-inline-size: 46ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- charter ----------------------------------------------------------- */
/* Rules read as a legal document: numbered clauses, a hanging brass numeral,
   and a contents list that sticks alongside on a wide screen. */

.charter-layout { display: block; }

.toc {
  margin: 0 0 2.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.sheet .toc-head {
  font-family: var(--text);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 .6rem;
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.toc-list li { break-inside: avoid; margin: 0 0 .3rem; }
.toc-list a {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .4rem;
  font-size: .88rem;
  text-decoration: none;
  align-items: baseline;
}
.toc-num {
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.toc-list a:hover .toc-text { text-decoration: underline; text-underline-offset: 2px; }

.clause { margin: 0 0 2.5rem; scroll-margin-top: 1.5rem; }
.clause-head {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  align-items: baseline;
  font-size: clamp(1.4rem, 5vw, 1.95rem);
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
}
.clause-num {
  font-family: var(--text);
  font-size: .95rem;
  font-weight: 700;
  color: var(--brass);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sub-clauses: 1.1, 7.3 and friends. */
.clause h3 {
  font-family: var(--text);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .005em;
  margin: 1.5rem 0 .35rem;
  color: var(--ink);
}
.clause p,
.clause li { max-inline-size: var(--measure); }
.clause p { margin: 0 0 .8rem; }
.clause ul,
.clause ol { margin: 0 0 .9rem; padding-left: 1.15rem; }
.clause li { margin: 0 0 .25rem; }
.clause ul { list-style: none; padding-left: 0; }
.clause ul li {
  display: grid;
  grid-template-columns: .85rem 1fr;
  gap: .5rem;
  align-items: baseline;
}
.clause ul li::before {
  content: "";
  width: .3rem;
  height: .3rem;
  background: var(--brass);
  transform: translateY(-.15em);
}
.clause ol { list-style: decimal; }
.clause ol li::marker { color: var(--brass); font-weight: 600; }
.charter code {
  font-size: .85em;
  background: var(--paper-sunk);
  padding: .1em .35em;
}

@media (min-width: 58em) {
  .charter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 3rem;
    align-items: start;
  }
  .toc {
    position: sticky;
    top: 1.5rem;
    margin: 0;
    padding: 0 0 0 0;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
    padding-left: 1rem;
    order: 2;
  }
  .toc-list { columns: 1; }
  .charter { order: 1; min-width: 0; }
}

.sheet .toc-head { margin-top: 0; }

/* ---- rosters and auction (Sleeper-era seasons only) -------------------- */

.ledger .c-slot { width: 3.5rem; }
.slot {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.ledger tfoot th,
.ledger tfoot td {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  padding-top: .55rem;
}
.benchline {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
  max-inline-size: var(--measure);
  line-height: 1.7;
}
.benchpts { font-variant-numeric: tabular-nums; color: var(--ink); }
.rosterlink {
  display: inline-block;
  font-size: .8rem;
  color: var(--brass-bright);
  margin-left: .35rem;
}

/* ---- champion photo ---------------------------------------------------- */
/* Every champion picks their own picture. It sits between the gilt header and
   the record, on the baize, because it is a trophy and not an illustration. */

.trophyshot {
  margin: 0;
  background: var(--baize);
  padding: 0 0 1.5rem;
}
.trophyshot picture { display: block; }
.trophyshot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--max);
  margin: 0 auto;
}
.trophyshot figcaption {
  max-width: var(--max);
  margin: .9rem auto 0;
  padding: 0 var(--gutter);
  font-size: .85rem;
  color: #cfded3;
}
.trophyshot .brief {
  display: block;
  margin-top: .3rem;
  color: #9dbaa8;
  font-style: italic;
  max-inline-size: 52ch;
}

@media (min-width: 60em) {
  .trophyshot { padding-bottom: 2rem; }
  .trophyshot img { border-bottom: 3px solid var(--brass); }
}

/* ---- reigning champion's picture on the board -------------------------- */

.reign-shot {
  margin: 1.75rem 0 0;
  max-width: 46rem;
}
.reign-shot picture { display: block; }
.reign-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 3px solid var(--brass);
}
.reign-shot figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  color: #9dbaa8;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
}
.reign-shot figcaption a { color: var(--brass-bright); }

/* Says plainly what the board is showing, without competing with the year. */
.reign-label {
  font-family: var(--text);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #9dbaa8;
  white-space: nowrap;
}
@media (min-width: 40em) {
  .reign-label { font-size: .95rem; }
}

/* =========================================================================
   The Gentlemen's Lounge
   A different room: oxblood and mahogany instead of baize, whisky amber
   instead of brass, because gilt on this site means someone won something.
   Recipes are set as a printed drinks card, with dot leaders carrying the
   measure across to the ingredient.
   ========================================================================= */

.lounge {
  --ox: #3e1e1e;
  --ox-deep: #2a1212;
  --amber: #c08033;          /* on the oxblood ground, and for rules/tints */
  --amber-text: #8f5417;     /* the same idea, dark enough to read on parchment */
  --amber-bright: #dba96b;
  --parchment: #f2ece0;
  --parchment-sunk: #e7dfd0;
  --ox-ink: #241614;
  --ox-soft: #6b554e;
  --ox-rule: #d3c8b6;

  background: var(--parchment);
  color: var(--ox-ink);
}
.lounge .foot { background: var(--ox-deep); }

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

.parlour {
  background: var(--ox);
  color: #f2ece0;
  padding: 2.5rem var(--gutter) 2.75rem;
  border-bottom: 3px double rgba(192, 128, 51, .5);
}
.parlour-in { max-width: var(--max); margin: 0 auto; }
.parlour-kicker {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.parlour-title {
  margin: 0;
  font-size: clamp(2.5rem, 10vw, 5.25rem);
  color: #f5efe3;
  line-height: 1;
}
.parlour-stand {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #d8c7b4;
  max-inline-size: 48ch;
}

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

.lounge-body { padding: 2.5rem var(--gutter) 3.5rem; }
.lounge-in { max-width: var(--max); margin: 0 auto; }
.lounge-lede {
  margin: 0 0 1.5rem;
  color: var(--ox-soft);
  max-inline-size: var(--measure);
  line-height: 1.65;
}

.rule-head {
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  margin: 3rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px double var(--ox-rule);
  color: var(--ox-ink);
  scroll-margin-top: 1rem;
}
.rule-head:first-of-type { margin-top: 1.5rem; }

.houserules {
  margin: 0 0 1rem;
  padding: 0 0 0 1.6rem;
  max-inline-size: var(--measure);
}
.houserules li { margin: 0 0 .6rem; line-height: 1.6; }
.houserules li::marker { color: var(--amber-text); font-weight: 700; }

/* ---- the drinks card --------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.75rem;
  margin: 0 0 1rem;
}
@media (min-width: 46em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
}
@media (min-width: 72em) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  border-top: 2px solid var(--ox-ink);
  padding-top: .8rem;
  /* Push the serve block and the note to the bottom so the cards line up
     across the row the way a printed card would. */
  display: flex;
  flex-direction: column;
}
.card .serve { margin-top: auto; }
.card-head { margin: 0 0 .5rem; }
.card-name {
  font-size: 1.55rem;
  margin: 0;
  line-height: 1.1;
}
.card-origin {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--ox-soft);
}
.card-line {
  margin: 0 0 .9rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ox-soft);
}

/* Dot leaders: the ingredient, then the measure, joined across the gap. */
.pour { margin: 0 0 .9rem; }
.pour-row {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0 0 .25rem;
  font-size: .92rem;
}
.pour-row dt { flex: 0 1 auto; }
.pour-row::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--ox-rule);
  transform: translateY(-.2em);
}
.pour-row dd {
  order: 2;
  margin: 0;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ox-ink);
}

.card-method {
  margin: 0 0 .8rem;
  font-size: .9rem;
  line-height: 1.6;
}
.serve {
  margin: 0 0 .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.5rem;
  padding: .55rem 0;
  border-top: 1px solid var(--ox-rule);
  border-bottom: 1px solid var(--ox-rule);
  font-size: .82rem;
}
.serve div { display: flex; gap: .4rem; }
.serve dt { color: var(--ox-soft); }
.serve dd { margin: 0; font-weight: 600; }

.card-note {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ox-soft);
  font-style: italic;
}

/* ---- the Scotch shelf -------------------------------------------------- */

.shelf { margin: 0 0 2.25rem; }
.shelf-name {
  font-size: 1.35rem;
  margin: 0 0 .25rem;
  color: var(--ox-ink);
}
.shelf-blurb {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: var(--ox-soft);
  max-inline-size: var(--measure);
}
.bottles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem 2rem;
}
@media (min-width: 46em) {
  .bottles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bottle {
  border-top: 1px solid var(--ox-rule);
  padding-top: .55rem;
}
.bottle-top {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
}
.bottle-name { font-weight: 700; font-size: 1rem; }
.bottle-top::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--ox-rule);
  transform: translateY(-.2em);
}
.bottle-price {
  font-variant-numeric: tabular-nums;
  color: var(--amber-text);
  font-weight: 700;
  font-size: .92rem;
}
.bottle-region {
  margin: .1rem 0 .3rem;
  font-size: .78rem;
  color: var(--ox-soft);
}
.bottle-notes {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ox-ink);
}

/* ---- rations table ----------------------------------------------------- */

.lounge .ledger th,
.lounge .ledger td { border-bottom-color: var(--ox-rule); }
.lounge .ledger thead th {
  color: var(--ox-soft);
  border-bottom-color: var(--ox-ink);
}
.lounge .ledger tbody tr:hover { background: var(--parchment-sunk); }
.lounge .is-champ th,
.lounge .is-champ td {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.rations .c-place { white-space: nowrap; font-weight: 700; width: 5.5rem; }

/* ---- essays ------------------------------------------------------------ */

.essays {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: 0 0 1rem;
}
@media (min-width: 52em) {
  .essays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.essay { border-top: 1px solid var(--ox-rule); padding-top: .7rem; }
.essay h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.essay p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ox-ink); }

.colophon {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 3px double var(--ox-rule);
  font-size: .82rem;
  font-style: italic;
  color: var(--ox-soft);
  max-inline-size: var(--measure);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lounge {
    --parchment: #191110;
    --parchment-sunk: #221715;
    --ox-ink: #ece1d2;
    --ox-soft: #a8968b;
    --ox-rule: #3a2a26;
    --amber-text: #dba96b;
  }
}

/* ---- how-to cards ------------------------------------------------------ */
/* Native <details>, so these open with no JavaScript, work when scripting is
   off, and are keyboard operable without any extra wiring. */

.howto {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
  align-items: start;
}
@media (min-width: 52em) {
  .howto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}

.how {
  border: 1px solid var(--ox-rule);
  border-top: 2px solid var(--ox-ink);
  background: color-mix(in srgb, var(--parchment-sunk) 45%, transparent);
}
.how[open] {
  background: color-mix(in srgb, var(--parchment-sunk) 80%, transparent);
  border-color: var(--amber-text);
}

.how summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  justify-content: space-between;
}
.how summary::-webkit-details-marker { display: none; }
.how summary:hover .how-title { color: var(--amber-text); }
.how summary:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: -2px;
}

.how-title {
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.15;
  font-weight: 700;
}

/* A drawn plus that becomes a minus, rather than a rotating glyph. */
.how-mark {
  position: relative;
  flex: 0 0 auto;
  width: .85rem;
  height: .85rem;
  align-self: center;
}
.how-mark::before,
.how-mark::after {
  content: "";
  position: absolute;
  background: var(--amber-text);
  inset: 0;
  margin: auto;
}
.how-mark::before { width: 100%; height: 2px; }
.how-mark::after  { width: 2px; height: 100%; }
.how[open] .how-mark::after { display: none; }

.how-body {
  padding: 0 1rem 1.1rem;
  border-top: 1px dotted var(--ox-rule);
  margin-top: -1px;
}
.how-stand {
  margin: .9rem 0 .9rem;
  font-size: .95rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ox-soft);
}
.how-steps {
  margin: 0 0 .9rem;
  padding-left: 1.5rem;
}
.how-steps li {
  margin: 0 0 .55rem;
  font-size: .92rem;
  line-height: 1.6;
}
.how-steps li::marker { color: var(--amber-text); font-weight: 700; }
.how-note {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--ox-rule);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ox-soft);
}

/* ---- lounge artwork ---------------------------------------------------- */

.parlour-shot { display: block; margin-top: 2rem; }
.parlour-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
  object-position: center 58%;
}

/* Cocktail cards: square photo above the name, flush to the card's top rule. */
.card-shot { display: block; margin: 0 0 .85rem; }
.card-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Scotch tiers: a letterboxed band, not a full 3:2 block, so four of them in
   a row do not push the bottle lists off the screen. */
.shelf-shot { display: block; margin: 0 0 .9rem; max-width: 44rem; }
.shelf-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center center;
  border-bottom: 2px solid var(--amber-text);
}

/* Essay stills sit beside the text, and the essays without one keep the same
   text column so the grid stays aligned. */
.essay-illus {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 1.1rem;
}
.essay-illus h3,
.essay-illus p { grid-column: 2; }
.essay-shot {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  align-self: start;
}
.essay-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (max-width: 26em) {
  .essay-illus { grid-template-columns: 5rem 1fr; gap: 0 .85rem; }
}

/* The soup, presented with the same seriousness as everything else. */
.ration-shot {
  margin: 1.5rem 0 0;
  display: grid;
  gap: .9rem 1.5rem;
  align-items: end;
}
@media (min-width: 46em) {
  .ration-shot { grid-template-columns: 22rem minmax(0, 1fr); }
}
.ration-shot picture { display: block; }
.ration-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 3px solid var(--amber-text);
}
.ration-shot figcaption {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ox-soft);
  max-inline-size: 34ch;
  font-style: italic;
}

/* ---- board hero: two columns on a wide screen -------------------------- */
/* Stacked, the name and the photo together run past the fold on a laptop and
   push the roll of champions — the point of the page — out of sight. Side by
   side they fill the width and the roll starts above the fold. */

@media (min-width: 62em) {
  .board { padding-top: 2rem; }

  .board-tagline {
    padding-right: 0;
    margin-bottom: 1.25rem;
  }

  .reign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    column-gap: 3.5rem;
    align-items: start;
    margin-bottom: 2rem;
  }
  /* One grid item per column. Letting the four text elements be their own
     grid rows makes the taller photo stretch them apart. */
  .reign-text { grid-column: 1; }
  .reign-shot {
    grid-column: 2;
    margin-top: .4rem;
    max-width: none;
  }

  /* The column is narrower than the full page was, so cap the display size
     and let a longer champion's name fall back on the viewport unit. */
  .reign-name { font-size: clamp(3.5rem, 7.5vw, 7.5rem); }
  .reign-team { font-size: clamp(1.1rem, 2.4vw, 1.5rem); max-inline-size: 22ch; }
}

/* Very wide screens: let the board use more of the page than the reading
   measure allows, so the hero does not sit in a narrow strip. */
@media (min-width: 100em) {
  .board .reign,
  .board-tagline,
  .board .roll { max-width: 84rem; }
  .reign { grid-template-columns: minmax(0, 1fr) minmax(0, 38rem); }
}

.reign-tally {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(184, 135, 59, .35);
  font-size: .95rem;
  color: var(--brass-bright);
  max-inline-size: 26ch;
}

/* ---- business meeting -------------------------------------------------- */

.bylaws { counter-reset: bylaw; }

.deck-head {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  margin: 2rem 0 .4rem;
}

.deck { display: grid; gap: 1.5rem; margin: 1.1rem 0 0; }

.suit {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0 .85rem;
  align-items: start;
}
.suit-mark {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: center;
  color: var(--ox-ink);
}
/* Red suits are red on a real card and should be here too. */
.suit-hearts .suit-mark,
.suit-diamonds .suit-mark { color: #9c2b24; }

.suit-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 40em) {
  .suit-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 60em) {
  .suit-cards { grid-template-columns: repeat(4, 11rem); }
}
.suit-cards img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1060 / 1484;
  border: 1px solid var(--ox-rule);
  background: var(--parchment-sunk);
}