/* ===========================================================
   Studio Immonen — teaser · Variant D "Lineup" (Claude version)
   Lineup narrative: 01 Löyly → 02 Tähti → 03 Kuu → 04 Revontuli.
   Zero JS. Self-hosted variable fonts: Newsreader (roman + italic) + Inter.
   =========================================================== */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/newsreader-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/newsreader-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ground:#0a0c11;
  --ground-2:#0e1117;
  --paper:#ece5d8;
  --paper-ink:#16181d;
  --paper-muted:#5f5a50;
  --text:#e9e4da;
  --muted:#9c968a;
  --faint:#6f6a60;
  --ember:#e0954f;
  --ember-deep:#8a4517; /* ≥4.5:1 on --paper for small text (was #a9571f at ~4.1:1) */
  --line:rgba(233,228,218,.14);
  --paper-line:rgba(22,24,29,.18);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(1.4rem,5.5vw,6rem);
}
*,*::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(--ground);color:var(--text);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
.skip{position:absolute;left:-999px;top:0;background:var(--text);color:#111;padding:.6em 1em;z-index:30;}
.skip:focus{left:1rem;top:1rem;}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}
.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;}

/* ---------- topbar with lineup index ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.6rem var(--pad);
}
.topbar__brand,.topbar__loc{margin:0;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;}
.topbar__loc{color:var(--muted);}
.topbar__index{display:flex;gap:1.6rem;}
.topbar__index a{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .2s ease;
}
.topbar__index a:hover,.topbar__index a:focus{color:var(--ember);}

/* ---------- shared ---------- */
.index-label{
  font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.34em;
  color:var(--ember);margin:0 0 1.2rem;
}
.rubric{
  font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ember);margin:0 0 1.6rem;
}
.statement{
  font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(2rem,1.3rem + 3vw,3.8rem);margin:0;text-wrap:balance;
}
.meta-row{
  display:flex;gap:2.4rem;margin:2.2rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ember);
}
.disclaimer{
  position:absolute;left:var(--pad);bottom:1.1rem;margin:0;z-index:2;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,228,218,.95);background:rgba(9,10,14,.8);
  padding:.35rem .6rem;
}

/* ---------- 01 hero — full-bleed; header in the dark band above the kiuas ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-content:start;}
.hero__media{position:absolute;inset:0;margin:0;overflow:hidden;}
.hero__media picture{display:block;height:100%;}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,8,11,.58) 0%,rgba(7,8,11,.24) 30%,transparent 54%);}
.hero__inner{position:relative;max-width:50rem;
  padding:clamp(5.5rem,11vh,8.5rem) var(--pad) 0;
  text-shadow:0 1px 12px rgba(7,8,11,.5);}
.hero__mark{
  font-family:var(--serif);font-weight:400;line-height:.85;margin:0;
  font-size:clamp(3.4rem,2rem + 8vw,7.5rem);letter-spacing:-.02em;
}
.hero__tagline{
  font-family:var(--serif);font-style:italic;color:var(--text);
  font-size:clamp(1.15rem,1rem + 1vw,1.7rem);line-height:1.3;
  margin:1.4rem 0 0;max-width:26ch;
}
.hero-sub{padding:clamp(2.8rem,6vw,4.5rem) var(--pad);max-width:56rem;}
.hero-sub .hero__body{color:var(--muted);max-width:34rem;margin:0;}

/* ---------- Löyly spec band ---------- */
.spec-band{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);
  padding:clamp(3.5rem,7vw,6rem) var(--pad);
  border-top:1px solid var(--line);background:var(--ground-2);
}
.spec-list{list-style:none;margin:0;padding:0;}
.spec-list li{
  display:flex;gap:1rem;align-items:baseline;
  font-family:var(--serif);font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.35;
  padding:.85rem 0;border-bottom:1px solid var(--line);
}
.spec-list li:first-child{border-top:1px solid var(--line);}
.spec-list__n{color:var(--ember);}
.spec-band__note{align-self:end;color:var(--muted);max-width:30rem;margin:0;}

/* ---------- the ladder (paper band) ---------- */
.ladder{
  background:var(--paper);color:var(--paper-ink);
  padding:clamp(4.5rem,9vw,8rem) var(--pad) clamp(3.5rem,7vw,6rem);
}
.ladder .rubric{color:var(--ember-deep);}
.ladder__lead{color:var(--paper-muted);max-width:38rem;margin:1.4rem 0 0;}
.ladder__row{
  list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
}
.ladder__item{padding-top:1.4rem;border-top:1px solid var(--paper-ink);}
.ladder__item--future{border-top-color:var(--paper-line);}
.ladder__item--future .ladder__name{color:var(--paper-muted);}
.plan{width:min(9.5rem,100%);height:auto;color:var(--paper-ink);}
.plan .mod{fill:var(--ember-deep);}
.ladder__item--future .plan{color:var(--paper-muted);}
.ladder__item--future .plan .mod{fill:var(--ember-deep);opacity:.5;}
.ladder .index-label{color:var(--ember-deep);margin:0 0 1rem;}
.ladder__meta{
  font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember-deep);margin:1rem 0 0;
}
.ladder__name{
  font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  margin:1.4rem 0 .4rem;line-height:1;
}
.ladder__desc{color:var(--paper-muted);font-size:.95rem;margin:0;max-width:22rem;}
.ladder__note{
  margin:clamp(2.5rem,5vw,4rem) 0 0;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-muted);
}

/* ---------- 02 Tähti — full-bleed; header in the open sky above the cabin ---------- */
.duo{position:relative;min-height:100svh;display:grid;align-content:start;
  border-top:1px solid var(--line);}
.duo__media{position:absolute;inset:0;margin:0;overflow:hidden;}
.duo__media picture{display:block;height:100%;}
.duo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;}
.duo__media .disclaimer{left:auto;right:1.4rem;}
.duo__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,8,11,.5) 0%,rgba(7,8,11,.2) 28%,transparent 50%);}
.duo__inner{position:relative;max-width:50rem;
  padding:clamp(2.2rem,4.5vh,3.5rem) var(--pad) 0;
  text-shadow:0 1px 12px rgba(7,8,11,.5);}
.duo__inner .index-label{margin-bottom:.8rem;}
.duo__mark{
  font-family:var(--serif);font-weight:400;line-height:.85;margin:0;
  font-size:clamp(3.4rem,2rem + 8vw,7.5rem);letter-spacing:-.02em;
}
.duo__lead{
  font-family:var(--serif);font-style:italic;color:var(--text);
  font-size:clamp(1.15rem,1rem + 1vw,1.7rem);line-height:1.3;
  margin:1rem 0 0;max-width:26ch;
}

/* ---------- creed ---------- */
.creed{
  min-height:64svh;display:grid;place-content:center;text-align:center;
  padding:clamp(4rem,9vw,8rem) var(--pad);border-top:1px solid var(--line);
}
.creed__statement{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(2rem,1.2rem + 3.6vw,4.4rem);line-height:1.08;letter-spacing:-.01em;
  margin:0;max-width:22ch;text-wrap:balance;
}
.creed__attrib{color:var(--muted);font-family:var(--serif);font-style:italic;margin:1.4rem 0 0;}
.creed__since{
  font-family:var(--sans);font-weight:500;font-size:.64rem;letter-spacing:.3em;
  text-transform:uppercase;color:#8a857a;margin:1.1rem 0 0; /* AA: ~5.2:1 on --ground (was --faint 3.64:1) */
}

/* ---------- closing ---------- */
.closing{
  padding:clamp(5rem,11vw,10rem) var(--pad);border-top:1px solid var(--line);
  max-width:52rem;
}
.closing--center{min-height:70svh;display:grid;align-content:center;}
.closing__body{color:var(--muted);margin:1.2rem 0 0;}
.contact{margin:2rem 0 0;font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.4vw,2rem);}
.contact a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--ember);padding-bottom:.12em;transition:color .2s ease;}
.contact a:hover,.contact a:focus{color:var(--ember);}

/* ---------- footer ---------- */
.foot{
  padding:clamp(2.4rem,5vw,3.6rem) var(--pad);border-top:1px solid var(--line);
  display:flex;justify-content:center;
}
.foot__legal{margin:0;font-size:.68rem;letter-spacing:.14em;color:var(--muted);
  text-align:center;line-height:1.9;}

/* ---------- responsive ---------- */
@media (min-width:1200px){
  /* wide screens: center the image composition and shift the headers over
     the dark band above the kiuas (hero) / the open sky above the cabin (Tähti) */
  .hero__media img{object-position:50% center;}
  .hero__inner,.duo__inner{margin-left:24vw;}
}
@media (max-width:1060px){
  .ladder__row{grid-template-columns:1fr 1fr;row-gap:2.6rem;}
}
@media (max-width:860px){
  .topbar__index{display:none;}
  .spec-band{grid-template-columns:1fr;}
  /* shorter sections on phones: cover crops far less, showing the whole scene */
  .hero{min-height:66svh;}
  .hero__inner{padding-top:4.6rem;}
  .hero__media img{object-position:68% center;}
  /* Tähti: the 66svh sky is too short for the header — on phones the header
     sits on solid ground above the image, scene fully unobstructed */
  .duo{display:flex;flex-direction:column;min-height:0;}
  .duo__inner{order:-1;padding:4.2rem var(--pad) 2.4rem;text-shadow:none;}
  .duo__scrim{display:none;}
  .duo__media{position:relative;min-height:66svh;}
  .duo__media img{object-position:55% center;}
}
@media (max-width:560px){
  .ladder__row{grid-template-columns:1fr;}
  .meta-row{gap:1.6rem;}
}