/* DroneWorthy blog — shared article styles. Poppins headings + Inter body (self-hosted via
   ../fonts.css). Tuned for long-form reading.

   🔴 THE PALETTE IS NO LONGER THIS FILE'S OWN — 2026-08-13, LANE DWCHROME (register row 387,
   adopting row 378). Every name below is now an ALIAS onto `design-system/tokens.css`, which is the
   declared source of truth for colour on this property. The eleven literals that used to sit here
   were the last private palette on a public surface, and they were the OLD Sky-Blue system: `--acc`
   was the old Sky-Blue literal, the exact colour row 348 measured at 4.28:1 and row 354 could only
   fix on the BUTTON. Fixing one call site of a wrong palette leaves the palette wrong.

   ⛔ AND THE LITERALS ARE NOT QUOTED HERE, INCLUDING THE DEAD ONES. This file is copied into
   `public/` verbatim, and `scripts/test-design-tokens.mjs` counts a hex anywhere in it — which is
   the property that guards this change: the surface's baseline is ZERO, so re-authoring ANY colour
   here, in a rule or in a comment about a rule, is a build failure. Naming the old value in prose
   would spend that guard on documentation. `design-system/tokens.css` and git history have them.

   ⭐ WHY THIS IS SAFE NOW AND WAS NOT LAST WEEK: a var() alias is only as good as the file that
   defines its target, and until 2026-08-13 the 30 blog pages loaded NO `tokens.css` — every
   `var(--dw-*)` here would have resolved to nothing. Row 374 made the tokens ride with the injected
   chrome and gated it (`build-site.mjs` §5c/§5c-ii), so all 73 chrome-carrying pages now define
   them. This is what that gate opened.

   ⚠️ THE ALIAS NAMES ARE KEPT ON PURPOSE. Rewriting 90 rules to say `var(--dw-ink)` inline would be
   a bigger diff with no new property: one indirection here means one place to re-point, and the
   local names still read as what they are used for. What changed is that nothing in this file
   AUTHORS a colour any more.

   ⚠️ INTERACTIVE IS AMBER, and that is the system's semantic, not a repaint for its own sake:
   `--dw-accent` IS the one signal accent (tokens.css §"The one signal accent"), the blog's own
   `.btn-a` has painted with it since row 354, and leaving links blue kept two accents on one page. */
:root{
  --bg:   var(--dw-bg);            /* page */
  --bg2:  var(--dw-surface);       /* cards, the CTA well */
  --line: var(--dw-line);          /* UI boundaries — an affordance, so never --dw-line-inset */
  --ink:  var(--dw-ink);
  --dim:  var(--dw-dim);           /* metadata, secondary copy */
  --acc:  var(--dw-accent);        /* links, kickers, the CTA border */
  --acc2: var(--dw-accent-quiet);  /* the held-back hue: hover fills */
  --amber:var(--dw-accent);        /* the "cleared" spark and the signal accent are one colour now */
  --good: var(--dw-good);
  --bad:  var(--dw-bad);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Inter','Segoe UI',system-ui,sans-serif;line-height:1.7;font-size:1.05rem}
h1,h2,h3,h4,.logo,.amt{font-family:'Poppins','Inter',system-ui,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

/* top nav */
.nav{border-bottom:1px solid var(--line);padding:16px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav img{height:30px;width:auto;border-radius:7px}
.nav .links a{color:var(--dim);font-size:.9rem;font-weight:600;margin-left:18px}
.nav .links a:hover{color:var(--acc);text-decoration:none}

/* article shell */
article{padding:40px 0 10px}
.kick{color:var(--acc);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800;margin-bottom:12px}
article h1{font-size:2.3rem;line-height:1.15;letter-spacing:-.5px;margin-bottom:14px}
.meta{color:var(--dim);font-size:.88rem;margin-bottom:26px}
.lede{font-size:1.2rem;color:var(--ink);margin-bottom:26px;line-height:1.6}
article h2{font-size:1.55rem;margin:38px 0 12px;letter-spacing:-.3px}
article h3{font-size:1.2rem;margin:26px 0 8px}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 18px 22px}
article li{margin-bottom:8px}
article strong{color:var(--ink)}

/* table of contents */
.toc{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:0 0 30px}
.toc .kick{margin-bottom:8px}
.toc ol{margin:0 0 0 18px}
.toc li{margin-bottom:4px}
.toc a{color:var(--ink)}

/* data table */
.tbl{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:.98rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.tbl th{background:var(--dw-surface-2);font-family:'Poppins';font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.tbl tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* callout boxes */
.box{border:1px solid var(--line);border-left:4px solid var(--acc);background:var(--bg2);border-radius:10px;padding:16px 20px;margin:22px 0}
.box.tip{border-left-color:var(--good)}
.box.trap{border-left-color:var(--amber)}
.box .bh{font-family:'Poppins';font-weight:700;font-size:.95rem;margin-bottom:6px}
.box.trap .bh{color:var(--amber)}
.box.tip .bh{color:var(--good)}

/* inline CTA band */
.cta{background:linear-gradient(180deg,var(--bg2),var(--dw-bg));border:1px solid var(--acc);border-radius:14px;padding:26px 24px;margin:34px 0;text-align:center}
.cta h3{font-size:1.35rem;margin-bottom:8px}
.cta p{color:var(--dim);margin-bottom:16px}
/* 🔴 THE BUTTONS ARE THE ONE PART OF THIS PRE-TOKENS STYLESHEET THAT NOW REFERENCES THE DESIGN
   SYSTEM, AND THE SPLIT IS DELIBERATE. `.btn-a` was `--acc` (the old Sky Blue) on white — measured
   4.28:1 against the 4.5:1 floor, live on all 30 blog pages, the last known failing button set on
   the property (row 348 found it and could not take it). Neither half of the old pair fixes it:
   white on it is 4.28, and the ruled dark ink on it is 4.41 — both short. The old hover fill,
   already in this file, does clear it at 6.38 — but then the hover
   state has nowhere darker to go inside this palette, so the fix would need a colour nobody has
   ruled. So these two rules take the pairing that IS ruled and that `landing/index.html` already
   ships: `--dw-on-accent` ink on the `--dw-accent` fill, 9.05:1, with `--dw-accent-quiet` on
   hover, 6.02:1. `/assets/tokens.css` is linked from every blog page for exactly these rules.
   ✅ THE REST OF THE PALETTE IS NO LONGER UNTOUCHED, AND THE MEASUREMENT THIS COMMENT USED TO
   REPORT IS CLOSED HERE RATHER THAN RESTATED. It read: *"`a{color:var(--acc)}` is 4.08:1 on `--bg`
   — every body link on every blog page. Reported, not fixed."* Issue `part107-tutor#2` was the gate
   it deferred to; row 374 closed that issue at the injector, so the deferral expired. `--acc` is now
   `var(--dw-accent)` and the same link measures **9.05:1** on `--bg` (amber on graphite), and
   **8.53:1** on `--bg2` where the CTA and callouts put it. ⭐ The same calculator reproduces the
   old **4.08:1** for the Sky-Blue-on-navy pair exactly, so the new number is a reading and not a
   claim — a positive control on the instrument before the result it produced.
   See the `:root` block at the top of this file. These two rules are no longer the only ones here
   that reference the design system; they are simply the ones that got there first. */
.btn{display:inline-block;padding:13px 24px;border-radius:9px;font-weight:700;font-size:1rem;cursor:pointer;border:1px solid var(--line)}
.btn-a{background:var(--dw-accent);color:var(--dw-on-accent);border-color:var(--dw-accent);box-shadow:0 6px 20px rgba(242,163,29,.30)}
.btn-g{background:transparent;color:var(--ink)}
.btn-a:hover{background:var(--dw-accent-quiet);border-color:var(--dw-accent-quiet);text-decoration:none}
.btn-g:hover{border-color:var(--dw-accent);color:var(--dw-accent);text-decoration:none}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* email capture */
.sub{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.sub input[type=email]{flex:1;min-width:220px;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--dw-surface);color:var(--ink);font-size:1rem}
.submsg{min-height:1.2em;margin-top:10px;font-size:.9rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* FAQ */
.faq{margin:10px 0}
.faq details{border:1px solid var(--line);border-radius:10px;padding:2px 18px;margin-bottom:10px;background:var(--bg2)}
.faq summary{font-family:'Poppins';font-weight:600;cursor:pointer;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--acc);font-weight:800;margin-right:10px}
.faq details[open] summary::before{content:"－"}
.faq details p{padding:0 0 14px;color:var(--dim)}

/* related + footer */
.related{margin:36px 0}
.related a{display:block;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px;color:var(--ink);font-weight:600}
.related a:hover{border-color:var(--acc);text-decoration:none}
.related a span{display:block;color:var(--dim);font-weight:400;font-size:.9rem;margin-top:2px}
footer{padding:34px 0;color:var(--dim);font-size:.85rem;text-align:center;border-top:1px solid var(--line);margin-top:20px}
footer a{color:var(--dim)}
footer .disc{max-width:640px;margin:10px auto 0}

@media(max-width:560px){article h1{font-size:1.85rem}.lede{font-size:1.08rem}article{padding:26px 0 6px}}