/* Design 4 — "Chapters over Qasioun".
   Layout: a pinned cinematic hero (sky · letters · mountain · blueprint), then numbered chapters
   that each own one scroll scene: statement, horizontal sectors, service rows, the reel ring, contact. */
:root {
  --night: #01032b; --navy: #08082d; --deep: #00386f; --blue: #004bbe; --sky: #00a3f8; --ice: #e3f0ff; --mist: #b8c0cc; --dim: #7887a3;
  --hair: rgba(227,240,255,.1); --line: rgba(0,163,248,.25);
  --grad: linear-gradient(120deg, var(--blue), var(--sky));
  --ease: cubic-bezier(.2,.8,.2,1);
  --wide: "Unbounded", "Arial Black", sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--ice); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
body.lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--sky); color: var(--night); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--wide); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(1280px, 100%); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); position: relative; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; will-change: transform; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--night); display: grid; place-items: center; animation: lgone 0s 8s forwards; }
@keyframes lgone { to { visibility: hidden; } }
.loader .in { display: grid; justify-items: center; gap: 26px; }
.loader img { height: 70px; width: auto; }
.loader .num { font-family: var(--wide); font-size: 64px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.loader .bar { width: 220px; height: 1px; background: var(--hair); overflow: hidden; }
.loader .bar i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }

/* fixed chrome */
.top { position: fixed; z-index: 60; left: 0; right: 0; top: 0; padding: calc(18px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; mix-blend-mode: normal; }
.top > * { pointer-events: auto; }
.top .logo img { height: 40px; width: auto; }
.top .chap { display: flex; gap: 14px; align-items: center; color: var(--mist); }
.top .chap b { color: var(--ice); font-weight: 500; min-width: 2ch; }
.top .chap i { width: 36px; height: 1px; background: var(--line); }
.top .menu-btn { border: 0; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px; border-radius: 999px; background: rgba(8,8,45,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair); }
.top .menu-btn span { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; }
.top .menu-btn em { display: grid; gap: 5px; width: 18px; }
.top .menu-btn em i { height: 1.5px; background: var(--ice); border-radius: 2px; transition: transform .45s var(--ease); }
.menu-open .top .menu-btn em i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .top .menu-btn em i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.rail { position: fixed; z-index: 55; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.rail a { position: relative; padding: 6px 0; transition: color .3s; }
.rail a.on { color: var(--ice); }
.rail a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sky); box-shadow: 0 0 8px var(--sky); }
.side { position: fixed; z-index: 55; right: max(22px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .4em; color: var(--dim); }
.progress { position: fixed; z-index: 61; left: 0; top: 0; height: 2px; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px var(--sky); }

.overlay { position: fixed; inset: 0; z-index: 58; background: rgba(1,3,43,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: grid; align-content: center; padding: 100px max(32px, env(safe-area-inset-left, 0px)) 60px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; }
.menu-open .overlay { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease); }
.overlay a { display: flex; align-items: baseline; gap: 22px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-family: var(--wide); font-size: clamp(30px, 6vw, 72px); font-weight: 500; letter-spacing: -.03em; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s var(--ease), color .3s; }
.overlay a small { font-family: var(--mono); font-size: 12px; color: var(--sky); letter-spacing: .1em; }
.overlay a:hover { color: var(--sky); }
.menu-open .overlay a { opacity: 1; transform: none; }

.cursor { position: fixed; z-index: 150; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid rgba(0,163,248,.8); pointer-events: none; display: grid; place-items: center; opacity: 0; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, opacity .3s; }
.cursor.on { opacity: 1; }
.cursor span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--night); opacity: 0; transition: opacity .2s; }
.cursor.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--sky); }
.cursor.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--night); }
.scene { position: absolute; inset: 0; will-change: transform; }
.scene .plate { position: absolute; will-change: transform; }
.scene img.plate { max-width: none; }
/* the sky plate fades into the page colour at its top edge, so tall screens show no seam */
#bg { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 18%); mask: linear-gradient(to bottom, transparent 0, #000 18%); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.letters { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: .1em; font-family: var(--wide); font-weight: 700; line-height: .8; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
.letters span { display: inline-block; background: linear-gradient(180deg, #fff 30%, #9fdcff 70%, #2f7fe0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(0,163,248,.35)); will-change: transform; }
.vision { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask: radial-gradient(circle var(--r, 0px) at var(--vx, 50%) var(--vy, 50%), #000 70%, transparent 100%); mask: radial-gradient(circle var(--r, 0px) at var(--vx, 50%) var(--vy, 50%), #000 70%, transparent 100%); }
.vlabel { position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--sky); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.vlabel b { color: var(--ice); font-weight: 500; display: block; margin-bottom: 4px; }
.hero .shade { position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(transparent, var(--night)); pointer-events: none; }
.hero .copy { position: absolute; z-index: 5; left: max(24px, env(safe-area-inset-left, 0px)); top: calc(110px + env(safe-area-inset-top, 0px)); max-width: 300px; }
.hero .copy h1 { font-family: var(--wide); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; }
.hero .copy p { color: var(--mist); font-size: 14px; line-height: 1.6; margin: 14px 0 0; }
.hero .coords { position: absolute; z-index: 5; right: max(64px, env(safe-area-inset-right, 0px)); top: calc(118px + env(safe-area-inset-top, 0px)); text-align: right; color: var(--mist); line-height: 2; }
.hero .coords b { color: var(--sky); font-weight: 500; }
.hero .hint { position: absolute; z-index: 5; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; color: var(--mist); }
.hero .hint i { width: 1px; height: 44px; background: linear-gradient(var(--sky), transparent); position: relative; overflow: hidden; }
.hero .hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { to { top: 110%; } }
.hero .tip { position: absolute; z-index: 5; right: max(64px, env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); color: var(--dim); display: flex; gap: 10px; align-items: center; }
.hero .tip i { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--sky); }
@media (hover: none), (pointer: coarse) { .hero .tip { display: none; } }
@media (max-width: 700px) { .hero .coords { display: none; } .hero .copy { max-width: 240px; } }

/* chapter scaffolding */
.chapter { position: relative; z-index: 2; }
.chead { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 64px; }
.chead .k { display: flex; gap: 14px; align-items: center; color: var(--sky); margin-bottom: 26px; }
.chead .k i { width: 40px; height: 1px; background: var(--sky); }
.chead h2 { font-size: clamp(34px, 5.4vw, 84px); max-width: 15ch; }
.chead p { color: var(--mist); max-width: 38ch; line-height: 1.75; margin: 0; font-size: 15.5px; }