/* Front-page RingField hero. The CSS background below is the fallback: it
   shows whenever WebGL2 is missing or the module never runs; when the ring
   field mounts, its opaque canvas paints over it with the same base colour. */
#archive{scroll-margin-top:81px}

.ring-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  height:560px;padding:48px 16px;
  color:var(--text,#e9e7df);text-align:center;
  background:
    radial-gradient(ellipse 46% 52% at 50% 50%, rgba(10,10,11,0) 38%, rgba(164,147,88,.20) 52%, rgba(10,10,11,0) 66%),
    radial-gradient(ellipse 70% 78% at 50% 50%, rgba(10,10,11,0) 52%, rgba(232,206,122,.08) 62%, rgba(10,10,11,0) 74%),
    var(--bg,#0a0a0b);
  border-bottom:1px solid var(--line,rgba(212,175,55,.16));
}
/* Canvas (prepended by ring-field.js) sits at the back; scrim then copy. */
.ring-hero > canvas{z-index:0}
.ring-hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 38% 34% at 50% 50%, rgba(10,10,11,.78) 0%, rgba(10,10,11,.55) 48%, rgba(10,10,11,0) 100%),
    linear-gradient(180deg, rgba(10,10,11,0) 70%, rgba(10,10,11,.85) 100%);
}
.ring-hero__copy{position:relative;z-index:2;max-width:40rem}
.ring-hero__title{
  margin:0 0 .9rem;font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.04;letter-spacing:-.04em;
  color:#f6f1e1;text-shadow:0 2px 24px rgba(0,0,0,.65);
}
.ring-hero__pitch{
  margin:0 auto 1.6rem;max-width:34rem;font-family:var(--body);
  font-size:clamp(.95rem,1.6vw,1.08rem);line-height:1.55;color:#e4dcc4;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}
/* VaporType line between the pitch and the buttons. The host is inline-block
   and sized by its longest word; its vapor stage bleeds past it but takes no
   pointer events, and the buttons sit above it in the stacking order. */
.ring-hero__vapor-line{margin:-.4rem 0 1.15rem;line-height:1.1}
.ring-hero__vapor{
  display:inline-block;position:relative;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;font-size:2.4rem;letter-spacing:-.03em;color:#F4EBD0;
}
.ring-hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.ring-hero__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 22px;border-radius:999px;font-family:var(--mono);font-weight:600;
  font-size:.86rem;letter-spacing:.02em;text-decoration:none;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.ring-hero__btn:hover{text-decoration:none;transform:translateY(-1px)}
.ring-hero__btn:focus-visible{outline:2px solid var(--gold-2,#E8CE7A);outline-offset:3px}
.ring-hero__btn--primary{background:var(--gold,#D4AF37);color:#0a0a0b;border:1px solid var(--gold,#D4AF37)}
.ring-hero__btn--primary:hover{background:var(--gold-2,#E8CE7A);border-color:var(--gold-2,#E8CE7A);color:#0a0a0b}
.ring-hero__btn--ghost{background:rgba(10,10,11,.55);color:var(--gold-2,#E8CE7A);border:1px solid var(--line-strong,rgba(212,175,55,.34))}
.ring-hero__btn--ghost:hover{background:rgba(212,175,55,.12);border-color:var(--gold-2,#E8CE7A);color:#f6f1e1}

@media (max-width:699px){
  .ring-hero{height:420px;padding:32px 16px}
  .ring-hero__vapor{font-size:1.8rem}
  .ring-hero__vapor-line{margin:-.6rem 0 .9rem}
  .ring-hero__pitch{margin-bottom:1.1rem}
  .ring-hero__scrim{
    background:
      radial-gradient(ellipse 80% 44% at 50% 50%, rgba(10,10,11,.82) 0%, rgba(10,10,11,.6) 55%, rgba(10,10,11,0) 100%),
      linear-gradient(180deg, rgba(10,10,11,0) 70%, rgba(10,10,11,.85) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .ring-hero__btn{transition:none}
  .ring-hero__btn:hover{transform:none}
}