/* ERYNDOR — mockup v1 · base layer
   Palette: void #07080A · fog #8A9095 · bone #D9D3C7 · ember #C9652A · teal #3E8E8A */

@font-face{font-family:'Marcellus';src:url('../fonts/marcellus.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans3.woff2') format('woff2');font-weight:200 400;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap;}

:root{
  --void:#07080A; --void2:#0B0D10; --void3:#12151A;
  --fog:#8A9095; --bone:#D9D3C7; --bone-dim:#A9A49A;
  --ember:#C9652A; --ember-hot:#F0A25E; --teal:#3E8E8A;
  --serif:'Marcellus',Georgia,serif;
  --sans:'Source Sans 3',Helvetica,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,.72,.16,1);
  --pad:clamp(24px,5vw,96px);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:#050506;color:var(--bone);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:grid;place-items:center;overflow:hidden;
}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
p{margin:0;text-wrap:pretty;}
h2{font-family:var(--serif);font-weight:400;margin:0;line-height:1.02;letter-spacing:-.005em;
   font-size:clamp(38px,4.6vw,78px);}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;}
.mono--dim{color:#6F757A;}
.label{color:var(--ember);letter-spacing:.3em;}
.body{font-size:clamp(15px,1.12vw,18px);line-height:1.72;color:#B4AEA4;font-weight:300;max-width:44ch;}
.body--wide{max-width:60ch;}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#9AA0A6;border:1px solid #2B2E33;
  border-radius:100px;padding:8px 15px;white-space:nowrap;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 10px rgba(62,142,138,.8);}
.badge--block{display:inline-flex;margin-top:22px;}

/* ── frame ─────────────────────────────────────────────────────────────── */
.frame{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--void);isolation:isolate;}
body[data-device="mobile"]{background:radial-gradient(120% 90% at 50% 10%,#14161a,#050506 70%);}
body[data-device="mobile"] .frame{
  width:392px;height:min(844px,calc(100vh - 104px));border-radius:38px;
  box-shadow:0 0 0 1px #23262b,0 40px 120px rgba(0,0,0,.9),0 0 0 10px #0a0b0d;overflow:hidden;
}

.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;}
.scroller::-webkit-scrollbar{display:none;}

.progress{position:absolute;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--ember-hot));opacity:.85;}

.grain{position:absolute;inset:-40px;z-index:52;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px;animation:grainShift .9s steps(3) infinite;mix-blend-mode:screen;}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-6px,4px,0)}66%{transform:translate3d(5px,-5px,0)}100%{transform:translate3d(0,0,0)}
}
.vignette{position:absolute;inset:0;z-index:51;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 42%,rgba(4,5,6,.55) 82%,rgba(4,5,6,.92) 100%);
  mix-blend-mode:multiply;}

/* ── mockup chrome ─────────────────────────────────────────────────────── */
.chrome{position:fixed;left:18px;bottom:16px;z-index:120;display:flex;align-items:center;gap:12px;
  background:rgba(12,14,17,.82);border:1px solid #24272c;border-radius:100px;padding:5px 6px 5px 5px;
  backdrop-filter:blur(14px);}
.chrome__seg{display:flex;gap:2px;}
.chrome__btn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px;color:#7C8288;transition:all .3s var(--ease);}
.chrome__btn:hover{color:#CFCAC0;}
.chrome__btn.is-on{background:#25282d;color:#EDE8DE;}
.chrome__note{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5A6066;padding-right:12px;white-space:nowrap;}
body[data-device="mobile"] .chrome__note{display:none;}
@media (max-width:700px){.chrome{left:10px;bottom:8px;}.chrome__note{display:none;}}

/* ── header bar ────────────────────────────────────────────────────────── */
.bar{position:absolute;top:0;left:0;right:0;z-index:45;padding:20px var(--pad);
  background:linear-gradient(180deg,rgba(4,5,6,.86),rgba(4,5,6,0));
  transition:opacity .6s var(--ease);}
.bar.is-solid{background:linear-gradient(180deg,rgba(4,5,6,.94),rgba(4,5,6,.72) 70%,rgba(4,5,6,0));}
.bar__inner{display:flex;align-items:center;gap:20px;}
.bar__mark{font-family:var(--serif);font-size:15px;letter-spacing:.46em;color:var(--bone);padding-right:4px;}
.bar__chapter{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#6B7076;border-left:1px solid #2A2D32;padding-left:18px;transition:color .4s;}
.bar__right{margin-left:auto;display:flex;align-items:center;gap:9px;}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#9AA0A6;
  border:1px solid #2B2E33;border-radius:100px;padding:7px 13px;transition:all .35s var(--ease);
  display:inline-flex;align-items:center;gap:6px;min-height:30px;}
.chip:hover{color:var(--bone);border-color:#4A4E54;}
.chip__dia{color:var(--ember);font-size:8px;transform:translateY(-.5px);}
.chip__slash{color:#5C6167;}
/* sticky waitlist button, top-right on every screen */
.joinbtn{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#0A0B0D;background:var(--bone);border:1px solid var(--bone);border-radius:2px;
  padding:10px 18px;min-height:32px;display:inline-flex;align-items:center;white-space:nowrap;
  transition:all .4s var(--ease);}
.joinbtn:hover{background:var(--ember);border-color:var(--ember);color:#0A0B0D;}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:16px 26px;border:1px solid #3A3E44;border-radius:2px;color:var(--bone);white-space:nowrap;
  transition:all .45s var(--ease);position:relative;overflow:hidden;z-index:0;
}
.btn::after{content:'';position:absolute;inset:0;background:var(--bone);transform:translateY(101%);
  transition:transform .5s var(--ease);z-index:-1;}
.btn:hover{border-color:var(--bone);color:#0A0B0D;}
.btn:hover::after{transform:translateY(0);}
.btn--solid{background:var(--bone);color:#0A0B0D;border-color:var(--bone);}
.btn--solid::after{background:var(--ember);}
.btn--solid:hover{color:#0A0B0D;border-color:var(--ember);}
.btn--ghost{color:#8A9095;border-color:#2E3237;}

/* ── 00 THRESHOLD ──────────────────────────────────────────────────────── */
.gate{position:absolute;inset:0;z-index:90;background:#030405;display:grid;place-items:center;
  transition:opacity 1.15s var(--ease),visibility 1.15s;text-align:center;}
.gate.is-open{opacity:0;visibility:hidden;pointer-events:none;}
.gate__fog{position:absolute;inset:-20%;background:
  radial-gradient(60% 44% at 30% 40%,rgba(70,84,92,.22),transparent 70%),
  radial-gradient(52% 40% at 72% 62%,rgba(46,58,66,.26),transparent 72%),
  radial-gradient(40% 30% at 50% 85%,rgba(20,24,28,.7),transparent 70%);
  filter:blur(24px);animation:gateDrift 26s ease-in-out infinite alternate;}
@keyframes gateDrift{from{transform:translate3d(-2%,1%,0) scale(1.02)}to{transform:translate3d(3%,-2%,0) scale(1.09)}}
.gate__inner{position:relative;z-index:2;padding:0 28px;max-width:900px;}
.gate__mark{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);letter-spacing:.62em;
  color:#CFC9BD;text-indent:.62em;margin-bottom:14px;}
.gate__sub{color:#5F666C;font-size:9.5px;letter-spacing:.42em;}
.gate__line{margin:clamp(52px,9vh,84px) auto clamp(40px,7vh,62px);max-width:760px;}
.gate__narr{font-family:var(--serif);font-size:clamp(19px,2.3vw,34px);line-height:1.42;
  color:var(--bone);letter-spacing:.005em;opacity:0;filter:blur(6px);transform:translateY(10px);
  animation:narrIn 1.9s var(--ease) forwards;animation-delay:var(--d,0s);text-wrap:balance;}
.gate__narr--last{color:#EDE8DE;margin-top:.5em;}
@keyframes narrIn{to{opacity:1;filter:blur(0);transform:none;}}
.gate__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.gate__state{margin-top:34px;color:#464C52;font-size:9px;letter-spacing:.28em;transition:color .6s;}
.gate__state.is-ready{color:var(--ember);}
@media (prefers-reduced-motion: reduce){
  .gate__narr{animation-duration:.01s;filter:none;transform:none;}
}

/* ── toast ─────────────────────────────────────────────────────────────── */
.toast{position:absolute;left:50%;bottom:34px;z-index:80;transform:translate(-50%,26px);
  background:rgba(10,12,14,.94);border:1px solid #34383E;border-left:2px solid var(--ember);
  padding:13px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#C3BDB2;opacity:0;pointer-events:none;transition:all .6s var(--ease);max-width:min(84%,420px);}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* ── chapter index ─────────────────────────────────────────────────────── */
.index{position:absolute;inset:0;z-index:70;background:rgba(4,5,7,.94);backdrop-filter:blur(18px);
  display:grid;place-items:center;animation:idxIn .5s var(--ease);}
.index[hidden]{display:none !important;}
@keyframes idxIn{from{opacity:0}to{opacity:1}}
.index__inner{width:min(560px,84%);}
.index ol{list-style:none;margin:26px 0 0;padding:0;}
.index li{border-top:1px solid #22252A;}
.index li:last-child{border-bottom:1px solid #22252A;}
.index li button{display:flex;width:100%;align-items:baseline;gap:18px;padding:15px 4px;text-align:left;
  transition:all .35s var(--ease);}
.index li button:hover{padding-left:12px;color:var(--ember-hot);}
.index li em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;color:#5E646A;width:26px;}
.index li span{font-family:var(--serif);font-size:19px;color:#BDB7AC;letter-spacing:.02em;}
.index__close{margin-top:30px;color:#6E747A;letter-spacing:.24em;font-size:9.5px;}
.index__close:hover{color:var(--bone);}

/* ── mobile shell ──────────────────────────────────────────────────────── */
[data-mode="mobile"] .bar{padding:14px 16px;}
[data-mode="mobile"] .bar__chapter{display:none;}
[data-mode="mobile"] .bar__mark{font-size:11px;letter-spacing:.32em;}
[data-mode="mobile"] .bar__inner{gap:10px;}
[data-mode="mobile"] .bar__right{gap:6px;}
[data-mode="mobile"] #shardChip{display:none;}
[data-mode="mobile"] .chip{padding:6px 9px;font-size:8px;min-height:28px;}
[data-mode="mobile"] .joinbtn{font-size:8px;padding:8px 10px;min-height:28px;letter-spacing:.14em;}
[data-mode="mobile"] h2{font-size:clamp(30px,8.6vw,40px);}
[data-mode="mobile"] .body{font-size:14.5px;}
[data-mode="mobile"] .toast{bottom:106px;font-size:9px;}