/* Still Sauna. Grammar: Rounds. Sections are phases of a sauna round in thermal order,
   each on its own hard-cut ground: heat (ember), cool down (slate), rest (sage). No drift. */

:root {
  --st-sage: #abb18b;
  --st-sage-deep: #4f5a3a;
  --st-sage-light: #c4cda9;
  --st-cream: #ece6d7;
  --st-char: #22231d;
  --st-char-soft: #3d4231;
  --st-ember: #24160f;
  --st-ember-ink: #efe6d6;
  --st-ember-soft: #c9b9a3;
  --st-slate: #182024;
  --st-cool-ink: #e3e9ea;
  --st-cool-soft: #a9b8bd;
  --st-hand: "Nothing You Could Do", "Segoe Script", cursive;
  --st-ease: cubic-bezier(.23, 1, .32, 1);
  --st-gutter: clamp(20px, 5vw, 72px);
  --st-radius: 2px;

  --sc-canvas: var(--st-ember);
  --sc-ink: var(--st-ember-ink);
  --sc-accent: var(--st-sage-light);
}

html { background: var(--st-ember); }
body { margin: 0; background: var(--st-ember); color: var(--st-ember-ink); font: 400 17px/1.65 var(--fw-text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--st-sage); color: var(--st-char); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--st-sage-light); outline-offset: 3px; }

.st-hand { font-family: var(--st-hand); font-weight: 400; letter-spacing: 0; line-height: 1.02; text-wrap: balance; }
.st-label { margin: 0 0 14px; font: 600 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--st-sage-light); }
.st-h2 { margin: 0 0 22px; font-size: clamp(54px, 7vw, 104px); }
.st-h2--sans { font: 300 clamp(38px, 4.6vw, 68px)/1.04 var(--fw-text); letter-spacing: -.02em; text-wrap: balance; }
.st-body { margin: 0 0 16px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; text-wrap: pretty; }
.st-body--soft { color: var(--st-ember-soft); }
.st-body em { font-style: italic; }

.st-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--st-radius); background: var(--st-sage); color: var(--st-char); font: 700 15px/1 var(--fw-text); text-decoration: none; cursor: pointer; transition: background-color .16s var(--st-ease), transform .12s var(--st-ease); }
.st-btn::after { content: ""; width: 7px; height: 7px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
.st-btn:active { transform: translateY(1px) scale(.98); }
@media (hover: hover) and (pointer: fine) { .st-btn:hover { background: var(--st-sage-light); } }
.st-btn--dark { background: var(--st-char); color: var(--st-cream); }
@media (hover: hover) and (pointer: fine) { .st-btn--dark:hover { background: #34362b; } }
.st-btn--dark:focus-visible { outline-color: var(--st-char); }

.st-wordmark { display: block; color: var(--st-cream); width: 190px; height: auto; aspect-ratio: 1014 / 596; }

/* the shared fine/touch cue words */
.st-cue__touch { display: none; }
@media (pointer: coarse) { .st-cue__fine { display: none; } .st-cue__touch { display: inline; } }

/* ------------------------------------------------------------ thermometer */
.thermo { position: fixed; z-index: 50; right: clamp(12px, 1.6vw, 24px); top: 50%; transform: translateY(-50%); font-family: var(--fw-text); color: var(--st-cream); }
.thermo { transition: opacity .3s var(--st-ease), visibility 0s; }
.thermo.is-away { opacity: 0; visibility: hidden; transition: opacity .3s var(--st-ease), visibility 0s linear .3s; }
.thermo__read { display: grid; justify-items: center; gap: 8px; width: 64px; padding: 14px 0 12px; border: 1px solid #ffffff24; border-radius: 40px; background: #17120dcc; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: inherit; font: inherit; cursor: pointer; transition: border-color .16s var(--st-ease); }
@media (hover: hover) and (pointer: fine) { .thermo__read:hover { border-color: #ffffff5c; } }
.thermo__tube { position: relative; width: 6px; height: 110px; border-radius: 6px; background: #ffffff1f; overflow: hidden; }
.thermo__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--th, #e6a15c); transform-origin: 50% 100%; transform: scaleY(.8); transition: transform .9s var(--st-ease), background-color .6s var(--st-ease); }
.thermo[data-phase="cool"] { --th: #9cc6d2; }
.thermo[data-phase="rest"] { --th: var(--st-sage-light); }
.thermo[data-phase="heat"] { --th: #e8a160; }
.thermo__num { font: 600 18px/1 var(--fw-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.thermo__phase { font: 600 9.5px/1.15 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; color: #d8cfbf; text-align: center; max-width: 56px; }
.thermo__list { position: absolute; right: calc(100% + 10px); top: 50%; width: max-content; margin: 0; padding: 8px; list-style: none; border: 1px solid #ffffff24; border-radius: 6px; background: #17120df0; visibility: hidden; opacity: 0; transform: translate(6px, -50%); transition: opacity .2s var(--st-ease), transform .2s var(--st-ease), visibility 0s linear .2s; }
.thermo.is-open .thermo__list { visibility: visible; opacity: 1; transform: translate(0, -50%); transition-delay: 0s; }
.thermo__list a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 4px; text-decoration: none; }
.thermo__list a span { font-weight: 600; font-size: 14px; }
.thermo__list a small { font-size: 12px; color: #b9ad9b; }
.thermo__list a[aria-current="step"] { background: #ffffff14; box-shadow: inset 2px 0 0 var(--th, #e8a160); }
@media (hover: hover) and (pointer: fine) { .thermo__list a:hover { background: #ffffff10; } }

/* ------------------------------------------------------------ hero (heat, round one) */
.st-hero { position: relative; background: #120b07; }
.st-hero__stage { background: #120b07; isolation: isolate; }
.st-plane { position: absolute; will-change: transform; }
.st-plane--far { inset: 0; }
.st-plane--far img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; transform: scale(var(--st-far, 1.02)); transform-origin: 34% 62%; }
.st-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(28% 34% at 33% 74%, #ff8a2a59, transparent 70%); animation: st-flicker 3.2s steps(1) infinite; }
@keyframes st-flicker { 0% { opacity: .82 } 18% { opacity: .64 } 31% { opacity: .9 } 52% { opacity: .7 } 70% { opacity: .95 } 86% { opacity: .74 } }
.st-steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-steam--back { z-index: 1; opacity: .7; }
.st-steam--front { z-index: 4; }

/* a column of density under the copy, not a full-frame darkening */
.st-hero__stage::before { content: ""; position: absolute; z-index: 2; inset: 0 0 0 auto; width: 62%; background: radial-gradient(90% 70% at 72% 50%, #1a0f0ae0 0%, #1a0f0a9e 48%, transparent 80%); pointer-events: none; }
.st-hero__copy { position: absolute; z-index: 3; left: 54%; right: var(--st-gutter); top: calc(18% + 20px); display: grid; justify-items: start; gap: 18px; transform: translateY(var(--st-copy-y, 0)) scale(var(--st-copy-s, 1)); transform-origin: 0 40%; opacity: var(--st-copy-o, 1); }
.st-hero__title { margin: 0; font-size: clamp(76px, 9.6vw, 160px); color: var(--st-cream); }
.st-hero__sub { margin: 0; max-width: 32ch; font-size: clamp(16px, 1.3vw, 19px); color: #e4d9c7; }
.st-hero__copy .st-btn { margin-top: 6px; }
.st-hero__second { position: absolute; z-index: 3; left: 0; right: 0; bottom: 7%; margin: 0; text-align: center; font-size: clamp(44px, 5.6vw, 92px); color: var(--st-cream); text-shadow: 0 2px 30px #1a0f0a, 0 0 2px #1a0f0a; }
.st-hero__band { position: absolute; z-index: 2; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, #120b07d9 25%, transparent); pointer-events: none; }
.st-jamb { top: -4%; height: 108%; width: auto; z-index: 5; filter: blur(2.5px) brightness(.5); }
.st-jamb--l { left: 0; transform: translateX(var(--st-jl, -32%)) scale(1.12); transform-origin: 0 50%; }
.st-jamb--r { right: 0; transform: translateX(var(--st-jr, 30%)) scale(1.12); transform-origin: 100% 50%; }

.st-cue { position: absolute; z-index: 6; left: 50%; bottom: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #ece6d740; border-radius: 40px; background: #120b07c7; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--st-cream); font: 600 11px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); opacity: var(--st-cue-o, 1); visibility: var(--st-cue-v, visible); animation: st-cue-in .9s .8s var(--st-ease) both; }
.st-cue svg { width: 10px; height: 14px; fill: none; stroke: var(--st-sage-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: st-nudge 1.8s 2s var(--st-ease) infinite; }
@media (pointer: coarse) { .st-cue svg { transform: rotate(180deg); animation-name: st-nudge-up; } }
@keyframes st-cue-in { from { opacity: 0; translate: 0 8px; } }
@keyframes st-nudge { 0%, 100% { translate: 0 0 } 50% { translate: 0 4px } }
@keyframes st-nudge-up { 0%, 100% { translate: 0 0 } 50% { translate: 0 -4px } }

/* ------------------------------------------------------------ heat copy */
.st-heat { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: clamp(96px, 12vw, 168px) var(--st-gutter) clamp(88px, 10vw, 140px); background: var(--st-ember); color: var(--st-ember-ink); }
.st-heat__in { grid-column: 1 / span 5; align-self: center; padding-right: 8px; }
.st-heat__fire { grid-column: 7 / span 6; margin: 0; }
.st-heat__fire img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.st-heat__logs { position: absolute; margin: 0; width: clamp(150px, 17vw, 260px); left: calc(50% - 6vw); bottom: clamp(48px, 7vw, 96px); box-shadow: 0 24px 50px -18px #000c; }
.st-heat__logs img { width: 100%; height: auto; }

/* ------------------------------------------------------------ cool down */
.st-cool { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--st-slate); color: var(--st-cool-ink); overflow: clip; }
.st-cool__photo { position: absolute; inset: 0; margin: 0; }
.st-cool__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.st-cool__in { position: relative; justify-self: end; width: min(520px, 40vw); margin-right: calc(var(--st-gutter) + 76px); padding: 40px 0; }
.st-temp { margin: 0 0 4px; font: 200 clamp(84px, 10vw, 150px)/.9 var(--fw-text); letter-spacing: -.04em; color: var(--st-cool-soft); font-variant-numeric: tabular-nums; }
.st-cool .st-body { color: var(--st-cool-ink); }

/* ------------------------------------------------------------ rest */
.st-rest { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; padding: clamp(88px, 11vw, 160px) var(--st-gutter); background: var(--st-sage); color: var(--st-char); }
.st-rest__photo { grid-column: 1 / span 5; margin: 0; }
.st-rest__photo img { width: 100%; height: auto; }
.st-rest__in { grid-column: 7 / span 5; }
.st-rest .st-h2 { color: #2c3222; }
.st-rest .st-body { color: var(--st-char); }

/* ------------------------------------------------------------ löyly: the peak */
.st-loyly { position: relative; background: #120b07; }
.st-loyly__stage { background: #120b07; isolation: isolate; }
.st-loyly__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(var(--st-ly-s, 1.04)); transform-origin: 46% 60%; }
.st-loyly__stage::before { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 70%; background: linear-gradient(to top, #120b07e6 10%, #120b0799 50%, transparent); pointer-events: none; }
.st-loyly__intro { position: absolute; z-index: 2; left: var(--st-gutter); bottom: clamp(48px, 10vh, 110px); max-width: 560px; }
.st-loyly__intro .st-body { color: #e7dccb; }
.st-glass { position: absolute; inset: 0; z-index: 3; visibility: var(--st-glass-v, hidden); }
.st-glass__msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 0 var(--st-gutter); text-align: center; color: var(--st-cream); background: radial-gradient(56% 40% at 50% 50%, #120b07d4, #120b0780 55%, transparent 85%); }
.st-glass__big { margin: 0; font-size: clamp(64px, 9vw, 150px); }
.st-glass__small { margin: 0; font: 600 13px/1.4 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: #eadfcd; }
.st-glass__fog { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--st-fog, 0); touch-action: pan-y; cursor: crosshair; }
.st-glass__ui { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 56px); display: grid; justify-items: center; gap: 12px; padding: 0 20px; opacity: var(--st-fog, 0); pointer-events: none; }
.st-glass__ui > * { pointer-events: auto; }
.st-glass__hint { margin: 0; padding: 8px 14px; border-radius: 30px; background: #22231dcc; color: var(--st-cream); font: 600 12px/1.3 var(--fw-text); letter-spacing: .06em; text-align: center; }
.st-btn--glass { background: var(--st-char); color: var(--st-cream); }
@media (hover: hover) and (pointer: fine) { .st-btn--glass:hover { background: #34362b; } }

/* ------------------------------------------------------------ cool down, again */
.st-cool2 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; padding: clamp(72px, 9vw, 128px) var(--st-gutter); background: var(--st-slate); color: var(--st-cool-ink); }
.st-cool2__photo { grid-column: 7 / span 6; grid-row: 1; margin: 0; }
.st-cool2__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.st-cool2__in { grid-column: 1 / span 5; grid-row: 1; }
.st-cool2 .st-body { color: var(--st-cool-ink); }

/* ------------------------------------------------------------ rest, the close */
.st-close { padding: clamp(104px, 13vw, 184px) var(--st-gutter) clamp(96px, 11vw, 150px); background: var(--st-sage); color: var(--st-char); }
.st-close__in { max-width: 760px; margin: 0 auto; display: grid; justify-items: center; text-align: center; }
.st-wordmark--close { width: clamp(150px, 16vw, 210px); margin-bottom: 28px; color: #f6f2e8; }
.st-close__title { margin: 0 0 18px; font-size: clamp(60px, 8vw, 116px); color: #2c3222; }
.st-close .st-body { margin-bottom: 40px; }
.st-form { display: grid; gap: 26px; width: 100%; max-width: 640px; text-align: left; }
.st-form fieldset { margin: 0; padding: 0; border: 0; }
.st-form legend { margin-bottom: 12px; padding: 0; font: 600 12px/1 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: var(--st-char-soft); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips label { position: relative; }
.st-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.st-chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #22231d5c; border-radius: 40px; font: 600 14px/1 var(--fw-text); transition: background-color .16s var(--st-ease), color .16s var(--st-ease), border-color .16s var(--st-ease); }
.st-chips input:checked + span { background: var(--st-char); border-color: var(--st-char); color: var(--st-cream); }
.st-chips input:focus-visible + span { outline: 2px solid var(--st-char); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .st-chips label:hover span { border-color: var(--st-char); } }
.st-field { display: grid; gap: 8px; font: 600 12px/1 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: var(--st-char-soft); }
.st-field input { min-height: 48px; padding: 0 14px; border: 1px solid #22231d5c; border-radius: var(--st-radius); background: #f3efe4; color: var(--st-char); font: 500 16px/1 var(--fw-text); letter-spacing: 0; text-transform: none; }
.st-field input:focus-visible { outline: 2px solid var(--st-char); outline-offset: 2px; }
.st-form .st-btn { justify-self: start; }
.st-form__note { margin: -10px 0 0; font-size: 14px; color: var(--st-char-soft); }

/* ------------------------------------------------------------ phone */
@media (max-width: 760px) {
  .thermo { top: auto; bottom: 14px; right: 14px; transform: none; }
  .thermo__read { grid-auto-flow: column; align-items: center; width: auto; gap: 10px; padding: 8px 14px 8px 12px; }
  .thermo__tube { width: 5px; height: 30px; }
  .thermo__phase { max-width: none; }
  .thermo__list { right: 0; top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
  .thermo.is-open .thermo__list { transform: none; }

  .st-plane--far img { object-position: 50% 50%; transform-origin: 40% 70%; }
  .st-glow { background: radial-gradient(50% 30% at 42% 66%, #ff8a2a59, transparent 70%); }
  .st-hero__stage::before { inset: auto 0 0 0; width: auto; height: 66%; background: linear-gradient(to top, #160d08f2 30%, #160d08b3 62%, transparent); }
  .st-hero__copy { left: var(--st-gutter); right: var(--st-gutter); top: auto; bottom: 104px; gap: 12px; transform-origin: 0 100%; }
  .st-wordmark { width: 130px; }
  .st-hero__title { font-size: clamp(64px, 19vw, 88px); }
  .st-hero__sub { font-size: 15.5px; }
  .st-hero__second { bottom: auto; top: 16%; font-size: 44px; padding: 0 20px; }
  .st-hero__band { inset: 0 0 auto 0; height: 40%; background: linear-gradient(to bottom, #120b07d9 25%, transparent); }
  .st-jamb--l { width: 22vw; height: 108%; object-fit: cover; object-position: 100% 50%; }
  .st-jamb--r { width: 10vw; height: 108%; object-fit: cover; }
  .st-hero__copy { z-index: 6; }
  .st-cue { bottom: 30px; left: 20px; transform: none; padding: 9px 14px; font-size: 10px; }

  .st-heat { display: block; padding-top: 80px; }
  .st-heat__fire { margin: 36px -6px 0 18%; }
  .st-heat__logs { position: relative; left: auto; bottom: auto; width: 46%; margin: -22% 0 0; }

  .st-cool { display: block; min-height: 0; }
  .st-cool__photo { position: relative; }
  .st-cool__photo img { height: auto; aspect-ratio: 900 / 1005; }
  .st-cool__in { width: auto; margin: 0; padding: 40px var(--st-gutter) 88px; }

  .st-rest { display: block; padding-top: 72px; }
  .st-rest__photo { width: 72%; margin: 0 0 40px auto; }

  .st-loyly__intro { right: var(--st-gutter); bottom: 96px; }
  .st-glass__big { font-size: 64px; }
  .st-glass__ui { bottom: 84px; }

  .st-cool2 { display: block; padding-bottom: 96px; }
  .st-cool2__photo { margin: 0 0 32px; }

  .st-close { padding-bottom: 104px; }
  .st-chips span { padding: 0 14px; }
}
@media (max-width: 380px) {
  .st-hero__title { font-size: 62px; }
  .st-hero__copy { bottom: 92px; gap: 10px; }
  .st-hero__sub { font-size: 14.5px; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .st-glow, .st-cue, .st-cue svg { animation: none; }
  .thermo__fill, .thermo__list { transition: none; }
  .st-glass__msg { z-index: 2; color: var(--st-char); background: none; pointer-events: none; }
  .st-glass__small { color: var(--st-char-soft); }
  .st-glass__fog { z-index: 1; }
  .st-glass__ui { z-index: 3; }
  .st-glass.is-clear .st-glass__msg { color: var(--st-cream); background: radial-gradient(56% 40% at 50% 50%, #120b07d4, #120b0780 55%, transparent 85%); }
  .st-glass.is-clear .st-glass__small { color: #eadfcd; }
}