ad-card{display:block;box-sizing:border-box}
/*
===============================================================================
WEB PROJECT — MASTER CSS
Merged editorial system for a bilingual literary / publishing / bookstore site
Version 1.0.0

SOURCE MERGE
- sample_ch.css  : compact literary foundation, Cormorant preference, print
- sample_cl.css  : editorial architecture, bilingual "Seam", commerce, paged media
- sample_pr.css  : polished visual surface, responsive device tiers, glass/soft UI

DESIGN PRINCIPLES
- Midnight Blue is the default regardless of the user's OS preference.
- Theme changes are driven by <html data-theme="..."> and therefore require JS
  (or another client-side controller) to change the attribute.
- Fonts are loaded in HTML <head>, not @import here, to avoid delaying CSS.
- XML text can be inserted as textContent and rendered with preserved source
  line breaks; no <br> generation is required.
- Layout uses fluid tokens + container queries; viewport breakpoints are reserved
  for page chrome and unusual device conditions.
- Print CSS is deliberately conservative and standards-oriented. Exact CMYK,
  ICC profiles, bleed, crop marks and press-ready PDF production belong to the
  final publishing/PDF stage, not browser CSS.

FONT SHORTLIST
1. Cormorant Garamond — preferred; elegant, dramatic, literary display/poetry
2. EB Garamond       — classical, quieter, excellent book feel
3. Newsreader        — highly readable contemporary literary serif
4. Literata          — robust long-form reading face
5. Crimson Pro       — literary, slightly warmer / more contemporary
6. Source Serif 4    — excellent neutral editorial fallback

The demo HTML loads these from Google Fonts in <head>. For production/offline
use, self-host the WOFF2 files and replace the Google Fonts <link> with
@font-face declarations. The CSS fallback stacks still work without the webfont.

===============================================================================
*/

/* ============================================================================
   0. CASCADE ARCHITECTURE
============================================================================ */
@layer reset, tokens, theme, base, typography, bilingual, layout, components,
       responsive, utilities, accessibility, print;

/* ============================================================================
   1. RESET
============================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    min-width: 280px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption,
  ul, ol, dl, dd, pre { margin: 0; }

  ul, ol { padding-inline-start: 1.35em; }

  img, picture, svg, video, canvas {
    display: block;
    max-inline-size: 100%;
  }

  img { block-size: auto; }

  button, input, select, textarea { font: inherit; color: inherit; }

  button { cursor: pointer; }

  fieldset {
    min-inline-size: 0;
    border: 0;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: 100%;
  }

  p, h1, h2, h3, h4, h5, h6, li {
    overflow-wrap: break-word;
  }

  [hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ============================================================================
   2. DESIGN TOKENS
============================================================================ */
@layer tokens {
  :root {
    /* ---- Light theme ------------------------------------------------------- */
    --paper: #ffffff;
    --paper-soft: #faf9f7;
    --surface: #ffffff;
    --surface-soft: #f4f1eb;
    --surface-glass: rgb(255 255 255 / .82);
    --books-field: #211c18;

    --ink: #171513;
    --ink-soft: #4f4a44;
    --ink-faint: #7c756d;

    --line: #ded9d1;
    --line-strong: #c5beb4;

    --accent-en: #39436f;
    --accent-en-ink: #252d55;
    --accent-ro: #9a3f37;
    --accent-ro-ink: #762b26;
    --accent-gold: #9b7540;
    --accent-gold-ink: #705329;
    --success: #2f705d;
    --danger: #9a3f37;

    --focus: #1769e0;
    --selection: #dce8ff;

    /* ---- Typography ------------------------------------------------------ */
    --font-display: "Cormorant Garamond", "EB Garamond", "Newsreader",
                    "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                    Baskerville, Georgia, serif;

    --font-reading: "Newsreader", "Cormorant Garamond", "EB Garamond",
                    "Iowan Old Style", "Palatino Linotype", Georgia, serif;

    --font-ui: Inter, "Source Sans 3", "Segoe UI", system-ui, -apple-system,
               BlinkMacSystemFont, sans-serif;

    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, "Liberation Mono", monospace;

    /* ---- Fluid type ------------------------------------------------------ */
    --fs-2xs: clamp(.68rem, .65rem + .08vw, .75rem);
    --fs-xs:  clamp(.76rem, .72rem + .10vw, .86rem);
    --fs-sm:  clamp(.88rem, .83rem + .14vw, .98rem);
    --fs-md:  clamp(1rem, .96rem + .18vw, 1.12rem);
    --fs-lg:  clamp(1.18rem, 1.06rem + .30vw, 1.42rem);
    --fs-xl:  clamp(1.42rem, 1.18rem + .70vw, 2.05rem);
    --fs-2xl: clamp(1.85rem, 1.35rem + 1.45vw, 3.10rem);
    --fs-3xl: clamp(2.35rem, 1.58rem + 2.20vw, 4.50rem);
    --fs-4xl: clamp(2.90rem, 1.82rem + 3.35vw, 6.00rem);

    --lh-tight: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.62;
    --lh-poetry: 1.48;

    --measure: 66ch;
    --measure-reading: 62ch;
    --measure-narrow: 44ch;

    /* ---- Spacing --------------------------------------------------------- */
    --space-3xs: .25rem;
    --space-2xs: .50rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.50rem;
    --space-lg: 2.25rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;

    --gutter: clamp(1rem, 3vw, 3rem);
    --container-max: 76rem;
    --container-wide: 94rem;
    /* Shared public frame: the canonical horizontal contract used by both
       the floating header and ordinary page containers. Responsive changes to
       --gutter / --container-max therefore move them together. */
    --page-frame-inline: min(calc(100% - 2 * var(--gutter)), var(--container-max));
    --section-space: clamp(3.5rem, 7vw, 8rem);

    /* ---- Shape / elevation ---------------------------------------------- */
    --radius-sm: .35rem;
    --radius-md: .65rem;
    --radius-lg: 1.15rem;
    --radius-xl: 1.5rem;
    --pill: 999px;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / .07);
    --shadow-md: 0 8px 28px rgb(0 0 0 / .09);
    --shadow-lg: 0 20px 65px rgb(0 0 0 / .13);

    --ease: cubic-bezier(.2, .8, .2, 1);
    --fast: 120ms;
    --motion: 220ms;
    --slow: 420ms;

    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;

    color-scheme: light;
  }
}

/* ============================================================================
   3. THEMES
   The site defaults to Midnight Blue. JS changes data-theme on <html>.
   Supported values: light, dark, sepia, midnight, rose, system.
============================================================================ */
@layer theme {
  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #171615;
    --paper-soft: #1d1b19;
    --surface: #211f1d;
    --surface-soft: #2a2724;
    --surface-glass: rgb(33 31 29 / .86);
    --ink: #f2eee7;
    --ink-soft: #c7c0b6;
    --ink-faint: #a39a8f;
    --line: #403b35;
    --line-strong: #595249;
    --accent-en: #8f9bd4;
    --accent-en-ink: #b8c0ed;
    --accent-ro: #df877d;
    --accent-ro-ink: #f1aaa2;
    --accent-gold: #d7b579;
    --accent-gold-ink: #e8c992;
    --success: #74bca4;
    --focus: #72a7ff;
    --selection: #51483f;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .25);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / .30);
    --shadow-md: 0 8px 28px rgb(0 0 0 / .38);
    --shadow-lg: 0 20px 65px rgb(0 0 0 / .50);
  }

  html[data-theme="sepia"] {
    color-scheme: light;
    --paper: #f4ecdd;
    --paper-soft: #eee2d0;
    --surface: #fbf5e9;
    --surface-soft: #e8dbc7;
    --surface-glass: rgb(251 245 233 / .86);
    --ink: #2d2118;
    --ink-soft: #665143;
    --ink-faint: #8c7563;
    --line: #d6c4aa;
    --line-strong: #bca58a;
    --accent-en: #40536a;
    --accent-en-ink: #293b51;
    --accent-ro: #8b4035;
    --accent-ro-ink: #682b24;
    --accent-gold: #94703d;
    --accent-gold-ink: #6d4f29;
    --selection: #dfceb1;
  }

  html[data-theme="midnight"] {
    color-scheme: dark;
    --paper: #0e1520;
    --paper-soft: #131c29;
    --surface: #172231;
    --surface-soft: #1d2a3b;
    --surface-glass: rgb(23 34 49 / .88);
    --ink: #edf3f8;
    --ink-soft: #c0ccd8;
    --ink-faint: #8d9bab;
    --line: #334355;
    --line-strong: #4b5d71;
    --accent-en: #8ea9e7;
    --accent-en-ink: #b9cbf4;
    --accent-ro: #e38c83;
    --accent-ro-ink: #f2aea8;
    --accent-gold: #d5b77b;
    --accent-gold-ink: #e9d29d;
    --selection: #31415a;
  }

  html[data-theme="rose"] {
    color-scheme: light;
    --paper: #fffafb;
    --paper-soft: #fff2f4;
    --surface: #ffffff;
    --surface-soft: #f7e4e7;
    --surface-glass: rgb(255 255 255 / .88);
    --ink: #24191c;
    --ink-soft: #665257;
    --ink-faint: #8c767d;
    --line: #e7d3d7;
    --line-strong: #d2b8bd;
    --accent-en: #53617f;
    --accent-en-ink: #35425f;
    --accent-ro: #a34654;
    --accent-ro-ink: #7d2f3c;
    --accent-gold: #96733f;
    --accent-gold-ink: #6d512b;
    --selection: #f1dce1;
  }

  /* "system" is opt-in, never the default. */
  html[data-theme="system"] {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
      --paper: #171615;
      --paper-soft: #1d1b19;
      --surface: #211f1d;
      --surface-soft: #2a2724;
      --surface-glass: rgb(33 31 29 / .86);
      --ink: #f2eee7;
      --ink-soft: #c7c0b6;
      --ink-faint: #a39a8f;
      --line: #403b35;
      --line-strong: #595249;
      --accent-en: #8f9bd4;
      --accent-en-ink: #b8c0ed;
      --accent-ro: #df877d;
      --accent-ro-ink: #f1aaa2;
      --accent-gold: #d7b579;
      --accent-gold-ink: #e8c992;
      --focus: #72a7ff;
      --selection: #51483f;
    }
  }
}

/* ============================================================================
   4. BASE
============================================================================ */
@layer base {
  html {
    background: var(--paper);
    color: var(--ink);
  }

  body {
    min-block-size: 100svh;
    background:
      radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-ro) 5%, transparent), transparent 28rem),
      radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent-en) 5%, transparent), transparent 30rem),
      var(--paper);
    color: var(--ink);
    font-family: var(--font-reading);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    font-kerning: normal;
    font-synthesis: style;
    font-optical-sizing: auto;
    hanging-punctuation: first last;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
  }

  ::selection {
    background: var(--selection);
    color: var(--ink);
  }

  :where(p, li, dd, blockquote) {
    hyphens: auto;
    -webkit-hyphens: auto;
    orphans: 3;
    widows: 3;
  }

  :where(p, li) { text-wrap: pretty; }

  a {
    color: var(--accent-en);
    text-decoration: none;
    transition: color var(--fast) var(--ease), opacity var(--fast) var(--ease);
  }

  a:hover { color: var(--accent-en-ink); }

  :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--line);
    margin-block: var(--space-xl);
  }

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

  pre {
    overflow: auto;
    padding: var(--space-sm);
    background: #171513;
    color: #f7f2e9;
    border-radius: var(--radius-md);
  }

  /* Generic XML-rendered text hook. See §14. */
  .xml-text,
  [data-xml-text="true"] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
  }
}

/* ============================================================================
   5. TYPOGRAPHY
============================================================================ */
@layer typography {
  :where(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: -.015em;
    text-wrap: balance;
    color: var(--ink);
  }

  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
  h5 { font: 600 var(--fs-sm)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  h6 { font: 600 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

  html[data-font="cormorant"] {
    --font-display: "Cormorant Garamond", "EB Garamond", serif;
    --font-reading: "Cormorant Garamond", "EB Garamond", serif;
  }
  html[data-font="ebgaramond"] {
    --font-display: "EB Garamond", "Cormorant Garamond", serif;
    --font-reading: "EB Garamond", "Cormorant Garamond", serif;
  }
  html[data-font="newsreader"] {
    --font-display: "Newsreader", serif;
    --font-reading: "Newsreader", serif;
  }
  html[data-font="literata"] {
    --font-display: "Literata", serif;
    --font-reading: "Literata", serif;
  }
  html[data-font="crimson"] {
    --font-display: "Crimson Pro", serif;
    --font-reading: "Crimson Pro", serif;
  }
  html[data-font="source"] {
    --font-display: "Source Serif 4", serif;
    --font-reading: "Source Serif 4", serif;
  }

  .display {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    max-inline-size: 14ch;
  }

  .site-title { font-family: var(--font-display); font-size: var(--fs-2xl); }
  .section-title { font-family: var(--font-display); font-size: var(--fs-2xl); }
  .work-title { font-family: var(--font-display); font-size: var(--fs-3xl); }
  .poem-title, .chapter-title { font-family: var(--font-display); font-size: var(--fs-2xl); }
  .book-title { font-family: var(--font-display); font-size: var(--fs-xl); }

  .eyebrow, .kicker, .meta, .label, .nav-label {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: .10em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .eyebrow, .kicker { color: var(--accent-ro-ink); }

  .lead {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.35;
    max-inline-size: 48ch;
  }

  .body-copy { max-inline-size: var(--measure); }

  .small-print {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-faint);
  }

  .dropcap::first-letter,
  .drop-cap::first-letter {
    float: inline-start;
    font-family: var(--font-display);
    font-size: 4.4em;
    line-height: .78;
    font-weight: 600;
    padding-inline-end: .08em;
    padding-block-start: .04em;
    color: var(--accent-en);
  }

  .small-caps { font-variant-caps: all-small-caps; letter-spacing: .04em; }
  .oldstyle-figures { font-variant-numeric: oldstyle-nums proportional-nums; }
  .tabular-figures { font-variant-numeric: tabular-nums lining-nums; }
  .lining-figures { font-variant-numeric: lining-nums proportional-nums; }
  .no-hyphen { hyphens: none; }
}

/* ============================================================================
   6. BILINGUAL SYSTEM
============================================================================ */
@layer bilingual {
  [lang] {
    font-feature-settings: "liga" 1, "kern" 1, "locl" 1;
  }

  .lang-content { position: relative; }

  .lang-block {
    animation: lang-fade var(--motion) var(--ease);
  }

  .lang-block[hidden] { display: none; }

  @keyframes lang-fade {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
  }

  .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    box-shadow: var(--shadow-xs);
  }

  .lang-switch button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    padding: .34em .68em;
    font: inherit;
    letter-spacing: inherit;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }

  .lang-switch button[aria-pressed="true"]:first-child {
    background: color-mix(in srgb, var(--accent-en) 13%, transparent);
    color: var(--accent-en);
  }

  .lang-switch button[aria-pressed="true"]:last-child {
    background: color-mix(in srgb, var(--accent-ro) 13%, transparent);
    color: var(--accent-ro);
  }

  .lang-switch button + button {
    border-inline-start: 1px solid var(--line-strong);
  }

  /* "The Seam" — retained from sample_cl, but made quieter. */
  .seam {
    inline-size: 2px;
    block-size: 100%;
    min-block-size: 3rem;
    justify-self: center;
    background: linear-gradient(180deg, var(--accent-en), var(--accent-ro));
    border-radius: var(--pill);
  }

  .bilingual-pair {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  .bilingual-side {
    min-inline-size: 0;
  }

  .bilingual-side[lang="en"] a { color: var(--accent-en); }
  .bilingual-side[lang="ro"] a { color: var(--accent-ro); }

  .lang-tag {
    display: inline-block;
    margin-block-end: var(--space-xs);
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  @media (min-width: 768px) {
    .bilingual-pair {
      grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
      align-items: start;
    }
  }

  @media (max-width: 767px) {
    .seam {
      inline-size: 100%;
      block-size: 2px;
      min-block-size: 0;
      margin-block: var(--space-sm);
    }
  }
}

/* ============================================================================
   7. LAYOUT
============================================================================ */
@layer layout {
  .site-shell {
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
  }

  .site-main { flex: 1 0 auto; }

  .container,
  .wrap {
    inline-size: var(--page-frame-inline);
    margin-inline: auto;
  }

  .container-wide,
  .wrap-wide {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide));
    margin-inline: auto;
  }

  .container-narrow,
  .reading-column {
    inline-size: min(100%, var(--measure-reading));
    margin-inline: auto;
  }

  .narrow-column {
    inline-size: min(100%, var(--measure-narrow));
    margin-inline: auto;
  }

  .section { padding-block: var(--section-space); }
  .section-tight { padding-block: clamp(2rem, 4vw, 4rem); }

  .section-full {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .stack-tight { gap: var(--space-xs); }
  .stack-loose { gap: var(--space-xl); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
  }

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

  .grid {
    display: grid;
    gap: var(--space-lg);
  }

  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr));
  }

  .grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }

  .grid-12 {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

  .col-span-full { grid-column: 1 / -1; }

  .split {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(16rem,.85fr);
    gap: clamp(2rem,6vw,6rem);
    align-items: start;
  }

  .sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(14rem,20rem);
    gap: clamp(2rem,5vw,5rem);
    align-items: start;
  }

  .sticky {
    position: sticky;
    inset-block-start: 1rem;
  }

  .full-bleed {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .aspect-banner { aspect-ratio: 1832 / 484; }
  .aspect-video { aspect-ratio: 16 / 9; }
  .aspect-square { aspect-ratio: 1; }
}

/* ============================================================================
   8. HEADER / NAV / HERO
============================================================================ */
@layer components {
  .skip-link {
    position: fixed;
    z-index: var(--z-toast);
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    transform: translateY(-160%);
    padding: .75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: transform var(--fast) var(--ease);
  }

  .skip-link:focus { transform: none; }

  :root { --header-clearance: 4.5rem; }

  body { padding-block-start: var(--header-clearance); }

  .site-header {
    position: fixed;
    inset-block-start: .8rem;
    inset-inline-start: 50%;
    inline-size: var(--page-frame-inline);
    transform: translateX(-50%);
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--surface-glass) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgb(0 0 0 / .085), 0 1px 6px rgb(0 0 0 / .055);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    overflow: visible;
  }

  .site-nav {
    min-block-size: 3.35rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .55rem;
  }

  .brand {
    order: 3;
    margin-inline-start: auto;
    display: inline-flex;
    flex-direction: column;
    gap: .04rem;
    padding-inline-start: .55rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .brand-mark {
    font-family: var(--font-display);
    font-size: clamp(1.28rem, 1.05rem + .35vw, 1.65rem);
    letter-spacing: .025em;
    line-height: .95;
  }

  .brand-sub {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .095em;
    text-transform: uppercase;
  }

  .nav-links {
    order: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .12rem;
    min-inline-size: 0;
  }

  .nav-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.2rem;
    padding: .28rem .56rem;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: .67rem;
    letter-spacing: .07em;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: .48rem;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }

  .nav-link:hover,
  .nav-link[aria-current="page"] {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
  }

  .toolbar {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .35rem;
  }

  .hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(1rem,2.5vw,2.5rem);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(18rem,.9fr);
    gap: clamp(1.5rem,4vw,3rem);
    align-items: end;
  }

  .hero h1 {
    margin-block: .45rem 1rem;
  }

  .hero-art {
    position: relative;
    overflow: hidden;
    background: #171513;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .hero-art img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .hero-art--banner {
    aspect-ratio: 1832 / 484;
  }

  .art-caption {
    margin-block-start: .65rem;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    line-height: 1.4;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-md);
  }
}

/* ============================================================================
   9. LITERARY CONTENT
============================================================================ */
@layer components {
  .literary-work {
    container-type: inline-size;
    container-name: literary;
  }

  .work-header {
    display: grid;
    gap: .9rem;
    margin-block-end: clamp(2rem,5vw,4rem);
  }

  .work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--ink-faint);
  }

  .work-text,
  .prose,
  .essay,
  .article {
    max-inline-size: var(--measure-reading);
    margin-inline: auto;
  }

  .work-text > * + *,
  .prose > * + *,
  .essay > * + *,
  .article > * + * {
    margin-block-start: 1.15em;
  }

  /*
  XML text preservation:
  - Use textContent when importing XML.
  - Put the resulting text in an element with .xml-text or data-xml-text=true.
  - Newlines in XML are rendered as actual line breaks.
  - Browser soft wrapping still occurs when the line is too long.
  - No <br> insertion is necessary.
  */
  /* Disclaimer: preserve a clear empty-line measure between the title and body. */
  #disclaimer-copy {
    margin-block-start: 2.2em;
  }

  .prose,
  .essay,
  .article,
  .work-text {
    white-space: normal;
  }

  .prose .xml-text,
  .essay .xml-text,
  .article .xml-text,
  .work-text .xml-text {
    white-space: pre-line;
  }

  .poem,
  .verse {
    max-inline-size: var(--measure-narrow);
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.15rem,1rem + .35vw,1.48rem);
    line-height: var(--lh-poetry);
    text-wrap: wrap;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .verse--left { text-align: start; margin-inline: 0; }

  .poem-line {
    white-space: pre-wrap;
  }

  .poem-stanza,
  .verse .stanza {
    break-inside: avoid;
    margin-block-end: 1.55em;
  }

  .poem-stanza:last-child { margin-block-end: 0; }

  #record-text > p {
    max-inline-size: var(--measure-reading);
    margin-block: 0 1.35em;
  }
  #record-text > p:last-child { margin-block-end: 0; }

  #record-text.record-text--placeholder {
    min-block-size: min(42vh, 24rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-inline: auto;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.45;
  }

  #record-text.record-text--placeholder > p {
    max-inline-size: 42ch;
    margin-inline: auto;
    text-align: center;
  }

  .poem-subtitle {
    margin-block-end: var(--space-lg);
    color: var(--ink-faint);
    font-style: italic;
  }

  .prose p,
  .essay p,
  .article p {
    max-inline-size: var(--measure-reading);
    margin-block-end: 1.15em;
  }

  .prose h2,
  .essay h2,
  .article h2 {
    margin-block: 2.5em .75em;
    font-size: var(--fs-xl);
    break-after: avoid;
  }

  .prose h3,
  .essay h3,
  .article h3 {
    margin-block: 2em .65em;
    font-size: var(--fs-lg);
    break-after: avoid;
  }

  .epigraph {
    max-inline-size: 34ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-style: italic;
    text-align: center;
    break-inside: avoid;
  }

  .epigraph cite {
    display: block;
    margin-block-start: .75rem;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--ink-faint);
  }

  blockquote,
  .pull-quote {
    max-inline-size: var(--measure);
    margin-block: var(--space-lg);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--accent-en);
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent-en) 7%, transparent), transparent 68%);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-style: italic;
    line-height: 1.35;
    break-inside: avoid;
  }

  blockquote footer {
    margin-block-start: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--ink-faint);
  }

  .figure {
    margin-block: var(--space-xl);
    break-inside: avoid;
  }

  .figure img {
    inline-size: 100%;
    border-radius: var(--radius-md);
  }

  .figure figcaption,
  .art-caption {
    color: var(--ink-faint);
  }

  .figure figcaption {
    margin-block-start: .65rem;
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr));
    gap: var(--space-xs);
  }

  .gallery-item {
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    break-inside: avoid;
  }

  .gallery-item img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .chapters {
    display: grid;
    gap: clamp(3rem,7vw,7rem);
  }

  .chapter {
    container-type: inline-size;
    container-name: chapter;
    break-inside: avoid;
  }

  .chapter-media {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
  }

  .chapter-media img {
    inline-size: 100%;
    border-radius: var(--radius-md);
  }
}

/* ============================================================================
   10. BOOKS / COMMERCE / CARDS / FORMS
============================================================================ */
@layer components {
  .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr));
    gap: var(--space-lg);
  }

  .book-card,
  .card,
  .support-panel {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    break-inside: avoid;
  }

  .book-card {
    display: flex;
    flex-direction: column;
    min-block-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
  }

  .book-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .book-cover {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: linear-gradient(160deg,var(--accent-en),var(--accent-ro));
  }

  .book-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .book-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
  }

  .book-actions { margin-block-start: auto; padding-block-start: var(--space-xs); }

  .card {
    padding: clamp(1rem,2.5vw,1.5rem);
    border-radius: var(--radius-md);
  }

  .card-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
  }

  .tag,
  .badge,
  .chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-block-size: 1.75rem;
    padding: .25em .7em;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .tag--poetry { border-color: var(--accent-en); color: var(--accent-en); }
  .tag--prose { border-color: var(--accent-ro); color: var(--accent-ro); }
  .tag--essay { border-color: var(--accent-gold); color: var(--accent-gold-ink); }

  .badge-accent {
    border-color: var(--accent-ro);
    background: color-mix(in srgb,var(--accent-ro) 8%,transparent);
    color: var(--accent-ro-ink);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: 2.75rem;
    padding: .68em 1.1em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform var(--fast) var(--ease),
                background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
  }

  .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  .btn-primary:hover {
    background: var(--accent-en-ink);
    border-color: var(--accent-en-ink);
    color: #fff;
  }

  .btn-commerce {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #241a0e;
  }

  .btn-commerce:hover {
    background: var(--accent-gold-ink);
    border-color: var(--accent-gold-ink);
    color: #fff;
  }

  .btn-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
  }

  .price,
  .price-tag {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 600;
  }

  .price-tag {
    font-size: var(--fs-xl);
    color: var(--accent-gold-ink);
  }

  .price-tag small { font-size: .5em; color: var(--ink-faint); }

  .support-panel {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
  }

  .form-grid {
    display: grid;
    gap: var(--space-sm);
  }

  .field {
    display: grid;
    gap: .4rem;
  }

  .field label {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: .68rem .78rem;
    border: 1px solid var(--line-strong);
    border-radius: .75rem;
    background: var(--surface);
    color: var(--ink);
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    min-block-size: 2.55rem;
    min-inline-size: 10.2rem;
    padding: .46rem 2.1rem .46rem .72rem;
    border: 1px solid color-mix(in srgb, var(--line-strong) 88%, var(--accent-en) 12%);
    border-radius: .55rem;
    background-color: var(--surface);
    background-image: linear-gradient(45deg, transparent 50%, var(--accent-en) 50%), linear-gradient(135deg, var(--accent-en) 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 2px 7px rgb(0 0 0 / .035);
    font-size: .92rem;
    line-height: 1.25;
    font-family: var(--font-ui);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
    cursor: pointer;
  }

  .demo-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .7rem .8rem !important;
  }

  .demo-toolbar label {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem !important;
    white-space: nowrap;
  }

  .demo-toolbar select {
    min-inline-size: 10rem;
    inline-size: auto;
  }

  select:hover {
    border-color: var(--accent-en);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 5px 18px rgb(57 67 111 / .12);
  }

  select:focus-visible {
    transform: translateY(-1px);
  }

  select option {
    background: var(--surface);
    color: var(--ink);
    font-size: 1.04rem;
    line-height: 1.35;
  }

  select[data-settings-font-select] option[value="cormorant"] { font-family: "Cormorant Garamond", serif; }
  select[data-settings-font-select] option[value="ebgaramond"] { font-family: "EB Garamond", serif; }
  select[data-settings-font-select] option[value="newsreader"] { font-family: "Newsreader", serif; }
  select[data-settings-font-select] option[value="literata"] { font-family: "Literata", serif; }
  select[data-settings-font-select] option[value="crimson"] { font-family: "Crimson Pro", serif; }
  select[data-settings-font-select] option[value="source"] { font-family: "Source Serif 4", serif; }

  .field textarea {
    min-block-size: 9rem;
    resize: vertical;
  }

  .field small {
    color: var(--ink-faint);
    font-size: var(--fs-xs);
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .table-editorial th,
  .table-editorial td {
    padding: .75rem 1rem;
    border-block-end: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
  }

  .table-editorial th {
    background: var(--surface-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .table-editorial tr:hover td {
    background: color-mix(in srgb,var(--ink) 3%,transparent);
  }

  .notice {
    padding: 1rem 1.15rem;
    border-inline-start: 4px solid var(--accent-ro);
    background: color-mix(in srgb,var(--accent-ro) 8%,transparent);
    break-inside: avoid;
  }

  .toc {
    display: grid;
    gap: .15rem;
  }

  .toc a {
    display: block;
    padding: .45rem 0;
    text-decoration: none;
  }
}

/* ============================================================================
   11. FOOTER / PAGINATION / SITE UTILITIES
============================================================================ */
@layer components {
  .site-footer,
  .footer {
    margin-block-start: var(--space-3xl);
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: var(--fs-sm);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: var(--space-lg);
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .pagination a,
  .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.3em;
    min-block-size: 2.3em;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .pagination [aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  .rule { border-block-start: 1px solid var(--line); }

  .title-page {
    min-block-size: 75svh;
    display: grid;
    place-items: center;
    text-align: center;
    break-after: page;
  }

  .half-title {
    min-block-size: 45svh;
    display: grid;
    place-items: center;
    text-align: center;
    break-after: page;
  }

  .colophon {
    padding-block-start: var(--space-xl);
    color: var(--ink-faint);
    font-size: var(--fs-xs);
    break-before: page;
  }

  .running-header { position: running(page-header); }
  .running-footer { position: running(page-footer); }
}

/* ============================================================================
   12. CONTAINER QUERIES
============================================================================ */
@layer responsive {
  .literary-work,
  .card-grid,
  .chapter {
    container-type: inline-size;
  }

  .card-grid { container-name: card-grid; }

  @container literary (min-width: 48rem) {
    .bilingual-pair {
      grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    }
  }

  @container card-grid (min-width: 32rem) {
    .book-card {
      display: grid;
      grid-template-columns: 7rem 1fr;
    }
  }

  @container card-grid (min-width: 48rem) {
    .book-card {
      grid-template-columns: 9rem 1fr;
      padding: var(--space-lg);
      gap: var(--space-md);
    }
  }

  @container chapter (min-width: 42rem) {
    .chapter-media:has(> :nth-child(2)) {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }
}

/* ============================================================================
   13. DEVICE / VIEWPORT SUPPORT
   These classes are for conditional content, not the main layout engine.
============================================================================ */
@layer responsive {
  .desktop, .desktop-xl, .desktop-lg, .desktop-md, .desktop-sm,
  .tablet, .tablet-lg, .tablet-md, .tablet-sm,
  .phone, .phone-lg, .phone-md, .phone-sm,
  .watch, .tv, .kiosk {
    display: none;
  }

  @media (min-width: 1600px) {
    .desktop-xl { display: block; }
  }

  @media (min-width: 1280px) and (max-width: 1599.98px) {
    .desktop-lg { display: block; }
  }

  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .desktop-md { display: block; }
  }

  @media (min-width: 900px) and (max-width: 1023.98px) {
    .desktop-sm { display: block; }
  }

  @media (min-width: 768px) and (max-width: 899.98px) {
    .tablet-lg { display: block; }
  }

  @media (min-width: 640px) and (max-width: 767.98px) {
    .tablet-md { display: block; }
  }

  @media (min-width: 520px) and (max-width: 639.98px) {
    .tablet-sm { display: block; }
  }

  @media (min-width: 420px) and (max-width: 519.98px) {
    .phone-lg { display: block; }
  }

  @media (min-width: 360px) and (max-width: 419.98px) {
    .phone-md { display: block; }
  }

  @media (max-width: 359.98px) {
    .phone-sm { display: block; }
  }

  @media (max-width: 767px) {
    :root { --gutter: clamp(.85rem,4vw,1.25rem); }

    .hero-grid,
    .split,
    .sidebar-layout,
    .grid-2,
    .grid-3,
    .footer-grid {
      grid-template-columns: 1fr;
    }

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

    .col-span-full,
    .grid-12 > * {
      grid-column: 1 / -1;
    }


    .site-header {
      inset-block-start: .45rem;
      inline-size: min(calc(100% - 1rem), 48rem);
      border-radius: .85rem;
    }

    .site-nav {
      align-items: center;
      flex-wrap: wrap;
      min-block-size: 3.15rem;
      padding: .3rem .45rem;
    }

    .brand { order: 1; margin-inline-start: 0; }
    .mobile-menu-toggle { order: 2; margin-inline-start: auto; }

    .nav-links {
      inline-size: 100%;
      order: 4;
    }

    .toolbar { order: 3; margin-inline-start: 0; }
    .demo-toolbar { align-items: stretch; }
    .demo-toolbar label { flex: 1 1 12rem; justify-content: space-between; }
    .demo-toolbar select { min-inline-size: 8.5rem; }

    .hero {
      padding-block: 2rem;
    }

    .hero-art--banner {
      aspect-ratio: 2.15 / 1;
    }

    .book-grid {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }

  @media (max-width: 480px) {
    .book-grid { grid-template-columns: 1fr; }
    .display { font-size: clamp(2.35rem,13vw,3.4rem); }
    .nav-links { gap: .15rem .35rem; }
  }

  @media (min-width: 768px) {
    .grid-12 { grid-template-columns: repeat(8,minmax(0,1fr)); }
  }

  @media (min-width: 1024px) {
    .grid-12 { grid-template-columns: repeat(12,minmax(0,1fr)); }
    :root { --container-max: 78rem; }
  }

  @media (min-width: 1440px) {
    :root { --container-max: 82rem; }
  }

  @media (min-width: 1920px) {
    :root {
      --container-max: 92rem;
      --gutter: 3rem;
    }
  }

  @media (orientation: landscape) and (max-height: 600px) {
    .hero { padding-block: 1.5rem; }
    .section-full { min-block-size: auto; }
  }

  @media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .lang-switch button {
      min-block-size: 2.9rem;
    }

    .book-card:hover,
    .btn:hover {
      transform: none;
    }
  }

  /* Safe-area support for edge-to-edge phones/foldables. */
  @supports (padding: env(safe-area-inset-left)) {
    .site-header,
    .site-footer {
      padding-inline-start: max(var(--gutter), env(safe-area-inset-left));
      padding-inline-end: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}

/* ============================================================================
   14. XML LINE-PRESERVATION CONTRACT
============================================================================ */
@layer components {
  /*
    IMPORTANT:
    CSS can preserve newlines that arrive in the DOM. It cannot manufacture
    semantic line structure out of an XML string after a JS routine has already
    normalized the string to one line.

    Recommended JS:
      target.textContent = xmlNode.textContent;

    Recommended markup:
      <div class="xml-text" data-xml-text="true"></div>

    Recommended styles:
      white-space: pre-line  -> prose/essay/article
      white-space: pre-wrap  -> poetry / exact whitespace preservation

    This deliberately avoids <br>. The source XML remains the authority.
  */

  .xml-prose,
  .xml-essay,
  .xml-article {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .xml-poem,
  .xml-verse {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /*
    If XML indentation itself should NOT become visible, use textContent from
    a clean text node or trim only the outer boundary in JS. Do not globally
    collapse whitespace with CSS because that would destroy poem lineation.
  */
}

/* ============================================================================
   15. ACCESSIBILITY / UTILITIES
============================================================================ */
@layer accessibility {
  .sr-only,
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .text-end { text-align: end; }
  .mx-auto { margin-inline: auto; }
  .text-muted { color: var(--ink-soft); }
  .text-faint { color: var(--ink-faint); }
  .font-display { font-family: var(--font-display); }
  .font-reading { font-family: var(--font-reading); }
  .font-ui { font-family: var(--font-ui); }
  .font-mono { font-family: var(--font-mono); }
  .balance { text-wrap: balance; }
  .pretty { text-wrap: pretty; }
  .measure { max-inline-size: var(--measure); }
  .measure-narrow { max-inline-size: var(--measure-narrow); }
  .keep-together,
  .avoid-break { break-inside: avoid; }
  .page-break-before { break-before: page; }
  .page-break-after { break-after: page; }
  .screen-only { display: block; }
  .print-only { display: none !important; }

  @media (prefers-contrast: more) {
    :root {
      --line: #777;
      --line-strong: #444;
      --ink-soft: var(--ink);
    }

    .btn,
    .card,
    .book-card,
    .lang-switch,
    .field input,
    .field select,
    .field textarea {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .btn,
    .book-card,
    .field input,
    .field select,
    .field textarea {
      border: 1px solid ButtonText;
    }

    .btn-primary,
    .lang-switch button[aria-pressed="true"] {
      background: ButtonFace;
      color: ButtonText;
    }

    a { color: LinkText; }
  }
}

/* ============================================================================
   16. PRINT / PUBLISHING
============================================================================ */
@layer print {
  @page {
    size: A4;
    margin: 20mm 18mm 22mm;
  }

  @page :first {
    margin-block-start: 18mm;
  }

  @page book {
    size: 6in 9in;
    margin: 18mm 16mm 20mm;
  }

  @page letter {
    size: Letter;
    margin: .72in .72in .82in;
  }

  @media print {
  body { padding-block-start: 0; }
  .site-header { position: static; transform: none; inline-size: auto; box-shadow: none; border-radius: 0; }
    :root {
      --paper: #fff;
      --paper-soft: #fff;
      --surface: #fff;
      --surface-soft: #f5f5f5;
      --ink: #000;
      --ink-soft: #222;
      --ink-faint: #444;
      --line: #888;
      --line-strong: #666;
      --accent-en: #000;
      --accent-ro: #000;
      --accent-gold: #000;
      --shadow-xs: none;
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
    }

    html, body {
      background: #fff !important;
      color: #000 !important;
    }

    body {
      min-block-size: auto;
      font-size: 10.5pt;
      line-height: 1.45;
      font-family: var(--font-reading), Georgia, serif;
    }

    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
      box-shadow: none !important;
    }

    .screen-only,
    .no-print,
    .site-header,
    .nav,
    .nav-links,
    .toolbar,
    .skip-link,
    .lang-switch,
    .btn,
    form,
    .support-panel,
    .pagination {
      display: none !important;
    }

    .print-only { display: block !important; }

    .container,
    .container-wide,
    .container-narrow,
    .wrap,
    .wrap-wide,
    .reading-column,
    .narrow-column,
    .work-text,
    .prose,
    .essay,
    .article,
    .poem,
    .verse {
      inline-size: auto;
      max-inline-size: none;
      margin-inline: 0;
    }

    .section,
    .section-tight,
    .hero {
      padding-block: 0 1rem;
    }

    .hero-art,
    .card,
    .book-card,
    .notice {
      border-radius: 0;
    }

    .hero-art img,
    .book-cover img,
    .figure img {
      max-inline-size: 100%;
      break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
      color: #000;
      break-after: avoid;
      page-break-after: avoid;
    }

    h1 { font-size: 22pt; }
    h2 { font-size: 17pt; }
    h3 { font-size: 14pt; }

    p, li {
      orphans: 3;
      widows: 3;
    }

    figure,
    figcaption,
    .figure,
    .book-card,
    .chapter,
    .poem-stanza,
    blockquote,
    .notice,
    table,
    .card,
    .verse {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .poem,
    .verse {
      font-size: 11pt;
      line-height: 1.7;
      text-align: start;
    }

    .chapter { break-before: page; }
    .chapter:first-child { break-before: auto; }

    .print-break-before {
      break-before: page;
      page-break-before: always;
    }

    a {
      color: #000 !important;
      text-decoration: none !important;
    }

    a[href^="http"]:not(.no-print-href)::after {
      content: " (" attr(href) ")";
      font-family: var(--font-mono);
      font-size: .75em;
      overflow-wrap: anywhere;
    }

    a[href^="#"]::after,
    a.no-print-href::after {
      content: "";
    }

    [data-print-decorative="true"],
    .hero-bg-texture {
      display: none !important;
    }

    .art-caption,
    .figure figcaption {
      color: #333 !important;
    }

    .running-header {
      position: running(page-header);
    }

    .running-footer {
      position: running(page-footer);
    }

    @page book {
      @top-center {
        content: element(page-header);
        font-family: var(--font-mono);
        font-size: 7.5pt;
      }

      @bottom-center {
        content: element(page-footer);
        font-family: var(--font-mono);
        font-size: 7.5pt;
      }
    }
  }
}