/* Still Sauna v3: The Letter. The page is one piece of post: an envelope on the table, a wax seal you
   break, a handwritten letter that slides out and unfolds, prints tucked in, a reply card.
   Mobile contract: nothing is tied to scroll; the one sequence runs as compositor animations (transform
   and opacity only), layout never changes after load, and the open state is the default when there is
   no script or motion is reduced. */

:root {
  --sage: #abb18b;
  --sage-deep: #9ea57d;
  --sage-in: #8b9270;
  --cream: #e5ddc8;
  --paper: #efe9d8;
  --ground: #262a1b;            /* the table */
  --ink: #262c16;               /* body text: 6.5:1 on sage, 10:1 on cream */
  --hand: #3c4626;              /* their script ink */
  --soft: #c9ccb4;              /* small text on the table: 9:1 */
  --grain: url("/still/assets/grain.png");
  --ease: cubic-bezier(.23, 1, .32, 1);
  --E: min(86vw, 520px);        /* envelope width */
  --EH: calc(var(--E) * .62);   /* envelope height */
  --S: clamp(66px, 16vw, 90px); /* seal */
}

html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--paper); 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; }
.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: .26em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.rcard :focus-visible { outline-color: var(--ink); }

.st-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  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; } }

/* ---------------- the table ---------------- */
.post { position: relative; padding: clamp(26px, 5vh, 56px) 0 clamp(56px, 9vh, 96px); overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #313623 0%, var(--ground) 70%); }
.post::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .18; pointer-events: none; }
.post__intro { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 20px; text-align: center; }
.post__kicker { color: var(--soft); }
.post__title { margin-top: 10px; font-size: clamp(40px, 10vw, 66px); line-height: 1.05; color: var(--cream); }
.post__sub { margin: 12px auto 0; max-width: 38ch; color: var(--soft); font-size: 16px; line-height: 1.55; }

.desk { position: relative; display: flow-root; width: min(92vw, 640px); margin: max(28px, calc(var(--EH) * .62 + 12px)) auto 0; }   /* room for the open flap */

/* the envelope, seen from the back. No transform, opacity or perspective on .env itself, so its parts
   share one stacking order with the letter: back 1, letter 2, front pocket 3, flap 4, seal 5 */
.env { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: var(--E); height: var(--EH); }
.env__back, .env__front, .env__flap-out, .env__flap-in { position: absolute; inset: 0; background-image: var(--grain); }
.env__back { z-index: 1; border-radius: 5px; background-color: var(--sage-in); box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .7), 0 2px 0 rgba(0, 0, 0, .15); }
.env__front { z-index: 3; border-radius: 0 0 5px 5px; background-color: var(--sage); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env__front::before, .env__front::after { content: ""; position: absolute; top: 56%; bottom: 0; width: 50%; pointer-events: none; }
.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)); }
.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)); }
.env__to { position: absolute; left: 40%; right: 6%; bottom: 13%; color: var(--hand); font-size: clamp(16px, 4.2vw, 23px); line-height: 1.25; text-align: center; transform: rotate(-2deg); }
.env__postmark { position: absolute; left: 4%; bottom: 7%; width: 40%; height: auto; color: rgba(38, 44, 22, .5); transform: rotate(-9deg); font-family: var(--fw-text); font-weight: 700; }
.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; }
.env__flap-out, .env__flap-in { clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env__flap-out { background-color: var(--sage-deep); border-radius: 5px 5px 0 0; }
/* the inside face is drawn apex-up because its own rotateX(180deg) flips it: closed, it lines up with the
   outside; swung open about the top edge, it stands apex-up above the hinge */
.env__flap-in { background-color: var(--sage-in); transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.env__return { position: absolute; top: 13%; left: 22%; right: 22%; text-align: center; font-size: clamp(8px, 2vw, 10px); letter-spacing: .22em; color: rgba(38, 44, 22, .72); }

/* the seal: two halves of one wax disc, split along a crack */
.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; background: none; border-radius: 50%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.seal:active { cursor: grabbing; }
.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)); }
.seal:focus-visible { outline-offset: 6px; }
.seal::before { transition: opacity .35s var(--ease); }
.seal.is-broken::before { opacity: 0; }
.seal__half { position: absolute; inset: 0; }
.js .seal__half { will-change: transform, opacity; }
.seal__half--l { clip-path: polygon(50.0% 0.0%, 44.4% 0.3%, 39.5% 4.0%, 34.3% 5.0%, 28.5% 5.3%, 23.5% 7.8%, 19.8% 12.2%, 16.0% 16.0%, 10.9% 18.9%, 6.1% 22.4%, 2.8% 27.3%, 0.4% 32.7%, -1.0% 38.4%, -0.2% 44.3%, 2.7% 50.0%, 4.5% 55.1%, 3.4% 60.6%, 2.2% 66.7%, 4.1% 72.1%, 8.0% 76.4%, 11.1% 81.0%, 13.5% 86.5%, 17.1% 91.3%, 22.3% 94.1%, 28.0% 95.6%, 33.6% 96.7%, 39.3% 96.7%, 44.8% 95.9%, 49.0% 100.0%, 52.0% 88.0%, 45.0% 75.0%, 53.0% 62.0%, 46.0% 50.0%, 55.0% 37.0%, 47.0% 24.0%, 54.0% 12.0%); }
.seal__half--r { clip-path: polygon(50.0% 0.0%, 56.0% -3.5%, 61.6% -0.8%, 66.7% 2.3%, 71.4% 5.5%, 75.5% 9.4%, 79.4% 13.1%, 84.2% 15.8%, 89.3% 18.6%, 92.6% 23.2%, 94.2% 28.7%, 96.6% 33.7%, 100.9% 38.4%, 103.8% 43.9%, 102.7% 50.0%, 99.2% 55.5%, 96.5% 60.6%, 94.8% 65.7%, 92.9% 70.7%, 90.8% 75.6%, 89.1% 81.2%, 86.7% 86.7%, 82.2% 90.3%, 76.7% 92.5%, 71.9% 95.4%, 67.3% 99.4%, 61.7% 101.5%, 55.6% 99.7%, 49.0% 100.0%, 52.0% 88.0%, 45.0% 75.0%, 53.0% 62.0%, 46.0% 50.0%, 55.0% 37.0%, 47.0% 24.0%, 54.0% 12.0%); }
.seal__wax { position: absolute; inset: 0; clip-path: polygon(102.7% 50.0%, 103.1% 41.6%, 97.4% 34.6%, 93.9% 27.6%, 90.9% 20.2%, 84.2% 15.8%, 77.8% 11.7%, 72.3% 6.2%, 65.7% 1.7%, 58.3% -2.6%, 50.0% -3.3%, 42.4% 2.0%, 35.4% 5.0%, 27.4% 5.6%, 21.2% 10.4%, 16.0% 16.0%, 8.9% 20.1%, 3.4% 26.2%, 0.0% 33.8%, -0.8% 41.9%, 2.7% 50.0%, 4.3% 57.2%, 2.3% 65.5%, 4.8% 73.0%, 10.0% 79.0%, 13.5% 86.5%, 19.0% 92.6%, 26.9% 95.3%, 34.8% 96.8%, 42.7% 96.2%, 50.0% 96.7%, 58.0% 100.8%, 66.3% 100.1%, 72.8% 94.7%, 80.0% 91.3%, 86.7% 86.7%, 89.8% 78.9%, 92.5% 71.6%, 95.1% 64.7%, 97.9% 57.6%);
  background: radial-gradient(circle at 34% 28%, #a3ad78 0%, #7b8750 22%, #5f6a3a 52%, #48522c 78%, #353d1f 100%); }
.seal__wax::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; box-shadow: inset 0 2px 3px rgba(20, 24, 10, .55), inset 0 -1px 1px rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .16); }
.seal__mark { position: absolute; left: 23%; top: 34%; width: 54%; height: auto; color: #2c331a; filter: drop-shadow(0 1px 0 rgba(220, 228, 180, .35)); }

.desk__hint { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--EH) + 20px); text-align: center; color: var(--soft); font-size: 14px; }
.desk__hint-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .desk__hint-fine { display: inline; } .desk__hint-touch { display: none; } }

/* ---------------- the letter ---------------- */
.letter { position: relative; z-index: 2; margin-top: calc(var(--EH) * .56); }   /* flow-root on .desk keeps this from collapsing */
.letter__paper, .fold__face--front .letter__paper {
  padding: clamp(30px, 7vw, 58px) clamp(22px, 6.5vw, 62px) clamp(34px, 7vw, 60px);
  background: var(--paper) var(--grain); color: var(--hand); border-radius: 3px;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7);
}
.letter__paper p { font-size: clamp(20px, 5.3vw, 25px); line-height: 1.5; margin: 0 0 .62em; }
.letter__paper .letter__place { text-align: right; font-size: clamp(16px, 4.2vw, 19px); margin-bottom: 1.1em; }
.letter__paper .letter__dear { margin-bottom: .5em; }
.letter__paper .letter__sign { margin: 1em 0 .2em; }
.letter__name svg { width: clamp(120px, 34vw, 170px); height: auto; color: var(--hand); margin: 6px 0 0 -4px; }
.letter__paper .letter__ps { margin: 1.2em 0 0; font-size: clamp(17px, 4.4vw, 21px); }

/* the folds: three aria-hidden panels laid over the real letter while it is folded or unfolding.
   No preserve-3d on the parent, so the panels flatten in DOM order and never z-fight */
.letter__folds { position: absolute; inset: 0; perspective: 1800px; pointer-events: none; display: none; }
.fold { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; will-change: transform; }
.fold__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fold__face--front .letter__paper { position: absolute; left: 0; right: 0; box-shadow: none; border-radius: 0; }
.fold__face--back { transform: rotateX(180deg); background: #e7e0cc var(--grain); box-shadow: inset 0 0 0 1px rgba(38, 44, 22, .06); }
.fold--b .fold__face--back { background-image: linear-gradient(to top, rgba(38, 44, 22, .08), rgba(38, 44, 22, 0) 30%), var(--grain); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55); }
.fold--b, .fold--c { transform-origin: 50% 0; }

/* closed (script running, motion allowed, seal intact) */
.js .post:not(.is-ready) .letter { opacity: 0; }
.js .post.is-folded .letter__folds { display: block; }
.js .post.is-folded .letter > .letter__paper { opacity: 0; }
.js .post.is-folded .letter { will-change: transform; }

/* open: the default without script and with reduced motion */
.post.is-open .seal, .post.is-open .desk__hint, html:not(.js) .seal, html:not(.js) .desk__hint { visibility: hidden; }
.post.is-open .env__flap, html:not(.js) .env__flap { transform: perspective(1400px) rotateX(180deg); z-index: 1; }
.post.is-open .letter, html:not(.js) .letter { z-index: 6; }

/* ---------------- tucked in ---------------- */
.prints { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 3vw, 34px); width: 100%; margin: clamp(40px, 7vh, 72px) auto 0; }
.print { width: min(30%, 230px); padding: 9px 9px 0; background: #f5f0e3; color: var(--hand); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .7); transform: rotate(var(--r, -3deg)); }
.print:nth-child(2) { --r: 2.5deg; margin-top: 26px; }
.print:nth-child(3) { --r: -1.5deg; margin-top: 8px; }
.print img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.print figcaption { padding: 8px 2px 10px; font-size: clamp(14px, 3.6vw, 19px); line-height: 1.2; text-align: center; }
.js:not(.st-rm) .print { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate .8s var(--ease); will-change: transform, opacity; }
.js:not(.st-rm) .prints.is-in .print { opacity: 1; translate: 0 0; }
.js:not(.st-rm) .prints.is-in .print:nth-child(2) { transition-delay: .12s; }
.js:not(.st-rm) .prints.is-in .print:nth-child(3) { transition-delay: .24s; }
.js:not(.st-rm) .post:not(.is-open) .prints .print { opacity: 0; translate: 0 26px; }
/* wide screens: the prints lie on the table either side of the letter */
@media (min-width: 1240px) {
  .prints { position: absolute; z-index: 1; top: calc(var(--EH) * .5 + 90px); left: -300px; right: -300px; width: auto; margin: 0; display: block; pointer-events: none; }
  .print { position: absolute; width: 230px; }
  .print:nth-child(1) { left: 0; top: 0; --r: -6deg; }
  .print:nth-child(2) { right: 10px; top: 70px; margin: 0; --r: 5deg; }
  .print:nth-child(3) { left: 40px; top: 380px; margin: 0; --r: 3deg; }
}

/* ---------------- the reply card ---------------- */
.reply { position: relative; padding: clamp(20px, 4vh, 40px) 14px clamp(72px, 12vh, 120px); background: var(--ground); }
.rcard { position: relative; max-width: 560px; margin: 0 auto; padding: clamp(28px, 6vw, 46px) clamp(22px, 6vw, 46px) clamp(26px, 5vw, 40px); background: var(--cream) var(--grain); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75); }
.rcard::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; border-top: 2px dashed rgba(38, 44, 22, .28); }
.rcard__kicker { color: #4d5636; }
.rcard__title { margin-top: 6px; font-size: clamp(38px, 9vw, 54px); line-height: 1.05; color: var(--hand); }
.rcard__lede { margin: 8px 0 22px; font-size: 16px; line-height: 1.55; }
.rcard__field { display: grid; gap: 6px; margin: 0 0 22px; }
.rcard__field .caps { color: #4d5636; font-size: 11px; }
.rcard__field i { font-style: normal; letter-spacing: .12em; text-transform: none; font-weight: 600; }
.rcard__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, .45); border-radius: 0; background: transparent; color: var(--hand); font: 400 22px/1.3 "Nothing You Could Do", "Segoe Script", cursive; }
.rcard__field input::placeholder { color: rgba(60, 70, 38, .55); }
.rcard__field input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.rcard__set { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
.rcard__set legend { width: 100%; margin-bottom: 10px; padding: 0; color: #4d5636; font-size: 11px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(38, 44, 22, .4); border-radius: 999px; font: 600 14px/1 var(--fw-text); color: var(--ink); transition: background-color .15s var(--ease), color .15s var(--ease); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.rcard__send { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.rcard__stamp { position: absolute; left: 210px; 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(--ease), transform .35s var(--ease); pointer-events: none; }
.rcard.is-posted .rcard__stamp { opacity: .9; transform: translateY(-50%) rotate(-10deg) scale(1); }
.rcard__fine { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #3c4429; }
.rcard__fine a { font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 400px) { .rcard__stamp { left: auto; right: 0; } }

/* ---------------- the stamp: back to the reply card ---------------- */
.stamp { position: fixed; z-index: 60; right: max(14px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: 66px; height: 80px; padding: 5px; box-sizing: border-box; text-decoration: none;
  background: radial-gradient(circle, transparent 3px, var(--paper) 3.6px) -5px -5px / 10px 10px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
  opacity: 0; transform: translateY(18px) rotate(5deg); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.js .stamp { will-change: transform, opacity; }
.stamp.is-on { opacity: 1; transform: rotate(5deg); pointer-events: auto; }
.stamp__in { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; background: var(--sage) var(--grain); color: var(--ink); }
.stamp__in svg { width: 40px; height: auto; color: var(--ink); }
.stamp__in .caps { font-size: 9.5px; letter-spacing: .2em; }
html:not(.js) .stamp { display: none; }

@media (prefers-reduced-motion: reduce) {
  .st-btn, .chip span, .rcard__stamp, .stamp { transition: none; }
}
.post__ask { transition: opacity .4s var(--ease); }
.post.is-opening .post__ask, .post.is-open .post__ask { opacity: 0; }
/* the wordmark symbol carries its own viewBox; outer svgs only set size */
.seal__mark, .letter__name svg, .stamp__in svg { aspect-ratio: 1014 / 596; height: auto; overflow: visible; }