/*
Theme Name: Syncos Magazine
Description: Generated theme for syncosmagazine.org, built from design tokens.
Version: 2.0
Text Domain: pressroom
*/

:root {
  --bg: #edfcfc;
  --text: #02090a;
  --muted: #215456;
  --accent: #12593a;
  --accent-contrast: #edfcfc;
  --border: #76a8aa;
  --surface: #c5dfe0;
  --radius: 999px;
  --space: 1.45rem;
  --maxw: 1320px;
  --font-display: "Lora", Georgia, "Times New Roman", Cambria, serif;
  --font-text: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kicker: "Nunito Sans", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
/* Serif display for headlines; clean sans for UI/labels — an editorial pairing. */
h1,h2,h3,h4,.brand__name,.card__title,.section-head,.hero__title,.pick__title,.article__title {
  font-family:var(--font-display); font-weight:700; }
.nav a,.pill,.btn,.meta,.header-search input,.brand__logo { font-family:var(--font-text); }
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); }

/* Top social bar */
.topbar { background:var(--text); color:var(--bg); font-size:.8rem; }
.topbar .container { display:flex; justify-content:flex-end; gap:1rem;
  padding:.4rem var(--space); }
.topbar a { color:var(--bg); opacity:.85; }

/* Header */
.site-header { border-top:3px solid var(--accent); border-bottom:1px solid var(--border);
  background:var(--bg); position:sticky; top:0; z-index:20; }
.site-header__bar { display:flex; align-items:center; gap:var(--space);
  padding:calc(var(--space)*.9) 0; }
.brand { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.brand__logo { display:grid; place-items:center; width:40px; height:40px;
  border-radius:calc(var(--radius)*.7); background:var(--accent);
  color:var(--accent-contrast); font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; line-height:1; flex:0 0 auto; }
.brand__mark { flex:0 0 auto; line-height:0; }
.brand__mark svg { width:40px; height:40px; display:block; }
.brand__name { font-weight:800; font-size:1.5rem; letter-spacing:-.02em; white-space:nowrap; }
.nav { flex:1 1 auto; }
.nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:1.15rem; margin:0; padding:0; }
.nav a { font-weight:600; font-size:.92rem; }
.nav a:hover { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:.7rem; }
/* Language switcher: endonyms, never flags; the current section is active.
   Token-driven, so it inherits each archetype's own colours and type voice. */
.lang-switch { display:inline-flex; align-items:center; gap:.1rem;
  font-family:var(--font-text); font-size:.8rem; font-weight:600; flex:0 0 auto; }
.lang-switch__opt { color:var(--muted); padding:.15rem .45rem;
  border-radius:calc(var(--radius)*.6); white-space:nowrap; }
.lang-switch__opt:hover { color:var(--accent); }
.lang-switch__opt.is-active { color:var(--text); background:var(--surface); }
.header-search input { border:1px solid var(--border); border-radius:999px;
  padding:.45rem .9rem; font:inherit; font-size:.85rem; background:var(--surface);
  color:var(--text); width:150px; }
.btn { display:inline-block; font-weight:700; font-size:.85rem; padding:.5rem 1.05rem;
  border-radius:999px; background:var(--accent); color:var(--accent-contrast);
  border:1px solid var(--accent); cursor:pointer; }
.btn:hover { filter:brightness(.95); }

/* Pills */
.pill { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px;
  background:var(--surface); color:var(--accent); }

/* Hero — sits in a soft panel so the top of the page has weight */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:calc(var(--space)*1.6);
  align-items:center; margin:calc(var(--space)*1.4) 0;
  padding:calc(var(--space)*1.4); background:var(--surface);
  border-radius:calc(var(--radius)*1.3); }
.hero__imgwrap { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.hero__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hero__imgwrap:hover img { transform:scale(1.03); }
.hero__title { font-size:clamp(2rem, 4.2vw, 3.25rem); line-height:1.1;
  letter-spacing:-.015em; margin:.5rem 0 .4rem; text-wrap:balance; }
.hero__excerpt { color:var(--muted); font-size:1.12rem; line-height:1.55; margin:.5rem 0;
  max-width:46ch; }
/* Not flex: mixed text nodes + a separator span in a flex row could collapse
   onto one another on wrap. Plain inline text with a comfortable line-height. */
.meta { color:var(--muted); font-size:.82rem; line-height:1.6;
  font-family:var(--font-text); }
.meta .dot { opacity:.5; margin:0 .35rem; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } }

/* Section heads */
.section { padding:calc(var(--space)*1.2) 0; }
.section-head { display:flex; align-items:center; gap:.8rem; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 var(--space); }
.section-head::before { content:""; width:.65rem; height:1.3rem; border-radius:3px;
  background:var(--accent); flex:0 0 auto; }
.section-head::after { content:""; flex:1; height:2px; background:var(--border); }

/* Card grids */
.grid { display:grid; gap:calc(var(--space)*1.3); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid-3,.grid-4 { grid-template-columns:1fr; } }
/* Flex column so the card box always encloses image + pill + title + meta;
   without it the row can end at the image and the next block (pagination)
   draws over the titles. */
.card { display:flex; flex-direction:column; transition:transform .2s ease; }
.card:hover { transform:translateY(-3px); }
.card__imgwrap { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card:hover .card__imgwrap { box-shadow:0 8px 24px rgba(0,0,0,.12); }
.card__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card__imgwrap img { transform:scale(1.04); }
/* Never render an empty picture box: if a post has no image, drop the frame
   entirely (and let the hero fall back to a single column). */
.card__imgwrap:not(:has(img)), .hero__imgwrap:not(:has(img)),
.pick__img:not(:has(img)) { display:none; }
.hero:not(:has(.hero__imgwrap img)) { grid-template-columns:1fr; }
.card__title { font-size:1.08rem; line-height:1.35; margin:.4rem 0 .35rem; }
.card:hover .card__title { color:var(--accent); }
/* Pills sit on their own line above the title with real separation. */
.card .pill, .hero .pill, .article .pill { display:inline-block; margin-bottom:.4rem; }
/* Long unbroken Cyrillic titles must wrap, not overrun neighbouring text. */
.card__title, .hero__title, .article__title, .pick__title { overflow-wrap:break-word; }
.card__title a, .hero__title a { display:inline-block; }

/* Editor picks: alternating list */
.picks { display:flex; flex-direction:column; gap:calc(var(--space)*1.2); }
.pick { display:grid; grid-template-columns:300px 1fr; gap:calc(var(--space)*1.2);
  align-items:center; }
.pick:nth-child(even) { grid-template-columns:1fr 300px; }
.pick:nth-child(even) .pick__img { order:2; }
.pick__img { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.pick__img img { width:100%; height:100%; object-fit:cover; }
.pick__title { font-family:var(--font-display); font-size:1.4rem; line-height:1.2;
  margin:.4rem 0; }
.pick__excerpt { color:var(--muted); margin:.3rem 0 .6rem; }
@media (max-width:700px) { .pick,.pick:nth-child(even) { grid-template-columns:1fr; }
  .pick:nth-child(even) .pick__img { order:0; } }

/* Pagination */
.pagination { display:flex; gap:.4rem; padding:var(--space) 0; flex-wrap:wrap;
  justify-content:center; clear:both; margin-top:calc(var(--space)*1.4);
  position:relative; z-index:1; }
.pagination a,.pagination span { font-family:var(--font-display); font-weight:600;
  padding:.5rem .85rem; border-radius:var(--radius); border:1px solid var(--border); }
.pagination .current { background:var(--accent); color:var(--accent-contrast);
  border-color:var(--accent); }

/* Article */
.article { max-width:740px; margin:0 auto; padding:calc(var(--space)*1.8) 0; }
.article__title { font-size:2.5rem; line-height:1.2; letter-spacing:-.02em; margin:.5rem 0; }
.article__img { border-radius:var(--radius); overflow:hidden; margin:var(--space) 0; }
.article__body { font-size:1.12rem; }
.article__body p { margin:0 0 1.2rem; }
.article__body h2 { font-family:var(--font-display); font-size:1.6rem; margin:2rem 0 .6rem; }
.article__body h3 { font-family:var(--font-display); font-size:1.22rem; margin:1.5rem 0 .5rem; }
.article__body ul { margin:0 0 1.2rem 1.2rem; }
.article__body li { margin:0 0 .4rem; }
.article__body a { color:var(--accent); text-decoration:underline; }

/* ======================================================================
   AI-citable content blocks — FAQ / data table / key stats.
   The content pipeline may emit these inside a post's HTML; they are styled
   purely from each archetype's design tokens (colour, radius, type voices), so
   they read as native in newsroom / magazine / knowledge / longread and follow
   the same light/dark token flips (the newsroom re-pins tokens for dark mode).
   ====================================================================== */
/* FAQ — accessible disclosure: visible summary, clear open state, keyboard focus. */
.pr-faq { margin:calc(var(--space)*1.5) 0; border-top:1px solid var(--border); }
.pr-faq__item { border-bottom:1px solid var(--border); }
.pr-faq__item > summary { cursor:pointer; list-style:none; display:block;
  position:relative; padding:1rem 2.2rem 1rem 0; font-family:var(--font-display);
  font-weight:700; font-size:1.08rem; line-height:1.35; color:var(--text); }
.pr-faq__item > summary::-webkit-details-marker { display:none; }
.pr-faq__item > summary::after { content:"+"; position:absolute; right:.2rem; top:.85rem;
  font-family:var(--font-text); font-weight:400; font-size:1.5rem; line-height:1;
  color:var(--accent); transition:transform .2s ease; }
.pr-faq__item[open] > summary::after { content:"\2212"; }
.pr-faq__item > summary:focus-visible { outline:2px solid var(--accent);
  outline-offset:2px; border-radius:calc(var(--radius)*.5); }
.pr-faq__a { padding:0 0 1.1rem; color:var(--muted); line-height:1.6; max-width:70ch; }
.pr-faq__a > *:first-child { margin-top:0; }
.pr-faq__a > *:last-child { margin-bottom:0; }

/* Data / comparison table — bordered, horizontally scrollable, tabular figures. */
.pr-data { margin:calc(var(--space)*1.5) 0; overflow-x:auto;
  border:1px solid var(--border); border-radius:var(--radius); }
.pr-data figcaption { padding:.8rem 1rem; font-family:var(--font-kicker);
  text-transform:uppercase; letter-spacing:.06em; font-size:.76rem; font-weight:600;
  color:var(--muted); background:var(--surface); border-bottom:1px solid var(--border); }
.pr-data table { border-collapse:collapse; width:100%; font-size:.96rem;
  font-variant-numeric:tabular-nums; }
.pr-data th, .pr-data td { padding:.6rem .9rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); }
.pr-data thead th { font-family:var(--font-display); font-weight:700; color:var(--text);
  border-bottom:2px solid var(--border); }
.pr-data tbody tr:last-child td { border-bottom:0; }
.pr-data tbody tr:hover { background:var(--surface); }

/* Key-stats callout — a tidy row of figures. */
.pr-stats { list-style:none; margin:calc(var(--space)*1.5) 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space); }
.pr-stats li { border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*.9) var(--space); background:var(--surface);
  color:var(--muted); font-size:.9rem; line-height:1.4; }
.pr-stats b { display:block; margin-bottom:.25rem; font-family:var(--font-display);
  font-weight:800; font-size:1.75rem; line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums; }

/* Footer */
.site-footer { background:var(--text); color:var(--bg); margin-top:calc(var(--space)*2.2);
  padding:calc(var(--space)*2) 0 var(--space); }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:calc(var(--space)*1.5);
  margin-bottom:calc(var(--space)*1.4); }
@media (max-width:700px) { .footer-cols { grid-template-columns:1fr; } }
.site-footer h3 { font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;
  opacity:.7; margin:0 0 .8rem; }
.site-footer a { opacity:.85; } .site-footer a:hover { opacity:1; color:var(--accent); }
.site-footer ul { list-style:none; margin:0; padding:0; line-height:2; }
.footer__brand { font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.footer__copy { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--space);
  opacity:.6; font-size:.82rem; }

/* --- Knowledge base archetype: search + category tiles --- */
.kb-hero { text-align:center; background:var(--surface); border-radius:calc(var(--radius)*1.3);
  padding:calc(var(--space)*2.2) var(--space); margin:var(--space) 0 calc(var(--space)*1.6); }
.kb-hero h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 .4rem; }
.kb-hero p { color:var(--muted); margin:0 auto var(--space); max-width:52ch; }
.kb-hero form { display:flex; gap:.5rem; justify-content:center; }
.kb-hero input { border:1px solid var(--border); border-radius:999px; padding:.7rem 1.1rem;
  font:inherit; min-width:min(420px,70vw); background:var(--bg); color:var(--text); }
.kb-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space); }
@media (max-width:760px) { .kb-cats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .kb-cats { grid-template-columns:1fr; } }
.kb-cat { display:block; border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*1.1); background:var(--bg); transition:border-color .2s,transform .2s; }
.kb-cat:hover { border-color:var(--accent); transform:translateY(-2px); }
.kb-cat__name { font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.kb-cat__count { color:var(--muted); font-size:.85rem; }

/* --- Long-read archetype: single column, essay-forward --- */
.lr-wrap { max-width:760px; margin:0 auto; }
.lr-lead { padding:calc(var(--space)*1.8) 0 var(--space); border-bottom:1px solid var(--border); }
.lr-lead__title { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:.5rem 0;
  letter-spacing:-.02em; text-wrap:balance; }
.lr-lead__excerpt { font-size:1.2rem; color:var(--muted); line-height:1.6; }
.lr-list { list-style:none; margin:0; padding:0; }
.lr-item { padding:calc(var(--space)*1.3) 0; border-bottom:1px solid var(--border); }
.lr-item__title { font-size:1.7rem; line-height:1.2; margin:.2rem 0 .4rem; }
.lr-item__title a:hover { color:var(--accent); }
.lr-item__excerpt { color:var(--muted); margin:.2rem 0; }

/* ======================================================================
   MAGAZINE archetype (B) — "warm photo-led magazine"
   Photo-forward, restrained, no gimmicks. Colours come from the palette
   tokens (so every site differs); the warm-editorial feel is carried by
   structure, generous rhythm and the three-voice type system. Kickers use
   the condensed voice, headlines the serif, body the humanist sans.
   ====================================================================== */
.mag { padding-bottom:calc(var(--space)*2); }
.mag .kicker, .mag-kicker { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; font-weight:600; color:var(--accent); }
.mag .pill { font-family:var(--font-kicker); }

/* Photo boxes: strict crops, hairline frame, warm neutral fill behind the
   image. When a post has no featured image the frame collapses (see guards). */
.mag-photo { display:block; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); }
.mag-photo img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
a.mag-photo:hover img { transform:scale(1.03); }
.mag-photo:not(:has(img)) { display:none; }

/* --- Signature: photo-led lead. Image dominates; the headline sits in a
   SOLID ink bar directly BENEATH the photo — never overlaid on it. --- */
.mag-lead { margin:calc(var(--space)*1.6) 0 calc(var(--space)*1.2); }
.mag-lead__img { aspect-ratio:16/9; border-radius:0; border-bottom:0; }
@media (min-width:820px) {
  .mag-lead__img { aspect-ratio:auto; height:56vh; min-height:420px; max-height:640px; }
}
.mag-lead__bar { background:var(--text); color:var(--bg);
  padding:calc(var(--space)*1.2) calc(var(--space)*1.3) calc(var(--space)*1.3); }
.mag-lead__bar .pill { margin-bottom:.7rem; }
.mag-lead__title { font-family:var(--font-display); font-weight:700; color:var(--bg);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.12; letter-spacing:-.01em;
  margin:.2rem 0 0; max-width:24ch; overflow-wrap:break-word; }
.mag-lead__title a { color:inherit; }
.mag-lead__title a:hover { color:var(--accent); }
.mag-lead__foot { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:baseline;
  margin-top:calc(var(--space)*1.1); padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.18); }
.mag-lead__foot .meta { color:var(--bg); opacity:.75; }
.mag-lead__caption { color:var(--muted); font-size:.95rem; line-height:1.55;
  margin:.9rem 0 0; max-width:70ch; }

/* Section head: a ruled bar with a condensed label and an "Все →" affordance. */
.mag-sec { margin-top:calc(var(--space)*2.4); }
.mag-sec__head { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; border-bottom:2px solid var(--text); padding-bottom:.6rem;
  margin-bottom:calc(var(--space)*1.3); }
.mag-sec__head h2 { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; font-size:1.25rem; margin:0; color:var(--text); }
.mag-all { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.mag-all:hover { text-decoration:underline; text-underline-offset:3px; }

/* Story grid — strict 3:2 crops. */
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--space)*1.6) calc(var(--space)*1.4); }
@media (max-width:820px) { .mag-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .mag-grid { grid-template-columns:1fr; } }
.mag-card__img { aspect-ratio:3/2; }
.mag-card .pill { display:inline-block; margin:.85rem 0 .5rem; }
.mag-card__title { font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  line-height:1.24; margin:0; overflow-wrap:break-word; }
.mag-card__title a:hover { color:var(--accent); }
.mag-card .meta { display:block; margin-top:.55rem; }

/* Topic rails: a lead story + two columns of headline-only items. */
.mag-rail { display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:calc(var(--space)*1.5); }
@media (max-width:820px) { .mag-rail { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .mag-rail { grid-template-columns:1fr; } }
.mag-rail__img { aspect-ratio:3/2; margin-bottom:.9rem; }
.mag-rail__lead h3 { font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  line-height:1.18; margin:.5rem 0 0; overflow-wrap:break-word; }
.mag-rail__lead h3 a:hover { color:var(--accent); }
.mag-rail__dek { color:var(--muted); font-size:.98rem; line-height:1.55; margin:.7rem 0 0;
  max-width:52ch; }
.mag-rail__col { display:flex; flex-direction:column; gap:calc(var(--space)*1.1); }
.mag-rail__item { border-top:1px solid var(--border); padding-top:.9rem; }
.mag-rail__item h4 { font-family:var(--font-text); font-weight:600; font-size:1rem;
  line-height:1.3; margin:0; overflow-wrap:break-word; }
.mag-rail__item h4 a:hover { color:var(--accent); }
.mag-rail__item .meta { display:block; margin-top:.4rem; }

/* Популярное — a text-only ranked list, plus an optional English teaser aside. */
.mag-pop { display:grid; grid-template-columns:2fr 1fr;
  gap:calc(var(--space)*2.4); align-items:start; }
.mag-pop--solo { grid-template-columns:1fr; }
@media (max-width:820px) { .mag-pop { grid-template-columns:1fr;
  gap:calc(var(--space)*1.8); } }
.mag-poplist { list-style:none; margin:0; padding:0; }
.mag-poplist li { display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  align-items:baseline; padding:.95rem 0; border-top:1px solid var(--border); }
.mag-poplist li:first-child { border-top:0; padding-top:0; }
.mag-num { font-family:var(--font-kicker); font-weight:600; font-size:1.7rem;
  line-height:1; color:var(--accent); min-width:1.4em; }
.mag-poplist a { font-family:var(--font-display); font-weight:700; font-size:1.08rem;
  line-height:1.3; overflow-wrap:break-word; }
.mag-poplist a:hover { color:var(--accent); }
.mag-poplist .meta { display:block; margin-top:.35rem; }

/* English-edition teaser (only rendered when the site has a secondary language). */
.mag-eng__dek { color:var(--muted); font-size:.95rem; line-height:1.55; margin:.2rem 0 1rem; }
.mag-eng__link { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:.85rem; color:var(--accent); }
.mag-eng__link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Light magazine footer — paper canvas, hairline rule, muted text. */
.mag-foot { display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  justify-content:space-between; align-items:flex-start; }
.mag-foot__brand { font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--text); }
.mag-foot small { display:block; margin-top:.5rem; color:var(--muted); font-size:.85rem;
  max-width:44ch; line-height:1.5; }
.mag-foot__nav { display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; list-style:none;
  margin:0; padding:0; }
.mag-foot__nav a { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; color:var(--muted); }
.mag-foot__nav a:hover { color:var(--accent); }
.site-footer--light { background:var(--bg); color:var(--text);
  border-top:1px solid var(--border);
  padding:calc(var(--space)*2) 0 calc(var(--space)*1.6); margin-top:calc(var(--space)*2.2); }

/* Cookie consent bar */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--text); color:var(--bg); padding:.85rem var(--space);
  display:flex; gap:1rem; align-items:center; justify-content:center;
  flex-wrap:wrap; font-size:.9rem; box-shadow:0 -2px 16px rgba(0,0,0,.18); }
/* The class's display:flex would otherwise beat the [hidden] attribute, so the
   bar could never be dismissed (nor stay dismissed). This wins on specificity. */
.cookie-bar[hidden] { display:none; }
.cookie-bar a { color:var(--bg); text-decoration:underline; }
.cookie-bar .btn { padding:.4rem .95rem; }

/* Mobile */
@media (max-width:820px) {
  body { font-size:16px; }
  .site-header__bar { flex-wrap:wrap; gap:.6rem; }
  .brand { flex:1 1 auto; }
  .nav { order:3; flex-basis:100%; overflow-x:auto; }
  .nav ul { flex-wrap:nowrap; gap:1rem; padding-bottom:.2rem; }
  .header-actions { margin-left:auto; }
  .header-search input { width:120px; }
  .hero__title { font-size:1.9rem; }
  .article__title { font-size:2rem; }
  .article__body { font-size:1.05rem; }
}
@media (max-width:460px) {
  .header-search { display:none; }
  .hero__title { font-size:1.6rem; }
}


/* ---------- BLOOM: warm blush palette (pinned as own tokens) ----------
   Committed warm ground BY DESIGN: a soft blush canvas that carries the
   pets-magazine identity. Single-theme on purpose — it does NOT invert to a
   dark theme, so a viewer's OS dark-mode preference can't turn it near-black. */
:root {
  --bg:#FBF2ED; --text:#33232A; --muted:#705660; --border:#E3D0C8; --surface:#F6E7E0;
  --accent:#B4485F; --accent-contrast:#FFFFFF;
  --bl-card:#FFFAF7; --bl-sage:#5E8168; --bl-honey:#E39A54; --bl-rose-deep:#8E3049;
  --bl-shadow:0 18px 44px -28px rgba(74,36,44,.5);
}
:root[data-theme="light"] {
  --bg:#FBF2ED; --text:#33232A; --muted:#705660; --border:#E3D0C8; --surface:#F6E7E0;
  --accent:#B4485F; --accent-contrast:#FFFFFF;
  --bl-card:#FFFAF7; --bl-sage:#5E8168; --bl-honey:#E39A54; --bl-rose-deep:#8E3049;
}
body { text-rendering:optimizeLegibility; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* ---------- BLOOM: header (serif brand, rose underline nav, soft blur) ---------- */
.site-header { border-top:0; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); }
.brand__logo { background:var(--accent); color:var(--accent-contrast);
  font-family:var(--font-display); font-weight:600; border-radius:50%; }
.brand__name { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }
.nav a { font-weight:600; color:var(--muted); position:relative; }
.nav a:hover { color:var(--text); }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--accent); border-radius:2px; transition:right .25s ease; }
.nav a:hover::after { right:0; }
.header-search input { border-radius:999px; background:var(--surface); }

/* Small letter-spaced eyebrows carry section labels (the reference's voice). */
.bl-eyebrow { font-family:var(--font-text); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:700; color:var(--accent); margin:0 0 .5rem; }
.bl-eyebrow--sage { color:var(--bl-sage); }

/* ---------- BLOOM: warm asymmetric hero (photo beside a serif headline) ---------- */
.bl-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,52px);
  align-items:center; padding:calc(var(--space)*2) 0 var(--space); }
.bl-hero__title { font-family:var(--font-display); font-weight:600; line-height:1.06;
  letter-spacing:-.02em; font-size:clamp(2.1rem,5vw,3.6rem); margin:0; overflow-wrap:break-word; }
.bl-hero__title a:hover { color:var(--accent); }
.bl-hero__dek { color:var(--muted); font-size:1.14rem; line-height:1.55;
  margin:1.1rem 0 1.4rem; max-width:32em; }
.bl-cta { display:flex; flex-wrap:wrap; gap:1rem 1.3rem; align-items:center; }
.bl-btn { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-text);
  font-weight:700; font-size:.98rem; border-radius:999px; padding:.8rem 1.5rem; }
.bl-btn--primary { background:var(--accent); color:var(--accent-contrast);
  box-shadow:var(--bl-shadow); transition:transform .18s ease; }
.bl-btn--primary:hover { transform:translateY(-2px); }
.bl-byline { font-family:var(--font-text); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700; color:var(--muted); }
.bl-hero__media { display:block; aspect-ratio:4/3; overflow:hidden; border-radius:26px;
  background:var(--surface); box-shadow:var(--bl-shadow); }
.bl-hero__media img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.bl-hero__media:hover img { transform:scale(1.03); }
/* No featured image? Drop the frame and let the headline span the row. */
.bl-hero__media:not(:has(img)) { display:none; }
.bl-hero:not(:has(.bl-hero__media img)) { grid-template-columns:1fr; }
@media (max-width:820px) { .bl-hero { grid-template-columns:1fr; } }

/* ---------- BLOOM: growing-sprig divider (signature) ---------- */
.bl-divider { display:flex; align-items:center; gap:18px; margin:1rem 0 .4rem;
  color:var(--bl-sage); }
.bl-divider__line { flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 22%,var(--border) 78%,transparent); }
.bl-divider svg { width:64px; height:22px; flex:0 0 auto; }

/* ---------- BLOOM: section scaffold ---------- */
.bl-sec { padding:calc(var(--space)*1.6) 0; }
.bl-sechead { display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  flex-wrap:wrap; margin-bottom:calc(var(--space)*1.3); }
.bl-sechead h2 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3.2vw,2.3rem); margin:.2rem 0 0; }
.bl-more { font-family:var(--font-text); font-weight:700; font-size:.92rem; color:var(--accent);
  white-space:nowrap; }
.bl-more:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- BLOOM: warm rounded card river ---------- */
.bl-guides { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,28px); }
@media (max-width:900px) { .bl-guides { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .bl-guides { grid-template-columns:1fr; } }
.bl-card { display:flex; flex-direction:column; background:var(--bl-card);
  border:1px solid var(--border); border-radius:22px; overflow:hidden; color:inherit;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s; }
.bl-card:hover { transform:translateY(-5px); box-shadow:var(--bl-shadow); border-color:transparent; }
.bl-card__art { display:block; aspect-ratio:16/10; background:var(--surface); overflow:hidden; }
.bl-card__art img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.bl-card:hover .bl-card__art img { transform:scale(1.04); }
.bl-card__art:not(:has(img)) { display:none; }
.bl-card__body { display:flex; flex-direction:column; padding:1.3rem 1.3rem 1.5rem; }
.bl-card__tag { font-family:var(--font-text); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:.5rem; }
.bl-card__title { font-family:var(--font-display); font-weight:600; font-size:1.3rem;
  line-height:1.2; letter-spacing:-.01em; margin:0 0 .5rem; overflow-wrap:break-word; }
.bl-card:hover .bl-card__title { color:var(--accent); }
.bl-card__dek { color:var(--muted); font-size:.96rem; line-height:1.5; margin:0 0 .8rem; }
.bl-card__read { margin-top:auto; font-family:var(--font-text); font-size:.83rem;
  font-weight:700; color:var(--muted); }
/* Feature the first card of the main river across two columns (image beside text),
   exactly as the reference's lead guide — but only in the un-suffixed river grid. */
.bl-guides:not(.bl-guides--3) > .bl-card:first-child { grid-column:span 2; flex-direction:row; }
.bl-guides:not(.bl-guides--3) > .bl-card:first-child .bl-card__art { aspect-ratio:auto;
  width:44%; flex:0 0 44%; }
@media (max-width:900px) {
  .bl-guides:not(.bl-guides--3) > .bl-card:first-child { grid-column:span 2; }
}
@media (max-width:600px) {
  .bl-guides:not(.bl-guides--3) > .bl-card:first-child { grid-column:auto; flex-direction:column; }
  .bl-guides:not(.bl-guides--3) > .bl-card:first-child .bl-card__art { width:100%; flex:none;
    aspect-ratio:16/10; }
}

/* ---------- BLOOM: petal-backed pull-quote (signature) ---------- */
.bl-quote { position:relative; padding:calc(var(--space)*2.4) 0; }
.bl-quote__petal { position:absolute; inset:0; margin:auto; width:min(560px,86%); height:auto;
  z-index:1; opacity:.42; pointer-events:none; }
.bl-quote__inner { position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.bl-quote blockquote { margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.3; letter-spacing:-.015em; }
.bl-quote figcaption { margin-top:1.3rem; font-family:var(--font-text); font-size:.86rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted); }

/* ---------- BLOOM: warm category chips ---------- */
.bl-chips { display:flex; flex-wrap:wrap; gap:.8rem; }
.bl-chip { display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--border);
  border-radius:999px; padding:.65rem 1.2rem; font-family:var(--font-text); font-weight:600;
  font-size:.96rem; color:var(--text); transition:border-color .2s, color .2s; }
.bl-chip:hover { border-color:var(--accent); color:var(--accent); }
.bl-chip__dot { width:8px; height:8px; border-radius:50%; background:var(--bl-sage); flex:0 0 auto; }

/* ---------- BLOOM: light footer voices (serif brand, plain nav) ---------- */
.mag-foot__brand { font-family:var(--font-display); font-weight:600; }
.mag-foot__nav a { font-family:var(--font-text); text-transform:none; letter-spacing:0; }