/* ——— šriftai (fonts), vietinės kopijos / local copies ——— */
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 700; }
.skip-link:focus { left: 8px; outline: 3px solid var(--green); outline-offset: 2px; }
.post-body { font-size: 17px; line-height: 1.7; max-width: 720px; }
.post-body h2 { font-size: 26px; margin: 32px 0 12px; }
.post-body h3 { font-size: 21px; margin: 24px 0 10px; }
.post-body p { margin: 0 0 16px; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; }
.post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 16px; }
.post-body blockquote { border-left: 4px solid var(--green); margin: 16px 0; padding: 4px 0 4px 16px; color: var(--navy); }
.page-wide { font-size: 17px; line-height: 1.7; }
.page-wide img { max-width: 100%; height: auto; border-radius: 10px; }
.archive-empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; border: 2px dashed rgba(27,36,86,0.2); border-radius: 18px; color: var(--navy); }
.archive-empty p { margin: 0 0 16px; }
.archive-empty p:last-child { margin-bottom: 0; }

/* Phase 42 — consent checkbox (scoped per form: navy story bg → light text,
   mint contact bg → navy text). */
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; margin: 4px 0 20px; }
.consent input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--green); }
.consent a { text-decoration: underline; }
.story-form .consent { color: #d4d8eb; }
.contact-form .consent { color: var(--navy); }

/* Phase 48 — WCAG 2.2 AA */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important } }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.story-form :focus-visible { outline-color: var(--green-light, #a8dd8f); }
@media (max-width: 720px) {
  .site-header:not([data-open="true"]) .nav { visibility: hidden; }
  .site-header[data-open="true"] .nav { visibility: visible; }
}


/* ——— tavo prekės ženklas (brand) ——— */
/* ——— 0adm1n renderer adapters (prepended; olia CSS follows) ——— */

/* Renderer's .wrap must not constrain width so the fixed header can be full-width */
.wrap { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* Reset the h1.brand wrapper the renderer adds around the logo link */
h1.brand { padding: 0; margin: 0; font-size: 0; line-height: 0; }

/* ——— olia CSS ——— */

/* tukovoji; — v2 components
   Same layout, same palette. Refreshed component treatments:
   sticker offsets, sliding chevrons, brand accents, mint inputs.
   --------------------------------------------------------- */

/* Self-hosted Akrobat (Fontfabric free license). Used for emphasis CTAs.
   See public/fonts/ for the five weights. */
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Regular.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-SemiBold.woff2") format("woff2");  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Bold.woff2") format("woff2");      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Black.woff2") format("woff2");     font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --navy: #1b2456;
  --navy-2: #232c63;
  --green: #7dd66f;
  --green-light: #a8dd8f;
  --green-soft: #c0e6a6;
  --mint: #e8f8dc;
  --mint-2: #d8f3c4;
  --grey: #d3d3d3;
  --grey-2: #c4c4c4;
  --text: #1b2456;
  --white: #ffffff;
  --font-display: "Akrobat", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step-hero: clamp(48px, 8vw + 16px, 104px);
  --step-page: clamp(32px, 3.6vw + 12px, 56px);
  --step-section: clamp(28px, 2.6vw + 14px, 48px);
  --step-card: clamp(18px, 0.6vw + 16px, 22px);

  --gutter: clamp(20px, 4vw, 64px);
  --section-pad: clamp(64px, 8vw, 112px);

  /* v2-specific tokens */
  --sticker-shadow: 4px 4px 0 var(--navy);
  --sticker-shadow-hover: 6px 6px 0 var(--navy);
  --sticker-green: 6px 6px 0 var(--green);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- Header / Nav ---------- */
/* Pinned to the top of the viewport on every page. */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  z-index: 50;
  display: flex;
  align-items: stretch;
  background: var(--green);
  min-height: 78px;
  border-top: 0;
  border-bottom: 2px solid var(--navy);
  padding-top: env(safe-area-inset-top, 0);
}

/* Reserve space at the top of every page so content isn't hidden under it. */
body {
  padding-top: calc(78px + env(safe-area-inset-top, 0));
  /* Sticky footer: body is a flex column at full viewport height; .wrap
     grows to fill, footer's margin-top:auto pushes it to the bottom even
     on short pages (single-card /blogas, empty /archyvas, /aciu). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap { flex: 1; }

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  flex-shrink: 0;
  color: var(--navy);
}
.logo img {
  width: auto;
  height: 42px;
  display: block;
  transition: transform 0.2s ease;
}
.logo:hover img { transform: rotate(-6deg); }

/* hamburger */
.nav-toggle {
  display: none;
  margin-left: auto;
  margin-right: 16px;
  background: transparent;
  border: 0;
  padding: 12px;
  align-self: center;
  border-radius: 8px;
}
.nav-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.site-header[data-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header[data-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header[data-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: 0.02em;
}

/* Animated underline — thin green accent.
   Distinct weights for hover (subtle, short) vs active (steady, slightly
   wider) so the "you are here" signal differs from the "you can click"
   one. 2px on green is intentionally light to avoid competing with the
   navy logo + CTA. */
.nav a:not(.cta)::after {
  content: '';
  position: absolute;
  left: 32px; right: 32px;
  top: calc(50% + 0.7em);
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.nav a:not(.cta):hover::after {
  transform: scaleX(0.3);
  opacity: 0.7;
}
.nav a:not(.cta)[aria-current="page"]::after {
  transform: scaleX(0.5);
  opacity: 1;
}
.nav a:not(.cta)[aria-current="page"]:hover::after {
  transform: scaleX(0.55);
  opacity: 1;
}

/* navy CTA with leading green dot — echoes the brand semicolon */
.nav .cta {
  background: var(--navy);
  color: #fff;
  padding: 0 36px 0 56px;
  position: relative;
}
/* Floating admin entry — revealed by inline JS when on adm1n.fizzd.net /
   localhost. Bottom-right FAB so it stays accessible from any scroll
   position without competing with the primary nav. */
.admin-fab {
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--navy);
  padding: 10px 16px 10px 14px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font: 700 13px var(--font-display, system-ui), sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-fab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--navy);
  background: var(--green-soft);
}
.admin-fab:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--navy);
}
.admin-fab[hidden] { display: none; }
.admin-fab-dot {
  width: 8px; height: 8px;
  background: var(--navy);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--green-soft);
}
@media (max-width: 520px) {
  .admin-fab { padding: 9px 14px 9px 12px; font-size: 12px; }
  .admin-fab-dot { width: 7px; height: 7px; }
}
.nav .cta::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.nav .cta:hover { background: var(--navy-2); }
.nav .cta:hover::before { transform: translateY(-50%) scale(1.15); }

/* ---------- Layout ---------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(64px, 10vw, 120px);
}

h1.page-title {
  font-family: var(--font-display);
  font-size: var(--step-page);
  font-weight: 800;
  margin: 0 0 clamp(28px, 4vw, 56px);
  letter-spacing: 0;
  color: var(--navy);
  line-height: 1.05;
  position: relative;
  display: inline-block;
}
/* small green tick under page titles, mimicking the brand semicolon */
h1.page-title::after {
  content: '';
  display: block;
  width: 64px; height: 6px;
  margin-top: 16px;
  background: var(--green);
  border-radius: 4px;
}

h2.section-title {
  font-family: var(--font-display);
  font-size: var(--step-section);
  font-weight: 800;
  margin: 0 0 clamp(24px, 3vw, 40px);
  letter-spacing: 0;
  line-height: 1.1;
}

/* ---------- Home: hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 100%);
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
/* ghost wordmark behind the hero for depth */
.hero::before {
  content: 'tukovoji;';
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(180px, 28vw, 440px);
  color: rgba(27, 36, 86, 0.07);
  left: -2%;
  bottom: -18%;
  letter-spacing: -0.05em;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  min-height: 360px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-weight: 700;
  margin: 0 0 clamp(16px, 2vw, 24px);
  letter-spacing: -0.04em;
  color: var(--navy);
  line-height: 0.95;
}
.hero h1 .sc { color: var(--navy); font-weight: 700; }
/* Hero wordmark image — replaces the typeset "tukovoji;" on the homepage */
.hero h1.hero-wordmark {
  font-size: 0;
  line-height: 0;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.hero h1.hero-wordmark img {
  width: 100%;
  max-width: clamp(260px, 38vw, 460px);
  height: auto;
  display: block;
}
.hero p {
  font-size: clamp(16px, 0.45vw + 14.5px, 18px);
  line-height: 1.65;
  max-width: 36ch;
  margin: 0;
  color: var(--navy);
}
.hero-illu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-illu svg.brain {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* ---------- Pill nav (v2 — filled green, sticker style with chevron) ---------- */
.pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 32px);
  justify-content: center;
  margin: clamp(32px, 5vw, 56px) 0 0;
}
.pill {
  background: #fff;
  color: var(--navy);
  border: 2.5px solid var(--navy);
  border-radius: 999px;
  padding: clamp(12px, 1.4vw, 16px) clamp(28px, 2.6vw, 44px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 0.3vw + 16px, 19px);
  letter-spacing: 0.02em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--sticker-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pill::after {
  content: '→';
  font-size: 18px;
  transition: transform 0.2s ease;
}
.pill:hover {
  background: var(--mint);
  transform: translate(-2px, -2px);
  box-shadow: var(--sticker-shadow-hover);
}
.pill:hover::after { transform: translateX(4px); }
.pill:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--navy);
}

/* ---------- Home: About section ---------- */
.about {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 100%);
  padding: var(--section-pad) 0;
}
/* unified into h2.section-title; keeping selector empty for legibility */
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.about-illu { display: flex; justify-content: center; }
.about-illu img {
  width: 100%;
  max-width: 440px;
  height: auto;
}
.about-text p {
  font-size: clamp(16px, 0.45vw + 14.5px, 18px);
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 1.1em;
}
/* navy block callout — large rounded sticker, Akrobat for impact */
.about-cta {
  margin-top: clamp(28px, 3vw, 44px);
  background: var(--navy);
  color: #fff;
  border-radius: 28px;
  padding: clamp(28px, 3vw, 40px) clamp(80px, 7vw, 96px) clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 0.6vw + 18px, 26px);
  line-height: 1.25;
  letter-spacing: 0.005em;
  max-width: 640px;
  border: 2px solid var(--navy);
  box-shadow: 8px 8px 0 rgba(27, 36, 86, 0.18);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.about-cta a { color: #fff; display: block; }
.about-cta::after {
  content: '→';
  position: absolute;
  right: clamp(24px, 2vw, 32px); top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
  transition: transform 0.2s ease;
}
.about-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 rgba(27, 36, 86, 0.22);
}
.about-cta:hover::after { transform: translateY(-50%) translateX(4px); }

/* ---------- Home: Author section ---------- */
.author {
  background: #f5f5f5;
  padding: var(--section-pad) 0;
  position: relative;
}
.author-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.author-text p {
  font-size: clamp(16px, 0.45vw + 14.5px, 18px);
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 1.1em;
}
.author-illu { display: flex; justify-content: center; }
.author-illu img {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* ---------- Home: Blog teasers ---------- */
.blog-section {
  background: var(--navy);
  padding: var(--section-pad) 0 calc(var(--section-pad) * 1.15);
  position: relative;
}
.blog-section h2 { color: #fff; }
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
.blog-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: var(--mint);
  color: var(--navy);
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--navy);
  box-shadow: 8px 8px 0 var(--green);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.blog-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--green);
}

.blog-card .thumb {
  /* Default = branded green gradient. Overridden via inline background-image
     style when a cover_image is set in JS, OR has an <img> child for the
     hardcoded homepage cards. */
  background: linear-gradient(160deg, var(--green-soft) 0%, var(--green) 100%);
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border-right: 2px solid var(--navy);
}
.blog-card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .thumb img { transform: scale(1.04); }
/* Branded boilerplate placeholder: large ";" mark + subtle dot pattern.
   Only shown when the .thumb has no <img> AND no inline background-image
   (i.e. no cover assigned yet). */
.blog-card .thumb .thumb-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 130px);
  font-weight: 800;
  line-height: 1;
  color: rgba(27, 36, 86, 0.78);
  letter-spacing: -0.05em;
  user-select: none;
  pointer-events: none;
}
.blog-card .thumb .thumb-mark::before {
  /* Dot-grid texture behind the mark — matches the archive card aesthetic. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27,36,86,0.14) 1.2px, transparent 1.7px);
  background-size: 14px 14px;
  z-index: -1;
}
.blog-card .body {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) clamp(48px, 4.5vw, 56px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: var(--navy);
}
.blog-card .body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-card);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.blog-card .body p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(27, 36, 86, 0.7);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .body::after {
  content: '→';
  position: absolute;
  right: 20px; bottom: 18px;
  color: var(--navy);
  background: var(--green);
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 800;
  transition: transform 0.2s ease;
  border: 1.5px solid var(--navy);
}
.blog-card:hover .body::after { transform: translateX(4px); }
/* Skeleton loading card on /blogas while fetch resolves */
.blog-card--skeleton {
  background: var(--mint-2);
  border-style: dashed;
  box-shadow: none;
  pointer-events: none;
}
.blog-card--skeleton .thumb { background: var(--mint-2); border-right-color: transparent; }
.blog-card--skeleton .body { color: var(--mint-2); }

/* ---------- Archyvas ---------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.archive-card {
  position: relative;
  background: var(--mint);
  min-height: 260px;
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  gap: clamp(14px, 1.6vw, 20px);
  border-radius: 8px;
  border: 2px solid var(--navy);
  box-shadow: 4px 4px 0 var(--green);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Defensive wrapping for long Lithuanian words */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.archive-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--green);
}
.archive-card.empty {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--mint-2) 0,
      var(--mint-2) 12px,
      var(--mint) 12px,
      var(--mint) 24px
    );
  padding: 0;
  min-height: 220px;
  border: 2px dashed rgba(27,36,86,0.25);
  box-shadow: none;
}
.archive-card .thumb {
  width: clamp(110px, 13vw, 150px);
  aspect-ratio: 13 / 20;     /* portrait, matches the 520x800 illustration source */
  height: auto;
  background: linear-gradient(160deg, var(--green-soft) 0%, var(--green) 100%);
  flex-shrink: 0;
  border-radius: 6px;
  border: 2px solid var(--navy);
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.archive-card .thumb:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.archive-card .card-title-link { color: inherit; text-decoration: none; }
.archive-card .card-title-link:hover .card-title { color: var(--navy-2); }
.archive-card .thumb img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive-card .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(27,36,86,0.08)),
    radial-gradient(circle, rgba(27,36,86,0.12) 1.2px, transparent 1.7px);
  background-size: 12px 12px;
}
.archive-card .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 10px;
}
.archive-card .btn-read {
  align-self: flex-start;
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  border: 2.5px solid var(--navy);
  border-radius: 999px;
  padding: 6px 8px 6px 20px;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  margin-top: auto;
  cursor: pointer;
}
.archive-card .btn-read::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--navy);
  color: var(--green);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.archive-card .btn-read:hover {
  background: var(--green-light);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--navy);
}
.archive-card .btn-read:hover::after { transform: translateX(3px) rotate(-8deg); }
.archive-card .btn-read:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--navy);
}
/* date as a pill stamp */
.archive-card .date {
  display: inline-block;
  background: var(--navy);
  color: var(--green-soft);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
  margin: 0;
  /* Lithuanian dates like "2026 M. BALANDŽIO 28 D." are long; small font
     + reduced tracking + nowrap guarantees the whole stamp stays one line
     even on the narrowest archive card width. */
  white-space: nowrap;
  max-width: 100%;
}
.archive-card p {
  margin: 0;
  font-size: clamp(14px, 0.2vw + 13.5px, 15.5px);
  line-height: 1.55;
  color: var(--navy);
  /* Clamp the excerpt to a few lines so all cards align on a row */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Legacy in-place expand state — still supported but no longer triggered;
   detail pages now live at /archyvas/{id}. */
.archive-card.is-expanded p {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* ---------- Story detail page (/archyvas/{id}) ---------- */
.story-detail {
  max-width: 760px;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.story-back {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 6px 12px 6px 0;
  margin-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.story-back:hover { border-bottom-color: var(--green); }
.story-back:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }

.story-detail-head { margin-bottom: clamp(20px, 3vw, 32px); }
.story-detail-date {
  display: inline-block;
  background: var(--navy);
  color: var(--green-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.story-detail-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw + 12px, 60px);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--navy);
  margin: 12px 0 8px;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.story-detail-author {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 36, 86, 0.72);
}

.story-detail-figure {
  margin: clamp(24px, 4vw, 40px) 0;
  border: 2px solid var(--navy);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--green-soft) 0%, var(--green) 100%);
  box-shadow: 6px 6px 0 var(--green);
}
.story-detail-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 13 / 16;
  object-fit: cover;
}

.story-detail-body {
  font-size: clamp(17px, 0.45vw + 15.5px, 19px);
  line-height: 1.65;
  color: var(--navy);
}
.story-detail-body p {
  margin: 0 0 1.15em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.story-detail-body p:last-child { margin-bottom: 0; }

.story-detail-cta {
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--mint);
  border: 2px solid var(--navy);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--green);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  justify-content: space-between;
}
.story-detail-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 1.5vw + 18px, 30px);
  margin: 4px 0 6px;
  letter-spacing: 0;
}
.story-detail-cta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
}
.story-detail-cta > div { flex: 1 1 280px; min-width: 0; }

@media (max-width: 720px) {
  .story-detail-figure img { aspect-ratio: 5 / 4; }
  .story-detail-cta { flex-direction: column; align-items: stretch; }
  .story-detail-cta .archive-cta-btn { width: 100%; justify-content: space-between; }
}
.archive-card .card-title {
  /* slight bump down on small screens so titles never feel cramped */
  font-size: clamp(17px, 0.5vw + 15px, 22px) !important;
  text-wrap: balance;
}
.archive-card .card-author {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(27, 36, 86, 0.72);
  margin: 0;
}

/* ---------- Tavo istorija ---------- */
.story-form {
  background: var(--navy);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
  border-radius: 16px;
  border: 2px solid var(--navy);
  box-shadow: 8px 8px 0 var(--green);
}
.story-form .intro h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2vw + 18px, 38px);
  margin: 0 0 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.story-form .intro p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #d4d8eb;
  margin: 0 0 14px;
}
.story-form .intro ul { padding-left: 18px; margin: 8px 0 0; }
.story-form .intro li {
  font-size: 14.5px;
  line-height: 1.8;
  color: #d4d8eb;
}
.story-form .field { margin-bottom: 24px; }
.story-form label {
  display: block;
  color: #d4d8eb;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  padding-left: 16px;
  position: relative;
}
.story-form label::before {
  /* leading green dot, echoes brand semicolon */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
}
.story-form input,
.story-form textarea {
  width: 100%;
  background: var(--mint);
  border: 2px solid var(--green);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--navy);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.story-form input:focus,
.story-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--green-light);
}
.story-form input { height: 48px; }
.story-form textarea {
  min-height: clamp(220px, 36vw, 320px);
  resize: vertical;
}
/* .story-form .submit — see "Primary action button" section below */

.more-stories { padding-top: clamp(48px, 6vw, 72px); }
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}

/* ---------- Ačiū ---------- */
.thanks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  padding-top: 16px;
}
.thanks p {
  font-size: 16px;
  line-height: 1.65;
  max-width: 480px;
}
.thanks .illu {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 30%, var(--green-soft), transparent 55%),
    radial-gradient(circle at 70% 70%, var(--mint-2), transparent 60%),
    var(--mint);
  border-radius: 16px;
  border: 2px solid var(--navy);
  box-shadow: 6px 6px 0 var(--green);
  position: relative;
  overflow: hidden;
}
.thanks .illu::after {
  content: ';';
  font-family: var(--font-display);
  font-size: clamp(160px, 24vw, 320px);
  color: var(--green);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  font-weight: 800;
  line-height: 1;
}

/* ───────────────────────────────────────────────────────────
   Tablet — ≤ 1080px
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav a { padding: 0 18px; font-size: 15px; }
  .nav a:not(.cta)::after { left: 18px; right: 18px; }
  .nav .cta { padding: 0 24px 0 44px; }
  .nav .cta::before { left: 22px; }
  .logo { width: 72px; }

  .hero-inner { gap: 24px; min-height: 0; }
  .hero-illu svg.brain { max-width: 300px; }

  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .about-illu img { max-width: 340px; }
  .author-inner { grid-template-columns: 1fr; gap: 36px; }
  .author-illu img { max-width: 340px; }

  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablet: cards are wider — give the thumb proportional visual weight */
  .archive-card .thumb { width: clamp(140px, 18vw, 180px); }

  .thanks { grid-template-columns: 1.2fr 0.8fr; }
}

/* ───────────────────────────────────────────────────────────
   Mobile — ≤ 720px
   Hamburger nav, single column.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .logo { width: 64px; }
  .logo svg { width: 28px; height: 34px; }

  .nav-toggle { display: flex; flex-direction: column; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--green);
    border-bottom: 2px solid var(--navy);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    margin-left: 0;
  }
  .site-header[data-open="true"] .nav { max-height: 400px; }

  .nav a {
    padding: 18px 24px;
    border-top: 1px solid rgba(27,36,86,0.12);
    font-size: 16px;
    transition: background 0.15s ease;
  }
  /* On mobile the dropdown bg is --green, so the green underline used on
     desktop is invisible. Use a subtle navy tint per row instead — fits
     the vertical-list idiom and stays light. */
  .nav a:not(.cta)::after { display: none; }
  .nav a:not(.cta):hover { background: rgba(27, 36, 86, 0.05); }
  .nav a:not(.cta)[aria-current="page"] {
    background: rgba(27, 36, 86, 0.09);
    box-shadow: inset 3px 0 0 var(--navy);
  }
  .nav .cta {
    padding: 18px 24px 18px 48px;
    background: var(--navy);
    color: #fff;
  }
  .nav .cta::before { left: 24px; }

  .hero { padding: 12px 0 40px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
  .hero-illu { order: -1; }
  .hero-illu .brain-img,
  .hero-illu svg.brain { max-width: 220px; }
  .hero h1 { margin-bottom: 14px; }
  .hero p { max-width: 100%; }

  .pill-nav { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 36px; }
  .pill { padding: 14px 20px; justify-content: space-between; }

  .blog-grid,
  .more-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card .thumb { min-height: 180px; }

  .archive-grid { grid-template-columns: 1fr; gap: 18px; }
  .archive-card {
    padding: 16px;
    flex-direction: column;
    gap: 14px;
    min-height: 0;       /* stacked layout grows by content, not min-height */
  }
  .archive-card .thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* full-width banner, illustration centered via cover */
  }
  .archive-card .thumb-num {
    font-size: 56px;
    right: 12px;
    bottom: 4px;
  }
  .archive-card:hover { transform: translate(-2px, -2px); }
  /* Allow the excerpt a touch more breathing room on mobile single-column */
  .archive-card p { -webkit-line-clamp: 4; }

  .story-form {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 20px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--green);
  }
  .story-form .submit {
    float: none;
    width: 100%;
    padding: 16px;
    justify-content: center;
  }

  .thanks { grid-template-columns: 1fr; }
}

/* very narrow */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .nav a, .nav .cta { padding: 16px 20px; font-size: 15px; }
  .nav .cta { padding-left: 44px; }
  h1.page-title::after { width: 48px; height: 5px; margin-top: 12px; }
  .archive-card .thumb { height: 120px; }
  .pill { padding: 13px 18px; }
}

/* ───────────────────────────────────────────────────────────
   Kontaktai — unified layout
   One big mint sticker card, two-column inside:
     • Left: framed illustration + intro + social pills
     • Right: form
   Mirrors the Tavo istorija two-col pattern (navy) with
   mint surface, so the two pages read as siblings.
   ─────────────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  background: var(--mint);
  border: 2px solid var(--navy);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--green);
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 72px);
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-illu-frame {
  /* illustration sits directly on the mint card now — less nesting */
  transform: rotate(-1.5deg);
  transition: transform 0.3s ease;
}
.contact-illu-frame:hover { transform: rotate(0deg); }
.contact-illu-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-intro h2 {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw + 14px, 28px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.contact-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
}

.contact-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 4px 0;
}
.contact-divider::before,
.contact-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--navy);
  opacity: 0.18;
}

.contact-social-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 5px 18px 5px 5px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.social-pill .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--navy);
  color: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.social-pill .icon svg { width: 16px; height: 16px; }
.social-pill:hover {
  background: var(--navy);
  color: #fff;
}
.social-pill:hover .icon {
  background: var(--green);
  color: var(--navy);
  transform: rotate(-10deg);
}
.social-pill:active { transform: translateY(1px); }

/* Stack the columns on tablet and below */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-illu-frame { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .contact-layout {
    padding: 24px 20px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--green);
  }
  .contact-social-row { justify-content: center; }
}

/* ───────────────────────────────────────────────────────────
   Contact form — field styling (used inside .contact-layout)
   ─────────────────────────────────────────────────────────── */
.contact-form .field {
  margin-bottom: 18px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form-row .field {
  margin-bottom: 18px;
}
.contact-form label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}
.contact-form label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(27,36,86,0.4);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(125,214,111,0.25);
}
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: #d65555;
}
.contact-form input { height: 48px; }
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form-actions {
  text-align: right;
  margin-top: 8px;
}

/* ───────────────────────────────────────────────────────────
   Primary action button — opinionated
   Used by story-form + contact-form submits.
   Pill in Fraunces display, with the arrow living inside its
   own dark circle badge. Badge rotates on hover, becomes a
   spinner during submit, checkmark on done.
   ─────────────────────────────────────────────────────────── */
.story-form .submit,
.contact-form .submit {
  position: relative;
  background: var(--green);
  color: var(--navy);
  border: 2.5px solid var(--navy);
  border-radius: 999px;
  padding: 12px 12px 12px 36px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  box-shadow: 5px 5px 0 var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
  min-height: 56px;
  /* hard-reset the floating layout from before */
  float: none;
}

.story-form .submit::after,
.contact-form .submit::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--green);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1),
              background 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.story-form .submit:hover,
.contact-form .submit:hover {
  background: var(--green-light);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--navy);
}
.story-form .submit:hover::after,
.contact-form .submit:hover::after {
  transform: translateX(5px) rotate(-10deg);
}
.story-form .submit:active,
.contact-form .submit:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--navy);
}
.story-form .submit:active::after,
.contact-form .submit:active::after {
  transform: translateX(0) rotate(0);
}

@media (max-width: 720px) {
  .contact-form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form .submit,
  .story-form .submit { width: 100%; justify-content: space-between; padding-left: 28px; }
  .contact-form-actions { text-align: stretch; }
}

/* ───────────────────────────────────────────────────────────
   Hero — real brain illustration with gentle float
   ─────────────────────────────────────────────────────────── */
.hero-illu .brain-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  animation: brain-float 5.8s ease-in-out infinite;
}
@keyframes brain-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.2deg); }
}

/* ───────────────────────────────────────────────────────────
   Logo — pulsing semicolon dot
   ─────────────────────────────────────────────────────────── */
.logo svg circle {
  transform-origin: 16px 8px;
  animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ───────────────────────────────────────────────────────────
   Header — scroll-shrink behavior
   ─────────────────────────────────────────────────────────── */
.site-header {
  transition: min-height 0.22s ease, box-shadow 0.22s ease;
  will-change: min-height;
}
.site-header.is-scrolled {
  min-height: 60px;
  box-shadow: 0 2px 16px rgba(27, 36, 86, 0.12);
}
.site-header { box-shadow: 0 2px 16px rgba(27, 36, 86, 0.08); }
.site-header.is-scrolled .logo img {
  transform: scale(0.86);
  transition: transform 0.22s ease;
}
.site-header.is-scrolled .logo:hover img {
  transform: scale(0.86) rotate(-6deg);
}

/* ───────────────────────────────────────────────────────────
   Scroll-reveal
   ─────────────────────────────────────────────────────────── */
.reveal-init {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal-init.is-revealed { opacity: 1; transform: none; }

/* staggered reveal on archive grid */
.archive-card.reveal-init:nth-child(1) { transition-delay: 0ms; }
.archive-card.reveal-init:nth-child(2) { transition-delay: 60ms; }
.archive-card.reveal-init:nth-child(3) { transition-delay: 120ms; }
.archive-card.reveal-init:nth-child(4) { transition-delay: 180ms; }
.archive-card.reveal-init:nth-child(5) { transition-delay: 240ms; }
.archive-card.reveal-init:nth-child(6) { transition-delay: 300ms; }
.blog-grid > .reveal-init:nth-child(2) { transition-delay: 100ms; }
.more-grid > .reveal-init:nth-child(2) { transition-delay: 100ms; }

/* ───────────────────────────────────────────────────────────
   Archive thumb variants — numbered gradient placeholders
   ─────────────────────────────────────────────────────────── */
.archive-card .thumb { position: relative; overflow: hidden; }
.archive-card .thumb--a { background: linear-gradient(160deg, var(--green-soft) 0%, var(--green) 100%); }
.archive-card .thumb--b { background: linear-gradient(200deg, var(--mint-2) 0%, var(--green-light) 100%); }
.archive-card .thumb--c { background: linear-gradient(140deg, var(--green-light) 0%, var(--green-soft) 100%); }
.archive-card .thumb--d { background: linear-gradient(220deg, var(--mint) 0%, var(--green) 100%); }
.archive-card .thumb--e { background: linear-gradient(180deg, var(--green) 0%, var(--green-soft) 100%); }
.archive-card .thumb--f { background: linear-gradient(115deg, var(--green-soft) 0%, var(--mint-2) 100%); }
.archive-card .thumb-num {
  position: absolute;
  right: 8px;
  bottom: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  color: rgba(27, 36, 86, 0.22);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 1;
}

/* keep card hover tilt subtle */
.archive-card { transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.22s ease; }
.archive-card:hover { transform: translate(-2px, -2px) rotate(-0.4deg); }

/* ───────────────────────────────────────────────────────────
   Form: loading + success states (works with arrow-in-circle)
   The ::after pseudo IS the navy circle badge — we swap its
   content/visuals here.
   ─────────────────────────────────────────────────────────── */
.submit.is-loading { pointer-events: none; }
.submit.is-loading::after {
  content: '';
  background: var(--navy);
  color: transparent;
  border: 2.5px solid var(--green);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  transform: none !important;
}
.submit.is-done {
  background: var(--green-light) !important;
  pointer-events: none;
}
.submit.is-done::after {
  content: '✓';
  background: var(--navy);
  color: var(--green);
  border: 0;
  font-weight: 900;
  font-size: 19px;
  animation: none;
  transform: none !important;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────────────────────────────────────
   Focus-visible — accessibility ring across all interactive bits
   ─────────────────────────────────────────────────────────── */
.pill:focus-visible,
.btn-read:focus-visible,
.nav a:focus-visible,
.nav-toggle:focus-visible,
.story-form .submit:focus-visible,
.contact-form .submit:focus-visible,
.story-form input:focus-visible,
.story-form textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.social-pill:focus-visible,
.about-cta a:focus-visible,
.blog-card:focus-visible,
.archive-card .btn-read:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ───────────────────────────────────────────────────────────
   Archyvas — header polish
   ─────────────────────────────────────────────────────────── */
.archive-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 12px;
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 2px solid rgba(27, 36, 86, 0.12);
}
.archive-header h1.page-title {
  margin: 0;
  grid-column: 1;
}
/* shrink the existing tick under the title in this dense layout */
.archive-header h1.page-title::after {
  width: 48px; height: 5px; margin-top: 12px;
}
.archive-lead {
  grid-column: 2;
  margin: 0 0 6px;
  max-width: 46ch;
  font-size: clamp(15px, 0.3vw + 14px, 16.5px);
  line-height: 1.55;
  color: rgba(27, 36, 86, 0.78);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
}
.archive-count {
  grid-column: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 16px;
  background: var(--mint);
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  white-space: nowrap;
}
.archive-count b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────
   Archyvas — thumb ghost semicolon + alternating tilt
   ─────────────────────────────────────────────────────────── */
.archive-card .thumb-ghost {
  position: absolute;
  left: 6px;
  top: -8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(80px, 11vw, 130px);
  color: rgba(27, 36, 86, 0.14);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.archive-card .thumb-num { z-index: 3; }

/* tiny per-card visual variety — reads as hand-placed not gridlocked */
.archive-card.is-revealed:nth-child(3n+1) { transform: rotate(-0.3deg); }
.archive-card.is-revealed:nth-child(3n+2) { transform: rotate(0.25deg); }
.archive-card.is-revealed:nth-child(3n+3) { transform: rotate(-0.15deg); }
.archive-card.is-revealed:hover,
.archive-card.is-revealed:nth-child(3n+1):hover,
.archive-card.is-revealed:nth-child(3n+2):hover,
.archive-card.is-revealed:nth-child(3n+3):hover {
  transform: translate(-2px, -3px) rotate(-0.4deg);
}

/* ───────────────────────────────────────────────────────────
   Archyvas — footer "your turn" CTA
   ─────────────────────────────────────────────────────────── */
.archive-footer-cta {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: clamp(28px, 3.4vw, 40px) clamp(28px, 3.4vw, 44px);
  box-shadow: 6px 6px 0 var(--green);
  position: relative;
  overflow: hidden;
}
.archive-footer-cta::before {
  content: ';';
  position: absolute;
  right: -20px; bottom: -120px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 360px;
  color: rgba(125, 214, 111, 0.10);
  line-height: 1;
  pointer-events: none;
}
.archive-cta-text { position: relative; z-index: 1; }
.archive-cta-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.archive-footer-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2vw + 14px, 34px);
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
}
.archive-footer-cta p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: #d4d8eb;
}
.archive-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--green);
  color: var(--navy);
  border: 2.5px solid var(--green);
  border-radius: 999px;
  padding: 14px 20px 14px 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--green-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
}
.archive-cta-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--navy);
  color: var(--green);
  border-radius: 50%;
  font-size: 17px;
  font-weight: 800;
  transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.archive-cta-btn:hover {
  background: var(--green-light);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--green-soft);
}
.archive-cta-btn:hover span { transform: translateX(4px) rotate(-10deg); }
.archive-cta-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--green-soft);
}

@media (max-width: 900px) {
  .archive-header {
    grid-template-columns: 1fr;
  }
  .archive-header h1.page-title,
  .archive-lead,
  .archive-count { grid-column: 1; }
  .archive-count { justify-self: start; margin-bottom: 0; }
}
@media (max-width: 720px) {
  .archive-footer-cta {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--green);
  }
  .archive-footer-cta::before { font-size: 240px; bottom: -90px; right: -20px; }
  .archive-cta-btn { justify-self: stretch; justify-content: space-between; }
}

/* ───────────────────────────────────────────────────────────
   Reduced motion — turn off the loops
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo svg circle,
  .hero-illu .brain-img,
  .submit.is-loading::after { animation: none; }
  .reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────
   Light theme — applied via <body data-theme="light">
   Hero stays white, pill CTAs go green-outlined.
   The site-header keeps the brand green gradient.
   ─────────────────────────────────────────────────────────── */
body[data-theme="light"] .hero {
  background: #fff;
}
/* tone the ghost wordmark behind the hero for the lighter base */
body[data-theme="light"] .hero::before {
  color: rgba(27, 36, 86, 0.05);
}

body[data-theme="light"] .pill {
  background: #fff;
  border-color: var(--green);
  color: var(--navy);
  box-shadow: 4px 4px 0 var(--green);
}
body[data-theme="light"] .pill:hover {
  background: var(--mint);
  box-shadow: 6px 6px 0 var(--green);
}
body[data-theme="light"] .pill:active {
  box-shadow: 1px 1px 0 var(--green);
}

/* ───────────────────────────────────────────────────────────
   Other illustrations float like the hero — no shadows,
   subtle drift with staggered timings.
   ─────────────────────────────────────────────────────────── */
.about-illu img,
.author-illu img,
.contact-illu-frame img {
  filter: none;
}
.about-illu img       { animation: illu-float-a 6.4s ease-in-out infinite; }
.author-illu img      { animation: illu-float-b 7.1s ease-in-out infinite; }
.contact-illu-frame   { animation: illu-float-c 6.8s ease-in-out infinite; }

@keyframes illu-float-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(0.6deg); }
}
@keyframes illu-float-b {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-0.8deg); }
}
@keyframes illu-float-c {
  /* contact-illu-frame is already rotated -1.5deg, keep that as the resting angle */
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(-0.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-illu img,
  .author-illu img,
  .contact-illu-frame { animation: none; }
}

/* ───────────────────────────────────────────────────────────
   Footer — generic navy strip with brand mark + light links
   ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: #d4d8eb;
  border-top: 2px solid var(--navy);
  padding: clamp(28px, 4vw, 44px) 0;
  margin-top: auto;
}
.site-footer-inner, .footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.footer-brand .sc { color: var(--green); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-nav a {
  color: #d4d8eb;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-nav a:hover {
  color: #fff;
  border-bottom-color: var(--green);
}
.footer-nav a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer-meta {
  width: 100%;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(212, 216, 235, 0.7);
}
@media (max-width: 720px) {
  .site-footer-inner, .footer-inner { gap: 14px 24px; }
  .footer-meta { padding-top: 12px; }
}