*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-style: normal; /* no italics anywhere — house rule */
    }
    html { -webkit-text-size-adjust: 100%; }
    :root:not(.light) body { -webkit-font-smoothing: antialiased; }
    body {
      background: var(--surface-base);
      color: var(--text-primary);
      font-family: var(--font-sans);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }
    /* signature film-grain overlay (~3%), inverted in light mode */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: var(--grain-opacity);
      background-image: var(--grain-url);
      background-repeat: repeat;
      background-size: 300px 300px;
    }
    html.light body::after { filter: invert(1); }

    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: 2px;
    }
    ::selection { background: rgba(217, 39, 28, 0.22); }

    /* ── Page frame ───────────────────────────────────────────────────────── */
    .page {
      max-width: 1280px;
      margin: 0 auto;
      padding: 8px 28px 24px;
    }

    /* ── Header (aligned with mutfak/mercek branding) ───────────────────── */
    .site-header {
      padding: 44px 0 18px;
    }
    .hd-wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 28px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .brand {
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }
    /* Yeni Türkiye logotype: YENİ (red, small, tracked) over TÜRKİYE (ink), a clipped
       red arc below — only its two tips show, a horizon rather than a bowl. */
    .wordmark {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: var(--font-display);
      line-height: 0.9;
      color: var(--text-heading);
      text-decoration: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.12s ease;
    }
    .wordmark:hover { opacity: 0.8; }
    .wordmark:active { opacity: 0.65; }
    .wordmark-yeni {
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.18em;
      padding-left: 0.18em; /* physical on purpose: balances the tracking after the last Latin letter, in every direction */
      color: var(--accent);
    }
    .wordmark-turkiye {
      font-weight: 700;
      font-size: 29px;
      letter-spacing: -0.01em;
    }
    .wordmark-arc {
      display: block;
      width: 95px;
      height: auto;
      margin-top: 2px;
      overflow: hidden;
      color: var(--accent);
    }
    .feature-label {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: var(--fs-meta);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-faint);
      padding-bottom: 3px;
    }
    .hd-tools {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 3px;
    }
    /* Language menu: a globe + the page's code, the header's mono meta voice; opens a small card of endonyms.
       Native <details>: click / Enter / Space open it; shell.js closes it on Escape and on a click outside. */
    .lang-menu { position: relative; }
    .lang-menu > summary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 28px;
      padding: 0 6px;
      list-style: none;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: var(--fs-meta);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      border: 1px solid transparent;
      border-radius: 2px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      transition: color 0.12s ease, background 0.12s ease;
    }
    .lang-menu > summary::-webkit-details-marker { display: none; }
    .lang-menu > summary:focus { outline: none; }
    .lang-menu > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
    .lang-menu > summary:hover,
    .lang-menu[open] > summary { background: var(--surface-hover); color: var(--text-primary); }
    .lang-menu-list {
      position: absolute;
      top: calc(100% + 4px);
      inset-inline-end: 0;
      z-index: 10;
      min-width: max-content;
      list-style: none;
      padding: 4px 0;
      background: var(--surface-card);
      border: 1px solid var(--border-control);
      border-radius: 2px;
      box-shadow: var(--card-lift);
    }
    .lang-menu-list a {
      display: block;
      padding-block: 6px;
      padding-inline: 12px 14px;
      border-inline-start: 2px solid transparent;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: var(--fs-meta);
      letter-spacing: 0.04em;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.12s ease;
    }
    .lang-menu-list a:hover { color: var(--text-primary); background: var(--surface-hover); }
    .lang-menu-list a[aria-current="page"] { color: var(--text-heading); border-inline-start-color: var(--text-heading); }
    .lang-menu-list a[lang="ar"] { letter-spacing: 0; } /* tracking breaks Arabic joining */
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;
      padding: 0;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
    }
    .theme-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
    .theme-toggle:active { transform: translateY(1px); }
    .theme-toggle .sun { display: none; }
    html.light .theme-toggle .moon { display: none; }
    html.light .theme-toggle .sun { display: inline; }

    /* ── Footer row ───────────────────────────────────────────────────────── */
    .footer-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px 8px;
      margin-top: 16px;
      padding: 14px 16px;
      border-top: 1px solid var(--border);
    }
    .footer-row > span:not(:last-child)::after {
      content: '\00B7';
      margin-inline-start: 8px;
      color: var(--text-faint);
    }
    /* the independence sentence takes its own line; date · contact · © sit below it */
    .footer-row > .footer-disclaimer:first-child { flex-basis: 100%; }
    .footer-row > .footer-disclaimer:first-child::after { content: none; }
    .footer-disclaimer {
      font-family: var(--font-sans);
      font-size: var(--fs-meta);
      letter-spacing: 0.04em;
      line-height: 1.7;
      text-align: center;
      color: var(--text-faint);
    }
    .footer-disclaimer .footnote-link {
      font-size: inherit;
      letter-spacing: inherit;
      text-decoration: underline;
      text-decoration-color: var(--border);
      text-underline-offset: 3px;
    }
    .footer-disclaimer .footnote-link:hover { text-decoration-color: currentColor; }
    .footnote {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .footnote-link {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      letter-spacing: 0.06em;
      color: var(--text-faint);
      text-decoration: none;
      transition: color 0.12s ease;
    }
    .footnote-link:hover { color: var(--text-muted); }
    .footnote-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
    /* ── Mobile (2b, 390px reference) ─────────────────────────────────────── */
    @media (max-width: 840px) {
      .site-header { padding: 0; border-bottom: 1px solid var(--border); }
      .hd-wrap { padding: 12px 20px; align-items: center; }
      .theme-toggle { width: auto; height: 24px; padding: 0 8px; }
      .lang-menu > summary { height: 24px; }
      .page { padding: 0 0 24px; }

      .footer-row { padding: 12px 16px 0; margin-top: 8px; }
      .footer-row > span:not(:last-child)::after { content: none; }
    }

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