/* Mario Stanković — mariostankovic.com site layout.
   Depends on fonts.css, tokens.css, backgrounds.css, components.css.
   Only page scaffolding lives here — all visual language comes from the tokens. */

html { background: var(--ms-paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ms-paper); }

a { color: var(--ms-petrol); text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color var(--ms-dur-fast) var(--ms-ease-standard); }
a:hover { color: var(--ms-terracotta); }

/* ============ Container ============ */
.container { max-width: 1080px; margin-inline: auto; padding-inline: var(--ms-5); }
.container--narrow { max-width: 72ch; }

/* ============ Header / nav ============ */
.site-header { position: sticky; top: 0; z-index: 10;
  background: rgba(251,244,233,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ms-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ms-4); padding-block: var(--ms-4); flex-wrap: wrap; }
.wordmark { font-family: var(--ms-font-display); font-weight: var(--ms-w-bold);
  font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ms-ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--ms-3); }
.wordmark:hover { color: var(--ms-terracotta); }
.wordmark__mark { display: inline-flex; }
.wordmark__mark .ms-mark { height: 30px; width: auto; }
.wordmark__name { line-height: 1; }
.site-nav { display: flex; gap: var(--ms-5); flex-wrap: wrap; }
.site-nav a { font-family: var(--ms-font-display); font-weight: var(--ms-w-medium);
  font-size: var(--ms-fs-body); color: var(--ms-ink-60); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ms-terracotta); }

/* ============ Section rhythm ============ */
.section { padding-block: var(--ms-8); }
.section--tight { padding-block: var(--ms-7); }
.section__head { margin-bottom: var(--ms-6); }

/* ============ Hero ============ */
.hero { border-radius: var(--ms-r-panel); margin-top: var(--ms-6); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--ms-6), 5vw, var(--ms-8)); align-items: center;
  padding: clamp(var(--ms-7), 8vw, var(--ms-9)) clamp(var(--ms-5), 6vw, var(--ms-8)); }
.hero .display { max-width: 18ch;
  font-size: clamp(2.441rem, 1.2rem + 4.2vw, var(--ms-fs-display)); }
.hero .lead { max-width: 52ch; margin-top: var(--ms-4); }
.hero__actions { display: flex; gap: var(--ms-4); flex-wrap: wrap; margin-top: var(--ms-6); }
/* Signature squircle mark — the brand visual, floating alongside the headline. */
.hero__mark { display: flex; justify-content: center; }
.hero__mark .ms-mark { height: clamp(220px, 26vw, 380px); width: auto;
  filter: drop-shadow(var(--ms-shadow-md)); }
@media (max-width: 780px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__mark { display: none; }   /* mark still present in the header on mobile */
}

/* ============ Blog card grid ============ */
.post-grid { display: grid; gap: var(--ms-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; gap: var(--ms-3); }
.post-card__date { font-family: var(--ms-font-mono); font-size: var(--ms-fs-small);
  color: var(--ms-ink-40); letter-spacing: .04em; }
.post-card__title { margin: 0; }
.post-card__title a { color: var(--ms-ink); text-decoration: none; }
.post-card__title a:hover { color: var(--ms-terracotta); }
.post-card__desc { color: var(--ms-ink-60); margin: 0; flex: 1; }
.post-card__more { font-family: var(--ms-font-display); font-weight: var(--ms-w-medium);
  color: var(--ms-terracotta); text-decoration: none; }
.post-card__more:hover { text-decoration: underline; }

/* Blog index list reuses the grid at 2-up */
.post-grid--index { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .post-grid--index { grid-template-columns: 1fr; } }

/* ============ Prose (post body) ============ */
.prose { max-width: 72ch; }
.prose h2, .prose h3 { margin-top: var(--ms-7); margin-bottom: var(--ms-4); }
.prose h2 { font-size: var(--ms-fs-h3); font-weight: var(--ms-w-bold); }
.prose h3 { font-size: var(--ms-fs-lead); font-weight: var(--ms-w-medium); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--ms-4); line-height: var(--ms-lh-body); }
.prose li { margin-bottom: var(--ms-2); }
.prose blockquote { margin: var(--ms-5) 0; padding: var(--ms-4) var(--ms-5);
  border-left: 4px solid var(--ms-marigold); background: var(--ms-paper-2);
  border-radius: 0 var(--ms-r-md) var(--ms-r-md) 0; color: var(--ms-ink-60); }
.prose pre { background: var(--ms-midnight); color: #E8EDF1; padding: var(--ms-5);
  border-radius: var(--ms-r-md); overflow-x: auto; font-size: var(--ms-fs-small);
  line-height: 1.55; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose img { max-width: 100%; height: auto; border-radius: var(--ms-r-md); }
.prose hr { height: 1px; background: var(--ms-line); border: 0; margin: var(--ms-7) 0; }

.post-meta { display: flex; gap: var(--ms-4); align-items: baseline; flex-wrap: wrap;
  margin-top: var(--ms-4); color: var(--ms-ink-40);
  font-family: var(--ms-font-mono); font-size: var(--ms-fs-small); letter-spacing: .04em; }
.back-link { font-family: var(--ms-font-display); font-weight: var(--ms-w-medium);
  color: var(--ms-ink-60); text-decoration: none; }
.back-link:hover { color: var(--ms-terracotta); }
.back-link::before { content: "\2190\00A0"; } /* ← text arrow, not a picto */

/* ============ Subscribe / newsletter ============ */
.subscribe { border-radius: var(--ms-r-xl); }
.subscribe__inner { padding: clamp(var(--ms-6), 6vw, var(--ms-8)); }
.subscribe form { display: flex; gap: var(--ms-4); align-items: end; flex-wrap: wrap;
  margin-top: var(--ms-5); }
.subscribe .field { flex: 1 1 260px; }
.subscribe .field input { width: 100%; }
.subscribe__note { margin-top: var(--ms-4); font-size: var(--ms-fs-small);
  color: var(--ms-ink-60); }
.on-dark .subscribe__note { color: var(--ms-on-dark-70); }
/* On the warm mesh the marigold on-dark kicker vanishes — go white here. */
.subscribe.on-dark .kicker { color: var(--ms-on-dark); }

/* ============ Footer ============ */
.site-footer { margin-top: var(--ms-8); }
.site-footer__inner { padding-block: var(--ms-7);
  display: flex; justify-content: space-between; gap: var(--ms-5); flex-wrap: wrap; }
.site-footer p { margin: 0; font-size: var(--ms-fs-small); }
.site-footer .site-nav a { color: var(--ms-on-dark-70); }
.site-footer .site-nav a:hover { color: var(--ms-marigold); }
.site-footer__tagline { font-family: var(--ms-font-mono); letter-spacing: .04em;
  color: var(--ms-on-dark-70); }

/* ============ Pagefind search mount (blog index) ============ */
.search-panel { margin-bottom: var(--ms-7); }
/* Tune the Pagefind UI to the token palette (it self-hosts its own CSS). */
.search-panel .pagefind-ui {
  --pagefind-ui-primary: var(--ms-terracotta);
  --pagefind-ui-text: var(--ms-ink);
  --pagefind-ui-background: var(--ms-white);
  --pagefind-ui-border: var(--ms-line);
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: var(--ms-r-md);
  --pagefind-ui-font: var(--ms-font-body);
}
/* Site is picto-free: strip Pagefind's magnifier icon from the input. */
.search-panel .pagefind-ui__search-input { background-image: none !important;
  padding-left: var(--ms-4) !important; }

/* ============ 404 ============ */
.error-page { min-height: 55vh; display: grid; place-content: center; text-align: center;
  gap: var(--ms-4); padding-block: var(--ms-8); }

/* ============ Titles: drop the kicker dash ============ */
.kicker::before { content: none; }
.kicker { margin-bottom: var(--ms-3); }

/* ============ Homepage · retro squircle band-stack ============
   Each band is a section. Clicking its bar targets #id → the band grows to
   fill the stack (CSS :target accordion, no JS); the others squeeze to strips.
   Palette runs warm→cool, top→bottom, straight from farbenschema.jpg. */
body.home { background: var(--ms-desk); }

.stack { box-sizing: border-box; display: flex; flex-direction: column;
  gap: var(--ms-2); min-height: 100svh; padding: var(--ms-3);
  max-width: 1180px; margin-inline: auto; }

.stack__brand { position: fixed; top: var(--ms-4); right: var(--ms-5); z-index: 30;
  display: inline-flex; align-items: center; gap: var(--ms-2);
  font-family: var(--ms-font-display); font-weight: var(--ms-w-bold); font-size: .95rem;
  color: var(--ms-navy); text-decoration: none; padding: 5px 14px 5px 6px;
  border-radius: var(--ms-r-pill); background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px); box-shadow: var(--ms-shadow-sm); }
.stack__brand-mark { display: inline-flex; }
.stack__brand-mark .ms-mark { height: 22px; width: auto; }

.band { position: relative; flex: 1 1 0; min-height: 60px; overflow: hidden;
  border-radius: var(--ms-r-panel); display: flex; flex-direction: column; color: var(--ms-navy);
  transition: flex-grow var(--ms-dur-slow) var(--ms-ease-emphasis); }
/* retro film-grain: shared rule near the end of this file (.band::after) */
.band > * { position: relative; z-index: 1; }

.band__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-4);
  padding: var(--ms-4) clamp(var(--ms-5), 4vw, var(--ms-7)); min-height: 60px;
  text-decoration: none; color: inherit; font-family: var(--ms-font-display);
  transition: background var(--ms-dur-fast) var(--ms-ease-standard); }
.band__bar:hover { background: rgba(255,255,255,.14); }
.band__label { font-weight: var(--ms-w-xbold); letter-spacing: -.02em;
  font-size: clamp(1.35rem, .9rem + 1.7vw, var(--ms-fs-h2)); }
.band__hint { font-family: var(--ms-font-mono); font-size: var(--ms-fs-small);
  text-transform: uppercase; letter-spacing: .12em; opacity: .7; }

.band__panel { overflow-y: auto; opacity: 0; max-height: 0;
  transition: opacity var(--ms-dur-base) var(--ms-ease-standard); }
.band__panel { scrollbar-width: none; }            /* scrolls, but no visible bar */
.band__panel::-webkit-scrollbar { display: none; }

/* Start band: Leitsatz and newsletter invite side by side from 760px,
   stacked on narrow screens. */
.band__content.start { display: grid; gap: var(--ms-6); max-width: none; }
.start .newsletter-invite { margin-top: 0; }
/* Narrow screens: the open band grows to its content and the page scrolls,
   instead of clipping the content inside a scroll box nobody notices. */
@media (max-width: 759px) {
  .band:target,
  .stack:not(:has(.band:target)) #start { flex: 0 0 auto; }
  .band:target .band__panel,
  .stack:not(:has(.band:target)) #start .band__panel { overflow: visible; }
}
@media (min-width: 760px) {
  .band__content.start { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end; column-gap: clamp(var(--ms-6), 5vw, var(--ms-8)); }
}
.band__content { padding: var(--ms-2) clamp(var(--ms-5), 4vw, var(--ms-7)) var(--ms-7); max-width: 62ch; }
.band__content .display { font-size: clamp(2rem, 1.2rem + 3vw, var(--ms-fs-h1)); }
.band__actions { display: flex; gap: var(--ms-3); flex-wrap: wrap; margin-top: var(--ms-5); }
.band__note { margin-top: var(--ms-4); opacity: .8; }

/* expanded state via :target, with Home open by default (nothing targeted) */
.band:target { flex-grow: 9; }
.band:target .band__panel { opacity: 1; max-height: none; }
.stack:not(:has(.band:target)) #start { flex-grow: 9; }
.stack:not(:has(.band:target)) #start .band__panel { opacity: 1; max-height: none; }

/* band colours (exact palette) */
.band--terracotta { background: var(--ms-terracotta); }
.band--amber      { background: var(--ms-amber); }
.band--marigold   { background: var(--ms-marigold); }
.band--sage       { background: var(--ms-sage); }
.band--jade       { background: var(--ms-jade); }
.band--petrol     { background: var(--ms-petrol); color: var(--ms-on-dark); }
.band--navy       { background: var(--ms-navy);   color: var(--ms-on-dark); }

/* Writing band — post list */
.band__posts { list-style: none; margin: var(--ms-2) 0 0; padding: 0; display: grid; gap: var(--ms-2); }
.band__post { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ms-4);
  padding: var(--ms-3) 0; border-bottom: 1px solid rgba(14,45,65,.18);
  text-decoration: none; color: inherit; }
.band--petrol .band__post, .band--navy .band__post { border-color: rgba(255,255,255,.22); }
.band__post-title { font-family: var(--ms-font-display); font-weight: var(--ms-w-bold);
  font-size: var(--ms-fs-lead); }
.band__post:hover .band__post-title { text-decoration: underline; }
.band__post-date { font-family: var(--ms-font-mono); font-size: var(--ms-fs-small); opacity: .7;
  white-space: nowrap; }

/* Newsletter band form */
.band__form { display: flex; gap: var(--ms-4); align-items: end; flex-wrap: wrap; margin-top: var(--ms-5); }
.band__form .field { flex: 1 1 240px; }
.band__form .field input { width: 100%; }

/* kicker overline reads as a subtle mono line, not the invisible terracotta-on-warm */
.band:not(.on-dark) .kicker { color: var(--ms-navy); opacity: .55; }

/* concentric squircle mark filling the open Home band (echo of farbenschema.jpg) */
.band__mark { position: absolute; right: clamp(24px, 6vw, 96px); top: 50%;
  transform: translateY(-50%); z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity var(--ms-dur-base) var(--ms-ease-standard); }
.band__mark .ms-mark { height: clamp(180px, 24vw, 320px); width: auto;
  filter: drop-shadow(var(--ms-shadow-md)); }
.band:target .band__mark,
.stack:not(:has(.band:target)) #start .band__mark { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .band, .band__mark { transition: none; }
}
@media (max-width: 900px) { .band__mark { display: none; } }
@media (max-width: 620px) {
  .band__hint { display: none; }                    /* keep collapsed strips single-line */
  .band__content { max-width: none; }
  .stack__brand span:last-child { display: none; }  /* mark-only bug on small screens */
}

/* ============ Reading experience (blog index + posts) ============
   Accent squircle band (the section colour) → calm white reading sheet →
   navy footer band. The band "opens" into the article; prose stays on white. */
body.reading { background: var(--ms-jade-200); }    /* safe base; tonal override below */
.container--reading { max-width: 880px; }           /* roomy reading measure */

/* --- accent header band --- */
/* --lift: how far the white sheet (or the card list) is pulled up over the
   band. The band's bottom padding always clears it, so text is never covered. */
.post-hero { --lift: 76px; position: relative; overflow: hidden; color: var(--hero-ink, var(--ms-navy));
  background: var(--accent, var(--ms-amber));
  border-radius: 0 0 var(--ms-r-panel) var(--ms-r-panel);
  padding-block: clamp(var(--ms-7), 7vw, var(--ms-9))
    calc(var(--lift) + clamp(var(--ms-6), 5vw, var(--ms-8))); }
.post-hero__inner { position: relative; z-index: 1; }
.post-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--ms-6);
  font-family: var(--ms-font-mono); font-size: var(--ms-fs-small); text-transform: uppercase;
  letter-spacing: .12em; color: inherit; opacity: .78; text-decoration: none; }
.post-back:hover { opacity: 1; }
.post-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ms-4);
  font-family: var(--ms-font-mono); font-size: var(--ms-fs-small); text-transform: uppercase;
  letter-spacing: .14em; color: inherit; opacity: .7; }
.post-title { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  font-size: clamp(2rem, 1.2rem + 3.2vw, var(--ms-fs-h1)); line-height: var(--ms-lh-tight);
  letter-spacing: -.02em; color: inherit; margin: 0; max-width: 20ch; }
.post-lead { font-size: var(--ms-fs-lead); line-height: var(--ms-lh-body); color: inherit;
  opacity: .85; margin: var(--ms-4) 0 0; max-width: 48ch; }

/* --- white reading sheet, pulled up to overlap the band --- */
.post-sheet { position: relative; z-index: 2; max-width: 880px; margin: -76px auto 0; /* = --lift */
  background: var(--ms-surface); border-radius: var(--ms-r-panel);
  padding: clamp(var(--ms-6), 5vw, var(--ms-8)); }
/* larger, comfortable reading — target the elements directly (p{} sets its own size) */
.post-sheet .prose { line-height: 1.7; }
.post-sheet .prose p,
.post-sheet .prose li { font-size: 1.22rem; line-height: 1.7; }
.post-sheet .prose p { margin-bottom: var(--ms-5); }
.post-sheet .prose blockquote { font-size: 1.15rem; }

/* Bilder im Lese-Blatt: zentriert, Squircle-rund, flach (kein Schatten) */
.prose img { max-width: 100%; height: auto; display: block; border-radius: var(--ms-r-card); }
.prose figure { margin: var(--ms-6) auto; max-width: 600px; }
.prose figure img { width: 100%; }
.prose figcaption { margin-top: var(--ms-3); text-align: center; font-family: var(--ms-font-mono);
  font-size: var(--ms-fs-small); color: var(--ms-ink-40); }

/* --- reusable subscribe form (Start, Kontakt, subpage footers) --- */
.subscribe-form { display: flex; gap: var(--ms-3); flex-wrap: wrap; align-items: center;
  margin-top: var(--ms-3); max-width: 460px; }
.subscribe-form__email { flex: 1 1 200px; font-family: var(--ms-font-body); font-size: var(--ms-fs-body);
  padding: .7em .9em; border: 2px solid transparent; border-radius: var(--ms-r-md);
  background: var(--ms-white); color: var(--ms-ink); }
.subscribe-form__email:focus { outline: none; border-color: var(--ms-navy);
  box-shadow: 0 0 0 3px rgba(14,45,65,.18); }
.band__sub-label, .post-foot__sub-label { margin: var(--ms-5) 0 0; opacity: .8; font-family: var(--ms-font-mono);
  text-transform: uppercase; letter-spacing: .1em; font-size: var(--ms-fs-small); }
.newsletter-invite { margin-top: var(--ms-7); }
.on-dark .subscribe-form__email { border-color: rgba(255,255,255,.25); }

/* ============ Colour-coded buttons (button colour = the band it jumps to) ============
   Double .btn class so these hold their colour over the base .btn:hover rule.
   Flat (no shadow), navy text on warm bands, white on petrol/navy. */
.btn.btn--terracotta { background: var(--ms-terracotta); color: var(--ms-navy); box-shadow: none; }
.btn.btn--amber      { background: var(--ms-amber);      color: var(--ms-navy); box-shadow: none; }
.btn.btn--marigold   { background: var(--ms-marigold);   color: var(--ms-navy); box-shadow: none; }
.btn.btn--sage       { background: var(--ms-sage);       color: var(--ms-navy); box-shadow: none; }
.btn.btn--jade       { background: var(--ms-jade);       color: var(--ms-navy); box-shadow: none; }
.btn.btn--petrol     { background: var(--ms-petrol);     color: #fff;           box-shadow: none; }
.btn.btn--navy       { background: var(--ms-navy);       color: #fff;           box-shadow: none; }
.btn[class*="btn--"]:hover { filter: brightness(.94); }

/* blog index header band (full-radius squircle, jade; morphs from the Texte band) */
.post-hero--index { border-radius: var(--ms-r-panel);
  padding-block: clamp(var(--ms-6), 6vw, var(--ms-8)); }
.post-hero .search-panel { margin-top: var(--ms-5); max-width: 520px; }
.post-sheet .prose { max-width: none; }

/* --- blog index cards, also lifted over the band --- */
.post-list { position: relative; z-index: 2; margin-top: -56px; padding-bottom: var(--ms-8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-5); }
@media (max-width: 620px) { .post-list { grid-template-columns: 1fr; } }
.post-list .search-panel { grid-column: 1 / -1; }

/* --- navy footer band (shared across subpages → morphs/"jumps" between them) --- */
.post-foot { position: relative; overflow: hidden; background: var(--ms-navy); color: var(--ms-on-dark);
  border-radius: var(--ms-r-panel) var(--ms-r-panel) 0 0; margin-top: clamp(var(--ms-7), 9vw, 110px);
  padding-block: clamp(var(--ms-7), 8vw, var(--ms-9)); view-transition-name: site-foot; }
.post-foot__inner { position: relative; z-index: 1; display: grid; gap: var(--ms-7); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-4); }
.post-nav__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  color: var(--ms-on-dark); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--ms-r-card); padding: var(--ms-4) var(--ms-5);
  transition: background var(--ms-dur-base) var(--ms-ease-standard); }
.post-nav__link:hover { background: rgba(255,255,255,.12); }
.post-nav__link--older { text-align: right; align-items: flex-end; }
.post-nav__dir { font-family: var(--ms-font-mono); font-size: var(--ms-fs-small);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ms-lemon); }
.post-nav__ttl { font-family: var(--ms-font-display); font-weight: var(--ms-w-bold); font-size: var(--ms-fs-lead); }
.post-foot__meta { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ms-5); flex-wrap: wrap; }
.post-foot__links { display: flex; gap: var(--ms-5); flex-wrap: wrap; }
.post-foot__links a { color: var(--ms-on-dark-70); text-decoration: none;
  font-family: var(--ms-font-display); font-weight: var(--ms-w-medium); }
.post-foot__links a:hover { color: var(--ms-lemon); }
/* posts/pages only: pull the navy foot up into the white sheet (mirrors the
   sheet overlapping the hero). Scoped to .post so the blog index keeps its
   normal clamp() gap above the foot. */
.post > .post-foot { margin-top: -76px; position: relative; z-index: 1;
  padding-top: calc(clamp(var(--ms-7), 8vw, var(--ms-9)) + 76px); }

/* ============ Tonal reading system (progressive enhancement) ============
   Each reading page derives its three surfaces from ONE palette hue, the page
   accent set on <body> (see base.njk): light tint desk, full accent hero,
   dark hue tinted foot. Mixed in oklab for perceptually even tints.
   30% accent in white reproduces the documented ms-*-200 tint level
   (jade 30% in oklab = #CAE3D5, doc tint #C6E4D3). 30% accent in navy keeps
   every foot dark enough for white text, worst case lemon = 6.9:1 (AA).
   The blog index body has no accent var, so color-mix falls back to pure
   jade-200 desk resp. pure navy foot there. Old browsers keep the base values. */
@supports (color: color-mix(in oklab, white, black)) {
  body.reading { background: color-mix(in oklab, var(--accent, var(--ms-jade)) 30%, var(--ms-white)); }
  .post-foot { background: color-mix(in oklab, var(--accent, var(--ms-navy)) 30%, var(--ms-navy)); }
}

@media (max-width: 620px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--older { text-align: left; align-items: flex-start; }
}

/* ============ Flat solid fields — no shadows (retro poster feel) ============ */
.card, .card:hover, .post-sheet, .stack__brand, .btn { box-shadow: none; }
.hero__mark .ms-mark, .band__mark .ms-mark { filter: none; }

/* ============ Cross-document view transitions (progressive enhancement) ============
   Opening a band/post morphs the shared accent surface (view-transition-name set
   inline per section / per slug); the rest cross-fades. No JS; browsers without
   support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-group(*) {
  animation-duration: var(--ms-dur-slow);
  animation-timing-function: var(--ms-ease-emphasis);
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ============ Blog index as post-bands (jump-out on open) ============ */
/* Blog index only: the navy foot is a direct child of .post-stack, so drop the
   global clamp() margin and let the flex gap space it like the bands above. */
.post-stack > .post-foot { margin-top: 0; }
.post-stack { display: flex; flex-direction: column; gap: var(--ms-2);
  padding: var(--ms-3); max-width: 1180px; margin-inline: auto; min-height: 100svh; }
.post-stack__head { padding: var(--ms-5) clamp(var(--ms-4), 4vw, var(--ms-6)) var(--ms-4); }
.post-stack__head .post-back { margin-bottom: var(--ms-4); }
.post-stack__head h1 { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  font-size: clamp(2rem, 1.2rem + 3vw, var(--ms-fs-h1)); letter-spacing: -.02em; margin: 0; }
.post-stack__head .lead { margin-top: var(--ms-3); max-width: 52ch; }
.post-stack__head .search-panel { margin-top: var(--ms-5); max-width: 520px; }

.post-band { position: relative; overflow: hidden; border-radius: var(--ms-r-panel);
  padding: clamp(var(--ms-5), 4vw, var(--ms-7)); min-height: clamp(170px, 22vh, 220px); flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: var(--ms-2);
  color: var(--ms-navy); text-decoration: none;
  transition: transform var(--ms-dur-base) var(--ms-ease-emphasis); }
.post-band:hover { transform: translateY(-3px); }
.post-band > * { position: relative; z-index: 1; }
.post-band__date { font-family: var(--ms-font-mono); font-size: var(--ms-fs-small);
  text-transform: uppercase; letter-spacing: .12em; opacity: .72; }
.post-band__title { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  font-size: clamp(1.5rem, 1rem + 2vw, var(--ms-fs-h2)); line-height: var(--ms-lh-tight);
  letter-spacing: -.02em; max-width: 24ch; }
.post-band__desc { max-width: 62ch; opacity: .9; }
.post-band--petrol, .post-band--navy { color: var(--ms-on-dark); }

/* shared retro grain: reading hero/foot, blog-index bands, and home bands */
.post-hero::after, .post-foot.mesh-grain::after, .post-band::after, .band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: .28; background-size: 260px 260px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'1.4'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"); }
.subscribe-soon { margin-top: var(--ms-3); }
.subscribe-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }