/* ============================================================================
   wendyrealestatecoach.com

   PORTED VERBATIM from design/homepage-direction.html — the approved direction.
   That file is the design source of truth. When a value changes, change it
   there first and re-port, so the mockup and the site cannot drift.

   Palette is sampled from Wendy's logo file, not invented:
     navy #0C1E48  ·  gold #E0B050
   The book cover supplies the dark world: black ground, silver type.

   Hand-written, committed, no build step (BUILD-APPROACH §11).
   ============================================================================ */
/* ============================================================
     TOKENS — sampled from Wendy's actual logo file, not invented.
       navy #0C1E48  ·  gold #E0B050
     The book cover supplies the dark world: black ground, silver type.
     ============================================================ */
  /* Jost — SIL OFL. Variable, one file covers every weight. See fonts/OFL.txt. */
  @font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jost.woff2') format('woff2');
  }


  :root {
    --navy:       #0C1E48;
    --navy-deep:  #071230;
    --gold:       #E0B050;
    --gold-deep:  #B98A2E;
    --silver:     #C9CCD1;
    --coal:       #0A0B0D;
    --paper:      #FBFBFC;
    --paper-warm: #F1F2F4;
    --slate:      #5C6579;

    --bg:          var(--paper);
    --bg-panel:    var(--paper-warm);
    --bg-invert:   var(--navy);
    --fg:          var(--navy);
    --fg-muted:    var(--slate);
    --fg-invert:   #EEF0F4;
    --rule:        rgba(12, 30, 72, 0.16);
    --rule-soft:   rgba(12, 30, 72, 0.08);
    --accent:      var(--gold-deep);
    --logo-navy:   #0C1E48;
    --logo-gold:   #E0B050;

    /* Her wordmark is lowercase geometric sans, so the page leads sans.
       An old-style serif italic appears ONLY in pull quotes, for warmth. */
    --font-display: "Jost", "Avenir Next", "Futura", "Century Gothic", system-ui, sans-serif;
    --font-body:    "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-quote:   "Hoefler Text", "Baskerville", "Iowan Old Style", Georgia, serif;
    --font-mono:    ui-monospace, "SF Mono", "Andale Mono", monospace;

    --t-xs:   0.72rem;
    --t-sm:   0.86rem;
    --t-base: 1rem;
    --t-md:   1.16rem;
    --t-lg:   1.5rem;
    --t-2xl:  2.6rem;
    --t-3xl:  3.7rem;

    --rail:     5.5rem;
    --measure:  34rem;
    --page-max: 68rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:        var(--coal);
      --bg-panel:  #131519;
      --bg-invert: #05091A;
      --fg:        #E9EBEF;
      --fg-muted:  #9AA2B2;
      --fg-invert: #E9EBEF;
      --rule:      rgba(233, 235, 239, 0.18);
      --rule-soft: rgba(233, 235, 239, 0.09);
      --accent:    var(--gold);
      --logo-navy: #EEF0F4;
      --logo-gold: #E0B050;
    }
  }
  :root[data-theme="dark"] {
    --bg:        var(--coal);
    --bg-panel:  #131519;
    --bg-invert: #05091A;
    --fg:        #E9EBEF;
    --fg-muted:  #9AA2B2;
    --fg-invert: #E9EBEF;
    --rule:      rgba(233, 235, 239, 0.18);
    --rule-soft: rgba(233, 235, 239, 0.09);
    --accent:    var(--gold);
    --logo-navy: #EEF0F4;
    --logo-gold: #E0B050;
  }
  :root[data-theme="light"] {
    --bg:        var(--paper);
    --bg-panel:  var(--paper-warm);
    --bg-invert: var(--navy);
    --fg:        var(--navy);
    --fg-muted:  var(--slate);
    --fg-invert: #EEF0F4;
    --rule:      rgba(12, 30, 72, 0.16);
    --rule-soft: rgba(12, 30, 72, 0.08);
    --accent:    var(--gold-deep);
    --logo-navy: #0C1E48;
    --logo-gold: #E0B050;
  }

  /* ==================================================== base */
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  p { margin: 0; max-width: var(--measure); }
  a { color: inherit; }
  img { max-width: 100%; height: auto; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Straight off her tagline lockup: letterspaced caps, gold. */
  .eyebrow {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .mono {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
  }

  .tk {
    font-family: var(--font-mono);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    color: var(--accent);
    border-bottom: 1px dashed var(--accent);
    white-space: nowrap;
  }

  .page { max-width: var(--page-max); margin-inline: auto; padding-inline: 1.5rem; }

  /* ======================================= surveyor's spine */
  .band { display: grid; grid-template-columns: var(--rail) minmax(0,1fr); position: relative; }
  .band::before {
    content: ""; position: absolute; inset-block: 0;
    left: calc(var(--rail) - 1px); width: 1px; background: var(--rule);
  }
  .band > .rail { position: relative; padding-block: 5rem 0; }
  .band > .rail::after {
    content: ""; position: absolute; top: 5.55rem; right: -0.5rem;
    width: 1rem; height: 1px; background: var(--accent);
  }
  .band > .body { padding: 5rem 0 5rem 2.5rem; min-width: 0; }
  .rail .mono { display: block; text-align: right; padding-right: 1.5rem; line-height: 1; }

  @media (max-width: 44rem) {
    :root { --rail: 0rem; }
    .band { grid-template-columns: 1fr; }
    .band::before, .band > .rail::after { display: none; }
    .band > .rail { padding-block: 3.5rem 0; }
    .rail .mono { text-align: left; padding-right: 0; }
    .band > .body { padding: 0.9rem 0 3.5rem 0; }
  }

  /* ========================================== masthead */
  .masthead {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1.5rem;
    padding-block: 1.5rem; border-bottom: 1px solid var(--rule);
  }
  .logo { height: 92px; width: auto; display: block; }
  .masthead nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
  .masthead nav a {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; text-decoration: none; color: var(--fg-muted);
    transition: color 160ms ease;
  }
  .masthead nav a:hover, .masthead nav a[aria-current] { color: var(--accent); }

  /* ============================================== hero */
  .hero { border-bottom: 1px solid var(--rule); }
  .hero-inner {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
    gap: 4rem; align-items: end; padding-block: 6rem 4.5rem;
  }
  .hero h1 { font-size: var(--t-3xl); margin-bottom: 1.75rem; }
  .hero h1 .rule3 { color: var(--accent); }
  .hero-sub { font-size: var(--t-md); color: var(--fg-muted); max-width: 31rem; }
  .hero-meta {
    display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft);
  }
  @media (max-width: 52rem) {
    .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.5rem 3rem; }
    :root { --t-3xl: 2.4rem; --t-2xl: 1.9rem; }
  }

  .slot {
    background: var(--navy); border: 1px solid var(--rule);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem; position: relative; min-height: 12rem;
  }
  .slot::before {
    content: ""; position: absolute; inset: 0.5rem;
    border: 1px solid rgba(224,176,80,0.4); pointer-events: none;
  }
  .slot-label {
    position: relative; font-family: var(--font-mono); font-size: var(--t-xs);
    letter-spacing: 0.12em; text-transform: uppercase; color: #C8CDD8; line-height: 1.5;
  }
  .slot-portrait { aspect-ratio: 4/5; }
  .slot-wide { aspect-ratio: 16/10; }

  /* =========================================== markets */
  .markets { border-top: 1px solid var(--rule); margin-top: 2.5rem; }
  .market {
    display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 2rem;
    padding-block: 1.75rem; border-bottom: 1px solid var(--rule); align-items: baseline;
  }
  .market h3 { font-size: var(--t-lg); }
  .market p { color: var(--fg-muted); font-size: var(--t-sm); margin-top: 0.4rem; }
  .market-coord {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em;
    color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.6;
  }
  /* A market with no left-column label (coords/years cleared) spans full width
     rather than leaving a 9rem gutter. */
  .market--flat { grid-template-columns: 1fr; }
  @media (max-width: 44rem) { .market { grid-template-columns: 1fr; gap: 0.4rem; } }

  /* ============================================ thesis */
  .thesis { background: var(--bg-invert); color: var(--fg-invert); }
  .thesis .band::before { background: rgba(238,240,244,0.18); }
  .thesis .rail .mono { color: rgba(238,240,244,0.55); }
  .thesis .rail::after { background: var(--gold); }
  .thesis blockquote {
    margin: 0; font-family: var(--font-quote); font-style: italic;
    font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -0.015em; max-width: 24ch;
  }
  .thesis blockquote em { color: var(--gold); }
  .thesis-note { margin-top: 2rem; color: rgba(238,240,244,0.72); max-width: 30rem; }

  /* Her tagline as a real structural element, not a line of type */
  .triad {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 2rem;
  }
  .triad div { background: var(--bg); padding: 1.5rem 1.25rem; }
  .triad h3 { font-size: var(--t-md); margin-bottom: 0.5rem; }
  .triad p { font-size: var(--t-sm); color: var(--fg-muted); }
  @media (max-width: 44rem) { .triad { grid-template-columns: 1fr; } }

  .sec-title { font-size: var(--t-2xl); margin-bottom: 1.25rem; }
  .sec-lede { font-size: var(--t-md); color: var(--fg-muted); }
  .stack { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3.5rem; align-items: start; }
  @media (max-width: 52rem) { .split { grid-template-columns: 1fr; gap: 2rem; } }

  .for-list { list-style: none; margin: 0; padding: 0; }
  .for-list li {
    padding-block: 0.85rem; border-bottom: 1px solid var(--rule-soft);
    display: grid; grid-template-columns: 1.75rem minmax(0,1fr); gap: 0.5rem; font-size: var(--t-sm);
  }
  .for-list li::before { content: "—"; color: var(--accent); font-family: var(--font-mono); }

  /* =========================================== buttons */
  .btn {
    display: inline-block; font-size: var(--t-xs); font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
    padding: 0.9rem 1.6rem; border: 1px solid var(--fg); color: var(--fg);
    background: transparent; cursor: pointer; transition: background 180ms ease, color 180ms ease;
  }
  .btn:hover { background: var(--fg); color: var(--bg); }
  .btn-gold { border-color: var(--accent); background: var(--accent); color: #10131C; }
  .btn-gold:hover { background: transparent; color: var(--accent); }
  .btn-ghost-invert { border-color: rgba(238,240,244,0.45); color: #EEF0F4; }
  .btn-ghost-invert:hover { background: #EEF0F4; color: var(--navy); }

  /* ================================ coaching request */
  .booking {
    display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr);
    gap: 2.5rem; margin-top: 2rem;
    border: 1px solid var(--rule); background: var(--bg); padding: 2rem;
  }
  @media (max-width: 52rem) { .booking { grid-template-columns: 1fr; padding: 1.25rem; gap: 2rem; } }

  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .cal-month { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
  .cal-nav { display: flex; gap: 0.4rem; }
  .cal-nav button {
    width: 2rem; height: 2rem; border: 1px solid var(--rule); background: var(--bg);
    color: var(--fg); cursor: pointer; font-size: var(--t-sm); line-height: 1;
  }
  .cal-nav button:hover { border-color: var(--accent); color: var(--accent); }

  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-dow {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-muted); text-align: center; padding-bottom: 0.4rem;
  }
  .cal-day {
    position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: var(--t-sm); font-variant-numeric: tabular-nums;
    background: var(--bg-panel); border: 1px solid transparent; color: var(--fg-muted);
  }
  .cal-day.empty { background: transparent; }
  .cal-day.free { color: var(--fg); border-color: var(--rule); cursor: pointer; transition: border-color 140ms ease, color 140ms ease; }
  .cal-day.free::after {
    content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--accent);
  }
  .cal-day.free:hover { border-color: var(--accent); color: var(--accent); }
  .cal-day.sel { background: var(--accent); color: #10131C; border-color: var(--accent); font-weight: 600; }
  .cal-day.sel::after { background: #10131C; }

  .cal-key {
    display: flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-muted);
  }
  .cal-key i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; }

  .slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
  .slot-btn {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    padding: 0.5rem 0.7rem; border: 1px solid var(--rule); background: var(--bg);
    color: var(--fg); cursor: pointer; font-variant-numeric: tabular-nums;
  }
  .slot-btn:hover { border-color: var(--accent); color: var(--accent); }
  .slot-btn.on { background: var(--accent); border-color: var(--accent); color: #10131C; font-weight: 600; }

  .field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
  .field label {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
  }
  .field input, .field select, .field textarea {
    padding: 0.7rem 0.8rem; border: 1px solid var(--rule); background: var(--bg);
    color: var(--fg); font-family: var(--font-body); font-size: var(--t-sm); width: 100%;
  }
  .field textarea { resize: vertical; min-height: 5rem; }
  .picked {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
    padding: 0.6rem 0.75rem; border: 1px dashed var(--accent);
  }

  /* ============================================== book */
  .book { background: var(--coal); color: #E9EBEF; }
  .book .band::before { background: rgba(233,235,239,0.16); }
  .book .rail .mono { color: rgba(233,235,239,0.5); }
  .book .rail::after { background: var(--gold); }
  .book-grid { display: grid; grid-template-columns: minmax(0,0.65fr) minmax(0,1.35fr); gap: 3rem; align-items: start; }
  @media (max-width: 52rem) { .book-grid { grid-template-columns: 1fr; gap: 2rem; } }
  .book-cover {
    width: 100%; max-width: 17rem; display: block;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55); border: 1px solid rgba(233,235,239,0.12);
  }
  .book h2 { font-size: var(--t-2xl); }
  .book .sub {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold); margin-top: 0.75rem;
  }
  .book p { color: rgba(233,235,239,0.78); }
  .book .eyebrow { color: var(--gold); }

  /* ========================================== insights */
  .posts { border-top: 1px solid var(--rule); margin-top: 2rem; }
  .post {
    display: grid; grid-template-columns: 7rem minmax(0,1fr) auto; gap: 1.5rem;
    padding-block: 1.4rem; border-bottom: 1px solid var(--rule);
    align-items: baseline; text-decoration: none;
  }
  .post-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); transition: color 160ms ease; }
  .post:hover .post-title { color: var(--accent); }
  .post-kind {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
  }
  @media (max-width: 44rem) { .post { grid-template-columns: 1fr; gap: 0.35rem; } }

  /* ============================================ signup */
  .signup { background: var(--bg-panel); border-block: 1px solid var(--rule); }
  .signup-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; max-width: 32rem; }
  .signup-form input {
    flex: 1 1 16rem; min-width: 0; padding: 0.9rem 1rem;
    border: 1px solid var(--rule); background: var(--bg); color: var(--fg);
    font-family: var(--font-body); font-size: var(--t-sm);
  }
  .signup-form button {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.9rem 1.6rem; border: 1px solid var(--accent); background: var(--accent);
    color: #10131C; cursor: pointer;
  }
  .signup-form button:hover { background: transparent; color: var(--accent); }

  /* ============================================ footer */
  .foot { background: var(--navy-deep); color: #EEF0F4; padding-block: 4rem 3rem; }
  .foot-grid { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; align-items: flex-start; }
  .foot h3 { font-size: var(--t-lg); margin-bottom: 0.75rem; }
  .foot nav { display: flex; flex-direction: column; gap: 0.6rem; }
  .foot nav a {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; color: rgba(238,240,244,0.72); transition: color 160ms ease;
  }
  .foot nav a:hover { color: var(--gold); }
  .foot-fine {
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(238,240,244,0.16);
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em;
    color: rgba(238,240,244,0.45);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

/* ============================================================================
   SITE-ONLY additions — not present in the artifact
   ============================================================================ */

/* Build-phase banner, shown to logged-in users only. Removed at launch
   together with the gate in site/ready.php (§13). */
.build-note {
  background: var(--navy);
  color: #EEF0F4;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
}
:root[data-theme="dark"] .build-note,
.build-note { border-bottom: 1px solid var(--gold); }

/* Wide content scrolls in its own container so the body never scrolls sideways. */
.scroll-x { overflow-x: auto; }

/* ============================================================================
   Edit-this-page shortcut — superusers only, rendered from footer.inc
   ============================================================================

   Navy ground and gold rule, so it reads as site chrome rather than as part of
   the page. Sits above everything, clear of the right edge, and gets out of
   the way on narrow screens where it would otherwise sit on the content.
   ============================================================================ */

.edit-page {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.7rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--navy);
  color: #EEF0F4;

  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;

  box-shadow: 0 6px 20px rgba(12, 30, 72, 0.28);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.edit-page:hover,
.edit-page:focus-visible {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-1px);
}

.edit-page svg { flex: none; }

/* Dark mode already runs a black ground, so navy-on-black loses its edge. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edit-page { background: #131519; }
}
:root[data-theme="dark"] .edit-page { background: #131519; }

@media (max-width: 34rem) {
  .edit-page {
    right: 1rem;
    bottom: 1rem;
    padding: 0.65rem;
  }
  /* Icon only — the label is what makes it wide enough to cover content. */
  .edit-page span { display: none; }
}

@media print { .edit-page { display: none; } }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   FAQ — native <details>, so it works with JS off and stays keyboard operable
   ============================================================================ */

.faq {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.2rem;
  padding-right: 2rem;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -0.012em;
  transition: color 160ms ease;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-md);
  color: var(--accent);
  line-height: 1;
}

.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent); }

.faq .faq-a {
  padding-bottom: 1.4rem;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.faq .faq-a > :first-child { margin-top: 0; }

/* ============================================================================
   Form feedback — API responses, field errors
   ============================================================================ */

.form-status {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  max-width: var(--measure);
}

.form-status:empty { display: none; }
.form-status.is-ok  { color: var(--accent); }
.form-status.is-bad { color: #B3261E; }

@media (prefers-color-scheme: dark) { .form-status.is-bad { color: #F2B8B5; } }
:root[data-theme="dark"] .form-status.is-bad { color: #F2B8B5; }

.field-error {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #B3261E;
}

@media (prefers-color-scheme: dark) { .field-error { color: #F2B8B5; } }
:root[data-theme="dark"] .field-error { color: #F2B8B5; }

[aria-invalid="true"] { border-color: #B3261E !important; }

/* The hidden attribute must beat any inline display value — forms.js hides
   .form-fields on success, and an inline display:flex would otherwise win. */
[hidden] { display: none !important; }

/* ============================================================================
   PROSE — long-form article body (/insights/<slug>/)
   ============================================================================

   The base sets `p { margin: 0 }`, which is right for the homepage bands where
   every paragraph sits in its own component and spacing is the component's job.
   Long-form is the opposite case: hundreds of words of flowing text where the
   rhythm between blocks IS the typography. This restores it, scoped to .prose
   so nothing else on the site shifts.

   Spacing is expressed as margin-top only, and the first child is zeroed, so a
   body starting with any element sits flush against the rail.
   ============================================================================ */

.prose > * { margin-top: 1.35rem; }
.prose > :first-child { margin-top: 0; }

.prose h2 {
  font-size: var(--t-lg);
  margin-top: 3.25rem;
  max-width: var(--measure);
}

.prose h3 {
  font-size: var(--t-md);
  margin-top: 2.5rem;
  max-width: var(--measure);
}

/* An h2 immediately after the rule that ends the previous section would
   otherwise double the gap. */
.prose h2 + p,
.prose h3 + p { margin-top: 1rem; }

.prose strong { font-weight: 600; }

.prose ul, .prose ol {
  max-width: var(--measure);
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.prose blockquote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--fg-muted);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 3rem;
  max-width: var(--measure);
}

.prose a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--accent); }

/* ============================================ store
   The buying path: catalogue grid, product detail, cart, checkout.

   Everything here is built from the same tokens as the rest of the site, so
   the shop reads as part of Wendy's site rather than as a bolted-on cart. No
   framework — the POS register carries its own Bootstrap, but that is a
   staff-only standalone page and its CSS never reaches these pages. */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3rem;
}

.shop-card { display: block; text-decoration: none; color: inherit; }
.shop-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-soft);
  transition: border-color 180ms ease;
}

/* Standalone, not scoped to .shop-card — the product page uses it too, where
   there is no card wrapper. */
.shop-noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: border-color 180ms ease;
}
.shop-card:hover img,
.shop-card:hover .shop-noimg { border-color: var(--accent); }

.shop-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
  margin: 1rem 0 0.35rem;
  transition: color 160ms ease;
}
.shop-card:hover h3 { color: var(--accent); }
.shop-price {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

/* --- product detail --- */
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 52rem) { .product-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.product-shot { width: 100%; display: block; border: 1px solid var(--rule-soft); }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.product-thumbs img {
  width: 4.5rem; height: 4.5rem; object-fit: cover; cursor: pointer;
  border: 1px solid var(--rule-soft); transition: border-color 160ms ease;
}
.product-thumbs img:hover { border-color: var(--accent); }

.product-price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  margin-block: 0.75rem 1.5rem;
}
.product-buy { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-block: 2rem; }
.product-buy .field { margin-bottom: 0; }
.product-buy .field-qty { max-width: 6.5rem; }
.product-buy .field-option { min-width: 14rem; flex: 1 1 14rem; }

/* --- cart + order summary tables --- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 52rem) { .cart-layout { grid-template-columns: 1fr; gap: 2rem; } }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
  text-align: left;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.cart-table td { padding-block: 1.1rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.cart-table th, .cart-table td { padding-right: 1.5rem; }
.cart-table th:last-child, .cart-table td:last-child { padding-right: 0; }
.cart-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Let the title column absorb the slack so the money columns stop touching. */
.cart-table th:first-child, .cart-table td:first-child { width: 100%; }
.cart-table .col-qty   { width: 5.5rem; }
.cart-table .col-money { width: 7rem; white-space: nowrap; }
.cart-table .col-x     { width: 2rem; }
.cart-table input[type="number"] {
  width: 4.5rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-sm);
}
.cart-variant { color: var(--fg-muted); font-size: var(--t-sm); }
.cart-remove {
  background: none; border: 0; cursor: pointer; padding: 0.2rem 0.4rem;
  color: var(--fg-muted); font-size: var(--t-md); line-height: 1;
}
.cart-remove:hover { color: var(--accent); }

.summary { background: var(--bg-panel); border: 1px solid var(--rule-soft); padding: 1.75rem; }
.summary h2 {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 400; margin: 0 0 1.25rem;
}
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; font-variant-numeric: tabular-nums; }
.summary-row.muted { color: var(--fg-muted); font-size: var(--t-sm); }
.summary-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.summary .btn { width: 100%; margin-top: 1.5rem; text-align: center; }

/* --- checkout --- */
.checkout-panel { background: var(--bg-panel); border: 1px solid var(--rule-soft); padding: 2rem; max-width: 34rem; }
.fee-optin { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--accent); margin-block: 1.5rem; }
.fee-optin input { margin-top: 0.2rem; }
.fee-optin label { font-size: var(--t-sm); }
#payment-element { margin-bottom: 1.75rem; }

.store-note {
  background: var(--bg-panel); border-left: 2px solid var(--accent);
  padding: 1rem 1.25rem; margin-block: 1.5rem; font-size: var(--t-sm);
}
.store-err { color: #B3261E; font-size: var(--t-sm); margin-top: 0.9rem; min-height: 1.2em; }
@media (prefers-color-scheme: dark) { .store-err { color: #F2B8B5; } }
:root[data-theme="dark"] .store-err { color: #F2B8B5; }

.store-spin {
  display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.15em;
  border: 2px solid var(--rule); border-top-color: var(--accent);
  border-radius: 50%; animation: storeSpin 900ms linear infinite;
}
@keyframes storeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .store-spin { animation: none; } }

.store-back {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--fg-muted);
}
.store-back:hover { color: var(--accent); }