/* Prime Saunas — Nordic editorial minimalism.
   Paper-white ground, one ember accent, hairline rules, a lot of air. */

:root{
  /* Warm off-white ground; the photographs sit on white mounts against it,
     which is what stops a white-on-white product from disappearing. */
  --paper:#F4F2EE;
  --card:#FFFFFF;
  --ink:#17140F;
  --ink-2:#3D372F;
  --mute:#7A7269;
  --line:#DFD9D0;
  --ember:#A6432A;
  --measure:34rem;
  --pad:clamp(1.35rem, 5vw, 6rem);
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Helvetica, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

::selection{background:var(--ember); color:#fff}

/* barely-there paper tooth */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ───────── masthead ───────── */
.masthead{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.15rem var(--pad);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.masthead.stuck{border-bottom-color:var(--line)}
.wordmark{
  font-family:var(--serif); font-size:1.25rem; letter-spacing:.005em;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 24;
  color:var(--ink); text-decoration:none;
}
.masthead nav{display:flex; gap:1.6rem; align-items:baseline}
.masthead nav a{
  font-size:.775rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); text-decoration:none; transition:color .2s;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav .nav-cta{color:var(--ember)}
@media (max-width:44rem){
  .masthead nav a:not(.nav-cta){display:none}
}

/* ───────── hero ───────── */
.hero{
  display:grid; align-items:center; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding:clamp(3rem,9vh,7rem) var(--pad) clamp(4rem,10vh,8rem);
  max-width:88rem; margin:0 auto;
}
@media (max-width:52rem){
  .hero{grid-template-columns:1fr; padding-top:2rem}
  .hero-figure{order:-1; max-width:22rem; margin-inline:auto}
}

.eyebrow{
  margin:0 0 1.6rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}
h1{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:clamp(3rem,9vw,6.6rem);
  line-height:.96; letter-spacing:-.022em;
  margin:0 0 1.5rem;
}
h1 em{font-style:italic; color:var(--ember)}

.lede{
  max-width:26rem; margin:0 0 2rem;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--ink-2);
}

.price-line{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; margin:0 0 2.4rem}
.price{font-family:var(--serif); font-size:2.5rem; line-height:1; font-variation-settings:"SOFT" 40,"opsz" 60}
.price-note{font-size:.85rem; color:var(--mute); max-width:19rem; line-height:1.45}

.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap}

/* Every photograph sits on a white mount. The product is pale grey on white,
   so without this it dissolves into the page. */
.hero-figure,.fig{
  margin:0; background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1rem,2.2vw,2.25rem);
  box-shadow:0 1px 2px rgba(23,20,15,.03), 0 18px 40px -28px rgba(23,20,15,.28);
}
.hero-figure{position:relative}

/* ───────── buttons ───────── */
.btn{
  display:inline-block; padding:.72rem 1.5rem;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--ink); border-radius:2px;
  background:transparent; cursor:pointer; font-family:var(--sans);
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn-ghost{border-color:var(--line); color:var(--mute)}
.btn-ghost:hover{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-solid{background:var(--ink); color:var(--paper); padding:.85rem 2rem}
.btn-solid:hover{background:var(--ember); border-color:var(--ember)}
.btn-solid:disabled{opacity:.45; cursor:progress}

/* ───────── sections ───────── */
.section{max-width:88rem; margin:0 auto; padding:clamp(3.5rem,9vh,7rem) var(--pad)}
.section-rule{border-top:1px solid var(--line)}

.section-head{display:flex; gap:1.4rem; align-items:flex-start; margin-bottom:clamp(2rem,4vw,3.2rem)}
.num{
  font-size:.72rem; letter-spacing:.2em; color:var(--ember);
  padding-top:.85rem; flex:0 0 auto;
}
.section-head h2{
  font-family:var(--serif); font-weight:400; margin:0;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96;
  font-size:clamp(1.85rem,4.2vw,3.1rem); line-height:1.08; letter-spacing:-.015em;
}

/* ───────── the object ───────── */
.object-grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:start;
}
@media (max-width:52rem){.object-grid{grid-template-columns:1fr}}

.spec{margin:0}
.spec > div{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1.2rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
}
.spec > div:first-child{border-top:1px solid var(--line)}
.spec dt{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); padding-top:.28rem;
}
.spec dd{margin:0; color:var(--ink-2)}
.sc{font-variant:all-small-caps; letter-spacing:.06em}
@media (max-width:32rem){.spec > div{grid-template-columns:1fr; gap:.25rem}}

.fig img{border-radius:2px}
.fig figcaption{
  margin-top:.9rem; font-size:.82rem; color:var(--mute);
  max-width:30rem; line-height:1.5;
}
.fig-wide{margin-top:clamp(2.5rem,6vw,4.5rem)}

/* ───────── prose ───────── */
/* Indented from the section head rather than centred — keeps one clear
   reading edge instead of leaving the text stranded mid-page. */
.prose{max-width:var(--measure); margin-left:clamp(0rem,6vw,7.5rem); margin-right:0}
.prose p{margin:0 0 1.35rem; color:var(--ink-2)}
.prose em{font-style:italic}
.prose h3{
  font-family:var(--serif); font-weight:400; font-size:1.7rem;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 48;
  line-height:1.2; margin:3rem 0 1.1rem; color:var(--ink);
}
.drop::first-letter{
  font-family:var(--serif); float:left; font-size:3.9rem; line-height:.82;
  padding:.1rem .55rem 0 0; color:var(--ink);
}
.aside{
  border-left:2px solid var(--line); padding-left:1.2rem;
  font-size:.9rem; color:var(--mute); margin-top:2.2rem;
}
.signoff{margin-top:2rem}
.link-out{
  color:var(--ember); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--ember) 35%, transparent);
  padding-bottom:1px;
}
.link-out:hover{border-bottom-color:var(--ember)}

/* facts strip */
.facts{
  list-style:none; margin:2.6rem 0; padding:1.6rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:34rem){.facts{grid-template-columns:1fr}}
.facts li{display:flex; flex-direction:column; gap:.25rem}
.facts b{font-family:var(--serif); font-weight:400; font-size:1.55rem; line-height:1.05; font-variation-settings:"SOFT" 40,"opsz" 36}
.facts span{font-size:.8rem; color:var(--mute); line-height:1.45}

/* ───────── claim ───────── */
.claim-grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start;
}
@media (max-width:52rem){.claim-grid{grid-template-columns:1fr}}

.claim-intro p{color:var(--ink-2); margin:0 0 1.2rem}
.fineprint{font-size:.82rem; color:var(--mute)}

.claim-form{display:flex; flex-direction:column; gap:1.1rem; margin:0}
.field{margin:0; display:flex; flex-direction:column; gap:.4rem}
.field-row{display:grid; gap:1.1rem; grid-template-columns:1fr 1fr}
.field-row-3{grid-template-columns:1.5fr .8fr .8fr}
@media (max-width:34rem){.field-row,.field-row-3{grid-template-columns:1fr}}

label{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.opt{text-transform:none; letter-spacing:.02em; font-size:.72rem; opacity:.7}

input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit; font-size:.98rem; color:var(--ink);
  padding:.7rem .8rem; background:#fff;
  border:1px solid var(--line); border-radius:2px;
  transition:border-color .18s ease, box-shadow .18s ease;
  width:100%;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
input:user-invalid,select:user-invalid{border-color:var(--ember)}

.qty{border:0; padding:0; margin:.3rem 0; display:flex; flex-direction:column; gap:.55rem}
.qty legend{
  padding:0; margin-bottom:.55rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.radio{
  display:flex; align-items:center; gap:.8rem; cursor:pointer;
  padding:.75rem .9rem; background:#fff;
  border:1px solid var(--line); border-radius:2px;
  text-transform:none; letter-spacing:0; font-size:1rem; color:var(--ink-2);
  transition:border-color .18s ease;
}
.radio:has(input:checked){border-color:var(--ink)}
.radio input{accent-color:var(--ember); width:1rem; height:1rem; flex:0 0 auto}
.radio span{display:flex; flex-direction:column; line-height:1.35}
.radio b{font-weight:500; color:var(--ink)}
.radio i{font-style:normal; font-size:.8rem; color:var(--mute)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.claim-form .btn-solid{align-self:flex-start; border:1px solid var(--ink)}

.form-status{margin:.2rem 0 0; font-size:.9rem; min-height:1.3em}
.form-status.err{color:var(--ember)}
.form-status.ok{color:var(--ink)}

/* thank-you swap */
.claim-done{
  border:1px solid var(--line); border-left:2px solid var(--ember);
  padding:1.6rem 1.8rem; background:#fff; border-radius:2px;
}
.claim-done h3{
  font-family:var(--serif); font-weight:400; font-size:1.6rem;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 36;
  margin:0 0 .6rem; line-height:1.15;
}
.claim-done p{margin:0; color:var(--ink-2)}

/* ───────── footer ───────── */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vh,4rem) var(--pad);
  max-width:88rem; margin:0 auto;
  display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  align-items:start;
}
@media (max-width:44rem){.foot{grid-template-columns:1fr}}
.foot-mark{font-family:var(--serif); font-size:1.25rem; margin:0 0 .3rem; font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 24}
.foot-note{margin:0; font-size:.85rem; color:var(--mute)}
.foot-note a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)}
.foot-note a:hover{border-bottom-color:var(--ink)}
.foot-fine{margin:0; font-size:.76rem; color:var(--mute); line-height:1.6; max-width:40rem}

/* ───────── motion ───────── */
.rise{opacity:0; transform:translateY(14px); animation:rise .85s cubic-bezier(.22,.7,.28,1) forwards; animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1; transform:none}}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.7,.28,1)}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .rise,.reveal{opacity:1; transform:none; animation:none; transition:none}
}