/* ============================================================================
   AFFABLE DISSONANCES — SITE DRAFT EXTENSIONS
   Non-destructive first-draft surface built on the Master CSS system.
   ============================================================================ */
@layer components {
  .site-header { background: color-mix(in srgb, var(--surface-glass) 92%, transparent); }
  .site-nav { min-height: 4.5rem; }
  .brand-mark { letter-spacing: .035em; }
  .nav-links { gap: .2rem .35rem; }
  .nav-link { border: 1px solid transparent; transition: all var(--fast) var(--ease); font-size: .89rem; }
  .nav-link:hover { border-color: var(--line); }

  .home-hero { padding-block: clamp(2.1rem, 4.5vw, 4.2rem) clamp(3rem, 7vw, 7rem); }
  .home-hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(16rem,.75fr); gap:clamp(2rem,6vw,7rem); align-items:end; }
  .home-display { max-inline-size: 12ch; font-size:var(--fs-2xl); line-height:.92; letter-spacing:-.03em; }
  .home-subline { max-inline-size:58ch; margin-block-start:1.4rem; color:var(--ink-soft); font-size:clamp(1.12rem, 1rem + .3vw, 1.45rem); }
  .seam-mark { position:relative; min-height:18rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; background:linear-gradient(145deg, color-mix(in srgb,var(--accent-en) 7%,var(--surface)), var(--surface) 44%, color-mix(in srgb,var(--accent-ro) 7%,var(--surface))); box-shadow:var(--shadow-lg); }
  .seam-mark::before,.seam-mark::after { content:""; position:absolute; block-size:140%; inline-size:1px; background:linear-gradient(180deg,transparent,var(--accent-en),var(--accent-ro),transparent); transform:rotate(28deg); opacity:.7; }
  .seam-mark::after { transform:rotate(-28deg); opacity:.28; }
  .seam-mark--elephant { min-height:18rem; background:transparent; box-shadow:none; border:0; border-radius:0; overflow:visible; }
  /* The elephant artwork is the focal visual here; do not overlay the generic Seam cross-lines. */
  .seam-mark--elephant::before,
  .seam-mark--elephant::after { display:none; }
  .home-elephant-art {
    position:relative;
    z-index:1;
    display:block;
    inline-size:100%;
    block-size:100%;
    max-block-size:22rem;
    object-fit:contain;
    object-position:center bottom;
    mix-blend-mode:normal;
  }
  @media (max-width: 780px) {
    .seam-mark--elephant { min-height:15rem; border:0; border-radius:0; overflow:visible; }
    .home-elephant-art { max-block-size:18rem; }
  }
  .seam-word { position:relative; z-index:2; font-family:var(--font-display); font-size:clamp(2.5rem,6vw,5.5rem); letter-spacing:.08em; text-transform:uppercase; opacity:.9; }

  .section-ornament { display:flex; align-items:center; gap:1rem; margin-block-end:2rem; color:var(--ink-faint); font:500 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
  .section-ornament::after { content:""; flex:1; block-size:1px; background:linear-gradient(90deg,var(--line),transparent); }
  .editorial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:var(--space-lg); }
  .feature-card { position:relative; min-height:auto; overflow:hidden; }
  .feature-card::before { content:""; position:absolute; inset:0 auto 0 0; inline-size:3px; background:linear-gradient(var(--accent-en),var(--accent-ro)); opacity:.7; }
  .feature-card__inner { padding:clamp(1.3rem,2vw,2rem); }
  .feature-card h3 { margin-block:.3rem .7rem; }
  .micro { font:500 var(--fs-2xs)/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
  .muted-line { color:var(--ink-faint); }

  .work-list { display:grid; gap:1px; border-block:1px solid var(--line); background:var(--line); }
  .work-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1rem 1.1rem; background:var(--surface); text-decoration:none; color:inherit; transition:background var(--fast) var(--ease), transform var(--fast) var(--ease); }
  .work-row:hover { background:color-mix(in srgb,var(--accent-en) 4%,var(--surface)); transform:translateX(3px); }
  .work-row__title { font-family:var(--font-display); font-size:1.35rem; }
  .work-row__meta { margin-top:.25rem; color:var(--ink-faint); font:500 var(--fs-2xs)/1.35 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
  .tag--draft { background:color-mix(in srgb,var(--accent-gold) 12%,transparent); color:var(--accent-gold-ink); }
  .tag--archive { background:color-mix(in srgb,var(--accent-ro) 12%,transparent); color:var(--accent-ro-ink); }

  .reading-stage { padding-block:clamp(3rem,7vw,8rem); }
  .reading-stage__header { max-inline-size:58rem; margin-inline:auto; margin-block-end:clamp(2.5rem,6vw,5rem); }
  .reading-stage__header .work-title { max-inline-size:14ch; }
/* Build 1.61 — match the Work-page content start to the About page. */
.reading-stage__header > .eyebrow {
  margin-block-start: 0;
}

  .reading-stage__title-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1rem; }
  .reading-stage__title-row .work-title { margin-block:0; }
  .reading-stage__meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-block-start:1rem; color:var(--ink-faint); font:500 var(--fs-2xs)/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.07em; }
  .reading-stage__meta { flex-direction:column; align-items:flex-start; gap:.55rem; }
  .reading-stage__meta .book-author { display:block; }
  .language-bar { display:flex; justify-content:flex-end; margin-block:1.5rem; }
  .reading-columns { display:grid; gap:clamp(2rem,6vw,6rem); grid-template-columns:minmax(0,1fr); }
  .reading-columns--bilingual { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; }
  .reading-side { min-inline-size:0; }
  .reading-side--ro { border-inline-start:1px solid var(--line); padding-inline-start:clamp(1rem,3vw,3rem); }
  .reading-side--en { padding-inline-end:clamp(1rem,3vw,3rem); }
  .work-status { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border:1px solid var(--line); border-radius:var(--pill); font:500 var(--fs-2xs)/1 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
  .work-status[data-status="published"] { color:var(--success); border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }

  .chapter-index { display:grid; gap:.5rem; margin-block:1.5rem 3rem; }
  .chapter-index a { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.65rem .8rem; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
  .chapter-index a:hover { background:color-mix(in srgb,var(--accent-en) 4%,var(--surface)); }
  .chapter-index small { color:var(--ink-faint); font-family:var(--font-mono); }

  .form-shell { max-inline-size:58rem; margin-inline:auto; }
  .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.2rem; }
  .field { display:grid; gap:.4rem; }
  .field--full { grid-column:1/-1; }
  .field label, .checkbox-row label { font:600 var(--fs-xs)/1.3 var(--font-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
  .field input,.field select,.field textarea { inline-size:100%; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:var(--radius-sm); padding:.8rem .9rem; }
  .field textarea { min-block-size:12rem; resize:vertical; }
  .field input:focus,.field select:focus,.field textarea:focus { outline:3px solid color-mix(in srgb,var(--focus) 28%,transparent); outline-offset:0; }
.honeypot { position:absolute!important; inline-size:1px!important; block-size:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
  .form-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-block-start:1rem; }
  .form-status { min-block-size:1.5rem; color:var(--ink-soft); font-size:var(--fs-sm); }
  .form-status[data-kind="success"] { color:var(--success); }
  .form-status[data-kind="error"] { color:var(--danger); }
  .form-maintenance-message {
    flex: 1 0 100%;
    margin-block-start: .05rem;
    color: var(--danger);
    font: 500 var(--fs-xs)/1.35 var(--font-mono);
    letter-spacing: .015em;
    text-align: end;
  }

  .cookie-banner { position:fixed; inset:auto 1rem 1rem 1rem; z-index:var(--z-overlay); max-inline-size:58rem; margin-inline:auto; border:1px solid var(--line-strong); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(18px); box-shadow:var(--shadow-lg); border-radius:var(--radius-lg); padding:1rem; }
  .cookie-banner[hidden] { display:none; }
  .cookie-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:end; }
  .cookie-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }

  .overlay { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:1rem; background:rgb(0 0 0 / .48); }
  .overlay[hidden] { display:none; }
  .modal { inline-size:min(100%,34rem); border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:1.5rem; }
  .modal h2 { margin-block-end:.75rem; }

  .archive-gate { max-inline-size:34rem; margin:8vh auto; text-align:center; }
  .archive-lock { inline-size:7rem; block-size:7rem; margin:0 auto 1.5rem; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:linear-gradient(145deg,color-mix(in srgb,var(--accent-en) 12%,var(--surface)),var(--surface)); font-size:2rem; }
  .archive-content { display:none; }
  .archive-content[data-unlocked="true"] { display:block; }

  .site-footer { border-block-start:1px solid var(--line); padding-block:2rem; }
  .footer-grid { display:grid; grid-template-columns:1.4fr repeat(2,1fr); gap:1.5rem; }
  .footer-links { display:grid; gap:.35rem; align-content:start; }
  .footer-links a { text-decoration:none; color:var(--ink-soft); }
  .footer-links a:hover { color:var(--ink); }

  .mobile-menu-toggle { display:none; }
  .skip-link { z-index:var(--z-toast); }

  @media (max-width: 900px) {
    .home-hero-grid,.footer-grid { grid-template-columns:1fr; }
    .reading-columns--bilingual { grid-template-columns:1fr; }
    .reading-side--ro { border-inline-start:0; border-block-start:1px solid var(--line); padding-inline:0; padding-block-start:2rem; }
    .reading-side--en { padding-inline:0; }
  }
  @media (max-width: 760px) {
    .nav-links { display:none; }
    .mobile-menu-toggle { display:inline-flex; }
    .site-nav { flex-wrap:wrap; }
    .nav-links.is-open { display:flex; inline-size:100%; padding-block:.5rem; }
    .form-grid { grid-template-columns:1fr; }
    .field--full { grid-column:auto; }
    .cookie-grid { grid-template-columns:1fr; }
    .cookie-actions { justify-content:flex-start; }
  }
}

@layer print {
  @media print {
    .reading-stage { padding-block:0; }
    .cookie-banner,.overlay,.mobile-menu-toggle,.site-header { display:none !important; }
  }
}

@layer components {
  .placeholder-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); max-inline-size:52rem; justify-content:start; }
  .placeholder-tile { overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
  .placeholder-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
  .placeholder-tile img { inline-size:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-soft); }
  .placeholder-tile figcaption { padding:.8rem 1rem 1rem; font-family:var(--font-display); font-size:var(--fs-lg); }
  
  @media (max-width: 520px) { .placeholder-gallery { grid-template-columns:1fr; } }
}





/* ============================================================================
   ITERATION 0.2.4 — GLOBAL FONT PREFERENCE + FLOATING MASTER NAVIGATION
   - The Master CSS Demo is the visual truth source.
   - Production pages inherit the same preference contract and floating shell.
============================================================================ */
@layer theme {
  html[data-font="cormorant"] {
    --font-display: "Cormorant Garamond", "EB Garamond", "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, serif;
    --font-reading: "Cormorant Garamond", "EB Garamond", "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  }
  html[data-font="ebgaramond"] {
    --font-display: "EB Garamond", "Cormorant Garamond", "Newsreader", Georgia, serif;
    --font-reading: "EB Garamond", "Cormorant Garamond", "Newsreader", Georgia, serif;
  }
  html[data-font="newsreader"] {
    --font-display: "Newsreader", "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --font-reading: "Newsreader", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  }
  html[data-font="literata"] {
    --font-display: "Literata", "Newsreader", Georgia, serif;
    --font-reading: "Literata", "Newsreader", Georgia, serif;
  }
  html[data-font="crimson"] {
    --font-display: "Crimson Pro", "Cormorant Garamond", Georgia, serif;
    --font-reading: "Crimson Pro", "Cormorant Garamond", Georgia, serif;
  }
  html[data-font="source"] {
    --font-display: "Source Serif 4", "Newsreader", Georgia, serif;
    --font-reading: "Source Serif 4", "Newsreader", Georgia, serif;
  }
}

@layer components {
  :root {
    --header-clearance: 4.5rem;
    --header-top-gap: .65rem;
  }

  /* The reusable header host reserves the measured header clearance in normal
     document flow. The floating header itself remains fixed, but page content
     therefore begins after the header rather than relying on body padding.
     This is the single responsive entry contract for every page shell. */
  ad-site-header {
    display: block;
    block-size: var(--header-clearance);
    flex: 0 0 var(--header-clearance);
  }

  body { padding-block-start: 0; }

  /* Keep the narrow strip above the floating header opaque. Without this
     shield, scrolled page content can show through between the viewport
     edge and the header's rounded top edge. The shield belongs to the
     reusable header host, so every page using <ad-site-header> gets the
     same protection automatically. */
  ad-site-header::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: calc(var(--header-top-gap) + 2px);
    background: var(--paper);
    pointer-events: none;
    z-index: calc(var(--z-header) - 1);
  }

  .site-header--floating {
    position: fixed;
    inset-block-start: var(--header-top-gap);
    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) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
    border-radius: 1rem;
    box-shadow: 0 10px 34px rgb(0 0 0 / .10), 0 2px 8px rgb(0 0 0 / .05);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }

  .site-header--floating .site-nav {
    min-block-size: 3.25rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .42rem;
  }

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

  .site-header--floating .nav-link {
    min-block-size: 2.05rem;
    padding: .26rem .55rem;
    border: 1px solid transparent;
    border-radius: .42rem;
    font-family: var(--font-mono);
    /* Match the homepage section-ornament reference: “Start anywhere. Regret is optional.” */
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

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

  .site-header--floating .toolbar {
    order: 2;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    gap: .25rem;
  }

  .site-header--floating .lang-switch {
    box-shadow: none;
  }

  .site-header--floating .lang-switch button {
    min-block-size: 1.95rem;
    padding: .4em .72em;
    font-size: .62rem;
  }

  .site-header--floating .brand--right {
    order: 3;
    margin-inline-start: 0;
    display: inline-flex;
    flex-direction: column;
    gap: .02rem;
    padding-block: .04rem;
    padding-inline-start: .72rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    border-inline-start: 1px solid var(--line);
  }

  .site-header--floating .brand-mark {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 1rem + .35vw, 1.55rem);
    letter-spacing: .028em;
    line-height: 1.1;
    display: block;
    padding-block-end: .32em;
  }

  .site-header--floating .brand-sub {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .09em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .site-header--floating .mobile-menu-toggle { display: none; }

  /* Reading progress lives inside the shared menu. It overlays the existing
     header geometry and consumes zero layout height. */
  .site-header-reading-progress {
    --ad-header-reading-progress: 0;
    position: absolute;
    inset-inline: clamp(.7rem, 1.25vw, 1.15rem);
    inset-block-end: .13rem;
    block-size: 2px;
    overflow: hidden;
    border-radius: var(--pill);
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fast) var(--ease);
  }

  .site-header-reading-progress.is-visible {
    opacity: .92;
  }

  .site-header-reading-progress__fill {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    transform: scaleX(var(--ad-header-reading-progress));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--accent-en), var(--accent-ro));
    box-shadow: 0 0 .45rem color-mix(in srgb, var(--accent-en) 42%, transparent);
    transition: transform 90ms linear;
  }

  @media (max-width: 760px) {
    .site-header-reading-progress {
      inset-inline: .62rem;
      inset-block-end: .11rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header-reading-progress,
    .site-header-reading-progress__fill { transition: none; }
  }

  /* Compact controls: keep them elegant and lightweight everywhere. */
  select {
    min-block-size: 1.95rem;
    min-inline-size: 8.4rem;
    padding: .22rem 1.7rem .22rem .58rem;
    border-radius: .42rem;
    font-size: .72rem;
    line-height: 1;
  }
  .demo-toolbar select { min-inline-size: 9rem; }
  .field input, .field select, .field textarea { padding: .64rem .72rem; }

  /* Keep preference controls synchronized when the global font changes. */
  .font-sample,
  [data-font-preview] { transition: font-family var(--fast) var(--ease); }

  @media (max-width: 900px) {
    .site-header--floating { inline-size: min(calc(100% - 1rem), 60rem); }
    .site-header--floating .brand-sub { display: none; }
    .site-header--floating .brand-mark { font-size: 1.12rem; }
  }

  @media (max-width: 760px) {
    .site-header--floating .site-nav { flex-wrap: wrap; }
    .site-header--floating .nav-links { display: none; order: 4; inline-size: 100%; padding-block: .35rem .15rem; }
    .site-header--floating .nav-links.is-open { display: flex; flex-wrap: wrap; }
    .site-header--floating .mobile-menu-toggle {
      display: inline-flex;
      order: 3;
      min-block-size: 1.9rem;
      padding: .26rem .55rem;
      font-size: .65rem;
    }
    .site-header--floating .toolbar { order: 2; margin-inline-start: auto; }
    .site-header--floating .brand--right { order: 1; margin-inline-start: 0; border-inline-start: 0; padding-inline-start: 0; }
  }
}

/* ============================================================================
   ITERATION 0.2.9 — READER SETTINGS / GLOBAL CHROME REFINEMENT
   The settings control is intentionally compact and quiet. The dialog is a
   small anchored reader-preference panel rather than a large generic modal.
============================================================================ */
@layer components {
  /* Compact font-preview controls. */
  select[data-font-select],
  #font {
    font-family: var(--font-reading);
    min-block-size: 2.05rem;
    padding: .28rem 1.65rem .28rem .58rem;
  }

  select[data-font-select] option,
  #font option {
    font-size: 1rem;
    line-height: 1.35;
  }

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

  /* The settings trigger: icon only, quiet, and obviously interactive. */
  .site-header--floating .settings-trigger {
    position: relative;
    inline-size: 1.72rem;
    block-size: 1.72rem;
    min-inline-size: 1.72rem;
    min-block-size: 1.72rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--ink-soft);
    box-shadow: none;
    line-height: 1;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .site-header--floating .settings-trigger:hover,
  .site-header--floating .settings-trigger:focus-visible {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent-en) 62%, var(--line-strong));
    background: color-mix(in srgb, var(--accent-en) 8%, var(--surface));
    transform: translateY(-1px);
  }

  .site-header--floating .settings-trigger svg {
    inline-size: .84rem;
    block-size: .84rem;
    stroke-width: 1.5;
  }

  .site-header--floating .settings-trigger .settings-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Reader settings overlay: subtle veil, anchored panel on desktop. */
  .overlay#site-settings {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: block;
    padding: 0;
    background: rgb(10 13 18 / .18);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    animation: reader-overlay-in 140ms var(--ease);
  }

  .overlay#site-settings[hidden] { display: none; }

  .overlay#site-settings .settings-dialog {
    position: fixed;
    inset-block-start: 4.7rem;
    inset-inline-end: max(1rem, calc((100vw - min(94rem, calc(100vw - 2 * var(--gutter)))) / 2 + 1rem));
    inline-size: min(24rem, calc(100vw - 2rem));
    max-block-size: calc(100svh - 6rem);
    overflow: auto;
    margin: 0;
    padding: 1.05rem 1.05rem .95rem;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: .78rem;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    color: var(--ink);
    box-shadow: 0 24px 60px rgb(0 0 0 / .20), 0 6px 18px rgb(0 0 0 / .10);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    animation: reader-dialog-in 170ms var(--ease);
  }

  .settings-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-block-end: .8rem;
    padding-block-end: .72rem;
    border-block-end: 1px solid var(--line);
  }

  .settings-dialog__header .eyebrow { font-size: .58rem; }

  .settings-dialog__title {
    margin: .18rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 1.15rem + .6vw, 1.95rem);
    font-weight: 500;
    line-height: 1.02;
  }

  .settings-close {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    min-inline-size: 1.55rem;
    min-block-size: 1.55rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-faint);
    font: 400 .78rem/1 var(--font-ui);
  }

  .settings-close:hover,
  .settings-close:focus-visible {
    color: var(--ink);
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
  }

  .settings-grid {
    display: grid;
    gap: .52rem;
  }

  .settings-control {
    display: grid;
    grid-template-columns: 6.3rem minmax(0, 1fr);
    align-items: center;
    gap: .62rem;
  }

  .settings-control > span {
    font-family: var(--font-mono);
    font-size: .59rem;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .settings-dialog select {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 1.95rem;
    padding: .27rem 1.55rem .27rem .52rem;
    border: 1px solid var(--line-strong);
    border-radius: .4rem;
    background: var(--surface);
    color: var(--ink);
    font-size: .72rem;
    line-height: 1.15;
  }

  .settings-dialog select:focus-visible {
    border-color: var(--focus);
    outline: 2px solid color-mix(in srgb, var(--focus) 25%, transparent);
    outline-offset: 1px;
  }

  .settings-dialog select option {
    font-size: 1rem;
    line-height: 1.35;
  }

  .settings-status {
    margin-block-start: .78rem;
    padding: .52rem .62rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
    color: var(--ink-soft);
    font-size: .68rem;
    line-height: 1.4;
  }

  .settings-status strong { color: var(--ink); }

  .settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: .42rem;
    margin-block-start: .72rem;
    padding-block-start: .68rem;
    border-block-start: 1px solid var(--line);
  }

  .settings-actions .btn {
    min-block-size: 1.9rem;
    padding: .28rem .7rem;
    border-radius: .38rem;
    font-size: .68rem;
  }

  @keyframes reader-overlay-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes reader-dialog-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }

  @media (max-width: 760px) {
    .site-header--floating .settings-trigger {
      inline-size: 1.82rem;
      block-size: 1.82rem;
      min-inline-size: 1.82rem;
      min-block-size: 1.82rem;
    }

    .overlay#site-settings .settings-dialog {
      inset-block-start: 4.25rem;
      inset-inline: .75rem;
      inline-size: auto;
      max-block-size: calc(100svh - 5rem);
    }

    .settings-control {
      grid-template-columns: 1fr;
      gap: .22rem;
    }

    .settings-control > span { font-size: .57rem; }
  }
}

@media print {
  .overlay#site-settings { display: none !important; }
  .site-header--floating .settings-trigger { display: none !important; }
}


/* SETTINGS ORDER — icon follows language switch */
@layer components {
  .site-header--floating #header-language + .settings-trigger { order: 2; }
  .site-header--floating .toolbar { gap: .32rem; }
}

/* BLOG SURFACE ------------------------------------------------------------ */
.nav-link--blog { margin-inline-start: .35rem; }
.blog-list { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.blog-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(10rem,20rem); gap: var(--space-lg); padding-block: var(--space-lg); padding-inline: var(--space-lg); border-block-start: 1px solid var(--line); }
.blog-card:first-child { border-block-start: 0; }
.blog-card__title { font-family: var(--font-display); font-size: var(--fs-2xl); margin-block-end: .45rem; }
.blog-card__summary { color: var(--ink-soft); max-inline-size: var(--measure-reading); }
.blog-card__meta { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; margin-block-end: .5rem; }
.blog-card__content-link { display: block; min-inline-size: 0; color: inherit; text-decoration: none !important; border-radius: var(--radius-md); }
.blog-card__content-link:visited { color: inherit; }
.blog-card__content-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.blog-card__media { margin: 0; align-self: start; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-soft); }
.blog-card__media--image { display: grid; place-items: center; aspect-ratio: 4/3; }
.blog-card__media--image img { display: block; inline-size: 100%; block-size: 100%; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.blog-card__media--vector img { object-fit: contain; background: var(--surface-soft); }
.blog-card__media video { display: block; inline-size: 100%; aspect-ratio: 4/3; object-fit: contain; background: #000; }
.blog-card__media--audio { display: grid; place-items: center; min-block-size: 7rem; padding: clamp(.75rem,2vw,1.15rem); }
.blog-card__media audio { display: block; inline-size: 100%; }
.blog-card__media-link { color: inherit; text-decoration: none !important; }
.blog-date-filters{display:flex;flex-wrap:wrap;align-items:end;gap:.7rem 1rem;margin-block:0 var(--space-md);padding-block:.8rem;border-block-end:1px solid var(--line)}
.blog-date-filters label{display:grid;gap:.3rem;color:var(--ink-soft);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase}
.blog-date-filters select{min-inline-size:9rem;min-block-size:2.35rem;padding:.35rem .55rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;text-transform:none;letter-spacing:normal}
.blog-date-filters .btn{min-block-size:2.35rem}
#blog-filter-status{margin-inline-start:auto;align-self:center}
@media (max-width:640px){.blog-date-filters{align-items:stretch}.blog-date-filters label,.blog-date-filters select{inline-size:100%}#blog-filter-status{inline-size:100%;margin-inline-start:0}}
.blog-blocks { display: grid; gap: 1.35rem; }
.blog-blocks .blog-heading { margin-block: 1.4rem .2rem; }
.blog-link { font-family: var(--font-mono); font-size: var(--fs-sm); }
.blog-media { margin-block: 1.5rem; break-inside: avoid; }
.blog-media img, .blog-media video { width: 100%; border-radius: var(--radius-md); }
.blog-media audio { width: 100%; }
.blog-media figcaption { margin-block-start: .55rem; color: var(--ink-faint); font-size: var(--fs-xs); }

/* B2060 — Blog Page artwork is a fit-inside editorial asset, never a crop.
   Preserve the intrinsic aspect ratio for raster and vector media alike while
   retaining the B2056 reading-measure footprint and defensive height cap. */
.record-artwork.blog-entry-artwork {
  inline-size: 100%;
  max-inline-size: min(var(--measure-reading), 100%);
  margin: 0 auto clamp(2.25rem, 4vw, 3.5rem);
}
.blog-entry-artwork__figure {
  margin: 0 auto;
  display: grid;
  place-items: center;
  inline-size: 100%;
  max-inline-size: min(100%, 400px);
}
.blog-entry-artwork__figure[data-display-size="200"] { max-inline-size: min(100%, 200px); }
.blog-entry-artwork__figure[data-display-size="300"] { max-inline-size: min(100%, 300px); }
.blog-entry-artwork__figure[data-display-size="400"] { max-inline-size: min(100%, 400px); }
.blog-entry-artwork__figure[data-display-size="600"] { max-inline-size: min(100%, 600px); }
.blog-entry-artwork__figure[data-display-size="800"] { max-inline-size: min(100%, 800px); }
.blog-entry-artwork__figure[data-display-size="full"] { max-inline-size: 100%; }
.blog-entry-artwork__image {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 28rem;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  background: var(--surface-soft);
}
.record-artwork__figure--vector .record-artwork__image { object-fit: contain; }
.blog-ad-slot { min-height: 7rem; margin-block: var(--space-xl); padding: .9rem; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-soft) 70%, transparent); color: var(--ink-faint); text-align: center; }
@media (max-width: 760px) {
  /* Build 1.70 — keep the Blog result stack aligned with the page header on
     narrow screens. .reading-column intentionally has no gutter of its own,
     so the Blog list must restore the shared mobile page gutters here. */
  #blog-stage .reading-column,
  #blog-entry-stage .reading-column {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--measure-reading));
  }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card--has-media > .blog-card__content-link,
  .blog-card--has-media > .blog-card__media { grid-column: 1; grid-row: auto; }
  .blog-card--has-media > .blog-card__content-link { order: 1; }
  .blog-card--has-media > .blog-card__media { order: 2; }
}


/* Build 0.2.16 — canonical Main/Home navigation affordance */
.nav-link--main { font-weight: 600; }

/* 0.2.18 — comment forms stay quiet until invited. */
.comment-form-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-block: var(--space-md);
}

.btn-comment-toggle {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: .55rem;
  min-block-size: 2.5rem;
  padding-inline: .95rem;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-en) 8%);
  color: var(--ink-soft);
  border-radius: var(--pill);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .03em;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.btn-comment-toggle:hover {
  color: var(--accent-en-ink);
  border-color: var(--accent-en);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-en) 16%);
  transform: translateY(-1px);
}

.comment-toggle-icon {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .62rem;
  line-height: 1;
}

.comment-toggle-label { white-space: nowrap; }

.comment-form-collapsed { display: none !important; }

/* 0.2.22 — form escape controls: every user-facing form gets a graceful exit. */
.form-actions--with-cancel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

.btn-form-cancel {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}

.btn-form-cancel:hover {
  color: var(--ink);
  background: var(--surface-soft);
}

.form-open-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-block: var(--space-md);
}

.btn-form-open-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 2.5rem;
  padding-inline: .95rem;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-en) 8%);
  color: var(--ink-soft);
  border-radius: var(--pill);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.btn-form-open-toggle:hover {
  color: var(--accent-en-ink);
  border-color: var(--accent-en);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-en) 16%);
  transform: translateY(-1px);
}

/* Footer tagline: preserve the intentional editorial line break from JSON. */
@layer components {
  .site-footer .text-muted[data-copy-key] {
    white-space: pre-line;
    max-inline-size: 42ch;
  }
}

/* Literary artwork: transparent, theme-neutral visual layer */
.record-artwork {
  max-inline-size: min(76rem, 100%);
  margin: 0 auto clamp(1.75rem, 4vw, 3.5rem);
  padding: 0;
}
.record-artwork[hidden] { display: none !important; }
.record-artwork__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent-en) 6%), color-mix(in srgb, var(--surface) 94%, var(--accent-ro) 6%));
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
}
/* Page/record artwork is editorial content, not a thumbnail. Never force a
   16:9 crop: fit the complete asset inside its container at intrinsic ratio. */
.record-artwork__image {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}
.record-artwork__figure figcaption {
  padding: .7rem 1rem .9rem;
  color: var(--ink-faint);
  font: 500 var(--fs-2xs)/1.45 var(--font-mono);
}
@media (max-width: 700px) {
  .record-artwork { margin-block-start: 2.25rem; }
  .record-artwork__figure { border-radius: var(--radius-md); }
}


/* Living chamber excerpt — fixed viewport, two-layer cross-fade, and length-aware slow reading. */
.chamber-card { overflow: hidden; }
.chamber-fragment {
  position: relative;
  min-block-size: 10rem;
  block-size: 10rem;
  margin-block-start: 1.25rem;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}
.chamber-fragment__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  cursor: default;
  transform: translate3d(0, .35rem, 0);
  transition: opacity .85s ease, transform .85s ease;
  will-change: opacity, transform;
}
.chamber-fragment__layer.is-current {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.chamber-fragment__layer.is-current.is-user-interacting {
  cursor: grabbing;
}
.chamber-fragment__layer.is-current:not(.is-user-interacting) {
  cursor: default;
}
.chamber-fragment__content {
  min-block-size: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 8.5s ease-in-out;
  will-change: transform;
}
.chamber-fragment__quote {
  margin: 0;
  max-inline-size: 58ch;
  white-space: pre-line;
  font-family: var(--font-reading, serif);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.38;
  font-style: italic;
  color: var(--text);
}
.chamber-fragment__source {
  display: block;
  margin-block-start: .8rem;
  font-family: var(--font-ui, monospace);
  font-size: .67rem;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chamber-fragment__source::before { content: "— "; }
@media (prefers-reduced-motion: reduce) {
  .chamber-fragment__layer { transition: none; transform: none; }
  .chamber-fragment__content { transition: none; transform: none !important; }
  .chamber-fragment__layer.is-current { overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 720px) {
  .chamber-fragment { min-block-size: 12rem; block-size: 12rem; }
}


/* Homepage Chamber composition: the literary reading occupies the left column;
   fragment metadata remains visible at right without affecting viewport height. */
#home-chamber-fragment .chamber-fragment__layer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .34fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.75rem, 4vw, 4rem);
  transform: none;
  transition: opacity .65s ease;
  will-change: opacity;
}
#home-chamber-fragment .chamber-fragment__reading {
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100%;
  overflow: hidden;
}
#home-chamber-fragment .chamber-fragment__aside {
  min-inline-size: 0;
  margin: 0;
  padding-inline-start: clamp(1rem, 2.2vw, 2rem);
  border-inline-start: 1px solid var(--line);
}
#home-chamber-fragment .chamber-fragment__rule { margin-block: .75rem; }
@media (max-width: 760px) {
  /* Mobile Chamber: keep the card's reading viewport stable while reserving a
     compact metadata rail inside the viewport. Touch gestures remain owned by
     the page; the excerpt itself continues its automatic upward reading motion. */
  #home-chamber-fragment .chamber-fragment__layer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .6rem;
    touch-action: auto;
  }
  #home-chamber-fragment .chamber-fragment__reading {
    min-block-size: 0;
    overflow: hidden;
  }
  #home-chamber-fragment .chamber-fragment__aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem .65rem;
    min-block-size: 0;
    margin: 0;
    padding: .55rem 0 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
    overflow: hidden;
  }
  #home-chamber-fragment .chamber-fragment__rule,
  #home-chamber-fragment .chamber-fragment__meta-label {
    display: none;
  }
  #home-chamber-fragment .chamber-fragment__index,
  #home-chamber-fragment .chamber-fragment__language {
    white-space: nowrap;
  }
  #home-chamber-fragment .chamber-fragment__source {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #home-chamber-fragment .chamber-fragment__layer.is-current { overflow: hidden; }
  #home-chamber-fragment .chamber-fragment__reading { overflow-y: auto; scrollbar-width: thin; }
}

/* 0.2.65 — remove homepage hero actions while preserving the established copy position */
#home-hero-copy { padding-block-end: calc(var(--space-md) + 2.75rem); }
@media (max-width: 780px) { #home-hero-copy { padding-block-end: calc(var(--space-md) + 2.75rem); } }

/* 0.2.63 — prose bridge */
.home-prose-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  gap: clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
}
.home-prose-card__body { min-inline-size: 0; padding: clamp(1.4rem, 2.5vw, 2.2rem); }
.home-prose-card__excerpt {
  margin: 1.1rem 0 0;
  max-inline-size: 68ch;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.52;
  font-weight: 400;
}
.home-prose-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  align-items: center;
  margin-top: 1.2rem;
}
.home-prose-card__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .15rem;
}
.home-prose-card__link:hover { color: var(--accent-en); }
.home-prose-card__mark {
  align-self: stretch;
  position: relative;
  min-block-size: 100%;
  border-inline-start: 1px solid var(--line);
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb,var(--accent-en) 12%,transparent) 0 8%, transparent 9%);
}
.home-prose-card__mark::before {
  content: "";
  position: absolute;
  inset: 20% 28%;
  border: 1px solid color-mix(in srgb,var(--ink-soft) 28%,transparent);
  border-radius: 999px 999px 2px 2px;
}
.home-prose-card__mark span {
  position: absolute;
  inline-size: .28rem;
  block-size: .28rem;
  border-radius: 50%;
  background: var(--accent-en);
  opacity: .55;
}
.home-prose-card__mark span:nth-child(1) { inset: 24% 40%; }
.home-prose-card__mark span:nth-child(2) { inset: 42% 62%; }
.home-prose-card__mark span:nth-child(3) { inset: 63% 34%; }

/* Chamber source is now a real navigation affordance. */
.chamber-fragment__source {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb,var(--ink-soft) 34%,transparent);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chamber-fragment__source:hover,
.chamber-fragment__source:focus-visible {
  color: var(--accent-en);
  border-color: var(--accent-en);
}

/* Full-book continuous reading template */
.book-reading-tools-wrap {
  inline-size: min(calc(100% - 2 * var(--gutter)), 58rem);
  margin-inline: auto;
}
.book-reading-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-block: 1rem 2.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.book-reading-tools__left {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-inline-size: 0;
  flex: 1 1 auto;
}
.book-reading-tools .book-edition-control {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  white-space: nowrap;
}
.book-reading-tools select {
  margin: 0;
  min-inline-size: 9rem;
  padding: .45rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.book-chapter-index {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-block-end: 2.5rem;
  font: 500 var(--fs-2xs)/1.4 var(--font-mono);
}
.book-chapter-index:empty { display: none; }
.book-chapter-index a { color: var(--ink-faint); text-decoration: none; }
.book-chapter-index a:hover { color: var(--ink); }
.book-chapter-stream { max-inline-size: 54rem; margin-inline: auto; }
.book-chapter {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-block-start: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.book-chapter:last-child { border-block-end: 1px solid var(--line); }
.book-chapter__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.4rem;
}
.book-chapter__number { color: var(--ink-faint); }
.book-chapter__title {
  margin: 0 0 2rem;
  max-inline-size: 28ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4.1rem);
  font-weight: 400;
  line-height: 1;
}
.book-chapter__body {
  max-inline-size: 43rem;
  font-family: var(--font-display);
  font-size: clamp(1.03rem, 1.2vw, 1.2rem);
  line-height: 1.8;
}
.book-chapter__body p { margin: 0 0 1.35em; }
.book-chapter__stanza {
  white-space: pre-line;
  margin-block-end: 2.1rem;
  max-inline-size: 32rem;
}
.book-chapter__footer {
  margin-top: 2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.book-chapter__footer a { color: var(--ink-faint); text-decoration: none; }
.book-chapter__footer a:hover { color: var(--ink); }
.book-chapter--pending { min-block-size: 10rem; }
.book-chapter__loading {
  inline-size: min(30rem, 70%);
  block-size: 4rem;
  border-top: 1px solid var(--line);
  opacity: .55;
  background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--accent-en) 6%,transparent), transparent);
}
@media (max-width: 780px) {
  .home-prose-card { grid-template-columns: 1fr; }
  .home-prose-card__mark {
    min-block-size: 8rem;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }
  .book-reading-tools { align-items: stretch; flex-direction: column; gap: 1rem; }
  .book-reading-tools__left { justify-content: space-between; }
  .book-reading-tools .book-edition-control { flex: 1 1 auto; justify-content: flex-end; }
  .book-reading-tools select { min-inline-size: 8rem; }
  .book-chapter__title { font-size: clamp(2rem, 9vw, 3.1rem); }
}

/* v2.4 — approved Main title rhythm and 15% hero-to-featured gap reduction. */
#home-eyebrow {
  margin-block-end: 1em;
}
#home-hero {
  padding-block-end: clamp(1.275rem, 2.975vw, 2.975rem);
}
#home-featured-section {
  padding-block-start: clamp(1.4875rem, 2.975vw, 3.4rem);
}
#home-featured-section > .container > .section-ornament {
  margin-block-end: 1rem;
}

/* Build 0.2.75 — homepage book cards are navigational links. */
.placeholder-tile-link { display:block; color:inherit; text-decoration:none; border-radius:var(--radius-lg); }
.placeholder-tile-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.placeholder-tile-link:hover .placeholder-tile { transform:translateY(-3px); box-shadow:var(--shadow-md); }


/* Build 0.2.96 — unified primary page title/slogan scale.
   The About page .section-title establishes the reference size: var(--fs-2xl).
   Previous homepage .home-display size preserved for rollback: clamp(2.65rem, 5vw, 5.15rem).
*/
.home-display,
#works-page .works-hero__title,
#body-blog-page #blog-title,
#body-cookie-rejected-page #cookie-rejected-title {
  font-size: var(--fs-2xl);
}

/* Build 0.2.87 — About page literary-illustration composition and shared reading measure. */
/* About uses a wide editorial canvas, but it must never escape the same
   viewport gutter/container frame as the shared header. The prior min(100%)
   override was unlayered and therefore defeated the layered .container gutter
   contract during manual resize. */
#about-page .reading-column {
  inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-max), 82rem);
  margin-inline: auto;
}
#about-page { --about-reading-measure: 82ch; }
#about-page .about-title { margin-block-end: clamp(2.5rem, 5vw, 4rem); }
#about-page #about-copy, #about-page #about-bioscratch { max-inline-size: var(--about-reading-measure); margin-inline: auto; }
#about-page #about-copy p, #about-page #about-bioscratch p { max-inline-size: none; text-align: justify; text-justify: inter-word; hyphens: auto; }
#about-page .about-main-stage { display:grid; grid-template-columns:minmax(14rem,18rem) minmax(0,1fr) minmax(14rem,18rem); column-gap:clamp(1.5rem,3vw,3rem); row-gap:1rem; align-items:start; margin-block-start:0; }
#about-page .about-main-stage .about-main-text { min-inline-size:0; max-inline-size:82ch; inline-size:min(100%,82ch); justify-self:center; position:relative; z-index:1; }
#about-page .about-side-art { align-self:start; justify-self:center; inline-size:100%; max-inline-size:18rem; min-inline-size:0; min-block-size:0; aspect-ratio:4/5; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface-soft); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:grid; place-items:stretch; z-index:2; }
#about-page .about-side-art svg { display:block; inline-size:100%; block-size:100%; }
#about-page .about-side-art .art-bg { fill:var(--surface-soft); }
#about-page .about-section-divider { inline-size:100%; block-size:1px; margin-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem); background:linear-gradient(90deg,var(--accent-en),color-mix(in srgb,var(--accent-en) 58%,transparent) 52%,transparent); opacity:.9; }
#about-page .about-second-stage { display:grid; grid-template-columns:minmax(9rem,15rem) minmax(0,var(--about-reading-measure)) minmax(9rem,15rem); gap:clamp(1rem,3vw,2.5rem); align-items:start; }
#about-page .about-author-title { grid-column:1; margin:0; max-inline-size:15rem; }
#about-page .about-second-content { grid-column:2; min-inline-size:0; }
#about-page .about-principles-stage { margin-block-start:0; }
#about-page #about-principles { inline-size:100%; max-inline-size:none; margin-inline:0; box-sizing:border-box; }
#about-page #about-bioscratch::after { content:""; display:table; clear:both; }
#about-page .about-creator-photo { float:right; inline-size:clamp(12rem,24vw,18rem); aspect-ratio:4/5; margin:0 0 1.35rem 2rem; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--accent-en) 8%,var(--surface-soft)),var(--surface-soft)); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
#about-page .about-creator-photo::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 49.5%,color-mix(in srgb,var(--line-strong) 45%,transparent) 50%,transparent 50.5%),linear-gradient(45deg,transparent 49.5%,color-mix(in srgb,var(--line-strong) 45%,transparent) 50%,transparent 50.5%); opacity:.7; }
#about-page .about-creator-photo::after { content:"CREATOR PHOTO"; position:absolute; inset:auto .75rem .7rem; color:var(--ink-faint); font:500 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing:.1em; text-align:center; }
#about-page .about-creator-photo { display:block; padding:0; background:var(--surface-soft); }
#about-page .about-creator-photo::before, #about-page .about-creator-photo::after { display:none; }
#about-page .about-creator-photo img { display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:center; }
#about-page .about-closing-image { inline-size:min(100%,var(--about-reading-measure)); margin:clamp(4rem,7vw,6rem) auto clamp(2.5rem,5vw,4rem); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface-soft); box-shadow:var(--shadow-sm); overflow:hidden; }
#about-page .about-closing-image img { display:block; inline-size:100%; block-size:auto; }
#about-page .about-copyright-notice { max-inline-size:var(--about-reading-measure); margin:clamp(1rem,2vw,1.5rem) auto 0; color:var(--ink-faint); font:500 var(--fs-2xs)/1.5 var(--font-mono); letter-spacing:.08em; text-align:center; }
#about-page .about-copyright-emoji { display:inline-block; inline-size:1em; block-size:1em; max-inline-size:none; max-block-size:none; margin-inline-start:.15em; vertical-align:-.14em; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; font-size:1em; line-height:1; }
#about-page .about-copyright-emoji img.emoji { display:inline-block; inline-size:1em !important; block-size:1em !important; max-inline-size:none !important; max-block-size:none !important; vertical-align:-.14em; }

@media (max-width:720px) { #about-page .about-closing-image { inline-size:100%; margin-block-start:clamp(3rem,8vw,4.5rem); } }
@media (max-width:980px) { #about-page .about-main-stage { grid-template-columns:minmax(10rem,14rem) minmax(0,1fr) minmax(10rem,14rem); column-gap:1rem; } #about-page .about-second-stage { grid-template-columns:minmax(7rem,11rem) minmax(0,1fr) minmax(7rem,11rem); gap:1rem; } #about-page .about-author-title{max-inline-size:11rem;} }
@media (max-width:720px) { #about-page #about-copy,#about-page #about-bioscratch{max-inline-size:none;} #about-page .about-main-stage{grid-template-columns:1fr;gap:1rem;} #about-page .about-side-art{inline-size:min(100%,18rem);aspect-ratio:4/3;justify-self:center;} #about-page .about-side-art--left{order:1;} #about-page .about-main-stage .about-main-text{order:2;} #about-page .about-side-art--right{order:3;} #about-page .about-second-stage{grid-template-columns:1fr;gap:1.5rem;} #about-page .about-author-title{grid-column:1;max-inline-size:none;margin:0;} #about-page .about-second-content{grid-column:1;} #about-page .about-principles-stage{margin-block-start:0;} #about-page #about-principles{inline-size:100%;} #about-page .about-creator-photo{float:none;inline-size:min(100%,18rem);margin:0 auto 2rem;} }
@media (max-width:420px) { #about-page .about-side-art{inline-size:min(100%,15rem);} #about-page .about-creator-photo{inline-size:min(100%,15rem);} }
/* WORKS — GUIDED DISCOVERY (0.2.90) */
#works-page.works-experience{padding-block-end:clamp(4rem,8vw,8rem)}
#works-page .works-hero{max-inline-size:58rem;padding-block:clamp(1.5rem,4.5vw,3.5rem) .85rem}
#works-page .works-hero__title{max-inline-size:18ch;font-size:var(--fs-2xl);line-height:.96}
#works-page .works-hero__lead{max-inline-size:46rem;margin-block-start:clamp(1rem,2.25vw,1.5rem)}
#works-page .works-section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-block-end:1.25rem}
#works-page .works-section-title{margin:0;font-family:var(--font-display);font-size:clamp(1.9rem,3.5vw,3rem);line-height:1}
#works-page .works-count{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;color:var(--ink-faint);font:500 var(--fs-2xs)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
#works-page .works-count strong{color:var(--ink);font:400 1.35rem/1 var(--font-display);text-transform:none;letter-spacing:0}
#works-page .works-wayfinding,#works-page .works-collections,#works-page .works-reading-room{margin-block-start:clamp(4rem,8vw,7rem)}
#works-page .works-door-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
#works-page .works-door{position:relative;display:grid;grid-template-rows:9rem auto;min-block-size:15rem;overflow:hidden;background:var(--surface);color:inherit;text-decoration:none;transition:transform var(--motion) var(--ease),background var(--motion) var(--ease)}
#works-page .works-door:hover{z-index:1;transform:translateY(-4px);background:color-mix(in srgb,var(--surface) 94%,var(--accent-en) 6%)}
#works-page .works-door__art{display:grid;place-items:center;border-block-end:1px solid var(--line);color:var(--accent-en);font-family:var(--font-display);font-size:4.5rem;opacity:.72}
#works-page .works-door__body{padding:1.1rem 1.2rem 1.3rem}
#works-page .works-door__label{display:block;font:500 .78rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
#works-page .works-door__hint{display:block;max-inline-size:18ch;margin-block-start:.55rem;color:var(--ink-faint);font:400 1rem/1.35 var(--font-display)}
#works-page .works-door__arrow{position:absolute;inset-block-end:1rem;inset-inline-end:1rem;color:var(--accent-en);font-size:1.15rem}
#works-page .works-collection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
#works-page .works-collection-door{position:relative;min-block-size:10rem;padding:1.1rem 1rem 1.25rem;border:0;border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background var(--fast) var(--ease)}
#works-page .works-collection-door:hover{background:color-mix(in srgb,var(--surface) 88%,var(--accent-en) 12%)}
#works-page .works-collection-door__index{display:block;color:var(--accent-en);font:500 .68rem/1 var(--font-mono);letter-spacing:.08em}
#works-page .works-collection-door__name{display:block;margin-block:2rem .7rem;font:500 clamp(1.05rem,1.7vw,1.35rem)/1.05 var(--font-display)}
#works-page .works-collection-door__count{color:var(--ink-faint);font:500 .67rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
#works-page .works-collection-door__arrow{position:absolute;inset-block-end:1rem;inset-inline-end:1rem;color:var(--accent-en)}
#works-page .works-surprise{display:inline-flex;align-items:center;gap:.55rem;min-block-size:2.5rem;padding:.55rem .9rem;border:1px solid var(--line-strong);border-radius:var(--pill);background:transparent;color:var(--ink);font:500 .7rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
#works-page .works-surprise:hover{border-color:var(--accent-en);color:var(--accent-en)}
#works-page .works-reading-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding-block-end:1.25rem;border-block-end:1px solid var(--line)}
#works-page .works-reading-note{max-inline-size:48rem;margin-block:.7rem 0;color:var(--ink-faint)}
#works-page .works-active-filters{color:var(--accent-en);font:500 .7rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;text-align:right}
#works-page .works-controls{display:grid;grid-template-columns:minmax(18rem,1.7fr) minmax(8rem,.55fr) minmax(12rem,1fr) auto;align-items:end;gap:1rem;margin-block:1.25rem 2rem}
#works-page .works-control-group{display:grid;gap:.4rem;color:var(--ink-faint);font:500 .68rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
#works-page .works-search-wrap{display:flex;align-items:center;gap:.65rem;min-block-size:3rem;padding-inline:.85rem;border-block-end:1px solid var(--line-strong);color:var(--accent-en)}
#works-page .works-search-wrap input{inline-size:100%;min-inline-size:0;border:0;outline:0;background:transparent;color:var(--ink);font:400 1.05rem/1.3 var(--font-display)}
#works-page .works-search-wrap input::placeholder{color:var(--ink-faint);opacity:.8}
#works-page .works-control-group select{min-block-size:2.05rem;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink);padding-inline:.75rem;font:400 .95rem/1.2 var(--font-display)}
#works-page .works-reset{min-block-size:2.05rem;border:1px solid var(--line);background:transparent;color:var(--ink-faint);padding-inline:.8rem;font:500 .68rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
#works-page .works-reset:hover{border-color:var(--accent-en);color:var(--accent-en)}
#works-page .works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line);background:var(--line)}
#works-page .works-card{display:grid;grid-template-rows:11rem auto;min-inline-size:0;background:var(--surface);color:inherit;text-decoration:none;transition:transform var(--motion) var(--ease),background var(--motion) var(--ease)}
#works-page .works-card:hover{position:relative;z-index:1;transform:translateY(-4px);background:color-mix(in srgb,var(--surface) 95%,var(--accent-en) 5%)}
#works-page .works-card__art{display:grid;place-items:center;min-block-size:0;padding:1.2rem;border-block-end:1px solid var(--line);color:var(--accent-en);opacity:.7}
#works-page .works-card__art svg{display:block;inline-size:100%;block-size:100%;max-block-size:9rem}
#works-page .works-card__body{display:flex;flex-direction:column;min-block-size:9rem;padding:1.1rem 1.15rem 1rem}
#works-page .works-card__meta{color:var(--ink-faint);font:500 .65rem/1.25 var(--font-mono);text-transform:uppercase;letter-spacing:.07em}
#works-page .works-card__title{margin:.65rem 0 1.2rem;font:500 clamp(1.35rem,2vw,1.8rem)/1.03 var(--font-display)}
#works-page .works-card__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block-start:auto}
#works-page .works-card__status{color:var(--ink-faint);font:500 .62rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
#works-page .works-card__read{color:var(--accent-en);font:500 .68rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:62rem){#works-page .works-door-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#works-page .works-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#works-page .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#works-page .works-controls{grid-template-columns:1fr 1fr}#works-page .works-control-group--search{grid-column:1/-1}#works-page .works-reset{justify-self:start}}
@media (max-width:44rem){#works-page .works-hero{padding-block-start:1.25rem}#works-page .works-hero__title{max-inline-size:14ch;font-size:var(--fs-2xl)}#works-page .works-section-head,#works-page .works-reading-head{align-items:flex-start;flex-direction:column}#works-page .works-count{align-items:flex-start}#works-page .works-door-grid,#works-page .works-collection-grid,#works-page .works-grid{grid-template-columns:1fr}#works-page .works-door{min-block-size:12rem;grid-template-columns:7rem 1fr auto;grid-template-rows:1fr}#works-page .works-door__art{border-block-end:0;border-inline-end:1px solid var(--line)}#works-page .works-door__body{align-self:center}#works-page .works-controls{grid-template-columns:1fr}#works-page .works-control-group--search{grid-column:auto}#works-page .works-active-filters{text-align:left}}
@media (max-width:30rem){#works-page .works-door{grid-template-columns:5rem 1fr auto}#works-page .works-door__hint{font-size:.92rem}#works-page .works-card{grid-template-rows:10rem auto}}


/* 0.2.91 — error states and invalid Works route */
.error-page {
  min-height: min(760px, calc(100vh - 12rem));
  display: grid;
  place-items: start center;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.error-shell {
  width: min(920px, 100%);
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.error-code {
  margin: 0 0 .8rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent, #7ea6d8);
}
.error-title {
  margin: 0 auto;
  max-width: 17ch;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.error-rule {
  width: min(280px, 42vw);
  height: 1px;
  margin: 2rem auto;
  background: var(--accent, #7ea6d8);
  opacity: .75;
}
.error-message {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--text-muted, currentColor);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  text-wrap: balance;
}
.error-art {
  width: min(420px, 74vw);
  height: auto;
  margin: 2rem auto 2.5rem;
  color: var(--accent, #7ea6d8);
  opacity: .92;
}
.error-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.error-actions .btn { min-width: 10rem; }

.works-invalid-route {
  display: grid;
  place-items: center;
  min-height: 62vh;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.works-invalid-route__shell {
  width: min(860px, 100%);
  text-align: center;
}
.works-invalid-route__art {
  width: min(430px, 74vw);
  margin: 0 auto 1.5rem;
  color: var(--accent, #7ea6d8);
}
.works-invalid-route__code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.works-invalid-route__title {
  margin: .7rem auto 1rem;
  max-width: 15ch;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.7rem, 6.5vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.works-invalid-route__text {
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.75;
  color: var(--text-muted, currentColor);
}
.works-invalid-route__rule {
  width: min(260px, 40vw);
  height: 1px;
  background: var(--accent, #7ea6d8);
  margin: 1.75rem auto;
  opacity: .72;
}
@media (max-width: 720px) {
  .error-page { min-height: calc(100vh - 10rem); padding-top: 3.25rem; }
  .error-actions { flex-direction: column; }
  .error-actions .btn { width: min(20rem, 100%); }
}


/* 0.2.92 — tighten vertical entry on error/recovery pages so the message is visible without scrolling.
   Keep a deliberate breathing space below the floating navigation. */


/* ============================================================================
   BUY ME A COFFEE — SUPPORT PAGE
   Artwork is delivered from the cacheable physical asset at
   images/coffee/buy-me-a-coffee.webp.
============================================================================ */
@layer components {
  .coffee-image-slot { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-soft); box-shadow:var(--shadow-sm); }
  .coffee-image-slot img { display:block; inline-size:100%; block-size:auto; aspect-ratio:941/1672; object-fit:cover; }
  .coffee-message-section { padding-block-start:0; }
  .coffee-message-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(2rem,6vw,5rem); align-items:end; max-width:62rem; padding-block:clamp(2rem,4vw,3.5rem); border-block:1px solid var(--line); }
  .coffee-message-panel .section-title { margin-block:.55rem 1rem; }
  .coffee-message-panel .lead { max-width:48rem; margin-block-end:0; }
  .coffee-message-panel .hero-actions { margin-block:0; }
}
@media (max-width:820px) {
  .coffee-message-panel { grid-template-columns:1fr; align-items:start; }
}


/* ============================================================================
   BUY ME A COFFEE — TWO-CARD REFINEMENT
   Restores the full site stylesheet and refines the artwork card scale.
============================================================================ */
@layer components {
  .coffee-intro { max-width:62rem; }
  .coffee-cards { display:grid; grid-template-columns:minmax(14rem,.72fr) minmax(0,1.28fr); gap:clamp(1.25rem,3vw,2.5rem); align-items:stretch; margin-block-start:clamp(2rem,4vw,3.25rem); }
  .coffee-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-soft); box-shadow:var(--shadow-sm); overflow:hidden; }
  .coffee-art-card { display:grid; place-items:center; padding:clamp(1rem,2vw,1.4rem); }
  .coffee-art-card .coffee-image-slot { inline-size:min(100%,13rem); max-block-size:21rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
  .coffee-art-card .coffee-image-slot img { display:block; inline-size:100%; block-size:auto; max-block-size:21rem; object-fit:contain; }
  .coffee-payment-card { display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,4vw,3rem); min-block-size:21rem; }
  .coffee-payment-inner { inline-size:min(100%,34rem); }
  .coffee-payment-inner .text-muted { margin-block:0 1.5rem; }
  .coffee-message-section { padding-block-start:clamp(3rem,6vw,5rem); }
}
@media (max-width:820px) {
  .coffee-cards { grid-template-columns:1fr; }
  .coffee-art-card .coffee-image-slot { inline-size:min(100%,13rem); }
  .coffee-payment-card { min-block-size:18rem; }
}

/* ============================================================================
   BUY ME A COFFEE — PAYPAL PAYMENT PANEL
   Real PayPal form inserted; target=_blank keeps the literary site open after
   the payment flow. Styling keeps the provider UI visually subordinate to the
   page while preserving PayPal's recognizable payment marks.
============================================================================ */
@layer components {
  .coffee-payment-inner .coffee-note {
    margin-block: 0 1.35rem;
  }

  .paypal-support {
    margin-block-start: 1.35rem;
    padding-block-start: .35rem;
  }

  .coffee-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 0 1.35rem;
  }

  .coffee-paypal-text {
    margin: 0 auto 1.35rem;
    max-inline-size: 28rem;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    line-height: 1.55;
    text-align: center;
  }

  .coffee-form {
    display: grid;
    justify-items: center;
    gap: .9rem;
  }

  .coffee-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    white-space: nowrap;
    appearance: none;
    border: 1px solid var(--accent-en);
    border-radius: 999px;
    background: var(--accent-en);
    color: #fff;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .055em;
    line-height: 1;
    padding: .9rem 1.35rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  .coffee-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 1.35rem;
    block-size: 1.35rem;
  }

  .coffee-button__icon img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    max-inline-size: 100%;
    max-block-size: 100%;
  }

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

  .coffee-button:focus-visible {
    outline: 2px solid var(--accent-en);
    outline-offset: 4px;
  }

  .cards {
    display: block;
    inline-size: min(100%, 15rem);
    block-size: auto;
    opacity: .72;
  }

  .paypal-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .035em;
  }

  .paypal-note img {
    display: block;
    inline-size: 4.25rem;
    block-size: auto;
  }

  html[data-theme="rose"] .coffee-button {
    background: var(--accent-ro);
    border-color: var(--accent-ro);
  }
}

/* ============================================================================
   BUY ME A COFFEE — WARM PAPER ART CARD
   The artwork is transparent; the card supplies the paper-like ground so the
   illustration remains legible across all site themes.
============================================================================ */
@layer components {
  .coffee-art-card {
    background: color-mix(in srgb, #fbf7ef 92%, var(--accent-en) 8%);
  }

  .coffee-art-card .coffee-image-slot {
    inline-size: min(100%, 11rem);
    max-block-size: 18rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .coffee-art-card .coffee-image-slot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 18rem;
    object-fit: contain;
  }

  html[data-theme="sepia"] .coffee-art-card {
    background: color-mix(in srgb, #f7efdf 92%, var(--accent-en) 8%);
  }

  html[data-theme="dark"] .coffee-art-card,
  html[data-theme="midnight"] .coffee-art-card,
  html[data-theme="system"] .coffee-art-card {
    background: color-mix(in srgb, #f3ecdf 92%, var(--accent-en) 8%);
  }

  html[data-theme="rose"] .coffee-art-card {
    background: color-mix(in srgb, #fbf1f0 92%, var(--accent-ro) 8%);
  }
}


/* Quiet support link available on content pages without competing with the work. */
.nav-link--coffee {
  color: var(--accent-en-ink);
  opacity: .78;
  letter-spacing: .06em;
  border-color: color-mix(in srgb, var(--accent-en-ink) 18%, transparent);
}
.nav-link--coffee:hover,
.nav-link--coffee:focus-visible {
  opacity: 1;
  color: var(--ink);
  border-color: var(--line-strong);
}
img {
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 760px) {
  .nav-link--coffee { font-size: .61rem; padding-inline: .42rem; }
}

/* Coffee navigation icon */
.coffee-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;padding:.18rem;border:1px solid var(--line,#41516b);border-radius:999px;transition:transform .2s ease,border-color .2s ease,background-color .2s ease;}
.coffee-nav-icon:hover{transform:translateY(-1px);border-color:var(--accent,#c9a97a);background:color-mix(in srgb,var(--surface,#152034) 82%,transparent);}
.coffee-nav-icon__img{display:block;width:1.35rem;height:1.35rem;object-fit:contain;pointer-events:none;-webkit-user-drag:none;}
.coffee-nav-icon__label{position:absolute!important;width:1px!important;height: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;}


  /* Build 1.12 — contact publisher-intent flag. Kept in the form action row so the
     optional routing flag remains visually subordinate and anchored at the lower right. */
  .publisher-flag {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-block-size: 2.6rem;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
    color: var(--ink-soft);
    font: 600 var(--fs-xs)/1.2 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .publisher-flag:hover {
    border-color: var(--line-strong);
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  }
  .publisher-flag:focus-within {
    outline: 2px solid color-mix(in srgb, var(--focus) 42%, transparent);
    outline-offset: 2px;
  }
  .publisher-flag input {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--accent-en);
    flex: 0 0 auto;
  }
  @media (max-width: 640px) {
    .publisher-flag { margin-inline-start: 0; }
  }


/* Reusable site chrome custom elements — HTML5 Custom Elements rendered in light DOM. */
ad-site-header, ad-site-footer { display: block; }

/* ============================================================================
   REUSABLE MEDIA CONTROL
============================================================================ */
.ad-media{display:block;inline-size:100%;max-inline-size:var(--container-wide);margin-block:var(--space-lg);color:var(--text-primary)}
.ad-media__frame{position:relative;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface-raised) 94%,transparent);box-shadow:var(--shadow-sm)}
.ad-media--audio .ad-media__frame{background:linear-gradient(135deg,color-mix(in srgb,var(--surface-raised) 96%,transparent),color-mix(in srgb,var(--surface-glass) 84%,transparent));}
.ad-media__native{display:block;inline-size:100%;max-inline-size:100%;background:#111;aspect-ratio:16/9;object-fit:contain}
.ad-media--audio .ad-media__native{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.ad-media--audio .ad-media__frame{min-block-size:7.25rem;display:flex;align-items:flex-end;padding-block-start:3rem;background-image:radial-gradient(circle at 18% 45%,color-mix(in srgb,var(--accent) 18%,transparent) 0 1px,transparent 1px),linear-gradient(90deg,transparent 0 8%,color-mix(in srgb,var(--border-subtle) 45%,transparent) 8% 8.2%,transparent 8.2% 100%);background-size:14px 14px,100% 100%}
.ad-media__controls{display:grid;grid-template-columns:auto auto auto minmax(5rem,1fr) auto auto minmax(3.5rem,7rem) auto auto auto;gap:.4rem;align-items:center;inline-size:100%;padding:.55rem .7rem;background:color-mix(in srgb,var(--surface-glass) 92%,transparent);border-block-start:1px solid var(--border-subtle);backdrop-filter:blur(14px)}
.ad-media__button{display:grid;place-items:center;inline-size:2.2rem;block-size:2.2rem;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--text-primary);cursor:pointer;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.ad-media__button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--border-subtle)}
.ad-media__button:active{transform:scale(.94)}
.ad-media__button:focus-visible,.ad-media__seek:focus-visible,.ad-media__volume:focus-visible,.ad-media__speed:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ad-media__button svg{inline-size:1.05rem;block-size:1.05rem;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ad-media__time{font:500 var(--fs-2xs)/1 var(--font-mono);color:var(--text-muted);white-space:nowrap;min-inline-size:2.7rem;text-align:center}
.ad-media__seek,.ad-media__volume{appearance:none;inline-size:100%;height:3px;margin:0;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 28%,transparent);accent-color:var(--accent);cursor:pointer}
.ad-media__seek::-webkit-slider-thumb,.ad-media__volume::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);border:1px solid var(--surface-raised);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.ad-media__seek::-moz-range-thumb,.ad-media__volume::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--accent);border:1px solid var(--surface-raised)}
.ad-media__speed{min-inline-size:4.5rem;padding:.32rem .45rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);font:500 var(--fs-2xs)/1.2 var(--font-ui)}
.ad-media__error{position:absolute;inset:1rem 1rem auto 1rem;padding:.55rem .7rem;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--danger) 8%,var(--surface-raised));color:var(--danger);font:500 var(--fs-xs)/1.4 var(--font-ui)}
.ad-media__loading{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);opacity:0;transition:opacity var(--motion) var(--ease)}
.ad-media.is-focused .ad-media__controls{border-block-start-color:color-mix(in srgb,var(--accent) 28%,var(--border-subtle))}
.ad-media.is-ended .ad-media__controls{background:color-mix(in srgb,var(--surface-glass) 95%,transparent)}
@media (max-width:760px){.ad-media__controls{grid-template-columns:auto auto 1fr auto auto;grid-template-areas:'play restart time mute speed' 'seek seek seek volume volume';gap:.45rem}.ad-media__controls [data-role="current"]{grid-area:time}.ad-media__controls [data-role="seek"]{grid-area:seek}.ad-media__controls [data-role="duration"]{display:none}.ad-media__controls [data-action="mute"]{grid-area:mute}.ad-media__controls [data-role="volume"]{grid-area:volume}.ad-media__controls [data-role="speed"]{grid-area:speed}.ad-media__controls [data-action="captions"],.ad-media__controls [data-action="pip"],.ad-media__controls [data-action="fullscreen"]{display:none}}
@media (prefers-reduced-motion:reduce){.ad-media__button{transition:none}}

/* QA 1.19 — authored-image copy/drag deterrence. This is casual-copy deterrence, not DRM. */
img { user-select: none; -webkit-user-drag: none; }
svg[data-image-protected] { user-select: none; }

/* QA 1.20 — navigation affordance: these are actual links, not decorative cards. */
#works-page .works-door, #works-page .works-card, .placeholder-tile-link, .home-prose-card__link { cursor: pointer; }
#works-page .works-door:focus-visible, #works-page .works-card:focus-visible, .placeholder-tile-link:focus-visible, .home-prose-card__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }


#home-books-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
#home-books-hero > .books-hero__art {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  inline-size: 100% !important;
  block-size: auto !important;
}
#home-books-hero > .books-hero__veil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* BUILD 1.27 — unified homepage content-card title scale.
   All editorial cards on the homepage use the same title scale as the
   final navigational book cards. Do not inherit global h1/h2/section-title
   display sizing for these card titles.
*/
.home-card-title {
  margin-block: .35rem .7rem !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* BUILD 1.29 — Unwritten copy semantics and Chamber metadata composition.
   The Unwritten lead is prose, not a heading: it shares the body scale of the
   sentence beneath it. The Chamber metadata is a real second column, not a
   block accidentally pushed below the literary fragment.
*/
.home-unwritten-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem) !important;
  align-items: start !important;
  gap: clamp(1.5rem, 4vw, 4rem) !important;
}
.home-unwritten-copy { min-inline-size: 0; align-self: center; }
.home-unwritten-lead {
  margin-block: .75rem 0 !important;
  max-inline-size: 50ch !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-reading) !important;
  font-size: var(--fs-md) !important;
  line-height: var(--lh-body) !important;
  font-weight: 400 !important;
}
.home-unwritten-copy > .text-muted {
  max-inline-size: 50ch !important;
  margin-block-start: .65rem !important;
}
@media (max-width: 720px) {
  .home-unwritten-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .home-unwritten-copy { align-self: start; }
}

/* BUILD 1.28 — specialized homepage card geometry and optical title scale.
   Editorial card titles sit between the oversized page-heading scale and the
   small book-tile caption scale. The Unwritten artwork has its own component
   instead of inheriting the generic seam-mark geometry/min-height contract. */
.home-card-title {
  font-size: clamp(1.55rem, 1.25rem + .55vw, 1.95rem) !important;
  line-height: 1.16 !important;
}
#home-lab-card.home-unwritten-card .home-unwritten-art {
  display: block !important;
  inline-size: min(100%, 22rem) !important;
  max-inline-size: 22rem !important;
  aspect-ratio: 820 / 620 !important;
  min-block-size: 0 !important;
  block-size: auto !important;
  justify-self: end !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  background: linear-gradient(145deg, color-mix(in srgb,var(--accent-en) 7%,var(--surface)), var(--surface) 44%, color-mix(in srgb,var(--accent-ro) 7%,var(--surface))) !important;
  box-shadow: var(--shadow-lg) !important;
}
#home-lab-card.home-unwritten-card .home-unwritten-art .unwritten-art {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 720px) {
  #home-lab-card.home-unwritten-card > .cluster-between {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  #home-lab-card.home-unwritten-card .home-unwritten-art {
    justify-self: center !important;
    inline-size: min(100%, 22rem) !important;
  }
}

@media (max-width: 720px) {
  #home-lab-card.home-unwritten-card > .cluster-between {
    align-items: stretch !important;
  }
  #home-lab-card.home-unwritten-card .seam-mark--unwritten {
    flex-basis: 100% !important;
    inline-size: min(100%, 22rem) !important;
    margin-inline: auto;
  }
  }

/* BUILD 1.30 — unified editorial text-block typography.
   Governing reference: the homepage A/B pair.
   A = .home-display: editorial title face + --fs-2xl.
   B = .home-subline: reading face + clamp(1.12rem, 1rem + .3vw, 1.45rem).

   Scope is intentionally limited to page/content text and literary material.
   UI labels, navigation, metadata, controls, captions, and decorative text
   retain their own typography contracts.
*/
:root {
  --editorial-title-size: var(--fs-2xl);
  --editorial-body-size: clamp(1.12rem, 1rem + .3vw, 1.45rem);
}

/* A — all editorial/content titles. */
.display,
.work-title,
.section-title,
.poem-title,
.chapter-title,
.book-title,
.blog-card__title,
.blog-heading,
.works-section-title,
.book-chapter__title,
.home-card-title,
.error-title {
  font-family: var(--font-display) !important;
  font-size: var(--editorial-title-size) !important;
}

/* B — all ordinary editorial prose / literary text. */
.home-subline,
.home-unwritten-lead,
.home-unwritten-copy > .text-muted,
.lead,
.body-copy,
.blog-card__summary,
.works-hero__lead,
.coffee-intro,
.about-main-text,
.about-second-content,
.archive-content,
.work-text,
.prose,
.essay,
.article,
.poem,
.verse,
.book-chapter__body,
#record-text {
  font-family: var(--font-reading) !important;
  font-size: var(--editorial-body-size) !important;
}

/* Keep nested literary paragraphs on the same reference scale. */
.work-text > p,
.prose p,
.essay p,
.article p,
.book-chapter__body p,
#record-text > p,
.about-main-text p,
.about-second-content p,
.archive-content p {
  font-family: var(--font-reading) !important;
  font-size: var(--editorial-body-size) !important;
}

/* Poetry remains lineated; only its editorial face/size are standardized. */
.poem,
.verse {
  line-height: var(--lh-poetry);
}

/* Build 1.31 universal literary-work reader. */
#record-text {
  max-inline-size: var(--measure-reading);
  margin-inline: auto;
  white-space: pre-line;
}
#record-text.record-text--poem {
  max-inline-size: var(--measure-narrow);
  white-space: pre-wrap;
  line-height: var(--lh-poetry);
  text-wrap: wrap;
  overflow-wrap: anywhere;
}
#record-text.record-text--prose,
#record-text.record-text--essay {
  max-inline-size: var(--measure-reading);
}
#record-text.record-text--prose > p,
#record-text.record-text--essay > p {
  max-inline-size: var(--measure-reading);
  margin-block: 0 1.15em;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  text-wrap: pretty;
}
#record-text.record-text--prose > p:last-child,
#record-text.record-text--essay > p:last-child {
  margin-block-end: 0;
}

/* Build 1076 — explicit visitor-facing missing-translation fallback.
   This is a renderer state, not literary source content. Keep it readable as
   authored prose/verse and never subject it to prose justification. */
#record-text.record-text--missing-translation,
#blog-blocks.record-text--missing-translation {
  max-inline-size: var(--measure-reading);
  margin-inline: auto;
  text-align: start;
  white-space: normal;
  font-family: var(--font-reading) !important;
  font-size: var(--editorial-body-size) !important;
  line-height: 1.72;
}
#record-text.record-text--missing-translation .record-missing-translation__block,
#blog-blocks.record-text--missing-translation .record-missing-translation__block {
  white-space: pre-line;
  margin-block: 0 1.45em;
}
#record-text.record-text--missing-translation .record-missing-translation__block:last-child,
#blog-blocks.record-text--missing-translation .record-missing-translation__block:last-child {
  margin-block-end: 0;
}
#record-text.record-text--missing-translation .record-missing-translation__separator,
#blog-blocks.record-text--missing-translation .record-missing-translation__separator {
  margin-block: 1.7em;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji,
#blog-blocks.record-text--missing-translation .record-missing-translation__emoji {
  display: inline-block !important;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 0.82em !important;
  line-height: 1 !important;
  vertical-align: -0.08em;
  margin-inline-start: 0.08em;
  white-space: nowrap;
}

/* Build 1.59 — restore full justification for authored prose paragraphs.
   This is deliberately scoped to prose/essay paragraphs only; poetry, media,
   metadata, titles, and other literary structures retain their existing flow. */

/* Build 1.48 — inline literary media insertion.
   Inline images/video/audio are constrained to the same reading measure as the
   authored text. Their height remains intrinsic so SVGs, raster images, and
   videos are never cropped to an arbitrary aspect ratio. */
.record-inline-media {
  inline-size: 100%;
  max-inline-size: var(--measure-reading);
  margin-block: clamp(2rem, 4vw, 3.25rem);
  margin-inline: auto;
}
.record-text--poem .record-inline-media {
  max-inline-size: var(--measure-narrow);
}
.record-inline-media__figure {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-en) 4%);
  box-shadow: var(--shadow-sm);
}
.record-inline-media__image {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.record-inline-media__figure .ad-media {
  inline-size: 100%;
}
.record-inline-media__figure figcaption {
  padding: .7rem 1rem .9rem;
  color: var(--ink-faint);
  font: 500 var(--fs-2xs)/1.45 var(--font-mono);
}
@media (max-width: 700px) {
  .record-inline-media {
    margin-block: 1.75rem;
  }
  .record-inline-media__figure {
    border-radius: var(--radius-md);
  }
}

/* Build 1.45 — universal work-reader composition. */
.record-artwork {
  margin-block: clamp(3rem, 6vw, 5rem) 0;
}

/* Build 1.32 — literary work navigation breathing space.
   Navigation is deliberately separated from the final literary line so the
   transition from reading to navigation feels intentional rather than
   mechanically attached to the text. The empty-state override prevents
   phantom space when a work has no adjacent navigation item. */
.record-navigation {
  margin-block-start: clamp(2.25rem, 4vw, 3.5rem);
}
.record-navigation:empty {
  margin-block-start: 0;
}



/* Build 1.34 — primary navigation typography uses the same font-size reference
   as the homepage “Start anywhere. Regret is optional.” section ornament. */
.site-header--floating .nav-link {
  font-size: var(--fs-2xs);
  font-weight: 500;
}


/* Build 1.57 — work preview label title-row alignment.
   The vertical rule establishes the same left-edge reference as the
   PROSE metadata beneath it. The preview badge is vertically centered
   against the title line rather than aligned to its text baseline. */
.reading-stage__title-row {
  align-items: center;
  gap: .9rem 1.15rem;
  border-inline-start: 1px solid var(--line-strong);
  padding-inline-start: .9rem;
}

/* Build 1.63 — Book-page breathing room below the floating site header. */
#book-page.reading-stage {
  padding-block-start: 1.4rem;
}


/* Build 1.0.11 — Blog pages must clear the floating site header.
   These shells are intentionally scoped so the shared header/body geometry
   remains untouched. The listing and entry both follow the same content-start
   rhythm used by the other reading pages. */
#body-blog-page #blog-stage,
#body-blog-entry #blog-entry-stage {
  padding-block-start: clamp(5.5rem, 7vw, 7rem);
}

/* Build 1.0.8 — homepage breathing room is applied directly to the
   hero so it cannot be defeated by the shared header-clearance contract. */
#body-home-page .home-hero {
  padding-block-start: calc(clamp(2.1rem, 4.5vw, 4.2rem) + 1.5rem);
}

/* WordPress 1.0.12: custom error navigation labels */
.error-actions a[data-copy-key] {
  min-width: 10rem;
  white-space: nowrap;
}


/* WordPress 1.0.29 — mobile homepage header clearance and hero breathing room.
   The floating header is taller on narrow screens than the desktop offset
   contract allows. Give the homepage a small but deliberate clearance below
   the header, while removing the inherited hero-copy padding that created the
   excessive empty gulf before the elephant artwork. Keep the desktop geometry
   untouched. */
@media (max-width: 760px) {

  #body-home-page .home-hero {
    padding-block-start: calc(clamp(2.1rem, 4.5vw, 4.2rem) + 1.5rem);
  }

  #body-home-page #home-hero-copy {
    padding-block-end: .65rem;
  }

  #body-home-page .seam-mark--elephant {
    min-height: 10.5rem;
  }

  #body-home-page .home-elephant-art {
    max-block-size: 12rem;
  }
}


/* WordPress 1.0.33 — shared chrome geometry and content integrity.
   The floating header has different measured heights across responsive states.
   The runtime measures the rendered shared header and writes --header-clearance,
   so every page receives the same actual clearance rather than competing static
   rem offsets.

   The homepage banner is an inline SVG, so it needs explicit block dimensions;
   otherwise the figure's aspect-ratio leaves an empty dark tail beneath the art.

   Chamber reading geometry is now governed by the shared fixed-viewport
   component rules above on every screen size. */
@media (max-width: 760px) {
  #body-home-page .home-hero {
    padding-block-start: 1.15rem;
  }
}

/* Inline SVGs do not inherit the image sizing rule above. The homepage hero
   banner must occupy the complete figure rather than its browser-default
   intrinsic 300×150 viewport. */
.hero-art--banner > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* WordPress 1.0.34 — responsive page-entry contract.
   The floating header is shared; the content-entry rhythm must be shared too.
   Mobile/tablet pages previously accumulated shell-specific top padding, so
   Home, About, Blog, Works, Books and reading pages could begin at visibly
   different distances from the same header. The header clearance remains
   runtime-measured; this rule supplies only the small editorial breathing band
   after that measured clearance. Desktop geometry is deliberately untouched. */
@media screen and (max-width: 760px) {
  /* Build 1088 — Work reader mobile gutter restoration.
     The shared .reading-column is intentionally full-width by default because
     it is also used by other reading surfaces. The Work page itself must use
     the same viewport inset as the site's mobile container/header pattern. */
  #record-page .reading-column {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--measure-reading));
  }

  :root {
    /* The header host already reserves the measured clearance plus its
       editorial breathing room. Do not add a second page-specific offset. */
    --mobile-page-top-gap: 0px;
  }

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

  .site-main > .home-hero,
  .site-main > .section,
  .site-main > .reading-stage {
    padding-block-start: 0 !important;
  }

  /* Nested Works hero padding used to create a second, page-specific entry
     offset. Keep the canonical page gap above and let the hero begin there. */
  #works-page .works-hero {
    padding-block-start: 0 !important;
  }

  /* The About reading-column intentionally became 100% wide at mobile widths,
     defeating the shared container gutters and making the first letters look
     clipped against the viewport edge. Restore the normal mobile gutter. */
  #about-page .reading-column {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-max), 82rem);
  }

  /* Anchor/focus jumps must land below the fixed header rather than underneath
     it. This affects navigation to sections, not ordinary scrolling. */
  .site-main > section,
  #home-chamber-card,
  #about-page .about-main-stage,
  #about-page .about-second-stage,
  #works-page .works-reading-room,
  #book-page.reading-stage,
  #record-page.reading-stage {
    scroll-margin-block-start: var(--header-clearance);
  }

}

@media (max-width: 720px) {
  /* The desktop 3x inset is deliberately not reused as a fixed rem width on
     phones. At handset CSS widths that would consume most of the text box and
     force the four-line slogan into a narrow vertical stack. Keep the requested
     generous inset, but express it as a proportion of the actual hero.
     Typography scales with the viewport as well, so the live HTML overlay
     remains inside the artwork at every handset width. */
  }

/* BUILD 1.65 / WP 1.0.42: reusable Works search control */
#works-page .works-search-control{display:block}
#works-page .ad-search-control__bar{display:grid;grid-template-columns:minmax(2rem,1fr) auto auto;align-items:center;gap:1rem;min-block-size:2.75rem}
#works-page .ad-search-control__line{display:block;inline-size:100%;block-size:1px;background:var(--line-strong)}
#works-page .ad-search-control__label{color:var(--ink-faint);font:500 .72rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
#works-page .ad-search-control__trigger{display:grid;place-items:center;inline-size:2rem;block-size:2rem;padding:0;border:0;background:transparent;color:var(--ink-faint);cursor:pointer;transition:color var(--fast) var(--ease),transform var(--fast) var(--ease)}
#works-page .ad-search-control__trigger svg{inline-size:1.1rem;block-size:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#works-page .ad-search-control__trigger:hover,#works-page .ad-search-control__trigger:focus-visible{color:var(--accent-en)}
#works-page .ad-search-control__trigger:focus-visible{outline:1px solid var(--accent-en);outline-offset:3px}
#works-page .ad-search-control.is-open .ad-search-control__trigger{color:var(--accent-en)}
#works-page .ad-search-control__panel[hidden]{display:none}
#works-page .ad-search-control__panel{margin-block-start:1rem}




/* WORDPRESS 1.0.64 — shared container width hardening.
   Keep reusable footer and Works wayfinding children from establishing an
   intrinsic inline size larger than the canonical page container. */
.site-footer .container,
#works-page > .container,
body#body-works-page .works-wayfinding {
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.site-footer .footer-grid > *,
.site-footer .footer-links,
.site-footer .text-muted,
.site-footer .micro,
body#body-works-page .works-door-grid,
body#body-works-page .works-door {
  min-inline-size: 0;
}

.site-footer .text-muted,
.site-footer .micro,
body#body-works-page .works-door__label,
body#body-works-page .works-door__hint {
  overflow-wrap: anywhere;
}

body#body-works-page .works-wayfinding {
  inline-size: 100%;
}

body#body-works-page .works-door-grid {
  inline-size: 100%;
  max-inline-size: 100%;
}

/* BUILD 1.065.x — translation availability marks and non-redundant book-card whispers. */
.placeholder-tile .home-localized-art { position: relative; display: block; }
.placeholder-tile .translation-missing-mark {
  position: absolute;
  z-index: 4;
  inset-block-start: .7rem;
  inset-inline-end: .7rem;
  display: grid;
  place-items: center;
  inline-size: clamp(1.55rem, 4.5vw, 2.05rem);
  block-size: clamp(1.55rem, 4.5vw, 2.05rem);
  pointer-events: auto;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.28));
}
.placeholder-tile .translation-missing-mark[hidden] { display: none; }
.placeholder-tile .translation-missing-mark svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.placeholder-tile .translation-missing-mark--ro { color: #d8b476; }
.placeholder-tile .translation-missing-mark--en { color: #9fb2c7; }
.placeholder-tile figcaption {
  min-block-size: 2.6rem;
  padding-block-start: .75rem;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.25;
  letter-spacing: .035em;
  font-style: italic;
  color: var(--text-muted);
}
.book-title-line { display: flex; align-items: center; gap: .65rem; }
.book-title-line .work-title { margin-block-end: 0; }
.translation-missing-mark--book {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  color: #d8b476;
  opacity: .9;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.25));
}
.translation-missing-mark--book[hidden] { display: none; }
.translation-missing-mark--book svg { inline-size: 100%; block-size: 100%; }
@media (max-width: 760px) {
  .placeholder-tile .translation-missing-mark { inset-block-start: .55rem; inset-inline-end: .55rem; }
  .placeholder-tile figcaption { font-size: var(--fs-sm); }
  .book-title-line { gap: .45rem; }
  .translation-missing-mark--book { inline-size: 1.5rem; block-size: 1.5rem; }
}


/* ============================================================================
   COOKIE REJECTION PAGE — editorial alignment refinement.
   The cookie-rejection page is a short acknowledgement, not an error notice.
   Keep its typography centered, spacious and editorial rather than inheriting
   the narrow generic display-title measure.
============================================================================ */
#cookie-rejected-page .narrow-column {
  inline-size: min(100%, 58rem);
  margin-inline: auto;
  text-align: center;
}

#cookie-rejected-page #cookie-rejected-title {
  max-inline-size: 28ch;
  margin-inline: auto;
  margin-block-end: 1.15rem;
  text-wrap: balance;
}

#cookie-rejected-page #cookie-rejected-lead {
  max-inline-size: 52ch;
  margin-inline: auto;
  line-height: 1.48;
}

#cookie-rejected-page #cookie-rejected-copy {
  max-inline-size: 58ch;
  margin-inline: auto;
  margin-block-start: 1.15rem;
  line-height: 1.65;
}

#cookie-rejected-page #cookie-rejected-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-start: 2rem;
}

@media (max-width: 640px) {
  #cookie-rejected-page .narrow-column {
    inline-size: min(100%, calc(100% - 2 * var(--gutter)));
  }

  #cookie-rejected-page #cookie-rejected-title {
    max-inline-size: 20ch;
  }

  #cookie-rejected-page #cookie-rejected-lead,
  #cookie-rejected-page #cookie-rejected-copy {
    max-inline-size: 100%;
  }
}

/* Build 1083 — missing-translation reader surface is independent of the
   generic placeholder state. Keep the complete fallback as a stable,
   lineated editorial block rather than inheriting the placeholder flex box. */
#record-text.record-text--missing-translation .record-missing-translation__block {
  display: block !important;
  max-inline-size: var(--measure-narrow);
  margin: 0 auto 1.55em !important;
  text-align: start !important;
  white-space: pre-wrap !important;
  line-height: var(--lh-poetry) !important;
}
#record-text.record-text--missing-translation .record-missing-translation__separator {
  display: block !important;
  margin: 1.85em auto !important;
  text-align: center !important;
  line-height: 1 !important;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji {
  display: inline-block !important;
  inline-size: auto !important;
  block-size: auto !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  margin-inline-start: .08em;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: .82em !important;
  line-height: 1 !important;
  vertical-align: -0.08em;
  white-space: nowrap !important;
}

/* Build 1084 — final missing-translation punctuation/icon presentation.
   Scope is limited to the renderer fallback; no generic literary typography is changed. */
#record-text.record-text--missing-translation .record-missing-translation__icons {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.12em !important;
  margin-inline-start: 0.16em !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji {
  display: inline-block !important;
  inline-size: auto !important;
  block-size: auto !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 0.72em !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* BUILD 1086 — missing-translation final presentation.
   Surgical scope: only the renderer fallback. Keep separators left-aligned and
   render the mandatory snail/lettuce as deterministic tiny inline vectors. */
#record-text.record-text--missing-translation {
  display: block !important;
  min-block-size: 0 !important;
  max-inline-size: var(--measure-narrow) !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
  text-align: start !important;
  font-family: var(--font-reading) !important;
  font-size: var(--editorial-body-size) !important;
  line-height: var(--lh-poetry) !important;
  white-space: normal !important;
}
#record-text.record-text--missing-translation .record-missing-translation__block {
  display: block !important;
  max-inline-size: var(--measure-narrow) !important;
  margin: 0 auto 1.55em !important;
  text-align: start !important;
  white-space: pre-wrap !important;
  line-height: var(--lh-poetry) !important;
}
#record-text.record-text--missing-translation .record-missing-translation__block:last-child {
  margin-block-end: 0 !important;
}
#record-text.record-text--missing-translation .record-missing-translation__separator {
  display: block !important;
  inline-size: 100% !important;
  margin-block: 1.85em !important;
  margin-inline: 0 !important;
  text-align: start !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#record-text.record-text--missing-translation .record-missing-translation__icons {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .12em !important;
  margin-inline-start: .16em !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: .78em !important;
  block-size: .78em !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: -.05em !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji svg {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  overflow: visible !important;
}


/* BUILD 1088 — missing-translation icon geometry.
   Icons track the surrounding literary font height and preserve the SVG's 4:3 ratio.
   No generic typography or emoji rendering rules are changed. */
#record-text.record-text--missing-translation .record-missing-translation__emoji {
  inline-size: 1.333em !important;
  block-size: 1em !important;
  flex: 0 0 1.333em !important;
  vertical-align: -.12em !important;
}
#record-text.record-text--missing-translation .record-missing-translation__emoji svg {
  inline-size: 100% !important;
  block-size: 100% !important;
  min-inline-size: 100% !important;
  min-block-size: 100% !important;
  max-inline-size: none !important;
  max-block-size: none !important;
}


/* Build 1212 — Disclaimer approved closing artwork. */
.disclaimer-elephant{margin:clamp(2rem,5vw,4rem) auto 0;max-inline-size:min(100%,38rem);text-align:center}
.disclaimer-elephant img{display:block;inline-size:100%;block-size:auto;margin-inline:auto}


/* Build 1213 — font-first regression recovery: mobile pin, reader geometry, prose grid, route label. */
@layer layout {
  /* A .reading-column intentionally has a narrow measure, but when paired with
     .container it must retain the site's shared side gutters at every width. */
  .container.reading-column {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--measure-reading));
  }
}

@layer components {
  /* Restore the approved persistent mobile-menu pin affordance. */
  .site-header--floating .mobile-menu-pin {
    display: none;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.9rem;
    min-block-size: 1.9rem;
    padding: .2rem;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
  }
  .site-header--floating .mobile-menu-pin[aria-pressed="true"] {
    color: var(--accent-en-ink);
  }

  /* Legal/editorial prose follows the same reading standard as literary prose. */
  .prose > p,
  .essay > p,
  .article > p,
  .work-text > p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-wrap: pretty;
  }

  /* Consecutive authored dialogue turns remain one semantic paragraph but each
     speaker gets its own visual line. */
  #record-text .record-text__paragraph--dialogue .record-dialogue-turn {
    display: block;
  }

  /* Works route label must breathe before the headline/body. */
  #works-page #works-kicker {
    margin-block-end: clamp(.8rem, 2vw, 1.25rem);
  }

}

@media (max-width: 760px) {
  .site-header--floating .nav-links.is-open {
    position: relative;
    padding-block-end: 2.25rem;
  }
  .site-header--floating .nav-links.is-open .mobile-menu-pin {
    position: absolute;
    inset-inline-end: .25rem;
    inset-block-end: .25rem;
    display: inline-flex;
  }
}

/* Build 1214 — Live Preview corrections after v1213 verification. */
.disclaimer-warning {
  margin-block-start: clamp(2.25rem, 5vw, 4rem);
}
.disclaimer-warning > p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .site-header--floating .mobile-menu-pin {
    color: var(--accent-ro-ink);
  }
  .site-header--floating .mobile-menu-pin__icon {
    display: block;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    transform: rotate(-34deg);
    transform-origin: 50% 55%;
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
    opacity: .72;
  }
  .site-header--floating .mobile-menu-pin[aria-pressed="true"] {
    color: var(--accent-ro-ink);
    background: color-mix(in srgb, var(--accent-ro-ink) 10%, transparent);
    border-radius: .45rem;
  }
  .site-header--floating .mobile-menu-pin[aria-pressed="true"] .mobile-menu-pin__icon {
    transform: rotate(0deg);
    opacity: 1;
  }
}

/* Build 1215 — runtime geometry, pinned navigation, Blog, and Entropy corrections. */
:root { --header-bottom: 4rem; }

/* Disclaimer links are editorial inline links, not underlined utility controls. */
.disclaimer-warning a {
  text-decoration: none !important;
  border-block-end: 0 !important;
}

/* Blog entries use the same global literary measure, reading face, gutters, and
   editorial rhythm as the rest of the site. Normal prose is justified; verse
   preserves authored lineation. */
#blog-entry-stage .blog-blocks {
  inline-size: 100%;
  max-inline-size: var(--measure-reading);
}
.blog-paragraph,
.blog-verse {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-reading);
  font-size: var(--editorial-body-size);
  line-height: var(--lh-body);
  font-weight: 400;
}
.blog-paragraph,
.blog-card__summary {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  text-wrap: pretty;
}
.blog-verse {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.blog-separator {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: clamp(1.75rem, 4vw, 3rem);
}



/* Build 1216 — Blog geometry/emoji repair. */
/* WordPress/browser emoji substitution may emit <img class="emoji">. Keep it
   typographic rather than allowing generic responsive-image rules to inflate
   it to the width of a Blog paragraph. */
img.emoji,
img.wp-smiley,
#body-blog-entry .blog-paragraph img.emoji,
#body-blog-entry .blog-verse img.emoji {
  display: inline-block !important;
  inline-size: 1em !important;
  block-size: 1em !important;
  min-inline-size: 1em !important;
  min-block-size: 1em !important;
  max-inline-size: 1em !important;
  max-block-size: 1em !important;
  margin: 0 .06em !important;
  padding: 0 !important;
  object-fit: contain !important;
  vertical-align: -.14em !important;
}

/* Blog entries remain inside the global gutter/container system, but their
   reusable reading template must not inherit the 14ch title cap or collapse
   the article to a tiny intrinsic column. Use the site's editorial measure for
   body copy and a wider, still-controlled title measure. */
#body-blog-entry #blog-entry-stage > .container.reading-stage__header {
  inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-max)) !important;
  max-inline-size: var(--container-max) !important;
}
#body-blog-entry #blog-entry-stage > .container.reading-stage__header .work-title {
  max-inline-size: min(100%, 28ch) !important;
}
#body-blog-entry #blog-entry-stage > .container.blog-entry-frame {
  inline-size: var(--page-frame-inline) !important;
  max-inline-size: var(--container-max) !important;
}
#body-blog-entry #record-work {
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0;
}
#body-blog-entry #blog-blocks {
  inline-size: 100% !important;
  max-inline-size: var(--measure-reading) !important;
  min-inline-size: 0;
  margin-inline: auto;
}


/* Build 1217 — final Blog stabilization candidate before Version 1.1. */
/* The Blog index card used a permanent two-column grid even when a record had
   no media. On desktop the empty media track consumed most of the 62ch reading
   measure and crushed the title/summary. Only allocate that track when media
   actually exists; mobile retains the already-approved single-column layout. */
#blog-stage .blog-card > ad-rich-text,
#blog-stage .blog-card__content-link,
#blog-stage .blog-card__content-link > ad-rich-text {
  min-inline-size: 0;
}
@media (min-width: 761px) {
  #blog-stage .blog-card {
    grid-template-columns: minmax(0, 1fr);
  }
  #blog-stage .blog-card--has-media {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 20rem);
  }
  #blog-stage .blog-card--media-left {
    grid-template-columns: minmax(10rem, 20rem) minmax(0, 1fr);
  }
  #blog-stage .blog-card--media-left > .blog-card__media { grid-column: 1; grid-row: 1; }
  #blog-stage .blog-card--media-left > .blog-card__content-link { grid-column: 2; grid-row: 1; }
  #blog-stage .blog-card--media-right > .blog-card__content-link { grid-column: 1; grid-row: 1; }
  #blog-stage .blog-card--media-right > .blog-card__media { grid-column: 2; grid-row: 1; }
}

/* Give the Blog route eyebrow its own breathing room before the page title. */
#blog-stage .reading-stage__header > .eyebrow {
  margin-block-end: clamp(.6rem, 1.4vw, .9rem);
}

/* JSON-controlled Blog date labels. The source supplies literal short/full
   strings; null produces no element. Hover/focus visibly reveals the day. */
.blog-date {
  display: inline-block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  white-space: nowrap;
  cursor: help;
  outline-offset: .2rem;
}
.blog-date__full {
  display: none;
}
.blog-date:hover .blog-date__short,
.blog-date:focus-visible .blog-date__short {
  display: none;
}
.blog-date:hover .blog-date__full,
.blog-date:focus-visible .blog-date__full {
  display: inline;
}

/* Home route-specific presentation (migrated from page-shell inline CSS for cacheability). */
.home-unwritten-link{display:block;color:inherit;text-decoration:none;}
.home-entropy-card{display:block;box-sizing:border-box;overflow:visible;cursor:pointer;}
.home-entropy-card .books-hero{display:flex!important;flex-direction:column!important;position:relative!important;overflow:visible!important;isolation:isolate;}
.home-entropy-card .home-books-section-ornament{order:1;position:static!important;inset:auto!important;width:100%!important;margin-block:0 1rem!important;}
.home-entropy-card .home-entropy-copy{order:2;position:static!important;inset:auto!important;display:block!important;width:100%!important;margin:0!important;padding:0 clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.5rem)!important;transform:none!important;pointer-events:auto!important;}
.home-entropy-card .home-entropy-slogan{position:static!important;inset:auto!important;display:block!important;width:auto!important;max-width:var(--measure-reading)!important;margin:0!important;padding:0!important;transform:none!important;white-space:pre-line!important;text-align:left!important;text-justify:auto!important;hyphens:none!important;text-wrap:pretty!important;}
.home-entropy-card .home-entropy-art-link{order:3!important;position:relative!important;display:block!important;width:100%!important;margin:0!important;overflow:hidden!important;}
.home-entropy-card .books-hero__art{position:relative!important;display:block!important;width:100%!important;height:auto!important;margin:0!important;}
.home-entropy-card .books-hero__art img,.home-entropy-card .books-hero__art svg{display:block!important;width:100%!important;height:auto!important;}
.home-entropy-card .books-hero__veil{position:absolute!important;pointer-events:none!important;}


#home-fix1-archive-hero .home-archive-hero-section,
.home-archive-hero-section {
  margin-block-start: var(--site-card-gap);
}
#home-fix1-archive-hero .home-archive-hero-link,
.home-archive-hero-link {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}
#home-fix1-archive-hero .home-archive-hero-card,
.home-archive-hero-card {
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#home-fix1-archive-hero .home-archive-hero-copy,
.home-archive-hero-copy {
  position: static !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  padding: clamp(1.15rem, 2.5vw, 1.75rem) !important;
}
#home-fix1-archive-hero .home-archive-hero-cta,
.home-archive-hero-cta {
  margin-block-start: .35rem !important;
  color: var(--accent-en) !important;
  font: 500 var(--fs-sm)/1.3 var(--font-mono) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
#home-fix1-archive-hero .home-archive-hero-label,
.home-archive-hero-label {
  margin-block-start: .3rem !important;
  color: var(--ink-faint) !important;
  font-size: var(--fs-sm) !important;
  font-style: italic !important;
}
#home-fix1-archive-hero .home-archive-hero-slogan,
.home-archive-hero-slogan {
  order: 2 !important;
  margin: 0 !important;
  padding: 0 clamp(1.15rem, 2.5vw, 1.75rem) clamp(1.2rem, 2.8vw, 1.8rem) !important;
  border: 0 !important;
}
#home-fix1-archive-hero .home-archive-hero-slogan p,
.home-archive-hero-slogan p {
  margin: 0 !important;
  font-family: var(--font-reading) !important;
  font-size: clamp(1rem, 2vw, 1.22rem) !important;
  line-height: 1.55 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  text-wrap: pretty !important;
}
#home-fix1-archive-hero .home-archive-hero-slogan footer,
.home-archive-hero-slogan footer {
  margin-block-start: .7rem !important;
  color: var(--ink-faint) !important;
  font: 500 var(--fs-2xs)/1.4 var(--font-mono) !important;
  letter-spacing: .06em !important;
}
#home-fix1-archive-hero .home-archive-hero-art,
.home-archive-hero-art {
  position: static !important;
  order: 3 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-end: clamp(.9rem, 1.8vw, 1.35rem) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#home-fix1-archive-hero .home-archive-hero-art img,
.home-archive-hero-art img,
#home-fix1-archive-hero .home-archive-hero-art svg,
.home-archive-hero-art svg,
#home-fix1-archive-hero .home-archive-hero-art__mount,
.home-archive-hero-art__mount {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#home-fix1-archive-hero .home-archive-hero-art img,
.home-archive-hero-art img,
#home-fix1-archive-hero .home-archive-hero-art svg,
.home-archive-hero-art svg {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}
#home-fix1-archive-hero .home-archive-hero-art__mount,
.home-archive-hero-art__mount {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  visibility: hidden !important;
  background: transparent !important;
}
#home-fix1-archive-hero .home-archive-hero-art__mount[data-archive-art-mounted="true"],
.home-archive-hero-art__mount[data-archive-art-mounted="true"] {
  height: auto !important;
  aspect-ratio: 1727 / 690 !important;
  visibility: visible !important;
}
#home-fix1-archive-hero .home-archive-raster-stage,
.home-archive-raster-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1727 / 690 !important;
  overflow: hidden !important;
}
#home-fix1-archive-hero .home-archive-raster-layer,
.home-archive-raster-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  margin: 0 !important;
  padding: 0 !important;
}
#home-fix1-archive-hero .home-archive-raster-layer--base,
.home-archive-raster-layer--base { z-index: 1 !important; }
#home-fix1-archive-hero .home-archive-raster-layer--water,
.home-archive-raster-layer--water { z-index: 2 !important; }
#home-fix1-archive-hero .home-archive-ripple-defs,
.home-archive-ripple-defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Home head presentation consolidated into the main cacheable stylesheet. */
@media (min-width: 781px) {
  .home-hero-grid { align-items: center; }
  .home-elephant-art { object-position: center 25%; }
}

/* The Chamber is a fixed reading viewport. Long excerpts scroll inside it so
     the surrounding homepage geometry never changes between rotations. */
  #home-chamber-card { min-height: 0 !important; align-self: start; }
  #home-chamber-fragment { min-block-size: 10rem !important; block-size: 10rem !important; overflow: hidden !important; }
  #home-chamber-fragment .chamber-fragment__layer { min-block-size: 0 !important; }
  @media (max-width: 720px) {
    #home-chamber-fragment { min-block-size: 12rem !important; block-size: 12rem !important; }
  }

/* Both language artworks are embedded in the initial HTML. Only the
     language-appropriate layer is visible; switching languages never fetches
     or waits for a replacement image. */
  .home-localized-art { position:relative; display:block; inline-size:100%; aspect-ratio:4 / 3; overflow:hidden; background:var(--surface-soft); }
  .home-localized-art__image { position:absolute; inset:0; inline-size:100% !important; block-size:100%; object-fit:cover; }
  .home-localized-art--managed .home-localized-art__image { object-fit:contain; object-position:center; }
  html[lang="en"] .home-localized-art__image--ro,
  html:not([lang="ro"]) .home-localized-art__image--ro { display:none; }
  html[lang="ro"] .home-localized-art__image--en { display:none; }

/* Shell geometry belongs in the cacheable stylesheet, never inline attributes. */
.checkbox-row { margin-block: 1rem; }
#comments-notice,
#cookies-control-card { margin-block-start: 2rem; }
#preferences-theme-card { margin-block: 2rem; padding: 1.2rem; }
#preferences-font-card { padding: 1.2rem; }
#preferences-cookie-card { margin-block-start: 1rem; padding: 1.2rem; }
#preferences-theme-options,
#preferences-font-options,
#preferences-font-note { margin-block-start: 1rem; }
#search-page .field { margin-block: 2rem; }
/* Runtime-generated component layout: static presentation belongs in cacheable CSS. */
.site-footer__description { margin-block-start: .6rem; }
.site-footer__meta { margin-block-start: 2rem; }
.ad-form--comment { margin-block-start: 1rem; }
.ad-form--contact { margin-block-start: 2rem; padding: 1.25rem; }
.ad-form--archive { margin-block-start: 1rem; padding: 1rem; }
.runtime-message-card { padding: 1rem; }
.adsbygoogle { display: block; }
.home-archive-raster-layer--water { filter: url(#adArchiveRippleFilter); }
select[data-settings-font-select] option { font-size: 1.05rem; line-height: 1.4; }


/* ==========================================================================
   Chamber mobile reading viewport stabilization
   The fragment card remains fixed-height. The quote scrolls by transform inside
   its reading viewport; metadata never expands the card. The source work link
   owns a dedicated row so it cannot disappear behind the compact phone grid.
============================================================================ */
@media (max-width: 760px) {
  #home-chamber-fragment .chamber-fragment__layer {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: .55rem !important;
    overflow: hidden !important;
  }
  #home-chamber-fragment .chamber-fragment__reading {
    min-block-size: 0 !important;
    block-size: auto !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }
  #home-chamber-fragment .chamber-fragment__content {
    min-block-size: 100%;
    inline-size: 100%;
  }
  #home-chamber-fragment .chamber-fragment__aside {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "index language" "source source" !important;
    gap: .25rem .7rem !important;
    min-block-size: 0 !important;
    max-block-size: 4.6rem;
    margin: 0 !important;
    padding: .45rem 0 0 !important;
    overflow: hidden !important;
    border-inline-start: 0 !important;
    border-block-start: 1px solid var(--line) !important;
  }
  #home-chamber-fragment .chamber-fragment__index { grid-area: index; }
  #home-chamber-fragment .chamber-fragment__language { grid-area: language; text-align: end; }
  #home-chamber-fragment .chamber-fragment__source {
    grid-area: source;
    display: -webkit-box !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* The reusable rich-text control owns reading typography. Existing page CSS
   still controls geometry, but book/prose/blog support copy all follows the
   selected theme reading face and prose justification contract. */
ad-rich-text[data-mode="prose"] :where(p, .ad-rich-text__paragraph),
ad-rich-text:not([data-mode="poetry"]) :where(.record-text__paragraph, .blog-paragraph, .blog-card__summary) {
  font-family: var(--font-reading) !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

ad-rich-text[data-mode="poetry"] :where(.ad-rich-text__verse, .poem-stanza, p, blockquote) {
  text-align: start !important;
  text-justify: auto !important;
  hyphens: manual;
}

/* Hard typography contract: every non-poetry rich-text paragraph uses the
   selected reading face and full prose justification. This final rule is
   intentionally authoritative over legacy page-local paragraph alignment. */
ad-rich-text:not([data-mode="poetry"]) :where(p, .ad-rich-text__paragraph) {
  font-family: var(--font-reading) !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
}


/* ==========================================================================
   Consolidated batch contracts
============================================================================ */

/* Fix #4 — page-label rhythm. Section ornaments already own >= 1em spacing;
   the eyebrow/kicker immediately preceding a page title now has the same
   minimum rhythm everywhere except Main. */
body:not(#body-home-page) .site-main .eyebrow,
body:not(#body-home-page) .site-main .kicker {
  margin-block-end: 1em;
}

/* Fix #5 — one footer geometry everywhere. */
.site-footer .footer-grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(8rem, 1fr));
  align-items: start;
  gap: clamp(1rem, 3vw, 2rem);
}
.site-footer .site-footer__description { max-inline-size: 50ch; }
.site-footer .site-footer__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin-block-start: .25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
@media (max-width: 720px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .site-footer__meta { margin-block-start: .25rem; }
}

/* Fix #6 — blog preview action never crowds the body copy. */
.blog-card ad-rich-text > .btn,
.blog-card .blog-card__summary + .btn {
  margin-block-start: 1em;
}

/* Fix #8 — Preferences remains compact but gives justified copy enough measure
   to avoid rivers and absurd word gaps. */
#preferences-page > .container,
#preferences-page .narrow-column {
  inline-size: min(calc(100% - 2 * var(--gutter)), 54rem);
  max-inline-size: 54rem;
}
#preferences-page ad-card { min-inline-size: 0; }
#preferences-page ad-rich-text[data-mode="prose"] {
  --ad-rt-measure: min(100%, 46rem);
}
#preferences-page ad-rich-text[data-mode="prose"] :where(p, .ad-rich-text__paragraph) {
  font-size: clamp(1.03rem, .98rem + .18vw, 1.16rem) !important;
  line-height: 1.58 !important;
}
#preferences-theme-options,
#preferences-font-options {
  align-items: stretch;
}
#preferences-theme-options .btn,
#preferences-font-options .btn {
  flex: 1 1 12rem;
  white-space: normal;
}
@media (max-width: 560px) {
  #preferences-page > .container,
  #preferences-page .narrow-column { inline-size: min(calc(100% - 2 * var(--gutter)), 100%); }
  #preferences-theme-card,
  #preferences-font-card,
  #preferences-cookie-card { padding: 1rem; }
}

/* Fix #9 — Archive identity/password fields remain aligned with the existing gate. */
.ad-form--archive .field + .field { margin-block-start: .85rem; }
.ad-form--archive .field label { text-align: start; }

/* Fix #10 — dedicated Comments-page form uses Contact's card language while
   ordinary per-work comment forms remain compact. */
.ad-form--comment-page {
  margin-block-start: 1.5rem;
  padding: 1.25rem;
}
.ad-form--comment-page .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ad-form--comment-page .field--full { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .ad-form--comment-page .form-grid { grid-template-columns: 1fr; }
  .ad-form--comment-page .field--full { grid-column: auto; }
}

/* Verification/subscription feedback belongs to the page flow, not a toast. */
.verification-result { margin-block: 1rem; }
.verification-result[hidden] { display: none !important; }

/* Fix #11 — compact Affable subscription control beneath the Blog intro. */
.ad-form--subscribe {
  margin-block-start: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}
.ad-form--subscribe .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
}
.ad-form--subscribe .form-actions { margin-block-start: 0; }
.ad-form--subscribe .form-status { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .ad-form--subscribe .form-grid { grid-template-columns: 1fr; }
  .ad-form--subscribe .form-actions { margin-block-start: .75rem; }
}

/* Fix #3 — explicit Preferences link inside Privacy body copy. */
#privacy-copy .privacy-preferences-link { text-decoration: none; }
#privacy-copy .privacy-preferences-link:hover,
#privacy-copy .privacy-preferences-link:focus-visible { text-decoration: none; }


/* Blog UX, responsive Archive geometry, and
   compact subscription presentation. These rules are intentionally scoped to
   the affected surfaces so the established global reading contract remains
   unchanged. */

/* The Archive hero visually belongs to the same 52rem composition as the two
   cards above it. The artwork mount itself keeps its canonical 1727:690 ratio. */
#home-fix1-archive-hero .home-archive-hero-link,
.home-archive-hero-link {
  inline-size: min(100%, 52rem) !important;
  max-inline-size: 52rem !important;
  margin-inline: 0 !important;
}
#home-fix1-archive-hero .home-archive-hero-card,
.home-archive-hero-card {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}
@media (max-width: 760px) {
  #home-fix1-archive-hero .home-archive-hero-link,
  .home-archive-hero-link {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }
}

/* Blog subscription is an inline utility, not a second hero panel. Constrain
   both the custom-element host and generated form so inherited form geometry
   cannot stretch it across the reading header. */
#blog-stage ad-form[data-form-name="blog-subscribe"] {
  display: block;
  inline-size: min(100%, 32rem);
  max-inline-size: 32rem;
  margin-block-start: 1rem;
}
#blog-stage .ad-form--subscribe {
  inline-size: 100%;
  max-inline-size: 32rem;
  margin: 0;
  padding: .72rem .8rem .75rem;
  border-radius: var(--radius-md);
}
#blog-stage .ad-form--subscribe .form-grid {
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: .55rem .65rem;
  align-items: end;
}
#blog-stage .ad-form--subscribe .field { gap: .28rem; }
#blog-stage .ad-form--subscribe .field label {
  font-size: var(--fs-2xs);
  line-height: 1.2;
}
#blog-stage .ad-form--subscribe .field input {
  min-block-size: 2.55rem;
  block-size: 2.55rem;
  padding: .48rem .7rem;
  font-size: .95rem;
}
#blog-stage .ad-form--subscribe .form-actions {
  align-self: end;
  margin: 0;
}
#blog-stage .ad-form--subscribe .form-actions .btn {
  min-block-size: 2.55rem;
  padding: .5rem .82rem;
  white-space: nowrap;
}
#blog-stage .ad-form--subscribe .form-status {
  min-block-size: 0;
  font-size: var(--fs-xs);
}
@media (max-width: 520px) {
  #blog-stage ad-form[data-form-name="blog-subscribe"],
  #blog-stage .ad-form--subscribe { inline-size: 100%; max-inline-size: 100%; }
  #blog-stage .ad-form--subscribe .form-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (max-width: 390px) {
  #blog-stage .ad-form--subscribe .form-grid { grid-template-columns: 1fr; }
  #blog-stage .ad-form--subscribe .form-actions { justify-content: flex-start; }
}

/* Blog-entry continuity controls. */
.blog-entry-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  margin-block: clamp(2.2rem, 5vw, 3.6rem) 1.4rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line);
}
.blog-entry-nav .btn {
  min-inline-size: 0;
  white-space: normal;
  text-align: center;
}
.blog-entry-nav__previous { justify-self: start; }
.blog-entry-nav__back { justify-self: center; }
.blog-entry-nav__next { justify-self: end; }
.blog-entry-nav__empty { min-inline-size: 1px; }
@media (max-width: 560px) {
  .blog-entry-nav {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .blog-entry-nav__back { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .blog-entry-nav__previous { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .blog-entry-nav__next { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .blog-entry-nav__empty { display: block; }
}

/* Per-entry comments reuse the existing verified-comment form but keep public
   approved comments collapsed until explicitly requested. */
.blog-entry-comments {
  margin-block: 1.4rem var(--space-lg);
  padding-block-start: 1.15rem;
  border-block-start: 1px solid var(--line);
}
.blog-entry-comments__controls { display: flex; justify-content: center; }
.blog-comments-toggle {
  appearance: none;
  border: 0;
  border-block-end: 1px solid transparent;
  background: transparent;
  color: var(--accent-en-ink);
  padding: .35rem .25rem;
  font: 600 var(--fs-sm)/1.35 var(--font-mono);
  cursor: pointer;
}
.blog-comments-toggle:hover,
.blog-comments-toggle:focus-visible { border-block-end-color: currentColor; }
.blog-comments-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: .2rem;
}
.blog-approved-comments { margin-block: 1.1rem 1.3rem; }
.blog-approved-comments[hidden] { display: none !important; }
.blog-approved-comments__title {
  margin-block: 0 .8rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.blog-approved-comments__list {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-comment {
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}
.blog-comment__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem .8rem;
  margin-block-end: .45rem;
  color: var(--ink-faint);
  font: 500 var(--fs-2xs)/1.35 var(--font-mono);
}
.blog-comment__author { color: var(--ink-soft); }
.blog-comment__body {
  overflow-wrap: anywhere;
  font-family: var(--font-reading);
  font-size: var(--editorial-body-size);
  line-height: var(--lh-body);
}
.blog-entry-comments ad-form[data-form-name="comment"] { display: block; margin-block-start: .9rem; }

/* Manual AdSense may fill the reserved slot, but it does not own surrounding
   article geometry and cannot overflow the literary column. */
#body-blog-entry .blog-ad-slot {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: hidden;
  contain: layout paint;
}
#body-blog-entry .blog-ad-slot > .adsbygoogle { inline-size: 100%; max-inline-size: 100%; }

/* Entropy overlay composition, PDF-source literary
   reconciliation, and compact Archive geometry. */
.home-entropy-card .home-entropy-art-link {
  isolation: isolate;
}
.home-entropy-card .home-entropy-overlay-copy {
  position: absolute !important;
  z-index: 3 !important;
  inset-block: 0 !important;
  inset-inline-start: 0 !important;
  display: flex !important;
  align-items: center !important;
  inline-size: 33.333% !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  padding: clamp(.8rem, 2.1vw, 1.6rem) !important;
  pointer-events: none !important;
  color: var(--ink) !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface) 91%, transparent) 0%,
    color-mix(in srgb, var(--surface) 70%, transparent) 72%,
    transparent 100%);
}
.home-entropy-card .home-entropy-overlay-slogan {
  margin: 0 !important;
  padding: 0 !important;
  max-inline-size: 100% !important;
  white-space: pre-line !important;
  text-align: left !important;
  text-justify: auto !important;
  hyphens: none !important;
  font-family: var(--font-reading) !important;
  font-size: clamp(.9rem, 1.7vw, 1.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-wrap: balance !important;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--surface) 75%, transparent);
}
@media (max-width: 700px) {
  .home-entropy-card .home-entropy-overlay-copy {
    inline-size: 46% !important;
    padding: clamp(.55rem, 3.2vw, .95rem) !important;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--surface) 94%, transparent) 0%,
      color-mix(in srgb, var(--surface) 76%, transparent) 78%,
      transparent 100%);
  }
  .home-entropy-card .home-entropy-overlay-slogan {
    font-size: clamp(.72rem, 3.2vw, .96rem) !important;
    line-height: 1.28 !important;
  }
}

/* Keep the Archive image intact at its canonical 1727:690 ratio while using
   the card width more efficiently. Desktop becomes a compact text + art grid;
   phones retain the proven stacked composition. */
@media (min-width: 761px) {
  #home-fix1-archive-hero .home-archive-hero-card,
  .home-archive-hero-card {
    display: grid !important;
    grid-template-columns: minmax(15rem, 36%) minmax(0, 64%) !important;
    grid-template-rows: auto 1fr !important;
    align-items: center !important;
  }
  #home-fix1-archive-hero .home-archive-hero-copy,
  .home-archive-hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    width: auto !important;
    padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem) .55rem !important;
  }
  #home-fix1-archive-hero .home-archive-hero-slogan,
  .home-archive-hero-slogan {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    padding: 0 clamp(1rem, 2vw, 1.35rem) clamp(.9rem, 1.8vw, 1.2rem) !important;
  }
  #home-fix1-archive-hero .home-archive-hero-slogan p,
  .home-archive-hero-slogan p {
    font-size: clamp(.88rem, 1.25vw, 1rem) !important;
    line-height: 1.42 !important;
    text-align: left !important;
    text-justify: auto !important;
    hyphens: none !important;
  }
  #home-fix1-archive-hero .home-archive-hero-slogan footer,
  .home-archive-hero-slogan footer {
    margin-block-start: .45rem !important;
  }
  #home-fix1-archive-hero .home-archive-hero-art,
  .home-archive-hero-art {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 100% !important;
  }
}

/* Site-wide navigation-link underline purge.
   Text navigation uses color/border/position hover cues, never underlining. */
a:link,
a:visited,
a:hover,
a:active,
a:focus,
a:focus-visible {
  text-decoration: none !important;
}


/* Version 1.3 / Build 1234 — Privacy cookie-settings link visibility; review polish: clickable Blog cards, cookie-settings
   trigger, verification/moderation dialogs, and central Reader Comments. */
.blog-card--link {
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.blog-card--link:visited { color: inherit; text-decoration: none !important; }
.blog-card--link:hover {
  text-decoration: none !important;
  background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
  transform: translateY(-1px);
}
.blog-card--link:focus-visible {
  text-decoration: none !important;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
}
.blog-card--link :where(h2,p,div,figcaption) { color: inherit; }
.blog-card--entry { border-radius: var(--radius-md); transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.blog-card--entry:hover { background: color-mix(in srgb, var(--surface-soft) 44%, transparent); transform: translateY(-1px); }
.blog-card--entry:focus-within { background: color-mix(in srgb, var(--surface-soft) 54%, transparent); }
.blog-card--entry :where(h2,p,div,figcaption) { color: inherit; }

.privacy-cookie-settings-trigger {
  appearance: none;
  border: 0;
  border-radius: .2em;
  margin: 0;
  padding: 0 .08em;
  background: transparent;
  color: var(--accent-en);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none !important;
}
.privacy-cookie-settings-trigger:hover { color: var(--accent-en-ink); background: color-mix(in srgb,var(--accent-en) 12%,transparent); text-decoration:none !important; }
.privacy-cookie-settings-trigger:focus-visible { color: var(--accent-en-ink); outline: 2px solid var(--focus); outline-offset: 2px; text-decoration:none !important; }

.affable-status-modal { inline-size: min(100%, 36rem); }
.affable-status-message { white-space: pre-wrap; color: var(--ink-soft); }
.affable-status-actions { margin-block-start: 1.25rem; }
.btn-danger { background: color-mix(in srgb, #8d3349 86%, var(--surface)); color: #fff; border-color: transparent; }
.btn-danger:hover, .btn-danger:focus-visible { background: color-mix(in srgb, #8d3349 96%, #000); }

.reader-comments-stream {
  margin-block: 2rem 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}
.reader-comments-stream__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 500;
}
.reader-comments-stream__empty { color: var(--ink-faint); }
.reader-comments-stream__list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.reader-comment {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb,var(--surface-soft) 72%,transparent);
}
.reader-comment__meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; color:var(--ink-faint); font-family:var(--font-mono); font-size:var(--fs-2xs); }
.reader-comment__meta strong { color:var(--ink); }
.reader-comment__body { margin-block-start:.75rem; white-space:normal; }
.reader-comment__context { margin-block-start:.8rem; color:var(--ink-faint); font-size:.9em; }
.reader-comment__context a { color:var(--accent); text-decoration:none !important; }
.reader-comment__context a:hover, .reader-comment__context a:focus-visible { color:var(--ink); text-decoration:none !important; }

@media (max-width: 42rem) {
  .blog-card--link:hover { transform:none; }
  .reader-comment { padding:.9rem; }
}

/* Build 1239 — AdSense no-flash sequencing.
   The WordPress Blog-entry shell begins in --pending before first paint.
   Preserve inline width for responsive AdSense measurement, but suppress all
   block-axis geometry until Google explicitly reports a filled unit. */
#body-blog-entry .blog-ad-slot.blog-ad-slot--pending,
#body-blog-entry .blog-ad-slot.blog-ad-slot--unfilled {
  block-size: 0 !important;
  min-block-size: 0 !important;
  max-block-size: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  border-block-width: 0 !important;
  overflow: hidden !important;
}

/* Build 1239 fallback — compact chrome if the geometry controller has not yet
   run (or JavaScript is unavailable). The active shared-header controller is
   geometry-driven and may select the rc17 two-row intermediate state below
   1100px when the actual labels/font/toolbar still fit safely. */
@media (max-width: 1100px) {
  .site-header--floating .site-nav {
    flex-wrap: wrap;
  }

  .site-header--floating .nav-links {
    display: none;
    order: 4;
    inline-size: 100%;
    padding-block: .35rem .15rem;
  }

  .site-header--floating .nav-links.is-open {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-block-end: 2.25rem;
  }

  .site-header--floating .mobile-menu-toggle {
    display: inline-flex;
    order: 3;
    min-block-size: 1.9rem;
    padding: .26rem .55rem;
    font-size: .65rem;
  }

  .site-header--floating .toolbar {
    order: 2;
    margin-inline-start: auto;
  }

  .site-header--floating .brand--right {
    order: 1;
    margin-inline-start: 0;
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .site-header--floating .nav-links.is-open .mobile-menu-pin {
    position: absolute;
    inset-inline-end: .25rem;
    inset-block-end: .25rem;
    display: inline-flex;
  }

  .site-header--floating .mobile-menu-pin {
    color: var(--accent-ro-ink);
  }

  .site-header--floating .mobile-menu-pin__icon {
    display: block;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    transform: rotate(-34deg);
    transform-origin: 50% 55%;
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
    opacity: .72;
  }

  .site-header--floating .mobile-menu-pin[aria-pressed="true"] {
    color: var(--accent-ro-ink);
    background: color-mix(in srgb, var(--accent-ro-ink) 10%, transparent);
    border-radius: .45rem;
  }

  .site-header--floating .mobile-menu-pin[aria-pressed="true"] .mobile-menu-pin__icon {
    transform: rotate(0deg);
    opacity: 1;
  }
}

/* Build 1240 — server-secured Archive gate and authenticated entry room. */
.archive-lock--secure { position:relative; font-size:0; overflow:visible; }
.archive-lock__shackle { position:absolute; inline-size:2.7rem; block-size:2.2rem; border:.18rem solid var(--accent-en); border-block-end:0; border-radius:1.5rem 1.5rem 0 0; inset-block-start:1.35rem; inset-inline-start:50%; transform:translateX(-50%); opacity:.9; }
.archive-lock__keyhole { position:absolute; inline-size:.7rem; block-size:.7rem; border-radius:50%; background:var(--accent-ro); inset:50% auto auto 50%; transform:translate(-50%,-5%); box-shadow:0 1rem 0 -.23rem var(--accent-ro); }
.archive-security-note { display:flex; align-items:center; justify-content:center; gap:.55rem; margin:1.1rem 0 1.35rem; color:var(--muted); font:500 .68rem/1.4 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.archive-security-note__pulse,.archive-entry-session__dot { inline-size:.5rem; block-size:.5rem; border-radius:50%; background:var(--accent-en); box-shadow:0 0 0 .24rem color-mix(in srgb,var(--accent-en) 14%,transparent); }
.archive-honeypot { position:absolute!important; inline-size:1px!important; block-size:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
.affable-archive-login { text-align:start; margin-block-start:1rem; }
.affable-archive-login .form-actions { align-items:center; }
.archive-entry { min-block-size:70vh; }
.archive-entry-hero { max-inline-size:54rem; margin:4vh auto 2rem; text-align:center; }
.archive-entry-title { max-inline-size:44rem; margin-inline:auto; }
.archive-entry-sigil { position:relative; inline-size:8rem; block-size:8rem; margin:0 auto 1.5rem; }
.archive-entry-sigil__ring { position:absolute; inset:.55rem; border:1px solid var(--line-strong); border-radius:50%; box-shadow:inset 0 0 0 .45rem color-mix(in srgb,var(--accent-en) 5%,transparent),0 0 2.6rem color-mix(in srgb,var(--accent-en) 12%,transparent); }
.archive-entry-sigil__door { position:absolute; inline-size:2.7rem; block-size:4.2rem; inset:1.8rem auto auto 2.65rem; border:1px solid var(--accent-en); border-radius:1.4rem 1.4rem .2rem .2rem; border-block-end-color:var(--accent-ro); transform:perspective(8rem) rotateY(-18deg); }
.archive-entry-sigil__door::after { content:""; position:absolute; inline-size:.32rem; block-size:.32rem; border-radius:50%; background:var(--accent-ro); inset:2.1rem .45rem auto auto; }
.archive-entry-sigil__star { position:absolute; inset:auto .35rem .35rem auto; color:var(--accent-ro); font-size:1.1rem; }
.archive-entry-session { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.55rem .8rem; margin:1.4rem auto 0; padding:.65rem 1rem; inline-size:fit-content; max-inline-size:100%; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.archive-entry-session strong { color:var(--text); font-weight:600; }
.archive-entry-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(16rem,.75fr); gap:1rem; max-inline-size:68rem; margin:2rem auto 0; align-items:stretch; }
.archive-entry-card { padding:clamp(1.25rem,2vw,2rem); }
.archive-entry-card h2 { margin:.55rem 0 .7rem; }
.archive-entry-card--shelf { position:relative; overflow:hidden; }
.archive-entry-card--shelf::after { content:""; position:absolute; inline-size:12rem; block-size:12rem; border:1px solid color-mix(in srgb,var(--accent-en) 22%,transparent); border-radius:50%; inset:auto -5rem -6rem auto; box-shadow:0 0 0 1.7rem color-mix(in srgb,var(--accent-en) 3%,transparent),0 0 0 3.4rem color-mix(in srgb,var(--accent-ro) 2%,transparent); pointer-events:none; }
.archive-entry-empty { display:flex; align-items:center; gap:.75rem; margin-block-start:1.35rem; padding-block-start:1rem; border-block-start:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.archive-entry-empty__line { inline-size:2.2rem; block-size:1px; background:var(--accent-ro); flex:none; }
.archive-security-list { display:grid; gap:.6rem; padding:0; margin:1rem 0 1.35rem; list-style:none; color:var(--muted); }
.archive-security-list li { position:relative; padding-inline-start:1.1rem; }
.archive-security-list li::before { content:"·"; position:absolute; inset-inline-start:.15rem; color:var(--accent-en); }
.archive-logout-form { margin-block-start:auto; }
@media (max-width: 760px) {
  .archive-entry-grid { grid-template-columns:1fr; }
  .archive-entry-hero { margin-block-start:1rem; }
  .archive-entry-session { border-radius:.8rem; }
}

/* Build 1241 — universal password visibility control. */
.password-input-control {
  position: relative;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}
.password-input-control > input {
  padding-inline-end: 3.65rem !important;
}
.password-visibility-toggle {
  position: absolute;
  inset-block: .15rem;
  inset-inline-end: .15rem;
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: .58rem;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.password-visibility-toggle:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-en) 8%, transparent);
}
.password-visibility-toggle[aria-pressed="true"] {
  color: var(--accent-en);
}
.password-visibility-icon {
  inline-size: 1.22rem;
  block-size: 1.22rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.password-visibility-icon__hide { display: none; }
.password-visibility-toggle[aria-pressed="true"] .password-visibility-icon__show { display: none; }
.password-visibility-toggle[aria-pressed="true"] .password-visibility-icon__hide { display: inline; }



/* B1244 — canonical Missing Translation presentation.
   The PDF supplied on 2026-09-01 is the visual/text authority. This final
   override is intentionally isolated to fallback surfaces and does not alter
   authored literary typography. */
:is(#record-text,#blog-blocks).record-text--missing-translation {
  display: block !important;
  min-block-size: 0 !important;
  max-inline-size: var(--measure-narrow) !important;
  margin: 0 auto !important;
  text-align: start !important;
  font-family: var(--font-reading) !important;
  font-size: var(--editorial-body-size) !important;
  line-height: var(--lh-poetry) !important;
  white-space: normal !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__title,
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__block {
  display: block !important;
  max-inline-size: var(--measure-narrow) !important;
  margin-inline: 0 !important;
  text-align: start !important;
  white-space: pre-wrap !important;
  line-height: var(--lh-poetry) !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__title {
  margin-block: 0 1.15em !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__block {
  margin-block: 0 1.45em !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__block:last-child {
  margin-block-end: 0 !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__separator {
  display: block !important;
  inline-size: 4em !important;
  block-size: 2px !important;
  margin: 1.8em 0 2.1em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent-en) !important;
  opacity: .9 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__icons {
  display: inline !important;
  margin-inline-start: .22em !important;
  padding: 0 !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: .92em !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  vertical-align: -.08em !important;
  white-space: nowrap !important;
}


/* B1245 — emergency Missing Translation polish.
   Keep the full fallback joke self-contained and preserve normal literary/card
   typography outside the affected surfaces. */
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__title {
  margin-block: 0 1.25em !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}
:is(#record-text,#blog-blocks).record-text--missing-translation .record-missing-translation__separator {
  display: block !important;
  inline-size: 4em !important;
  block-size: 2px !important;
  margin: 1.8em 0 2.1em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent-en) !important;
  opacity: 1 !important;
}
.placeholder-tile figcaption.book-card__missing-translation {
  white-space: normal !important;
  line-height: 1.35 !important;
}
.placeholder-tile figcaption.book-card__missing-translation .book-card__missing-translation-line {
  display: block;
}


/* B1246 — Book chapter-card Missing Translation body.
   Copy remains centralized in missing-translation.json; this only gives the
   two status lines a compact, readable card-body treatment. */
.book-chapter__body.book-chapter__body--missing-translation {
  color: var(--text-muted);
}
.book-chapter__body.book-chapter__body--missing-translation .book-chapter__missing-translation-line {
  margin: 0 !important;
  max-inline-size: 34rem;
  line-height: 1.5;
}
.book-chapter__body.book-chapter__body--missing-translation .book-chapter__missing-translation-line + .book-chapter__missing-translation-line {
  margin-block-start: .15em !important;
}


/* v2 Site Administration boundary */
.archive-site-admin-entry{margin-top:1rem}.site-administration .site-admin-vault,.site-administration .site-admin-dashboard{margin-top:1.5rem}.site-admin-code-form,.site-admin-lock-form{margin-top:1rem}.site-admin-code-form label{display:grid;gap:.5rem;max-width:22rem}.site-admin-code-form input{font:inherit;padding:.7rem .8rem}.site-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1rem}.site-admin-card{display:grid;gap:.4rem;text-decoration:none}.site-admin-card>span:last-child{justify-self:end;text-align:right;margin-inline-end:.35rem}.site-admin-status{display:grid;gap:.35rem}.site-admin-status span{color:var(--muted)}

/* B2003 — public regression repair: Blog subscriber flow + Archive spacing. */
#blog-stage #blog-intro-rich-text{display:block;margin-block-start:1em}
#blog-stage .blog-workshop-banner{position:relative;overflow:hidden;isolation:isolate;min-block-size:clamp(7rem,16vw,9rem);margin-block:1.35rem .7rem;border:1px solid var(--line);border-radius:var(--radius,1rem);background:linear-gradient(120deg,color-mix(in srgb,var(--accent-en) 10%,transparent),transparent 42%,color-mix(in srgb,var(--accent-ro) 10%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--surface-2,var(--surface)) 92%,transparent),var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 3%,transparent)}
#blog-stage > .blog-list-frame{max-inline-size:58rem;margin-inline:auto}
#blog-stage .blog-workshop-banner::before,#blog-stage .blog-workshop-banner::after{content:"";position:absolute;inset:auto;border:1px solid color-mix(in srgb,var(--accent-en) 35%,transparent);border-radius:50%;pointer-events:none}
#blog-stage .blog-workshop-banner::before{inline-size:13rem;block-size:13rem;inset-block-start:-6.8rem;inset-inline-start:8%}
#blog-stage .blog-workshop-banner::after{inline-size:9rem;block-size:9rem;inset-block-end:-5.3rem;inset-inline-end:10%;border-color:color-mix(in srgb,var(--accent-ro) 36%,transparent)}
#blog-stage .blog-workshop-banner__orbit{position:absolute;block-size:1px;background:linear-gradient(90deg,transparent,var(--accent-en),transparent);transform-origin:center;opacity:.65}
#blog-stage .blog-workshop-banner__orbit--one{inline-size:70%;inset:34% auto auto 15%;transform:rotate(-7deg)}
#blog-stage .blog-workshop-banner__orbit--two{inline-size:54%;inset:68% auto auto 28%;transform:rotate(8deg);background:linear-gradient(90deg,transparent,var(--accent-ro),transparent)}
#blog-stage .blog-workshop-banner__spark{position:absolute;inline-size:.55rem;block-size:.55rem;border-radius:50%;inset:47% auto auto 49%;background:var(--accent-en);box-shadow:0 0 0 .4rem color-mix(in srgb,var(--accent-en) 10%,transparent),0 0 2.2rem color-mix(in srgb,var(--accent-en) 48%,transparent)}
#blog-stage .blog-workshop-banner__seam{position:absolute;inline-size:1px;block-size:70%;inset:15% auto auto 50%;background:linear-gradient(180deg,transparent,var(--accent-ro),var(--accent-en),transparent);opacity:.7}
#blog-stage .blog-subscribe-jump{display:inline-flex;align-items:center;gap:.45rem;margin-block:.2rem 0;color:var(--text);font:600 .76rem/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important;border-block-end:1px solid transparent;padding-block:.35rem}
#blog-stage .blog-subscribe-jump::after{content:"↓";color:var(--accent-ro);transition:transform .18s ease}
#blog-stage .blog-subscribe-jump:hover,#blog-stage .blog-subscribe-jump:focus-visible{text-decoration:none!important;border-block-end-color:color-mix(in srgb,var(--accent-en) 60%,transparent)}
#blog-stage .blog-subscribe-jump:hover::after,#blog-stage .blog-subscribe-jump:focus-visible::after{transform:translateY(.18rem)}
#blog-stage .blog-subscribe-destination{margin-block-start:clamp(3rem,7vw,5rem);padding-block-end:clamp(1.75rem,4vw,3rem);scroll-margin-block-start:calc(var(--header-height,6rem) + 1.5rem)}
#blog-stage .blog-subscribe-destination ad-form[data-form-name="blog-subscribe"]{display:block;margin:0}
#blog-stage .blog-subscribe-destination .ad-form--subscribe{margin:0}
.archive-access-label{text-align:center;margin:1.1rem 0 1.35rem;color:var(--muted);letter-spacing:.08em}
.affable-archive-login .archive-account-switch-note{margin-block-start:1em}


/* B2010: first-paint/header, Archive/Site Administration, managed artwork */
html.ad-header-booting ad-site-header{visibility:hidden}
.site-administration .site-admin-code-form{display:grid;grid-template-columns:minmax(0,24rem);gap:.9rem;align-items:start;margin-top:1.1rem}
.site-administration .site-admin-code-form label{display:grid;gap:.55rem;max-width:none;margin:0}
.site-administration .site-admin-code-form input{box-sizing:border-box;width:100%;margin:0}
.site-administration .site-admin-code-form .btn{justify-self:start;margin:0!important;position:static;transform:none}
.site-administration .adcm-spam-note.form-status[data-kind="success"]{color:var(--accent-gold-ink,var(--ink));background:color-mix(in srgb,var(--accent-gold) 10%,transparent);border-color:color-mix(in srgb,var(--accent-gold) 45%,var(--line));padding:.55rem .75rem;border-radius:.45rem;max-width:48rem}
#works-page .works-card__art>.works-card__art-image{display:block;width:100%;height:100%;max-height:9rem;object-fit:contain;object-position:center}
@media (max-width:42rem){.site-administration .site-admin-code-form{grid-template-columns:minmax(0,1fr)}}

/* v2.1 Book Studio — dynamic public book cards / optional ISBN */
.placeholder-tile--dynamic-book{position:relative}
.placeholder-tile--dynamic-book .book-card__title{margin-top:.7rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(1.05rem,2.1vw,1.35rem);line-height:1.15}
.placeholder-tile--dynamic-book .book-card__isbn{display:block;margin-top:.45rem;opacity:.72;letter-spacing:.045em}
.placeholder-tile--dynamic-book .book-card__isbn[hidden]{display:none}
.dynamic-book-card__art-fallback{display:grid;place-items:center;width:100%;min-height:11rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(2rem,6vw,4.5rem);letter-spacing:.12em;color:var(--text-muted);background:linear-gradient(145deg,color-mix(in srgb,currentColor 5%,transparent),transparent)}
.book-isbn{white-space:nowrap}
.book-isbn[hidden]{display:none}

/* Build 2018 / rc17 — measured three-stage shared header with an explicit
   semantic middle state. JS tries desktop first, then this exact two-row 3 + 4
   navigation grid, and uses compact only when the two-row contract itself can
   no longer fit the rendered labels/font/toolbar/brand geometry. */
html.ad-header-mode-desktop .site-header--floating .site-nav{flex-wrap:nowrap!important}
html.ad-header-mode-desktop .site-header--floating .nav-links{display:flex!important;flex-wrap:nowrap!important;order:1!important;inline-size:auto!important;padding-block:0!important;position:static!important}
html.ad-header-mode-desktop .site-header--floating .mobile-menu-toggle{display:none!important}
html.ad-header-mode-desktop .site-header--floating .toolbar{order:2!important;margin-inline-start:auto!important}
html.ad-header-mode-desktop .site-header--floating .brand--right{order:3!important;margin-inline-start:0!important;border-inline-start:1px solid var(--line)!important;padding-inline-start:.72rem!important}
html.ad-header-mode-desktop .site-header--floating .mobile-menu-pin{display:none!important}

html.ad-header-mode-wrapped .site-header--floating .site-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:auto!important;align-items:center!important;column-gap:.45rem!important}
html.ad-header-mode-wrapped .site-header--floating .toolbar{grid-column:2!important;grid-row:1!important;order:2!important;margin-inline-start:0!important}
html.ad-header-mode-wrapped .site-header--floating .brand--right{grid-column:3!important;grid-row:1!important;order:3!important;margin-inline-start:0!important;border-inline-start:1px solid var(--line)!important;padding-inline-start:.72rem!important}
html.ad-header-mode-wrapped .site-header--floating .nav-links{display:grid!important;grid-column:1!important;grid-row:1!important;order:1!important;inline-size:auto!important;min-inline-size:0!important;grid-template-columns:repeat(4,max-content)!important;grid-template-rows:repeat(2,auto)!important;justify-content:start!important;align-items:center!important;column-gap:.2rem!important;row-gap:.08rem!important;padding-block:.08rem!important;position:static!important}
html.ad-header-mode-wrapped .site-header--floating #nav-main{grid-row:1!important;grid-column:1!important}
html.ad-header-mode-wrapped .site-header--floating #nav-poetry{grid-row:1!important;grid-column:2!important}
html.ad-header-mode-wrapped .site-header--floating #nav-prose{grid-row:1!important;grid-column:3!important}
html.ad-header-mode-wrapped .site-header--floating #nav-notes{grid-row:2!important;grid-column:1!important}
html.ad-header-mode-wrapped .site-header--floating #nav-works{grid-row:2!important;grid-column:2!important}
html.ad-header-mode-wrapped .site-header--floating #nav-about{grid-row:2!important;grid-column:3!important}
html.ad-header-mode-wrapped .site-header--floating #nav-contact{grid-row:2!important;grid-column:4!important}
html.ad-header-mode-wrapped .site-header--floating .mobile-menu-toggle,
html.ad-header-mode-wrapped .site-header--floating .mobile-menu-pin{display:none!important}

/* Build 2018 / rc17 — one shared page-entry gap below the floating header.
   <ad-site-header> already reserves the runtime-measured header bottom plus the
   canonical breathing band in normal document flow. Therefore the first page
   section must not add another route-specific top padding. This makes the
   visible start gap identical for Home, Works (including Poetry/Prose/Essays),
   About, Contact, Blog and the remaining shared page shells. Internal spacing
   after the first content block remains untouched. */
.site-main > :first-child{padding-block-start:0!important}
#works-page > .container > .works-hero:first-child{padding-block-start:0!important}

html.ad-header-mode-compact .site-header--floating .site-nav{flex-wrap:wrap!important}
html.ad-header-mode-compact .site-header--floating .brand--right{order:1!important;margin-inline-start:0!important;border-inline-start:0!important;padding-inline-start:0!important}
html.ad-header-mode-compact .site-header--floating .brand-mark{padding-block-end:0!important}
html.ad-header-mode-compact .site-header--floating .toolbar{order:2!important;margin-inline-start:auto!important}
html.ad-header-mode-compact .site-header--floating .mobile-menu-toggle{display:inline-flex!important;order:3!important;min-block-size:1.9rem;padding:.26rem .55rem;font-size:.65rem}
html.ad-header-mode-compact .site-header--floating .nav-links{display:none!important;order:4!important;inline-size:100%!important;padding-block:.35rem .15rem!important}
html.ad-header-mode-compact .site-header--floating .nav-links.is-open{display:flex!important;flex-wrap:wrap!important;position:relative!important;padding-block-end:2.25rem!important}
html.ad-header-mode-compact .site-header--floating .nav-links.is-open .mobile-menu-pin{display:inline-flex!important;position:absolute;inset-inline-end:.25rem;inset-block-end:.25rem}

/* Private reader room. User-specific content remains server-rendered and private. */
.reader-portal{min-block-size:70vh}
.reader-portal-panel{max-inline-size:68rem;margin-inline:auto;display:grid;gap:2rem}
.reader-portal-welcome{max-inline-size:52rem}
.reader-portal-library,.reader-portal-notes{display:grid;gap:1rem}
.reader-portal-library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}
.reader-pdf-card{display:grid;gap:.7rem;align-content:start;padding:1.1rem}
.reader-portal-thread{display:grid;gap:.8rem}
.reader-portal-message{max-inline-size:46rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.8rem;background:color-mix(in srgb,var(--surface) 92%,transparent)}
.reader-portal-message.is-reader{margin-inline-start:auto;background:color-mix(in srgb,var(--accent-en) 8%,var(--surface))}
.reader-portal-message header{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-soft);font-size:.78rem}
.reader-portal-message p{margin-block-start:.55rem;white-space:normal}
.reader-portal-note-form{display:grid;gap:.75rem;max-inline-size:46rem}
.reader-portal-note-form label{display:grid;gap:.45rem}
.reader-portal-note-form textarea{inline-size:100%;min-block-size:8rem}

/* B2047 — Blog card teaser remains its own paragraph; extracted body continuation starts below it. */
.blog-card__summary--continuation{margin-block-start:.72em;}

/* B2048 candidate — long-form Book reader: semantic sections, bounded pages, local bookmark. */
.book-chapter-index__list{display:grid;gap:.55rem;inline-size:100%;margin:0;padding:0;list-style:none}
.book-chapter-index__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline;padding-block:.4rem;border-block-end:1px solid color-mix(in srgb,var(--line) 68%,transparent)}
.book-chapter-index__list li:last-child{border-block-end:0}.book-chapter-index__summary{grid-column:1/-1;max-inline-size:64ch;color:var(--ink-soft);font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.55}
.book-chapter__summary{max-inline-size:58ch;margin:-1rem 0 2.25rem;padding-inline-start:1rem;border-inline-start:1px solid var(--line-strong);color:var(--ink-soft);font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.6}.book-chapter__summary[hidden]{display:none}
.book-chapter--paging .book-chapter__body{opacity:.58}.book-chapter__body{transition:opacity var(--fast) var(--ease)}
.book-chapter__pager{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.8rem;align-items:center;max-inline-size:43rem;margin-block-start:2.4rem;padding-block:.9rem;border-block:1px solid var(--line)}
.book-chapter__page-button{inline-size:fit-content;min-block-size:2.2rem;padding:.38rem .7rem;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--ink-soft);font:500 var(--fs-xs)/1.2 var(--font-mono);cursor:pointer}.book-chapter__page-button:last-child{justify-self:end}.book-chapter__page-button:hover:not(:disabled),.book-chapter__page-button:focus-visible{border-color:var(--line-strong);color:var(--ink);background:color-mix(in srgb,var(--surface) 86%,var(--accent-en) 14%)}.book-chapter__page-button:disabled{opacity:.34;cursor:default}.book-chapter__page-status{text-align:center;white-space:nowrap}
.book-bookmark-tools{display:flex;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.45rem .65rem;min-inline-size:0}.book-bookmark-action,.book-bookmark-resume,.book-bookmark-remove,.book-bookmark-consent{min-block-size:2.25rem;padding:.4rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--ink-soft);font:500 var(--fs-xs)/1.2 var(--font-mono);cursor:pointer;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}.book-bookmark-action{display:inline-flex;align-items:center;gap:.55rem}.book-bookmark-action:hover:not(:disabled),.book-bookmark-action:focus-visible,.book-bookmark-resume:hover,.book-bookmark-resume:focus-visible,.book-bookmark-remove:hover,.book-bookmark-remove:focus-visible,.book-bookmark-consent:hover,.book-bookmark-consent:focus-visible{border-color:var(--line-strong);background:color-mix(in srgb,var(--surface) 88%,var(--accent-en) 12%);color:var(--ink)}.book-bookmark-action:disabled{opacity:.42;cursor:default}.book-bookmark-ribbon{position:relative;display:inline-block;inline-size:.72rem;block-size:1rem;border:1px solid currentColor;border-block-end:0;opacity:.72}.book-bookmark-ribbon::after{content:"";position:absolute;inset-inline:0;inset-block-end:-.22rem;margin-inline:auto;inline-size:.42rem;block-size:.42rem;border-inline:1px solid currentColor;border-block-end:1px solid currentColor;background:var(--surface);transform:rotate(45deg)}.book-bookmark-action.is-saved .book-bookmark-ribbon{border-color:var(--accent-en);background:color-mix(in srgb,var(--accent-en) 28%,transparent);color:var(--accent-en);opacity:1}.book-bookmark-action.is-saved .book-bookmark-ribbon::after{border-color:var(--accent-en);background:color-mix(in srgb,var(--surface) 76%,var(--accent-en) 24%)}.book-bookmark-status{flex-basis:100%;max-inline-size:52ch;text-align:end;text-transform:none;letter-spacing:.03em;line-height:1.45}
@media(max-width:780px){.book-bookmark-tools{justify-content:flex-start}.book-bookmark-status{text-align:start}.book-chapter__pager{grid-template-columns:1fr 1fr}.book-chapter__page-status{grid-column:1/-1;grid-row:1}.book-chapter__page-button{grid-row:2}.book-chapter__page-button:last-child{justify-self:end}}


/* B2050 / v2.5 QA — collapsible titled Book contents + item-level bookmark controls. */
.book-chapter-index{display:block;margin-block-end:2.5rem;border-block:1px solid var(--line);font:500 var(--fs-2xs)/1.4 var(--font-mono)}
.book-chapter-index__toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .25rem;cursor:pointer;color:var(--ink-soft);list-style:none}
.book-chapter-index__toggle::-webkit-details-marker{display:none}.book-chapter-index__toggle::after{content:"+";margin-inline-start:auto;color:var(--ink-faint);font-size:1rem}.book-chapter-index[open]>.book-chapter-index__toggle::after{content:"−"}
.book-chapter-index__toggle-hint{margin-inline-start:auto}.book-chapter-index[open] .book-chapter-index__toggle-hint{color:var(--ink)}
#book-chapter-index-list{padding-block:.35rem .75rem}.book-chapter-index__list{gap:0}
.book-chapter-index__list li{grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem}.book-chapter-index__link{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.75rem;min-width:0;align-items:baseline}.book-chapter-index__number{color:var(--ink-faint)}.book-chapter-index__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.book-chapter-index__type{white-space:nowrap}.book-chapter-index__summary{padding-inline-start:4rem}
.book-chapter__bookmark-save{position:sticky;inset-block-start:calc(var(--header-h,4rem) + 1rem);z-index:4;display:inline-flex;align-items:center;gap:.5rem;inline-size:fit-content;margin-inline-start:auto;margin-block:-.4rem .9rem;padding:.38rem .65rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink-soft);font:500 var(--fs-xs)/1.2 var(--font-mono);backdrop-filter:blur(8px)}
.book-chapter__bookmark-save:hover:not(:disabled),.book-chapter__bookmark-save:focus-visible,.book-chapter__bookmark-save.is-saved{border-color:var(--line-strong);color:var(--ink);background:color-mix(in srgb,var(--surface) 85%,var(--accent-en) 15%)}.book-chapter__bookmark-save:disabled{opacity:.42;cursor:default}
.book-bookmark-tools{justify-content:flex-end}.book-bookmark-resume{max-inline-size:min(44ch,70vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-bookmark-status:empty{display:none}
@media(max-width:780px){.book-chapter-index__summary{padding-inline-start:0}.book-chapter-index__link{grid-template-columns:2.65rem minmax(0,1fr)}.book-chapter__bookmark-save{inset-block-start:4.6rem}}


/* B2052 / QA-001 + QA-008: invariant viewport loader and Book navigation controls. */
#ad-literary-boot{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:100vh!important;margin:0!important;transform:none!important;z-index:2147482000!important}
#ad-literary-boot>svg{position:fixed!important;left:50vw!important;top:50vh!important;top:50dvh!important;margin:0!important;transform:translate(-50%,-50%)!important;transform-origin:center center!important}
#book-chapter-index,.book-chapter{scroll-margin-top:calc(var(--header-h,4rem) + 1.25rem)}
.book-chapter__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.book-chapter__back-to-contents{margin-inline-start:auto;display:inline-grid;place-items:center;width:2rem;height:2rem;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);font:700 1rem/1 var(--font-mono);cursor:pointer}
.book-chapter__back-to-contents:hover,.book-chapter__back-to-contents:focus-visible{color:var(--ink);border-color:var(--line-strong);background:color-mix(in srgb,var(--surface) 88%,var(--accent-en) 12%)}

/* B2053 / QA-011 + QA-012: scoped public copy-deterrence and exact Book landing clearance. */
[data-ad-copy-protected]{-webkit-user-select:none!important;user-select:none!important}
html[data-ad-copy-mobile="1"] [data-ad-copy-protected]{-webkit-touch-callout:none!important}
.book-chapter{scroll-margin-top:calc(var(--header-h,4rem) + 1.5em)}


/* B2055 — deterministic language-aware hyphenation. The runtime inserts only
   discretionary SOFT HYPHEN opportunities into rendered justified prose. Once
   processed, manual mode prevents OS/browser dictionaries from adding a second,
   platform-dependent set of breaks. Poetry and explicit no-hyphen surfaces are
   excluded by the runtime and never receive this marker. */
[data-ad-hyphenated] {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}


/* B2061 / RC11 — Blog card excerpts stay ragged-edge; full article prose remains justified.
   This final card-specific rule intentionally outranks the global rich-text prose contract. */
#blog-stage .blog-card__summary,
#blog-stage ad-rich-text:not([data-mode="poetry"]) .blog-card__summary {
  text-align: start !important;
  text-justify: auto !important;
  text-wrap: pretty;
}

/* B2062 / RC12 — generalized managed Card Artwork placement + Private Reading Room polish. */
@media (min-width:761px){
  #blog-stage .blog-card--media-top,#blog-stage .blog-card--media-bottom{grid-template-columns:minmax(0,1fr)!important}
  #blog-stage .blog-card--media-top>.blog-card__media{grid-column:1;grid-row:1;justify-self:center;inline-size:min(100%,28rem)}
  #blog-stage .blog-card--media-top>.blog-card__content-link{grid-column:1;grid-row:2}
  #blog-stage .blog-card--media-bottom>.blog-card__content-link{grid-column:1;grid-row:1}
  #blog-stage .blog-card--media-bottom>.blog-card__media{grid-column:1;grid-row:2;justify-self:center;inline-size:min(100%,28rem)}
}
@media (min-width:62.01rem){
  #works-page .works-card--has-managed-art.works-card--art-left,#works-page .works-card--has-managed-art.works-card--art-right{grid-template-rows:1fr;grid-template-columns:minmax(7rem,.42fr) minmax(0,1fr)}
  #works-page .works-card--has-managed-art.works-card--art-left>.works-card__art{grid-column:1;grid-row:1;border-block-end:0;border-inline-end:1px solid var(--line)}
  #works-page .works-card--has-managed-art.works-card--art-left>.works-card__body{grid-column:2;grid-row:1}
  #works-page .works-card--has-managed-art.works-card--art-right>.works-card__body{grid-column:1;grid-row:1}
  #works-page .works-card--has-managed-art.works-card--art-right>.works-card__art{grid-column:2;grid-row:1;border-block-end:0;border-inline-start:1px solid var(--line)}
}
#works-page .works-card--has-managed-art.works-card--art-bottom{grid-template-rows:auto 11rem}
#works-page .works-card--has-managed-art.works-card--art-bottom>.works-card__body{grid-row:1}
#works-page .works-card--has-managed-art.works-card--art-bottom>.works-card__art{grid-row:2;border-block-end:0;border-block-start:1px solid var(--line)}
@media (max-width:62rem){
  #works-page .works-card--has-managed-art.works-card--art-left,#works-page .works-card--has-managed-art.works-card--art-right{grid-template-columns:1fr;grid-template-rows:auto 10rem}
  #works-page .works-card--has-managed-art.works-card--art-left>.works-card__body,#works-page .works-card--has-managed-art.works-card--art-right>.works-card__body{grid-column:1;grid-row:1}
  #works-page .works-card--has-managed-art.works-card--art-left>.works-card__art,#works-page .works-card--has-managed-art.works-card--art-right>.works-card__art{grid-column:1;grid-row:2;border-inline:0;border-block-end:0;border-block-start:1px solid var(--line)}
}
.placeholder-tile-link[data-book-card-position="bottom"]>.placeholder-tile{display:grid}
.placeholder-tile-link[data-book-card-position="bottom"]>.placeholder-tile>.home-localized-art{order:2}
.placeholder-tile-link[data-book-card-position="bottom"]>.placeholder-tile>:not(.home-localized-art){order:1}
@media (min-width:761px){
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile,.placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile{display:grid;grid-template-columns:minmax(8rem,42%) minmax(0,1fr);align-items:center}
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile>.home-localized-art{grid-column:1;grid-row:1/10}
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile>:not(.home-localized-art){grid-column:2}
  .placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile>.home-localized-art{grid-column:2;grid-row:1/10}
  .placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile>:not(.home-localized-art){grid-column:1}
}
@media (max-width:760px){
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile,.placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile{display:flex;flex-direction:column}
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile>.home-localized-art,.placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile>.home-localized-art{order:2}
  .placeholder-tile-link[data-book-card-position="left"]>.placeholder-tile>:not(.home-localized-art),.placeholder-tile-link[data-book-card-position="right"]>.placeholder-tile>:not(.home-localized-art){order:1}
}
.archive-entry-hero{max-inline-size:48rem;margin:clamp(1.5rem,3vh,2.5rem) auto 2rem}
.archive-entry-title{max-inline-size:34rem;margin:.55rem auto 0!important;font-size:clamp(1.85rem,4.4vw,3rem)!important;line-height:1.04!important;text-wrap:balance}
#archive-entry-intro{display:block;max-inline-size:38rem;margin:.85rem auto 0}
#archive-entry-intro .lead{margin:0!important;font-size:clamp(1rem,.96rem + .2vw,1.16rem)!important;line-height:1.65!important;text-align:center;text-wrap:pretty}
.archive-entry-session{margin-block-start:1.05rem}
.archive-site-admin-entry{margin-block-start:.85rem}


/* B2068: bookmark/navigation responsiveness and status wording preserved. */
.book-bookmark-resume{display:inline-flex!important;align-items:center;gap:.48rem;max-width:min(100%,34rem)}.book-bookmark-resume [data-bookmark-resume-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-bookmark-resume .book-bookmark-ribbon{flex:0 0 auto}.book-chapter-index__link.is-loading{opacity:.72;cursor:progress}.book-chapter-index__link.is-loading .book-chapter-index__title::after{content:" · …"}

/* B2077: transparent 48x48 route feedback. Inline SVG avoids image-loader interception and never dims painted content. */
#ad-route-loader{position:fixed;left:50%;top:50%;z-index:2147481000;display:grid;place-items:center;inline-size:48px;block-size:48px;margin:0;transform:translate(-50%,-50%);pointer-events:none;background:transparent}
#ad-route-loader[hidden]{display:none!important}
#ad-route-loader>.ad-route-loader__svg{display:block;inline-size:48px;block-size:48px;overflow:visible;filter:drop-shadow(0 4px 14px rgba(0,0,0,.20))}
/* RC26 owner-QA repair: stable, explicit Book navigation feedback. */
.book-chapter-index__list li{position:relative;border-radius:.38rem;transition:background-color .12s ease,border-color .12s ease}
.book-chapter-index__list li:hover,.book-chapter-index__list li:focus-within{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.book-chapter-index__link{border-radius:.28rem;cursor:pointer;outline:none}
.book-chapter-index__link:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#8fb6ff) 72%,transparent)}
.book-chapter-index__link.is-active,.book-chapter-index__link[aria-current="location"]{font-weight:700}
.book-chapter-index__list li:has(.book-chapter-index__link.is-active),.book-chapter-index__list li:has(.book-chapter-index__link[aria-current="location"]){background:color-mix(in srgb,var(--accent,#8fb6ff) 12%,transparent);border-block-end-color:color-mix(in srgb,var(--accent,#8fb6ff) 32%,var(--line))}
.blog-entry-back-inline{margin-block:.85rem 0}
.blog-entry-back-inline__link{display:inline-flex;align-items:center;gap:.45rem;min-height:2.25rem}