/* ============================================================
   OCEANS — oceans.gg
   Black water. One animal, lit from inside. One blue.
   ============================================================ */

@font-face{ font-family:"Lustra"; src:url("../fonts/lustra-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra"; src:url("../fonts/lustra-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra"; src:url("../fonts/lustra-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra Text"; src:url("../fonts/lustratext-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra Text"; src:url("../fonts/lustratext-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra Text"; src:url("../fonts/lustratext-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap }
@font-face{ font-family:"Lustra Text"; src:url("../fonts/lustratext-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap }
/* Whicker: the hashtag and nothing else. Subset to those glyphs only. */
@font-face{ font-family:"Whicker"; src:url("../fonts/whicker.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap }

:root{
  --abyss:  #04070B;
  --deep:   #070C13;
  --panel:  #0B1219;
  --raise:  #101A24;
  --hair:   #16222E;
  --edge:   #25384A;

  --ice:    #EAF4F9;
  --mist:   #8AA1B2;
  --faint:  #526574;

  --blue:   #02A3D9;
  --cyan:   #6FDCFF;
  --sunk:   #013F58;

  --display:"Lustra", system-ui, sans-serif;
  --text:   "Lustra Text", system-ui, sans-serif;
  --deco:   "Whicker", var(--display);

  --wrap: 82rem;
  --pad:  clamp(1.25rem, 5vw, 4.5rem);
  --bar:  5.75rem;
  --sec:  clamp(4.5rem, 11vh, 8.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:var(--bar) }
body{
  background:var(--abyss); color:var(--ice);
  font-family:var(--text); font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img,svg,canvas,iframe,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--blue); color:var(--abyss) }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{ position:fixed; top:1rem; left:1rem; z-index:400; transform:translateY(-250%);
  padding:.75rem 1.15rem; background:var(--ice); color:var(--abyss); font-weight:600; font-size:.85rem }
.skip:focus{ transform:none }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.015em; text-transform:uppercase }
h1{ font-size:clamp(2.6rem,6.4vw,5.75rem) }
h2{ font-size:clamp(1.9rem,3.8vw,3.25rem) }
h3{ font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.2; letter-spacing:-.012em }
p{ text-wrap:pretty }

.lead{ font-family:var(--text); font-weight:300; color:var(--mist);
  font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.6; max-width:36ch }
.body{ color:var(--mist); max-width:62ch }
.body + .body{ margin-top:1rem }

/* the depth strip — where you are in the water column */
.depth{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem;
  font-family:var(--text); font-weight:500; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.depth b{ color:var(--blue); font-weight:500 }
.depth i{ width:14px; height:1px; background:var(--edge); font-style:normal; flex:0 0 auto }

/* the hashtag. Whicker's only job. */
.tide{ font-family:var(--deco); font-weight:400; line-height:1;
  font-size:clamp(1.5rem,2.7vw,2.25rem); color:#FFFFFF;
  text-shadow:0 0 8px rgba(111,220,255,.5), 0 0 30px rgba(2,163,217,.55) }
.tide--sm{ font-size:1.25rem }
.tide--lg{ font-size:clamp(2rem,4vw,3.25rem) }
.tide--xl{ font-size:clamp(2.75rem,6vw,4.25rem) }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--text); font-weight:500; font-size:.85rem;
  padding:.85rem 1.5rem; border:1px solid var(--edge); border-radius:6px; background:transparent;
  color:var(--ice); cursor:pointer;
  transition:border-color .25s, background .25s, color .25s, box-shadow .3s;
}
.btn:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 24px rgba(2,163,217,.2) }
.btn--blue{ background:var(--blue); border-color:var(--blue); color:#02121A; font-weight:600 }
.btn--blue:hover{ background:var(--cyan); border-color:var(--cyan); color:#02121A;
  box-shadow:0 0 34px rgba(2,163,217,.5) }
.btn--sm{ padding:.6rem 1.05rem; font-size:.78rem }
.btn--block{ width:100% }
.btn[disabled]{ opacity:.45; pointer-events:none }

.go{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.85rem;
  padding-bottom:.2rem; border-bottom:1px solid var(--hair); transition:color .25s, border-color .25s }
.go i{ font-style:normal; transition:transform .3s var(--ease) }
.go:hover{ color:var(--cyan); border-bottom-color:var(--blue) }
.go:hover i{ transform:translateX(5px) }

/* ============================================================
   BAR
   ============================================================ */
.bar{
  position:fixed; inset:0 0 auto; z-index:200; height:var(--bar);
  display:flex; align-items:center; gap:clamp(1rem,3vw,3rem); padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.bar::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,7,11,.75), transparent); transition:opacity .35s }
.bar[data-stuck="true"]{
  background:rgba(4,7,11,.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--hair);
}
.bar[data-stuck="true"]::before{ opacity:0 }
.bar__brand{ display:flex; align-items:center; flex:0 0 auto; z-index:2 }
.bar__lockup{ height:46px; width:auto }
.bar__nav{ display:flex; gap:2rem; margin-left:auto; align-items:center }
.bar__nav a{ position:relative; font-size:.88rem; color:var(--mist); transition:color .2s }
.bar__nav-cta{ display:none }
.bar__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--blue); box-shadow:0 0 8px var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
.bar__nav a:hover, .bar__nav a[aria-current="page"]{ color:var(--ice) }
.bar__nav a:hover::after, .bar__nav a[aria-current="page"]::after{ transform:scaleX(1) }
.bar__right{ display:flex; align-items:center; gap:.75rem }

.bar__toggle{
  display:none; position:relative; z-index:2;
  width:44px; height:44px; margin-left:auto; margin-right:-.5rem;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:flex-end; justify-content:center; gap:6px;
}
.bar__toggle span{ display:block; height:1.5px; background:var(--ice);
  transition:transform .3s var(--ease), opacity .2s, width .3s var(--ease) }
.bar__toggle span:nth-child(1){ width:24px }
.bar__toggle span:nth-child(2){ width:16px }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:calc(var(--bar) + 2rem) clamp(3.5rem,9vh,6rem);
  overflow:hidden; isolation:isolate;
}
.hero .wrap{ width:100%; display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) }
.hero__canvas{ position:absolute; inset:0; z-index:-2; width:100%; height:100% }
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,7,11,.92) 0%, rgba(4,7,11,.62) 36%, rgba(4,7,11,0) 72%),
    linear-gradient(180deg, rgba(4,7,11,.55) 0%, transparent 26%, transparent 62%, var(--abyss) 100%);
}
.hero__inner{ max-width:42rem; will-change:transform,opacity; position:relative; z-index:2 }
.hero h1{ margin:1.4rem 0 0 }
.hero h1 em{ display:block; font-style:normal; color:var(--cyan);
  text-shadow:0 0 60px rgba(2,163,217,.4) }
.hero .lead{ margin-top:1.6rem }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem }

/* hero video — Fort Worth run, autoplay muted, user can unmute */
.hero__film{ position:relative; z-index:2; width:100%;
  margin-left:clamp(1.5rem,3vw,3rem);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(2,163,217,.25) }
.hero__film-frame{ position:relative; aspect-ratio:16/9; width:100%;
  border:1px solid var(--hair); border-bottom:0; overflow:hidden; background:var(--panel) }
.hero__film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
/* caption sits in its own opaque bar UNDER the video — never over the picture */
.hero__film-cap{ display:flex; align-items:center; gap:.75rem;
  padding:.8rem 1rem; background:var(--deep); border:1px solid var(--hair);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mist) }
.hero__film-cap b{ color:var(--cyan); font-weight:600 }
.hero__tide{ margin-top:3rem; padding-top:2.25rem; position:relative }
.hero__tide::before{ content:""; position:absolute; top:0; left:0; width:3.5rem; height:1px;
  background:linear-gradient(90deg, var(--blue), transparent) }
.hero__inner > *{ animation:rise .9s var(--ease) both }
.hero__inner > *:nth-child(2){ animation-delay:.08s }
.hero__inner > *:nth-child(3){ animation-delay:.16s }
.hero__inner > *:nth-child(4){ animation-delay:.24s }
.hero__inner > *:nth-child(5){ animation-delay:.32s }
@keyframes rise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

/* the descent marker, right edge */
.sound{
  position:absolute; right:var(--pad); bottom:clamp(3.5rem,9vh,6rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.sound span{ writing-mode:vertical-rl }
.sound i{ display:block; width:1px; height:60px; background:var(--hair);
  position:relative; overflow:hidden }
.sound i::after{ content:""; position:absolute; top:0; left:0; width:1px; height:20px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:sink 2.6s ease-in-out infinite }
@keyframes sink{ 0%{transform:translateY(-24px)} 100%{transform:translateY(64px)} }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block:var(--sec); position:relative }
.sec--rule{ border-top:1px solid var(--hair) }
.sec__head{ display:grid; gap:1.25rem 3rem; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; margin-bottom:clamp(2.25rem,5vw,3.5rem) }
.sec__head h2{ margin-top:1rem }
.sec__head .lead{ margin-top:1rem }

.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }

.shot{ position:relative; overflow:hidden; background:var(--panel); isolation:isolate }
.shot img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.78) contrast(1.05) brightness(.82) hue-rotate(-6deg);
  transition:transform 1.1s var(--ease), filter .6s }
/* a cold caustic wash — the light you get looking up through water */
.shot::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,163,217,.10) 0%, transparent 35%, rgba(1,63,88,.28) 100%),
    radial-gradient(120% 80% at 30% -10%, rgba(111,220,255,.14), transparent 55%);
  mix-blend-mode:screen; transition:opacity .6s; }
/* a soft vignette so edges melt instead of cutting hard */
.shot::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 60px 12px rgba(4,7,11,.55); }
.shot:hover img{ transform:scale(1.04); filter:saturate(.95) contrast(1.02) brightness(.95) hue-rotate(-3deg) }
.shot:hover::before{ opacity:.7 }

.feat{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)) }
.feat__shot{ aspect-ratio:4/3; border-radius:3px }
.feat--flip .feat__shot{ order:2 }
.feat__body h2{ margin:1rem 0 1.25rem }
.feat__body .go{ margin-top:1.6rem }

.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:clamp(1.5rem,4vw,3.5rem) }
.pillar{ padding:2rem 0 0; border-top:1px solid var(--hair) }

.pillar__n{ font-size:.7rem; letter-spacing:.18em; color:var(--blue); font-weight:500 }
.pillar h3{ margin:.9rem 0 .7rem; font-size:clamp(1.35rem,2vw,1.7rem) }
.pillar p{ color:var(--mist); font-size:.93rem; max-width:34ch }

/* ── roster, by game ─────────────────────────────────────── */
.game + .game{ margin-top:var(--sec) }
.game__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.25rem;
  flex-wrap:wrap; padding-bottom:1.1rem; border-bottom:1px solid var(--hair); margin-bottom:2.25rem }
.state{ display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--faint) }
.state::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--faint) }
.state--open{ color:var(--blue) }
.state--open::before{ background:var(--blue); box-shadow:0 0 10px var(--blue) }

.seats{ list-style:none; display:grid; gap:1px; background:var(--hair);
  border:1px solid var(--hair); grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)) }
.seat{ background:var(--deep); padding:1.65rem 1.4rem 1.4rem; display:flex; flex-direction:column;
  min-height:16.5rem; transition:background .3s }
.seat:hover{ background:var(--panel) }
.seat__av{ width:54px; height:54px; margin-bottom:1.4rem; display:grid; place-items:center;
  border:1px solid var(--hair); transition:border-color .3s }
.seat__av img{ width:100%; height:100%; object-fit:cover }
.seat__av svg{ width:24px; height:24px; fill:var(--edge); transition:fill .3s }
.seat:hover .seat__av{ border-color:var(--blue) }
.seat:hover .seat__av svg{ fill:var(--blue) }
.seat h3{ font-size:1.3rem; color:var(--faint); transition:color .3s }
.seat:hover h3{ color:var(--ice) }
.seat__gt{ font-size:.8rem; color:var(--faint); margin-top:.3rem }
.seat__role{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); font-weight:500; margin-top:.7rem }
.seat__soc{ display:flex; gap:.4rem; margin-top:auto; padding-top:1.4rem }
.seat__soc a{ width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--hair); transition:border-color .2s, background .2s }
.seat__soc svg{ width:13px; height:13px; fill:var(--faint); transition:fill .2s }
.seat__soc a:hover{ border-color:var(--blue); background:rgba(2,163,217,.1) }
.seat__soc a:hover svg{ fill:var(--cyan) }

/* a filled member card — a signed creator/player, not an open seat */
.seat--filled{ background:var(--panel) }
.seat--filled .seat__av{ width:72px; height:72px; border-color:var(--blue); border-radius:6px; overflow:hidden }
.seat--filled h3{ color:var(--ice) }
.seat--filled .seat__gt{ color:var(--cyan); font-weight:500 }
.seat--filled .seat__soc svg{ fill:var(--mist) }

/* ── film ───────────────────────────────────────────────── */
.rail{ display:grid; gap:clamp(1.5rem,2.5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)) }
.vod__btn{ position:relative; width:100%; aspect-ratio:16/9; padding:0; cursor:pointer;
  border:1px solid var(--hair); background:var(--panel) center/cover no-repeat; overflow:hidden;
  filter:saturate(.7) brightness(.75); transition:filter .45s, border-color .3s }
.vod__btn::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,7,11,.1), rgba(4,7,11,.6)) }
.vod__btn:hover{ filter:none; border-color:var(--blue) }
.vod__play{ position:absolute; z-index:2; inset:50% auto auto 50%; width:60px; height:60px;
  transform:translate(-50%,-50%); border-radius:50%; background:rgba(234,244,249,.92);
  transition:transform .35s var(--ease), background .3s, box-shadow .3s }
.vod__play::before{ content:""; position:absolute; inset:50% auto auto 54%;
  transform:translate(-50%,-50%); border:8px solid transparent; border-left:13px solid var(--abyss) }
.vod__btn:hover .vod__play{ transform:translate(-50%,-50%) scale(1.08); background:var(--cyan);
  box-shadow:0 0 40px rgba(2,163,217,.55) }
.vod iframe{ width:100%; aspect-ratio:16/9; border:0 }
.vod figcaption{ padding-top:1rem }
.vod figcaption h3{ margin-bottom:.35rem }
.vod figcaption p{ color:var(--mist); font-size:.9rem }

/* ── the current ────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ font-family:var(--text); font-size:.8rem; font-weight:500; padding:.55rem .95rem;
  border:1px solid var(--hair); border-radius:6px; background:transparent; color:var(--mist); cursor:pointer;
  transition:all .2s }
.chip:hover{ border-color:var(--edge); color:var(--ice) }
.chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#02121A }
.feeds{ display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); align-items:start }
.feed{ border:1px solid var(--hair); display:flex; flex-direction:column; min-height:24rem }
.feed[hidden]{ display:none }
.feed__bar{ display:flex; align-items:center; gap:.6rem; padding:.95rem 1.1rem;
  border-bottom:1px solid var(--hair); background:var(--deep) }
.feed__bar svg{ width:15px; height:15px; fill:var(--mist) }
.feed__bar b{ font-weight:600; font-size:.85rem }
.feed__bar span{ margin-left:auto; font-size:.78rem; color:var(--faint) }
.feed__body{ flex:1; min-height:18rem; overflow:hidden }
.feed__body iframe{ width:100%; height:100%; min-height:22rem; border:0 }
.feed__fallback{ display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; min-height:22rem; padding:2rem; text-align:center;
  font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.01em;
  font-size:1.05rem; color:var(--mist); transition:color .25s, background .25s }
.feed__fallback:hover{ color:var(--cyan); background:rgba(2,163,217,.06) }
.feed__fallback i{ font-style:normal; color:var(--blue) }
.feed__go{ display:flex; align-items:center; justify-content:space-between; padding:.95rem 1.1rem;
  border-top:1px solid var(--hair); font-size:.82rem; font-weight:500; color:var(--mist);
  transition:color .2s }
.feed__go:hover{ color:var(--cyan) }
.feed--grid .feed__body{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair) }
.feed--grid .shot{ aspect-ratio:1 }

/* ── record table ───────────────────────────────────────── */
.table{ overflow-x:auto }
.table table{ width:100%; border-collapse:collapse; min-width:34rem }
.table th,.table td{ text-align:left; padding:1.1rem 1.25rem 1.1rem 0;
  border-bottom:1px solid var(--hair); font-size:.9rem }
.table thead th{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); font-weight:500 }
.table tbody th{ font-weight:500; color:var(--ice) }
.table td{ color:var(--mist); font-variant-numeric:tabular-nums }
.table .place{ color:var(--cyan); font-weight:500 }
.table .rec-link{ text-align:right; padding-right:0; white-space:nowrap }
.table .rec-link a{ color:var(--mist); font-weight:500; transition:color .2s }
.table .rec-link a:hover{ color:var(--cyan) }
.table .rec-link i{ font-style:normal }

/* ── heritage ───────────────────────────────────────────── */
.lineage{ list-style:none; display:grid; gap:1px; background:var(--hair);
  border:1px solid var(--hair); grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
.era{ background:var(--deep); padding:0; display:flex; flex-direction:column;
  transition:background .3s }
.era:hover{ background:var(--panel) }
/* the art sits in its own framed panel, same height for all three,
   so the wide mascots and the compact icon read as equals */
.era__art{ width:100%; height:11rem; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:rgba(4,7,11,.4); border-bottom:1px solid var(--hair);
  overflow:hidden; box-sizing:border-box }
/* all three marks render at the same visual size (~72px tall). the shark
   icon has empty space in its viewBox, so it needs a taller box to match.
   max-height is also capped to the box so a logo can never bleed into the text. */
.era__art img{ max-height:min(4.5rem, 100%); max-width:90%; width:auto; height:auto; object-fit:contain }
.era__art svg{ height:min(7.2rem, 100%); width:auto; max-width:90%; fill:var(--ice) }
.era__art--empty{ color:var(--faint); font-size:.78rem;
  text-align:center; line-height:1.5 }
/* the text block, clearly separated below the art with its own padding */
.era__body{ padding:1.6rem 1.65rem 1.75rem; display:flex; flex-direction:column; gap:.5rem }
.era__yr{ font-size:.72rem; letter-spacing:.18em; color:var(--blue); font-weight:500;
  font-variant-numeric:tabular-nums }
.era h3{ font-size:1.3rem; margin:.2rem 0 .4rem }
.era p{ color:var(--mist); font-size:.9rem; line-height:1.55 }
.era__by{ margin-top:.75rem; font-size:.78rem !important; color:var(--faint) !important;
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem }
.era__links{ display:inline-flex; gap:.4rem }
.era__links a{ font-size:.72rem; letter-spacing:.02em; color:var(--mist);
  padding:.15rem .5rem; border:1px solid var(--hair); border-radius:5px; transition:border-color .2s, color .2s, background .2s }
.era__links a:hover{ color:var(--cyan); border-color:var(--blue); background:rgba(2,163,217,.08) }

/* ── partners ───────────────────────────────────────────── */
.partners{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) }
.partner{ background:var(--deep); min-height:7.5rem; display:grid; place-items:center;
  color:var(--faint); font-size:.8rem; letter-spacing:.1em; transition:background .25s, color .25s }
.partner:hover{ background:var(--panel); color:var(--mist) }

/* ── signup ─────────────────────────────────────────────── */
.join{ position:relative; overflow:hidden; border-top:1px solid var(--hair); isolation:isolate }
.join__bg{ position:absolute; inset:0; z-index:-2;
  background:url("../img/pattern.jpg") center/cover no-repeat;
  filter:grayscale(1) brightness(.26) contrast(1.1); opacity:.5 }
.join::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--abyss) 0%, rgba(4,7,11,.72) 35%,
             rgba(4,7,11,.72) 65%, var(--abyss) 100%),
             radial-gradient(60% 80% at 20% 50%, rgba(2,163,217,.14), transparent 70%) }
.join__grid{ display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); align-items:start }
.form{ display:flex; flex-direction:column; gap:1.2rem; max-width:30rem; width:100% }
.field{ display:flex; flex-direction:column; gap:.45rem }
.field label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:500 }
.field input,.field select,.field textarea{
  width:100%; padding:.95rem 1rem; background:rgba(11,18,25,.5); color:var(--ice);
  border:1px solid var(--hair); border-radius:6px;
  font-family:var(--text); font-size:1rem; appearance:none;
  transition:border-color .25s, background .25s }
.field textarea{ resize:vertical; min-height:5rem; line-height:1.6 }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; cursor:pointer }
.field select option{ background:var(--deep); color:var(--ice) }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint) }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--blue); background:rgba(11,18,25,.8) }
.field input[aria-invalid="true"]{ border-color:#F0705C }
.err{ font-size:.8rem; color:#F0705C }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.consent{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; font-size:.84rem;
  color:var(--mist); line-height:1.5 }
.consent input{ appearance:none; flex:0 0 auto; width:16px; height:16px; margin-top:4px;
  border:1px solid var(--edge); border-radius:3px; background:transparent; cursor:pointer; position:relative;
  transition:background .2s, border-color .2s }
.consent input:checked{ background:var(--blue); border-color:var(--blue) }
.consent input:checked::after{ content:""; position:absolute; left:5px; top:1px; width:3px; height:8px;
  border:solid var(--abyss); border-width:0 2px 2px 0; transform:rotate(45deg) }
.status-msg{ font-size:.86rem; min-height:1.3em }
.status-msg[data-state="ok"]{ color:var(--cyan) }
.status-msg[data-state="error"]{ color:#F0705C }
.status-msg a{ color:inherit; text-decoration:underline; text-underline-offset:2px }

/* the success / failure panel that animates in after submit */
.form__result{
  display:flex; align-items:flex-start; gap:.9rem; padding:1.4rem 1.5rem;
  border:1px solid var(--hair); border-radius:3px; background:rgba(11,18,25,.6);
  opacity:0; transform:translateY(10px); animation:resultIn .5s var(--ease) forwards; }
.form__result--ok{ border-color:rgba(2,163,217,.5); background:rgba(2,163,217,.08) }
.form__result--err{ border-color:rgba(240,112,92,.5); background:rgba(240,112,92,.08) }
@keyframes resultIn{ to{ opacity:1; transform:none } }
.form__result-icon{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50% }
.form__result--ok .form__result-icon{ background:rgba(2,163,217,.16) }
.form__result--err .form__result-icon{ background:rgba(240,112,92,.16) }
.form__result-icon svg{ width:18px; height:18px }
.form__result--ok .form__result-icon svg{ stroke:var(--cyan) }
.form__result--err .form__result-icon svg{ stroke:#F0705C }
.form__result-icon svg path,.form__result-icon svg circle{
  fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
/* the tick / cross draw themselves in */
.form__result-icon .draw{ stroke-dasharray:48; stroke-dashoffset:48;
  animation:draw .55s .15s var(--ease) forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.form__result-body h3{ font-size:1.05rem; text-transform:none; letter-spacing:-.01em; margin-bottom:.3rem }
.form__result--ok .form__result-body h3{ color:var(--cyan) }
.form__result--err .form__result-body h3{ color:#F0705C }
.form__result-body p{ color:var(--mist); font-size:.9rem; line-height:1.55 }
.form__result-body a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .form__result{ animation:none; opacity:1; transform:none }
  .form__result-icon .draw{ animation:none; stroke-dashoffset:0 }
}

/* ── page head ──────────────────────────────────────────── */
.phead{ position:relative; overflow:hidden;
  padding-top:calc(var(--bar) + clamp(3rem,8vh,5.5rem)); padding-bottom:clamp(2.25rem,6vh,3.5rem);
  border-bottom:1px solid var(--hair) }
.phead h1{ margin-top:1.1rem }
.phead .lead{ margin-top:1.35rem }

/* ── footer ─────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--hair); padding-block:var(--sec) 1.75rem; background:var(--deep) }
.foot__grid{ display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(13rem,1.5fr) repeat(auto-fit,minmax(8rem,1fr)) }
.foot__lockup{ width:min(190px,58%); height:auto }
.foot__brand p{ color:var(--faint); font-size:.88rem; margin-top:1.25rem; max-width:26ch }
/* footer #TurnTheTide — a touch bigger than body copy, brightens to white on hover */
.foot__brand p.tide{ font-size:1.75rem; margin-top:1.5rem; max-width:none;
  transition:color .2s ease, text-shadow .2s ease }
.foot__brand p.tide:hover{ color:#FFFFFF;
  text-shadow:0 0 10px rgba(111,220,255,.6), 0 0 34px rgba(2,163,217,.6) }
.foot__col h4{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice);
  font-weight:500; margin-bottom:1.1rem }
.foot__col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem }
.foot__col a{ color:var(--mist); font-size:.9rem; transition:color .2s }
.foot__col a:hover{ color:var(--cyan) }
.foot__kit{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem;
  padding:.7rem 1.1rem; border:1px solid var(--edge); color:var(--ice);
  font-size:.82rem; font-weight:500; transition:border-color .25s, background .25s, color .25s }
.foot__kit svg{ width:15px; height:15px; fill:currentColor }
.foot__kit:hover{ border-color:var(--blue); background:rgba(2,163,217,.1); color:var(--cyan) }
.foot__bottom{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center;
  justify-content:space-between; margin-top:var(--sec); padding-top:1.6rem;
  border-top:1px solid var(--hair); font-size:.8rem; color:var(--faint) }
.foot__soc{ display:flex; gap:.5rem }
.foot__soc a{ width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--hair); transition:border-color .2s, background .2s }
.foot__soc svg{ width:14px; height:14px; fill:var(--mist); transition:fill .2s }
.foot__soc a:hover{ border-color:var(--blue); background:rgba(2,163,217,.1) }
.foot__soc a:hover svg{ fill:var(--cyan) }

/* ============================================================
   MOBILE — the menu takes the whole screen. No gaps, no seams.
   ============================================================ */
@media (max-width:900px){
  .bar__toggle{ display:flex }
  .bar__right{ display:none }

  .bar__nav{
    position:fixed; inset:0; z-index:1;
    margin:0; padding:calc(var(--bar) + 2rem) var(--pad) calc(2rem + env(safe-area-inset-bottom));
    height:100svh; height:100dvh;                 /* fills past the browser chrome */
    width:100vw; max-width:none;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:0;
    background:var(--abyss);                       /* opaque: no gap, no bleed-through */
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden;
    transform:translateY(-2%);
    transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s;
  }
  .bar[data-open="true"] .bar__nav{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease), transform .45s var(--ease), visibility 0s;
  }
  /* the creature keeps burning behind the menu, just very low */
  .bar__nav::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(70% 50% at 80% 20%, rgba(2,163,217,.12), transparent 70%);
  }
  .bar__nav a{
    width:100%; padding:1.15rem 0; border-bottom:1px solid var(--hair);
    font-family:var(--display); font-weight:600; font-size:clamp(1.75rem,7vw,2.5rem);
    letter-spacing:-.02em; color:var(--ice);
    opacity:0; transform:translateY(14px);
  }
  .bar__nav a::after{ display:none }
  .bar[data-open="true"] .bar__nav a{
    animation:navIn .5s var(--ease) forwards;
  }
  .bar[data-open="true"] .bar__nav a:nth-child(1){ animation-delay:.06s }
  .bar[data-open="true"] .bar__nav a:nth-child(2){ animation-delay:.12s }
  .bar[data-open="true"] .bar__nav a:nth-child(3){ animation-delay:.18s }
  .bar[data-open="true"] .bar__nav a:nth-child(4){ animation-delay:.24s }
  .bar[data-open="true"] .bar__nav a:nth-child(5){ animation-delay:.30s }
  .bar[data-open="true"] .bar__nav a:nth-child(6){ animation-delay:.36s }
  @keyframes navIn{ to{ opacity:1; transform:none } }

  .bar__nav-cta{ display:inline-flex !important }
  .bar__nav .btn{
    margin-top:2rem; width:100%; padding:1.1rem; font-size:.9rem;
    opacity:0; transform:translateY(14px);
  }
  .bar[data-open="true"] .bar__nav .btn{ animation:navIn .5s .36s var(--ease) forwards }

  /* bar goes solid the moment the menu opens, so the X always reads */
  .bar[data-open="true"]{ background:var(--abyss); border-bottom-color:transparent }
  .bar[data-open="true"]::before{ opacity:0 }
  .bar[data-open="true"] .bar__toggle span:nth-child(1){
    width:24px; transform:translateY(3.75px) rotate(45deg) }
  .bar[data-open="true"] .bar__toggle span:nth-child(2){
    width:24px; transform:translateY(-3.75px) rotate(-45deg) }

  .sound{ display:none }
  .hero{ align-items:flex-end }
  .hero .wrap{ grid-template-columns:1fr; gap:2rem }
  .hero__film{ order:-1; margin-left:0 }
  .sec__head{ grid-template-columns:1fr }
  .feat--flip .feat__shot{ order:0 }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .foot__bottom{ flex-direction:column; align-items:flex-start }
}

@media (max-width:520px){
  .feed--grid .feed__body{ grid-template-columns:1fr 1fr }
  .seats{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
  .bar__nav a{ opacity:1; transform:none }
}