/* =========================================================================
   TOKENS — tweak these to re-skin the site
   ========================================================================= */
:root{
  --bg:#0b0b0d;             /* page background */
  --fg:#e9e9ee;             /* primary text color */
  --muted:#a7a7b4;          /* secondary text color */
  --accent:#c9f27a;         /* brand accent */

  --pad: clamp(16px, 4vmin, 48px);
  --max: 1200px;
  --radius: 18px;

  /* Global card appearance */
  --card-black:#000;                       /* TRUE black */
  --card-stroke:rgba(255,255,255,.70);     /* always-visible hairline */
  --card-stroke-hover:#ff9500;             /* hover color (orange) */
  
  p {margin-bottom: 0em;  margin-top: 0.5em;}
}

/* P3 boost for crisper whites on supported displays */
@media (color-gamut: p3){
  :root{
    --card-stroke: color(display-p3 1 1 1 / 0.70);
  }
}

/* =========================================================================
   BASE
   ========================================================================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-color: white;
  color:var(--fg);
  background:var(--bg);
}

.container{ max-width:var(--max); width:100% }
.title{ font-size:clamp(28px,5.5vw,56px); line-height:1.05; margin:0 0 24px; font-color: white }
.subtitle{ font-size:clamp(24px,3vw,36px); margin:0 0 12px; font-color: white }

/* Ensure the main content starts below the fixed header */
main{ padding-top: 72px; } /* adjust if your header is taller */

/* =========================================================================
   HEADER (fixed with ticker between brand + nav)
   ========================================================================= */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #0b0f14; /* match your theme */
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* keep your subtle glass if you like; comment out if unwanted */
  backdrop-filter: saturate(140%) blur(6px);
}

/* Row that holds: [brand] [ticker] [nav] */
.header-row{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
}

.brand, .nav a{ color:var(--fg); text-decoration:none }
.nav a{ margin-inline:.25rem }
.nav a:hover{ color:var(--accent) }

/* === Ticker between brand and nav === */
.ticker{
  position: relative;
  flex: 1 1 auto; /* expands between brand and nav */
  height: 28px; overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ticker-track{
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 28px;
  will-change: transform;
  animation: ticker-marquee 28s linear infinite;
  font-size: 13px; color: #9db0c5;
}
.ticker-item{ display: inline-flex; align-items: center; gap: 8px; }
.ticker-item strong{ color: #e6eef9; font-weight: 700; }
.ticker-pill{
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #e6eef9; font-weight: 600;
}

@keyframes ticker-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* we’ll render 2x width in JS */
}

/* Small screens: allow nav to wrap or hide ticker if space is tight */
@media (max-width: 700px){
  .ticker{ display:none; } /* or let it wrap below with a second row */
}

/* Keep header items on one row and reserve space for the nav */
.header-row{
  /* existing rules… */
  flex-wrap: nowrap;            /* prevent wrapping inside the header */
}

/* Make the ticker a bit narrower so nav fits on one line */
.ticker{
  /* existing rules… */
  flex: 0 1 clamp(320px, 38vw, 520px);  /* ← width window for ticker */
  /* you can tighten/loosen the max (520px) if needed */
}

/* Ensure nav never wraps */
.nav{
  flex: 0 0 auto;               /* nav takes only the space it needs */
  white-space: nowrap;          /* keep “Roadmap • Team • Results • Docs” on one line */
}

/* Slightly smaller ticker text for headroom */
.ticker-track{
  /* existing rules… */
  font-size: 12px;              /* was 13px */
  gap: 24px;                    /* was 28px */
}

/* If the header still breaks on smaller laptops, shave a little more: */
/*
.ticker{ flex: 0 1 clamp(280px, 32vw, 480px); }
*/


/* =========================================================================
   VERTICAL "PAGES" VIA SCROLL SNAP
   ========================================================================= */
.vh{ min-height:100vh; display:grid; place-items:center; padding:calc(var(--pad) + 40px) var(--pad) }
.v-snap{ scroll-snap-type:y mandatory }
.v-snap > .section, .v-snap > .footer{ scroll-snap-align:start }

/* =========================================================================
   HERO TILES
   ========================================================================= */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.tile{ display:grid; gap:0px; padding:16px; text-decoration:none; color:var(--fg) }

/* =========================================================================
   HORIZONTAL SNAP AREAS (roadmap slides + team track)
   ========================================================================= */
.h-snap{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
  padding-bottom:4px; /* keeps focus ring visible */
}
/* Hide the horizontal scrollbar visuals (still scrollable) */
.h-snap, .car-track{ scrollbar-width:none; -ms-overflow-style:none }
.h-snap::-webkit-scrollbar, .car-track::-webkit-scrollbar{ display:none }

/* Full-width slides for roadmap */
.slide{ flex:0 0 80%; scroll-snap-align:start; padding:24px }

/* =========================================================================
   TEAM "FLIP" CARDS  →  Simplified square team cards (no flipping)
   -------------------------------------------------------------------------
   SIZE SETTINGS (edit these two variables to change sizing):
     1) --team-card-size   → the width of each team card; height auto-scales
                              to stay perfectly square via aspect-ratio.
     2) --portrait-diam    → the circular portrait diameter.
   ========================================================================= */
:root{
  --team-card-size: 380px;   /* ← CARD SIZE: try 360px, 420px, 500px, etc. */
  --portrait-diam:  290px;   /* ← PORTRAIT DIAMETER: try 160px–280px       */
}

/* Each team card becomes a simple square layout with image + text below */
.car-item{
  /* Make the card a fixed-width "tile" in the horizontal track */
  flex: 0 0 var(--team-card-size);   /* ← card width (see variable above)  */
  aspect-ratio: 1 / 1;               /* ← keeps the tile perfectly square  */

  /* Center content and stack it vertically: image, name, role/summary */
  display: grid;
  grid-template-rows: auto auto auto 1fr;  /* image, name, role, (spacer) */
  justify-items: left;
  align-items: start;
  text-align: left;
  font-color: white;
  padding: 16px;                          /* card inner padding */
}

/* We no longer use 3D flip; neutralize any previous flip behavior */
.flip{ perspective: none; }                /* disable 3D context */
.flip .face{
  height: auto;                            /* no fixed face height */
  padding: 0;                              /* spacing handled by .car-item */
  backface-visibility: visible;
  transform-style: flat;
  transform: none;
}
.flip .back{ display: none; }              /* hide reverse; front shows all */

/* Portrait: round and sized by --portrait-diam */
.car-item .front img{
  width:  var(--portrait-diam);            /* ← portrait diameter */
  height: var(--portrait-diam);            /* ← portrait diameter */
  border-radius: 80%;                      /* ← makes it circular */
  object-fit: cover;                       /* crop to fill circle nicely */
  display: block;
}

/* Name (already in your <h3>) */
.car-item .front h3{
  margin: 12px 0 4px;
  font-size: 18px;
  font-color: white;
  line-height: 1.2;
}

/* Optional role line: add <p class="role">…</p> under the name in HTML */
.car-item .front .role{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-color: white;
}


/* =========================================================================
   PARTNERS
   ========================================================================= 
.partners{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.partner{
  padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--fg);
  border:1px solid rgba(255,255,255,.18);
}
.partner:hover{ border-color:var(--accent) }
*/
/* =========================================================================
   RESULTS
   ========================================================================= 
.results{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.panel h3{ margin-top:0 }
.legend{ display:flex; gap:12px; color:var(--muted); font-size:14px; font-color: white; }
.transcripts{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.sample pre{
  background:#0e0e12; border:1px solid #202026; border-radius:12px; padding:12px;
  max-height:260px; overflow:auto; white-space:pre-wrap;
}
*/

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  padding:40px var(--pad);
  background:#0a0a0c;
  border-top:1px solid #1a1a20;
}
.footer .cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  max-width: 1100px;      /* pick a width that matches the rest of the site */
  margin: 0 auto;         /* centers the whole block */
}
.footer a{ color:var(--fg); text-decoration:none }
.footer a:hover{ color:var(--accent) }
.fine{ text-align:center; color:var(--muted); margin-top:14px }



/* =========================================================================
   TEAM CAROUSEL CONTROLS  →  Buttons + track behavior for square cards
   ========================================================================= */
.carousel{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: left;
  gap: 12px;
  margin-block: 8px 4px;
}

/* Horizontal track:
   - uses the same .h-snap rules you already have (scroll-snap + hidden bars)
   - we add align-items to keep square cards aligned at the top */
.car-track{
  align-items: start;   /* square cards won’t stretch vertically */
}

/* Keep snap centered so each square parks in the middle on scroll */
.car-item{
  scroll-snap-align: center;  /* already present above; kept here for clarity */
}

/* Prev/Next buttons (unchanged except for clarity) */
.car-btn{
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: #111;
  color: var(--fg);
  cursor: pointer;
}

.carousel .car-btn { opacity: 0; pointer-events: none; }


/* Keyboard focus ring for a11y */
.car-item:focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* =========================================================================
   RESPONSIVE / REDUCED MOTION
   ========================================================================= */
@media (max-width:900px){
  .results{ grid-template-columns:1fr }
  .transcripts{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto }
}

/* EXEMPTION: keep the ticker animating even when reduce-motion is on */
@media (prefers-reduced-motion:reduce){
  .ticker-track{
    animation: ticker-marquee 28s linear infinite !important;
    animation-play-state: running !important;
  }
}

/* =========================================================================
   THE CARD LOOK (single source of truth)
   - TRUE black background
   - ALWAYS-visible 1px hairline (white)
   - HOVER: 1px border turns orange (no movement)
   - FOCUS: 1px focus ring for keyboard users
   ========================================================================= */
.card{
  background: var(--card-black) !important;
  background-image: none !important;

  /* 1px hairline + inset ring to sharpen rounded corners on HiDPI */
  border: 1px solid var(--card-stroke) !important;
  box-shadow: 0 0 0 1px var(--card-stroke) inset !important;

  border-radius: var(--radius);
  background-clip: padding-box;

  /* No transform in the transition anymore (no lift on hover) */
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Hover: keep 1px border, change colour to orange */
.card:hover{
  border-color: var(--card-stroke-hover) !important;
  box-shadow: 0 0 0 1px var(--card-stroke-hover) inset !important;
}

/* Keyboard focus: also 1px for consistency (no 2px anywhere) */
.card:focus-visible{
  outline: 1px solid var(--card-stroke-hover);
  outline-offset: 2px; /* slight separation so it’s visible on dark */
}

/* Full-width decorative band with centered content */
.deco-band{
  display:grid;                 /* easiest way to center both axes */
  place-items:center;
  padding-block: clamp(24px, 8vmin, 96px);
}

/* Defensive: remove any decorative overlays from other stylesheets */
.card::before,
.card::after{
  content:none !important; background:none !important; box-shadow:none !important;
}


/* =========================================================
   RE-ENABLE FLIP ON HOVER (keeps square layout)
   - .car-item stays a square via aspect-ratio
   - .front and .back are overlaid and 3D-rotated
   - Round portrait + text remain on the front
   ========================================================= */

/* 1) The card tile remains a fixed-size square */
:root{
  /* You already have these; shown here so you know the knobs */
  --team-card-size: 380px;  /* card width; height auto via aspect-ratio */
  --portrait-diam: 290px;   /* round portrait diameter */
}
.car-item{
  flex: 0 0 var(--team-card-size);
  aspect-ratio: 1 / 1;      /* ensures the card is always square */
  position: relative;       /* needed so faces can overlay this tile */
  display: block;           /* faces will handle their own layout */
  overflow: hidden;         /* neat edges during rotation */
}

/* 2) Restore 3D context on the flip wrapper */
.flip{
  perspective: 1000px;      /* re-enable 3D for child transforms */
}

/* 3) Faces: overlay, full-size, and 3D-ready */
.flip .face{
  position: absolute; inset: 0;      /* overlay the square card */
  display: grid;                      /* layout inside each face */
  place-items: center;                /* center content by default */
  padding: 16px;
  backface-visibility: hidden;       /* hide mirrored face */
  transform-style: preserve-3d;      /* keep children in 3D space */
  transition: transform .5s ease;    /* smooth rotation */
}

/* Front face starts facing the viewer */
.flip .front{
  transform: rotateY(0deg);
  z-index: 2;
}

/* Back face starts flipped away */
.flip .back{
  transform: rotateY(180deg);
  z-index: 1;
  /* If you want different layout on the back, adjust its grid/padding here */
}

/* 4) Flip interaction on hover (or focus-within for keyboard) */
.flip:hover .front,
.flip:focus-within .front{
  transform: rotateY(180deg);
}
.flip:hover .back,
.flip:focus-within .back{
  transform: rotateY(360deg);
}

/* 5) Round portrait on the FRONT face, with text below */
.flip .front img{
  width:  var(--portrait-diam);   /* ← adjust portrait size here */
  height: var(--portrait-diam);   /* ← adjust portrait size here */
  border-radius: 80%;             /* makes it circular */
  object-fit: cover;              /* crop nicely inside the circle */
  display: block;
  margin-bottom: 12px;
}
.flip .front h3{
  margin: 0 0 4px;
  font-size: 18px;
  font-color: white;
  line-height: 1.2;
  text-align: center;
}
.flip .front .role{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-color: white;
  text-align: center;
}

/* (Optional) If the back face needs its own inner layout, you can style it: */

.flip .back .content{
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
}


/* Remove underline and set custom color for all links */
a {
  color: white;          /* your preferred link color */
  text-decoration: none;   /* removes the underline */
}

/* Optional: visited link color */
a:visited {
  color: white;     /* darker shade for visited links */
  text-decoration: none;
}

/* Optional: hover/focus styles */
a:hover,
a:focus {
  color: white;          /* even darker on hover */
  text-decoration: none; /* or keep none if you prefer */
}

/* Optional: active (clicked) link */
a:active {
  color: white;
  text-decoration: none;
}
/* Your existing styles remain … */

/* your existing rules remain above … */

/* === Utilities / updates === */

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.tabular-nums{ font-variant-numeric: tabular-nums; }
.fine{ color:var(--muted); font-size:.9rem; }

.btn{
  display:inline-block; padding:.4rem .7rem; border:1px solid rgba(255,255,255,.18);
  background:#111; color:var(--fg); border-radius:10px; cursor:pointer;
}
.btn.small{ padding:.25rem .5rem; font-size:.9rem }
.btn:disabled{ opacity:.5; cursor:not-allowed }

/* Stack the Results cards vertically */
.tiles.stack{
  display:flex; flex-direction:column; gap: var(--gap, 16px);
}

/* Make JS-generated cards 20% narrower and centered */
.narrow-card{
  width:80%;
  margin-left:auto;
  margin-right:auto;
  max-width: 1000px;
}

/* Two or three column “table” for UID / (time) / score */
.rows{
  display:grid;
  column-gap: 1rem;
  row-gap: .25rem;
  line-height: 1.5;
}
.rows.with-time{
  grid-template-columns: 1fr auto auto; /* UID | Time | Score */
}
.rows .score{ text-align:right; }
.rows .time{ text-align:left; color: var(--muted); font-size:.9rem; }

/* Details/summary styling */
details > summary{
  cursor:pointer;
  list-style:none;
  padding: .25rem 0;
  text-align:left;
}
details > summary::-webkit-details-marker{ display:none; }
details[open] > summary{ color: var(--accent); }

/* Card header line */
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.card-head .title{
  margin:0;
  font-size:1.05rem;
}

/* Winner label should be left-aligned */
.winner-label{ text-align:left; }

/* Keep card title spacing neat */
.section .card h3{ margin-top:0; }

/* CHART: responsive SVG so it doesn't overflow the card */
.chart-svg{
  width:100%;
  height:auto;
  display:block;
}
.axis text{ font-size: 10.5px; fill: var(--muted); }
.axis line, .axis path{ stroke:#555; }
.point circle{ cursor:pointer; }

/* --- Fix: ensure headings render above any decorative shade layers --- */
.site-header { z-index: 1000; }            /* header stays on top */
.section, .container { position: relative; }
.title { position: relative; z-index: 5; } /* lift H1/H2 titles above tints */

/* push common decorative layers below content */
.deco-band,
.shade,
.header-tint,
.card::before {
  z-index: 0 !important;
}

.raise { position: relative; z-index: 10; }


/* ---------- Z-INDEX REPAIRS (place at end of styles.css) ---------- */

/* 1) Make sure the main content creates a stacking context */
main, .section, .container { position: relative; z-index: 0; }

/* 2) Lift headings and cards above any masks/tints */
h1.title, h2.subtitle, .card { position: relative; z-index: 2; }

/* 3) Push common decorative layers behind content */
.deco-band,
.deco-band * ,
.shade,
.header-tint,
.header-shade {
  position: relative;
  z-index: -1 !important;
  pointer-events: none; /* prevent accidental capture */
}

/* 4) If sections use pseudo-element gradients, push those behind too */
.section::before,
.section::after,
.container::before,
.container::after {
  z-index: -1 !important;
  pointer-events: none;
}

/* 5) If cards have a glow/overlay via ::before, keep it under the content */
.card { position: relative; }
.card::before,
.card::after {
  z-index: -1 !important;
  pointer-events: none;
}

/* 6) Ensure the fixed header stays fixed and above background */
.site-header { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; }


/* === Header/ticker width overrides (append near end of styles2.css) === */
.header-row{
  flex-wrap: nowrap;             /* keep everything on one row */
}

.ticker{
  /* wider but still leaves room for the nav on one line */
  flex: 0 1 clamp(420px, 45vw, 800px);
}

.nav{
  flex: 0 0 auto;
  white-space: nowrap;           /* keep Roadmap • Team • Results • Docs on one line */
}

.ticker-track{
  font-size: 12.5px;   /* slightly smaller than body text for headroom */
  gap: 26px;
}

/* Tighten on narrower screens */
@media (max-width: 1150px){
  .ticker{ flex-basis: clamp(380px, 40vw, 560px); }
}
@media (max-width: 1024px){
  .ticker{ flex-basis: clamp(340px, 38vw, 520px); }
  .ticker-track{ font-size: 12px; gap: 24px; }
}

/* Pause marquee on hover */
.ticker:hover .ticker-track { animation-play-state: paused; }


/* Consistent separators between all items, including wrap */
.ticker .sep { padding: 0 12px; opacity: .6; }


/* Pause marquee on hover */
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Even separators everywhere (including wrap) */
.ticker .sep{
  display:inline-block;
  width: 10px;           /* fixed width = consistent spacing */
  text-align:center;
  opacity:.6;
  padding:0;             /* no extra padding */
  margin:0;
}