/* Text eases in as on candor.inc (reveal: each word's opacity is smoothed over 0.18s), from the transition onward (owner, 15 Oct). */
:is(#letter,#letter-end) .w,:is(#letter,#letter-end) .w--letters>span{transition:opacity .18s linear}
/* One reading position and one shared scroll score. No competing paragraph clocks. */
:is(#letter,#letter-end){padding:0;height:auto}
:is(#letter,#letter-end) .letter__col{padding:100px 7vw;gap:80px;max-width:none}
:is(#letter,#letter-end) .letter__line{font-size:24px;line-height:1.4;max-width:52ch;text-wrap:balance}   /* T25 (owner, 15 Oct): 24px Inter on desktop */
:is(#letter,#letter-end) .letter__sentence{display:block}
/* T25: the five points, numbered, read left to right as a list inside the centred reading column. */
:is(#letter,#letter-end) .letter__list{list-style:none;counter-reset:point;padding:0;text-align:left;width:max-content;max-width:100%;display:grid;gap:1em;
 font-size:clamp(14px,calc(86vw / 29.8),24px)}   /* 14-24px (owner, 15 Oct): the longest point is about 29em wide with its number, so it fits one row down to about 485px wide */
:is(#letter,#letter-end) .letter__list li{display:grid;grid-template-columns:1.5em auto;counter-increment:point;white-space:nowrap}   /* each point on one row */
:is(#letter,#letter-end) .letter__list li::before{content:counter(point) ".";color:var(--muted,#606167)}
/* below about 485px the 14px floor no longer fits a point on one row, so it wraps under its own text */
@media(max-width:485px){:is(#letter,#letter-end) .letter__list li{white-space:normal;text-wrap:pretty}}   /* fills each line (no lone last word), so the measured width never re-wraps it */
/* ---------- Easter eggs in the list (owner, 15 Oct): small, black and white, none needed to read the line ---------- */
:is(#letter,#letter-end) .letter__list[data-live] :is(.egg,.egg-delight){pointer-events:auto}
:is(#letter,#letter-end) .letter__list .egg{position:relative;display:inline}
:is(#letter,#letter-end) .egg-pile{position:relative}
/* the faint dotted underline that invites a hover: it arrives with its words (--ul, letter-sequence.js) and steps aside while hovered */
:is(#letter,#letter-end) .egg-pile::before{content:'';position:absolute;left:0;right:0;bottom:-.08em;height:4px;pointer-events:none;
 background:radial-gradient(circle,rgba(0,0,0,.38) .9px,transparent 1.2px) 0 50%/5px 4px repeat-x;opacity:var(--ul,0);transition:opacity .25s ease}
:is(#letter,#letter-end) .egg-pile:hover::before{opacity:0}
/* 2. "pile of transcripts" arrives as a loose little stack and straightens out as you scroll on (--jumble); hovering piles it up again */
:is(#letter,#letter-end) .egg-pile{--hov:0}
:is(#letter,#letter-end) .egg-pile:hover{--hov:1}
:is(#letter,#letter-end) .egg-pile .w{--j:max(var(--jumble,1),var(--hov));transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .18s linear;transform:translate(calc(var(--jx)*var(--j)),calc(var(--jy)*var(--j))) rotate(calc(var(--jr)*var(--j)))}
:is(#letter,#letter-end) .egg-pile .w:nth-child(1){--jx:.9em;--jy:.35em;--jr:-7deg}
:is(#letter,#letter-end) .egg-pile .w:nth-child(2){--jx:-.1em;--jy:-.15em;--jr:9deg}
:is(#letter,#letter-end) .egg-pile .w:nth-child(3){--jx:-1.1em;--jy:.25em;--jr:-3deg}
:is(#letter,#letter-end) .letter__price-phrase{white-space:nowrap}
/* 3. a small grey "/mo" after "subscription", struck through, and left there */
:is(#letter,#letter-end) .egg-price{position:relative;display:inline-block;overflow:hidden;max-width:calc(var(--in,0)*3em);padding-left:calc(var(--in,0)*.2em);font-size:.6em;line-height:1;vertical-align:text-top;color:#8a8a8e;opacity:var(--in,0)}   /* takes no room before it arrives */
:is(#letter,#letter-end) .egg-price::after{content:'';position:absolute;left:-.1em;right:-.1em;top:55%;height:1px;background:currentColor;transform:scaleX(var(--strike,0));transform-origin:0 50%}
/* 4. the whole line arrives redacted: each word comes in as a black bar; then the bars are wiped away left to right (--wipe) */
:is(#letter,#letter-end) .egg-redacted .w{position:relative}
:is(#letter,#letter-end) .egg-redacted .w::after{content:'';position:absolute;left:-.05em;right:-.05em;top:.2em;bottom:.12em;border-radius:1px;background:#000;pointer-events:none;
 transform:scaleX(calc(1 - var(--wipe,0)));transform-origin:right center}   /* wiped away from the left, word after word, with the scroll */
/* 5. "delightful," in the site's serif (Iowan Old Style, upright, as in the titles), with a liquid glass magnifier:
      - it is real liquid glass (our engine, .lg), with its contour and lens;
      - inside is an enlarged copy of the word, lined up with the real one, bent at the rim by the same lens, so the
        magnification and the refraction are one surface;
      - it is tall enough for the ascenders and the g's tail, and reaches .6em past the word on either side;
      - while it shows, the word makes room for it on both sides (--dl-room), so it never sits on "be" or "not".
      letter-sequence.js (magnifier) drives --dl-t (0..1, its place along the word), --dl-show (the glass) and --dl-room:
      one pass across and back when the word arrives, then only under the mouse. --ew is the word's width. In Safari the rim does not bend; the rest is the same. */
:is(#letter,#letter-end) .egg-delight{position:relative;display:inline-block;font-size:1.08em;
 --dl-w:3.6em;--dl-top:.36em;--dl-bot:.5em;--dl-in:0px;--dl-zoom:1.25;
 --dl-x:calc(-.6em + var(--dl-t,0)*(var(--ew,4em) - var(--dl-w) + 1.2em));
 margin-inline:calc(var(--dl-room,0)*.65em)}
:is(#letter,#letter-end) .egg-delight::before{content:'';position:absolute;inset:-.3em -.4em}   /* a forgiving hover area */
:is(#letter,#letter-end) .egg-delight .dl-word,:is(#letter,#letter-end) .egg-delight .dl-copy{font-family:var(--serif);letter-spacing:-.4pt;white-space:nowrap}
#top :is(#letter,#letter-end) .dl-lens{position:absolute!important;left:0;top:calc(-1*var(--dl-top));bottom:calc(-1*var(--dl-bot));width:var(--dl-w);border-radius:999px!important;
 transform:translateX(var(--dl-x)) scale(calc(.9 + .1*var(--dl-show,0)));pointer-events:none;   /* it grows a little as it appears */
 opacity:calc(var(--lens-in,0)*var(--dl-show,0));transition:none!important;   /* eased in letter-sequence.js; the glass's own press easing would drag behind */
 --lg-depth:8px;--lg-pull:1.25;--lg-blur:0px;--lg-wash:transparent;
 box-shadow:0 .16em .55em rgba(0,0,0,.12),0 .03em .1em rgba(0,0,0,.09)}
/* the inside: white, holding the enlarged word, under the glass's own contour. letter-sequence.js gives it the lens's
   refraction filter, so the enlarged letters themselves bend towards the rim: one continuous lens, no seam (as Apple's) */
#top :is(#letter,#letter-end) .dl-inner{position:absolute!important;inset:0;z-index:1!important;border-radius:inherit;overflow:hidden;background:#fff}
:is(#letter,#letter-end) .dl-copy{position:absolute;left:calc(-1*var(--dl-x) - var(--dl-in));top:calc(var(--dl-top) - var(--dl-in));color:#000;
 transform-origin:calc(var(--dl-x) + var(--dl-w)/2) calc(50% + (var(--dl-bot) - var(--dl-top))/2);transform:scale(var(--dl-zoom))}
:is(#letter,#letter-end) .egg-plain{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;letter-spacing:0}
:is(#letter,#letter-end) .letter__sentence+.letter__sentence{margin-top:1em}   /* each line on a slide is its own paragraph (owner, 15 Oct) */
/* A fixed outer slot keeps the sentence stable as the glass tray contracts. */
:is(#letter,#letter-end) [data-cert-sequence]{display:grid;gap:1em}
:is(#letter,#letter-end) [data-cert-sequence] .letter__sentence+.letter__sentence{margin-top:0}
:is(#letter,#letter-end) .letter__certs{position:relative;display:inline-block;width:128px;height:0;vertical-align:middle;margin:0 0 0 8px;pointer-events:none;--cert-width:44px;--cert-gap:6px;--cert-container:0}
:is(#letter,#letter-end) .cert-tray{position:absolute;left:0;top:-22px;width:var(--cert-width);height:44px;border-radius:22px;background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:var(--cert-container)}
:is(#letter,#letter-end) .letter__certs i{position:absolute;top:4px;left:4px;display:block;width:36px;height:36px;border-radius:50%;font-style:normal;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;z-index:3}
:is(#letter,#letter-end) .letter__certs i:nth-child(2){left:calc(40px + var(--cert-gap));z-index:2}
:is(#letter,#letter-end) .letter__certs i:nth-child(3){left:calc(76px + var(--cert-gap) + var(--cert-gap));z-index:1}
:is(#letter,#letter-end) .letter__certs svg{display:block;width:36px;height:36px;overflow:hidden}
:is(#letter,#letter-end) .letter__certs text{font:600 7.5px var(--sans);letter-spacing:0;fill:rgba(255,255,255,.93);text-anchor:middle}
:is(#letter,#letter-end) .letter__certs .cert-emblem{fill:none;stroke:rgba(255,255,255,.38);stroke-width:.7;stroke-linejoin:round}
:is(#letter,#letter-end) .letter__certs .cert-star{fill:rgba(255,255,255,.7)}
:is(#letter,#letter-end) .cert-gdpr text{font-size:8px}
:is(#letter,#letter-end) [data-live] .letter__certs[data-cert-settled] .cert-tray{pointer-events:auto;transition:width .42s cubic-bezier(.2,.7,.2,1)}
:is(#letter,#letter-end) .letter__certs[data-cert-settled] i{transition:left .42s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){:is(#letter,#letter-end) .letter__certs[data-cert-settled] :is(.cert-tray,i){transition:none}}
/* "We're starting with dictation and meeting notes. We care about how the smallest interaction feels." (letter-sequence.js) */
:is(#letter,#letter-end) .egg-dictate{display:inline-block;margin-left:1.02em}   /* room on its left for the waveform, which stays (owner, 15 Oct) */
:is(#letter,#letter-end) .egg-dictate .w{position:relative}
:is(#letter,#letter-end) .egg-dictate i{font-style:normal;opacity:0;transition:opacity .12s linear}
:is(#letter,#letter-end) .egg-dictate i.on{opacity:1}
/* the hero's waveform (five rounded bars, the same proportions and speech rhythm), in plain ink rather than glass */
:is(#letter,#letter-end) .dict-wave{--bar:.072em;--gap:.086em;position:absolute;right:100%;top:50%;width:calc(var(--bar)*5 + var(--gap)*4);height:.7em;margin:-.35em .24em 0 0;
 color:#a6a7ab;pointer-events:none}   /* always there, grey and moving (owner, 15 Oct) */
:is(#letter,#letter-end) .dict-wave b{position:absolute;top:50%;left:calc((var(--bar) + var(--gap))*var(--i));width:var(--bar);height:var(--h);border-radius:calc(var(--bar)/2);
 background:currentColor;transform:translateY(-50%);animation:dict-speech 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.23s)}
:is(#letter,#letter-end) .dict-wave b:nth-child(1){--i:0;--h:.21em;--peak:.34em}
:is(#letter,#letter-end) .dict-wave b:nth-child(2){--i:1;--h:.38em;--peak:.52em}
:is(#letter,#letter-end) .dict-wave b:nth-child(3){--i:2;--h:.54em;--peak:.66em}
:is(#letter,#letter-end) .dict-wave b:nth-child(4){--i:3;--h:.37em;--peak:.5em}
:is(#letter,#letter-end) .dict-wave b:nth-child(5){--i:4;--h:.19em;--peak:.33em}
@keyframes dict-speech{0%,100%{height:var(--h);opacity:.8}20%,61%{height:var(--peak);opacity:1}39%{height:calc(var(--h)*.75);opacity:.85}82%{height:calc(var(--peak)*.8);opacity:.9}}
@media(prefers-reduced-motion:reduce){:is(#letter,#letter-end) .egg-dictate i{opacity:1}:is(#letter,#letter-end) .dict-wave b{animation:none}}
/* "…the smallest interaction feels." A dark liquid glass pill (our engine, .lg, with the nav pill's near-black wash and its light
   contour) and, inside it, the words in white: a copy laid exactly over the real words and clipped to the pill, which the
   glass's lens bends at the rim (letter-sequence.js moves it, grows it from the word's centre and shrinks it back). */
:is(#letter,#letter-end) .egg-glide{position:relative}
:is(#letter,#letter-end) .glide-zone{position:relative;margin-left:calc(var(--groom,0)*.42em)}   /* eases right to make room for the pill */
:is(#letter,#letter-end) [data-live] .egg-glide{pointer-events:auto}   /* the whole line listens; letter-sequence.js decides which word is near */
#top :is(#letter,#letter-end) .glide-glass{position:absolute!important;left:0;top:0;width:var(--gw,0px);height:var(--gh,0px);border-radius:999px!important;z-index:2;
 transform:translate(var(--gx,0px),var(--gy,0px));opacity:var(--go,0);pointer-events:none;transition:none!important;
 --lg-depth:10px;--lg-pull:1.4;--lg-blur:0px;--lg-wash:rgba(13,13,15,.94);   /* a deep rim, so the bend reads (owner, 15 Oct) */
 box-shadow:0 .12em .38em rgba(0,0,0,.2),0 .02em .06em rgba(0,0,0,.16)}
#top :is(#letter,#letter-end) .glide-inner{position:absolute!important;inset:0;z-index:3!important;border-radius:inherit;overflow:hidden}
:is(#letter,#letter-end) .glide-shine{position:absolute;inset:0;pointer-events:none;opacity:0;
 background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.34) 49%,rgba(255,255,255,.08) 53%,transparent 60%) 0 0/260% 100% no-repeat}
:is(#letter,#letter-end) .glide-shine.is-on{animation:glide-shine 1.15s cubic-bezier(.4,0,.2,1) both}
@keyframes glide-shine{0%{opacity:1;background-position:115% 0}80%{opacity:1}100%{opacity:0;background-position:-15% 0}}
:is(#letter,#letter-end) .glide-copy{position:absolute;left:0;top:0;display:block;color:#fff;white-space:nowrap;line-height:inherit;pointer-events:none;-webkit-font-smoothing:antialiased}
/* Point 1, "…not just type into it." (owner, 15 Oct): the three words are typed into a quiet message box, like the ones in
   the apps people dictate into: a pill outline with a mic and a send button on the right (no plus, for simplicity). Light greys only,
   so it reads at a glance without pulling focus; the send button darkens a touch once the words are in. */
:is(#letter,#letter-end) .egg-box{display:inline-flex;align-items:baseline;gap:.32em;height:1.62em;margin:-.3em .06em;padding:0 .18em 0 .62em;vertical-align:baseline;
 border-radius:999px;background:#fff;box-shadow:0 0 0 1px #e4e4e8,0 .06em .22em rgba(0,0,0,.06);white-space:nowrap;
 opacity:var(--box,1);transform:scale(calc(.94 + .06*var(--box,1)));transform-origin:0 50%}   /* arrives just before its words (--box, from JS) */
:is(#letter,#letter-end) .egg-box>:not(.egg-type){align-self:center}
:is(#letter,#letter-end) .egg-box .egg-type{padding-right:.12em;font-size:.8334em;line-height:1.944em}   /* 20px against the line's 24 (owner, 15 Oct), still centred in the 1.62em box */   /* the box's baseline is the typed words' baseline, so they sit on the line with the rest */
:is(#letter,#letter-end) .egg-box.is-empty .egg-type::before{content:'';position:absolute;left:0;top:.36em;bottom:.3em;width:max(1.5px,.05em);border-radius:1px;background:currentColor;animation:egg-caret 1.06s steps(1) infinite}   /* the caret waits at the start of the empty box */
:is(#letter,#letter-end) .box-icon{display:inline-grid;place-items:center;width:.82em;height:.82em;color:#8d8e94}
:is(#letter,#letter-end) .box-mic{margin-left:.28em}
:is(#letter,#letter-end) .egg-box svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:is(#letter,#letter-end) .box-send{display:inline-grid;place-items:center;width:1.22em;height:1.22em;border-radius:50%;background:#f0f0f2;color:#b4b5ba;
 transition:background .35s ease,color .35s ease}
:is(#letter,#letter-end) .box-send svg{width:.7em;height:.7em;stroke-width:2.1}
:is(#letter,#letter-end) .egg-box.is-ready .box-send{background:#e4e4e8;color:#55565c}
/* "Getting your words right…": "write" corrects itself to "right" (letter-sequence.js). Both spellings sit in the same place;
   the word's width eases from one to the other, the old letters blur out and the new ones blur in, one after another. */
:is(#letter,#letter-end) .egg-right{display:inline-block}
:is(#letter,#letter-end) [data-live] .egg-right{pointer-events:auto}
:is(#letter,#letter-end) .egg-right .w{position:relative;white-space:nowrap;transition:width .55s cubic-bezier(.4,0,.2,1),opacity .18s linear}
:is(#letter,#letter-end) .rt-old{position:absolute;left:0;top:0;white-space:nowrap}
:is(#letter,#letter-end) .egg-right i{font-style:normal;transition:opacity .34s ease,filter .34s ease;transition-delay:calc(var(--k)*50ms)}
:is(#letter,#letter-end) .rt-new i{opacity:0;filter:blur(4px)}
:is(#letter,#letter-end) .egg-right.is-fixed .rt-new i{opacity:1;filter:blur(0);transition-delay:calc(260ms + var(--k)*60ms)}
:is(#letter,#letter-end) .egg-right.is-fixed .rt-old i{opacity:0;filter:blur(4px);transition-delay:calc(140ms + var(--k)*50ms)}
/* the slip's dotted underline, which draws away first */
:is(#letter,#letter-end) .egg-right .w::after{content:'';position:absolute;left:.02em;right:.02em;bottom:.1em;height:2px;
 background:radial-gradient(circle,currentColor .8px,transparent 1.1px) 0 0/4px 2px repeat-x;opacity:.55;transform-origin:right center;
 transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .38s linear}
:is(#letter,#letter-end) .egg-right.is-fixed .w::after{transform:scaleX(0);opacity:0}
@media(prefers-reduced-motion:reduce){:is(#letter,#letter-end) .egg-right i,:is(#letter,#letter-end) .egg-right .w,:is(#letter,#letter-end) .egg-right .w::after{transition:none}}
/* "Candor also keeps your words on your Mac." (owner, 15 Oct): "keeps" in grey, regular weight; its letter-spacing is set by
   letter-sequence.js (m.keep): wide open as it arrives, closing with the scroll to tighter than normal, opening on hover. */
/* "…communicate with machines." (owner, 15 Oct): the word in each era's machine type, stacked on one baseline (see the JS) */
:is(#letter,#letter-end) .egg-mach{display:inline}
:is(#letter,#letter-end) [data-live] .egg-mach{pointer-events:auto}
:is(#letter,#letter-end) .egg-mach .w{display:inline-grid;align-items:baseline;justify-items:start;vertical-align:baseline;white-space:nowrap}
:is(#letter,#letter-end) .mc-era{grid-area:1/1;white-space:nowrap;transform-origin:0 50%;will-change:opacity,filter}
:is(#letter,#letter-end) .mc-tty{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.84em;letter-spacing:.07em}   /* a teletype's capitals */
:is(#letter,#letter-end) .mc-term{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em}   /* a terminal prompt */
:is(#letter,#letter-end) .mc-caret{display:inline-block;width:.5em;height:.9em;margin-left:.12em;vertical-align:-.1em;background:currentColor;animation:egg-caret 1.06s steps(1) infinite}
:is(#letter,#letter-end) .mc-pixel{line-height:0}
:is(#letter,#letter-end) .mc-pixel canvas{display:block}   /* early screens' dot-matrix type */
:is(#letter,#letter-end) .mc-web{font-family:"Times New Roman",Times,serif;font-size:1.08em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}   /* a web page's link */
:is(#letter,#letter-end) .mc-axis{position:absolute;left:50%;width:min(26em,86%);transform:translateX(-50%);height:1px;pointer-events:none;opacity:0;font-family:var(--sans,Inter,sans-serif)}   /* the timeline under the line */
:is(#letter,#letter-end) .mc-axis{--mc-grey:#86878c}   /* one grey for the whole timeline (owner, 15 Oct) */
:is(#letter,#letter-end) .mc-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--mc-grey)}
:is(#letter,#letter-end) .mc-tick{position:absolute;top:-3px;width:1px;height:7px;margin-left:-.5px;background:var(--mc-grey)}
:is(#letter,#letter-end) .mc-mark{position:absolute;top:-7px;width:1px;height:15px;margin-left:-.5px;background:var(--mc-grey)}
:is(#letter,#letter-end) .mc-label{position:absolute;top:20px;display:flex;flex-direction:column;align-items:center;gap:7px;transform:translateX(-50%);white-space:nowrap}
:is(#letter,#letter-end) .mc-label :is(b,span){font-weight:400;font-size:13px;line-height:1.2;color:var(--mc-grey);font-variant-numeric:tabular-nums}   /* name and year alike */
:is(#letter,#letter-end) .egg-keep{display:inline}
:is(#letter,#letter-end) [data-live] .egg-keep{pointer-events:auto}
:is(#letter,#letter-end) .egg-keep .w{color:#8c8d92;font-weight:400}
/* "…the same ambition to hardware." (owner, 15 Oct): a small plate of matte dark grey aluminium, softly rounded, with
   "hardware" cut right through it, so the page shows through each letter. The cut is drawn in SVG (filter #engrave-cut,
   in index.html): the plate's wall shows along the top of each opening, the plate casts a soft shadow onto the page
   through it, and the cut edge catches a little light along the bottom. When the word
   arrives the cut is made left to right behind a small point of light (--burn 0..1), then a soft sheen crosses the plate;
   afterwards the sheen follows the mouse (letter-sequence.js). */
@property --mx{syntax:'<percentage>';inherits:true;initial-value:-40%}
@property --burn{syntax:'<number>';inherits:true;initial-value:0}
:is(#letter,#letter-end) .egg-metal{position:relative;display:inline-block;padding:.13em .56em .15em;margin:-.25em .05em;border-radius:.46em;vertical-align:baseline;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#45464b 0%,#3b3c40 45%,#333438 100%);   /* our dark grey, not black, so the cut-out reads softly */
 box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 .5px rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.5),
  0 0 0 .5px rgba(0,0,0,.75),0 .14em .34em rgba(0,0,0,.2),0 .02em .06em rgba(0,0,0,.22);
 transition:opacity .18s linear,--burn 1.25s cubic-bezier(.45,0,.35,1)}
:is(#letter,#letter-end) .egg-metal.is-cut{--burn:1}
:is(#letter,#letter-end) [data-live] .egg-metal{pointer-events:auto}
:is(#letter,#letter-end) .egg-metal .w{font-weight:800;letter-spacing:.025em;
 background:linear-gradient(#fff,#fff);   /* cut right through: the page shows through each letter */
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:url(#engrave-cut);
 -webkit-mask:linear-gradient(90deg,#000 calc(var(--burn)*104% - 4%),transparent calc(var(--burn)*104%));mask:linear-gradient(90deg,#000 calc(var(--burn)*104% - 4%),transparent calc(var(--burn)*104%));
 transition:opacity .18s linear}
/* the laser's point, travelling with the cut */
:is(#letter,#letter-end) .egg-metal::before{content:'';position:absolute;top:22%;bottom:22%;left:calc(.56em + var(--burn)*(100% - 1.12em));width:2px;margin-left:-1px;border-radius:2px;pointer-events:none;
 background:#fff;box-shadow:0 0 .18em .06em rgba(255,240,220,.85),0 0 .5em .12em rgba(255,200,150,.35);
 opacity:calc(min(var(--burn)*25,1)*min((1 - var(--burn))*25,1))}
/* a soft sheen across the matte plate */
:is(#letter,#letter-end) .egg-metal::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(100deg,transparent calc(var(--mx) - 28%),rgba(255,255,255,.085) var(--mx),transparent calc(var(--mx) + 28%));transition:--mx .45s cubic-bezier(.3,0,.2,1)}
:is(#letter,#letter-end) .egg-metal.is-shine{animation:metal-shine 1.7s cubic-bezier(.45,0,.25,1) both}
@keyframes metal-shine{from{--mx:-40%}to{--mx:140%}}
/* the close: the manifesto link, and a small aside beneath it */
:is(#letter,#letter-end) .letter__manifesto a{color:inherit;text-decoration:none;padding-bottom:.1em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}   /* one rule under the whole link (its words are separate boxes) */
:is(#letter,#letter-end) .letter__manifesto[data-live] a{pointer-events:auto}
:is(#letter,#letter-end) .letter__manifesto small{display:block;margin-top:.9em;font-size:16px;line-height:1.4;color:#707070}
:is(#letter,#letter-end) .letter__line--big{font-family:var(--serif);font-size:var(--t-display);line-height:1.06;max-width:17ch}
:is(#letter,#letter-end) .letter__free{display:block;max-width:none;margin:0}
:is(#letter,#letter-end) .letter__free .letter__free-word{display:block;width:max-content;margin:0 auto}   /* "Free." above "Forever.*" (owner, 15 Oct) */
:is(#letter,#letter-end) .letter__free .letter__promise{display:block;position:relative;width:max-content;margin:0 auto}
:is(#letter,#letter-end) .letter__free small{font-size:clamp(18px,1.5vw,22px);margin-top:28px;opacity:1}
:is(#letter,#letter-end) .letter__promise sup{display:none}
:is(#letter,#letter-end) .letter__free .letter__quotation{font-style:normal}   /* upright, like the Warhol quote (owner, 15 Oct) */
:is(#letter,#letter-end) .letter__dust{display:none;position:absolute;inset:-50px;pointer-events:none;width:calc(100% + 100px);height:calc(100% + 100px)}

@media(prefers-reduced-motion:no-preference){
 :is(#letter,#letter-end)[data-sequence="ready"]{height:var(--letter-height)}
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__col{position:sticky;top:0;height:100svh;height:100lvh;min-height:520px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;padding:88px 7vw 70px;gap:0;overflow:clip}
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__line{grid-area:1/1;position:relative;margin:0;opacity:var(--beat-opacity,0);transform:translateY(var(--beat-y,0px));pointer-events:none}
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__promise sup{display:block;left:calc(100% + .06em);top:.04em;font-size:.6em;line-height:1;translate:none;opacity:var(--star-opacity,0)}   /* Sarthak's asterisk and dust, twice the size (owner, 15 Oct; was .3em) */
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__dust{display:block}
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__free small{opacity:var(--no-asterisk,0);transform:translateY(var(--note-y,4px))}
}
@media(max-width:600px){
 :is(#letter,#letter-end) .letter__col{padding-inline:7vw}
 :is(#letter,#letter-end) .letter__line{max-width:100%;font-size:24px;line-height:1.4}
 :is(#letter,#letter-end) .letter__list{font-size:20px;line-height:1.4;gap:.9em;width:100%}
 :is(#letter,#letter-end) .letter__list li{white-space:normal;text-wrap:pretty;grid-template-columns:1.5em minmax(0,1fr)}
 :is(#letter,#letter-end) .letter__line--big{font-size:clamp(46px,10vw,66px);line-height:1.08}
 :is(#letter,#letter-end) .letter__free{font-size:clamp(58px,13vw,78px)}
 :is(#letter,#letter-end) .letter__free small{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 :is(#letter,#letter-end){height:auto!important}
 :is(#letter,#letter-end) .letter__line,:is(#letter,#letter-end) .w,:is(#letter,#letter-end) .w>span,:is(#letter,#letter-end) .letter__free small{opacity:1!important;transform:none!important}
 :is(#letter,#letter-end) .letter__star,:is(#letter,#letter-end) .letter__dust{display:none!important}
}

/* The calendar after "two years": a tiny card set into the line, flipping month by month on its own up to today */
:is(#letter,#letter-end) .letter__cal{display:inline-block;position:relative;vertical-align:-.3em;width:1.5em;height:1.36em;margin:0 .14em 0 .2em;perspective:10em;opacity:var(--cal-in,0)}
:is(#letter,#letter-end) .cal-card,:is(#letter,#letter-end) .cal-leaf{position:absolute;left:0;top:0;width:1.5em;border-radius:.28em;overflow:hidden;
 background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(244,244,246,.86));box-shadow:inset 0 0 0 .5px rgba(0,0,0,.16),inset .5px .8px 0 #fff,0 .05em .2em rgba(0,0,0,.08)}
:is(#letter,#letter-end) .cal-card{height:1.36em;display:grid;grid-template-rows:.42em 1fr;text-align:center}
:is(#letter,#letter-end) .cal-back{transform:translate(.1em,.1em);opacity:.55}
:is(#letter,#letter-end) .cal-back2{transform:translate(.19em,.19em);opacity:.28}
:is(#letter,#letter-end) .cal-card b,:is(#letter,#letter-end) .cal-leaf b{display:block;height:.42em;font:600 .26em/1.62em var(--sans);letter-spacing:.08em;color:#fff;background:#1d1d1f;text-align:center}
:is(#letter,#letter-end) .cal-card b{font-size:.26em;height:auto}
:is(#letter,#letter-end) .cal-card i{font:500 .44em/2.15em var(--sans);font-style:normal;letter-spacing:-.01em;color:#1d1d1f}
:is(#letter,#letter-end) .cal-now::after{content:'';position:absolute;left:0;right:0;top:62%;height:.5px;background:rgba(0,0,0,.12)}
:is(#letter,#letter-end) .cal-leaf{height:62%;border-radius:.28em .28em 0 0;transform-origin:50% 100%;backface-visibility:hidden;opacity:0}
:is(#letter,#letter-end) .cal-leaf b{font-size:.26em;height:auto}
/* A single viewport-sized reading plane keeps native touch scrolling on one
   backing store. Per-word/per-glyph promotion creates hundreds of nested
   layers while their parent also fades and moves. Keep those fades intact,
   but raster their text together instead of allocating a layer for each. */
@media(prefers-reduced-motion:no-preference){
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__col{isolation:isolate;transform:translateZ(0);backface-visibility:hidden}
 :is(#letter,#letter-end)[data-sequence="ready"]:not([data-entry]) .letter__col{background:#fff}
}
/* Keep all five 20px points readable on short phone screens without shrinking
   the type or letting the grid's intrinsic row push the final point offscreen. */
@media(max-width:600px) and (max-height:650px) and (prefers-reduced-motion:no-preference){
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__col{padding-block:80px 24px;grid-template-rows:minmax(0,1fr)}
 :is(#letter,#letter-end) .letter__list{line-height:1.35;gap:.65em}
}