/* ============================================================
   BRIAN BRESLIN — DESIGN TOKENS
   Brand color: Electric Ultramarine (#2B3FFF)
   Type: Tiempos-style serif (Source Serif 4) + Inter + JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── color: brand ─────────────────────────────────── */
  --bb-ink: #0B0D12;          /* near-black, slight blue */
  --bb-ink-2: #1A1D26;
  --bb-ink-3: #2A2E3B;
  --bb-paper: #FBFAF6;        /* warm off-white */
  --bb-paper-2: #F4F1EA;      /* slightly deeper cream */
  --bb-paper-3: #ECE7DC;      /* card hover / dividers */
  --bb-rule: #E2DCCD;         /* hairlines */
  --bb-muted: #6B6557;        /* warm gray text */
  --bb-muted-2: #9A9486;

  /* the brand pop */
  --bb-blue: #2F8F5F;         /* forest green accent */
  --bb-blue-deep: #1F6940;
  --bb-blue-tint: #E5F2EB;

  /* secondary signals */
  --bb-amber: #E8A33D;        /* "shipping" */
  --bb-green: #2F8F5F;        /* "live" */
  --bb-rust: #C8553D;         /* "sunset / archive" */

  /* ── type ─────────────────────────────────────────── */
  --bb-serif: 'Source Serif 4', 'Tiempos Text', Georgia, serif;
  --bb-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bb-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* ── spacing / radii ──────────────────────────────── */
  --bb-r-sm: 4px;
  --bb-r-md: 8px;
  --bb-r-lg: 14px;
  --bb-r-xl: 22px;

  /* ── shadow ───────────────────────────────────────── */
  --bb-shadow-sm: 0 1px 2px rgba(11,13,18,0.04), 0 1px 1px rgba(11,13,18,0.02);
  --bb-shadow-md: 0 4px 16px -4px rgba(11,13,18,0.08), 0 2px 4px rgba(11,13,18,0.04);
  --bb-shadow-lg: 0 24px 48px -16px rgba(11,13,18,0.18), 0 8px 16px -8px rgba(11,13,18,0.08);
}

/* ── base reset for artboards ────────────────────────── */
.bb {
  font-family: var(--bb-sans);
  color: var(--bb-ink);
  background: var(--bb-paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }
.bb h1, .bb h2, .bb h3, .bb h4, .bb p, .bb ul, .bb ol, .bb figure {
  margin: 0; padding: 0; list-style: none;
}
.bb a { color: inherit; text-decoration: none; }
.bb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Paragraph spacing for markdown-rendered prose (overrides the global reset above) */
.bb-essay-md p, .bb-prose p { margin-bottom: 1.35em; }
.bb-essay-md p:last-child, .bb-prose p:last-child { margin-bottom: 0; }

/* ── utility text styles ─────────────────────────────── */
.bb-mono   { font-family: var(--bb-mono); font-feature-settings: "zero", "ss01"; }
.bb-serif  { font-family: var(--bb-serif); }
.bb-sans   { font-family: var(--bb-sans); }
.bb-eyebrow {
  font-family: var(--bb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-caps {
  font-family: var(--bb-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── micro-interactions ──────────────────────────────── */
.bb-link {
  display: inline-flex; align-items: baseline; gap: 4px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.bb-link:hover { color: var(--bb-blue); border-color: var(--bb-blue); }

.bb-arrow {
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.bb-link:hover .bb-arrow { transform: translateX(3px); }

/* ── badges / status pills ───────────────────────────── */
.bb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bb-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--bb-rule);
}
.bb-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.bb-pill--live    { color: var(--bb-green);  background: color-mix(in oklab, var(--bb-green) 10%, transparent); border-color: color-mix(in oklab, var(--bb-green) 25%, transparent); }
.bb-pill--ship    { color: var(--bb-amber);  background: color-mix(in oklab, var(--bb-amber) 12%, transparent); border-color: color-mix(in oklab, var(--bb-amber) 30%, transparent); }
.bb-pill--build   { color: var(--bb-blue);   background: var(--bb-blue-tint); border-color: color-mix(in oklab, var(--bb-blue) 25%, transparent); }
.bb-pill--sunset  { color: var(--bb-rust);   background: color-mix(in oklab, var(--bb-rust) 10%, transparent); border-color: color-mix(in oklab, var(--bb-rust) 25%, transparent); }

/* ── selection ───────────────────────────────────────── */
.bb ::selection { background: var(--bb-blue); color: white; }

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Default: tighter side padding for any .bb section */
  .bb section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Top sticky nav: tighten, allow it to fit, hide non-essential link list */
  .bb > header { padding: 12px 12px !important; }
  .bb > header > nav {
    padding: 6px 6px 6px 12px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: 100%;
    justify-content: space-between;
  }
  .bb-nav-link { display: none !important; }
  .bb-nav-subscribe { display: none !important; }
  .bb-nav-burger { display: inline-flex !important; }

  /* Footer: stack the brand row, keep 3 link columns side-by-side */
  .bb-footer { padding: 40px 20px 28px !important; }
  .bb-footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 20px !important;
    margin-bottom: 28px !important;
  }
  .bb-footer-brand { grid-column: 1 / -1 !important; }
  .bb-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hero */
  .bb-hero-section { padding: 12px 20px 40px !important; }
  .bb-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }
  .bb-hero-h1 {
    font-size: 44px !important;
    line-height: 1.02 !important;
    margin-bottom: 18px !important;
  }
  .bb-hero-lede {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
  }
  .bb-hero-portrait {
    max-width: 100% !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .bb-hero-currently-title { font-size: 18px !important; }

  /* Dashboard tiles: stack to single column */
  .bb-dash-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .bb-dash-grid > * {
    grid-column: span 1 !important;
    min-height: 0 !important;
    padding: 22px !important;
  }
  .bb-dash-essay-h3 { font-size: 26px !important; }

  /* Focused homepage: featured tile, notes 3-up, newsletter band */
  .bb-featured-tile { padding: 22px !important; min-height: 0 !important; }
  .bb-notes-3up { grid-template-columns: 1fr !important; gap: 22px !important; }
  .bb-nl-band { padding: 44px 20px !important; }

  /* Stats + brands: stack */
  .bb-stats-section { padding: 28px 20px !important; }
  .bb-stats-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bb-stats-list { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 12px !important; }
  .bb-stats-list > li {
    padding: 8px 12px !important;
    border-left: none !important;
    border-top: 1px solid var(--bb-rule) !important;
  }
  .bb-stats-list > li:nth-child(2) { border-left: 1px solid var(--bb-rule) !important; }
  .bb-stats-list > li:nth-child(4) { border-left: 1px solid var(--bb-rule) !important; }

  /* Generic section header (h2 + side link) */
  .bb-section-header {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    margin-bottom: 22px !important;
  }
  .bb-section-h2 { font-size: 30px !important; line-height: 1.1 !important; }

  /* Essays 3-up: 1 column */
  .bb-essays-3up { grid-template-columns: 1fr !important; gap: 14px !important; }
  .bb-essays-3up > article { min-height: 0 !important; padding: 20px !important; }

  /* Notes + Projects: stack, remove vertical border */
  .bb-notes-projects { grid-template-columns: 1fr !important; }
  .bb-notes-projects > div {
    padding: 40px 20px !important;
    border-right: none !important;
  }
  .bb-notes-projects > div:first-child { border-bottom: 1px solid var(--bb-rule); }

  /* Section vertical rhythm overall */
  .bb-section-tall { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Resources 4-up: 2 columns */
  .bb-resources-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .bb-resources-grid > a { min-height: 0 !important; padding: 18px !important; }

  /* /resources page */
  .bb-resources-pills { padding: 0 20px 24px !important; }
  .bb-resources-featured-section { padding: 0 20px 20px !important; }
  .bb-resources-featured-section > div { padding: 28px !important; }
  .bb-resources-featured-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bb-resources-featured-h2 { font-size: 32px !important; line-height: 1.05 !important; }
  .bb-resources-featured-p  { font-size: 16px !important; margin-bottom: 18px !important; }
  .bb-resources-featured-mock { display: none !important; }
  .bb-resources-grid-section { padding: 24px 20px 48px !important; }

  /* Shared inner-page hero (V3PageHead) */
  .bb-pagehead { padding: 28px 20px 24px !important; }
  .bb-pagehead-h1 { font-size: 42px !important; line-height: 1.02 !important; margin-bottom: 18px !important; }
  .bb-pagehead-dek { font-size: 17px !important; line-height: 1.5 !important; }

  /* /now page */
  .bb-now-section { padding: 0 20px 36px !important; }
  .bb-now-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 !important;
  }
  .bb-now-value { font-size: 20px !important; line-height: 1.35 !important; }
  .bb-now-split { padding: 24px 20px 48px !important; }
  .bb-now-split-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bb-now-paragraph { font-size: 17px !important; line-height: 1.55 !important; }
  .bb-now-log-row {
    grid-template-columns: 42px 1fr auto !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  /* /about page */
  .bb-about-intro {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 24px 20px 36px !important;
  }
  .bb-about-h1 { font-size: 40px !important; line-height: 1.02 !important; margin-bottom: 18px !important; }
  .bb-about-prose { font-size: 17px !important; line-height: 1.6 !important; }
  .bb-about-aside { display: flex; flex-direction: column; gap: 16px; }
  .bb-about-portrait { aspect-ratio: 1 / 1 !important; max-width: 360px; margin-inline: auto; }
  .bb-about-timeline { padding: 0 20px 36px !important; }
  .bb-about-timeline-h2 { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 20px !important; }
  .bb-about-timeline-row {
    grid-template-columns: 60px 1fr !important;
    gap: 16px !important;
    padding: 16px 0 !important;
  }
  .bb-about-values {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px 48px !important;
  }

  /* /contact page */
  .bb-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 20px 24px !important;
  }
  .bb-contact-reasons { grid-template-columns: 1fr !important; }
  .bb-contact-name-row { grid-template-columns: 1fr !important; }
  .bb-contact-channel { grid-template-columns: 80px 1fr !important; gap: 10px !important; }
  .bb-contact-promise { padding: 16px 20px 48px !important; }
  .bb-contact-promise-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bb-contact-promise-num { font-size: 44px !important; }

  /* /resources/<slug> detail */
  .bb-rd-crumb { padding: 24px 20px 0 !important; }
  .bb-rd-hero  { padding: 16px 20px 24px !important; }
  .bb-rd-h1    { font-size: 38px !important; line-height: 1.04 !important; margin-bottom: 14px !important; }
  .bb-rd-dek   { font-size: 17px !important; line-height: 1.55 !important; margin-bottom: 22px !important; }
  .bb-rd-meta  { gap: 16px !important; }
  .bb-rd-meta-item { min-width: 45%; }
  .bb-rd-split {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 8px 20px 28px !important;
  }
  .bb-rd-aside { position: static !important; }
  .bb-rd-mock  { padding: 24px !important; aspect-ratio: 4 / 5 !important; }
  .bb-rd-mock > div:nth-child(2) { font-size: 26px !important; }
  .bb-rd-inside { padding: 16px 20px 32px !important; }
  .bb-rd-h2 { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 18px !important; }
  .bb-rd-inside-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bb-rd-howto { padding: 0 20px 32px !important; }
  .bb-rd-steps { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bb-rd-quote { padding: 0 20px 32px !important; }
  .bb-rd-quote .bb-tile,
  .bb-rd-quote > div { padding: 28px !important; }
  .bb-rd-quote p { font-size: 24px !important; line-height: 1.25 !important; }
  .bb-rd-related { padding: 0 20px 48px !important; }
  .bb-rd-related-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* /newsletter */
  .bb-nl-hero {
    margin: 16px 16px 28px !important;
    padding: 36px 24px !important;
    border-radius: var(--bb-r-lg) !important;
  }
  .bb-nl-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; align-items: stretch !important; }
  .bb-nl-h1 { font-size: 48px !important; line-height: 0.98 !important; margin-bottom: 16px !important; }
  .bb-nl-dek { font-size: 17px !important; line-height: 1.5 !important; margin-bottom: 22px !important; }
  .bb-nl-form-tile { padding: 16px !important; max-width: none !important; }
  .bb-nl-form-tile form { flex-wrap: wrap !important; }
  .bb-nl-form-tile form > input { flex: 1 1 100% !important; min-width: 0 !important; }
  .bb-nl-form-tile form > button { flex: 1 1 100% !important; }
  .bb-nl-form-promises { gap: 12px !important; }
  .bb-nl-stats { gap: 10px !important; }
  .bb-nl-stat  { padding: 16px !important; }
  .bb-nl-stat-num { font-size: 28px !important; }

  .bb-nl-inside { padding: 16px 20px 32px !important; }
  .bb-nl-inside-h2 { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 20px !important; }
  .bb-nl-inside-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  .bb-nl-recent { padding: 16px 20px 32px !important; }
  .bb-nl-recent-h2 { font-size: 24px !important; }
  .bb-nl-issue-row {
    grid-template-columns: auto auto 1fr !important;
    grid-template-areas: "num date open" "body body body" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    padding: 14px 12px !important;
    align-items: baseline !important;
  }
  .bb-nl-issue-num  { grid-area: num; }
  .bb-nl-issue-date { grid-area: date; }
  .bb-nl-issue-open { grid-area: open; justify-self: end; text-align: right !important; }
  .bb-nl-issue-body { grid-area: body; }
  .bb-nl-issue-body > div:first-child { font-size: 17px !important; }
  .bb-nl-issue-body > div:last-child  { font-size: 13px !important; }

  .bb-nl-proof { padding: 16px 20px 48px !important; }
  .bb-nl-proof-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* /notes */
  .bb-notes-filterbar { padding: 0 20px 16px !important; justify-content: flex-start !important; }
  .bb-notes-filters button { padding: 8px 12px !important; font-size: 11px !important; }
  .bb-notes-grid { padding: 0 20px 48px !important; grid-template-columns: 1fr !important; gap: 28px !important; }
  .bb-notes-aside { position: static !important; top: auto !important; }
  .bb-notes-item { padding-left: 28px !important; padding-bottom: 22px !important; }
  .bb-notes-dot  { width: 14px !important; height: 14px !important; top: 14px !important; left: 2px !important; }
  .bb-notes-card .bb-tile,
  .bb-notes-card > div { padding: 18px !important; }
  .bb-notes-card blockquote { font-size: 19px !important; line-height: 1.35 !important; padding-left: 14px !important; }
  .bb-notes-card p { font-size: 16px !important; }

  /* /essays index */
  .bb-essays-filterbar { padding: 0 20px 16px !important; }
  .bb-essays-filters button { padding: 8px 12px !important; font-size: 11px !important; }
  .bb-essays-featured { padding: 0 20px 24px !important; }
  .bb-essays-featured-card > div { padding: 24px !important; }
  .bb-essays-featured-grid { grid-template-columns: 1fr !important; gap: 24px !important; align-items: stretch !important; }
  .bb-essays-featured-h2 { font-size: 32px !important; line-height: 1.05 !important; margin-bottom: 12px !important; }
  .bb-essays-featured-dek { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
  .bb-essays-featured-fig { padding: 16px !important; aspect-ratio: 16 / 9 !important; }

  .bb-essays-archive { padding: 0 20px 48px !important; }
  .bb-essays-row {
    grid-template-columns: auto auto 1fr !important;
    grid-template-areas: "date tag read" "body body body" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    padding: 18px 12px !important;
  }
  .bb-essays-row:hover { padding-left: 12px !important; }
  .bb-essays-row-date { grid-area: date; }
  .bb-essays-row-tag  { grid-area: tag; }
  .bb-essays-row-read { grid-area: read; justify-self: end; }
  .bb-essays-row-body { grid-area: body; }
  .bb-essays-row-body h3 { font-size: 19px !important; margin-bottom: 4px !important; }
  .bb-essays-row-body p  { font-size: 14px !important; }

  /* /essays/<id> reader */
  .bb-essay-grid {
    grid-template-columns: 1fr !important;
    padding: 12px 20px 48px !important;
    gap: 0 !important;
  }
  .bb-essay-rail { display: none !important; }
  /* Reveal the compact "min left" pill since the right rail (which
     normally hosts the read-time meter) is hidden at this breakpoint.
     Inline style on the element is display:none so the pill stays
     invisible on desktop where the rail is doing the job. */
  .bb-essay-progress-mobile { display: inline-flex !important; }
  .bb-essay-main { padding-top: 24px !important; }
  .bb-essay-h1   { font-size: 36px !important; line-height: 1.05 !important; margin-bottom: 16px !important; }
  .bb-essay-dek  { font-size: 18px !important; line-height: 1.4 !important; margin-bottom: 24px !important; }
  .bb-essay-author { margin-bottom: 28px !important; }
  .bb-essay-body { font-size: 17px !important; line-height: 1.6 !important; }
  .bb-essay-dropcap { font-size: 56px !important; padding-right: 8px !important; padding-top: 4px !important; }
  .bb-essay-h2 { font-size: 26px !important; margin-top: 36px !important; margin-bottom: 14px !important; }
  .bb-essay-pull { margin: 28px 0 !important; padding: 22px 18px !important; }
  .bb-essay-pull p { font-size: 20px !important; line-height: 1.3 !important; }

  .bb-essay-engage { margin-top: 36px !important; }
  .bb-essay-engage-actions button { font-size: 11px !important; padding: 8px 12px !important; }
  .bb-essay-nl > div { padding: 22px !important; }
  .bb-essay-nl-h3 { font-size: 22px !important; }
  .bb-essay-prevnext { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bb-essay-prevnext-card { text-align: left !important; padding: 16px !important; }
}

@media (max-width: 520px) {
  /* essays — phone tightening */
  .bb-essays-featured-h2 { font-size: 28px !important; }
  .bb-essay-h1 { font-size: 30px !important; }
  .bb-essay-pull p { font-size: 18px !important; }
}

@media (max-width: 520px) {
  /* newsletter — phone tightening */
  .bb-nl-h1 { font-size: 38px !important; }
  .bb-nl-inside-grid { grid-template-columns: 1fr !important; }
  .bb-nl-stat-num { font-size: 24px !important; }
}

@media (max-width: 520px) {
  /* Even tighter on phones */
  .bb-hero-h1 { font-size: 38px !important; }
  .bb-section-h2 { font-size: 26px !important; }
  .bb-resources-grid { grid-template-columns: 1fr !important; }
  .bb-stats-list { grid-template-columns: 1fr !important; gap: 0 !important; }
  .bb-stats-list > li {
    padding: 12px 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--bb-rule) !important;
  }
  .bb-stats-list > li:nth-child(2),
  .bb-stats-list > li:nth-child(4) { border-left: none !important; }
  .bb-stats-list > li:last-child { border-bottom: 1px solid var(--bb-rule) !important; }

  /* Footer: collapse the link columns to a single stack on small phones */
  .bb-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 360px) {
  /* On very narrow phones, hide the wordmark to keep the nav single-line */
  .bb-nav-name { display: none !important; }
}