/* ============================================================================
   THE OUTFIELD WALL — foundation
   Hand-painted ballpark signage: enamel panels, chalk lines, distance numerals.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martianmono-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* the wall */
  --ink:        #05110B;   /* batter's eye — the dark green-black screen */
  --ink-soft:   #0C2119;
  --wall:       #0A4130;   /* outfield fence green */
  --wall-deep:  #06291E;
  --wall-lit:   #10664A;

  /* the club's own navy, sampled from the primary logo (#002D56 is 56k of its pixels).
     Navy is chrome: header, page headers, footer. Ink stays the keyline and the
     deliberate content bands. */
  --navy:       #002D56;
  --navy-deep:  #001B34;
  --navy-lit:   #0A4478;
  --on-navy-2:  #A9C4DE;
  --on-navy-3:  #7C9CBB;

  /* the paint */
  --hop:        #35E070;   /* vivid hop green */
  --hop-deep:   #17A34C;
  --royal:      #0B4FE0;   /* Hops royal */
  --royal-deep: #062B85;
  --sky:        #7ACFF7;   /* Hillsboro sky blue */
  --sky-deep:   #2E97CE;

  /* RESERVED BY LAW — foul-pole yellow means points, tiers, unlocks. Nothing else. */
  --foul:       #FFD400;
  --foul-deep:  #B58C00;
  --foul-ink:   #2B2000;

  /* RESERVED BY LAW — enamel red means a markdown. Nothing else. */
  --enamel:     #E4321C;
  --enamel-deep:#9C1B0B;

  /* the ground */
  --chalk:      #F6F3E8;
  --chalk-2:    #ECE7D6;
  --chalk-3:    #DDD6C0;
  --track:      #C08046;   /* warning track ochre */

  /* text */
  --fg:         var(--ink);
  --fg-2:       #3D5147;
  --fg-3:       #66786F;
  --on-dark:    #F6F3E8;
  --on-dark-2:  #A8C4B6;
  --on-dark-3:  #7D9C8E;

  /* structure */
  --rule:       3px;       /* the painted keyline on every panel */
  --edge:       7px;       /* panel thickness — the board's own depth */
  --r:          3px;       /* paint doesn't round */

  --pad:        clamp(1.25rem, 4vw, 3rem);
  --gutter:     clamp(1rem, 3vw, 2.5rem);
  --maxw:       1560px;
  --readw:      68ch;

  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-snap:  cubic-bezier(.22, 1, .36, 1);

  --hdr-h:      78px;
  --tick-h:     34px;

  color-scheme: light;
}

@media (max-width: 900px) { :root { --hdr-h: 66px; --tick-h: 30px; --edge: 5px; --rule: 2px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--tick-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--fg);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------- browser surfaces, themed */
::selection { background: var(--hop); color: var(--ink); }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--chalk-2); }
::-webkit-scrollbar-thumb { background: var(--wall); border: 3px solid var(--chalk-2); }
::-webkit-scrollbar-thumb:hover { background: var(--hop-deep); }
* { scrollbar-color: var(--wall) var(--chalk-2); scrollbar-width: thin; }

input, textarea { caret-color: var(--hop-deep); }
::placeholder { color: var(--fg-3); opacity: 1; }

:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-ink :focus-visible, .on-navy :focus-visible, .on-royal :focus-visible { outline-color: var(--hop); }
.on-foul :focus-visible { outline-color: var(--ink); }

a:not([class]) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:not([class]):hover { text-decoration-color: var(--hop-deep); }

/* -------------------------------------------------------------- utilities -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read { width: 100%; max-width: var(--readw); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 999;
  background: var(--foul); color: var(--ink); padding: 10px 18px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border: var(--rule) solid var(--ink);
  transition: top .18s var(--ease);
}
.skip:focus { top: 8px; }

/* --------------------------------------------------------------- lettering */
/* Painted sign lettering: heavy, condensed, filling its panel corner to corner. */
.sign {
  font-weight: 900;
  font-stretch: 68%;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.005em;
}
.sign-wide { font-stretch: 112%; }
.script {
  font-weight: 600;
  font-style: italic;
  font-stretch: 88%;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* The origin ticket — vendor, department, fit. Data, not decoration. */
.ticket {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ticket-lg { font-size: 0.72rem; }

/* --------------------------------------------- the distance numeral (325) -- */
/* Sign-painter inline: chalk outline ring, ink keyline, solid fill. */
.numeral {
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.76;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--num-fill, var(--foul));
  -webkit-text-stroke: 2px var(--num-key, var(--ink));
  paint-order: stroke fill;
}
.numeral[hidden] { display: none; }
.numeral::before {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 11px var(--num-ring, var(--chalk));
  z-index: -1;
}
@media (max-width: 700px) {
  .numeral { -webkit-text-stroke-width: 1.5px; }
  .numeral::before { -webkit-text-stroke-width: 7px; }
}

/* ----------------------------------------------------- the home-run line -- */
/* The chalk rail that caps every painted section. Full-bleed, always. */
.rail {
  height: 10px;
  background: var(--chalk);
  border-block: var(--rule) solid var(--ink);
  border-inline: 0;
}
.rail-foul { background: var(--foul); }
.rail-thin { height: 6px; }

/* Warning-track band: the ochre dirt strip before the wall. */
.track-band {
  height: 22px;
  background:
    repeating-linear-gradient(90deg,
      var(--track) 0 26px,
      color-mix(in srgb, var(--track) 88%, #000) 26px 52px);
  border-block: var(--rule) solid var(--ink);
}

/* ============================================================== THE PANEL == */
/* A painted board: flat enamel field, keyline, and real board thickness. */
.panel {
  --p-bg: var(--chalk);
  --p-ink: var(--ink);
  --p-edge: color-mix(in srgb, var(--p-bg) 62%, #000);
  position: relative;
  background: var(--p-bg);
  color: var(--p-ink);
  border: var(--rule) solid var(--ink);
  border-bottom-width: calc(var(--rule) + var(--edge));
  border-bottom-color: var(--p-edge);
  border-radius: var(--r);
}
/* the inner painted rule — sign-painters always double the border */
.panel-ruled::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid color-mix(in srgb, var(--p-ink) 34%, transparent);
  border-radius: 1px;
  pointer-events: none;
}

/* pressable board */
.panel-press {
  transition: transform .12s var(--ease), filter .2s var(--ease);
}
.panel-press:hover { filter: saturate(1.12) brightness(1.04); }
.panel-press:active {
  transform: translateY(var(--edge));
  border-bottom-width: var(--rule);
}
@media (prefers-reduced-motion: reduce) {
  .panel-press, .panel-press:active { transition: none; transform: none; }
}

/* panel colorways */
.p-wall   { --p-bg: var(--wall);   --p-ink: var(--on-dark); --p-edge: var(--wall-deep); }
.p-ink    { --p-bg: var(--ink);    --p-ink: var(--on-dark); --p-edge: #000; }
.p-navy   { --p-bg: var(--navy);   --p-ink: var(--on-dark); --p-edge: var(--navy-deep); }
.p-royal  { --p-bg: var(--royal);  --p-ink: #fff;           --p-edge: var(--royal-deep); }
.p-hop    { --p-bg: var(--hop);    --p-ink: var(--ink);     --p-edge: var(--hop-deep); }
.p-sky    { --p-bg: var(--sky);    --p-ink: var(--ink);     --p-edge: var(--sky-deep); }
.p-foul   { --p-bg: var(--foul);   --p-ink: var(--foul-ink);--p-edge: var(--foul-deep); }
.p-enamel { --p-bg: var(--enamel); --p-ink: #fff;           --p-edge: var(--enamel-deep); }
.p-chalk  { --p-bg: var(--chalk);  --p-ink: var(--ink);     --p-edge: var(--chalk-3); }

/* ============================================================== SURFACES == */
.on-ink   { background: var(--ink);   color: var(--on-dark); }
.on-navy  { background: var(--navy);  color: var(--on-dark); }
.on-wall  { background: var(--wall);  color: var(--on-dark); }
.on-royal { background: var(--royal); color: #fff; }
.on-hop   { background: var(--hop);   color: var(--ink); }
.on-foul  { background: var(--foul);  color: var(--foul-ink); }
.on-chalk { background: var(--chalk); color: var(--ink); }

/* Secondary text always tints from its own surface, never from gray. */
.dim { color: color-mix(in srgb, currentColor 72%, transparent); }
/* No per-surface override: the mix resolves to --fg-2 on chalk on its own, and
   a descendant rule here leaks into nested coloured panels. */

/* padded-wall texture: the vertical seams of ballpark wall padding */
.padded {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 clamp(48px, 7vw, 96px),
    rgba(0,0,0,.16) clamp(48px, 7vw, 96px) calc(clamp(48px, 7vw, 96px) + 2px));
}

/* =============================================================== BUTTONS == */
.btn {
  --b-bg: var(--ink);
  --b-fg: var(--chalk);
  --b-edge: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .78em 1.35em;
  background: var(--b-bg);
  color: var(--b-fg);
  border: var(--rule) solid var(--ink);
  border-bottom-width: calc(var(--rule) + 5px);
  border-bottom-color: var(--b-edge);
  border-radius: var(--r);
  font-weight: 800;
  font-stretch: 92%;
  font-size: .875rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform .12s var(--ease), filter .2s var(--ease);
}
.btn:hover { filter: brightness(1.1) saturate(1.1); }
.btn:active { transform: translateY(5px); border-bottom-width: var(--rule); }
.btn[disabled], .btn[aria-disabled='true'] {
  filter: none;
  opacity: 1;
  --b-bg: var(--chalk-3);
  --b-fg: var(--fg-3);
  --b-edge: #B9B29A;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-lg { padding: 1.02em 1.9em; font-size: 1rem; letter-spacing: .06em; }
.btn-sm { padding: .55em .9em; font-size: .74rem; border-bottom-width: calc(var(--rule) + 3px); }
.btn-sm:active { transform: translateY(3px); }
.btn-block { display: flex; width: 100%; }

.btn-hop    { --b-bg: var(--hop);    --b-fg: var(--ink);      --b-edge: var(--hop-deep); }
.btn-royal  { --b-bg: var(--royal);  --b-fg: #fff;            --b-edge: var(--royal-deep); }
.btn-foul   { --b-bg: var(--foul);   --b-fg: var(--foul-ink); --b-edge: var(--foul-deep); }
.btn-enamel { --b-bg: var(--enamel); --b-fg: #fff;            --b-edge: var(--enamel-deep); }
.btn-chalk  { --b-bg: var(--chalk);  --b-fg: var(--ink);      --b-edge: var(--chalk-3); }
.btn-ghost {
  --b-bg: transparent; --b-fg: currentColor; --b-edge: transparent;
  border-color: currentColor; border-bottom-width: var(--rule);
}
.btn-ghost:active { transform: translateY(2px); }
.on-ink .btn-ghost, .on-wall .btn-ghost, .on-royal .btn-ghost { border-color: currentColor; }

/* =============================================================== ICONS ==== */
.ico {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ico-sm { width: 1em; height: 1em; stroke-width: 2.4; }
.ico-lg { width: 1.75em; height: 1.75em; stroke-width: 2; }
.ico-fill { fill: currentColor; stroke: none; }

/* ================================================================ FORMS == */
.field {
  width: 100%;
  padding: .7em .85em;
  background: var(--chalk);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  border-radius: var(--r);
  font-weight: 600;
}
.field:focus { outline-offset: 1px; }
select.field {
  appearance: none;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305110B' stroke-width='2.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6em center;
  background-size: 1.05em;
  cursor: pointer;
}

/* ================================================================= BADGES = */
.flag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .55em .34em;
  border: 2px solid var(--ink);
  border-radius: 2px;
  font-family: 'Martian Mono', monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flag-new    { background: var(--hop);    color: var(--ink); }
.flag-sale   { background: var(--enamel); color: #fff; border-color: var(--enamel-deep); }
.flag-points { background: var(--foul);   color: var(--foul-ink); }
.flag-out    { background: var(--chalk-3);color: var(--fg-2); }
.flag-adidas { background: var(--ink);    color: #fff; }
.flag-quiet  { background: transparent;   color: inherit; border-color: currentColor; opacity: .8; }

/* ============================================================ SECTIONING == */
.sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec-tight { padding-block: clamp(2.25rem, 5vw, 3.75rem); }

/* More space above a heading than below it. */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.sec-head h2 {
  font-stretch: 68%;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .82;
}
.sec-head p { max-width: 46ch; }

/* ================================================================= MISC === */
.strike { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .62; }
.stack > * + * { margin-top: var(--s, 1rem); }
.row { display: flex; align-items: center; gap: var(--s, .75rem); }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }