/* =========================================================================
   GRAND PRIX TOURNAMENTS — « green felt parlor » design system, prefix gp-
   Vocabulary of the card room and the championship: rail (content width),
   house (header), lobby (nav), marquee (championship-poster hero), board
   (numbered suite = section), table (asymmetric card grid), hand (card),
   face (image frame), label (card caption), tally (dated feed), bid
   (article head), plate (lead image), column (reading column), scroll
   (table wrapper), sheet (dark callout), glyph (SVG ornament), token
   (fleuron separator), next (read next), base (footer), crumbs (breadcrumb).
   Palette: deep tournament felt green + brass gold + playing card cream
   + ink. Serif Iowan/Palatino for display, system sans for text. No remote
   font, no CDN, no gadget animation. Dark mode is automatic. Print keeps
   the column and drops the chrome.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOURS · the card parlor ------------------------------------ */
  --papier:       #f2ecda;  /* playing card cream: page ground            */
  --papier-creux: #e9e1c8;  /* reserves, alternated sections              */
  --papier-vif:   #f8f4e6;  /* lightest cream: tips, even table rows      */
  --encre:        #221f16;  /* ink: text                                  */
  --encre-douce:  #6b6350;  /* captions, meta, chapôs                     */
  --tapis:        #123626;  /* deep tournament felt: header, hero, base   */
  --tapis-nuit:   #0c281b;  /* darkest felt: footer, sheet boxes          */
  --brass:        #8a6d24;  /* brass gold: links, numbers, ornaments      */
  --brass-clair:  #c9a13b;  /* brass on dark grounds                      */
  --brass-pale:   #6e5619;  /* brass pressed / hover                      */
  --carmin:       #8c2723;  /* deep card red: the one warm accent         */
  --filet:        #d5cba8;  /* hairline on cream                          */
  --filet-tapis:  #2c5540;  /* hairline on felt                           */

  /* Dark mode: the parlor after the lamps come on. */
  --nuit-papier:      #101813;
  --nuit-papier-creux:#182119;
  --nuit-papier-vif:  #202b21;
  --nuit-texte:       #e9e4d0;
  --nuit-doux:        #a8a48e;

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------- */
  --police-titre: "Iowan Old Style", "Iowan Old Style Roman", Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia, serif;
  --police-texte: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --titre-graisse: 600;
  --caps-interlettrage: 0.22em;

  --corps-taille: clamp(1.02rem, 0.97rem + 0.22vw, 1.13rem);
  --corps-interligne: 1.66;
  --echelle-h1: clamp(2.3rem, 1.1rem + 4vw, 4.6rem);
  --echelle-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --echelle-h3: clamp(1.14rem, 1.03rem + 0.5vw, 1.42rem);

  /* ---- 3. RHYTHM --------------------------------------------------------- */
  --mesure:       63ch;
  --mesure-large: 1380px;
  --marge-page:   clamp(1.1rem, 4vw, 4rem);
  --gouttiere:    clamp(0.9rem, 2.2vw, 2rem);
  --souffle:      clamp(2.6rem, 6vw, 5.4rem);
  --buttee:       clamp(1.2rem, 3vw, 3rem);

  /* ---- 4. DETAILS -------------------------------------------------------- */
  --angle:     2px;
  --filet-fin: 1px solid var(--filet);
  --vitesse:   150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:       var(--nuit-papier);
    --papier-creux: var(--nuit-papier-creux);
    --papier-vif:   var(--nuit-papier-vif);
    --encre:        var(--nuit-texte);
    --encre-douce:  var(--nuit-doux);
    --tapis:        #0b1f15;
    --tapis-nuit:   #07160f;
    --brass:        var(--brass-clair);
    --brass-pale:   #e0bc5e;
    --carmin:       #d4675f;
    --filet:        #33402f;
    --filet-tapis:  #1e3a2a;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.gp-glyph { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  letter-spacing: 0.002em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--echelle-h1); }
h2 { font-size: var(--echelle-h2); }
h3 { font-size: var(--echelle-h3); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--vitesse);
}
a:hover { color: var(--brass-pale); }
:focus-visible {
  outline: 2px solid var(--carmin);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--filet-fin); margin: var(--souffle) 0; }

::selection { background: var(--brass); color: #f8f4e6; }

/* Scores, brackets and dates read in tabular numerals. */
.gp-scroll, .gp-day, .gp-bid__meta, .gp-board__no, .gp-marquee__line,
.gp-hand__tag, .gp-sheet {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

.gp-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tapis-nuit); color: var(--papier-vif);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.gp-skip:focus { left: 0.6rem; top: 0.6rem; }

/* The rail: content width of the whole house. */
.gp-rail {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding-left: var(--marge-page);
  padding-right: var(--marge-page);
}

/* =========================================================================
   HOUSE · header and lobby (nav)
   ========================================================================= */

.gp-house {
  background: var(--tapis);
  color: var(--papier-vif);
  border-bottom: 1px solid var(--filet-tapis);
}
.gp-house__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}
a.gp-brand {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--papier-vif);
  text-decoration: none;
  letter-spacing: 0.01em;
}
a.gp-brand:hover { color: var(--brass-clair); }
.gp-brand span {
  display: block;
  font-family: var(--police-texte);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: #b9cbb9;
  margin-top: 0.28rem;
}
.gp-lobby ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gp-lobby a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #d8e4d6;
}
.gp-lobby a:hover { color: var(--brass-clair); }

/* =========================================================================
   MARQUEE · championship poster hero (home)
   ========================================================================= */

.gp-marquee {
  position: relative;
  background: var(--tapis-nuit);
  overflow: hidden;
}
.gp-marquee__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The veil is a HARD color, never a var(): the poster must stay deep felt
   green in both themes. */
.gp-marquee__voile { position: absolute; inset: 0; background: rgba(10, 34, 23, 0.86); }
@media (prefers-color-scheme: dark) {
  .gp-marquee__voile { background: rgba(5, 18, 12, 0.9); }
}
.gp-marquee__inner {
  position: relative;
  color: #f3efdd;
  text-align: center;
  padding-top: clamp(3rem, 8vw, 6.4rem);
  padding-bottom: clamp(3rem, 7vw, 5.6rem);
  max-width: 60rem;
  margin: 0 auto;
}
.gp-marquee__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--brass-clair);
  margin: 0 0 1.3rem;
}
.gp-marquee__rule {
  width: min(15rem, 60%);
  margin: 0 auto 1.6rem;
  border-top: 1px solid var(--brass-clair);
  border-bottom: 3px double var(--brass-clair);
  height: 5px;
}
.gp-marquee h1 {
  color: #f7f3e2;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.9rem);
  margin: 0 0 1.2rem;
}
.gp-marquee__deck {
  max-width: 56ch;
  margin: 0 auto 1.7rem;
  color: #d5dfd0;
  line-height: 1.6;
}
.gp-marquee__line {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8ddb2;
  border-top: var(--filet-fin);
  border-top-color: #4c6b55;
  padding-top: 0.9rem;
}
.gp-marquee__line .gp-glyph { color: var(--brass-clair); }

/* =========================================================================
   BOARD · numbered suite sections
   ========================================================================= */

.gp-board { padding-top: var(--souffle); padding-bottom: var(--buttee); }
.gp-board--creux { background: var(--papier-creux); }
.gp-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  border-top: 3px double var(--encre);
  padding-top: 1.1rem;
  margin-bottom: 1.6rem;
}
.gp-board__title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.gp-board__no {
  font-family: var(--police-titre);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--brass);
}
.gp-board__note { margin: 0; color: var(--encre-douce); font-size: 0.95rem; }

/* =========================================================================
   TABLE · asymmetric card mosaic (the hand of cards)
   ========================================================================= */

.gp-table {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gouttiere);
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
}
.gp-hand { display: flex; flex-direction: column; }
.gp-hand--plein  { grid-column: span 6; }
.gp-hand--wide   { grid-column: span 3; }
.gp-hand--moyen  { grid-column: span 3; }
.gp-hand--petit  { grid-column: span 2; }
.gp-hand--small  { grid-column: span 2; }
.gp-hand--stagger  { margin-top: var(--buttee); }
.gp-hand--stagger2 { margin-top: calc(var(--buttee) * 2); }
@media (max-width: 980px) {
  .gp-hand--plein, .gp-hand--wide { grid-column: span 6; }
  .gp-hand--moyen { grid-column: span 3; }
  .gp-hand--petit, .gp-hand--small { grid-column: span 3; }
  .gp-hand--stagger, .gp-hand--stagger2 { margin-top: 0; }
}
@media (max-width: 640px) {
  .gp-table { grid-template-columns: 1fr; }
  .gp-hand--plein, .gp-hand--wide, .gp-hand--moyen, .gp-hand--petit, .gp-hand--small { grid-column: span 1; }
}

/* The face: image frame with fixed ratios, always on the frame. */
.gp-hand__face { overflow: hidden; border: 1px solid var(--filet); background: var(--papier-creux); }
.gp-hand__face--wide   { aspect-ratio: 21 / 9; }
.gp-hand__face--land   { aspect-ratio: 4 / 3; }
.gp-hand__face--square { aspect-ratio: 1 / 1; }
.gp-hand__face--tall   { aspect-ratio: 3 / 4; }
.gp-hand__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--vitesse);
}
.gp-hand:hover .gp-hand__face img { opacity: 0.88; }

.gp-hand__label { padding: 0.75rem 0.2rem 0; }
.gp-hand__tag {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.gp-hand__title { font-size: 1.16rem; margin: 0 0 0.35rem; }
a.gp-hand__link { color: var(--encre); text-decoration: none; }
a.gp-hand__link:hover { color: var(--brass-pale); text-decoration: underline; text-decoration-thickness: 1px; }
.gp-hand__note { margin: 0; color: var(--encre-douce); font-size: 0.92rem; line-height: 1.5; }

/* =========================================================================
   TALLY · the dated feed of every guide
   ========================================================================= */

.gp-tally { list-style: none; margin: 0 0 1.4em; padding: 0; }
.gp-tally__entry {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.4rem;
  padding: 1.1rem 0;
  border-top: var(--filet-fin);
}
.gp-tally__entry:last-child { border-bottom: var(--filet-fin); }
.gp-tally__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--filet); background: var(--papier-creux); }
.gp-tally h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.gp-tally p { margin: 0; color: var(--encre-douce); }
@media (max-width: 700px) {
  .gp-tally__entry { grid-template-columns: 1fr; gap: 0.7rem; }
}
.gp-day {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* =========================================================================
   SCENE · article and page body
   ========================================================================= */

.gp-scene { padding-top: var(--buttee); padding-bottom: var(--souffle); }

/* Crumbs */
.gp-crumbs { margin: 0 0 var(--buttee); }
.gp-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); }
.gp-crumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--brass); }
.gp-crumbs a { color: var(--encre-douce); text-decoration: none; }
.gp-crumbs a:hover { color: var(--brass-pale); }
.gp-crumbs [aria-current="page"] { color: var(--encre); }

/* The bid: article head */
.gp-bid { max-width: 56rem; }
.gp-bid__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--brass);
}
.gp-bid h1 { margin: 0 0 1rem; }
.gp-bid__chapo {
  font-family: var(--police-titre);
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.38rem);
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 58ch;
  margin: 0 0 1.3rem;
}
.gp-bid__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: var(--filet-fin);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.gp-bid__meta a { color: var(--encre-douce); text-decoration: none; }
.gp-bid__meta a:hover { color: var(--brass-pale); }

/* The plate: lead image, direct child of the scene */
.gp-plate { margin: var(--buttee) 0; }
.gp-plate img { width: 100%; height: auto; border: 1px solid var(--filet); background: var(--papier-creux); }

/* The column: reading measure with a drop cap */
.gp-column { max-width: var(--mesure); margin-top: var(--buttee); }
.gp-column > p:first-of-type::first-letter {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--carmin);
}
@media (max-width: 760px) {
  .gp-column > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; }
}
.gp-column h2 {
  margin: 2.1em 0 0.6em;
  padding-top: 0.55em;
  border-top: var(--filet-fin);
}
.gp-column ul, .gp-column ol { padding-left: 1.35rem; }
.gp-column li { margin-bottom: 0.45em; }

/* The scroll: tables live here, scores in tabular numerals */
.gp-scroll {
  overflow-x: auto;
  margin: 1.4em 0 1.7em;
  border: 1px solid var(--filet);
}
.gp-scroll table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.94rem; }
.gp-scroll caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--filet);
  background: var(--papier-creux);
}
.gp-scroll th, .gp-scroll td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.gp-scroll tr:last-child td { border-bottom: 0; }
.gp-scroll th { font-family: var(--police-titre); font-weight: 600; background: var(--papier-vif); }
.gp-scroll tr:nth-child(even) td { background: var(--papier-vif); }

/* The sheet: dark callout, a score pad on the felt */
.gp-sheet {
  margin: 1.6em 0;
  padding: 1.1rem 1.3rem;
  background: var(--tapis-nuit);
  color: #e4e0cb;
  border-left: 4px solid var(--brass-clair);
}
.gp-sheet h4 { margin: 0 0 0.45rem; font-family: var(--police-titre); font-size: 1.05rem; color: var(--brass-clair); }
.gp-sheet p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* Read next */
.gp-next {
  margin-top: var(--souffle);
  border-top: 3px double var(--encre);
  padding-top: 1.1rem;
}
.gp-next h2 { font-size: 1.2rem; margin: 0 0 0.6em; }
.gp-next ul { list-style: none; margin: 0; padding: 0; }
.gp-next li { padding: 0.45rem 0; border-bottom: var(--filet-fin); margin: 0; }
.gp-next li:last-child { border-bottom: 0; }

/* The token: fleuron separator between home sections */
.gp-token {
  display: flex;
  justify-content: center;
  color: var(--brass);
  padding: 0.4rem 0;
}

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

.gp-base {
  background: var(--tapis);
  color: #cfdccf;
  border-top: 1px solid var(--filet-tapis);
  margin-top: var(--souffle);
}
.gp-base__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  padding-top: 2.4rem;
  padding-bottom: 1.6rem;
}
@media (max-width: 760px) { .gp-base__row { grid-template-columns: 1fr; } }
.gp-base h2 {
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--brass-clair);
  margin: 0 0 0.7em;
}
.gp-base ul { list-style: none; margin: 0; padding: 0; font-size: 0.94rem; }
.gp-base li { margin-bottom: 0.4em; }
.gp-base a { color: #dce6da; text-decoration: none; }
.gp-base a:hover { color: var(--brass-clair); }
.gp-base__foot {
  border-top: 1px solid var(--filet-tapis);
  padding-top: 1rem;
  padding-bottom: 1.4rem;
  font-size: 0.85rem;
  color: #9fb4a0;
}

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

@media print {
  :root { --papier: #ffffff; --papier-creux: #ffffff; --papier-vif: #ffffff; }
  .gp-house, .gp-base, .gp-marquee__photo, .gp-marquee__voile, .gp-skip, .gp-next { display: none !important; }
  .gp-marquee { background: #fff; }
  .gp-marquee h1, .gp-marquee__deck, .gp-marquee__kicker, .gp-marquee__line { color: #000; }
  body { font-size: 11pt; }
  .gp-column { max-width: none; }
  .gp-scroll { overflow: visible; border-color: #000; }
  a { color: #000; }
}