/* Still Sauna v2: Postcards. A deck of Still's own cards, dealt one on top of the last.
   Mobile contract: scroll frames write transforms only; every size here is fixed in svh/vw, so the
   phone toolbar never moves anything. */

:root {
  --sage: #abb18b;
  --sage-deep: #9ea57d;
  --cream: #e5ddc8;
  --ground: #262a1b;            /* the table the deck sits on */
  --ink: #262c16;               /* body text: 6.5:1 on sage, 10:1 on cream */
  --hand: #3c4626;              /* their script ink, sampled from the cards (large text) */
  --paper: #efe9d8;
  --mist: #cfd2b8;
  --grain: url("/still/assets/grain.png");
  --ease: cubic-bezier(.23, 1, .32, 1);
  --write: cubic-bezier(.45, .05, .25, 1);
}

html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--fw-text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
h1, h2, p, figure, fieldset { margin: 0; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.st-hand { font-family: "Nothing You Could Do", "Segoe Script", cursive; font-weight: 400; letter-spacing: 0; }
.caps { font: 700 12px/1.35 var(--fw-text); letter-spacing: .28em; text-transform: uppercase; }

.st-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 700 15px/1 var(--fw-text); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.st-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .st-btn:hover { background: #3a4223; } }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.pile :focus-visible, .card :focus-visible { outline-color: var(--ink); }

/* the handwriting writes itself: a clip window travels left to right while the text inside is
   counter-moved, so only transforms change. Overhangs of the script are kept by padding inside. */
[data-write] .w { display: block; width: fit-content; overflow: hidden; margin: -.14em -.5em -.24em -.14em; transform: translate3d(-101%, 0, 0); transition: transform .6s var(--write); transition-delay: calc(var(--n, 0) * .22s); }
[data-write] .w > span { display: block; padding: .14em .5em .24em .14em; transform: translate3d(101%, 0, 0); transition: inherit; transition-delay: inherit; }
[data-write].is-written .w, [data-write].is-written .w > span { transform: none; }

/* ---------- 1. the pile ---------- */
.pile {
  position: relative; overflow: hidden; isolation: isolate;
  height: calc(100vh - var(--fw-bar-h)); height: calc(100svh - var(--fw-bar-h)); min-height: 560px; max-height: 1100px;
  background: var(--sage) var(--grain); color: var(--ink);
}
.pile__card, .pile__mark, .pile__hand { position: absolute; margin: 0; transform-origin: 50% 50%; transform: rotate(var(--r, 0deg)); }
.pile.is-live [data-plane] { will-change: transform; }
.pile__card { aspect-ratio: 4 / 5; padding: clamp(5px, .55vw, 9px); background: var(--paper); border-radius: 3px; box-shadow: 0 22px 40px -22px rgba(28, 30, 16, .7), 0 2px 5px rgba(28, 30, 16, .22); }
.pile__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; background: #8d8a6c; }
.pile__mark { color: var(--hand); aspect-ratio: 1014 / 596; z-index: 2; }
.pile__card--logs { z-index: 1; }
.pile__card--room { z-index: 3; }
.pile__card--rain { z-index: 4; }
.pile__hand { z-index: 5; color: var(--hand); line-height: 1; white-space: nowrap; }
.pile__copy { position: absolute; z-index: 6; display: grid; gap: 14px; justify-items: start; }
.pile__lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 25ch; font-weight: 500; }

@media (min-width: 861px) {
  .pile__left { position: absolute; left: 5vw; top: 9%; bottom: 7%; width: min(46vw, 800px); display: flex; flex-direction: column; }
  .pile__left > * { position: relative; left: auto; top: auto; bottom: auto; }
  .pile__mark { width: min(100%, 74svh); }
  .pile__hand { margin: 1.2svh 0 0 2vw; font-size: clamp(44px, min(5.2vw, 9svh), 96px); align-self: flex-start; }
  .pile__copy { margin-top: auto; }
  .pile__lede { max-width: 30ch; }
  .pile__card--logs { left: 53vw; top: 7%; width: 17vw; }
  .pile__card--room { right: 5vw; top: 16%; width: 23vw; }
  .pile__card--rain { left: 58vw; top: 51%; width: 15.5vw; }
}
@media (max-width: 860px) {
  .pile { min-height: 600px; }
  .pile__left { display: contents; }
  .pile__mark { left: 5vw; top: 3.5%; width: 74vw; }
  .pile__hand { left: 6vw; top: calc(3.5% + 47vw); font-size: 10.5vw; }
  .pile__card--logs { left: 5vw; top: calc(3.5% + 63vw); width: 40vw; }
  .pile__card--room { right: 5vw; top: calc(3.5% + 57vw); width: 46vw; }
  .pile__card--rain { left: 28vw; top: calc(3.5% + 101vw); width: 32vw; }
  .pile__copy { left: 5vw; right: 5vw; bottom: calc(22px + env(safe-area-inset-bottom)); gap: 10px; }
  .pile__lede { font-size: 16.5px; max-width: 30ch; }
}
/* short phones: a smaller wordmark and pile so the copy never sits on the cards */
@media (max-width: 860px) and (max-aspect-ratio: 10/16) and (max-height: 700px) {
  .pile__mark { width: 62vw; }
  .pile__hand { top: calc(3.5% + 38vw); font-size: 9.5vw; }
  .pile__card--logs { top: calc(3.5% + 57vw); width: 31vw; left: 9vw; }
  .pile__card--room { top: calc(3.5% + 54vw); width: 37vw; right: 8vw; }
  .pile__card--rain { top: calc(3.5% + 77vw); width: 26vw; left: 36vw; }
  .pile__copy { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) and (min-aspect-ratio: 10/16) {
  .pile__mark { width: 52vw; }
  .pile__hand { top: calc(3.5% + 29vw); font-size: 9vw; }
  .pile__card--logs { top: calc(3.5% + 34vw); width: 26vw; left: 46vw; }
  .pile__card--room { top: calc(3.5% + 30vw); width: 28vw; right: 4vw; }
  .pile__card--rain { top: calc(3.5% + 56vw); width: 20vw; left: 60vw; }
}

/* ---------- 2 to 7. the deck ---------- */
.deck {
  --t0: 28px; --step: 12px; --gap: 18svh;
  --ch: calc(100vh - 150px); --ch: calc(100svh - 150px);
  position: relative; padding: 7svh 0 24svh; background: var(--ground);
}
.deck__mk { display: block; height: 0; }
.card {
  position: sticky; top: calc(var(--t0) + var(--i) * var(--step));
  box-sizing: border-box; height: var(--ch); max-height: 780px; width: min(1180px, calc(100% - 64px));
  margin: 0 auto var(--gap); border-radius: 6px; overflow: hidden;
  background: var(--sage); color: var(--ink); transform-origin: 50% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 -10px 30px -16px rgba(0, 0, 0, .55);
}
.deck.is-live .card { will-change: transform; }
.card:last-child { margin-bottom: 0; }
/* paper grain as an overlay, not a background: a tiled background on a sticky, scaling card re-rasters
   every scroll frame in Chrome (measured: 1,100 paints per scroll vs 60 this way) */
.card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--grain); pointer-events: none; }
.card__hand { color: var(--hand); line-height: 1.3; }
.card__sign { color: var(--hand); aspect-ratio: 1014 / 596; }

.card--word { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5.5vw, 84px); }
.card--word .card__hand { font-size: clamp(36px, 5.1vw, 82px); }
.card__word { display: grid; gap: clamp(24px, 4vh, 44px); }
.card__aside { max-width: 36ch; font-size: 16px; line-height: 1.6; font-weight: 500; }
.card--word .card__sign { width: clamp(84px, 9vw, 130px); align-self: flex-end; }

.card--photo { display: grid; grid-template-columns: 1.12fr 1fr; }
.card__photo { min-height: 0; overflow: hidden; background: #6f6c52; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; }
.card--flip .card__photo { order: 2; }
.card__text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(32px, 4.5vw, 72px); padding-bottom: clamp(80px, 9vh, 120px); background: var(--sage); }
.card--cream .card__text { background: var(--cream); }
.card__text .card__hand { font-size: clamp(34px, 3.9vw, 66px); }
.card__text p { max-width: 34ch; font-size: 17px; line-height: 1.6; font-weight: 500; }
.card__text .card__sign { position: absolute; right: clamp(28px, 3vw, 44px); bottom: clamp(24px, 3vw, 40px); width: clamp(70px, 6vw, 96px); }

.card--blank { display: grid; place-items: center; }
.card--blank .card__sign { width: clamp(90px, 10vw, 140px); }

@media (max-width: 860px) {
  .deck { --t0: 10px; --step: 7px; --gap: 7svh; --ch: calc(100vh - 62px); --ch: calc(100svh - 62px); padding: 3svh 0 13svh; }
  .card { width: calc(100% - 20px); border-radius: 5px; }
  .card--word { padding: 30px 24px 26px; }
  .card--word .card__hand { font-size: clamp(24px, 7.1vw, 44px); }
  .card--word { justify-content: flex-start; }
  .card__word { flex: 1; grid-template-rows: 1fr auto; padding-bottom: 6px; }
  .card--word .card__hand { align-self: center; margin-bottom: 4svh; }
  .card--word .card__aside { max-width: calc(100% - 84px); }
  .card--word .card__sign { width: 64px; margin-top: -42px; }
  .card__aside { font-size: 15.5px; }
  /* words on top, photo below: the next card covers the photo first, so the line stays readable longest */
  .card--photo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .card--photo .card__photo, .card--flip .card__photo { order: 2; }
  .card__text { justify-content: flex-start; gap: 10px; padding: 24px 22px 22px; }
  .card__text .card__hand { font-size: clamp(28px, 8.6vw, 44px); }
  .card__text p { font-size: 15.5px; line-height: 1.55; }
  .card__text .card__sign { right: 20px; top: 24px; bottom: auto; width: 56px; }
  .card__text .card__hand { padding-right: 60px; }
}

/* ---------- 8. your card ---------- */
.yours { background: var(--ground); color: var(--paper); padding: clamp(16px, 4vh, 72px) 0 clamp(72px, 12vh, 140px); }
.yours__in {
  display: grid; grid-template-columns: minmax(300px, 500px) minmax(0, 520px); gap: clamp(40px, 6vw, 110px);
  grid-template-areas: "card head" "card ctl"; align-content: center; justify-content: center;
  width: min(1180px, calc(100% - 64px)); margin: 0 auto;
}
.yours__card {
  grid-area: card; position: relative; --cw: 400px; --u: calc(var(--cw) / 100); aspect-ratio: 4 / 5; box-sizing: border-box; border-radius: 6px;
  background: var(--sage) var(--grain); color: var(--hand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.yours__line { position: absolute; left: calc(9 * var(--u)); right: calc(7 * var(--u)); top: 50%; transform: translateY(-58%); font-size: calc(var(--fs, 13) * var(--u)); line-height: 1.32; }
.yours__line .w > span { white-space: nowrap; }
.yours__sign { position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(26 * var(--u)); aspect-ratio: 1014 / 596; transform: translateX(-50%); }
.yours__foot { position: absolute; left: calc(9 * var(--u)); top: calc(8 * var(--u)); font-size: max(9px, calc(2.6 * var(--u))); letter-spacing: .3em; color: var(--ink); opacity: .85; }
.yours__ctl { grid-area: ctl; display: grid; gap: 22px; align-content: start; }
.yours__head { grid-area: head; align-self: end; display: grid; gap: 14px; }
.yours__title { font: 700 clamp(30px, 3.4vw, 46px)/1.08 var(--fw-text); letter-spacing: -.02em; color: var(--paper); }
.yours__lede { color: var(--mist); max-width: 40ch; }
.yours__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.yours__acts .st-btn { background: var(--sage); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .yours__acts .st-btn:hover { background: #bcc29c; } }
.yours__note { color: var(--mist); font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; min-width: 0; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(239, 233, 216, .38); font-size: 15px; font-weight: 600; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.chips input:checked + span { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--paper); outline-offset: 2px; }
.field { display: grid; gap: 6px; }
.field > span { font: 700 12px/1.3 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.field input { min-height: 48px; box-sizing: border-box; width: 100%; padding: 8px 0; border: 0; border-bottom: 1.5px solid rgba(239, 233, 216, .5); border-radius: 0; background: transparent; color: var(--paper); font: 500 18px/1.3 var(--fw-text); }
.field input::placeholder { color: #9fa38a; }
.field input:focus { outline: none; border-bottom-color: var(--sage); }
.field input:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

@media (max-width: 860px) {
  .yours__in { grid-template-columns: 1fr; grid-template-areas: "head" "card" "ctl"; gap: 26px; width: calc(100% - 40px); }
  .yours__card { width: min(100%, 420px); justify-self: center; }
}

.yours__list { display: grid; gap: 16px; padding-top: 34px; margin-top: 10px; border-top: 1px solid rgba(239, 233, 216, .18); }
.yours__list > p { color: var(--mist); max-width: 44ch; }
.yours__soon { font-size: clamp(44px, 5vw, 72px); line-height: 1; color: #c4cda9; margin-left: -.04em; }
.yours__form { display: grid; gap: 20px; margin-top: 6px; }
.yours__form fieldset { border: 0; padding: 0; min-width: 0; }
.yours__form legend { font: 700 12px/1.3 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; padding: 0; }
.yours__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field select { min-height: 48px; width: 100%; padding: 8px 28px 8px 0; border: 0; border-bottom: 1.5px solid rgba(239, 233, 216, .5); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe9d8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center; color: var(--paper); font: 500 17px/1.3 var(--fw-text); -webkit-appearance: none; appearance: none; }
.field select option { color: var(--ink); background: var(--paper); }
.field select:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.st-btn--sage { justify-self: start; background: var(--sage); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .st-btn--sage:hover { background: #bcc29c; } }
.yours__ig a { color: var(--paper); font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 861px) { .yours__card { position: sticky; top: 28px; align-self: start; } }
@media (max-width: 480px) { .yours__pair { grid-template-columns: 1fr; } }

/* ---------- scroll-driven path: where the browser can run scroll timelines (Chrome 115+, Safari 26+),
   the pile drift and the deck settle run on the compositor with no script per frame. still.js adds .sd
   only then, and keeps its own rAF fallback for everyone else. ---------- */
.sd .pile { view-timeline: --pile block; }
.sd .pile [data-plane] { animation: st-drift linear both; animation-timeline: --pile; animation-range: exit 0% exit 100%; }
@keyframes st-drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  to { transform: translate3d(0, calc(var(--f) * (var(--fw-bar-h) - 100svh)), 0) rotate(calc(var(--r, 0deg) * .65)); }
}
.sd .deck { view-timeline: --deck block; --chh: min(var(--ch), 780px); --pitch: calc(var(--chh) + var(--gap)); --pad: 7svh; --n: 4; }
.sd .card:not(.card--blank) {
  animation: st-settle linear both; animation-timeline: --deck;
  /* from the moment the next card's top reaches the bottom of the screen, to the moment the last card has landed */
  animation-range: cover calc(var(--pad) + (var(--i) + 1) * var(--pitch)) cover calc(var(--pad) + var(--n) * var(--pitch) + 100vh - var(--t0) - var(--n) * var(--step));
}
.sd .card:nth-of-type(1) { --s: .82; } .sd .card:nth-of-type(2) { --s: .865; } .sd .card:nth-of-type(3) { --s: .91; } .sd .card:nth-of-type(4) { --s: .955; }
/* the card's line writes itself as the card is dealt, tied to scroll rather than a clock */
.sd .card [data-write] { view-timeline: --line block; }
.sd .card [data-write] .w, .sd .card [data-write] .w > span { transition: none; animation: linear both; animation-timeline: --line; animation-range: cover calc(12% + var(--n, 0) * 7%) cover calc(34% + var(--n, 0) * 7%); }
.sd .card [data-write] .w { animation-name: st-wrap; }
.sd .card [data-write] .w > span { animation-name: st-ink; }
@keyframes st-wrap { from { transform: translate3d(-101%, 0, 0); } to { transform: none; } }
@keyframes st-ink { from { transform: translate3d(101%, 0, 0); } to { transform: none; } }
@keyframes st-settle { from { transform: none; } to { transform: scale(var(--s)); } }
@media (max-width: 860px) { .sd .deck { --pad: 3svh; } }

/* ---------- reduced motion: the same deck, laid flat ---------- */
.st-rm .card, .st-rm .card .w, .st-rm .card .w > span { animation: none !important; }
.st-rm .card { position: relative; top: auto; margin-bottom: 20px; height: auto; min-height: min(var(--ch), 680px); }
.st-rm .deck { padding-bottom: 8svh; }
.st-rm [data-write] .w, .st-rm [data-write] .w > span { transform: none; transition: none; }
.st-rm .st-btn { transition: none; }
@media (max-width: 860px) { .st-rm .card--photo { grid-template-rows: 46svh auto; } }