/* Still Sauna v6: a turn of the glass. In through the door, a round dealt as three cards, a pause, the same
   door steamed over and wiped, out into the cool, and a letter on the way home. Phone first.
   Frames write only transform and opacity. Border, never inset box-shadow. No filters on moving content. */

:root {
  --ember: #140d09;
  --ember-2: #2a190f;
  --honey: #ecc08a;
  --honey-soft: #d9c7ae;
  --slate: #151d21;
  --slate-2: #1b2a31;
  --frost: #bcd3dc;
  --sage: #abb18b;
  --sage-ink: #232a14;
  --table: #262a1b;
  --paper: #efe9d8;
  --cream: #e5ddc8;
  --hand-ink: #3c4626;
  --bone: #f3f0e7;
  --gut: 22px;
  --bar: 44px;

  /* house tokens (V4 names) */
  --h-ground: var(--ember);
  --h-ink: var(--bone);
  --h-soft: #d3c4ad;
  --h-accent: var(--honey);
  --h-accent-ink: #1c120c;
  --h-line-ink: var(--bone);
  --h-dark: #1f2219;
  --h-focus: var(--honey);
}

html { background: var(--ember); -webkit-text-size-adjust: 100%; }
body.st { margin: 0; background: var(--ember); color: var(--bone); font: 400 16px/1.6 var(--fw-text); -webkit-font-smoothing: antialiased; }
.st img, .st svg { display: block; }
.st h1, .st h2, .st h3, .st p, .st figure, .st fieldset, .st ul { margin: 0; }
.st-hand { font-family: "Nothing You Could Do", "Segoe Script", cursive; font-weight: 400; letter-spacing: 0; }
.st-h2 { font: 700 clamp(42px, 12.4vw, 92px)/.92 var(--fw-display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; max-width: 13ch; }
.st-word { aspect-ratio: 1014 / 596; height: auto; overflow: visible; }
.st-touch { display: inline; }
.st-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .st-touch { display: none; } .st-fine { display: inline; } }
.st :focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

/* ===================================================================== 1. THE DOOR */
.st-hero { --span: 1.6; position: relative; height: calc(var(--span) * 100vh); height: calc(var(--span) * 100lvh); background: #0d0805; }
.st-hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #0d0805; }
.st-layer { position: absolute; inset: 0; transform-origin: 50% 50%; }
.st-far { transform-origin: 50% 58%; }
.st-far { animation: st-breath 16s steps(32) infinite alternate; }   /* ambient motion in 2-per-second steps: a slow breath that costs almost nothing to composite */
.st-far picture, .st-far img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-far img { object-fit: cover; object-position: 50% 42%; }
@keyframes st-breath { from { scale: 1; } to { scale: 1.032; } }   /* the individual scale property, so it composes with the scroll-driven transform */

.st-steam { pointer-events: none; }
.st-steam__in { position: absolute; left: -25%; width: 150%; }
.st-steam--back { animation: st-drift-l 46s steps(46) infinite alternate; }
.st-steam--front { animation: st-drift-r 58s steps(58) infinite alternate; }
.st-steam__in img { width: 100%; height: 100%; object-fit: cover; }
.st-steam--back .st-steam__in { top: 48%; height: 36%; opacity: .5; }
.st-steam--front .st-steam__in { bottom: -6%; height: 44%; opacity: .5; }
@keyframes st-drift-l { from { translate: 0 0; } to { translate: -16% 0; } }
@keyframes st-drift-r { from { translate: -16% 0; } to { translate: 0 0; } }

.st-frame { transform-origin: 50% 44%; }
.st-frame picture, .st-frame img { display: block; width: 100%; height: 100%; }
.st-frame img { object-fit: fill; }   /* phones: the frame is stretched to the stage so both posts stay in view */
@media (min-width: 761px) { .st-frame img { object-fit: cover; object-position: 50% 0; } }

.st-far::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgba(10, 6, 4, .86), rgba(10, 6, 4, .64) 34%, rgba(10, 6, 4, 0) 60%),
  linear-gradient(to top, rgba(10, 6, 4, .8), rgba(10, 6, 4, 0) 34%); }

.st-hero__text { position: absolute; left: 0; right: 0; top: 0; height: calc(100svh - var(--bar)); min-height: 520px; display: grid; grid-template-rows: auto 1fr auto; justify-items: start; pointer-events: none;
  padding: 4.2svh var(--gut) max(30px, calc(env(safe-area-inset-bottom) + 14px)); }
.st-hero__copy { display: grid; gap: 12px; justify-items: start; }
.st-hero__word { width: 104px; color: var(--bone); opacity: .92; }
.st-hero__h { font-size: clamp(64px, 20vw, 96px); line-height: 1; color: #fbf4e6; text-shadow: 0 2px 22px rgba(0, 0, 0, .5); margin-top: 2px; }
.st-hero__lede { font: 500 17px/1.5 var(--fw-text); color: #f6eddc; max-width: 27ch; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .7); }
.st-hero__cta { grid-row: 3; align-self: end; pointer-events: auto; }
.st-hero__cta .fw-btn { min-width: 0; }
.st-hero__credit { margin-top: 12px; max-width: 30ch; font: 600 11.5px/1.4 var(--fw-text); letter-spacing: .04em; color: #d6c9b4; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.st-hero__copy { transition: opacity .6s var(--fw-ease), transform .6s var(--fw-ease); }
.st-hero.is-stepped .st-hero__copy { opacity: 0; transform: translate(0, -30px); }
.st-hero__second { transition: opacity .6s var(--fw-ease), transform .6s var(--fw-ease); transform: translate(0, 22px); }
.st-hero.is-stepped .st-hero__second { opacity: 1; transform: none; }
.st-hero.is-past .st-hero__second { opacity: 0; }
.st-hero__second { position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--bar) + 6.5svh); font: 700 clamp(54px, 17vw, 120px)/.9 var(--fw-display); text-transform: uppercase; color: #fbf4e6; text-shadow: 0 2px 26px rgba(0, 0, 0, .55); opacity: 0; max-width: 8ch; pointer-events: none; }
html:not(.sd) .st-hero.is-live .st-layer { will-change: transform, opacity; }
.st-hero:not(.is-live) .st-far, .st-hero:not(.is-live) .st-steam { animation-name: none; }   /* no animation, no layer: the hero costs nothing once it is off screen */
/* the stage fades up once the plates are decoded */
.js .st-hero__stage { opacity: 0; transition: opacity .6s var(--fw-ease); }
.js .st-hero.is-ready .st-hero__stage { opacity: 1; }

@media (min-width: 761px) {
  .st-hero { --span: 2.5; }
  .st-far::after { background:
    linear-gradient(to right, rgba(10, 6, 4, .9), rgba(10, 6, 4, .7) 34%, rgba(10, 6, 4, .3) 52%, rgba(10, 6, 4, 0) 72%),
    linear-gradient(to top, rgba(10, 6, 4, .78), rgba(10, 6, 4, 0) 34%); }
  .st-hero__text { height: 100lvh; grid-template-rows: auto 1fr auto; padding: calc(var(--bar) + 14svh) max(var(--gut), 6vw) calc(var(--bar) + 7svh); }
  .st-hero__text::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(10, 6, 4, .78), rgba(10, 6, 4, .56) 34%, rgba(10, 6, 4, 0) 58%), linear-gradient(to top, rgba(10, 6, 4, .6), rgba(10, 6, 4, 0) 30%); }   /* a column of density under the type, above the steam */
  .st-hero__text > * { position: relative; }
  .st-hero__word { width: 148px; }
  .st-hero__h { font-size: clamp(96px, 10.5vw, 168px); }
  .st-hero__lede { font-size: 20px; max-width: 24ch; }
  .st-hero__second { left: max(var(--gut), 6vw); top: calc(var(--bar) + 14svh); bottom: auto; max-width: 7ch; font-size: clamp(88px, 10vw, 176px); }
  .st-steam--back .st-steam__in { top: 30%; height: 58%; }
}

/* ===================================================================== 2. A ROUND */
.st-round { position: relative; background: var(--ember); padding: clamp(56px, 9svh, 110px) 0 0; }
.st-round__head { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gut) clamp(22px, 3.5svh, 48px); }
.st-round__sub { margin-top: 18px; max-width: 30ch; font-size: 17px; color: var(--honey-soft); }
.st-deck { --t0: 10px; --step: 10px; --gap: 4svh; --ch: calc(100svh - 124px);
  position: relative; padding: 0 0 3svh; }
.st-card { --c-bg: var(--ember-2); --c-ink: #f6eee2; --c-acc: var(--honey); --c-soft: #e0d0b8;
  position: sticky; top: calc(var(--t0) + var(--i) * var(--step)); box-sizing: border-box;
  height: var(--ch); min-height: 470px; max-height: 780px; width: calc(100% - 20px); margin: 0 auto var(--gap);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 10px; background: var(--c-bg); color: var(--c-ink); transform-origin: 50% 0; }
.st-card:last-child { margin-bottom: 0; }
html:not(.sd) .st-deck.is-live .st-card { will-change: transform; }
.st-card--cool { --c-bg: var(--slate-2); --c-ink: #eef4f6; --c-acc: var(--frost); --c-soft: #c3d4db; }
.st-card--rest { --c-bg: var(--sage); --c-ink: var(--sage-ink); --c-acc: #36421f; --c-soft: #2f3a1b; }
.st-card__txt { padding: 24px 22px 16px; }
.st-card__h { font: 700 clamp(58px, 18vw, 112px)/.86 var(--fw-display); text-transform: uppercase; color: var(--c-acc); margin-bottom: 14px; }
.st-card__txt p { font: 500 16px/1.55 var(--fw-text); max-width: 34ch; text-wrap: pretty; }
.st-card__fig { position: relative; min-height: 0; overflow: hidden; border-radius: 0 0 10px 10px; }
.st-card__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-card--heat .st-card__fig img { object-position: 50% 62%; }
.st-card--cool .st-card__fig img { object-position: 50% 30%; }
.st-card__fig figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 3px; background: rgba(10, 6, 3, .76); color: #f4ede1; font: 600 11px/1 var(--fw-text); letter-spacing: .06em; }
.st-card__shade { position: absolute; inset: 0; border-radius: inherit; background: #0a0603; opacity: 0; pointer-events: none; }
/* rest: two of their real cards, lying on the sage */
.st-card__fig--prints { background: var(--sage); }
.st-print { position: absolute; height: auto; border: 6px solid #f5f0e3; background: #f5f0e3; box-shadow: 0 20px 30px -16px rgba(30, 36, 14, .6); }
.st-card__fig--prints .st-print { inset: auto; height: auto; object-fit: initial; }
.st-card__fig--prints .st-print--a { left: 6%; top: 4%; width: 47%; transform: rotate(-3.5deg); z-index: 2; }
.st-card__fig--prints .st-print--b { right: 5%; top: 22%; width: 50%; transform: rotate(3deg); }

@media (min-width: 761px) {
  .st-deck { --t0: 24px; --step: 14px; --gap: 16svh; --ch: calc(100svh - 150px); }
  .st-card { width: min(1120px, calc(100% - 64px)); grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); border-radius: 12px; }
  .st-card__txt { padding: clamp(32px, 4vw, 64px); align-self: center; }
  .st-card__fig { order: 2; border-radius: 0 12px 12px 0; }
  .st-card__txt p { font-size: 18px; }
  .st-card__h { font-size: clamp(72px, 8vw, 128px); }
}

/* ===================================================================== 3. THE FILM */
.st-film { --film-ground: var(--h-dark); }

/* ===================================================================== 4. THE GLASS (peak) */
.st-glass { --span: 3.3; position: relative; height: calc(var(--span) * 100vh); height: calc(var(--span) * 100lvh); background: #0b0705; }
.st-glass__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #0b0705; }
.st-out { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; background: #1a0f08; }
.st-out picture, .st-out img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-out img { object-fit: cover; object-position: 80% 42%; }
html:not(.sd) .st-glass.is-live .st-out, html:not(.sd) .st-glass.is-live .st-door, html:not(.sd) .st-glass.is-live .st-pane__glass { will-change: transform, opacity; }

.st-door { --dx: 20px; --dt: 86px; --db: 184px; position: absolute; inset: 0; transform-origin: 0 50%; }
.st-door__b { position: absolute; background: #1a110b url("/still/assets/door.webp") 0 0 / 180px auto repeat; }
.st-door__b--t { left: 0; right: 0; top: 0; height: var(--dt); border-bottom: 1px solid rgba(236, 192, 138, .18); }
.st-door__b--b { left: 0; right: 0; bottom: 0; height: var(--db); border-top: 1px solid rgba(236, 192, 138, .18); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 16px 84px 0 var(--gut); }   /* content hangs from the top of the bar, so a visible toolbar never covers it */
.st-door__b--l { left: 0; top: var(--dt); bottom: var(--db); width: var(--dx); }
.st-door__b--r { right: 0; top: var(--dt); bottom: var(--db); width: var(--dx); }
.st-door__pull { position: absolute; right: 0; top: calc(var(--dt) + (100% - var(--dt) - var(--db)) * .5 - 76px); width: 56px; height: 152px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.st-door__pull:active { cursor: grabbing; }
.st-door__pull:focus-visible { outline: 2px solid var(--honey); outline-offset: -4px; }
.st-door__handle { position: absolute; right: 6px; top: 16px; bottom: 16px; width: 8px; border-radius: 4px; background: linear-gradient(90deg, #6b4a2c, #b08552 45%, #6b4a2c); transition: transform .2s var(--fw-ease); }
.st-door__pull:active .st-door__handle { transform: translateX(-3px); }
.st-hint-pull { display: none; }
.st-glass.is-wiped .st-hint-wipe { display: none; }
.st-glass.is-wiped .st-hint-pull { display: inline; }
.st-glass__hint { margin: 0; max-width: 30ch; font: 500 14px/1.45 var(--fw-text); color: #eadfcb; opacity: 0; transition: opacity .4s var(--fw-ease); }
.st-glass__hint.is-on { opacity: 1; }
.st-glass__btn { --h-line-ink: var(--bone); min-height: 48px; }

.st-pane { position: absolute; left: var(--dx); right: var(--dx); top: var(--dt); bottom: var(--db); overflow: hidden; }
.st-pane__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 6, 4, .6), rgba(10, 6, 4, 0) 42%), radial-gradient(ellipse 85% 60% at 50% 56%, rgba(10, 6, 4, .6), rgba(10, 6, 4, .38)); }
.st-glass__lead { position: absolute; left: 20px; right: 20px; top: 22px; display: grid; gap: 12px; transition: opacity .5s var(--fw-ease), transform .5s var(--fw-ease); }
.st-glass__lead.is-gone { opacity: 0; transform: translate(0, -18px); }
.st-glass__h { font: 700 clamp(46px, 14vw, 96px)/.9 var(--fw-display); text-transform: uppercase; color: #fbf4e6; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.st-glass__lead p { font: 500 16px/1.5 var(--fw-text); color: #f0e6d6; max-width: 26ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.st-pane__glass { position: absolute; inset: 0; }
.st-pane__msg { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.st-pane__big { font-size: clamp(54px, 16.5vw, 96px); line-height: 1.04; color: #fdf6e8; text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.st-pane__small { font: 700 12px/1.5 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: #f6ecd9; max-width: 26ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.st-fog { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; opacity: .94; }

@media (max-height: 700px) { .st-door { --dt: 66px; --db: 156px; } .st-glass__h { font-size: 40px; } .st-pane__big { font-size: 50px; } }
@media (min-width: 761px) {
  .st-glass { --span: 3.6; }
  .st-door { --dx: max(32px, calc((100% - 900px) / 2)); --dt: 64px; --db: 150px; }
  .st-door__b--b { padding: 0 calc(var(--dx) + 84px) 0 calc(var(--dx) + 4px); flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .st-glass__hint { max-width: 44ch; font-size: 15px; }
  .st-glass__lead { left: 40px; top: 40px; }
  .st-glass__h { font-size: clamp(64px, 7vw, 108px); }
  .st-door__pull { height: 190px; top: calc(var(--dt) + (100% - var(--dt) - var(--db)) * .5 - 95px); }
  .st-door__handle { right: 10px; width: 10px; top: 20px; bottom: 20px; }
  .st-pane__big { font-size: clamp(80px, 9vw, 132px); }
}

/* ===================================================================== 5. OUTSIDE, FIRST VISIT */
.st-outside { --h-accent: var(--frost); --h-accent-ink: #0f1a1f; --h-line-ink: #eaf0f2;
  background: var(--slate); color: #e6edf0; padding: clamp(52px, 9svh, 110px) 0 clamp(52px, 9svh, 110px); }
.st-outside__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gut); display: grid; gap: 36px 6vw; }
.st-outside .st-h2 { color: #f1f6f8; }
.st-outside__sub { margin-top: 16px; max-width: 28ch; font-size: 18px; color: var(--frost); }
.st-faq { border-top: 1px solid #2e4049; }
.st-faq details { border-bottom: 1px solid #2e4049; }
.st-faq summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 44px 14px 0; font: 700 clamp(22px, 6.2vw, 30px)/1.1 var(--fw-display); text-transform: uppercase; letter-spacing: .01em; color: #f1f6f8; cursor: pointer; list-style: none; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::before, .st-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; background: var(--frost); }
.st-faq summary::after { transform: rotate(90deg); transition: transform .24s var(--fw-ease); }
.st-faq details[open] summary::after { transform: rotate(0deg); }
.st-faq summary:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
.st-faq details p { padding: 0 0 22px; max-width: 54ch; color: #c7d6dc; font-size: 16px; line-height: 1.65; }
.st-faq details a { color: #f1f6f8; text-underline-offset: 3px; }
@media (min-width: 761px) { .st-outside__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ===================================================================== 6. THE LETTER (break the seal) */
.st-post { --E: min(86vw, 500px); --EH: calc(var(--E) * .62); --S: clamp(74px, 20vw, 104px);
  --sage-deep: #9ea57d; --sage-in: #8b9270; --ink: #262c16; --soft: #c9ccb4;
  position: relative; background: var(--table); color: var(--paper); padding: clamp(44px, 7svh, 84px) 0 0; overflow: hidden; }
.st-post::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 40% at 50% 14%, #353b25 0%, rgba(38, 42, 27, 0) 70%); }
.lt-intro { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 var(--gut); text-align: center; }
.lt-intro .st-h2 { margin: 0 auto; color: var(--cream); max-width: 11ch; }
.lt-ask { margin-top: 14px; color: var(--soft); font-size: 16px; transition: opacity .4s var(--fw-ease); }
.st-post.is-opening .lt-ask, .st-post.is-open .lt-ask { opacity: 0; }

.lt-desk { position: relative; width: min(92vw, 640px); margin: max(24px, calc(var(--EH) * .62 + 10px)) auto 0; height: calc(var(--EH) + 70px); }
.js .lt-desk { transition: height .95s var(--fw-ease) .5s; }
.lt-desk.is-grown { height: var(--open-h); }

.lt-env { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: var(--E); height: var(--EH); }
.lt-env__back, .lt-env__front, .lt-env__flap-out, .lt-env__flap-in { position: absolute; inset: 0; }
.lt-env__back { z-index: 1; border-radius: 5px; background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--sage-in); box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .7), 0 2px 0 rgba(0, 0, 0, .15); }
.lt-env__front { z-index: 3; border-radius: 0 0 5px 5px; background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--sage); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.lt-env__front::before, .lt-env__front::after { content: ""; position: absolute; top: 56%; bottom: 0; width: 50%; pointer-events: none; }
.lt-env__front::before { left: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(38, 44, 22, .16) 50%, transparent calc(50% + 1.5px)); }
.lt-env__front::after { right: 0; background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(38, 44, 22, .16) 50%, transparent calc(50% + 1.5px)); }
.lt-env__to { position: absolute; left: 6%; right: 6%; bottom: 8%; color: var(--ink); font: 700 clamp(9px, 2.55vw, 12px)/1.4 var(--fw-text); letter-spacing: .12em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.lt-env__flap { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 62%; transform-origin: 50% 0; transform: perspective(1400px) rotateX(0deg); transform-style: preserve-3d; }
.lt-env__flap-out, .lt-env__flap-in { clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lt-env__flap-out { background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--sage-deep); border-radius: 5px 5px 0 0; }
.lt-env__flap-in { background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--sage-in); transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); }

.lt-seal { position: absolute; z-index: 5; left: 50%; top: calc(var(--EH) * .62 - var(--S) * .62); width: var(--S); height: var(--S); margin-left: calc(var(--S) / -2); padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lt-seal:active { cursor: grabbing; }
.lt-seal::before { content: ""; position: absolute; inset: 10% -4% -14% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); transition: opacity .35s var(--fw-ease); }
.lt-seal.is-broken::before { opacity: 0; }
.lt-seal:focus-visible { outline-offset: 8px; }
.js .st-post.is-seen .lt-seal:not(.is-broken) { animation: lt-pulse 3.6s ease-in-out 3; }
@keyframes lt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.lt-seal__half { position: absolute; inset: 0; }
.js .lt-seal__half { will-change: auto; }
.lt-seal__half img { position: absolute; left: -6.667%; top: -6.667%; width: 113.334%; height: 113.334%; max-width: none; pointer-events: none; }   /* the wax is a baked image: the crack is in the art */

.lt-hint { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--EH) + 22px); text-align: center; color: var(--soft); font-size: 14px; }

.lt-letter { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--EH) * .56); }
.lt-letter__paper, .lt-letter__folds .lt-letter__paper { padding: clamp(28px, 7vw, 52px) clamp(22px, 6.5vw, 56px) clamp(30px, 7vw, 54px); background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--paper); color: #2c3319; border-radius: 3px; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7); }
.lt-letter__paper p { font: 500 16.5px/1.65 var(--fw-text); margin: 0 0 .85em; max-width: 46ch; }
.lt-letter__paper .st-hand { font-family: "Nothing You Could Do", "Segoe Script", cursive; font-weight: 400; color: var(--hand-ink); font-size: clamp(24px, 6.4vw, 30px); line-height: 1.4; margin: 0 0 .5em; }
.lt-letter__paper .lt-letter__sign { margin-top: 1.1em; margin-bottom: .1em; }
.lt-letter__name .st-word { width: clamp(118px, 34vw, 164px); color: var(--hand-ink); margin: 4px 0 0 -4px; }
.lt-letter__paper .lt-letter__ps { margin: 1em 0 0; font-size: clamp(20px, 5.4vw, 24px); }
.lt-letter__folds { position: absolute; inset: 0; perspective: 1800px; pointer-events: none; display: none; }
.lt-fold { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; transform-origin: 50% 0; }
.lt-fold__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lt-fold__face--front .lt-letter__paper { position: absolute; left: 0; right: 0; box-shadow: none; border-radius: 0; }
.lt-fold__face--back { transform: rotateX(180deg); background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, #e7e0cc; border: 1px solid rgba(38, 44, 22, .08); }
.lt-fold--b .lt-fold__face--back { background: linear-gradient(to top, rgba(38, 44, 22, .08), rgba(38, 44, 22, 0) 30%), url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, #e7e0cc; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55); }

.js .st-post:not(.is-ready) .lt-letter { opacity: 0; }
.js .st-post.is-folded.is-near .lt-letter__folds { display: block; }
.js .st-post.is-folded .lt-letter > .lt-letter__paper { opacity: 0; }
/* open: the default with no script and with reduced motion */
.st-post.is-open .lt-seal, .st-post.is-open .lt-hint, html:not(.js) .lt-seal, html:not(.js) .lt-hint { visibility: hidden; }
.st-post.is-open .lt-env__flap, html:not(.js) .lt-env__flap { transform: perspective(1400px) rotateX(180deg); z-index: 1; }
.st-post.is-open .lt-letter, html:not(.js) .lt-letter { z-index: 6; }
html:not(.js) .lt-desk, .st-rm .lt-desk { height: auto; display: flow-root; }
html:not(.js) .lt-letter, .st-rm .lt-letter { position: relative; top: auto; margin-top: calc(var(--EH) * .56); }
.st-rm .lt-seal, .st-rm .lt-hint { visibility: hidden; }

/* the reply card: the opening list */
.lt-card { --h-accent: #262c16; --h-accent-ink: #efe9d8; --h-focus: #262c16;
  position: relative; box-sizing: border-box; width: min(calc(100% - 28px), 560px); margin: clamp(10px, 3svh, 28px) auto 0; padding: clamp(28px, 6vw, 46px) clamp(22px, 6vw, 46px) clamp(26px, 5vw, 38px);
  background: url("/still/assets/paper-tooth.webp") 0 0 / 170px 170px repeat, var(--cream); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75); }
.st-post { padding-bottom: clamp(40px, 6svh, 80px); }
.lt-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; border-top: 2px dashed rgba(38, 44, 22, .28); }
.lt-card :focus-visible { outline-color: var(--ink); }
.lt-card__h { font: 700 clamp(40px, 11vw, 60px)/.92 var(--fw-display); text-transform: uppercase; color: #36421f; margin-top: 8px; }
.lt-card__lede { margin: 10px 0 22px; font-size: 16px; line-height: 1.55; max-width: 36ch; }
.lt-field { display: grid; gap: 6px; margin: 0 0 22px; }
.lt-field > span, .lt-set legend { font: 700 11px/1.35 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: #46512e; }
.lt-field i { font-style: normal; letter-spacing: .1em; text-transform: none; font-weight: 600; }
.lt-field input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 6px 2px; border: 0; border-bottom: 1.5px solid rgba(38, 44, 22, .5); border-radius: 0; background: transparent; color: var(--ink); font: 500 18px/1.3 var(--fw-text); }
.lt-field input:focus { outline: none; border-bottom: 3px solid var(--ink); padding-bottom: 4px; }
.lt-set { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
.lt-set legend { width: 100%; margin-bottom: 10px; padding: 0; }
.lt-chip { position: relative; cursor: pointer; }
.lt-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lt-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(38, 44, 22, .45); border-radius: 999px; font: 600 14px/1 var(--fw-text); color: var(--ink); transition: background-color .15s var(--fw-ease), color .15s var(--fw-ease); }
.lt-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.lt-chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.lt-err { margin: -6px 0 14px; font: 700 14px/1.4 var(--fw-text); color: #7b2f1c; }
.lt-send { position: relative; display: flex; align-items: center; margin-top: 6px; }
.lt-send .fw-btn { border-radius: 999px; min-height: 52px; padding: 0 28px; }
.lt-stamp { position: absolute; left: 220px; top: 50%; padding: 2px 14px; border: 3px solid #7b3f2a; border-radius: 6px; color: #7b3f2a; font-size: 28px; line-height: 1.1; opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(1.6); transition: opacity .25s var(--fw-ease), transform .35s var(--fw-ease); pointer-events: none; }
.lt-card.is-posted .lt-stamp { opacity: .92; transform: translateY(-50%) rotate(-10deg) scale(1); }
.lt-fine { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #333c20; }
.lt-fine a { font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 420px) { .lt-stamp { left: auto; right: 0; } }

/* ===================================================================== the sand timer (nav) */
.st-sand { position: fixed; z-index: 60; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 56px; height: 56px; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--fw-ease), transform .35s var(--fw-ease); }
.st-sand.is-on { opacity: 1; transform: none; }
.st-sand > * { pointer-events: auto; }
.st-sand__btn { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(243, 240, 231, .3); border-radius: 16px; background: #140d09; color: var(--bone); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--fw-ease); }
.st-sand__btn:active { transform: scale(.96); }
.st-sand__btn:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }
.st-sand__glass { position: relative; display: block; width: 26px; height: 42px; transition: transform .9s var(--fw-ease); }
.st-sand.is-flipped .st-sand__glass { transform: rotate(180deg); }
.st-sand__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-sand__line { fill: none; stroke: var(--bone); stroke-width: 1.8; stroke-linecap: round; }
.st-sand__cap { fill: none; stroke: var(--bone); stroke-width: 2.6; stroke-linecap: round; }
.st-sand__bulb { position: absolute; inset: 0; overflow: hidden; }
.st-sand__bulb--top { clip-path: polygon(25% 9.4%, 26.5% 21.9%, 30% 31.3%, 37.5% 39%, 50% 50%, 62.5% 39%, 70% 31.3%, 73.5% 21.9%, 75% 9.4%); }
.st-sand__bulb--bot { clip-path: polygon(50% 50%, 37.5% 57.8%, 30% 67.2%, 26.5% 78.1%, 25% 90.6%, 75% 90.6%, 73.5% 78.1%, 70% 67.2%, 62.5% 57.8%); }
.st-sand__bulb i { position: absolute; left: 0; right: 0; background: var(--honey); }
.st-sand__bulb--top i { top: 9.4%; height: 40.6%; transform: translate(0, calc(var(--sp, 0) * 100%)); }
.st-sand__bulb--bot i { top: 50%; height: 40.6%; transform: translate(0, calc((1 - var(--sp, 0)) * 100%)); }
.st-sand__stream { position: absolute; left: 48.2%; width: 3.6%; top: 49%; height: 41.6%; background: var(--honey); transform-origin: 50% 0; transform: scaleY(calc(1 - var(--sp, 0))); opacity: 0; }
.st-sand.is-live-stream .st-sand__stream { opacity: 1; }
.st-sand__say { position: absolute; right: 0; bottom: 64px; box-sizing: border-box; width: 136px; margin: 0; padding: 10px 0; text-align: center; border: 1px solid rgba(243, 240, 231, .26); border-radius: 10px; background: #140d09; color: var(--bone); font: 700 11px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--fw-ease), transform .4s var(--fw-ease); pointer-events: none !important; }
.st-sand.is-say .st-sand__say { opacity: 1; transform: none; }
.st-sand.is-open .st-sand__say { opacity: 0; }
.st-sand__tray { position: absolute; right: 0; bottom: 64px; width: min(272px, calc(100vw - 24px)); margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(243, 240, 231, .3); border-radius: 14px; background: #140d09; }
.st-sand__tray a, .st-sand__tray button { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--bone); font: 600 15px/1.2 var(--fw-text); text-align: left; text-decoration: none; cursor: pointer; }
.st-sand__tray small { font-size: 12px; color: #cdbfa8; }
.st-sand__tray a:active, .st-sand__tray button:active { background: #2a190f; }
@media (hover: hover) and (pointer: fine) { .st-sand__tray a:hover, .st-sand__tray button:hover { background: #2a190f; } }
.st-sand__tray a:focus-visible, .st-sand__tray button:focus-visible { outline: 2px solid var(--honey); outline-offset: -2px; }
html:not(.js) .st-sand { display: none; }

/* ===================================================================== reduced motion: the whole page, laid flat */
.st-rm .st-hero { height: auto; }
.st-rm .st-hero__stage { position: relative; height: 100svh; min-height: 560px; opacity: 1; }
.st-rm .st-far, .st-rm .st-steam { animation: none; }
.st-rm .st-frame { transform: none; }
.st-rm .st-hero__second { opacity: 1; top: auto; bottom: calc(var(--bar) + 84px); font-size: clamp(34px, 10vw, 60px); max-width: none; }
.st-rm .st-hero__text { padding-bottom: calc(var(--bar) + 20px); }
.st-rm .st-deck.is-live .st-card, .st-rm .st-card { will-change: auto; position: relative; top: auto; height: auto; min-height: 0; max-height: none; margin-bottom: 14px; }
.st-rm .st-card__fig { min-height: 340px; }
.st-rm .st-deck { padding-bottom: 6svh; }
.st-rm .st-glass { height: auto; }
.st-rm .st-glass__stage { position: relative; height: 100svh; min-height: 600px; }
.st-rm .st-door { transform: none; }
.st-rm .st-fog { opacity: .8; }
.st-rm .st-pane__msg { opacity: 1; }
.st-rm .st-glass__lead { display: none; }
.st-rm .st-glass__hint { opacity: 1; }
.st-rm .st-sand, .st-rm .st-sand__glass, .st-rm .st-sand__say { transition: none; }
@media (prefers-reduced-motion: reduce) { .lt-chip span, .lt-stamp, .st-sand, .st-sand__say, .st-sand__glass, .st-door__handle { transition: none; } .lt-seal { animation: none !important; } }

/* reduced motion, the glass: a static frosting with the message in dark ink above it; clearing it turns the ink back to cream */
.st-rm .st-pane__msg { z-index: 3; }
.st-rm .st-pane__big { color: #2b2418; text-shadow: none; }
.st-rm .st-pane__small { color: #3a3223; text-shadow: none; }
.st-rm .st-glass.is-clear .st-pane__big { color: #fdf6e8; text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.st-rm .st-glass.is-clear .st-pane__small { color: #f6ecd9; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
/* no script: everything laid flat and readable */
html:not(.js) .st-hero, html:not(.js) .st-glass { height: auto; }
html:not(.js) .st-hero__stage, html:not(.js) .st-glass__stage { position: relative; height: 100svh; min-height: 560px; }
html:not(.js) .st-hero__second { display: none; }
html:not(.js) .st-pane__msg { opacity: 1; z-index: 3; }
html:not(.js) .st-fog { display: none; }
html:not(.js) .st-glass__lead { display: none; }
html:not(.js) .st-card { position: relative; top: auto; height: auto; margin-bottom: 14px; }
html:not(.js) .st-card__fig { min-height: 320px; }


/* ===================================================================== the scroll-driven path
   Where the browser has scroll timelines (Chrome 115+, Safari 26+), the hero, the deck and the glass run on the
   compositor with no script per frame. The same choreography is written in still.js as the fallback for everyone
   else. .sd is set in the head only when timelines exist and motion is allowed. */
.sd .st-hero { view-timeline: --hero block; }
.sd .st-glass { view-timeline: --glass block; }
.sd .st-deck { view-timeline: --deck block; --chh: clamp(470px, var(--ch), 780px); --pitch: calc(var(--chh) + var(--gap)); }
.sd .st-hero.is-live .st-frame { animation-timeline: --hero; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
.sd .st-hero.is-live .st-far, .sd .st-hero.is-live .st-steam--front { animation-fill-mode: both, none; animation-timing-function: linear, steps(32); animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-range: contain 0% contain 100%, normal; animation-timeline: --hero, auto; animation-play-state: running, running; }
.sd .st-hero.is-live .st-far { animation-name: h-far, st-breath; animation-duration: 1ms, 16s; }
.sd .st-hero.is-live .st-steam--front { animation-name: h-front, st-drift-r; animation-duration: 1ms, 58s; }
.sd .st-hero.is-live .st-frame { animation-name: h-frame; }
@keyframes h-far { from { transform: translate(0, 0) scale(1.03); } to { transform: translate(0, -2.6lvh) scale(1.18); } }
@keyframes h-front { from { transform: translate(0, 0); opacity: .2; } 8% { opacity: .2; } 72% { opacity: .9; } to { transform: translate(8vw, -12lvh); opacity: .9; } }
@keyframes h-frame { from { transform: scale(1); opacity: 1; } 25% { transform: scale(1.36); } 50% { transform: scale(1.78); } 74% { opacity: 1; } 75% { transform: scale(2.23); } 97% { opacity: 0; } to { transform: scale(2.7); opacity: 0; } }
/* pointer depth on fine pointers: the individual translate property composes with the scroll animation */
.st-hero__stage { --px: 0; --py: 0; }
@media (hover: hover) and (pointer: fine) {
  .st-far { translate: calc(var(--px) * -7px) calc(var(--py) * -5px); }
  .st-frame { translate: calc(var(--px) * 16px) calc(var(--py) * 8px); }
}

/* the deck: the covered card settles back and dims, tied to the card that covers it */
.sd .st-deck.is-live .st-card:not(:last-child) { animation: st-settle linear both; animation-timeline: --deck;
  animation-range: cover calc((var(--i) + 1) * var(--pitch)) cover calc((var(--i) + 1) * var(--pitch) + 100svh - var(--t0) - (var(--i) + 1) * var(--step)); }
.sd .st-deck.is-live .st-card:not(:last-child) .st-card__shade { animation: st-dim linear both; animation-timeline: --deck;
  animation-range: cover calc((var(--i) + 1) * var(--pitch)) cover calc((var(--i) + 1) * var(--pitch) + 100svh - var(--t0) - (var(--i) + 1) * var(--step)); }
@keyframes st-settle { from { transform: none; } to { transform: scale(.95); } }
@keyframes st-dim { from { opacity: 0; } to { opacity: .5; } }

/* the glass */
.sd .st-glass.is-live .st-pane__glass, .sd .st-glass.is-live .st-door, .sd .st-glass.is-live .st-out { animation-timeline: --glass; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
.sd .st-glass.is-live .st-pane__glass { animation-name: g-fogfx; }
.sd .st-glass.is-live .st-door { animation-name: g-door; }
.sd .st-glass.is-live .st-out { animation-name: g-out; }
@keyframes g-fogfx { 0%, 6% { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 26%, 100% { opacity: 1; } }
@keyframes g-door { 0%, 68% { transform: perspective(1700px) rotateY(0deg); opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); } 95% { transform: perspective(1700px) rotateY(84deg); opacity: 1; } 100% { transform: perspective(1700px) rotateY(84deg); opacity: 0; } }
@keyframes g-out { 0%, 68% { transform: scale(1); animation-timing-function: cubic-bezier(.42, 0, .58, 1); } 95%, 100% { transform: scale(1.07); } }

/* the handle needs the door to swing: with reduced motion the glass is a static frosting and there is nothing to pull */
.st-rm .st-door__pull, html:not(.js) .st-door__pull { display: none; }
.st-rm .st-hint-pull { display: none !important; }
.st-door__pull:disabled { cursor: default; }
.st-door__pull:disabled .st-door__handle { opacity: .55; }

.st-rm .st-hero__second { transform: none; }
.st-rm .st-hero__copy, .st-rm .st-hero__second, .st-rm .st-glass__lead, .st-rm .st-glass__hint { transition: none; }

/* ambient motion (the room's breath, the steam, the seal's pulse) rests while the page is being scrolled: the scroll already moves everything,
   and a running ambient animation costs a style update on every frame */
html.st-moving .st-far, html.st-moving .st-steam, html.st-moving .lt-seal { animation-play-state: paused; }
html.st-moving.sd .st-hero.is-live .st-far, html.st-moving.sd .st-hero.is-live .st-steam--front { animation-play-state: running, paused; }