@layer elements {

  /* ── PAGE GRID OVERRIDE (reading layouts) ────────────────────────────── */
  .page--essay {
    grid-template-columns:
      var(--nav-width)
      1fr
      var(--marginalia-width)
      var(--gap);
  }

  .page--essay .main { grid-column: 2 / 4; }

  /* ── ESSAY HEADER ────────────────────────────────────────────────────── */
  .essay-header {
    padding: 80px 0 64px;
    max-width: var(--measure);
  }

  .essay-header__meta {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    align-items: center;
  }

  .essay-header__meta::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-rule);
  }

  .essay-header__number { color: var(--color-accent); }

  .essay-header__title {
    font-size: var(--size-3xl);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: 28px;
    max-width: 20ch;
  }

  .essay-header__subtitle {
    font-size: var(--size-lg);
    font-weight: 400;
    font-style: italic;
    color: var(--color-ink-mid);
    line-height: var(--leading-loose);
    max-width: 48ch;
    margin-bottom: 40px;
  }

  .essay-header__divider {
    width: 100%;
    height: 1px;
    background: var(--color-rule);
  }

  /* ── EPIGRAPH ────────────────────────────────────────────────────────── */
  .epigraph {
    max-width: var(--measure);
    padding: 40px 0 48px;
    border-bottom: 1px solid var(--color-rule);
  }

  .epigraph blockquote {
    font-style: italic;
    font-size: var(--size-md);
    color: var(--color-ink-mid);
    line-height: var(--leading-loose);
    margin-bottom: 6px;
  }

  .epigraph blockquote + blockquote { margin-top: 28px; }

  .epigraph footer {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
    text-align: right;
  }

  .epigraph footer cite { font-style: italic; }

  /* ── SIDENOTE COUNTER ────────────────────────────────────────────────── */
  article { counter-reset: sidenote-counter; }

  label.sidenote-ref {
    counter-increment: sidenote-counter;
    cursor: pointer;
    display: inline;
  }

  label.sidenote-ref::after {
    content: counter(sidenote-counter);
    font-family: var(--font-mono);
    font-size: 0.62em;
    font-weight: 500;
    color: var(--color-accent);
    vertical-align: super;
    line-height: 0;
    margin-left: 1px;
    letter-spacing: 0;
  }

  input.margin-toggle { display: none; }

  label.margin-toggle-sym {
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.85em;
    margin-left: 2px;
    display: none;
  }

  /* ── ESSAY BODY ──────────────────────────────────────────────────────── */
  .essay-body {
    display: grid;
    grid-template-columns: var(--measure) var(--marginalia-width);
    column-gap: var(--gap);
    padding: 56px 0 120px;
  }

  .essay-body > * { grid-column: 1; }

  .essay-body p {
    margin-bottom: 1.4em;
    hanging-punctuation: first;
  }

  .essay-body p + p { text-indent: 1.5em; margin-top: 0; }

  .essay-body h2 {
    font-size: var(--size-xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    text-indent: 0;
  }

  .essay-body h3 {
    font-family: var(--font-mono);
    font-size: var(--size-sm);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-mid);
    margin-top: 2em;
    margin-bottom: 0.75em;
    text-indent: 0;
  }

  .essay-body blockquote {
    border-left: 2px solid var(--color-accent);
    padding: 4px 0 4px 24px;
    margin: 2em 0;
    font-style: italic;
    font-size: var(--size-md);
    color: var(--color-ink-mid);
    line-height: var(--leading-loose);
  }

  .essay-body blockquote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
  }

  .essay-body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .essay-body a:hover { color: var(--color-accent-warm); }

  /* ── MARGINALIA ──────────────────────────────────────────────────────── */
  .margin-note {
    grid-column: 2;
    align-self: start;
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    line-height: 1.7;
    color: var(--color-ink-mid);
    padding: 12px 14px;
    background: var(--color-block-bg);
    border-left: 2px solid var(--color-rule);
  }

  .margin-note__num {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    color: var(--color-accent);
    margin-right: 3px;
  }

  .margin-note__label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 6px;
  }

  .margin-note--link .margin-note__label { color: var(--color-accent); }

  .margin-note a { color: var(--color-accent); text-decoration: none; }
  .margin-note a:hover { text-decoration: underline; }

  .margin-note--pull {
    background: transparent;
    border-left: none;
    border-top: 1px solid var(--color-rule);
    padding: 14px 0 0;
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--size-sm);
    color: var(--color-ink);
    line-height: 1.6;
  }

  /* ── ESSAY FOOTER ────────────────────────────────────────────────────── */
  .essay-footer {
    max-width: var(--measure);
    padding: 48px 0 80px;
    border-top: 1px solid var(--color-rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .essay-footer__meta {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--color-ink-muted);
    line-height: 1.8;
  }

  .essay-footer__meta strong {
    display: block;
    color: var(--color-ink-mid);
    font-weight: 400;
    margin-bottom: 4px;
  }

  .essay-footer__nav { display: flex; gap: 32px; }

  .essay-footer__nav a {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    text-decoration: none;
  }

  .essay-footer__nav a:hover { color: var(--color-accent); }

  /* ── READING PROGRESS ────────────────────────────────────────────────── */
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-rule);
    z-index: 100;
  }

  .reading-progress__bar {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 0.1s linear;
  }

  /* ── RESPONSIVE: tablet — collapse marginalia ────────────────────────── */
  @media (max-width: 1024px) {
    .page--essay { grid-template-columns: var(--nav-width) 1fr 0 0; }
    .essay-body { grid-template-columns: 1fr; }

    .margin-note { display: none; }
    label.sidenote-ref::after { text-decoration: underline; text-decoration-color: var(--color-accent); }
    label.margin-toggle-sym { display: inline; }

    input.margin-toggle:checked + .margin-note {
      display: block;
      grid-column: 1;
      margin: 0.5em 0 1.2em;
      width: 100%;
    }

    input.margin-toggle:checked + .margin-note--pull {
      background: transparent;
      border-left: none;
      border-top: 1px solid var(--color-rule);
      padding: 12px 0;
    }
  }

  /* ── RESPONSIVE: mobile — collapse nav ──────────────────────────────── */
  @media (max-width: 768px) {
    .page--essay { grid-template-columns: 1fr; }
    .essay-header { padding: 48px 0 40px; }
    .essay-header__title { font-size: var(--size-2xl); }
  }

}