/* Once Upon a Time fact check: friendly science-museum style. Tokens first, then layout, then the look. */
:root { --bg: #fbf7f2; --surface: #ffffff; --fg: #23201c; --muted: #6a645b; --line: #ece4d8;
  --accent: #d1495b; --outdated: #b26a00; --outdated-bg: #fff1d6; --wrong: #c6324a; --wrong-bg: #ffe3e6; --common: #2a64c5; --common-bg: #e3edff;
  --p1: #fde9e4; --p2: #e7eefc; --p3: #fdeccd; --p4: #e2f3e8; --p5: #efe6fb; --p6: #dff1f4; --shadow: rgba(60,40,20,.35);
  --display: "Fredoka", "Trebuchet MS", sans-serif; --body: "Figtree", system-ui, sans-serif; --mono: "Figtree", system-ui, sans-serif }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #181614; --surface: #221f1c; --fg: #f3eee6; --muted: #aaa298; --line: #35302a;
  --accent: #ff7b8b; --outdated: #f4b555; --outdated-bg: #3a2a10; --wrong: #ff7b8b; --wrong-bg: #3d1a20; --common: #8fb4ff; --common-bg: #19263f; --p1: #3a2522; --p2: #222b40; --p3: #3a2e18; --p4: #1f3328; --p5: #2e2540; --p6: #1c3236; --shadow: rgba(0,0,0,.6); color-scheme: dark } }
:root[data-theme="dark"] { --bg: #181614; --surface: #221f1c; --fg: #f3eee6; --muted: #aaa298; --line: #35302a;
  --accent: #ff7b8b; --outdated: #f4b555; --outdated-bg: #3a2a10; --wrong: #ff7b8b; --wrong-bg: #3d1a20; --common: #8fb4ff; --common-bg: #19263f; --p1: #3a2522; --p2: #222b40; --p3: #3a2e18; --p4: #1f3328; --p5: #2e2540; --p6: #1c3236; --shadow: rgba(0,0,0,.6); color-scheme: dark }
* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font: 17px/1.6 var(--body); margin: 0 }
.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 1.25rem; padding-block: 3rem 5rem }
h1, h2 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.01em }
.kicker { font: 600 .75rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; margin-block: .6rem .9rem }
.lede { color: var(--muted); max-width: 38rem; margin: 0 }
.tally { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-block: 1.5rem 0; padding-block: 1rem; border-block: 1px solid var(--line);
  font: 500 .95rem/1.3 var(--display); font-variant-numeric: tabular-nums }
.tally b { font-size: 1.6rem; margin-right: .35rem }
.tally .o b { color: var(--outdated) } .tally .c b { color: var(--common) } .tally .w b { color: var(--wrong) }
.key { font-size: .9rem; color: var(--muted); margin-block: 1rem 0 }
.key strong { color: var(--fg) }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem 0 }
.filters button { font: 500 .85rem/1 var(--display); padding: .55rem .9rem; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); cursor: pointer }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.filters button:focus-visible, .index a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
nav.index { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1px; margin-block: 1.5rem 3rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.index a { display: flex; gap: .6rem; align-items: baseline; padding: .55rem .75rem; background: var(--surface); color: var(--muted);
  text-decoration: none; font: 500 .85rem/1.3 var(--display); min-width: 0 }
.index a.has { color: var(--fg) }
.index b { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-width: 1.4rem; font-variant-numeric: tabular-nums }
.index i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--wrong) }
.index a:hover { background: var(--bg) }
.ep { padding-block: 2.25rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem }
.ep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem }
.ep-no { flex-basis: 100%; font: 500 .8rem/1 var(--mono); color: var(--accent); letter-spacing: .04em }
.ep h2 { font-size: 1.6rem; line-height: 1.15 }
.ep-count { margin-left: auto; font: 500 .8rem/1 var(--display); color: var(--muted) }
.summary { color: var(--muted); margin-block: .75rem 1.25rem }
.claims { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem }
.claim { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; min-width: 0 }
.claim-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; font: 500 .78rem/1.2 var(--display) }
.tag { padding: .3rem .55rem; border-radius: 3px; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem }
.outdated .tag { color: var(--outdated); background: var(--outdated-bg) }
.wrong .tag { color: var(--wrong); background: var(--wrong-bg) }
.common .tag { color: var(--common); background: var(--common-bg) }
.why { margin: .45rem 0 0; font-size: .92rem; color: var(--muted) }
.where { font-family: var(--mono); color: var(--fg); font-variant-numeric: tabular-nums }
.ts.none { color: var(--muted) }
.conf { color: var(--muted); margin-left: auto }
blockquote { margin: .75rem 0 .6rem; padding-left: .9rem; border-left: 3px solid var(--line); font-style: italic; font-size: 1.05rem }
.outdated blockquote { border-color: var(--outdated) } .common blockquote { border-color: var(--common) } .wrong blockquote { border-color: var(--wrong) }
.today { margin: 0; font-size: .97rem }
.lbl { font: 600 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: .6rem }
.clean { font-style: italic; color: var(--muted); margin: 0 }
details.fine { margin-top: 1rem; font-size: .92rem; color: var(--muted) }
details.fine summary { cursor: pointer; font: 500 .85rem/1.4 var(--display); color: var(--fg) }
details.fine ul { padding-left: 1.2rem; margin-block: .6rem 0; display: grid; gap: .35rem }
footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted) }
body[data-only] .claim { display: none }
body[data-only="outdated"] .claim.outdated, body[data-only="common"] .claim.common, body[data-only="wrong"] .claim.wrong { display: block }
@media (max-width: 30rem) { body { font-size: 16px } .conf { margin-left: 0 } }
a { color: var(--accent) }
.back { display: inline-block; margin-bottom: 1.5rem; font: 500 .85rem/1 var(--display); text-decoration: none }
.missing { font-style: italic }
.lede.big { font-size: 1.15rem; color: var(--fg); margin-bottom: .9rem }
h2.sec { font-size: 1.5rem; margin-block: 3rem 1rem; scroll-margin-top: 1rem }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .9rem }
.card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--fg); text-decoration: none; min-width: 0 }
.card:hover { border-color: var(--accent) }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.card h3 { margin: 0; font: 700 1.25rem/1.15 var(--display); text-wrap: balance }
.card-year { font: 500 .8rem/1 var(--display); color: var(--accent); letter-spacing: .04em; font-variant-numeric: tabular-nums }
.card-topic { font: 500 .8rem/1.3 var(--display); color: var(--muted) }
.card-n { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-top: .4rem; font: 500 .8rem/1.3 var(--display); font-variant-numeric: tabular-nums }
.card-n .o { color: var(--outdated) } .card-n .c { color: var(--common) } .card-n .w { color: var(--wrong) }
.kinds { display: grid; gap: .7rem; margin: 1rem 0 }
.kinds > div { padding: .8rem 1rem; border-left: 3px solid var(--line); background: var(--surface); border-radius: 0 6px 6px 0 }
.kinds .outdated { border-color: var(--outdated) } .kinds .common { border-color: var(--common) } .kinds .wrong { border-color: var(--wrong) }
.kinds dt { font: 700 .8rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase }
.kinds .outdated dt { color: var(--outdated) } .kinds .common dt { color: var(--common) } .kinds .wrong dt { color: var(--wrong) }
.kinds dd { margin: .3rem 0 0 }
.steps, .limits { padding-left: 1.3rem; display: grid; gap: .7rem }
.claim { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.5rem; row-gap: .5rem }
.claim-meta { grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; gap: .45rem }
.claim > :not(.claim-meta) { grid-column: 2 }
.claim blockquote { margin: 0 }
.conf { margin-left: 0 }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 }
.tally > span { display: flex; flex-direction: column; gap: .3rem; padding: .2rem 1rem; border-left: 1px solid var(--line) }
.tally > span:first-child { border-left: 0; padding-left: 0 }
.tally b { margin: 0 }
@media (max-width: 40rem) {
  .claim { grid-template-columns: minmax(0, 1fr) } .claim-meta { grid-row: auto; flex-direction: row; flex-wrap: wrap } .claim > :not(.claim-meta) { grid-column: 1 }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem } .tally > span:nth-child(3) { border-left: 0; padding-left: 0 } }
body { font-size: 17px }
.wrap { max-width: 50rem }
h1, h2, .card h3 { font-weight: 600; letter-spacing: -0.01em }
h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1 }
.kicker { font-family: var(--body); font-weight: 700; color: var(--accent); background: var(--wrong-bg); display: inline-block; padding: .45rem .8rem; border-radius: 99px; letter-spacing: .08em }
.lede.big { font-size: 1.2rem; color: var(--fg) }
.tally { border: 0; background: var(--surface); border-radius: 20px; padding: 1.3rem 1.5rem; box-shadow: 0 1px 0 var(--line) }
.tally b { font: 600 2.6rem/1 var(--display) }
.cards { gap: 1rem }
.card { border: 0; border-radius: 20px; padding: 1.3rem; box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px var(--shadow) }
.card:nth-child(6n+1) { background: var(--p1) } .card:nth-child(6n+2) { background: var(--p2) } .card:nth-child(6n+3) { background: var(--p3) }
.card:nth-child(6n+4) { background: var(--p4) } .card:nth-child(6n+5) { background: var(--p5) } .card:nth-child(6n+6) { background: var(--p6) }
.card h3 { font-size: 1.5rem } .card-year { font-weight: 700 }
.claim { border: 0; border-radius: 18px; padding: 1.2rem 1.3rem; box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px var(--shadow) }
.tag { border-radius: 99px; font-weight: 700; padding: .35rem .7rem }
blockquote { border: 0 !important; padding: 0; font: 600 1.12rem/1.4 var(--body); font-style: normal }
.lbl { color: var(--accent) }
.filters button { border-radius: 99px; border: 0; background: var(--surface); box-shadow: 0 1px 0 var(--line); font-family: var(--body); font-weight: 600 }
nav.index { border: 0; border-radius: 16px; background: var(--line) }
.kinds > div { border-left: 0; border-radius: 16px; background: var(--outdated-bg) } .kinds .common { background: var(--common-bg) } .kinds .wrong { background: var(--wrong-bg) }

.back { display: block; width: fit-content; margin-bottom: 1.25rem; font-weight: 600 }
.claim .why { font-size: .92rem }
.card h3, .card-year, .card-topic { color: var(--fg) } .card-topic { opacity: .75 }
.index a { background: var(--surface) } .index a:hover { background: var(--bg) }
footer { border-top: 0; background: var(--surface); border-radius: 16px; padding: 1rem 1.25rem }
/* major/minor: minor slips are hidden until the reader asks for them */
body:not([data-minor="show"]) .claim.minor { display: none }
body[data-minor="show"] .if-hidden { display: none }
body[data-minor="show"] section.ep.no-major .clean { display: none }
.sev { font: 600 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .6rem }
.claim.minor { box-shadow: none; background: transparent; border: 1px dashed var(--line) }
.claim.minor blockquote { font-weight: 500 }
.filters .minor-toggle { margin-left: auto; background: transparent; box-shadow: inset 0 0 0 1px var(--line) }
.filters .minor-toggle[aria-pressed="true"] { background: var(--fg); color: var(--bg) }
.card-major { font: 600 1rem/1.2 var(--display); margin-top: .5rem } .card-major b { font-size: 1.6rem; margin-right: .2rem }
.card-minor { font-size: .8rem; color: var(--fg); opacity: .65 }
@media (max-width: 40rem) { .filters .minor-toggle { margin-left: 0 } }