/* Yap — shared design tokens */

:root {
  --paper: #F2C94C;
  --paperDeep: #DBA934;
  --ink: #17120A;
  --cream: #F7F1DF;
  --teal: #19B39B;
  --tealDark: #0C7469;
  --archiveSoft: #F4DF95;
  --recordRed: #FF4B37;
  --recordDark: #B92920;

  --ink-66: rgba(23, 18, 10, 0.66);
  --ink-42: rgba(23, 18, 10, 0.42);
  --ink-35: rgba(23, 18, 10, 0.35);
  --ink-16: rgba(23, 18, 10, 0.16);
  --ink-08: rgba(23, 18, 10, 0.08);

  --teal-28: rgba(25, 179, 155, 0.28);

  --radius-card: 14px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01' on;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}

/* ============ Poster background (stripes + teal blot) ============ */
.bg-poster {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.bg-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    var(--paperDeep) 0 2px,
    transparent 2px 22px
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.bg-poster.bg-poster--faint::before { opacity: 0.28; }
.bg-poster.bg-poster--whisper::before { opacity: 0.16; }

.poster-content { position: relative; z-index: 1; }

/* Teal blot decoration */
.blot {
  position: absolute;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.55;
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 0;
}

/* ============ Type ============ */
.display {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
}

.eyebrow {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-66);
}

/* Buttons (specificity bump: a.btn beats most nav link selectors) */
a.btn, .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  background: var(--cream);
  color: var(--ink);
}
a.btn:hover, .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--ink); }
a.btn:active, .btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 0 var(--ink); }

a.btn--ink, .btn--ink {
  background: var(--ink);
  color: var(--paper);
}
a.btn--ink:hover, .btn--ink:hover { box-shadow: 4px 4px 0 0 var(--teal); }

.btn--ghost {
  background: transparent;
}

.btn--lg { font-size: 18px; padding: 18px 28px; }

/* ============ Record dot ============ */
.record-dot {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--recordRed);
  border: 3px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(255, 75, 55, 0.18), 6px 6px 0 0 var(--ink);
  cursor: pointer;
  position: relative;
}
.record-dot--lg { width: 124px; height: 124px; }
.record-dot svg { color: var(--cream); }

/* pulse ring (used when recording=true) */
.record-dot.is-pulsing::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--recordRed);
  animation: pulse 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============ Yap card (transcript card) ============ */
.yap-card {
  background: var(--cream);
  border: 1.5px solid var(--ink-35);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  color: var(--ink);
}
.yap-card .text {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}
.yap-card .date {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-42);
}

/* ============ Chatter mark (logo glyph variations) ============ */
.chatter-mark {
  display: inline-block;
  position: relative;
}

/* ============ Footer ============ */
.site-footer {
  border-top: 2px solid var(--ink);
  padding: 48px 0 40px;
  background: var(--paper);
  position: relative;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.site-footer a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ Phone frame (used in hero illustrations) ============ */
.phone {
  width: 280px;
  border-radius: 44px;
  background: var(--ink);
  padding: 8px;
  box-shadow: 10px 10px 0 0 var(--ink);
  position: relative;
}
.phone .screen {
  border-radius: 36px;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: var(--paper);
}
.phone .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ Utility ============ */
.container {
  width: min(1200px, 92vw);
  margin: 0 auto;
}
.container-sm {
  width: min(760px, 92vw);
  margin: 0 auto;
}

.divider-thick {
  height: 4px;
  background: var(--ink);
  width: 100%;
}

/* Tagged "BETA" pill */
.beta-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.beta-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--recordRed);
  box-shadow: 0 0 0 3px rgba(255, 75, 55, 0.25);
}

/* Sticky variation tab bar — top-center, immediately visible */
.var-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
  box-shadow: 4px 4px 0 0 var(--ink);
  font-family: 'Nunito', sans-serif;
}
.var-bar::before {
  content: "Compare:";
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-66);
  padding: 0 10px 0 12px;
  text-transform: uppercase;
}
.var-bar a, .var-bar button {
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.var-bar a:hover, .var-bar button:hover { background: var(--archiveSoft); }
.var-bar a.is-current {
  background: var(--ink);
  color: var(--paper);
}
.var-bar .sep {
  width: 1.5px;
  height: 22px;
  background: var(--ink-16);
  margin: 0 4px;
}

/* Anim toggle (now lives inside var-bar) */
.anim-toggle .led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--recordRed);
  box-shadow: 0 0 0 3px rgba(255, 75, 55, 0.22);
}
.anim-toggle.is-off .led { background: var(--ink-35); box-shadow: none; }

/* Push site nav down so var-bar doesn't overlap it (only on pages with var-bar) */
body:has(.var-bar) { padding-top: 56px; }

@media (max-width: 760px) {
  .var-bar { padding: 4px; gap: 2px; }
  .var-bar::before { padding: 0 6px; font-size: 11px; }
  .var-bar a, .var-bar button { padding: 6px 8px; font-size: 12px; }
  .var-bar .sep { display: none; }
  .anim-toggle { display: none !important; }
  body:has(.var-bar) { padding-top: 50px; }
}

@media (max-width: 720px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}