/* Lattice: palette taken from the hero scene (riso ultramarine on cream). Loaded after style.css. */
:root{
  --night:#070a22; --night-2:#0c1236;
  --ink:#f1eadb; --ink-2:rgba(241,234,219,.72); --ink-3:rgba(241,234,219,.46);
  --hair:rgba(241,234,219,.14); --blue:#8fa0ff; --ultra:#1b2a9e;
}
body{background:var(--night)}
::selection{background:var(--ink);color:var(--ultra)}

/* nav: one glass pill */
.nav{background:linear-gradient(160deg,rgba(12,18,54,.52),rgba(12,18,54,.30));backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%)}

/* hero: the scene tells it, the copy sits in its calm sky */
.lhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:128px var(--pad) clamp(40px,8vh,96px);overflow:hidden;isolation:isolate}
.lhero-scene{position:absolute;inset:0;z-index:-2}
.lhero-scene img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.04) translate3d(calc(var(--px,0) * -10px),calc(var(--py,0) * -6px),0);
  transition:transform .9s var(--ease-out);will-change:transform}
.lhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 70% at 18% 72%,rgba(7,10,34,.62),rgba(7,10,34,0) 78%),linear-gradient(to top,var(--night),rgba(7,10,34,0) 26%)}
.lhero-copy{max-width:600px}
.lhero-copy>*{opacity:0;animation:arrive .9s cubic-bezier(.34,1.56,.64,1) both}
.lhero-copy>*:nth-child(1){animation-delay:.1s}.lhero-copy>*:nth-child(2){animation-delay:.2s}.lhero-copy>*:nth-child(3){animation-delay:.32s}
.lhero-copy>*:nth-child(4){animation-delay:.44s}.lhero-copy>*:nth-child(5){animation-delay:.56s}
.lhero h1{font-size:clamp(72px,12vw,176px);line-height:.86;letter-spacing:-.035em;text-shadow:0 2px 40px rgba(7,10,34,.5)}
.lhero .lede{max-width:500px;font-size:clamp(17px,1.5vw,20px);color:var(--ink);text-shadow:0 1px 18px rgba(7,10,34,.7)}
.lede em,.finale em{font-family:var(--serif);font-style:italic;font-size:1.12em;letter-spacing:0}
.lhero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta.ghost{background:rgba(241,234,219,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,234,219,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (hover:hover) and (pointer:fine){.cta.ghost:hover{background:rgba(241,234,219,.12);box-shadow:inset 0 0 0 1px rgba(241,234,219,.5)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;list-style:none;padding:0}
.chips li{font-size:12px;color:var(--ink-2);padding:7px 11px;border-radius:999px;background:rgba(12,18,54,.42);
  box-shadow:inset 0 0 0 1px var(--hair);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* the one glass panel: the newest real chain, read live */
.glass{position:relative;border-radius:18px;padding:18px 20px;background:linear-gradient(160deg,rgba(12,18,54,.52),rgba(12,18,54,.30));
  backdrop-filter:blur(26px) saturate(160%) brightness(1.03);-webkit-backdrop-filter:blur(26px) saturate(160%) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.05),0 18px 50px rgba(3,5,20,.45)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:conic-gradient(from 200deg,rgba(241,234,219,.55),rgba(241,234,219,.06) 25%,rgba(241,234,219,.35) 50%,rgba(241,234,219,.05) 75%,rgba(241,234,219,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.live{width:min(340px,100%);flex:none;opacity:0;animation:arrive .9s cubic-bezier(.34,1.56,.64,1) .7s both}
.live .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.live .tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--blue)}
.live-main{margin-top:10px;font:400 24px/1.15 var(--serif);color:var(--ink)}
.live-main b{font-weight:400;font-family:var(--mono);font-size:.8em;font-variant-numeric:tabular-nums}
.live-sub{margin-top:8px;font-size:12px;color:var(--ink-2)}
.live-sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* thesis */
.thesis{max-width:760px;display:grid;gap:18px}
.thesis p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2)}
.thesis p:first-child{color:var(--ink)}
.claim-col p{color:var(--ink-2);line-height:1.55;margin-top:8px}

/* live chain list */
.lchains{list-style:none;padding:0;display:grid;gap:8px;max-width:860px}
.lchains li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-radius:12px;
  background:rgba(12,18,54,.36);box-shadow:inset 0 0 0 1px var(--hair);font-size:13px;color:var(--ink-2)}
.lchains li a{color:var(--ink)}
.lchains li.muted{display:block;color:var(--ink-3)}
.lchains .ok{color:var(--blue)}

.finale h2{font-family:var(--serif)}

.live-sub{white-space:normal}.live-sub a{white-space:nowrap}
@media (max-width:860px){
  .lhero{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .live{width:100%}
  .lhero-scene img{object-position:70% 40%}
}
/* phones: the scene on top, the words below it on the night, never over the bright lattice */
@media (max-width:700px){
  .lhero{min-height:auto;padding-top:calc(52svh + 8px);justify-content:flex-start}
  .lhero-scene{bottom:auto;height:58svh;-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
  .lhero-scene img{object-position:50% 60%}
  .lhero::before{background:none}
  .lhero h1{font-size:clamp(64px,19vw,96px)}
}
@media (max-width:420px){.lchains li{grid-template-columns:1fr;gap:4px}}
@media (prefers-reduced-motion:reduce){.lhero-copy>*,.live{animation:none;opacity:1}.lhero-scene img{transition:none;transform:none}}