/* ============================================================================
   ARKHAM LABS — design system
   Paste into Elementor → Site Settings → Custom CSS (or Additional CSS).

   No build step, no framework, no JavaScript required by any rule here.
   Everything is CSS custom properties + plain selectors.

   CONTENTS
     1. Fonts
     2. Global tokens          --serif / --sans / --mono, scales, layout
     3. Type scale             --fs-*   (11 steps, use these, not raw px)
     4. Spacing scale          --sp-*   (10 steps)
     5. Band palettes          .dark .deep .light .white  (+ light-theme flip)
     6. Base elements
     7. Layout                 .band .inner .readgrid .hero-grid
     8. Typography components  .display .sec .kicker .m .body-lg .verdict
     9. Buttons                .btn .btn.ghost .tlink            (+ states)
    10. Evidence chip          4 grades + floor variant
    11. Cards                  .fcard .acard .pcard .famcard .refblock
    12. Data                   .glance .dtable .statrow .fstrip .spread
    13. Long-form              .gsec .toc .cite .lim .reflist .relguides
    14. Notices and referral   .notice .fineprint .verify
    15. Library table          .lib .filters
    16. Social tiles           .tile  (4:5, export at 1080×1350)
    17. Footer
    18. Print
   ========================================================================= */

/* 1 ---------------------------------------------------------------- fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,200..600;1,6..72,200..600&display=swap');

/* 2 --------------------------------------------------------------- tokens */
:root{
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 3 — type scale. Every size in the system is one of these. */
  --fs-3xs:9px;    /* tile micro-labels only */
  --fs-2xs:10px;   /* mono labels, table headers, pills */
  --fs-xs:11px;    /* kickers, buttons, nav, contents rail */
  --fs-sm:13px;    /* mono data values, captions */
  --fs-base:15px;  /* secondary body, card body, fine print */
  --fs-md:17px;    /* body copy — the default reading size */
  --fs-lg:19px;    /* lead paragraphs, verdicts */
  --fs-xl:22px;    /* card titles, h3 */
  --fs-2xl:27px;   /* large figures, refblock titles */
  --fs-3xl:34px;   /* statrow figures */
  --fs-h2:clamp(30px,3.6vw,44px);
  --fs-h1:clamp(38px,5.1vw,62px);

  --lh-tight:1.06;  /* display */
  --lh-snug:1.25;   /* headings, card titles */
  --lh-body:1.62;   /* body copy */
  --lh-loose:1.72;  /* long-form prose */
  --tracking-label:.15em;   /* uppercase mono labels */
  --tracking-kicker:.19em;  /* kickers */

  /* 4 — spacing scale */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:30px; --sp-7:40px; --sp-8:54px; --sp-9:72px;
  --sp-band:clamp(64px,8.5vw,116px);   /* vertical rhythm between bands */

  /* layout */
  --maxw:1240px;
  --gutter:clamp(20px,4vw,48px);
  --measure:66ch;          /* long-form reading column */
  --radius:4px;            /* the only radius in the system */
  --hairline:1px;
}

/* 5 ------------------------------------------------------------- palettes
   Bands are full-bleed colour sections. Put one of these four classes on a
   section and every component inside it inherits the right colours.
   Never hard-code a colour on a component — always use the band tokens.     */
.dark{
  --bg:#0e141a; --fg:#ccd7e0; --head:#e8e2d6; --mute:#8ba0b3;
  --hair:rgba(255,255,255,.11); --hair2:rgba(255,255,255,.06);
  --card:#17212b; --cardhair:rgba(255,255,255,.12);
  --accent:#e8795c; --accent-soft:rgba(232,121,92,.16); --accent2:#3fc6a8;
  --c-pre:#7fa8cc; --c-early:#3fc6a8; --c-approved:#a998ee; --c-mixed:#e3ac48;
  --btnfg:#0e141a;
}
.deep{
  --bg:#070c11; --fg:#c4d0da; --head:#e8e2d6; --mute:#8ba0b3;
  --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.05);
  --card:#111a22; --cardhair:rgba(255,255,255,.10);
  --accent:#e8795c; --accent-soft:rgba(232,121,92,.16); --accent2:#3fc6a8;
  --c-pre:#7fa8cc; --c-early:#3fc6a8; --c-approved:#a998ee; --c-mixed:#e3ac48;
  --btnfg:#070c11;
}
.light{
  --bg:#eaedf1; --fg:#39464f; --head:#0f1720; --mute:#5b6b79;
  --hair:#d7dee6; --hair2:#e2e7ee;
  --card:#ffffff; --cardhair:#dfe5ec;
  --accent:#b3543a; --accent-soft:#f7e8e3; --accent2:#0e7d6b;
  --c-pre:#3d6d99; --c-early:#0e7d6b; --c-approved:#5f51bd; --c-mixed:#95651a;
  --btnfg:#ffffff;
}
.white{
  --bg:#ffffff; --fg:#39464f; --head:#0f1720; --mute:#5b6b79;
  --hair:#e2e7ed; --hair2:#eef1f5;
  --card:#f6f8fa; --cardhair:#e2e7ed;
  --accent:#b3543a; --accent-soft:#f7e8e3; --accent2:#0e7d6b;
  --c-pre:#3d6d99; --c-early:#0e7d6b; --c-approved:#5f51bd; --c-mixed:#95651a;
  --btnfg:#ffffff;
}
/* Light theme flips the dark bands to paper and keeps the band rhythm. */
:root[data-theme="light"] .dark{
  --bg:#ffffff; --fg:#39464f; --head:#0f1720; --mute:#5b6b79;
  --hair:#e2e7ed; --hair2:#eef1f5; --card:#f6f8fa; --cardhair:#e2e7ed;
  --accent:#b3543a; --accent-soft:#f7e8e3; --accent2:#0e7d6b;
  --c-pre:#3d6d99; --c-early:#0e7d6b; --c-approved:#5f51bd; --c-mixed:#95651a;
  --btnfg:#ffffff;
}
:root[data-theme="light"] .deep{
  --bg:#f1f4f7; --fg:#39464f; --head:#0f1720; --mute:#5b6b79;
  --hair:#dae1e9; --hair2:#e6eaf0; --card:#ffffff; --cardhair:#e2e7ed;
  --accent:#b3543a; --accent-soft:#f7e8e3; --accent2:#0e7d6b;
  --c-pre:#3d6d99; --c-early:#0e7d6b; --c-approved:#5f51bd; --c-mixed:#95651a;
  --btnfg:#ffffff;
}
:root[data-theme="light"] .light{--bg:#f1f4f7}

/* 6 --------------------------------------------------------------- base */
body{
  margin:0;background:#0e141a;color:#ccd7e0;
  font-family:var(--sans);font-size:var(--fs-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="light"] body{background:#fff;color:#39464f}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 7 -------------------------------------------------------------- layout */
.band{background:var(--bg);color:var(--fg);padding:var(--sp-band) 0}
.band.tight{padding:clamp(40px,5vw,64px) 0}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.readgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 60px;align-items:start}
@media (max-width:980px){
  .hero-grid,.readgrid{grid-template-columns:minmax(0,1fr)}
  .readgrid .toc{display:none}
}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1080px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid3,.grid4{grid-template-columns:minmax(0,1fr)}}

/* atmosphere: lattice ground + two soft washes. Hero and feature bands only. */
.band.atmos{position:relative;overflow:hidden;isolation:isolate}
.band.atmos::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(to right,var(--hair2) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--hair2) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
}
.band.atmos::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 58% at 76% 38%,var(--accent-soft),transparent 70%),
             radial-gradient(ellipse 40% 50% at 12% 78%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 70%);
}

/* 8 ---------------------------------------------------------- typography */
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--head);font-family:var(--serif);font-optical-sizing:auto}
p{margin:0 0 var(--sp-4)}
strong{font-weight:700;color:var(--head)}

.display{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.022em;font-weight:300;text-wrap:balance}
h2.sec{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;font-weight:300}
/* The thesis clause: the one phrase carrying the argument, italic in the accent. */
.display em,h2.sec em,.feature h3 em{font-style:italic;color:var(--accent);font-weight:300}
h3{font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:-.012em}

.kicker{
  display:block;margin:0 0 var(--sp-5);font-family:var(--mono);
  font-size:var(--fs-xs);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--accent);
}
.kicker::before{content:"// ";opacity:.65}
.kicker.rule{color:var(--mute);display:flex;align-items:center;gap:14px}
.kicker.rule::before{content:"";width:34px;height:1px;background:var(--mute);flex:none;opacity:.6}

.m{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.body-lg{font-size:var(--fs-lg);line-height:1.68;max-width:58ch}
.muted{color:var(--mute)}
.tcap{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute);margin:0 0 var(--sp-3)}

/* The verdict: editorial judgement, visually separated from reported findings. */
.verdict{
  margin:0 0 var(--sp-6);padding:2px 0 2px 20px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:var(--fs-lg);line-height:1.5;
  color:var(--head);max-width:60ch;
}
.finding{margin:0 0 var(--sp-2)}
.finding > b,.finding > strong{color:var(--head)}

/* 9 ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;padding:14px 22px;border-radius:0;
  border:1px solid var(--accent);background:var(--accent);color:var(--btnfg);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn.ghost{background:transparent;color:var(--head);border-color:var(--hair)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--head);background:var(--head);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.tlink{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-soft);padding-bottom:3px;
}
.tlink:hover,.tlink:focus-visible{border-bottom-color:var(--accent)}

/* 10 -------------------------------------------------------- evidence chip
   Four grades. Categorical colours at matched lightness — none reads as a
   better score than another. The mark and the word carry the meaning; the
   colour only groups. Never reorder these as a ranking.                     */
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.13em;
  text-transform:uppercase;padding:6px 11px;white-space:nowrap;
  color:var(--head);border:1px solid var(--hair);border-left:2px solid var(--cat,var(--hair));
}
.chip .mk{color:var(--cat,var(--accent));font-weight:600}
.chip .fact{
  border-left:1px solid var(--hair);margin-left:.7em;padding-left:.7em;
  color:var(--mute);letter-spacing:.04em;text-transform:none;
}
.chip[data-g="pre"]     {--cat:var(--c-pre)}       /* ◦  Preclinical      */
.chip[data-g="early"]   {--cat:var(--c-early)}     /* +  Early Clinical   */
.chip[data-g="approved"]{--cat:var(--c-approved)}  /* §  Approved Pharma  */
.chip[data-g="mixed"]   {--cat:var(--c-mixed)}     /* ≠  Mixed Evidence   */
/* "A floor, not a finding" — graded Preclinical only because nothing is lower. */
.chip[data-floor]{border-left-style:dashed}
.floortag{
  margin-left:.7em;padding:2px 6px;border:1px dashed var(--accent);
  color:var(--accent);font-size:8.5px;letter-spacing:.14em;
}
.chipset{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:var(--sp-2) 0 var(--sp-5)}

/* 11 --------------------------------------------------------------- cards */
.acard,.pcard,.refblock,.statpanel,.famcard,.fcard{border-radius:var(--radius)}
.fcard{
  background:var(--card);border:1px solid var(--cardhair);
  border-top:2px solid var(--cat,var(--accent));padding:clamp(24px,3vw,34px);
  transition:opacity .34s ease,border-top-color .34s ease;
}
.fcard[data-g="pre"]{--cat:var(--c-pre)} .fcard[data-g="early"]{--cat:var(--c-early)}
.fcard[data-g="approved"]{--cat:var(--c-approved)} .fcard[data-g="mixed"]{--cat:var(--c-mixed)}
.fcard.swap{opacity:.12}                    /* mid cross-fade */
.fcard-top{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--hair2)}
.fcard h3{font-size:clamp(28px,3vw,36px);letter-spacing:-.02em;margin:var(--sp-5) 0 var(--sp-3);line-height:1.08}
.fcard-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5);padding-top:20px;border-top:1px solid var(--hair2)}

.acard{
  background:var(--card);border:1px solid var(--cardhair);padding:26px 24px 22px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
}
.acard:hover,.acard:focus-visible{border-color:var(--accent)}
.acard.feat{border-top:2px solid var(--accent)}
.acard h3{font-size:21px;line-height:1.24;margin:var(--sp-3) 0 var(--sp-3)}
.acard p{font-size:var(--fs-base);color:var(--fg);margin:0 0 var(--sp-5)}
.acard-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--hair2)}
.acard-foot .ar{color:var(--accent);font-family:var(--mono);font-size:14px}

.pcard{background:var(--card);border:1px solid var(--cardhair);padding:30px 26px 28px;display:flex;flex-direction:column}
.pcard .gly{font-family:var(--mono);font-size:20px;color:var(--accent);line-height:1;margin-bottom:var(--sp-5)}
.pcard p{font-size:var(--fs-base);color:var(--fg);margin:0 0 var(--sp-5)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.pill{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);padding:5px 9px;white-space:nowrap}

.famcard{background:var(--card);border:1px solid var(--cardhair);padding:28px 26px 26px;display:flex;flex-direction:column}
.famletter{font-family:var(--serif);font-size:40px;line-height:.8;color:var(--accent);letter-spacing:-.03em;flex:none}
.famnote{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--hair2);font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.5;color:var(--head)}

/* 12 ----------------------------------------------------------------- data */
/* .glance — the "Evidence at a glance" card. Label/value, first row emphasised. */
.glance{border:1px solid var(--hair);margin:0 0 var(--sp-2)}
.glance > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);border-bottom:1px solid var(--hair2)}
.glance > div:last-child{border-bottom:0}
.glance dt{margin:0;padding:13px 16px;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-right:1px solid var(--hair2);display:flex;align-items:center}
.glance dd{margin:0;padding:13px 16px;font-size:15.5px;line-height:1.5}
.glance .hd{background:var(--card)}
.glance .hd dt{color:var(--head)}
@media (max-width:620px){
  .glance > div{grid-template-columns:minmax(0,1fr)}
  .glance dt{border-right:0;border-bottom:1px solid var(--hair2);padding-bottom:6px}
}

.tw{overflow-x:auto;border-top:1px solid var(--hair)}   /* wide tables scroll, page never does */
.dtable{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
.dtable th{text-align:left;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--mute);padding:13px 18px 12px 0;border-bottom:1px solid var(--hair)}
.dtable td{padding:14px 18px 14px 0;border-bottom:1px solid var(--hair2);vertical-align:top;font-size:15.5px}
.dtable td.num{font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap;color:var(--head)}
.dtable td.num.z{color:var(--accent)}     /* a zero or an absence */

.statrow{border-top:1px solid var(--hair)}
.statrow > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--hair)}
.statrow dt{margin:0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute)}
.statrow dd{margin:0;font-family:var(--serif);font-size:var(--fs-3xl);line-height:1;color:var(--head);letter-spacing:-.02em;text-align:right}
.statrow dd.flag{color:var(--accent)}     /* zero / none / not identified */
.statrow dd small{display:block;font-family:var(--sans);font-size:12px;color:var(--mute);letter-spacing:0;margin-top:var(--sp-2);line-height:1.5}
.statpanel{background:var(--card);border:1px solid var(--cardhair);padding:clamp(22px,3vw,34px)}
.statpanel .statrow{border-top:0}
.statpanel .statrow > div:last-child{border-bottom:0}

.fstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hair);margin:6px 0 0}
.fstrip > div{padding:15px 16px;border-right:1px solid var(--hair)}
.fstrip > div:last-child{border-right:0}
.fstrip dt{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 9px}
.fstrip dd{margin:0;font-family:var(--serif);font-size:var(--fs-2xl);line-height:1;color:var(--head);letter-spacing:-.01em}
.fstrip dd.flag{color:var(--accent)}
@media (max-width:520px){
  .fstrip{grid-template-columns:minmax(0,1fr)}
  .fstrip > div{border-right:0;border-bottom:1px solid var(--hair)}
  .fstrip > div:last-child{border-bottom:0}
}

/* grade-spread bar, used on family cards */
.spread{display:flex;height:7px;margin:0 0 10px;overflow:hidden}
.spread i{display:block;height:100%}
.spreadkey{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.spreadkey span{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.spreadkey i{width:7px;height:7px;flex:none}

/* 13 ------------------------------------------------------------ long-form */
.prose{max-width:var(--measure);font-size:17.5px;line-height:var(--lh-loose)}
.gsec{padding:0 0 var(--sp-8);position:relative}
.gsec h2{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--accent);font-weight:500;
  padding-bottom:11px;border-bottom:1px solid var(--hair);
  margin:0 0 var(--sp-5);scroll-margin-top:110px;
}
.gsec h3{font-size:21px;line-height:var(--lh-snug);letter-spacing:-.012em;color:var(--head);margin:var(--sp-7) 0 var(--sp-3)}
.gsec h3:first-of-type{margin-top:var(--sp-5)}

/* citation cluster: [12,26] renders as one superscript, each number linked */
.cite{font-family:var(--mono);font-size:.58em;vertical-align:super;line-height:0;letter-spacing:.02em;white-space:nowrap;padding-left:.12em}
.cite a{color:var(--accent);text-decoration:none}
.cite a:hover,.cite a:focus-visible{text-decoration:underline}
.cite .sep{color:var(--mute);padding:0 .12em}

.toc{position:sticky;top:96px}
.toc .lab{display:block;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.17em;text-transform:uppercase;color:var(--mute);padding-bottom:10px;border-bottom:1px solid var(--hair);margin-bottom:var(--sp-3)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.toc a{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--mute);text-decoration:none;display:flex;gap:10px}
.toc a:hover,.toc a:focus-visible{color:var(--head)}
.toc li[data-cur] a{color:var(--accent)}     /* set by scroll position */

.lim{margin:0;padding:0;list-style:none;counter-reset:l}
.lim li{counter-increment:l;position:relative;padding-left:38px;margin:0 0 18px}
.lim li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--mono);font-size:.8em;color:var(--accent)}

.dashlist{list-style:none;padding:0;margin:0 0 var(--sp-5)}
.dashlist li{position:relative;padding-left:24px;margin-bottom:13px}
.dashlist li::before{content:"—";position:absolute;left:0;color:var(--accent)}

.reflist{list-style:none;margin:0;padding:0;counter-reset:r}
.reflist li{counter-increment:r;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-base);line-height:1.55}
.reflist li::before{content:counter(r);font-family:var(--mono);font-size:11.5px;color:var(--mute);padding-top:.3em}
.reflist p{margin:0}
.reflist .pmid{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);text-decoration:none;letter-spacing:.04em}
.reflist .pmid:hover{text-decoration:underline}

.relguides{border-top:1px solid var(--hair);padding-top:var(--sp-5);margin:0 0 var(--sp-7)}
.relguides ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.relguides li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:14px;align-items:baseline}
.relguides a{font-family:var(--serif);font-size:18px;color:var(--head);text-decoration:none;white-space:nowrap}
.relguides a:hover,.relguides a:focus-visible{color:var(--accent)}
.relguides span{color:var(--mute);font-size:var(--fs-base);line-height:1.5}
@media (max-width:620px){.relguides li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* 14 --------------------------------------------------- notices + referral
   Disclosure sits adjacent to the link it discloses, never in a footer.     */
.notice{border-left:2px solid var(--accent);background:var(--accent-soft);padding:22px 26px}
.notice .lab{display:block;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
.notice p{margin:0;max-width:70ch}
.notice p + p{margin-top:var(--sp-3)}

.refblock{background:var(--card);border:1px solid var(--cardhair);border-top:2px solid var(--accent);padding:clamp(24px,3vw,36px)}
.refblock h3{font-size:29px;margin:var(--sp-3) 0 var(--sp-3)}
.refblock p{max-width:58ch;font-size:16px}
.fineprint{display:block;margin-top:18px;padding-top:var(--sp-4);border-top:1px solid var(--hair2);color:var(--mute);font-size:14px;line-height:1.6;max-width:66ch}

.verify{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hair);margin:var(--sp-5) 0}
.verify > div{padding:13px 15px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.verify dt{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.verify dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--head)}
@media (max-width:620px){.verify{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 15 -------------------------------------------------------- library table */
.filters{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;padding-bottom:var(--sp-5);border-bottom:1px solid var(--hair)}
.fgroup{display:flex;flex-direction:column;gap:11px}
.fset{display:flex;flex-wrap:wrap;gap:7px}
.filters button{
  appearance:none;cursor:pointer;background:transparent;color:var(--mute);
  border:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-3xs);
  letter-spacing:.13em;text-transform:uppercase;padding:7px 11px;
}
.filters button:hover,.filters button:focus-visible{color:var(--head);border-color:var(--mute)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--btnfg)}
.fsearch input{font-family:var(--mono);font-size:var(--fs-sm);background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--head);padding:7px 2px;width:210px}
.fsearch input::placeholder{color:var(--mute)}
.count{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mute);padding:18px 0 0}

.lib{width:100%;border-collapse:collapse;margin-top:var(--sp-2)}
.lib th{text-align:left;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--mute);padding:14px 18px 12px 0;border-bottom:1px solid var(--hair);white-space:nowrap}
.lib td{padding:15px 18px 15px 0;border-bottom:1px solid var(--hair2);vertical-align:middle}
.lib .nm{font-family:var(--serif);font-size:21px;letter-spacing:-.01em}
.lib .nm a{color:var(--head);text-decoration:none}
.lib .nm a:hover,.lib .nm a:focus-visible{color:var(--accent)}
.lib .cls{color:var(--mute);font-size:14.5px}
.lib .why{font-size:14.5px;line-height:1.5;color:var(--mute);max-width:46ch}
.famtag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--hair);margin-right:10px;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--accent);vertical-align:middle}
/* below 860px the table becomes stacked records */
@media (max-width:860px){
  .lib,.lib tbody,.lib tr,.lib td{display:block;width:100%}
  .lib thead{display:none}
  .lib tr{padding:20px 0;border-bottom:1px solid var(--hair)}
  .lib td{border:0;padding:3px 0}
  .lib td.cc{padding-top:10px}
}

/* 16 ------------------------------------------------------------ social tiles
   Author at any size; export at 1080×1350. Always dark, never themed.       */
.tile{
  aspect-ratio:4/5;background:#0e141a;border:1px solid rgba(255,255,255,.11);
  padding:28px 26px;display:flex;flex-direction:column;color:#ccd7e0;border-radius:var(--radius);
}
.tile .tm{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8ba0b3}
.tile .tb{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.tile .tmid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
.tile .tname{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.06;color:#e8e2d6;letter-spacing:-.02em;margin:0 0 var(--sp-4)}
.tile .big{font-family:var(--serif);font-size:82px;line-height:.86;color:#e8795c;letter-spacing:-.03em}
.tile .tsub{font-size:13.5px;line-height:1.45;color:#8ba0b3;margin:var(--sp-3) 0 0}
.tile .tf{padding-top:14px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:10px}
.tile .cr{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.tile .cr .k{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:#8ba0b3}
.tile .cr .v{font-family:var(--mono);font-size:12px;color:#ccd7e0}
.tile .cr .v.z{color:#e8795c}
.tile .th2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tile .th2 span{font-family:var(--serif);font-size:17px;color:#e8e2d6}

/* 17 ----------------------------------------------------------------- footer */
.legal{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:2}
.legal b{color:var(--head);font-weight:500}

/* 18 ------------------------------------------------------------------ print
   The audience saves guides as PDFs. A document that prints badly is not a
   document.                                                                  */
@media print{
  .toc,.filters,.btns,.btn,.tlink,nav,.ahdr,.afoot,.kicker.rule::before{display:none!important}
  .band{background:#fff!important;color:#000!important;padding:12px 0}
  .readgrid,.hero-grid{display:block}
  .prose{max-width:none}
  .gsec h2{color:#000;border-bottom:1px solid #999}
  .verdict{border-left-color:#999}
  .cite a{color:#000;text-decoration:none}
  .reflist .pmid::after{content:" — " attr(href);font-size:9px;word-break:break-all}
  .gsec{break-inside:auto} .gsec h2{break-after:avoid}
  .glance,.dtable tr,.reflist li,.notice{break-inside:avoid}
  .tscroll{overflow:visible!important}
  .dtable{min-width:0!important}
}

/* 19 ------------------------------------------- WordPress block-theme bridge
   Arkham pages paint their own full-width bands. A block theme's constrained
   layout would cage them at the content width, so it is neutralised — but only
   on pages that actually carry Arkham markup, so anything else the site
   publishes still lays out the way the theme intends.                        */
.entry-content:has(> .band){max-width:none;width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.entry-content:has(> .band) > *{max-width:none;margin-left:0;margin-right:0}
.entry-content:has(> .band) > .band{width:100%}
main:has(.entry-content > .band){padding-left:0;padding-right:0}
body:has(.entry-content > .band) .wp-block-post-title{display:none}
.wp-site-blocks > *{margin-block-start:0}

/* The stat panel was drawn for figures. Most values are prose, so a row whose
   value is a sentence stacks instead: label above, sentence below, ranged
   left. Figures keep the baseline-aligned pairing they were designed for.    */
.statrow > div.proserow{display:block}
.statrow > div.proserow dt{display:block;margin-bottom:var(--sp-2)}
.statrow dd.prose{font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;
  letter-spacing:0;text-align:left;color:var(--fg)}
.statrow dd.prose strong{color:var(--head);font-weight:600}
.statrow dd.prose.flag{color:var(--fg)}
.statrow dd.prose.flag strong{color:var(--accent)}
.statrow dd small{text-align:right}
.statrow dd.prose small{text-align:left}

/* 20 --------------------------------------------------------------- chrome
   Masthead and footer. Both carry a band class, so they read their colours
   from the same palettes as everything else.                                 */
.ahdr{position:sticky;top:0;z-index:60;background:rgba(14,20,26,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
:root[data-theme="light"] .ahdr{background:rgba(255,255,255,.94)}
.admin-bar .ahdr{top:32px}
.ahdr .inner{display:flex;align-items:center;gap:26px;min-height:70px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.42em;text-decoration:none}
.brand .b1{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--head)}
.brand .b2{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.hnav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.hnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.hnav a:hover{color:var(--head)}
.hnav a[aria-current="page"]{color:var(--head);border-bottom-color:var(--accent)}
@media (max-width:860px){
  .ahdr{position:static}
  .ahdr .inner{padding-top:14px;padding-bottom:14px}
  .hnav{margin-left:0;width:100%;gap:14px}
}

.afoot .fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.afoot .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.afoot .fcols{grid-template-columns:minmax(0,1fr)}}
.fcols h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px;font-weight:500}
.fcols a{display:block;color:var(--fg);text-decoration:none;font-size:15px;padding:4px 0}
.fcols a:hover{color:var(--accent)}
.fcols p{font-size:14.5px;color:var(--mute);margin:0}

/* 21 ------------------------------------------------------------ homepage
   Components that appear only on the front page: the class rail, the
   backbone model and its frame, the grade chart, and the two grids that
   collapse together.                                                        */
.display .ln{display:block}

.minilab{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mute);margin:26px 0 12px;display:block}
.minilab::before{content:"// ";opacity:.6}
.dotline{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dotline i{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex:none}

/* Class rail — one guide from each grade, rotating. The bar under the active
   button shows the rotation advancing, so nothing moves without warning. */
.classrail{display:flex;flex-wrap:wrap;gap:8px}
.classrail button{appearance:none;cursor:pointer;background:transparent;color:var(--mute);
  border:1px solid var(--hair);border-radius:3px;padding:8px 13px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .18s ease,border-color .18s ease;position:relative;overflow:hidden}
.classrail button:hover{color:var(--head);border-color:var(--mute)}
.classrail button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.classrail button[aria-pressed="true"]::after{content:"";position:absolute;left:0;bottom:0;
  height:2px;width:100%;background:var(--accent);transform-origin:left;
  animation:tick 6s linear forwards}
@keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .classrail button[aria-pressed="true"]::after{animation:none;transform:scaleX(1)}
}

/* The backbone model. A structural illustration, not evidence — the caption
   says so, and the frame is built to look like an instrument panel, not a
   product render. */
.structure{display:flex;flex-direction:column;gap:0}
.stage{position:relative;border:1px solid var(--cardhair);border-radius:4px 4px 0 0;
  background:
    radial-gradient(ellipse 62% 46% at 50% 52%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
    color-mix(in srgb,var(--card) 68%,transparent);
  aspect-ratio:4/5;max-height:560px;overflow:hidden}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.stage .hint{position:absolute;bottom:14px;left:16px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);opacity:.7}
.stage .tagtl,.stage .tagbr{position:absolute;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stage .tagtl{top:14px;left:16px}
.stage .tagbr{bottom:14px;right:16px}
.seqline{font-family:var(--mono);font-size:12.5px;letter-spacing:.28em;color:var(--head);
  border:1px solid var(--cardhair);border-top:0;padding:14px 16px;text-align:center;
  overflow-x:auto;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:14px 20px;border:1px solid var(--cardhair);
  border-top:0;border-radius:0 0 4px 4px;padding:14px 16px}
.legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--d);flex:none}

/* Grade distribution. The bars are the library's own counts. */
.chart{margin:0;max-width:620px}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--mono);font-size:10px;letter-spacing:.11em;fill:var(--mute)}
.chart .v text{fill:var(--head)}
.chart .v text.z{fill:var(--accent)}
.chart rect{fill:var(--head)}
.chart .axis{stroke:var(--hair);stroke-width:1}
.chart .zero{stroke:var(--accent);stroke-width:3}

@media (max-width:900px){
  .gd2{grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  #aboutGrid,#structGrid{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:1080px){
  .home-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0 28px!important}
}
@media (max-width:700px){
  .home-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 22px!important}
}
@media (max-width:420px){
  .home-stats{grid-template-columns:minmax(0,1fr)!important}
}

/* A stat band row holds a label, a figure and sometimes a qualifier. Spread
   apart, rows without a qualifier drop their figure out of line with the
   rest, so the band stacks from the top instead. */
.home-stats > div{justify-content:flex-start}
.home-stats dd{margin-top:14px}

/* 22 --------------------------------------------------------- wide tables
   The evidence-overview table needs about 520px to stay legible, and most
   readers arrive on a phone. Rather than compress it into something that
   misreports the data, it scrolls inside its own frame. */
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll .dtable{margin-bottom:0}
@media (max-width:620px){
  .tscroll{border-bottom:1px solid var(--hair2)}
  .tscroll + .tscroll-note{display:block}
  /* a row with no stated reason reads as an empty line once stacked */
  .lib td.why:has(.none){display:none}
}

/* 23 ------------------------------------------------- family member index
   A family page's job is to send the reader into the guides. Listing the
   members as plain text made every family page a dead end, so each member is
   a link carrying its own grade. */
.fammembers{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--hair)}
.fammembers li{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--hair2)}
.fammembers a{font-family:var(--serif);font-size:var(--fs-xl);color:var(--head);
  text-decoration:none;line-height:1.25}
.fammembers a:hover{color:var(--accent)}
.fammembers .chip{flex:none}
@media (max-width:560px){
  .fammembers li{display:block}
  .fammembers .chip{margin-top:10px}
}

/* Mono labels carry the data, and the readership is not young. Nothing in
   the system sits below 11px any more. */
.statrow dt,.glance dt,.m,.legal,.fcols h4,.minilab,.chip,.pill,.dtable th,
.hnav a,.classrail button,.stage .tagtl,.stage .tagbr,.legend span{font-size:11px}
.kicker{font-size:11.5px}
.stage .hint{font-size:10px}

/* 24 ----------------------------------------------- sourcing index
   The sourcing parent listed nothing, so its five explainers had no route in
   from anywhere but the menu. */
.xindex{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--hair)}
.xindex li{border-bottom:1px solid var(--hair2)}
.xindex a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:22px;padding:22px 0;text-decoration:none;align-items:baseline}
.xindex .xnum{grid-row:1/3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--mute);padding-top:6px}
.xindex .xt{font-family:var(--serif);font-size:var(--fs-xl);color:var(--head);line-height:1.25}
.xindex .xd{font-size:var(--fs-base);color:var(--mute);line-height:1.55;margin-top:6px}
.xindex a:hover .xt{color:var(--accent)}
@media (max-width:560px){
  .xindex a{grid-template-columns:minmax(0,1fr);column-gap:0}
  .xindex .xnum{grid-row:auto;padding-top:0;margin-bottom:8px;display:block}
}

/* 25 -------------------------------------------------------- theme control
   The light palette was in the system from the start with no way to reach it.
   The control sits at the end of the masthead nav and states the theme it
   switches to, not the one in use. */
.tgl{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--hair);
  color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:3px;
  transition:color .18s ease,border-color .18s ease}
.tgl:hover{color:var(--head);border-color:var(--mute)}

/* 26 ------------------------------------------------------------ provenance
   Who stands behind a page and when it was last looked at. On evidence
   summaries that is not decoration. */
.prov{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--hair2);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute)}
.prov b{color:var(--head);font-weight:500}
.prov .sep{opacity:.45}
@media print{.tgl{display:none!important}}

/* 27 ------------------------------------------------------- families index
   The families parent listed nothing, so the eleven family pages were
   reachable only one at a time from a guide. Each row carries the family's
   own grade distribution — a picture of its evidence, not a score. */
.famindex{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--hair)}
.famindex li{border-bottom:1px solid var(--hair2)}
.famindex a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:26px;
  padding:24px 0;text-decoration:none}
.famindex .fx-l{font-family:var(--serif);font-size:34px;line-height:1;color:var(--mute);
  font-weight:300;width:1.1em;text-align:center}
.famindex a:hover .fx-l{color:var(--accent)}
.famindex .fx-b{display:block;min-width:0}
.famindex .fx-t{display:block;font-family:var(--serif);font-size:var(--fs-xl);
  color:var(--head);line-height:1.25}
.famindex a:hover .fx-t{color:var(--accent)}
.famindex .fx-d{display:block;font-size:var(--fs-base);color:var(--mute);
  line-height:1.55;margin:7px 0 14px;max-width:62ch}
.famindex .spread{margin-bottom:9px;max-width:340px}
.famindex .fx-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
@media (max-width:560px){
  .famindex a{grid-template-columns:minmax(0,1fr);column-gap:0}
  .famindex .fx-l{font-size:26px;text-align:left;margin-bottom:6px}
  .famindex .spread{max-width:none}
}

/* 28 ------------------------------------------------- disclosed sourcing line
   Sits directly under the evidence summary, on guides whose compound the
   supplier actually lists. Deliberately quiet: a hairline strip, the mono
   disclosure label first, and the grade's independence restated inside the
   block rather than left to the footer. It must never read as a buy button. */
.srcstrip{padding:0}
.srcstrip .inner{padding-top:0;padding-bottom:0}
.srcline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:18px 32px;padding:20px 0 24px;border-top:1px solid var(--hair)}
.srcline .m{grid-column:1/-1;display:block;margin-bottom:2px}
.srcline p{margin:0;font-size:var(--fs-base);line-height:1.55;color:var(--mute);max-width:70ch}
.srcline p b{color:var(--head);font-weight:600}
.srcline .btn{white-space:nowrap}
@media (max-width:760px){
  .srcline{grid-template-columns:minmax(0,1fr)}
  .srcline .btn{justify-self:start}
}
@media print{.srcstrip{display:none!important}}