/* Tudor James Grimbly: the page is one day, sunrise at the top, midnight at the foot. */

:root{
  --ink:#191524;
  --ink-soft:#4a4358;
  --paper:#fff8f2;
  --night-ink:#f3eee8;
  --night-soft:#b9b3c9;
  --sun:#ff8a48;
  --sun-2:#ff5f6d;
  --gold:#ffc27a;
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
  --radius:22px;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#f6e3d6}
body{margin:0;font-family:var(--font);font-size:clamp(16px,1.05vw,18px);line-height:1.55;color:var(--ink);background:#f6e3d6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- THE SKY (one fixed layer behind the whole page) ---------- */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;
  --top:206 214 238;--bot:255 206 176;--sunc:255 138 72;--sx:74vw;--sy:86vh;--glow:.78;--disc:1;--scale:1.25;--night:0;
  background:
    radial-gradient(70vmax 60vmax at var(--sx) var(--sy), rgb(var(--sunc) / var(--glow)) 0%, rgb(var(--sunc) / 0) 62%),
    linear-gradient(180deg, rgb(var(--top)) 0%, rgb(var(--bot)) 100%);
}
.sky__sun{position:absolute;left:0;top:0;width:clamp(150px,22vw,330px);aspect-ratio:1;border-radius:50%;
  transform:translate(calc(var(--sx) - 50%), calc(var(--sy) - 50%)) scale(var(--scale));
  background:radial-gradient(circle at 50% 50%, #fffaf0 0%, #ffe2b8 30%, rgb(var(--sunc)) 60%, rgb(var(--sunc) / .55) 66%, rgb(var(--sunc) / 0) 72%);
  opacity:var(--disc);filter:blur(3px);will-change:transform}
.sky__moon{position:absolute;right:3.5vw;top:12vh;width:clamp(48px,5.5vw,90px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fbf8f0 0%, #e4e2ea 48%, #c9c6d6 70%, rgb(201 198 214 / 0) 72%);
  box-shadow:0 0 80px 20px rgb(200 205 255 / .12);opacity:var(--night);transform:translateY(calc((1 - var(--night)) * 40px))}
.sky__stars{position:absolute;inset:0;opacity:var(--night);
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, rgb(255 255 255 / .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 170px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 220px, rgb(255 255 255 / .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 310px 40px, rgb(255 255 255 / .7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 200px 280px, rgb(255 255 255 / .9) 50%, transparent 51%);
  background-size:340px 320px}
.sky__stars::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(1.6px 1.6px at 60px 120px, #fff 50%, transparent 51%),radial-gradient(1.4px 1.4px at 230px 60px, #fff 50%, transparent 51%);
  background-size:410px 380px;animation:twinkle 3.6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* no-JS fallback: each band paints its own flat hour */
html:not(.sky-on) .ink-dark{background:#fbeee4}
html:not(.sky-on) .ink-light{background:#12122a}
html:not(.sky-on) .sky{display:none}
.sky-on body{background:transparent}

/* ---------- INK ---------- */
.ink-light{color:var(--night-ink)}
.ink-light .lead,.ink-light .step__body p,.ink-light .pillar p{color:var(--night-soft)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);transition:color .4s ease}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(180deg, rgb(var(--nav-bg, 255 248 242) / .82), rgb(var(--nav-bg, 255 248 242) / 0))}
.nav.is-scrolled::before{opacity:1}
.nav.is-night{color:var(--night-ink);--nav-bg:10 11 28}
.nav__brand{font-weight:800;font-stretch:112%;letter-spacing:-.01em;text-decoration:none;font-size:clamp(15px,1.2vw,18px)}
.nav__clock{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  background:rgb(255 255 255 / .5);border:1px solid rgb(255 255 255 / .6);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.02em}
.nav.is-night .nav__clock{background:rgb(255 255 255 / .07);border-color:rgb(255 255 255 / .12)}
.nav__orb{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #fffdf3, var(--orb, #ff9a52));box-shadow:0 0 12px var(--orb, #ff9a52)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font-weight:750;font-stretch:108%;font-size:16px;text-decoration:none;color:#1b1020;
  background:linear-gradient(135deg, var(--gold) 0%, var(--sun) 48%, var(--sun-2) 100%);
  box-shadow:0 10px 30px -10px rgb(255 95 80 / .7), inset 0 1px 0 rgb(255 255 255 / .5);
  transition:transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgb(255 95 80 / .85), inset 0 1px 0 rgb(255 255 255 / .5)}
.btn--sm{min-height:42px;padding:0 18px;font-size:14px}
.btn--lg{min-height:62px;padding:0 34px;font-size:18px}
.btn--ghost{background:rgb(255 255 255 / .45);box-shadow:inset 0 0 0 1.5px rgb(25 21 36 / .18);color:var(--ink)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgb(25 21 36 / .35)}

/* ---------- TYPE ---------- */
.kicker{font-weight:700;font-size:clamp(14px,1vw,16px);letter-spacing:.01em;color:#c2410c;margin-bottom:14px}
.ink-light .kicker{color:var(--gold)}
.h2{font-weight:850;font-stretch:118%;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
.h2--xl{font-size:clamp(3rem,9vw,8rem)}
.lead{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:44ch;margin-top:20px}

.pop{background:linear-gradient(100deg, #ff9d3d 0%, #ff5f6d 55%, #d9467a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.04em}

/* ---------- BANDS ---------- */
.band{position:relative;padding:clamp(72px,11vh,130px) 0}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:110px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero__title{font-weight:900;font-stretch:122%;font-size:clamp(3rem,7.4vw,7.2rem);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.hero__title .pop{display:block}
.hero__line{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink-soft);max-width:36ch;margin-top:26px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__photo{margin:0;position:relative;justify-self:end;width:100%;max-width:400px;border-radius:28px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgb(120 40 30 / .55);transform:rotate(1.5deg)}
.hero__photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hero__photo figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 16px;border-radius:16px;
  background:rgb(255 248 242 / .88);display:flex;flex-direction:column;line-height:1.3;font-size:14px}
.hero__photo figcaption span{color:var(--ink-soft)}

/* ---------- CARDS ---------- */
.card{border-radius:var(--radius);background:rgb(255 255 255 / .52);border:1px solid rgb(255 255 255 / .7);
  box-shadow:0 20px 50px -30px rgb(90 40 30 / .35)}
.ink-light .card{background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .1);box-shadow:none}

/* ---------- PROBLEM ---------- */
.pain__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.pain__card{padding:26px 26px 22px;display:flex;flex-direction:column;gap:6px}
.pain__card h3{font-weight:850;font-stretch:112%;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.1;letter-spacing:-.01em}
.pain__card>p{color:var(--ink-soft)}
.pain__fix{margin-top:auto !important;padding-top:16px;color:var(--ink) !important;font-weight:600;display:flex;flex-direction:column;gap:2px}
.pain__fix b{font-size:13px;font-weight:800;color:#c2410c;letter-spacing:.02em}

/* ---------- WHAT IS ---------- */
.what__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.what .lead{margin-top:0}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:56px}
.figure__n{font-weight:900;font-stretch:125%;font-size:clamp(4rem,9vw,8rem);line-height:.85;letter-spacing:-.04em;
  background:linear-gradient(180deg,#ff8a48,#e2466b);-webkit-background-clip:text;background-clip:text;color:transparent}
.figure__n small{font-size:.28em;letter-spacing:0;margin-left:6px;font-stretch:100%}
.figure p:last-child{margin-top:12px;color:var(--ink-soft);max-width:28ch}

/* ---------- THE DAY ---------- */
.day-intro{padding-bottom:clamp(30px,5vh,60px)}
.day-intro .lead{max-width:52ch}
.step{padding:clamp(44px,7vh,84px) 0;min-height:58vh;display:flex;align-items:center}
.step__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.step__time{font-weight:900;font-stretch:125%;font-size:clamp(3.6rem,10vw,9rem);line-height:.82;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  color:rgb(25 21 36 / .14)}
.ink-light .step__time{color:rgb(255 255 255 / .14)}
.step__title{font-weight:850;font-stretch:118%;font-size:clamp(2rem,4.2vw,3.6rem);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;margin-top:-.35em}
.step__body{padding:clamp(22px,2.6vw,36px);display:grid;gap:22px}
.step__label{font-size:13px;font-weight:800;letter-spacing:.02em;color:#c2410c;margin-bottom:6px}
.ink-light .step__label{color:var(--gold)}
.step__body p{color:var(--ink-soft)}
.step__body .step__label{color:#c2410c}
.ink-light .step__body .step__label{color:var(--gold)}
.step__note{font-size:14px;padding:12px 14px;border-radius:12px;background:rgb(255 255 255 / .55);color:var(--ink) !important}
.ink-light .step__note{background:rgb(255 255 255 / .07);color:var(--night-ink) !important}
.step--sunset .card{background:rgb(255 244 236 / .66)}
.step--sunset .step__time{color:rgb(70 20 20 / .18)}

/* ---------- SCIENCE ---------- */
.science .lead{max-width:62ch}
.quote{margin:0}
.quote blockquote{margin:0;font-weight:800;font-stretch:112%;letter-spacing:-.015em;line-height:1.12}
.quote figcaption{margin-top:16px;font-size:14px;color:var(--night-soft)}
.quote figcaption a{color:var(--gold);margin-left:6px;text-underline-offset:3px}
.quote--hero{margin-top:56px}
.quote--hero blockquote{font-size:clamp(2rem,4.6vw,4rem);line-height:1.04;text-transform:none;max-width:21ch}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.quotes .quote{padding:26px;display:flex;flex-direction:column}
.quotes blockquote{font-size:clamp(1.25rem,1.7vw,1.55rem)}
.quotes figcaption{margin-top:auto;padding-top:20px}
.quote__ctx{font-size:13px;font-weight:800;color:var(--gold);margin-bottom:10px}
.fineprint{margin-top:28px;font-size:13px;color:rgb(185 179 201 / .75);max-width:70ch}

/* ---------- ABOUT ---------- */
.about__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,6vw,96px);align-items:center}
.about__photo{margin:0;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -40px rgb(0 0 0 / .8);max-width:440px}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.about .lead{max-width:50ch}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.pillar__name{font-weight:850;font-stretch:118%;text-transform:uppercase;font-size:1.25rem;letter-spacing:-.01em;margin-bottom:6px;color:var(--night-ink)}
.pillar p:last-child{font-size:15px}
.about__aside{margin-top:30px;font-size:15px;color:var(--night-soft)}

/* ---------- HOW ---------- */
.how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.how__steps li{padding:28px}
.how__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:850;
  background:linear-gradient(135deg,var(--gold),var(--sun-2));color:#1b1020;margin-bottom:18px}
.how__steps h3{font-weight:850;font-stretch:112%;font-size:1.45rem;line-height:1.1;margin-bottom:8px}
.how__steps p{color:var(--night-soft)}

/* ---------- CTA ---------- */
.cta{padding:clamp(100px,16vh,180px) 0 clamp(90px,14vh,160px);overflow:hidden;text-align:center}
.cta__horizon{position:absolute;left:50%;bottom:-38vh;width:140vw;height:60vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgb(255 138 72 / .5), rgb(255 95 109 / .18) 55%, rgb(255 95 109 / 0) 100%);pointer-events:none}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center}
.cta__title{font-weight:900;font-stretch:122%;font-size:clamp(2.8rem,7.6vw,7rem);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;max-width:12ch}
.cta .lead{margin:24px auto 36px;max-width:40ch}
.disclaimer{margin-top:44px;font-size:13px;color:rgb(185 179 201 / .7);max-width:62ch}

/* ---------- FOOTER ---------- */
.foot{background:#07081a;padding:28px 0}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--night-soft)}
.foot__name{font-weight:800;font-stretch:112%;color:var(--night-ink)}
.foot__social{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgb(255 255 255 / .07);color:var(--night-ink);transition:background .2s}
.foot__social:hover{background:rgb(255 255 255 / .16)}

/* ---------- REVEALS ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .sky__stars::after{animation:none}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .pain__grid,.quotes,.how__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{padding:12px 16px}
  .nav__clock{font-size:14px;padding:6px 12px 6px 8px}
  .hero{padding-top:96px;min-height:auto}
  .hero__grid,.what__grid,.step__grid,.about__grid{grid-template-columns:1fr}
  .hero__photo{justify-self:start;max-width:320px;transform:rotate(1deg)}
  .pain__grid,.quotes,.how__steps,.figures{grid-template-columns:1fr}
  .figures{gap:28px}
  .step{min-height:0}
  .step__title{margin-top:-.25em}
  .about__photo{max-width:300px}
}
@media (max-width:520px){
  .nav .btn--sm{display:none}
  .nav::before{background:linear-gradient(180deg, rgb(var(--nav-bg, 255 248 242) / .94) 60%, rgb(var(--nav-bg, 255 248 242) / 0))}
  .sky__moon{width:40px;top:9vh;right:5vw;opacity:calc(var(--night) * .7)}
  .nav__brand{font-size:15px}
}