/* Momentum Casinos — direction A "Sala".
   Dark chrome, gold group accent, per-property accent override.

   Contrast floors are deliberate, not taste (Alice's review, 2026-08-03):
   patrons skew 40-65 and half the traffic is a phone in daylight outside a
   venue. --text-dim is the DARKEST any text may go, and anything a visitor
   must act on (hours, address, phone) uses --text or brighter. */

:root {
  --bg:        #0E0E12;
  --bg-raised: #131319;
  --bg-tile:   #171720;
  --bg-deep:   #0A0A0C;

  --text:      #FFFFFF;
  --text-mid:  #D6D6DC;
  --text-dim:  #B9B9C1;   /* floor — never go darker for real copy */

  --gold:      #C9A24B;
  --gold-lift: #E3C77E;
  --gold-line: rgba(201, 162, 75, .28);
  --gold-soft: rgba(201, 162, 75, .16);

  --paper:      #F6F1E7;
  --paper-warm: #EFE7D4;
  --paper-line: #E3DACA;
  --ink:        #1A1A1E;
  --ink-soft:   #5C5646;

  --accent: var(--gold);

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

  --wrap: 1180px;
  --gap: 1.25rem;
  --radius: 8px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-mid);
  font: 400 16px/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #241A06; padding: .75rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--gold-lift);
  outline-offset: 2px;
}

/* Cormorant is display only. Below ~28px, and at Light, it thins out and
   shimmers on the low-DPI Android screens common in Nicaragua. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
h1.display { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 400; }
h2.display { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3.display { font-size: clamp(1.375rem, 3vw, 1.75rem); }

.eyebrow {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}

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

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 18, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand img { width: 168px; height: auto; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }

.langs { display: flex; gap: .375rem; }
.lang {
  font-size: .75rem; letter-spacing: .06em; text-decoration: none;
  color: var(--text-dim); border: 1px solid rgba(255,255,255,.22);
  padding: .25rem .5rem; border-radius: 4px;
}
.lang.is-on { color: var(--text); border-color: var(--gold); }

.nav-toggle { display: none; background: none; border: 0; color: var(--gold); padding: .5rem; cursor: pointer; }

/* ---- hero ------------------------------------------------------------ */

/* Capped so the property tiles crest the fold. A full-viewport hero spends
   the first screen on a slogan when the product is six venues. */
.hero {
  position: relative; overflow: hidden;
  isolation: isolate;
  background: var(--bg-raised);
  min-height: 58vh;
  max-height: 78vh;
  display: flex; align-items: center;
  padding-block: 3rem;
  text-align: center;
}

/* The Palms floor, now doing its job. It reads as a photograph rather than a
   dark texture, and it drifts — a slow Ken Burns push so the room feels live
   instead of frozen. The scrim is weighted behind the text, not smeared over
   the whole frame, so the picture survives while the words stay legible. */
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .62;
  transform: scale(1.06);
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at center, rgba(11,11,15,.20) 0%, rgba(11,11,15,.66) 78%),
    linear-gradient(180deg, rgba(11,11,15,.55) 0%, rgba(11,11,15,.22) 34%, rgba(11,11,15,.72) 100%);
}

/* Content entrances — pure CSS, so they always finish visible even if the
   script never runs. */
.hero .eyebrow { opacity: 0; animation: rise .8s .1s ease-out forwards; }
.hero .display { opacity: 0; animation: rise .9s .28s ease-out forwards; text-shadow: 0 2px 34px rgba(0,0,0,.55); }
.hero .hero-sub { opacity: 0; animation: rise .9s .46s ease-out forwards; }
.hero .actions { opacity: 0; animation: rise .9s .62s ease-out forwards; }

@keyframes kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1.5%, -1.5%); }
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* The property logo is the biggest thing in a casino-page hero and it is what
   pushes the fold past 60vh. Cap by height, not width — the six marks have
   wildly different aspect ratios (Texas is 4.3:1, Palms is 1.4:1). */
.hero-mark { max-height: 104px; width: auto; max-width: 320px; margin: 0 0 1rem; }
.hero .wrap { position: relative; z-index: 1; }
.hero-sub { color: var(--text-dim); margin: .5rem 0 1.75rem; font-size: 1.0625rem; }

/* Echo of the swirl in the Momentum Development mark. Decorative only, kept
   faint, and never behind running text. */
.ring { position: absolute; border-radius: 50%; border-style: solid; border-color: rgba(201,162,75,.07); pointer-events: none; }
.ring-a { width: 460px; height: 460px; border-width: 62px; top: -160px; right: 6%; }
.ring-b { width: 280px; height: 280px; border-width: 38px; bottom: -130px; left: 8%; border-color: rgba(201,162,75,.05); }

.actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: .875rem 1.75rem; border-radius: 4px; text-decoration: none;
  border: 1px solid transparent;
}
/* The solid gold button on near-black is the most sun-legible element on the
   page, so every critical action uses it. A periodic light sweep keeps it
   drawing the eye without blinking or bouncing. */
.btn-primary { background: var(--gold); color: #241A06; position: relative; overflow: hidden; }
.btn-primary:hover { background: var(--gold-lift); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sweep 4.2s 1.6s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -130%; } 55%, 100% { left: 170%; } }
.btn-ghost { border-color: rgba(201,162,75,.5); color: var(--gold); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lift); }

/* ---- property tiles -------------------------------------------------- */

.section { padding-block: 3.5rem; }
.section-head { margin-bottom: 1.75rem; }

/* ---- property cards -------------------------------------------------- */

/* One card per venue. Each wears its own identity — accent, own logo, own
   photograph — while the page keeps one rhythm: same layout, same type, same
   spacing. The difference between the six is colour and picture, never shape. */

.pcards { display: grid; gap: var(--gap); }

.pcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-tile);
  display: flex;
  align-items: stretch;
  gap: 0;
  transition: transform .32s ease, box-shadow .32s ease;
}

/* Hover lifts the card, brightens and pushes its photo in, and traces the
   accent colour around it — the whole card responds as one object. */
.pcard:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0, 0, 0, .5); }
.pcard::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
}
.pcard:hover::before { opacity: 1; }

/* The venue photograph.

   The scrim is WEIGHTED, not uniform: heavy on the left where the text sits,
   and thinning sharply across so the right third of the card is close to bare
   photograph. The first version applied .94 opacity at 62% and full black at
   the right edge, which left roughly 3% of the picture visible — the card
   looked empty because it effectively was. Text legibility only needs the
   scrim where text actually is.

   A card with no photograph yet shows the accent tint alone — nothing looks
   broken, it just reads as a coloured panel. */
.pcard::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(11, 11, 15, .93) 0%,
      rgba(11, 11, 15, .88) 42%,
      rgba(11, 11, 15, .58) 68%,
      rgba(11, 11, 15, .26) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 30%, transparent) 0%,
      transparent 70%);
}
/* No photo: the tint has to carry the card on its own, so it goes solid. */
.pcard:not(:has(.pc-photo))::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 24%, #0E0E12) 0%,
    rgba(14, 14, 18, .95) 62%,
    #0E0E12 100%);
}

.pc-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: transform .6s ease;
}
.pcard:hover .pc-photo { transform: scale(1.06); }

/* The logo plate. Measured necessity, not decoration: Flamingo's mark is 80%
   dark ink, Texas 50%, Palms 42% — placed straight on a dark card those would
   half-disappear. Plating all six keeps it consistent. */
.pc-plate {
  flex: 0 0 172px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1rem;
  background: #F7F4EC;
  border-right: 2px solid var(--accent);
}
.pc-plate img { max-width: 100%; height: auto; }

/* Text stops well short of the right edge so it never sits on the bright part
   of the photograph — the scrim protects the left, the picture owns the right. */
.pc-body { flex: 1; min-width: 0; padding: 1.5rem 1.5rem; max-width: 62%; }

/* Enough height that the photograph is a photograph and not a stripe. */
.pcard { min-height: 260px; }

.pc-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--text); margin: 0 0 .1875rem; line-height: 1.1; }
.pc-where { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }

.pc-badges { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .625rem; }
.pc-badge {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid rgba(255, 255, 255, .2);
  padding: .125rem .5rem; border-radius: 3px;
}

/* Live "open now" — a real state, computed from the schedule, not a claim
   baked into the HTML. Green pulse when open; a still, dim dot when closed. */
.pc-live {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .625rem;
}
.pc-live i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pc-live.is-open { color: #6FE0A0; }
.pc-live.is-open i { background: #3BE07E; animation: beat 2s infinite; }
.pc-live.is-closed { color: var(--text-dim); }
.pc-live.is-closed i { background: #6E6E78; }
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 rgba(59, 224, 126, .7); }
  70%  { box-shadow: 0 0 0 8px rgba(59, 224, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 224, 126, 0); }
}

.pc-tag { font-size: .875rem; color: var(--text-dim); margin: 0 0 .875rem; max-width: 52ch; }

.pc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.pc-btn {
  font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 4px; text-decoration: none; display: inline-block;
}
.pc-btn-solid { background: var(--accent); color: #14140F; }
.pc-btn-solid:hover { filter: brightness(1.12); }
.pc-btn-ghost { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.pc-btn-ghost:hover { border-color: var(--accent); }
.pc-btn.is-pending { border: 1px dashed rgba(255,255,255,.28); color: var(--text-dim); }

@media (max-width: 720px) {
  .pcard { flex-direction: column; min-height: 0; }
  .pc-plate { flex: none; border-right: 0; border-bottom: 2px solid var(--accent); padding: 1rem; }
  .pc-plate img { max-width: 200px; }
  /* Stacked, the text sits over the whole width, so the scrim goes vertical:
     the photograph shows at the top and darkens down behind the copy. */
  .pc-body { max-width: none; }
  .pcard::after {
    background:
      linear-gradient(180deg,
        rgba(11, 11, 15, .34) 0%,
        rgba(11, 11, 15, .82) 38%,
        rgba(11, 11, 15, .93) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 26%, transparent) 0%,
        transparent 72%);
  }
}

/* ---- machine suppliers ----------------------------------------------- */

.sups { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.sup { margin: 0; text-align: center; }
/* Supplier marks are full-colour corporate logos on white — they need a plate
   for the same reason the property marks do. */
.sup-plate {
  background: #F7F4EC; border-radius: 6px; padding: .875rem;
  display: flex; align-items: center; justify-content: center; min-height: 88px;
  margin-bottom: .625rem;
}
.sup-plate img { max-width: 100%; max-height: 62px; width: auto; object-fit: contain; }
.sup figcaption { font-size: .75rem; color: var(--text-dim); line-height: 1.5; }

/* ---- membership tiers ------------------------------------------------ */

.tier {
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid var(--gold);
  border-radius: 8px;
  background: var(--bg-tile);
  margin-bottom: .625rem;
}
.tier summary {
  cursor: pointer; padding: .875rem 1.125rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
}
.tier summary::marker { color: var(--gold); }
.tier-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--text); }
.tier-pts { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.tier ul { margin: 0; padding: 0 1.125rem 1.125rem 2.25rem; }
.tier li { font-size: .875rem; color: var(--text-dim); margin-bottom: .5rem; line-height: 1.6; }

.bbl { margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; }
.bbl-intro { color: var(--text-dim); font-size: .875rem; margin: 0 0 1.25rem; }
.bbl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.bbl-tier h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--gold-lift); margin: 0 0 .375rem; }
.bbl-tier ul { margin: 0; padding-left: 1.125rem; }
.bbl-tier li, .bbl-notes li { font-size: .8125rem; color: var(--text-dim); margin-bottom: .375rem; line-height: 1.55; }
.bbl-notes-title { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.bbl-notes { margin: 0; padding-left: 1.125rem; }

/* ---- sections and contact -------------------------------------------- */

.section-alt { background: var(--bg-raised); }
.section-lede { color: var(--text-dim); font-size: 1rem; margin: .5rem 0 0; max-width: 58ch; }
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.contact-value { color: var(--text); margin: .25rem 0 0; font-size: .9375rem; line-height: 1.6; }
.licence { color: var(--text-dim); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }

.tile {
  position: relative;
  background: var(--bg-tile);
  border: 1px solid var(--gold-soft);
  border-top: 2px solid var(--accent);
  border-radius: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; flex-direction: column;
}
.tile-link { display: block; margin-bottom: 1rem; }
/* Marks are three different colour families — Palms gold, Flamingo magenta,
   Texas red/blue. The tile frames them, it must not recolour them. */
.tile-logo { width: 100%; max-width: 240px; height: auto; margin-inline: auto; }

.tile-badge {
  align-self: flex-start;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor;
  padding: .1875rem .5rem; border-radius: 3px; margin-bottom: .625rem;
}
.tile-meta {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem;
}
.tile-tag { font-size: .875rem; color: var(--text-dim); margin: 0 0 .875rem; flex: 1; }
.tile-hours { font-size: .875rem; color: var(--text); margin: 0 0 .875rem; }

/* Opening hours. Machines and tables differ nearly everywhere, so they are
   always labelled — a single unlabelled time would be wrong at five of six.
   These are informational, so they sit at full --text brightness, not muted:
   this is the line someone squints at on a phone outside a venue at 1am. */
.hrs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: 0 0 .875rem;
  font-size: .875rem;
}
.hrs-label {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding-top: .1875rem; white-space: nowrap;
}
.hrs-value { color: var(--text); }
.hrs-none { color: var(--text-dim); }
.hrs-compact { font-size: .8125rem; gap: .1875rem .625rem; }

.paper .hrs-value { color: var(--ink); }
.paper .hrs-none { color: var(--ink-soft); }

/* A gap we have not filled must LOOK like a gap. The old site shipped
   tel:123456789 as if it were a phone number; nothing here pretends. */
.is-pending {
  display: inline-block;
  color: var(--text-dim);
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: 3px;
  padding: .125rem .5rem;
  font-size: .8125rem;
}

.tile-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tile-cta {
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  color: var(--gold-lift); text-decoration: none;
}
.tile-cta:hover { text-decoration: underline; }
.sep { color: rgba(255,255,255,.25); }

.games { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; }
.games span { font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }

/* ---- menu pages: ivory paper ---------------------------------------- */

/* Food dies on near-black, and a carta on paper reads MORE luxury, not less.
   Same gold hairlines, so it stays inside the system. */
.paper { background: var(--paper); color: var(--ink); }
.paper .display { color: var(--ink); }
.paper .eyebrow { color: #8C6D2F; }

.carta-head { text-align: center; padding-block: 2.5rem 1rem; border-bottom: 1px solid var(--gold); }
.carta-note {
  background: var(--paper-warm); border-left: 3px solid var(--gold);
  padding: .75rem 1rem; margin-block: 1.25rem; font-size: .875rem; color: var(--ink-soft);
}
/* The menu itself: the designer's artwork, rendered to WebP. Capped at the
   page's natural width so it is never upscaled into mush, and centred so a
   phone held at a table shows the whole page. */
.carta-pages { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-block: 1.25rem 2rem; }
.carta-page { margin: 0; width: 100%; max-width: 760px; }
.carta-page img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-line); border-radius: 4px;
  background: #fff;
}
.carta-page figcaption {
  margin-top: .5rem; text-align: center;
  font-size: .8125rem; color: var(--ink-soft);
}
.carta-updated { text-align: center; font-size: .8125rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.carta-back { text-align: center; margin-block: 0 2.5rem; }

.carta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.5rem; }
.carta-group { margin-bottom: 2rem; }
.carta-group h3 { margin: 0 0 .25rem; }
.carta-rule { height: 1px; background: var(--gold); margin-bottom: .5rem; }
.carta-row { display: flex; align-items: baseline; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--paper-line); }
.carta-row .name { font-weight: 500; }
.carta-row .dots { flex: 1; border-bottom: 1px dotted var(--paper-line); }
.carta-row .price { font-variant-numeric: tabular-nums; }

.paper .site-foot { background: var(--paper-warm); border-top: 1px solid var(--paper-line); }
.paper .site-foot, .paper .foot-note { color: var(--ink-soft); }
.paper .age { color: #8C6D2F; border-color: var(--gold); }

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

.site-foot { background: var(--bg-deep); border-top: 1px solid rgba(255,255,255,.08); padding-block: 1.5rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.foot-note { font-size: .8125rem; color: var(--text-dim); margin: 0; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; }
.age {
  font-size: .75rem; font-weight: 500; color: var(--gold-lift);
  border: 1px solid rgba(201,162,75,.45); padding: .1875rem .5rem; border-radius: 3px;
}
.site-foot a { color: var(--text-dim); }

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg-raised); border-bottom: 1px solid var(--gold-line); padding: .5rem 1.25rem 1rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: .75rem; width: 100%; }
  .site-head { position: relative; }
  .hero { min-height: 50vh; text-align: left; }
  .actions { justify-content: flex-start; }
  .ring-a { width: 300px; height: 300px; border-width: 42px; right: -80px; }
  .ring-b { display: none; }
}

/* ---- scroll reveal --------------------------------------------------- */

/* Only gate visibility when JS is present (html.js, set before first paint).
   Without JS the content is simply visible — never trapped behind an
   animation that cannot run. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
/* Cards in a group stagger, so the row assembles rather than snapping in. */
.js .pcard.reveal:nth-child(2).is-in { transition-delay: .08s; }
.js .pcard.reveal:nth-child(3).is-in { transition-delay: .16s; }
.js .pcard.reveal:nth-child(4).is-in { transition-delay: .24s; }
.js .pcard.reveal:nth-child(5).is-in { transition-delay: .32s; }
.js .pcard.reveal:nth-child(6).is-in { transition-delay: .40s; }

/* Reduced motion: everything appears at once, no drift, no sweep, no beat.
   The reveal still un-hides (is-in) but without transform or transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-photo { animation: none; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .btn-primary::after { display: none; }
}

/* Menus and the membership rules are the pages people actually print. */
@media print {
  .site-head, .nav, .langs, .actions, .ring, .skip { display: none !important; }
  body, .paper { background: #fff !important; color: #000 !important; }
  .display, .paper .display { color: #000 !important; }
  .carta-row { border-color: #ccc !important; }
  a[href]::after { content: ""; }
}