/* ==========================================================================
   Wisdom Quotes & Stories — Ghost theme
   Forked from wisdom-love-quotes v1.0.0. Structure and accessibility work are
   inherited; the palette is measured from this site's own logo and THE AD
   PIPELINE IS REMOVED ENTIRELY.

   NO ADS, BY DECISION. This site is not on our AdSense — its ads.txt is
   media.net (8CU808IUG) and pub-7439041255533808 appears only as a media.net
   RESELLER line. Rather than renumber an AdSense slot that does not exist here,
   the loader, the in-article unit, the archive units, their CSS and their
   package.json settings were all DELETED. ads.txt is still served unchanged, so
   media.net authorisation survives for whenever monetisation is decided.

   The site was nearly skipped entirely: it was recorded as a 1-post parked
   domain because its table prefix is a2mps2_ and wp_posts is a stale 2018 decoy
   holding one row. It actually has 1,244 posts — the largest in the fleet.
   ========================================================================== */

:root {
    /* --- palette, QUANTISED FROM THE LOGO -----------------------------------
       This site has NO brand kit and no custom WordPress theme, so unlike the
       last four there was nothing to copy. The colours were measured out of
       uploads/2015/03/WisdomQuotesAndStories-logo.png (a 502x82 script wordmark:
       violet type, grey "and", lavender ellipse, doves) and every pairing below
       was then computed, not eyeballed. Ratios are against WHITE, the page.

       Violet/lavender is unlike any other site in this fleet — the others are
       browns, teals, navies and a heart red — so nothing here is inheritable.  */
    --wqs-ink:        #23007B;  /* 15.47:1 on white — body copy              */
    --wqs-brown:      #845DC4;  /*  4.83:1 — THE ACCENT                      */
    /* Hover darkens within the same violet family; #50308D was measured in the
       logo, not derived by darkening the accent by eye.                       */
    --wqs-brown-soft: #50308D;  /*  9.77:1 — hover                           */
    --wqs-navy:       #525057;  /*  7.94:1 — the wordmark's grey "and"        */
    --wqs-rust:       #D9B2FF;  /*  1.79:1 — the ellipse. DECORATIVE ONLY.   */
    /* --wqs-rust is the lavender ellipse and the single largest colour in the
       logo (15.7%), which makes it the tempting accent. At 1.79:1 it fails AA
       text by a mile and does not even clear the 3:1 of WCAG 1.4.11, so it
       cannot carry a focus ring either. Fills and large display type only.     */
    --wqs-rust-ink:   #845DC4;  /*  4.83:1 — the text-safe member            */
    --wqs-surface:    #FBF8FF;  /*  card face, a breath of violet on white   */
    --wqs-paper:      #FFFFFF;  /*  page ground                              */
    /* THE BAND TRAP, FIFTH SITE, FIFTH SET OF COLOURS. --wqs-brown is 4.83:1 on
       the page and 4.60:1 on a card but only **3.19:1 on this band** — it fails
       AA there while passing everywhere else. It still clears the 3:1 a focus
       ring needs, so the ring stays accent-coloured and only TEXT is
       constrained. HARD RULE: this band carries --wqs-ink or --wqs-gold-ink.   */
    --wqs-cream:      #E2C8FA;  /*  one feature band per page, nothing else  */
    --wqs-white:      #FFFFFF;

    /* Alternate accent: the deepest measured violet, 13.35:1 on white. */
    --wqs-gold-ink:   #300097;

    --wqs-text:       var(--wqs-ink);
    --wqs-muted:      #525057;  /*  7.94:1 — meta, bylines                   */
    --wqs-accent:     var(--wqs-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 --wqs-ink (#23007B, the wordmark violet). */
    --shadow-sm: 0 1px 2px rgba(35,0,123,.06), 0 2px 8px rgba(35,0,123,.05);
    --shadow-md: 0 4px 16px rgba(35,0,123,.10);
}

body.accent-deep { --wqs-accent: var(--wqs-gold-ink); }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--wqs-paper);
    color: var(--wqs-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(--wqs-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wqs-brown-soft); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--wqs-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 --wqs-brown button is not the comparison that
   matters. Re-measured for THIS palette: --wqs-rust-ink (#845DC4) rings at
   4.83:1 on the white page, 4.60:1 on a card and 3.19:1 on the .sections band — and the band
   figure STILL clears the 3:1 that 1.4.11 asks, so the ring is correct on a
   band where TEXT in the same colour is not. That is precisely why 1.4.11 and
   1.4.3 set different thresholds, and why the band rule above constrains text
   without touching the focus ring.
   The inherited note quoted 5.03/5.79 for an orange on cream — another site's
   numbers, and they would have read as verified. */
:focus-visible {
    outline: 3px solid var(--wqs-rust-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--wqs-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(--wqs-white);
    border-bottom: 3px solid var(--wqs-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);
}
/* THIS SITE'S LOGO IS A 502x82 WORDMARK, not a square badge. Every other
   theme in this lineage paints a 46px circle, which would shrink a wordmark to
   an illegible smudge. Height-constrained with auto width instead, and the
   redundant .site-title text is hidden — the wordmark already says the name. */
.site-logo { height: 42px; width: auto; max-width: min(60vw, 320px); object-fit: contain; border-radius: 0; }
.site-brand .site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-brand-text { display: flex; flex-direction: column; }
.site-title {
    font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
    color: var(--wqs-brown); line-height: 1.1;
}
.site-tagline { font-size: .78rem; color: var(--wqs-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(--wqs-surface); border-radius: 8px;
    cursor: pointer; padding: 0 10px;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--wqs-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(--wqs-ink); border-bottom: 1px solid var(--wqs-surface);
}
.site-nav > ul li a:hover { color: var(--wqs-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(--wqs-surface); }
    .site-social { padding-top: 0; border-left: 1px solid var(--wqs-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(--wqs-surface) 0%, var(--wqs-paper) 100%);
    padding-block: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    border-bottom: 1px solid rgba(35,0,123,.10);
}
.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: var(--wqs-brown); margin-bottom: .3em;
}
.hero-sub {
    margin: 0 auto; max-width: 46ch; color: var(--wqs-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(--wqs-white);
    border: 1px solid rgba(35,0,123,.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(--wqs-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(--wqs-ink); font-family: var(--font-body); font-weight: 600;
}
.quote-card-link:hover .quote-card-title { color: var(--wqs-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(--wqs-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(--wqs-surface);
    padding-block: clamp(1.75rem, 5vw, 2.75rem);
    border-bottom: 1px solid rgba(35,0,123,.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(--wqs-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(--wqs-brown); }
.archive-desc { max-width: 55ch; margin-inline: auto; color: var(--wqs-muted); }
.archive-count { font-size: .9rem; color: var(--wqs-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(--wqs-brown); }
.post-meta { color: var(--wqs-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(--wqs-surface);
}
.post-media figcaption {
    text-align: center; font-size: .85rem; color: var(--wqs-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(--wqs-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(--wqs-rust);   /* decorative use of gold — not text */
    color: var(--wqs-ink); font-style: italic;
}
.post-content a { color: var(--wqs-brown); }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content hr { border: 0; border-top: 1px solid var(--wqs-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(--wqs-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(--wqs-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(--wqs-brown); }
.post-content .kg-bookmark-description { color: var(--wqs-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(--wqs-muted);
}
.post-content .kg-bookmark-icon { width: 20px; height: 20px; margin-right: .25rem; }
.post-content .kg-bookmark-author { font-weight: 600; color: var(--wqs-ink); }
.post-content .kg-bookmark-publisher { color: var(--wqs-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(--wqs-brown); color: var(--wqs-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(--wqs-surface); color: var(--wqs-brown);
    border-radius: 999px; text-decoration: none;
    font-size: .85rem; font-weight: 600;
}
.tag-pill:hover { background: var(--wqs-brown); color: var(--wqs-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(--wqs-surface);
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
}
.share-label {
    font-weight: 700; font-size: .9rem; color: var(--wqs-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(--wqs-surface); color: var(--wqs-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(--wqs-white); }
.share-facebook:hover  { background: #1877F2; color: var(--wqs-white); }
.share-x:hover         { background: #000000; color: var(--wqs-white); }
.share-pinterest:hover { background: #BD081C; color: var(--wqs-white); }
.share-copy:hover      { background: var(--wqs-brown); color: var(--wqs-white); }
.share-copy.is-copied  { background: var(--wqs-navy); color: var(--wqs-white); width: auto; padding: 0 .9rem; }
.share-copied { font-size: .8rem; font-weight: 600; }
.share-copy .share-copied:empty { display: none; }

/* --- ads ---------------------------------------------------------------- */

/* --- related / sections ------------------------------------------------- */
.related { background: var(--wqs-surface); border-top: 1px solid rgba(35,0,123,.10); }
/* --wqs-ink, NOT --wqs-brown. This heading sits on the .sections band
   (--wqs-cream #E3E8E4), where the page accent --wqs-brown (--heart-ink) is
   only ~3.80:1 and fails AA — while being a correct ~4.8:1 twenty pixels above
   it on the white page. Fourth fleet site to hit this, with different colours
   every time, which is why the constraint is written on the token. */
.section-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--wqs-ink);
    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 --wqs-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(--wqs-cream);
    border-block: 1px solid rgba(35,0,123,.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(--wqs-white); color: var(--wqs-brown);
    border: 1px solid rgba(35,0,123,.12); border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: .92rem;
}
.section-chip:hover { background: var(--wqs-brown); color: var(--wqs-white); border-color: var(--wqs-brown); }
.section-chip-count {
    font-size: .75rem; font-weight: 700;
    background: var(--wqs-surface); color: var(--wqs-muted);
    border-radius: 999px; padding: .15rem .55rem;
}
.section-chip:hover .section-chip-count { background: rgba(255,255,255,.18); color: var(--wqs-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(--wqs-white);
    border: 1px solid var(--wqs-brown); border-radius: 999px;
    color: var(--wqs-brown); text-decoration: none; font-weight: 600;
}
.pagination a:hover { background: var(--wqs-brown); color: var(--wqs-white); }
.page-number { color: var(--wqs-muted); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: 0 1.5rem;
    background: var(--wqs-brown); color: var(--wqs-white);
    border-radius: 999px; text-decoration: none; font-weight: 600;
}
.btn:hover { background: var(--wqs-ink); color: var(--wqs-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(--wqs-rust-ink); margin: 0; }
.error-title { font-size: clamp(1.4rem, 4vw, 2rem); color: var(--wqs-brown); }
.error-help { color: var(--wqs-muted); }

/* --- footer ------------------------------------------------------------- */
.site-foot {
    background: var(--wqs-ink); color: #E8DED8;
    margin-top: 3rem; padding-block: clamp(2rem, 5vw, 3rem);
}
.site-foot a { color: #F0E4D2; }
.foot-heading { color: var(--wqs-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(--wqs-rust-ink); color: var(--wqs-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(--wqs-ink); }
.site-social .social-icon:hover { background: var(--wqs-surface); color: var(--wqs-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(--wqs-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 --wqs-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(--wqs-brown); }

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