/* Self-contained blog stylesheet. Shared header source: /assets/css/site-chrome.css. */
/* Design tokens: warm paper, dark ink, one action colour. */
:root {
  color-scheme: light;
  --color-background: #f7f8f5;
  --color-surface: #eaf0eb;
  --color-card: #ffffff;
  --color-ink: #192e2c;
  --color-muted: #53645e;
  --color-line: #ccd7d0;
  --color-accent: #22634d;
  --color-accent-hover: #154c39;
  --color-accent-soft: #e0eddf;
  --color-dark: #173d32;
  --color-light: #f7faf5;
  --color-on-dark: #cfdfd4;
  --color-highlight: #d7f1ba;
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container-width: 2280px;
  --page-padding: clamp(20px, 4vw, 96px);
  --section-space: clamp(64px, 6vw, 132px);
  --section-content-space: clamp(32px, 3.2vw, 72px);
  --grid-gap: clamp(20px, 2.4vw, 52px);
  --font-small: clamp(14px, .35vw + 10px, 18px);
  --font-body: clamp(16px, .45vw + 10px, 22px);
  --font-lead: clamp(18px, .65vw + 10px, 27px);
  --font-h2: clamp(32px, 2.1vw + 8px, 64px);
  --font-h3: clamp(22px, 1vw + 8px, 34px);
  --transition: 160ms ease;
}

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-line); background: var(--color-background); }
.site-header__inner { display: flex; min-height: clamp(76px, 4.5vw, 96px); align-items: center; justify-content: space-between; gap: 24px; }
.site-header__brand { flex-shrink: 0; font-size: clamp(18px, .65vw + 10px, 25px); font-weight: 700; letter-spacing: -.03em; }
.site-header__nav { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 36px); }
.site-header__link { padding-block: 12px; font-size: var(--font-small); font-weight: 550; white-space: nowrap; }
.site-header__link:hover { color: var(--color-accent); text-decoration: underline; }
.site-header__link--mobile { display: none; }
.site-header__cta { flex-shrink: 0; min-height: 46px; padding: 12px 18px; font-size: var(--font-small); }
.site-header__toggle { display: none; align-items: center; gap: 10px; min-height: 44px; border: 1px solid var(--color-line); border-radius: 6px; padding: 8px 12px; background: transparent; color: var(--color-ink); font-size: 15px; }

/* Scope resets to the shared header: Aegea uses borders for ordinary links. */
.site-header { font-family: var(--font-family); color: var(--color-ink); line-height: 1.55; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header [hidden] { display: none !important; }
.site-header__inner { width: min(calc(100% - 2 * var(--page-padding)), var(--container-width)); margin-inline: auto; }
.site-header a { border: 0; color: var(--color-ink); text-decoration: none; background-image: none; }
.site-header .site-header__cta { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 8px; background: var(--color-accent); color: white; font-weight: 600; line-height: 1.25; text-align: center; }
.site-header .site-header__cta:hover { background: var(--color-accent-hover); color: white; }
.site-header .site-header__link:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: .25em; }
.site-header .site-header__link[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.site-header__toggle { font-family: inherit; line-height: 1.4; cursor: pointer; }
.site-header :is(a, button):focus-visible { outline: 3px solid var(--color-accent); outline-offset: 5px; }

@media (max-width: 1100px) {
  .site-header__inner { flex-wrap: wrap; gap: 0 20px; padding-block: 12px; min-height: 68px; }
  .site-header__nav { width: 100%; flex-wrap: wrap; gap: 4px 24px; order: 3; padding-top: 12px; }
  .site-header__cta { margin-left: auto; }
  .site-header__toggle { margin-left: auto; }
  .site-header--menu-ready .site-header__toggle { display: inline-flex; }
  .site-header--menu-ready .site-header__cta { display: none; }
  .site-header--menu-ready .site-header__nav { display: none; }
  .site-header--menu-ready.site-header--menu-open .site-header__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; padding-bottom: 12px; }
  .site-header__link--mobile { display: inline-block; color: var(--color-accent); }
}

@media (max-width: 600px) {
  .site-header__inner { min-height: 68px; }
  .site-header__brand { font-size: 18px; }
  .site-header__cta { font-size: 12px; padding-inline: 12px; gap: 8px; }
  .site-header__link { min-height: 44px; font-size: 16px; white-space: normal; }
}

@media (max-width: 1100px) { .site-header.site-header--menu-ready .site-header__cta { display: none; } }

/* Brand layer for Aegea's Plain theme. No engine or publication templates changed. */
:root, :root body.e2-responds-to-dark-mode {
  color-scheme: light;
  --backgroundColor: var(--color-background);
  --backgroundTransparentColor: #f7f8f5eb;
  --sheetBackgroundColor: #eaf0ebf2;
  --foregroundColor: var(--color-ink);
  --headingsColor: var(--color-ink);
  --headingsUnderlineColor: var(--color-line);
  --boldColor: var(--color-ink);
  --boldUnderlineColor: var(--color-line);
  --thinRuleColor: var(--color-line);
  --linkColor: var(--color-accent);
  --linkUnderlineColor: #22634d66;
  --linkColorVisited: #536b60;
  --linkUnderlineColorVisited: #536b6066;
  --hoverColor: var(--color-accent-hover);
  --hoverUnderlineColor: var(--color-accent-hover);
  --tagColor: var(--color-muted);
  --tagUnderlineColor: var(--color-line);
  --adminColor: var(--color-accent);
  --adminUnderlineColor: var(--color-line);
  --engineTextColor: var(--color-muted);
  --engineTextUnderlineColor: var(--color-line);
  --markedTextBackground: var(--color-highlight);
  --markedImageBorderColor: var(--color-accent);
  --inputBackgroundColor: var(--color-card);
  --inputTextColor: var(--color-ink);
  --offSwitchColor: var(--color-line);
  --onSwitchColor: var(--color-accent);
  --imageBorderColor: var(--color-line);
  --disabledColor: #718279;
  --activeColor: var(--color-accent);
  --verifiedColor: var(--color-accent);
  --errorColor: #b12c2c;
  --currentItemBackgroundColor: var(--color-accent-soft);
  --windowBackgroundColor: var(--color-card);
  --unsavedIndicatorColor: #a36810;
  --followButtonBackground: var(--color-accent);
  --followButtonHoverBackground: var(--color-accent-hover);
  --followButtonTextColor: white;
  --mainFontFamily: var(--font-family);
  --noteMainFontFamily: var(--font-family);
  --smallFontFamily: var(--font-family);
  --maxWidth: 1100px;
  --marginLeft: 0px;
  --marginRight: 0px;
  --marginLeftCompact: 0px;
  --marginRightCompact: 0px;
  --marginTop: clamp(36px, 4vw, 72px);
  --marginTopCompact: 32px;
  --displayLogoMarginal: none;
  --displayLogo: block;
  --displayLogoCompact: block;
  --blogTitleFontSize: clamp(24px, 2vw, 32px);
  --blogTitleLineHeight: clamp(30px, 2.5vw, 40px);
  --noteTitleFontSize: clamp(28px, 3vw, 46px);
  --noteTitleLineHeight: clamp(32px, 3.45vw, 53px);
  --pageHeadingFontSize: clamp(28px, 3vw, 46px);
  --pageHeadingLineHeight: clamp(32px, 3.45vw, 53px);
  --noteTextFontSize: clamp(18px, 1.4vw, 22px);
  --noteTextLineHeight: clamp(29px, 2.24vw, 35px);
  --smallFontSize: 14px;
  --smallLineHeight: 21px;
  --borderRadius: 8px;
}

/* The section heading replaces the repeated author identity, keeping native controls. */
.flag:has(> .blog-heading) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 24px; padding-bottom: clamp(28px, 3vw, 44px); }
.flag:has(> .blog-heading) > * { grid-column: 1 / -1; }
.flag > .blog-heading { grid-column: 1; grid-row: 1; }
.flag:has(> .blog-heading) > .header-content { grid-column: 2; grid-row: 1; margin: 0; }
.flag:has(> .blog-heading) .header-description { display: none; }
.flag:has(> .blog-heading) .spotlight { position: static; margin: 0; }
.blog-heading__title { margin: 0; font-size: clamp(24px, 2vw, 32px); line-height: 1.3; font-weight: 650; }
.blog-heading__title a { color: var(--color-ink); border: 0; }
.blog-heading__back { display: inline-block; font-size: 17px; line-height: 1.6; }

.blog-topics { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; }
.blog-topics__link { padding-block: 6px; font-size: 16px; }
.blog-topics__link[aria-current="page"] { font-weight: 700; color: var(--color-ink); }
.blog-reading { margin-block: 32px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.blog-reading__title, .blog-contact__title { margin: 0 0 16px; font-size: clamp(21px, 2vw, 27px); line-height: 1.3; }
.blog-reading__list { display: grid; gap: 14px; }
.blog-reading__link { width: fit-content; max-width: 100%; font-size: 18px; line-height: 1.5; }
.blog-contact { margin-block: 32px 48px; padding: clamp(20px, 3vw, 36px); border-radius: 12px; background: var(--color-surface); }
.blog-contact__text { max-width: 60ch; margin: 0 0 20px; line-height: 1.6; }
.blog-contact__link { display: inline-block; font-weight: 650; }
.blog-topics[hidden], .blog-reading[hidden] { display: none; }

html { scroll-padding-top: 110px; }
body { -webkit-font-smoothing: antialiased; }
.common { width: min(calc(100% - 2 * var(--page-padding)), var(--maxWidth)); }
.flag { padding-bottom: clamp(32px, 4vw, 64px); }
.title { max-width: 720px; }
.title h1 { font-weight: 650; letter-spacing: -.025em; }
#e2-blog-description { margin-top: 12px; color: var(--color-muted); max-width: 58ch; }
.e2-note h1 { max-width: 31ch; letter-spacing: -.03em; font-weight: 650; }
.e2-text { overflow-wrap: break-word; }
.e2-note, .e2-note-list { margin-bottom: clamp(48px, 6vw, 88px); }
.footer { padding-top: 28px; border-top: 1px solid var(--color-line); color: var(--color-muted); }
.footer a[href^="mailto:"] { color: var(--color-accent); font-weight: 650; overflow-wrap: anywhere; }
:is(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
::selection { background: var(--color-highlight); color: var(--color-dark); }

@media (max-width: 600px) {
  html { scroll-padding-top: 90px; }
  .header-description { max-width: calc(100% - 48px); }
}
