/* ============================================================
   SECTION SHELLS — strata, hero, dividers, deep water, footer

   Note on the cascade: every rule here keeps its base declaration
   and its media-query override in this one file and in that order,
   so nothing silently undoes the section padding.
   ============================================================ */

.strata {
  position: relative;
  padding: var(--strata-pad) var(--gutter);
}
@media (min-width: 960px) {
  .strata { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}

/* A one-line notice from Settings → Website settings. Sits above the hero,
   in normal flow rather than fixed, so it scrolls away with the page and
   never fights the masthead's own fixed positioning or the gauge's
   scroll-relative math. Its own top padding is what clears the fixed
   masthead when it is the first thing in <main>. */
.announce {
  margin: 0; padding: 4.6rem var(--gutter) 0.85rem; text-align: center;
  font-family: var(--f-mono, monospace); font-size: 0.78rem; letter-spacing: 0.03em;
  color: var(--ink-2); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 960px) {
  .announce { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem) + var(--gutter));
              padding-right: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem) + var(--gutter)); }
}

.strata-inner { max-width: 74rem; margin: 0 auto; }

.strata-head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.strata-head .display { font-size: var(--t-h2); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  flex: none;
}

/* a single chain link, used as a section divider */
.link-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 var(--gutter);
}
@media (min-width: 960px) {
  .link-rule { margin-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}
.link-rule::before, .link-rule::after {
  content: "";
  height: 1px;
  background: var(--line-2);
}
.link-rule::before { width: clamp(1rem, 6vw, 5rem); flex: none; }
.link-rule::after { flex: 1; }
.link-rule i {
  display: block;
  width: 11px; height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  flex: none;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem var(--gutter) clamp(2.5rem, 7vh, 5rem);
  /* deliberately no overflow:hidden — the canvas and the fade are
     both inset:0, so clipping here would only ever eat the CTAs on
     a short viewport */
}
@media (min-width: 960px) {
  .hero { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}

#chain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* the water closes over the chain at the bottom of the hero */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, var(--fade-to));
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 74rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.hero-eyebrow b { color: var(--accent); font-weight: 500; }
.hero-eyebrow s { text-decoration: none; opacity: 0.4; }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  max-width: 15ch;
}
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--accent);
  text-shadow: 0 0 60px var(--glow);
}

.hero-lede { max-width: 30rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ============================================================
   DEEP WATER — sections that stay dark in both themes.
   Below the thermocline there is no light either way, so the
   descent survives light mode.
   ============================================================ */

.deep {
  /* buttons and selection derive their foreground from --bg-1, so
     the ground tokens have to come down here too or the type inverts */
  --bg-1: #061318;
  --bg-2: #0A1D24;
  --ink: #E7F0ED;
  --ink-2: #A7BDBB;
  --ink-3: #7B9394;
  --accent: #5CC4AB;
  --metal: #D6A85C;
  --line: rgba(231,240,237,0.16);
  --line-2: rgba(231,240,237,0.08);
  --panel: rgba(231,240,237,0.04);
  --panel-2: rgba(231,240,237,0.07);
  --panel-edge: rgba(231,240,237,0.12);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(92,196,171,0.09), transparent 62%),
    linear-gradient(180deg, #0A1D24, #061318);
  border-top: 1px solid rgba(92,196,171,0.22);
  border-bottom: 1px solid rgba(92,196,171,0.14);
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  padding: 2.4rem var(--gutter);
  background: #040D11;
  color: #7B9394;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (min-width: 960px) {
  .foot { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}
.foot a { color: #7B9394; text-decoration: none; }
.foot a:hover { color: #5CC4AB; }