/* ============================================================
   Prairie View Cricket Complex — site styles
   Implements the Claude Design handoff
   ("Prairie View Cricket Complex.dc.html") as static CSS.
   Tokens live in tokens.css and are treated as read-only.

   Order: base → primitives (button/input/select/checkbox)
        → layout → header/footer → home → gallery → host.
   ============================================================ */

@import url('tokens.css');

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--red-600); text-decoration: none; }
a:hover { color: var(--red-700); }

:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 12px 20px;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------------- Layout ---------------- */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section-sm { padding: 72px 0; }

.section-card {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.section-page { background: var(--surface-page); }
.section-navy { background: var(--navy-800); position: relative; overflow: hidden; }
.section-navy-deep { background: var(--navy-900); }

/* The signature angled red slash + overline kicker */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 5px;
  height: 16px;
  background: var(--red-600);
  transform: skewX(-12deg);
  display: block;
  flex: none;
}
.kicker span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--red-600);
}
/* One step lighter than the handoff's --red-400: at 13px bold that only
   reached 4.31:1 on navy, under the 4.5:1 minimum. --red-300 gives 6.48:1
   and stays on the same brand scale. Same reason on .aside-navy below. */
.on-navy .kicker span, .kicker.on-navy span { color: var(--red-300); }

/* Decorative skewed bar used in navy/red sections */
.slash-deco {
  position: absolute;
  width: 6px;
  background: var(--red-600);
  transform: skewX(-12deg);
  pointer-events: none;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ---------------- Type ---------------- */
.h-impact {
  font-family: var(--font-impact);
  font-weight: var(--fw-regular);
  color: #fff;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-impact);
  margin: 0;
}
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--text-strong);
  line-height: var(--lh-snug);
  margin: 0;
}
.h2 { font-size: clamp(32px, 4.2vw, 46px); }
.h3 { font-size: 26px; line-height: 1.05; }
.lede {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  max-width: 620px;
}
.on-navy .lede { color: var(--navy-200); }
.mono { font-family: var(--font-mono); }

/* ---------------- Button (DS: Button.jsx) ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
  /* md */
  font-size: 15px;
  padding: 11px 22px;
  min-height: 44px;
  border: 2px solid transparent;
}
.btn:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }

.btn-sm { font-size: 13px; padding: 8px 16px; min-height: 34px; }
.btn-lg { font-size: 17px; padding: 15px 30px; min-height: 54px; }

.btn-primary {
  background: var(--brand-accent);
  color: var(--text-on-accent);
  border-color: var(--brand-accent);
}
.btn-primary:hover { color: var(--text-on-accent); }

.btn-navy {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
}
.btn-navy:hover { color: var(--text-inverse); }

.btn-secondary {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-secondary:hover { color: var(--brand-primary); }

/* Ghost treatment used over navy backgrounds */
.btn-ghost-navy {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost-navy:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------------- Form controls (DS: Input/Select/Checkbox) ---------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.field > label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: var(--text-body-md);
  color: var(--text-body);
  background: var(--surface-card);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input,
.field select { height: 44px; padding: 0 14px; }
.field select { padding-right: 40px; appearance: none; cursor: pointer; }
.field textarea { padding: 10px 12px; resize: vertical; min-height: 104px; }

.field input:focus,
.field textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--ring);
}
.field select:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--ring);
}
.field input:user-invalid {
  border-color: var(--status-danger);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content: "\25BC";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

/* Checkbox — 22px square, red when on */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.check input {
  appearance: none;
  margin: 0;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-default);
  background: var(--surface-card);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.check input::after {
  content: "\2713";
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.check input:checked {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
}
.check input:checked::after { transform: scale(1); }
.check span { font: var(--text-body-md); color: var(--text-body); }

.form-legend {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--red-600);
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 8px;
  width: 100%;
  display: block;
}

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--navy-950);
  color: var(--navy-300);
  font-size: 13px;
}
.topbar .wrap {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.topbar .sep { color: var(--navy-700); }
.topbar a { color: var(--navy-300); }
.topbar a:hover { color: #fff; }
.topbar .social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar .social a {
  color: var(--navy-200);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 12px;
}
.topbar .social a:hover { color: #fff; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy-900);
  border-bottom: 3px solid var(--red-600);
}
.site-header .wrap {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img { height: 52px; width: 52px; object-fit: contain; }
.brand-text {
  font-family: var(--font-impact);
  color: #fff;
  font-size: 17px;
  line-height: 0.9;
  letter-spacing: var(--ls-impact);
}
.brand-text .accent { color: var(--red-500); }

.site-nav {
  display: flex;
  gap: var(--space-6);
  margin-left: auto;
  align-items: center;
}
.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy-200);
}
.site-nav a:hover { color: #fff; }
.site-nav a.active {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--red-600);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  color: #fff;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  background: var(--navy-800);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 88% 0%, rgba(200, 16, 46, 0.30), transparent 55%);
}
.hero .slash-deco {
  right: 38%;
  top: -60px;
  height: 560px;
  opacity: 0.55;
}
.hero-inner {
  position: relative;
  padding-top: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-12);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-impact);
  color: #fff;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.2;
  letter-spacing: var(--ls-impact);
  margin: 20px 0 0;
}
.hero h1 .accent { color: var(--red-500); }
.hero-sub {
  color: var(--navy-200);
  font-size: 20px;
  line-height: 1.5;
  max-width: 520px;
  margin-top: 22px;
  text-wrap: pretty;
}
.btn-row {
  display: flex;
  gap: 14px;
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.hero-figure {
  position: relative;
  min-width: 0;
  height: 380px;
  border: 3px solid rgba(255, 255, 255, 0.16);
}
.hero-figure img,
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stat strip */
.stat-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--navy-700);
}
.stat-strip > div { padding: 26px 0; }
.stat-num {
  font-family: var(--font-impact);
  color: #fff;
  font-size: 52px;
  line-height: 1;
}
.stat-num .unit { font-size: 30px; }
.stat-label {
  color: var(--navy-300);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fw-bold);
  margin-top: 6px;
}

/* ---------------- Why cards ---------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.card-hard {
  background: var(--surface-card);
  border: 2px solid var(--navy-800);
  box-shadow: var(--shadow-hard);
  padding: 26px;
}
.card-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--red-600);
  letter-spacing: 0.08em;
}
.card-hard h3 { margin: 10px 0 8px; }
.card-hard p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------------- Spec sheet ---------------- */
.specs-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}
.specs-grid h2 {
  font-family: var(--font-impact);
  color: #fff;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 0.92;
  margin: 14px 0 0;
}
.figure {
  position: relative;
  min-width: 0;
  border: 3px solid rgba(255, 255, 255, 0.16);
}
.figure-240 { height: 240px; }

.spec-table {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--navy-700);
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border-bottom: 1px solid var(--navy-700);
  padding: 16px 22px;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--navy-300);
  font-size: 15px;
}
.spec-row dd {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

/* ---------------- Events ---------------- */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.event-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--navy-800);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* Upcoming events wear the accent rule; past events stay navy */
.event-card:has(.badge-format.is-upcoming) { border-top-color: var(--red-600); }
.event-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.event-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.event-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.badge-format {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--navy-800);
  padding: 3px 8px;
  white-space: nowrap;
}
.badge-format.is-upcoming { background: var(--red-600); }
.event-card h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.05;
}
.event-org { font-size: 14px; color: var(--text-muted); }
.event-champion {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.4;
}
.event-champion span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 12px;
  color: var(--text-subtle);
  display: block;
}
.event-foot {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-600);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: auto;
}
/* When there are no team/match figures, the link carries the top rule */
.event-foot + .event-link { border-top: 0; padding-top: 0; }
.event-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 13px;
  color: var(--red-600);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: auto;
}
.event-foot + .event-link { margin-top: 0; }
.event-link:hover { color: var(--red-700); }
.event-link svg { width: 14px; height: 14px; flex: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Tournaments archive ---------------- */
.year-block + .year-block { margin-top: var(--space-12); }
.year-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: 2px solid var(--navy-800);
  padding-bottom: 8px;
  margin-bottom: var(--space-6);
}
.year-head h2 {
  font-family: var(--font-impact);
  color: var(--text-strong);
  font-size: 38px;
  line-height: 1;
  margin: 0;
  letter-spacing: var(--ls-impact);
}
.year-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ---------------- Gallery strip (home) ---------------- */
.gallery-strip {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 180px 180px;
  gap: 14px;
}
.gallery-strip > * { position: relative; min-width: 0; }
.gallery-strip .tall { grid-row: span 2; }
.more-link {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red-600);
  font-size: 17px;
}

/* Photo tile + the labelled empty slot for shots not yet supplied */
.tile {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy-700);
  border: 0;
  padding: 0;
  display: block;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
button.tile { cursor: zoom-in; }
button.tile:hover img { transform: scale(1.04); }

.tile-empty {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px;
  background: var(--navy-700);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.045) 0 10px,
    transparent 10px 20px
  );
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: var(--navy-200);
  cursor: default;
}
.tile-empty .label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 14px;
  color: #fff;
}
.tile-empty .hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--navy-300);
}

/* ---------------- Social ---------------- */
/* YouTube embeds a real feed and the other two are ~130px follow cards, so the
   video takes the wide column and the cards stack in a rail beside it. */
.social-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.social-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.social-panel {
  background: #fff;
  border: 1px solid var(--navy-700);
  padding: 14px;
}
.social-panel h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--navy-800);
  margin: 0 0 10px;
}
/* Facebook page plugin. app.js sizes the iframe to fit this box (Meta caps the
   plugin at 500px), so centre it when the panel is wider than that. The height
   matches FB_HEIGHT in app.js — the plugin renders a follow card, not a feed. */
.fb-embed {
  min-height: 130px;
  background: var(--surface-sunken);
  display: flex;
  justify-content: center;
}
.fb-embed iframe {
  border: none;
  overflow: hidden;
  display: block;
  max-width: 100%;
}
.social-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.social-btn {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 15px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  padding: 9px 16px;
}
.social-btn:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* YouTube uploads playlist. Unlike Meta's plugin this is a normal responsive
   iframe — it fills the panel and the ratio does the sizing, so there is no
   JS involved. Black behind it so letterboxing reads as part of the player. */
.yt-embed {
  aspect-ratio: 16 / 9;
  background: #000;
}
.yt-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Instagram follow card. Hand-built to sit level with the 130px Facebook
   plugin card — IG has no equivalent embed. See the note in index.html. */
.ig-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 130px;
  padding: 0 14px;
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-subtle);
  color: var(--navy-800);
}
.ig-card:hover { color: var(--navy-800); background: #fff; }
.ig-card-avatar {
  width: 50px;
  height: 50px;
  flex: none;
  object-fit: contain;
}
.ig-card-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ig-card-name {
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.2;
}
.ig-card-handle {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-card-cta {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 12px;
  color: #fff;
  background: var(--red-600);
  padding: 7px 12px;
}
.ig-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ig-foot .caption {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------------- Red CTA band ---------------- */
.cta-band {
  background: var(--red-600);
  position: relative;
  overflow: hidden;
}
.cta-band .slash-deco {
  left: -60px;
  bottom: -70px;
  height: 380px;
  background: rgba(255, 255, 255, 0.28);
}
.cta-inner {
  position: relative;
  padding: 62px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-inner h2 {
  font-family: var(--font-impact);
  color: #fff;
  font-size: clamp(36px, 4.6vw, 52px);
  line-height: 0.95;
  margin: 0;
}
.cta-inner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lg);
  margin: 10px 0 0;
}

/* ---------------- Gallery page ---------------- */
.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter-btn {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 14px;
  padding: 9px 18px;
  min-height: 40px;
  background: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--brand-primary); }
.filter-btn[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.gallery-item .frame {
  position: relative;
  height: 230px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.gallery-item .cap {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 15, 38, 0.94);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 78vh;
  object-fit: contain;
}
.lightbox figcaption {
  color: var(--navy-200);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 15px;
  padding-top: 16px;
  text-align: center;
}
.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  font-size: 22px;
  cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
}

/* ---------------- Host page ---------------- */
.page-hero {
  background: var(--navy-800);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 90% at 90% 0%, rgba(200, 16, 46, 0.26), transparent 55%);
}
.page-hero .wrap {
  position: relative;
  padding-top: 56px;
  padding-bottom: 48px;
}
.page-hero h1 {
  font-family: var(--font-impact);
  color: #fff;
  font-size: clamp(42px, 6vw, 62px);
  line-height: 0.92;
  margin: 14px 0 0;
}
.page-hero p {
  color: var(--navy-200);
  font-size: 19px;
  max-width: 560px;
  margin: 16px 0 0;
}

.host-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: var(--space-10);
  align-items: start;
  padding: 48px 0 88px;
}
.form-panel {
  background: var(--surface-card);
  border: 2px solid var(--navy-800);
  box-shadow: var(--shadow-hard);
  padding: 32px;
}
.form-panel fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.form-panel fieldset + fieldset { margin-top: 30px; }
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.form-submit {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.form-note { font-size: 14px; color: var(--text-muted); }

.aside-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aside-navy {
  background: var(--navy-800);
  padding: 26px;
  color: #fff;
}
.aside-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  margin-bottom: 14px;
}
.aside-navy .aside-title { color: var(--red-300); }
.aside-card .aside-title { color: var(--red-600); }
/* The primary contact line in the aside — an email address, so it needs to
   wrap rather than run past the panel edge. */
.aside-navy .phone {
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.35;
  color: #fff;
  display: block;
  overflow-wrap: anywhere;
}
.aside-navy .email {
  font-size: 16px;
  color: var(--navy-200);
  display: block;
  margin-top: 8px;
  word-break: break-word;
}
.aside-navy .addr {
  border-top: 1px solid var(--navy-700);
  margin-top: 18px;
  padding-top: 16px;
  font-size: 15px;
  color: var(--navy-200);
  line-height: 1.6;
}
.addr-label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #fff;
  font-size: 14px;
}
.addr-label + .addr-label { margin-top: 12px; }

.aside-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  padding: 26px;
}
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.step .n { font-family: var(--font-mono); font-size: 13px; color: var(--navy-500); }
.step .t { font-size: 15px; color: var(--text-muted); line-height: 1.5; }

.note-block {
  background: var(--surface-sunken);
  border-left: 4px solid var(--red-600);
  padding: 20px;
}
.note-block h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: 15px;
  color: var(--text-strong);
  margin: 0 0 6px;
}
.note-block p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.form-success .tick {
  width: 46px;
  height: 46px;
  background: var(--status-success-soft);
  color: var(--status-success);
  display: grid;
  place-content: center;
  font-family: var(--font-impact);
  font-size: 24px;
}
.form-success h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 34px;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 18px 0 8px;
}
/* Focused programmatically so screen readers announce the state change —
   it isn't interactive, so it shouldn't wear an interactive focus ring. */
.form-success h2:focus { outline: none; }
.form-success p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--navy-950);
  color: var(--navy-200);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding: 56px 0 28px;
}
.site-footer .brand img { height: 56px; width: 56px; }
.footer-blurb {
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
  max-width: 280px;
}
.footer-col h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #fff;
  font-size: 15px;
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a, .footer-col li {
  color: var(--navy-200);
  font-size: 14px;
  line-height: 1.5;
}
.footer-col a:hover { color: #fff; }
.footer-fine {
  border-top: 1px solid var(--navy-800);
}
.footer-fine .wrap {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 13px;
  /* --navy-400 measured 4.46:1 here — just under the minimum */
  color: var(--navy-300);
}

/* ---------------- Responsive ---------------- */
/* The nav carries its own CTA once the header one is hidden on mobile.
   Declared before the media queries so they can turn it back on. */
.site-nav .header-cta-mobile { display: none; }

@media (max-width: 1000px) {
  .hero-inner,
  .specs-grid,
  .host-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .hero-inner { padding-top: 56px; }
  .hero-figure { height: 300px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 170px);
  }
  .gallery-strip .tall { grid-row: span 1; }
}

@media (max-width: 820px) {
  :root { --section-y: 56px; }

  .nav-toggle { display: inline-flex; }
  .site-header .wrap { gap: var(--space-4); flex-wrap: wrap; }
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 8px;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--navy-800);
  }
  .site-nav a.active { box-shadow: inset 3px 0 0 var(--red-600); padding-left: 12px; }
  .header-cta { display: none; }
  .site-nav .header-cta-mobile { display: block; margin-top: 12px; }

  .grid-3,
  .grid-4,
  .social-grid,
  .gallery-grid,
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip > div { padding: 20px 0; }
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .form-panel { padding: 22px; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

@media (max-width: 520px) {
  /* Stacked, so the inline pipes just create orphan lines */
  .topbar .sep { display: none; }
  .topbar .wrap { gap: 4px var(--space-4); }
  .topbar .social { margin-left: 0; width: 100%; }
  .gallery-strip { grid-template-columns: minmax(0, 1fr); }
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .topbar, .site-nav, .cta-band, .lightbox { display: none !important; }
  body { background: #fff; }
}