/* Five Spice public site — shared styles. Brand: basket red, leaf green, charcoal. Type: Outfit (display) + Nunito Sans (body). */
:root {
  --red: #e32722; --red-ink: #b71d19; --green: #95c23a; --green-ink: #5f8a1c; --orange: #ea7b20;
  --ink: #2b2b2a; --text: #2b2b2a; --muted: #6b766b; --bg: #f6f7f2; --paper: #ffffff; --paper-2: #eef1e7; --line: #dde3d3;
  --ok: #3f9142; --display: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif; --body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--red-ink); }
h1, h2, h3, .display { font-family: var(--display); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* nav */
.nav { background: var(--paper); border-bottom: 3px solid var(--green); position: sticky; top: 0; z-index: 10; }
.nav .wrap { display: flex; align-items: center; gap: 22px; height: 66px; }
.nav .logo { flex: 0 0 auto; }
.nav .logo img { height: 42px; width: auto; display: block; }
.nav a.link { color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; }
.nav a.link:hover, .nav a.link[aria-current] { color: var(--ink); }
.nav .spacer { flex: 1; }
.nav .status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.nav .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.nav .status.open { color: var(--ok); } .nav .status.open::before { background: var(--ok); }
.nav .status.closed { color: var(--muted); } .nav .status.closed::before { background: var(--red); }
.btn { display: inline-block; font: 700 15px var(--display); padding: 11px 18px; border-radius: 10px; background: var(--red); color: #fff; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--red-ink); }
.btn.ghost { background: transparent; color: var(--red-ink); border: 2px solid var(--red-ink); padding: 9px 16px; }
.btn.ghost:hover { background: color-mix(in srgb, var(--red) 8%, transparent); }
.nav .menu-btn { display: none; }

/* footer */
footer { background: var(--ink); color: #d5dccb; margin-top: 64px; }
footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding-block: 36px; font-size: 14px; }
footer b { display: block; color: #fff; font-family: var(--display); font-size: 15px; margin-bottom: 6px; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .fine { grid-column: 1 / -1; border-top: 1px solid #40463a; padding-top: 14px; font-size: 12px; color: #9aa38f; }

/* generic sections */
.section { padding-block: 40px; }
.section .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section .head h2 { font-size: 28px; }
.section .head .more { font-weight: 700; text-decoration: none; }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.card h3 { font-size: 21px; margin-bottom: 6px; }
.card p { margin: 0 0 14px; color: var(--muted); }

@media (max-width: 760px) {
  .nav .wrap { height: 58px; gap: 14px; }
  .nav .logo img { height: 34px; }
  .nav a.link { display: none; }
  .nav .menu-btn { display: inline-block; }
  .nav.open a.link { display: block; }
  .nav.open .wrap { flex-wrap: wrap; height: auto; padding-block: 10px; }
  .section .head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* keyboard + touch (audit 2026-09-21) */
html { scroll-padding-top: 84px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 6px; }
a, button, .btn, .tile, .card, label, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn { transition: background-color .15s, color .15s; min-height: 44px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.sr-only { 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: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.nav .status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav .menu-btn { flex: 0 0 auto; }
.status .brief { display: none; }
@media (max-width: 760px) { .nav .status { font-size: 13px; } }
@media (max-width: 520px) { .nav .status .full { display: none; } .nav .status .brief { display: inline; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* One shared navigation across every public page, including recovery pages. */
.nav .nav-links { display: flex; align-items: center; gap: 18px; }
.nav .link { display: inline-flex; align-items: center; min-height: 44px; }
.nav a.link[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 1120px) {
  .nav .wrap { min-height: 64px; height: auto; padding-block: 10px; gap: 12px; flex-wrap: wrap; }
  .nav .nav-links { display: none; }
  .nav .menu-btn { display: inline-flex; align-items: center; }
  .nav.open .nav-links { display: flex; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .nav.open a.link { display: flex; padding: 10px 4px; }
  .nav .logo img { height: 34px; }
  .nav .status { font-size: 13px; }
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 16px; font-size: 14px; }
.breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb span { align-self: center; }

/* Advertising is one section; account and creation share its local navigation. */
.ads-section{max-width:1180px;margin:0 auto;padding:22px 28px 0;display:flex;align-items:center;justify-content:space-between;gap:22px}.ads-section>div{display:flex;align-items:baseline;gap:12px}.ads-section b{font:600 22px var(--display)}.ads-section span{font-size:13px;color:#566254}.ads-section nav{display:flex;flex-wrap:wrap;gap:4px}.ads-section a{display:block;padding:12px 14px;font-size:14px;font-weight:700;text-decoration:none;border-radius:5px;color:#566254}.ads-section a[aria-current]{background:#2f4526;color:#fff}.ads-section a:hover{background:#e4ecd8;color:#243522}@media(max-width:900px){.ads-section{display:block;padding-inline:18px}.ads-section nav{margin-top:14px}.ads-section a{padding:11px 10px}.ads-section span{font-size:12px}}