/* Our Story: the night outside, a small light that warms the room, then an easy editorial read. The opening plays once,
   in CSS only; every line is in the HTML and fully visible without animation. */
.os-page main{padding:0;max-width:none}
.os-mast{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 6vw}
.os-mast .brand{font-size:18px}
.os-nav{display:flex;gap:4px}
.os-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--mist);font:600 14px var(--ui);text-decoration:none}
.os-nav a:hover{color:var(--cream);background:#ffffff10}

/* Opening: a point of warm light, then the warmth it brings to the space around the words. */
.os-open{position:relative;display:grid;place-items:center;min-height:min(60svh,580px);padding:72px 6vw;overflow-x:clip;isolation:isolate}  /* clipped sideways only: the glow fades out vertically on its own, so there is no edge */
.os-light{position:absolute;left:50%;top:50%;z-index:-1;width:0;height:0;pointer-events:none}
.os-light span{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.os-warmth{width:min(860px,160vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,#FFBE5C33,#FFB54714 30%,#FFB54706 48%,transparent 66%);opacity:.7}
.os-wick{width:110px;height:110px;translate:-50% -50%;background:radial-gradient(closest-side,#FFDCA3cc,#FFC46A44 30%,transparent);opacity:0}
.os-lines{text-align:center;max-width:min(100%,34rem)}
.os-lines p{margin:0}
.os-l1{font:500 clamp(18px,2vw,22px)/1.4 var(--ui);color:var(--mist);letter-spacing:.01em}
.os-l2{max-width:13ch;margin:18px auto 0!important;font:400 clamp(34px,5.6vw,72px)/1.02 var(--impact);letter-spacing:-.02em;color:var(--cream);text-wrap:balance;text-shadow:0 0 40px #FFB54726}
.os-l3{margin-top:22px!important;font:500 clamp(16px,1.6vw,19px)/1.4 var(--ui);color:var(--lantern)}

@media(prefers-reduced-motion:no-preference){
  .os-wick{animation:os-wick 3.3s cubic-bezier(.3,.1,.3,1) both}
  .os-warmth{animation:os-warmth 3.3s cubic-bezier(.3,.1,.3,1) both}
  .os-l1,.os-l2,.os-l3{animation:os-word .8s cubic-bezier(.2,.7,.2,1) both}
  .os-l1{animation-delay:.7s}
  .os-l2{animation-duration:.95s;animation-delay:1.5s}
  .os-l3{animation-delay:2.5s}
}
/* 0–0.7s a small point is lit; it softens as its warmth spreads (2.5s) and settles into an ambient glow (3.3s). */
@keyframes os-wick{0%{opacity:0;transform:scale(.3)}21%{opacity:.75;transform:scale(1)}45%{opacity:.55;transform:scale(1.15)}76%{opacity:.14;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes os-warmth{0%,8%{opacity:0;transform:scale(.06)}21%{opacity:.3;transform:scale(.16)}45%{opacity:.55;transform:scale(.42)}76%{opacity:.9;transform:scale(.97)}100%{opacity:.7;transform:scale(1)}}
@keyframes os-word{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Story: three movements — the trip, the name, the idea — read at an easy pace. */
.os-story{max-width:37rem;margin:0 auto;padding:8px 24px 0;color:#E6DCCB;font-size:clamp(18px,1.3vw,19.5px);line-height:1.75}
.os-eyebrow{color:var(--lantern)}
.os-story h1{margin-top:14px;font:400 clamp(40px,6vw,76px)/.95 var(--impact);letter-spacing:-.025em;text-transform:uppercase;color:var(--cream)}
.os-part{margin-top:88px}
.os-head+.os-part{margin-top:56px}
.os-story h2{font:700 clamp(21px,1.9vw,25px)/1.3 var(--ui);letter-spacing:-.01em;color:var(--cream)}
.os-story p{margin:.9em 0 0}
.os-story h2+p{margin-top:1.1em}
.os-story .os-gap{margin-top:1.9em}
.os-story em{font-style:italic}
.os-beat{color:var(--cream);font-weight:600;font-size:1.12em;line-height:1.5}
.os-name::before{content:'';display:block;width:32px;height:1px;margin-bottom:40px;background:var(--lantern);opacity:.6}
.os-name .os-lead{margin-top:0;color:var(--cream);font-size:1.12em;line-height:1.6}
.os-hey{color:var(--lantern);font-weight:600;quotes:'“' '”'}
.os-sign{margin-top:88px!important;font:400 clamp(26px,3vw,36px)/1 var(--impact);letter-spacing:-.02em;text-transform:uppercase;color:var(--cream)}
.os-sign span{color:var(--lantern)}

/* What HeyHab is: a quiet note after the story, not a pitch. */
.os-what{max-width:37rem;margin:80px auto 96px;padding:36px 24px 0;border-top:1px solid var(--edge);color:var(--mist);font-size:16px;line-height:1.6}
.os-what .lbl{color:var(--mist)}
.os-what>p{margin-top:12px}
.os-what ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.os-what li{position:relative;padding-left:18px;color:#D8CEBF}
.os-what li::before{content:'';position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--mist-2)}
.os-what .os-note{margin-top:18px;font-size:14.5px}
.os-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:10px}
.os-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--lantern);font:700 15px var(--ui);text-decoration:none}
.os-links a:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:600px){
  .os-mast{padding:16px}
  .os-nav a{padding:0 9px}
  .os-open{min-height:0;padding:76px 16px 64px}
  .os-story,.os-what{padding-left:16px;padding-right:16px}
  .os-part{margin-top:64px}
  .os-head+.os-part{margin-top:44px}
  .os-name::before{margin-bottom:32px}
  .os-sign{margin-top:64px!important}
  .os-what{margin-top:64px}
}
@media(max-width:360px){.os-mast .brand span{display:none}}