/* ============================================================
   BETTER TOGETHER — PLATFORM DESIGN SYSTEM (Klein Edition)
   Tokens per design_handoff_better_together_brand/README.md
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --graphite:#121417;
  --sand:#F5F1E8;
  --klein:#002FA7;
  --rose:#C89A96;
  --ink:#121417;
  --ink-soft:#474D5C;
  --rule:rgba(18,20,23,0.15);
  --rule-light:rgba(245,241,232,0.18);
  --max:1240px;
}

html { scroll-behavior:smooth; }
body {
  background-color:var(--sand);
  background-image:url('../assets/noise-sand.png');
  color:var(--ink);
  font-family:'Alegreya Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ---------- type voices ---------- */
.display { font-family:'Marcellus',serif; font-weight:400; letter-spacing:0.5px; line-height:1.16; }
.kicker {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--klein);
}
.on-dark .kicker, .kicker.rose { color:var(--rose); }
.detail-serif { font-family:'Cormorant Garamond',serif; font-style:italic; }
.mono { font-family:'IBM Plex Mono',monospace; }

/* TT ligature (custom wordmark joint) */
.tt { position:relative; display:inline-block; letter-spacing:0; }
.tt .tts { display:block; line-height:1; height:1em; clip-path:inset(0.20em -0.03em 0 -0.03em); }
.tt::after { content:''; position:absolute; left:0; right:0.006em; top:0.135em; height:0.086em; background:currentColor; }

/* ---------- header ---------- */
header.site {
  position:sticky; top:0; z-index:100; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; background-color:var(--klein);
  border-bottom:1px solid var(--rule-light);
}
header.site .logo { display:flex; align-items:baseline; gap:14px; }
header.site .wordmark {
  font-family:'Marcellus',serif; font-size:17px; letter-spacing:1px;
  text-transform:uppercase; color:var(--sand);
}
header.site .tagline {
  font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--rose);
}
nav.primary { display:flex; gap:32px; align-items:center; }
nav.primary a {
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:rgba(245,241,232,0.75);
  padding:6px 0; position:relative; transition:color .2s;
}
nav.primary a:hover { color:var(--sand); }
nav.primary a.active { color:var(--sand); }
nav.primary a.active::after {
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--rose);
}
nav.primary a.cta {
  border:1px solid rgba(245,241,232,0.4); border-radius:2px; padding:8px 16px; color:var(--sand);
}
nav.primary a.cta:hover { background:var(--sand); color:var(--klein); }
.hamb {
  display:none; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--sand); background:none;
  border:1px solid var(--rule-light); border-radius:2px; padding:7px 12px; cursor:pointer;
}

/* ---------- sections ---------- */
.wrap { max-width:var(--max); margin:0 auto; padding:0 40px; }
section.band { padding:104px 0; }
section.band.tight { padding:72px 0; }
section.band.dark {
  background-color:var(--klein); color:var(--sand);
}
section.band.graphite { background-color:var(--graphite); color:var(--sand); }
.band.dark .kicker, .band.graphite .kicker { color:var(--rose); }

h1.hero-title { font-family:'Marcellus',serif; font-weight:400; font-size:clamp(44px,6vw,92px); line-height:1.05; letter-spacing:0.5px; }
h2.sec { font-family:'Marcellus',serif; font-weight:400; font-size:clamp(30px,3.4vw,48px); line-height:1.18; margin:18px 0 22px; max-width:820px; }
h3.sub { font-family:'Marcellus',serif; font-weight:400; font-size:clamp(20px,2vw,27px); line-height:1.3; }
p.lede { font-size:clamp(18px,1.5vw,21px); color:var(--ink-soft); max-width:640px; }
.band.dark p.lede, .band.graphite p.lede { color:rgba(245,241,232,0.8); }
.ev-hero p.lede, .arch-hero p.lede, .gate .left p.lede { color:rgba(245,241,232,0.82); }
p.body-c { font-size:17px; color:var(--ink-soft); max-width:620px; margin-bottom:16px; }
.band.dark p.body-c { color:rgba(245,241,232,0.8); }
.closing-line { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--klein); }
.band.dark .closing-line, .band.graphite .closing-line { color:var(--rose); }

/* ---------- buttons ---------- */
.btn {
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:2px; text-transform:uppercase; padding:15px 28px;
  border-radius:4px; cursor:pointer; transition:all .22s; border:none;
}
.btn.block { background:var(--graphite); color:var(--rose); }
.btn.block:hover { color:var(--sand); }
.btn.blue { background:var(--klein); color:var(--sand); }
.btn.blue:hover { background:var(--graphite); color:var(--rose); }
.btn.outline { background:transparent; border:2px solid var(--graphite); border-radius:2px; color:var(--graphite); padding:13px 26px; }
.btn.outline:hover { background:var(--graphite); color:var(--sand); }
.btn.outline-light { background:transparent; border:2px solid rgba(245,241,232,0.55); border-radius:2px; color:var(--sand); padding:13px 26px; }
.btn.outline-light:hover { background:var(--sand); color:var(--klein); border-color:var(--sand); }

/* ---------- placeholder imagery ---------- */
.ph {
  position:relative; overflow:hidden; border-radius:12px;
  background:linear-gradient(135deg, #0A2C8F 0%, #002FA7 45%, #16234f 100%);
  display:flex; align-items:center; justify-content:center;
}
.ph::after {
  content:''; position:absolute; inset:0;
  background-image:url('../assets/noise-sand.png'); opacity:.14; mix-blend-mode:overlay;
}
.ph .ph-label {
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:rgba(245,241,232,0.6); z-index:1; text-align:center; padding:0 18px;
}
.ph.rose { background:linear-gradient(135deg, #C89A96 0%, #b8837e 60%, #a5726e 100%); }
.ph.rose .ph-label { color:rgba(18,20,23,0.55); }
.ph.graphite { background:linear-gradient(140deg, #1a1d22 0%, #121417 60%, #0b0d10 100%); }
.ph.video::before {
  content:'▶'; position:absolute; z-index:2; width:64px; height:64px; border-radius:50%;
  border:1.5px solid rgba(245,241,232,0.8); color:rgba(245,241,232,0.9);
  display:flex; align-items:center; justify-content:center; font-size:18px; padding-left:4px;
}

/* ---------- cards ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.g-card {
  background:rgba(18,20,23,0.03); border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column;
}
.g-card:hover { transform:translateY(-4px); box-shadow:0 4px 16px rgba(0,0,0,.07); }
.g-card .ph { border-radius:0; height:210px; }
.g-card .g-body { padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.g-card .g-date { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--klein); }
.g-card h4 { font-family:'Marcellus',serif; font-weight:400; font-size:22px; line-height:1.25; }
.g-card p { font-size:14px; color:var(--ink-soft); }
.g-card .g-meta { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--rule); }
.g-card .g-loc { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--ink-soft); }
.g-card .g-status { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--klein); }
.g-card .g-status.waitlist { color:var(--rose); }

/* ---------- calendar ---------- */
.cal-month { margin-bottom:52px; }
.cal-month .cal-label {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--klein); border-bottom:2px solid var(--klein); padding-bottom:10px; margin-bottom:6px;
}
.cal-row {
  display:grid; grid-template-columns:120px 1.6fr 1fr 160px 130px; gap:24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--rule); transition:background .2s; cursor:pointer;
}
.cal-row:hover { background:rgba(0,47,167,0.04); }
.cal-d { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); }
.cal-t { font-family:'Marcellus',serif; font-size:21px; line-height:1.25; }
.cal-loc { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--ink-soft); }
.cal-type { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); }
.cal-st { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--klein); text-align:right; }
.cal-st.waitlist { color:var(--rose); }

/* ---------- specs / hairline rows ---------- */
.spec-row { display:grid; grid-template-columns:170px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.on-dark .spec-row, .band.dark .spec-row { border-bottom-color:var(--rule-light); }
.spec-row .k { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--klein); }
.band.dark .spec-row .k { color:var(--rose); }
.spec-row .v { font-size:17px; }
.band.dark .spec-row .v { color:var(--sand); }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family:'Alegreya Sans',sans-serif; font-size:16px; color:var(--ink);
  background:rgba(18,20,23,0.03); border:1px solid var(--rule); border-radius:4px; padding:13px 14px; outline:none;
}
.field input:focus, .field textarea:focus { border-color:var(--klein); }

/* ---------- member UI ---------- */
.pill { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:5px 10px; border-radius:4px; background:rgba(0,47,167,0.08); color:var(--klein); }
.pill.rose { background:rgba(200,154,150,0.18); color:#9c6d68; }
.member-card { border:1px solid var(--rule); border-radius:8px; padding:22px; display:flex; gap:16px; align-items:center; background:rgba(18,20,23,0.02); }
.avatar { width:52px; height:52px; border-radius:50%; background:var(--klein); color:var(--sand); display:flex; align-items:center; justify-content:center; font-family:'Marcellus',serif; font-size:18px; flex:0 0 52px; }
.avatar.rose { background:var(--rose); color:var(--graphite); }
.avatar.graphite { background:var(--graphite); color:var(--rose); }
.tabs { display:flex; gap:26px; border-bottom:1px solid var(--rule); margin-bottom:34px; }
.tabs button {
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  background:none; border:none; color:var(--ink-soft); padding:12px 2px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button.on { color:var(--klein); border-bottom-color:var(--klein); }
.table-row { display:grid; gap:20px; padding:15px 0; border-bottom:1px solid var(--rule); align-items:baseline; font-size:15px; }
.table-head { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--klein); }

/* ---------- footer ---------- */
footer.site { background-color:var(--graphite); color:var(--sand); padding:72px 0 40px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
footer.site .f-word { font-family:'Marcellus',serif; font-size:26px; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
footer.site .f-tag { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--rose); }
footer.site h5 { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--rose); margin-bottom:16px; }
footer.site a.f-link { display:block; font-size:14.5px; color:rgba(245,241,232,0.75); padding:5px 0; }
footer.site a.f-link:hover { color:var(--sand); }
footer.site .base { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--rule-light); }
footer.site .base span { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(245,241,232,0.45); }

/* ---------- reveal on scroll ---------- */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.rv.in { opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  header.site { padding:0 20px; }
  nav.primary { display:none; position:fixed; top:64px; left:0; right:0; background:var(--klein); flex-direction:column; gap:0; padding:12px 20px 20px; border-bottom:1px solid var(--rule-light); }
  nav.primary a { padding:13px 0; }
  body.nav-open nav.primary { display:flex; }
  .hamb { display:block; }
  .wrap { padding:0 22px; }
  section.band { padding:64px 0; }
  .card-grid { grid-template-columns:1fr; }
  .cal-row { grid-template-columns:90px 1fr; }
  .cal-loc, .cal-type { display:none; }
  .cal-st { text-align:left; grid-column:2; }
  footer.site .cols { grid-template-columns:1fr 1fr; gap:32px; }
  .split { grid-template-columns:1fr !important; }
}


/* ============================================================
   HERO VIDEO — monochrome starfield loop under the poster type
   ============================================================ */
.hero.hero-poster { position:relative; isolation:isolate; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-media video {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.6) contrast(1.2) sepia(1) hue-rotate(196deg) saturate(2.6);
}
.hero-scrim {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,26,92,.30), rgba(0,47,167,.48) 55%, rgba(1,24,88,.78));
}
html[data-theme="dark"] .hero-media video { filter:grayscale(1) brightness(.48) contrast(1.22); }
html[data-theme="dark"] .hero-scrim { background:linear-gradient(180deg, rgba(18,20,23,.35), rgba(18,20,23,.85)); }

/* ============================================================
   WAVE SEAMS — colored bands meet their neighbours on a curve
   ============================================================ */
section.band.dark, section.band.graphite { position:relative; }
section.band.wave + .marquee { border-top:0; }
.marquee:has(+ section.band.wave) { border-bottom:0; }
section.band.wave::before, section.band.wave::after {
  content:''; position:absolute; left:0; right:0;
  background-color:inherit; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,60 C230,6 470,0 720,30 C990,62 1230,88 1440,38 L1440,96 Z'/></svg>") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,60 C230,6 470,0 720,30 C990,62 1230,88 1440,38 L1440,96 Z'/></svg>") center / 100% 100% no-repeat;
}
/* Top seam: gentler wave that sits 25px LOWER so it clears the text of
   the section above; ~34px of overlap DOWN into its own white body so no
   subpixel seam can open. Reach up into the blue = height - overlap. */
section.band.wave::before { top:-38px; height:72px; }
/* Bottom seam: reaches significantly further DOWN into the blue below and
   overlaps ~20px UP into its own white body — the white underlaps the blue,
   killing the gap where the background used to stop short of the wave. */
section.band.wave::after { bottom:-80px; height:100px; transform:scale(-1); }
@media (max-width:900px) {
  section.band.wave::before { top:-22px; height:44px; }
  section.band.wave::after { bottom:-46px; height:60px; }
}

/* ============================================================
   FLOATING BLOBS — slow ambient color drifting behind sections
   ============================================================ */
@keyframes blob-drift1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(9vw,-5vh) scale(1.18); }
  66% { transform:translate(-6vw,6vh) scale(.92); }
}
@keyframes blob-drift2 {
  0%,100% { transform:translate(0,0) scale(1); }
  40% { transform:translate(-10vw,7vh) scale(1.12); }
  70% { transform:translate(5vw,-4vh) scale(.95); }
}
@keyframes blob-drift3 {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(7vw,8vh) scale(1.22); }
}
.blob-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(110px); will-change:transform; }
@media (prefers-reduced-motion: reduce) { .blob { animation:none !important; } }

/* ============================================================
   OVERNIGHT REGRESSION FIXES (v49→v50)
   ============================================================ */

/* 1. No horizontal overflow → kills the body-klein "blue bars" at the
      screen edges on wide monitors. overflow-x:clip (not hidden) keeps
      position:sticky working. */
html, body { overflow-x: clip; max-width: 100%; }

/* 2. Seamless section seams: pull each section a hair into the previous
      one so no subpixel gap/white line can open between grounds, and the
      light sections physically underlap the blue above/below them. */
section.band + section.band,
.hero + section.band,
.marquee + section.band,
section.band + .marquee,
.hero + .marquee { margin-top: -1px; }

/* 3. Wave sections: more breathing room so a wave never cuts into text. */
section.band.wave { padding-top: 122px; padding-bottom: 122px; }
@media (max-width:900px) { section.band.wave { padding-top: 80px; padding-bottom: 80px; } }

/* 4. HERO ↔ HEADER integration (index only; body.has-hero).
      The starfield video extends up behind a transparent header; a soft
      dark scrim at the very top keeps the nav legible. Once scrolled past
      the hero the header goes solid klein (handled by .scrolled from fx.js). */
body.has-hero .hero.hero-poster { margin-top: -64px; padding-top: 64px; }
body.has-hero header.site {
  background-color: transparent; border-bottom: none;
  transition: background-color .4s ease, box-shadow .4s ease;
}
body.has-hero header.site::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
  transition: opacity .4s ease;
}
body.has-hero header.site.scrolled { background-color: var(--klein); border-bottom: 1px solid var(--rule-light); }
body.has-hero header.site.scrolled::before { opacity: 0; }