/* ═══════════════════════════════════════════════════════════════
   site.css — The Clowder marketing page
   Consumes the Clowder palette tokens defined in clowder.css:
     --clowder, --clowder-mid, --clowder-light, --white
     --bg, --bg-2, --fg, --fg-muted, --accent, --eyebrow-fg, --link-fg
   Light/dark resolve through [data-palette] on documentElement,
   exactly as the publish template does. No Tailwind, no Material
   Symbols. Icons use the FontAwesome kit the template loads.
   Aesthetic: calm broadsheet — hairline rules, no heavy shadows,
   no gradients. The brand purple band is the fixed dark element.
   Content adapted from the gpt-sol draft; layout/identity is the
   Clowder template's.
   ═══════════════════════════════════════════════════════════════ */

/* ─── HEADER NEUTRALIZATIONS (template header carries its own
   styles; these keep the marketing links/tags from picking up
   the global link color) ─────────────────────────────────────── */
.logo-wrap a,
.logo-wrap a:hover { text-decoration: none; }
.masthead-name,
.masthead-name:visited { color: inherit; text-decoration: none; }
.masthead-name:hover { text-decoration: none; }

/* ─── LAYOUT PRIMITIVES ─────────────────────────────────────── */
.site-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ─── TYPOGRAPHY HELPERS ────────────────────────────────────── */
.site-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eyebrow-fg);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* Bump eyebrow contrast: darkened gold on cream, brighter lavender on dark. */
[data-palette="light"] .site-eyebrow { color: #5A4615; }
[data-palette="dark"]  .site-eyebrow { color: #D6D4EE; }
.site-eyebrow::before {
  content: "";
  width: 2.3rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
[data-palette="light"] .site-eyebrow-light { color: var(--clowder-light); }

.site-display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
  font-size: clamp(3rem, 7.5vw, 5.75rem);
  margin: 0 0 1.5rem;
}
.site-display-light { color: var(--white); }
.site-display em { font-style: italic; color: var(--eyebrow-fg); font-weight: 400; }
.site-display-light em { color: var(--clowder-light); }

.site-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  margin: 0 0 1.25rem;
}

.site-lead {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  color: var(--fg-muted);
  max-width: 38rem;
  margin: 0 0 1.5rem;
}
.site-lead-light { color: rgba(255,255,255,.72); }

.site-deck {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.005em;
  color: var(--fg-muted);
  max-width: 40rem;
  margin: 0 0 2.25rem;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.site-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.4rem;
  border-radius: 5px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.site-btn:active { transform: translateY(1px); }

.site-btn-primary { background: var(--clowder); color: var(--white); }
.site-btn-primary:hover { background: var(--clowder-mid); }

.site-btn-ghost { border-color: var(--clowder); color: var(--clowder); background: transparent; }
.site-btn-ghost:hover { background: var(--bg-2); }
[data-palette="dark"] .site-btn-ghost { border-color: var(--clowder-light); color: var(--clowder-light); }
[data-palette="dark"] .site-btn-ghost:hover { background: var(--bg-2); }

.site-btn-ghost-light { border-color: rgba(255,255,255,.4); color: var(--white); background: transparent; }
.site-btn-ghost-light:hover { background: rgba(255,255,255,.12); }

/* ─── SECTION NAV (in the template header) ──────────────────── */
.masthead { display: flex; flex-direction: row; align-items: center; }
/* DM Mono parks its ink at the top of the line box; Playfair (the
   wordmark) parks its ink low. Same box center, different ink line.
   Nudge the nav down ~3px so the link ink shares the wordmark's line. */
.site-nav { transform: translateY(3px); }
/* The template lifts the logo (translateY -15%) to clear the header's
   bottom border, but that parks its ink ~6px above the wordmark/nav.
   Marketing header has no border to clear; lift just enough to center
   the logo image's ink (which sits low in the image) on the shared line. */
.logo-wrap { transform: translateY(-5px); align-self: center; }

.site-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 2.75rem;
  max-width: 42rem;
  margin: 0 2rem 0 auto;
}
.site-nav a {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .15s, box-shadow .15s;
}
.site-nav a:hover { color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }

/* ─── HERO ──────────────────────────────────────────────────── */
.site-hero { padding: 3.75rem 0 4.75rem; }
.site-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.site-hero-text { max-width: 44rem; }
.site-hero-text .site-display { margin-top: .5rem; }

.site-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 1.75rem;
}

.site-trustline { display: none; }

/* ─── TICKER ────────────────────────────────────────────────── */
.site-ticker {
  border-block: 1px solid var(--clowder-light);
  background: var(--bg-2);
  overflow: hidden;
}
.site-ticker div {
  width: max-content;
  display: flex;
  gap: 3rem;
  padding: .85rem 0;
  color: var(--fg-muted);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: site-crawl 36s linear infinite;
}
.site-ticker span::before { content: "\2022"; color: var(--accent); margin-right: 3rem; }
@keyframes site-crawl { to { transform: translateX(-50%); } }

/* ─── GENERIC SECTION ────────────────────────────────────────── */
.site-section { padding: 5rem 0; }
.site-section-paper { background: var(--bg-2); }

.site-section-head { margin-bottom: 3rem; }
.site-section-head-split {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 3rem;
  align-items: end;
}
.site-section-head-light .site-eyebrow::before { background: var(--clowder-light); }
.site-section-lead {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  color: var(--fg-muted);
  max-width: 40rem;
  margin: 0;
}

/* ─── N.A.P. PROTOCOL (three-column broadsheet) ─────────────── */
.site-protocol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--clowder-light);
}
.site-step {
  padding: 2.25rem;
  border-right: 1px solid var(--clowder-light);
  background: var(--bg-2);
}
.site-step:last-child { border-right: 0; }
.site-letter {
  color: var(--eyebrow-fg);
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
}
[data-palette="dark"] .site-letter { color: var(--clowder-light); }
.site-step-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 1.5rem 0 0;
}

/* ── Methodology link (protocol section head) ── */
.site-methodology-link {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clowder);
  text-decoration: none;
  white-space: nowrap;
  align-self: end;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.site-methodology-link:hover { border-bottom-color: var(--accent); }
[data-palette="dark"] .site-methodology-link { color: var(--clowder-light); }

/* ─── BANDS (Source Trail + CTA) ─────────────────────────────── */
.site-band { padding: 5.5rem 0; position: relative; overflow: hidden; }
.site-band-clowder { background: var(--clowder); color: var(--white); }

/* ── Source trail proof cards ── */
.site-ledger {
  max-width: 42rem;
  margin: 0 0 2.5rem;
  list-style: none;
  padding-left: 0;
}
.site-source-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  line-height: 1.45;
}

.site-source-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,.14);
  align-items: center;
}
.site-source-row:first-of-type { margin-top: .5rem; }
.site-source-row strong { color: var(--white); }
.site-used {
  color: #8FBF9F;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.site-setaside {
  color: #E2B0A8;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: .9;
}
.site-proof-example-label {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: -.5rem 0 1.25rem;
}

/* ─── AUDIENCES GRID ─────────────────────────────────────────── */
.site-audiences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.site-audience {
  padding: 2rem;
  border: 1px solid var(--clowder-light);
  background: var(--bg);
  border-radius: 8px;
  min-height: 220px;
}
.site-audience h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.45rem;
  margin: 0 0 .75rem;
  line-height: 1.2;
}
.site-audience p { color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* ─── PULL QUOTE ─────────────────────────────────────────────── */
.site-quote {
  padding: 2.75rem 0;
  text-align: center;
  border-block: 1px solid var(--clowder-light);
}
.site-quote blockquote {
  max-width: 50rem;
  margin: 0 auto;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  white-space: nowrap;
}
.site-quote em { font-style: italic; color: var(--eyebrow-fg); font-weight: 400; }
[data-palette="dark"] .site-quote em { color: var(--clowder-light); }

/* ─── CTA ────────────────────────────────────────────────────── */
.site-cta-section { padding-bottom: 4.5rem; }
.site-cta-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.75rem;
  align-items: end;
  padding: 0;
}
.site-cta-box .site-display {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  margin-bottom: 1rem;
}
.site-cta-box .site-lead { margin-bottom: 0; }
.site-cta-action { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.site-cta-hint {
  font-family: 'DM Mono', monospace;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin: 0;
  text-align: right;
  max-width: 16rem;
}

/* ─── MOBILE MENU (≤860px) ───────────────────────────────────── */
.site-menu { display: none; }                    /* hidden on desktop */
.site-menu-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: auto;                            /* push to the right edge */
  color: rgba(255,255,255,.85);
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
}
.site-menu-toggle::-webkit-details-marker { display: none; }
.site-menu-toggle:hover { color: var(--white); border-color: var(--accent); }
.site-menu-toggle .fa-bars { font-size: 1.05rem; }
.site-menu[open] .site-menu-toggle { border-color: var(--accent); color: var(--white); }
.site-menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--clowder-dark, #211f3d);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 1.25rem 1.5rem 1.5rem;
  z-index: 50;
}
.site-menu-panel nav { display: flex; flex-direction: column; gap: .4rem; }
.site-menu-panel nav a {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-menu-panel nav a:hover,
.site-menu-panel nav a:focus { color: var(--white); }
.site-menu-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 1rem 0 .75rem;
}
.site-menu-palette { display: flex; gap: .5rem; }
.site-menu-palette button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem .75rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: rgba(255,255,255,.78);
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  letter-spacing: .02em;
  cursor: pointer;
}
.site-menu-palette button:hover { border-color: var(--accent); color: var(--white); }
.site-menu-palette button.active { border-color: var(--accent); color: var(--white); background: rgba(61,57,102,.25); }
.site-menu-palette .pf-label-text { font-size: 1rem; }
.site-menu-palette .pf-icon { font-size: 1rem; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .site-menu { display: block; }                 /* hamburger shown */
  .site-nav { display: none; }                 /* desktop-only; mobile uses .site-menu */
  header .palette-flyout { display: none; }       /* picker moves into .site-menu on mobile */
  header img.logo-img { height: 30px; }        /* lighter header weight on mobile */
  .site-container { padding: 0 1rem; }
  .site-hero { padding: 2.5rem 0 3.5rem; }
  .site-source-row { gap: .75rem; }            /* keep USED/SET ASIDE tag near its title */
  #protocol .site-step p { display: none; }      /* step prose wonks on mobile; letter + title stand alone */

  .site-hero-grid,
  .site-section-head-split,
  .site-cta-box { grid-template-columns: 1fr; gap: 2rem; }

  .site-protocol { grid-template-columns: repeat(3, 1fr); }
  .site-step { padding: 1.25rem .75rem; }
  .site-letter { font-size: 2.5rem; }
  .site-step-title { font-size: 1.05rem; margin-top: .75rem; }

  .site-band { padding: 3.5rem 0; }
  .site-audiences { grid-template-columns: 1fr; }

  .site-quote { padding: 1rem 0; }
  .site-quote blockquote { font-size: 1.2rem; }   /* one line on mobile */
}

@media (prefers-reduced-motion: reduce) {
  .site-ticker div { animation: none; }
}

/* ─── SCREEN-READER-ONLY ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Palette flyout: icon-only (words visually hidden, SR-only) ── */
/* The <details> wrapper is block by default and lets the inline-flex
   <summary> sink to its baseline, dropping the icon ~4px below the
   shared ink line. Flex-center the summary in the wrapper, then nudge
   down 2px so the FA icon lands on the same line as the wordmark/nav. */
.palette-flyout { margin-left: 0; display: flex; align-items: center; }
.palette-flyout-panel { min-width: auto; }
.palette-flyout-panel button { justify-content: center; }
/* ── Footer legal line: clean segment wrapping ── */
/* Segments prefer to stay whole on one line; when a segment is wider than the
   viewport (e.g. "A Purrly Digital AI Research Project" on a 390px phone) it
   wraps internally and centers rather than overflowing/clipping. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .75rem;
  margin: 0;
}
.footer-legal span {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
.footer-legal span + span::before {
  content: "|";
  margin-right: .75rem;
  opacity: .5;
}
/* Mobile: segments stack — drop the pipe separators so they don't lead each wrapped line. */
@media (max-width: 860px) {
  .footer-legal span + span::before { content: none; }
}
footer p .nowrap { white-space: nowrap; }

/* REVISION PASS — new blocks + tonal / nav / footer refinements */

/* HERO proof line + CTA hint */
.site-hero-proof {
  font-family: 'DM Mono', monospace;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--fg-muted);
  margin: 0 0 .5rem;
}
.site-hero .site-cta-hint { text-align: left; max-width: none; }

/* N.A.P. PROTOCOL step descriptions */
.site-step p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: .75rem 0 0;
}

/* "Investigate" nav link as the action item */
.site-nav a[href="#contact"] {
  border: 1px solid rgba(255,255,255,.35);
  padding: .4rem .9rem;
  border-radius: 5px;
  color: var(--white);
}
.site-nav a[href="#contact"]:hover {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

/* FOOTER vertical breathing room */
footer { padding: 2.5rem 0 2rem; margin-top: 0; }   /* override clowder.css 3rem top margin */
footer .footer-logo { margin-bottom: 1.1rem; }
footer .footer-name { font-size: 1.5rem; }   /* bump from clowder.css 1.2rem; logo image removed */
footer p { margin: .4rem 0; }

/* DARK-MODE tonal separation (three dark tones + purple) */
[data-palette="dark"] .site-quote { background: #0D0C12; }
[data-palette="dark"] .site-cta-section { background: #161420; }