/* ============================================================
   TWO THEMES, TWO DIFFERENT IDEAS — not a recolor of one template.

   Light / "Editorial": a print-run feel. Fraunces + Instrument Sans,
   ivory + parchment, brass doing the accent work. Hairline rules,
   not boxes — except where boxes deliberately invert (see below).

   Dark / "Signal": a confident, quiet instrument. Bricolage Grotesque
   at every size (one typeface, weight does the work), a soft near-
   black, warm brass for anything you can act on. Space Mono is kept
   in BOTH themes but only for genuine data — timestamps, counters —
   never for decoration. The 3D card field only runs in Signal;
   Editorial stays still and print-like.
   ============================================================ */

:root, :root[data-theme="light"] {
  --bg: #faf6ed;
  --surface: #f1e7d2;
  --surface-raised: #fffdf7;
  --ink: #211e17;
  --ink-dim: #6b6656;
  --ink-deep: #1d1a14;
  --accent: #9c7233;
  --accent-2: #c79a54;
  --alert: #7a2f3a;
  --accent-card-bg: var(--ink-deep);
  --accent-card-fg: #ede7d8;
  --accent-card-fg-muted: #a9a79a;
  --accent-card-accent: #b68d4c;
  --accent-card-accent-2: #d9b679;
  --accent-card-border: rgba(237, 231, 216, 0.14);
  --border: rgba(29, 26, 20, 0.12);
  --border-strong: rgba(29, 26, 20, 0.26);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --radius: 3px;
  --em-style: italic;
  --display-tracking: -0.01em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1210;
    --surface: #171c18;
    --surface-raised: #1d231e;
    --ink: #ede7d8;
    --ink-dim: #9ba39a;
    --ink-deep: #0b0d0b;
    --accent: #b68d4c;
    --accent-2: #d9b679;
    --alert: #8a3644;
    --accent-card-bg: #f2ecdd;
    --accent-card-fg: #1b1b16;
    --accent-card-fg-muted: #5c5a4c;
    --accent-card-accent: #9c7233;
    --accent-card-accent-2: #c79a54;
    --accent-card-border: rgba(29, 26, 20, 0.14);
    --border: rgba(237, 231, 216, 0.10);
    --border-strong: rgba(237, 231, 216, 0.24);
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --radius: 2px;
    --em-style: normal;
    --display-tracking: -0.02em;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1210;
  --surface: #171c18;
  --surface-raised: #1d231e;
  --ink: #ede7d8;
  --ink-dim: #9ba39a;
  --ink-deep: #0b0d0b;
  --accent: #b68d4c;
  --accent-2: #d9b679;
  --alert: #8a3644;
  --accent-card-bg: #f2ecdd;
  --accent-card-fg: #1b1b16;
  --accent-card-fg-muted: #5c5a4c;
  --accent-card-accent: #9c7233;
  --accent-card-accent-2: #c79a54;
  --accent-card-border: rgba(29, 26, 20, 0.14);
  --border: rgba(237, 231, 216, 0.10);
  --border-strong: rgba(237, 231, 216, 0.24);
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --radius: 2px;
  --em-style: normal;
  --display-tracking: -0.02em;
}

body, header, .btn { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

em { font-style: var(--em-style); color: var(--accent); font-family: inherit; }

.reveal-page {
  position: relative;
  z-index: 1;
  animation: page-in .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 3D background: a small, quiet drift of saved clips ----------
   Signal (dark) only — Editorial stays still and paper-like. Off on
   narrow screens and whenever the OS asks for reduced motion. ---------- */

#cn-bg3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#cn-bg3d.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  #cn-bg3d { display: none; }
}

/* ---------- floating text: cheap, CSS-only, every browser ----------
   Plain <span> elements drifting on transform/opacity — no canvas, no
   JS per frame, costs nothing even on weak hardware. Runs in both
   themes (dark a little brighter, since it's carrying more of the
   "alive background" weight there while the 3D layer stays sparse). */

#cn-floattext {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#cn-floattext span {
  position: absolute;
  white-space: nowrap;
  color: var(--ink);
  opacity: var(--float-op, 0.06);
  will-change: transform;
  animation: float-drift linear infinite;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #cn-floattext span { --float-op: 0.1; }
}
:root[data-theme="dark"] #cn-floattext span { --float-op: 0.1; }

@keyframes float-drift {
  0%   { transform: translate(0, 0) rotate(var(--float-rot, -2deg)); }
  50%  { transform: translate(var(--float-dx, 14px), var(--float-dy, -26px)) rotate(calc(var(--float-rot, -2deg) * -1)); }
  100% { transform: translate(0, 0) rotate(var(--float-rot, -2deg)); }
}

@media (max-width: 640px) {
  #cn-floattext span:nth-child(even) { display: none; }
}

/* ---------- reading-progress hairline ---------- */

.progress-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; background: transparent; }
.progress-rail span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }

/* ---------- header ---------- */

header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 24px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-mark { transform: rotate(35deg) scale(1.12); }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: var(--display-tracking); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { position: relative; font-size: 14px; color: var(--ink-dim); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--accent-2); transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }

.theme-toggle {
  display: inline-flex; gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 3px;
}
.theme-toggle.is-switching { animation: toggleFlash .5s ease-out; }
@keyframes toggleFlash {
  0% { box-shadow: 0 0 0 0 rgba(156, 114, 51, .45); }
  100% { box-shadow: 0 0 0 8px rgba(156, 114, 51, 0); }
}
.theme-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.theme-btn:hover { color: var(--accent-2); }
.theme-btn[aria-pressed="true"] { background: var(--accent); color: var(--surface-raised); }

/* ---------- intro ---------- */

.intro { padding: 88px 0 96px; }
.intro-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }

.eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: eyebrowTrackIn .9s ease-out both;
}
@keyframes eyebrowTrackIn {
  from { opacity: 0; letter-spacing: 0.4em; }
  to { opacity: 1; letter-spacing: 0.1em; }
}

.intro h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.08; margin: 0 0 24px; animation: headlineSettle 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes headlineSettle {
  from { opacity: 0; letter-spacing: .06em; transform: translateY(10px); }
  to { opacity: 1; letter-spacing: var(--display-tracking); transform: translateY(0); }
}
.intro .lede { max-width: 46ch; color: var(--ink-dim); font-size: 17px; margin: 0 0 36px; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  transition: opacity .15s ease, border-color .15s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
  animation: brassPulse 3.2s ease-in-out infinite;
}
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
@keyframes brassPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 114, 51, .3); }
  50% { box-shadow: 0 0 14px 4px rgba(156, 114, 51, .16); }
}
:root[data-theme="dark"] .btn-primary { animation-name: brassPulseDark; }
@keyframes brassPulseDark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(182, 141, 76, .35); }
  50% { box-shadow: 0 0 14px 4px rgba(182, 141, 76, .2); }
}

/* the clip preview card drifts and tilts on cursor, instead of sitting
   static like the rest of the page */
.clip-card {
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-raised); overflow: hidden;
  animation: wipeReveal .9s cubic-bezier(.2,.8,.2,1) both, idleFloat 6s ease-in-out infinite 1s;
  transition: transform .15s ease-out, box-shadow .3s ease;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}
.clip-card::before {
  content: ""; position: absolute; top: 10px; left: 10px; width: 0; height: 0;
  border-top: 1.5px solid var(--accent-2); border-left: 1.5px solid var(--accent-2);
  opacity: .7; animation: bracketDraw .6s ease-out .5s both; pointer-events: none;
}
@keyframes bracketDraw { from { width: 0; height: 0; } to { width: 16px; height: 16px; } }
@keyframes idleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wipeReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* cursor glow — intro only, faint, off until the pointer actually enters */
#cn-cursor-glow {
  position: fixed; width: 340px; height: 340px; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(156, 114, 51, .12), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .4s ease;
}
#cn-cursor-glow.is-active { opacity: 1; }
:root[data-theme="dark"] #cn-cursor-glow { background: radial-gradient(circle, rgba(182, 141, 76, .14), transparent 70%); }
.clip-card-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent-card-fg-muted); background: var(--accent-card-bg); transition: background-color .4s ease, color .4s ease; }
.clip-card-body { padding: 22px 20px 24px; }
.clip-card-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-bottom: 16px; }
.clip-card-row b { color: var(--accent); font-weight: 700; }
.clip-quote { font-family: var(--font-display); font-size: 18px; font-style: var(--em-style); font-weight: 500; line-height: 1.5; border-left: 2px solid var(--accent); padding-left: 16px; margin: 0 0 18px; overflow-wrap: anywhere; word-break: break-word; }
.clip-source { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-dim); padding-top: 14px; border-top: 1px solid var(--border); }
.clip-source a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.clip-source a:hover { text-decoration: underline; }

/* ---------- sections ---------- */

.section { padding: 84px 0; border-top: 1px solid var(--border); scroll-margin-top: 74px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.section-head p { color: var(--ink-dim); font-size: 14.5px; max-width: 38ch; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { position: relative; padding-top: 20px; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--border-strong); transition: width .8s ease .1s;
}
.step.in-view::before { width: 100%; }
.step-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 14px; display: block; }
.step.in-view .step-num { animation: numeralIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes numeralIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.step h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.65; }

/* features, platforms, and recent activity share the same hairline-grid
   layout, so the layout rules are combined — but every class still names
   its own content, nothing generic reused between the three sections.

   The boxes themselves invert against the page, the same trick as the
   clip preview card's top bar: dark boxes on the light "Editorial" page,
   light paper boxes on the dark "Signal" page — so the accent and border
   tokens they use are the cross-referenced --accent-card-* set, not the
   page's own --accent/--border (which would go low-contrast against an
   inverted background). */
.features, .platforms, .activity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--accent-card-border); border: 1px solid var(--accent-card-border); }
.feature, .platform, .activity-entry { background: var(--accent-card-bg); color: var(--accent-card-fg); padding: 30px 28px; transition: background-color .4s ease, color .4s ease; }
.feature-mark, .platform-mark { font-family: var(--font-mono); font-size: 11px; color: var(--accent-card-accent); letter-spacing: 0.08em; margin-bottom: 16px; }
.feature h3, .platform h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin: 0 0 8px; }
.feature p, .platform p { font-size: 13.5px; color: var(--accent-card-fg-muted); margin: 0 0 16px; line-height: 1.65; }
.feature-meter { height: 2px; background: var(--accent-card-border); border-radius: 2px; overflow: hidden; }
.feature-meter span { display: block; height: 100%; width: 0%; background: var(--accent-card-accent-2); transition: width 1s cubic-bezier(.2,.8,.2,1); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-num { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.stat-label { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); text-transform: uppercase; }

/* recent activity — real feed */
.activity-entry {
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
  transition: box-shadow .2s ease;
}
.activity-entry:hover { box-shadow: inset 0 0 0 1px var(--accent-card-accent-2); }
.activity-entry:hover .activity-body p { color: var(--accent-card-accent); }
.activity-date { font-family: var(--font-mono); font-size: 11px; color: var(--accent-card-accent); letter-spacing: 0.08em; }
.activity-date .op { color: var(--accent-card-fg-muted); font-family: var(--font-body); font-weight: 600; margin-left: 6px; }
.activity-body p { margin: 0; color: var(--accent-card-fg); font-size: 14.5px; line-height: 1.6; transition: color .15s ease; overflow-wrap: anywhere; word-break: break-word; }
.activity-video-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--accent-card-accent-2); border: 1px solid var(--accent-card-accent-2); border-radius: var(--radius); padding: 3px 8px; margin-bottom: 8px; }
.activity-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-card-fg-muted); }
.activity-meta .src { margin-left: 6px; }
.feed-state { grid-column: 1 / -1; background: var(--accent-card-bg); color: var(--accent-card-fg-muted); padding: 30px 28px; font-size: 14px; }

/* platforms */
.platform-note { margin-top: 22px; font-size: 13px; color: var(--ink-dim); }
.platform-note a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.platform-note a:hover { text-decoration: underline; }

/* faq */
.faq { border-top: 1px solid var(--border); }
.faq-question { padding: 20px 0; border-bottom: 1px solid var(--border); }
.faq-question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
  transition: color .25s ease;
}
.faq-question summary::-webkit-details-marker { display: none; }
.faq-question summary:hover { color: var(--accent-2); }
.faq-question .plus {
  position: relative; flex-shrink: 0; width: 14px; height: 14px;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.faq-question .plus::before, .faq-question .plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent);
  transform: translate(-50%, -50%);
}
.faq-question .plus::before { width: 12px; height: 1.5px; }
.faq-question .plus::after { width: 1.5px; height: 12px; }
.faq-question[open] summary .plus { transform: rotate(45deg); }
.faq-question p { margin: 14px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.7; max-width: 62ch; }

.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); margin-right: 10px; vertical-align: middle;
  animation: livePulse 2s infinite ease-in-out;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--border); padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 44px; }
.footer-brand p { margin: 14px 0 0; max-width: 26ch; color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; }
.footer-col-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 22px 0 32px; border-top: 1px solid var(--border); }
.footer-plate { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-dim); }
.footer-bottom a { color: var(--ink-dim); text-decoration: none; font-size: 13px; }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- scroll reveal ---------- */

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .features, .platforms, .activity-list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .header-inner { gap: 12px; }
  .theme-btn { padding: 6px 9px; font-size: 9.5px; }
  .footer-grid { grid-template-columns: 1fr; }
}