/* ==========================================================================
   Delightful Quotes — Ghost theme
   Forked from eye-opener-quotes v1.0.0 (itself from enlightening-quotes, from
   wisdom-quotes-4u v1.7.0). Structure, ad logic and accessibility work are
   inherited; the palette is this site's own.

   THE PALETTE COMES FROM THE LIVE WORDPRESS THEME, NOT FROM THE BRAND KIT, and
   that is deliberate. The kit's rule 3 puts --page #FAFBF4 behind white cards;
   the WordPress build overrode it at the owner's request to a WHITE page with
   #FAFBF4 as the card surface. Ghost must match the site it is replacing, not
   the document — otherwise the brand changes colour at the cutover for no
   reason anyone asked for. Ratios below are therefore measured against WHITE.

   THE ONE RULE THAT MATTERS HERE: the logo's own teal --dq-rust #0A8B81 is the
   colour of the word "Quotes", which makes it the obvious pick for links. It is
   4.18:1 on white and fails AA body text. --dq-rust-ink #097D74 is 5.00:1 both
   as text and as a button ground. Same shape as the gold that shipped an AA
   failure on wisdomquotes4u; the -ink member is always the text-safe one.

   AND THE ONE THAT KEEPS BITING: a colour that passes on the page can fail on a
   BAND. --dq-brown is 5.00:1 on white and 3.92:1 on the sage-tint band. The
   constraint lives on the token, and .section-title is overridden for it.
   ========================================================================== */

:root {
    /* --- palette, taken from the LIVE WordPress theme, not from the kit ------

       The kit says the page is --page #FAFBF4 with white as the raised surface.
       The WordPress build deliberately overrode that at the owner's request:
       white page, and #FAFBF4 demoted to the card surface. Different ground,
       different ratios — so every number below is measured against WHITE, and
       the Ghost theme matches the WordPress site rather than the kit, because
       the two must not disagree across the cutover.

       THE RULE THAT MATTERS ON THIS BRAND: --dq-brand #0A8B81 is the colour of
       the word "Quotes" in the logo, which makes it the tempting choice for
       links. It is 4.18:1 on white and therefore fails AA body text. Its
       text-safe partner --dq-accent #097D74 is 5.00:1 as text AND as a button
       ground. Reach for the -ink member and the palette behaves.               */
    --dq-ink:        #0E1F1D;  /* 16.6:1 on white — body copy                */
    --dq-brown:      #097D74;  /* --teal-ink, 5.00:1 — THE ACCENT            */
    --dq-brown-soft: #07615A;  /* --teal-strong, 7.33:1 AAA — hover, darker  */
    --dq-navy:       #42544F;  /* --ink-soft, ~9.4:1 — secondary text        */
    --dq-rust:       #0A8B81;  /* --brand, 4.18:1 — DECORATIVE ONLY          */
    /* --dq-rust is the logo's own teal and the obvious choice for links. At
       4.18:1 on white it fails AA body text by a margin too small to see and
       too large to ignore — the same shape of trap as wisdomquotes4u's gold. It
       clears the 3:1 WCAG 1.4.11 asks of non-text UI, so rules, icons and large
       display type only. --dq-rust-ink is the text-safe member.               */
    --dq-rust-ink:   #097D74;  /* --teal-ink, 5.00:1 on white                */
    --dq-surface:    #FAFBF4;  /* the kit's --page, demoted to the card face */
    --dq-paper:      #FFFFFF;  /* WHITE page — the WordPress build's override */
    /* THE BAND TRAP, THIRD FLEET SITE, AND IT BITES WITH DIFFERENT COLOURS EACH
       TIME. --dq-brown (teal-ink) is 5.00:1 on the white page but only
       **3.92:1 on sage-tint** and 4.23:1 on blush — it FAILS AA on the band
       while passing on the page. The constraint is on the USAGE, not the
       colour. HARD RULE: this band carries --dq-ink, --dq-brown-soft
       (--teal-strong) or --dq-green-deep ONLY. See .section-title below, which
       is overridden for exactly this reason.                                   */
    --dq-cream:      #D8EAC2;  /*  --sage-tint: one feature band, nothing else */
    --dq-white:      #FFFFFF;

    /* The alternate accent offered by @custom.accent_style. --green-deep, not
       --brand: offering the 4.18:1 brand teal as a link colour behind a
       settings dropdown would ship an AA failure that is nobody's obvious
       fault. --green-deep is 8.9:1 on white.                                   */
    --dq-gold-ink:   #3C4E41;  /* --green-deep, ~8.9:1 on white              */
    /* Footer hover. --dq-brown is 2.65:1 on the dark footer and fails there
       even though it is the page accent; --aqua-light is 6.21:1.               */
    --dq-aqua-light: #43C4BA;  /* 6.21:1 on the dark footer                  */

    --dq-text:       var(--dq-ink);
    --dq-muted:      #42544F;  /* --ink-soft — meta, bylines                 */
    --dq-accent:     var(--dq-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 --dq-ink (#0E1F1D). */
    --shadow-sm: 0 1px 2px rgba(14,31,29,.06), 0 2px 8px rgba(14,31,29,.05);
    --shadow-md: 0 4px 16px rgba(14,31,29,.10);
}

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

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--dq-paper);
    color: var(--dq-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(--dq-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--dq-brown-soft); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--dq-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 --dq-brown button is not the comparison that
   matters. Re-measured for THIS palette: --dq-rust-ink (#097D74) rings at
   5.00:1 on the white page and 4.9:1 on --dq-surface, both well clear of 3:1 —
   and 3.92:1 on the sage band, which STILL clears 3:1. So the ring is fine on
   the band even though TEXT in that same colour is not: that is exactly why
   1.4.11 sets a different threshold from 1.4.3, 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 and would have
   read as verified. */
:focus-visible {
    outline: 3px solid var(--dq-rust-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--dq-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(--dq-white);
    border-bottom: 3px solid var(--dq-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(--dq-brown); line-height: 1.1;
}
.site-tagline { font-size: .78rem; color: var(--dq-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(--dq-surface); border-radius: 8px;
    cursor: pointer; padding: 0 10px;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--dq-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(--dq-ink); border-bottom: 1px solid var(--dq-surface);
}
.site-nav > ul li a:hover { color: var(--dq-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(--dq-surface); }
    .site-social { padding-top: 0; border-left: 1px solid var(--dq-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(--dq-surface) 0%, var(--dq-paper) 100%);
    padding-block: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    border-bottom: 1px solid rgba(14,31,29,.10);
}
.hero-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: var(--dq-brown); margin-bottom: .3em;
}
.hero-sub {
    margin: 0 auto; max-width: 46ch; color: var(--dq-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(--dq-white);
    border: 1px solid rgba(14,31,29,.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(--dq-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(--dq-ink); font-family: var(--font-body); font-weight: 600;
}
.quote-card-link:hover .quote-card-title { color: var(--dq-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(--dq-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(--dq-surface);
    padding-block: clamp(1.75rem, 5vw, 2.75rem);
    border-bottom: 1px solid rgba(14,31,29,.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(--dq-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(--dq-brown); }
.archive-desc { max-width: 55ch; margin-inline: auto; color: var(--dq-muted); }
.archive-count { font-size: .9rem; color: var(--dq-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(--dq-brown); }
.post-meta { color: var(--dq-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(--dq-surface);
}
.post-media figcaption {
    text-align: center; font-size: .85rem; color: var(--dq-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(--dq-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(--dq-rust);   /* decorative use of gold — not text */
    color: var(--dq-ink); font-style: italic;
}
.post-content a { color: var(--dq-brown); }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content hr { border: 0; border-top: 1px solid var(--dq-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(--dq-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(--dq-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(--dq-brown); }
.post-content .kg-bookmark-description { color: var(--dq-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(--dq-muted);
}
.post-content .kg-bookmark-icon { width: 20px; height: 20px; margin-right: .25rem; }
.post-content .kg-bookmark-author { font-weight: 600; color: var(--dq-ink); }
.post-content .kg-bookmark-publisher { color: var(--dq-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(--dq-brown); color: var(--dq-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(--dq-surface); color: var(--dq-brown);
    border-radius: 999px; text-decoration: none;
    font-size: .85rem; font-weight: 600;
}
.tag-pill:hover { background: var(--dq-brown); color: var(--dq-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(--dq-surface);
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
}
.share-label {
    font-weight: 700; font-size: .9rem; color: var(--dq-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(--dq-surface); color: var(--dq-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(--dq-white); }
.share-facebook:hover  { background: #1877F2; color: var(--dq-white); }
.share-x:hover         { background: #000000; color: var(--dq-white); }
.share-pinterest:hover { background: #BD081C; color: var(--dq-white); }
.share-copy:hover      { background: var(--dq-brown); color: var(--dq-white); }
.share-copy.is-copied  { background: var(--dq-navy); color: var(--dq-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. */
/* In-feed units span the whole grid row. Heights are reserved at every
   breakpoint so an unfilled slot leaves a stable gap and never shoves the cards
   below it. Unlike eyeopenerquotes, THIS account has a real in-feed unit
   (4502572500), so the partial and these rules are both live. */
.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(--dq-surface); border-top: 1px solid rgba(14,31,29,.10); }
/* --dq-brown-soft, NOT --dq-brown. This heading sits on the .sections band
   (--dq-cream = --sage-tint #D8EAC2), where the page accent --dq-brown
   (--teal-ink) measures only 3.92:1 and fails AA — while being a perfectly
   correct 5.00:1 twenty pixels above it on the white page. --dq-brown-soft
   (--teal-strong #07615A) is 5.9:1 on the same band.
   Third fleet site to hit this, with different colours every time, which is why
   the constraint is written on the token rather than remembered. */
.section-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--dq-brown-soft);
    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 --dq-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(--dq-cream);
    border-block: 1px solid rgba(14,31,29,.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(--dq-white); color: var(--dq-brown);
    border: 1px solid rgba(14,31,29,.12); border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: .92rem;
}
.section-chip:hover { background: var(--dq-brown); color: var(--dq-white); border-color: var(--dq-brown); }
.section-chip-count {
    font-size: .75rem; font-weight: 700;
    background: var(--dq-surface); color: var(--dq-muted);
    border-radius: 999px; padding: .15rem .55rem;
}
.section-chip:hover .section-chip-count { background: rgba(255,255,255,.18); color: var(--dq-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(--dq-white);
    border: 1px solid var(--dq-brown); border-radius: 999px;
    color: var(--dq-brown); text-decoration: none; font-weight: 600;
}
.pagination a:hover { background: var(--dq-brown); color: var(--dq-white); }
.page-number { color: var(--dq-muted); }

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

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

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