/* THE LIFECYCLE (AR-1 preview). House tokens only, so day and night both hold.
   One accent (--brand) means one thing: this is Aesthetary's own. */
.lc-strip ol { display: flex; flex-wrap: wrap; gap: .25rem .25rem; margin: 0 0 2.5rem; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
/* The Elements page's row is this strip too (2026-10-09); with script its links are filter buttons (aria-pressed). */
.lc-strip button { appearance: none; background: none; border: 0; border-radius: 0; font: inherit; cursor: pointer; }
.lc-strip a, .lc-strip button { display: inline-flex; gap: .4rem; align-items: baseline; padding: .55rem .7rem .6rem; min-height: 2.25rem; text-decoration: none; color: var(--ink-2); font-size: var(--t-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lc-strip a i, .lc-strip button i { font: normal var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-strip a:hover, .lc-strip button:hover { color: var(--ink); }
.lc-strip a[aria-current="page"], .lc-strip button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brand); }

.lc-head { margin: 0 0 3rem; max-width: 48rem; }
.lc-kicker { margin: 0 0 .75rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-kicker a { color: var(--ink-2); }
.lc-h1 { margin: 0 0 1rem; font-family: var(--display); font-size: var(--t-page-h1); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.lc-head--skill .lc-h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 20ch; }
.lc-job { margin: 0; font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }

.lc-sec { margin: 0 0 3.5rem; }
.lc-h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1.25rem; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.lc-h2 span, .lc-h2 i { font: normal var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-quiet { margin: 0 0 1rem; color: var(--ink-2); max-width: 52ch; }

/* cards: the source label first, then the skill */
.lc-grid, .lc-shelf { margin: 0; padding: 0; list-style: none; }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.lc-shelf { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
.lc-shelf > li { flex: 0 0 clamp(15rem, 24vw, 19rem); scroll-snap-align: start; }
.lc-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: var(--paper-deep); border: 1px solid var(--rule); transition: border-color .16s ease; }
.lc-card:hover { border-color: var(--rule-firm); }
.lc-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--rule); }
.lc-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1rem 1.15rem; }
.lc-src { font: var(--t-xs) var(--mono); color: var(--ink-3); margin: 0; }
.lc-src--ours { color: var(--brand); }
.lc-card__t { font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.lc-card__o { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.lc-card--ext { background: transparent; border-style: dashed; }
/* CONTRIBUTOR CREDIT (lane V2, 2026-11-01): a contributor's lesson carries the author's own mark and name where an
   Original says "Aesthetary Original". The mark is the author's SVG inlined with currentColor, so it takes the text
   colour. On the lesson page it sits on the author's dark plate (Savva Sicevs: black ground, white mark and text, his
   site's dark theme, PROPOSAL §2/§3); on cards it is the card's own meta colour. */
.lc-credit { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.lc-credit__mark { flex: none; width: auto; height: 1.2em; }
.lc-credit__by { min-width: 0; overflow-wrap: anywhere; }
.lc-credit a { color: inherit; }
.lc-src--by { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); color: var(--ink-2); }
.lc-src__rt { color: var(--ink-3); }
.lc-plate { display: inline-flex; max-width: 100%; margin: 0 0 var(--s4); padding: var(--s2) var(--s3); background: #0e0e0e; color: #fff; font-size: var(--t-sm); line-height: 1.3; outline: 1px solid var(--rule); }
.lc-plate .lc-credit__mark { height: 1.6em; }
.lc-orig { max-width: 46rem; margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--t-sm); }

.lc-row { margin: 0 0 3rem; }
.lc-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-bottom: 1rem; }
.lc-row__head .lc-h2 { margin: 0; }
.lc-row__head p { margin: 0; color: var(--ink-3); font-size: var(--t-sm); flex: 1 1 18rem; }
.lc-row__head a { font: var(--t-xs) var(--mono); color: var(--ink-2); padding-block: .3rem; }

.lc-tools { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); max-width: 52rem; }
.lc-tools li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.lc-tools a { font-weight: 650; color: var(--ink); }
.lc-tools p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

.lc-pn { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.lc-pn a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ink); font-weight: 650; padding-block: .25rem; }
.lc-pn a span { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; }
.lc-pn__next { text-align: right; }

/* skill page */
.lc-video { margin: 0 0 3rem; max-width: 60rem; }
.lc-video video { display: block; width: 100%; height: auto; background: #0B0D12; border: 1px solid var(--rule); }
.lc-video figcaption { margin-top: .6rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-outline { margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: o; border-top: 1px solid var(--rule-firm); max-width: 48rem; }
.lc-outline li { counter-increment: o; display: grid; grid-template-columns: 2.25rem 1fr; padding: .7rem 0; border-bottom: 1px solid var(--rule); line-height: 1.35; }
.lc-outline li::before { content: counter(o, decimal-leading-zero); font: var(--t-xs) var(--mono); color: var(--ink-3); padding-top: .2rem; }
.lc-take { display: grid; gap: .4rem; margin: 0; padding: 1.25rem 1.4rem; border-left: 3px solid var(--brand); background: var(--paper-deep); font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.3; max-width: 46rem; }
.lc-take span { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; }
.lc-ext { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.lc-ext li { padding: 1rem 1.1rem; border: 1px dashed var(--rule-firm); display: flex; flex-direction: column; gap: .4rem; }
.lc-ext__t { font-weight: 650; color: var(--ink); }
.lc-ext__m { margin: 0; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-ext__c { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.lc-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: .4rem; background: var(--paper-3); }
.lc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lc-embed:focus-within iframe, .lc-embed.is-focus iframe { outline: 2px solid var(--ink); outline-offset: 3px; } /* focus lives inside the player, so the frame shows it (release QA, 2026-10-07) */
/* YouTube, click to load (2026-10-09): a local placeholder, nothing from YouTube until play is pressed (yt-facade.js). */
.lc-yt__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 650; border: 1px solid var(--rule-firm); }
.lc-yt__play:hover { background: var(--paper-2, var(--paper)); }
.lc-yt__play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lc-yt__icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); position: relative; }
.lc-yt__icon::after { content: ""; position: absolute; left: 1.3rem; top: 1rem; border-style: solid; border-width: .625rem 0 .625rem 1rem; border-color: transparent transparent transparent var(--paper); }
.lc-yt__note { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.lch-demo pre:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lc-transcript { margin: 0 0 3rem; max-width: 46rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.lc-transcript summary { cursor: pointer; font-weight: 650; padding-block: .3rem; }
.lc-transcript p { color: var(--ink-2); line-height: 1.6; }

/* evaluate: by kind of evidence */
.lc-principle { margin: 0 0 1.5rem; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; max-width: 28ch; }
.lc-url { display: grid; gap: .4rem; max-width: 34rem; margin: 0 0 2.5rem; }
.lc-url label { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-url input { font: inherit; font-size: var(--t-md); padding: .7rem .8rem; border: 1px solid var(--rule-firm); background: var(--paper); color: var(--ink); }
.lc-url__note { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.lc-band { margin: 0 0 2.5rem; }
.lc-band__h { margin: 0 0 .3rem; font-family: var(--display); font-size: var(--t-md); font-weight: 750; }
.lc-band__p { margin: 0 0 1rem; color: var(--ink-2); max-width: 54ch; }
.lc-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); }
.lc-checks li { padding: .9rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .3rem; }
.lc-check__t { margin: 0; font-weight: 650; }
.lc-check__w, .lc-check__lim { margin: 0; color: var(--ink-2); font-size: var(--t-sm); max-width: 60ch; }
.lc-check__lim { color: var(--ink-3); }
.lc-check__by { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--t-sm); }
.lc-run { font-weight: 650; }
.lc-check__by a { display: inline-block; min-height: 1.5rem; padding-block: .2rem; }
.lc-check__skill { color: var(--ink-2); }

@media (max-width: 40rem) {
  .lc-tools li { grid-template-columns: 1fr; gap: .2rem; }
  .lc-strip a, .lc-strip button { padding: .5rem .5rem .55rem; }
}

/* internal production dashboard */
.lc-dash { overflow-x: auto; }
.lc-dash table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.lc-dash th, .lc-dash td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lc-dash th { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; position: sticky; top: 0; background: var(--paper); }

/* provider identity (text treatment) */
.lc-prov { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin: 0; }
.lc-prov__x { flex-basis: 100%; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.lc-prov b { font-family: var(--display); font-size: var(--t-sm); font-weight: 750; letter-spacing: -.01em; color: var(--ink); padding: .05rem .4rem; border: 1px solid var(--rule-firm); }
.lc-prov span:last-child { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-resgrid { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.lc-res { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.05rem 1.1rem; border: 1px dashed var(--rule-firm); }
/* The provider's visual bleeds to the card's edges (2026-10-06). */
.lc-res__img { display: block; width: calc(100% + 2.1rem); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -1rem -1.05rem .35rem; border-bottom: 1px dashed var(--rule-firm); background: var(--paper-deep); }
.lc-res__t { font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.2; color: var(--ink); }
.lc-res__w { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.lc-res__b { margin: 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; }
.lc-res__b span { font-family: var(--mono); color: var(--ink-3); margin-right: .25rem; }
.lc-more { margin: 0 0 1rem; }
.lc-more summary { cursor: pointer; font-weight: 650; padding-block: .4rem; }
.lc-types { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.lc-types a { display: inline-block; padding-block: .25rem; }
.lc-fine { margin: 2rem 0 0; font-size: var(--t-xs); color: var(--ink-3); max-width: 60ch; }
.lc-all { display: inline-block; padding-block: .3rem; font-weight: 650; }

/* homepage: the lifecycle is the page */
.lch-head { max-width: 52rem; margin: 0 0 3.5rem; }
.lch-h1 { margin: 0 0 1.25rem; font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -.045em; max-width: 17ch; }
.lch-lead { margin: 0; font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
/* Hero actions (final release, 2026-10-07): one primary action, one that moves to the seven stages on this page. */
.lch-acts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin: 2rem 0 0; }
.lch-acts .lch-act { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1.4rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 var(--t-base)/1 var(--ui); text-decoration: none; }
.lch-acts .lch-act:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.lch-acts .lch-act--quiet { padding-inline: 0; border-color: transparent; background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lch-acts .lch-act--quiet:hover { background: none; border-color: transparent; color: var(--ink); text-decoration-thickness: 2px; }
.lch-acts .lch-act:focus-visible, .lch-h2:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lch-h2:focus:not(:focus-visible) { outline: none; }
#lch-m-h { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html:has(#lch-m-h) { scroll-behavior: smooth; } }
.lch-lead--demo { margin: -.5rem 0 2rem; }
.lch-stages { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); }
.lch-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.lch-stage__n { font: var(--t-md) var(--mono); color: var(--ink-3); padding-top: .35rem; }
.lch-stage__h { margin: 0 0 .4rem; font-family: var(--display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.lch-stage__h a { color: var(--ink); text-decoration: none; }
.lch-stage__h a:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.lch-stage__job { margin: 0; color: var(--ink-2); max-width: 44ch; }
.lch-k { margin: 0 0 .3rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lch-now, .lch-later { margin: 0 0 .9rem; padding: 0; list-style: none; font-size: var(--t-sm); }
.lch-now li, .lch-later li { padding: .15rem 0; }
.lch-now a { font-weight: 650; display: inline-block; padding-block: .1rem; }
.lch-later li { color: var(--ink-3); }
.lch-none { margin: 0 0 .9rem; font-size: var(--t-sm); color: var(--ink-3); }
.lch-counts { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.lch-counts a { display: inline-block; padding-block: .2rem; }
.lch-stage--deep { padding: 2.25rem 0 2.5rem; }
.lch-stage--deep .lch-stage__h { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.lch-deep { margin: 1rem 0 1.25rem; font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.3; max-width: 40ch; }
.lch-shots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lch-shots a { display: block; text-decoration: none; color: var(--ink-2); font-size: var(--t-xs); }
.lch-shots img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); margin-bottom: .3rem; }
.lch-start { margin: 2.5rem 0 0; }
.lch-start a { font-family: var(--display); font-size: var(--t-md); font-weight: 750; }
@media (max-width: 56rem) {
  .lch-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) { .lch-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* THE FALLBACK THUMBNAIL (2026-10-06): when a provider gives no usable visual, its name in type.
   Same 16:9 box as every other card, so a row stays even; it never imitates the provider's logo. */
.lc-typethumb { display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; aspect-ratio: 16 / 9; padding: 1rem 1.1rem; background: var(--paper-3); color: var(--ink); overflow: hidden; }
.lc-typethumb b { font: 700 clamp(1.25rem, 2.2vw, 1.75rem)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.lc-typethumb i { font: normal var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.lc-res__img.lc-typethumb { box-sizing: border-box; }

/* STANDARDS (AR-3, 2026-10-06): a quiet list, the kind first so law, standard and our own rule never blur. */
.lc-std > summary { list-style: none; cursor: pointer; }
.lc-std > summary::-webkit-details-marker { display: none; }
.lc-std > summary .lc-h2::after { content: " +"; content: " +" / ""; color: var(--ink-3); font-weight: 400; }
.lc-std[open] > summary .lc-h2::after { content: " −"; content: " −" / ""; }
.lc-std__list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.lc-std__list li { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.lc-std__k { display: inline-block; min-width: 8.5rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-std__list a { color: var(--ink); }
.lc-std__p { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.lc-std__ours, .lc-std__g { margin: 1rem 0 0; font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.lc-std__all { margin: .75rem 0 0; font: var(--t-sm) var(--ui); }
@media (max-width: 40rem) { .lc-std__k { display: block; min-width: 0; } }

/* UNRECORDED ORIGINALS (Annie, 2026-10-06): coming soon, said plainly; no player, no duration. */
.lc-card { position: relative; }
.lc-card__soon { position: absolute; top: .6rem; left: .6rem; font: var(--t-xs)/1 var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); padding: 4px 7px; }
.lc-soon { max-width: var(--measure); margin: 0 0 var(--s6); padding: var(--s4) var(--s5); border: 1px dashed var(--rule-firm); }
.lc-soon b { display: block; font: 650 var(--t-md)/1.2 var(--display); color: var(--ink); }
.lc-soon p { margin: .4rem 0 0; font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); }

/* THE HAND-OFF (2026-10-07): what a stage takes in, makes and passes on. The chain is the methodology. */
.lc-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 3rem; max-width: 76rem; }
.lc-flow > div { background: var(--paper); padding: 1rem 1.15rem; }
.lc-flow h2 { margin: 0 0 .45rem; font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; }
.lc-flow p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.lc-flow__make { background: var(--paper-deep) !important; }
.lc-flow__make ul { list-style: none; margin: 0; padding: 0; }
.lc-flow__make li { padding: .5rem 0; border-top: 1px solid var(--rule); display: grid; gap: .15rem; }
.lc-flow__make li:first-child { border-top: 0; padding-top: 0; }
.lc-flow__make b { font-size: var(--t-sm); font-weight: 650; line-height: 1.35; }
.lc-flow__make code { font: var(--t-xs) var(--mono); color: var(--ink); }
.lc-flow__make span { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.lc-flow__note { grid-column: 1 / -1; background: var(--paper); padding: .7rem 1.15rem !important; font-size: var(--t-xs) !important; color: var(--ink-3) !important; }
@media (max-width: 52rem) { .lc-flow { grid-template-columns: minmax(0, 1fr); } }
/* Homepage, release pass (2026-10-07): each stage shows the files it makes, not the tools it lacks. */
.lch-lead--method { margin-top: 1rem; color: var(--ink); }
.lch-files { margin: 0 0 .9rem; padding: 0; list-style: none; }
.lch-files li { display: grid; gap: .05rem; padding: .3rem 0; border-top: 1px solid var(--rule); }
.lch-files li:first-child { border-top: 0; padding-top: 0; }
.lch-files code { font: var(--t-sm) var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.lch-files span { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; }

/* Embedded players take focus; show it (release QA, 2026-10-07). */
.lc-sec iframe:focus-visible, .lc-video iframe:focus-visible, iframe:focus-visible, .lc-embed iframe:focus { outline: 2px solid var(--ink); outline-offset: 3px; }

/* HOMEPAGE, release recomposition (2026-10-07): one story, editorial, no card grids. */
.lch-h2 { margin: 0 0 1.5rem; font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; max-width: 22ch; }
.lch-h2--quiet { font-size: var(--t-md); letter-spacing: -.01em; color: var(--ink-3); font-weight: 650; margin-bottom: .8rem; }
.lch-method, .lch-demo, .lch-depth { max-width: 76rem; margin: 0 0 6rem; }
.lch-route { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lch-route li { position: relative; padding-top: 1.25rem; font: 650 var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.lch-route li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; border-top: 2px solid var(--brand); }
.lch-route li::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; background: var(--brand); }
.lch-route li:last-child::before { right: auto; width: 14px; }
.lch-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.lch-ledger li { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) minmax(0, 1.6fr); gap: 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.lch-ledger h3 { margin: 0; font-family: var(--display); font-size: var(--t-lg, 1.5rem); font-weight: 800; letter-spacing: -.03em; }
.lch-ledger h3 a { color: var(--ink); text-decoration: none; }
.lch-ledger h3 a:hover { text-decoration: underline; text-underline-offset: .12em; }
.lch-ledger p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.lch-ledger__files { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.lch-ledger__files code { font: var(--t-xs) var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.lch-demo__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; }
.lch-demo figure { margin: 0; }
.lch-demo__look img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-firm); }
.lch-demo__file pre { margin: 0; padding: 1.4rem 1.5rem; max-height: 26rem; overflow: auto; background: var(--paper-deep); border: 1px solid var(--rule-firm); font: var(--t-sm)/1.6 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.lch-demo__file pre b { color: var(--ink); font-weight: 700; }
.lch-demo figcaption { margin-top: .7rem; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; max-width: 40em; }
.lch-figures { margin: 0; font-size: var(--t-md); line-height: 1.9; color: var(--ink-3); max-width: 60rem; }
.lch-figures a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.lch-figures a:hover { color: var(--ink); text-decoration: underline; }
.lch-figures b { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.lch-go { margin: 0 0 4rem; }
.lch-go a { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .18em; }
@media (max-width: 52rem) {
  .lch-route { display: none; }
  .lch-ledger li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .lch-demo__pair { grid-template-columns: minmax(0, 1fr); }
  .lch-figures { line-height: 1.5; }
  .lch-figures a { display: block; padding-block: .2rem; white-space: normal; }
  .lch-figures > span { display: none; }
}

/* Build Tool Finder (S8, preview prototype, 2026-10-07). */
.btf-proto { margin: 0 0 var(--s-5, 2rem); padding: .6rem .8rem; border: 1px dashed var(--rule-firm); font-size: var(--t-sm); color: var(--ink-2); max-width: 46rem; }
.btf-scroll { overflow-x: auto; margin-top: 1rem; }
.btf-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btf-t { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 56rem; font-size: var(--t-sm); line-height: 1.5; }
.btf-t th, .btf-t td { text-align: left; vertical-align: top; padding: .7rem 1rem .7rem 0; border-bottom: 1px solid var(--rule); width: 22%; }
.btf-t tbody th { width: 12%; font-weight: 650; color: var(--ink); }
.btf-t thead th { font-size: var(--t-md); font-weight: 750; color: var(--ink); }
.btf-t thead th span { display: block; font: var(--t-xs)/1.4 var(--mono); font-weight: 400; color: var(--ink-3); }
.btf-t td { color: var(--ink-2); }
.btf-t td b { color: var(--ink); }
.btf-src { font-size: var(--t-xs); }
.btf-form { display: grid; gap: 1rem; max-width: 46rem; margin-top: 1rem; }
.btf-q { margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--rule); }
.btf-q legend { display: flex; gap: .75rem; padding: 0; font-weight: 650; color: var(--ink); }
.btf-q legend span { font: var(--t-sm) var(--mono); color: var(--ink-3); }
.btf-help { margin: .35rem 0 .5rem; font-size: var(--t-sm); color: var(--ink-3); }
.btf-q label { display: flex; gap: .6rem; align-items: baseline; min-height: 44px; align-content: center; padding-block: .35rem; color: var(--ink-2); cursor: pointer; }
.btf-q input { accent-color: var(--ink); margin: 0; transform: translateY(1px); }
.btf-btn { min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 650 var(--t-sm)/1 var(--ui); cursor: pointer; }
.btf-err { margin-left: .75rem; font-size: var(--t-sm); color: var(--ink); }
.btf-out { max-width: 46rem; margin-top: 1.5rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rule-firm); background: var(--paper-3); }
.btf-out:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btf-out p { margin: .5rem 0; color: var(--ink-2); line-height: 1.55; }
.btf-kind { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3) !important; }
.btf-h { margin: .2rem 0 .4rem; font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.btf-tools { color: var(--ink) !important; font-weight: 650; }
.btf-notes { margin: .5rem 0; padding-left: 1.2rem; color: var(--ink-2); }
.btf-grad b, .btf-record b { color: var(--ink); }
.btf-port { color: var(--ink) !important; }
.btf-rule { font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3) !important; }
.btf-record { max-width: 46rem; margin-top: 1.5rem; color: var(--ink-2); line-height: 1.55; }
.lc-vctx { max-width: 46rem; margin: 0 0 .6rem; color: var(--ink-2); font-size: var(--t-sm); }
.lc-video video:focus, .lc-video video:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* native controls take focus inside the player; the frame shows it (release QA, 2026-10-07) */