/* ===========================================================================
   THE REAL BUYER'S GUIDE — shared section stylesheet
   Hawthorne Noir, Ivory Ledger register. See brand-essence-brief.md §8 and §12.

   Every guide section links this file instead of carrying its own copy, so a
   styling fix lands everywhere at once. Sections live flat in the business
   folder next to this file; sync-guide.mjs mirrors both into the site.

   CONTRAST, computed against the audited palette:
     ink on ivory ............ 15.7:1     muted on ivory ......... 6.6:1
     brass-deep on ivory ...... 5.4:1     oxblood on ivory ....... 9.9:1
     control border on ivory .. 3.4:1
   Dark mode swaps ivory->obsidian and re-points brass-deep->brass (7.3:1) and
   oxblood->oxblood-light (4.9:1), so every pairing above holds on both grounds.
   =========================================================================== */

:root {
  --obsidian:#1A1815; --obsidian-2:#24211C;
  --ivory:#F4F1EA; --ivory-2:#E8E4DA;
  --brass:#C9A227; --brass-deep:#7A5F1A;
  --oxblood:#6E1F24; --oxblood-light:#CE666D;
  --ink:#1A1815; --muted:#5A544A;
  --rule:#D8D2C6; --control:#8B8172;

  --display:"Bodoni Moda","Bodoni MT",Didot,Georgia,"Times New Roman",serif;
  --body:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --data:Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ivory:#1A1815; --ivory-2:#24211C;
    --ink:#F4F1EA; --muted:#A69E90;
    --rule:#332F28; --control:#767065;
    --brass-deep:#C9A227;
    /* #D47178, not the #CE666D used elsewhere in the system. Oxblood-light
       clears 4.5:1 on the plain obsidian ground but lands at 4.39:1 on the
       lighter --ivory-2 stripe used for alternating table rows, and both the
       [VERIFY] markers and link hover states sit inside those rows. This value
       holds at 4.9:1 on the stripe and 5.4:1 off it. */
    --oxblood:#D47178;
  }
}

* { box-sizing:border-box; }
body { background:var(--ivory); color:var(--ink); font-family:var(--body);
       font-size:17px; line-height:1.6; margin:0; -webkit-font-smoothing:antialiased; }
.wrap { max-width:820px; margin:0 auto; padding:0 24px 90px; }

/* ---------- masthead ---------- */
.top { display:flex; justify-content:space-between; align-items:center; gap:20px;
       flex-wrap:wrap; padding:28px 0 13px; border-bottom:2px solid var(--brass-deep); }
.top .id { display:flex; align-items:center; gap:13px; min-width:0; }
.top .ch { flex:none; width:44px; height:44px; display:flex; align-items:center;
           justify-content:center; border:1px solid var(--brass-deep); line-height:1;
           font-family:var(--display); font-size:21px; font-weight:600; }
.top .nm { display:block; font-family:var(--display); font-size:17px; font-weight:600; }
.top .lic { display:block; font-size:10.5px; text-transform:uppercase;
            letter-spacing:.11em; color:var(--muted); margin-top:3px; }
.top .brk { text-align:right; font-size:10.5px; text-transform:uppercase;
            letter-spacing:.16em; color:var(--muted); }
.top .brk a { color:inherit; text-decoration:none; display:inline-block; padding:2px 0; }
.top .brk a:hover { color:var(--brass-deep); }
.top .brk .ct { display:block; text-transform:none; letter-spacing:.02em;
                font-size:11px; margin-top:5px; }
@media (max-width:560px) { .top .brk { text-align:left; } }

/* ---------- title block ---------- */
.sect { font-family:var(--data); font-size:11.5px; letter-spacing:.14em;
        text-transform:uppercase; color:var(--muted); margin-top:40px; }
h1 { font-family:var(--display); font-size:clamp(34px,6vw,54px); line-height:1.05;
     letter-spacing:-.01em; margin:10px 0 0; text-wrap:balance; }
.lede { font-size:19px; color:var(--muted); margin-top:16px; max-width:34em; }

/* ---------- body ---------- */
h2 { font-family:var(--display); font-size:clamp(23px,3.4vw,31px); line-height:1.18;
     letter-spacing:-.005em; margin:56px 0 0; text-wrap:balance; }
h3 { font-family:var(--body); font-size:17.5px; font-weight:600; margin:30px 0 0; }
p { margin:14px 0 0; max-width:36em; }
strong { font-weight:600; }
ul { margin:14px 0 0; padding-left:22px; max-width:36em; }
li { margin-bottom:9px; }

/* Body links. Without this they fall back to the UA default blue, which is
   1.9:1 on ivory. Masthead and footer keep their own inherited colour via
   later, heavier selectors. */
.wrap a { color:var(--brass-deep); text-decoration:underline;
          text-underline-offset:2px; text-decoration-thickness:1px; }
.wrap a:hover { color:var(--oxblood); }

.pull { border-left:3px solid var(--brass-deep); padding:4px 0 4px 20px;
        margin:28px 0; font-size:19px; line-height:1.5; max-width:34em; }

/* ---------- freshness / aside panel ---------- */
.fresh { border:1px solid var(--control); padding:16px 20px; margin-top:32px;
         font-size:14.5px; color:var(--muted); }
.fresh b { color:var(--ink); font-weight:600; }
.fresh p:first-child { margin-top:0; }

/* ---------- tables ---------- */
.scroller { overflow-x:auto; margin-top:24px; }
table { border-collapse:collapse; width:100%; font-size:15.5px; min-width:520px; }
th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.11em;
     color:var(--muted); border-bottom:1.5px solid var(--control);
     padding:0 14px 9px 0; font-weight:600; }
td { border-bottom:1px solid var(--rule); padding:12px 14px 12px 0; vertical-align:top; }
td:first-child { font-weight:600; }
tbody tr:nth-child(even) { background:var(--ivory-2); }
td.num { font-family:var(--data); font-variant-numeric:tabular-nums; white-space:nowrap; }
.assume { font-size:13px; color:var(--muted); margin-top:12px; max-width:40em; }

/* ---------- editorial markers ----------
   [VERIFY] boxes. These are internal — they mean "no number goes here until a
   real source provides it" and they get deleted before a buyer sees the page.
   Deliberately NOT nowrap: the longest of them is wider than a phone screen
   and would push the whole layout sideways. */
.v { font-family:var(--data); font-size:12.5px; color:var(--oxblood);
     border:1px solid var(--oxblood); padding:1px 6px; max-width:100%;
     display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

.warn { border:2px solid var(--oxblood); padding:20px 22px; margin-top:28px; }
.warn .h { font-family:var(--display); font-size:20px; margin:0 0 8px; }
.warn p { margin-top:10px; }
.warn p:first-child { margin-top:0; }

/* ---------- checklist rows ---------- */
.check { border:1px solid var(--control); padding:8px 22px 20px; margin-top:24px; }
.check .row { display:grid; grid-template-columns:20px 1fr; gap:14px;
              padding:13px 0; border-bottom:1px solid var(--rule); }
.check .row:last-child { border-bottom:0; }
.check .bx { width:15px; height:15px; border:1.5px solid var(--control); margin-top:5px; }
.check .t { font-weight:600; }
.check .d { color:var(--muted); font-size:15px; margin-top:2px; }

/* ---------- next/prev between sections ---------- */
.nav { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
       margin-top:56px; padding-top:20px; border-top:1px solid var(--rule);
       font-size:14.5px; }
.nav span { color:var(--muted); }

/* ---------- footer ---------- */
.foot { margin-top:66px; padding-top:18px; border-top:1px solid var(--rule);
        font-size:13px; color:var(--muted); }
.foot a { color:inherit; }

@media print {
  @page { margin:0.65in; }
  body { background:#fff; color:#000; font-size:10.5pt; line-height:1.42; }
  .wrap { max-width:none; padding:0; }
  h1 { font-size:26pt; }
  h2 { font-size:14pt; margin-top:22px; page-break-after:avoid; }
  .top { border-color:#000; padding-top:0; }
  .top .ch { width:34px; height:34px; font-size:17px; border-color:#000; }
  .fresh, .warn, .check { border-color:#000; }
  table { min-width:0; font-size:9.5pt; }
  tbody tr:nth-child(even) { background:transparent; }
  .scroller { overflow:visible; }
  tr, .warn, .fresh, .check .row { page-break-inside:avoid; }
  .nav { display:none; }
  a { color:#000; text-decoration:none; }
}