/* Birthday Plate visual system
   Design read: consumer food-directory for US people hunting free chain
   birthday food. Premium-consumer / editorial-product. Native CSS.
   Dials: VARIANCE 8 / MOTION 6 / DENSITY 5.
   Palette: Forest (deep green + cool bone + amber accent). Dual theme.
   Shape: cards 12px, buttons pill, inputs 8px.
   Taste hard on hero / nav / planner / filters / card chrome.
   Directory list stays light so 356 cards stay fast. */

@font-face {
  font-family: Outfit;
  src: url("fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #e7eee8;
  --bg-deep: #d7e0d8;
  --surface: #f3f7f3;
  --ink: #14241c;
  --muted: #3d5348;
  --line: #b7c6bb;
  --forest: #1f3d32;
  --forest-soft: #d5e4db;
  --accent: #c9862a;
  --accent-deep: #8f5d16;
  --accent-soft: #f3e3c4;
  --trap: #8b3a2a;
  --trap-soft: #f3ddd7;
  --warn: #7a5414;
  --warn-soft: #f3e6c8;
  --shadow: 0 20px 48px rgb(20 36 28 / 0.1);
  --radius-card: 12px;
  --radius-input: 8px;
  --z-skip: 80;
  --z-header: 40;
  --z-filters: 30;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101a15;
    --bg-deep: #0c1410;
    --surface: #17241d;
    --ink: #e6eee8;
    --muted: #9aada3;
    --line: #2c4036;
    --forest: #8fbfa4;
    --forest-soft: #1c3228;
    --accent: #d4973a;
    --accent-deep: #f0c56a;
    --accent-soft: #3a2d16;
    --trap: #e09a8c;
    --trap-soft: #3a221d;
    --warn: #e0c07a;
    --warn-soft: #332814;
    --shadow: 0 20px 48px rgb(0 0 0 / 0.28);
  }
}

[data-theme="light"] {
  --bg: #e7eee8;
  --bg-deep: #d7e0d8;
  --surface: #f3f7f3;
  --ink: #14241c;
  --muted: #3d5348;
  --line: #b7c6bb;
  --forest: #1f3d32;
  --forest-soft: #d5e4db;
  --accent: #c9862a;
  --accent-deep: #8f5d16;
  --accent-soft: #f3e3c4;
  --trap: #8b3a2a;
  --trap-soft: #f3ddd7;
  --warn: #7a5414;
  --warn-soft: #f3e6c8;
  --shadow: 0 20px 48px rgb(20 36 28 / 0.1);
}

[data-theme="dark"] {
  --bg: #101a15;
  --bg-deep: #0c1410;
  --surface: #17241d;
  --ink: #e6eee8;
  --muted: #9aada3;
  --line: #2c4036;
  --forest: #8fbfa4;
  --forest-soft: #1c3228;
  --accent: #d4973a;
  --accent-deep: #f0c56a;
  --accent-soft: #3a2d16;
  --trap: #e09a8c;
  --trap-soft: #3a221d;
  --warn: #e0c07a;
  --warn-soft: #332814;
  --shadow: 0 20px 48px rgb(0 0 0 / 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: Outfit, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 88% -8%, rgb(201 134 42 / 0.16), transparent 52%),
    linear-gradient(180deg, var(--bg-deep) 0, var(--bg) 28rem);
  background-color: var(--bg);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); }
a:hover { color: var(--ink); }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip {
  position: absolute; left: -999px; top: 0; z-index: var(--z-skip);
}
.skip:focus {
  left: 12px; top: 12px;
  background: var(--surface); color: var(--ink);
  padding: 8px 12px; border: 2px solid var(--accent);
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: 68px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(14px)) {
  .site-header { backdrop-filter: blur(14px); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); backdrop-filter: none; }
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 680; font-size: 1.05rem; letter-spacing: -0.02em;
  white-space: nowrap;
}
.mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--forest);
  box-shadow: inset 0 0 0 6px var(--forest), inset 0 0 0 8px var(--accent);
}
.desk-nav { display: flex; gap: 18px; }
.desk-nav a {
  text-decoration: none; color: var(--muted); font-weight: 580; font-size: 0.94rem;
}
.desk-nav a:hover { color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: 12px; }
.theme-toggle,
.nav-fold summary {
  font: inherit; font-weight: 650; font-size: 0.82rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
}
.theme-toggle:active { transform: scale(0.98); }
.nav-fold { display: none; position: relative; }
.nav-fold summary { list-style: none; }
.nav-fold summary::-webkit-details-marker { display: none; }
.nav-fold nav {
  position: absolute; right: 0; top: calc(100% + 8px);
  display: grid; gap: 4px; min-width: 11rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 8px;
  box-shadow: var(--shadow);
}
.nav-fold a {
  text-decoration: none; color: var(--ink); padding: 8px 10px;
  border-radius: 8px; font-weight: 580;
}
.nav-fold a:hover { background: var(--forest-soft); }

/* Hero: asymmetric split */
.hero {
  min-height: min(100dvh, 760px);
  padding: 28px 0 36px;
  display: flex; align-items: center;
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 5vw, 64px);
  align-items: end;
}
.hero-copy { padding-bottom: 8px; }
.eyebrow {
  margin: 0 0 14px; font-size: 0.8rem; font-weight: 650;
  color: var(--accent-deep); letter-spacing: 0.01em;
}
h1, h2, h3 {
  font-family: Outfit, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.035em; line-height: 1.12; margin: 0 0 12px;
}
h1 {
  font-size: clamp(2.05rem, 5.4vw, 3.55rem);
  font-weight: 750; max-width: 16ch; padding-bottom: 4px;
}
h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 720; }
h3 { font-size: 1.12rem; font-weight: 680; letter-spacing: -0.02em; }
.lede {
  font-size: 1.12rem; max-width: 36rem; color: var(--muted);
  margin: 0 0 22px;
}
.hero-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.text-link {
  font-weight: 680; color: var(--accent-deep); background: none; border: 0;
  padding: 0; font: inherit; font-weight: 680; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--ink); }
.hero-visual {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--forest-soft);
  transform: translateY(18px);
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #14241c;
  text-decoration: none; font-weight: 730; border: 0;
  border-radius: 999px; padding: 12px 18px;
  font: inherit; font-weight: 730; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); color: #14241c; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise 0.7s var(--ease) both; }
  .hero-visual { animation: rise 0.85s 0.08s var(--ease) both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Trap ribbon */
.trap-banner { padding: 0 0 28px; }
.trap-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px 28px; align-items: center;
  background: var(--trap-soft);
  border-left: 6px solid var(--trap);
  padding: 16px 18px;
}
.trap-row p { margin: 0; }
.trap-row a { font-weight: 730; white-space: nowrap; }

/* Planner */
.rewards { padding: 8px 0 48px; }
.planner-panel {
  display: grid; grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
  gap: 28px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.planner-intro p { margin: 0; color: var(--muted); max-width: 42rem; }
.planner-form {
  display: grid; grid-template-columns: 1.1fr 0.7fr 0.9fr 0.9fr auto;
  gap: 10px; align-items: end; margin: 0 0 10px;
  grid-column: 1 / -1;
}
.planner-form label,
.filter-row label {
  display: grid; gap: 4px;
  font-size: 0.75rem; font-weight: 700;
  color: var(--muted); letter-spacing: 0.04em;
}
.planner-form .btn { height: 44px; }
.planner-empty, .planner-note { color: var(--muted); max-width: 46rem; }
.planner-next { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; }
.planner-summary { margin: 12px 0 0; font-weight: 720; color: var(--ink); }
#planner-results { grid-column: 1 / -1; }
.planner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.planner-chips button {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 620;
  cursor: pointer;
}
.planner-chips button[aria-pressed="true"] {
  background: var(--accent); color: #14241c; border-color: var(--accent);
}
.planner-chips button:active { transform: scale(0.98); }
.planner-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.planner-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px 16px; align-items: start;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 12px 14px;
}
.planner-row.too_late { background: var(--trap-soft); }
.planner-row.waiting { background: var(--bg); }
.planner-row.loaded { background: var(--forest-soft); }
.planner-row.claimed { background: var(--accent-soft); }
.planner-row.missing_dob { background: var(--bg-deep); }
.join-check {
  display: grid; justify-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); cursor: pointer;
}
.join-check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; padding: 0; }
.planner-brand { font-weight: 700; font-size: 1.08rem; margin: 0 0 4px; letter-spacing: -0.02em; }
.planner-item {
  margin: 0; color: var(--muted); font-size: 0.95rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.planner-why { margin: 8px 0 0; font-size: 0.92rem; }
.planner-gates {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 0;
}
.gate-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); cursor: pointer;
}
.gate-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.planner-side { text-align: right; min-width: 11rem; display: grid; gap: 6px; justify-items: end; }
.planner-joinby { margin: 0; font-weight: 700; font-size: 0.92rem; }
.planner-side a { font-weight: 700; font-size: 0.9rem; }
.planner-status {
  font-size: 0.72rem; font-weight: 730; letter-spacing: 0.03em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 8px;
}
.planner-status.waiting { background: var(--warn-soft); color: var(--warn); }
.planner-status.loaded { background: var(--forest-soft); color: var(--forest); }
.planner-status.claimed { background: var(--accent-soft); color: var(--accent-deep); }
.planner-status.too_late { background: var(--trap-soft); color: var(--trap); }
.planner-status.missing_dob { background: var(--bg-deep); color: var(--muted); }

/* Birth-month list */
.list-product { padding: 0 0 48px; }
.list-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.list-intro p { margin: 0; color: var(--muted); max-width: 48rem; }
.list-blocked { margin: 16px 0 0; color: var(--muted); max-width: 46rem; }
.list-form {
  display: grid; grid-template-columns: 1.3fr 1fr auto;
  gap: 10px; align-items: end; margin: 16px 0 8px;
}
.list-form label {
  display: grid; gap: 4px;
  font-size: 0.75rem; font-weight: 700;
  color: var(--muted); letter-spacing: 0.04em;
}
.list-form .btn { height: 44px; }
.list-form input:disabled {
  opacity: 0.65; cursor: not-allowed;
}
.list-note { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 46rem; }
.list-status { margin: 12px 0 0; font-weight: 680; max-width: 46rem; }
.list-status[data-kind="ok"] { color: var(--forest); }
.list-status[data-kind="error"] { color: var(--trap); }
.list-preview-lead { margin: 16px 0 10px; color: var(--muted); }
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.list-chip {
  font-size: 0.72rem; font-weight: 730; letter-spacing: 0.03em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 8px;
}
.list-chip.waiting { background: var(--warn-soft); color: var(--warn); }
.list-chip.loaded { background: var(--forest-soft); color: var(--forest); }
.list-chip.claimed { background: var(--accent-soft); color: var(--accent-deep); }
.list-chip.too_late { background: var(--trap-soft); color: var(--trap); }
.list-chip.missing_dob { background: var(--bg-deep); color: var(--muted); }
#list-leave { margin-top: 12px; }
#list-leave:not([hidden]) { display: inline-block; }

/* How: numbered rail, not equal cards */
.how { padding: 12px 0 56px; }
.section-lede { color: var(--muted); max-width: 48rem; }
.steps {
  display: grid; gap: 0; padding: 0; margin: 28px 0 0; list-style: none;
  border-left: 3px solid var(--forest);
}
.steps li {
  padding: 0 0 28px 28px; position: relative;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: "";
  position: absolute; left: -7px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--muted); max-width: 62ch; }

/* Filters */
.filters {
  position: sticky; top: 67px; z-index: var(--z-filters);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
@supports (backdrop-filter: blur(14px)) {
  .filters { backdrop-filter: blur(14px); }
}
@media (prefers-reduced-transparency: reduce) {
  .filters { background: var(--bg); backdrop-filter: none; }
}
.filter-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 10px;
}
input, select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-input);
  background: var(--surface); color: var(--ink); padding: 10px 12px;
  font: inherit; font-size: 0.98rem;
}
input::placeholder { color: color-mix(in srgb, var(--muted) 80%, var(--surface)); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.result-meta { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }

/* Best: editorial stacked rows */
.best { padding: 36px 0 20px; }
.section-head { margin-bottom: 8px; max-width: 46rem; }
.section-head p { margin: 0; color: var(--muted); }
#best-grid {
  display: flex; flex-direction: column; gap: 0;
}
#best-grid .card {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) 1fr;
  grid-template-areas:
    "top item"
    "top meta"
    "note note"
    "links links"
    "verified verified";
  gap: 6px 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}
#best-grid .card-top { grid-area: top; flex-direction: column; align-items: flex-start; }
#best-grid .item { grid-area: item; }
#best-grid .meta { grid-area: meta; }
#best-grid .note { grid-area: note; }
#best-grid .links { grid-area: links; }
#best-grid .verified { grid-area: verified; }
#best-grid .brand { font-size: 1.45rem; }
#best-grid .card.trap { background: transparent; border-bottom-color: var(--trap); }

/* Directory: compact 2-col, no shadows */
.directory { padding: 28px 0 48px; }
#full-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#full-grid .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: none;
  display: grid; gap: 8px;
  contain: content;
}
#full-grid .card.trap { border-color: var(--trap); background: var(--trap-soft); }
#full-grid .item {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty { color: var(--muted); }

.card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.brand { font-size: 1.18rem; font-weight: 700; margin: 0; letter-spacing: -0.025em; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.badge {
  font-size: 0.7rem; font-weight: 730; letter-spacing: 0.03em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 8px; white-space: nowrap;
}
.badge.confirmed { background: var(--forest-soft); color: var(--forest); }
.badge.likely { background: var(--warn-soft); color: var(--warn); }
.badge.unverified { background: var(--bg-deep); color: var(--muted); }
.badge.trap { background: var(--trap-soft); color: var(--trap); }
.badge.regional { background: var(--accent-soft); color: var(--accent-deep); }
.item { margin: 0; font-size: 1.02rem; }
.meta { display: grid; gap: 4px; margin: 0; }
.meta div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 0.92rem; }
.meta dt { color: var(--muted); font-weight: 700; }
.meta dd { margin: 0; }
.note {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-input);
  background: var(--warn-soft); color: var(--warn); font-size: 0.92rem;
}
.links { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.links a { font-weight: 700; font-size: 0.92rem; }
.verified { margin: 0; color: var(--muted); font-size: 0.82rem; }
.affiliate-note { margin: 0; color: var(--muted); font-size: 0.82rem; }
.site-footer .affiliate-note { grid-column: 1 / -1; max-width: none; }

.site-footer {
  padding: 28px 0 56px; color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}
.footer-split {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px;
}
.site-footer p { margin: 0; max-width: 40rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .desk-nav { display: none; }
  .nav-fold { display: block; }
  .bar { min-width: 0; }
  .header-tools { min-width: 0; }
  .hero { min-height: 0; padding: 20px 0 28px; }
  .hero-split { grid-template-columns: 1fr; gap: 20px; }
  .hero-visual { transform: none; max-height: 240px; }
  h1 { max-width: none; }
  .trap-row, .planner-panel, .list-panel, .footer-split { grid-template-columns: 1fr; }
  .planner-form { grid-template-columns: 1fr 1fr; }
  .planner-form .btn { grid-column: 1 / -1; }
  .list-form { grid-template-columns: 1fr; }
  .list-form .btn { grid-column: 1 / -1; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  #best-grid .card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top" "item" "meta" "note" "links" "verified";
  }
  #full-grid { grid-template-columns: 1fr; }
  .planner-row { grid-template-columns: auto 1fr; }
  .planner-side { grid-column: 2; text-align: left; justify-items: start; min-width: 0; }
  .meta div { grid-template-columns: 1fr; gap: 2px; }
}