/* ══════════════════════════════════════════════════════════════
   materia.css — Materia Chemistries founder story (scrollytelling)
   Loaded after brand/fractionalkyle.css + site.css. Those two give the
   FractionalKyle nav and footer; everything between them is Materia:
   near-black, white ink, the FK lime as the one accent, and a fixed
   canvas of event dots behind pinned chapters (materia.js / scenes.js).
   ══════════════════════════════════════════════════════════════ */

:root {
  --mat-bg: #050505;
  --mat-raised: #0E0E0E;
  --mat-ink: #F3F3F1;
  --mat-dim: #8C8C88;
  --mat-faint: #5A5A58;
  --mat-accent: var(--lime);        /* FK lime — shared with the nav, so the two brands read as one */
  --mat-hair: rgba(243,243,241,.08);
  --nav-h: 68px;
  --fs-title: clamp(1.9rem, 1rem + 2.8vw, 3.4rem);
  --fs-body: clamp(1rem, .92rem + .3vw, 1.15rem);
  --ch-col: 560px;
  --ch-pad: clamp(16px, 5vw, 80px);
  --mat-max: 1180px;                        /* the two columns never drift further apart than this */
  --col-gap: clamp(40px, 6vw, 96px);
  /* side padding that also centres the content region once the viewport is wider than --mat-max */
  --side: max(var(--ch-pad), calc((100vw - var(--mat-max)) / 2));
}

/* ---- overrides of brand globals that bleed onto this page ---- */
html { scroll-behavior: auto; }              /* Lenis owns smoothing */
body.materia {
  background: var(--mat-bg);
  color: var(--mat-ink);
  font-family: var(--body);
  overflow-x: hidden;
}
.mat a { color: var(--mat-accent); }
.mat a:hover { color: var(--mat-ink); }

/* ---- preview banner (removed at cutover) ---- */

/* ---- fixed dot canvas behind everything (decorative, never interactive) ---- */
#mat-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; display: block; pointer-events: none;
}
.mat { position: relative; z-index: 1; }

/* ---- hero (not pinned) — "mat-" prefix avoids site.css's homepage .hero-* rules ---- */
/* text on the left, the sodalite cage (canvas) on the right — same split as the chapters */
/* one shared grid for the hero and every chapter: text column | stage column (dots or DOM content) */
.mat-hero, .ch {
  display: grid; grid-template-columns: minmax(0, var(--ch-col)) minmax(280px, 1fr); column-gap: var(--col-gap);
  align-items: center;
}
.mat-hero {
  min-height: calc(100svh - var(--nav-h));
  padding: calc(var(--line) * 1.5) max(var(--side), 96px) calc(var(--line) * 2) var(--side);   /* right: keep clear of the fixed chapter nav */
}
.mat-hero-inner { max-width: var(--ch-col); min-width: 0; }
.stage-slot { min-height: 1px; }
/* the lockup is the headline (no text title); the asset is a transparent white PNG, so no blend tricks */
/* centred over the intro column (no eyebrow — Kyle's call) */
.mat-hero-logo-wrap { margin: 0 auto calc(var(--line) * 1.3); line-height: 0; width: 100%; max-width: 300px; container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.mat-hero-logo { width: 84%; height: auto; display: block; }
/* wordmark sized against the lockup's width (container units) so it scales with the mark on every screen */
.mat-wordmark { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 7cqw; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; color: #fff; }
.mat-wordmark-a { font-weight: 700; font-size: 12.6cqw; letter-spacing: .1em; line-height: 1; margin-left: .1em; }
.mat-wordmark-b { font-weight: 300; font-size: 7.1cqw; letter-spacing: .3em; line-height: 1; margin-top: 3cqw; margin-left: .3em; }
.mat-hero-sub { font-size: var(--fs-body); line-height: 1.6; color: var(--mat-dim); max-width: 60ch; margin: 0 0 calc(var(--line) * .5); }
.mat-hero-sub + .mat-hero-sub { color: var(--mat-ink); }
/* teaser: one line in lime pointing at the open-source band after the story */
.mat-hero-teaser { display: inline-flex; align-items: center; gap: 10px; margin-top: calc(var(--line) * .6); padding: 10px 14px 10px 0; font-family: var(--type); font-size: .8rem; font-weight: 600; color: var(--mat-accent); text-decoration: none; border-bottom: 1px solid rgba(153,219,66,.35); transition: border-color .18s, color .18s; }
.mat-hero-teaser:hover { color: var(--mat-ink); border-color: var(--mat-ink); }
.mat-hero-teaser i { width: 16px; height: 16px; flex: none; }
.mat-hero-cue { display: inline-flex; margin-top: calc(var(--line) * 1.4); margin-left: 0; font-family: var(--type); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mat-faint); flex-direction: column; align-items: center; gap: 10px; }
.mat-hero-teaser + .mat-hero-cue { display: flex; width: max-content; }
.mat-hero-cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--mat-faint), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .9 } 50% { transform: translateY(8px); opacity: .35 } }

/* ---- the story stage (pinned by ScrollTrigger) and its stacked chapters ---- */
.mat-story {
  position: relative;
  height: calc(100svh - var(--nav-h));
  border-top: 1px solid var(--mat-hair);
}
.mat-story::before {                 /* accent rule along the top of the stage */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--mat-accent); opacity: .7;
}
.ch {
  position: absolute; inset: 0; overflow: hidden;
  padding: var(--line) max(var(--side), 96px) var(--line) var(--side);
  pointer-events: none;              /* stacked chapters must not block each other; materia.js marks the live one */
}
.ch[data-live="true"] { z-index: 2; }
.ch[data-live="true"] :is(.ch-label, .ch-title, .ch-p, .ch-aside, .ch-stage) { pointer-events: auto; }
/* reduced motion: nothing is pinned, chapters flow as ordinary sections */
.no-motion .mat-story { height: auto; }
.no-motion .ch { position: relative; min-height: calc(100svh - var(--nav-h)); border-top: 1px solid var(--mat-hair); pointer-events: auto; }
.ch-inner { width: 100%; max-width: var(--ch-col); min-width: 0; align-self: safe center; }
.ch-label { display: block; font-family: var(--type); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mat-accent); margin-bottom: calc(var(--line) * .5); }
.ch-title { font-family: var(--type); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: var(--fs-title); color: var(--mat-ink); margin-bottom: calc(var(--line) * .6); max-width: 20ch; }
.ch-body { display: flex; flex-direction: column; gap: calc(var(--line) * .4); }
.ch-p { font-size: var(--fs-body); line-height: 1.55; color: var(--mat-dim); max-width: 60ch; }
.ch-p:first-child { color: var(--mat-ink); }
.ch-aside { margin-top: calc(var(--line) * .7); }

/* text is "written on" by clip-path wipes keyed to scroll progress; the
   initial state is set in CSS so nothing flashes before JS runs (desktop only:
   on phones the text just scrolls and the stages live in the band) */
@media (min-width: 769px) {
  .js .ch[data-scene] .ch-label,
  .js .ch[data-scene] .ch-title,
  .js .ch[data-scene] .ch-p,
  .js .ch[data-scene] .ch-aside { clip-path: inset(0% 100% 0% 0%); }
  .js .ch[data-scene] .ch-stage { opacity: 0; }
}
.no-motion .ch[data-scene] .ch-label,
.no-motion .ch[data-scene] .ch-title,
.no-motion .ch[data-scene] .ch-p,
.no-motion .ch[data-scene] .ch-aside { clip-path: none !important; }

/* ---- a DOM stage: where the dots would be, a chapter can put real content instead
   (the team roster, the Climate Week video). Same rectangle the canvas uses on desktop. ---- */
.ch-stage {
  grid-column: 2; align-self: stretch; min-width: 0;
  height: calc(100svh - var(--nav-h) - 2 * var(--line));
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
@media (min-width: 769px) { .no-motion .ch-stage { height: auto; opacity: 1 !important; } }   /* phones: materia.js fades the stages in the band */
.mat-band { display: none; }                 /* phones only — see the phone block at the end */

/* chapter 02 photo on the stage (16:9 source, so the .media cover crop loses nothing) */
.ch-photo { margin: 0; }
.ch-photo figcaption, .ch-video-fallback figcaption { font-family: var(--type); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mat-faint); margin-top: 8px; }

/* the team roster: three groups, every person a link */
.roster { overflow: auto; justify-content: safe center; padding-right: 4px; }
.roster-group + .roster-group, .roster-row + .roster-group { margin-top: 16px; }
.roster-row > .roster-group { margin-top: 0; }
.roster-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }   /* founders beside science advisors */
.roster-group--half .roster-grid { grid-template-columns: repeat(2, 1fr); }
.roster-h { font-family: var(--type); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mat-dim); font-weight: 600; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--mat-hair); }
.roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
/* bigger faces, fewer words: the group heading is the role; only founders / science advisors keep a lime line.
   Every person still has the full role as a tooltip (title attribute). */
.rp-role { display: none; }
.rp-role--accent { display: block; }
.rp { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; color: var(--mat-ink); min-width: 0; }
.rp img, .rp-initials { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mat-hair); margin-bottom: 5px; display: block; background: var(--mat-raised); }
.rp-initials { display: flex; align-items: center; justify-content: center; font-family: var(--type); font-size: .72rem; font-weight: 700; color: var(--mat-dim); letter-spacing: .06em; }
.rp-name { font-family: var(--type); font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--mat-ink); }
.rp-role { font-family: var(--type); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--mat-dim); }
.rp-role--accent { color: var(--mat-accent); }
a.rp:hover .rp-name { color: var(--mat-accent); }
a.rp:hover img, a.rp:hover .rp-initials { border-color: var(--mat-accent); }
@media (max-height: 820px) and (min-width: 769px) { .roster-group + .roster-group, .roster-row + .roster-group { margin-top: 10px; } .rp-name { font-size: .7rem; } .rp img, .rp-initials { width: 58px; height: 58px; } }   /* short laptops — after the base .rp rules so it wins */

/* chapter 05 media: the video once it exists, the meetup photo until then */
.media figure { margin: 0; width: 100%; }
.media video, .media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }   /* height:auto beats the img height attribute */
.media:has(.ch-video[data-show="true"]) .ch-video-fallback { display: none; }

/* ---- partner logos ---- */
.partners { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.partners a { display: inline-flex; align-items: center; height: 44px; padding: 8px 14px; background: #FAFAFA; border-radius: 8px; }
.partners img { height: 100%; width: auto; max-width: 150px; object-fit: contain; }

/* ---- open-source band after the story (the hero teaser points here) ---- */
.mat-os { position: relative; z-index: 1; background: var(--mat-bg); border-top: 1px solid var(--mat-hair); padding: calc(var(--line) * 2.2) var(--ch-pad) calc(var(--line) * 2.4); }
.mat-os-inner { max-width: 1200px; margin: 0 auto; }
.mat-os-inner .ch-p { max-width: 64ch; }
.mat-os-inner .ch-p + .ch-p { margin-top: calc(var(--line) * .4); }
.os-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: calc(var(--line) * .9); }
.os-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--mat-hair); border-radius: 10px; background: var(--mat-raised); color: var(--mat-ink) !important; font-family: var(--type); font-size: .8rem; font-weight: 600; text-decoration: none; transition: border-color .18s, transform .18s; }
.os-btn:hover { border-color: var(--mat-accent); transform: translateY(-1px); }
.os-btn i { width: 20px; height: 20px; color: var(--mat-accent); }
.os-btn--soon { opacity: .6; cursor: default; }
.os-btn--soon:hover { border-color: var(--mat-hair); transform: none; }
.chip { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
.chip--live { background: var(--mat-accent); color: var(--g-900); }
.chip--soon { border: 1px solid var(--mat-faint); color: var(--mat-dim); }
[data-show="false"] { display: none !important; }

/* ---- the full record: every event as a card ---- */
.ev { background: var(--mat-raised); border: 1px solid var(--mat-hair); border-radius: 12px; overflow: hidden; color: var(--mat-ink); }
.ev img { width: 100%; height: 160px; object-fit: cover; display: block; background: #000; }
.ev-body { padding: 14px 16px 16px; }
.ev-meta { display: flex; align-items: center; gap: 7px; font-family: var(--type); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mat-dim); margin-bottom: 8px; }
.ev-meta i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ev-title { font-family: var(--type); font-size: .9rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--mat-ink); }
.ev-title a { color: var(--mat-ink); border-bottom: 1px solid var(--mat-accent); }
.ev-desc { font-size: .92rem; line-height: 1.5; color: var(--mat-dim); margin: 0; }
.ev-desc a { color: var(--mat-accent); }
.ev-desc a:hover, .ev-title a:hover { color: var(--lime-bright); }
/* chapter 04 hover/tap card: fixed, placed beside the dot by materia.js; stays open while the pointer is on it */
.ev--card { position: fixed; z-index: 6; width: min(320px, calc(100vw - 24px)); box-shadow: 0 18px 40px rgba(0,0,0,.6); pointer-events: auto; }
.ev--card img { display: none; }   /* the CSV image is the Materia logo for these rows: bulk, not information */
.ev--card .ev-body { padding: 12px 14px 14px; }
.ev--card .ev-desc { font-size: .86rem; }
.mat-all { position: relative; z-index: 1; background: var(--mat-bg); border-top: 1px solid var(--mat-hair); padding: calc(var(--line) * 2) var(--ch-pad) calc(var(--line) * 3); }
.mat-all-head { max-width: 1200px; margin: 0 auto calc(var(--line) * 1.2); }
.mat-all-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ---- chapter nav (01–05): appears with the story and stays to the end of the page ---- */
.ch-nav {
  position: fixed; right: clamp(12px, 2.5vw, 36px); top: 50%; transform: translateY(-50%);
  z-index: 5; display: flex; flex-direction: column; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.ch-nav.is-visible { opacity: 1; pointer-events: auto; }
.ch-nav button {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font-family: var(--type); font-size: .68rem; letter-spacing: .12em; color: var(--mat-faint);
  display: flex; align-items: center; gap: 8px; transition: color .18s;
}
.ch-nav button::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .18s; }
.ch-nav button:hover, .ch-nav button.is-current { color: var(--mat-accent); }
.ch-nav button.is-current::after { width: 26px; }
.ch-nav button:focus-visible { outline: 1px solid var(--mat-accent); outline-offset: 2px; }

/* ---- footer sits above the canvas ---- */
.footer { position: relative; z-index: 1; }

/* ---- narrow desktops / tablets in landscape: the second column is ~300–400 px ---- */
@media (max-width: 1200px) and (min-width: 769px) {
  .rp img, .rp-initials { width: 56px; height: 56px; }
}

/* ---- phones: a sticky stage band under the site nav, the chapter text flowing beneath it ----
   Nothing is pinned. .mat-band sticks for the hero + story (its parent .mat-scroller spans both);
   the canvas (z-index above .mat here) draws the dots over the band, and materia.js moves every
   .ch-stage and the chapter nav into it at boot. Text never shares space with the dots, nothing
   is clipped, the chapter nav never sits on the copy. Progress: scrolling a chapter's heading up
   to the band morphs the dots / cross-fades the stages (materia.js phoneUpdate). */
@media (max-width: 768px) {
  :root { --ch-col: 100%; --fs-body: .95rem; --fs-title: 1.6rem; --ch-pad: 16px; --side: 16px; --stage-h: clamp(240px, 42svh, 380px); }
  #mat-canvas { z-index: 2; }                  /* over the page: the band is opaque, the dots draw on top of it */
  .mat-hero, .ch { display: block; }
  .stage-slot { display: none; }
  /* hero: compact, no veil — the cage sits in the band right beneath it */
  .mat-hero { min-height: 0; padding: calc(var(--line) * 1.1) 16px calc(var(--line) * .7); }
  .mat-hero-inner { max-width: none; }
  .mat-hero-logo-wrap { max-width: 180px; margin-bottom: var(--line); }
  .mat-hero-sub { max-width: none; }
  .mat-hero-teaser { font-size: .72rem; }
  .mat-hero-cue { margin-top: calc(var(--line) * .8); }
  .mat-hero-cue::after { height: 24px; }
  /* the band */
  .mat-band {
    display: block; position: sticky; top: var(--nav-h); z-index: 3;
    height: var(--stage-h); background: var(--mat-bg);
    border-top: 1px solid var(--mat-hair); border-bottom: 1px solid var(--mat-hair);
  }
  .mat-band::before {                          /* the story's lime rule moves to the band's top edge */
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--mat-accent); opacity: .7;
  }
  .mat-story { height: auto; border-top: 0; }
  .mat-story::before { display: none; }
  /* chapters flow as sections: full-width text, no clipping, no veils, no right gutter */
  .ch {
    position: relative; inset: auto; overflow: visible; pointer-events: auto;
    min-height: calc(100svh - var(--nav-h) - var(--stage-h));
    padding: calc(var(--line) * .9) 16px calc(var(--line) * .9);
  }
  .ch + .ch { border-top: 1px solid var(--mat-hair); }
  .no-motion .ch { min-height: calc(100svh - var(--nav-h) - var(--stage-h)); border-top: 0; }
  .no-motion .ch + .ch { border-top: 1px solid var(--mat-hair); }
  .ch-inner { max-width: none; }
  .ch-label { margin-bottom: calc(var(--line) * .35); }
  .ch-title { margin-bottom: calc(var(--line) * .45); max-width: none; }
  .ch-p { line-height: 1.5; max-width: none; }
  .ch-body { gap: calc(var(--line) * .35); }
  .ch-aside { margin-top: calc(var(--line) * .5); }
  /* a DOM stage lives in the band (materia.js moves it there); until then it is not shown in the flow */
  .ch > .ch-stage { display: none; }
  .mat-band .ch-stage {
    position: absolute; left: 16px; right: 16px; top: 12px; bottom: 34px;   /* bottom: room for the chapter nav row */
    height: auto; grid-column: auto; display: flex; flex-direction: column; justify-content: center; gap: 10px;
    opacity: 0; pointer-events: none;   /* materia.js fades the live chapter's stage in and makes it interactive */
  }
  .no-motion .ch > .ch-stage { display: flex; height: auto; margin-top: var(--line); opacity: 1; }   /* engine never came: stages in the flow */
  .ch-photo figcaption, .ch-video-fallback figcaption { font-size: .6rem; }
  /* phones: the five groups become cards in one sideways-scrolling strip (swipe through them) */
  .mat-band .roster { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 0 6px; }
  .roster::-webkit-scrollbar { display: none; }
  .roster-group, .roster-group + .roster-group, .roster-row + .roster-group { margin-top: 0; flex: 0 0 196px; min-width: 0; overflow: hidden; }
  .roster-row { display: contents; }
  .roster-h { margin-bottom: 8px; padding-bottom: 5px; font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .roster-grid, .roster-group--half .roster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  .rp { gap: 0; }
  .rp img, .rp-initials { width: 46px; height: 46px; margin-bottom: 4px; }
  .rp-name { font-size: .6rem; line-height: 1.2; }
  .rp-role { display: none; }   /* the group heading says the role */
  .rp-role--accent { display: block; font-size: .5rem; }
  /* chapter nav: a row along the bottom edge of the band (materia.js moves it in), never over the copy */
  .mat-band .ch-nav {
    position: absolute; left: 0; right: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; justify-content: center; gap: 22px; padding: 6px 0 7px;
  }
  .mat-band .ch-nav button { flex-direction: column; gap: 4px; padding: 2px 4px; font-size: .6rem; }
  .mat-band .ch-nav button::after { width: 14px; }
  .mat-band .ch-nav button.is-current::after { width: 22px; }
  .mat-all-grid { grid-template-columns: 1fr; }
  .partners a { height: 38px; }
}