/* ══════════════════════════════════════════════════════════════
   Nowly — home page, direction «المسرح» (owner's pick, 31 Oct 2026).
   One phone holds the stage while the story scrolls past it: the screen changes with each
   chapter, the light behind it takes the chapter's colour, the orbit turns with the scroll,
   and the rail tracks where you are. Under 1024px every chapter carries its own phone.
   ══════════════════════════════════════════════════════════════ */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #2a1d4f; }

/* ── Story layout ── */
.story { --glow: #2a1d4f; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: calc(-1 * var(--head)); transition: --glow 1.1s var(--ease); }
.story::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70vmax 60vmax at 50% 0%, color-mix(in oklab, var(--glow) 55%, transparent), transparent 70%); opacity: .6; }
.flow { position: relative; padding: 0 var(--gutter); }
.ch { position: relative; padding: 88px 0; }
.hero { padding-top: calc(var(--head) + 56px); }

/* ── Type ── */
h1, h2 { font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(46px, 6.6vw, 98px); line-height: 1.02; letter-spacing: -.03em; }
body[dir="rtl"] h1 { font-weight: 700; line-height: 1.22; letter-spacing: 0; font-size: clamp(48px, 6.8vw, 100px); }
h1 em, h2 em { font-style: normal; color: #A48CF8; }
h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 22px; }
body[dir="rtl"] h2 { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
h2 em.gold { color: var(--gold); }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
body[dir="rtl"] .lede { line-height: 1.95; }
.more { margin-top: 26px; font-size: 15.5px; }

/* ── Hero ── */
.soon { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 28px; }
.soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.hero h1 { margin-bottom: 26px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.truths { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 44px; color: var(--mute); font-size: 14px; }
.truths li { padding-inline-end: 16px; margin-inline-end: 16px; border-inline-end: 1px solid var(--rim-2); }
.truths li:last-child { border: 0; margin: 0; padding: 0; }

/* ── Chapter facts ── */
.facts { list-style: none; margin-top: 30px; display: grid; gap: 0; max-width: 36em; }
.facts li { padding: 16px 0; border-top: 1px solid var(--rim); color: var(--mute); font-size: 15.5px; line-height: 1.6; }
body[dir="rtl"] .facts li { font-size: 16px; line-height: 1.8; }
.facts li:last-child { border-bottom: 1px solid var(--rim); }
.facts b { color: var(--ink); font-weight: 500; }
body[dir="rtl"] .facts b { font-weight: 600; }

/* ── Phones inside the flow (mobile and tablet) ── */
.phone.mini { width: min(260px, 66vw); margin: 44px auto 0; }
.stage, .rail { display: none; }

@media (min-width: 680px) and (max-width: 1023.98px) {
  .ch:not(.hero) { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 48px; align-items: center; }
  .ch:not(.hero) > :not(.phone) { grid-column: 1; }
  .ch:not(.hero) .phone.mini { grid-column: 2; grid-row: 1 / span 5; width: 100%; margin: 0; }
}

/* ── Desktop: the stage ── */
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(300px, 30vw) 200px; }
  .flow { grid-column: 1; grid-row: 1; padding-inline-start: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); padding-inline-end: 24px; }
  .ch { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0; }
  .hero { padding-top: calc(var(--head) + 40px); }
  .phone.mini { display: none; }
  .stage { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; }
  .rail { display: block; grid-column: 3; grid-row: 1; position: sticky; top: 0; height: 100svh; padding-inline-end: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
}

.stage .phone { position: absolute; top: 50%; left: 50%; width: min(330px, calc((100svh - 190px) * .4603), 92%); transform: translate(-50%, -45%); }
.screens { position: absolute; inset: 2.6%; border-radius: 12.6% / 5.9%; overflow: hidden; background: #000; }
.screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.screens img.on { opacity: 1; transform: none; }
html:not(.js) .screens img[data-k="hero"] { opacity: 1; transform: none; }

/* the orbit: two hairline ellipses that turn with the scroll, never on their own */
.orbits { position: absolute; top: 54%; left: 50%; width: 0; height: 0; }
.orbits i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(137, 104, 244, .34); width: min(560px, 44vw); height: min(840px, 92svh); transform: translate(-50%, -50%) rotate(calc(-14deg + var(--turn, 0) * 70deg)); }
.orbits i + i { border-color: rgba(236, 232, 226, .07); width: min(720px, 56vw); height: min(980px, 104svh); transform: translate(-50%, -50%) rotate(calc(9deg - var(--turn, 0) * 40deg)); }
.stage::before { content: ''; position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 90%, transparent), transparent); filter: blur(30px); opacity: .9; }

/* the rail */
.rail ol { list-style: none; position: absolute; top: 50%; transform: translateY(-46%); display: grid; gap: 6px; }
.rail a { display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 12px; text-decoration: none; color: var(--mute); font-size: 14.5px; transition: color .4s var(--ease); }
.rail a:hover { color: var(--ink-2); }
.rail img { width: 24px; height: 52px; object-fit: cover; object-position: top; border-radius: 6px; opacity: .38; transition: opacity .4s var(--ease), outline-color .4s var(--ease); outline: 1px solid transparent; outline-offset: 3px; }
.rail a[aria-current="step"] { color: var(--ink); }
.rail a[aria-current="step"] img { opacity: 1; outline-color: var(--violet); }

/* ── Plus ── */
.plus { position: relative; padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--rim); overflow: hidden;
  background: radial-gradient(60vmax 40vmax at 85% 0%, rgba(101, 33, 250, .14), transparent 70%), var(--bg-2); }
body[dir="rtl"] .plus { background: radial-gradient(60vmax 40vmax at 15% 0%, rgba(101, 33, 250, .14), transparent 70%), var(--bg-2); }
.plus-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: start; }
.plus-mark { font-size: 64px; line-height: 1; font-weight: 300; color: var(--violet); margin-bottom: 18px; }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; max-width: 460px; }
.price { padding: 22px 22px 20px; border: 1px solid var(--rim-2); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.pn { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.pv { font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv small { font-size: 14px; font-weight: 400; color: var(--mute); letter-spacing: 0; }
.coins-line { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--ink-2); font-size: 16px; }
.coins-line b { color: var(--gold); font-weight: 600; }
.coin { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff3d6, var(--gold) 45%, #a8823c); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.plus-list { list-style: none; display: grid; gap: 0; padding-top: 8px; }
.plus-list li { padding: 15px 0 15px 30px; border-bottom: 1px solid var(--rim); color: var(--mute); font-size: 15.5px; position: relative; }
body[dir="rtl"] .plus-list li { padding: 15px 30px 15px 0; font-size: 16px; }
.plus-list li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 23px; width: 12px; height: 12px;
  background: linear-gradient(var(--violet), var(--violet)) center / 12px 1.5px no-repeat, linear-gradient(var(--violet), var(--violet)) center / 1.5px 12px no-repeat; }
body[dir="rtl"] .plus-list li::before { top: 27px; }
.plus-list b { color: var(--ink); font-weight: 500; }
body[dir="rtl"] .plus-list b { font-weight: 600; }
.fine { grid-column: 1 / -1; font-size: 13.5px; color: var(--mute); line-height: 1.7; max-width: 80em; margin-top: 16px; }

/* ── Promise ── */
.promise { padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--rim); }
.promise h2 { margin-bottom: 48px; }
.vows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
.vows > div { padding: 26px 0 30px; border-top: 1px solid var(--rim-2); }
.vows dt { font-size: 21px; font-weight: 500; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
body[dir="rtl"] .vows dt { font-weight: 600; font-size: 22px; letter-spacing: 0; }
.vows dd { color: var(--mute); font-size: 15.5px; line-height: 1.65; }
body[dir="rtl"] .vows dd { font-size: 16px; line-height: 1.85; }

/* ── Join: the close, on our own satin ── */
.join { position: relative; padding: clamp(110px, 14vw, 190px) 0; text-align: center; overflow: hidden; isolation: isolate; }
.join::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(art/satin-burgundy.webp) center / cover no-repeat; }
.join::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 10, 12, .35) 30%, rgba(10, 10, 12, .45) 70%, var(--bg) 100%); }
.join-in { display: flex; flex-direction: column; align-items: center; }
.join-mark { width: 84px; height: auto; margin-bottom: 30px; }
.join .lede { margin: 0 auto; color: #E7DADB; }
.join .cta { justify-content: center; }
.join .btn.sec { border-color: rgba(255, 236, 238, .3); }
.is-soon { cursor: default; }

/* ── Small screens ── */
@media (max-width: 1023.98px) {
  .story::before { opacity: .45; }
  .plus-grid { grid-template-columns: 1fr; }
  .vows { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 679.98px) {
  .ch { padding: 64px 0; }
  .hero { padding-top: calc(var(--head) + 36px); }
  .cta .btn { flex: 1 1 100%; }
  .truths { font-size: 13px; }
  .truths li { padding-inline-end: 10px; margin-inline-end: 10px; }
  .vows { grid-template-columns: 1fr; }
  .prices { grid-template-columns: 1fr 1fr; }
  .pv { font-size: 27px; }
}

/* ── Motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  .story, .screens img, .rail a, .rail img { transition: none; }
  .orbits i, .orbits i + i { --turn: 0; }
}