/*
 * TortoLingua — design tokens.
 *
 * Brand tokens aligned with tortolingua-landing (soft cream background, deep
 * ink typography, teal accent). Phase 1 keeps a pragmatic subset; the full
 * landing-theme audit will expand this file in Phase 1b when the landing
 * templates are rewritten from 11ty to Hugo.
 */

/*
 * Self-hosted font stack. All weights and subsets we ship are served from
 * /assets/fonts/ — no runtime request to fonts.googleapis.com, no
 * preconnect handshake, no second CSS file on the critical path. Covers
 * every TortoLingua locale across latin / latin-ext / cyrillic subsets.
 *
 * Weights in use:
 *   - Literata 700 (headings; LCP on blog posts + landing hero)
 *   - Literata italic 400 (blog blockquote)
 *   - Nunito Sans 400 (body copy; LCP on landing subtitle)
 *   - Nunito Sans 700 (UI emphasis, nav, cards — default browser "bold")
 *   - Nunito Sans 800 (landing eyebrow + step index, above-the-fold on home)
 *
 * The Nunito Sans woff2 is a variable font covering 200-1000; Google Fonts
 * CSS2 served the SAME file for 700 and 800, and so do we — two @font-face
 * declarations (one per weight) pointing to a single file. `local()` first
 * skips the download entirely when the user has the font installed.
 * `font-display: swap` paints the fallback immediately, and the tuned
 * Capsize fallback faces below keep the swap from shifting layout.
 */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Literata Bold'),
       url('/assets/fonts/literata-700-latin.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;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Literata Bold'),
       url('/assets/fonts/literata-700-latin-ext.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;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Literata Bold'),
       url('/assets/fonts/literata-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Literata Italic'),
       url('/assets/fonts/literata-italic-400-latin.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;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Literata Italic'),
       url('/assets/fonts/literata-italic-400-latin-ext.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;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Literata Italic'),
       url('/assets/fonts/literata-italic-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'),
       url('/assets/fonts/nunitosans-400-latin.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'),
       url('/assets/fonts/nunitosans-400-latin-ext.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'),
       url('/assets/fonts/nunitosans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'),
       url('/assets/fonts/nunitosans-700-latin.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'),
       url('/assets/fonts/nunitosans-700-latin-ext.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'),
       url('/assets/fonts/nunitosans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/*
 * Nunito Sans 800 is delivered by the SAME variable-font woff2 as 700 —
 * Google Fonts' CSS2 served an identical URL for both, and Nunito Sans
 * is a weight-axis variable font (200..1000), so the browser can
 * synthesise 800 from the 700 file. We reuse the files, declaring
 * `font-weight: 800` so rules picking 800 still match a real face.
 */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Nunito Sans ExtraBold'), local('NunitoSans-ExtraBold'),
       url('/assets/fonts/nunitosans-700-latin.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Nunito Sans ExtraBold'), local('NunitoSans-ExtraBold'),
       url('/assets/fonts/nunitosans-700-latin-ext.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;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Nunito Sans ExtraBold'), local('NunitoSans-ExtraBold'),
       url('/assets/fonts/nunitosans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * Fallback font faces. While Literata / Nunito Sans fetch, the browser
 * renders Georgia / Arial in their place — different metrics, so once
 * the real font lands the layout shifts. These faces use Capsize-derived
 * `size-adjust` + `ascent-override` + `descent-override` + (for Nunito
 * Sans) `line-gap-override` so the pre-swap text box matches the
 * post-swap text box to the pixel — CLS near zero, PSI 100 on that
 * metric. Values computed via @capsizecss/core createFontStack against
 * the real font metrics from @capsizecss/metrics, so if we ever swap
 * the primary face we should regenerate these numbers.
 */
@font-face {
  font-family: 'Literata Fallback';
  src: local('Georgia');
  ascent-override: 109.3141%;
  descent-override: 28.6056%;
  size-adjust: 107.6714%;
}
@font-face {
  font-family: 'Nunito Sans Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 99.7134%;
  descent-override: 34.8159%;
  line-gap-override: 0%;
  size-adjust: 101.3906%;
}

:root {
  /* Brand palette (TortoLingua cream + teal) */
  --color-page-light: #f4f1e9;
  --color-page-dark: #0f1316;
  --color-surface-panel: rgba(255, 255, 255, 0.8);
  --color-surface-card: #ffffff;
  --color-surface-outline: #d2d9ce;
  --color-surface-outline-strong: rgba(16, 23, 24, 0.16);
  --color-surface-subtle: #e7ebe2;

  --color-text-primary: #1f2a1f;
  --color-text-secondary: #5b6958;
  --color-text-muted: rgba(31, 42, 31, 0.72);
  --color-text-inverse: #ffffff;

  --color-accent: #1b7c63;
  --color-accent-strong: #16684f;
  --color-accent-dark: #0f3f34;
  --color-accent-soft: rgba(27, 124, 99, 0.12);
  --color-accent-ink: #0f3f34;

  --color-code-bg: rgba(20, 27, 36, 0.05);
  --color-quote-rule: var(--color-accent);

  /* Typography stack — mirrors current landing (Literata display + Nunito Sans body).
     The "Fallback" faces (see @font-face above) render Georgia / Arial with
     Literata / Nunito Sans metrics so the swap from fallback → real font
     causes no layout shift. */
  --font-display:
    "Literata", "Literata Fallback", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --font-copy:
    "Nunito Sans", "Nunito Sans Fallback", "Source Sans Pro", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:
    "Nunito Sans", "Nunito Sans Fallback", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Typography scale */
  --type-display-lg: 3.25rem;   /* 52px — page heroes */
  --type-display-md: 2.5rem;    /* 40px — section hero */
  --type-heading-lg: 2rem;      /* 32px — post title */
  --type-heading-md: 1.5rem;    /* 24px — sub-heads / card titles */
  --type-heading-sm: 1.25rem;   /* 20px — h3 in post body */
  --type-body-lg: 1.1875rem;    /* 19px — lead paragraph */
  --type-body-md: 1.0625rem;    /* 17px — post body */
  --type-body-sm: 1rem;         /* 16px — cards / list text */
  --type-caption: 0.875rem;     /* 14px */
  --type-meta: 0.75rem;         /* 12px */

  /* Line heights */
  --leading-tight: 1.18;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-reading: 1.65;

  /* Spacing scale */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;

  /* Radius scale */
  --radius-card-sm: 1rem;        /* 16px — post cards */
  --radius-card-md: 1.5rem;      /* 24px — large cards */
  --radius-card-lg: 1.875rem;    /* 30px — hero cards */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card-soft: 0 1px 20px rgba(0, 0, 0, 0.04);
  --shadow-card-medium: 0 18px 44px rgba(17, 21, 23, 0.09);
  --shadow-card-deep: 0 32px 80px rgba(17, 21, 23, 0.16);
  --shadow-focus: 0 0 0 3px rgba(27, 124, 99, 0.3);

  /* Layout */
  --layout-width: 1180px;   /* header/footer shell */
  --content-width: 760px;   /* optimal reading measure */
  --list-width: 960px;      /* post archives */
  --header-offset: 4.5rem;
}
/*
 * TortoLingua Web — theme CSS (Phase 1 scaffold).
 *
 * Structure:
 *   1. Reset + base
 *   2. Typography defaults
 *   3. Layout shell (header, main, footer, language switcher)
 *   4. Home
 *   5. Post list + post card + pagination
 *   6. Post single (body typography)
 *   7. Taxonomy / list
 *   8. Error page (404)
 *   9. Utility + responsive
 *
 * BEM class contract: keep class names in sync with layouts/_default/*.html
 * and layouts/partials/*.html. When a layout adds a new block, add its
 * component section here rather than reaching for page-level one-offs.
 *
 * Phase 1b will expand this file to reach visual parity with the current
 * Eleventy landing (hero sections, feature cards, audience blocks, etc.).
 */

/* 1. Reset + base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 700px at 10% -20%, #ffffff 15%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #d9efe8 10%, transparent 55%),
    var(--color-page-light);
  color: var(--color-text-primary);
  font-family: var(--font-copy);
  font-size: var(--type-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  padding: 0;
}

/* 2. Typography ----------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-16);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--type-heading-lg); }
h2 { font-size: var(--type-heading-md); }
h3 { font-size: var(--type-heading-sm); }
h4 { font-size: var(--type-body-lg); }

p {
  margin: 0 0 var(--space-20);
}

a {
  color: var(--color-accent-strong);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

/* 3. Layout shell --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background: rgba(244, 241, 233, 0.85);
  border-bottom: 1px solid var(--color-surface-outline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: var(--space-20) var(--space-24);
  flex-wrap: wrap;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-md);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.site-header__brand-mark {
  font-size: 1.4em;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0;
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--type-caption);
  color: var(--color-text-secondary);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-surface-outline);
  text-decoration: none;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-surface-outline);
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-accent-ink);
  font-size: var(--type-caption);
  font-weight: 700;
}

.language-switcher__label {
  font-family: var(--font-ui);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.language-switcher__select {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
  padding: var(--space-4) 0;
}

.site-main {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: var(--space-48) var(--space-24) var(--space-80);
}

.site-footer {
  border-top: 1px solid var(--color-surface-outline);
  margin-top: var(--space-80);
  padding: var(--space-32) 0 var(--space-48);
  background: rgba(255, 255, 255, 0.3);
}

.site-footer__inner {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--space-24);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

.site-footer__links {
  flex: 1 1 auto;
  text-align: center;
}

.site-footer__list {
  display: inline-flex;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer__list a {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-secondary);
}

/* 4. Home ---------------------------------------------------------------- */

.home-intro {
  max-width: var(--content-width);
  margin: 0 auto var(--space-56);
  text-align: left;
}

.home-intro__title {
  font-size: var(--type-display-md);
  margin-bottom: var(--space-16);
}

.home-intro__body {
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
}

.home-intro__body p:last-child {
  margin-bottom: 0;
}

.home-posts {
  max-width: var(--list-width);
  margin: 0 auto;
}

.home-posts__title {
  font-size: var(--type-heading-md);
  margin-bottom: var(--space-32);
  color: var(--color-text-primary);
}

.home-posts__more {
  margin-top: var(--space-32);
  text-align: center;
}

.home-posts__more-link {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-accent-strong);
}

/* 5. Post list + post card ----------------------------------------------- */

.post-list {
  max-width: var(--list-width);
  margin: 0 auto;
}

.post-list__header {
  margin-bottom: var(--space-48);
  max-width: var(--content-width);
}

.post-list__title {
  font-size: var(--type-display-md);
  margin-bottom: var(--space-16);
}

.post-list__intro {
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
}

.post-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-24);
}

.post-card {
  display: flex;
  background: var(--color-surface-card);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.post-card:hover,
.post-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-medium);
  border-color: var(--color-surface-outline-strong);
}

.post-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  color: var(--color-text-primary);
  width: 100%;
}

.post-card__media {
  margin: calc(var(--space-24) * -1) calc(var(--space-24) * -1) var(--space-16);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.post-card__media picture,
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card__link:hover,
.post-card__link:focus-visible {
  color: var(--color-text-primary);
  text-decoration: none;
}

.post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.post-card__date {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-card__excerpt {
  margin: var(--space-8) 0 0;
  font-size: var(--type-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
  margin: var(--space-48) 0 0;
  padding: 0;
  list-style: none;
}

.pagination .page-item {
  display: inline-flex;
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-surface-outline);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}

/* 5a. Blog hub (/<lang>/blog/ head URL) ---------------------------------- */

/*
 * Rendered from layouts/partials/blog/hub.html. Sections: hero → category
 * tiles → recent posts (reuses .post-card) → language switcher. Paginated
 * sub-pages (/blog/page/2/ …) still use the plain post-list styling above.
 * Per tortolingua/tortolingua-web#6.
 */

.blog-hub {
  max-width: var(--list-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.blog-hub__hero {
  max-width: var(--content-width);
}

.blog-hub__title {
  font-size: var(--type-display-md);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-16);
}

.blog-hub__intro {
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
}

.blog-hub__intro p {
  margin: 0 0 var(--space-16);
}

.blog-hub__intro p:last-child {
  margin-bottom: 0;
}

.blog-hub__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.blog-hub__section-title {
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Tile grid — shared between category + language variants. */
.blog-hub__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-20);
}

.blog-hub__tiles--categories {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.blog-hub__tiles--languages {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.blog-hub__tile {
  display: flex;
  background: var(--color-surface-card);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-hub__tile:hover,
.blog-hub__tile:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-medium);
  border-color: var(--color-surface-outline-strong);
}

.blog-hub__tile-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  width: 100%;
  color: var(--color-text-primary);
}

.blog-hub__tile-link:hover,
.blog-hub__tile-link:focus-visible {
  color: var(--color-text-primary);
  text-decoration: none;
}

.blog-hub__tile-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-md);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.blog-hub__tile-desc {
  margin: 0;
  font-size: var(--type-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* Language tiles are more compact — code + name, centered. */
.blog-hub__tile--language .blog-hub__tile-link {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-12);
}

.blog-hub__lang-code {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.blog-hub__lang-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body-md);
  color: var(--color-text-primary);
}

/* Current-language tile: flatten interaction, keep it readable as a marker. */
.blog-hub__tile--current {
  background: var(--color-surface-subtle);
  border-color: transparent;
  box-shadow: none;
}

.blog-hub__tile--current:hover,
.blog-hub__tile--current:focus-within {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.blog-hub__tile--current .blog-hub__tile-link {
  cursor: default;
}

.blog-hub__tile--current .blog-hub__lang-code {
  color: var(--color-text-muted);
}

.blog-hub__tile--current .blog-hub__lang-name {
  color: var(--color-text-secondary);
}

/* Recent posts reuses .post-list__items grid; override gap to match hub rhythm. */
.blog-hub__recent {
  gap: var(--space-20);
}

/* Related posts under single articles (tortolingua/tortolingua-web#18).
   Reuses the .post-card grid from .post-list__items so card chrome stays
   visually identical to the blog hub. Extra top margin separates it from
   the article body / .post__footer. */
.related-posts {
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-surface-outline);
}

.related-posts__title {
  margin: 0 0 var(--space-24);
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  color: var(--color-text-primary);
}

.related-posts__grid {
  gap: var(--space-20);
}

/* More posts under single articles (tortolingua/tortolingua#834).
   Sibling of .related-posts — softer separator so the two sections
   read as a connected tail rather than two heavy blocks. */
.more-posts {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-surface-outline);
}

.more-posts__title {
  margin: 0 0 var(--space-24);
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  color: var(--color-text-primary);
}

.more-posts__grid {
  gap: var(--space-20);
}

.blog-hub__cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: flex-start;
}

.blog-hub__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--type-body-sm);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.blog-hub__cta-link:hover,
.blog-hub__cta-link:focus-visible {
  background: var(--color-accent-strong);
  color: var(--color-text-inverse);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .blog-hub {
    gap: var(--space-48);
  }

  .blog-hub__title {
    font-size: var(--type-heading-lg);
  }

  .blog-hub__section-title {
    font-size: var(--type-heading-md);
  }
}

@media (max-width: 600px) {
  .blog-hub__tiles--categories {
    grid-template-columns: 1fr;
  }

  .blog-hub__tiles--languages {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .blog-hub__tile-link {
    padding: var(--space-20);
  }

  .blog-hub__cta {
    justify-content: stretch;
  }

  .blog-hub__cta-link {
    width: 100%;
    justify-content: center;
  }
}

/* 6. Post single --------------------------------------------------------- */

.post--single {
  max-width: var(--content-width);
  margin: 0 auto;
}

.post__header {
  margin-bottom: var(--space-32);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-surface-outline);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.post__meta > * {
  margin: 0;
}

.post__authors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.post__authors li a {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: var(--color-text-secondary);
}

.post__hero {
  margin: 0 0 var(--space-48);
  border-radius: var(--radius-card-md);
  overflow: hidden;
  background: var(--color-surface-subtle);
  max-width: var(--layout-width);
  width: calc(100vw - (var(--space-32) * 2));
  margin-left: 50%;
  transform: translateX(-50%);
}

.post__hero picture,
.post__hero img {
  display: block;
  width: 100%;
  height: auto;
}

.post__footer {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-surface-outline);
}

.post__lastmod {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

@media (max-width: 900px) {
  .post__hero {
    width: calc(100vw - (var(--space-16) * 2));
  }
}

.post__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-md);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-20);
}

.post__date,
.post__author {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1;
}

.post__date {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--type-meta);
}

.post__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.post__categories li a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--type-meta);
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post__categories li a:hover,
.post__categories li a:focus-visible {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.post__body {
  font-size: var(--type-body-md);
  line-height: var(--leading-reading);
  color: var(--color-text-primary);
}

.post__body > * + * {
  margin-top: var(--space-24);
}

.product-cta,
.tool-widget {
  margin-top: var(--space-32);
  padding: var(--space-24);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  background: rgba(255, 255, 255, 0.88);
}

.product-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  border-left: 6px solid var(--color-accent);
}

.product-cta__copy {
  max-width: 680px;
}

.product-cta__eyebrow,
.tool-widget__eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--color-accent-dark);
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-cta h2,
.tool-widget h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  line-height: var(--leading-snug);
}

.product-cta p,
.tool-widget p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.tool-widget__head {
  max-width: 760px;
}

.tool-widget__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-20);
}

.tool-widget__form label {
  display: grid;
  gap: var(--space-8);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--type-body-sm);
  font-weight: 700;
}

.tool-widget select,
.tool-widget input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-surface-outline-strong);
  border-radius: var(--radius-card-sm);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
}

.tool-widget__result {
  margin-top: var(--space-20);
  padding: var(--space-16);
  border-radius: var(--radius-card-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-weight: 700;
  line-height: var(--leading-normal);
}

.tool-widget__result[data-level="yellow"] {
  background: #fff5d6;
  color: #6f4b00;
}

.tool-widget__result[data-level="red"] {
  background: #ffe6df;
  color: #7d2b1a;
}

@media (max-width: 700px) {
  .product-cta__actions,
  .product-cta__actions .landing-cta,
  .tool-widget__form {
    width: 100%;
  }

  .tool-widget__form {
    grid-template-columns: 1fr;
  }
}

.post__body h2 {
  font-size: var(--type-heading-md);
  margin-top: var(--space-48);
}

.post__body h3 {
  font-size: var(--type-heading-sm);
  margin-top: var(--space-40);
}

.post__body h4 {
  font-size: var(--type-body-lg);
  margin-top: var(--space-32);
}

.post__body p,
.post__body ul,
.post__body ol {
  margin: 0 0 var(--space-24);
}

.post__body ul,
.post__body ol {
  padding-left: var(--space-24);
}

.post__body li + li {
  margin-top: var(--space-8);
}

.post__body img,
.post__body figure,
.post__body picture {
  margin: var(--space-32) 0;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
}

.post__body figure img {
  margin: 0;
  border-radius: 0;
}

.post__body img.app-mobile-screenshot {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: var(--space-32) auto;
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  box-shadow: var(--shadow-card-soft);
}

.post__body figcaption {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-8);
}

.post__body blockquote {
  margin: var(--space-32) 0;
  padding: var(--space-16) var(--space-24);
  border-left: 4px solid var(--color-quote-rule);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-body-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.post__body blockquote p:last-child {
  margin-bottom: 0;
}

.post__body code {
  background: var(--color-code-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.post__body pre {
  background: var(--color-page-dark);
  color: var(--color-text-inverse);
  padding: var(--space-20);
  border-radius: var(--radius-card-sm);
  overflow-x: auto;
  font-size: var(--type-caption);
  line-height: 1.5;
}

.post__body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.post__body hr {
  border: 0;
  height: 1px;
  background: var(--color-surface-outline);
  margin: var(--space-48) 0;
}

.post__body a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.post__body a:hover,
.post__body a:focus-visible {
  color: var(--color-accent-dark);
  text-decoration-thickness: 2px;
}

.post__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--space-32) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: var(--type-body-sm);
}

.post__body .false-friends-table-wrap {
  width: 100%;
  margin: var(--space-32) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post__body .false-friends-table-wrap table {
  display: table;
  min-width: 760px;
  margin: 0;
}

.post__body th,
.post__body td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 1px solid var(--color-surface-outline);
  vertical-align: top;
}

.post__body th {
  font-family: var(--font-ui);
  font-weight: 700;
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

.post__body tr:last-child td {
  border-bottom: none;
}

.post__body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-card-sm);
  margin: var(--space-32) 0;
}

.post__body video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-sm);
  margin: var(--space-32) 0;
}
/* Cognates pilot ----------------------------------------------------------- */

.cognates-page,
.cognates-index {
  max-width: var(--content-width);
  margin: 0 auto;
}

.cognates-page__header,
.cognates-index__header {
  margin-bottom: var(--space-32);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-surface-outline);
}

.cognates-page__title,
.cognates-index__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-md);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-16);
}

.cognates-page__description,
.cognates-index__description {
  font-size: var(--type-body-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  margin: 0;
}

.cognates-page__intro,
.cognates-index__body {
  font-size: var(--type-body-md);
  line-height: var(--leading-reading);
  color: var(--color-text-primary);
}

.cognates-page__intro > * + *,
.cognates-index__body > * + * {
  margin-top: var(--space-24);
}

.cognates-page__intro h2,
.cognates-index__body h2 {
  font-size: var(--type-heading-md);
  margin-top: var(--space-48);
}

.cognates-page__intro p,
.cognates-index__body p {
  margin: 0 0 var(--space-24);
}

.cognates-page__intro a,
.cognates-index__body a,
.cognates-list__sources a,
.cognates-index__link {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.cognates-page__intro a:hover,
.cognates-page__intro a:focus-visible,
.cognates-index__body a:hover,
.cognates-index__body a:focus-visible,
.cognates-list__sources a:hover,
.cognates-list__sources a:focus-visible,
.cognates-index__link:hover,
.cognates-index__link:focus-visible {
  color: var(--color-accent-dark);
  text-decoration-thickness: 2px;
}

.cognates-page__list {
  margin-top: var(--space-48);
}

.cognates-page__list-title {
  font-size: var(--type-heading-md);
  margin-bottom: var(--space-24);
}

.cognates-list,
.cognates-index__list {
  display: grid;
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cognates-list {
  counter-reset: cognates;
}

.cognates-list__item,
.cognates-index__item {
  border: 1px solid var(--color-surface-outline);
  border-radius: 8px;
  background: var(--color-surface-card);
}

.cognates-list__item {
  counter-increment: cognates;
  padding: var(--space-20);
}

.cognates-list__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
  line-height: var(--leading-snug);
}

.cognates-list__pair::before {
  content: counter(cognates) ".";
  min-width: 2ch;
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

.cognates-list__sep {
  color: var(--color-text-muted);
}

.cognates-list__ipa {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

.cognates-list__gloss,
.cognates-list__etymology,
.cognates-list__note,
.cognates-list__sources {
  margin: var(--space-12) 0 0;
}

.cognates-list__gloss {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--type-body-sm);
}

.cognates-list__etymology,
.cognates-list__sources {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  line-height: var(--leading-snug);
}

.cognates-list__note {
  font-size: var(--type-body-md);
  line-height: var(--leading-reading);
}

.cognates-list__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.cognates-page__placeholder {
  padding: var(--space-20);
  border: 1px solid var(--color-surface-outline);
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.cognates-index__list {
  margin-top: var(--space-32);
}

.cognates-index__item {
  padding: var(--space-20);
}

.cognates-index__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
}

.cognates-index__item-description {
  margin: var(--space-8) 0 0;
  color: var(--color-text-secondary);
}
/* 7. Taxonomy / list -------------------------------------------------- */

.taxonomy-list {
  max-width: var(--list-width);
  margin: 0 auto;
}

/* 8. Error page (404) --------------------------------------------------- */

.error-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-56) 0;
  text-align: center;
}

.error-page__code {
  font-size: var(--type-display-lg);
  margin: 0 0 var(--space-16);
  color: var(--color-text-secondary);
  letter-spacing: -0.02em;
}

.error-page__title {
  font-size: var(--type-heading-md);
  margin: 0 0 var(--space-24);
  color: var(--color-text-primary);
}

.error-page__body {
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-32);
}

.error-page__actions {
  margin: 0;
}

.error-page__link {
  display: inline-block;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.error-page__link:hover,
.error-page__link:focus-visible {
  background: var(--color-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* 9. Utility + responsive ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .site-main {
    padding: var(--space-32) var(--space-20) var(--space-56);
  }

  .post__title,
  .home-intro__title,
  .post-list__title {
    font-size: var(--type-heading-lg);
  }

  .post__body {
    font-size: var(--type-body-sm);
  }
}

@media (max-width: 600px) {
  .site-header__inner {
    gap: var(--space-12);
    padding: var(--space-16);
  }

  .site-nav__list {
    gap: var(--space-8);
  }

  .post-list__items {
    grid-template-columns: 1fr;
  }

  .post__header {
    margin-bottom: var(--space-32);
    padding-bottom: var(--space-24);
  }

  .post__title {
    font-size: var(--type-heading-lg);
  }

  .home-intro,
  .home-posts {
    margin-inline: 0;
  }
}

/* 10. Landing (home) -------------------------------------------------- */
/*
 * Landing visuals ported from tortolingua-landing (11ty). Classes are
 * prefixed with `.landing-*` so they don't collide with the blog theme.
 * Uses the same brand tokens (cream page, teal accent) — shapes come from
 * `--radius-card-*` + `--shadow-card-*`, typography from `--font-display`
 * + `--font-copy`. The old landing's one-off `:root --accent` values map
 * to tokens.css equivalents.
 */

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: var(--space-24);
  margin: 0 auto var(--space-24);
  padding: var(--space-40) var(--space-32);
  background: var(--color-surface-panel);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card-medium);
}

.landing-hero__copy {
  display: grid;
  align-content: start;
}

.landing-eyebrow {
  margin: 0 0 var(--space-12);
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-hero__logo {
  width: min(100%, 620px);
  height: auto;
  display: block;
  margin: 0 0 var(--space-20);
}

.landing-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.landing-hero__subtitle {
  margin: var(--space-16) 0 0;
  color: var(--color-text-secondary);
  max-width: 720px;
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
}

.landing-actions {
  margin-top: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.landing-actions--offset {
  margin-top: var(--space-16);
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-20);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.landing-cta:hover,
.landing-cta:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}

.landing-cta--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.landing-cta--primary:hover,
.landing-cta--primary:focus-visible {
  background: var(--color-accent-strong);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card-soft);
}

.landing-cta--secondary {
  background: var(--color-surface-card);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-surface-outline);
}

.landing-cta--secondary:hover,
.landing-cta--secondary:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.landing-cta--unavailable {
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-surface-outline);
  cursor: default;
}

.landing-hero__points {
  margin: var(--space-20) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-8);
}

.landing-hero__points li {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-sm);
  background: rgba(255, 255, 255, 0.7);
  line-height: var(--leading-normal);
}

.landing-hero__panel {
  display: grid;
  gap: var(--space-12);
  align-content: start;
}

.landing-stat {
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-card-md);
  border: 1px solid var(--color-surface-outline);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), #eaf6f1);
  box-shadow: inset 0 1px 0 #ffffff;
}

.landing-stat strong {
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-heading-sm);
}

.landing-stat span {
  display: block;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.landing-section {
  margin-top: var(--space-32);
}

.landing-section__heading {
  margin-bottom: var(--space-20);
}

.landing-section__heading :is(h1, h2) {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.landing-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  padding: var(--space-20);
}

.landing-card h3 {
  margin: 0 0 var(--space-8);
  font-size: var(--type-heading-sm);
}

.landing-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.landing-card--wide {
  padding: var(--space-24);
}

.landing-card__lead {
  max-width: 760px;
  font-size: var(--type-body-md);
  line-height: 1.65;
}

.landing-post-list {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-16) 0 var(--space-20);
  padding: 0;
  list-style: none;
}

.landing-post-list__item {
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-sm);
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 150ms ease, background 150ms ease;
}

.landing-post-list__item:hover,
.landing-post-list__item:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.landing-post-list__link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  color: var(--color-text-primary);
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
}

.landing-post-list__link:hover,
.landing-post-list__link:focus-visible {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.landing-post-list__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--type-body-sm);
}

.landing-post-list__date {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.landing-step {
  padding: var(--space-24) var(--space-20) var(--space-20);
  border-radius: var(--radius-card-md);
  border: 1px solid var(--color-surface-outline);
  background: #fffdfa;
}

.landing-step__index {
  display: inline-block;
  margin-bottom: var(--space-12);
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.landing-step h3 {
  margin: 0 0 var(--space-8);
  font-size: var(--type-heading-sm);
}

.landing-step p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.landing-cta-panel {
  margin-top: var(--space-32);
  padding: var(--space-32) var(--space-32) var(--space-32);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--color-surface-outline);
  background:
    radial-gradient(500px 220px at 0% 0%, #ffffff, transparent 70%),
    linear-gradient(135deg, #e6f4ee, #ffffff);
}

.landing-cta-panel__copy {
  max-width: 720px;
}

.landing-cta-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.2;
}

/* 11. App download / beta conversion --------------------------------- */

.site-nav__link--app {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.site-nav__link--app:hover,
.site-nav__link--app:focus-visible {
  background: var(--color-accent-strong);
  color: var(--color-text-inverse);
}

.app-platforms {
  margin-top: 0;
}

.app-platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.app-platform {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-24);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  background: rgba(255, 255, 255, 0.86);
}

.app-platform__badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 800;
  text-transform: uppercase;
}

.app-platform h3 {
  margin: 0;
  font-size: var(--type-heading-sm);
}

.app-platform p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.app-platform .landing-cta {
  margin-top: auto;
}

.app-platform__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.app-platform__actions .landing-cta {
  margin-top: 0;
}

.app-platform__note {
  font-size: var(--type-body-sm);
}

.app-promo {
  margin-top: var(--space-32);
  padding: var(--space-24);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  background: rgba(255, 255, 255, 0.82);
}

.app-promo h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  color: var(--color-text-primary);
}

.app-promo p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.app-promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}

.app-promo__copy {
  max-width: 740px;
}

.app-use-cases__intro {
  max-width: 760px;
  margin: var(--space-8) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md);
  line-height: var(--leading-normal);
}

.app-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.app-use-case-card {
  display: flex;
}

.app-use-case-card__link {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-text-primary);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.app-use-case-card__link:hover,
.app-use-case-card__link:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.app-use-case-card__eyebrow,
.app-use-case-card__cta {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-use-case-card__eyebrow {
  color: var(--color-accent-dark);
}

.app-use-case-card h3 {
  margin: 0;
  font-size: var(--type-heading-sm);
}

.app-use-case-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.app-use-case-card__cta {
  margin-top: auto;
  color: var(--color-accent-strong);
}

.app-product-page {
  max-width: var(--layout-width);
  margin: 0 auto;
}

.app-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--space-32);
  align-items: center;
  margin-bottom: var(--space-48);
}

.app-product-hero__copy {
  max-width: 720px;
}

.app-product-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  line-height: var(--leading-tight);
}

.app-product-hero__subtitle {
  margin: var(--space-16) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
}

.app-product-hero__media {
  justify-self: center;
  width: min(100%, 360px);
  margin: 0;
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  overflow: hidden;
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-card-soft);
}

.app-product-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.app-product-content {
  max-width: var(--content-width);
  margin: 0 auto;
}

.app-product__body {
  padding-bottom: var(--space-24);
}

@media (max-width: 900px) {
  .app-use-cases__grid,
  .app-product-hero {
    grid-template-columns: 1fr;
  }
}
/* 12. FAQ page ------------------------------------------------------- */

.faq-breadcrumb {
  display: flex;
  margin-bottom: var(--space-20);
}

.faq-breadcrumb__link {
  gap: var(--space-8);
  font-size: var(--type-caption);
}

.faq-breadcrumb__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.faq-header {
  margin-bottom: var(--space-32);
}

.faq-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-12);
}

.faq-header__subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg);
  line-height: var(--leading-reading);
}

.faq-list {
  display: grid;
  gap: var(--space-16);
}

.faq-item {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  padding: var(--space-24);
}

.faq-item h2 {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-heading-sm);
  line-height: 1.3;
}

.faq-item p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.faq-item--with-screenshot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-24);
  align-items: center;
}

.faq-item__text {
  min-width: 0;
}

.faq-item__screenshot {
  width: 195px;
  height: auto;
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--color-surface-outline);
  box-shadow: var(--shadow-card-medium);
}

/* 12. Legal pages (privacy-policy, terms-of-service) ---------------- */

.legal {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.legal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.2rem);
  line-height: 1.1;
}

.legal__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.legal__nav-link {
  color: var(--color-accent-ink);
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
}

.legal__nav-link:hover,
.legal__nav-link:focus-visible {
  text-decoration: underline;
}

.legal__content {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--color-surface-outline);
  border-radius: var(--radius-card-md);
  padding: var(--space-32);
  line-height: var(--leading-reading);
}

.legal__last-updated {
  font-family: var(--font-ui);
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  margin: 0 0 var(--space-20);
}

.legal__content h2 {
  margin: var(--space-24) 0 var(--space-8);
  font-size: var(--type-heading-sm);
  font-family: var(--font-display);
}

.legal__content h2:first-of-type {
  margin-top: 0;
}

.legal__content p {
  margin: 0 0 var(--space-16);
  line-height: var(--leading-reading);
}

.legal__content ul {
  margin: 0 0 var(--space-16);
  padding-left: var(--space-24);
}

.legal__content li {
  margin-bottom: var(--space-8);
  line-height: var(--leading-normal);
}

/* 13. Landing responsive ------------------------------------------- */

@media (max-width: 900px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding: var(--space-28) var(--space-24);
  }

  .landing-grid,
  .landing-steps,
  .app-platforms__grid {
    grid-template-columns: 1fr;
  }

  .faq-item--with-screenshot {
    grid-template-columns: 1fr;
  }

  .faq-item__screenshot {
    width: 100%;
    max-width: 280px;
    justify-self: center;
  }

  .landing-cta-panel {
    padding: var(--space-24);
  }
}

@media (max-width: 600px) {
  .landing-hero {
    padding: var(--space-24) var(--space-16);
  }

  .app-platform,
  .app-promo {
    padding: var(--space-20);
  }

  .landing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-cta {
    width: 100%;
  }

  .landing-post-list__link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .legal__content {
    padding: var(--space-20);
  }

  .legal__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 14. Footer (extended with social links) -------------------------- */

.site-footer__inner {
  gap: var(--space-20);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.site-footer__social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-surface-outline);
  background: rgba(255, 255, 255, 0.79);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-card-soft);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-surface-card);
  text-decoration: none;
}

.site-footer__social-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

.site-footer__social-icon--telegram {
  margin-left: -2px;
}

.site-footer__social-icon--bluesky {
  width: 22px;
  height: 22px;
}