.il-page { --il-title: clamp(2.75rem, 5.4vw, 5rem); --il-section: clamp(1.75rem, 3vw, 2.75rem); --il-route-title: 1.125rem; --il-rail: 12rem; }
.il-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s16); align-items: center; padding-block: var(--s24); }
.il-identity { color: var(--mint); font-size: .875rem; margin-bottom: var(--s6); }
.il-hero h1 { font-size: var(--il-title); line-height: 1.2; letter-spacing: -.035em; }
.il-lede { max-width: 42ch; color: var(--muted); font-size: var(--lead); margin-block: var(--s8); }
.il-route { margin: 0; padding: var(--s8); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.il-route ol { padding: 0; margin: 0; list-style: none; counter-reset: route; }
.il-route li { counter-increment: route; display: grid; grid-template-columns: var(--s8) 1fr; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); }
.il-route li::before { content: counter(route, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--mint); font-size: .875rem; padding-top: var(--s1); }
.il-route li:last-child { border: 0; }
.il-route strong { font: 500 var(--il-route-title)/1.5 var(--display); display: block; }
.il-route li span { color: var(--muted); font-size: .875rem; }
.il-route figcaption { padding-top: var(--s6); margin-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.il-layout { display: grid; grid-template-columns: var(--il-rail) minmax(0, 1fr); gap: var(--s16); padding-bottom: var(--s24); }
.il-toc { align-self: start; position: sticky; top: calc(var(--header-height) + var(--s8)); padding-top: var(--s8); border-top: 1px solid var(--line); }
.il-toc p { color: var(--muted); font-size: .875rem; margin-bottom: var(--s4); }
.il-toc a { display: flex; align-items: center; min-height: 44px; font-size: .875rem; gap: var(--s3); transition: color var(--fast) var(--ease); }
.il-toc a::before { content: '↗'; color: var(--mint); transition: transform var(--fast) var(--ease); }
.il-toc a:hover { color: var(--mint); }
.il-toc a:hover::before { transform: translate(2px,-2px); }
.il-chapter { padding-block: var(--s12) var(--s16); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + var(--s8)); }
.il-chapter h2 { font-size: var(--il-section); line-height: 1.3; margin-bottom: var(--s8); }
.il-chapter h3 { font-size: var(--il-route-title); line-height: 1.5; margin-bottom: var(--s3); }
.il-chapter p { max-width: 68ch; color: var(--muted); }
.il-chapter p + p { margin-top: var(--s4); }
.il-byline { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: .875rem; margin-bottom: var(--s8); color: var(--muted); }
.il-question { font: 400 clamp(1.5rem,2.8vw,2.25rem)/1.5 var(--display); color: var(--ink) !important; max-width: 32ch !important; margin-bottom: var(--s8); }
.il-method { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s12); }
.il-method li { border-top: 1px solid var(--line-soft); padding-top: var(--s6); }
.il-method p { font-size: 1rem; }
.il-media { margin-top: var(--s8); }
.il-media video { display: block; width: 100%; aspect-ratio: 16/9; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.il-media figcaption { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s8); padding-block: var(--s6); color: var(--muted); font-size: .875rem; }
.il-media figcaption strong { display: block; color: var(--ink); font-weight: 500; }
.il-ledger { margin: 0; }
.il-ledger > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s8); padding-block: var(--s6); border-bottom: 1px solid var(--line-soft); }
.il-ledger dt { font: 500 1rem/1.6 var(--display); }
.il-ledger dd { margin: 0; color: var(--muted); }
.il-ledger dd strong { display: block; color: var(--mint); font-weight: 500; margin-bottom: var(--s2); }
.il-limits { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s12); }
.il-limits details { border-block: 1px solid var(--line-soft); padding-block: var(--s4); margin-top: var(--s8); }
.il-limits summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; gap: var(--s4); color: var(--ink); }
.il-limits details p { font-size: .875rem; padding-block: var(--s4); }
.il-reference { display: block; min-height: 44px; padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); color: var(--mint); }
.il-reference:hover { text-decoration: underline; text-underline-offset: var(--s1); }
.il-reference span { display: block; color: var(--muted); font-size: .875rem; margin-top: var(--s2); }
.il-next { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s16); display: flex; justify-content: space-between; gap: var(--s8); flex-wrap: wrap; }
@media(max-width:1000px) { .il-hero { gap: var(--s8); padding-block: var(--s16); } .il-layout { grid-template-columns: minmax(0,1fr); gap: var(--s8); } .il-toc { position: static; display: flex; flex-wrap: wrap; gap: 0 var(--s6); padding-top: var(--s4); } .il-toc p { width: 100%; margin-bottom: 0; } }
@media(max-width:700px) { .il-hero { grid-template-columns: minmax(0,1fr); padding-block: var(--s12); gap: var(--s8); } .il-route { padding: var(--s6); } .il-hero h1 { font-size: clamp(2.5rem,9vw,3.5rem); } .il-lede { margin-block: var(--s6); } .il-chapter { padding-block: var(--s8) var(--s12); } .il-method, .il-limits { grid-template-columns: minmax(0,1fr); } .il-media figcaption { grid-template-columns: minmax(0,1fr); gap: var(--s3); } .il-ledger > div { grid-template-columns: minmax(0,1fr); gap: var(--s2); } }
@media(prefers-reduced-motion:reduce) { .il-toc a, .il-toc a::before { transition: none; } }