/* ==========================================================================
   Midtown Sports Card Show
   Design tokens and components, per design_handoff_card_show_site/README.md.

   Structured so this file ports to Django untouched: everything below is
   plain CSS with no build step, and the class names map to the template
   regions (header / hero / schedule / footer) the Django templates will use.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Colour */
  --red: #C8102E;
  --red-dark: #A00C24;
  --navy: #0A2A5E;
  --ink: #14181F;
  --white: #FFFFFF;
  --panel: #F4F6FA;
  --rule-tint: #E6EAF2;

  /* Muted text. Both are AA-safe on white — the design must never dim text
     with `opacity`, which broke contrast in review. Use these instead. */
  --muted: #5A6B85;
  --muted-strong: #40506B;

  /* Tinted white for muted text on a red ground (replaces opacity: 0.9) */
  --on-red-muted: #FBE3E7;

  /* Borders — navy at increasing strength */
  --border-14: rgba(10, 42, 94, 0.14);
  --border-15: rgba(10, 42, 94, 0.15);
  --border-18: rgba(10, 42, 94, 0.18);
  --border-20: rgba(10, 42, 94, 0.20);
  --border-22: rgba(10, 42, 94, 0.22);
  --border-35: rgba(10, 42, 94, 0.35);
  --border-40: rgba(10, 42, 94, 0.40);

  /* Pokémon / TCG tile */
  --tcg-table: #2E241C;
  --tcg-gold: #F4C233;
  --tcg-edge: #FBF8F2;

  /* Type */
  --display: Anton, "Arial Narrow", sans-serif;
  --label: Oswald, system-ui, sans-serif;
  --body: "Libre Franklin", system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap: 1140px;
  --gutter: 20px;

  /* Flat offset shadows — no soft/blurred shadows anywhere in this system */
  --shadow-ticket: 6px 6px 0 rgba(10, 42, 94, 0.12);
  --shadow-next: 4px 4px 0 var(--navy);
}

/* --- Base --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky header must not cover the target of an in-page anchor. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  /* Belt-and-braces against the nowrap H1 producing a horizontal scrollbar.
     `clip`, not `hidden`: hidden would make body a scroll container and can
     break the sticky header, whereas `clip` is allowed to sit alongside an
     unspecified (visible) overflow-y without either axis computing to auto. */
  overflow-x: clip;
}

a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--navy); }

img { max-width: 100%; }

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

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

/* --- Shared primitives -------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Section rhythm: 52px padding over a 2px navy-tint divider. */
.section {
  padding: 52px 0;
  border-top: 2px solid var(--border-15);
}
.section--flush { border-top: 0; padding-top: 8px; }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}

.h2 {
  margin: 0 0 28px;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--navy);
}

.prose { font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }

/* Buttons — 44px minimum hit target throughout. */
.btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  border: 2px solid transparent;
  padding: 16px 22px;
  cursor: pointer;
}
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-dark); color: var(--white); }
.btn--navy-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--navy-outline:hover { background: var(--navy); color: var(--white); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--red); color: var(--white); }
.btn--white { background: var(--white); color: var(--red); }
.btn--white:hover { background: var(--navy); color: var(--white); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 3px solid var(--red);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 0.86;
  color: var(--red);
  text-decoration: none;
}
.wordmark span:first-child,
.wordmark span:nth-child(2) {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.02em;
}
.wordmark__eyebrow {
  margin-top: 6px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--muted-strong);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-nav__links a { color: var(--navy); text-decoration: none; }
.site-nav__links a:hover { color: var(--red); }

.site-nav__cta {
  background: var(--red);
  color: var(--white);
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 18px;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
}
.site-nav__cta:hover { background: var(--red-dark); color: var(--white); }

/* Mobile menu.

   The toggle button ships with a `hidden` attribute and is revealed by JS,
   which also stamps data-nav-open on .site-nav. With JS off there is no button
   and the five links simply wrap — reachable either way.

   Collapsing is scoped inside the mobile media query rather than applied to the
   element directly, so resizing back to desktop always restores the inline row
   no matter what state the button was left in. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 11px 4px;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 18px;
}
.nav-toggle__bars span {
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}

@media (max-width: 799px) {
  .site-header__inner { padding: 10px var(--gutter); gap: 10px; }
  .site-nav { gap: 8px; }
  .site-nav[data-nav-open] .nav-toggle { display: flex; }
  .site-nav[data-nav-open] .site-nav__links {
    /* Drops out of the header row and spans the full header when open.
       Positioned against .site-header, which is a containing block by
       virtue of position: sticky. */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 3px solid var(--red);
    padding: 4px var(--gutter) 12px;
  }
  .site-nav[data-nav-open] .site-nav__links a {
    padding: 13px 0;
    border-top: 1px solid var(--border-15);
  }
  .site-nav[data-nav-open="false"] .site-nav__links { display: none; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  padding: 60px 0;
}

.hero__eyebrow {
  margin: 0 0 24px;
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--navy);
}

.hero__title { margin: 0 0 26px; }
.hero__title-main {
  display: block;
  font-family: var(--display);
  /* nowrap + vw sizing is deliberate: the wordmark stays on ONE line down to
     320px. The Anton glyph run is ~10.98em wide — re-check the fit if the
     typeface ever changes. */
  font-size: min(7.4vw, 100px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.hero__title-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--display);
  font-size: min(5.4vw, 62px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--navy);
}

.tricolor {
  display: flex;
  height: 6px;
  max-width: 420px;
  margin: 0 0 26px;
}
.tricolor span { flex: 1; }
.tricolor span:nth-child(1) { background: var(--red); }
.tricolor span:nth-child(2) { background: var(--rule-tint); }
.tricolor span:nth-child(3) { background: var(--navy); }

.hero__sub {
  margin: 0 0 36px;
  font-size: 17.5px;
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

.hero__main {
  display: flex;
  gap: 26px;
  align-items: stretch;
  flex-wrap: wrap;
}

/* The date block — the largest, most important element on the page. */
.ticket {
  flex: 1 1 420px;
  display: flex;
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 4px;
  box-shadow: var(--shadow-ticket);
}
.ticket__stub {
  width: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border-right: 2px dashed rgba(255, 255, 255, 0.6);
}
.ticket__stub span {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.ticket__body { flex: 1; padding: 26px 28px 24px; }
.ticket__label {
  margin: 0 0 6px;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
}
.ticket__date {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 66px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--navy);
}
.ticket__time {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(22px, 4.4vw, 32px);
  line-height: 1;
  color: var(--red);
}
.ticket__divider {
  height: 1px;
  margin: 0 0 16px;
  background: var(--border-18);
}
.ticket__venue { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: var(--navy); }
.ticket__address { margin: 0 0 14px; font-size: 15px; }
.ticket__price {
  margin: 0;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.hero__cta {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.hero__cta .btn { display: block; padding: 18px 20px; }
.hero__countdown {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Solid muted navy, not navy at 0.75 opacity — see --muted note above. */
  color: var(--muted-strong);
}

.hero__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 34px 0 0;
}
.hero__photos figure { margin: 0; }
.hero__photos img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.hero__photos figcaption {
  margin: 8px 0 0;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Designed tile, not a photo. Generic card backs only — never licensed card
   art, team logos, league marks, or player likenesses. */
.tcg-tile {
  height: 180px;
  border-radius: 3px;
  background: var(--tcg-table);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 0 12px;
}
.tcg-tile i {
  display: block;
  border: 2px solid var(--tcg-edge);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.tcg-tile i:nth-child(1) {
  width: 44px; height: 62px;
  background: var(--tcg-gold);
  transform: rotate(-8deg) translateY(-6px);
}
.tcg-tile i:nth-child(2) {
  width: 48px; height: 68px;
  background: var(--red);
  transform: rotate(3deg);
}
.tcg-tile i:nth-child(3) {
  width: 44px; height: 62px;
  background: var(--navy);
  transform: rotate(11deg) translateY(4px);
}

.hero__caption {
  margin: 14px 0 0;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Mobile hero reflow.

   Hard requirement: the date block is fully visible at 375x667 without
   scrolling. The 6-line subhead sits between the H1 and the ticket at that
   width and pushes it under the fold, so on small screens the subhead moves
   below the ticket. Desktop source order is unchanged. */
@media (max-width: 719px) {
  .hero { padding: 24px 0 48px; }
  .hero__eyebrow { order: 1; margin-bottom: 18px; }
  .hero__title   { order: 2; margin-bottom: 20px; }
  .tricolor      { order: 3; margin-bottom: 22px; }
  .hero__main    { order: 4; }
  .hero__sub     { order: 5; margin: 26px 0 0; font-size: 16.5px; }
  .hero__photos  { order: 6; }
  .hero__caption { order: 7; }
  .ticket__body { padding: 22px 20px 20px; }
}

/* --- What this is ------------------------------------------------------- */

.what__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 920px;
}
.what__close {
  margin: 34px 0 0;
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 36px);
  text-transform: uppercase;
  color: var(--red);
}

/* --- Schedule ----------------------------------------------------------- */

.schedule__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: baseline;
  margin: 0 0 30px;
}
.schedule__head .h2 { margin: 0; }
.schedule__when {
  margin: 0;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

.schedule__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  /* All twelve dates are a trust signal — treat the full list as a feature. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-card {
  border-radius: 3px;
  padding: 14px 16px;
}
.show-card__month {
  margin: 0 0 4px;
  font-family: var(--label);
  /* The design specifies 12px/0.18em, which fits a bare month name. The
     schedule spans two calendar years, so each label carries one
     ("SEPTEMBER 2027") and overflows a 150px card at that size. Tightened just
     enough to fit; wraps rather than overflows if a longer label appears.
     Revert to 12px/0.18em if the schedule ever sits inside a single year. */
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.show-card__day {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
}

/* Past — dimmed with a solid muted colour, never a blanket opacity. */
.show-card--past { background: var(--panel); border: 1px solid var(--border-14); }
.show-card--past .show-card__month,
.show-card--past .show-card__day { color: var(--muted); }

.show-card--next {
  background: var(--red);
  border: 1px solid var(--red);
  box-shadow: var(--shadow-next);
}
.show-card--next .show-card__month { color: var(--on-red-muted); }
.show-card--next .show-card__day { color: var(--white); margin-bottom: 6px; }
.show-card__tag {
  margin: 0;
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}

.show-card--upcoming { background: var(--white); border: 1px solid var(--border-35); }
.show-card--upcoming .show-card__month,
.show-card--upcoming .show-card__day { color: var(--navy); }

.schedule__note { margin: 22px 0 0; font-size: 15.5px; color: var(--navy); }

/* --- For collectors ----------------------------------------------------- */

/* Each cell carries its own border and the grid uses a real 12px gap. A tinted
   container with 2px gaps leaves a visible hole on an odd cell count. */
.floor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.floor__cell {
  background: var(--white);
  border: 1px solid var(--border-22);
  padding: 20px;
}
.floor__cell h3 {
  margin: 0 0 6px;
  font-family: var(--label);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.floor__cell p { margin: 0; font-size: 15px; line-height: 1.55; }
.floor__cell--red { background: var(--red); border-color: var(--red); }
.floor__cell--red h3, .floor__cell--red p { color: var(--white); }

/* --- Bringing kids ------------------------------------------------------ */

.kids__band {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  margin: 0 0 28px;
}
.kids__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: start;
}
.kids__notes { display: grid; gap: 12px; }
.kids__note {
  background: var(--panel);
  border-left: 4px solid var(--red);
  padding: 14px 18px;
}
.kids__note p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.kids__note strong {
  font-family: var(--label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Getting here ------------------------------------------------------- */

.here__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: start;
}
.here__venue {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--navy);
}
.here__address {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
}
.here__label {
  margin: 0 0 8px;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.here__lines {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.bullet {
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--white);
  font-family: var(--label);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bullet--red { background: var(--red); }
.bullet--navy { background: var(--navy); }
.here__bus { margin: 0 0 20px; font-size: 15.5px; }

.here__panel {
  background: var(--panel);
  border: 1px solid var(--border-20);
  overflow: hidden;
}
.here__panel img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.here__panel-body { padding: 26px; }
.here__panel-body p { margin: 0 0 16px; }
.here__close {
  margin: 0 !important;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--red);
}

/* --- Vendors teaser ----------------------------------------------------- */

/* Deliberately flat — a photo behind the red wash was tried and rejected. */
.vendors-teaser {
  margin: 52px 0;
  background: var(--red);
  color: var(--white);
  padding: 44px;
  border-radius: 4px;
}
.vendors-teaser .eyebrow { color: var(--on-red-muted); }
.vendors-teaser h2 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
}
.vendors-teaser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  align-items: end;
}
.vendors-teaser__grid .btn { justify-self: start; padding: 18px 26px; }

@media (max-width: 599px) {
  .vendors-teaser { padding: 32px 22px; }
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 2px;
  background: var(--border-18);
  border-top: 1px solid var(--border-18);
  border-bottom: 1px solid var(--border-18);
}
.faq details { background: var(--panel); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-family: var(--label);
  font-size: 16px;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus {
  font-family: var(--body);
  color: var(--red);
  transition: transform 0.18s ease;
}
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq p {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
}

/* --- Contact ------------------------------------------------------------ */

.contact__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.contact__buttons .btn { font-size: 15px; letter-spacing: 0.1em; }
.contact__note { margin: 0; font-size: 15px; color: var(--muted-strong); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--white);
  color: var(--ink);
  padding: 40px var(--gutter) 32px;
  border-top: 3px solid var(--red);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.site-footer__wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--red);
}
.site-footer__tagline {
  margin: 10px 0 0;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.site-footer__details { font-size: 15px; line-height: 1.7; }
.site-footer__details p { margin: 0; }
.site-footer__details p + p { margin-top: 10px; }
.site-footer__links { font-size: 15px; line-height: 1.9; }
.site-footer__links a { display: block; }
.site-footer__copy {
  margin: 14px 0 0;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Vendors page ------------------------------------------------------- */

.vendor-hero { padding: 56px 0 48px; }
.vendor-hero__eyebrow {
  margin: 0 0 20px;
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
}
.vendor-hero h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 82px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 20ch;
}
.vendor-hero__sub {
  margin: 0 0 34px;
  font-family: var(--display);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--red);
}
.vendor-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.vendor-hero__cta .btn { padding: 18px 24px; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.why__cell {
  background: var(--white);
  border: 1px solid var(--border-22);
  padding: 24px;
}
.why__cell h3 {
  margin: 0 0 8px;
  font-family: var(--label);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.why__cell p { margin: 0; font-size: 15.5px; line-height: 1.6; }

.look__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}
.rates {
  background: var(--navy);
  color: var(--white);
  padding: 30px;
  border-radius: 4px;
  align-self: start;
}
.rates .eyebrow { color: var(--rule-tint); }
.rates p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; }
.rates__line {
  margin: 0 0 22px !important;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
}
.rates__divider { height: 1px; background: rgba(255, 255, 255, 0.3); margin: 0 0 20px; }
.rates__contact { margin: 0 0 6px !important; font-size: 17px; }
.rates__contact:last-child { margin: 0 !important; }
.rates a { color: var(--white); }
.rates a:hover { color: var(--rule-tint); }

/* --- Vendor form -------------------------------------------------------- */

.table-form {
  background: var(--panel);
  border: 2px solid var(--navy);
  border-radius: 4px;
  padding: 28px;
  max-width: 720px;
  display: grid;
  gap: 18px;
}
.table-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.table-form label { display: grid; gap: 7px; }
.table-form label > span {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.table-form input,
.table-form select,
.table-form textarea {
  font-family: var(--body);
  /* 16px avoids the iOS focus zoom. Do not reduce. */
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--border-40);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.table-form textarea { resize: vertical; }
.table-form__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.table-form__actions .btn { padding: 17px 26px; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.table-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.form-fallback { margin: 18px 0 0; font-size: 15px; color: var(--muted-strong); }

@media (max-width: 599px) {
  .table-form { padding: 22px 18px; }
}