/* Everyday French — site-wide theme styles.
 * Tokens on :root (light) with warm dark overrides (OS pref + data-ef-theme).
 * Design system mirrors the validated prototype; brand values from ef-series.css.
 */

/* ============================ tokens ============================ */
:root {
  --fill:#733428; --fill-strong:#5c2a20; --on-fill:#ffffff;
  --accent:#733428; --head:#4a2119;
  --rust-deep:#4a2119; --on-deep:#ffffff; --deep-grad:#733428; --gold:#9c7333;
  --ground:#FFFBF9; --surface:#ffffff; --surface-2:#FFF6F2;
  --tint:#FFF0EE; --tint-2:#F6DED7; --tint-3:#EFC9BE;
  --ink:#3f2e28; --ink-2:#6b5b54; --ink-3:#8a7a73;
  --line:#E5D4CE; --line-soft:#F0E4E0;
  --ink-panel:#201009; --shadow:rgba(74,33,25,.5);
  --ok:#2f8043; --ok-bg:rgba(70,167,88,.14); --ok-bd:#46a758;
  --no:#c0392b; --no-bg:rgba(200,60,44,.12); --no-bd:#d9534f;
  /* "note" amber — transcript highlights + speaking prompts (podcast.css) */
  --note-bg:#fef9c3; --note-bd:#fde68a; --note-ink:#78350f;
  --bleu:#0055A4; --rouge:#EF4135;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-ef-theme="light"]) {
  --fill:#d98a6d; --fill-strong:#e7a184; --on-fill:#2a130b; --accent:#e6ab96; --head:#f4ddd3;
  --rust-deep:#3f1c14; --on-deep:#fbeee8; --deep-grad:#6d3324; --gold:#d0ad6d;
  --ground:#1a1310; --surface:#241a15; --surface-2:#1f1610; --tint:#2b1e18; --tint-2:#34241c; --tint-3:#5c3a2d;
  --ink:#efe4dd; --ink-2:#c7b5ab; --ink-3:#9a887e; --line:#3a2a22; --line-soft:#2c2019;
  --ink-panel:#0f0a07; --shadow:rgba(0,0,0,.6);
  --ok:#7fd396; --ok-bg:rgba(70,167,88,.2); --no:#f0a097; --no-bg:rgba(217,83,79,.18);
  --note-bg:#3a2c12; --note-bd:#6b5320; --note-ink:#f2dca6;
  color-scheme: dark;
} }
:root[data-ef-theme="dark"] {
  --fill:#d98a6d; --fill-strong:#e7a184; --on-fill:#2a130b; --accent:#e6ab96; --head:#f4ddd3;
  --rust-deep:#3f1c14; --on-deep:#fbeee8; --deep-grad:#6d3324; --gold:#d0ad6d;
  --ground:#1a1310; --surface:#241a15; --surface-2:#1f1610; --tint:#2b1e18; --tint-2:#34241c; --tint-3:#5c3a2d;
  --ink:#efe4dd; --ink-2:#c7b5ab; --ink-3:#9a887e; --line:#3a2a22; --line-soft:#2c2019;
  --ink-panel:#0f0a07; --shadow:rgba(0,0,0,.6);
  --ok:#7fd396; --ok-bg:rgba(70,167,88,.2); --no:#f0a097; --no-bg:rgba(217,83,79,.18);
  --note-bg:#3a2c12; --note-bd:#6b5320; --note-ink:#f2dca6;
  color-scheme: dark;
}

/* The quiz plugin's --ef-* tokens are NOT defined here. They're the plugin's
 * namespace, and it declares them itself — in terms of the tokens above, with
 * its own hex as the fallback — in assets/ef-tokens.css. This theme used to
 * mirror that mapping, which meant two declarations of the same contract and a
 * load-order race the plugin won. One owner, one definition.
 */

/* ============================ base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.efh { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ef-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem,4vw,2.4rem); }
.ef-main { display: block; }
.ef-eyebrow, .ef-content .ef-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: var(--accent); }
.ef-skip { position: absolute; left: -999px; top: 0; background: var(--fill); color: var(--on-fill); padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; }
.ef-skip:focus { left: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.ef-tricolore { display: inline-flex; height: 15px; width: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: middle; flex: none; }
.ef-tricolore i { flex: 1; } .ef-tricolore i:nth-child(1){ background: var(--bleu);} .ef-tricolore i:nth-child(2){ background:#fff;} .ef-tricolore i:nth-child(3){ background: var(--rouge);}

/* shared small components (used by the home + about templates) */
.ef-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.ef-sechead--center { justify-content: center; text-align: center; }
.ef-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem,3.4vw,2.5rem); color: var(--head); margin: .35rem 0 0; letter-spacing: -.01em; }
.ef-sechead__sub { color: var(--ink-2); max-width: 40ch; margin: 0; }
.ef-stars { color: var(--gold); letter-spacing: .05em; }
.ef-tnum { font-variant-numeric: tabular-nums; }
.ef-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tint-3); display: inline-block; }
.ef-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .8rem; font-size: .82rem; font-weight: 600; color: var(--head); }
.ef-medallion { display: grid; place-items: center; border-radius: 50%; flex: none; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 25%, var(--tint-2), var(--tint-3)); color: var(--head); font-family: var(--serif); font-weight: 600; }
.ef-medallion--photo { background: var(--tint-2); }
.ef-medallion__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* small "feature" card — about (method) + newsletter (other resources) */
.ef-mcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.2rem; }
.ef-mcard__ico { width: 42px; height: 42px; border-radius: 11px; background: var(--tint); color: var(--accent); display: grid; place-items: center; margin-bottom: .8rem; }
.ef-mcard__ico svg { width: 22px; height: 22px; }
.ef-mcard h3 { font-family: var(--serif); font-size: 1.12rem; color: var(--head); margin: 0 0 .3rem; font-weight: 600; }
.ef-mcard p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }

/* buttons */
.ef-btn { display: inline-block; text-decoration: none; background: var(--fill); color: var(--on-fill); border: 0; border-radius: 12px; padding: .8rem 1.4rem; font-weight: 600; font-size: 1rem; box-shadow: 0 10px 24px -12px var(--fill); }
.ef-btn:hover { background: var(--fill-strong); color: var(--on-fill); }
.ef-btn--ghost { background: var(--surface); color: var(--head); border: 1.5px solid var(--line); box-shadow: none; }
.ef-btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ============================ header nav ============================ */
.ef-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.ef-nav__in { display: flex; align-items: center; gap: 1.3rem; height: 68px; position: relative; }
.ef-nav__logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.ef-nav__logo-tx { line-height: 1; }
.ef-nav__logo-tx b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.26rem; color: var(--head); letter-spacing: -.01em; }
.ef-nav__logo-tx b i { color: var(--accent); font-style: normal; }
.ef-nav__logo-tx small { font-family: var(--serif); font-style: italic; font-size: .74rem; color: var(--ink-3); }
/* The configured logo is a portrait photo, so it reads as an avatar beside the
   wordmark rather than pretending to be a lockup. The ring is the tricolore in
   three vertical bands — which is why there's no separate flag chip in the nav.
   The inner ring picks up the page colour so the bands read as a border rather
   than a halo, in both light and dark. */
.ef-nav__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; padding: 2.5px; display: block;
  background: linear-gradient(90deg, var(--bleu) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66% 100%);
  box-shadow: 0 0 0 1px var(--line-soft); }
.ef-nav__logo-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 1.5px var(--ground); }
.ef-nav__links { display: flex; gap: 1.2rem; margin-left: 1rem; font-size: .93rem; }
.ef-nav__links a { text-decoration: none; color: var(--ink-2); font-weight: 500; padding: .2rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.ef-nav__links a:hover, .ef-nav__links a[aria-current] { color: var(--accent); border-bottom-color: var(--tint-3); }
.ef-nav__cta { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.ef-nav__ig { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.ef-nav__ig:hover { color: var(--accent); border-color: var(--accent); }
.ef-nav__ig svg { width: 19px; height: 19px; }
.ef-theme-toggle { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1rem; }
.ef-theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Language pill: one entry per language, so a third language just flows in. */
.ef-nav__lang { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .32rem .55rem; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ef-nav__lang a { text-decoration: none; color: var(--ink-3); border-radius: 999px; padding: .08rem .3rem; transition: color .15s, background-color .15s; }
.ef-nav__lang a:hover { color: var(--accent); background: var(--tint); }
.ef-nav__lang b { color: var(--head); font-weight: 700; padding: .08rem .3rem; }
.ef-lang__sep { color: var(--line); }
.ef-nav__book { display: inline-block; text-decoration: none; background: var(--fill); color: var(--on-fill); border: 0; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; box-shadow: 0 6px 18px -8px var(--fill); white-space: nowrap; flex: none; }
.ef-nav__book:hover { background: var(--fill-strong); color: var(--on-fill); }
.ef-hamburger { display: none; border: 1px solid var(--line); background: var(--surface); color: var(--head); border-radius: 10px; width: 42px; height: 42px; place-items: center; margin-left: auto; }
.ef-hamburger svg { width: 22px; height: 22px; }
.ef-mnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px var(--shadow); padding: .6rem 0 1.1rem; }
.ef-mnav.is-open { display: block; }
.ef-mnav a { display: block; text-decoration: none; color: var(--ink); font-weight: 600; padding: .75rem clamp(1.1rem,4vw,2.4rem); border-bottom: 1px solid var(--line-soft); }
.ef-mnav a:hover { background: var(--tint); color: var(--accent); }
.ef-mnav__foot { display: flex; gap: .7rem; align-items: center; padding: 1rem clamp(1.1rem,4vw,2.4rem) 0; flex-wrap: wrap; }
.ef-mnav__lang { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: 999px; padding: .42rem .7rem; font-weight: 600; font-size: .85rem; }
/* override the block-level rule for .ef-mnav a — these sit inline in the pill */
.ef-mnav .ef-mnav__lang a { display: inline; padding: .08rem .3rem; border-bottom: 0; border-radius: 999px; color: var(--ink-3); }
.ef-mnav .ef-mnav__lang a:hover { background: var(--tint); color: var(--accent); }
.ef-mnav__lang b { color: var(--head); padding: .08rem .3rem; }
.ef-mnav__book { flex: 1; text-align: center; text-decoration: none; background: var(--fill); color: var(--on-fill); border-radius: 10px; padding: .7rem 1rem; font-weight: 700; }
@media (max-width: 900px) { .ef-nav__links, .ef-nav__cta { display: none; } .ef-hamburger { display: grid; } }

/* ============================ footer ============================ */
.ef-foot { border-top: 1px solid var(--line-soft); background: var(--surface-2); padding: clamp(2rem,4vw,3rem) 0 1.4rem; color: var(--ink-3); font-size: .88rem; margin-top: 3rem; }
.ef-foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.4rem,3vw,2.4rem); }
@media (max-width: 860px) { .ef-foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ef-foot__cols { grid-template-columns: 1fr; } }

.ef-foot__brand .ef-nav__logo-tx b { font-size: 1.2rem; }
.ef-foot__pitch { color: var(--ink-2); margin: .7rem 0 .9rem; max-width: 34ch; line-height: 1.5; }
.ef-foot__ig { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.ef-foot__ig svg { width: 17px; height: 17px; }
.ef-foot__ig:hover { color: var(--accent); }

.ef-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.ef-foot__col h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--head); margin: 0 0 .3rem; font-family: var(--sans); font-weight: 700; }
.ef-foot__col a { color: var(--ink-2); text-decoration: none; }
.ef-foot__col a:hover { color: var(--accent); }
.ef-foot__cta p { color: var(--ink-2); margin: 0 0 .9rem; line-height: 1.5; }
/* .ef-foot__col a sets a muted link colour that out-specifies .ef-btn's own,
   so the button text has to be restated here (both base and hover). */
.ef-foot__cta .ef-btn, .ef-foot__cta .ef-btn:hover { color: var(--on-fill); padding: .6rem 1.1rem; font-size: .9rem; border-radius: 10px; }

.ef-foot__base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); margin-top: clamp(1.6rem,3vw,2.4rem); padding-top: 1.2rem; }
.ef-foot__copy { display: inline-flex; align-items: center; gap: .5rem; }
.ef-foot__copy small { font-style: italic; font-family: var(--serif); color: var(--ink-2); }
.ef-foot__legal { display: inline-flex; align-items: center; gap: .9rem; }
.ef-foot__legal a { color: var(--ink-2); text-decoration: none; }
.ef-foot__legal a:hover { color: var(--accent); }

/* ============================ content typography ============================ */
.ef-content { max-width: 760px; margin-inline: auto; }
.ef-content h1, .ef-content h2, .ef-content h3, .ef-content h4 { font-family: var(--serif); color: var(--head); font-weight: 600; line-height: 1.2; margin: 2rem 0 .8rem; }
.ef-content h1 { font-size: clamp(2rem,4vw,2.8rem); }
.ef-content h2 { font-size: clamp(1.5rem,3vw,2rem); }
.ef-content h3 { font-size: 1.3rem; }
.ef-content p { margin: 0 0 1.1rem; }
.ef-content a { color: var(--accent); text-underline-offset: 2px; }
.ef-content ul, .ef-content ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.ef-content li { margin: .35rem 0; }
.ef-content img { border-radius: 12px; }
.ef-content blockquote { margin: 1.4rem 0; padding: .6rem 1.2rem; border-left: 3px solid var(--tint-3); color: var(--ink-2); font-style: italic; }
.ef-content hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2rem 0; }
.ef-content code { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: .1em .35em; font-size: .9em; }
.ef-content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.ef-content th, .ef-content td { border: 1px solid var(--line-soft); padding: .5rem .7rem; text-align: left; }
.ef-page { padding: clamp(1.6rem,4vw,3rem) 0; }
.ef-page__title { font-family: var(--serif); font-weight: 600; color: var(--head); font-size: clamp(2rem,4vw,2.9rem); line-height: 1.08; margin: 0 0 1.4rem; text-wrap: balance; }

/* single */
.ef-single { padding: clamp(1.6rem,4vw,3rem) 0; }
.ef-single__head { text-align: center; }
.ef-single__title { font-family: var(--serif); font-weight: 600; color: var(--head); font-size: clamp(2rem,4.4vw,3rem); line-height: 1.1; margin: 0 0 .6rem; text-wrap: balance; }
.ef-single__meta { color: var(--ink-3); font-size: .88rem; margin: 0 0 1.4rem; }
.ef-single__media { max-width: 900px; margin: 0 auto 1.6rem; }
.ef-single__media img { border-radius: 16px; width: 100%; }

/* ============================ blog page ============================ */
.ef-blog__head { padding: clamp(2rem,4vw,3.2rem) 0 clamp(1rem,2vw,1.6rem); text-align: center; }
.ef-blog__h1 { font-family: var(--serif); font-weight: 600; color: var(--head); font-size: clamp(2rem,4.4vw,3rem); margin: .5rem 0 0; letter-spacing: -.01em; text-wrap: balance; }
.ef-blog__intro { color: var(--ink-2); max-width: 58ch; margin: .8rem auto 0; }
.ef-blog .ef-archive { padding-top: 0; }

/* ============================ archive / cards ============================ */
.ef-archive { padding: clamp(1.6rem,4vw,3rem) 0; }
.ef-archive__head { text-align: center; margin-bottom: 2rem; }
.ef-archive__title { font-family: var(--serif); font-weight: 600; color: var(--head); font-size: clamp(1.8rem,4vw,2.6rem); margin: 0; }
.ef-postgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 880px) { .ef-postgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .ef-postgrid { grid-template-columns: 1fr; } }
.ef-pcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.ef-pcard:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -32px var(--shadow); border-color: var(--tint-3); }
.ef-pcard__link { text-decoration: none; color: inherit; display: block; }
.ef-pcard__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ef-pcard__body { padding: 1.1rem 1.2rem 1.3rem; }
.ef-pcard__date { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: .35rem; }
.ef-pcard__title { font-family: var(--serif); font-weight: 600; color: var(--head); font-size: 1.2rem; margin: 0 0 .4rem; line-height: 1.25; }
.ef-pcard__excerpt { color: var(--ink-2); font-size: .92rem; margin: 0 0 .8rem; }
.ef-pcard__go { color: var(--accent); font-weight: 700; font-size: .9rem; }
.ef-pagination { margin-top: 2rem; text-align: center; }
.ef-pagination a, .ef-pagination .current { display: inline-block; padding: .5rem .85rem; margin: 0 .15rem; border-radius: 9px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-weight: 600; }
.ef-pagination .current { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.ef-empty { text-align: center; color: var(--ink-2); padding: 3rem 0; }

/* search */
.ef-search { display: flex; gap: .5rem; }
.ef-search__field { flex: 1; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: .6rem .8rem; font-size: 1rem; }
.ef-search__btn { background: var(--fill); color: var(--on-fill); border: 0; border-radius: 10px; padding: .6rem 1.1rem; font-weight: 700; }

/* 404 */
.ef-404 { text-align: center; padding: clamp(2.5rem,6vw,5rem) 0; }
.ef-404 h1 { font-family: var(--serif); color: var(--head); font-weight: 600; font-size: clamp(1.8rem,4vw,2.6rem); margin: .4rem 0 .6rem; }
.ef-404__links { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* faq (shared component, reused by page templates later) */
.ef-faq { border: 1px solid var(--line-soft); border-radius: 14px; margin-bottom: .7rem; overflow: hidden; background: var(--surface); }
.ef-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--head); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ef-faq summary::-webkit-details-marker { display: none; }
.ef-faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; transition: transform .2s; }
.ef-faq[open] summary::after { transform: rotate(45deg); }
.ef-faq p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--ink-2); font-size: .95rem; }

/* comments (episode + blog pages) */
.ef-comments { margin-top: clamp(2rem,5vw,3.2rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ef-comments__title { font-family: var(--serif); color: var(--head); font-weight: 600; font-size: clamp(1.3rem,3vw,1.7rem); margin: 0 0 1.2rem; }
.ef-comments__list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ef-comments__list .children { list-style: none; margin: 1rem 0 0; padding: 0 0 0 clamp(.8rem,3vw,1.6rem); border-left: 2px solid var(--line-soft); display: flex; flex-direction: column; gap: 1rem; }
.ef-comments__list li.comment { margin: 0; }
.ef-comments .comment-body { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1rem 1.15rem; }
.ef-comments .comment-author { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.ef-comments .comment-author img.avatar { border-radius: 50%; width: 40px; height: 40px; flex: none; box-shadow: 0 0 0 1px var(--line-soft); }
.ef-comments .comment-author .fn { font-style: normal; font-weight: 700; color: var(--head); }
.ef-comments .comment-author .says { display: none; }
.ef-comments .comment-metadata, .ef-comments .comment-meta { font-size: .8rem; }
.ef-comments .comment-metadata a, .ef-comments .comment-meta a { color: var(--ink-3); text-decoration: none; }
.ef-comments .comment-content { color: var(--ink); font-size: .96rem; line-height: 1.6; }
.ef-comments .comment-content p { margin: 0 0 .6rem; }
.ef-comments .comment-content p:last-child { margin-bottom: 0; }
.ef-comments .comment-awaiting-moderation { display: inline-block; margin-top: .5rem; font-size: .8rem; color: var(--note-ink); background: var(--note-bg); border: 1px solid var(--note-bd); border-radius: 999px; padding: .15rem .6rem; }
.ef-comments .reply { margin-top: .6rem; }
.ef-comments .comment-reply-link { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem; }
.ef-comments .comment-reply-link:hover { border-color: var(--accent); background: var(--tint); }
.ef-comments .comment.bypostauthor > .comment-body { border-color: var(--tint-3); background: var(--tint); }

/* comment form */
.ef-comments .comment-respond { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 16px; padding: clamp(1.1rem,3vw,1.6rem); }
.ef-comments #reply-title { font-family: var(--serif); color: var(--head); font-weight: 600; font-size: 1.2rem; margin: 0 0 .3rem; }
.ef-comments #reply-title small { font-weight: 400; font-size: .85rem; margin-left: .5rem; }
.ef-comments .comment-notes, .ef-comments .logged-in-as { color: var(--ink-3); font-size: .85rem; margin: 0 0 1rem; }
.ef-comments .comment-form { display: flex; flex-direction: column; gap: .8rem; }
.ef-comments .comment-form p { margin: 0; }
@media (min-width: 620px) {
  .ef-comments .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .ef-comments .comment-form-comment, .ef-comments .comment-form-cookies-consent, .ef-comments .form-submit, .ef-comments .comment-notes { grid-column: 1 / -1; }
}
.ef-comments .comment-form input[type=text], .ef-comments .comment-form input[type=email], .ef-comments .comment-form textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: .7rem .85rem; font-size: 1rem; font-family: inherit; }
.ef-comments .comment-form textarea { min-height: 120px; resize: vertical; }
.ef-comments .comment-form input:focus, .ef-comments .comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.ef-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--ink-2); }
.ef-comments .comment-form-cookies-consent input { margin-top: .2rem; flex: none; }
.ef-comments .comment-form-cookies-consent label { margin: 0; }
.ef-comments .form-submit #submit { display: inline-block; background: var(--fill); color: var(--on-fill); border: 0; border-radius: 12px; padding: .8rem 1.6rem; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 24px -12px var(--fill); }
.ef-comments .form-submit #submit:hover { background: var(--fill-strong); }
.ef-comments #cancel-comment-reply-link { margin-left: .6rem; font-size: .85rem; color: var(--no); }

/* newsletter form (custom, replaces CF7 — lives on the dark rust panels of the
   home + newsletter pages; email input styling comes from .ef-mail__form there) */
.ef-mail__form .ef-nl-form { display: block; text-align: left; }
.ef-nl-form__field { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.ef-nl-form__field input[type=email] { flex: 1 1 220px; width: auto; margin: 0; }
.ef-nl-form__submit { flex: none; border: 0; border-radius: 12px; padding: .85rem 1.4rem; font-weight: 700; font-size: 1rem; font-family: inherit; cursor: pointer; background: var(--tint); color: var(--rust-deep); }
.ef-nl-form__submit:hover { background: #fff; }
.ef-nl-form__submit:disabled { opacity: .6; cursor: default; }
.ef-nl-form__consent { display: flex; gap: .5rem; align-items: flex-start; margin: .7rem 0 0; font-size: .82rem; color: rgba(255,255,255,.82); cursor: pointer; }
.ef-nl-form__consent input { margin-top: .15rem; flex: none; accent-color: var(--tint-3); }
.ef-nl-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ef-nl-form__status { margin: .8rem 0 0; font-size: .88rem; border-radius: 10px; padding: .55rem .8rem; }
.ef-nl-form__status.is-ok { background: rgba(255,255,255,.14); color: #eafaef; border: 1px solid rgba(127,211,150,.55); }
.ef-nl-form__status.is-err { background: rgba(0,0,0,.18); color: #ffd9d2; border: 1px solid rgba(255,120,110,.5); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }