/* Bronze Age Modern + Dusty Blue — public-site theme.
   Loaded after site.css on the public pages only (the admin keeps site.css as is).
   Dark page, brick-red buttons, gold accents, dusty-blue links and focus.
   The colors staff pick in Shop Settings are overridden here (!important beats the inline
   values site.js sets), so the whole site keeps one palette. */

:root {
  color-scheme: dark;

  --bg: #121212;
  --raised: #272522;
  --red: #d64532;
  --red-btn: #982c21;       /* white text on this is 7:1 */
  --red-btn-hover: #82251c;
  --gold: #e7b84b;
  --cream: #e9e1d3;
  --teal: #91bbdd;
  --teal-hover: #a5c9e5;
  --teal-dark: #182630;
  --error: #ff9585;
  --ok: #9bd7ae;

  /* Settings colors are pinned to the theme. */
  --brand-primary: #982c21 !important;
  --brand-accent: #e7b84b !important;
  --brand-ink: #f4f0ea !important;
  --brand-paper: #121212 !important;
  --brand-footer: #121212 !important;
  --footer-text: #bdb4a8 !important;
  --footer-heading: #e7b84b !important;

  --ink: #f4f0ea;            /* body text */
  --paper: var(--bg);        /* page background */
  --surface: #1c1b1a;
  --muted: #bdb4a8;
  --line: #38342f;
  --field-line: #887e70;
  --focus: var(--teal);

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-heading: 'Archivo', Arial, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  --radius: 5px;
  --shadow: none;
  --shadow-lg: 0 10px 40px rgb(0 0 0 / .6);
  --field-h: 46px;
}

html { scroll-behavior: smooth; }
body { font-size: 18px; line-height: 1.5; background: var(--bg); color: var(--ink); }

/* ---------- Type ---------- */

h1 { font-size: clamp(34px, 5vw, 64px); line-height: .96; letter-spacing: -.045em; text-transform: uppercase; margin: 14px 0 16px; }
h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; }
h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }

a { color: var(--teal); text-underline-offset: 5px; }
a:hover { color: var(--teal-hover); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.skip-link { background: var(--bg); color: var(--ink); outline: 3px solid var(--teal); }

/* ---------- Top bar (announcement + search) ---------- */

.topbar { background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line); }
.topbar__notice { color: var(--ink); font-size: .85rem; }
.topbar__notice strong { color: var(--gold); letter-spacing: .1em; }
.topbar__notice a { color: var(--teal); }
.topbar__search input { background: var(--bg); color: var(--ink); border: 1px solid var(--field-line); border-radius: 9px; }
.topbar__search input::placeholder { color: var(--muted); opacity: 1; }
.topbar__btn { background: var(--teal); color: var(--bg); border-radius: 9px; }
.topbar__btn:hover { filter: none; background: var(--teal-hover); }
.demo-banner { background: var(--gold); color: var(--bg); }

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

#site-header { background: var(--bg); box-shadow: none; border-bottom: 1px solid var(--line); }
.header__bar { min-height: 76px; }
.brand__name { font-size: 1.5rem; letter-spacing: -1px; color: var(--cream); }
.brand__name span { color: var(--gold); }
.nav-toggle { background: var(--gold); border-radius: 3px; }
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { background: var(--bg); }
.nav { background: var(--surface); box-shadow: 0 12px 24px rgb(0 0 0 / .5); border-bottom: 1px solid var(--line); }
.nav a { color: var(--cream); font-size: 14px; border-bottom-color: var(--line); }
.nav a:hover { color: var(--teal); text-decoration: underline; }
.nav a[aria-current='page'] { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; }
.nav-badge { background: var(--red-btn); color: #fff; }
.nav a[aria-current='page'] .nav-badge { background: var(--gold); color: var(--bg); }
@media (min-width: 1100px) {
  #site-header { box-shadow: none; }
  .nav { background: none; box-shadow: none; border: 0; }
  .nav a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 0; }
  .nav a[aria-current='page'] { background: none; color: var(--gold); }
}

/* ---------- Buttons ---------- */

.btn {
  min-height: 46px; padding: 10px 21px; border: 1px solid transparent; border-radius: 3px; box-shadow: none;
  background: var(--teal); color: var(--bg);
  font: 700 14px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
}
.btn:hover { background: var(--teal-hover); color: var(--bg); transform: none; filter: none; box-shadow: none; }
.btn:active { transform: none; box-shadow: none; }
.btn--primary { background: var(--red-btn); color: #fff; }
.btn--primary:hover { background: var(--red-btn-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--gold); border-color: var(--gold); box-shadow: none; }
.btn--ghost:hover { background: var(--raised); color: var(--gold); box-shadow: none; }
.btn[disabled] { opacity: 1; background: var(--raised); color: var(--muted); border-color: var(--line); box-shadow: none; }
.link-button, .follow-open, .how-it-works summary { color: var(--teal); }
.list-line__remove:hover { color: var(--gold); }

/* ---------- Forms ---------- */

label, .label { font-weight: 600; font-size: .95rem; margin-bottom: 7px; }
input, select, textarea {
  background-color: var(--bg); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: 9px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--teal); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px #91bbdd33; }
input:disabled, select:disabled, textarea:disabled { opacity: 1; color: var(--muted); cursor: not-allowed; }
input[type='checkbox'], input[type='radio'] { width: 24px; height: 24px; accent-color: var(--teal); }
.field--check, .multi__option { min-height: 44px; }
select, .multi__button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bdb4a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.multi__button { background-color: var(--bg); color: var(--ink); border-radius: 9px; }
.multi__button:hover, .multi__button[aria-expanded='true'] { border-color: var(--teal); }
.multi__panel { background: var(--raised); border: 1px solid var(--line); }
.multi__option:hover { background: var(--surface); }
.multi__actions button { color: var(--ink); }
.multi__actions .multi__done { background: var(--gold); color: var(--bg); }
.form-error { color: var(--error); }
.field__hint, .field__hint a { font-size: .85rem; }
.account-saved, .follow-dialog__status { color: var(--ok); }

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

.hero {
  padding-block: 64px; border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgb(18 18 18 / .88), rgb(18 18 18 / .88)),
    radial-gradient(#ffffff14 1px, transparent 1px) 0 0 / 7px 7px,
    var(--bg);
}
.hero.hero--photo {
  padding-block: 64px; color: var(--ink);
  background:
    linear-gradient(90deg, rgb(18 18 18 / .92), rgb(18 18 18 / .78) 60%, rgb(18 18 18 / .6)),
    var(--hero-image) center / cover no-repeat,
    var(--bg);
}
.hero h1, .hero--photo h1 { font-size: clamp(34px, 5vw, 64px); margin: 0 0 16px; text-shadow: none; }
.hero h1 span, .hero--photo h1 span { color: var(--gold); }
.hero p { font-size: 17px; max-width: 620px; color: var(--cream); }
@media (min-width: 800px) { .hero, .hero.hero--photo { padding-block: 96px; } }

/* ---------- Sections ---------- */

.section { padding-block: 32px; }
.section + .section { border-top: 1px solid var(--line); }
.section--alt { background: var(--surface); }
.lede { color: var(--muted); }

/* ---------- Cards ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 5px; box-shadow: none; }
.cover { aspect-ratio: 6.625 / 10.25; background: var(--raised); object-fit: contain; }
.cover--placeholder {
  background: radial-gradient(#ffffff0c 1px, transparent 1px) 0 0 / 7px 7px, var(--raised);
  color: var(--muted); font-size: 1rem;
}
.card__title { font-family: var(--font-heading); font-weight: 700; }
.card__meta { color: var(--muted); }
.foc--soon { color: var(--error); }
.pick-badge { background: var(--gold); color: var(--bg); border-radius: 2px; box-shadow: none; letter-spacing: .06em; text-transform: uppercase; }
.chips li { background: var(--raised); color: var(--gold); border: 1px solid var(--line); border-radius: 2px; }

/* Status badges: icon + text on light chips with dark text. */
.badge { border-radius: 2px; background: var(--teal); color: var(--bg); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; padding: 4px 7px; }
.badge--available { background: var(--ok); }
.badge--just_arrived, .badge--new_this_wednesday { background: var(--gold); }
.badge--pre_order { background: var(--teal); }
.badge--backorder { background: var(--cream); }
.badge--low_stock { background: #f0a35a; }
.badge--sale { background: var(--red-btn); color: #fff; }
.badge--clearance { background: #f4b6be; }
.badge--sold_out { background: #3a3632; color: #d6cdbf; }

/* ---------- Panels, filters, dialogs ---------- */

.panel, .filters, details, .search-hits li, .event__date { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.panel, .filters { border-radius: 5px; }
.panel { padding: 24px; }
.how-it-works { background: none; border: 0; }
.filters .field--search { grid-column: 1 / -1; }
.empty { border-color: #4a443d; }
.map { background: var(--raised); box-shadow: none; }

dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
dialog::backdrop { background: #000c; }
.dialog__close { color: var(--ink); }
.notice { background: var(--teal-dark); border: 0; border-left: 3px solid var(--teal); border-radius: 0; font-weight: 400; color: var(--ink); }
.confirm__big { color: var(--gold); }
.list-bar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }
.follow-choice { background: var(--bg); color: var(--ink); }
.follow-choice:hover { border-color: var(--teal); }
.follow-choice.is-on { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.follow-choice.is-on .follow-choice__hint { color: var(--bg); }
.follow-person__tag { background: var(--gold); color: var(--bg); }
.follow-dialog__foot { background: var(--surface); }

/* ---------- Calendar, posts, account ---------- */

.event__month { background: var(--red-btn); color: #fff; }
.event__type { color: var(--gold); }
.event__date { border-radius: 5px; overflow: hidden; }
.account-line__status--arrived { color: var(--ok); }
.search-hits mark { background: var(--gold); color: var(--bg); }

/* Staff-edited text */
/* Staff-picked text colors were chosen for a light page; on the dark theme each maps to a readable equivalent,
   and highlighted text goes dark so it reads on its light highlight. */
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(22, 22, 22)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#161616"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #161616"] { color: inherit !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(0, 0, 0)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#000000"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #000000"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #000"] { color: inherit !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(91, 91, 91)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#5b5b5b"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #5b5b5b"] { color: var(--muted) !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(200, 16, 46)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#c8102e"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #c8102e"] { color: #ff9585 !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(164, 0, 29)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#a4001d"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #a4001d"] { color: #ff9585 !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(22, 114, 58)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#16723a"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #16723a"] { color: var(--ok) !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(26, 95, 255)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#1a5fff"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #1a5fff"] { color: var(--teal) !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(122, 63, 176)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#7a3fb0"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #7a3fb0"] { color: #cdb6ee !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: rgb(179, 89, 0)"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color:#b35900"],
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*="color: #b35900"] { color: #f0a35a !important; }
:is(.prose, [data-content], #faq-list, .page-body, .lede) [style*='background'] { color: var(--bg) !important; }

.lede blockquote, .page-body blockquote, #faq-list blockquote { background: var(--gold); color: var(--bg); }
.lede blockquote a, .page-body blockquote a, #faq-list blockquote a { color: var(--bg); }
.prose tr:first-child td { background: var(--raised); }

/* ---------- Newsletter + footer ---------- */

.newsletter { background: var(--surface); border-top: 1px solid var(--line); }
/* The email-list embed (EmailOctopus) ships its own light styles; recolor it to match. */
#newsletter-form .emailoctopus-form-wrapper { color: var(--ink) !important; }
#newsletter-form .emailoctopus-success-message, #newsletter-form .emailoctopus-error-message, #newsletter-form label { color: var(--muted) !important; }
#newsletter-form .emailoctopus-error-message { color: var(--error) !important; }
#newsletter-form input[type='email'], #newsletter-form input[type='text'] { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--field-line) !important; border-radius: 9px !important; min-height: 46px; }
#newsletter-form input[type='submit'] { background: var(--red-btn) !important; color: #fff !important; border: 1px solid transparent !important; border-radius: 3px !important; min-height: 46px; font: 700 14px/1 var(--font-body) !important; letter-spacing: .04em; text-transform: uppercase; }
#newsletter-form input[type='submit']:hover { background: var(--red-btn-hover) !important; }
#newsletter-form a { color: var(--teal) !important; }
#newsletter-form .mastfoot, #newsletter-form .mastfoot * { color: var(--muted) !important; }
#site-footer { background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); }
#site-footer a { color: var(--teal); }
#site-footer a:hover { color: var(--teal-hover); }
.footer__heading { font-family: var(--font-heading); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.footer__legal { opacity: 1; color: var(--muted); font-size: 13px; }
.socials a { background: rgb(255 255 255 / .08); }
.socials a:hover { background: var(--red-btn); color: #fff; }
#site-footer .socials a { background: none; }
#site-footer .socials a:hover { background: none; color: var(--teal-hover); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
  input, select, textarea, .btn { border: 1px solid ButtonText; }
  .hero { background-image: none; }
  a:focus-visible, button:focus-visible, input:focus, select:focus, textarea:focus { outline: 3px solid Highlight; }
}