@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-normal-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00CF,U+00D1-00EF,U+00F1-024F,U+2000-206F}/* eth (U+00D0, U+00F0) is left out on purpose: this font draws it like a partial-derivative sign; the fallback serif draws the ordinary letter */
@font-face{font-family:"Eth";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica"),local("Roboto"),local("Liberation Sans");unicode-range:U+00D0,U+00F0}/* an ordinary eth from the system sans: Hanken and Instrument Serif both draw it curly like a partial-derivative sign */
@font-face{font-family:"EthSerif";src:local("Georgia"),local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times"),local("Liberation Serif");unicode-range:U+00D0,U+00F0}/* an ordinary serif eth for the big captions (Instrument Serif draws a curly one) */
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/HankenGrotesk-normal-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#050709;--ink:#e8f1f8;--mute:#8fa3b3;--ice:#9fe0ff;--spark:#fff;--serif:"EthSerif","Instrument Serif",Georgia,serif;--sans:"Eth","Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden;min-height:100vh}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));pointer-events:none}
.mark{font-family:var(--serif);font-size:30px;color:var(--ice);opacity:.9;pointer-events:auto}
.lang{pointer-events:auto;min-width:48px;min-height:44px;background:none;border:1px solid rgba(159,224,255,.35);color:var(--ice);font:500 13px var(--sans);letter-spacing:.16em;border-radius:22px;cursor:pointer;transition:background .35s,border-color .35s}
.lang:hover,.lang:focus-visible{background:rgba(159,224,255,.12);border-color:var(--ice);outline:none}
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden}
.stone{height:92svh;max-height:1000px;width:auto;max-width:96vw;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.stone .r path{fill:none;stroke:var(--ice);stroke-width:13;stroke-linejoin:round;stroke-linecap:round}
.stone .r.done path{fill:rgba(159,224,255,.55);stroke-width:7;transition:fill .5s,stroke-width .5s}
.stone .r.seen path{fill:rgba(159,224,255,.9)}
.stone .r.lit path{fill:#fff;stroke:#fff}
.stone .lt{font:500 25px var(--sans);fill:#cfe9f7;letter-spacing:.1em;text-anchor:middle;opacity:0}
.stone .gl{fill:none;stroke:var(--ice);stroke-width:26;filter:url(#glow);opacity:.9}
.caption{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:16px;align-items:center;min-height:64px;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.caption.on{opacity:1}
.cap-rune{font-family:var(--serif);font-size:48px;color:var(--spark);line-height:1}
.cap-name{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.cap-mean{font:400 26px/1.15 var(--serif);color:var(--ink)}
.sentence{position:absolute;left:50%;top:max(70px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);text-align:center;font:400 clamp(22px,3.2vw,40px)/1.2 var(--serif);color:var(--ink);opacity:0;width:min(86vw,760px)}
.hint{position:absolute;left:0;right:0;bottom:max(96px,calc(env(safe-area-inset-bottom) + 84px));text-align:center;font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);opacity:0}
@media(min-width:900px){.stone{height:94svh}.caption{left:auto;right:6vw;bottom:50%;transform:translateY(50%);flex-direction:column;align-items:flex-start;white-space:normal;width:min(26vw,360px)}.cap-rune{font-size:96px}.cap-mean{font-size:32px}.hint{left:6vw;right:auto;bottom:50%;text-align:left;width:min(24vw,320px)}.sentence{left:6vw;top:auto;bottom:12vh;transform:none;text-align:left;width:min(28vw,440px)}}
.era-stage{position:relative;height:420svh}
.pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:12svh 5vw 9svh;gap:2vh}
.era-years{font:500 13px var(--sans);letter-spacing:.3em;color:var(--ice);text-transform:uppercase;align-self:end}
.era-row{display:flex;flex-wrap:wrap;gap:clamp(6px,1.4vw,18px) clamp(8px,1.8vw,26px);justify-content:center;max-width:min(1100px,92vw);align-self:center}
.era-row svg{height:clamp(42px,8.4vw,92px);width:auto;overflow:visible}
.era-row svg path{fill:none;stroke:var(--ice);stroke-width:11;stroke-linejoin:round;stroke-linecap:round}
.era-row svg.on path{fill:rgba(159,224,255,.75);stroke-width:5}
.era-text{max-width:min(640px,90vw);text-align:center;align-self:start}
.era-text h2{font:400 clamp(34px,6vw,76px)/1 var(--serif);margin-bottom:12px}
.era-text p{font:400 clamp(15px,1.5vw,18px)/1.5 var(--sans);color:var(--mute)}
.sec{font:400 clamp(34px,6vw,76px)/1 var(--serif);text-align:center;padding:9vh 5vw 5vh}
.stone-list{display:grid;gap:0;max-width:1100px;margin:0 auto;padding:0 5vw 14vh}
.card{display:grid;grid-template-columns:1fr;gap:10px;padding:34px 0;border-top:1px solid rgba(159,224,255,.18)}
.card .yr{font:500 12px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ice)}
.card h3{font:400 clamp(28px,4vw,46px)/1.05 var(--serif)}
.card .runes{font:400 clamp(24px,4vw,40px)/1.3 var(--serif);color:var(--spark);letter-spacing:.06em;word-break:break-word}
.card .says{font:400 clamp(17px,1.7vw,21px)/1.4 var(--serif);color:var(--ink)}
.card .why{font:400 15px/1.5 var(--sans);color:var(--mute);max-width:58ch}
.card .src{font:400 12px var(--sans);color:var(--mute)}
.card .src a{color:var(--mute);text-underline-offset:3px}
@media(min-width:900px){.card{grid-template-columns:200px 1fr;gap:6px 48px}.card .yr{grid-row:1/4}}
.facts{list-style:none;max-width:720px;margin:0 auto;padding:0 5vw 16vh;counter-reset:f}
.facts li{padding:26px 0;border-top:1px solid rgba(159,224,255,.18);font:400 clamp(20px,2.4vw,28px)/1.35 var(--serif)}
.foot{padding:2vh 5vw calc(5vh + env(safe-area-inset-bottom));text-align:center}
.small{font:400 12px/1.6 var(--sans);color:var(--mute);max-width:720px;margin:0 auto 8px}
.small a{color:var(--mute)}

a:focus-visible,button:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.cap-line{display:block;font:italic 400 15px/1.4 var(--serif);color:var(--mute);margin-top:4px}
.cap-rune svg{display:block;width:auto}
.card .runes{display:flex;flex-wrap:wrap;gap:6px 8px}
.card .runes svg{height:34px;width:auto}
.card .runes svg path{fill:var(--ice)}
@media(max-width:899px){.cap-rune svg{height:56px}.cap-mean{font-size:22px}.caption{gap:12px}}

.close{position:relative;height:1500svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#050709}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{touch-action:pan-y;cursor:crosshair}
#fx{pointer-events:none;mix-blend-mode:screen}
.rays{position:absolute;inset:-10% -10% 30% 30%;pointer-events:none;mix-blend-mode:screen;opacity:.5;background:repeating-linear-gradient(112deg,rgba(150,190,255,0) 0 9%,rgba(150,190,255,.07) 12% 17%,rgba(150,190,255,0) 21% 33%);-webkit-mask-image:linear-gradient(200deg,#000 0,transparent 70%);mask-image:linear-gradient(200deg,#000 0,transparent 70%);animation:ray 18s ease-in-out infinite alternate}
@keyframes ray{from{transform:translateX(-2%)}to{transform:translateX(3%)}}
.panel{position:absolute;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));max-width:620px;display:grid;gap:6px;pointer-events:none;text-shadow:0 2px 18px #000,0 0 3px #000}
.pn-block{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#a9c6d8}
.pn-block b{color:var(--ice);font-weight:600}
.pn-runes{display:flex;gap:4px;min-height:46px}
.pn-runes svg{width:auto}
.pn-tr{font:italic 400 18px/1.2 var(--serif);color:#e6d3a2}
.pn-en{font:400 clamp(30px,5vw,54px)/1.02 var(--serif);color:#fff}
.pn-line{font:400 15px/1.45 var(--sans);color:#b9c7d3;max-width:46ch}
@media(min-width:900px){.panel{left:5vw;bottom:9vh;max-width:min(30vw,460px)}}
.hint{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));font:400 28px var(--serif);color:var(--ice);opacity:0}
.glfail{position:absolute;left:0;right:0;top:44%;text-align:center;color:var(--mute);font:400 16px var(--sans);padding:0 8vw}
body.gl .glfail{display:none}
body.nogl .stage{background:#050709 url(../img/beauty-lo.webp) center/cover}
.veg{padding:0 5vw 4vh;text-align:center}
.vegtext{max-width:62ch;margin:0 auto 12px;font:400 clamp(17px,2vw,21px)/1.5 var(--serif);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rays{animation:none}}

.stage::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(3,5,8,.78),rgba(3,5,8,0));pointer-events:none}
.panel,.hint{z-index:2}
@media(min-width:900px){.stage::after{inset:0 auto 0 0;width:46%;height:auto;background:linear-gradient(to right,rgba(3,5,8,.72),rgba(3,5,8,0))}}

#lt{z-index:4;pointer-events:none;mix-blend-mode:screen}

.again{pointer-events:auto;justify-self:start;display:none;align-items:center;gap:8px;margin-top:14px;min-width:48px;min-height:48px;padding:0 16px;background:rgba(6,10,16,.6);border:1px solid rgba(160,200,255,.3);border-radius:24px;color:var(--ice);font:500 13px var(--sans);letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.again.on{display:inline-flex}
.again:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.again span{text-transform:none}

.panel{isolation:isolate}.panel::before{content:'';position:absolute;inset:-70px -50px -28px -40px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 38% 55%,rgba(3,6,10,.85),rgba(3,6,10,.62) 58%,rgba(3,6,10,0) 85%)}
.pn-block,.pn-block b{color:#d6e9ff}
.lang{background:rgba(5,9,14,.72)}
/* one stop per line of the stone (snap points are added by js/main.js) */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
#close .snap{position:absolute;left:0;width:1px;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none;visibility:hidden}

/* phones: the scroll arrow lives in its own column at the right, so a long last line wraps before it instead of running under it */
@media(max-width:899px){.panel{padding-right:52px}.hint{left:auto;width:auto;text-align:right;letter-spacing:0;text-transform:none}}