/* Page composition for why.html, the framework's long read. One reading column with a margin for the
   part labels, a reading-progress bar driven by scroll (no script), pull quotes and one wide figure. */
@layer page {
  .wy-progress { position: fixed; z-index: 30; inset-block-start: 0; inset-inline: 0; block-size: .5rem; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
  @supports (animation-timeline: scroll()) {
    .wy-progress { animation: wy-read linear both; animation-timeline: scroll(root); }
  }
  @keyframes wy-read { to { transform: scaleX(1); } }
  .wy { --wy-gap: 4rem; --wy-rail: calc((var(--scale-units) * 1rem - 2 * var(--space-inline) - 2 * var(--wy-gap)) * 2 / 12); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); column-gap: var(--wy-gap); row-gap: 4rem; padding-block: 8rem 6rem; }
  .wy-head { grid-column: 2 / -1; display: grid; gap: 1.6rem; }
  .wy-kicker { color: var(--accent); font-weight: 650; }
  .wy h1 { font-size: 7rem; line-height: 1.02; letter-spacing: -.02em; }
  .wy-dek { font-size: 2.4rem; line-height: 1.45; color: var(--muted); max-inline-size: 78rem; }
  .wy-meta { color: var(--muted); }
  .wy-toc { grid-column: 1; grid-row: 2; position: sticky; inset-block-start: 14rem; align-self: start; display: grid; gap: 1rem; padding-block-start: 1rem; border-block-start: .3rem solid var(--ink); }
  .wy-toc p { color: var(--muted); }
  .wy-toc ol { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: part; }
  .wy-toc li { counter-increment: part; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
  .wy-toc li::before { content: counter(part); color: var(--accent); font-weight: 650; }
  .wy-toc a { color: var(--ink); text-decoration: none; }
  .wy-toc a:hover { text-decoration: underline; }
  .wy-body { grid-column: 2; grid-row: 2; font-size: 2rem; line-height: 1.72; }
  .wy-body > * + * { margin-block-start: 2.6rem; }
  .wy-lede::first-letter { float: inline-start; margin: .5rem 1.2rem 0 0; font-size: 9rem; line-height: .8; font-weight: 700; color: var(--accent); }
  .wy-body { counter-reset: part; }
  .wy-h { counter-increment: part; margin-block: 8rem 3rem; font-size: 3.6rem; line-height: 1.15; letter-spacing: -.01em; scroll-margin-block-start: 14rem; }
  .wy-h::before { content: counter(part); display: block; margin-block-end: .8rem; font-size: var(--small-size); color: var(--accent); letter-spacing: .08em; }
  .wy-body > .wy-h + * { margin-block-start: 0; }
  .wy-pull { margin-block: 6rem; margin-inline: -6rem -10rem; padding-inline-start: 3rem; border-inline-start: .6rem solid var(--accent); }
  .wy-pull p { font-size: 4rem; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
  .wy-figure { position: relative; z-index: 1; margin-block: 6rem; margin-inline: calc(-1 * (4rem + 6rem)) calc(-1 * (var(--wy-gap) + 16rem)); padding: 3rem; border-radius: var(--radius); background: var(--surface); }
  .wy-shots { display: grid; grid-template-columns: 1024fr 1440fr 3840fr; gap: 1.6rem; align-items: end; }
  .wy-shots img { display: block; inline-size: 100%; block-size: auto; border-radius: .6rem; border: .1rem solid var(--line); }
  .wy-fig-label { font-size: var(--small-size); font-weight: 650; }
  .wy-fig-label + .wy-shots { margin-block-start: 1rem; }
  .wy-shots + .wy-fig-label { margin-block-start: 3rem; }
  .wy-figure figcaption { margin-block-start: 2rem; font-size: var(--small-size); color: var(--muted); }
  .wy-margin { float: inline-end; clear: inline-end; inline-size: var(--wy-rail); margin-inline-end: calc(-1 * (var(--wy-rail) + var(--wy-gap))); margin-block: .6rem 2rem; }
  .wy-crawl-t { margin-block-end: .8rem; font-size: 1.3rem; font-weight: 650; }
  .wy-mini { display: grid; gap: .6rem; margin-block-end: 2rem; padding: 1rem 1.1rem; border: .1rem solid var(--line); border-radius: .6rem; background: var(--paper); font-size: .9rem; line-height: 1.5; white-space: nowrap; overflow: hidden; }
  .wy-mini-h { font-weight: 700; font-size: 1.15rem; }
  .wy-code { margin: 0; padding: 1rem 1.2rem; border-radius: .6rem; background: var(--surface); border: .1rem solid var(--line); font-size: .85rem; line-height: 1.5; color: var(--muted); max-inline-size: 100%; }
  .wy-margin figcaption { margin-block-start: 1rem; font-size: var(--small-size); line-height: 1.5; color: var(--muted); }
  .wy-wrap { float: inline-end; inline-size: 30rem; margin: .8rem 0 2rem 3.6rem; padding: 2rem; border-radius: var(--radius); background: var(--surface); }
  .wy-wrap { text-wrap: pretty; }
  .wy-stacks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.6rem; align-items: start; }
  .wy-stacks > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
  .wy-stack-t { margin-block-end: .8rem; font-size: 1.3rem; line-height: 1.3; font-weight: 650; }
  .wy-stack { display: grid; align-content: start; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: 1.2rem; line-height: 1.3; }
  .wy-stack li { padding: .5rem .8rem; border-radius: .3rem; background: var(--paper); border: .1rem solid var(--line); }
  .wy-stack .is-later { border-style: dashed; background: transparent; color: var(--muted); }
  .wy-stack .is-you { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; }
  .wy-wrap figcaption { margin-block-start: 1.4rem; font-size: 1.3rem; line-height: 1.45; color: var(--muted); }
  .wy-sloth { display: flex; justify-content: flex-end; margin-block: 2rem -10.3rem; margin-inline-end: -8rem; pointer-events: none; }
  .wy-sloth svg { inline-size: 20rem; block-size: auto; }
  .wy-last { margin-block-start: 0; padding-block-start: 3rem; border-block-start: .3rem solid var(--ink); font-size: 3.4rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
  .wy-next { grid-column: 2; display: grid; gap: 1.2rem; padding-block-start: 4rem; }
  @media (width <= 50em) {
    .wy { grid-template-columns: minmax(0, 1fr); padding-block: 5rem 4rem; }
    .wy-head, .wy-body, .wy-next, .wy-toc { grid-column: 1; }
    .wy-toc { grid-row: auto; position: static; }
    .wy-body { grid-row: auto; font-size: 2.3rem; }
    .wy h1 { font-size: 5rem; }
    .wy-dek { font-size: 2.6rem; }
    .wy-pull { margin-inline: 0; padding-inline-start: 2rem; }
    .wy-pull p { font-size: 3.2rem; }
    .wy-figure { margin-inline: 0; padding: 2rem; }
    .wy-margin { float: none; inline-size: auto; margin: 3rem 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; }
    .wy-margin > :nth-child(1) { grid-column: 1; grid-row: 1; } .wy-margin > .wy-mini { grid-column: 1; grid-row: 2; }
    .wy-margin > :nth-child(3) { grid-column: 2; grid-row: 1; } .wy-margin > .wy-code { grid-column: 2; grid-row: 2; }
    .wy-margin figcaption { grid-column: 1 / -1; }
    .wy-crawl-t { font-size: var(--small-size); }
    .wy-mini { font-size: 1.4rem; }
    .wy-mini-h { font-size: 1.7rem; }
    .wy-code { font-size: 1.2rem; }
    .wy-wrap { float: none; inline-size: auto; margin: 3rem 0; }
    .wy-stack-t, .wy-stack, .wy-wrap figcaption { font-size: var(--small-size); }
    .wy-h { font-size: 3.4rem; margin-block-start: 6rem; }
    .wy-sloth { margin-inline-end: 0; margin-block-end: -8.24rem; }
    .wy-sloth svg { inline-size: 16rem; }
    .wy-last { font-size: 3rem; padding-inline-end: 12rem; }
  }
  @media (height <= 30em) {
    .wy h1 { font-size: min(7rem, 11vh); }
    .wy { padding-block-start: 2.4rem; }
    .wy-toc { inset-block-start: 2rem; }
    .wy-h { scroll-margin-block-start: 2rem; }
  }
}