/* DRAUPNIR ·  the ring that begets gold */
:root{
  --ink:#04070f;
  --deep:#070c1c;
  --navy:#0d1730;
  --stone:#1b2646;
  --stone-2:#2a3760;
  --line:rgba(120,152,214,.20);
  --line-2:rgba(120,152,214,.34);
  --cy:#4fd8ff;
  --cy-dim:#2e7fa6;
  --gold:#f0a92a;
  --gold-lt:#ffd67a;
  --gold-hi:#fff3c4;
  --gold-dk:#8a5410;
  --text:#dbe6f6;
  --muted:#8ea4c6;
  --faint:#61759a;
  --col: 620px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"EB Garamond",Georgia,serif;
  font-size:clamp(17px,1.05vw,19px);
  line-height:1.66;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(240,169,42,.30);color:#fff}

/* ---------------------------------------------------------------- the sky */
#sky{
  position:fixed;
  inset:0;
  width:100%;          /* explicit: a canvas will not stretch from inset alone */
  height:100%;
  display:block;
  z-index:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#skyfallback{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 70% at 50% 0%, #16224f 0%, #0a1330 42%, #04070f 100%);
  opacity:1;transition:opacity .8s ease;
}
body.gl #skyfallback{opacity:0}
/* a corner wash, opaque on the reading side, transparent where the scene lives */
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(94deg, rgba(4,7,15,.94) 0%, rgba(4,7,15,.80) 26%, rgba(4,7,15,.34) 48%, rgba(4,7,15,0) 68%),
    linear-gradient(0deg, rgba(4,7,15, calc(.42 + .26 * var(--wash,0))) 0%, rgba(4,7,15,0) 38%);
}
@media (max-width:900px){
  #grain{
    background:
      linear-gradient(180deg,
        rgba(4,7,15, calc(.30 + .46 * var(--wash,0))) 0%,
        rgba(4,7,15, calc(.60 + .32 * var(--wash,0))) 38%,
        rgba(4,7,15, calc(.72 + .24 * var(--wash,0))) 100%);
  }
}

/* ------------------------------------------------------- the hall gauge */
#gauge{
  position:fixed;
  right:clamp(14px,2.2vw,34px);
  top:0;height:100svh;
  z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  pointer-events:none;
}
.gauge-cap,.gauge-read{
  font-family:"Cinzel",serif;font-size:10px;letter-spacing:.30em;
  color:var(--faint);white-space:nowrap;
}
.gauge-read{color:var(--gold-lt);font-size:12px;letter-spacing:.18em}
.gauge-track{
  position:relative;
  width:10px;height:min(52svh,440px);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(120,152,214,.05),rgba(120,152,214,.10));
}
.gauge-fill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 22%,var(--gold-dk));
  box-shadow:0 0 16px rgba(240,169,42,.55),0 -1px 0 var(--gold-hi);
  transition:height .18s linear;
}
.gauge-notches{position:absolute;inset:0;pointer-events:none}
.gnotch{
  position:absolute;right:-10px;width:32px;height:34px;
  transform:translateY(17px);
  background:none;border:0;padding:0;
  pointer-events:auto;cursor:pointer;
}
.gnotch::before{
  content:"";position:absolute;right:8px;top:16px;width:14px;height:1px;
  background:var(--line-2);transition:width .2s ease,background .2s ease,box-shadow .2s ease;
}
.gnotch::after{
  content:attr(data-label);
  position:absolute;right:32px;top:8px;
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.14em;
  color:var(--muted);white-space:nowrap;
  opacity:0;transform:translateX(6px);
  transition:opacity .22s ease,transform .22s ease;
  text-shadow:0 2px 14px #04070f,0 0 24px #04070f;
}
.gnotch:hover::after,.gnotch.on::after{opacity:1;transform:translateX(0)}
.gnotch.on::before{background:var(--gold-lt);width:20px;box-shadow:0 0 10px rgba(255,214,122,.7)}
.gnotch:hover::before{background:var(--muted);width:18px}
.gnotch.on::after{color:var(--gold-lt)}

/* ---------------------------------------------------------------- layout */
main{position:relative;z-index:3}
.scene{
  min-height:100svh;
  display:flex;align-items:center;
  padding:14svh clamp(20px,7vw,120px) 14svh;
  padding-right:clamp(58px,10vw,150px);
}
.col{
  width:min(var(--col),100%);
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,.7,.2,1),transform .9s cubic-bezier(.22,.7,.2,1);
}
.scene.in .col{opacity:1;transform:none}
.scene p+p{margin-top:1.05em}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:2vh;width:min(720px,100%)}
.eyebrow{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.42em;
  color:var(--cy-dim);margin-bottom:1.6rem;
}
.wordmark{
  font-family:"Cinzel",serif;font-weight:600;
  font-size:clamp(2.5rem,5.5vw,5.1rem);
  line-height:1.0;
  width:max-content;max-width:100%;
  letter-spacing:.20em;text-indent:.20em;
  background:linear-gradient(178deg,#fff6d8 0%,var(--gold-lt) 44%,var(--gold) 78%,#c9871d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.8));
}
.lede{
  margin-top:1.6rem;font-size:1.24em;line-height:1.55;
  color:#e7eefb;max-width:30ch;
}
.sub{margin-top:1.5rem;color:var(--muted);max-width:38ch}
.runes{display:flex;gap:clamp(10px,1.5vw,20px);margin-top:2.1rem;align-items:flex-end}
.runes svg{width:clamp(15px,1.5vw,21px);height:auto;display:block;overflow:visible}
.runes polyline{fill:none;stroke:var(--cy);stroke-width:6;shape-rendering:crispEdges}
.rune{opacity:.16;transition:opacity .5s ease,filter .5s ease}
.rune.lit{opacity:1;filter:drop-shadow(0 0 7px rgba(79,216,255,.85))}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.3rem}
.btn{
  display:inline-block;
  font-family:"Cinzel",serif;font-size:12px;letter-spacing:.22em;
  color:#12100a;text-decoration:none;
  padding:14px 24px;min-height:44px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border:1px solid var(--gold-hi);
  box-shadow:0 8px 30px rgba(240,169,42,.20);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(240,169,42,.34);filter:brightness(1.06)}
.btn.ghost{
  background:none;color:var(--gold-lt);border:1px solid rgba(240,169,42,.42);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(240,169,42,.08);box-shadow:none}
.scrollcue{
  position:absolute;left:clamp(20px,7vw,120px);bottom:5svh;
  font-family:"Cinzel",serif;font-size:10px;letter-spacing:.30em;color:var(--faint);
}
.scrollcue::before{content:"";display:inline-block;width:34px;height:1px;background:var(--line-2);vertical-align:middle;margin-right:12px}

/* -------------------------------------------------------------- sections */
.num{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.34em;
  color:var(--gold);margin-bottom:1rem;
}
h2{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(1.44rem,2.5vw,2.15rem);
  letter-spacing:.06em;line-height:1.24;
  color:#f3f7ff;margin-bottom:1.5rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
}
h2 .dot{color:var(--gold);margin:0 .5em;font-size:.8em;vertical-align:.08em}
h2 em{
  font-family:"EB Garamond",serif;font-style:italic;font-weight:400;
  font-size:.72em;letter-spacing:0;color:var(--muted);
}
b{color:#fff;font-weight:500}
.pull{
  margin-top:1.6rem;padding-left:1.2rem;border-left:2px solid var(--gold);
  font-style:italic;font-size:1.16em;color:var(--gold-lt);
}

/* pile vs ring */
.twin{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);
  margin:2rem 0;
}
.twin figure{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,23,48,.62),rgba(4,7,15,.62));
  padding:20px;
}
.twin-b{border-color:rgba(240,169,42,.32)}
.pile,.ringfig{height:96px;background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.pile{
  background-image:linear-gradient(180deg,rgba(240,169,42,0) 34%,rgba(122,96,44,.9) 35%,rgba(78,60,26,.9) 100%);
  filter:grayscale(.55) brightness(.8);
  clip-path:polygon(0 100%,6% 74%,17% 62%,31% 55%,50% 52%,69% 55%,83% 62%,94% 74%,100% 100%);
}
.ringfig{background-image:url("../img/ring.png");background-position:center;filter:drop-shadow(0 0 22px rgba(240,169,42,.45))}
.twin figcaption{margin-top:14px;display:block;font-size:.94em;color:var(--muted)}
.twin figcaption b{display:block;font-family:"Cinzel",serif;font-size:.80em;letter-spacing:.12em;color:#eaf1ff;margin-bottom:.35em;text-transform:uppercase}

/* the oath */
.oath{list-style:none;margin:1.8rem 0;border-top:1px solid var(--line)}
.oath li{
  display:grid;grid-template-columns:28px 1fr;gap:0 14px;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--line);
  color:#cddcf2;
}
.oath span{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.16em;color:var(--gold);
}

/* forged vs printed */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:2rem 0;border:1px solid var(--line)}
.ledger-col{background:rgba(4,7,15,.72);padding:22px}
.ledger-col p{font-size:.98em;color:var(--muted)}
.ledger-col p+p{margin-top:.85em}
.lh{
  font-family:"Cinzel",serif!important;font-size:11px!important;letter-spacing:.22em;
  padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid var(--line);
}
.bad .lh{color:#8b93ad}
.bad p{opacity:.72}
.good .lh{color:var(--gold-lt)}
.good p{color:#cddcf2}
.good b{color:var(--gold-hi)}

/* the anvil (drip model) */
.anvil{
  margin:2rem 0 0;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,23,48,.70),rgba(4,7,15,.78));
  padding:clamp(18px,2.4vw,30px);
}
.dial{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 14px;margin-bottom:1.35rem}
.dial label{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.dial output{font-family:"Cinzel",serif;font-size:15px;letter-spacing:.06em;color:var(--gold-lt);text-align:right}
.dial input{grid-column:1/-1;width:100%;margin-top:6px}
input[type=range]{
  -webkit-appearance:none;appearance:none;height:34px;background:none;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(90deg,var(--gold-dk),var(--line-2));
}
input[type=range]::-moz-range-track{height:2px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;margin-top:-5.5px;border-radius:0;transform:rotate(45deg);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  box-shadow:0 0 12px rgba(240,169,42,.7);
}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border:0;border-radius:0;transform:rotate(45deg);
  background:var(--gold-lt);box-shadow:0 0 12px rgba(240,169,42,.7);
}
input[type=range]:focus-visible{outline:1px solid var(--gold-lt);outline-offset:6px}
.results{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:1.6rem;
}
.res{background:rgba(4,7,15,.80);padding:18px 16px}
.rk{font-family:"Cinzel",serif;font-size:10px;letter-spacing:.22em;color:var(--faint)}
.rv{
  font-family:"Cinzel",serif;font-size:clamp(1.15rem,2vw,1.6rem);
  color:#f2f7ff;margin:.5rem 0 .35rem;font-variant-numeric:tabular-nums;
}
.rv.gold{color:var(--gold-lt);text-shadow:0 0 26px rgba(240,169,42,.4)}
.rn{font-size:.86em;color:var(--faint);line-height:1.4}
.fineprint{margin-top:1.4rem;font-size:.88em;color:var(--faint);line-height:1.5}

/* the close */
.closing{font-size:1.2em;color:#e9f0fb}
.stamp{
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:"Cinzel",serif;font-size:13px;letter-spacing:.20em;line-height:2.1;
  color:var(--muted);
}
.stamp b{color:var(--gold-lt);font-weight:500}
footer{
  margin-top:3rem;padding:1.5rem 20px 20px;margin-left:-20px;margin-right:-20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,7,15,.72),rgba(4,7,15,.90));
  backdrop-filter:blur(2px);
}
footer p{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.24em;color:var(--faint)}
.warn{
  font-family:"EB Garamond",serif!important;letter-spacing:0!important;
  font-size:.86em!important;line-height:1.5;margin-top:.9rem;max-width:56ch;color:#5c6d8e;
}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .scene{padding-left:clamp(18px,5vw,40px);padding-right:clamp(46px,9vw,64px)}
  .twin,.ledger,.results{grid-template-columns:1fr}
  .results{gap:1px}
  .gauge-cap,.gauge-read{display:none}
  .gauge-track{width:6px;height:44svh}
  .gnotch::after{display:none}
  #grain{background:radial-gradient(150% 100% at 50% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%)}
}
@media (max-width:560px){
  .scene{min-height:auto;padding-block:11svh}
  .hero{width:100%}
  .anvil{padding:16px 14px}
  .dial output{font-size:14px}
  .scene:first-child{min-height:100svh}
  .lede{max-width:none}
  .runes{gap:9px}
  .runes svg{width:15px}
  .cta{gap:10px}
  .btn{padding:13px 18px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .col{opacity:1;transform:none;transition:none}
  .rune{opacity:.55}
}