/* THE HOARD v2 — a living cave. Full-bleed Veo video, a centred engraved title, and one wide wake-meter across the screen. */
:root{--bg:#050403;--bg2:#0c0a07;--bg3:#13100b;--line:rgba(233,176,74,.13);--line2:rgba(233,176,74,.32);--gold:#e9b04a;--gold2:#ffd98a;--ember:#ff6a2b;--red:#ff4433;--cream:#f4e9d4;--mute:#a2937a;--dim:#6a5f4d;
  --fx:'Cinzel Decorative',serif;--fd:'Cormorant Garamond',Georgia,serif;--fb:'Manrope',system-ui,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;--w:1240px;--pad:clamp(18px,3.4vw,48px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font:16px/1.65 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}em{font-style:italic;color:var(--gold)}

/* nav: centred, ornamental */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding:0 var(--pad);transition:background .3s}
.nav.solid{background:rgba(5,4,3,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand img{width:42px;height:42px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--line2),0 0 24px rgba(233,176,74,.3)}
.nav nav{display:flex;align-items:center;gap:22px}.nav nav a{text-decoration:none;font:600 15px var(--fd);letter-spacing:.22em;text-transform:uppercase;color:#cdbb98}.nav nav a:hover{color:var(--gold2)}
.nav nav span{font-size:7px;color:var(--gold);opacity:.6}
.xb{justify-self:end;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);color:var(--cream);background:rgba(5,4,3,.4)}.xb:hover{border-color:var(--gold);color:var(--gold)}

/* hero */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.bg.eye{opacity:0;transition:opacity .5s ease;object-position:70% 50%}
.hero.awake .bg.eye{opacity:1}
.veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 46%,rgba(5,4,3,0) 0%,rgba(5,4,3,.35) 60%,rgba(5,4,3,.85) 100%),linear-gradient(180deg,rgba(5,4,3,.75) 0%,rgba(5,4,3,0) 22%,rgba(5,4,3,0) 50%,rgba(5,4,3,.9) 86%,var(--bg) 100%)}
.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 60% 50%,rgba(255,120,40,.55),rgba(255,40,0,.15) 50%,transparent 75%);opacity:0;mix-blend-mode:screen}
.hero.awake .flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.center{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);z-index:2;text-align:center;padding:0 var(--pad)}
.over{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 10px;font:500 11.5px var(--fm);letter-spacing:.34em;color:var(--gold)}
.over .ln{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.over .ln:last-child{transform:scaleX(-1)}
.hero h1{margin:0;font:900 clamp(64px,10.5vw,168px)/.95 var(--fx);letter-spacing:.02em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff4d6 0%,#f4cf7c 38%,#c48a2c 62%,#7a4d13 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(233,140,40,.25))}
.tag{margin:10px 0 26px;font:500 clamp(24px,2.7vw,38px)/1.2 var(--fd);color:var(--cream);text-shadow:0 2px 20px #000}
.tag em{color:var(--gold2)}
.ca{display:inline-flex;align-items:stretch;border:1px solid var(--line2);background:rgba(8,6,4,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.ca .tk{display:flex;align-items:center;padding:0 16px 0 22px;font:600 12px var(--fm);letter-spacing:.14em;color:var(--gold)}
.ca code{display:flex;align-items:center;padding:14px 16px 14px 0;font:500 14.5px var(--fm);white-space:nowrap}
.ca button{border:0;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1d1206;font:600 12px var(--fm);letter-spacing:.18em;padding:0 22px;cursor:pointer}.ca button:hover{filter:brightness(1.07)}
.ca a{display:flex;align-items:center;padding:0 22px 0 18px;font:500 12px var(--fm);color:var(--mute);text-decoration:none}.ca a:hover{color:var(--cream)}

/* the wake meter */
.meter{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad) 34px}
.mlabels{display:flex;justify-content:space-between;align-items:flex-end;font:500 11px var(--fm);letter-spacing:.18em;color:var(--mute);margin-bottom:12px}
.mlabels b{color:var(--cream);font-weight:500;letter-spacing:.04em;margin-left:6px}.mlabels span:last-child b{color:var(--red)}
.mstate{font:600 15px var(--fd)!important;letter-spacing:.3em!important;color:var(--gold2)!important}
.track{position:relative;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(233,176,74,.55),rgba(255,106,43,.55) 70%,rgba(255,68,51,.9));box-shadow:0 0 20px rgba(255,106,43,.2)}
.track::after{content:"";position:absolute;right:-1px;top:-8px;bottom:-8px;width:2px;background:var(--red);box-shadow:0 0 12px var(--red)}
.heat{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,240,200,.65));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.mark{position:absolute;top:50%;left:0;transition:left 1.2s cubic-bezier(.2,.8,.2,1)}
.mark i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7da,var(--gold2) 40%,var(--gold));box-shadow:0 0 0 4px rgba(5,4,3,.7),0 0 22px var(--gold)}
.mark em{position:absolute;left:0;top:16px;font:500 11px var(--fm);font-style:normal;color:var(--cream);white-space:nowrap}
.readout{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:38px;font:500 13px var(--fm);color:var(--mute)}
.readout b{font:600 22px var(--fd);color:var(--cream);margin-right:6px;font-variant-numeric:lining-nums tabular-nums}.readout .dot{font-size:7px;color:var(--gold);align-self:center}
.hero.awake .mstate{color:var(--red)!important;text-shadow:0 0 18px rgba(255,68,51,.7)}
.hero.awake .mark i{background:radial-gradient(circle,#fff,var(--red));box-shadow:0 0 0 4px rgba(5,4,3,.7),0 0 30px var(--red)}

/* titles: centred with an ornament */
.sec{max-width:var(--w);margin:0 auto;padding:140px var(--pad) 30px}
.title{text-align:center;max-width:820px;margin:0 auto 48px}
.title .orn{display:block;width:180px;height:18px;margin:0 auto 18px;background:linear-gradient(var(--gold),var(--gold)) 0 50%/72px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 50%/72px 1px no-repeat;position:relative}
.title .orn::after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-size:11px;color:var(--gold)}
.title>p:first-of-type{font:500 11.5px var(--fm);letter-spacing:.3em;color:var(--gold);margin:0 0 12px}
h2{font:600 clamp(42px,5vw,74px)/1 var(--fd);margin:0 0 18px}
.sub{color:#c2b293;margin:0 auto;max-width:620px}
.title.left{text-align:left;margin:0 0 30px}.title.left .sub{margin:0}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}

/* chart */
.chartbox{position:relative;height:440px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:radial-gradient(80% 100% at 50% 120%,rgba(255,106,43,.09),transparent 60%)}
#chart{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:0;top:14px;display:flex;flex-wrap:wrap;gap:18px;font:500 11.5px var(--fm);color:var(--mute)}
.legend i{display:inline-block;width:18px;height:2px;margin-right:8px;vertical-align:middle}.lg{background:var(--gold)}.lr{background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 9px)}.lp{background:var(--cream)}.lw{width:9px!important;height:9px!important;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px var(--gold)}
.cempty{position:absolute;inset:0;display:grid;place-items:center;font:italic 500 24px var(--fd);color:var(--dim)}
.numbers{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;margin-top:8px}
.numbers div{padding:20px 6px}.numbers div+div{border-left:1px solid var(--line)}
.numbers span{display:block;font:500 10.5px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.numbers b{font:600 28px var(--fd);font-variant-numeric:lining-nums tabular-nums}

/* hoard: arched portrait + ledger */
.hoardsec{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 10px var(--bg),0 0 0 11px var(--line)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transform:scale(1.04)}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,4,3,.95) 4%,rgba(5,4,3,0) 45%)}
.archcap{position:absolute;z-index:1;left:0;right:0;bottom:30px;text-align:center}.archcap b{display:block;font:600 64px/1 var(--fd);color:var(--gold2)}.archcap span{font:500 12px var(--fm);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.hstats{display:flex;gap:50px;margin-bottom:28px}.hstats b{display:block;font:600 46px/1 var(--fd);color:var(--cream)}.hstats span{font:500 12px var(--fm);color:var(--mute)}
.wakes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.wakes li{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.wakes li.none{display:block;color:var(--mute);font:italic 500 20px var(--fd)}
.wakes .no{font:italic 600 30px var(--fd);color:var(--gold)}.wakes .what{font-size:15px}.wakes .what b{color:var(--red);font-weight:600}.wakes .what small{display:block;font:500 11.5px var(--fm);color:var(--dim)}
.wakes a{font:500 12px var(--fm);color:var(--gold);text-decoration:none}.wakes a:hover{text-decoration:underline}
.wallet{margin:20px 0 0;font:500 12.5px var(--fm);color:var(--mute)}.wallet a{color:var(--gold);word-break:break-all}

/* rules as an engraved row, log */
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.rules li{padding:10px 28px 0}.rules li+li{border-left:1px solid var(--line)}
.rules i{display:block;font:900 34px var(--fx);color:var(--gold);font-style:normal}.rules h4{font:600 28px/1.1 var(--fd);margin:14px 0 10px}.rules p{margin:0;color:#c2b293;font-size:14.5px}
.log{max-width:760px;margin:90px auto 0}.logt{text-align:center;font:500 11.5px var(--fm);letter-spacing:.3em;color:var(--gold);margin:0 0 20px}
.log ul{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.log li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);color:#d6c7aa;font-size:15px}
.log time{font:500 11.5px var(--fm);color:var(--dim);padding-top:3px}.log li.wake{color:var(--cream)}.log li.wake time{color:var(--red)}.log a{color:var(--gold)}

footer{max-width:var(--w);margin:140px auto 0;padding:0 var(--pad) 40px;text-align:center}
.fbig{font:900 clamp(40px,9vw,150px)/.9 var(--fx);white-space:nowrap;text-transform:uppercase;background:linear-gradient(180deg,#f4d58c,#8a5a18);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
.frow{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding-top:26px;margin-top:20px;border-top:1px solid var(--line);font:500 12.5px var(--fm);color:var(--mute)}.frow a{text-decoration:none}.frow a:hover{color:var(--gold)}#fca{cursor:pointer}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--gold);color:#1d1206;font:600 12px var(--fm);letter-spacing:.14em;padding:12px 20px;border-radius:10px;opacity:0;transition:.2s;z-index:120;pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){.hoardsec{grid-template-columns:1fr;gap:50px}.arch{max-width:420px;margin:0 auto}.rules{grid-template-columns:1fr 1fr;row-gap:40px}.rules li:nth-child(3){border-left:0}.numbers{grid-template-columns:repeat(3,1fr)}.numbers div:nth-child(4){border-left:0}}
@media (max-width:760px){.nav{grid-template-columns:auto 1fr auto}.nav nav{display:none}.bg{object-position:66% 50%}.center{transform:translateY(-75%)}.over{font-size:9.5px;letter-spacing:.22em}.over .ln{width:30px}
  .ca{flex-wrap:wrap;justify-content:center;border-radius:18px;max-width:100%}.ca .tk{flex-basis:100%;justify-content:center;padding:12px 0 0}.ca code{white-space:normal;word-break:break-all;padding:6px 16px 12px;font-size:12.5px;justify-content:center}.ca button{flex:1;padding:13px}.ca a{padding:13px 18px}
  .mlabels{font-size:9.5px;letter-spacing:.1em}.mstate{display:none}.readout{gap:8px 12px;margin-top:34px}.readout .dot{display:none}.readout span{flex-basis:46%;text-align:center}.readout b{display:block;margin:0}
  .rules{grid-template-columns:1fr}.rules li+li{border-left:0;border-top:1px solid var(--line);padding-top:30px}.hstats{gap:28px}.hstats b{font-size:36px}.chartbox{height:320px}.legend{gap:10px;font-size:10.5px}.numbers{grid-template-columns:1fr 1fr}.numbers div+div{border-left:0}
  .log li{grid-template-columns:1fr;gap:2px}.sec{padding-top:100px}}