/* vunnar.com — as the game: "Nordisch" (the interface kit's frames and plates, its own section at the end),
   laid over the older "Runenstahl" shapes: ink and slate, cast bronze, verdigris.
   Shapes take the logo's cut: chamfered corners, a slanted blade. Motion comes from home.js
   (data-reveal, data-pin with --p, data-progress, data-parallax) and stays off for reduced motion. */
:root {
  --ink: #0a0c10; --ink-2: #0f1218; --slate: #161a22; --slate-2: #1d222c; --line: #2a303b;
  --bronze: #b98b4e; --bronze-light: #e8c586; --bronze-dark: #5e4221; --gold: #f2d9a6;
  --verdigris: #4fb8a1; --verdigris-light: #8fe3cc; --parchment: #efe4cc; --text: #d9cfbb; --muted: #9a907e;
  --raven: #3f8fc0; --wolf: #c4553a;
  --display: "Grenze Gotisch", Georgia, serif; --body: "Alegreya Sans", system-ui, sans-serif; --caps: "Alegreya Sans SC", "Alegreya Sans", sans-serif;
  --cut: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  cursor: url("img/cursor.svg") 3 2, auto; }
/* a fine grain over the page below the hero, as on old paper and cast metal (no blending: the live view beneath stays cheap) */
main { position: relative; }
main::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a, button, label { cursor: url("img/cursor-hand.svg") 3 2, pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: #4fb8a155; color: #fff; }

.kicker { margin: 0; font: 800 14px var(--caps); letter-spacing: .26em; text-transform: lowercase; color: var(--verdigris-light); }
h2 { margin: 8px 0 20px; font: 900 clamp(36px, 5.4vw, 64px)/1.02 var(--display); color: var(--gold); text-shadow: 0 2px 0 #000, 0 10px 30px #0008; text-wrap: balance; }
h3 { margin: 0 0 8px; font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); color: var(--parchment); }
.section { width: min(1180px, 92vw); margin: 0 auto; padding: clamp(80px, 12vh, 140px) 0 40px; }
.intro { max-width: 760px; font-size: 20px; color: #e2d8c4; }

/* ---------------------------------------------------------------- buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px;
  border: 1px solid var(--bronze); font: 800 16px var(--caps); letter-spacing: .1em; text-decoration: none; color: var(--parchment);
  background: linear-gradient(180deg, #3a3122, #231d14); box-shadow: inset 0 1px 0 #ffffff26, inset 0 -2px 0 #0006, 0 6px 18px #000a;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: filter .2s, transform .15s var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff30 48%, transparent 66%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }
.btn.primary { border-color: var(--verdigris); background: linear-gradient(180deg, #318070, #1b4038); box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #0006, 0 0 28px #4fb8a155, 0 6px 18px #000a; }
.btn.ghost { background: #0a0c10cc; border-color: #b98b4e99; }
.btn.small { --cut: 9px; min-height: 38px; padding: 0 18px; font-size: 14px; }
.btn.big { min-height: 56px; padding: 0 34px; font-size: 17px; }
.btn.disabled { opacity: .55; pointer-events: none; filter: grayscale(.5); }

/* ---------------------------------------------------------------- navigation */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 28px; padding: 16px clamp(16px, 4vw, 56px);
  transition: background .4s, padding .4s, box-shadow .4s; }
.top.solid { padding-top: 10px; padding-bottom: 10px; background: #0a0c10f2; box-shadow: 0 1px 0 #b98b4e33, 0 10px 30px #0008; }
.mark { display: flex; align-items: center; text-decoration: none; }
/* the bar's sign: the winged word alone (the V repeats it where there is room: seal, maker) */
.mark img { width: auto; height: 58px; margin: -10px 0; filter: drop-shadow(0 2px 6px #000a); }
.links { display: flex; gap: 24px; margin-left: auto; font: 700 15px var(--caps); letter-spacing: .08em; }
.links a { position: relative; text-decoration: none; color: #efe4ccc8; padding: 4px 0; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--verdigris-light); transform: scaleX(0); transition: transform .3s var(--ease); }
.links a:hover { color: var(--verdigris-light); }
.links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: 10px; }
/* (nothing in the bar gives way – where it all does not fit, in a long language or a narrow window, home.js
   takes the links out, as on small screens) */
.mark, .links, .nav-cta { flex-shrink: 0; }
.links a, .nav-cta .btn { white-space: nowrap; }
.top.crowded .links { display: none; }
.top.crowded .nav-cta { margin-left: auto; }
@media (max-width: 1400px) {
  .top { gap: 20px; }
  .links { gap: 18px; font-size: 14px; letter-spacing: .06em; }
}
/* (another language: hidden until home/i18n.js has put the page in it) */
.i18n-wait body { visibility: hidden; }
.lang-menu { position: relative; }
.btn.lang-btn { --cut: 9px; gap: 6px; padding: 0 12px; min-height: 38px; font-size: 13px; background: #0a0c10cc; border-color: #b98b4e99; }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: #10141bf5; border: 1px solid #b98b4e66; box-shadow: 0 14px 34px #000c; max-height: 70vh; overflow: auto; }
.lang-list li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; color: var(--parchment); font-size: 15px; }
.lang-list li b { min-width: 26px; font: 800 12px var(--caps); letter-spacing: .08em; color: var(--muted); }
.lang-list li:hover { background: #b98b4e22; }
.lang-list li[aria-selected="true"] { background: #4fb8a122; }
.lang-list li[aria-selected="true"] b { color: var(--verdigris-light); }
/* the Discord mark beside the buttons, in Discord's blurple */
.btn.discord-btn { --cut: 9px; padding: 0; width: 42px; min-height: 38px; color: #fff; background: linear-gradient(180deg, #6873f5, #4650c9); border-color: #8f98f7; box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #0006, 0 6px 18px #000a; }
.btn.discord-btn:hover { background: #4752c4; }
.discord-btn svg { width: 22px; height: 22px; }
.discord-join svg { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- hero: the world, live */
.hero { --hero: 0; position: relative; height: 100vh; height: 100svh; min-height: 640px; display: grid; align-items: center; overflow: hidden; background: #07090c; }
.atmo, .live { position: absolute; inset: 0; transform: scale(calc(1 + var(--hero) * .08)); transform-origin: 65% 50%; }
.atmo { background: radial-gradient(70% 60% at 68% 45%, #1e2a35 0%, #10151c 45%, #07090c 100%); }
.atmo .fog { position: absolute; inset: -20%; background: radial-gradient(40% 30% at 30% 60%, #8fb3c214, transparent 70%), radial-gradient(35% 25% at 70% 40%, #e8c58610, transparent 70%); animation: fog 38s ease-in-out infinite alternate; }
.atmo .f2 { animation-duration: 52s; animation-direction: alternate-reverse; transform: scale(1.3); opacity: .8; }
.atmo .f3 { background: radial-gradient(50% 20% at 60% 85%, #4fb8a112, transparent 70%); animation-duration: 64s; }
@keyframes fog { from { transform: translate(-4%, 2%) scale(1.1); } to { transform: translate(5%, -3%) scale(1.25); } }
.atmo .embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.live { pointer-events: none; }
.live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero.live-on .live iframe { opacity: 1; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #07090cf0 0%, #07090cc8 30%, #07090c40 58%, transparent 78%), linear-gradient(0deg, var(--ink) 0%, transparent 30%), linear-gradient(180deg, #07090ca0 0%, transparent 18%);
  opacity: calc(1 + var(--hero) * .4); }
.hero-text { position: relative; z-index: 2; width: min(660px, 92vw); margin-left: clamp(18px, 7vw, 120px); padding: 110px 0 70px;
  transform: translateY(calc(var(--hero) * -80px)); opacity: calc(1 - var(--hero) * 1.6); }
.alpha-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 16px 7px 12px; border: 1px solid #4fb8a166; background: #0a1413d9;
  font: 700 14px var(--caps); letter-spacing: .08em; color: #cfeee6; text-decoration: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.alpha-chip i { width: 8px; height: 8px; background: var(--verdigris-light); transform: rotate(45deg); box-shadow: 0 0 10px var(--verdigris); animation: pulse 2.2s ease-in-out infinite; }
.alpha-chip b { color: #fff; }
@keyframes pulse { 50% { opacity: .35; } }
.logo-wrap { margin: 0; }
.logo { width: min(720px, 100%); height: auto; filter: drop-shadow(0 12px 30px #000c); }
.tagline { display: flex; align-items: center; gap: 16px; width: min(600px, 100%); margin: 14px 0 0; font: 800 17px var(--caps); letter-spacing: .5em; text-transform: uppercase; color: var(--bronze-light); white-space: nowrap; }
.tagline i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze)); }
.tagline i:last-child { background: linear-gradient(270deg, transparent, var(--bronze)); }
.lead { margin: 26px 0 32px; font-size: 21px; line-height: 1.55; color: #ece2cd; text-shadow: 0 2px 10px #000; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.fine { margin: 18px 0 0; font: 700 14px var(--caps); letter-spacing: .14em; color: var(--muted); }
/* the hero's pieces arrive one after another */
.hero-text > * { animation: rise 1.1s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: .12s; } .hero-text > :nth-child(3) { animation-delay: .3s; } .hero-text > :nth-child(4) { animation-delay: .42s; }
.hero-text > :nth-child(5) { animation-delay: .54s; } .hero-text > :nth-child(6) { animation-delay: .66s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.live-caption { position: absolute; z-index: 3; right: clamp(16px, 4vw, 56px); bottom: 42px; margin: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px; border: 1px solid #b98b4e66; background: linear-gradient(180deg, #161a22f2, #0a0c10f2);
  box-shadow: inset 0 1px 0 #ffffff14, 0 8px 28px #000a; transition: opacity .5s ease, transform .5s var(--ease);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.live-caption[hidden] { display: none; }
.live-caption.changing { opacity: 0; transform: translateY(8px); }
.live-caption .badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; background: #7a1d16; font: 800 12px var(--caps); letter-spacing: .16em; text-transform: uppercase; color: #ffe9e2; }
.live-caption .badge i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a45; box-shadow: 0 0 8px #ff5a45; animation: pulse 1.6s ease-in-out infinite; }
.live-caption .from { font: 700 13px var(--caps); letter-spacing: .1em; color: var(--muted); }
.live-caption .where { font: 900 25px/1 var(--display); color: var(--bronze-light); }
.live-caption .dots { display: flex; gap: 5px; }
.live-caption .dots i { width: 6px; height: 6px; background: #efe4cc40; transform: rotate(45deg); }
.live-caption .dots i.on { background: var(--verdigris-light); box-shadow: 0 0 6px var(--verdigris); }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 26px; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); text-decoration: none;
  font: 700 12px var(--caps); letter-spacing: .3em; color: #efe4cc99; opacity: calc(1 - var(--hero) * 4); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--bronze-light), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- alpha */
.alpha { position: relative; padding: 90px 0 60px; text-align: center; background: radial-gradient(60% 80% at 50% 0%, #4fb8a114, transparent 70%); }
.alpha::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 80vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.alpha-inner { width: min(900px, 92vw); margin: 0 auto; }
.countdown { display: flex; justify-content: center; gap: clamp(10px, 3vw, 28px); margin: 34px 0 30px; }
.countdown div { position: relative; min-width: clamp(70px, 14vw, 128px); padding: 18px 10px 14px; background: linear-gradient(180deg, #1a1f28, #10131a); border: 1px solid #b98b4e55;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); box-shadow: inset 0 1px 0 #ffffff12; }
.countdown b { display: block; font: 900 clamp(38px, 6vw, 68px)/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #3a240f; }
.countdown span { font: 700 13px var(--caps); letter-spacing: .2em; color: var(--muted); }
.alpha-note { max-width: 640px; margin: 0 auto; color: #d9cfbbcc; }
.alpha-note a { color: var(--verdigris-light); }

/* ---------------------------------------------------------------- the promise */
.promise { text-align: center; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; text-align: left; }
.pillar { position: relative; padding: 32px 30px 28px; background: linear-gradient(180deg, #181c25, #111419); border: 1px solid #2c323d;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: transform .4s var(--ease), border-color .4s; }
.pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.pillar:hover { transform: translateY(-6px); border-color: #b98b4e77; }
.pillar svg { width: 50px; height: 50px; margin-bottom: 16px; }
.pillar p { margin: 0; color: #d9cfbbd8; }

/* ---------------------------------------------------------------- the journey (pinned) */
[data-pin] { position: relative; }
[data-pin] > .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.journey { height: 520vh; background: #080a0e; }
.map-stage { position: absolute; inset: 0; overflow: hidden; }
.map { position: absolute; left: 0; top: 0; width: max(165vw, 290vh); aspect-ratio: 15200 / 8200; transform-origin: 0 0; will-change: transform; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent); mask-image: radial-gradient(closest-side, #000 82%, transparent); }
.map .route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-shadow { fill: none; stroke: #00000080; stroke-width: 70; stroke-linecap: round; stroke-linejoin: round; }
/* (glows as wide, faint strokes underneath: cheap to draw while the map moves, unlike blur filters) */
.route-line { fill: none; stroke: var(--bronze-light); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60 90; }
.route-glow { fill: none; stroke: #e8c586; stroke-opacity: .16; stroke-width: 130; stroke-linecap: round; stroke-linejoin: round; }
.route-walked { fill: none; stroke: var(--gold); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.route-halo { fill: #4fb8a1; fill-opacity: .22; }
.route-dot { fill: var(--verdigris-light); stroke: #07090c; stroke-width: 18; }
.places { position: absolute; inset: 0; }
.place { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; opacity: .35; transition: opacity .6s, transform .6s var(--ease); pointer-events: none; }
.place i { width: 12px; height: 12px; background: var(--bronze); transform: rotate(45deg); box-shadow: 0 0 0 3px #07090c; transition: background .5s, box-shadow .5s; }
.place b { font: 900 clamp(15px, 1.5vw, 22px)/1 var(--display); color: var(--parchment); text-shadow: 0 2px 6px #000, 0 0 2px #000; white-space: nowrap; }
.place.on { opacity: 1; }
.place.on i { background: var(--verdigris-light); box-shadow: 0 0 0 3px #07090c, 0 0 18px var(--verdigris); }
.place.here { transform: translate(-50%, -50%) scale(1.25); }
.place.label { opacity: .55; }
.place.label b { font: 700 14px var(--caps); letter-spacing: .3em; text-transform: uppercase; color: #c9bba0; }
.place.label i { display: none; }
.map-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #07090cf2 0%, #07090cb0 32%, transparent 60%), linear-gradient(0deg, #07090c 0%, transparent 18%), linear-gradient(180deg, #07090c 0%, transparent 16%); }
.journey-text { position: absolute; z-index: 2; left: clamp(18px, 7vw, 120px); top: 50%; transform: translateY(-50%); width: min(470px, 86vw); }
.stages { position: relative; min-height: 220px; }
.stage { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stage.on { opacity: 1; transform: none; }
.stage .n { font: 800 13px var(--caps); letter-spacing: .25em; color: var(--verdigris-light); }
.stage h3 { margin: 6px 0 10px; font-size: clamp(28px, 3vw, 38px); color: var(--gold); }
.stage p { margin: 0; color: #e2d8c4; }
.journey-bar { width: 100%; height: 2px; margin-top: 26px; background: #ffffff1a; }
.journey-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--bronze), var(--verdigris-light)); }

/* ---------------------------------------------------------------- the realms */
.realms { --p: 0; position: relative; overflow: hidden; padding-bottom: 60px; }
.realms-head { padding-bottom: 50px; }
.realm-split { display: grid; grid-template-columns: 1fr minmax(220px, 300px) 1fr; align-items: stretch; width: min(1300px, 96vw); margin: 0 auto; }
.realm { position: relative; padding: clamp(30px, 4vw, 52px); min-height: 440px; overflow: hidden; transition: transform .2s linear; }
.realm .sign { width: 110px; height: 110px; margin-bottom: 18px; filter: drop-shadow(0 8px 20px #000a); }
.realm h3 { font-size: clamp(32px, 3.4vw, 44px); }
.realm p:not(.kicker) { margin: 0; color: #e6dccb; }
.realm.raven { background: linear-gradient(135deg, #12324a 0%, #0c1824 70%); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  transform: translateX(calc((1 - min(1, var(--p) * 2.4)) * -60%)); opacity: min(1, calc(var(--p) * 3)); }
.realm.raven .kicker { color: #8fcdf0; }
.realm.wolf { background: linear-gradient(225deg, #4a1810 0%, #1e0c09 70%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); text-align: right;
  transform: translateX(calc((1 - min(1, var(--p) * 2.4)) * 60%)); opacity: min(1, calc(var(--p) * 3)); }
.realm.wolf .sign { margin-left: auto; }
.realm.wolf .kicker { color: #f0a088; }
.realm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 30% 0%, #ffffff12, transparent 60%); }
.truce { position: relative; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px 10px; text-align: center;
  opacity: clamp(0, calc((var(--p) - .25) * 4), 1); transform: scale(calc(.8 + min(1, var(--p) * 2) * .2)); }
.truce-line { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--bronze), transparent); }
.truce-seal { position: relative; display: grid; place-items: center; width: 110px; height: 110px; background: #0d1015; border: 1px solid var(--bronze); transform: rotate(45deg); box-shadow: 0 0 0 6px #0a0c10, 0 0 0 7px #b98b4e55, 0 0 40px #e8c58633; }
.truce-seal img { width: 70px; transform: rotate(-45deg); filter: drop-shadow(0 3px 8px #000c); }
.truce p { position: relative; margin: 14px 0 0; padding: 12px; background: #0a0c10; font-size: 15px; color: #d9cfbbcc; }
.truce b { display: block; margin-bottom: 4px; font: 900 24px var(--display); color: var(--gold); }

/* ---------------------------------------------------------------- impressions */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.shot { position: relative; margin: 0; overflow: hidden; background: #000; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.shot.big { grid-column: span 2; grid-row: span 2; }
.shot img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.92); }
.shot:hover img { transform: scale(1.05); filter: saturate(1.05); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; background: linear-gradient(transparent, #07090ce6); font-size: 15px; color: #d9cfbbd8; }
.shot figcaption b { display: block; font: 900 24px var(--display); color: var(--gold); }
.facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 46px 0 0; }
.facts li { padding: 10px 18px; border: 1px solid #b98b4e55; background: #0e1116; font: 600 16px var(--body); color: var(--muted);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.facts b { margin-right: 4px; font: 900 24px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- classes */
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.class-card { --c: #b98b4e; position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: linear-gradient(180deg, #14181f, #0f1217);
  border: 1px solid #b98b4e33; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: border-color .3s, transform .4s var(--ease); }
.class-card:hover { border-color: var(--c); transform: translateY(-4px); }
.class-card.mage { --c: #6f8cff; } .class-card.ninja { --c: #a46bd6; } .class-card.priest { --c: #f2d27a; } .class-card.hunter { --c: #7fae5a; } .class-card.demon { --c: #d24a4a; }
.class-portrait { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 12%;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); transition: transform 1.2s var(--ease); }
.class-card:hover .class-portrait { transform: scale(1.04); }
.class-body { position: relative; padding: 0 24px 22px; margin-top: -30px; }
.class-body .kicker { margin: 0 0 2px; color: var(--c); }
.class-body h3 { margin: 0 0 6px; font: 900 30px var(--display); color: var(--parchment); }
.class-body p { margin: 0 0 12px; color: #d9cfbbd0; font-size: 16px; }
.trees { display: flex; gap: 8px; flex-wrap: wrap; }
.trees span { padding: 3px 10px; font: 700 12px var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.class-skills { list-style: none; display: flex; gap: 8px; margin: 4px 0 0; padding: 0; }
.class-skills img { display: block; width: 40px; height: 40px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bronze-dark); }
.class-note { margin: 26px 0 0; text-align: center; color: var(--muted); font-style: italic; }
.shots.two { grid-template-columns: 1fr 1fr; }
.shots.two .shot img { min-height: 360px; }

/* ---------------------------------------------------------------- day and night (pinned) */
.daynight { height: 260vh; }
.dn-images { position: absolute; inset: 0; }
.dn-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 - var(--p, 0) * .06)); }
.dn-images .night { opacity: clamp(0, calc((var(--p, 0) - .4) * 7), 1); }
.dn-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #07090cf0 0%, #07090cb8 34%, transparent 70%), linear-gradient(0deg, var(--ink), transparent 25%), linear-gradient(180deg, var(--ink), transparent 20%); }
/* the sky over it: the sun sinks with its turning corona, the land blushes at dusk, the moon rises with its halo, the stars come out */
.dn-dusk { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color;
  background: linear-gradient(180deg, #ff8a3d 0%, #d4572a 40%, #6b2a4a 75%, transparent 100%);
  opacity: clamp(0, calc(.38 - abs(var(--p, 0) - .4) * 2.2), .38); }
.dn-stars { position: absolute; inset: 0 0 45% 0; pointer-events: none; opacity: clamp(0, calc((var(--p, 0) - .5) * 2.5), 1);
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 8%, #fff, transparent), radial-gradient(1.6px 1.6px at 41% 26%, #dfe8ff, transparent),
    radial-gradient(1px 1px at 55% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 63% 30%, #fff, transparent), radial-gradient(1px 1px at 71% 6%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 86% 22%, #fff, transparent), radial-gradient(1px 1px at 93% 9%, #fff, transparent), radial-gradient(1.2px 1.2px at 35% 40%, #fff, transparent),
    radial-gradient(1px 1px at 18% 36%, #e6ecff, transparent), radial-gradient(1.2px 1.2px at 79% 40%, #fff, transparent), radial-gradient(1px 1px at 48% 4%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { filter: brightness(.75); } to { filter: brightness(1.25); } }
.dn-sky { position: absolute; right: 10vw; top: 18vh; width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; pointer-events: none; }
.dn-sky i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%;
  transform: rotate(calc(10deg + var(--p, 0) * 130deg)) translateY(-170px); }
.dn-sky .sun { background: radial-gradient(circle, #fffbe8 0 30%, #ffe08a 52%, #ffb347 64%, transparent 72%);
  box-shadow: 0 0 60px 20px #ffd27a88, 0 0 160px 70px #ff9a4a33;
  filter: hue-rotate(calc(var(--p, 0) * -30deg)) saturate(calc(1 + var(--p, 0)));
  opacity: clamp(0, calc(1 - (var(--p, 0) - .25) * 2.6), 1); }
/* the corona: soft rays turning slowly */
.dn-sky .sun b { position: absolute; inset: -46px; border-radius: 50%; animation: spin 40s linear infinite;
  background: repeating-conic-gradient(from 0deg, #ffe7a855 0 4deg, transparent 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 42%, transparent 72%); mask-image: radial-gradient(circle, transparent 38%, #000 42%, transparent 72%); }
.dn-sky .moon { background: radial-gradient(circle at 36% 34%, #fbf8ee 0 40%, #dfe3ea 58%, #b9c3d4 66%, transparent 71%);
  box-shadow: 0 0 40px 10px #c9d8ff55, 0 0 140px 60px #7f9cff22;
  transform: rotate(calc(-110deg + var(--p, 0) * 130deg)) translateY(-170px); opacity: clamp(0, calc((var(--p, 0) - .4) * 3), 1); }
/* its seas and craters, and a halo breathing round it */
.dn-sky .moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #9aa6ba88 0 9%, transparent 11%), radial-gradient(circle at 38% 62%, #9aa6ba77 0 13%, transparent 15%),
    radial-gradient(circle at 66% 68%, #a9b3c566 0 6%, transparent 8%), radial-gradient(circle at 30% 30%, #b3bccc55 0 5%, transparent 7%); }
.dn-sky .moon b { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, transparent 46%, #cddcff30 56%, transparent 72%); animation: breathe 6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .6; } }
.dn-text { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; padding: 0 0 0 clamp(18px, 7vw, 120px); width: auto; margin: 0; }
.dn-block { grid-area: 1 / 1; max-width: 520px; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.dn-block p:not(.kicker) { color: #e6dccb; text-shadow: 0 2px 8px #000; }
.daynight .night-text { opacity: 0; transform: translateY(24px); }
.daynight.is-night .day-text { opacity: 0; transform: translateY(-24px); }
.daynight.is-night .night-text { opacity: 1; transform: none; }
.daynight.is-night .night-text .kicker { color: #9ab8ff; }

/* ---------------------------------------------------------------- the crypt */
.crypt { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; }
.crypt-bg { position: absolute; inset: -12% 0; }
.crypt-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.crypt-shade { position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 50%, #6a1f1633, transparent 70%), linear-gradient(90deg, #07090cf2 0%, #07090cc0 40%, #07090c33 75%), linear-gradient(0deg, var(--ink), transparent 25%), linear-gradient(180deg, var(--ink), transparent 25%); }
.crypt-text { position: relative; z-index: 2; }
.crypt-text > p:not(.kicker) { max-width: 560px; color: #e6dccb; }
.crypt .kicker { color: #f0a088; }
.crypt .facts { justify-content: flex-start; }

/* ---------------------------------------------------------------- what comes */
.housing { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; margin: 40px 0 70px; padding: 34px 38px; border: 1px solid #4fb8a144;
  background: radial-gradient(90% 120% at 0% 50%, #4fb8a11a, transparent 60%), #0e1116; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.housing p:not(.kicker) { margin: 0; color: #e2d8c4; }
.housing-art svg { width: 100%; }
.housing-art path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s var(--ease); }
.housing.in .housing-art path { stroke-dashoffset: 0; }
.housing-art .b2 { transition-delay: .3s; } .housing-art .b3 { transition-delay: .5s; } .housing-art .b4 { transition-delay: .7s; } .housing-art .b6 { transition-delay: 1s; }
.housing-art rect { opacity: 0; transition: opacity .6s, transform .6s; }
.housing.in .housing-art rect { opacity: 1; animation: float 3s ease-in-out infinite; }
.housing-art .r2 { animation-delay: .6s !important; } .housing-art .r3 { animation-delay: 1.2s !important; }
@keyframes float { 50% { translate: 0 -6px; } }
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; gap: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: #ffffff14; }
.timeline::after { content: ""; position: absolute; left: 11px; top: 6px; width: 2px; height: calc(min(1, var(--p, 0) * 1.6) * (100% - 12px)); background: linear-gradient(var(--verdigris-light), var(--bronze)); box-shadow: 0 0 12px var(--verdigris); }
.timeline li { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
.timeline li::before { content: ""; position: absolute; left: -35px; top: 8px; width: 12px; height: 12px; background: #0a0c10; border: 2px solid var(--bronze); transform: rotate(45deg); }
.timeline li.done::before { background: var(--verdigris-light); border-color: var(--verdigris-light); box-shadow: 0 0 12px var(--verdigris); }
.timeline li.next::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px #e8c586; }
.timeline .when { font: 800 15px var(--caps); letter-spacing: .12em; color: var(--bronze-light); padding-top: 3px; }
.timeline li.next .when { color: var(--gold); }
.timeline p { margin: 0; color: #d9cfbbd0; }

/* ---------------------------------------------------------------- the project */
.project { position: relative; background: radial-gradient(60% 80% at 15% 50%, #b98b4e14, transparent 70%), linear-gradient(180deg, transparent, #0d1015 30%, #0d1015 70%, transparent); }
.project-inner { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.maker { position: sticky; top: 120px; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 34px 20px; border: 1px solid #b98b4e44; background: #0b0d11;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.maker-sign { width: 120px; height: 120px; margin-bottom: 10px; }
.maker-sign img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px #000c); }
.maker-name { margin: 0; font: 900 40px/1 var(--display); color: var(--gold); }
.maker-role { margin: 6px 0 0; font: 700 14px var(--caps); letter-spacing: .1em; color: var(--muted); }
.story p:not(.kicker) { color: #e2d8c4; font-size: 19px; }
.signature { font: 900 30px var(--display) !important; color: var(--bronze-light) !important; }

/* ---------------------------------------------------------------- support */
.support-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.support-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 34px 32px 30px; border: 1px solid #2c323d; background: #10131a;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.support-card h3 { font-size: 32px; }
.support-card p { margin: 0; color: #d9cfbbd8; }
.support-card p b { color: var(--gold); }
.support-card .small { font-size: 15px; color: var(--muted); }
.support-card .btn { justify-self: start; margin-top: 8px; }
.support-card .soon { justify-self: start; padding: 4px 10px; font: 800 12px var(--caps); letter-spacing: .14em; text-transform: uppercase; }
.kickstarter { border-color: #4fb8a155; background: radial-gradient(100% 80% at 100% 0%, #4fb8a11e, transparent 60%), #10131a; }
.kickstarter .soon { background: #4fb8a122; color: var(--verdigris-light); }
.discord { border-color: #6c7bd955; background: radial-gradient(100% 80% at 100% 0%, #6c7bd91c, transparent 60%), #10131a; }
.discord .soon { background: #6c7bd922; color: #b4bdf5; }

/* ---------------------------------------------------------------- ask for access */
.access { position: relative; background: radial-gradient(70% 60% at 80% 40%, #4fb8a114, transparent 70%); }
.access::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 80vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.access-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; padding-bottom: 120px; }
.access-text p:not(.kicker) { color: #e2d8c4; }
.steps { list-style: none; counter-reset: s; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; color: #d9cfbbd0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--bronze); transform: rotate(45deg) scale(.82); }
.steps li::after { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; font: 900 18px var(--display); color: var(--gold); }
.steps b { display: block; font: 700 20px var(--display); color: var(--parchment); }
.access-form { position: relative; display: grid; gap: 14px; padding: 34px 32px; border: 1px solid #b98b4e66; background: linear-gradient(180deg, #181c25, #0f1217);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: 0 30px 60px #000a; }
.field { display: grid; gap: 6px; }
.field > span { font: 800 14px var(--caps); letter-spacing: .1em; color: var(--bronze-light); }
.field em { font: 500 13px var(--body); letter-spacing: 0; color: var(--muted); }
.field small, .access-form .hint { margin-top: -6px; font-size: 13px; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid #39404d; background: #0a0c10; color: var(--parchment); font: 17px var(--body); outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--verdigris); box-shadow: 0 0 0 3px #4fb8a126; }
.field input.bad { border-color: #d8545a; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #d9cfbbcc; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--verdigris); flex: none; }
.form-error { margin: 0; min-height: 1.4em; color: #f08a80; font-size: 15px; }
.access-form .btn { justify-self: start; }
.form-done { position: absolute; inset: 0; display: grid; align-content: center; gap: 10px; padding: 40px; text-align: center; background: linear-gradient(180deg, #16201f, #0d1413); animation: rise .8s var(--ease) both; }
.form-done[hidden] { display: none; }
.form-done h3 { color: var(--verdigris-light); }
.form-done a { color: var(--verdigris-light); }

/* ---------------------------------------------------------------- footer */
footer { border-top: 1px solid #b98b4e33; background: #07090c; }
.foot-inner { width: min(1180px, 92vw); margin: 0 auto; padding: 50px 0 40px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.foot-logo { width: 200px; height: auto; opacity: .9; }
footer p { margin: 0; color: var(--muted); font-size: 15px; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font: 700 14px var(--caps); letter-spacing: .1em; }
footer nav a { text-decoration: none; color: #d9cfbbaa; }
footer nav a:hover { color: var(--verdigris-light); }
footer .credits { font-size: 13px; color: #6f685c; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 980px) {
  .links { display: none; }
  .nav-cta { margin-left: auto; }
  .classes { grid-template-columns: 1fr 1fr; }
  .pillars, .support-cards, .access-inner, .project-inner { grid-template-columns: 1fr; }
  .maker { position: static; }
  .realm-split { grid-template-columns: 1fr; }
  .realm.raven, .realm.wolf { clip-path: none; text-align: left; min-height: 0; }
  .realm.wolf .sign { margin-left: 0; }
  .truce { padding: 30px 10px; }
  .truce-line { display: none; }
  .housing { grid-template-columns: 1fr; }
  .housing-art { max-width: 260px; }
}
@media (max-width: 820px) {
  .hero-shade { background: linear-gradient(0deg, #07090cf8 0%, #07090cc8 55%, #07090c60 100%); }
  .hero { align-items: end; }
  .hero-text { padding-bottom: 90px; }
  .lead { font-size: 18px; }
  .tagline { font-size: 13px; letter-spacing: .35em; }
  .live-caption, .scroll-cue span { display: none; }
  .journey { height: 420vh; }
  .map { width: max(260vw, 190vh); }
  .alpha-chip { font-size: 12px; }
  .map-fade { background: linear-gradient(0deg, #07090cf5 0%, #07090cc0 40%, transparent 70%), linear-gradient(180deg, #07090c 0%, transparent 16%); }
  .journey-text { top: auto; bottom: 8vh; transform: none; }
  .stages { min-height: 200px; }
  .shots, .shots.two { grid-template-columns: 1fr; }
  .classes { grid-template-columns: 1fr; }
  .shot.big { grid-column: auto; grid-row: auto; }
  .dn-sky { right: 6vw; top: 10vh; }
  .dn-text { align-content: end; padding-bottom: 12vh; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .pair { grid-template-columns: 1fr; }
  .nav-cta .ghost { display: none; }
  .nav-cta { gap: 8px; }
}
@media (max-width: 480px) {
  .nav-cta .btn.primary { padding: 0 12px; letter-spacing: .04em; }
  .btn.lang-btn { padding: 0 9px; }
  .btn.lang-btn svg { display: none; }
}
@media (max-width: 480px) {
  .mark img { height: 46px; margin: -4px 0; }
}
@media (max-width: 400px) {
  .nav-cta .btn.primary { padding: 0 10px; font-size: 12px; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- calm */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ================================================================ "Nordisch" – as in the game
   The bought "UI-KIT Fantasy-Nordic GUI" (img/nordic, made with the game's by tools/ui/nordic_build.py):
   its frames with knotwork corners round every card and box, its plates for buttons, its thin bronze
   lines thinning to points, the faint knot pattern on near-black, Vollkorn for the words. The page's
   layout and motion stay as they are. */
:root {
  --bronze: #b48a55; --bronze-light: #e3c08a; --bronze-dark: #5c4325; --gold: #ead2a4; --parchment: #ece3d0; --text: #d8cebb;
  --amber: #f2b45c;
  --display: "Vollkorn", Georgia, serif; --body: "Vollkorn", Georgia, serif;
  --panel: linear-gradient(180deg, #0a0b0dd6 0%, #0a0b0d 30%, #0a0b0d 70%, #0a0b0dd0 100%), url("img/nordic/pattern.webp") 0 0 / 52px, #0a0b0d;
  --frame: url("img/nordic/frame.webp") 100 / 42px / 2px round;
}
body { font-size: 18px; }
h2 { font-weight: 700; letter-spacing: .005em; color: var(--gold); }
h3 { font-weight: 600; }

/* buttons: the kit's plates – the main one with its teal diamonds; pointed at in amber */
.btn { border: 0 solid transparent; border-radius: 0; clip-path: none; background: none; box-shadow: none; color: #e2d5bb;
  font: 600 16px var(--display); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 2px #000;
  border-image: url("img/nordic/button.webp") 50 120 fill / 13px 30px; }
.btn::after { display: none; }
.btn:hover { filter: brightness(1.15); transform: none; color: #f8e3b6; text-shadow: 0 0 12px #f2a94a, 0 1px 2px #000; }
.btn.primary { color: #f6ead0; padding: 0 40px; background: none; box-shadow: none; border-image: url("img/nordic/button-primary.webp") 70 150 fill / 16px 36px; }
.btn.ghost, .btn.lang-btn { background: none; border-image: url("img/nordic/button-alt.webp") 50 120 fill / 11px 26px; }
.btn.small { min-height: 40px; padding: 0 22px; font-size: 14px; border-image-width: 10px 24px; }
.btn.primary.small { padding: 0 30px; border-image-width: 12px 28px; }
.btn.big { min-height: 58px; padding: 0 46px; font-size: 17px; border-image-width: 16px 38px; }
.btn.discord-btn { padding: 0; border: 0; clip-path: none; border-image: none; border-radius: 2px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #b48a5566; }

/* the bar on top: night with the kit's line under it; links pointed at in amber */
.top.solid { background: #08090bf2; box-shadow: 0 10px 30px #0009; }
.top.solid::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; pointer-events: none;
  background: url("img/nordic/nav-line.webp") center / 100% 100% no-repeat; }
.links a { font-family: var(--display); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.links a::after { height: 2px; background: url("img/nordic/divider.webp") center / 100% 100% no-repeat; }
.links a:hover { color: var(--amber); text-shadow: 0 0 10px #f2a94a77; }
.lang-list { background: var(--panel); border: 0 solid transparent; border-image: url("img/nordic/frame.webp") 100 / 26px / 1px round; }
.lang-list li { font-family: var(--display); }
.lang-list li:hover { background: url("img/nordic/tab-glow.webp") center / 140% 260% no-repeat; color: var(--amber); }
.lang-list li[aria-selected="true"] { background: #f2b45c18; color: var(--amber); }

/* every card and box: the kit's panel in its frame */
.pillar, .class-card, .housing, .maker, .support-card, .access-form, .kickstarter, .discord {
  border: 0 solid transparent; border-radius: 0; clip-path: none; background: var(--panel); box-shadow: 0 24px 60px #000b; border-image: var(--frame); }
.pillar::before { display: none; }
.pillar:hover, .class-card:hover { border-color: transparent; filter: brightness(1.08); }
.class-card { --c: #e3c08a; }
.class-skills img { box-shadow: 0 0 0 1px #000, 0 0 0 2px #b48a5599; }
.shot { clip-path: none; border: 0 solid transparent; border-image: url("img/nordic/frame.webp") 100 / 34px / 2px round; overflow: visible; }
.shot img { display: block; }
.truce-seal { border-color: var(--bronze); box-shadow: 0 0 0 6px #0a0b0d, 0 0 0 7px #b48a5566, 0 0 40px #e3c08a22; }

/* lines: the kit's bronze, thinning to points */
.alpha::before { height: 6px; background: url("img/nordic/divider.webp") center / 100% 100% no-repeat; }
.tagline i, .tagline i:last-child { height: 4px; background: url("img/nordic/divider.webp") center / 200% 100% no-repeat; }
.tagline i:first-child { background-position: right center; }
.tagline i:last-child { background-position: left center; }

/* the form: quiet dark fields in a bronze line, amber when written in */
.access-form input, .access-form textarea, .access-form select { border-radius: 0; border-color: #b48a5566; background: #060708; font-family: var(--display); }
.access-form input:focus, .access-form textarea:focus { border-color: var(--amber); box-shadow: 0 0 12px #f2a94a44; outline: none; }

/* scroll bar: the kit's diamond on its thin track */
html { scrollbar-color: #b48a55 #08090b; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #08090b url("img/nordic/scroll-track.webp") center / 4px 100% no-repeat; }
::-webkit-scrollbar-thumb { background: url("img/nordic/scroll-thumb.webp") center / contain no-repeat; min-height: 48px; }
::selection { background: #f2b45c55; }