@layer reset, base, theme, layout, components, utilities;

@layer reset {
  :where(
    html, body, div, span, header, nav, main, section, article, aside, footer,
    h1, h2, h3, h4, p, blockquote, figure, figcaption, ul, ol, li, dl, dt, dd,
    a, button, canvas, svg, small, strong, em, code, pre
  ) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(ul, ol) {
    list-style: none;
  }

  :where(button) {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
    text-decoration: none;
  }
}

@layer theme {
  :root {
    color-scheme: light;

    /* Tier 1 & 2: Pure White & Carbon Ink Tokens */
    --surface-paper: #ffffff;
    --surface-subtle: #f7f7f6;
    --surface-hover: #f2f2f0;
    --ink-primary: #0a0a0a;
    --ink-secondary: #3d3d3d;
    --ink-muted: #6e6e6e;

    /* Architectural Hairlines */
    --line-strong: 1px solid #0a0a0a;
    --line-fine: 1px solid rgba(10, 10, 10, 0.16);
    --line-dashed: 1px dashed rgba(10, 10, 10, 0.28);

    /* Typography Families */
    --font-serif: "Instrument Serif", "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
    --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Layout Metrics */
    --container-max: 86rem;
    --header-height: 3.75rem;
    --gutter: clamp(1.25rem, 3vw, 2.75rem);
    --reader-scale: 1;
  }
}

@layer base {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    html {
      scroll-behavior: smooth;
    }
  }

  html {
    background-color: var(--surface-paper);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    background-color: var(--surface-paper);
    color: var(--ink-primary);
    min-block-size: 100dvh;
    overflow-x: clip;
    text-align: start;
  }

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

  :where(a:any-link, button):focus-visible {
    outline: 2px solid var(--ink-primary);
    outline-offset: 3px;
  }

  :where(p, li, blockquote) {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
}

@layer layout {
  .architectural-shell {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    border-inline: var(--line-fine);
    background-color: var(--surface-paper);
    position: relative;
  }

  /* Top Sticky Hairline Bar */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-block-end: var(--line-strong);
  }

  .header-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    min-block-size: var(--header-height);
    padding-inline: var(--gutter);
    border-inline: var(--line-fine);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  /* Hairline Section Frame with Intersection Registration Marks */
  .grid-section {
    border-block-end: var(--line-strong);
    position: relative;
  }

  .grid-section::before,
  .grid-section::after {
    content: "";
    position: absolute;
    bottom: -4.5px;
    inline-size: 8px;
    block-size: 8px;
    pointer-events: none;
    background:
      linear-gradient(var(--ink-primary), var(--ink-primary)) center / 1px 100% no-repeat,
      linear-gradient(var(--ink-primary), var(--ink-primary)) center / 100% 1px no-repeat;
    z-index: 2;
  }

  .grid-section::before {
    inset-inline-start: -4.5px;
  }

  .grid-section::after {
    inset-inline-end: -4.5px;
  }

  .section-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    padding-inline: var(--gutter);
    border-block-end: var(--line-fine);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
  }
}

@layer components {
  /* Scroll Progress 1px Ink Hairline */
  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--ink-primary);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;

    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: scroll()) {
        animation: grow-scroll-line auto linear;
        animation-timeline: scroll(root block);
      }
    }
  }

  @keyframes grow-scroll-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* Brand & Header Navigation */
  .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    min-block-size: 28px;
  }

  .brand-node {
    inline-size: 7px;
    block-size: 7px;
    border: var(--line-strong);
    background-color: var(--ink-primary);
    display: inline-block;
    transition: transform 0.35s ease, background-color 0.35s ease;
  }

  .brand-mark:hover .brand-node {
    transform: rotate(45deg);
    background-color: var(--surface-paper);
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .nav-links {
    display: none;
    align-items: center;
    gap: 1.5rem;
  }

  @media (min-width: 56rem) {
    .nav-links {
      display: flex;
    }
  }

  .nav-links a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    padding-block: 0.35rem;
    position: relative;
    min-block-size: 28px;
    display: inline-flex;
    align-items: center;
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 2px;
    block-size: 1px;
    background-color: var(--ink-primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-links a:hover::after {
    transform: scaleX(1);
  }

  .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding-block: 0.4rem;
    padding-inline: 0.75rem;
    border: var(--line-strong);
    background-color: var(--surface-paper);
    color: var(--ink-primary);
    min-block-size: 30px;
    transition: background-color 0.22s ease, color 0.22s ease;
  }

  .lang-switch:hover {
    background-color: var(--ink-primary);
    color: var(--surface-paper);
  }

  /* HERO BLUEPRINT */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: calc(92dvh - var(--header-height));
  }

  @media (min-width: 62rem) {
    .hero-grid {
      grid-template-columns: 1.15fr 0.85fr;
    }
  }

  .hero-copy-cell {
    padding: clamp(2rem, 5vw, 4.5rem) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    border-block-end: var(--line-fine);
  }

  @media (min-width: 62rem) {
    .hero-copy-cell {
      border-block-end: 0;
      border-inline-end: var(--line-strong);
    }
  }

  .kicker-line {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .kicker-line::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background-color: var(--ink-primary);
    display: inline-block;
  }

  .hero-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.4rem, 1.8rem + 6.8vw, 7.2rem);
    line-height: 0.96;
    letter-spacing: -0.02em;
    margin-block-start: 1.25rem;
    margin-block-end: 1.5rem;
  }

  .etymology-tag {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-muted);
    padding-block: 0.5rem;
    border-block: var(--line-fine);
    display: inline-block;
    margin-block-end: 1.75rem;
  }

  .hero-lead {
    font-family: var(--font-body-serif);
    font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.6rem);
    line-height: 1.45;
    color: var(--ink-primary);
    max-inline-size: 46ch;
    margin-block-end: 1.25rem;
  }

  .hero-statement {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ink-secondary);
    max-inline-size: 54ch;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-block-start: 1rem;
  }

  .btn-architectural {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
    padding-inline: 1.35rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: var(--line-strong);
    min-block-size: 44px;
    transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease;
  }

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

  .btn-architectural.primary:hover {
    background-color: var(--surface-paper);
    color: var(--ink-primary);
  }

  .btn-architectural.secondary {
    background-color: var(--surface-paper);
    color: var(--ink-primary);
  }

  .btn-architectural.secondary:hover {
    background-color: var(--surface-hover);
  }

  /* HERO INTERACTIVE TOPOLOGY CELL */
  .hero-diagram-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--surface-paper);
    position: relative;
  }

  .diagram-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-block-end: var(--line-fine);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
  }

  .topology-mode-group {
    display: inline-flex;
    border: var(--line-fine);
  }

  .topology-mode-btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding-block: 0.35rem;
    padding-inline: 0.65rem;
    min-block-size: 28px;
    color: var(--ink-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .topology-mode-btn:not(:last-child) {
    border-inline-end: var(--line-fine);
  }

  .topology-mode-btn[aria-pressed="true"] {
    background-color: var(--ink-primary);
    color: var(--surface-paper);
  }

  .topology-stage {
    position: relative;
    flex: 1;
    min-block-size: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image:
      linear-gradient(to right, rgba(10, 10, 10, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
  }

  .topology-canvas {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .diagram-footer {
    padding-block: 0.85rem;
    padding-inline: 1.25rem;
    border-block-start: var(--line-fine);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-secondary);
  }

  /* § 01 SCROLLYTELLING AXIOMS */
  .scrolly-layout {
    display: grid;
    grid-template-columns: 1fr;

    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        timeline-scope: --tl-axiom-1, --tl-axiom-2, --tl-axiom-3;
      }
    }
  }

  @media (min-width: 58rem) {
    .scrolly-layout {
      grid-template-columns: 0.9fr 1.1fr;
    }
  }

  .scrolly-sticky-pane {
    padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
    border-block-end: var(--line-fine);
  }

  @media (min-width: 58rem) {
    .scrolly-sticky-pane {
      position: sticky;
      top: var(--header-height);
      align-self: start;
      min-block-size: calc(100dvh - var(--header-height));
      border-block-end: 0;
      border-inline-end: var(--line-strong);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .section-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
    line-height: 1.06;
    text-wrap: balance;
    margin-block-end: 1rem;
  }

  .section-intro {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-secondary);
    max-inline-size: 52ch;
  }

  /* Geometric SVG Morph Plate in Sticky Pane */
  .axiom-plate-frame {
    margin-block-start: 2rem;
    border: var(--line-fine);
    padding: 1.5rem;
    aspect-ratio: 1 / 0.82;
    max-inline-size: 26rem;
    display: grid;
    place-items: center;
    position: relative;
    background-color: var(--surface-paper);
  }

  .axiom-svg {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 16rem;
  }

  .axiom-layer {
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
  }

  .axiom-layer:not(:first-child) {
    opacity: 0.11;
  }

  .axiom-plate-code {
    margin-block-end: 0;
  }

  .scrolly-track {
    display: flex;
    flex-direction: column;
  }

  .axiom-step-card {
    padding: clamp(2.25rem, 5vw, 4.5rem) var(--gutter);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 22rem;
  }

  .axiom-step-card:not(:last-child) {
    border-block-end: var(--line-fine);
  }

  .axiom-draw-rule {
    block-size: 1px;
    inline-size: 100%;
    background-color: var(--ink-primary);
    margin-block-end: 1.5rem;
    transform-origin: 0 50%;

    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        animation: draw-hairline auto linear both;
        animation-timeline: view(block);
        animation-range: entry 10% cover 42%;
      }
    }
  }

  @keyframes draw-hairline {
    from { transform: scaleX(0.06); opacity: 0.25; }
    to { transform: scaleX(1); opacity: 1; }
  }

  .axiom-step-card:nth-child(1) {
    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        view-timeline: --tl-axiom-1 block;
      }
    }
  }

  .axiom-step-card:nth-child(2) {
    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        view-timeline: --tl-axiom-2 block;
      }
    }
  }

  .axiom-step-card:nth-child(3) {
    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        view-timeline: --tl-axiom-3 block;
      }
    }
  }

  .axiom-code {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-block-end: 0.75rem;
  }

  .axiom-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.4rem);
    line-height: 1.15;
    margin-block-end: 1rem;
  }

  .axiom-body {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--ink-secondary);
    max-inline-size: 56ch;
    margin-block-end: 1.5rem;
  }

  .axiom-formula {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    padding-block: 0.45rem;
    padding-inline: 0.8rem;
    border: var(--line-fine);
    background-color: var(--surface-subtle);
  }

  /* § 02 LA CADENA (8-LINK ARCHITECTURAL MATRIX) */
  .chain-header {
    padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--gutter);
    border-block-end: var(--line-fine);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .chain-header .section-heading {
    margin-block-end: 0;
  }

  @media (min-width: 56rem) {
    .chain-header {
      grid-template-columns: 1fr 1fr;
      align-items: end;
    }
  }

  .chain-matrix {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
  }

  @media (min-width: 42rem) {
    .chain-matrix {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 68rem) {
    .chain-matrix {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .chain-node-cell {
    padding: 1.85rem var(--gutter);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.35rem;
    min-block-size: 15.5rem;
    border-block-end: var(--line-fine);
    transition: background-color 0.25s ease;

    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        animation: reveal-cell auto linear both;
        animation-timeline: view(block);
        animation-range: entry 5% cover 32%;
      }
    }
  }

  @media (min-width: 42rem) and (max-width: 67.99rem) {
    .chain-node-cell:nth-child(odd) {
      border-inline-end: var(--line-fine);
    }
    .chain-node-cell:nth-last-child(-n + 2) {
      border-block-end: 0;
    }
  }

  @media (min-width: 68rem) {
    .chain-node-cell:not(:nth-child(4n)) {
      border-inline-end: var(--line-fine);
    }
    .chain-node-cell:nth-child(n + 5) {
      border-block-end: 0;
    }
  }

  .chain-node-cell:hover {
    background-color: var(--surface-subtle);
  }

  @keyframes reveal-cell {
    from {
      opacity: 0.2;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .chain-node-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .chain-step-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
  }

  .chain-glyph {
    inline-size: 22px;
    block-size: 22px;
    stroke: var(--ink-primary);
    stroke-width: 1;
    fill: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .chain-node-cell:hover .chain-glyph {
    transform: rotate(45deg) scale(1.1);
  }

  .chain-node-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.15;
    margin-block-end: 0.55rem;
  }

  .chain-node-summary {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-secondary);
  }

  /* § 03 RESEARCH AXES */
  .research-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .research-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .research-axis-card {
    padding: clamp(1.85rem, 3.5vw, 2.85rem) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border-block-end: var(--line-fine);
    transition: background-color 0.25s ease;
  }

  @media (min-width: 56rem) {
    .research-axis-card:nth-child(odd) {
      border-inline-end: var(--line-fine);
    }
    .research-axis-card:nth-last-child(-n + 2) {
      border-block-end: 0;
    }
  }

  .research-axis-card:hover {
    background-color: var(--surface-subtle);
  }

  .axis-code {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
  }

  .axis-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
    line-height: 1.18;
  }

  .axis-question {
    font-family: var(--font-body-serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink-primary);
    padding-inline-start: 0.9rem;
    border-inline-start: var(--line-strong);
    margin-block: 0.25rem;
  }

  .axis-detail {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--ink-secondary);
    max-inline-size: 56ch;
  }

  /* § 04 LIVING BOOK INDEX TABLE */
  .book-showcase-header {
    padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--gutter);
    border-block-end: var(--line-fine);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .edition-badge-box {
    border: var(--line-strong);
    padding-block: 0.65rem;
    padding-inline: 1rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
  }

  .edition-badge-label {
    display: block;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: 0.2rem;
  }

  .chapter-index-list {
    display: flex;
    flex-direction: column;
  }

  .chapter-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.65rem var(--gutter);
    align-items: center;
    transition: background-color 0.22s ease;
  }

  .chapter-row:not(:last-child) {
    border-block-end: var(--line-fine);
  }

  @media (min-width: 54rem) {
    .chapter-row {
      grid-template-columns: 5rem 1fr auto;
      gap: 2rem;
    }
  }

  .chapter-row.is-published:hover {
    background-color: var(--surface-subtle);
  }

  .chapter-num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
  }

  .chapter-row.is-published .chapter-num {
    color: var(--ink-primary);
    font-weight: 600;
  }

  .chapter-row-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
    line-height: 1.2;
    margin-block-end: 0.35rem;
  }

  .chapter-row-sub {
    font-size: 0.92rem;
    color: var(--ink-secondary);
    max-inline-size: 62ch;
  }

  .chapter-row.is-draft {
    opacity: 0.66;
  }

  .chapter-meta-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-block: 0.35rem;
    padding-inline: 0.7rem;
    border: var(--line-fine);
  }

  .status-pill.published {
    border: var(--line-strong);
  }

  .status-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    border: var(--line-strong);
  }

  .status-pill.published .status-dot {
    background-color: var(--ink-primary);
  }

  .chapter-read-link {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-block: 0.5rem;
    padding-inline: 0.9rem;
    border: var(--line-strong);
    background-color: var(--ink-primary);
    color: var(--surface-paper);
    min-block-size: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .chapter-read-link:hover {
    background-color: var(--surface-paper);
    color: var(--ink-primary);
  }

  /* § 05 CONTACT & COLOPHON */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .contact-grid {
      grid-template-columns: 1.15fr 0.85fr;
    }
  }

  .contact-main-cell {
    padding: clamp(2.25rem, 5vw, 4rem) var(--gutter);
    border-block-end: var(--line-fine);
  }

  @media (min-width: 56rem) {
    .contact-main-cell {
      border-block-end: 0;
      border-inline-end: var(--line-fine);
    }
  }

  .contact-side-cell {
    padding: clamp(2.25rem, 5vw, 4rem) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
  }

  .author-name-display {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    line-height: 1.15;
  }

  .author-role-display {
    font-size: 0.9rem;
    color: var(--ink-secondary);
    margin-block-start: 0.25rem;
  }

  .email-display-box {
    border: var(--line-strong);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .email-display-box .axiom-code {
    margin-block-end: 0;
  }

  .email-address-link {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
    word-break: break-all;
    border-block-end: var(--line-fine);
    padding-block-end: 0.5rem;
    min-block-size: 32px;
    display: inline-flex;
    align-items: center;
  }

  .email-address-link:hover {
    color: var(--ink-secondary);
  }

  .copy-email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .btn-copy-mini {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-block: 0.35rem;
    padding-inline: 0.7rem;
    border: var(--line-fine);
    min-block-size: 30px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .btn-copy-mini:hover {
    background-color: var(--surface-hover);
    border-color: var(--ink-primary);
  }

  .copy-status {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
  }

  .site-footer {
    padding-block: 1.5rem;
    padding-inline: var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-muted);
  }

  .site-footer a {
    color: var(--ink-primary);
    border-block-end: var(--line-fine);
  }

  /* =========================================================
     LIVING BOOK READER LAYOUT (HTML MONOGRAPH EDITION)
     ========================================================= */
  .reader-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .reader-tool-btn {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding-block: 0.35rem;
    padding-inline: 0.6rem;
    border: var(--line-fine);
    min-block-size: 30px;
    min-inline-size: 30px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .reader-tool-btn:hover {
    background-color: var(--surface-hover);
    border-color: var(--ink-primary);
  }

  .book-reader-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (min-width: 68rem) {
    .book-reader-grid {
      grid-template-columns: 16.5rem minmax(0, 1fr) 16rem;
    }
  }

  .book-left-rail {
    padding: 2rem 1.5rem;
    border-block-end: var(--line-fine);
  }

  @media (min-width: 68rem) {
    .book-left-rail {
      position: sticky;
      top: var(--header-height);
      align-self: start;
      max-block-size: calc(100dvh - var(--header-height));
      overflow-y: auto;
      border-block-end: 0;
      border-inline-end: var(--line-fine);
    }
  }

  .rail-back-wrap {
    margin-block-end: 1.5rem;
  }

  .rail-back-link {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-block-end: var(--line-fine);
    padding-block-end: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 28px;
  }

  .rail-heading {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-block-end: 0.85rem;
  }

  .rail-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-block-end: 2rem;
  }

  .rail-list a,
  .rail-draft-item {
    font-size: 0.83rem;
    line-height: 1.4;
    display: block;
    padding-block: 0.25rem;
    color: var(--ink-secondary);
  }

  .rail-list a.is-current {
    color: var(--ink-primary);
    font-weight: 600;
    padding-inline-start: 0.6rem;
    border-inline-start: 2px solid var(--ink-primary);
  }

  .rail-list a:hover {
    color: var(--ink-primary);
  }

  .rail-draft-item {
    color: var(--ink-muted);
    opacity: 0.65;
  }

  .book-article-column {
    padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 3.75rem);
  }

  .chapter-header-block {
    padding-block-end: 2.25rem;
    margin-block-end: 2.5rem;
    border-block-end: var(--line-strong);
    max-inline-size: 66ch;
  }

  .chapter-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-block-end: 1rem;
  }

  .chapter-main-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.35rem, 1.7rem + 2.6vw, 3.6rem);
    line-height: 1.08;
    text-wrap: balance;
    margin-block-end: 1rem;
  }

  .chapter-subtitle {
    font-family: var(--font-body-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.32rem);
    line-height: 1.5;
    color: var(--ink-secondary);
  }

  /* Monograph Body Prose */
  .book-prose {
    font-family: var(--font-body-serif);
    font-size: calc(1.14rem * var(--reader-scale));
    line-height: 1.78;
    color: var(--ink-primary);
    max-inline-size: 65ch;
  }

  .book-prose > p {
    margin-block-end: 1.45em;
  }

  .book-prose > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    float: inline-start;
    font-size: 3.6em;
    line-height: 0.84;
    padding-inline-end: 0.22em;
    padding-block-start: 0.06em;
  }

  .book-prose h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.75em;
    line-height: 1.2;
    margin-block-start: 2.25em;
    margin-block-end: 0.75em;
    padding-block-start: 1.15em;
    border-block-start: var(--line-fine);
    text-wrap: balance;
  }

  .book-prose h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .book-prose hr {
    border: 0;
    margin-block: 2.25em;
  }

  .book-prose blockquote {
    margin-block: 2em;
    padding-block: 1.1rem;
    padding-inline-start: 1.35rem;
    border-inline-start: 2px solid var(--ink-primary);
    border-block: var(--line-fine);
    font-style: italic;
    font-size: 1.08em;
    line-height: 1.6;
    background-color: var(--surface-subtle);
  }

  .book-prose blockquote p {
    margin-block-end: 0;
  }

  .book-prose ul,
  .book-prose ol {
    margin-block-end: 1.6em;
    padding-inline-start: 1.35rem;
  }

  .book-prose ul {
    list-style: square;
  }

  .book-prose ol {
    list-style: decimal;
  }

  .book-prose li {
    margin-block-end: 0.65em;
  }

  .prose-axiom-box {
    border: var(--line-strong);
    padding: 1.25rem 1.4rem;
    margin-block: 1.45em;
    background-color: var(--surface-paper);
  }

  .prose-axiom-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-block-end: 0.45rem;
  }

  .prose-axiom-text {
    font-family: var(--font-body-serif);
    font-size: 0.98em;
    line-height: 1.62;
  }

  .prose-inline-note {
    border: var(--line-fine);
    border-inline-start: var(--line-strong);
    padding: 0.95rem 1.15rem;
    margin-block: 1.4em;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-secondary);
    background-color: var(--surface-subtle);
  }

  @media (min-width: 68rem) {
    .prose-inline-note {
      display: none;
    }
  }

  .prose-inline-note-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-primary);
    margin-block-end: 0.3rem;
  }

  /* Right Marginalia Column (Desktop Monograph Sidenotes) */
  .book-right-rail {
    display: none;
  }

  @media (min-width: 68rem) {
    .book-right-rail {
      display: block;
      padding: 4.25rem 1.5rem 2rem;
      border-inline-start: var(--line-fine);
    }
  }

  .marginalia-card {
    padding-block-end: 1.25rem;
    margin-block-end: 1.5rem;
    border-block-end: var(--line-fine);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ink-secondary);
  }

  .marginalia-card-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-primary);
    margin-block-end: 0.35rem;
  }

  .living-edition-callout {
    margin-block-start: 3.25rem;
    padding: 1.35rem;
    border: var(--line-dashed);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-secondary);
    max-inline-size: 65ch;
  }

  .living-edition-callout strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-primary);
    margin-block-end: 0.4rem;
  }

  .inline-mail-link {
    border-block-end: var(--line-strong);
  }

  @media (pointer: coarse) {
    :where(.lang-switch, .topology-mode-btn, .btn-copy-mini, .reader-tool-btn, .rail-back-link) {
      min-block-size: 40px;
    }

    .reader-tool-btn {
      min-inline-size: 40px;
    }
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link:focus {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background-color: var(--ink-primary);
    color: var(--surface-paper);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
}

@media print {
  .site-header,
  .scroll-progress,
  .book-left-rail,
  .site-footer,
  .hero-actions {
    display: none !important;
  }

  .architectural-shell,
  .grid-section {
    border: 0 !important;
  }

  .book-reader-grid {
    display: block !important;
  }

  .book-article-column {
    padding: 0 !important;
  }

  .prose-inline-note {
    display: block !important;
  }

  .book-right-rail {
    display: none !important;
  }
}