/*
Theme Name: Freshouz 2026
Theme URI: https://freshouz.com
Author: Freshouz
Description: Custom editorial theme for Freshouz — home & architecture journal. Built for readability, real photography, and revenue (AdSense + affiliate) without looking like a template.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: freshouz-2026
*/

/* Hallmark · genre: editorial · theme: Garden (leaf-green accent, warm plaster paper)
 * paper-band: light · display-style: classical-serif (Fraunces) · accent-hue: chromatic-other (leaf-green ~148°)
 * macrostructures: Ecosystem Index (front-page) · Photographic fold-alternating (single)
 * nav: N6 Newspaper masthead · footer: Ft1 Mast-headed
 */

:root {
  /* — Colour: paper layer, tinted warm (plaster / linen), anchor hue 82 — */
  --color-paper:        oklch(97% 0.010 85);
  --color-paper-2:      oklch(94% 0.012 82);
  --color-paper-3:      oklch(91% 0.013 80);
  --color-rule:         oklch(85% 0.014 82);
  --color-neutral:      oklch(58% 0.012 80);
  --color-muted:        oklch(42% 0.012 75);
  --color-ink:          oklch(21% 0.014 60);

  /* — Colour: accent, leaf green, hue 148 — used ≤3% of any view — */
  --color-accent:       oklch(47% 0.135 148);
  --color-accent-ink:   oklch(30% 0.09  148);
  --color-accent-soft:  oklch(93% 0.035 148);
  --color-focus:        oklch(58% 0.16  148);

  /* — Typography — 2+1: Fraunces display, IBM Plex Sans body, Geist Mono outlier — */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:      0.64rem;
  --text-sm:      0.8rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.5625rem;
  --text-xl:      1.9531rem;
  --text-2xl:     2.4414rem;
  --text-3xl:     3.0518rem;
  --text-4xl:     3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);

  /* — Spacing — 4pt scale — */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* — Motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 100ms;
  --dur-short:   180ms;
  --dur-base:    260ms;
  --dur-long:    420ms;

  /* — Structure — */
  --rule-hair:  1px;
  --radius-sm:  0.1875rem;
  --radius-md:  0.375rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 65ch;

  /* — Z-index, named — */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip; margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md);
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

.container { max-width: 76rem; margin-inline: auto; padding-inline: var(--page-gutter); }
.prose-col { max-width: var(--measure); }

/* — Nav: N6 Newspaper masthead — */
.nav-mast { padding: var(--space-lg) var(--page-gutter) 0; text-align: center; }
.mast-line {
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-sm);
}
.mast-name { font-size: clamp(2.5rem, 6vw, 4.25rem); letter-spacing: -0.01em; line-height: 0.92; }
.mast-name a { display: inline-flex; align-items: baseline; gap: var(--space-2xs); }
.mast-name .leaf { color: var(--color-accent); font-size: 0.5em; }
.mast-nav { margin-top: var(--space-md); }
.mast-nav ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
.mast-nav a {
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.mast-nav a:hover, .mast-nav a:focus-visible, .mast-nav .current-menu-item a { border-color: var(--color-accent); color: var(--color-accent-ink); }
.mast-rule { border: 0; height: 4px; margin: var(--space-lg) 0 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* — Breadcrumb — */
.breadcrumb {
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.04em;
  color: var(--color-muted); padding: var(--space-lg) 0 0; text-align: center;
}
.breadcrumb a { border-bottom: var(--rule-hair) solid transparent; }
.breadcrumb a:hover { border-color: currentColor; }

/* — Positioning paragraph (no display type) — */
.masthead-intro {
  max-width: 52ch; margin: var(--space-xl) auto var(--space-2xl);
  text-align: center; color: var(--color-muted); font-size: var(--text-md);
}
.masthead-intro strong { color: var(--color-ink); font-weight: 600; }

/* — Rail scaffolding — */
.rail { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.rail:first-of-type { border-top: none; padding-top: 0; }
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); margin-bottom: var(--space-lg);
}
.rail-title { font-size: var(--text-2xl); }
.rail-more {
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-accent);
  transition: opacity var(--dur-short) var(--ease-out);
}
.rail-more:hover, .rail-more:focus-visible { opacity: 0.7; }

/* — Featured rail — */
.featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-xl); }
.featured-lead .card-media { aspect-ratio: 16/10; }
.featured-secondary { display: grid; gap: var(--space-lg); }
.featured-secondary .card-media { aspect-ratio: 16/9; }

.card { display: block; }
.card-media {
  overflow: hidden; background: var(--color-paper-2); border-radius: var(--radius-sm); position: relative;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.card:hover .card-media img, .card:focus-visible .card-media img { transform: scale(1.035); }
.card-kicker {
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-ink); margin: var(--space-md) 0 var(--space-2xs);
}
.card-title { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
.featured-lead .card-title { font-size: var(--text-2xl); margin-top: var(--space-md); }
.featured-secondary .card-title { font-size: var(--text-lg); }
.card-dek { color: var(--color-muted); margin-top: var(--space-xs); font-size: var(--text-sm); max-width: 60ch; }
.card-title, .card-dek { transition: color var(--dur-short) var(--ease-out); }
.card:hover .card-title, .card:focus-visible .card-title { color: var(--color-accent-ink); }

/* — Popular rail (numbered) — */
.popular-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.popular-item {
  display: grid; grid-template-columns: auto 5.5rem 1fr; gap: var(--space-md); align-items: center;
  padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.popular-item:last-child { border-bottom: none; }
.popular-num {
  font-family: var(--font-outlier); font-size: var(--text-xl); color: var(--color-paper-3);
  -webkit-text-stroke: 1px var(--color-rule); font-variant-numeric: tabular-nums;
}
.popular-thumb { aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-paper-2); }
.popular-thumb img { width: 100%; height: 100%; object-fit: cover; }
.popular-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.3;
  transition: color var(--dur-short) var(--ease-out);
}
.popular-item:hover .popular-title, .popular-item a:focus-visible .popular-title { color: var(--color-accent-ink); }

/* — Category rail (grid cards) — */
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.category-grid .card-media { aspect-ratio: 4/5; }
.category-grid .card-title { font-size: var(--text-md); margin-top: var(--space-sm); }

/* — Archive grid (category/search/404 listing) — */
.archive-head { text-align: center; padding: var(--space-xl) 0 var(--space-2xl); }
.archive-head .kicker { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-ink); }
.archive-head h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-top: var(--space-2xs); }
.archive-head .desc { color: var(--color-muted); max-width: 56ch; margin: var(--space-md) auto 0; }
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.archive-grid .card-media { aspect-ratio: 4/3; }

.pagination { display: flex; justify-content: center; gap: var(--space-md); padding-block: var(--space-xl) var(--space-3xl); font-family: var(--font-outlier); font-size: var(--text-sm); }
.pagination a, .pagination span { border-bottom: var(--rule-hair) solid transparent; }
.pagination a:hover { border-color: var(--color-accent); }
.pagination .current { color: var(--color-accent-ink); border-color: var(--color-accent); }

/* — Search form — */
.search-form { display: flex; gap: var(--space-sm); max-width: 32rem; margin: 0 auto; }
.search-form input[type="search"] {
  flex: 1; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: var(--text-base);
  background: var(--color-paper); color: var(--color-ink);
}
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.search-form button {
  border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-lg); font-weight: 600; cursor: pointer;
  transition: opacity var(--dur-short) var(--ease-out);
}
.search-form button:hover, .search-form button:focus-visible { opacity: 0.85; }

/* — Ad slots (widget-area friendly) — */
.ad-slot {
  border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-sm);
  padding: var(--space-xl); text-align: center; color: var(--color-neutral);
  margin-block: var(--space-2xl); background: var(--color-paper-2);
}
.ad-slot .ad-label {
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; display: block; margin-bottom: var(--space-2xs); color: var(--color-muted);
}
.ad-slot.ad-slot--sidebar { margin-block: 0; padding: var(--space-lg); min-height: 15.5rem; display: grid; place-content: center; }
.ad-slot:empty { display: none; }
.widget-area:empty { display: none; }

/* — Disclosure (FTC affiliate + ad notice) — */
.disclosure {
  max-width: var(--measure); margin: 0 auto var(--space-xl);
  font-size: var(--text-xs); color: var(--color-muted); font-style: italic; text-align: center;
}
.disclosure a { border-bottom: var(--rule-hair) solid currentColor; }

/* — Article head / hero — */
.article-head { text-align: center; padding: var(--space-lg) 0 var(--space-xl); max-width: 46rem; margin-inline: auto; }
.article-title { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em; }
.article-dek { color: var(--color-muted); font-size: var(--text-md); margin-top: var(--space-md); max-width: 56ch; margin-inline: auto; }
.article-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg);
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted);
}
.article-meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-md); color: var(--color-rule); }

.hero-photo { position: relative; margin-bottom: var(--space-lg); }
.hero-photo .bleed { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); }
.hero-photo .caption {
  position: absolute; bottom: var(--space-md); right: calc(var(--page-gutter) + var(--space-md));
  color: #fff; font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.04em; background: oklch(20% 0.01 60 / 0.55); padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

/* — Two-column layout: main + sticky sidebar — */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-2xl); align-items: start; }
.article-main { min-width: 0; }
.article-sidebar { position: sticky; top: var(--space-lg); display: grid; gap: var(--space-xl); }

/* — Post body (real Gutenberg content, generic block styling) — */
.entry-content { font-size: var(--text-base); line-height: 1.65; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { margin: 0 0 var(--space-md); }
.entry-content h2 { font-size: var(--text-2xl); line-height: 1.2; margin: var(--space-2xl) 0 var(--space-lg); }
.entry-content h3 { font-size: var(--text-xl); line-height: 1.25; margin: var(--space-xl) 0 var(--space-md); }
.entry-content h2:first-child, .entry-content h3:first-child { margin-top: 0; }
.entry-content ul { padding-left: 1.25em; margin: 0 0 var(--space-lg); }
.entry-content ol { padding-left: 1.25em; margin: 0 0 var(--space-lg); }
.entry-content li { margin-bottom: var(--space-sm); }
.entry-content li h3 {
  font-size: var(--text-xl); margin: 0 0 var(--space-2xs);
}
/* Named, explicitly-scoped counter — never the browser's implicit global
   "list-item" counter, which compounds into "1.1" when any other list
   (sidebar widgets, admin bar, etc.) shares the page. */
.entry-content ol { list-style: none; padding-left: 0; counter-reset: freshouz-item; }
.entry-content ol > li { counter-increment: freshouz-item; }
.entry-content li h3::before {
  content: counter(freshouz-item) " "; font-family: var(--font-outlier); font-size: var(--text-sm);
  color: var(--color-accent-ink); display: inline-block; margin-right: var(--space-2xs);
}
.entry-content figure { margin: var(--space-xl) calc(var(--space-2xl) * -1); }
.entry-content figure img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-sm);
}
.entry-content figcaption {
  text-align: center; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs);
  font-family: var(--font-outlier);
}
.entry-content img:not(figure img) { border-radius: var(--radius-sm); margin: var(--space-lg) 0; }
.entry-content blockquote {
  border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg); margin: var(--space-2xl) 0; text-align: center;
}
.entry-content blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); margin: 0;
}
.entry-content a { color: var(--color-accent-ink); border-bottom: var(--rule-hair) solid var(--color-accent); }
.entry-content a:hover { opacity: 0.75; }
.entry-content hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-2xl) 0; }
.entry-content .wp-block-image { margin: var(--space-xl) calc(var(--space-2xl) * -1); }
.entry-content .wp-block-image img { width: 100%; border-radius: var(--radius-sm); }
.entry-content .wp-block-image figcaption { text-align: center; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }

/* — Lede (first paragraph treatment) — */
.entry-content > p:first-of-type {
  font-size: var(--text-lg); line-height: 1.5;
}
.entry-content > p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.2em; float: left; line-height: 0.8;
  padding: 0.05em var(--space-xs) 0 0; color: var(--color-accent-ink);
}

/* — Sidebar widgets (ad + popular + affiliate) — */
.widget { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-lg); }
.widget-title { font-size: var(--text-md); margin-bottom: var(--space-md); font-family: var(--font-display); font-weight: 600; }
.popular-mini ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.popular-mini li {
  display: grid; grid-template-columns: auto 3.25rem 1fr; gap: var(--space-sm); align-items: center;
  padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule);
}
.popular-mini li:first-child { border-top: none; padding-top: 0; }
.popular-mini .num { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-accent-ink); }
.popular-mini .thumb { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-paper-2); }
.popular-mini .thumb img { width: 100%; height: 100%; object-fit: cover; }
.popular-mini .title { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.popular-mini a:hover .title, .popular-mini a:focus-visible .title { color: var(--color-accent-ink); }

/* — Author / share line — */
.article-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md);
  padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-lg);
}
.byline { font-size: var(--text-sm); color: var(--color-muted); }
.byline strong { color: var(--color-ink); }
.share-links { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.share-links a { border-bottom: var(--rule-hair) solid var(--color-accent); }

/* — Related grid — */
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.related-grid .card-media { aspect-ratio: 4/3; }

/* — Footer: Ft1 Mast-headed — */
.foot-mast { margin-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-2xl) var(--page-gutter) var(--space-xl); text-align: center; }
.foot-mast .wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); margin: 0; }
.foot-mast .tagline { color: var(--color-muted); margin: var(--space-2xs) 0 var(--space-lg); font-size: var(--text-sm); }
.foot-mast .links { color: var(--color-muted); font-size: var(--text-sm); }
.foot-mast .links a { border-bottom: var(--rule-hair) solid transparent; }
.foot-mast .links a:hover, .foot-mast .links a:focus-visible { border-color: currentColor; }
.foot-mast ul { list-style: none; padding: 0; margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.foot-mast ul li:not(:last-child)::after { content: "·"; margin: 0 var(--space-sm); color: var(--color-rule); }

/* — 404 — */
.error-404 { text-align: center; padding: var(--space-3xl) 0; }
.error-404 h1 { font-size: var(--text-3xl); }
.error-404 p { color: var(--color-muted); margin-top: var(--space-md); }

/* — Comments — */
.comments-area { max-width: var(--measure); margin: var(--space-2xl) auto 0; }
.comments-title, .comment-reply-title { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-lg); }
.comment-author { font-weight: 600; font-size: var(--text-sm); }
.comment-metadata { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.comment-form input, .comment-form textarea {
  width: 100%; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  padding: var(--space-sm); font-family: var(--font-body); font-size: var(--text-base); margin-bottom: var(--space-md);
  background: var(--color-paper);
}
.comment-form .form-submit input {
  width: auto; background: var(--color-ink); color: var(--color-paper); font-weight: 600; cursor: pointer;
}

/* — Mobile anchor ad (sitewide, dismissible) — */
.anchor-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm) var(--space-md); display: none;
  align-items: center; gap: var(--space-md);
  box-shadow: 0 -1px 2px oklch(20% 0.01 60 / 0.06);
}
.anchor-ad.has-content { display: none; }
.anchor-ad .ad-label { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.anchor-ad .ad-body { flex: 1; min-width: 0; }
.anchor-ad .ad-close {
  border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; background: none; color: var(--color-muted); cursor: pointer; font-size: var(--text-sm);
  flex-shrink: 0;
}
.anchor-ad .ad-close:hover, .anchor-ad .ad-close:focus-visible { color: var(--color-ink); border-color: var(--color-ink); }

/* — Save button (Pinterest-style hover affordance on content images) — */
.entry-content .wp-block-image { position: relative; }
.save-btn {
  position: absolute; top: var(--space-md); right: var(--space-md);
  background: oklch(98% 0.005 85 / 0.92); color: var(--color-ink);
  border: none; border-radius: 999px; padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
  cursor: pointer;
}
.entry-content .wp-block-image:hover .save-btn,
.entry-content .wp-block-image:focus-within .save-btn { opacity: 1; transform: translateY(0); }
.save-btn:hover, .save-btn:focus-visible { background: var(--color-accent); color: var(--color-paper); }

/* — Responsive: 60rem layout break, 40rem type break — */
@media (max-width: 60rem) {
  .featured-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mast-nav ul { gap: var(--space-md); }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content figure, .entry-content .wp-block-image { margin-inline: 0; }
}
@media (max-width: 40rem) {
  .mast-name { font-size: clamp(2rem, 9vw, 2.75rem); }
  .popular-item { grid-template-columns: auto 4rem 1fr; gap: var(--space-sm); }
  .rail-head { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .archive-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .article-meta { flex-wrap: wrap; row-gap: var(--space-xs); }
  .article-foot { flex-direction: column; align-items: flex-start; }
  .article-sidebar { grid-template-columns: 1fr; }
  .anchor-ad.has-content { display: flex; }
  body.has-anchor-ad { padding-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}