/* ==========================================================================
   Amazing Facts 4 U — Ghost theme
   Tokens copied verbatim from Logos/"Amazing Facts 4 U Tokens.css", which was
   sampled from the logo artwork by reading pixel values. Do not re-pick these
   by eye; the contrast ratios in the comments are measured.
   ========================================================================== */

:root{
  --navy:#1C2340; --navy-deep:#141A31; --navy-lift:#252E4E; --navy-line:#313B5E;
  --gold:#F7C948; --gold-text:#8A6D0B; --gold-soft:#FDF3DA;
  --paper:#FCFCF7; --paper-2:#F4F3EC; --paper-3:#EAE8DE; --line:#DFDCD0;
  --ink-soft:#3E4763; --ink-faint:#5C6684;

  --t-animals:#1B7F5A; --t-space:#4C3BCF; --t-body:#B02D5C; --t-food:#B45309;
  --t-science:#0E6E8C; --t-people:#7A3E9D; --t-country:#0F766E; --t-history:#8A5A2B;
  --t-nature:#2F7A1F; --t-health:#B31D3B; --t-tech:#3B4B9E; --t-weird:#8E3B8E;

  --t-animals-d:#4ECFA0; --t-space-d:#9B90F5; --t-body-d:#F286AC; --t-food-d:#F0A55A;
  --t-science-d:#5EC0DE; --t-people-d:#C79BE6; --t-country-d:#4FC7BC; --t-history-d:#D6A874;
  --t-nature-d:#7CC96A; --t-health-d:#F58098; --t-tech-d:#93A3EE; --t-weird-d:#DB94DB;

  /* Ghost's custom-font setting injects --gh-font-heading / --gh-font-body into
     ghost_head when an editor picks a font. Honour it, and fall back to the
     brand stacks when it is unset — which is the normal case. */
  --serif:var(--gh-font-heading,"Iowan Old Style",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif);
  --sans:var(--gh-font-body,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif);

  --wrap:1180px; --r:14px;
  --shadow-sm:0 1px 2px rgba(28,35,64,.06),0 2px 8px rgba(28,35,64,.05);
  --shadow-md:0 4px 14px rgba(28,35,64,.09),0 14px 40px rgba(28,35,64,.07);
  /* 78, not 64, so the badge can render at its documented 64px minimum with
     breathing room. The brand kit is explicit: below 64px the orbiting icons
     turn to mush — confirmed by rendering it at 44px side by side. */
  --head-h:78px;

  /* resolved surfaces — remapped wholesale in dark mode */
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
  --ink:var(--navy); --rule:var(--line);
  --accent-type:var(--gold-text);   /* gold is 1.52:1 on paper — never type here */
  --topic:var(--navy);
}

/* Dark mode. Note the brand's central rule inverts: gold becomes legal as type
   (9.83:1 on navy) and the topic hues switch to their lifted variants. */
@media (prefers-color-scheme: dark){
  :root[data-scheme="auto"]{
    --bg:var(--navy-deep); --bg-2:var(--navy); --bg-3:var(--navy-lift);
    --ink:var(--paper); --rule:var(--navy-line);
    --accent-type:var(--gold);
    --ink-soft:#C3C9DC; --ink-faint:#9AA3BE;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 30px rgba(0,0,0,.45);
  }
}
:root[data-scheme="dark"]{
  --bg:var(--navy-deep); --bg-2:var(--navy); --bg-3:var(--navy-lift);
  --ink:var(--paper); --rule:var(--navy-line);
  --accent-type:var(--gold);
  --ink-soft:#C3C9DC; --ink-faint:#9AA3BE;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 30px rgba(0,0,0,.45);
}

/* --- topic hues ------------------------------------------------------------
   Thirty Ghost tags folded onto the twelve measured hues. Light values are
   measured with WHITE text on them (>=4.96:1); the -d variants are measured as
   type on --navy-deep (>=6.30:1). */
[data-topic="animals"],[data-topic="birds"],[data-topic="insects"],[data-topic="sea"]{--topic:var(--t-animals);--topic-d:var(--t-animals-d)}
[data-topic="space"],[data-topic="universe"]{--topic:var(--t-space);--topic-d:var(--t-space-d)}
[data-topic="human-body"]{--topic:var(--t-body);--topic-d:var(--t-body-d)}
[data-topic="health"],[data-topic="disease"]{--topic:var(--t-health);--topic-d:var(--t-health-d)}
[data-topic="food"]{--topic:var(--t-food);--topic-d:var(--t-food-d)}
[data-topic="science"]{--topic:var(--t-science);--topic-d:var(--t-science-d)}
[data-topic="people"],[data-topic="celebrities"]{--topic:var(--t-people);--topic-d:var(--t-people-d)}
[data-topic="countries"],[data-topic="cities"],[data-topic="places"]{--topic:var(--t-country);--topic-d:var(--t-country-d)}
[data-topic="history"],[data-topic="war"]{--topic:var(--t-history);--topic-d:var(--t-history-d)}
[data-topic="nature"],[data-topic="plants"],[data-topic="earth"]{--topic:var(--t-nature);--topic-d:var(--t-nature-d)}
[data-topic="technology"],[data-topic="manmade"],[data-topic="business"]{--topic:var(--t-tech);--topic-d:var(--t-tech-d)}
[data-topic="weird-random"],[data-topic="arts-media"],[data-topic="politics-law"],
[data-topic="sports"],[data-topic="language"],[data-topic="religion"]{--topic:var(--t-weird);--topic-d:var(--t-weird-d)}

@media (prefers-color-scheme: dark){:root[data-scheme="auto"] [data-topic]{--topic:var(--topic-d,var(--gold))}}
:root[data-scheme="dark"] [data-topic]{--topic:var(--topic-d,var(--gold))}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-type)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:720px;margin-inline:auto;padding-inline:20px}
.wrap-wide{max-width:960px;margin-inline:auto;padding-inline:20px}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:8px}

/* --- header -------------------------------------------------------------- */
.site-head{background:var(--navy);color:var(--paper);position:sticky;top:0;z-index:50}
.site-head-inner{min-height:var(--head-h);display:flex;align-items:center;gap:16px}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-right:auto}
.site-logo{width:64px;height:64px;border-radius:50%;object-fit:cover}
.site-brand-text{display:flex;flex-direction:column;line-height:1.2}
.site-title{font-family:var(--serif);font-size:1.2rem;font-weight:700}
.site-tagline{font-size:.78rem;color:#C3C9DC;display:none}
/* 1024, not 900. The nav goes inline at 820px, and with six items the tagline
   appearing at 900 pushed "Contact" onto a second row for the whole 900-1023
   band — measured, not guessed. The tagline is the expendable one. */
@media(min-width:1024px){.site-tagline{display:block}}

/* {{navigation}} emits its own <ul class="nav">, so these target the emitted
   list rather than a wrapper. Wrapping it produced nested lists with visible
   bullet markers stacked vertically — live on this site until v1.1.0. */
.site-nav ul,.foot-nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.site-nav li,.foot-nav li{list-style:none}
.site-nav a{
  color:var(--paper);text-decoration:none;font-size:.92rem;font-weight:600;
  /* WCAG 2.5.8 is AA at 24x24 — these boxes clear it with margin */
  display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;
}
.site-nav a:hover{background:var(--navy-lift)}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer}
.nav-toggle-bar{display:block;height:2px;background:var(--paper);border-radius:2px}
@media(min-width:820px){.nav-toggle{display:none}}
@media(max-width:819px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);
    border-top:1px solid var(--navy-line);padding:8px 20px 16px}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:2px}
  .site-nav a{min-height:44px}
}

/* --- hero + archive heads ------------------------------------------------ */
.hero{background:var(--bg-2);border-bottom:1px solid var(--rule);padding:44px 0 38px;text-align:center}
.hero-title{font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem);margin:0 0 8px}
.hero-sub{margin:0 auto;max-width:60ch;color:var(--ink-soft)}

.archive-head{background:var(--bg-2);border-bottom:1px solid var(--rule);padding:38px 0 30px;
  border-left:6px solid var(--topic)}
.archive-kind{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.archive-title{font-family:var(--serif);font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin:6px 0 8px;color:var(--topic)}
.archive-sub{margin:0 0 6px;color:var(--ink-soft);max-width:65ch}
.archive-count{margin:0;color:var(--ink-faint);font-size:.86rem}

/* --- card grid ----------------------------------------------------------- */
.card-grid{display:grid;gap:22px;padding:34px 0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.card-grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

.card{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card-link{text-decoration:none;color:inherit;display:block;height:100%}
.card-media{aspect-ratio:3/2;background:var(--bg-3);overflow:hidden}
.card-img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px 18px 20px}
.card-title{font-family:var(--serif);font-size:1.12rem;line-height:1.3;margin:10px 0 8px}
.card-excerpt{margin:0 0 12px;color:var(--ink-soft);font-size:.92rem}
.card-meta{color:var(--ink-faint);font-size:.8rem}

.topic-badge{display:inline-block;background:var(--topic);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px}
/* The lifted dark hues are LIGHT colours, so badges built on them take navy
   text, not white. This flips the light-mode rule — it is in the brand kit. */
@media (prefers-color-scheme: dark){:root[data-scheme="auto"] .topic-badge{color:var(--navy-deep)}}
:root[data-scheme="dark"] .topic-badge{color:var(--navy-deep)}
.topic-badge-link{text-decoration:none;min-height:24px;display:inline-flex;align-items:center}

/* --- post ---------------------------------------------------------------- */
.post-head{padding:40px 20px 8px;text-align:center}
.post-title{font-family:var(--serif);font-size:clamp(1.75rem,1.2rem + 2.6vw,2.7rem);
  line-height:1.18;margin:14px 0 10px}
.post-meta{color:var(--ink-faint);font-size:.86rem}
.post-meta .dot{margin:0 6px}
.post-media{margin:22px auto 8px}
.post-img{border-radius:var(--r);width:100%}
.post-media figcaption{color:var(--ink-faint);font-size:.82rem;text-align:center;margin-top:8px}

.post-content{padding-block:10px 20px;font-size:1.05rem}
.post-content p{margin:0 0 1.15em}
.post-content h2,.post-content h3,.post-content h4{font-family:var(--serif);line-height:1.25;margin:1.6em 0 .5em}
.post-content h4{font-size:1.3rem}

/* Every migrated post opens with a heading that restates the title and adds the
   fact count ("15 Enchanting Facts"). preprocess.py strips the "| Amazing Facts
   4U" suffix; the count is worth keeping, but it must not compete with the h1
   directly above it. Demote the FIRST heading only — later ones are real
   section headings and keep their weight. */
.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child,
.post-content > h4:first-child{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.4em;
  padding-bottom:.8em;
  border-bottom:1px solid var(--rule);
}
.post-content a{color:var(--accent-type);text-underline-offset:2px}
.post-content img{border-radius:10px;margin:1.4em auto}

/* THE signature element. 378 of 446 posts are numbered fact lists, so this is
   the site's actual content, not a detail. The counter is drawn in the topic
   hue and the marker is built with ::before so the number can be styled — the
   native marker cannot carry a background. */
.post-content ol{list-style:none;counter-reset:fact;padding:0;margin:1.4em 0}
.post-content ol > li{
  counter-increment:fact;position:relative;
  padding:14px 16px 14px 60px;margin:0 0 10px;
  background:var(--bg-2);border:1px solid var(--rule);border-radius:12px;
  border-left:4px solid var(--topic,var(--navy));
}
.post-content ol > li::before{
  content:counter(fact);
  position:absolute;left:14px;top:12px;
  width:32px;height:32px;border-radius:50%;
  background:var(--topic,var(--navy));color:#fff;
  font-family:var(--sans);font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
@media (prefers-color-scheme: dark){:root[data-scheme="auto"] .post-content ol > li::before{color:var(--navy-deep)}}
:root[data-scheme="dark"] .post-content ol > li::before{color:var(--navy-deep)}
.post-content ol > li > p:last-child{margin-bottom:0}
/* Nested lists must NOT inherit the card treatment or the numbering restarts
   looking like a second fact list. */
.post-content ol ol,.post-content ol ul{margin:.6em 0 0;padding-left:1.2em}
.post-content ol ol > li,.post-content ol ul > li{
  background:none;border:0;padding:0 0 0 .2em;margin:0 0 .3em;counter-increment:none}
.post-content ol ol > li::before,.post-content ol ul > li::before{display:none}
.post-content ul{padding-left:1.3em;margin:1.2em 0}
.post-content ul > li{margin:0 0 .5em}

/* Koenig card widths. The editor emits these on images, galleries and embeds;
   without them a "wide" or "full" card renders at body width and the setting
   silently does nothing. gscan treats their absence as an error. */
.post-content .kg-width-wide{
  position:relative;width:min(96vw,960px);margin-inline:auto;
  margin-left:50%;transform:translateX(-50%);
}
.post-content .kg-width-full{
  position:relative;width:100vw;max-width:100vw;
  margin-left:50%;transform:translateX(-50%);
}
.post-content .kg-width-full img{border-radius:0;width:100%}
.post-content figure{margin:1.5em 0}
.post-content figure figcaption{
  color:var(--ink-faint);font-size:.82rem;text-align:center;margin-top:8px}
.post-content .kg-card{margin:1.5em 0}

.post-content blockquote{
  margin:1.5em 0;padding:12px 18px;border-left:4px solid var(--gold);
  background:var(--gold-soft);border-radius:0 10px 10px 0;color:var(--navy)}

.post-tags{padding:18px 20px 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-tags-label{font-size:.78rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.tag-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--topic);color:var(--topic);
  text-decoration:none;font-size:.84rem;font-weight:600}

.related{padding:10px 0 40px;border-top:1px solid var(--rule);margin-top:30px}
.related-head{font-family:var(--serif);font-size:1.4rem;margin:26px 0 0}

/* --- share ---------------------------------------------------------------- */
/* Plain links to each network's share endpoint, no vendor JavaScript: a widget
   would add third-party script to a page already carrying AdSense, and INP is
   what ad scripts damage most. 44px targets, well clear of the WCAG 2.5.8 AA
   floor of 24x24. Surfaces are semantic tokens, so dark mode needs no overrides. */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  padding:18px 20px 4px;margin-top:10px;border-top:1px solid var(--rule)}
.share-label{font-size:.78rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.share-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:44px;height:44px;padding:0;border:1px solid var(--rule);border-radius:999px;
  background:var(--bg-2);color:var(--ink);cursor:pointer;text-decoration:none;font:inherit}
.share-btn svg{width:20px;height:20px;display:block}
/* Brand colours on hover only; each is at least 3:1 on both surfaces, which is
   the non-text contrast requirement for an icon. */
.share-whatsapp:hover{background:#128C7E;border-color:#128C7E;color:#fff}
.share-facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.share-x:hover{background:#000;border-color:#000;color:#fff}
.share-pinterest:hover{background:#BD081C;border-color:#BD081C;color:#fff}
.share-copy:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.share-copy.is-copied{width:auto;padding:0 14px;background:var(--t-animals);border-color:var(--t-animals);color:#fff}
.share-copied{font-size:.8rem;font-weight:700}
.share-copy .share-copied:empty{display:none}

/* --- topics --------------------------------------------------------------- */
/* The topic hue is used as a DOT background only, never as type: --topic is
   measured against white in light mode and flips in dark, so type on it needs
   the .topic-badge light/dark pair while a dot needs nothing. */
.topics{background:var(--bg-2);border-block:1px solid var(--rule);padding:6px 0 26px}
.topics-head{font-family:var(--serif);font-size:1.4rem;text-align:center;margin:26px 0 0}
.topic-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0;padding:0}
.topic-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 14px;
  background:var(--bg);border:1px solid var(--rule);border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.topic-chip:hover{border-color:var(--topic)}
.topic-dot{width:10px;height:10px;border-radius:50%;background:var(--topic);flex:none}
.topic-chip-count{font-size:.75rem;font-weight:700;color:var(--ink-faint);
  background:var(--bg-3);border-radius:999px;padding:2px 8px}

/* --- ads ----------------------------------------------------------------- */
/* Reserve the box so the unit cannot shift layout when it fills. */
.ad-slot{display:flex;justify-content:center;margin:26px auto;text-align:center}
.ad-display{min-height:250px}
.ad-inarticle{min-height:250px}   /* 250, matching the 300x250 unit since v1.2.0 */
.ad-slot ins{margin:0 auto}

/* --- footer -------------------------------------------------------------- */
.site-foot{background:var(--navy);color:var(--paper);margin-top:40px;padding:30px 0}
.site-foot-inner{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.foot-brand{font-family:var(--serif);font-size:1.15rem;margin:0}
.site-foot a{color:var(--gold)}   /* 9.83:1 on navy — gold IS legal as type here */
.foot-legal{margin:0;color:#9AA3BE;font-size:.82rem}
/* WCAG 2.5.8 is AA at 24x24. Measured at a true 390px, the footer links came out
   40x17 and failed on height. Inline links inside body prose are exempt (their
   size is constrained by the line-height of the surrounding sentence), but these
   are standalone and are not. */
.foot-legal a,.foot-nav a{
  display:inline-flex;align-items:center;min-height:24px;padding:0 6px;
  text-underline-offset:3px}

/* --- footer social -------------------------------------------------------- */
/* The site's own profiles. Icon-only, so the tap target is the whole 44px disc
   and not the 20px glyph — matching .share-btn rather than the 24px floor the
   text footer links settle for. The footer background is the hardcoded --navy in
   both colour schemes, so this needs no dark-mode variant. */
.foot-social ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin:0;padding:0}
.foot-social li{list-style:none}
/* Two classes deep, so it outranks the .site-foot a gold rule above. */
.site-foot .social-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  background:var(--navy-lift);border:1px solid var(--navy-line);
  color:var(--paper);text-decoration:none}
.social-btn svg{width:20px;height:20px;display:block}
/* Hover inverts to a white disc with the brand colour as the glyph. A
   brand-coloured disc would bury X (#000) and Tumblr (#36465D) in the navy. */
.site-foot .social-btn:hover{background:var(--paper);border-color:var(--paper)}
.site-foot .social-facebook:hover{color:#1877F2}
.site-foot .social-instagram:hover{color:#C13584}
.site-foot .social-pinterest:hover{color:#BD081C}
.site-foot .social-x:hover{color:#000}
.site-foot .social-flickr:hover{color:#FF0084}
.site-foot .social-tumblr:hover{color:#36465D}
.site-foot .social-email:hover{color:var(--navy)}

/* --- pagination + errors ------------------------------------------------- */
.pagination{display:flex;gap:14px;justify-content:center;align-items:center;padding:10px 0 46px}
.pagination a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:10px;background:var(--bg-2);border:1px solid var(--rule);
  text-decoration:none;font-weight:600}
.page-number{color:var(--ink-faint);font-size:.9rem}

.error-page{text-align:center;padding:70px 20px}
.error-code{font-family:var(--serif);font-size:4rem;margin:0;color:var(--ink-faint)}
.error-title{font-family:var(--serif);margin:.2em 0 .4em}
.error-sub{color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;
  border-radius:10px;text-decoration:none;font-weight:700}
.btn-gold{background:var(--gold);color:var(--navy)}  /* navy on gold 9.83:1; white would be 1.57:1 */

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}