/* ============================================================
   BiteCast — field report aesthetic
   Newsreader (display serif) + IBM Plex Mono (body/data)
   Paper + ink palette · ruled margins · §-numbered sections
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper:        #f4ede0;
  --paper-deep:   #ebe2d2;
  --ink:          #1a1714;
  --ink-faded:    #6d6356;
  --rule:         #1a171433;
  --rule-strong:  #1a17147a;
  --cold:         #2548a8;
  --cold-deep:    #1b3478;
  --alert:        #c43a2a;
  --highlight:    #e8d96a40;
  --margin-w:     6rem;

  --display: 'Newsreader', 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--paper);
  font-feature-settings: 'tnum' 1;
}

::selection { background: var(--ink); color: var(--paper); }

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.masthead-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.masthead-brand .logo {
  /* Wordmark uses Georgia to match the brand sheet exactly.
     Rest of the page (h1, h2, lede, FAQ) keeps Newsreader. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.masthead-brand .logo-hook {
  display: inline-block;
  height: 1.55em;
  width:  auto;
  margin: 0 -0.32em 0 0.04em;
  /* Parent .logo is `inline-flex` — vertical-align on flex children is
     ignored. translateY works regardless of parent display and reliably
     shifts the visual position of the hook down so the eye sits closer
     to cap height instead of floating above it. */
  transform: translateY(0.22em);
}
.masthead-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  color: var(--ink-faded);
}
.masthead-meta strong { color: var(--ink); font-weight: 500; }
.lang-switch {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
}
.lang-switch a {
  color: var(--ink-faded);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.lang-switch a.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.lang-switch span { color: var(--rule-strong); }

/* ============================================================
   ARTICLE — ruled-margin grid
   ============================================================ */

main { display: block; }

.article {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.section {
  padding: 2.5rem 0 1.5rem;
  position: relative;
}

/* ============================================================
   CAST-ARC DECORATION — brand motif used as section divider
   and end-mark. Inline SVG, currentColor-driven so it inherits
   dark/light contexts. The dot lives at the right end (matches
   the standalone avatar).
   ============================================================ */

.cast-divider,
.cast-end {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.cast-divider {
  margin: 0 auto;
  padding: 1.75rem 0 0.25rem;
  grid-column: 1 / -1;  /* span the section grid */
}
.cast-end {
  padding: 2.5rem 0 0.5rem;
}

.cast-divider img,
.cast-end img {
  display: block;
  max-width: 100%;
}
.cast-divider img { opacity: 0.45; }
.cast-end img     { opacity: 0.6; }

/* Inline small arc — for use inside text or after CTAs */
.cast-inline {
  display: inline-block;
  width: 32px;
  height: 12px;
  margin-left: 0.4em;
  vertical-align: middle;
  color: var(--ink-faded);
}
.cast-inline svg { width: 100%; height: 100%; display: block; }

.section-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
  align-self: start;
  padding-top: 0.5rem;
  text-align: right;
  border-right: 1px solid var(--rule);
  padding-right: 1rem;
  white-space: nowrap;
}
.section-num strong { color: var(--ink); font-weight: 500; }
.section-num small {
  display: block;
  font-size: 0.65rem;
  margin-top: 0.5rem;
  text-transform: none;
  letter-spacing: 0.04em;
  text-align: right;
}

.section-body {
  min-width: 0;
  padding-top: 0.25rem;
}

/* ============================================================
   HERO
   ============================================================ */

/* WHY epigraph — sits above the h1 as the thesis line.
   Italic Newsreader in cold-blue to signal "this is a belief, not a feature." */
.hero-why {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--cold);
  margin: 0 0 1.25rem;
  max-width: 38ch;
  letter-spacing: 0.005em;
}

/* PAIN paragraph — small ink-faded text setting up the differentiator section */
.section-intro {
  font-family: var(--display);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-faded);
  max-width: 56ch;
  margin: 0 0 0.5rem;
}
.section-intro strong { color: var(--ink); font-weight: 500; }

h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 22ch;
  color: var(--ink);
}
h1 em {
  font-style: italic;
  color: var(--cold);
  font-weight: 400;
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  max-width: 52ch;
  margin: 0 0 1.5rem;
  color: var(--ink);
}

.cross-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cold);
  text-decoration: none;
  border-bottom: 1px solid var(--cold);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s, gap 0.15s;
}
.cross-ref::after {
  content: '→';
  font-family: var(--mono);
  transition: transform 0.15s;
}
.cross-ref:hover {
  color: var(--cold-deep);
  border-color: var(--cold-deep);
}
.cross-ref:hover::after { transform: translateX(3px); }
.cross-ref.small { font-size: 0.8rem; }

.hero-meta {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faded);
  text-transform: uppercase;
}

/* ============================================================
   FIGURE — bite card as embedded plate
   ============================================================ */

.figure {
  margin: 2.5rem 0;
}

.figure-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
  text-align: right;
  padding-right: 1rem;
  padding-top: 0.5rem;
  border-right: 1px solid var(--rule);
}
.figure-label strong { color: var(--ink); font-weight: 500; }

.figure-plate {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 1.25rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink);
  cursor: crosshair;
  overflow: hidden;
}

.figure-plate::before {
  content: 'TELEGRAM TRANSCRIPT · @bitecast_bot · 2026-05-16';
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}

.bite-card {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.bite-card .line {
  display: block;
  overflow: hidden;
  white-space: pre-wrap;
  min-height: 1.55em;
}

.figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faded);
  margin-top: 0.75rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--cold);
  line-height: 1.5;
}

/* Teletype animation: each line wipes in left→right */
.bite-card.tape .line {
  clip-path: inset(0 100% 0 0);
  animation: type 350ms steps(40, end) forwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}
@keyframes type { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .bite-card.tape .line {
    clip-path: none;
    animation: none;
  }
}

/* ============================================================
   FEATURES — asymmetric three-column grid
   ============================================================ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.feature {
  border-top: 1px solid var(--ink);
  padding-top: 0.85rem;
}
.feature:nth-child(1) { grid-column: span 3; }
.feature:nth-child(2) { grid-column: span 2; }
.feature:nth-child(3) { grid-column: span 5; max-width: 56ch; }

.feature-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.feature h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.feature p {
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 44ch;
}
.feature code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--highlight);
  padding: 0 0.2em;
}

/* ============================================================
   PRICING — typewritten invoice
   ============================================================ */

.invoice {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.invoice caption {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding-bottom: 0.6rem;
  caption-side: top;
}
.invoice th, .invoice td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.invoice thead th {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--ink);
  padding-top: 0;
}
.invoice thead th .tier-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-top: 0.3rem;
}
.invoice tr.row-cta td { padding-top: 1.2rem; border-bottom: none; }
.invoice .check { color: var(--cold); margin-right: 0.4em; }
.invoice .dash  { color: var(--ink-faded); margin-right: 0.4em; }
.invoice th:first-child {
  width: 11rem;
  color: var(--ink-faded);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--mono);
}

/* ============================================================
   FAQ — interview style
   ============================================================ */

.faq-list {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
.faq-list details {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
}
.faq-list summary {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: 'Q.';
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--cold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.faq-list details[open] summary::before { content: 'Q—'; }
.faq-list .faq-answer {
  margin: 0.6rem 0 0;
  padding-left: 1.6rem;
  position: relative;
  max-width: 60ch;
  color: var(--ink);
}
.faq-list .faq-answer::before {
  content: 'A.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faded);
}
.faq-list .faq-answer p { margin: 0; line-height: 1.6; }
.faq-list code {
  font-family: var(--mono);
  background: var(--highlight);
  padding: 0 0.2em;
}

/* Species engraving grid — vintage natural-history illustrations,
   public-domain woodcuts from 1886–1924 sources */
.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem 1rem;
  margin: 1.25rem 0 1rem;
  max-width: 60ch;
}
.species-grid figure {
  margin: 0;
  text-align: center;
}
.species-grid img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 60px;
  object-fit: contain;
  margin: 0 auto 0.4rem;
  /* Background removal: darken blend keeps only pixels darker than the
     cream page background, so white/off-white scan backgrounds drop out
     entirely. Contrast boost pushes mid-tones harder so the engravings
     read like they're printed on the paper. */
  mix-blend-mode: darken;
  filter: contrast(1.25) brightness(1.05);
}
.species-grid figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--ink);
}
.species-grid figcaption em {
  display: block;
  font-style: italic;
  color: var(--ink-faded);
  font-size: 0.65rem;
  margin-top: 0.15rem;
}
.species-attribution {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faded);
  font-style: italic;
  margin-top: 0.5rem !important;
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */

.colophon {
  border-top: 2px solid var(--ink);
  background: var(--paper-deep);
}
.colophon-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: var(--margin-w) minmax(0, 1fr);
  gap: 1.5rem;
}
.colophon-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  text-transform: uppercase;
  text-align: right;
  padding-right: 1rem;
  border-right: 1px solid var(--rule);
}
.colophon-body {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faded);
  line-height: 1.65;
  max-width: 60ch;
}
.colophon-body strong { color: var(--ink); font-weight: 500; }
.colophon-body .cross-ref { font-size: 0.8rem; }
.colophon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   PAGE-LOAD STAGGER
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: rise 600ms cubic-bezier(0.2, 0.6, 0.1, 1) forwards;
}
.reveal-1 { animation-delay: 100ms; }
.reveal-2 { animation-delay: 240ms; }
.reveal-3 { animation-delay: 380ms; }
.reveal-4 { animation-delay: 520ms; }
.reveal-5 { animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; animation: none; }
}

/* ============================================================
   RESPONSIVE — collapse margin column on small screens
   ============================================================ */

@media (max-width: 720px) {
  :root { --margin-w: 0px; }
  .article { padding: 0 1.25rem 3rem; }
  .section, .figure, .colophon-inner {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .section-num, .figure-label, .colophon-label {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 0.5rem;
    text-align: left;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .section-num small { margin-top: 0; }
  .features-grid { grid-template-columns: 1fr; }
  .feature:nth-child(n) { grid-column: auto; max-width: none; }
  .invoice { font-size: 0.78rem; }
  .invoice th:first-child { width: 7rem; }
  .figure-plate { font-size: 0.72rem; padding: 1rem 1.1rem; }
  h1 { max-width: 100%; }
}