/* ═══════════════════════════════════════════════════════════════════════
   BBA Peptides — editorial pages (blog posts + index, /learn, the legal set:
   terms · privacy · research-use · shipping, and /404). Redesign 2026-10.

   One sheet for every reading page. It composes /bba-ds.css and nothing else:
   every color, size, radius, space and container below is a system token
   (scripts/check_ds_tokens.mjs reports these pages clean; scripts/test_editorial.mjs
   is the gate). The shell (header, menu, footer) and the researcher gate come
   from the system; this file only lays out the reading column.

   Anatomy
     .editorial            the reading column: 680px measure, 17/28 body
     .editorial--wide      the blog index (card grid on the full container)
     .editorial--legal     terms / privacy / research-use / shipping / learn
     .editorial--404       the not-found page (the "Specimen Ledger" plate + rail)
     .crumb .eyebrow h1 .standfirst .byline .body      — a post's head
     .takeaways .cta .faq .ruo .more / .more-card      — a post's tail
     .idx-hero .idx-grid .post-card                    — the index
     .meta .ruo-plate .info-card .grid .card           — legal + learn
     .specimen-plate .specimen .code .monument .links .rail — 404
   Pages opt in with <html class="bba-ds"> and <div class="wrap editorial">.
   ═══════════════════════════════════════════════════════════════════════ */
@import url("/bba-ds.css?v=8130d69785");

/* ── the reading column ─────────────────────────────────────────────── */
.editorial{max-width:calc(var(--measure) + 2 * var(--gutter));margin-inline:auto;padding:0 var(--gutter) var(--s-8);color:var(--c-ink);font:400 var(--t-body)/var(--lh-body) var(--f-sans)}
.editorial--wide{max-width:var(--wrap)}
.editorial a{color:var(--c-signal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.8px}
.editorial a:hover{color:var(--c-ink)}
.editorial img,.editorial svg,.editorial video{max-width:100%;height:auto}
.editorial figure{margin:var(--s-5) 0}
.editorial figure img{display:block;width:100%;border-radius:var(--r-surface);border:.8px solid var(--c-line);background:var(--c-surface-solid)}
.editorial figcaption{margin-top:var(--s-2);font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--c-ink-2)}
.editorial hr{border:0;border-top:.8px solid var(--c-line);margin:var(--s-6) 0}
.editorial code{font:500 var(--t-sm)/1.4 var(--f-mono);background:var(--c-surface-solid);border:.8px solid var(--c-line);border-radius:var(--r-control);padding:0 var(--s-1);overflow-wrap:anywhere}
.editorial .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--s-4)}
.editorial .scroll-x table{margin:0}

/* ── a post's head ──────────────────────────────────────────────────── */
.editorial .crumb{padding:var(--s-5) 0 0;font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2)}
.editorial .crumb a{color:var(--c-ink-2);text-decoration:none}
.editorial .crumb a:hover{color:var(--c-signal);text-decoration:underline}
.editorial article{padding:var(--s-2) 0 0}
.editorial .eyebrow{margin:var(--s-5) 0 var(--s-3);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-signal)}
.editorial h1{margin:0 0 var(--s-3);font:600 var(--t-h1)/1.06 var(--f-sans);letter-spacing:-.025em;text-wrap:balance;color:var(--c-ink)}
.editorial .standfirst,.editorial .lede{margin:0 0 var(--s-4);font:400 var(--t-lg)/1.5 var(--f-sans);color:var(--c-ink-2);text-wrap:pretty}
.editorial .byline{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-5);padding:var(--s-2) 0;border-top:.8px solid var(--c-line);border-bottom:.8px solid var(--c-line);font:400 var(--t-xs)/16px var(--f-mono);color:var(--c-ink-2)}

/* ── prose ──────────────────────────────────────────────────────────── */
.editorial .body{font:400 var(--t-body)/var(--lh-body) var(--f-sans)}
.editorial .body h2,.editorial--legal h2{margin:var(--s-6) 0 var(--s-3);font:600 var(--t-h3)/1.2 var(--f-sans);letter-spacing:-.015em;text-wrap:balance;color:var(--c-ink)}
.editorial .body h3,.editorial--legal h3{margin:var(--s-5) 0 var(--s-2);font:600 var(--t-lg)/1.3 var(--f-sans);letter-spacing:-.01em;color:var(--c-ink)}
.editorial .body p,.editorial--legal p{margin:0 0 var(--s-3);text-wrap:pretty}
.editorial .body ul,.editorial .body ol,.editorial--legal ul,.editorial--legal ol{margin:0 0 var(--s-3);padding-left:var(--s-4)}
.editorial .body li,.editorial--legal li{margin:0 0 var(--s-2)}
.editorial .body li>p{margin:0}
.editorial .body strong,.editorial--legal strong{font-weight:600;color:var(--c-ink)}
.editorial .body p.b{font-weight:600}
.editorial .body table,.editorial--legal table{width:100%;border-collapse:collapse;margin:0 0 var(--s-4);font:400 var(--t-sm)/1.5 var(--f-sans);font-variant-numeric:tabular-nums slashed-zero}
.editorial .body th,.editorial .body td,.editorial--legal th,.editorial--legal td{border:.8px solid var(--c-line);padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.editorial .body th,.editorial--legal th{background:var(--c-surface-solid);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2)}
.editorial .body blockquote{margin:0 0 var(--s-4);padding:var(--s-1) 0 var(--s-1) var(--s-3);border-left:2px solid var(--c-signal);color:var(--c-ink-2)}

/* ── a post's tail ──────────────────────────────────────────────────── */
.editorial .takeaways{margin:var(--s-6) 0;padding:var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface)}
.editorial .takeaways h2{margin:0 0 var(--s-2);font:600 var(--t-lg)/1.3 var(--f-sans);color:var(--c-ink)}
.editorial .takeaways ul{margin:0;padding-left:var(--s-4)}
.editorial .takeaways li{margin:0 0 var(--s-2);font:400 var(--t-body)/1.6 var(--f-sans)}
.editorial .cta{margin:var(--s-6) 0;padding:var(--s-4);background:var(--c-surface-solid);border:.8px solid var(--c-line);border-radius:var(--r-surface)}
.editorial .cta h2{margin:0 0 var(--s-2);font:600 var(--t-lg)/1.3 var(--f-sans);color:var(--c-ink)}
.editorial .cta p{margin:0 0 var(--s-3);color:var(--c-ink-2)}
.editorial .cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-control);background:var(--c-accent);color:var(--c-on-accent);font:600 var(--t-sm)/1.2 var(--f-sans);text-decoration:none;transition:background var(--dur) var(--ease)}
.editorial .cta a:hover{background:var(--c-accent-hover);color:var(--c-on-accent)}
.editorial .faq{margin:var(--s-6) 0}
.editorial .faq h2{margin:0 0 var(--s-3);font:600 var(--t-h3)/1.2 var(--f-sans);letter-spacing:-.015em;color:var(--c-ink)}
.editorial .faq details{padding:var(--s-3) 0;border-bottom:.8px solid var(--c-line)}
.editorial .faq summary{display:flex;gap:var(--s-2);align-items:baseline;min-height:44px;font:600 var(--t-body)/1.5 var(--f-sans);color:var(--c-ink);cursor:pointer;list-style:none}
.editorial .faq summary::-webkit-details-marker{display:none}
.editorial .faq summary::before{content:"+";flex:none;font:500 var(--t-body)/1.5 var(--f-mono);color:var(--c-signal)}
.editorial .faq details[open] summary::before{content:"–"}
.editorial .faq details p{margin:var(--s-2) 0 0 calc(var(--s-3) + var(--s-1));color:var(--c-ink-2)}
.editorial .ruo{margin:var(--s-5) 0 0;padding:var(--s-3);border:.8px solid var(--c-line);border-radius:var(--r-control);font:400 var(--t-xs)/1.6 var(--f-mono);color:var(--c-ink-2)}
.editorial .more{margin:var(--s-6) 0 0;padding-top:var(--s-4);border-top:.8px solid var(--c-line)}
.editorial .more--inline{margin:0 0 var(--s-4);padding-top:0;border-top:0}
.editorial .more h2{margin:0 0 var(--s-3);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.editorial .more-grid{display:grid;gap:var(--s-3)}
@media (min-width:640px){.editorial .more-grid{grid-template-columns:1fr 1fr}}
.editorial .more-card{display:block;padding:var(--s-3) var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface);text-decoration:none;color:var(--c-ink);transition:border-color var(--dur) var(--ease)}
.editorial .more-card:hover{border-color:var(--c-signal);color:var(--c-ink)}
.editorial .more-card b{display:block;margin-bottom:var(--s-1);font:600 var(--t-body)/1.4 var(--f-sans);color:var(--c-ink)}
.editorial .more-card span{font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--c-ink-2)}

/* ── the index ──────────────────────────────────────────────────────── */
.editorial .idx-hero{max-width:var(--measure);padding:var(--s-6) 0 var(--s-2)}
.editorial .idx-hero .eyebrow{margin-top:0}
.editorial .idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-3);padding:var(--s-4) 0 var(--s-6)}
.editorial .post-card{display:flex;flex-direction:column;padding:var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface);text-decoration:none;color:var(--c-ink);transition:border-color var(--dur) var(--ease)}
.editorial .post-card:hover{border-color:var(--c-signal);color:var(--c-ink)}
.editorial .post-card.is-featured{border-color:var(--c-signal)}
.editorial .post-card .k{margin:0 0 var(--s-2);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-signal)}
.editorial .post-card h3{margin:0 0 var(--s-2);font:600 var(--t-lg)/1.25 var(--f-sans);letter-spacing:-.01em;text-wrap:balance;color:var(--c-ink)}
.editorial .post-card p{flex:1;margin:0;font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--c-ink-2);text-wrap:pretty}
.editorial .post-card .rd{margin-top:var(--s-3);font:500 var(--t-xs)/16px var(--f-mono);color:var(--c-signal)}
@media (max-width:639px){.editorial .idx-grid{grid-template-columns:1fr}}

/* ── legal set + learn ──────────────────────────────────────────────── */
.editorial--legal{padding-top:var(--s-6)}
.editorial--legal h1{margin:0 0 var(--s-2)}
.editorial .meta{margin:0 0 var(--s-5);font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--c-ink-2)}
.editorial .meta a{color:var(--c-ink-2)}
.editorial .ruo-plate{margin:var(--s-5) 0;padding:var(--s-3) var(--s-4);background:var(--c-signal-tint);border:.8px solid var(--c-line);border-radius:var(--r-control);font:500 var(--t-xs)/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-signal)}
.editorial .info-card{margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface)}
.editorial .info-card strong{display:block;margin-bottom:var(--s-1);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2)}
.editorial .info-card p{margin:0}
.editorial--legal .lede{max-width:none}
.editorial .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:0 0 var(--s-3)}
@media (max-width:639px){.editorial .grid{grid-template-columns:1fr}}
.editorial .card{display:block;padding:var(--s-3) var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface);text-decoration:none;color:var(--c-ink);transition:border-color var(--dur) var(--ease)}
.editorial .card:hover{border-color:var(--c-signal);color:var(--c-ink)}
.editorial .card b{display:block;margin-bottom:var(--s-1);font:600 var(--t-body)/1.4 var(--f-sans);color:var(--c-ink)}
.editorial .card span{display:block;font:400 var(--t-sm)/1.5 var(--f-sans);color:var(--c-ink-2)}

/* ── 404: the Specimen Ledger ───────────────────────────────────────── */
.specimen-plate{max-width:calc(var(--measure) + 2 * var(--gutter));margin:var(--s-6) auto 0;padding:0 var(--gutter)}
.specimen{position:relative;overflow:hidden;padding:var(--s-5) var(--s-4);background-color:var(--c-surface-solid);background-image:linear-gradient(var(--c-line) .8px,transparent .8px),linear-gradient(90deg,var(--c-line) .8px,transparent .8px);background-size:28px 28px;border:.8px solid var(--c-line);border-radius:var(--r-surface);color:var(--c-ink)}
.specimen::before,.specimen::after{content:"";position:absolute;width:14px;height:14px;border:.8px solid var(--c-ink-2);pointer-events:none}
.specimen::before{top:10px;left:10px;border-right:0;border-bottom:0}
.specimen::after{bottom:10px;right:10px;border-left:0;border-top:0}
.specimen .code{display:inline-block;margin:0 0 var(--s-3);font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c-signal);font-variant-numeric:tabular-nums slashed-zero}
.specimen .monument{margin:0 0 var(--s-2);font:600 var(--t-display)/.92 var(--f-sans);letter-spacing:-.03em;color:var(--c-ink)}
.specimen .monument span{color:var(--c-accent)}
.specimen .spec-copy{margin:0;max-width:40ch;font:400 var(--t-body)/1.55 var(--f-sans);color:var(--c-ink-2)}
.editorial--404{padding-top:var(--s-5)}
.editorial--404 h1{margin:0 0 var(--s-2);font-size:var(--t-h2)}
.editorial--404 .lede{margin:0 0 var(--s-4);font-size:var(--t-body)}
.editorial--404 .links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* system buttons inside the column: the editorial link color must not leak into them */
.editorial .btn,.editorial .btn:hover{text-decoration:none}
.editorial .btn--primary,.editorial .btn--primary:hover{color:var(--c-on-accent)}
.editorial .btn--secondary{color:var(--c-ink)}
.editorial .btn--secondary:hover{color:var(--c-canvas)}
.editorial--404 .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:.8px solid var(--c-line)}
.editorial--404 .rail a{position:relative;display:flex;flex-direction:column;min-height:72px;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-control);color:var(--c-ink);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.editorial--404 .rail a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c-signal);opacity:.45;border-radius:var(--r-control) 0 0 var(--r-control)}
.editorial--404 .rail a:hover{border-color:var(--c-signal);color:var(--c-ink)}
.editorial--404 .rail a:hover::before{opacity:1}
.editorial--404 .rail .k{display:block;margin-bottom:var(--s-2);font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-signal);font-variant-numeric:tabular-nums slashed-zero}
.editorial--404 .rail .t{font:600 var(--t-sm)/1.3 var(--f-sans);text-wrap:balance}
@media (max-width:559px){.specimen-plate{margin-top:var(--s-5)}.specimen{padding:var(--s-4) var(--s-3)}.editorial--404 .rail{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.editorial *,.specimen *{transition:none !important;animation:none !important}}
@media print{.editorial{max-width:none;padding:0}.editorial .cta,.editorial .more,.specimen-plate{display:none}}