@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-roman-latin.ca72d2bcea.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-roman-latin.fdf61e20fd.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-italic-latin.ed8b291611.woff2) format("woff2")}
/* Red Threes. Design D2, approved by Matt on 2026-09-17: designer game night, with drawn cards. */

:root {
  --blush: #FDEBF0;
  --pink: #F6B3C6;
  --cherry: #D42B45;
  --cherry-ink: #B01E36;
  --kelly: #13804A;
  --kelly-ink: #0C5C34;
  --navy: #1C2748;
  --soft: #4A5270;
  --butter: #FFF1BF;
  --line: #E6D9DE;

  /* Polish pass, 2026-09-20. Warm paper instead of pure white, and a quiet border for the
     things that should step back. D2 keeps its outlines and slab shadows, but only where they
     lead: the primary button and the hero card panel. Everything else takes a hairline.
     --blush stays as it was, because table stripes and figure tints are measured against it. */
  --paper: #FDFBF6;
  --hair: #DED3D6;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.25rem; line-height: 1.6; }
img, svg { max-width: 100%; }
a { color: var(--cherry-ink); text-underline-offset: 0.15em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
h1, h2, h3 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; line-height: 1.08; letter-spacing: -0.005em; }

.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 10; background: var(--navy); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; }
.skip:focus { left: 0.5rem; color: #fff; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 46rem; margin-left: auto; margin-right: auto; }
.gingham {
  background-color: var(--paper);
  background-image: linear-gradient(90deg, rgba(246, 179, 198, 0.6) 50%, transparent 50%), linear-gradient(rgba(246, 179, 198, 0.6) 50%, transparent 50%);
  background-size: 22px 22px;
}
/* The ribbon at the top of every page reads as a tablecloth, not a wall: same weave, a third
   of the contrast (Matt's pick, 2026-09-20). The hero's hem keeps a stronger weave below. */
.strip.gingham {
  background-image: linear-gradient(90deg, rgba(246, 179, 198, 0.24) 50%, transparent 50%), linear-gradient(rgba(246, 179, 198, 0.24) 50%, transparent 50%);
}
.hand-panel.gingham { background: none; }
.strip { height: 14px; }
.s-red { fill: var(--cherry); }
.s-navy { fill: var(--navy); }
.s-kelly { fill: var(--kelly); }
.fan, .pile { display: inline-block; line-height: 0; }
.fan svg, .pile svg { display: block; height: 100px; width: auto; }

/* Header */
.top-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.mark { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 2.5rem; line-height: 1; color: var(--cherry); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.mark:hover { color: var(--cherry-ink); }
.mark svg { width: 1.5rem; height: 1.5rem; fill: var(--cherry); }
.menu { display: flex; flex-wrap: wrap; gap: 0.3rem 1.7rem; }
.menu a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--navy); font-weight: 700; font-size: 1.1rem; text-decoration: none; padding: 0.35rem 0; }
.menu a:hover span { text-decoration: underline; text-underline-offset: 6px; }
.menu svg { width: 1.05rem; height: 1.05rem; flex: none; }
.site-header { border-bottom: 1.5px solid var(--hair); }

.crumbs { font-size: 1rem; color: var(--soft); padding-top: 0.9rem; }
.crumbs a { color: var(--soft); }

/* Hero. Each game's page takes its suit's color at full strength (Matt's pick, 2026-09-23):
   hearts cherry, spades navy, diamonds kelly, clubs butter. The home page is navy, so the four
   red threes stand out on it. --on is the text color that reads on the hero. */
body { --game: var(--cherry); --game-ink: var(--cherry-ink); --on: #fff; --accent: var(--butter); }
.page-index, .page-classic-canasta { --game: var(--navy); --game-ink: #0F1630; --accent: var(--pink); }
.page-hand-and-foot, .page-hand-knee-and-foot { --game: var(--kelly); --game-ink: var(--kelly-ink); --accent: var(--butter); }
.page-printables { --game: var(--butter); --game-ink: #E9C75A; --on: var(--navy); --accent: var(--cherry); }
/* Where to play takes pink, the gingham's color and the one no other hero uses (Matt's pick,
   2026-09-25). Navy reads on it at about 8.7 to 1, the cherry ink of the h1's em at about 4. */
.page-where-to-play { --game: var(--pink); --game-ink: #E28AA6; --on: var(--navy); --accent: var(--cherry-ink); }
.hero { position: relative; background: var(--game); color: var(--on); }
/* A gingham hem along the bottom, like the edge of a tablecloth. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-color: #fff; background-image: linear-gradient(90deg, rgba(246, 179, 198, 0.75) 50%, transparent 50%), linear-gradient(rgba(246, 179, 198, 0.75) 50%, transparent 50%); background-size: 12px 12px; }
.page-index .hero, .page-modern-american-canasta .hero, .page-printables .hero { margin-top: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.4rem 3rem; align-items: center; padding-top: 3rem; padding-bottom: 3.6rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cherry-ink); }
.eyebrow svg { width: 0.9rem; height: 0.9rem; fill: var(--cherry); }
.hero .eyebrow { color: var(--on); }
.hero .eyebrow svg { fill: var(--on); }
.hero h1 { font-size: clamp(2.7rem, 5.4vw, 4.2rem); margin: 0.5rem 0 0.9rem; color: var(--on); }
.hero h1 em { color: var(--accent); }
.lede { font-size: 1.38rem; color: var(--soft); margin: 0 0 1.5rem; }
.hero .lede { color: var(--on); }
.chunky-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* The primary button is one of the two things that stay loud. The secondary one steps back to
   an outline, so the pair reads as a lead and a follow rather than two shouts. */
.chunky { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 54px; padding: 0.6rem 1.25rem; border: 2px solid var(--navy); border-radius: 12px; font: inherit; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--navy); background: var(--paper); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s, background 0.1s; }
.chunky svg { width: 1.1rem; height: 1.1rem; }
.chunky.primary { background: var(--cherry); color: #fff; border-color: var(--cherry-ink); box-shadow: 4px 4px 0 var(--navy); }
.chunky.primary svg { fill: #fff; }
.chunky:hover { background: #fff; color: var(--navy); }
.chunky.primary:hover { color: #fff; background: var(--cherry); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }
/* On a colored hero the lead button turns white, so it still leads, and the follow button
   outlines in the hero's text color. */
.hero .chunky.primary { background: #fff; color: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 var(--game-ink); }
.hero .chunky.primary svg { fill: var(--cherry); }
.hero .chunky.primary:hover { background: #fff; color: var(--navy); box-shadow: 2px 2px 0 var(--game-ink); }
.hero .chunky:not(.primary) { background: transparent; color: var(--on); border-color: var(--on); }
.hero .chunky:not(.primary) svg { fill: var(--on); }
.hero .chunky:not(.primary):hover { background: #fff; color: var(--navy); }
.hero .chunky:not(.primary):hover svg { fill: var(--cherry); }
/* The cards, large and unframed, dealt straight onto the hero's color with a shadow under
   them. The gingham frame they used to sit in cost them contrast (2026-09-23). */
.hand-panel { position: relative; padding: 0.5rem 0 2.2rem; text-align: center; }
.hand-panel .fan, .hand-panel .pile { position: relative; }
.hand-panel .fan svg { height: 330px; margin: 0 auto; filter: drop-shadow(0 18px 20px rgba(10, 14, 30, 0.35)) drop-shadow(0 3px 4px rgba(10, 14, 30, 0.2)); }
.panel-tag { position: absolute; left: 50%; bottom: -1.15rem; transform: translateX(-50%) rotate(-2deg); margin: 0; background: var(--butter); border: 1.5px solid var(--navy); border-radius: 10px; padding: 0.15rem 0.9rem; font-weight: 700; font-size: 1rem; white-space: nowrap; box-shadow: 2px 2px 0 rgba(28, 39, 72, 0.5); z-index: 1; color: var(--navy); }
.page-printables .panel-tag, .page-where-to-play .panel-tag { background: #fff; }
.page-where-to-play .hero .chunky:not(.primary) svg { fill: var(--cherry); }

/* Which game tiles */
.choice-wrap { padding-top: 3rem; }
.choice-wrap h2 { font-size: 2.1rem; margin: 0 0 1rem; }
/* Four tiles, two by two: the canasta games on top, the Hand and Foot family below (Hand, Knee
   and Foot added as the fourth, Matt's pick, 2026-09-25; before that, three across). One lead.
   The others take a navy hairline (Matt's pick, 2026-09-20): quiet enough to follow the red one,
   definite enough not to look unfinished. */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.choice .tile { position: relative; display: block; min-height: 7.6rem; border: 1.5px solid var(--navy); border-radius: 18px; padding: 1.1rem 1.3rem 1.1rem 5.4rem; color: var(--navy); text-decoration: none; background: #fff; transition: background 0.12s; }
.choice .tile:hover { background: #FFFDFA; }
.choice a.tile:hover { border-color: var(--cherry-ink); }
.choice .tile.here, .choice .tile.lead { background: var(--cherry); color: #fff; border-color: var(--cherry-ink); }
.choice .tile strong { display: block; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 1.85rem; line-height: 1.1; }
.choice .tile .d { display: block; margin-top: 0.2rem; }
.choice .tile em { display: inline-block; margin-top: 0.6rem; font-style: normal; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ccorner { position: absolute; left: 1.1rem; top: 1.05rem; width: 3.1rem; height: 4.3rem; background: #fff; border: 1.5px solid var(--navy); border-radius: 8px; display: grid; align-content: start; justify-items: center; padding-top: 0.35rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.6rem; line-height: 1; color: var(--cherry); }
.ccorner svg { width: 1.1rem; height: 1.1rem; fill: var(--cherry); margin-top: 0.15rem; }
.ccorner.navy { color: var(--navy); }
.ccorner.navy svg { fill: var(--navy); }
.ccorner.kelly { color: var(--kelly); }
.ccorner.kelly svg { fill: var(--kelly); }

/* Facts band */
.cabana { background: repeating-linear-gradient(90deg, #FCF3F6 0 30px, var(--paper) 30px 60px); border-top: 1.5px solid var(--hair); border-bottom: 1.5px solid var(--hair); margin-top: 2.8rem; padding: 2.4rem 0; }
.brief { background: #fff; border: 1.5px solid var(--hair); border-radius: 22px; padding: 1.3rem 1.6rem; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.8rem; }
.brief dt { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cherry-ink); }
.brief dd { margin: 0.1rem 0 0; font-family: "DM Serif Display", Georgia, serif; font-size: 1.65rem; line-height: 1.12; }

/* Article */
.article { padding-top: 1rem; padding-bottom: 1rem; }
/* No underline or accent on headings: on a phone, any line under a heading read like a spelling
   mistake (Matt, 2026-09-17, after the options in _mockups/headings.html). */
.article > h2, .band > h2 { font-size: 2.45rem; margin: 3.2rem 0 0.9rem; }
/* One navy band per rules page, around the scoring section (Matt's pick, 2026-09-23), so a
   long page has a turn in it. It runs edge to edge through its shadow, which the clip-path
   trims top and bottom, so the page never scrolls sideways. The tables stay white cards. */
.band { background: var(--navy); color: #fff; box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); margin: 3.6rem 0 3rem; padding: 2.4rem 0 2.8rem; }
.band > h2:first-child { margin-top: 0; }
.band a { color: var(--butter); }
.band .candy { background: #fff; color: var(--navy); box-shadow: 0 10px 24px rgba(10, 14, 30, 0.3); }
.band .candy thead th { background: var(--cherry); }
.band .candy td { color: var(--navy); }
.band .candy td.pts { color: var(--cherry-ink); }
.band .sticker { color: var(--navy); }
/* A note inside a band reads light on the navy, like the footer: its muted gray and navy label
   would otherwise vanish (Lighthouse caught it on the Hand, Knee and Foot page, 2026-09-23). */
.band .note { color: #fff; }
.band .note b { color: var(--butter); }
.band .note svg { fill: #7FD1A6; }
.article h3 { font-size: 1.65rem; margin: 2.1rem 0 0.5rem; }
.article p, .article ul, .article ol { margin: 0 0 1.1rem; }
.article li { margin: 0.35rem 0; }
.article li::marker { color: var(--cherry); }
.intro-note { background: #fff; border: 1.5px solid var(--hair); border-radius: 16px; padding: 1rem 1.3rem; margin: 2rem auto 0; }
.intro-note p { margin: 0; }

.specials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 1.4rem 0; }
.specials figure { margin: 0; border: 3px solid var(--navy); border-radius: 18px; padding: 1rem 0.8rem 0.9rem; text-align: center; background: #fff; }
.specials .t-pink { background: var(--blush); }
.specials .t-butter { background: var(--butter); }
.specials .fan svg, .specials .pile svg { height: 104px; margin: 0 auto; }
.specials figcaption { font-size: 1.02rem; line-height: 1.3; margin-top: 0.5rem; }
.specials figcaption b { display: block; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 1.4rem; margin-bottom: 0.1rem; }

.example { display: flex; align-items: center; gap: 1.3rem; border: 3px solid var(--navy); border-radius: 18px; padding: 1rem 1.3rem; margin: 1.4rem 0; background: #fff; }
.example.bad { background: var(--blush); }
.example .fan { flex: none; }
.example .fan svg { height: 100px; }
/* A hand plus a pile, as in "taking a frozen pile". */
.take { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.take .plus { font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--navy); }
.take .fan svg, .take .pile svg { height: 96px; }
.example p { margin: 0; }
.example b { color: var(--cherry-ink); }

.candy { width: 100%; border-collapse: separate; border-spacing: 0; border: 3px solid var(--navy); border-radius: 18px; overflow: hidden; margin: 1.1rem 0 1.4rem; font-size: 1.15rem; }
.candy caption { text-align: left; font-weight: 700; padding: 0 0 0.4rem; color: var(--soft); font-size: 1rem; }
.candy th { background: var(--navy); color: #fff; text-align: left; padding: 0.65rem 1.1rem; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.candy th.r, .candy td.r { text-align: right; }
.candy td { padding: 0.6rem 1.1rem; vertical-align: middle; }
.candy tbody tr:nth-child(odd) td { background: var(--blush); }
.candy .pts { font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; color: var(--cherry-ink); white-space: nowrap; text-align: right; }
.candy td.f { width: 11.5rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.candy td.f .fan svg { height: 74px; }
.candy tbody th { background: none; color: var(--navy); text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
.candy tbody tr:nth-child(odd) th { background: var(--blush); }
.candy.compare tbody th { width: 34%; }

.sticker { background: var(--butter); border: 1.5px solid #E8D9A8; border-radius: 16px; padding: 1rem 1.3rem 1.1rem; transform: rotate(-0.7deg); margin: 1.8rem 0.4rem; }
.sticker .tag { display: inline-block; color: var(--kelly-ink); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.sticker p { margin: 0; }
.sticker p + p { margin-top: 0.5rem; }

.scores { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.scores li { position: relative; border: 3px solid var(--navy); border-radius: 18px; padding: 1.7rem 1.1rem; text-align: center; background: #fff; margin: 0; }
.scores li:nth-child(2) { background: var(--blush); }
.scores li:nth-child(3) { background: var(--butter); }
.scores b { display: block; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--cherry-ink); }
.scores .when { display: block; font-size: 1.02rem; color: var(--soft); margin-top: 0.3rem; line-height: 1.3; }

.note { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 1.12rem; color: var(--soft); margin: 1.3rem 0; }
.note svg { width: 1.6rem; height: 1.6rem; fill: var(--kelly); flex: none; margin-top: 0.15rem; }
.note b { color: var(--navy); }

.table-scroll { overflow-x: auto; margin: 1.1rem 0 1.4rem; }
.table-scroll .candy { margin: 0; min-width: 30rem; }

.hands { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.hands li { margin: 0; border: 1.5px solid var(--hair); border-radius: 14px; padding: 0.7rem 1rem 0.8rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.8rem; align-items: baseline; background: #fff; }
.hands li:nth-child(4n+1), .hands li:nth-child(4n+4) { background: var(--blush); }
.hn, .hp { font-family: "DM Serif Display", Georgia, serif; font-size: 1.4rem; line-height: 1.15; }
.hp { color: var(--cherry-ink); }
.hd { grid-column: 1 / -1; font-size: 1.02rem; line-height: 1.35; color: var(--soft); }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 3.4rem; margin: 1rem 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.05rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: var(--cherry); color: #fff; border-radius: 9px; font-weight: 700; }

/* Questions */
.faq > h2 { font-size: 2.45rem; margin: 3.2rem 0 0.9rem; }
details { border: 1.5px solid var(--hair); border-radius: 16px; margin: 0.9rem 0; padding: 0 1.2rem; background: #fff; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--cherry); color: #fff; border-radius: 9px; font-size: 1.5rem; line-height: 1; }
details[open] summary::after { content: "\2212"; background: var(--navy); }
details p { margin: 0 0 1rem; }

.sources { font-size: 1.05rem; color: var(--soft); border-top: 1.5px solid var(--hair); margin-top: 3rem; padding-top: 1rem; }
.sources h2 { font-size: 1.5rem; margin: 0 0 0.5rem; color: var(--navy); }
.updated { font-size: 1rem; color: var(--soft); border-bottom: 1.5px solid var(--hair); padding-bottom: 0.9rem; margin-bottom: 1.6rem; }

.ad { margin: 2.8rem auto 0; }
.ad small { display: block; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }

/* Printables */
.sheet-card { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.8rem; align-items: start; border: 1.5px solid var(--hair); border-radius: 18px; padding: 1.4rem; margin: 1.6rem 0; background: #fff; }
.sheet-card img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 6px; }
.sheet-card h2 { font-size: 2rem; margin: 0 0 0.5rem; }
.sheet-card ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.sheet-card .meta { font-size: 1rem; color: var(--soft); margin: 0 0 1rem; }

/* Where to play (2026-09-25): a card per group, grouped by state, each with game tags in its
   game's suit color and a link to the group's own page. */
.jump { margin: 2rem 0 0.5rem; }
.jump p { margin: 0 0 0.7rem; font-weight: 700; color: var(--soft); font-size: 1.05rem; }
.jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.jump li { margin: 0; }
.jump a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.3rem 0.85rem; border: 1.5px solid var(--navy); border-radius: 10px; background: #fff; color: var(--navy); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.jump a:hover { background: var(--blush); }
.jump a span { color: var(--cherry-ink); font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 1.2rem; }
.places { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.article .places > li { margin: 0; }
.place { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--hair); border-radius: 16px; padding: 1rem 1.25rem 1.05rem; }
.place .town { margin: 0; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cherry-ink); }
.place h3 { font-size: 1.5rem; margin: 0.15rem 0 0.45rem; }
.article .place p:not(.town) { margin: 0 0 0.8rem; font-size: 1.08rem; line-height: 1.5; }
.article .gametags { list-style: none; padding: 0; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.article .gametags li { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.65rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: 0.9rem; font-weight: 700; line-height: 1.5; }
.gametags svg { width: 0.85rem; height: 0.85rem; }
.t-mac { background: var(--blush); color: var(--cherry-ink); }
.t-mac svg { fill: var(--cherry); }
.t-classic { background: #EBEDF5; color: var(--navy); }
.t-classic svg { fill: var(--navy); }
.t-hf { background: #E4F3EA; color: var(--kelly-ink); }
.t-hf svg { fill: var(--kelly); }
.t-any { background: #fff; color: var(--soft); }
.t-new { background: var(--butter); color: var(--navy); }
.visit { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 1.05rem; }
.add-box { background: var(--butter); border: 1.5px solid #E8D9A8; border-radius: 18px; padding: 1.3rem 1.5rem 1.5rem; margin: 3.2rem auto 0; max-width: 46rem; transform: rotate(-0.4deg); }
.add-box .tag { margin: 0; color: var(--kelly-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.add-box h2 { font-size: 2.2rem; margin: 0.2rem 0 0.6rem; }
.add-box p:not(.tag) { margin: 0 0 1.1rem; }

/* Plain pages */
.plain { padding-top: 1.5rem; padding-bottom: 2rem; }
.plain h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); margin: 0.6rem 0 1rem; }
.plain h2 { font-size: 1.9rem; margin: 2.2rem 0 0.6rem; }

.notfound { text-align: center; padding-top: 3rem; padding-bottom: 3rem; }
.notfound .fan svg { height: 150px; margin: 0 auto; }
.notfound h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin: 1.2rem 0 0.6rem; }
.notfound .chunky-row { justify-content: center; margin-top: 1.5rem; }

/* Footer */
.site-footer { background: var(--navy); color: #E7E9F2; margin-top: 3rem; }
.site-footer .strip { border-bottom: 3px solid var(--navy); }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.8rem; padding-bottom: 1rem; }
.site-footer .mark { color: #fff; font-size: 2.1rem; }
.site-footer .mark svg { fill: var(--pink); }
.site-footer p { margin: 0.2rem 0 0; }
.foot-suits { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.foot-suits svg { width: 1.2rem; height: 1.2rem; }
.f-pink { fill: var(--pink); }
.f-white { fill: #fff; }
.f-green { fill: #7FD1A6; }
.foot-links a.l { color: #fff; font-weight: 700; margin-left: 1.3rem; }
.foot-fine { padding-bottom: 2rem; font-size: 0.95rem; color: #C3C8DA; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0.8rem; padding-top: 2rem; padding-bottom: 3rem; }
  .hand-panel .fan svg { height: 260px; }
  .brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specials { grid-template-columns: 1fr; }
  .specials figure { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; text-align: left; gap: 0.9rem; }
  .specials .fan svg, .specials .pile svg { height: 84px; }
  .sheet-card { grid-template-columns: 1fr; }
  .sheet-card img { max-width: 20rem; }
  .places { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1.18rem; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0.2rem 1rem; }
  .choice, .scores { grid-template-columns: 1fr; }
  .brief { grid-template-columns: 1fr; }
  .article > h2, .band > h2, .faq > h2, .add-box h2 { font-size: 2rem; line-height: 1.22; }
  .hand-panel .fan svg { height: 210px; }
  .candy { font-size: 1.05rem; }
  .candy.fans thead { display: none; }
  .candy.fans, .candy.fans tbody { display: block; }
  .candy.fans tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .candy.fans tbody tr:nth-child(odd) { background: var(--blush); }
  .candy.fans tbody tr:nth-child(odd) td { background: transparent; }
  .candy.fans td.f { grid-column: 1 / -1; width: auto; padding-bottom: 0; }
  .candy.fans td.f .fan svg { height: 64px; }
  .table-scroll .candy.compare { min-width: 0; }
  .candy.compare thead { display: none; }
  .candy.compare, .candy.compare tbody, .candy.compare tr, .candy.compare th, .candy.compare td { display: block; width: auto; }
  .candy.compare tbody tr { padding: 0.65rem 1rem 0.75rem; }
  .candy.compare tbody tr:nth-child(odd) { background: var(--blush); }
  .candy.compare tbody tr:nth-child(odd) td, .candy.compare tbody tr:nth-child(odd) th { background: transparent; }
  .candy.compare tbody th { padding: 0 0 0.2rem; font-size: 1.08rem; width: auto; }
  .candy.compare td { padding: 0.1rem 0; text-align: left; }
  .candy.compare td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--soft); }
  .hands { grid-template-columns: 1fr; }
  .hands li:nth-child(4n+1), .hands li:nth-child(4n+4) { background: #fff; }
  .hands li:nth-child(odd) { background: var(--blush); }
  .example { flex-direction: column; align-items: flex-start; }
  .foot-links a.l { margin: 0 1.2rem 0 0; }
}

@media print {
  .site-header, .site-footer, .crumbs, .chunky-row, .ad, .skip, .hand-panel, .choice-wrap, .jump, .visit, .no-print { display: none !important; }
  body { font-size: 11pt; }
  .hero, .cabana { background: none; border: 0; padding: 0; margin: 0; }
  .hero::after { display: none; }
  .hero, .hero h1, .hero .lede, .hero .eyebrow { color: var(--navy); }
  .hero h1 em { color: var(--cherry-ink); }
  .band { background: none; box-shadow: none; clip-path: none; color: inherit; padding: 0; margin: 0; }
  .hero-grid { display: block; padding: 0; }
  .brief { box-shadow: none; }
  .article > h2, .band > h2, .faq > h2 { font-size: 18pt; margin-top: 16pt; }
  a { color: inherit; text-decoration: none; }
  details { border: 0; padding: 0; }
  summary::after { display: none; }
  .sticker, .example, .specials figure, .candy, .add-box, .place { box-shadow: none; transform: none; break-inside: avoid; }
}