:root {
  --ink: #173f35;
  --paper: #f7f1e5;
  --muted: #77766d;
  --orange: #7b1e2f;
  --gold: #c8a24a;
  --navy: #0e2340;
  --line: rgba(247, 241, 229, .2);
  --sans: 'Noto Sans', sans-serif;
  --display: 'Noto Serif', serif;
}

body { background: var(--paper); color: var(--ink); }
.announcement { background: var(--navy); color: var(--paper); }
.status-dot { background: var(--gold); box-shadow: 0 0 8px #c8a24a66; }
.brand-mark { color: var(--paper); letter-spacing: -.08em; }
.brand-mark span, .brand-name .brand-period { color: var(--gold); }
.brand-name { display: flex; flex-direction: column; gap: 3px; color: var(--paper); font: 600 12px/1.05 var(--sans); letter-spacing: .09em; }
.brand-name small { color: #e0c986; font: 8px/1 var(--mono); letter-spacing: .1em; }
.nav { color: #f7f1e5; }
.nav-cta { border-color: #c8a24a88; }
.nav-cta span { color: var(--gold); }
.hero { background: radial-gradient(ellipse at 72% 50%, #245848 0, transparent 45%), var(--ink); }
.hero { color: var(--paper); }
.hero-card-shadow { background: var(--navy); }
.card-inner { background: linear-gradient(150deg, var(--ink), var(--navy)); }
.card-art { background: linear-gradient(150deg, var(--gold), var(--orange) 58%, var(--navy)); }
.card-title { color: var(--paper); }
.card-title em { color: var(--gold); }
.hero h1, .section-heading h2, .shop-heading h2, .manifesto h2, .contact h2,
.login-card h1, .inventory-heading h1, .account-content h1, .dialog-head h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.04em;
}
.outline-text { color: var(--gold); -webkit-text-stroke: 0; font-style: italic; }
.hero .eyebrow, .hero-foot, .hero-caption, .hero-index { color: #e6dfcf; }
.hero .eyebrow-line, .contact .eyebrow-line { background: var(--gold); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #fffaf0; }
.ticker { background: var(--orange); color: var(--paper); }
.ticker b { color: var(--gold); }
.shop-listings { background: #f1eadb; }
.product-card { background: #fffaf0; }
.product-tag, .cart-button, .add-button, .button-dark { background: var(--ink); color: var(--paper); }
.cart-button span, .button-dark span { color: var(--gold); }
.add-button:hover { background: var(--orange); color: var(--paper); }
.collection { background: var(--paper); }
.filter.active { background: var(--ink); color: var(--paper); }
.collection-card:hover .tile-arrow, .collection-note span { color: var(--orange); }
.manifesto { background: #eee5d3; color: var(--ink); }
.manifesto-top, .manifesto-bottom, .manifesto-top .eyebrow { color: #59675e; }
.manifesto-mark { color: var(--navy); }
.manifesto-mark span, .manifesto h2 em { color: var(--orange); }
.manifesto-content p { color: #4f5f55; }
.manifesto-signoff b { color: var(--orange); }
.manifesto-bottom { border-top-color: #173f3530; }
.contact { background: var(--orange); color: var(--paper); }
.contact .eyebrow, .contact-copy > p, .contact-copy small, .contact-index { color: #f7f1e5; }
.contact-art > span { color: var(--gold); }
.contact-art i { color: var(--paper); }
.contact .button-dark { background: var(--paper); color: var(--ink); }
.contact .button-dark span { color: var(--orange); }
footer { background: var(--ink); color: #e1e4dc; }
.footer-brand { color: var(--paper); }
.footer-brand .accent { color: var(--gold); }
.manager-body, .account-body { background: var(--paper); color: var(--ink); }
.manager-body .site-header, .account-body .site-header { background: var(--ink); }
.login-card, .account-card { background: #fffaf0; }
.login-card input:focus, .form-grid input:focus, .form-grid select:focus,
.form-grid textarea:focus, .account-form input:focus { border-color: var(--gold); }
.photo-picker-label input[type=file]::file-selector-button { background: var(--ink); color: var(--paper); }
.account-brand-art { background: var(--ink); }
.account-brand-art > span, .account-tab.active { color: var(--orange); }
.account-tab.active { border-bottom-color: var(--gold); }
.account-notice { border-left-color: var(--gold); background: #f1eadb; }
.manager-body .eyebrow, .account-body .eyebrow { color: #5e6c63; }

@media (max-width: 620px) {
  .nav { background: var(--ink); }
  .announcement-right { display: none; }
  .hero h1 .outline-text { display: inline-block; font-size: .82em; white-space: nowrap; }
}