/* The Thinking Experience — website styles */
@import url("./colors_and_type.css");

/* Accent is overridable at the root (Tweaks). Everything derives from --ttx-yellow,
   so glows/shadows use color-mix off the same token and swap with it. */
:root {
  --accent-soft:  color-mix(in srgb, var(--ttx-yellow) 22%, transparent);
  --accent-faint: color-mix(in srgb, var(--ttx-yellow) 8%, transparent);
  --accent-ring:  color-mix(in srgb, var(--ttx-yellow) 35%, transparent);
  --glow-strength: 0.22;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ttx-ink); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--ttx-yellow); color: var(--ttx-amber-ink); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-ui); font-weight:700; font-size:15px; letter-spacing:0.04em; text-transform:uppercase; padding:15px 28px; border-radius:var(--r-md); border:1px solid transparent; line-height:1; transition: all var(--dur-fast) var(--ease-out); white-space:nowrap; }
.btn-primary { background:var(--ttx-yellow); color:var(--ttx-amber-ink); box-shadow:0 0 0 1px var(--accent-ring), 0 8px 28px var(--accent-soft); }
.btn-primary:hover { background:var(--ttx-yellow-bright); transform:translateY(-1px); }
.btn-primary:active { background:var(--ttx-yellow-deep); transform:scale(0.98); }
.btn-ghost { background:transparent; color:var(--fg1); border-color:#454545; }
.btn-ghost:hover { border-color:var(--ttx-yellow); color:var(--ttx-yellow); }
.btn-text { background:transparent; color:var(--ttx-yellow); padding:15px 4px; }
.btn-text:hover { gap:13px; }

/* ---- Eyebrow ---- */
.eyebrow { font-family:var(--font-ui); font-weight:700; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ttx-yellow); }
.eyebrow.slate { color: var(--ttx-slate-soft); }
.eyebrow.mut { color: var(--fg3); }

/* ---- Tag ---- */
.tag { display:inline-block; font-family:var(--font-ui); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 13px; border-radius:var(--r-pill); line-height:1; }
.tag-solid { background:var(--ttx-yellow); color:var(--ttx-amber-ink); }
.tag-outline { background:transparent; color:var(--fg1); border:1px solid #454545; }
.tag-slate { background:color-mix(in srgb, var(--ttx-slate) 22%, transparent); color:var(--ttx-slate-soft); }

/* ---- Section rhythm ---- */
.section { padding: clamp(72px, 9vw, 132px) 0; }
.section-head { max-width: 800px; }
.section-head h2 { margin: 18px 0 0; }
.lead { font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.55; color:var(--fg2); }

/* ---- Hairline divider device (the wordmark bar) ---- */
.vrule { width:1px; align-self:stretch; background:#3f3f3f; }
.hrule { height:1px; background:var(--ttx-ink-line); border:0; margin:0; }

/* ---- Glow ---- */
.glow-bg { position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--ttx-yellow) calc(var(--glow-strength) * 100%), transparent) 0%,
    color-mix(in srgb, var(--ttx-yellow) calc(var(--glow-strength) * 28%), transparent) 40%,
    transparent 68%); }

/* ---- Big statement type ---- */
.statement { font-family:var(--font-display); font-weight:700; text-transform:uppercase; line-height:0.94; letter-spacing:-0.01em; color:var(--fg1); }
.statement .y { color:var(--ttx-yellow); }

/* ---- Entrance (no-op; content always visible) ---- */
.rise { opacity: 1; transform: none; }

/* ---- Marquee ---- */
.marquee { overflow:hidden; border-top:1px solid var(--ttx-ink-line); border-bottom:1px solid var(--ttx-ink-line); padding:20px 0; background:var(--ttx-ink-true); }
.marquee-track { display:flex; gap:0; white-space:nowrap; width:max-content; animation: marquee 32s linear infinite; }
.marquee span { font-family:var(--font-display); font-weight:700; font-size:28px; text-transform:uppercase; letter-spacing:0.03em; color:var(--fg2); display:inline-flex; align-items:center; gap:30px; padding:0 30px; }
.marquee .dot { color: var(--ttx-yellow); display:inline-flex; align-items:center; }
.marquee .dot svg { width:15px; height:15px; }
@keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Ecosystem / division cells ---- */
.grid-cells { display:grid; border:1px solid var(--ttx-ink-line); }
.cell { padding:34px 30px 36px; display:flex; flex-direction:column; min-height:300px; border-top:1px solid var(--ttx-ink-line); border-left:1px solid var(--ttx-ink-line); margin:-1px 0 0 -1px; position:relative; transition: background var(--dur-base) var(--ease-out); }
.cell:hover { background:var(--ttx-ink-raised); }
.cell .num { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ttx-yellow); letter-spacing:0.04em; }
.cell .ct { font-family:var(--font-display); font-weight:700; font-size:30px; text-transform:uppercase; color:var(--fg1); line-height:0.98; margin:auto 0 12px; }
.cell .cb { font-family:var(--font-body); font-size:15px; line-height:1.55; color:var(--fg2); margin:0; }
.cell .crole { font-family:var(--font-ui); font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg3); margin-bottom:18px; }

/* ---- Problem two-column list ---- */
.prob { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--ttx-ink-line); }
.prob > div { padding:34px 32px; }
.prob > div + div { border-left:1px solid var(--ttx-ink-line); }
.prob h4 { font-family:var(--font-display); font-weight:700; font-size:22px; text-transform:uppercase; color:var(--fg1); margin:0 0 20px; }
.prob ul { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.prob li { display:flex; gap:12px; align-items:baseline; font-family:var(--font-body); font-size:15px; line-height:1.45; color:var(--fg2); }
.prob li::before { content:""; flex:0 0 auto; width:7px; height:7px; margin-top:7px; background:var(--ttx-yellow); transform:rotate(45deg); }

/* ---- Stat / belief band ---- */
.beliefs { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--ttx-ink-line); }
.belief { padding:30px; border-left:1px solid var(--ttx-ink-line); }
.belief:first-child { border-left:0; }
.belief .bk { font-family:var(--font-ui); font-weight:700; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ttx-yellow); margin-bottom:14px; }
.belief .bt { font-family:var(--font-display); font-weight:700; font-size:24px; text-transform:uppercase; line-height:1.02; color:var(--fg1); }

@media (max-width: 860px) {
  .prob, .beliefs { grid-template-columns:1fr; }
  .prob > div + div, .belief { border-left:0; border-top:1px solid var(--ttx-ink-line); }
  .belief:first-child { border-top:0; }
}

/* ---- Footer ---- */
.foot-link { font-family:var(--font-body); font-size:14px; line-height:1.3; color:var(--fg2); transition: color var(--dur-fast); white-space:nowrap; }
.foot-link:hover { color:var(--ttx-yellow); }

/* ---- Hero: split with video ---- */
.hero-split { position:relative; display:grid; grid-template-columns:1.02fr 1fr; gap:56px; align-items:center; padding:clamp(56px,8vw,110px) 32px clamp(52px,7vw,96px); }

/* ---- Event video (mockup player) ---- */
.vid { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--ttx-ink-line); background:var(--ttx-ink-true); }
.vid-slot { position:absolute; inset:0; }
.vid-label { font-family:var(--font-mono); font-size:11px; color:#cfcbc4; }
.vid-bottom { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(to top, rgba(14,14,14,.86), transparent); }

/* ---- Hero: full-bleed video background ---- */
.hero-vbg { position:relative; overflow:hidden; background:var(--ttx-ink-true); }
.hero-vbg-media { position:absolute; inset:0; z-index:0; }
.hero-vbg-img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-vbg-scrim { position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(62% 62% at 50% 42%, rgba(14,14,14,.72) 0%, rgba(14,14,14,.88) 68%, rgba(14,14,14,.96) 100%); }
.hero-vbg-meta { position:relative; z-index:3; display:flex; justify-content:space-between; gap:16px; max-width:1180px; margin:0 auto; padding:0 32px 26px; font-family:var(--font-mono); font-size:12px; color:#cfcbc4; }
/* Content sits above the media, but lets drops fall through to the slot;
   interactive children opt back in. */
.hero-vbg > .wrap { z-index:3; pointer-events:none; }
.hero-vbg > .wrap button, .hero-vbg > .wrap a { pointer-events:auto; }
@media (max-width: 760px) { .hero-split { grid-template-columns:1fr; gap:36px; } }

/* ---- Latest editions (tabbed mosaic) ---- */
.ed-tabs { display:flex; border:1px solid var(--ttx-ink-line); margin-top:44px; }
.ed-tab { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px 22px; border:0; border-right:1px solid var(--ttx-ink-line); background:none; text-align:left; transition: background var(--dur-base) var(--ease-out); }
.ed-tab:last-child { border-right:0; }
.ed-tab.on, .ed-tab:hover { background:var(--ttx-ink-raised); }
.ed-n { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--ttx-yellow); }
.ed-t { font-family:var(--font-display); font-weight:700; font-size:21px; text-transform:uppercase; line-height:1; color:var(--fg3); transition: color var(--dur-base) var(--ease-out); }
.ed-tab.on .ed-t, .ed-tab:hover .ed-t { color:var(--fg1); }
.ed-d { font-family:var(--font-mono); font-size:11px; color:var(--fg3); }
.ed-mosaic { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:8px; margin-top:8px; }
.ed-ph { position:relative; border:1px solid var(--ttx-ink-line); background:var(--ttx-ink-raised); overflow:hidden; transition: border-color var(--dur-base) var(--ease-out); }
.ed-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ed-ph:hover { border-color:var(--ttx-yellow); }
.ed-ph.big { grid-column:span 2; grid-row:span 2; }
.ed-ph.wide { grid-column:span 2; }
.ed-meta { display:flex; justify-content:space-between; gap:24px; margin-top:16px; font-family:var(--font-mono); font-size:12px; color:var(--fg3); flex-wrap:wrap; }

/* ---- Editions modal rows ---- */
.edition-row { display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--ttx-ink-line); }
.edition-n { font-family:var(--font-mono); font-size:14px; color:var(--ttx-yellow); flex:0 0 auto; }
.edition-body { flex:1; min-width:0; }
.edition-title { font-family:var(--font-display); font-weight:700; font-size:22px; text-transform:uppercase; line-height:1; color:var(--fg1); }
.edition-note { font-family:var(--font-body); font-size:13px; color:var(--fg3); margin-top:6px; }

/* ---- Sponsors ---- */
.sp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:56px; }
.sp-card { display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:28px 30px 26px; min-height:230px; background:var(--ttx-ink); border:1px solid var(--ttx-ink-line); border-top:3px solid var(--ttx-yellow); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.sp-card:hover { background:var(--ttx-ink-raised); }
.sp-tier { font-family:var(--font-ui); font-weight:700; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ttx-yellow); }
.sp-logo { flex:1; display:flex; align-items:center; width:100%; }
.sp-logo img { max-width:80%; max-height:70px; width:auto; height:auto; object-fit:contain; }
.sp-name { font-family:var(--font-ui); font-weight:600; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg3); }
.sp-open { border-top-color:var(--ttx-ink-line); border-style:dashed; }
.sp-open .sp-tier { color:var(--fg3); }
.sp-logo-empty { flex:1; display:flex; align-items:center; font-family:var(--font-body); font-size:15px; color:var(--fg3); }

/* ---- Responsive grids ---- */
.event-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.eco-grid { grid-template-columns:repeat(4, 1fr); }
.founder-grid { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; }

/* Tablet */
@media (max-width: 960px) {
  .eco-grid { grid-template-columns:repeat(2, 1fr); }
  .ed-mosaic { grid-auto-rows:120px; }
}

/* Mobile */
@media (max-width: 760px) {
  .nav-links { display:none !important; }
  .event-grid { grid-template-columns:1fr; gap:40px; }
  .founder-grid { grid-template-columns:1fr; gap:28px; justify-items:start; }
  .cell { min-height:0; }
}

@media (max-width: 520px) {
  .wrap { padding:0 20px; }
  .eco-grid { grid-template-columns:1fr; }
  .ed-tabs { flex-direction:column; }
  .ed-tab { border-right:0; border-bottom:1px solid var(--ttx-ink-line); }
  .ed-tab:last-child { border-bottom:0; }
  .ed-mosaic { grid-template-columns:repeat(2,1fr); grid-auto-rows:110px; }
}