/* ==========================================================================
   UGLY BAKES - premium refinement layer (refine.css)
   Loaded after theme.css + shelf.css on the root pages only (/legacy/ keeps
   the original look). Same brand, grown up: hairlines instead of thick ink,
   soft tinted shadows instead of offset "sticker" shadows, pills instead of
   blobs, no tilts, the wonk axis off, and pink as the single accent. The
   drawings stay; their outlines get thinner.
   Kept on purpose: the logo, the lane badge words, the "GONE" photo stamp,
   the passport stamps and the FAQ plus-to-cross turn.
   ========================================================================== */

:root {
  --line: #ead9c6;          /* decorative hairline: cards, panels, rules */
  --line-strong: #8f7866;   /* form fields and controls: 4:1 on cream */
  --color-ink: var(--line);
  --border-ink: 1px solid var(--line);
  --color-eyebrow: var(--color-text-muted);

  --radius: 1.1rem;
  --radius-sm: 0.7rem;
  --wonk-1: 999px;
  --wonk-2: 999px;
  --wonk-3: 999px;

  --shadow-card: 0 1px 2px rgba(51, 35, 26, 0.05), 0 12px 32px -20px rgba(51, 35, 26, 0.28);
  --shadow-pop: 0 1px 2px rgba(51, 35, 26, 0.06), 0 26px 50px -30px rgba(51, 35, 26, 0.4);

  --text-hero: clamp(2.4rem, 1.3rem + 3.4vw, 4.1rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line: #4b392d;
    --line-strong: #a8917b;
    --shadow-card: 0 1px 2px rgba(8, 5, 3, 0.4), 0 14px 34px -20px rgba(8, 5, 3, 0.8);
    --shadow-pop: 0 1px 2px rgba(8, 5, 3, 0.45), 0 28px 54px -30px rgba(8, 5, 3, 0.9);
  }
}

/* ---------- Type: calmer display, no wobble ---------- */
h1, h2, h3, h4,
.marquee-track span,
.quote p,
.counter-number,
.place h3,
.calc-out .big,
.voice p,
.snap dd,
.board-invite-num,
.perk .perk-figure {
  font-variation-settings: "SOFT" 20, "WONK" 0;
}
h1, h2 {
  letter-spacing: -0.02em;
}
.counter-number,
.snap dd,
.board-invite-num,
.perk .perk-figure,
.calc-out .big {
  font-weight: 700;
}
.page-hero--split h1 {
  max-width: 18ch;
}

/* ---------- No tilts (stamps and the FAQ toggle excepted) ---------- */
.sticker,
.step::before,
.counter-grid .counter:nth-child(n),
.size .badge,
.shelf-card:nth-child(n),
.ledger-badge > svg,
.hero-panel,
.shelf-card--preview,
.charter-item:nth-child(n),
.board-invite,
.perk:nth-child(n),
.perk--lead,
.quote:nth-child(n),
.rung:nth-child(n) {
  rotate: 0deg;
}
.sticker {
  display: none;
}

/* ---------- Buttons and pills ---------- */
.btn {
  font-weight: 700;
  border-color: transparent;
  box-shadow: none;
  transition: transform var(--duration-2) var(--ease-out),
    box-shadow var(--duration-2) var(--ease-out),
    background var(--duration-2) var(--ease-out),
    border-color var(--duration-2) var(--ease-out);
}
.btn--primary {
  box-shadow: 0 10px 24px -14px rgba(199, 58, 80, 0.8);
}
.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
}
.btn--butter {
  box-shadow: none;
}
.btn:active {
  transform: scale(0.98);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover,
  .btn--ghost:hover,
  .btn--butter:hover {
    transform: translateY(-1px);
  }
  .btn--primary:hover {
    background: var(--color-accent-hover);
  }
  .btn--ghost:hover {
    border-color: var(--color-text);
  }
  .brand:hover .brand-mark,
  .nav-links a:hover,
  .filter-btn:hover,
  .choice-group label:hover,
  .check-group label:hover,
  .audience-row a:hover {
    transform: none;
  }
  .place:hover {
    transform: translateX(3px);
  }
}
.place.is-active {
  transform: translateX(3px);
}

/* Filters and card actions: drop the offset "sticker" shadows */
.filter-btn,
.filter-btn:hover,
.filter-btn[aria-pressed="true"],
.filter-btn.is-active,
.icon-btn,
.icon-btn:hover,
.icon-btn[aria-pressed="true"] {
  box-shadow: none;
}
.filter-btn,
.icon-btn,
.check-group label,
.choice-group label {
  border-color: var(--line-strong);
  font-weight: 700;
}

/* ---------- Navigation: an underline, not a butter chip ---------- */
.nav-links a {
  font-weight: 700;
}
.nav-links a[aria-current="page"]:not(.nav-cta) {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-accent-strong);
  border-radius: 0;
}
.nav-links .nav-cta {
  border-color: transparent;
  box-shadow: none;
}
.site-header {
  box-shadow: none;
}

/* ---------- Form fields: stronger line than decoration (WCAG 1.4.11) ---------- */
main input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
main select,
main textarea,
.site-footer input {
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}

/* ---------- Surfaces: pink is the only tint that carries emphasis ---------- */
.hero-panel--mint,
.hero-panel--butter,
.counter--butter {
  background: var(--color-surface);
}
.perk--mint,
.perk--butter {
  background: var(--color-bg-subtle);
}
.section--cream2 .perk--mint,
.section--cream2 .perk--butter {
  background: var(--color-surface);
}
.panel-foot {
  border: 0;
  border-top: 1px solid var(--line);
}
.board-invite {
  border: 1px solid var(--color-accent-strong);
}
.evidence {
  border-left-color: var(--color-accent-strong);
}

/* ---------- Drawings: same art, finer line ---------- */
main svg [stroke-width="5"],
main svg [stroke-width="4.5"],
main svg [stroke-width="4"] {
  stroke-width: 2.6;
}
main svg [stroke-width="3.5"],
main svg [stroke-width="3.2"],
main svg [stroke-width="3"] {
  stroke-width: 2.1;
}

/* ---------- Marquee: quieter ---------- */
.marquee-track .dot {
  color: var(--color-on-band-muted);
  opacity: 0.6;
}

/* ---------- Second-accent clean-up: butter and mint only where they mean state ---------- */
.nudge {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  border-left: 3px solid var(--color-accent-strong);
}
.notice--mint {
  background: var(--color-surface);
}
.subscribe-form button {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  border: 1px solid transparent;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .subscribe-form button:hover {
    background: var(--color-accent-hover);
  }
}
/* On the cocoa bands the secondary button is cream, not butter */
.btn--butter {
  background: var(--cream);
  color: var(--cocoa);
}
.marquee-pause {
  background: transparent;
  color: var(--color-on-band);
  border: 1px solid var(--color-rule-on-band);
  font-weight: 700;
}
.next-steps li::before {
  background: var(--color-accent-soft);
  color: var(--color-text);
  border: 1px solid var(--line);
  font-weight: 700;
}

/* ---------- Phone mock-ups: a slim bezel, not a black outline ---------- */
.phone {
  border: 0;
  padding: 0.4rem;
  box-shadow: var(--shadow-pop);
}