/*
Theme Name: SugarMyth
Theme URI: https://sugarmyth.com/
Description: Evidence-led child theme for sugarmyth.com. Presents the sugar-hyperactivity case as a chronological argument built around the 1994 parental-expectancy study. Child of Twenty Twenty-One.
Author: sugarmyth.com
Template: twentytwentyone
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sugarmyth
*/

/* ============================================================
   SugarMyth design tokens.

   Pink marks the myth, blue marks the evidence. The pairing is
   blue rather than green on purpose: pink against green measured
   a CVD separation of only 2.7 dE in dark mode (deuteranopia),
   which is invisible. Pink against these blues measures 14.7 dE
   in light and 15.2 dE in dark, and both pairs clear the
   lightness, chroma, normal-vision and contrast checks.
   ============================================================ */
:root{
  --sm-ground:#F6F7F8;
  --sm-surface:#FFFFFF;
  --sm-surface-2:#EFF1F3;
  --sm-ink:#14171C;
  --sm-ink-2:#5A616B;
  --sm-ink-3:#858C95;
  --sm-rule:#DDE2E7;
  --sm-rule-strong:#C4CBD2;
  --sm-myth:#D8386B;
  --sm-myth-line:rgba(216,56,107,.4);
  --sm-evidence:#1D64C4;
  --sm-evidence-soft:#E7EEFB;
  --sm-evidence-line:rgba(29,100,196,.26);
  --sm-focus:#2563C9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sm-ground:#101317;
    --sm-surface:#171B21;
    --sm-surface-2:#1D222A;
    --sm-ink:#EDEFF2;
    --sm-ink-2:#9AA3AD;
    --sm-ink-3:#767E88;
    --sm-rule:#272D35;
    --sm-rule-strong:#39414B;
    --sm-myth:#E8557F;
    --sm-myth-line:rgba(232,85,127,.42);
    --sm-evidence:#4A8FE0;
    --sm-evidence-soft:#141D2C;
    --sm-evidence-line:rgba(74,143,224,.3);
    --sm-focus:#6FA0F5;
  }
}
:root[data-theme="dark"]{
  --sm-ground:#101317;
  --sm-surface:#171B21;
  --sm-surface-2:#1D222A;
  --sm-ink:#EDEFF2;
  --sm-ink-2:#9AA3AD;
  --sm-ink-3:#767E88;
  --sm-rule:#272D35;
  --sm-rule-strong:#39414B;
  --sm-myth:#E8557F;
  --sm-myth-line:rgba(232,85,127,.42);
  --sm-evidence:#4A8FE0;
  --sm-evidence-soft:#141D2C;
  --sm-evidence-line:rgba(74,143,224,.3);
  --sm-focus:#6FA0F5;
}

/* ---------- page shell ---------- */
body.sm-page{
  background:var(--sm-ground);
  color:var(--sm-ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
body.sm-page *{box-sizing:border-box}
body.sm-page a{color:inherit}
body.sm-page :focus-visible{outline:2px solid var(--sm-focus);outline-offset:3px;border-radius:2px}
.sm-skip{position:absolute;left:-9999px}
.sm-skip:focus{left:12px;top:12px;z-index:99;background:var(--sm-surface);padding:10px 16px;border:1px solid var(--sm-rule-strong);border-radius:6px}

.sm-wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.sm-col{max-width:660px}

/* ---------- masthead ---------- */
.sm-masthead{border-bottom:1px solid var(--sm-rule);background:var(--sm-surface)}
.sm-masthead .sm-wrap{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.sm-wordmark{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:700;font-size:20px;letter-spacing:-.015em;text-decoration:none;color:var(--sm-ink)}
.sm-wordmark em{font-style:normal;color:var(--sm-myth)}
.sm-kicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sm-ink-3)}

/* ---------- hero ---------- */
.sm-hero{padding:76px 0 60px;border-bottom:1px solid var(--sm-rule)}
.sm-verdict{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sm-evidence);background:var(--sm-evidence-soft);border:1px solid var(--sm-evidence-line);padding:6px 12px;border-radius:100px;margin-bottom:26px}
.sm-verdict::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sm-evidence)}
body.sm-page h1{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;font-weight:600;font-size:clamp(2.5rem,6.2vw,4.15rem);line-height:1.03;letter-spacing:-.03em;text-wrap:balance;margin:0 0 24px;color:var(--sm-ink)}
/* The verdict, not the myth: "does not" is the true half of the sentence,
   so it takes the evidence color and an affirming underline. A line THROUGH
   these words would read as cancelling them, inverting the whole claim. */
.sm-affirm{position:relative;white-space:nowrap;color:var(--sm-evidence)}
.sm-affirm::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.06em;background:var(--sm-evidence);border-radius:2px}
.sm-standfirst{font-size:1.2rem;line-height:1.55;color:var(--sm-ink-2);max-width:56ch;margin:0}

.sm-tally{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;border-top:1px solid var(--sm-rule)}
.sm-tally div{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--sm-rule)}
.sm-tally div:last-child{border-right:0}
.sm-tally dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--sm-ink-3);margin-bottom:5px}
.sm-tally dd{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--sm-ink)}

/* ---------- sections ---------- */
.sm-section{padding:64px 0;border-bottom:1px solid var(--sm-rule)}
.sm-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sm-ink-3);margin:0 0 14px}
body.sm-page h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;font-weight:600;font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.14;letter-spacing:-.022em;text-wrap:balance;margin:0 0 20px;color:var(--sm-ink)}
body.sm-page p{margin:0 0 18px}
body.sm-page p:last-child{margin-bottom:0}
.sm-lede{font-size:1.1rem;color:var(--sm-ink-2)}
.sm-pink{color:var(--sm-myth);font-weight:600}

/* ---------- chronology ---------- */
.sm-chrono{list-style:none;margin:36px 0 0;padding:0}
.sm-chrono li{display:grid;grid-template-columns:88px 1fr;gap:26px;padding:24px 0;border-top:1px solid var(--sm-rule)}
.sm-chrono li:last-child{border-bottom:1px solid var(--sm-rule)}
.sm-yr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;font-weight:500;color:var(--sm-ink);font-variant-numeric:tabular-nums;padding-top:2px}
.sm-yr small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-ink-3);margin-top:4px;font-weight:400}
.sm-chrono h3{font-size:1.06rem;font-weight:600;margin:0 0 7px;letter-spacing:-.01em;color:var(--sm-ink)}
.sm-chrono p{font-size:.97rem;color:var(--sm-ink-2);margin:0}
.sm-src{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--sm-ink-3);margin-top:9px;display:block}
.sm-chrono li.is-myth .sm-yr{color:var(--sm-myth)}

/* ---------- 1994 trial panel ---------- */
.sm-study{background:var(--sm-surface);border-top:1px solid var(--sm-rule);border-bottom:1px solid var(--sm-rule)}
.sm-trial{margin:38px 0 0;border:1px solid var(--sm-rule-strong);border-radius:10px;background:var(--sm-ground);overflow:hidden}
.sm-trial-head{padding:14px 20px;border-bottom:1px solid var(--sm-rule-strong);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sm-ink-2);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sm-arms{display:grid;grid-template-columns:1fr 1fr}
.sm-arm{padding:22px 20px}
.sm-arm:first-child{border-right:1px solid var(--sm-rule-strong)}
.sm-arm-name{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--sm-ink-3);margin-bottom:12px}
.sm-row{padding:11px 0;border-top:1px dashed var(--sm-rule)}
.sm-row:first-of-type{border-top:0;padding-top:0}
.sm-row-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--sm-ink-3);margin-bottom:3px}
.sm-row-v{font-size:.97rem;font-weight:500;line-height:1.4;color:var(--sm-ink)}
.sm-same{color:var(--sm-evidence)}
.sm-diff{color:var(--sm-myth)}
.sm-trial-foot{padding:16px 20px;border-top:1px solid var(--sm-rule-strong);background:var(--sm-surface-2);font-size:.95rem;color:var(--sm-ink-2)}
.sm-trial-foot b{color:var(--sm-ink);font-weight:600}
.sm-pullquote{margin:34px 0 0;padding:0 0 0 22px;border-left:3px solid var(--sm-myth);font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;font-size:1.32rem;line-height:1.4;letter-spacing:-.015em;color:var(--sm-ink)}

/* ---------- sources ---------- */
.sm-sources ol{list-style:none;counter-reset:s;margin:32px 0 0;padding:0}
.sm-sources li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--sm-rule)}
.sm-sources li:last-child{border-bottom:1px solid var(--sm-rule)}
.sm-sources li::before{content:counter(s,decimal-leading-zero);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--sm-ink-3);padding-top:3px;font-variant-numeric:tabular-nums}
.sm-sources a{font-weight:600;text-decoration:none;letter-spacing:-.01em;border-bottom:1.5px solid var(--sm-myth-line);transition:border-color .15s,color .15s}
.sm-sources a:hover{color:var(--sm-myth);border-bottom-color:var(--sm-myth)}
.sm-pub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--sm-ink-3);margin-top:6px;display:block}
.sm-snip{font-size:.96rem;color:var(--sm-ink-2);margin-top:8px}

/* ---------- footer ---------- */
.sm-footer{padding:44px 0 60px}
.sm-footer p{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.05em;color:var(--sm-ink-3)}

@media (max-width:640px){
  body.sm-page{font-size:16px}
  .sm-hero{padding:52px 0 44px}
  .sm-section{padding:48px 0}
  .sm-arms{grid-template-columns:1fr}
  .sm-arm:first-child{border-right:0;border-bottom:1px solid var(--sm-rule-strong)}
  .sm-chrono li{grid-template-columns:1fr;gap:8px}
  .sm-yr{display:flex;align-items:baseline;gap:10px}
  .sm-yr small{margin-top:0}
  .sm-tally div{border-right:0;padding-right:0;margin-right:0;min-width:47%}
}
/* ---------- figures ---------- */
.sm-figure{margin:36px 0 0;border:1px solid var(--sm-rule-strong);border-radius:10px;background:var(--sm-surface);overflow:hidden}
.sm-figure + .sm-figure{margin-top:24px}
.sm-figure-head{padding:18px 20px 0}
.sm-figure-title{font-size:1rem;font-weight:600;margin:0 0 4px;color:var(--sm-ink);letter-spacing:-.01em}
.sm-figure-sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-ink-3);margin:0}
.sm-figure-body{padding:10px 20px 2px;overflow-x:auto}
.sm-figure-body svg{display:block;width:100%;height:auto;min-width:430px}
.sm-figcaption{padding:14px 20px;border-top:1px solid var(--sm-rule);background:var(--sm-surface-2);font-size:.9rem;color:var(--sm-ink-2);margin:0;line-height:1.5}
.sm-figcaption b{color:var(--sm-ink);font-weight:600}

/* themed svg primitives */
.sm-ax{stroke:var(--sm-rule-strong);stroke-width:1;fill:none}
.sm-zero{stroke:var(--sm-ink);stroke-width:2;fill:none}
.sm-bench{stroke:var(--sm-rule-strong);stroke-width:1;stroke-dasharray:3 4;fill:none}
.sm-zone{fill:var(--sm-surface-2)}
.sm-band{fill:var(--sm-evidence)}
.sm-t{fill:var(--sm-ink-2);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px}
.sm-t-hi{fill:var(--sm-ink);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;font-weight:500}
.sm-t-lo{fill:var(--sm-ink-3);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.05em}

/* 39-variable unit grid */
.sm-units{display:flex;flex-wrap:wrap;gap:6px;padding:20px 20px 8px;max-width:430px}
.sm-unit{width:22px;height:22px;border-radius:4px;border:1.5px solid var(--sm-rule-strong);background:transparent}
.sm-unit-key{display:flex;gap:20px;flex-wrap:wrap;padding:6px 20px 18px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--sm-ink-3)}
.sm-unit-key span{display:inline-flex;align-items:center;gap:8px}
.sm-key-sw{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--sm-rule-strong);flex:none}
.sm-key-sw.is-hit{background:var(--sm-evidence);border-color:var(--sm-evidence)}

/* ---------- evidence table ---------- */
.sm-tablewrap{margin:36px 0 0;overflow-x:auto;border:1px solid var(--sm-rule-strong);border-radius:10px;background:var(--sm-surface)}
table.sm-table{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem}
table.sm-table th,table.sm-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--sm-rule);vertical-align:top}
table.sm-table thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-ink-3);background:var(--sm-surface-2);border-bottom:1px solid var(--sm-rule-strong);white-space:nowrap}
table.sm-table tbody tr:last-child td{border-bottom:0}
table.sm-table td.sm-num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sm-ink-2)}
table.sm-table td.sm-found{color:var(--sm-evidence);font-weight:600}

/* ---------- references ---------- */
.sm-refs{list-style:none;counter-reset:r;margin:32px 0 0;padding:0}
.sm-refs li{counter-increment:r;display:grid;grid-template-columns:38px 1fr;gap:12px;padding:17px 0;border-top:1px solid var(--sm-rule);font-size:.92rem;line-height:1.55;color:var(--sm-ink-2)}
.sm-refs li:last-child{border-bottom:1px solid var(--sm-rule)}
.sm-refs li::before{content:"[" counter(r) "]";font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--sm-ink-3);padding-top:3px}
.sm-ref-t{font-weight:600;color:var(--sm-ink)}
.sm-ref-j{font-style:italic}
.sm-refs a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--sm-ink-3);text-decoration:none;border-bottom:1px solid var(--sm-rule-strong);white-space:nowrap}
.sm-refs a:hover{color:var(--sm-evidence);border-bottom-color:var(--sm-evidence)}

@media (max-width:640px){
  .sm-figure-body{padding-left:14px;padding-right:14px}
  .sm-units{padding-left:14px;padding-right:14px}
  .sm-refs li{grid-template-columns:30px 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  body.sm-page *{animation:none !important;transition:none !important}
}
