/* ==========================================================================
   Enlightening Quotes — Ghost theme
   Forked from wisdom-quotes-4u v1.7.0. Structure, ad logic and accessibility
   work are inherited; the palette is this site's own.

   Palette MEASURED from Logo/"Enlightening Quotes.png" (the sunrise badge:
   navy disc, sunrise arcs, mountain, lightbulb, stacked books) by
   measure-palette-full.py, and every pairing below was checked numerically by
   validate-palette.py before it was written here.

   WHY A SECOND MEASURING SCRIPT EXISTED: the fleet's measure-palette.py filters
   to CHROMATIC MID-TONE pixels, which is right on most of these logos. On this
   one it dropped the navy entirely — the disc and the wordmark are dark enough
   to fall outside the band — and returned twelve oranges and browns with not one
   navy in them. A palette that looked plausible and was missing the brand
   colour. Navy is ~32% of the non-background pixels here.

   Contrast ratios below are against THIS theme's actual surfaces, not white.
   That distinction is the whole reason wisdomquotes4u shipped an AA failure:
   a gold was adopted on a "4.58:1 — text-safe" note measured against pure
   white, then painted on a cream background where it was 4.24:1.
   ========================================================================== */

:root {
    /* --- measured brand colours --- */
    --eq-ink:        #00202F;  /* 16.29:1 on --eq-paper — body copy        */
    --eq-brown:      #4F1E10;  /* 13.32:1 on paper, 9.01:1 on cream        */
    --eq-brown-soft: #A35119;  /*  5.42:1 on paper — hover / borders       */
    --eq-navy:       #1E3842;  /* 11.96:1 on paper — accents, tag pills    */
    --eq-rust:       #C45B0C;  /*  4.19:1 — DECORATIVE ONLY, never text    */
    /* --eq-rust is the LARGEST single colour in the logo (15.8% — the sunrise
       arc), which makes it the obvious choice for links and buttons. It is
       4.19:1 on --eq-paper and therefore fails AA body text (4.5) by a margin
       too small to notice by eye and too large to ignore. It clears the 3:1
       that WCAG 1.4.11 asks of non-text UI, so it is kept for rules, icons and
       large display type only. --eq-rust-ink is the text-safe member of the
       same family, taken from the darker arc band rather than invented.       */
    --eq-rust-ink:   #A35119;  /*  5.42:1 on paper, 4.87:1 on surface      */
    --eq-surface:    #F7EEDF;  /* cards — derived: measured cream lightened
                                  until ink AND rust-ink both clear AA      */
    --eq-paper:      #FDFBF7;  /* page background — near-white, warmed      */
    /* The badge's warm cream page-edge, at full measured saturation. Used ONCE,
       on .sections, exactly as wisdomquotes4u used its mist band.
       HARD RULE: this band carries --eq-ink or --eq-brown ONLY.
       --eq-rust-ink on it is 3.67:1 and fails AA — even though the same colour
       is fine on paper (5.42) and on surface (4.87). That is the trap this
       fleet has now hit twice; the constraint is on the USAGE, not the colour,
       because darkening rust-ink until it cleared 4.5 here would take it to
       roughly --eq-brown's luminance and collapse the two into one.           */
    --eq-cream:      #F0CC8F;  /*  one feature band per page, nothing else */
    --eq-white:      #FFFFFF;

    --eq-text:       var(--eq-ink);
    --eq-muted:      #5E6B68;  /*  5.38:1 on paper — the mountain face      */
    --eq-accent:     var(--eq-brown);

    --wrap:      1180px;
    --wrap-narrow: 720px;
    --radius:    10px;
    --gap:       clamp(1rem, 2.5vw, 1.75rem);
    --tap:       44px;         /* WCAG 2.5.8 target size                  */

    /* Ghost injects --gh-font-heading / --gh-font-body when custom fonts are
       chosen in admin; fall back to a fast system stack when they are not. */
    --font-body: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --font-head: var(--gh-font-heading, Georgia, "Iowan Old Style", "Times New Roman", serif);

    /* Shadow tint follows --eq-ink (navy) rather than wq4u's near-black brown. */
    --shadow-sm: 0 1px 2px rgba(0,32,47,.06), 0 2px 8px rgba(0,32,47,.05);
    --shadow-md: 0 4px 16px rgba(0,32,47,.10);
}

body.accent-navy { --eq-accent: var(--eq-navy); }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--eq-paper);
    color: var(--eq-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* <picture> defaults to display:inline, which would become the img's containing
   block and break every rule below that sizes or centres the img directly
   (.quote-card-img height:100%, .post-media img margin-inline:auto). */
picture { display: block; }
a { color: var(--eq-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--eq-brown-soft); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--eq-ink); margin: 0 0 .5em; }

/* WCAG 1.4.11 asks 3:1 of a focus indicator, not the 4.5:1 a text colour needs.
   outline-offset puts a 2px gap between the ring and the element, so the ring's
   neighbour on both sides is the container background, never a button fill —
   which is why the ring on an --eq-brown button is not the comparison that
   matters. Re-measured for this palette: --eq-rust-ink rings at 5.42:1 on
   --eq-paper and 4.87:1 on --eq-surface, both well clear of 3:1. On the dark
   footer the ring switches to --eq-amber territory via --eq-cream; see the
   footer block. (wq4u's note claimed 4.50:1 worst case — that was its gold on
   its cream and does not describe this theme.) */
:focus-visible {
    outline: 3px solid var(--eq-rust-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

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

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

/* --- header ------------------------------------------------------------- */
.site-head {
    background: var(--eq-white);
    border-bottom: 3px solid var(--eq-surface);
    position: sticky; top: 0; z-index: 40;
}
.site-head-inner {
    display: flex; align-items: center; gap: 1rem;
    min-height: 68px; padding-block: .5rem;
    flex-wrap: wrap;
}
.site-brand {
    display: flex; align-items: center; gap: .7rem;
    text-decoration: none; color: inherit; margin-right: auto;
    min-height: var(--tap);
}
.site-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.site-brand-text { display: flex; flex-direction: column; }
.site-title {
    font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
    color: var(--eq-brown); line-height: 1.1;
}
.site-tagline { font-size: .78rem; color: var(--eq-muted); line-height: 1.25; }

.nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: var(--tap); height: var(--tap);
    background: none; border: 1px solid var(--eq-surface); border-radius: 8px;
    cursor: pointer; padding: 0 10px;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--eq-brown); border-radius: 2px; }

/* {{navigation}} emits its own <ul class="nav"> — style that, never wrap it
   in another <ul> or you get nested lists and stray bullet markers. */
.site-nav { flex-basis: 100%; display: none; }
.site-nav.is-open { display: block; }
/* CHILD combinator, not descendant. .site-nav now holds two lists — {{navigation}}'s
   <ul class="nav"> as a direct child, and .social-icons nested inside .site-social.
   Written as `.site-nav ul` and `.site-nav li a` these rules also captured the icon
   row: flex-direction:column stacked the three icons vertically in the open mobile
   menu, and min-height/padding/border-radius turned the 38px circles into 38x44
   pills with a hairline under each. Measured, not guessed. */
.site-nav > ul {
    list-style: none; margin: .5rem 0 0; padding: 0;
    display: flex; flex-direction: column;
}
.site-nav > ul li { list-style: none; }
.site-nav > ul li a {
    display: flex; align-items: center; min-height: var(--tap);
    padding: 0 .25rem; text-decoration: none; font-weight: 600;
    color: var(--eq-ink); border-bottom: 1px solid var(--eq-surface);
}
.site-nav > ul li a:hover { color: var(--eq-brown); }

/* In the stacked mobile menu the icon row sits under the links, separated by the
   same hairline the links use. .social-icons is already a flex row, so it stays
   horizontal while the nav list is a column. */
.site-social { padding-top: .5rem; }

@media (min-width: 800px) {
    .nav-toggle { display: none; }
    /* flex, NOT block: .site-nav now has two children — {{navigation}}'s <ul> and
       the icon row — and block would stack them, dropping the icons onto a second
       line under the menu. */
    /* .is-open must be repeated here. A media query adds NO specificity, so the
       base `.site-nav.is-open { display: block }` (0,2,0) outranks a bare
       `.site-nav` (0,1,0) even inside this block. With one child that was
       harmless; now .site-nav has two, and block stacks them — a reader who opens
       the menu on a phone and then rotates to landscape got a 101px header with
       the icons on their own row. Measured by forcing .is-open at every width. */
    .site-nav,
    .site-nav.is-open { display: flex; align-items: center; gap: .6rem; flex-basis: auto; }
    .site-nav > ul { flex-direction: row; gap: .35rem; margin: 0; }
    .site-nav > ul li a { border-bottom: 0; padding-inline: .85rem; border-radius: 8px; }
    .site-nav > ul li a:hover { background: var(--eq-surface); }
    .site-social { padding-top: 0; border-left: 1px solid var(--eq-surface); padding-left: .6rem; }
}

/* The icons only join the inline nav row once there is room for them.
   Measured against PRODUCTION's six-item menu — staging carries only Home+About,
   so measuring there would have passed this and shipped the regression. At 900px
   the six items plus three icons wrapped .site-nav onto a second line and the
   header went 71 -> 125px; at 1024 it fits. Below 800 they live in the collapsed
   menu, which has room, so only this middle band is excluded.
   Separately and NOT caused by this: the live header ALREADY wraps to 125px at
   820px with six items and no icons. Pre-existing, left alone here. */
@media (min-width: 800px) and (max-width: 1023px) {
    .site-nav .site-social { display: none; }
}

/* --- hero --------------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, var(--eq-surface) 0%, var(--eq-paper) 100%);
    padding-block: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    border-bottom: 1px solid rgba(79,30,16,.10);
}
.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: var(--eq-brown); margin-bottom: .3em;
}
.hero-sub {
    margin: 0 auto; max-width: 46ch; color: var(--eq-muted);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
}

/* --- grid of quote cards ------------------------------------------------ */
.quote-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start;          /* size cards to content, not to tallest sibling */
    padding-block: clamp(1.5rem, 4vw, 2.75rem);
}
@media (min-width: 560px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }

.quote-card {
    background: var(--eq-white);
    border: 1px solid rgba(79,30,16,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.quote-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.quote-card-link { text-decoration: none; color: inherit; display: block; }
.quote-card-media { aspect-ratio: 1 / 1; background: var(--eq-surface); }
/* the picture must fill the aspect-ratio box, or the img's height:100% has no
   definite height to resolve against and the card collapses */
.quote-card-media picture { width: 100%; height: 100%; }
.quote-card-img { width: 100%; height: 100%; object-fit: cover; }

.quote-card-title {
    font-size: 1.02rem; line-height: 1.4; margin: 0;
    padding: .85rem 1rem 1rem;
    color: var(--eq-ink); font-family: var(--font-body); font-weight: 600;
}
.quote-card-link:hover .quote-card-title { color: var(--eq-brown); }

.quote-card-tag {
    align-self: flex-start;
    margin: 0 1rem 1rem;
    font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
    font-weight: 700; color: var(--eq-navy); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 28px;
}
.quote-card-tag:hover { text-decoration: underline; }

/* --- archive heads ------------------------------------------------------ */
.archive-head {
    background: var(--eq-surface);
    padding-block: clamp(1.75rem, 5vw, 2.75rem);
    border-bottom: 1px solid rgba(79,30,16,.12);
    text-align: center;
}
.archive-kicker,
.post-kicker {
    display: inline-block;
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--eq-navy); text-decoration: none;
    margin-bottom: .4rem;
}
.post-kicker { min-height: 28px; }
.archive-title { font-size: clamp(1.7rem, 4.5vw, 2.5rem); color: var(--eq-brown); }
.archive-desc { max-width: 55ch; margin-inline: auto; color: var(--eq-muted); }
.archive-count { font-size: .9rem; color: var(--eq-muted); margin: .25rem 0 0; }

/* --- single post -------------------------------------------------------- */
/* NB: must NOT be `.post` — Ghost's {{post_class}} stamps `post` onto every
   card in the grid, so a `.post` rule leaks padding into every card. */
.single { padding-block: clamp(1.75rem, 5vw, 3rem); }
.post-head { text-align: center; margin-bottom: 1.75rem; }
.post-title { font-size: clamp(1.6rem, 4.5vw, 2.4rem); color: var(--eq-brown); }
.post-meta { color: var(--eq-muted); font-size: .9rem; margin: 0; }

.post-media { margin: 0 0 1.75rem; }
.post-media img {
    margin-inline: auto; border-radius: var(--radius);
    box-shadow: var(--shadow-md); background: var(--eq-surface);
}
.post-media figcaption {
    text-align: center; font-size: .85rem; color: var(--eq-muted); margin-top: .6rem;
}

.post-content { font-size: 1.09rem; }
/* Reset via the child combinator only. A plain `.post-content p { margin: 0 }`
   out-specifies `> * + *` and silently removes every paragraph gap. */
.post-content > * { margin: 0; }
.post-content > * + * { margin-top: 1.15em; }
/* The imported WordPress content wraps whole paragraphs in <strong>, so this
   must NOT recolour — tinting it turned every post body into bold brown. */
.post-content strong { color: inherit; }
.post-content h2, .post-content h3 { margin-top: 1.8em; color: var(--eq-brown); }
.post-content img { border-radius: var(--radius); margin-inline: auto; }
.post-content blockquote {
    margin: 1.6em 0; padding: .6em 0 .6em 1.25em;
    border-left: 4px solid var(--eq-rust);   /* decorative use of gold — not text */
    color: var(--eq-ink); font-style: italic;
}
.post-content a { color: var(--eq-brown); }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content hr { border: 0; border-top: 1px solid var(--eq-surface); margin: 2em 0; }

/* --- Koenig editor cards ------------------------------------------------ */
/* Ghost's editor emits these widths; they must be styled or content breaks
   out of, or is trapped inside, the narrow column. */
.post-content .kg-card { margin-block: 1.6em; }

.post-content .kg-width-wide {
    width: min(100vw - 2rem, 1000px);
    max-width: none;
    margin-inline: calc(50% - min(50vw - 1rem, 500px));
}
.post-content .kg-width-full {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}
.post-content .kg-width-full img,
.post-content .kg-width-wide img { width: 100%; border-radius: 0; }
.post-content .kg-width-wide img { border-radius: var(--radius); }

.post-content .kg-image-card figcaption,
.post-content .kg-embed-card figcaption {
    text-align: center; font-size: .85rem; color: var(--eq-muted); margin-top: .6rem;
}
.post-content .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.post-content .kg-gallery-row { display: flex; gap: .6rem; }
.post-content .kg-gallery-image img { width: 100%; }
.post-content .kg-bookmark-card a {
    display: flex; flex-direction: column; border: 1px solid var(--eq-surface);
    border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
}
.post-content .kg-bookmark-content { padding: 1rem; }
.post-content .kg-bookmark-title { font-weight: 700; color: var(--eq-brown); }
.post-content .kg-bookmark-description { color: var(--eq-muted); font-size: .92rem; }

/* The seven classes below are what gscan reported as ERRORS on wisdom-quotes-4u
   from v1.4.1 onward, and that theme still ships with them. They are a consequence
   of card_assets:false: with Ghost's own cards.min.css suppressed, the theme owes
   a style for every Koenig class, including cards this site will never use.
   wq4u's position was that Ghost activates the theme anyway because a gscan error
   is not fatal. That is true and it is still the wrong trade — a theme carrying
   seven permanent "known-ignorable" errors teaches you to skim the next scan, and
   the next scan is where a real regression shows up.
   Styled properly rather than stubbed: this site has 0 gallery cards and 0 bookmark
   cards today, but if one is ever added it should look deliberate instead of
   unstyled. Costs ~20 lines and makes the scan mean something. */
.post-content .kg-gallery-container { display: flex; flex-direction: column; gap: .6rem; }
.post-content .kg-bookmark-container { display: flex; flex-direction: column; }
.post-content .kg-bookmark-metadata {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    margin-top: .6rem; font-size: .85rem; color: var(--eq-muted);
}
.post-content .kg-bookmark-icon { width: 20px; height: 20px; margin-right: .25rem; }
.post-content .kg-bookmark-author { font-weight: 600; color: var(--eq-ink); }
.post-content .kg-bookmark-publisher { color: var(--eq-muted); }
.post-content .kg-bookmark-publisher::before { content: "•"; margin-right: .4rem; }
.post-content .kg-bookmark-thumbnail { flex-shrink: 0; }
.post-content .kg-bookmark-thumbnail img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.post-content .kg-button-card { display: flex; justify-content: center; }
.post-content .kg-btn {
    display: inline-flex; align-items: center; min-height: var(--tap);
    padding: 0 1.5rem; background: var(--eq-brown); color: var(--eq-white);
    border-radius: 999px; text-decoration: none; font-weight: 600;
}

.post-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.tag-pill {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 .85rem;
    background: var(--eq-surface); color: var(--eq-brown);
    border-radius: 999px; text-decoration: none;
    font-size: .85rem; font-weight: 600;
}
.tag-pill:hover { background: var(--eq-brown); color: var(--eq-white); }

/* --- share -------------------------------------------------------------- */
/* Plain links to each network's share endpoint — no vendor JavaScript. A share
   widget would add third-party script to a page that already carries AdSense,
   and INP is the metric ad scripts damage most.
   Buttons are 44px, well clear of the WCAG 2.5.8 AA floor of 24x24. */
.share {
    margin-top: 2.25rem; padding-top: 1.5rem;
    border-top: 1px solid var(--eq-surface);
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
}
.share-label {
    font-weight: 700; font-size: .9rem; color: var(--eq-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.share-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.share-list li { list-style: none; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: var(--tap); height: var(--tap); padding: 0;
    background: var(--eq-surface); color: var(--eq-brown);
    border: 0; border-radius: 999px; 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 against white, which is the
   non-text contrast requirement for an icon. */
.share-whatsapp:hover  { background: #128C7E; color: var(--eq-white); }
.share-facebook:hover  { background: #1877F2; color: var(--eq-white); }
.share-x:hover         { background: #000000; color: var(--eq-white); }
.share-pinterest:hover { background: #BD081C; color: var(--eq-white); }
.share-copy:hover      { background: var(--eq-brown); color: var(--eq-white); }
.share-copy.is-copied  { background: var(--eq-navy); color: var(--eq-white); width: auto; padding: 0 .9rem; }
.share-copied { font-size: .8rem; font-weight: 600; }
.share-copy .share-copied:empty { display: none; }

/* --- ads ---------------------------------------------------------------- */
/* Fixed IAB sizes. data-ad-format="auto" stamps height:auto on the wrapper
   and leaves an unfilled gap — see the Delightful Quotes theme notes. */
.ad-slot { margin: 2rem auto; text-align: center; }

/* Archive slots span the whole grid row rather than taking one card cell.
   Viewability is this account's real problem (31.5%), and a full-width break is
   far more visible than one slot in a three-column grid — and it collapses
   cleanly on an unfilled impression instead of leaving a hole mid-grid.
   Heights are reserved at every breakpoint so an unfilled slot leaves a stable
   gap and never shoves the cards below it. */
/* The 180px that used to be here was a guess and it was far too small. Measured
   live on 2026-08-03, the fluid unit stamps its own inline height on the <ins>:
   306px at one column, 488px at two, 731px at three. Two of these per archive, so
   up to 1,462px of desktop content was being shoved down mid-load — that is the
   whole of the desktop CLS 1.0, and the 0.209 that surfaced on mobile the moment
   the LCP fix made the page fast enough for the ads to expand inside the
   measurement window. Reserving costs nothing visually: AdSense expands the slot
   to these heights whether or not it fills, so the space is already there. */
.ad-infeed  { grid-column: 1 / -1; min-height: 306px; margin: 0; }
@media (min-width: 560px) { .ad-infeed { min-height: 488px; } }
@media (min-width: 960px) { .ad-infeed { min-height: 731px; } }
.ad-display { grid-column: 1 / -1; min-height: 250px; margin: 0; }
.ad-display .adsbygoogle { max-width: 100%; }

/* A fixed 300px unit cannot shrink, and .wrap takes 2rem of gutters, so below
   360px the ad forces the grid wider than the viewport — measured at 320px as an
   11px horizontal overflow, which also stretched every card in its row. Give the
   ad row its gutters back on those screens; 300px then fits with room to spare. */
@media (max-width: 359px) {
    .ad-display { margin-inline: -1rem; }
}

/* Fluid in-article unit — no fixed box, or the format cannot size itself.
   min-height reserves room so the ad does not shove the text down when it loads.
   250px is roughly what this unit renders at; the cost of reserving is a gap on
   the rare unfilled impression, which is the better trade against layout shift. */
.ad-slot-inarticle { display: block; width: 100%; min-height: 250px; }

/* --- related / sections ------------------------------------------------- */
.related { background: var(--eq-surface); border-top: 1px solid rgba(79,30,16,.10); }
.section-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--eq-brown);
    text-align: center; padding-top: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 0;
}

/* Section navigation. Ghost tags are flat, so a "section" is just a tag worth
   promoting. Counts are shown because they are the honest signal of where the
   archive actually is — and because they make the strip useful rather than
   decorative. Chips are 44px tall for the same tap-target reason as .share-btn. */
/* The one Morning Mist surface. It was --eq-surface, the same tone as .related,
   .archive-head, the card media wells and the tag pills — so the strip had no
   identity of its own. Mist separates it from all of those, and it is the only
   place in the theme that carries the cool half of the badge.
   Renders on index.hbs and tag.hbs only, so a post page still has exactly one
   band (.related, cream) and the home and tag pages have exactly one each. */
.sections {
    margin-top: 3rem;
    background: var(--eq-cream);
    border-block: 1px solid rgba(79,30,16,.10);
    padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.hero + .sections { margin-top: 0; }
.section-list {
    list-style: none; margin: 1.25rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.section-list li { list-style: none; }
.section-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: var(--tap); padding: 0 .5rem 0 1rem;
    background: var(--eq-white); color: var(--eq-brown);
    border: 1px solid rgba(79,30,16,.12); border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: .92rem;
}
.section-chip:hover { background: var(--eq-brown); color: var(--eq-white); border-color: var(--eq-brown); }
.section-chip-count {
    font-size: .75rem; font-weight: 700;
    background: var(--eq-surface); color: var(--eq-muted);
    border-radius: 999px; padding: .15rem .55rem;
}
.section-chip:hover .section-chip-count { background: rgba(255,255,255,.18); color: var(--eq-white); }

/* --- pagination --------------------------------------------------------- */
.pagination {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding-block: 2rem 3rem; font-size: .95rem;
}
.pagination a {
    display: inline-flex; align-items: center; min-height: var(--tap);
    padding: 0 1.1rem; background: var(--eq-white);
    border: 1px solid var(--eq-brown); border-radius: 999px;
    color: var(--eq-brown); text-decoration: none; font-weight: 600;
}
.pagination a:hover { background: var(--eq-brown); color: var(--eq-white); }
.page-number { color: var(--eq-muted); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: 0 1.5rem;
    background: var(--eq-brown); color: var(--eq-white);
    border-radius: 999px; text-decoration: none; font-weight: 600;
}
.btn:hover { background: var(--eq-ink); color: var(--eq-white); }

/* --- error -------------------------------------------------------------- */
.error-page { text-align: center; padding-block: clamp(2.5rem, 8vw, 5rem); }
.error-code { font-family: var(--font-head); font-size: 4rem; color: var(--eq-rust-ink); margin: 0; }
.error-title { font-size: clamp(1.4rem, 4vw, 2rem); color: var(--eq-brown); }
.error-help { color: var(--eq-muted); }

/* --- footer ------------------------------------------------------------- */
.site-foot {
    background: var(--eq-ink); color: #E8DED8;
    margin-top: 3rem; padding-block: clamp(2rem, 5vw, 3rem);
}
.site-foot a { color: #F0E4D2; }
.foot-heading { color: var(--eq-white); font-size: 1.05rem; margin-bottom: .9rem; }
.tag-cloud { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.site-foot .tag-pill {
    background: rgba(255,255,255,.10); color: #F3E9DD;
}
.site-foot .tag-pill:hover { background: var(--eq-rust-ink); color: var(--eq-white); }
.foot-meta {
    border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.25rem;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    align-items: center; justify-content: space-between;
}
.foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; }
.foot-nav li { list-style: none; }
.foot-nav li a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-copy { margin: 0; font-size: .88rem; color: #C9BAB2; }

/* --- social icons ------------------------------------------------------- */
/* One partial serves both places: a compact three in the header nav and the full
   set in the footer. Ported from wisdom-life-quotes v1.2.1. Class names match that
   theme deliberately, so the fleet has one vocabulary for this component. */
.social-icons {
    display: flex; flex-wrap: wrap; gap: .25rem;
    list-style: none; margin: 0; padding: 0;
}
.social-icons li { list-style: none; }
.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    /* WCAG 2.5.8 is AA at 24x24. 38 clears it with margin without making the
       header taller than the 46px logo. The footer set gets --tap below. */
    width: 38px; height: 38px;
    border-radius: 50%;
    color: inherit; text-decoration: none;
}
.social-icon svg { width: 19px; height: 19px; display: block; }

/* Header: this theme's bar is WHITE, not navy like wisdom-life-quotes, so the
   icons take the nav's ink and lift on a cream wash rather than a white one. */
.site-social .social-icon { color: var(--eq-ink); }
.site-social .social-icon:hover { background: var(--eq-surface); color: var(--eq-brown); }

/* Footer: two class selectors, so this beats the .site-foot a colour rule above. */
.foot-social { margin-bottom: 1.75rem; }
.foot-social .social-icons { gap: .5rem; }
.site-foot .social-icon {
    width: var(--tap); height: var(--tap);
    background: rgba(255,255,255,.10); color: #F3E9DD;
}
.site-foot .social-icon svg { width: 20px; height: 20px; }
/* Hover inverts to a white disc with the brand colour as the glyph, rather than
   the brand-coloured disc wisdom-life-quotes uses. That theme's footer is a light
   surface; this one is near-black, where X's #000 and Tumblr's #36465D as
   backgrounds read as a hole punched in the page. Same pattern, different ground. */
.site-foot .social-icon:hover      { background: var(--eq-white); }
.site-foot .social-facebook:hover  { color: #1877F2; }
.site-foot .social-instagram:hover { color: #C13584; }
.site-foot .social-x:hover         { color: #000000; }
.site-foot .social-pinterest:hover { color: #BD081C; }
.site-foot .social-youtube:hover   { color: #FF0000; }
.site-foot .social-tumblr:hover    { color: #36465D; }
/* Flickr is new in this theme — wisdom-quotes-4u has no Flickr account, so the
   partial it was forked from had no icon and this file had no rule. #FF0084 is
   Flickr's pink; it sits on the WHITE hover disc, not on the navy footer, so the
   comparison that matters is 3.76:1 on white — clear of the 3:1 WCAG 1.4.11 asks
   of a non-text indicator, and the tightest margin of any icon in this row.
   Measured, not estimated: against --eq-ink it would read 4.48:1, which is the
   more flattering number and the wrong one. Do not quote it. */
.site-foot .social-flickr:hover    { color: #FF0084; }
.site-foot .social-email:hover     { color: var(--eq-brown); }

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .quote-card:hover { transform: none; }
}