/* ==========================================================================
   Eye Opener Quotes — Ghost theme
   Forked from enlightening-quotes v1.0.0 (itself from wisdom-quotes-4u v1.7.0).
   Structure, ad logic and accessibility work are inherited; the palette is not.

   THE PALETTE IS NOT MEASURED HERE, AND THAT IS THE POINT. Every previous site
   in this lineage had only a Logo/ folder, so the colours had to be quantised
   out of a JPEG and then checked with validate-palette.py. This site has a real
   brand kit — "Eye Opener Quotes Tokens.css" plus a computed contrast-report.txt
   covering 23 tokens against cream, white and ink. The values below are COPIED
   FROM IT. Re-measuring would have thrown away work already done and risked
   disagreeing with the kit the rest of the brand uses.

   THE GROUND IS INVERTED RELATIVE TO THE THEME THIS FORKED FROM, and that had
   to be a deliberate remap rather than a hex swap. Enlightening Quotes puts
   near-white paper behind cream cards. This kit is explicit that --eoq-cream
   (#F6EEE1) is "the brand's page colour" and white is the raised surface, so
   the roles are swapped: cream page, white cards. Every ratio quoted below is
   therefore against CREAM, which is what the kit's own table measures against.

   THE ONE RULE FROM THE KIT WORTH REPEATING: the brand's loudest colours are
   FILLS. --eoq-gold (1.31), --eoq-orange (2.02), --eoq-red (3.78) and
   --eoq-pink (1.98) all fail AA as text on cream, and red fails as a button in
   BOTH directions (4.36 under white, 4.01 under ink). Their *-ink partners are
   the text-safe members. This is the same trap wisdomquotes4u shipped an AA
   failure on, except here the kit had already done the arithmetic.
   ========================================================================== */

:root {
    /* --- brand kit tokens, copied from "Eye Opener Quotes Tokens.css" -------
       Ratios are against --eoq-paper (cream #F6EEE1), the page ground.        */
    --eoq-ink:        #1B191C;  /* 15.17:1 on cream — body copy              */
    --eoq-brown:      #3B5A2C;  /* --leaf, 6.79:1 — the accent               */
    --eoq-brown-soft: #2F4C22;  /* --stem, 8.37:1 — hover, darker not lighter */
    --eoq-navy:       #3A3439;  /* --ink-soft, 10.54:1 — secondary text      */
    --eoq-rust:       #F5922F;  /* --orange, 2.02:1 — DECORATIVE ONLY        */
    /* --eoq-rust is the wordmark's own orange and the obvious choice for links.
       At 2.02:1 on cream it fails AA text by a wide margin and does not even
       clear the 3:1 WCAG 1.4.11 asks of non-text UI, so unlike the sunrise rust
       it replaces it cannot carry a focus ring either. Fills and large display
       type only. --eoq-rust-ink is the text-safe member of the same family and
       comes from the kit, not from darkening this one by eye.                 */
    --eoq-rust-ink:   #A24E00;  /* --orange-ink, 5.03:1 on cream, 5.79 white */
    --eoq-surface:    #FFFFFF;  /* --paper: cards are WHITE on this brand    */
    --eoq-paper:      #F6EEE1;  /* --cream: the kit calls this the page colour */
    /* The feature band. On the previous site this slot held a saturated cream
       with a hard rule that only two inks could sit on it. Here it is --sand,
       the mountains behind the figure, at 1.49:1 against cream — so it reads as
       a band rather than a stripe, and --eoq-ink (10.21:1 on sand) and
       --eoq-rust-ink (3.4:1) behave differently on it. HARD RULE, same shape as
       before: this band carries --eoq-ink or --eoq-brown ONLY.                */
    --eoq-cream:      #DEC1A5;  /*  one feature band per page, nothing else  */
    --eoq-white:      #FFFFFF;

    /* The alternate accent offered by @custom.accent_style. It is --gold-ink,
       NOT --gold: the kit measures gold at 1.31:1 on cream, so offering it as a
       link colour would ship an AA failure behind a settings dropdown, where it
       would be nobody's obvious fault. --gold-ink is 5.14:1.                   */
    --eoq-gold-ink:   #8A5A05;  /* --gold-ink, 5.14:1 on cream               */

    --eoq-text:       var(--eoq-ink);
    --eoq-muted:      #5B5259;  /* --slate, 6.52:1 on cream — meta, bylines  */
    --eoq-accent:     var(--eoq-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 --eoq-ink (#1B191C, the badge disc). */
    --shadow-sm: 0 1px 2px rgba(27,25,28,.06), 0 2px 8px rgba(27,25,28,.05);
    --shadow-md: 0 4px 16px rgba(27,25,28,.10);
}

body.accent-goldink { --eoq-accent: var(--eoq-gold-ink); }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--eoq-paper);
    color: var(--eoq-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(--eoq-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--eoq-brown-soft); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--eoq-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 --eoq-brown button is not the comparison that
   matters. Re-read from THIS site's contrast report rather than carried over:
   --eoq-rust-ink (#A24E00) rings at 5.03:1 on --eoq-paper (cream) and 5.79:1 on
   --eoq-surface (white), both well clear of 3:1. The inherited note quoted
   5.42/4.87 — enlighteningquotes' numbers for a different orange on a different
   ground, and it would have read as verified. On the dark footer the ring goes
   to --eoq-cream (--sand); see the footer block. */
:focus-visible {
    outline: 3px solid var(--eoq-rust-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--eoq-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(--eoq-white);
    border-bottom: 3px solid var(--eoq-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(--eoq-brown); line-height: 1.1;
}
.site-tagline { font-size: .78rem; color: var(--eoq-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(--eoq-surface); border-radius: 8px;
    cursor: pointer; padding: 0 10px;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--eoq-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(--eoq-ink); border-bottom: 1px solid var(--eoq-surface);
}
.site-nav > ul li a:hover { color: var(--eoq-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(--eoq-surface); }
    .site-social { padding-top: 0; border-left: 1px solid var(--eoq-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(--eoq-surface) 0%, var(--eoq-paper) 100%);
    padding-block: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    border-bottom: 1px solid rgba(27,25,28,.10);
}
.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: var(--eoq-brown); margin-bottom: .3em;
}
.hero-sub {
    margin: 0 auto; max-width: 46ch; color: var(--eoq-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(--eoq-white);
    border: 1px solid rgba(27,25,28,.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(--eoq-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(--eoq-ink); font-family: var(--font-body); font-weight: 600;
}
.quote-card-link:hover .quote-card-title { color: var(--eoq-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(--eoq-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(--eoq-surface);
    padding-block: clamp(1.75rem, 5vw, 2.75rem);
    border-bottom: 1px solid rgba(27,25,28,.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(--eoq-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(--eoq-brown); }
.archive-desc { max-width: 55ch; margin-inline: auto; color: var(--eoq-muted); }
.archive-count { font-size: .9rem; color: var(--eoq-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(--eoq-brown); }
.post-meta { color: var(--eoq-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(--eoq-surface);
}
.post-media figcaption {
    text-align: center; font-size: .85rem; color: var(--eoq-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(--eoq-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(--eoq-rust);   /* decorative use of gold — not text */
    color: var(--eoq-ink); font-style: italic;
}
.post-content a { color: var(--eoq-brown); }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content hr { border: 0; border-top: 1px solid var(--eoq-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(--eoq-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(--eoq-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(--eoq-brown); }
.post-content .kg-bookmark-description { color: var(--eoq-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(--eoq-muted);
}
.post-content .kg-bookmark-icon { width: 20px; height: 20px; margin-right: .25rem; }
.post-content .kg-bookmark-author { font-weight: 600; color: var(--eoq-ink); }
.post-content .kg-bookmark-publisher { color: var(--eoq-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(--eoq-brown); color: var(--eoq-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(--eoq-surface); color: var(--eoq-brown);
    border-radius: 999px; text-decoration: none;
    font-size: .85rem; font-weight: 600;
}
.tag-pill:hover { background: var(--eoq-brown); color: var(--eoq-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(--eoq-surface);
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
}
.share-label {
    font-weight: 700; font-size: .9rem; color: var(--eoq-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(--eoq-surface); color: var(--eoq-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(--eoq-white); }
.share-facebook:hover  { background: #1877F2; color: var(--eoq-white); }
.share-x:hover         { background: #000000; color: var(--eoq-white); }
.share-pinterest:hover { background: #BD081C; color: var(--eoq-white); }
.share-copy:hover      { background: var(--eoq-brown); color: var(--eoq-white); }
.share-copy.is-copied  { background: var(--eoq-navy); color: var(--eoq-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. */
/* NOTE: the .ad-infeed rules that used to sit here were REMOVED with the partial.
   pub-2781997236975923 has no in-feed unit, so keeping the CSS would have left a
   306-731px reserved gap on every archive for a slot that can never render. The
   original comment about a 180px guess described that deleted unit. 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-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(--eoq-surface); border-top: 1px solid rgba(27,25,28,.10); }
.section-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--eoq-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 --eoq-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(--eoq-cream);
    border-block: 1px solid rgba(27,25,28,.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(--eoq-white); color: var(--eoq-brown);
    border: 1px solid rgba(27,25,28,.12); border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: .92rem;
}
.section-chip:hover { background: var(--eoq-brown); color: var(--eoq-white); border-color: var(--eoq-brown); }
.section-chip-count {
    font-size: .75rem; font-weight: 700;
    background: var(--eoq-surface); color: var(--eoq-muted);
    border-radius: 999px; padding: .15rem .55rem;
}
.section-chip:hover .section-chip-count { background: rgba(255,255,255,.18); color: var(--eoq-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(--eoq-white);
    border: 1px solid var(--eoq-brown); border-radius: 999px;
    color: var(--eoq-brown); text-decoration: none; font-weight: 600;
}
.pagination a:hover { background: var(--eoq-brown); color: var(--eoq-white); }
.page-number { color: var(--eoq-muted); }

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

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

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