/* T22, the light half: everything after the transition stands on white and never returns to black
   (owner, 13 Oct). Scope, with the reason for each choice: docs/features/light-half/IMPLEMENTATION.md.
   It adds no new ideas: the hero's title setting, the page's body size, the page's motions, with
   ink where the dark half has light. */
.lt{--ground:#fff;--ink:#000;--muted:#606167;--hair:rgba(0,0,0,.1);position:relative;background:var(--ground);color:var(--ink)}
/* The browser's own ground (seen when the page is pulled past its end) follows the half the visitor is in. */
html{background:#000}
html.is-light,html.is-light body{background:#fff}

/* Titles are set exactly as the hero's (and the transition's): size, leading, tracking. */
.lt__title{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--t-display);line-height:.95;letter-spacing:-.045em;text-align:center;text-wrap:balance;color:var(--ink)}
.lt__sub{margin:32px auto 0;max-width:34rem;font:400 var(--t-body-sm)/24px var(--sans);letter-spacing:-.006em;text-align:center;text-wrap:balance;color:var(--muted)}
.lt .w{display:inline-block;transition:none}
.lt .w--letters{white-space:nowrap}

/* ---------- Glass on white ----------
   The brief's glass is written for dark grounds: a white wash and a contour of white light, both
   of which vanish on white. .lg-ink is the same recipe with ink in place of light: same ring,
   same strengths, same blur. On flat white a lens has nothing to bend, so these carry
   data-lg-lens="off" (the brief's own advice for flat grounds). */
#top .lg.lg-new.lg-ink{color:#000!important;
 --lg-contour:linear-gradient(var(--lg-angle),rgba(0,0,0,calc(.34*var(--lg-gain))) 5.2%,rgba(0,0,0,calc(.2*var(--lg-gain))) 32.1%,rgba(0,0,0,calc(.18*var(--lg-gain))) 66.1%,rgba(0,0,0,calc(.28*var(--lg-gain))) 94.8%)}
#top .lg.lg-new.lg-ink::after{background:radial-gradient(var(--lg-spot) circle at var(--lg-x) var(--lg-y),rgba(0,0,0,.06),rgba(0,0,0,.05) 15%,rgba(0,0,0,.03) 34%,rgba(0,0,0,.014) 56%,rgba(0,0,0,.004) 78%,transparent 100%)!important}
#top .lg--button.lg-ink{--lg-wash:rgba(0,0,0,.05);
 --lg-contour:radial-gradient(64px circle at var(--lg-x) var(--lg-y),rgba(0,0,0,calc(var(--lg-hot)*2/var(--lg-px))),rgba(0,0,0,calc(var(--lg-hot)*.84/var(--lg-px))) 38%,transparent 100%),linear-gradient(to bottom right,rgba(0,0,0,calc(.36*var(--lg-gain))),rgba(0,0,0,calc(.12*var(--lg-gain))) 48%,rgba(0,0,0,calc(.4*var(--lg-gain))))}
#top .lg--tabs.lg-ink{--lg-wash:rgba(0,0,0,.04)}
#top .lg--tabs.lg-ink>button{color:rgba(0,0,0,.55)!important}
#top .lg--tabs.lg-ink>button[aria-pressed=true]{color:#000!important}
@media(hover:hover){#top .lg--tabs.lg-ink>button:hover{color:#000!important}}
#top .lg--tabs.lg-ink .lg-tabs__thumb{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)!important}
#top .lg.lg-new.lg-ink:focus-visible,#top .lg.lg-new.lg-ink :focus-visible,#top .lg--tabs.lg-ink>button:focus-visible{outline-color:#000!important}

/* ---------- Lines on white ----------
   A light grid: the cells are divided by hairlines of ink that fade to nothing at both ends
   (never a solid rule). --draw 0..1 grows each line from its middle outward. */
.lt-grid{--draw:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.lt-grid>*{position:relative;min-width:0}
.lt-grid>*::before,.lt-grid>*::after{content:'';position:absolute;pointer-events:none}
/* a line down the right of every cell but the last in its row, and one along the top of every row but the first */
.lt-grid>*::before{top:0;bottom:0;right:-.5px;width:1px;background:linear-gradient(transparent,rgba(0,0,0,.14) 22%,rgba(0,0,0,.14) 78%,transparent);scale:1 var(--draw)}
.lt-grid>*::after{left:0;right:0;top:-.5px;height:1px;background:rgba(0,0,0,.14);scale:var(--draw) 1}
.lt-grid>:nth-child(3n)::before{display:none}
.lt-grid>:nth-child(-n+3)::after{display:none}
/* the row line is one line across three cells, so its fade sits at the grid's two ends */
.lt-grid>:nth-child(3n+1)::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 60%);transform-origin:100% 50%}
.lt-grid>:nth-child(3n)::after{background:linear-gradient(270deg,transparent,rgba(0,0,0,.14) 60%);transform-origin:0 50%}
@media(max-width:900px){
 .lt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lt-grid>*::before,.lt-grid>*::after{display:block!important}
 .lt-grid>:nth-child(2n)::before{display:none!important}
 .lt-grid>:nth-child(-n+2)::after{display:none!important}
 .lt-grid>:nth-child(2n+1)::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 60%);transform-origin:100% 50%}
 .lt-grid>:nth-child(2n)::after{background:linear-gradient(270deg,transparent,rgba(0,0,0,.14) 60%);transform-origin:0 50%}
}
@media(max-width:600px){
 .lt-grid{grid-template-columns:1fr}
 .lt-grid>*::before{display:none!important}
 .lt-grid>*::after{display:block!important;background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 22%,rgba(0,0,0,.14) 78%,transparent)!important;transform-origin:50% 50%!important}
 .lt-grid>:first-child::after{display:none!important}
}