/* ============================================================
   GOLFBALLIN — shared design system
   Old-school Bay Area golf shop, new-school feel.
   90s/early-2000s poster grit + a little elegance.
   Mobile-first. Min-width breakpoints scale up.
   ============================================================ */

/* ---------- Fonts (loaded via <link> in each page head) ----- */
/* Anton — gritty athletic headlines
   Playfair Display — elegant serif accents / quotes
   Yellowtail — the "Ballin" script
   Barlow / Barlow Condensed — body + UI labels        */

/* ---------- Design tokens ----------------------------------- */
:root {
  /* Palette pulled straight from the shop */
  --green-deep: #0f2e1c;   /* forest / shadow */
  --green:      #1c7a3c;   /* fairway green */
  --green-lawn: #37b34a;   /* bright turf pop */
  --cream:      #f4efe1;   /* light vintage paper — used for text on dark */
  --bg:         #ece3cf;   /* warm parchment page background (accents the green) */
  --paper:      #f6f1e4;   /* soft cream card/surface — replaces stark white */
  --ink:        #16150f;   /* near-black */
  --red:        #c8402e;   /* "USED CARTS" pop red */
  --gold:       #d6a24a;   /* wood-beam warmth */
  --chalk:      #ffffff;

  /* Fonts */
  --f-display: "Anton", "Arial Narrow", sans-serif;
  --f-serif:   "Playfair Display", Georgia, serif;
  --f-script:  "Yellowtail", cursive;
  --f-body:    "Barlow", system-ui, sans-serif;
  --f-cond:    "Barlow Condensed", "Barlow", sans-serif;

  /* Rhythm */
  --pad: clamp(1.1rem, 5vw, 2.5rem);
  --maxw: 1180px;
  --radius: 4px;
  --shadow: 0 14px 34px rgba(0,0,0,.28);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.20);
  --hair: 2px solid var(--ink);
}

/* ---------- Reset / base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Faint film-grain over the whole page for grit */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography -------------------------------------- */
h1, h2, h3 { margin: 0 0 .4em; line-height: .98; letter-spacing: .5px; }
.display {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: .92;
  overflow-wrap: break-word;
  word-break: normal;
}
h1.display { font-size: clamp(2.3rem, 9.5vw, 6rem); }
h2.display { font-size: clamp(1.9rem, 7.5vw, 3.6rem); }
h3.display { font-size: clamp(1.4rem, 5vw, 2rem); }

.eyebrow {
  font-family: var(--f-cond);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 600;
  font-size: .82rem;
  color: var(--green);
  display: inline-block;
  margin-bottom: .6rem;
}
.eyebrow::before { content: "◆ "; color: var(--red); }

p { margin: 0 0 1rem; }
.lead { font-size: 1.12rem; }
.muted { opacity: .72; }

/* ---------- Layout ------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(3rem, 9vw, 5.5rem); position: relative; }
/* Anchor-jump targets clear the sticky header */
section[id] { scroll-margin-top: 84px; }
.section-head { max-width: 640px; margin-bottom: 2rem; }

.bg-green { background: var(--green-deep); color: var(--cream); }
.bg-green .eyebrow { color: var(--green-lawn); }
.bg-ink { background: var(--ink); color: var(--cream); }
/* Same reason bg-green overrides it: the base .eyebrow is --green (#1c7a3c),
   which on near-black lands at 3.4:1 and fails AA for text this small.
   --green-lawn takes it to 6.7:1. Affects #products and #minigolf here, plus
   an eyebrow each on contact and gallery. */
.bg-ink .eyebrow { color: var(--green-lawn); }
.bg-lawn { background: var(--green); color: var(--chalk); }

/* ---------- Buttons ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.02rem;
  padding: .85rem 1.6rem;
  border: var(--hair);
  border-radius: var(--radius);
  background: var(--ink); color: var(--cream);
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(0,0,0,.85); }
.btn--book { background: var(--red); color: var(--chalk); border-color: var(--ink); }
.btn--green { background: var(--green); color: var(--chalk); }
.btn--ghost { background: transparent; color: currentColor; box-shadow: none; }
.btn--ghost:active { transform: translateY(1px); }
.btn--lg { font-size: 1.15rem; padding: 1rem 2rem; }

/* "Book a Bay" sits inside .nav__menu and .footer-grid, and those blocks style
   their own descendant links -- .nav__menu a and .footer-grid a are both (0,1,1),
   which outranks .btn at (0,1,0). They were flattening the button's horizontal
   padding to 0 (and the nav also killed its border, the footer its inline-flex),
   so the label ran to the edge of the box. Re-assert the button box at (0,2,1)
   so it wins wherever it is placed. */
.nav__menu a.btn { padding: .85rem 1.6rem; border: var(--hair); }
.footer-grid a.btn { display: inline-flex; padding: .85rem 1.6rem; opacity: 1; }
@media (hover:hover) {
  .btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(0,0,0,.85); }
  .btn--book:hover { background: #d94b38; }
}

/* ---------- Marquee ratchet banner -------------------------- */
.marquee {
  background: var(--green);
  color: var(--cream);
  border-block: 3px solid var(--ink);
  overflow: hidden; white-space: nowrap;
  padding-block: .55rem;
}
.marquee__track {
  display: inline-flex; gap: 2.2rem;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 2px; font-size: 1.05rem;
  animation: slide 26s linear infinite;
  will-change: transform;
}
.marquee__track span::after { content: "•"; margin-left: 2.2rem; color: var(--green-lawn); }
/* Longer phrases (the home-page facility stats) need a longer loop so the
   pixels-per-second stays readable. */
.marquee--facts .marquee__track { animation-duration: 40s; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Header / nav ------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 3px solid var(--ink);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .7rem; gap: 1rem;
}
/* Text wordmark: "GolfBallin" is ONE word — no gap between the two spans.
   The colour/font change carries the split, not a space. (.brand--logos below
   re-adds a gap, because that variant separates two different logos.) */
.brand { display: flex; align-items: baseline; gap: 0; line-height: 1; }
.brand__golf {
  font-family: var(--f-display); font-size: 1.7rem; color: var(--green);
  text-transform: uppercase; letter-spacing: 1px;
  -webkit-text-stroke: 1px var(--ink);
}
/* Yellowtail carries a wide left side bearing, so even at gap:0 the script "B"
   floats away from the F and the name reads as two words. Pull it back. */
.brand__ballin { font-family: var(--f-script); font-size: 1.5rem; color: var(--ink); margin-left: -.14em; }

/* Dual logo lockup (GolfBallin | FixFactory) */
.brand--logos { align-items: center; gap: .5rem; }
.brand__logo { display: block; width: auto; }
.brand__logo--gb { height: 30px; mix-blend-mode: multiply; }
.brand__logo--ff { height: 40px; }
.brand__sep { width: 2px; height: 28px; background: var(--ink); border-radius: 2px; }

.nav__toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: .4rem;
}
.nav__toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav[data-open="true"] .nav__toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2){ opacity: 0; }
.nav[data-open="true"] .nav__toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.nav__menu {
  position: absolute; left: 0; right: 0; top: 100%;
  /* Both The Clubhouse and FixFactory expand their sub-links inline on mobile,
     which is ~14 rows -- taller than a short phone. Cap the panel to whatever
     sits below the sticky header and let it scroll instead of running off. */
  max-height: calc(100vh - 66px);
  max-height: calc(100dvh - 66px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--green-deep); color: var(--cream);
  display: grid; gap: .2rem;
  padding: 1rem var(--pad) 1.5rem;
  border-bottom: 3px solid var(--ink);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: .22s ease;
}
.nav[data-open="true"] .nav__menu { transform: none; opacity: 1; pointer-events: auto; }
.nav__menu a {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; font-size: 1.35rem; padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav__menu a[aria-current="page"] { color: var(--green-lawn); }
.nav__menu .btn { margin-top: .8rem; justify-content: center; }

@media (min-width: 860px) {
  .nav__toggle { display: none; }
  .nav__menu {
    position: static; background: none; color: inherit;
    display: flex; align-items: center; gap: 1.4rem;
    padding: 0; border: 0; transform: none; opacity: 1; pointer-events: auto;
    /* Undo the mobile scroll cap: an overflow container here would clip the
       absolutely-positioned dropdowns instead of letting them hang below. */
    max-height: none; overflow: visible;
  }
  .nav__menu a {
    font-size: .95rem; border: 0; padding: .3rem 0;
    color: var(--ink); position: relative;
  }
  .nav__menu a:not(.btn)::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--red); transition: width .2s;
  }
  .nav__menu a:not(.btn):hover::after,
  .nav__menu a[aria-current="page"]::after { width: 100%; }
  .nav__menu a[aria-current="page"] { color: var(--ink); }
  .nav__menu .btn { margin: 0; color: var(--chalk); }
  /* Full .btn padding would make this ~55px tall and push the sticky header
     with it. The bar wants a trimmer button, so keep the restored side
     padding but ease the vertical. */
  .nav__menu a.btn { padding: .6rem 1.4rem; }
  .brand__golf { font-size: 2rem; }
  .brand__ballin { font-size: 1.75rem; }
  .brand__logo--gb { height: 38px; }
  .brand__logo--ff { height: 50px; }
  .brand__sep { height: 36px; }
}

/* ---------- Nav dropdowns (Clubhouse + FixFactory jump menus) --- */
.nav__caret { display: none; }
.nav__sub { display: grid; }
/* Mobile: sub-links sit indented under the parent, always visible */
.nav__sub a {
  font-size: 1.05rem;
  padding-left: 1.1rem;
  opacity: .82;
}
.nav__sub a::before { content: "→ "; color: var(--green-lawn); }

@media (min-width: 860px) {
  .nav__has-sub { position: relative; display: flex; align-items: center; }
  .nav__caret { display: inline-block; font-size: .7em; margin-left: .15em; }
  /* Desktop: reveal as a sticker-shadowed dropdown on hover/focus */
  .nav__sub {
    position: absolute; top: 100%; left: 0;
    min-width: 210px;
    background: var(--green-deep); color: var(--cream);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 rgba(0,0,0,.85);
    padding: .5rem; gap: .1rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 120;
  }
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__sub a {
    color: var(--cream); font-size: .9rem; font-weight: 600;
    padding: .5rem .7rem; opacity: 1; white-space: nowrap;
    border: 0; border-radius: 3px;
  }
  .nav__sub a::before { content: ""; }
  .nav__sub a::after { display: none; }
  .nav__sub a:hover { background: rgba(255,255,255,.12); color: var(--green-lawn); }
}

/* ---------- Hero -------------------------------------------- */
.hero {
  position: relative; color: var(--cream);
  background: var(--green-deep);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,46,28,.55) 0%, rgba(15,46,28,.35) 40%, rgba(15,46,28,.92) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  min-height: min(88vh, 720px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 3rem 2.5rem;
}
.hero h1 { text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.hero__tag { max-width: 34ch; font-size: 1.15rem; margin-bottom: 1.5rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__loc {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .25em;
  font-size: .82rem; margin-bottom: 1rem; color: var(--green-lawn);
}

/* ---------- Sticker / tape / badge -------------------------- */
.sticker {
  display: inline-block;
  font-family: var(--f-display); text-transform: uppercase;
  background: var(--red); color: var(--chalk);
  padding: .4rem .9rem; letter-spacing: 1px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  transform: rotate(-3deg);
}
.tape {
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  width: 120px; height: 26px;
  background: rgba(214,162,74,.55);
  border: 1px dashed rgba(0,0,0,.25);
  transform: rotate(-2deg);
}

/* ---------- Feature / facility cards ------------------------ */
.grid { display: grid; gap: 1.4rem; }
@media (min-width: 820px)  { .grid--3 { grid-template-columns: repeat(3,1fr); } }

.card {
  background: var(--paper);
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__media { aspect-ratio: 4/3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.1rem 1.2rem 1.3rem; }
.card__body h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.35rem; margin-bottom: .35rem; }
.card__tag {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .15em;
  font-size: .72rem; font-weight: 700; color: var(--red);
}

/* Split feature row */
.split { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 840px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .split--rev .split__media { order: 2; } }
.split__media {
  border: var(--hair); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); position: relative;
}
.split__media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- Photo collage (clubhouse events) -----------------
   Three photos tilted and overlapped like a stack of prints
   dropped on a table. Each one keeps the same black outline the
   single photos elsewhere use -- no mat, no frame. Everything is
   percentage-based off .collage, so the whole arrangement scales
   as one piece and never needs media queries to re-place them. */

/* The collage variant opts OUT of the framed-photo treatment on the wrapper:
   the base .split__media draws its own border + overflow:hidden, which would
   box the collage in and clip the corners the tilt pushes outside. The border
   moves onto the individual photos instead. */
.split__media--collage {
  border: 0; overflow: visible; box-shadow: none; border-radius: 0;
}
.collage {
  position: relative;
  /* Squarer than the 4/3 used for single photos: the fan needs vertical room
     for the centre photo to sit lower than the outer two. */
  aspect-ratio: 1/1;
  /* Rotation pushes corners past the layout box; this keeps them off the
     neighbouring text without needing overflow:hidden (which would cut them). */
  margin: 2% 3% 4%;
}
.collage__item {
  position: absolute; margin: 0;
  /* Same treatment as .split__media so a collage photo and a standalone photo
     read as the same object. */
  border: var(--hair); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.collage__item img { width: 100%; display: block; object-fit: cover; }
.collage__item--1 img, .collage__item--2 img { aspect-ratio: 3/4; }  /* portrait shots */
.collage__item--3 img { aspect-ratio: 4/3; }                         /* landscape shot */

/* Tilt + overlap. z-index puts the centre photo on top of the outer two. */
.collage__item--1 { width: 44%; top:  4%; left: 0;   transform: rotate(-7deg);  z-index: 2; }
.collage__item--2 { width: 44%; top: 30%; left: 28%; transform: rotate(2.5deg); z-index: 3; }
.collage__item--3 { width: 48%; top: 10%; right: 0;  transform: rotate(8deg);   z-index: 1; }

/* Lift and straighten whichever photo you point at. */
@media (hover: hover) {
  .collage__item:hover {
    transform: rotate(0deg) scale(1.04); z-index: 4;
    box-shadow: 0 20px 44px rgba(0,0,0,.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .collage__item { transition: none; }
}

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.15); border: var(--hair); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4,1fr); } }
.stat { background: var(--green-deep); padding: 1.4rem 1rem; text-align: center; }
.stat__num { font-family: var(--f-display); font-size: 2.4rem; color: var(--green-lawn); line-height: 1; }
.stat__lab { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }

/* 9-tile "facility by the numbers" variant: 2-up on phones (last tile spans
   the full row), 3-up from tablet on so it lands as a clean 3x3 block. */
.stats--facility .stat { padding: 1.2rem .7rem; }
.stats--facility .stat__lab { letter-spacing: .08em; font-size: .78rem; }
.stats--facility .stat:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .stats--facility { grid-template-columns: repeat(3,1fr); }
  .stats--facility .stat { padding: 1.4rem 1rem; }
  .stats--facility .stat:last-child { grid-column: auto; }
}

/* ---------- Quote / owner ----------------------------------- */
.quote { border-left: 5px solid var(--red); padding-left: 1.2rem; }
.quote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.3rem,4vw,2rem); line-height: 1.25; }
.quote cite { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .15em; font-style: normal; font-size: .85rem; }

/* ---------- Gallery ----------------------------------------- */
.gallery { columns: 2; column-gap: .8rem; }
@media (min-width: 700px) { .gallery { columns: 3; } }
@media (min-width: 1000px){ .gallery { columns: 4; } }
.gallery figure {
  margin: 0 0 .8rem; break-inside: avoid;
  border: var(--hair); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--ink);
  cursor: zoom-in; position: relative;
}
/* height:auto is load-bearing. The figures carry width/height attributes so the
   masonry columns reserve space before the lazy images arrive; those attributes
   are presentational hints, so without this the height hint survives and every
   photo renders stretched. Keep them together. */
.gallery img { width: 100%; height: auto; transition: transform .5s ease, filter .3s ease; }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; font-weight: 600; color: var(--cream);
  padding: 1.2rem .7rem .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  opacity: 0; transition: opacity .25s;
}
.gallery figure:hover figcaption { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,20,12,.94);
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; border: 3px solid var(--cream); box-shadow: var(--shadow); }
.lightbox__close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: var(--red); color: #fff; border: 2px solid #fff;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; line-height: 1;
}

/* ---------- Contact ----------------------------------------- */
/* Opening hours. Two rows, so a table rather than a definition list: the day
   and the time are a header/value pair, not a heading and its prose. */
.hours { width: 100%; border-collapse: collapse; font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .06em; }
.hours th { text-align: left; font-weight: 600; padding: .7rem 0; }
.hours td { text-align: right; color: var(--green-lawn); }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid rgba(255,255,255,.14); }
.contact-grid { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); } }
.contact-card {
  background: var(--paper); border: var(--hair); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; color: var(--red); }
.contact-card a { font-family: var(--f-display); font-size: 1.3rem; word-break: break-word; }
.contact-card p { font-size: .95rem; margin: 0; }

/* Google Maps embed — responsive, framed like a card */
.map-embed {
  border: var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; background: var(--paper); line-height: 0;
}
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }
@media (min-width: 760px) { .map-embed iframe { height: 440px; } }

.socials { display: flex; flex-wrap: wrap; gap: .7rem; }
.social {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  padding: .7rem 1.1rem; border: var(--hair); border-radius: var(--radius);
  background: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.8);
  transition: transform .12s, box-shadow .12s;
}
.social:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.8); }
.social svg { width: 20px; height: 20px; }
/* Outline version for the dark bands, where the cream paper button would shout. */
.social--ghost { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.4); box-shadow: none; }
.social--ghost:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Lesson rate ------------------------------------- */
/* One number, stated plainly. Same shape as .rate__price in the sim rooms so
   the two prices on this page read as the same kind of object. */
.lessonrate { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--green); margin: 1.3rem 0 .3rem; }
.lessonrate span {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; color: var(--ink); opacity: .75; margin-left: .25rem;
}

/* ---------- Membership tiers -------------------------------- */
/* Flex, not grid: the Single set is FIVE cards and the Family set is three.
   A 3-track grid strands the trailing 2 against the left edge (same trap as
   #products); flex + justify-content centres a short final row. Five across
   was tried and rejected -- at the 1180px wrap that is ~164px of usable card,
   which mangles the price and the feature list. 3 + 2 it is.
   align-items: flex-start keeps the cards their natural heights, as before. */
.tiers { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; align-items: flex-start; }
.tiers > .tier { flex: 0 1 100%; }
@media (min-width: 620px) { .tiers > .tier { flex-basis: calc(50% - .8rem); } }
@media (min-width: 900px) { .tiers > .tier { flex-basis: calc(33.333% - 1.067rem); } }
.tier {
  background: var(--paper);
  /* The tiers sit inside .bg-green, which sets color: var(--cream). A cream
     card would inherit cream text and render invisible, so re-assert ink.
     Any light-background card placed on a dark band needs this. */
  color: var(--ink);
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.5rem 1.8rem;
  display: flex; flex-direction: column;
  position: relative;
}
.tier--featured { background: var(--green-deep); color: var(--cream); box-shadow: 6px 6px 0 rgba(0,0,0,.85); }
@media (min-width: 900px) { .tier--featured { transform: translateY(-14px); } }
.tier__badge {
  position: absolute; top: -14px; right: 1.2rem;
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: 1px; font-size: .82rem;
  background: var(--red); color: var(--chalk);
  padding: .3rem .85rem; border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.tier__name { font-family: var(--f-display); text-transform: uppercase; font-size: 1.8rem; letter-spacing: 1px; margin-bottom: .2rem; }
.tier__blurb { font-size: .95rem; opacity: .82; margin-bottom: 1.1rem; }
.tier__price { font-family: var(--f-display); font-size: 3rem; line-height: 1; color: var(--green); }
.tier--featured .tier__price { color: var(--green-lawn); }
.tier__per { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; opacity: .78; margin-left: .3rem; }
.tier__features { margin: 1.3rem 0 1.6rem; display: grid; gap: .6rem; }
.tier__features li { padding-left: 1.7rem; position: relative; font-size: .98rem; }
.tier__features li::before { content: "◆"; position: absolute; left: 0; top: .05em; color: var(--red); }
.tier--featured .tier__features li::before { color: var(--green-lawn); }
.tier__features li.included { font-weight: 600; }
/* Was the golf-flag emoji, which broke the site's no-emoji rule (and rendered
   as a full-colour glyph among flat ◆ bullets). Same mark, gold instead of red
   -- reads as "this one is on every tier" on both the cream and featured cards. */
.tier__features li.included::before { color: var(--gold); }
.tier--featured .tier__features li.included::before { color: var(--gold); }
/* Struck-through-ish "not included" line, e.g. "No launch monitor usage". */
.tier__features li.no { opacity: .62; }
.tier__features li.no::before { content: "\2013"; color: currentColor; }
/* The whole tier card is the control now (its "Join" button is gone), so it
   needs button affordances: a pointer, a lift on hover and a visible focus
   ring for keyboard users. */
.tier { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.tier:focus-visible { outline: 3px solid var(--green-lawn); outline-offset: 3px; }
.tier:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(0,0,0,.85); }
@media (hover:hover) {
  .tier:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(0,0,0,.85); }
  .tier--featured:hover { transform: translateY(-14px) translate(-2px,-2px); }
}
/* Replaces the removed button as the card's "there is more here" cue. Keeps
   margin-top:auto so it pins to the bottom and the cards stay aligned. */
/* Annual price + the initiation note. Both sit under the big monthly figure
   so the yearly saving and the waived initiation are visible without opening
   the compare table. */
.tier__alt { font-size: .92rem; margin: .45rem 0 0; opacity: .85; }
.tier__alt strong { white-space: nowrap; }
.tier__init {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: .78rem; opacity: .7; margin: 0 0 1rem;
}

/* ---- Single / Family switch -------------------------------------------
   Two real <button>s with aria-pressed rather than a checkbox: the control
   swaps which set of cards is shown, so "pressed" is the honest state.
   Ships hidden; main.js reveals it (see the note in fixfactory.html). */
.planswitch { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.planswitch__label { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; opacity: .8; }
.planswitch__track { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.5); overflow: hidden; }
.planswitch__btn {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; font-size: .95rem; padding: .6rem 1.5rem;
  background: transparent; color: var(--ink); border: 0; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.planswitch__btn + .planswitch__btn { border-left: 2px solid var(--ink); }
.planswitch__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.planswitch__btn:focus-visible { outline: 3px solid var(--green-lawn); outline-offset: -3px; }

/* Plan sets. With no JS there is no [data-plans-mode], so both sets render in
   full under their own headings -- nothing here hides content by default. */
.planset + .planset { margin-top: 3rem; }
.planset__head { font-family: var(--f-display); text-transform: uppercase; font-size: 1.6rem; letter-spacing: 1px; text-align: center; margin-bottom: .4rem; }
.planset__note { text-align: center; max-width: 46ch; margin: 0 auto 1.6rem; font-size: .95rem; opacity: .85; }
[data-plans-mode] .planset + .planset { margin-top: 0; }
/* data-plan-GROUP is the wrapper around a whole set of cards; data-plan-SET is
   the per-card/per-button/per-table marker main.js reads. Two attributes, one
   hyphen apart -- do not merge them. */
[data-plans-mode="single"] .planset[data-plan-group="family"],
[data-plans-mode="family"] .planset[data-plan-group="single"] { display: none; }
/* The switch labels the visible set, so the heading would be a duplicate --
   but it stays in the accessibility tree so the heading outline survives. */
[data-plans-mode] .planset__head {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.planfine { max-width: 60ch; margin: 2.2rem auto 0; text-align: center; font-size: .92rem; opacity: .85; }

.tier__more {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .9rem; color: var(--red);
}
.tier--featured .tier__more { color: var(--green-lawn); }

/* Perks strip */
.perks { display: grid; gap: 1rem; }
@media (min-width: 620px) { .perks { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 920px) { .perks { grid-template-columns: repeat(4,1fr); } }

/* Three-card variant (home page, "No golf required"). Same trap #products hits:
   the 4-track grid above would leave the three cards in a 4-wide row with a
   dead column on the right. Flex + justify-content lets a short row centre, and
   the flex-basis percentages subtract their share of the 1rem gap so the cards
   still line up with the 2- and 3-column breakpoints. */
.perks--3 { display: flex; flex-wrap: wrap; justify-content: center; }
.perks--3 .perk { flex: 0 1 100%; }
@media (min-width: 620px) { .perks--3 .perk { flex-basis: calc(50% - .5rem); } }
@media (min-width: 920px) { .perks--3 .perk { flex-basis: calc(33.333% - .667rem); } }

/* Centred on the base, not per section: every perk tile on the site is an icon
   tile now (Putt Pot, Products, and the home page's "No golf required" strip),
   and a centred icon over a centred label is the look they all share. */
.perk { border: var(--hair); border-radius: var(--radius); background: var(--paper); color: var(--ink); padding: 1.2rem; text-align: center; }
/* line-height: 0 so the inline-block icon below doesn't sit on a text strut and
   pick up a few stray pixels underneath. (Was font-size/line-height for emoji;
   there are none left anywhere on the site.) */
.perk__ico { line-height: 0; }

/* Icon set (assets/icons/) -- hand-painted graffiti stickers on transparent
   backgrounds. They drop into the same slot the emoji used to sit in.
   Sized by HEIGHT, not width: the PNGs are all different aspect ratios (a tall
   golf ball, a wide golf cart), and capping the height is what keeps every
   card's headline on the same baseline. The height is set in CSS rather than
   on the element, so the slot is reserved before the image loads and nothing
   jumps. The artwork carries its own heavy black outline already, so the only
   lift it needs is a soft shadow to sit it on the cream card. */
.perk__ico img { height: 78px; width: auto; max-width: 100%; display: inline-block; vertical-align: bottom; filter: drop-shadow(0 3px 4px rgba(0,0,0,.24)); }

.perk h4 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.15rem; margin: .5rem 0 .3rem; }
.perk p { font-size: .92rem; margin: 0; opacity: .82; }

/* Products section (clubhouse). The section HEAD is centered here; the cards
   themselves are centered by .perk above, for the whole site.
   The grid above is swapped for flex because #products holds 6 cards in a
   4-up layout: a grid's 1fr tracks would strand the 2-card final row against
   the left edge, while flex + justify-content lets that row center. Flex-basis
   percentages subtract their share of the 1rem gap so the full rows still line
   up with the 4- and 2-column breakpoints. */
#products .section-head { margin-inline: auto; text-align: center; }
#products .perks { display: flex; flex-wrap: wrap; justify-content: center; }
#products .perk { flex: 0 1 100%; }
@media (min-width: 620px) { #products .perk { flex-basis: calc(50% - .5rem); } }
@media (min-width: 920px) { #products .perk { flex-basis: calc(25% - .75rem); } }

/* Putt Pot (clubhouse) -- the artwork is a wide promo graphic, not a photo.
   It carries its own headline typography, so it can't ride in .split__media:
   that 4/3 crop would cut the top and bottom off the piece. This frame keeps
   the art at its own ratio and just wraps it in the same black outline the
   photos elsewhere use. Centered head + a 3-up rule strip underneath. */
#puttpot .section-head { max-width: 720px; margin-inline: auto; text-align: center; }
#puttpot .puttpot__art {
  border: var(--hair); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); line-height: 0;
  max-width: 940px; margin: 0 auto 2rem;
}
#puttpot .puttpot__art img { width: 100%; height: auto; display: block; }
/* The three Putt Pot tiles run a touch bigger than the Products shelf: only
   three across, and they carry the whole rules strip. */
#puttpot .perk__ico img { height: 92px; }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* Same trap as .tier: this cream table sits on a dark band that sets
   color: var(--cream), so the body cells must re-assert ink or they render
   cream-on-cream and vanish. thead th overrides back to cream on its own
   dark green fill below. */
.compare { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--paper); color: var(--ink); }
.compare th, .compare td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid rgba(0,0,0,.12); }
.compare thead th { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .5px; font-size: 1rem; background: var(--green-deep); color: var(--cream); }
.compare tbody th { text-align: left; font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .95rem; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { opacity: .35; }

/* FAQ accordion */
/* ---------- Footer ------------------------------------------ */
.site-footer { background: var(--ink); color: var(--cream); padding-block: 2.6rem 1.4rem; }
.footer-grid { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h4 { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .14em; color: var(--green-lawn); font-size: .9rem; margin: 0 0 .7rem; }
.footer-grid a { display: block; padding: .2rem 0; opacity: .85; }
.footer-grid a:hover { opacity: 1; color: var(--green-lawn); }
.footer-bottom {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between;
  font-size: .82rem; opacity: .7;
}

/* ---------- Utilities --------------------------------------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.chip {
  display: inline-block; font-family: var(--f-cond); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; font-size: .78rem;
  padding: .3rem .7rem; border: 1.5px solid currentColor; border-radius: 100px; margin: .2rem;
}
/* ---------- Booking chooser modal ---------------------------
   Injected by main.js from BOOKING_SITES — no markup in the
   HTML files. Sits above the lightbox (z-index 200).         */
.bookmodal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,20,12,.94);
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.bookmodal[data-open="true"] { display: flex; }
.bookmodal__panel {
  position: relative;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--bg); color: var(--ink);
  border: var(--hair); border-radius: var(--radius);
  box-shadow: 8px 8px 0 rgba(0,0,0,.85);
  padding: clamp(1.4rem, 5vw, 2.2rem);
}
.bookmodal__panel h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.bookmodal__lead { font-size: 1.02rem; opacity: .78; margin-bottom: 1.4rem; }
.bookmodal__close {
  position: absolute; top: .7rem; right: .7rem;
  background: var(--red); color: #fff; border: 2px solid var(--ink);
  width: 38px; height: 38px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
}
.bookmodal__opts { display: grid; gap: .9rem; }

.bookopt {
  display: block; padding: 1.1rem 1.2rem;
  background: var(--paper); border: var(--hair); border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bookopt__name {
  display: block; font-family: var(--f-display); text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: 1px; line-height: 1;
}
.bookopt__blurb { display: block; font-size: .95rem; opacity: .72; margin-top: .3rem; }
.bookopt__go {
  display: block; margin-top: .6rem;
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .9rem; color: var(--red);
}
.bookopt:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(0,0,0,.85); }
@media (hover:hover) {
  .bookopt:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(0,0,0,.85); }
}
.bookopt:focus-visible, .bookmodal__close:focus-visible {
  outline: 3px solid var(--green-lawn); outline-offset: 3px;
}

/* ---------- Plan comparison dialog --------------------------
   Shares the .bookmodal overlay, panel, close button and focus
   styles; only these bits differ. Wider panel because the compare
   table has a 560px min-width of its own.                      */
.planmodal__panel { max-width: 760px; }
.planmodal__cta { width: 100%; justify-content: center; margin-top: 1.4rem; }

/* Column for the tier the visitor actually clicked. main.js sets
   data-highlight to 1, 2 or 3; the cells are offset by one because
   each row leads with a <th> feature label. */
.compare[data-highlight="1"] :is(thead th, tbody td):nth-child(2),
.compare[data-highlight="2"] :is(thead th, tbody td):nth-child(3),
.compare[data-highlight="3"] :is(thead th, tbody td):nth-child(4),
.compare[data-highlight="4"] :is(thead th, tbody td):nth-child(5),
.compare[data-highlight="5"] :is(thead th, tbody td):nth-child(6) {
  background: rgba(55,179,74,.16);
}
.compare[data-highlight] thead th:nth-child(n+2) { opacity: .55; }
.compare[data-highlight="1"] thead th:nth-child(2),
.compare[data-highlight="2"] thead th:nth-child(3),
.compare[data-highlight="3"] thead th:nth-child(4),
.compare[data-highlight="4"] thead th:nth-child(5),
.compare[data-highlight="5"] thead th:nth-child(6) { opacity: 1; }
/* Six columns instead of four -- needs more room before the wrapper scrolls. */
.compare--wide { min-width: 760px; }
.compare small { display: block; font-weight: 400; opacity: .7; font-size: .82em; text-transform: none; letter-spacing: 0; }

.bookmodal__foot { margin: 1.3rem 0 0; font-size: .9rem; opacity: .75; }
.bookmodal__foot a { color: var(--green); font-weight: 700; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .bookopt { transition: none; }
}

/* ---------- Coaches (FixFactory → Lessons) ------------------
   Three instructor slots. Contact details are deliberately NOT
   printed as text — each is a labelled icon link that fires the
   action (tel:, mailto:, profile, site). Cards carry a variable
   number of icons, so the row just wraps.                     */
.coaches { display: grid; gap: 1.1rem; }
/* Every coach card now carries the same three parts (name, role, bio), so the
   cards stretch to one shared height rather than each hugging its own content.
   align-items:start was here while the cards had mismatched shapes (a bare
   credential vs. a full paragraph); with matching shapes it just made the
   bottoms ragged. .coach__links keeps its margin-top:auto, which pins every
   icon row to that shared baseline. */
@media (min-width: 700px) { .coaches { grid-template-columns: repeat(3, 1fr); } }

.coach {
  background: var(--paper); border: var(--hair); border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
  padding: 1.3rem 1.2rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.coach__name {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem); letter-spacing: .5px;
  line-height: 1; margin: 0;
}
/* Short credential line under the name. */
.coach__role {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; font-size: .82rem; color: var(--red); margin: -.35rem 0 0;
}
.coach__bio { font-size: .95rem; margin: 0; opacity: .8; }
/* margin-top:auto pins the icon row to the bottom, so the rows stay aligned
   across cards even though the bios are very different lengths. */
.coach__links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: .2rem; }

/* Icon-only link. The accessible name lives on aria-label — there is no
   visible text, so never remove it. title= gives sighted users a tooltip. */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* 44px = comfortable tap target */
  border: var(--hair); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  box-shadow: 3px 3px 0 rgba(0,0,0,.85);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.85); }
@media (hover:hover) {
  .iconbtn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(0,0,0,.85);
    background: var(--green); color: var(--chalk); }
}
.iconbtn:focus-visible { outline: 3px solid var(--green-lawn); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .iconbtn { transition: none; } }

/* ---------- Sim rooms (FixFactory → Indoor Sim) --------------
   Two booking posters, one per bookable sim room. The rooms are
   themed in real life, so the cards are too -- but only through
   four custom properties set on the modifier class, so none of
   the shared rules ever branch on which room they are drawing:

     --room-field  the card ground
     --room-tex    a background-image laid over that ground
     --room-pop    the accent (prices, rules, bullets)
     --room-ink    text on the field
     --room-wm     the ghosted watermark colour

   A third room is a new modifier, not a new block. Keep the pop
   colour off small text -- both rooms clear 3:1 on the big Anton
   price but not 4.5:1, so labels use --room-ink instead.      */
.simrooms { display: grid; gap: 1.6rem; margin-top: clamp(2.2rem, 6vw, 3.4rem); }
@media (min-width: 820px) { .simrooms { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.simroom {
  --room-field: var(--ink);
  --room-tex: none;
  --room-pop: var(--red);
  --room-ink: var(--cream);
  --room-wm: rgba(255,255,255,.10);

  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background-color: var(--room-field);
  background-image: var(--room-tex);
  color: var(--room-ink);
  border: var(--hair); border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(0,0,0,.85);
}

/* Sunday red. The whole card is the accent, so the pop colour is
   the gold the shop's wood beams already use. */
.simroom--tiger {
  --room-field: #9d1d13;
  --room-tex: repeating-linear-gradient(115deg, rgba(0,0,0,0) 0 22px, rgba(0,0,0,.09) 22px 44px);
  --room-pop: var(--gold);
  --room-ink: var(--cream);
  --room-wm: rgba(0,0,0,.14);
}
/* Black and red, the other way round: a near-black field with the
   red as a corner slash and the accent. */
.simroom--jordan {
  --room-field: #100f0b;
  --room-tex: linear-gradient(203deg, rgba(216,30,63,.85) 0 15%, rgba(216,30,63,0) 15.2%);
  --room-pop: #d81e3f;
  --room-ink: var(--chalk);
  --room-wm: rgba(255,255,255,.09);
}

/* Ghosted mark in the bottom corner. aria-hidden in the markup --
   it is texture, not content. .simroom's overflow:hidden crops it. */
.simroom__wm {
  position: absolute; right: 1rem; bottom: .1rem; z-index: 0;
  font-family: var(--f-display); font-size: 9.5rem; line-height: .74;
  letter-spacing: -.05em;
  color: var(--room-wm);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.simroom__wm svg { width: 8rem; height: 8rem; display: block; fill: var(--room-wm); }

.simroom__head {
  position: relative; z-index: 1;
  padding: 1.5rem 1.4rem 1.2rem;
  border-bottom: 3px solid var(--room-pop);
}
.simroom__badge {
  display: inline-block;
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .8rem; line-height: 1;
  background: var(--room-pop); color: var(--ink);
  padding: .34rem .8rem;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0,0,0,.45);
  transform: rotate(-2.5deg);
  margin-bottom: .9rem;
}
.simroom--jordan .simroom__badge { color: var(--chalk); }
.simroom__name {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: .92; letter-spacing: 1px;
  margin: 0 0 .45rem;
}
.simroom__tag { font-size: .98rem; opacity: .85; margin: 0; }

.simroom__body {
  position: relative; z-index: 1;
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; flex: 1;
}

/* Rate rows. One row per price the room actually has, so the
   4-player room ships one row and the 8-player room two. */
.simroom__rates {
  margin: 0 0 1.2rem;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
}
.rate {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .9rem; padding: .75rem 1rem;
}
.rate + .rate { border-top: 1.5px solid rgba(255,255,255,.22); }
.rate__who {
  font-family: var(--f-cond); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; font-size: .88rem;
}
.rate__price { font-family: var(--f-display); font-size: 2.1rem; line-height: 1; color: var(--room-pop); white-space: nowrap; }
.rate__per {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; color: var(--room-ink); opacity: .75; margin-left: .18rem;
}

.simroom__feats { margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.simroom__feats li { padding-left: 1.6rem; position: relative; font-size: .96rem; }
.simroom__feats li::before { content: "◆"; position: absolute; left: 0; top: .05em; color: var(--room-pop); }

/* The default .btn is ink-on-cream, which vanishes on a near-black
   field. Flip it: the card's text colour becomes the button. */
.simroom .btn {
  margin-top: auto; align-self: flex-start;
  background: var(--room-ink); color: var(--ink);
  border-color: rgba(0,0,0,.7);
  box-shadow: 4px 4px 0 rgba(0,0,0,.55);
}
@media (hover:hover) {
  .simroom .btn:hover { background: var(--chalk); box-shadow: 6px 6px 0 rgba(0,0,0,.55); }
}

/* Shared fine print under the pair. */
.simrooms__fine { margin: 1.4rem 0 0; font-size: .92rem; opacity: .78; max-width: 68ch; }
.simrooms__fine a { color: var(--green); font-weight: 700; text-decoration: underline; }

/* ================= INSTAGRAM EMBED (gallery) =================
   Wrapper for the Elfsight feed in the "Follow the Action" band. The widget
   builds its own grid inside this div, so all we own is the box around it:
   width, and the air above and below. Capped narrower than .wrap because the
   feed is square tiles -- at the full 1180px they run to five or six across
   and read as a contact sheet rather than a feed. min-height reserves roughly
   one row so the band does not collapse to nothing and then shove the button
   down the page when the tiles arrive. */
.ig-embed {
  max-width: 900px;
  margin: 2rem auto 0;
  min-height: 300px;
}