/* mesmerizing-quotes — screen.css
 *
 * This site had NO brand kit — only Logo/MQ.jpg. The palette below was MEASURED
 * from that artwork (measure-palette.py in output/ghost-migration/mesmerizingquotes,
 * the same quantise-the-chromatic-mid-tones technique used for wisdomquotes4u),
 * and every contrast ratio in these comments was computed, not estimated.
 *
 * The logo is a circular illustrated landscape on a cream ground: sage-green hills
 * and pines, blue-grey mountains, a warm brown rock, children playing, and one
 * child reading. Black script wordmark across the middle.
 *
 * THE CONSTRAINT THAT SHAPES THE WHOLE THEME: the loudest colours in the mark are
 * the sage green (26.6% of chromatic pixels, 2.04:1 on white) and the blue-grey
 * slate (15.3%, 3.41:1). NEITHER can carry body type on a light surface. Only the
 * warm brown family (28% combined) clears AA, at 6.90:1. So the brown does all the
 * light-scheme work and the sage becomes the DARK scheme's accent, where it scores
 * 6.60:1 on the brown ground. Same inversion as informativequotes, driven by the
 * same measurement.
 *
 * SECOND CONSTRAINT, easy to miss: the brand cream #EFF0EB is the logo's own
 * background and the obvious choice for a page ground — but the AA-darkened inks
 * only reach ~3.95:1 on it (slate-ink 3.99, sage-ink 3.99, coral-ink 3.95). Only
 * the brown survives at 6.03:1. Cream is therefore a SECTION TINT and a border
 * colour here, never the body ground. Measured, not assumed.
 *
 * There is no dark colour anywhere in this logo, so --bark is DERIVED: the brown
 * hue walked down to 13.40:1 on white rather than sampled from the artwork.
 */

:root {
    /* Core — measured from Logo/MQ.jpg */
    --bark:        #402926;  /* 13.40:1 vs white - DERIVED dark surface + header (see above) */
    --leaf:        #7A4F49;  /* 6.90:1 on white  - headings, links, buttons (the warm brown) */
    --robe:        #5D7B7E;  /* 4.57:1 on white  - secondary accent, visited links, focus ring.
                                The measured slate #6F9195 is only 3.41:1, so this is it
                                darkened to the lightest value that still clears AA. */
    --amber:       #B2BA90;  /* 2.04:1 on white  - DECORATIVE ONLY in light; 6.60:1 on --bark.
                                (Token keeps the inherited name; the colour is the sage.) */
    --amber-lt:    #EFF0EB;  /* 1.09:1 on white  - the brand cream. DECORATIVE in light;
                                11.73:1 on --bark, 14.23:1 on the header ground. */
    --sage:        #6F9195;  /* 3.41:1 on white  - large text / UI only. Legal as a focus
                                ring: WCAG 1.4.11 non-text contrast is 3:1, not 4.5:1. */
    --coral:       #C16F62;  /* 3.67:1 on white  - large/UI only. The mark's one pop colour
                                (the children's shirts); used for hover, never body text. */

    /* Dark-scheme muted text. NOT --sage: the slate is 3.94:1 on --bark, which fails
     * AA as body copy. This is the slate lightened until it clears, at 4.51:1. The
     * inherited theme reused --sage here and would have shipped that failure. */
    --muted-dark:  #7C9B9F;

    /* Neutrals - a warm ramp, tinted towards the bark so greys sit under the logo */
    --paper:       #FFFFFF;
    --mist:        #FAF8F6;
    --cloud:       #E3E4DE;  /* 1.28:1 - BORDERS + section tint, never text */
    --silver:      #C9BFB8;  /* 1.81:1 - BORDERS ONLY, never text */
    --slate:       #6E7073;  /* 4.97:1 - captions, metadata */
    --graphite:    #43352F;  /* 11.74:1 - body text */

    /* Semantic */
    --bg:          var(--paper);
    --bg-alt:      var(--mist);
    --text:        var(--graphite);
    --text-muted:  var(--slate);
    --heading:     var(--leaf);
    --link:        var(--leaf);
    --border:      var(--cloud);
    --head-bg:     var(--bark);
    --head-text:   var(--amber-lt);
    /* The focus ring is deliberately NOT the link colour. A green ring around a
     * green link is nearly invisible; the purple reads as a distinct affordance.
     * 7.82:1 on white, far past the 3:1 that WCAG 1.4.11 asks of non-text. */
    --focus:       var(--robe);

    --wrap:        1180px;
    --wrap-narrow: 680px;
    --radius:      10px;
    --head-h:      68px;

    /* Ghost 5.87+ injects --gh-font-heading / --gh-font-body when a font is picked
     * in admin. Consuming them with a fallback is what "custom font support"
     * means to gscan, and it lets the site owner change type without a theme
     * deploy. The fallback is a system stack: no webfont means no extra request
     * and no FOUT on a page that already carries AdSense. */
    --font:      var(--gh-font-body, ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --font-head: var(--gh-font-heading, var(--font));
}

/* Dark mode — this is where the sage finally earns its keep.
 *
 * The brown --leaf DISAPPEARS on the bark ground (it is the same hue, ~1.9:1), so
 * it cannot stay the accent here; --amber (the sage) is 6.60:1 on --bark and
 * becomes the heading and link colour. Body text is --amber-lt (the brand cream)
 * at 11.73:1, and 10.27:1 on the alt surface.
 *
 * --text-muted is --muted-dark, NOT --sage. This is the one place the inherited
 * informativequotes theme would have shipped a real accessibility failure: it set
 * --text-muted: var(--sage), and this site's slate is 3.94:1 on this ground. It
 * looks fine and fails AA. Measured, then fixed.
 *
 * Every ratio in this block was computed against the actual token values above. */
@media (prefers-color-scheme: dark) {
    :root[data-scheme="auto"] {
        --bg:         var(--bark);
        --bg-alt:     #4C312D;
        --text:       var(--amber-lt);   /* 11.73:1 on --bark */
        --text-muted: var(--muted-dark); /*  4.51:1 on --bark */
        --heading:    var(--amber);      /*  6.60:1 on --bark */
        --link:       var(--amber);
        --border:     #563833;
        --head-bg:    #2C1C1A;
        --head-text:  var(--amber-lt);   /* 14.23:1 on the header ground */
        /* --robe is a mid slate and nearly vanishes on the bark ground, so the
         * light ring cannot carry over. The brand cream is 11.73:1. */
        --focus:      var(--amber-lt);
    }
}
:root[data-scheme="dark"] {
    --bg:         var(--bark);
    --bg-alt:     #4C312D;
    --text:       var(--amber-lt);
    --text-muted: var(--muted-dark);
    --heading:    var(--amber);
    --link:       var(--amber);
    --border:     #563833;
    --head-bg:    #2C1C1A;
    --head-text:  var(--amber-lt);
    --focus:      var(--amber-lt);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--heading); line-height: 1.25; margin: 0 0 .5em;
}

.wrap        { width: min(100% - 2rem, var(--wrap));        margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, var(--wrap-narrow)); margin-inline: auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--leaf); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ---------- header ---------- */

.site-head {
    background: var(--head-bg);
    color: var(--head-text);
    position: sticky; top: 0; z-index: 50;
}
.site-head-inner {
    display: flex; align-items: center; gap: 1rem;
    min-height: var(--head-h);
}
.site-brand {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--head-text);
    flex: none;
}
/* The circle is baked into the asset, but the radius stays here too: if the
 * owner ever sets @site.logo in admin to a square file, this keeps the header
 * from showing a hard-edged tile. */
.site-badge {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex: none;
    display: block;
}
.site-name {
    font-weight: 700;
    font-size: clamp(1rem, .92rem + .35vw, 1.2rem);
    letter-spacing: -.01em;
    line-height: 1.1;
    white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* {{navigation}} emits its own <ul class="nav"> - style it, never wrap it. */
/* DIRECT CHILD only. As `.site-nav ul` this had specificity (0,1,1) and silently
 * beat `.topics-grid` (0,1,0), forcing the Topics dropdown's grid to lay out as a
 * wrapped flex row — 24 ragged column positions instead of 3 even columns. The
 * rendered page looked plausible; only measuring the item geometry showed it.
 * {{navigation}} emits its <ul class="nav"> as a direct child, so `>` still
 * catches the thing this rule is actually for, and nested lists are left alone. */
.site-nav > ul {
    display: flex; flex-wrap: wrap; gap: .25rem;
    list-style: none; margin: 0; padding: 0;
}
.site-nav a {
    display: block;
    /* WCAG 2.5.8 is AA at 24x24. These boxes clear it with room. */
    padding: .6rem .75rem;
    color: var(--head-text);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .95rem;
}
.site-nav a:hover { background: rgba(255,255,255,.14); }

.nav-toggle {
    display: none; margin-left: auto;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
    padding: 10px;
}
.nav-toggle-bar {
    display: block; height: 2px; background: var(--head-text);
    margin: 4px 0; border-radius: 2px;
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .site-nav {
        display: none;
        flex-basis: 100%; order: 3; margin-left: 0;
        padding-bottom: .75rem;
        flex-direction: column; align-items: flex-start; gap: .25rem;
    }
    .site-nav.is-open { display: flex; }
    /* `>` for the same specificity reason as the base rule above. */
    .site-nav > ul { flex-direction: column; width: 100%; }
    .site-head-inner { flex-wrap: wrap; }
    /* The icon row must stay horizontal even when the menu stacks. */
    .site-social .social-icons { flex-direction: row; }

    /* The Topics panel expands INLINE on mobile. Left absolute it would hang off
     * a stacked menu that is already the full width of the header, and an
     * absolutely-positioned 470px panel is wider than a 390px phone. */
    .topics-menu { width: 100%; }
    .topics-toggle { width: 100%; justify-content: space-between; }
    .topics-panel {
        position: static;
        width: 100%;
        box-shadow: none;
        margin-top: .3rem;
        max-height: 50vh;
    }
}

/* ---------- Topics dropdown ---------- */

.topics-menu { position: relative; }

.topics-toggle {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .6rem .75rem;
    background: none; border: 0; cursor: pointer;
    color: var(--head-text);
    font: inherit; font-weight: 600; font-size: .95rem;
    border-radius: 6px;
}
.topics-toggle:hover { background: rgba(255,255,255,.14); }
.topics-caret { width: 16px; height: 16px; transition: transform .15s ease; }
.topics-toggle[aria-expanded="true"] .topics-caret { transform: rotate(180deg); }

.topics-panel {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(18,33,46,.22);
    padding: .6rem;
    /* 31 tags is too many for one column - and the panel must never exceed the
     * viewport, hence the min() rather than a fixed width. */
    width: min(94vw, 470px);
    max-height: min(70vh, 460px);
    overflow-y: auto;
}
.topics-panel[hidden] { display: none; }

.topics-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem;
    list-style: none; margin: 0; padding: 0;
}
@media (min-width: 520px) { .topics-grid { grid-template-columns: repeat(3, 1fr); } }

.topics-grid a {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-size: .9rem;
    min-height: 36px;
}
.topics-grid a:hover { background: var(--bg-alt); color: var(--link); }
.topics-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topics-count { color: var(--text-muted); font-size: .78rem; flex: none; }

/* ---------- social icons (header + footer) ---------- */

.social-icons {
    display: flex; flex-wrap: wrap; gap: .25rem;
    list-style: none; margin: 0; padding: 0;
}
.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    /* WCAG 2.5.8 is AA at 24x24. 38 gives comfortable touch margin without
     * making the header taller than the 44px badge. */
    width: 38px; height: 38px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.social-icon svg { width: 19px; height: 19px; display: block; }

/* Header: pale icons on the bark bar, brand-tinted hover. */
.site-social .social-icon { color: var(--head-text); }
.site-social .social-icon:hover { background: rgba(255,255,255,.16); }

/* Footer: muted until hovered, then each network takes its own colour. Colour
 * on hover only — eight saturated brand colours sitting permanently in a footer
 * pulls attention away from the content above it. */
.foot-social { margin-bottom: .6rem; }
.foot-social .social-icons { justify-content: center; gap: .3rem; }
.foot-social .social-icon {
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    width: 40px; height: 40px;
}
.foot-social .social-icon:hover { color: #fff; border-color: transparent; }
.foot-social .social-facebook:hover  { background: #1877F2; }
.foot-social .social-instagram:hover { background: #E1306C; }
.foot-social .social-youtube:hover   { background: #FF0000; }
.foot-social .social-x:hover         { background: #000000; }
.foot-social .social-pinterest:hover { background: #E60023; }
.foot-social .social-tumblr:hover    { background: #36465D; }
.foot-social .social-flickr:hover    { background: #FF0084; }
.foot-social .social-email:hover     { background: var(--leaf); }

/* ---------- hero ---------- */

.hero { background: var(--bg-alt); padding: 2.25rem 0 1.75rem; text-align: center; }
.hero-title { margin: 0 0 .35rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.hero-sub   { margin: 0; color: var(--text-muted); }

/* ---------- topic strip ---------- */

.topics { padding: 1.5rem 0 .5rem; }
.topics-head { font-size: 1.05rem; margin-bottom: .75rem; }
.topic-list {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; margin: 0; padding: 0;
}
.topic-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .8rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-size: .9rem;
    min-height: 36px;
}
.topic-chip:hover { border-color: var(--leaf); }
.topic-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    flex: none;
}
.topic-chip-count { color: var(--text-muted); font-size: .8rem; }

/* ---------- card grid ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem 0;
}
.card-grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-media { aspect-ratio: 1 / 1; background: var(--bg-alt); }
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: .85rem .9rem 1rem; }
.card-title {
    font-size: 1rem; margin: .35rem 0 .4rem;
    color: var(--heading);
}
.card-meta { color: var(--text-muted); font-size: .8rem; }

.topic-badge {
    display: inline-block;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--leaf);
    background: var(--cloud);
    padding: .2rem .5rem;
    border-radius: 4px;
}
.topic-badge-link { text-decoration: none; }

/* Cloud is a light fill; on a dark surface the badge needs its own pairing.
 * Sage on the alt surface is 5.78:1 - the one surface where the sage carries type. */
:root[data-scheme="dark"] .topic-badge { background: var(--bg-alt); color: var(--amber); }
@media (prefers-color-scheme: dark) {
    :root[data-scheme="auto"] .topic-badge { background: var(--bg-alt); color: var(--amber); }
}

/* ---------- single post ---------- */

/* NOT `.post` - {{post_class}} stamps `post` onto every grid card too, so a rule
 * written for the single-post wrapper leaks into all 989 cards. */
.single { padding-block: 1.75rem 2.5rem; }

.post-head { text-align: center; }
.post-title { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.1rem); margin: .5rem 0 .35rem; }
.post-meta { color: var(--text-muted); font-size: .875rem; }
.post-meta .dot { margin: 0 .4rem; }

.post-media { margin: 1.25rem auto; }
.post-img { border-radius: var(--radius); margin-inline: auto; }
.post-media figcaption {
    text-align: center; color: var(--text-muted);
    font-size: .85rem; margin-top: .5rem;
}

/* Spacing via `> * + *`, NOT `p { margin: 0 }`. A bare `p` rule out-specifies
 * nothing and a `margin:0` reset silently deletes every paragraph gap. */
.post-content > * + * { margin-top: 1.05em; }
.post-content { font-size: 1.0625rem; }

/* The WordPress bodies wrapped whole paragraphs in <strong> as a styling habit.
 * preprocess.py unwraps 3,243 of those blocks, but any that survive must not
 * repaint the article - inherit, do not set a colour or a weight. */
.post-content strong { color: inherit; }

.post-content a { color: var(--link); }
.post-content blockquote {
    margin: 1.25em 0; padding: .75em 1.1em;
    background: var(--bg-alt);
    border-left: 4px solid var(--leaf);
    border-radius: 0 6px 6px 0;
}
.post-content img { border-radius: 8px; margin-inline: auto; }

/* Ghost card widths. gscan ERRORS if these are absent, even when no post uses
 * one - card_assets:true means Ghost expects the theme to own them. */
.kg-width-wide { max-width: 1040px; margin-inline: auto; }
.kg-width-full { max-width: 100vw; margin-inline: calc(50% - 50vw); }
.kg-image { margin-inline: auto; }
.kg-embed-card { display: flex; justify-content: center; }

.post-tags { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.post-tags-label { color: var(--text-muted); font-size: .85rem; margin-right: .25rem; }
.tag-pill {
    display: inline-block; padding: .35rem .7rem;
    border: 1px solid var(--border); border-radius: 999px;
    text-decoration: none; font-size: .85rem; color: var(--text);
    min-height: 30px;
}
.tag-pill:hover { border-color: var(--leaf); }

/* ---------- share ---------- */

.share { margin-top: 1.75rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.share-label { color: var(--text-muted); font-size: .85rem; }
.share-list { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    /* WCAG 2.5.8 AA minimum is 24x24; 40 gives comfortable margin on touch. */
    width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--leaf);
    cursor: pointer;
}
.share-btn svg { width: 20px; height: 20px; }
.share-btn:hover { border-color: var(--leaf); background: var(--bg-alt); }
.share-copied { font-size: .75rem; }

/* ---------- related ---------- */

.related { padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--border); }
.related-head { font-size: 1.15rem; }

/* ---------- archives ---------- */

.archive-head { background: var(--bg-alt); padding: 1.75rem 0 1.5rem; }
.archive-kind {
    text-transform: uppercase; letter-spacing: .06em;
    font-size: .72rem; font-weight: 700; color: var(--text-muted);
}
.archive-title { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); margin: .2rem 0 .3rem; }
.archive-sub { margin: 0 0 .3rem; color: var(--text-muted); }
.archive-count { margin: 0; color: var(--text-muted); font-size: .875rem; }

.pagination {
    display: flex; justify-content: center; align-items: center; gap: 1rem;
    padding: 1rem 0 2.5rem;
}
.pagination a {
    padding: .6rem 1rem; border: 1px solid var(--border);
    border-radius: 8px; text-decoration: none;
}
.page-number { color: var(--text-muted); font-size: .9rem; }

/* ---------- ads ----------
 *
 * Units on this site are RESPONSIVE, not fixed IAB sizes. That is the opposite
 * of the wisdomquotes4u / amazingfacts4u themes, and it is not a preference:
 * pub-7794464872982392's own 30-day report shows every unit that earns anything
 * is Responsive and every fixed-size unit sits at or near zero.
 *
 * Responsive means the height is unknown until fill, so the layout shift has to
 * be solved HERE instead. Reserve height per breakpoint - min-height, not fixed
 * height, so a taller fill does not clip.
 */
.ad-slot {
    display: flex; align-items: center; justify-content: center;
    margin: 1.5rem auto;
    min-height: 280px;
    overflow: hidden;
}
@media (min-width: 782px) { .ad-slot { min-height: 250px; } }

.ad-slot .adsbygoogle { width: 100%; }

/* An in-feed unit must span the whole grid. Left inside a single cell it
 * stretches its row and widens every card in it - which is how a 300px unit
 * once overflowed a 320px page while the harness blamed the card. */
.ad-infeed { grid-column: 1 / -1; }
/* Google's own guidance: in-feed containers must have VARIABLE height. */
.ad-infeed { min-height: 0; }

.ad-inarticle { clear: both; }

/* ---------- footer ---------- */

.site-foot {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
    padding: 1.75rem 0;
}
.site-foot-inner { text-align: center; }
.foot-brand { font-weight: 700; color: var(--heading); margin: 0 0 .5rem; }
.foot-nav ul {
    display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center;
    list-style: none; margin: 0 0 .5rem; padding: 0;
}
.foot-nav a {
    display: block; padding: .5rem .7rem;
    color: var(--text); text-decoration: none; font-size: .9rem;
}
.foot-legal { color: var(--text-muted); font-size: .82rem; margin: 0; }

/* ---------- error ---------- */

.error-page { text-align: center; padding: 3rem 0 4rem; }
.error-code { font-size: 3rem; font-weight: 800; color: var(--leaf); margin: 0; }
.error-title { margin: .25rem 0 .5rem; }
.error-sub { color: var(--text-muted); }
.btn {
    display: inline-block; padding: .7rem 1.2rem;
    background: var(--leaf); color: #fff;
    border-radius: 8px; text-decoration: none; font-weight: 600;
}