/* ==========================================================================
   LUMEN — a light, refined editorial theme for Ghost
   by Nocturne Themes · nocturnethemes.de
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 2. Tokens & colour schemes ---------------------------------------------- */

:root {
  --bg: #f8f5ef;
  --bg-raise: #fffdf9;
  --ink: #211d18;
  --ink-soft: #5f584e;
  --ink-mute: #948b7d;
  --hair: rgba(33, 29, 24, 0.13);
  --accent: var(--ghost-accent-color, #b0764a);
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --serif: var(--gh-font-heading, var(--font-serif));
  --sans: var(--gh-font-body, var(--font-sans));
  --title: var(--serif);
  --maxw: 1280px;
  --measure: 70ch;
  --pad: clamp(1.25rem, 4vw, 3.25rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.scheme-warm-sand { --bg: #f3ece0; --bg-raise: #fbf6ec; --hair: rgba(40,30,18,0.14); }
body.scheme-cool-paper { --bg: #f4f5f7; --bg-raise: #ffffff; --ink: #1c1f24; --ink-soft: #545a63; --ink-mute: #8b929c; --hair: rgba(28,31,36,0.12); }
body.font-sans { --title: var(--sans); }

/* 3. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--title); font-weight: 560; line-height: 1.1; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.site { display: flex; min-height: 100vh; flex-direction: column; }
.site-main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* 4. Header ---------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.site-head__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); min-height: 74px; display: flex; align-items: center; gap: 1.5rem; position: relative; }
.brand { text-decoration: none; }
.brand__word { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; }
.brand__logo { max-height: 36px; width: auto; }
.site-nav { flex: 1; }
.site-nav .nav { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.site-nav .nav a { font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); transition: color 0.25s var(--ease); }
.site-nav .nav a:hover, .site-nav .nav-current a { color: var(--ink); }
.head-actions { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }

/* Centered header variant */
body.header-centered .site-head__in { flex-direction: column; gap: 0.6rem; padding-top: 1.1rem; padding-bottom: 0.6rem; }
body.header-centered .site-nav { flex: none; }
body.header-centered .site-nav .nav { justify-content: center; flex-wrap: wrap; }
body.header-centered .head-actions { position: absolute; right: var(--pad); top: 1.1rem; margin-left: 0; }
@media (max-width: 900px) { body.header-centered .head-actions { position: static; } body.header-centered .site-head__in { flex-direction: row; } }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: 0; border-radius: 50%; color: var(--ink-soft); cursor: pointer; transition: color 0.25s var(--ease), background 0.25s var(--ease); }
.icon-btn:hover { color: var(--ink); background: var(--bg-raise); }
.btn { display: inline-block; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; padding: 0.72em 1.5em; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink); background: transparent; cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { color: #fff; filter: brightness(1.06); }

.menu-toggle { display: none; flex-direction: column; gap: 5px; }
.menu-toggle__bar { width: 18px; height: 1.6px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.mobile-menu { display: none; padding: 1.25rem var(--pad) 2rem; border-top: 1px solid var(--hair); }
.mobile-menu .nav { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.9rem; }
.mobile-menu .nav a { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; }
.mobile-menu[data-open] { display: block; }

/* 5. Kicker / byline ------------------------------------------------------- */

.kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; display: inline-block; }
.kicker--link { text-decoration: none; }
.kicker--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-mute); }
.byline__author { color: var(--ink-soft); text-decoration: none; font-weight: 550; }
.byline__author:hover { color: var(--accent); }

/* 6. Hero ------------------------------------------------------------------ */

.hero { margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__media { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-raise); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.hero:hover .hero__media img { transform: scale(1.03); }
.hero__title { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.hero__title a { text-decoration: none; }
.hero__title a:hover { color: var(--accent); }
.hero__excerpt { max-width: 50ch; font-size: 1.1rem; color: var(--ink-soft); margin: 1.1rem 0 1.3rem; }
.hero .byline { margin-top: 0.8rem; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero__media { order: -1; } }

/* 7. Featured strip -------------------------------------------------------- */

.fstrip { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: clamp(1.75rem, 4vw, 2.75rem) 0; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.fstrip__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
.fstrip__title { font-size: 0.78rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.fstrip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); }
.fcard { display: flex; gap: 0.9rem; text-decoration: none; align-items: flex-start; }
.fcard__num { font-family: var(--serif); font-size: 1.5rem; color: var(--accent); line-height: 1; flex: none; }
.fcard__title { font-family: var(--serif); font-size: 1.08rem; line-height: 1.22; }
.fcard:hover .fcard__title { color: var(--accent); }
@media (max-width: 760px) { .fstrip__grid { grid-template-columns: 1fr; gap: 1rem; } }

/* 8. Feed ------------------------------------------------------------------ */

.feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.25rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.card { grid-column: span 2; display: flex; flex-direction: column; }
.feed--magazine .card:nth-child(1) { grid-column: span 6; flex-direction: row; gap: 2rem; align-items: center; }
.feed--magazine .card:nth-child(1) .card__media { flex: 0 0 55%; aspect-ratio: 16 / 10; margin-bottom: 0; }
.feed--magazine .card:nth-child(1) .card__title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.feed--magazine .card:nth-child(1) .card__excerpt { -webkit-line-clamp: 4; }
.feed--grid .card:nth-child(1), .feed--grid .card:nth-child(2) { grid-column: span 3; }
.feed--grid .card:nth-child(1) .card__title, .feed--grid .card:nth-child(2) .card__title { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.card__media { display: block; overflow: hidden; border-radius: 5px; margin-bottom: 1.1rem; aspect-ratio: 3 / 2; background: var(--bg-raise); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__title { font-size: 1.3rem; line-height: 1.18; }
.card__title a { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 0.45s var(--ease); }
.card:hover .card__title a { background-size: 100% 1px; }
.card__excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 0.6rem 0 0.85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.byline--card { font-size: 0.79rem; margin-top: auto; }

.feed--list { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.feed--list .card { grid-column: 1 / -1; flex-direction: row; gap: 1.75rem; padding-bottom: clamp(1.75rem, 3.5vw, 3rem); border-bottom: 1px solid var(--hair); }
.feed--list .card:last-child { border-bottom: 0; }
.feed--list .card__media { flex: 0 0 38%; aspect-ratio: 4 / 3; margin-bottom: 0; }
.feed--list .card__body { flex: 1; display: flex; flex-direction: column; }

/* 9. Archive headers ------------------------------------------------------- */

.archive-head { text-align: center; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.25rem, 5vw, 3.5rem); max-width: 760px; margin: 0 auto; }
.archive-head__title { font-size: clamp(2.1rem, 5vw, 3.5rem); }
.archive-head__desc { color: var(--ink-soft); font-size: 1.05rem; margin: 1.1rem auto 0; max-width: 52ch; }
.archive-head__meta { color: var(--ink-mute); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.2rem; }
.archive-head__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.4rem; border: 1px solid var(--hair); }

/* 10. Post ----------------------------------------------------------------- */

.post-head { text-align: center; max-width: 880px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.75rem, 4vw, 3rem); }
.post-head__title { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
.post-head__excerpt { font-family: var(--serif); font-style: italic; font-weight: 420; color: var(--ink-soft); font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 1.4rem auto 0; max-width: 46ch; }
.byline--post { justify-content: center; margin-top: 1.5rem; }
.post-feature { margin: 0 auto clamp(2.5rem, 6vw, 4rem); max-width: 1200px; }
.post-feature img { border-radius: 5px; width: 100%; }
.post-feature figcaption { text-align: center; font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.8rem; }

/* 11. Content -------------------------------------------------------------- */

.gh-content { max-width: var(--measure); margin: 0 auto; font-size: 1.135rem; line-height: 1.78; color: #2a251f; }
body.scheme-cool-paper .gh-content { color: #262a30; }
.gh-content > * + * { margin-top: 1.5em; }
.gh-content > p:first-child { margin-top: 0; }
.post:not(.page) .gh-content > p:first-of-type::first-letter { font-family: var(--serif); font-weight: 600; font-size: 3.4em; line-height: 0.78; float: left; padding: 0.06em 0.12em 0 0; color: var(--accent); }
.gh-content h2 { font-size: 1.9rem; margin-top: 2.2em; }
.gh-content h3 { font-size: 1.45rem; margin-top: 2em; }
.gh-content h4 { font-size: 1.15rem; margin-top: 1.8em; }
.gh-content blockquote { margin: 2.2em 0; padding: 0 0 0 1.6em; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-weight: 440; font-size: 1.3em; line-height: 1.5; color: var(--ink); }
.gh-content blockquote.kg-blockquote-alt { border: 0; padding: 0; text-align: center; font-size: 1.55em; }
.gh-content hr { border: 0; height: 1px; background: var(--hair); margin: 3em auto; max-width: 220px; }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: 0.45em; }
.gh-content li::marker { color: var(--accent); }
.gh-content pre { background: var(--bg-raise); border: 1px solid var(--hair); border-radius: 6px; padding: 1.2em 1.4em; overflow-x: auto; font-size: 0.86em; line-height: 1.6; }
.gh-content code { font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace; font-size: 0.92em; background: var(--bg-raise); border: 1px solid var(--hair); border-radius: 4px; padding: 0.08em 0.4em; }
.gh-content pre code { background: none; border: 0; padding: 0; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 0.94em; }
.gh-content th, .gh-content td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--hair); }
.gh-content th { font-weight: 600; color: var(--ink); }
.gh-content .kg-image { margin: 0 auto; border-radius: 5px; }
.gh-content figure { margin: 2.2em 0; }
.gh-content figcaption { text-align: center; font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.8rem; }
.kg-width-wide { margin-left: calc(50% - min(50vw, 600px)); margin-right: calc(50% - min(50vw, 600px)); }
.kg-width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-width-wide .kg-image, .kg-width-full .kg-image { width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 0.6em; }
.kg-gallery-row { display: flex; gap: 0.6em; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.kg-button-card { display: flex; justify-content: center; }
.kg-button-card.kg-align-left { justify-content: flex-start; }
.kg-btn, .kg-button-card a { display: inline-block; background: var(--accent); color: #fff !important; font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-decoration: none; padding: 0.75em 1.7em; border-radius: 999px; transition: filter 0.25s var(--ease), transform 0.25s var(--ease); }
.kg-btn:hover, .kg-button-card a:hover { filter: brightness(1.06); transform: translateY(-1px); }
.kg-callout-card { display: flex; gap: 0.9em; border-radius: 6px; padding: 1.2em 1.4em; background: var(--bg-raise); border: 1px solid var(--hair); font-size: 0.98em; }
.kg-callout-card-accent { border-left: 3px solid var(--accent); }
.kg-bookmark-card { width: 100%; }
.kg-bookmark-container { display: flex; text-decoration: none; border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; background: var(--bg-raise); color: var(--ink); transition: border-color 0.25s var(--ease); }
.kg-bookmark-container:hover { border-color: var(--accent); color: var(--ink); }
.kg-bookmark-content { flex: 1; padding: 1.1em 1.3em; min-width: 0; }
.kg-bookmark-title { font-weight: 600; font-size: 0.98em; }
.kg-bookmark-description { color: var(--ink-soft); font-size: 0.86em; margin-top: 0.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 0.5em; margin-top: 0.7em; font-size: 0.8em; color: var(--ink-mute); }
.kg-bookmark-icon { width: 18px; height: 18px; }
.kg-bookmark-thumbnail { flex: 0 0 200px; position: relative; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kg-toggle-card { background: var(--bg-raise); border: 1px solid var(--hair); border-radius: 6px; padding: 1.1em 1.3em; }
.kg-toggle-heading-text { font-size: 1.05em; font-weight: 600; }
.kg-toggle-content { color: var(--ink-soft); font-size: 0.96em; }
.kg-header-card, .kg-signup-card { border-radius: 6px; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }
.kg-file-card-container, .kg-product-card-container { border: 1px solid var(--hair); border-radius: 6px; background: var(--bg-raise); }

/* 12. Post footer ---------------------------------------------------------- */

.post-foot { max-width: var(--measure); margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.post-foot__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.tag-pill { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 0.4em 1em; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.tag-pill:hover { border-color: var(--accent); color: var(--accent); }
.author-box { display: flex; gap: 1.25rem; align-items: flex-start; border-top: 1px solid var(--hair); padding-top: 2rem; margin-top: 0.5rem; }
.author-box__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box__label { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.3rem; }
.author-box__name { font-size: 1.25rem; }
.author-box__name a { text-decoration: none; }
.author-box__name a:hover { color: var(--accent); }
.author-box__bio { color: var(--ink-soft); font-size: 0.94rem; margin: 0.5rem 0 0; }
.post-comments { max-width: var(--measure); margin: clamp(2.5rem, 6vw, 4rem) auto 0; }

/* 13. Read next ------------------------------------------------------------ */

.read-next { max-width: var(--maxw); margin: clamp(3rem, 7vw, 5rem) auto 0; padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--hair); }
.read-next__heading { font-size: 0.82rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.75rem; }
.read-next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.read-next__item { text-decoration: none; padding: 1.5rem; border: 1px solid var(--hair); border-radius: 6px; background: var(--bg-raise); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.read-next__item:hover { border-color: var(--accent); transform: translateY(-2px); }
.read-next__title { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin-top: 0.4rem; }

/* 14. Newsletter band ------------------------------------------------------ */

.newsletter { background: var(--bg-raise); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.newsletter__in { max-width: 720px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--pad); text-align: center; }
.newsletter__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.newsletter__sub { color: var(--ink-soft); margin: 1rem auto 1.75rem; max-width: 42ch; }
.newsletter__form { display: flex; gap: 0.6rem; max-width: 440px; margin: 0 auto; }
.newsletter__form input { flex: 1; padding: 0.85em 1.1em; border: 1px solid var(--hair); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 0.95rem; }
.newsletter__form input:focus-visible { border-color: var(--accent); }
.newsletter__note { font-size: 0.8rem; color: var(--ink-mute); margin-top: 1rem; }
@media (max-width: 540px) { .newsletter__form { flex-direction: column; } .newsletter__form .btn { width: 100%; } }

/* 15. Pagination ----------------------------------------------------------- */

.pager { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.pagination { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto; }
.pagination a { font-size: 0.83rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 0.6em 1.4em; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-number { color: var(--ink-mute); font-size: 0.83rem; letter-spacing: 0.08em; }

/* 16. Footer --------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--hair); margin-top: clamp(2rem, 5vw, 4rem); }
.site-foot__in { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--pad); display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; justify-content: space-between; }
.brand--foot { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; text-decoration: none; }
.site-foot__desc { color: var(--ink-soft); max-width: 38ch; margin: 0.9rem 0 0; }
.site-foot__custom { color: var(--ink-mute); font-size: 0.9rem; margin: 0.7rem 0 0; }
.site-foot__nav .nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.site-foot__nav .nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; }
.site-foot__nav .nav a:hover { color: var(--accent); }
.site-foot__base { max-width: var(--maxw); margin: 0 auto; padding: 1.4rem var(--pad); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: 0.82rem; color: var(--ink-mute); }
.site-foot__base p { margin: 0; }
.site-foot__base a { color: var(--ink-soft); text-decoration: none; }
.site-foot__base a:hover { color: var(--accent); }

/* 17. Progress + reveal + reduced-motion ----------------------------------- */

.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 60; pointer-events: none; }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.error-main { display: flex; align-items: center; justify-content: center; min-height: 80vh; }

/* 18. Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .feed { grid-template-columns: repeat(2, 1fr); }
  .card, .feed--grid .card:nth-child(1), .feed--grid .card:nth-child(2) { grid-column: span 1; }
  .feed--magazine .card:nth-child(1) { grid-column: span 2; flex-direction: column; gap: 1rem; }
  .feed--magazine .card:nth-child(1) .card__media { flex: none; aspect-ratio: 3 / 2; }
}
@media (max-width: 900px) { .site-nav { display: none; } .menu-toggle { display: inline-flex; } .head-subscribe { display: none; } }
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .feed { grid-template-columns: 1fr; }
  .feed--magazine .card:nth-child(1) { grid-column: span 1; flex-direction: column; gap: 1rem; }
  .feed--list .card { flex-direction: column; gap: 1rem; }
  .feed--list .card__media { flex: none; }
  .read-next__grid { grid-template-columns: 1fr; }
  .kg-width-wide { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
  .gh-content { font-size: 1.06rem; }
}