/*
  The website's stylesheet. One page, one look: the felt for the masthead and
  the strip, cream for everything else.

  Colours are the brand kit's tokens, unaltered — assets/brand/euchre-clubhouse-assets/BRANDING.md
  in the repository root. Headings are Cormorant Garamond, semibold, all caps,
  tracked 0.30em, as the kit asks. Body is the system sans, as the kit allows.
  The script face appears only inside the lockup, where it is already outlined.

  A single look rather than a light and a dark one: a marketing page is read
  once, and the felt is the brand. Every colour is explicit so no host theme
  shows through.
*/

:root {
  --felt: #0b4a31;
  --felt-deep: #06301f;
  --felt-light: #146b47;
  --cream: #f4e9ce;
  --cream-deep: #e3d2ac;
  --cream-light: #fffbf0;
  --gold: #c9a227;
  --gold-light: #e8c86a;
  --gold-deep: #9c7b18;
  --ink: #14231b;
  --ink-soft: #3d4a42;
  --card: #ffffff;
  --rule: #d9cdae;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap--narrow { max-width: 720px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Headings: the kit's treatment. */
/*
  ⚠️ **Bigger, at his ask** — *"maybe the header title should be a little
  larger."* 1.05rem to 1.3rem, which is a third up and still below the card
  headings at 1.35rem: a section label that outgrew the cards under it would
  start competing with them.

  **And a gold rule under it**, which is the flair he asked whether there was
  room for. It costs no words and no picture, it is the brand's one metal, and
  it fades at both ends so it reads as a flourish rather than a border. Every
  section gets the same one, which is what makes it rhythm rather than
  decoration.
*/
.eyebrow {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--felt);
  margin: 0 0 1.5rem;
  text-align: center;
}
/*
  ⚠️ **The pip goes in the divider, and nowhere near the cards** — his question:
  *"should we do anything with any mini icons related to cards? I don't want to
  go over crafty either."*

  **Not on the cards**, for two reasons about this page rather than about taste.
  Twenty-one cards means twenty-one glyphs, and a mark repeated that often stops
  being a mark and becomes texture — the exact complaint he had just made about
  the white cards. And two of the four bands already carry a magnifier in the
  top right, so an icon in the top left would put two glyphs on one card
  competing for the same glance.

  **One per section is the dose that works.** Six glyphs down a long page is a
  motif and cannot become noise, because there is never more than one on screen.
  It is also the only ornament here that means anything: this is a card game,
  the lockup already carries the four suits, and the divider was a plain rule
  wanting a centre.

  ⚠️ **They are jacks, not bare pips** — his ask: *"let me replace the heart
  with a jack. As in, cards or a jack of hearts and a jack of diamonds, which
  are the bauers?"*

  **His euchre is right and it makes the motif better.** The bowers are the jack
  of trump and the jack of the other suit of that colour, so J♥ and J♦ are the
  two of them whenever a red suit is trump, and J♠ and J♣ whenever it is black.
  That is why every divider is a jack rather than only the red ones: in this
  game the jacks are the cards that matter, whichever suit is turned, and a page
  whose six dividers are all jacks is an in-joke every euchre player gets
  without being told.

  **Drawn as a corner index, J and the pip**, which is how a card is read in a
  hand. The Unicode playing-card glyphs (🃋 and its family) were the obvious
  alternative and are the wrong tool here: at thirteen points a whole card is
  mush, and they are missing from enough fonts that some visitor would get a
  tofu box in the middle of a gold rule.

  **In gold, whatever the suit.** Hearts and diamonds are red in a deck and red
  is not on this page — two red glyphs would introduce a colour for the sake of
  one character each, and the heart falls on the felt band where red on green is
  both a clash and a contrast failure. So the suit changes down the page and the
  colour never does.
*/
.eyebrow::after {
  content: "J\2660";
  display: block;
  width: 10rem;
  margin: 0.55rem auto 0;
  /* Two characters rather than one, so a touch more presence: it has to read as
     a card index and not a smudge. */
  font-size: 0.72em;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--gold);
  background-image:
    linear-gradient(90deg, transparent, var(--gold)),
    linear-gradient(90deg, var(--gold), transparent);
  background-size: 3.4rem 1px, 3.4rem 1px;
  background-position: left center, right center;
  background-repeat: no-repeat;
}
/* Spades, hearts, diamonds, clubs, and round again — a deck's own order. */
.replaces .eyebrow::after { content: "J\2665"; }
.worth .eyebrow::after { content: "J\2666"; }
.glance .eyebrow::after { content: "J\2663"; }
.steps .eyebrow::after { content: "J\2660"; }
.pricing .eyebrow::after { content: "J\2665"; }
.eyebrow--light { color: var(--gold-light); }
.eyebrow--light::after {
  color: var(--gold-light);
  background-image:
    linear-gradient(90deg, transparent, var(--gold-light)),
    linear-gradient(90deg, var(--gold-light), transparent);
}
/*
  ⚠️ **The increase is a desktop increase.** At 1.3rem with 0.30em of tracking,
  *What it replaces from other services* ran to three lines on a phone — a wall
  of spaced capitals where a label should be. The tracking gives way before the
  size does, because the letter-spacing is what makes a long heading wrap and
  the size is what he asked for.
*/
@media (max-width: 560px) {
  .eyebrow { font-size: 1.12rem; letter-spacing: 0.2em; }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.btn--gold {
  background: linear-gradient(var(--gold-light), var(--gold));
  border-color: var(--gold-deep);
  color: var(--felt-deep);
}
.btn--gold:hover { background: var(--gold-light); }
/* A quiet button that works on cream. */
.btn--outline {
  background: transparent;
  border-color: var(--felt);
  color: var(--felt);
}
.btn--outline:hover { background: var(--felt); color: var(--cream); }
.btn--big { font-size: 1.15rem; padding: 1rem 2.2rem; }

/* 1. Masthead */
.masthead {
  background:
    radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-deep) 100%);
  color: var(--cream);
}
.masthead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.9rem 20px 1.9rem;
}
.lockup {
  --lockup-w: min(220px, 60vw);
  width: var(--lockup-w);
  height: auto;
  /* The SVG's canvas is 1200 by 1000 with the artwork between y 158 and 836:
     trim the empty bands (15.8% and 16.4% of the height, as a share of the width
     at 5:6) so the banner is as tall as what is drawn in it. */
  margin: calc(var(--lockup-w) * -0.132) 0 calc(var(--lockup-w) * -0.137);
}
.masthead__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.1rem 0 0;
  /* Letter-spacing adds a gap after the last letter of each line too, which
     pushes spaced capitals left of centre. A matching pad on the left puts
     them back; balance splits the two lines evenly instead of leaving one
     word ("MASTER") on its own. */
  padding-left: 0.30em;
  text-wrap: balance;
}
.masthead__punch {
  margin: 0.5rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--cream-light);
  text-wrap: balance;
}

/* The menu strip under the banner: the banner and the menu read as one block,
   and the gold rule closes both. Not sticky; if it ever is, keep it under 60px. */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Ten links since Clubs and Calendar replaced Find a game, 8 October 2026:
     tighter again so they stay on one line on a 1280 laptop, and a second row
     rather than running off the edge on anything narrower. */
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  min-height: 54px;
  padding: 0.6rem 20px;
  background: var(--felt-deep);
  border-top: 1px solid rgba(201, 162, 39, 0.45);
  border-bottom: 3px solid var(--gold);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu a { color: var(--cream); text-decoration: none; padding-left: 0.12em; }
.menu a:hover, .menu a:focus-visible { color: var(--gold-light); }
.menu a:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }

/* The description and the two doors, on the cream */
.intro { padding: 2.2rem 0 0; text-align: center; }
.intro__line {
  margin: 0 auto;
  max-width: 54em;
  font-size: 1.05rem;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--ink-soft);
}
.intro__actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
/* The one line of small print the gold button needs beside it — what pressing it costs. */
.intro__reassure {
  margin: 0.9rem auto 0;
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
/* The white-glove line: small print with one link-styled button, not a fourth door. */
.intro__consult {
  margin: 0.6rem auto 0;
  max-width: 38em;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.intro__consult strong { color: var(--felt); }
.intro__consult-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
/* Smaller than the three doors: help with starting, not a fourth way in. */
.btn--small { padding: 0.45rem 1.1rem; font-size: 0.9rem; border-width: 1.5px; }
button.btn { cursor: pointer; font-family: inherit; }
/*
  Blue, his ask, 12 October 2026 — the one colour on the page that is not felt
  or gold, so the offer of help is found. Solid with white type rather than an
  outline: the page is light-only (`color-scheme: light`), but phones that
  force-darken pages (Samsung Internet, Chrome's dark web pages) invert an
  outline into something unreadable, and a filled button survives both ways.
*/
.btn--blue {
  background: #1f5fa8;
  border-color: #174a85;
  color: #fff;
}
.btn--blue:hover { background: #174a85; }
.btn--blue:focus-visible { outline: 3px solid #8db8ea; outline-offset: 3px; }
/*
  ⚠️ **Call only where it dials** — his ask, 12 October 2026: a computer or a
  tablet cannot ring the number. No page can ask a device whether it makes
  calls, so this reads a phone as a touch screen that is phone-sized either way
  round (600 across upright, 500 tall on its side); every iPad is wider than
  that. The pop-up still prints the number for everybody else.
*/
.call-phone-only { display: none; }
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .call-phone-only { display: inline-block; }
}
@media (prefers-color-scheme: dark) {
  .btn--blue { background: #2b6cb8; border-color: #8db8ea; color: #fff; }
  .btn--blue:hover { background: #1f5fa8; }
}

/* The white-glove pop-up — a card on the dimmed page, the zoom's backdrop. */
.consult {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 1.6rem 1.4rem 1.4rem;
  border: 0;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  overflow: auto;
}
.consult::backdrop { background: rgba(6, 48, 31, 0.78); }
.consult__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--felt);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.consult__close:hover { background: var(--felt-deep); }
.consult__title { margin: 0 2.4rem 0.4rem 0; color: var(--felt); font-size: 1.35rem; }
.consult__lead { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }
.consult__lead a { color: var(--felt); font-weight: 600; white-space: nowrap; }
.consult__form { display: grid; gap: 0.7rem; }
.consult__form label { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.consult__form input,
.consult__form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--cream-deep);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
}
.consult__form input:focus,
.consult__form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.consult__form .btn { justify-self: start; margin-top: 0.3rem; cursor: pointer; font: inherit; font-weight: 600; }
.consult__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consult__problem { margin: 0; color: #9b2c1f; font-size: 0.9rem; }
.consult__done p { color: var(--ink-soft); }

/*
  1b. The videos, on the dark felt: one player, the list beside it.

  The band is the darkest green on the page so the picture is the brightest
  thing in it, the way a screening room is dark. Two columns from 900 points;
  under that the list follows the player. The list is as tall as the player
  and scrolls, so twelve rows never push the next section a screen away.
*/
.watch {
  margin-top: 2.6rem;
  padding: 3.2rem 0 3.6rem;
  background: radial-gradient(ellipse at 30% 0%, var(--felt) 0%, var(--felt-deep) 70%);
  color: var(--cream);
}
.watch .eyebrow::after { content: "J\2666"; }
.watch__lead {
  margin: -0.4rem auto 2rem;
  max-width: 38em;
  text-align: center;
  text-wrap: balance;
  color: var(--cream-deep);
}
.reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.6rem;
  align-items: stretch;
}
.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #04241a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(232, 200, 106, 0.28);
}
.reel__video { display: block; width: 100%; height: 100%; background: #04241a; }
.reel__caption { padding: 1rem 0.2rem 0; }
.reel__meta {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.reel__title {
  margin: 0.25rem 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
}
.reel__line { margin: 0.35rem 0 0; color: var(--cream-deep); }

/* Up next, over the last frame. */
.reel__next {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: rgba(6, 48, 31, 0.88);
}
.reel__next[hidden] { display: none; }
.reel__next-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.reel__next-title {
  margin: 0.35rem 0 1.1rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
}
.reel__next-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.btn--ghost { background: transparent; border-color: var(--cream-deep); color: var(--cream); cursor: pointer; font: inherit; font-weight: 600; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.reel__next .btn--gold { cursor: pointer; font: inherit; font-weight: 600; }

/* The list. */
.reel__list {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0.4rem 0.3rem 0;
  /* Its height takes nothing from the row and fills it: as tall as the player and its caption. */
  height: 0;
  min-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 200, 106, 0.4) transparent;
  /* The last row fades, so a list cut off by the player's height reads as one that scrolls. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
  padding-bottom: 2.5rem;
}
.reel__group + .reel__group { margin-top: 0.9rem; }
.reel__label {
  margin: 0 0 0.35rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.reel__items { list-style: none; margin: 0; padding: 0; }
.reel__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.reel__item:hover { background: rgba(255, 255, 255, 0.07); }
.reel__item:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.reel__item.is-on { background: rgba(232, 200, 106, 0.14); border-left-color: var(--gold); }
.reel__thumb {
  flex: none;
  width: 96px;
  height: 54px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(232, 200, 106, 0.2);
}
.reel__text { display: grid; grid-template-columns: auto 1fr; column-gap: 0.45rem; line-height: 1.25; }
.reel__num { font-weight: 600; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.reel__name { font-size: 0.95rem; }
.reel__time { grid-column: 2; font-size: 0.8rem; color: var(--cream-deep); opacity: 0.85; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr; }
  .reel__list { height: auto; min-height: 0; overflow: visible; padding-right: 0; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .reel__title { font-size: 1.6rem; }
}
@media (max-width: 560px) {
  .watch { padding: 2.4rem 0 2.8rem; }
  .reel__frame { border-radius: 6px; }
  .reel__next-title { font-size: 1.25rem; margin-bottom: 0.8rem; }
}

/*
  Close up, on a phone: the film is laid out at its full 1920 × 1080 and moved
  and scaled (by the script under the player) so the device's screen fills the
  frame, which takes the shot's shape — tall for a phone, wide for a laptop.
*/
.reel.is-close .reel__frame { aspect-ratio: auto; transition: height 450ms ease; cursor: pointer; }
.reel.is-close .reel__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  max-width: none;
  transform-origin: 0 0;
  transition: transform 450ms ease, clip-path 450ms ease;
}
.reel.is-close .reel__video.is-still { transition: none; }
.reel__bar[hidden], .reel__shot[hidden] { display: none; }
.reel__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.1rem 0;
}
.reel:not(.is-close) .reel__bar { justify-content: flex-end; }
.reel:not(.is-close) .reel__bar > :not(.reel__view) { display: none; }
.reel__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(232, 200, 106, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.reel__btn svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.reel__play { padding: 0; background: var(--gold); border-color: var(--gold); color: #06301f; }
.reel__icon-pause { display: none; }
.reel.is-playing .reel__icon-play { display: none; }
.reel.is-playing .reel__icon-pause { display: inline; }
.reel__view[aria-pressed="true"] { background: rgba(232, 200, 106, 0.18); border-color: var(--gold); }
.reel__seek { flex: 1; min-width: 0; accent-color: var(--gold); }
.reel__clock { flex: none; font-size: 0.8rem; color: var(--cream-deep); font-variant-numeric: tabular-nums; }
/* The shot's caption, the words beside the device in the film. Room for three lines, so the page doesn't jump between shots. */
.reel__shot { min-height: 7.2rem; padding: 0.8rem 0.2rem 0; }
.reel__shot.is-empty { display: none; }
.reel__shot p { margin: 0; }
.reel__shot-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.reel__shot-title { margin-top: 0.2rem !important; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.reel__shot-sub { margin-top: 0.3rem !important; color: var(--cream-deep); line-height: 1.4; }
/* A laptop's screen is wide; on a phone held upright it is still small. */
.reel__turn { display: none; margin-top: 0.45rem !important; font-size: 0.8rem; color: var(--gold-light); opacity: 0.85; }
@media (orientation: portrait) {
  .reel.is-wide .reel__turn { display: block; }
}
/* With the close-up on, the video's name and line sit under the shot's caption, smaller. */
.reel.is-close .reel__caption { padding-top: 0.4rem; border-top: 1px solid rgba(232, 200, 106, 0.2); }
.reel.is-close .reel__title { font-size: 1.2rem; }

/*
  Full screen: the picture takes what the controls and the caption leave —
  under it on a phone held upright, beside it on one turned sideways, the way
  the film itself lays them out.
*/
.reel__stage:fullscreen { display: flex; flex-direction: column; padding: 0.8rem 1rem 1rem; background: #04241a; }
.reel__stage:fullscreen .reel__frame { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.reel__stage:fullscreen .reel__caption { display: none; }
.reel__stage:fullscreen .reel__shot { min-height: 0; }
.reel__stage:fullscreen .reel__shot.is-empty { display: block; visibility: hidden; }
@media (orientation: landscape) {
  .reel__stage:fullscreen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 30%);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 1rem;
    padding: 0.6rem 0.8rem;
  }
  .reel__stage:fullscreen .reel__frame { grid-row: 1 / 3; height: 100% !important; }
  .reel__stage:fullscreen .reel__shot { grid-column: 2; grid-row: 1; align-self: center; padding: 0; }
  .reel__stage:fullscreen .reel__bar { grid-column: 2; grid-row: 2; flex-wrap: wrap; padding: 0; }
  .reel__stage:fullscreen .reel__seek { flex-basis: 100%; order: -1; }
}

/*
  2. At a glance

  ⚠️ **No styles of its own for the cards, on purpose.** It uses `.cards` and
  `.card` — the same grid and the same white card with the gold top rule as
  *What it does* — because that is what he asked for: *"we need these cards to
  be like the other cards."* Two earlier cuts put a picture on the page, first
  full size and then as a thumbnail on the front of each card, and both were
  sent back. The words are the front; the screen is behind the magnifier.

  Only the lead line and the numbered disc are new, and the disc is here because
  these six are a sequence — an evening in order — where the other two sets are
  a list.
*/
/*
  ⚠️ **Its foot was one rem**, from when a paragraph ended the section and the
  next one began on the same cream. It ends in cards now and the next one is
  the felt band, so the bottom row sat almost on the gold rule — *"need more
  padding."* The same three and a half as every other section.
*/
.glance {
  padding: 3.2rem 0 3.5rem;
  background: var(--cream-light);
  border-top: 1px solid var(--rule);
}
.glance__lead {
  /* No measure on it: at 54ch this one sentence broke in two — *"make this one line."* */
  max-width: none;
  margin: 0.9rem auto 0;
  text-align: center;
  color: var(--ink-soft);
}
.glance .cards { margin-top: 1.6rem; }
/*
  ⚠️ **The number reads at the head of the heading now**, not in a disc in the
  corner — *"put a number next to each section. So 1. Find your table, 2. Tap
  keys during the round."* It has been in three places in an evening; this one
  is the only one where it is read as part of the sentence it numbers.

  ⚠️ **The heading sits on the magnifier’s line**, not under it. The card was
  padded at the top to push it clear, which left a band of nothing above every
  heading — *"move the text up to be in alignment with the magnifying glass on
  one line."* So the heading holds two and a half rems back for the magnifier
  instead, and takes the size that fits the longest of the six in what is left:
  *5. Live Tournament Management* wants 250 points and has 251 at 1.18rem, which
  is not a margin, so 1.1rem it is.
*/
.glance .card h3 {
  padding-right: 2.5rem;
  font-size: 1.1rem;
  /* The same clearance as the strip: the circle is taller than the line it sits on. */
  margin-bottom: 1.1rem;
}
/* The number, in the sans so it reads as a label rather than as part of the name. */
.num {
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 700;
  margin-right: 0.15rem;
}
.glance .num { color: var(--gold-deep); }

/* 3. What it does */
.features { padding: 3.5rem 0; }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.35rem;
  position: relative;
}
.card:has(.card__zoom) h3 { padding-right: 2.4rem; }

/* The magnifier on a card, and the screenshot it opens */
.card__zoom {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--cream-light);
  color: var(--felt);
  cursor: zoom-in;
  transition: background-color 120ms ease, color 120ms ease;
}
.card__zoom:hover { background: var(--felt); color: var(--cream); }
.card__zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/*
  No white card behind the picture: the screenshots are cards already, with
  their own borders and rounded corners, and a white pop-up round them showed
  as a strip and a corner (his screenshot, "check the white space"). The picture
  sits on the dimmed page, with the controls on their own bar beneath it.
*/
.zoom {
  width: fit-content;
  max-width: 94vw;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.zoom::backdrop { background: rgba(6, 48, 31, 0.78); }
.zoom__body {
  max-height: calc(100vh - 7.5rem);
  max-width: 94vw;
  overflow: auto;
  overscroll-behavior: contain;
}
/* Sized by the script: its own width, or the window when that is narrower. Nothing to press — see the note there. */
.zoom__img {
  display: block;
  max-width: none;
  border-radius: 12px;
}
/* Nothing to count and nothing left to scroll to: no bar. */
.zoom--bare .zoom__foot { display: none; }
.zoom__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0.5rem;
  /* As wide as the picture, never wider: the bar must not set the pop-up's width. */
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--card);
}
.zoom__hint {
  flex: 1;
  margin: 0;
  padding: 0.15rem 0.4rem 0.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}
.zoom__step {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--felt);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.zoom__step:hover { background: var(--felt-deep); }
.zoom__step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.zoom__step[hidden] { display: none; }
/* On the pop-up's corner, never over the picture */
.zoom__close {
  position: absolute;
  top: -1.1rem;
  right: -0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--felt);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.zoom__close:hover { background: var(--felt-deep); }
.zoom__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--felt);
}
.card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
/*
  The aside under a whole band of cards: the exception to what the section just
  claimed, in his own italics. Centred under the grid like the headings above
  it, and lighter than the cards, because it answers an objection rather than
  making a point of its own.
*/
.cards__aside {
  margin: 1.1rem 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* 4. How a tournament runs */
.steps {
  background: var(--felt);
  color: var(--cream);
  padding: 3.5rem 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.steps__lead {
  text-align: center;
  margin: -0.75rem 0 2rem;
  color: var(--cream-deep);
}
.strip {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 1.5rem;
  list-style: none;
}
.strip li { position: relative; }
/*
  ⚠️ **The arrows between the steps lasted one build.** They were his idea and
  he took them back on seeing them — *"remove the arrows"* — so the order is
  the number at the head of each heading again, and the magnifier is on the
  right where the eye leaves the line.
*/
.strip h3 {
  /*
    ⚠️ **The magnifier is taller than this line, so the paragraph starts below
    it rather than beside it.** At the old margin the circle hung three points
    into the first line of the words and the line ran under it — *"need more
    spacing between the magnifying glass and the content."*
  */
  margin: 0 0 1.2rem;
  /* And room for it along the line, with air either side. */
  padding-right: 3.2rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--cream-light);
}
.strip p { margin: 0; color: var(--cream-deep); font-size: 0.97rem; }
/*
  ⚠️ **The magnifier goes on the floor of the step, not beside its heading.**
  These six are a third of the page wide with a numbered disc already taking
  three rems off the left, and a magnifier in the corner would leave the
  headings less room than the six above them had when he sent those back. A
  flex column and an auto margin put it under the words instead, where the
  cards in *At a glance* keep their numbers.

  Step thirteen has none, and that is right: a round saved with no signal looks
  exactly like a round saved with one, which is the whole point of it.
*/
.strip .card__zoom {
  top: 0;
  /* Off the cell’s edge, so the next column is not up against it either. */
  right: 0.4rem;
  width: 2.1rem;
  height: 2.1rem;
  /* On the felt, where the cream face of the others would be the loud thing in the row. */
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-light);
}
.strip .card__zoom:hover { background: var(--gold); color: var(--felt-deep); }
.strip .card__zoom:focus-visible { outline-color: var(--gold-light); }
.strip .num { color: var(--gold); }
.strip b { color: var(--cream); font-weight: 600; }

/*
  2a. What it replaces from other services

  ⚠️ **A band of its own, because on the same cream it was read as a third row
  of *What it does*** — *"this is in the wrong position … it is its own
  section."* It had no padding under it either, so its cards sat on the seam
  where the next section’s background begins and the page looked broken there.

  Its three cards are `.cards--three`, the same as *What it saves you*, which is
  the band below it; a rule between the two keeps them from reading as one long
  one. It took the place of *Who it is for*, which had a measure and a centred
  paragraph of its own and is gone with it.
*/
/*
  ⚠️ **This band is felt, and it is the answer to "too many white cards"** — his
  question: *"there are many white cards to look at. I don't know if it's still
  easy on the eyes."*

  He is describing a real thing, and it is rhythm rather than the cards. The page
  ran four bands of *heading, then a grid of white cards* back to back — six,
  three, six and six of them — before the first felt band arrived at *How a
  tournament runs*, which is a long way down. Twenty-one white cards with two
  near-identical creams behind them read as one long texture.

  So the shortest of the four takes the felt instead, early enough to break the
  run: cream, felt, cream-light, cream, felt. Three cards rather than six keeps
  the dark band light on its feet, and the section that says what this replaces
  is the one that can carry the emphasis.

  **Nothing about the cards themselves changed.** A white card on cream is still
  the page's unit; it just is not the only thing on the page any more.
*/
/*
  ⚠️ **The felt moved from What it replaces to What it saves you** — 4 October
  2026. He put What it replaces first, straight under the videos, and the two
  dark bands touched: *"the green should not be under the green."* So the page
  runs, top to bottom: videos (felt), replaces (cream-light), saves you (felt),
  what it does (cream), at a glance (cream-light), how it runs (felt), pricing
  (cream), find a game (cream-light), try it (cream), the foot (felt). Never two
  felts together, never two of the same cream together.
*/
.replaces {
  padding: 3.5rem 0;
  background: var(--cream-light);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.worth {
  padding: 3.5rem 0;
  background: var(--felt);
  color: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
/* The same card, dressed for the dark: a pane of the felt rather than a white
   block dropped on it, which would fight the band it sits in. */
.worth .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 200, 106, 0.3);
  border-top-color: var(--gold-light);
  box-shadow: none;
}
.worth .card h3 { color: var(--gold-light); }
.worth .card p { color: var(--cream-deep); }
/*
  ⚠️ **And the heading, which the felt swallowed whole.** `.eyebrow` is the
  brand's green on cream; over the felt it was green on green and the section
  lost its title — caught by looking at the band rather than by reading the
  rule that broke it. Scoped here rather than by putting `eyebrow--light` in
  the markup, so the band's colour scheme lives in one place and a section that
  ever moves back to cream takes nothing with it.
*/
.worth .eyebrow { color: var(--gold-light); }
.worth .eyebrow::after {
  color: var(--gold-light);
  background-image:
    linear-gradient(90deg, transparent, var(--gold-light)),
    linear-gradient(90deg, var(--gold-light), transparent);
}

/* 6. Try it */
.try { padding: 3rem 0 4rem; text-align: center; }
/* Find a game sits between pricing and Try it, both cream, so it takes the lighter one. */
.try--find { background: var(--cream-light); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.try h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--felt);
  margin: 0 0 1.5rem;
}
.try__honest {
  margin: 1.5rem auto 0;
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
/*
  ⚠️ **A button needs air above it, and this one had none.** His note on the
  foot of the page: *"it's too close. Move the button down."*

  `.btn` is an inline-flex box with no margin of its own, and `.try__honest`
  ends at `margin-bottom: 0` — so *Start a club* was sitting a line-height under
  the sentence that argues for pressing it, close enough to read as the last
  line of the paragraph rather than the thing to do about it.

  2rem rather than the 1.5 used elsewhere in the section: the gap above a button
  has to be wider than the gaps inside the text around it, or it reads as part
  of the text. The gold button at the top of the section gets its air from the
  heading's own margin, which is why only this one looked wrong.
*/
.try__honest + .btn {
  margin-top: 2rem;
}

/* Looking for a game? — two keys side by side, wrapping on a phone. */
.find__keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ----------------------------------------------------------------------------
   The club directory and the tournament calendar — /euchre-clubs and
   /euchre-tournaments, drawn by api/listings.mjs (see lib/board.mjs).
   ------------------------------------------------------------------------- */
.board { padding: 2.5rem 0 4rem; }
.lockup-link { display: inline-block; border-radius: 8px; }
.lockup-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.board__back { margin: 0 0 1rem; font-size: 0.95rem; }
.board__eyebrow {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-size: 0.95rem;
}
.board h1 {
  margin: 0.3rem 0 0.8rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--felt);
}
.board__lede { margin: 0; color: var(--ink-soft); max-width: 40em; }
.board__keys { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.board__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.board .board__filter a {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
}
.board__filter a span { opacity: 0.65; margin-left: 0.2rem; }
.board .board__filter a:hover { border-color: var(--felt); color: var(--felt); }
.board .board__filter a.is-on { background: var(--felt); border-color: var(--felt); color: var(--cream); font-weight: 600; }
.board__month { margin-top: 2rem; }
.board__month h2 {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.board__list { display: flex; flex-direction: column; gap: 1rem; }
.board__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.board__card { scroll-margin-top: 5rem; }
.board__card p + p { margin-top: 0.3rem; }
.board__when {
  font-size: 0.82rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  margin-bottom: 0.25rem !important;
}
.board__place { color: var(--ink) !important; font-weight: 600; }
.board__places { color: var(--felt) !important; font-weight: 600; }
.board__about { white-space: pre-line; margin-top: 0.6rem !important; }
.board__reach { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.7rem !important; }
.board a:not(.btn) { color: var(--felt); font-weight: 600; text-underline-offset: 2px; }
.board__go { margin-top: 1rem !important; }
.board__flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.2rem !important; }
.board__flag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--cream-light);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.board__flag--done { border-color: var(--felt); color: var(--felt); }
.board__card--played { opacity: 0.85; }
.board__next { margin-top: 0.8rem !important; padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--cream-light); border: 1px solid var(--rule); }
.board__badge {
  margin-top: 0.8rem !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  font-weight: 600;
}
.board__empty p + p { margin-top: 0.4rem; }
.board__pitch { margin-top: 2.5rem; }
.board__pitch h2 { margin: 0 0 0.4rem; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--felt); }
.board__small { margin-top: 2.5rem; font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .board h1 { font-size: 1.9rem; }
  .board__grid { grid-template-columns: 1fr; }
}

/* The next few tournaments, under "Looking for a game?" on the home page. */
.find__soon { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 34em; text-align: left; }
.find__soon li { padding: 0.55rem 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.find__soon li:last-child { border-bottom: 1px solid var(--rule); }
.find__soon a { color: var(--felt); font-weight: 600; }
.find__soon strong { color: var(--ink); }

/* 7. Footer */
.foot {
  background: var(--felt-deep);
  color: var(--cream-deep);
  border-top: 3px solid var(--gold);
  font-size: 0.85rem;
}
.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 20px;
}
.foot__legal { margin: 0; }
.foot__build {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--cream-deep);
  opacity: 0.75;
}
.foot__links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot__links a { color: var(--cream); text-underline-offset: 3px; }
.foot__links a:hover { color: var(--gold-light); }

/* Narrow screens */
@media (max-width: 900px) {
  .cards, .strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cards, .strip { grid-template-columns: 1fr; }
  .masthead__inner { padding: 1.5rem 20px; }
  .lockup { --lockup-w: min(180px, 60vw); }
  .masthead__title { font-size: 0.95rem; letter-spacing: 0.24em; padding-left: 0.24em; }
  .menu { gap: 1.1rem 1.4rem; flex-wrap: wrap; font-size: 0.9rem; letter-spacing: 0.10em; }
  .menu a { padding-left: 0.10em; }
  .intro__line { font-size: 1rem; }
  .try h2 { font-size: 1.7rem; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 601px) {
  .foot__build { display: inline; margin-left: 0.6rem; }
}

/*
  ⚠️ **At a glance and the steps strip go two up before the rest of the page**
  **does.** Their cards
  carry a heading the others do not have to fit — the app’s own *Live
  Tournament Management* — and a third of a 1024 laptop is not wide enough for
  it on one line, which is the whole complaint these sections were rearranged
  over. Two up there is roomier than three up and reads the same — and one up
  below 760, where two would be as narrow again.
*/
@media (min-width: 761px) and (max-width: 1079px) {
  .glance .cards, .strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .glance .cards, .strip { grid-template-columns: 1fr; }
}

/* 6. What it saves you, and 7. what it costs */
.cards--three { grid-template-columns: repeat(3, 1fr); }

.pricing { padding: 3.5rem 0 4rem; }
.pricing__lead {
  /* No measure: at 44rem this one sentence broke in two — *"fit the sentence on one line."* */
  max-width: none;
  margin: 0.75rem 0 1.75rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
/*
  ⚠️ **The table carries its own top margin now.** The lead sentence above it
  was removed at his ask, and its 1.75rem bottom margin was the only thing
  holding the table off the heading — so the gap left with the sentence.
*/
.prices {
  margin-top: 1.75rem;
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  font-size: 1rem;
}
.prices th,
.prices td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--rule); }
.prices thead th {
  background: var(--felt);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.prices tbody tr:last-child td { border-bottom: 0; }
.prices tbody tr:nth-child(odd) td { background: var(--cream-light); }

.pricing__rules {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, 1fr);
  color: var(--ink-soft);
}
.pricing__rules li { padding-left: 1.1rem; border-left: 3px solid var(--gold); }
.pricing__rules strong { color: var(--ink); }

@media (max-width: 780px) {
  .cards--three { grid-template-columns: 1fr; }
  .pricing__rules { grid-template-columns: 1fr; }
  .prices { font-size: 0.95rem; }
  .prices th, .prices td { padding: 0.6rem 0.7rem; }
}
/* The money reads as money: the figure in the felt, the aside under it. */
.prices__per { font-weight: 700; color: var(--felt); white-space: nowrap; }
.prices__per small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }

.pricing__sub {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--felt);
}
.pricing__note { max-width: 44rem; margin: 0.9rem 0 0; color: var(--ink-soft); }

/*
  The price calculator, under the table it answers.

  One card, two questions on the left and the answer on the right, so a reader
  who changes a number watches the figure beside it move rather than scrolling
  to find out what happened. On a phone the answer falls underneath, which is
  the same order read down instead of across.
*/
.calc {
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.calc .pricing__sub { margin-top: 0; }
.calc__asks {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.calc__ask {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.calc__q {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}
.calc__hint { font-size: 0.85rem; color: var(--ink-soft); }
.calc__num {
  width: 7.5rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream-light);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.calc__num:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
/* A disabled box is a question that is not being asked yet, not a broken one. */
.calc__num:disabled { color: var(--ink-soft); background: var(--cream-deep); opacity: 0.6; }
.calc__num--small { width: 5.5rem; }
.calc__choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.calc__choices label { display: inline-flex; align-items: center; gap: 0.3rem; }
.calc__unit { color: var(--ink-soft); }

/*
  The answer. The felt behind it is what makes it read as a result rather than
  as a third question — it is the one part of this card the eye should land on.
*/
.calc__out {
  display: block;
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.2rem;
  background: var(--felt);
  color: var(--cream);
  border-radius: 10px;
}
.calc__total {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
}
.calc__total strong {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-right: 0.4rem;
}
.calc__lines {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
  font-size: 0.95rem;
}
.calc__lines strong { color: #fff; }
.calc__per {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(244, 233, 206, 0.25);
  font-size: 0.95rem;
}
.calc__per strong { color: var(--gold-light); font-size: 1.15rem; }
/*
  The same figure with the door money in it, under the line that explains the
  door money. No second rule across the box: the first one already separates
  the year from what a player costs, and these two are the same reading.
*/
.calc__per--door {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}
/* The passes and the free month are conditions on the figure, not part of it. */
.calc__passes,
.calc__free {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cream-deep);
}
.calc__passes strong { color: var(--gold-light); }

@media (max-width: 780px) {
  .calc__asks { grid-template-columns: 1fr; }
  .calc { padding: 1.1rem; }
  .calc__total strong { font-size: 2rem; }
}

/*
  ⚠️ **One note that takes the whole column**, at his instruction with the page
  in front of him: *"make sure that this new text spans across the page. The
  past content only goes to the middle or so."*

  The 44rem measure above is right for a stack of paragraphs and wrong for this
  one: it is four sentences under a heading with nothing beside it, and a
  half-width block of text under a full-width table reads as a column that has
  lost its other half.
*/
.pricing__note--wide { max-width: none; }

/*
  ⚠️ **"about", because the figure is a gauge** — he read his own calculator and
  found the false promise: a club of twenty whose ninth member is the only one
  through at the first reading pays $30, not $45. The word sits in the felt
  panel at the size of the sentence around it rather than the figure, so it
  qualifies the number without competing with it.
*/
.calc__about {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream-deep);
  margin-right: 0.15rem;
}
.calc__free strong { color: var(--cream); }
/* A number box and the word that says what it is, kept on one line together. */
.calc__pair { display: inline-flex; align-items: center; gap: 0.35rem; }

/*
  ⚠️ **Three questions across one row**, at his instruction with the page in
  front of him: *"shift up Do you run a tournament over 60? Then put the number
  of times a year field to the right of it and line all three of these questions
  flush with each other in the row. This will create more white space where you
  can move up the green card."*

  Only from 1000px, and the number is measured rather than picked: the three
  labels come to about 800 points set on one line each, so below that width one
  of them wraps, its own input drops a line and the row he asked to be flush
  stops being flush. Under 1000 they keep the two-column grid and then stack,
  which is the layout a phone wants anyway.

  `auto auto auto` with `justify-content: start` sizes each column to its own
  question instead of giving the short one a third of the page, and
  `align-items: start` keeps every label on the same baseline — so the three
  boxes line up underneath them without a fixed height anywhere.
*/
@media (min-width: 1000px) {
  .calc__asks {
    grid-template-columns: auto auto auto;
    justify-content: start;
    column-gap: 2.75rem;
    align-items: start;
  }
  .calc__q { white-space: nowrap; }
  /* One row of questions rather than two, so the answer comes up to meet them. */
  .calc__out { margin-top: 1rem; }
}
/*
  ⚠️ **A legend is not laid out like anything else in the box.** The browser
  lifts it out of the fieldset's flow and paints it over the border, so the
  radios below it started five points higher than the two plain inputs either
  side — which is exactly the "flush" he asked for, missed by a hair.

  Floating it full-width puts it back in the flow, so the fieldset's own column
  gap applies to it like any label and all three boxes land on one line.
*/
.calc__ask > legend.calc__q { float: left; width: 100%; }

/*
  ⚠️ **The first question, club or one-time tournament** — his idea, 23
  September 2026. See the note beside the markup.

  `[hidden]` has to be said again: `.calc__asks` sets `display: grid`, which
  beats the browser's own rule for the attribute, and the club's three
  questions would have stayed on screen beside the tournament's two.
*/
.calc__asks[hidden] { display: none; }
.calc__kind {
  margin: 0 0 1.1rem;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
}
.calc__kind > legend.calc__q { float: left; width: 100%; margin-bottom: 0.35rem; }
.calc__kind .calc__choices { clear: both; gap: 0.5rem 1.5rem; }
/* The ⓘ: a small round button, pressed rather than hovered, so a phone can open it. */
.calc__info {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: var(--cream-light);
  color: var(--gold-deep);
  font: italic 700 0.8rem/1 var(--serif);
  cursor: pointer;
}
.calc__info[aria-expanded="true"] { background: var(--gold-deep); color: var(--cream-light); }
.calc__info:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.calc__note {
  margin: 0.6rem 0 0;
  max-width: 44rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/*
  Phones and tablets: less scrolling, 28 September 2026 — his note: *"maybe
  the menu needs to be condensed a bit because it's a lot of scrolling."* The
  page ran to nearly 12,000 points on a phone, fourteen screens.

  **The menu folds into one bar that stays at the top**: *Menu* opens the
  list, *Start a club* stays out in gold. On a laptop nothing changes.

  **The card sections swipe sideways on a phone**, each card most of the
  width with the next one showing at the edge, which is what says there is
  more. Same cards, same words, same magnifiers; a section is one card tall
  instead of six.

  **The playlist becomes a row of covers** under the player, swiped the same
  way, the group names dropped because a row has no room for headings.
*/
.menu__toggle { display: none; }
/* To 900: at a tablet's 768 the eight links ran off the right-hand edge. */
@media (max-width: 900px) {
  .menu {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    min-height: 0;
    padding: 0.5rem 16px;
  }
  .menu a { display: none; }
  .menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.2rem;
    border: 0;
    background: transparent;
    color: var(--cream);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  .menu__toggle:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
  .menu__bars, .menu__bars::before, .menu__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gold-light);
    border-radius: 2px;
    transition: transform 150ms ease, opacity 150ms ease;
  }
  .menu__bars { position: relative; }
  .menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
  .menu__bars::before { top: -6px; }
  .menu__bars::after { top: 6px; }
  .menu.is-open .menu__bars { background: transparent; }
  .menu.is-open .menu__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu.is-open .menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .menu a.menu__cta {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: linear-gradient(var(--gold-light), var(--gold));
    color: var(--felt-deep);
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .menu.is-open a:not(.menu__cta) {
    display: block;
    order: 1;
    width: 100%;
    padding: 0.75rem 0.2rem;
    border-top: 1px solid rgba(201, 162, 39, 0.25);
  }
  .menu.is-open a:not(.menu__cta):first-of-type { margin-top: 0.4rem; }
  /* A jump from the menu lands the heading under the bar, not behind it. */
  [id] { scroll-margin-top: 4rem; }
}

@media (max-width: 900px) {
  .cards,
  .glance .cards,
  .cards--three,
  .strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    align-items: stretch;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    margin: 0 -20px;
    padding: 0.2rem 20px 0.9rem;
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar, .strip::-webkit-scrollbar { display: none; }
  .cards > li, .strip > li { scroll-snap-align: start; }
}
/* A tablet has room for two and the edge of a third. */
@media (min-width: 601px) and (max-width: 900px) {
  .cards, .glance .cards, .cards--three, .strip { grid-auto-columns: 44%; }
}

@media (max-width: 900px) {
  .reel__list {
    position: relative;
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 1rem -20px 0;
    padding: 0.3rem 20px 0.6rem;
    scrollbar-width: none;
  }
  .reel__list::-webkit-scrollbar { display: none; }
  .reel__group, .reel__items, .reel__items > li { display: contents; }
  .reel__group + .reel__group { margin: 0; }
  .reel__label { display: none; }
  .reel__item {
    flex: none;
    width: 9.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.35rem;
    border-left: 0;
    border-bottom: 3px solid transparent;
    scroll-snap-align: start;
  }
  .reel__item.is-on { border-bottom-color: var(--gold); }
  .reel__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .reel__name { font-size: 0.85rem; }
}