@layer sections {
  .reading {
    --spread-gap: clamp(1.75rem, 0.9rem + 2.8vw, 3.75rem);
    --reading-measure: 66ch;
    --reading-size: clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);
    --reading-leading: 1.72;
    --numeral-gutter: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
    --entry-excerpt-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    counter-reset: entry-number;
  }

  .reading-cover {
    padding-top: clamp(0.25rem, 0.1rem + 0.8vw, 1rem);
    padding-bottom: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  }

  .reading-cover__bar {
    display: flex;
    align-items: center;
    column-gap: var(--space-m);
  }

  .reading-cover__rule {
    flex: 1 1 2rem;
    height: 1px;
    background: var(--line);
    transform-origin: left center;
  }

  .reading-cover__series {
    display: none;
    flex: none;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-muted);
  }

  .reading-cover__grid {
    display: grid;
    gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) var(--grid-gap);
    margin-top: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  }

  .reading-cover__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.875rem;
    margin-bottom: clamp(0.5rem, 0.3rem + 1vw, 1rem);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .reading-cover__time {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--ink-muted);
  }

  .reading-cover__time::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 1px;
    background: var(--line-strong);
  }

  .reading-cover__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.05rem + 4.2vw, 5rem);
    font-weight: var(--weight-display);
    line-height: 1.02;
    letter-spacing: var(--tracking-display);
  }

  .reading-cover__line {
    display: block;
    overflow: hidden;
    margin: -0.1em -0.04em -0.16em;
    padding: 0.1em 0.04em 0.16em;
  }

  .reading-cover__line-text {
    display: inline-block;
  }

  .reading-cover__line em {
    font-weight: var(--weight-light);
    color: var(--ink-accent);
  }

  .reading-cover__lead {
    max-width: 46ch;
    margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
    padding-top: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem);
    border-top: 1px solid var(--line-rose);
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.68vw, 1.5rem);
    font-weight: 480;
    line-height: 1.46;
    letter-spacing: -0.004em;
    color: var(--ink);
    text-wrap: pretty;
  }

  .reading-cover__margin {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  }

  .reading-cover__sprig {
    display: none;
    align-self: flex-end;
    width: 5.5rem;
    height: auto;
    aspect-ratio: 260 / 462;
    color: var(--ink-sage);
  }

  .reading-cover__note {
    padding-top: var(--space-s);
    border-top: 1px solid var(--line);
  }

  .reading-cover__text {
    max-width: 38ch;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .reading-cover__text + .reading-cover__text {
    margin-top: var(--space-2xs);
  }

  .reading-cover__text--muted {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-muted);
  }

  .question {
    padding-top: var(--space-s);
    border-top: 1px solid var(--line);
  }

  .reading-cover__spoken {
    display: grid;
    gap: 0.4rem;
    margin-top: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
    padding-left: var(--space-m);
    border-left: 2px solid var(--accent);
  }

  .reading-cover__spoken-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .reading-cover__spoken-text {
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
    font-style: italic;
    font-weight: 480;
    line-height: 1.32;
    letter-spacing: -0.006em;
    color: var(--ink);
    text-wrap: pretty;
  }

  .question__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .question__text {
    max-width: 34ch;
    margin-top: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-style: italic;
    line-height: 1.42;
    color: var(--ink);
    text-wrap: pretty;
  }

  .plate {
    --print-ratio: 3 / 4;
  }

  .plate__caption {
    margin-top: var(--space-xs);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .reading-cover__rule {
    display: none;
  }

  .spread {
    padding-bottom: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  }

  .spread__inner {
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-strong);
  }

  .essay {
    counter-reset: essay-section;
  }

  .essay__section,
  .register__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m) var(--spread-gap);
    padding-block: clamp(1.75rem, 1.15rem + 2.2vw, 2.875rem);
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
  }

  .essay__section + .essay__section,
  .register__group + .register__group {
    border-top: 1px solid var(--line);
  }

  .essay__section {
    counter-increment: essay-section;
  }

  .essay__flow,
  .essay__margin,
  .register__body,
  .register__plate {
    grid-column: 1;
  }

  .register__plate {
    --print-ratio: 3 / 2;
    --image-focus: 50% 45%;
    max-height: 12rem;
    overflow: clip;
  }

  .register__plate .print__frame {
    max-height: 12rem;
  }

  .register__plate .plate__caption {
    margin-top: var(--space-2xs);
  }

  .essay__heading {
    position: relative;
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.14rem + 0.92vw, 1.9375rem);
    font-weight: var(--weight-heading);
    line-height: 1.18;
    letter-spacing: var(--tracking-title);
    text-wrap: balance;
  }

  .essay__numeral,
  .register__numeral {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    font-variant-numeric: oldstyle-nums;
    font-weight: var(--weight-heading);
    letter-spacing: 0.06em;
    color: var(--ink-accent);
  }

  .essay__numeral::before {
    content: counter(essay-section, decimal-leading-zero);
  }

  .essay__text {
    max-width: var(--reading-measure);
    font-size: var(--reading-size);
    line-height: var(--reading-leading);
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .essay__heading + .essay__text {
    margin-top: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  }

  .essay__text + .essay__text {
    text-indent: 1.5em;
  }

  .essay__list {
    max-width: 54ch;
    margin-top: clamp(1.1rem, 0.85rem + 0.9vw, 1.7rem);
  }

  .essay__heading + .essay__list {
    margin-top: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  }

  .essay__list-label {
    margin-bottom: var(--space-3xs);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .essay__items {
    border-bottom: 1px solid var(--line-faint);
  }

  .essay__item {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
    padding-block: 0.6rem;
    border-top: 1px solid var(--line-faint);
    font-size: var(--reading-size);
    line-height: 1.5;
    color: var(--ink);
    text-wrap: pretty;
  }

  .essay__item:first-child {
    border-top-color: var(--line);
  }

  .essay__item::before {
    content: "";
    width: 0.75rem;
    height: 1px;
    margin-top: 0.72em;
    background: var(--accent);
  }

  .essay__quote {
    max-width: 32rem;
    margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    padding-block: clamp(1.1rem, 0.85rem + 0.9vw, 1.7rem);
    border-top: 1px solid var(--line-rose);
    border-bottom: 1px solid var(--line-rose);
  }

  .essay__quote p {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1rem + 1.25vw, 2.125rem);
    font-style: italic;
    font-weight: var(--weight-display);
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-indent: -0.42em;
    text-wrap: pretty;
  }

  .essay__figure {
    max-width: 30rem;
    margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  }

  .marginal {
    max-width: 34ch;
    padding-left: var(--space-s);
    border-left: 1px solid var(--line);
  }

  .marginal + .marginal {
    margin-top: var(--space-m);
  }

  .marginal__label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .marginal__text {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .marginal__link {
    margin-top: var(--space-3xs);
  }

  .colophon {
    margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-strong);
  }

  .colophon__text {
    max-width: 56ch;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .colophon__label {
    margin-right: 0.625rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .register__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.35rem + 1.55vw, 2.5rem);
    font-weight: var(--weight-display);
    line-height: 1.12;
    letter-spacing: var(--tracking-title);
    text-wrap: balance;
  }

  .register__hint {
    max-width: 34ch;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-style: italic;
    line-height: 1.45;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .register__head {
    position: relative;
  }

  .register__rows {
    margin-top: clamp(1.1rem, 0.85rem + 0.9vw, 1.75rem);
  }

  .entry {
    counter-increment: entry-number;
  }

  .entry__link {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: baseline;
    min-height: 2.75rem;
    padding-block: clamp(0.8rem, 0.6rem + 0.6vw, 1.15rem);
    border-top: 1px solid var(--line-faint);
    transition: color var(--duration-base) ease;
  }

  .entry:first-child .entry__link {
    border-top-color: var(--line);
  }

  .entry:last-child .entry__link {
    border-bottom: 1px solid var(--line-faint);
  }

  .entry__numeral::before {
    content: counter(entry-number, decimal-leading-zero);
  }

  .entry__numeral {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    font-variant-numeric: oldstyle-nums;
    color: var(--ink-accent);
  }

  .entry__head {
    grid-column: 2;
    grid-row: 1;
    font-weight: var(--weight-heading);
  }

  .entry__title {
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: var(--weight-heading);
    line-height: 1.2;
    letter-spacing: -0.012em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--duration-slow) var(--ease-out-expo);
  }

  .entry__leader {
    display: none;
    flex: 1 1 2rem;
    height: 1px;
    min-width: 2rem;
    background: var(--line);
    translate: 0 -0.3em;
  }

  .entry__time {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .entry__excerpt {
    grid-column: 2;
    grid-row: 3;
    max-width: 60ch;
    margin-top: 0.3rem;
    font-size: var(--entry-excerpt-size);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .entry--stub .entry__link {
    color: var(--ink-muted);
  }

  .entry--stub .entry__title {
    color: var(--ink-soft);
  }

  .entry--stub .entry__time {
    font-style: normal;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }

  .contents__hint {
    display: none;
    grid-column: 2;
  }

  .contents__count {
    display: none;
    grid-column: 2;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-style: italic;
    font-variant-numeric: oldstyle-nums;
    color: var(--ink-muted);
  }

  .reading-foot {
    padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  }

  .reading-foot__inner {
    display: grid;
    gap: clamp(2rem, 1.4rem + 2.4vw, 3rem) var(--spread-gap);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-strong);
  }

  .foot-block__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .foot-block__title {
    max-width: 22ch;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
    font-weight: var(--weight-display);
    line-height: 1.15;
    letter-spacing: var(--tracking-title);
    text-wrap: balance;
  }

  .foot-block__text {
    max-width: 48ch;
    margin-top: var(--space-s);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .foot-block__list {
    margin-top: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
  }

  .foot-block__more {
    margin-top: var(--space-s);
  }

  .invitation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
    margin-top: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  }

  .invitation__note {
    margin-top: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-muted);
  }

  @media (hover: hover) {
    .entry__link:hover {
      color: var(--ink-accent);
    }

    .entry__link:hover .entry__title {
      background-size: 100% 1px;
    }

    .entry__link:hover .entry__leader {
      background: var(--accent-soft);
    }
  }

  @media not all and (min-width: 48em) {
    .reading-foot {
      padding-bottom: calc(clamp(3rem, 2rem + 4vw, 5.5rem) + var(--quick-bar-height));
    }
  }

  @media (min-width: 30em) {
    .reading-cover__series {
      display: block;
    }
  }

  @media (min-width: 48em) {
    .reading-cover__rule {
      display: block;
    }

    .reading-cover__grid {
      grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
      align-items: start;
    }

    .reading--index .reading-cover__grid {
      align-items: end;
    }

    .reading-cover__sprig {
      display: block;
    }

    .plate {
      --print-ratio: 4 / 5;
    }

    .essay__section,
    .register__group {
      grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
      align-items: start;
    }

    .essay__flow,
    .register__body {
      grid-column: 1;
      grid-row: 1;
    }

    .essay__margin,
    .register__plate {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
    }

    .register__plate,
    .register__plate .print__frame {
      max-height: 22rem;
    }

    .entry__link {
      grid-template-columns: 2.25rem minmax(0, auto) minmax(2rem, 1fr) auto;
    }

    .entry__leader {
      display: block;
      grid-column: 3;
      grid-row: 1;
      align-self: center;
      translate: 0;
    }

    .entry__time {
      grid-column: 4;
      grid-row: 1;
    }

    .entry__excerpt {
      grid-column: 2 / -1;
      grid-row: 2;
    }

    .essay__flow,
    .register__body,
    .colophon {
      padding-left: var(--numeral-gutter);
    }

    .essay__numeral,
    .register__numeral {
      position: absolute;
      left: calc(var(--numeral-gutter) * -1);
      top: 0.3em;
      margin: 0;
    }

    .register__numeral {
      top: 0.42em;
    }

    .marginal {
      max-width: none;
    }

    .reading-foot__inner {
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      align-items: start;
    }

    .foot-block--invitation {
      padding-left: var(--spread-gap);
      border-left: 1px solid var(--line);
    }
  }

  @media (min-width: 64em) {
    .reading-cover__lead {
      font-size: clamp(1.3125rem, 1.05rem + 0.68vw, 1.5rem);
    }

    .register__plate,
    .register__plate .print__frame {
      --print-ratio: 4 / 5;
      max-height: none;
    }
  }

  @media (min-width: 75em) {
    .spread__inner {
      display: grid;
      grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
      column-gap: var(--spread-gap);
      align-items: start;
    }

    .reading-contents {
      position: sticky;
      top: calc(var(--header-height) + var(--space-l));
      z-index: 0;
      align-self: start;
      max-height: calc(100svh - var(--header-height) - var(--space-2xl));
      margin-bottom: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .contents__hint {
      display: block;
      margin-top: 0.2rem;
      font-size: var(--text-ui);
      line-height: 1.45;
      color: var(--ink-muted);
      text-wrap: pretty;
    }

    .contents__count {
      display: block;
      margin-top: 0.15rem;
    }

    .reading--article .reading-cover__grid {
      align-items: end;
    }

    .reading-foot__inner {
      padding-left: calc(13rem + var(--spread-gap));
    }

    .essay__section,
    .register__group {
      grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    }

    .marginal {
      max-width: 17rem;
    }

    .register__plate {
      max-width: 16rem;
    }

    .reading-cover__margin .plate {
      max-width: 20rem;
    }
  }

  @media (min-width: 64em) and (max-height: 50em) {
    .reading-cover__title {
      font-size: min(clamp(2.5rem, 1.05rem + 4.2vw, 5rem), 12svh);
    }

    .reading-cover__grid {
      margin-top: clamp(0.75rem, 2.4svh, 2rem);
    }

    .reading-cover {
      padding-bottom: clamp(1.25rem, 3svh, 2.25rem);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .reading-cover__rule {
      animation: rule-grow 1.6s var(--ease-out-expo) 0.2s both;
    }

    .reading-cover__eyebrow {
      animation: rise-in 1.1s var(--ease-out-expo) 0.05s both;
    }

    .reading-cover__time::before {
      animation: rule-grow 1.2s var(--ease-out-expo) 0.3s both;
    }

    .reading-cover__line-text {
      animation: line-rise 1.3s var(--ease-out-expo) 0.15s both;
    }

    .reading-cover__line:nth-child(2) .reading-cover__line-text {
      animation-delay: 0.27s;
    }

    .reading-cover__lead {
      animation: rise-in 1.2s var(--ease-out-expo) 0.55s both;
    }

    .reading-cover__margin {
      animation: rise-in 1.2s var(--ease-out-expo) 0.7s both;
    }
  }
}