@font-face{font-family:"Eczar";font-weight:400 800;font-display:swap;src:url(../fonts/eczar-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/yrsa-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/yrsa-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/yrsa-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/yrsa-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/yrsa-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Yrsa";font-weight:600;font-style:italic;font-display:swap;src:url(../fonts/yrsa-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-style:normal;font-display:swap;src:url(../fonts/im-fell-english-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-display:swap;src:url(../fonts/im-fell-english-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"IM Fell English SC";font-display:swap;src:url(../fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Brahmi";font-display:swap;src:url(../fonts/noto-sans-brahmi-brahmi-400-normal.woff2) format("woff2")}

:root{
  --ink:#16100b;--umber:#4a2e1a;--indigo:#1d2b4c;--lapis:#2f4f9a;--verm:#b5321c;--ochre:#c98a2e;--sand:#d8bb85;--parch:#eddcb6;--bone:#f8f0dc;
  --disp:"Eczar",Georgia,serif;
  --text:"Yrsa",Georgia,serif;
  --brahmi:"Noto Sans Brahmi",serif;
  --pad:clamp(16px,3.2vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--bone);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--text);background:var(--ink);overflow-x:hidden;font-feature-settings:"kern","liga","onum"}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[lang="pra-Brah"]{font-family:var(--brahmi)}

#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0}
#gl.fallback{image-rendering:pixelated}
.scrim{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 62% 78% at 30% 50%,rgba(12,8,5,.62) 0%,rgba(12,8,5,.34) 48%,rgba(12,8,5,0) 78%)}

/* loader */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--ink);color:var(--sand);transition:opacity .9s ease,visibility .9s}
#loader .wheel{width:64px;height:64px;fill:none;stroke:var(--ochre);stroke-width:3;animation:spin 6s linear infinite}
#loader .wheel circle:nth-child(2){fill:var(--ochre)}
#loader p{font-family:var(--text);font-style:italic;font-size:19px;display:flex;gap:10px;align-items:baseline}
#loader b{font-family:var(--disp);font-style:normal;font-weight:500;color:var(--verm);min-width:3ch;font-variant-numeric:tabular-nums}
body.ready #loader{opacity:0;visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}

/* hud */
.hud{position:fixed;left:0;right:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .8s .3s,color .6s}
body.ready .hud{opacity:1}
body.at-notes .hud{opacity:0}
.hud.top{top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(var(--pad)*.75) var(--pad);color:var(--ink)}
body.on-photo .hud.top{color:var(--bone)}
.brand{pointer-events:auto;text-decoration:none;display:flex;align-items:baseline;gap:10px;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.01em}
.brand .brb{font-size:17px;color:var(--verm);transform:translateY(1px)}
body.on-photo .brand .brb{color:var(--ochre)}
.clock{display:grid;grid-template-columns:auto auto auto;align-items:baseline;column-gap:6px;justify-items:end;text-align:right}
.clock .ca{font-family:var(--text);font-style:italic;font-size:17px;opacity:.8}
.clock .digits{display:flex;font-family:var(--disp);font-weight:500;font-size:34px;line-height:1;height:1em;overflow:hidden;font-variant-numeric:lining-nums tabular-nums}
.clock .col{display:block;width:.62em;height:1em;overflow:hidden;position:relative}
.clock .col b{display:block;font-weight:inherit;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.clock .col b i{display:block;height:1em;line-height:1em;font-style:normal;text-align:center}
.clock .era{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--verm)}
body.on-photo .clock .era{color:var(--ochre)}
.clock .where{grid-column:1/-1;font-family:var(--text);font-style:italic;font-size:16px;margin-top:4px;opacity:.85}
body.no-c .clock .ca{visibility:hidden}

.rail{bottom:0;height:44px}
.rail .track{position:absolute;left:var(--pad);right:var(--pad);bottom:20px;height:1px;background:rgba(22,16,11,.3)}
body.on-photo .rail .track{background:rgba(248,240,220,.28)}
#rail-fill{height:100%;background:var(--verm);transform-origin:0 50%;transform:scaleX(0)}
body.on-photo #rail-fill{background:var(--ochre)}
.tick{position:absolute;top:-10px;width:20px;height:20px;margin-left:-10px;pointer-events:auto}
.tick::before{content:"";position:absolute;left:9.5px;top:5px;width:1px;height:10px;background:currentColor;opacity:.55;transition:height .3s,top .3s,opacity .3s}
.rail{color:var(--ink)}
body.on-photo .rail{color:var(--bone)}
.tick.done::before{opacity:1}
.tick:hover::before{top:0;height:15px}
.tick span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--text);font-style:italic;font-size:15px;opacity:0;transition:opacity .25s}
.tick:hover span,.tick:focus-visible span{opacity:1}
.tick:focus-visible{outline:1px solid var(--verm);outline-offset:3px}

/* sections */
main{position:relative;z-index:10}
.sec{position:relative}
.intro{height:430vh}
.ch{height:600vh}
.outro{height:300vh}

/* the 3D text field */
.fly{position:fixed;inset:0;perspective:1100px;perspective-origin:50% 50%;pointer-events:none;visibility:hidden;z-index:10}
.fly.on{visibility:visible}
.it{position:absolute;left:50%;top:50%;width:min(var(--w,560px),84vw);transform-origin:50% 50%;will-change:transform,opacity;opacity:0;color:var(--bone);
  text-shadow:0 1px 2px rgba(10,7,5,.55),0 0 28px rgba(10,7,5,.55)}
.it.map{color:var(--ink);-webkit-text-stroke:.16em var(--parch);paint-order:stroke fill;text-shadow:0 2px 0 rgba(22,16,11,.25),0 0 24px rgba(237,220,182,.9)}
.it.map .pl{-webkit-text-stroke-width:.3em}
.it.map.night{color:var(--bone);-webkit-text-stroke-color:var(--indigo);text-shadow:0 2px 0 rgba(10,7,5,.4),0 0 30px rgba(20,28,52,.8)}

.yr{font-family:var(--disp);font-weight:700;font-size:clamp(110px,12.5vw,200px);line-height:.8;letter-spacing:-.035em;font-variant-numeric:lining-nums}
.yr .era{font-size:.13em;font-weight:600;letter-spacing:.16em;margin-left:.5em;vertical-align:.25em;color:var(--verm)}
.it.map.night .yr .era{color:var(--ochre)}
.pl{display:flex;align-items:baseline;gap:16px;margin-top:.3em;font-family:var(--text);font-style:italic;font-weight:500;font-size:clamp(24px,2.4vw,34px)}
.pl .br{font-style:normal;font-size:.92em;color:var(--verm)}
.it.map.night .pl .br{color:var(--ochre)}

.title{font-family:var(--disp);font-weight:600;font-size:clamp(52px,6.6vw,104px);line-height:.94;letter-spacing:-.02em;text-wrap:balance}
.line{font-family:var(--text);font-weight:500;font-size:clamp(28px,2.8vw,44px);line-height:1.18;max-width:19ch;text-wrap:pretty}
blockquote p{font-family:var(--text);font-style:italic;font-weight:500;font-size:clamp(27px,2.6vw,40px);line-height:1.18;max-width:22ch;text-wrap:pretty}
blockquote p::before{content:"\201C";font-family:var(--disp);font-style:normal;font-weight:700;color:var(--ochre);position:absolute;margin-left:-.55em;margin-top:-.08em}
.stat{display:flex;flex-direction:column;gap:10px}
.stat .num{font-family:var(--disp);font-weight:700;font-size:clamp(84px,10vw,160px);line-height:.82;letter-spacing:-.035em;font-variant-numeric:lining-nums}
.stat .lab{font-family:var(--text);font-weight:500;font-size:clamp(23px,2.1vw,32px);line-height:1.25;max-width:24ch}
.stat.legend .num{text-decoration:line-through;text-decoration-color:var(--verm);text-decoration-thickness:.07em;opacity:.9;font-size:clamp(64px,7vw,112px)}
.note{margin-top:22px;font-family:var(--text);font-style:italic;font-size:19px;line-height:1.3;color:var(--sand);display:flex;gap:10px;align-items:baseline;max-width:34ch}
.note::before{content:"";flex:0 0 22px;height:1px;background:currentColor;transform:translateY(-5px)}
.note.tradition{color:var(--ochre)}
.word{display:flex;align-items:baseline;gap:18px}
.word [lang]{font-size:clamp(80px,9vw,140px);line-height:1;color:var(--ochre)}
.word .tr{font-family:var(--text);font-style:italic;font-size:26px}

/* intro */
.hero-t h1{font-family:var(--disp);font-weight:700;font-size:clamp(110px,16vw,250px);line-height:.8;letter-spacing:-.04em}
.hero-t .sub{font-family:var(--text);font-style:italic;font-weight:500;font-size:clamp(22px,2vw,30px);margin-top:.5em}
.nw{white-space:nowrap}
.big{font-family:var(--text);font-weight:500;font-size:clamp(34px,3.6vw,56px);line-height:1.08;max-width:15ch;text-wrap:balance}
.begin{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:21;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--text);font-style:italic;font-size:17px;color:var(--bone);opacity:0;transition:opacity .6s;text-shadow:0 0 12px rgba(10,7,5,.6)}
.begin i{display:block;width:1px;height:46px;background:linear-gradient(var(--bone),transparent);animation:drip 2.2s ease-in-out infinite;transform-origin:top}
body.ready.in-intro .begin{opacity:1}
body:not(.in-intro) .begin{pointer-events:none}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.xl{font-family:var(--disp);font-weight:700;font-size:clamp(70px,9vw,150px);line-height:.9;letter-spacing:-.03em}
.xl.red{color:var(--verm)}

/* notes */
.notes{position:relative;z-index:12;background:var(--parch);color:var(--ink);padding:clamp(64px,10vw,140px) var(--pad) 100px}
.notes .wrap{max-width:640px;margin:0 auto}
.notes .dh{font-size:64px;line-height:1;color:var(--verm);margin-bottom:6px}
.notes .dhc{font-style:italic;font-size:16px;color:var(--umber);margin-bottom:30px}
.notes h2{font-family:var(--disp);font-weight:600;font-size:clamp(36px,4.4vw,54px);line-height:1;letter-spacing:-.015em;margin-bottom:28px}
.notes h3{font-family:var(--disp);font-weight:600;font-size:22px;margin:44px 0 14px}
.notes p,.notes li{font-family:var(--text);font-weight:500;font-size:20px;line-height:1.5;margin-bottom:14px}
.notes b{font-weight:600}
.src-list{padding-left:1.4em}
.src-list li{font-size:18px;margin-bottom:8px;padding-left:.3em}
.src-list li::marker{font-family:var(--disp);color:var(--verm);font-size:15px}
.notes a{text-decoration-color:var(--verm);text-underline-offset:3px}
.notes .colo{margin-top:40px;font-style:italic;font-size:17px;color:var(--umber)}
.nojs{position:fixed;inset:auto 0 0 0;z-index:60;background:var(--verm);color:var(--bone);padding:12px;font-size:16px;text-align:center}

@media (max-width:760px){
  .brand{font-size:17px}
  .clock .digits{font-size:26px}
  .clock .where{font-size:14px}
  .it{width:88vw}
  .title{font-size:clamp(46px,13vw,64px)}
  .line{font-size:24px;max-width:none}
  blockquote p{font-size:25px;max-width:none}
  .stat .num{font-size:88px}
  .yr{font-size:clamp(110px,34vw,150px)}
  .tick span{display:none}
  .scrim{background:radial-gradient(ellipse 120% 70% at 50% 50%,rgba(12,8,5,.62),rgba(12,8,5,.3) 55%,rgba(12,8,5,0) 85%)}
}
@media (prefers-reduced-motion:reduce){
  #loader .wheel,.begin i{animation:none}
  .clock .col b{transition:none}
}

/* letters that assemble as the camera arrives */
.it.t3{opacity:1!important;transform-style:preserve-3d}
.it.t3 .split,.it.t3 .w{transform-style:preserve-3d}
.it.t3 .w{display:inline-block;white-space:nowrap}
.it.t3 .lt{display:inline-block;opacity:var(--o,0);
  transform:translate3d(calc(var(--x)*var(--a,0)*1px),calc(var(--y)*var(--a,0)*1px),calc(var(--z)*var(--a,0)*1px)) rotateY(calc(var(--r)*var(--a,0)*1deg))}
.it.t3 > :not(.split),.it.t3 .era{opacity:var(--o,0)}
.it.t3 .yr{transform-style:preserve-3d}

/* entry gate */
#loader .gate{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
#loader .gate[hidden]{display:none}
#loader.ready-gate .lp{display:none}
.go{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 28px;border:1px solid rgba(201,138,46,.6);color:var(--bone);font-family:var(--disp);font-weight:600;font-size:21px;transition:background .3s,border-color .3s}
.go i{font-family:var(--text);font-style:italic;font-weight:400;font-size:15px;color:var(--sand)}
.go:hover,.go:focus-visible{background:var(--verm);border-color:var(--verm);outline:none}
.go.quiet{border:0;padding:6px 12px;font-family:var(--text);font-style:italic;font-weight:500;font-size:17px;color:var(--sand)}
.go.quiet:hover,.go.quiet:focus-visible{background:none;color:var(--bone);text-decoration:underline}

/* sound toggle */
.hud .left{display:flex;align-items:center;gap:18px}
.snd{pointer-events:auto;display:flex;align-items:flex-end;gap:2px;height:16px;color:inherit;opacity:.85}
.snd i{display:block;width:2px;height:4px;background:currentColor;transform-origin:bottom}
.snd span{font-family:var(--text);font-style:italic;font-size:15px;margin-left:7px;line-height:1}
.snd[aria-pressed="true"] i{animation:eq 1.1s ease-in-out infinite}
.snd[aria-pressed="true"] i:nth-child(2){animation-delay:-.3s}
.snd[aria-pressed="true"] i:nth-child(3){animation-delay:-.7s}
.snd[aria-pressed="true"] i:nth-child(4){animation-delay:-.5s}
.snd[aria-pressed="false"] span{text-decoration:line-through;text-decoration-thickness:1px}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}
@media (prefers-reduced-motion:reduce){.snd i{animation:none!important}}