/* Nidavellir page. Norse forge look, for this page only. It does not use the
   site's skin tokens. --tier is set from script to the current flame colour. */
:root{
  --bg:#0a0806; --panel:#120e0b; --panel2:#181310; --line:#2a211b; --line2:#3a2d24;
  --fg:#efe3d0; --mut:#9a8b7a; --bronze:#b8792f;
  --tier:255,138,31;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);line-height:1.6}
a{color:rgb(var(--tier));text-underline-offset:3px}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid rgb(var(--tier));outline-offset:3px;border-radius:3px}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px}
.top .back{color:var(--mut);text-decoration:none}
.top .back:hover{color:var(--fg)}
.rune-mark{color:var(--bronze);letter-spacing:.32em;text-transform:uppercase;font-size:11.5px}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px 40px}

.hero{padding:56px 0 30px}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--tier));margin:0 0 14px}
h1{font-size:clamp(54px,11vw,118px);line-height:.95;margin:0 0 20px;font-weight:600;letter-spacing:.01em;
  text-shadow:0 0 44px rgba(var(--tier),.38)}
.dek{max-width:54ch;font-size:clamp(18px,2.1vw,21px);color:#d9cbb5;margin:0}

/* scene */
.stage{position:relative;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#05060a;
  aspect-ratio:16/9;box-shadow:0 0 0 1px #000,0 30px 80px -30px rgba(var(--tier),.3)}
.scene-plates{position:absolute;inset:0}
/* The plates are one camera at five heat levels, so they cross-dissolve in
   place. A higher plate sits above a lower one and fades in over it. */
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .9s ease}
.scene-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
/* A slow drift keeps a still frame from reading as a dead screenshot. */
.scene-plates{animation:forge-drift 34s ease-in-out infinite}
@keyframes forge-drift{
  0%{transform:scale(1.035) translate3d(0,0,0)}
  50%{transform:scale(1.055) translate3d(-0.9%,-0.7%,0)}
  100%{transform:scale(1.035) translate3d(0,0,0)}
}
.stage::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
  background:radial-gradient(ellipse at 50% 56%,transparent 42%,rgba(0,0,0,.5) 100%)}
.stage:not(.ready){background:#05060a}
.ns{padding:24px;color:var(--mut)}
.preview-badge{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(10,8,6,.82);border:1px solid rgb(var(--tier));color:rgb(var(--tier));
  padding:5px 10px;border-radius:3px}

/* meter */
.meter{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px 24px}
.m-main{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:28px;align-items:end}
.m-label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.m-tier strong{font-size:clamp(26px,4vw,36px);font-weight:600;color:rgb(var(--tier));line-height:1.1;display:block}
.m-num{font-size:clamp(34px,5vw,48px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.m-num small{font-size:16px;color:var(--mut);font-weight:400;margin-left:8px;font-family:var(--mono)}
.bar{margin-top:12px;height:10px;background:#0a0705;border:1px solid var(--line2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(var(--tier),.55),rgb(var(--tier)));
  box-shadow:0 0 14px rgba(var(--tier),.6);transition:width .9s ease,background .6s ease}
.m-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.m-facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.m-facts dd{margin:0;font-size:17px}
.m-note{margin:18px 0 0;font-size:17px;color:#d9cbb5}
.m-snap{margin:8px 0 0;font-family:var(--mono);font-size:12px;color:var(--mut)}

/* level chips */
.legend{margin-top:18px}
.legend-h{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--panel);color:var(--fg);border:1px solid var(--line2);
  border-radius:99px;padding:8px 14px;font-family:var(--serif);font-size:15px;cursor:pointer}
.chip i{width:11px;height:11px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgba(var(--c),.7)}
.chip small{font-family:var(--mono);font-size:11px;color:var(--mut)}
.chip:hover{border-color:var(--bronze)}
.chip[aria-pressed="true"]{border-color:rgb(var(--tier));background:var(--panel2);box-shadow:0 0 0 1px rgb(var(--tier)) inset}
.chip.live{margin-left:auto;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* essay */
.essay{max-width:66ch;margin:0 auto;padding:10px 0 20px}
.divider{height:22px;margin:38px 0 26px;background:
  repeating-linear-gradient(90deg,transparent 0 10px,var(--line2) 10px 12px,transparent 12px 22px),
  linear-gradient(var(--line2),var(--line2)) center/100% 1px no-repeat;opacity:.9}
.essay h2{font-size:clamp(28px,4vw,36px);line-height:1.15;margin:44px 0 16px;font-weight:600;text-wrap:balance}
.essay h3{font-size:21px;margin:30px 0 10px;color:var(--bronze);font-weight:600}
.essay p{font-size:18.5px;margin:0 0 20px}
.essay .lede{font-size:21px;color:#e6d9c3}
.crew{margin:0 0 12px;border-top:1px solid var(--line)}
.crew div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.crew dt{font-size:22px;font-weight:600;color:rgb(var(--tier))}
.crew dd{margin:0;font-size:17.5px;color:#d9cbb5}

.foot{max-width:1040px;margin:30px auto 0;padding:26px 24px 60px;border-top:1px solid var(--line);font-size:16px;color:var(--mut)}
.foot p{margin:0 0 8px}
.foot-small{font-family:var(--mono);font-size:12.5px}

@media (max-width:640px){
  .top{padding:14px 16px}
  .wrap{padding:0 16px 30px}
  .hero{padding:36px 0 22px}
  .m-main{grid-template-columns:1fr;gap:18px}
  .m-facts{grid-template-columns:1fr 1fr}
  .m-facts div:last-child{grid-column:1 / -1}
  .crew div{grid-template-columns:1fr;gap:4px}
  .chip.live{margin-left:0}
  .foot{padding:22px 16px 50px}
}
@media (prefers-reduced-motion:reduce){
  .bar i,.plate{transition:none}
  .scene-plates{animation:none;transform:scale(1.02)}
}