/* ═══════════════════════════════════════════════════════════════════════════
   TAHR7 — public site
   Same palette and geometry as the hub, so the two read as one thing.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --yellow: #f9ec31;
  --bg: #0c0c0e;
  --surface: #17171a;
  --surface-2: #1e1e21;
  --ink: #f2f2f3;
  --ink-dim: #a0a0a8;
  --ink-faint: #6a6a74;
  --edge: rgba(255, 255, 255, 0.09);
  --edge-hi: rgba(255, 255, 255, 0.2);
  --red: #ff5a5a;
  --radius: 4px;
  --radius-lg: 8px;
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: #000; }
img { max-width: 100%; display: block; }

.hexfield {
  position: fixed; inset: -60px; z-index: -2; pointer-events: none; opacity: 0.45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'><path d='M28 0.5 L55.5 16.5 L55.5 48.5 L28 64.5 L0.5 48.5 L0.5 16.5 Z'/><path d='M28 48.5 L55.5 64.5 L55.5 96.5 L28 112.5 L0.5 96.5 L0.5 64.5 Z'/></g></svg>");
}
.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -10%, rgba(249, 236, 49, 0.15), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(249, 236, 49, 0.05), transparent 70%);
}

.mark { width: 100%; height: 100%; color: var(--yellow); }

/* ── bar ─────────────────────────────────────────────────────────────────── */

.bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px clamp(16px, 5vw, 40px);
  max-width: 1100px; margin: 0 auto;
}
.bar-brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; letter-spacing: 0.02em; font-size: 17px;
}
.bar-brand .mark { width: 22px; height: 25px; }
.bar-brand i { font-style: normal; color: var(--yellow); }
.bar-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bar-me {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-dim); text-decoration: none; font-size: 14px;
}
.bar-me img { border-radius: 50%; border: 1px solid var(--edge); }
.bar-me:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
  font-size: 14px; font-weight: 620; text-decoration: none; white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.btn:hover { background: #26262a; border-color: var(--edge-hi); transform: translateY(-1px); }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: #14140b; font-weight: 750; }
.btn.primary:hover { background: #fff36a; border-color: #fff36a; }
.btn.ghost { background: transparent; }
.btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 680; }
.btn.discord:hover { background: #6b76f5; border-color: #6b76f5; }

/* ── hero ────────────────────────────────────────────────────────────────── */

main { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px); }

.hero { text-align: center; padding: clamp(30px, 8vw, 70px) 0 clamp(40px, 9vw, 80px); }
.hero-mark { width: clamp(64px, 14vw, 92px); height: clamp(74px, 16vw, 106px); margin: 0 auto 20px; }
.hero-mark .mark { filter: drop-shadow(0 0 26px rgba(249, 236, 49, 0.32)); }

.wordmark {
  margin: 0;
  font-size: clamp(52px, 15vw, 104px);
  font-weight: 900; letter-spacing: -0.035em; line-height: 0.9; color: #fff;
}
.wordmark span { color: var(--yellow); }
.tagline { margin: 16px auto 0; max-width: 520px; font-size: clamp(16px, 3.4vw, 19px); color: var(--ink-dim); }
.blurb { margin: 12px auto 0; max-width: 480px; font-size: 15px; color: var(--ink-faint); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }

.live {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; margin-bottom: 22px;
  border: 1px solid var(--red); border-radius: 999px;
  background: rgba(255, 90, 90, 0.1); color: var(--red);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── sections ────────────────────────────────────────────────────────────── */

.section { padding-bottom: clamp(36px, 8vw, 64px); }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.section-head h2 {
  margin: 0; font-size: 13px; font-weight: 750;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.section-more { margin-left: auto; color: var(--yellow); text-decoration: none; font-size: 13px; }
.section-more:hover { text-decoration: underline; }

/* ── the latest video ────────────────────────────────────────────────────────
 * One video, laid out as a wide card: thumbnail beside the copy on a desktop,
 * stacked on a phone. The 16:9 box is fixed by aspect-ratio and the text column
 * is minmax(0, 1fr) -- a grid child defaults to min-width:auto, which is what
 * makes a long title push the whole card past the viewport.
 */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--yellow);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.feature-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); min-width: 0; }
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-thumb.empty {
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 8px, transparent 8px 16px), var(--surface-2);
}
.feature-play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); border: 1px solid var(--edge-hi);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.feature-play::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 20px;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.feature:hover .feature-play { background: var(--yellow); transform: scale(1.08); }
.feature:hover .feature-play::before { border-left-color: #14140b; }

.feature-body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; padding: clamp(18px, 3vw, 30px); min-width: 0;
}
.feature-kicker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow);
}
.feature-title {
  margin: 0; font-size: clamp(19px, 2.4vw, 26px); font-weight: 750; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-excerpt {
  margin: 0; font-size: 14px; color: var(--ink-dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-go { margin-top: 4px; font-size: 13px; font-weight: 650; color: var(--yellow); }

.links { display: grid; gap: 8px; }
.linkrow {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 17px;
  border: 1px solid var(--edge); border-left: 2px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.linkrow:hover { background: var(--surface-2); transform: translateX(3px); }
.linkrow-label { flex: 1; font-weight: 620; }
.linkrow-go { color: var(--yellow); }

.foot {
  display: flex; align-items: center; gap: 16px;
  max-width: 1100px; margin: 0 auto;
  padding: 28px clamp(16px, 5vw, 40px) calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--edge);
  color: var(--ink-faint); font-size: 13px;
}
.foot a { margin-left: auto; color: var(--ink-faint); text-decoration: none; }
.foot a:hover { color: var(--yellow); }

/* ── 404 / 500 ───────────────────────────────────────────────────────────── */

.tiny { display: grid; place-items: center; min-height: 100vh; }
.tiny-main { text-align: center; padding: 24px; }
.tiny-code { margin: 0; font-size: clamp(56px, 16vw, 96px); font-weight: 900; color: var(--yellow); line-height: 1; }
.tiny-msg { margin: 8px 0 24px; color: var(--ink-dim); }

/* ── mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .bar { padding-top: calc(14px + env(safe-area-inset-top)); }
  .bar-me span { display: none; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-body { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}