/* ROMXI — "One Day in ROMXI" home journey. Builds on home.css tokens. */

/* 1 · arrive */
.arrive{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--head) + 20px) var(--gut) 110px}
.arrive h1{font-size:clamp(46px,9vw,124px);letter-spacing:.2em;padding-left:.2em;white-space:nowrap;line-height:1;margin:26px 0 26px}
.arrive h1 .ch{display:inline-block;opacity:0;transform:translateY(.25em);filter:blur(6px)}
.ready .arrive h1 .ch{animation:chIn 1.8s var(--ease) forwards;animation-delay:calc(.3s + var(--i) * .08s)}
.ask{margin-top:clamp(40px,7vh,72px)}
.ask .q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--text);margin:0 0 22px}
.doors{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap}
.door{position:relative;font-family:var(--serif);font-size:clamp(26px,3vw,40px);font-weight:300;color:var(--ink);padding:6px 4px 10px;line-height:1.1}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .8s var(--ease)}
.door:hover::after,.door[aria-pressed="true"]::after{transform:scaleX(1)}
.door small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.skipday{display:inline-block;margin-top:34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.skipday:hover{color:var(--ink)}


/* 3 · choose */
.choose .shead{align-items:flex-end}
.choose .lede{max-width:560px;margin-top:16px}
.width{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(70px,9vw,120px);padding-top:clamp(50px,7vw,80px);border-top:1px solid var(--line)}
.width .ph{aspect-ratio:1;overflow:hidden;background:var(--paper-2);position:relative}
.width .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease)}
.width .ph img.off{opacity:0}
.toggle{display:inline-flex;border:1px solid var(--line);margin:26px 0 18px}
.toggle button{padding:12px 26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:background .5s,color .5s}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.width .say{min-height:3.4em;font-family:var(--serif);font-size:22px;color:var(--text);line-height:1.4}

/* 4 · how it works */
.how{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,6vw,70px);counter-reset:s}
.step{border-top:1px solid var(--silver);padding-top:26px}
.step .num{font-size:11px;color:var(--gold);letter-spacing:.2em}
.step h3{font-size:25px;margin:14px 0 10px}
.step p{font-size:15px;color:var(--muted);margin:0}

/* 5 · personal ending */
.end{text-align:center}
.end .path{display:none}
.end .path.on{display:block}
.end h2{margin:16px auto 0;max-width:16ch}
.end .lede{max-width:560px;margin:22px auto 0}
.end .acts{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:36px}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--ink-deep);border-color:var(--ink-deep)}
.change{display:block;margin:30px auto 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.change:hover{color:var(--ink)}

@media (max-width:860px){
  .width{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .doors{flex-direction:column;align-items:center;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .arrive h1 .ch{opacity:1!important;transform:none!important;filter:none!important}
}

/* 0 · the stone — scroll-driven 3D (stone.js) */
.story{position:relative;height:520vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(var(--paper),#C9D0DC 46%,#1F3A7A 47%,#0A1533)}
#dawn{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.stage{background:transparent}
.stage.no-gl{background:linear-gradient(#020309,#070D1A 57%,#0A1430 58%,var(--paper))}
body:has(.stage.no-gl) #dawn{display:none}
.stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.stage.no-gl .fallback{opacity:1}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;line-height:1.55;color:var(--muted)}
.corner{position:absolute;z-index:3}
.corner.tl{left:var(--gut);top:calc(var(--head) + 18px)}
.corner.tr{right:var(--gut);top:calc(var(--head) + 18px);text-align:right;max-width:220px}
.corner.bl{left:var(--gut);bottom:28px}
.corner.br{right:var(--gut);bottom:28px;text-align:right}
.corner b{color:var(--ink);font-weight:400}
.chap{position:absolute;z-index:4;opacity:0;will-change:opacity,transform}
.chap.c-center{left:0;right:0;bottom:clamp(70px,13vh,130px);text-align:center;pointer-events:none}
.chap.c-left{left:var(--gut);bottom:clamp(90px,16vh,170px);max-width:430px}
.chap.c-right{right:var(--gut);bottom:clamp(90px,16vh,170px);max-width:430px;text-align:right}
.chap .wm{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(48px,9.4vw,132px);letter-spacing:.05em;padding-left:.05em;line-height:1;margin:0}
.chap .tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);margin:18px 0 0;color:var(--text)}
.chap h2{font-size:clamp(34px,4vw,56px);margin:14px 0 14px}
.chap p{margin:0}
.chap .over{display:block}
.readout{display:grid;grid-template-columns:auto auto;gap:6px 22px;justify-content:end;margin-top:20px}
.readout dt{font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1;text-align:right}
.readout dd{margin:0;align-self:end;text-align:left}
.chap .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.flabel{position:absolute;left:0;top:0;z-index:3;opacity:0;pointer-events:none;white-space:nowrap}
.flabel span{display:inline-block;transform:translate(14px,-50%);padding-left:16px;position:relative;color:var(--ink)}
.flabel span::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--ink)}
.flabel::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border:1px solid var(--ink);border-radius:50%}
.prog{display:flex;align-items:center;gap:12px}
.prog i{display:block;width:80px;height:1px;background:var(--line);position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:860px){
  .corner.tr{display:none}
  .chap.c-left,.chap.c-right{left:var(--gut);right:var(--gut);bottom:84px;max-width:none;text-align:left}
  .readout{justify-content:start}
  .chap .acts{justify-content:flex-start!important}
  .readout dt{text-align:left}
  .story{height:640vh}
}

/* dawn hero words — sit in the light grey sky above the horizon */
.chap.c-sky{left:0;right:0;top:clamp(110px,17vh,190px);text-align:center;pointer-events:none}
.chap.c-sky .word{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(48px,9.4vw,132px);letter-spacing:.05em;padding-left:.05em;line-height:1;margin:0}
.chap.c-sky .word .dim{opacity:.18}
.chap.c-sky .wm.small{font-size:clamp(40px,6vw,84px)}
.chap.c-sky .tag{margin-top:16px}
.chap.c-sky .note{margin-top:18px;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);opacity:.62}
/* letter-by-letter reveal (motion.js) */
.ch{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.22em);
  transition:opacity 1s var(--ease),filter 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--dl,0s)}
.resolved .ch{opacity:1;filter:blur(0);transform:none}
.wd{display:inline-block;white-space:nowrap}
.chap.c-sky .acts{justify-content:center;margin-top:26px}
.corner.light,.corner.light b{color:rgba(232,236,243,.78)}
.corner.light .prog i,.prog.light i{background:rgba(255,255,255,.25)}
.prog.light i::after{background:#fff}
@media (max-width:860px){
  .chap.c-sky{top:clamp(150px,22vh,190px);padding:0 var(--gut)}
  .corner.tl{display:none}
  .chap.c-sky .acts{flex-direction:column;align-items:center}
}
.chap.c-sky.night .wm{color:#E8ECF3}
.chap.c-sky.night .tag{color:rgba(232,236,243,.82)}
.stage:not(.lit) ~ * {}
.stage:not(.lit) .corner.tl,.stage:not(.lit) .corner.tr{color:rgba(232,236,243,.7)}
body.night .head .nav a,body.night .head .bag{color:#E8ECF3}
body.night .head .menu-btn span{background:#E8ECF3}
.head .nav a,.head .bag{transition:color .8s var(--ease)}

/* ===== the rest of the page, in the feeling of the dawn ===== */
:root{--grey:var(--paper);--deep:#0A1533}
.head.solid{background:rgba(241,241,239,.92)}




/* choose: light grey sky fading to paper */
.choose{background:linear-gradient(180deg,var(--grey),var(--paper) 60%)}
.card .media{background:linear-gradient(180deg,var(--paper),var(--paper-2))}

/* how: three points of light on a horizon */
.how{background:linear-gradient(180deg,var(--paper),#DCE3ED)}
.steps{position:relative;padding-top:34px}
.js .steps .line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(31,58,122,.1),rgba(31,58,122,.45) 50%,rgba(31,58,122,.1));opacity:1;transform-origin:left;transform:scaleX(0);transition:transform 2s var(--ease)}
.js .steps .line.in{transform:scaleX(1)}
.step{border-top:0;padding-top:0;position:relative}
.step .pt{position:absolute;top:-39px;left:0;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(31,58,122,.35),0 0 16px 4px rgba(210,225,255,.95)}
.step .num{color:var(--muted);letter-spacing:.12em}

/* ending: drifting back toward the night */
.end{background:linear-gradient(180deg,#DCE3ED 0%,var(--grey) 35%,#C3CCDB 75%,#7E8FB3 100%)}

/* footer: night lapis with one last point of light on the horizon */
@media (max-width:860px){
}
@media (max-width:860px){
  .steps{padding-top:0;padding-left:30px}
  .js .steps .line{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,rgba(31,58,122,.1),rgba(31,58,122,.45) 50%,rgba(31,58,122,.1));transform-origin:top;transform:scaleY(0)}
  .js .steps .line.in{transform:scaleY(1)}
  .step .pt{top:6px;left:-30px}
}

/* ===== v2: solid and crisp — no glows, no mist, no see-through gradients ===== */
.choose{background:var(--paper)}
.card .media{background:var(--paper-2)}
.how{background:var(--paper)}
.js .steps .line{background:rgba(31,58,122,.28)}
.step .pt{width:7px;height:7px;top:-37px;background:var(--ink);box-shadow:none}
.end{background:var(--paper)}
@media (max-width:860px){ .step .pt{top:6px} .js .steps .line{background:rgba(31,58,122,.28)} }

/* ===== v3: the river of light — the hero is night throughout, so its words are light ===== */
.chap.c-sky .wm,.chap.c-sky .word{color:#EEF1F7}
.chap.c-sky .tag{color:rgba(232,236,243,.82)}
.chap.c-sky .note{color:#C9D3E8;opacity:.75}
.chap.c-sky .word .dim{opacity:.22}
.corner,.corner b,.stage .corner.tl,.stage .corner.tr{color:rgba(232,236,243,.72)}
.chap .btn{color:#EEF1F7;border-color:rgba(238,241,247,.45)}
.chap .btn.solid{background:#EEF1F7;border-color:#EEF1F7;color:#0A1533}
.chap.c-sky .wm,.chap.c-sky .word,.chap.c-sky .tag,.chap.c-sky .note{text-shadow:0 0 28px rgba(3,6,16,.75),0 0 6px rgba(3,6,16,.5)}

/* ===== v4: the pillar of light — dark until the flood, then a pale icy day ===== */
.chap.c-sky.bright .wm{color:var(--ink);text-shadow:none}
.chap.c-sky.bright .tag{color:var(--text);text-shadow:none}
.chap.c-sky.bright .btn{color:var(--ink);border-color:var(--ink)}
.chap.c-sky.bright .btn.solid{background:var(--ink);border-color:var(--ink);color:#F3F5F8}
.stage.lit .corner,.stage.lit .corner b{color:var(--muted)}
.stage.lit .prog i{background:rgba(31,58,122,.18)}
.stage.lit .prog i::after{background:var(--ink)}

/* ===== v5: one hero for the whole page — night to an icy day, then the page simply continues ===== */
.chap.c-sky.bright .word,.chap.c-sky.bright .note{color:var(--ink);text-shadow:none}
.chap.c-sky.bright .word .dim{opacity:.2}
.chap.c-sky.bright .note{opacity:.7}
.choose{background:var(--paper)}                                  /* picks up the hero's last colour */
.end{background:var(--paper)}
.foot{background:var(--paper);color:var(--text);border-top:1px solid var(--line)}
.how{background:var(--paper)}                                     /* one continuous ground, no bands */
/* the opening line: simple, upright, spaced capitals */
.chap.c-sky .tag.plain{font-family:var(--sans);font-style:normal;font-weight:400;font-size:clamp(12px,1.05vw,14px);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;margin-top:28px;color:rgba(232,236,243,.86)}
/* the step labels: plain small capitals, no code type */
.step .num{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
/* depth: images sit slightly larger than their frame so they can move inside it */
.card .media img[data-depth]{scale:1.14}

/* ===== v6: one journey — the light becomes the pieces ===== */
.story{height:720vh}
@media (max-width:860px){ .story{height:800vh} }
/* text follows the light: pale in the night, lapis ink in the day (--day is set from the scroll) */
.stage{--wm-col:color-mix(in srgb, var(--ink) calc(var(--day, 0) * 100%), #EEF1F7);
  --txt:color-mix(in srgb, #1A2238 calc(var(--day, 0) * 100%), #DCE2EE)}
.chap.c-sky .wm,.chap.c-sky .tag,.chap.c-sky .over,.chap.c-sky .say,.chap.c-sky .link{text-shadow:none}
/* the wordmark is a drawn shape, not a font */
.chap.c-sky .wm{display:block;margin:0 auto;width:clamp(260px,46vw,620px);aspect-ratio:7427/1456;font-size:0;padding:0;letter-spacing:0;
  background:var(--wm-col);-webkit-mask:url(images/romxi-wordmark.svg) center/contain no-repeat;mask:url(images/romxi-wordmark.svg) center/contain no-repeat}
.chap.c-sky .wm.small{width:clamp(200px,30vw,420px)}
.chap.c-sky .wm.half.rom{background:linear-gradient(90deg,var(--wm-col) 70.8%,color-mix(in srgb,var(--wm-col) 20%,transparent) 70.8%)}
.chap.c-sky .wm.half.xi{background:linear-gradient(90deg,color-mix(in srgb,var(--wm-col) 20%,transparent) 70.8%,var(--wm-col) 70.8%)}
.chap.c-sky .tag.plain{color:var(--txt)}
/* the pieces, told inside the journey */
.chap.c-sky.piece .over{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:var(--txt);opacity:.8;margin:0}
.chap.c-sky.piece .say{font-family:var(--serif);font-weight:300;font-style:normal;font-size:clamp(30px,4vw,54px);line-height:1.15;color:var(--wm-col);margin:18px auto 26px;max-width:18ch}
.chap.c-sky .link{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--wm-col)}
.chap.c-sky .btn{color:var(--wm-col);border-color:var(--wm-col)}
.chap.c-sky .btn.solid{background:var(--wm-col);border-color:var(--wm-col);color:#F3F5F8}
/* the header wordmark: the same drawn shape */
.brand{display:inline-block;width:118px;height:24px;font-size:0;letter-spacing:0;padding:0;background:currentColor;color:var(--ink);
  -webkit-mask:url(images/romxi-wordmark.svg) center/contain no-repeat;mask:url(images/romxi-wordmark.svg) center/contain no-repeat}
.foot .brand{width:132px;height:26px}
/* lines arrive whole, out of a soft blur */
.ln{opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity 1.4s var(--ease),filter 1.6s var(--ease),transform 1.6s var(--ease)}
.ln.resolved{opacity:1;filter:blur(0);transform:none}

/* ===== v7: two worlds — ROMXI is plain text in the display font (placeholder until the final wordmark) ===== */
.chap.c-sky .wm{width:auto;aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;
  font-family:var(--display);font-weight:400;font-size:clamp(54px,8.6vw,124px);line-height:1;letter-spacing:.06em;padding-left:.06em;color:var(--wm-col)}
.chap.c-sky .wm.small{font-size:clamp(40px,5.6vw,80px)}
.chap.c-sky .wm.half{background:none}
.chap.c-sky .wm .dim{opacity:.2}
.brand{width:auto;height:auto;background:none;-webkit-mask:none;mask:none;font-size:22px;letter-spacing:.08em;color:var(--ink)}
.foot .brand{width:auto;height:auto;font-size:22px}
.chap.c-sky .btn.solid{color:color-mix(in srgb, #F3F5F8 calc(var(--day, 0) * 100%), #0A1533)}

/* the light text keeps a soft shadow while the world is still dark, so it reads over twilight */
.chap.c-sky .wm,.chap.c-sky .tag.plain{text-shadow:0 0 28px rgb(6 12 30 / calc((1 - var(--day, 0)) * .45))}