/* ---------------------------------------------------------------------------
   SPONTE PRODUCTIONS — HOMEPAGE V2 DRAFT (SCOPED STYLESHEET)
   ---------------------------------------------------------------------------
   Loaded ONLY on public/homepage-draft.html together with site.css and
   case-study.css. Every rule below is prefixed with .hp- (or targets the
   shared internal-band chrome). Does not touch any other page.
   --------------------------------------------------------------------------- */

/* -- Internal-band pill override (chrome reused from case-study.css) --------
   case-study.css sets the .internal-band::before content to
   "Internal draft notes — not part of the public case study". On the
   homepage draft the pill must read "not part of the public homepage".
   ------------------------------------------------------------------------- */
.internal-band::before {
  content: "Internal draft notes — not part of the public homepage";
}

/* -- Top pending strip (mirrors services draft treatment) ------------------ */
.hp-top-pending {
  position: sticky;
  top: 2.5rem; /* Sits under the draft banner. */
  z-index: 119;
  background: #1e1712;
  border-bottom: 1px solid #3a2f1a;
  color: #d9c088;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0;
  line-height: 1.5;
}
.hp-top-pending .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
}
.hp-top-pending-label {
  color: #ffb0b0;
  letter-spacing: 0.2em;
  margin-right: 0.5rem;
}
.hp-top-pending-item { opacity: 0.9; }
.hp-top-pending-sep { opacity: 0.4; }

/* -- Section framing -------------------------------------------------------- */
.hp-section {
  padding-block: clamp(4rem, 3rem + 3vw, 6rem);
  border-bottom: 1px solid var(--border);
}
.hp-section:last-of-type { border-bottom: none; }

.hp-head {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-bottom: clamp(2rem, 3vw, 3rem);
  align-items: baseline;
}
.hp-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.hp-intro {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}

/* -- Hero ------------------------------------------------------------------- */
.hp-hero {
  padding-top: clamp(4rem, 3rem + 3vw, 6rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  border-bottom: 1px solid var(--border);
}
.hp-hero-inner {
  max-width: 68rem;
  margin: 0 auto;
}
.hp-top-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hp-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.75rem;
  max-width: 22ch;
}
.hp-support {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 1rem;
  max-width: 48ch;
}
.hp-support-two {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.75rem;
  max-width: 56ch;
}
.hp-positioning {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 2.25rem;
  max-width: 60ch;
}

.hp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  margin-bottom: 1rem;
}
.hp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hp-cta-primary:hover { opacity: 0.85; }
.hp-cta-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  padding-bottom: 0.15rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hp-cta-secondary:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

.hp-hero-tertiary {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-hero-tertiary a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.1rem;
  margin-left: 0.5rem;
}
.hp-hero-tertiary a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* -- What Sponte Builds tiles ---------------------------------------------- */
.hp-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 980px) {
  .hp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hp-tiles { grid-template-columns: 1fr; }
}

.hp-tile {
  border: 1px solid var(--border);
  padding: 1.5rem 1.4rem 1.6rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  min-height: 100%;
}
.hp-tile-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-tile h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0.15rem 0 0.5rem;
}
.hp-tile-oneline {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.hp-tile-proof {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  line-height: 1.55;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
}
.hp-tile-cta {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hp-tile-cta-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.25rem;
  align-self: flex-start;
  cursor: not-allowed;
}
.hp-tile-cta-pending {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9c088;
  opacity: 0.85;
}

/* Section-level CTA under the tiles */
.hp-section-cta {
  margin-top: clamp(2rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.hp-section-cta-lead {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.hp-section-cta-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 0.2rem;
}
.hp-section-cta-link:hover { opacity: 0.75; }
.hp-section-cta-pending {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9c088;
  cursor: not-allowed;
}

/* -- Proof Anchors --------------------------------------------------------- */
.hp-anchors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .hp-anchors { grid-template-columns: 1fr; }
}
.hp-anchor {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* Phase 7E-4A: Proof Anchor media parity.
   All three anchors reserve the same 16:9 slot so the grid stays balanced
   whether the anchor renders an approved cover image or a neutral placeholder.
   No visible label, icon, or approval text is rendered on the neutral slot. */
.hp-anchor-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.hp-anchor-media--image {
  background: #000;
}
.hp-anchor-media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hp-anchor-media--empty {
  background: var(--surface);
}
.hp-anchor-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-anchor h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  color: var(--text);
  line-height: 1.2;
  margin: 0.1rem 0 0.15rem;
  letter-spacing: -0.01em;
}
.hp-anchor-role {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.hp-anchor-line {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  line-height: 1.55;
  text-transform: uppercase;
  margin: 0.25rem 0 0;
}
.hp-anchor-pending {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: #d9c088;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0.35rem 0 0;
  opacity: 0.85;
}

/* -- Why This Matters ------------------------------------------------------ */
.hp-beats {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3vw, 3rem);
  max-width: 68rem;
}
.hp-beat {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
@media (max-width: 620px) {
  .hp-beat { grid-template-columns: 1fr; gap: 0.5rem; }
}
.hp-beat-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-beat h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  grid-column: 2;
}
.hp-beat p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
  grid-column: 2;
}
@media (max-width: 620px) {
  .hp-beat h3, .hp-beat p { grid-column: 1; }
}

/* -- How Sponte Works ------------------------------------------------------ */
.hp-stages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .hp-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hp-stages { grid-template-columns: 1fr; }
}
.hp-stage {
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hp-stage-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hp-stage h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
.hp-stage p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* -- Selective Studio Capabilities (secondary strip) ----------------------- */
.hp-section-secondary { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.hp-section-secondary h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.hp-selective-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.5rem;
  max-width: 72rem;
}
@media (max-width: 720px) {
  .hp-selective-list { grid-template-columns: 1fr; }
}
.hp-selective-item {
  display: block;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.hp-selective-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.2rem;
  letter-spacing: -0.005em;
}
.hp-selective-closer {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  line-height: 1.55;
}

/* -- Founder / About Preview ---------------------------------------------- */
.hp-founder-body {
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hp-founder-body p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.hp-founder-cta {
  margin-top: 1rem;
}
.hp-founder-cta a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 0.15rem;
}

/* -- Final CTA ------------------------------------------------------------- */
.hp-final-cta { padding-block: clamp(4rem, 3rem + 3vw, 6rem); }
.hp-final-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 68rem;
  margin-bottom: 2rem;
}
@media (max-width: 800px) {
  .hp-final-cards { grid-template-columns: 1fr; }
}
.hp-final-card {
  border: 1px solid var(--border);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hp-final-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.hp-cta-secondary-block {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 0.2rem;
}
.hp-cta-secondary-block:hover { opacity: 0.75; }
.hp-final-closer {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 1rem;
  max-width: 50rem;
}
.hp-direct-line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin: 0;
}
.hp-direct-line a { color: var(--text-muted); text-decoration: none; }
.hp-direct-line a:hover { color: var(--text); }

/* -- Internal callouts (used inside the internal-band aside) --------------- */
.hp-internal-callout {
  margin-top: 2rem;
  border: 1px solid #3a2f1a;
  background: rgba(58, 47, 26, 0.15);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
}
.hp-internal-callout::before {
  content: "Internal";
  position: absolute;
  top: -0.7rem;
  left: 1.25rem;
  background: var(--bg);
  padding: 0.15rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d9c088;
  border: 1px solid #3a2f1a;
}
.hp-internal-callout-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #d9c088;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.hp-internal-callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-internal-callout ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 0.55rem;
}
.hp-internal-callout ul li::before {
  content: "\25A1";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #d9c088;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.hp-internal-notes { margin-top: 1.5rem; }
.hp-internal-notes .hp-internal-callout-title { color: #d9c088; }
.hp-internal-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-internal-notes ul li {
  padding-left: 1rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.hp-internal-notes ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------------
   PHASE 5.1 — HEADING GLYPH FIX (Fraunces WONK/SOFT lock)
   ---------------------------------------------------------------------------
   Symptom: Fraunces's default S in headings (esp. "Selective studio
   capabilities") reads as visually wonky/rotated. Fraunces exposes two
   variation axes — SOFT (0..100) and WONK (0..1) — that toggle stylistic
   alternates including the swashy S, curly g, and other quirky glyphs.
   When neither is set in CSS, Fraunces still renders slightly stylized
   letterforms at larger optical sizes.

   Fix: within homepage-draft scope only, force SOFT=100 (calmest, most
   traditional letterforms) and WONK=0 (no alternate glyphs) on every
   Fraunces heading element, and normalize font-feature-settings so no
   discretionary ligatures or stylistic sets kick in. Optical sizing is
   left on auto (Google Fonts requirement for the loaded axis range).

   Body text uses Inter and is NOT affected. Only headings using
   var(--font-display) on the homepage draft receive this override.
   No other page loads this stylesheet, so this cannot bleed elsewhere.
   -------------------------------------------------------------------------- */
.hp-hero h1,
.hp-section h2,
.hp-section h3,
.hp-section h4,
.hp-tile h3,
.hp-anchor h3,
.hp-beat h3,
.hp-stage h4,
.hp-selcap h3,
.hp-final-card h3,
.hp-internal-notes h2,
.hp-internal-notes h3 {
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}