/* ============================================================
   02 — BREATH — typography that is alive
   Palette: ink + paper + one ember accent. The type is the image.
   ============================================================ */

@font-face {
  font-family: "Newsreader Var";
  src: url("/vendor/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Italic Var";
  src: url("/vendor/fonts/Newsreader-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Var";
  src: url("/vendor/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk Var";
  src: url("/vendor/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink: #201c18;
  --paper-a: #f2ece1;
  --paper-b: #e9dfd0;
  --paper-c: #f6f2ea;
  --accent: #a8492f;
  --ease-breath: cubic-bezier(.36,0,.22,1);
}

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

html{
  background: var(--paper-a);
}

body{
  margin: 0;
  min-height: 100svh;
  background: var(--paper-a);
  color: var(--ink);
  font-family: "Newsreader Var", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--accent); color: var(--paper-a); }

.var{
  font-family: "Space Grotesk Var", monospace;
  font-variation-settings: "wght" 560;
  font-size: .92em;
  opacity: .8;
}

/* ---------- chrome ---------- */

.chrome{
  position: fixed;
  top: 22px;
  z-index: 60;
  font-family: "Space Grotesk Var", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .5;
  text-decoration: none;
  transition: opacity .3s ease;
  mix-blend-mode: normal;
}
.chrome:hover{ opacity: .9; }
.chrome--index{ left: 22px; }
.chrome--label{ right: 22px; }

.railnav{
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.railnav__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .22;
  cursor: pointer;
  transition: opacity .35s ease, transform .35s ease, background-color .35s ease;
}
.railnav__dot:hover{ opacity: .55; }
.railnav__dot.is-active{
  opacity: 1;
  background: var(--accent);
  transform: scale(1.6);
}

/* ---------- shared room layout ---------- */

main{ position: relative; }

.room{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12vh 6vw;
  text-align: center;
  overflow: hidden;
}
#a{ background: var(--paper-a); }
#b{ background: var(--paper-b); }
#c{ background: var(--paper-c); padding-bottom: 4vh; }

#b::before,
#c::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22vh;
  pointer-events: none;
}
#b::before{ background: linear-gradient(to bottom, var(--paper-a), transparent); }
#c::before{ background: linear-gradient(to bottom, var(--paper-b), transparent); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 2.2rem;
  font-family: "Space Grotesk Var", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}
.eyebrow__mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--accent);
  opacity: 1;
  font-variation-settings: "wght" 600;
}

.desc{
  max-width: 46ch;
  margin: 2.2rem auto 0;
  font-family: "Space Grotesk Var", sans-serif;
  font-variation-settings: "wght" 400;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.6;
  letter-spacing: .002em;
  opacity: .66;
}

/* ---------- A. the slow breath ---------- */

.room__inner--a{ max-width: 920px; }

.breathe{
  margin: 0;
  font-family: "Newsreader Italic Var", serif;
  font-style: italic;
  line-height: .96;
  font-size: clamp(3.4rem, 12vw, 9rem);
  letter-spacing: -.01em;
}
.breathe__line{
  display: block;
  font-variation-settings: "wght" 300, "opsz" 18;
  animation: breathe 11s var(--ease-breath) infinite;
  will-change: font-variation-settings;
}
.breathe__line:nth-child(2){
  animation-delay: -2.1s;
  opacity: .93;
}

@keyframes breathe{
  0%   { font-variation-settings: "wght" 300, "opsz" 17; }
  36%  { font-variation-settings: "wght" 560, "opsz" 56; }
  46%  { font-variation-settings: "wght" 578, "opsz" 60; }
  100% { font-variation-settings: "wght" 300, "opsz" 17; }
}

body.is-suspended .breathe__line{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .breathe__line{
    animation: none;
    font-variation-settings: "wght" 460, "opsz" 40 !important;
  }
}

.pulse{
  position: relative;
  margin: 2.6rem auto 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.pulse span{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: .0;
  animation: pulse-ring 11s var(--ease-breath) infinite;
}
@keyframes pulse-ring{
  0%   { transform: scale(.3); opacity: 0; }
  36%  { transform: scale(1); opacity: .55; }
  46%  { transform: scale(1.05); opacity: .4; }
  100% { transform: scale(.3); opacity: 0; }
}
body.is-suspended .pulse span{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .pulse{ display: none; } }

/* ---------- B. the nervous system ---------- */

.room__inner--b{ max-width: 780px; }

.nervous{
  margin: .3em 0 0;
  font-family: "Fraunces Var", serif;
  font-size: clamp(3.6rem, 15vw, 9.5rem);
  line-height: 1;
  font-variation-settings: "wght" 380, "opsz" 90, "SOFT" 70, "WONK" 0;
  will-change: font-variation-settings;
}

.meter{
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2.6rem;
  font-family: "Space Grotesk Var", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}
.meter__track{
  position: relative;
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  overflow: hidden;
}
.meter__fill{
  position: absolute;
  inset: 0;
  width: 4%;
  background: var(--accent);
  transform-origin: left center;
}
.meter__value{ min-width: 5.4em; text-align: left; }

@media (prefers-reduced-motion: reduce){
  .meter{ opacity: .4; }
}

/* ---------- C. the reading line ---------- */

.room--c{ align-items: center; }
.room__inner--c{ max-width: 620px; margin-bottom: 1vh; }
.desc--c{ margin-top: 1.2rem; }

.reading{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 9vh 6vw 24vh;
  display: flex;
  flex-direction: column;
  gap: 1.7em;
}
.line{
  margin: 0;
  font-family: "Newsreader Var", serif;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem);
  line-height: 1.5;
  font-variation-settings: "wght" 330, "opsz" 15;
  color: color-mix(in oklab, var(--ink) 34%, var(--paper-c));
  transition: font-variation-settings .1s ease-out, color .1s ease-out;
}

.reading--static .line{
  transition: none;
}
.reading--static .line:first-child{
  font-variation-settings: "wght" 560, "opsz" 40;
  color: var(--ink);
}

/* ---------- notes ---------- */

.notes{
  position: relative;
  background: var(--paper-c);
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  padding: 6vh 6vw 10vh;
  font-family: "Space Grotesk Var", sans-serif;
}
.notes__toggle{
  display: block;
  margin: 0 auto;
  background: none;
  border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  color: var(--ink);
  opacity: .55;
  font-family: inherit;
  font-variation-settings: "wght" 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6em 1.4em;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .25s ease, border-color .25s ease;
}
.notes__toggle:hover{ opacity: 1; border-color: var(--accent); }

.notes__panel{
  max-width: 1080px;
  margin: 3.2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
}
.notes__panel[hidden]{ display: none; }

.notes__col h2{
  margin: 0 0 .7em;
  font-size: 11px;
  font-variation-settings: "wght" 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
.notes__col p{
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  opacity: .6;
}

/* ---------- responsive ---------- */

@media (max-width: 720px){
  .notes__panel{ grid-template-columns: 1fr; gap: 1.8rem; }
  .railnav{ right: 14px; gap: 12px; }
  .chrome{ font-size: 10px; top: 16px; }
  .chrome--index{ left: 16px; }
  .chrome--label{ right: 16px; }
}

@media (max-width: 480px){
  .room{ padding: 9vh 7vw; }
  .reading{ padding: 6vh 3vw 16vh; gap: 1.4em; }
  .meter__track{ width: 96px; }
  .desc{ font-size: 12.5px; }
}

@media (max-height: 560px){
  .room{ min-height: auto; padding: 14vh 6vw; }
}