/* ══════════════════════════════════════════════════════════════
   MUSTARD HOUR — the Proper Golf Society house style
   Loaded after each page's own styles. Colours live in each page's
   :root block (same variable names as before, new values); this file
   carries the type, the framing and the flat, symmetrical look.
   ══════════════════════════════════════════════════════════════ */

:root {
  --ground:  #E8B84A;   /* mustard: the page itself            */
  --forest:  #244A3E;   /* bars, dark bands, accent labels     */
  --ink:     #5A2318;   /* rust: all text and rules            */
  --f-label: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --f-body:  'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --f-display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --f-type:  'Courier Prime', 'Courier New', Courier, monospace;
}

/* On the dark bands, the accent turns mustard. */
.sticky-nav, .club-nav, .gallery-nav, .bylaws-section, .dispatch-section,
.footer, .scorecard, .lightbox, .sold-out-banner {
  --gold: var(--ground);
}

body { background: var(--ground); color: var(--ink); line-height: 1.65; }
::selection { background: var(--forest); color: var(--cream); }

/* ── Type ───────────────────────────────────────────────────── */
.hero-title, .page-title, .archive-title, .issue-head h1, .op h1, .dossier h1,
.section-title, .bylaws-title, .dispatch-title, .modal h2, .section-bar h2,
.seg h2, .era-name, .cat-name, .member-name, .merch-name, .step-title, .detail-value {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
}
.thread-row h3, .issue-title, .inv-label, .plate-caption {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
}

/* Typewritten matter: notes, captions, fine print. */
.hero-label, .hero-location, .section-label, .eyebrow, .detail-note, .step-desc,
.thwack-note, .dispatch-desc, .dispatch-fine, .merch-desc, .merch-note,
.merch-benefits, .page-sub, .archive-note, .notice, .empty, .msg, .hint,
.check, .colophon, .footer-domain, .issue-head .stand, .seg figcaption,
.withheld, .thread-meta, .contact-item-value, .bylaw, .form-placeholder,
.lightbox-caption, .issue-stand, .venmo-handle {
  font-family: var(--f-type);
  font-style: normal;
}

.section-label, .eyebrow, .hero-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

.script {
  font-family: var(--f-display);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Buttons: flat, square, all capitals ────────────────────── */
.btn, .hero-cta, .register-cta, .merch-buy-placeholder {
  font-family: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
}
.btn:hover, .hero-cta:hover, .register-cta:hover, .merch-buy-placeholder:hover {
  background: var(--forest) !important;
  border-color: var(--forest) !important;
  color: var(--cream) !important;
}
.btn.ghost { background: transparent; color: var(--ink); }
.hero-cta { font-size: 13px; padding: 16px 40px; }
.hero-cta + .hero-cta { margin-top: 16px; }
.register-cta { font-size: 13px; }

/* ── Bars and bands ─────────────────────────────────────────── */
.sticky-nav, .club-nav, .gallery-nav { background: var(--forest); }
.sticky-nav a, .nav-right a, .nav-right button.linklike, .nav-links a {
  color: rgba(251,244,228,0.9);
  font-weight: 500;
}
.nav-home { font-weight: 700; letter-spacing: 0.3em; color: var(--cream); }
.sticky-nav a.nav-cta, .nav-cta, .nav-links a.nav-cta {
  border: 2px solid var(--ground) !important;
  color: var(--ground) !important;
}
.sticky-nav a.nav-cta:hover, .nav-cta:hover, .nav-links a.nav-cta:hover {
  background: var(--ground) !important;
  color: var(--forest) !important;
}

.footer { background: var(--forest); border-top: 6px solid var(--ink); }
.footer-text { color: var(--ground); font-weight: 600; }
.footer-domain { color: rgba(251,244,228,0.85); }
.footer-links a, .footer-nav a { color: rgba(251,244,228,0.9); font-weight: 500; }

/* ── Home: the hero as a framed title card ──────────────────── */
.hero { background: var(--ground); padding: 104px 56px; }
.hero::before {
  top: 24px; left: 24px; right: 24px; bottom: 24px;
  background: var(--parchment);
  box-shadow: inset 0 0 0 14px var(--parchment), inset 0 0 0 16px var(--ink);
}
.hero > * { position: relative; z-index: 1; }
.hero-title { font-size: clamp(44px, 8vw, 92px); line-height: 0.98; color: var(--ink); }
.hero-subtitle {
  font-family: var(--f-label); font-weight: 600; font-size: 14px;
  letter-spacing: 0.34em; color: var(--gold); margin-top: 16px;
}
.hero-rule { height: 3px; background: var(--ink); }
.hero-date {
  font-family: var(--f-label); font-weight: 500; font-size: 15px;
  letter-spacing: 0.22em; text-transform: uppercase; opacity: 1;
}
.hero-location { font-size: 15px; opacity: 1; margin-top: 8px; }

.rule { background: rgba(90,35,24,0.35); height: 2px; }

/* Particulars, enumerated */
.details-grid {
  counter-reset: particular;
  gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
}
.detail-item {
  background: var(--parchment);
  border-left: 0;
  padding: 30px 26px;
  text-align: center;
}
.detail-item::before {
  counter-increment: particular;
  content: counter(particular);
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--forest);
  margin-bottom: 12px;
}
.detail-label, .step-number, .cat-tag, .seg-label, .issue-no, .era-year,
.plate-no, .particular-label, .dossier .seat, .contact-item-label, .merch-price {
  font-family: var(--f-label);
  font-weight: 600;
}
.detail-value { font-size: 21px; }

.bylaws-section { background: var(--forest); }
.bylaws-title { color: var(--cream); font-size: 34px; }
.bylaw { color: var(--cream); font-size: 17px; }
.bylaws-rule, .bylaws-rule-bottom { height: 3px; width: 64px; background: var(--ground); }

.thwack-section {
  background: var(--parchment);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.register-section { background: var(--ground); }
.step-number { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.step-divider { background: var(--ink); width: 2px; }
.venmo-handle {
  background: var(--parchment);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
}

.form-placeholder { background: var(--parchment); border: 2px solid var(--ink); border-radius: 0; }

.dispatch-section { background: var(--forest); }
.dispatch-title { color: var(--cream); }
.dispatch-desc, .dispatch-fine { color: rgba(251,244,228,0.88); }
.dispatch-input {
  font-family: var(--f-body); font-style: normal;
  border: 2px solid var(--ground); border-right: none;
  background: rgba(251,244,228,0.08);
}
.dispatch-input::placeholder { color: rgba(251,244,228,0.7); }
.dispatch-submit {
  font-family: var(--f-label); font-weight: 700;
  background: var(--ground); color: var(--forest); border: 2px solid var(--ground);
}
.dispatch-submit:hover { background: var(--cream); border-color: var(--cream); color: var(--forest); }

.contact-section, .feed-section { background: var(--parchment); border-top: 2px solid var(--ink); }
.contact-item-value a, .feed-handle a { border-bottom: 2px solid var(--ink); }

/* Pro Shop */
.merch-section { background: var(--ground); }
.merch-card {
  background: var(--parchment);
  border: 2px solid var(--ink);
  border-radius: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.merch-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--forest); }
.merch-image { border-bottom: 2px solid var(--ink); background: var(--cream); }
.merch-price { font-size: 18px; font-weight: 700; color: var(--ink); }
.merch-name { font-size: 19px; }
.sold-out-banner { background: var(--forest); color: var(--cream); font-family: var(--f-label); font-weight: 700; }

.sticky-nav { border-bottom: 3px solid var(--ink); }

/* ── Inner pages ────────────────────────────────────────────── */
.page-title { font-size: clamp(32px, 5vw, 50px); }
.page-sub { color: var(--ink); font-size: 15px; }
.rule { width: 72px; height: 3px; background: var(--ink); }
.page-head .rule, .archive-rule { width: 72px; height: 3px; background: var(--ink); }

.cat-card, .op, .panel, .member-card, .dossier, .seg-editor, .notice,
.admin-panel, .modal, .plate-grid .plate {
  background: var(--parchment);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.cat-card:hover, .member-card:hover, .plate-grid .plate:hover, .plate-grid .plate:focus-visible {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--forest);
}
.notice { color: var(--ink); }

.section-bar, .roll-bar, .era-heading { border-bottom: 2px solid var(--ink); }
.shelf { border-top: 2px solid var(--ink); }
.thread-row:hover { background: rgba(251,244,228,0.5); }
.issue-row:hover { background: rgba(251,244,228,0.5); }
.tabs { border-bottom: 2px solid rgba(90,35,24,0.35); }
.tab { font-weight: 600; }
.tab.active { color: var(--ink); border-bottom: 3px solid var(--ink); }

.badge { font-family: var(--f-label); font-weight: 600; border-width: 2px; }

.field label { font-weight: 600; font-size: 11px; letter-spacing: 0.2em; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=tel], .field input[type=url], .field input, .field textarea, .field select,
.admin-line input[type=number] {
  font-family: var(--f-body);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus,
.admin-line input[type=number]:focus { border-color: var(--forest); box-shadow: 0 0 0 2px var(--forest); }
.roll-search { font-family: var(--f-body); border-bottom: 2px solid var(--ink); color: var(--ink); }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

.back { font-weight: 600; color: var(--ink); }
.back:hover, .modal-close:hover { color: var(--forest); }
.icon-btn { font-family: var(--f-label); font-weight: 600; border: 2px solid rgba(90,35,24,0.45); color: var(--ink); }
.icon-btn:hover { border-color: var(--forest); color: var(--forest); }
.msg.err, .icon-btn.danger:hover { color: #8E2A17; }
.icon-btn.danger:hover { border-color: #8E2A17; }
.msg.ok { color: var(--forest); }

.modal-scrim { background: rgba(36,74,62,0.94); }
.portrait { border: 2px solid var(--ink); background: var(--cream); }
.monogram { font-weight: 700; color: rgba(90,35,24,0.6); }
.member-name { font-size: 18px; }
.member-where { color: var(--forest); font-weight: 600; }
.particulars { border-top: 2px solid var(--ink); }

/* The Post */
.issue {
  background: var(--parchment);
  border: 2px solid var(--ink);
  padding: 48px 56px 56px;
  box-shadow: 0 0 0 10px var(--parchment), 0 0 0 12px var(--ink);
  margin: 12px auto;
}
.scorecard { background: var(--forest); }
.scorecard div { font-family: var(--f-label); font-weight: 600; color: rgba(251,244,228,0.92); }
.seg { border-bottom: 2px solid rgba(90,35,24,0.3); }
.seg img { border: 2px solid var(--ink); }
.seg .seg-link {
  font-family: var(--f-label); font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.seg .seg-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.colophon { color: var(--ink); }

/* The Archives */
.archive-script {
  font-family: var(--f-label); font-weight: 600; font-size: 15px;
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold);
}
.archive-note { color: var(--ink); }
.plate-grid .plate img { border: 2px solid var(--ink); }
.lightbox { background: rgba(36,74,62,0.97); }
.lb-btn { border: 2px solid var(--ground); color: var(--ground); }
.lb-btn:hover { background: var(--ground); color: var(--forest); }

/* ── Small screens ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 72px 36px; }
  .hero::before { top: 14px; left: 14px; right: 14px; bottom: 14px;
    box-shadow: inset 0 0 0 9px var(--parchment), inset 0 0 0 11px var(--ink); }
  .issue { padding: 32px 24px 40px; box-shadow: 0 0 0 6px var(--parchment), 0 0 0 8px var(--ink); }
}
@media (max-width: 480px) {
  .hero { padding: 60px 28px; }
  .hero-title { font-size: 40px; }
  .section-label, .eyebrow, .hero-label { font-size: 12px; }
  .issue { padding: 26px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .merch-card:hover, .cat-card:hover, .member-card:hover, .plate-grid .plate:hover { transform: none; }
}

/* ── Nav captions: plain English under the house names ─────── */
.nav-sub {
  display: block;
  font-family: var(--f-type);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 2px;
}
.sticky-nav a, .nav-right a, .nav-links a { text-align: center; line-height: 1.25; }
@media (max-width: 600px) { .nav-sub { font-size: 8px; letter-spacing: 0.02em; } }