/* ============================================================================
   3 MILE GOLF — site.css

   The idea: a printed equipment catalogue on warm bone paper, interrupted by
   black photographic plates. The clubs are copper; the page is paper; the
   photos sit on pitch so restored metal actually glows. Hairlines everywhere,
   almost no rounded corners, numbers set in mono like a spec sheet.

   Written by hand. No framework, no utility soup, no CDN.
   ========================================================================= */

@import url('/static/css/fonts.css');

/* ---------------------------------------------------------------- tokens */

:root {
  /* paper */
  --bone:      #F3EDE3;
  --bone-2:    #EBE3D6;
  --bone-3:    #DFD5C4;

  /* ink */
  --ink:       #17140F;
  --ink-2:     #453D33;
  --ink-3:     #6E6458;

  /* pitch — the photographic plates */
  --pitch:     #131009;
  --pitch-2:   #201A12;
  --pitch-ink: #EFE7DA;

  /* the metal */
  --copper:    #B25E2B;
  --copper-lt: #D5824A;
  --copper-dk: #7C3E17;

  /* states — each is ALSO given a glyph and a word, never colour alone */
  --patina:    #48685A;   /* done            */
  --brass:     #967A2E;   /* in progress     */
  --rust:      #9C3A26;   /* blocked / needs you */
  --slate:     #6E6458;   /* pending         */

  --line:      rgba(23, 20, 15, .16);
  --line-soft: rgba(23, 20, 15, .09);
  --line-dark: rgba(239, 231, 218, .16);

  --ff-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --ff-body:    'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gut:  clamp(1.15rem, 4.5vw, 2.5rem);
  --rail: 76rem;

  --shadow-plate: 0 1px 0 rgba(23,20,15,.05), 0 18px 44px -28px rgba(23,20,15,.55);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- resets */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(1rem, .96rem + .22vw, 1.075rem);
  line-height: 1.62;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. Cheap, static, and the single detail that stops the page
   reading as a flat CSS gradient. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .40;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.9rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.05rem); }
h3 { font-size: clamp(1.22rem, 1.05rem + .8vw, 1.6rem); }
h4 { font-size: 1.06rem; }

p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--copper-dk); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--copper); }

.lede {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.36rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--copper-dk);
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 1.85rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; line-height: 1.55; }

.figure-num {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----------------------------------------------------------- structure */

.wrap {
  width: 100%;
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--tight { max-width: 54rem; }
.wrap--text  { max-width: 40rem; }

section { position: relative; }

.band { padding-block: clamp(3.2rem, 7vw, 6.5rem); }
.band--tight { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
.band + .band { border-top: 1px solid var(--line-soft); }

/* the black photographic plate */
.band--pitch {
  background: var(--pitch);
  color: var(--pitch-ink);
  border-top: 0 !important;
}
.band--pitch h1, .band--pitch h2, .band--pitch h3 { color: #FBF6EE; }
.band--pitch .lede, .band--pitch .muted { color: rgba(239,231,218,.68); }
.band--pitch .eyebrow { color: var(--copper-lt); }
.band--pitch a { color: var(--copper-lt); }
.band--pitch hr { border-color: var(--line-dark); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--ink);
  color: var(--bone);
  padding: .7rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: .8rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 1px;
}
.band--pitch :focus-visible { outline-color: var(--copper-lt); }

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(1.25) blur(9px);
  border-bottom: 1px solid var(--line);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.2rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark b { font-weight: 500; }
.wordmark .dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--copper);
  align-self: center;
  flex: none;
  box-shadow: 0 0 0 3px rgba(178,94,43,.16);
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  font-size: .87rem;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--copper);
}

.nav-toggle { display: none; }

@media (max-width: 61rem) {
  .nav--main { display: none; }
  .nav-toggle { display: block; position: relative; }
  .nav-toggle > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--ff-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    color: var(--ink-2);
  }
  .nav-toggle > summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] > summary { background: var(--ink); color: var(--bone); border-color: var(--ink); }
  .nav-toggle__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 14rem;
    background: var(--bone);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-plate);
    padding: .5rem;
    display: grid;
  }
  .nav-toggle__panel a {
    padding: .7rem .8rem;
    font-size: .95rem;
    text-decoration: none;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-toggle__panel a:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .92em 1.5em;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.btn--copper { --btn-bg: var(--copper); --btn-bd: var(--copper); --btn-fg: #FFF8F1; }
.btn--copper:hover { --btn-bg: var(--copper-dk); --btn-bd: var(--copper-dk); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--ink); }

.band--pitch .btn--ghost { --btn-fg: var(--pitch-ink); --btn-bd: var(--line-dark); }
.band--pitch .btn--ghost:hover { --btn-bd: var(--pitch-ink); }

.btn--wide { width: 100%; }
.btn--sm { padding: .6em 1em; font-size: .74rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

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

.hero { position: relative; overflow: hidden; }
.hero::after {
  /* hairline drafting grid, fading out downward */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 78%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 78%);
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 58rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 .set { display: block; }
.hero h1 em {
  font-style: normal;
  color: var(--copper);
  position: relative;
}

/* the spec strip: mono facts, hairline-separated, like a catalogue caption */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-strip > div {
  padding: .85rem 1.15rem .85rem 0;
  margin-right: 1.15rem;
  border-right: 1px solid var(--line);
  flex: 1 1 0;
  min-width: 6.5rem;
}
.spec-strip > div:last-child { border-right: 0; margin-right: 0; }
.spec-strip dt {
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .28rem;
}
.spec-strip dd { margin: 0; font-size: .95rem; color: var(--ink); }

/* ------------------------------------------------------- photo plates */

.plate {
  position: relative;
  background: var(--pitch-2);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: 2px;
}
.band--pitch .plate { border-color: var(--line-dark); }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plate--tall img { aspect-ratio: 3 / 4; }
.plate--square img { aspect-ratio: 1 / 1; }

.plate__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(19,16,9,.82);
  color: var(--pitch-ink);
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .7rem;
  backdrop-filter: blur(3px);
}

/* An honest stand-in when the shop has not uploaded a photo yet: a dark
   plate with crosshairs, clearly a placeholder rather than fake product. */
.plate--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(239,231,218,.035) 0 12px, transparent 12px 24px),
    var(--pitch-2);
  color: rgba(239,231,218,.5);
  text-align: center;
  padding: 1.5rem;
}
.plate--empty span {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.9;
}
.plate--empty::before {
  content: '';
  position: absolute;
  inset: .75rem;
  border: 1px solid rgba(239,231,218,.14);
}

/* before / after pairing */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.band--pitch .ba { background: var(--line-dark); border-color: var(--line-dark); }
.ba > figure { margin: 0; position: relative; background: var(--pitch-2); }
.ba img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ba figcaption {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .38rem .62rem;
  background: rgba(19,16,9,.8);
  color: var(--pitch-ink);
}
.ba figcaption.is-after { background: var(--copper); color: #fff; }

/* ----------------------------------------------------------- gallery */

.gallery-grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
/* One set alone should not sit in a half-empty two-column band. */
.gallery-grid:has(> :only-child) { grid-template-columns: minmax(0, 36rem); }
@media (min-width: 46rem) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-set {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.1rem;
}
.gallery-set__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .9rem;
}
.gallery-set__title { font-family: var(--ff-display); font-size: 1.22rem; margin: 0; }

.shot-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 2px;
}
.shot {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--pitch-2);
  cursor: zoom-in;
  overflow: hidden;
}
.shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.045); filter: brightness(1.08); }
.shot__phase {
  position: absolute;
  left: 0; bottom: 0;
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  background: rgba(19,16,9,.78);
  color: var(--pitch-ink);
}
.shot__phase.is-after { background: var(--copper); color: #fff; }

/* lightbox */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10,8,5,.94);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox img { max-height: 82vh; width: auto; object-fit: contain; border: 1px solid var(--line-dark); }
.lightbox__cap {
  color: rgba(239,231,218,.75);
  font-family: var(--ff-mono);
  font-size: .74rem;
  letter-spacing: .09em;
  margin-top: 1rem;
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--pitch-ink);
  font-family: var(--ff-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  padding: .5rem .8rem;
  cursor: pointer;
}

/* --------------------------------------------------------- step cards */

.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  counter-reset: step;
}
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps--four { grid-template-columns: 1fr; }
@media (min-width: 62rem) { .steps--four { grid-template-columns: repeat(4, 1fr); } }

.step {
  background: var(--bone);
  padding: clamp(1.3rem, 3vw, 2rem);
  counter-increment: step;
}
.band--pitch .step { background: var(--pitch-2); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--copper);
  margin-bottom: .9rem;
}
.step h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.step p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.band--pitch .step p { color: rgba(239,231,218,.66); }

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

.card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.15rem, 3vw, 1.75rem);
}
.card--raised { box-shadow: var(--shadow-plate); }
.card--flush { padding: 0; overflow: hidden; }

.stack { display: grid; gap: 1rem; }
.stack--lg { gap: 2rem; }
.stack--sm { gap: .5rem; }

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 54rem) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 54rem) { .split--sidebar { grid-template-columns: 1.55fr 1fr; } }

/* ----------------------------------------------------- service menu */

.menu-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.menu-item__name { font-family: var(--ff-display); font-size: 1.18rem; }
.menu-item__desc { grid-column: 1 / -1; color: var(--ink-2); font-size: .93rem; margin: 0; max-width: 52ch; }
.menu-item__price {
  font-family: var(--ff-mono);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.menu-item__unit {
  display: block;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  margin-top: .15rem;
}

/* ----------------------------------------------------------- empty */

.empty {
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  color: var(--ink-3);
  background:
    repeating-linear-gradient(45deg, rgba(23,20,15,.022) 0 10px, transparent 10px 20px);
}
.empty h3 { color: var(--ink-2); margin-bottom: .4rem; }
.empty p { max-width: 40ch; margin-inline: auto; font-size: .95rem; }
.band--pitch .empty { border-color: var(--line-dark); color: rgba(239,231,218,.6); }

/* ------------------------------------------------------------- forms */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* align-content:start so a field sitting next to a taller one (an input with a
   hint under it) does not stretch its own input to match the row height. */
.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; align-content: start; }
.field > label, .field-label {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field .req { color: var(--rust); }
.field .hint { font-size: .82rem; color: var(--ink-3); }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #FAF6EF;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .78rem .85rem;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: rgba(23,20,15,.3); }
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--copper);
  outline: 2px solid rgba(178,94,43,.28);
  outline-offset: 0;
}
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }
::placeholder { color: rgba(110,100,88,.6); }

.grid-2 { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .grid-3 { grid-template-columns: 2fr 1fr 1fr; } }

.form-error {
  border-left: 3px solid var(--rust);
  background: rgba(156,58,38,.07);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .93rem;
  color: #6E2618;
}
.form-error ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ------------------------------------------------- the club selector */

.club-group + .club-group { margin-top: 1.75rem; }

.club-group__legend {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin-bottom: .85rem;
}
.club-group__legend::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.club-grid {
  display: grid;
  /* Fixed column counts, not auto-fill: seven columns means the seven irons
     land as one clean row instead of trailing off into dead space. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  max-width: 22rem;
}
@media (min-width: 30rem) {
  .club-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 38rem; }
}

/* The tick itself is a real <input type=checkbox> visually hidden but still
   in the tab order and still keyboard-toggled by space. The label is the
   control surface. Nothing here depends on JavaScript. */
.club {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.club input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.club__face {
  display: grid;
  place-items: center;
  gap: .1rem;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #FAF6EF;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.club__mark {
  font-family: var(--ff-mono);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
}
.club__sub {
  font-family: var(--ff-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.club:hover .club__face { border-color: rgba(178,94,43,.55); transform: translateY(-1px); }

.club input:checked + .club__face {
  background: var(--copper);
  border-color: var(--copper-dk);
  color: #FFF7F0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.club input:checked + .club__face .club__sub { color: rgba(255,247,240,.8); }

/* A checked club also gets a corner notch — the state is never colour alone. */
.club input:checked + .club__face::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-width: 0 .85rem .85rem 0;
  border-style: solid;
  border-color: transparent #FFF7F0 transparent transparent;
}
.club input:focus-visible + .club__face {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.club-quick { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.club-quick button {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  border-radius: 2px;
  cursor: pointer;
}
.club-quick button:hover { border-color: var(--ink); color: var(--ink); }

/* --------------------------------------------- service picker (intake) */

.pick { display: grid; gap: .55rem; }
.pick__row { position: relative; }
.pick__row input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.pick__face {
  display: grid;
  grid-template-columns: 1.35rem 1fr auto;
  gap: .3rem 1rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #FAF6EF;
  padding: 1rem 1.05rem;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.pick__row:hover .pick__face { border-color: rgba(178,94,43,.5); }
.pick__box {
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  display: grid;
  place-items: center;
  margin-top: .12rem;
  font-size: .8rem;
  line-height: 1;
  color: transparent;
}
.pick__row input:checked + .pick__face { border-color: var(--copper); background: rgba(178,94,43,.07); }
.pick__row input:checked + .pick__face .pick__box {
  background: var(--copper);
  border-color: var(--copper-dk);
  color: #fff;
}
.pick__row input:focus-visible + .pick__face { outline: 2px solid var(--copper); outline-offset: 3px; }
.pick__name { font-weight: 600; font-size: 1rem; }
.pick__desc { grid-column: 2 / -1; font-size: .88rem; color: var(--ink-2); margin: .2rem 0 0; }
.pick__price {
  font-family: var(--ff-mono);
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}
.pick__price small {
  display: block;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------ intake chrome */

.rail {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: .9rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  list-style: none;
  padding-left: 0;
}
.rail li { display: flex; align-items: center; gap: .45rem; }
.rail li::before { content: attr(data-n); color: var(--line); font-weight: 500; }
.rail li[aria-current='step'] { color: var(--ink); }
.rail li[aria-current='step']::before { color: var(--copper); }
.rail li.is-done { color: var(--ink-2); }
.rail li.is-done::before { content: '✓'; color: var(--patina); }

form:has(> .summary-bar) { padding-bottom: 1.25rem; }

.summary-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--bone);
  border-radius: 2px;
  padding: .95rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.75rem;
  box-shadow: 0 -10px 30px -22px rgba(23,20,15,.9);
}
.summary-bar__count {
  font-family: var(--ff-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(243,237,227,.78);
}
.summary-bar__count b { color: var(--bone); font-weight: 500; }
.summary-bar .btn { --btn-bg: var(--copper); --btn-bd: var(--copper); --btn-fg: #FFF8F1; }

/* the one-number price block */
.price-block {
  border: 1px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
}
.price-block__top { padding: 1.35rem 1.4rem; }
.price-block__label {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.price-block__amount {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price-block__note {
  background: var(--ink);
  color: rgba(243,237,227,.86);
  padding: .8rem 1.4rem;
  font-size: .87rem;
}
.price-block__note b { color: var(--bone); font-weight: 600; }

.line-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.line-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
}
.line-list li span:last-child { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-list li.is-total {
  border-bottom: 0;
  border-top: 1px solid var(--ink);
  margin-top: .3rem;
  padding-top: .9rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ff-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #FAF6EF;
}
.chip--copper { background: var(--copper); border-color: var(--copper-dk); color: #FFF7F0; }

/* ============================================================ STATUS PAGE */

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.job-ref {
  font-family: var(--ff-mono);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: .04em;
}

/* progress: a labelled stepper, never colour alone — every node carries a
   glyph and a word, and a visually-hidden sentence states the position. */
.progress { margin-block: clamp(1.75rem, 4vw, 2.5rem); }

.progress__bar {
  position: relative;
  height: .5rem;
  background: var(--bone-3);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.progress__fill {
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--copper) 0 6px,
    var(--copper-dk) 6px 12px
  );
  border-radius: 99px;
  transition: width .8s var(--ease);
}

.progress__nodes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .25rem;
  margin-top: .75rem;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.progress__nodes::-webkit-scrollbar { display: none; }
.progress__nodes li {
  text-align: center;
  min-width: 4.2rem;
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.35;
}
.progress__nodes .glyph {
  display: block;
  font-size: .95rem;
  line-height: 1;
  margin-bottom: .3rem;
  color: var(--bone-3);
}
.progress__nodes li.is-done { color: var(--ink-2); }
.progress__nodes li.is-done .glyph { color: var(--patina); }
.progress__nodes li.is-now { color: var(--ink); font-weight: 500; }
.progress__nodes li.is-now .glyph { color: var(--copper); }
.progress__nodes li.is-now::after {
  content: 'now';
  display: block;
  color: var(--copper);
  letter-spacing: .18em;
  font-size: .55rem;
  margin-top: .2rem;
}

.stage-now {
  border-left: 3px solid var(--copper);
  padding-left: 1.1rem;
}
.stage-now h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: .25rem; }

/* alert / call-to-action band on the status page */
.alert {
  border: 1px solid var(--copper);
  border-left-width: 4px;
  border-radius: 2px;
  background: rgba(178,94,43,.08);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .alert { grid-template-columns: 1fr auto; align-items: center; }
}
.alert h3 { margin-bottom: .3rem; }
.alert p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.alert__amount {
  font-family: var(--ff-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--copper-dk);
}

/* per-club table */
.clubs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.club-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: .35rem 1rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.club-row__mark {
  font-family: var(--ff-mono);
  font-size: 1.05rem;
  font-weight: 500;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #FAF6EF;
}
.club-row__type {
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.club-row__note { grid-column: 2 / -1; font-size: .87rem; color: var(--ink-2); margin: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--ff-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 99px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill .glyph { font-size: .8em; }
.pill--pending     { color: var(--slate); }
.pill--in_progress { color: var(--brass);  background: rgba(150,122,46,.09); }
.pill--done        { color: var(--patina); background: rgba(72,104,90,.1); }
.pill--blocked     { color: var(--rust);   background: rgba(156,58,38,.09); }
.pill--excluded    { color: var(--ink-3);  opacity: .7; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: .43rem;
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  background: var(--line);
}
.timeline li {
  position: relative;
  padding: 0 0 1.35rem 2rem;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--ink-3);
}
.timeline li.is-latest::before { background: var(--copper); border-color: var(--copper-dk); }
.timeline__when {
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: .12rem;
}
.timeline__what { font-size: .96rem; }

/* shipments */
.ship {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  display: grid;
  gap: .35rem;
}
.ship__dir {
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ship__num { font-family: var(--ff-mono); font-size: .95rem; word-break: break-all; }

.kv { display: grid; gap: .55rem; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .5rem; }
.kv dt { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.kv dd { margin: 0; font-size: .92rem; text-align: right; }

/* ---------------------------------------------------------------- faq */

.qa { border-top: 1px solid var(--line); }
.qa details {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.qa summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  font-family: var(--ff-mono);
  color: var(--copper);
  font-size: 1.2rem;
  flex: none;
  transition: transform .2s var(--ease);
}
.qa details[open] summary::after { content: '–'; }
.qa__body { padding-top: .8rem; max-width: 58ch; color: var(--ink-2); font-size: .96rem; }

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

.footer { background: var(--pitch); color: rgba(239,231,218,.72); }
.footer a { color: rgba(239,231,218,.9); }
.footer h4 {
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-lt);
  margin-bottom: .9rem;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.2rem;
  font-family: var(--ff-mono);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  color: rgba(239,231,218,.45);
}
.footer address { font-style: normal; line-height: 1.75; font-size: .92rem; }

/* -------------------------------------------------------- utilities */

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

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.flow > * + * { margin-top: 1.1rem; }

/* Placeholder copy the owner still has to confirm gets a visible seam. It is
   deliberately NOT styled like a link -- an underline plus the page colour, so
   it reads as "flagged" rather than "click me". */
.tbc {
  color: inherit;
  text-decoration: underline dotted var(--copper);
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
}
.band--pitch .tbc { text-decoration-color: var(--copper-lt); }
.footer .tbc { color: rgba(239, 231, 218, .62); text-decoration-color: var(--copper-lt); }

/* ------------------------------------------------------------ motion */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise .7s var(--ease) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .14s; }
.rise-3 { animation-delay: .23s; }
.rise-4 { animation-delay: .32s; }

.htmx-request .is-busy { opacity: .5; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .masthead, .footer, .summary-bar, .btn { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}