/* ═══════════════════════════════════════════════════════════════════════
   TOOLKIT — canonical package tokens only.
   Loaded after assets/brand/tokens.css, which supplies every value here.
   Dark ground, so the --dark-* semantics are the ones in play.
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; scroll-padding-top:92px; }
body { background:var(--ink); color:var(--dark-text-primary); font:var(--text-body);
       overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible { outline:var(--focus-width) solid var(--gold-400);
                 outline-offset:var(--focus-offset); }
.skip { position:absolute; top:-100px; left:var(--space-4); z-index:99; padding:var(--space-3) var(--space-5);
        background:var(--gold-500); color:var(--ink); border-radius:var(--radius-xs); }
.skip:focus { top:var(--space-4); }
#main:focus { outline:none; }
.wrap { max-width:var(--max-width); margin:0 auto; padding-inline:var(--gutter); }

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:50; background:rgba(10,10,12,0.88);
       border-bottom:1px solid var(--dark-border-hairline); }
.nav-in { max-width:var(--max-width); margin:0 auto; padding:var(--space-3) var(--gutter);
          display:flex; align-items:center; gap:var(--space-5); }
.nav-lockup { height:20px; width:auto; }
/* min-width:0 is the important half. A flex item will not shrink below its
   content by default, so five nav links forced .nav-in wider than a phone
   viewport, which widened the document and dragged every section with it.
   The links now scroll inside their own strip instead, and the page itself
   never scrolls sideways. */
.nav-links { margin-left:auto; display:flex; gap:var(--space-5); align-items:center;
             min-width:0; overflow-x:auto; scrollbar-width:none;
             -webkit-overflow-scrolling:touch; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { white-space:nowrap; }
.nav-links a { font:var(--text-small); color:var(--dark-text-secondary); min-height:36px;
               display:inline-flex; align-items:center;
               transition:color var(--duration-standard) var(--ease-standard); }
.nav-links a:hover { color:var(--gold-300); }

/* ── Masthead ──────────────────────────────────────────────────────── */
/* padding-block, not the shorthand: .mast is defined after .wrap at the
   same specificity, so a shorthand with 0 inline silently cancelled
   .wrap padding-inline and ran the masthead into the left edge. */
.mast { padding-block:var(--space-10) var(--space-8); }
.eyebrow { font:var(--text-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
           color:var(--gold-400); margin-bottom:var(--space-4); }
/* The signature 30 degree cut, drawn once as the page enters. */
.rule { width:220px; height:10px; background:var(--gold-600); margin-bottom:var(--space-6);
        clip-path:polygon(5.77px 0,100% 0,calc(100% - 5.77px) 100%,0 100%);
        transform:scaleX(0); transform-origin:left center;
        transition:transform var(--duration-large) var(--ease-standard); }
body.ready .rule { transform:scaleX(1); }
.mast h1 { font-family:var(--font-display); font-weight:600; overflow-wrap:break-word;
           font-size:clamp(39px,5.4vw,61px); line-height:1.04;
           letter-spacing:var(--tracking-display); margin-bottom:var(--space-5); }
.mast p { font:var(--text-lead); color:var(--dark-text-secondary); max-width:68ch;
          margin-bottom:var(--space-4); }
.mast .fine { font:var(--text-small); color:var(--dark-text-secondary); max-width:68ch; }

/* ── Controls ──────────────────────────────────────────────────────── */
.controls { position:sticky; top:57px; z-index:40; background:rgba(10,10,12,0.94);
            border-block:1px solid var(--dark-border-hairline);
            padding:var(--space-4) 0; margin-bottom:var(--space-8); }
.controls-in { max-width:var(--max-width); margin:0 auto; padding-inline:var(--gutter);
               display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; }
.search { flex:1 1 260px; min-width:0; }
.search input { width:100%; min-height:44px; padding:var(--space-3) var(--space-4);
                background:var(--dark-surface-card); color:var(--dark-text-primary);
                border:1px solid var(--dark-border-hairline); border-radius:var(--radius-xs);
                font:var(--text-body);
                transition:border-color var(--duration-standard) var(--ease-standard); }
.search input:hover { border-color:var(--dark-border-strong); }
.search input::placeholder { color:var(--dark-text-secondary); }
.chips { display:flex; gap:var(--space-1); flex-wrap:wrap; }
.chip { min-height:36px; padding:var(--space-2) var(--space-4); font:var(--text-label);
        letter-spacing:.06em; border:1px solid var(--dark-border-hairline);
        border-radius:var(--radius-pill); color:var(--dark-text-secondary);
        transition:border-color var(--duration-standard) var(--ease-standard),
                   color var(--duration-standard) var(--ease-standard); }
.chip:hover { border-color:var(--dark-border-strong); color:var(--gold-300); }
.chip[aria-pressed="true"] { border-color:var(--gold-600); color:var(--gold-300); }
.count { font:var(--text-small); color:var(--dark-text-secondary); white-space:nowrap; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
        gap:var(--space-5); margin-bottom:var(--space-9); }
.card { display:flex; flex-direction:column; gap:var(--space-3);
        padding:var(--space-5); background:var(--dark-surface-card);
        border:1px solid var(--dark-border-hairline); border-radius:var(--radius-md);
        transition:border-color var(--duration-standard) var(--ease-standard); }
.card:hover { border-color:var(--dark-border-strong); }
.card[hidden] { display:none; }
.card-meta { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.tag { font:var(--text-label); letter-spacing:.08em; text-transform:uppercase;
       padding:2px var(--space-2); border-radius:var(--radius-pill);
       border:1px solid var(--dark-border-hairline); color:var(--dark-text-secondary); }
.tag.kind { border-color:var(--gold-700); color:var(--gold-300); }
.card h3 { font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.3; }
.card .sum { font:var(--text-small); color:var(--dark-text-secondary); line-height:1.7; flex:1; }
.card dl { display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-3);
           font:var(--text-small); color:var(--dark-text-secondary); }
.card dt { font-weight:600; color:var(--dark-text-primary); }
.card-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
       padding:var(--space-3) var(--space-5); font:var(--text-label); letter-spacing:.08em;
       text-transform:uppercase; border-radius:var(--radius-xs);
       transition:background-color var(--duration-standard) var(--ease-standard),
                  border-color var(--duration-standard) var(--ease-standard),
                  color var(--duration-standard) var(--ease-standard); }
.btn-solid { background:var(--gold-500); color:var(--ink); }
.btn-solid:hover { background:var(--gold-600); }
.btn-ghost { border:1px solid var(--dark-border-hairline); color:var(--dark-text-secondary); }
.btn-ghost:hover { border-color:var(--dark-border-strong); color:var(--gold-300); }
.btn:active { transform:translateY(1px); }

/* Verification is stated on every card, never implied. */
.verif { font:var(--text-small); color:var(--dark-text-secondary);
         border-top:1px solid var(--dark-border-hairline); padding-top:var(--space-3); }
.verif b { color:var(--gold-300); font-weight:600; }

/* ── Section headings ──────────────────────────────────────────────── */
.sec { padding-top:var(--space-7); }
.sec > h2 { font-family:var(--font-display); font-weight:600; font-size:39px; line-height:1.1;
            letter-spacing:var(--tracking-display); margin-bottom:var(--space-3); }
.sec > p { font:var(--text-body); color:var(--dark-text-secondary); max-width:68ch;
           margin-bottom:var(--space-6); }
.empty { font:var(--text-body); color:var(--dark-text-secondary);
         padding:var(--space-8) 0; text-align:center; }

/* ── Links: outward-pointing, never rehosted ───────────────────────── */
.links { display:grid; gap:var(--space-3); margin-bottom:var(--space-9); }
.link { display:grid; gap:var(--space-2); padding:var(--space-5);
        border:1px solid var(--dark-border-hairline); border-radius:var(--radius-md);
        transition:border-color var(--duration-standard) var(--ease-standard); }
.link:hover { border-color:var(--dark-border-strong); }
.link h3 { font-family:var(--font-display); font-weight:500; font-size:20px; }
.link h3 a:hover { color:var(--gold-300); }
.link .sum, .link .why { font:var(--text-small); color:var(--dark-text-secondary); line-height:1.7; }
.link .why { border-left:2px solid var(--gold-700); padding-left:var(--space-4); }
.lic { font:var(--text-label); letter-spacing:.06em; color:var(--gold-300); }

/* ── The gate ──────────────────────────────────────────────────────── */
.gate { position:fixed; inset:0; z-index:80; display:none;
        align-items:center; justify-content:center; padding:var(--gutter);
        background:rgba(10,10,12,0.72); }
.gate[open] { display:flex; }
.gate-card { width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
             padding:var(--space-7); background:var(--dark-surface-card);
             border:1px solid var(--dark-border-strong); border-radius:var(--radius-md);
             box-shadow:var(--shadow-lg);
             transform:translateY(16px);
             transition:transform var(--duration-large) var(--ease-standard); }
.gate[open] .gate-card { transform:translateY(0); }
.gate h2 { font-family:var(--font-display); font-weight:600; font-size:25px;
           margin-bottom:var(--space-3); }
.gate .lede { font:var(--text-small); color:var(--dark-text-secondary); line-height:1.7;
              margin-bottom:var(--space-5); }
.field { display:grid; gap:var(--space-2); margin-bottom:var(--space-4); }
.field label { font:var(--text-label); letter-spacing:var(--tracking-label);
               text-transform:uppercase; color:var(--dark-text-secondary); }
.field input, .field select { min-height:44px; padding:var(--space-3) var(--space-4);
       background:var(--ink); color:var(--dark-text-primary); font:var(--text-body);
       border:1px solid var(--dark-border-hairline); border-radius:var(--radius-xs);
       transition:border-color var(--duration-standard) var(--ease-standard); }
.field input:hover, .field select:hover { border-color:var(--dark-border-strong); }
/* The honeypot. Hidden from people, offered to bots. Not display:none,
   because some bots skip those; off-screen and out of the tab order. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.gate-actions { display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.gate-msg { font:var(--text-small); line-height:1.7; margin-top:var(--space-4);
            padding:var(--space-3) var(--space-4); border-radius:var(--radius-xs);
            border:1px solid var(--dark-border-hairline); color:var(--dark-text-secondary); }
.gate-msg[data-tone="ok"] { border-color:var(--gold-700); color:var(--gold-300); }
.gate-msg:empty { display:none; }
.consent { font:var(--text-small); color:var(--dark-text-secondary); line-height:1.7; }
.consent a { color:var(--gold-300); text-decoration:underline; }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--dark-border-hairline); margin-top:var(--space-9);
        padding:var(--space-8) 0 var(--space-9); }
.foot-in { max-width:var(--max-width); margin:0 auto; padding-inline:var(--gutter);
           display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:center; }
.foot img { height:16px; width:auto; }
.foot p { font:var(--text-small); color:var(--dark-text-secondary); }
.foot nav { margin-left:auto; display:flex; gap:var(--space-5); }
.foot nav a { font:var(--text-small); color:var(--dark-text-secondary); }
.foot nav a:hover { color:var(--gold-300); }

@media (max-width:760px) {
  .nav-links { gap:var(--space-4); }
  .controls { top:53px; }
  .grid { grid-template-columns:1fr; }
  .foot nav { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { animation-duration:1ms !important; transition-duration:1ms !important; }
}