/* ---------------------------------------------------------------------------
   SPONTE PRODUCTIONS — WORK V1 DRAFT (SCOPED STYLESHEET)
   ---------------------------------------------------------------------------
   Loaded ONLY on public/work-draft.html together with site.css and
   case-study.css. Every rule below is prefixed with .wp- (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 work
   draft the pill must read "not part of the public work page".
   ------------------------------------------------------------------------- */
.internal-band::before {
  content: "Internal draft notes — not part of the public work page";
}


/* -- Top pending strip (mirrors homepage / services draft treatment) ------- */
.wp-top-pending {
  position: sticky;
  top: 2.5rem;
  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;
}
.wp-top-pending .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
}
.wp-top-pending-label {
  color: #ffb0b0;
  letter-spacing: 0.2em;
  margin-right: 0.5rem;
}
.wp-top-pending-item { opacity: 0.9; }
.wp-top-pending-sep { opacity: 0.4; }


/* -- Shared eyebrow --------------------------------------------------------- */
.wp-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.25rem;
}


/* -- Hero ------------------------------------------------------------------- */
.wp-hero {
  padding: clamp(4rem, 6vw + 2rem, 8rem) 0 clamp(3rem, 5vw + 1rem, 6rem);
  border-bottom: 1px solid var(--rule);
}
.wp-hero-inner { max-width: 68rem; }
.wp-hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  color: var(--text);
  max-width: 24ch;
}
.wp-hero-support {
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 1.25rem;
}
.wp-hero-positioning {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.wp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: 1.5rem;
}
.wp-hero-cta-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-basis: 100%;
  margin-top: 0.35rem;
}


/* -- CTAs ------------------------------------------------------------------- */
.wp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  border: 1px solid transparent;
  line-height: 1;
}
.wp-cta--primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.wp-cta--primary:hover {
  transform: translateY(-1px);
  background: transparent;
  color: var(--text);
}
.wp-cta--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.wp-cta--secondary:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}


/* -- Featured Proof Strip --------------------------------------------------- */
.wp-proof {
  padding: clamp(3rem, 5vw + 1rem, 6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.wp-proof-head {
  max-width: 52rem;
  margin-bottom: 2.5rem;
}
.wp-proof-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--text);
  max-width: 30ch;
}
.wp-proof-supportline {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}
.wp-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.wp-proof-card {
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.wp-proof-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.wp-proof-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wp-proof-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.75vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.wp-proof-oneline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.wp-proof-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b58939;
  margin: 0.25rem 0 0;
}
.wp-proof-cta-block {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wp-proof-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wp-proof-cta--disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.wp-proof-cta--disabled::after {
  content: " (pending)";
  color: #b58939;
  letter-spacing: 0.1em;
}
.wp-proof-cta-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.75;
}


/* -- Curated grid — bands and cards ---------------------------------------- */
.wp-grid {
  padding: clamp(3rem, 5vw + 1rem, 6rem) 0;
}
.wp-band {
  padding: 2.5rem 0;
  border-bottom: 1px dashed var(--rule);
}
.wp-band:last-child {
  border-bottom: none;
}
.wp-band-head {
  max-width: 60rem;
  margin-bottom: 2rem;
}
.wp-band-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.75rem;
}
.wp-band-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.wp-band-lane {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.75rem;
}
.wp-band-description {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}
.wp-band-empty {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
  line-height: 1.6;
}
.wp-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}


/* -- Card (grid) ------------------------------------------------------------ */
.wp-card {
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.wp-card--linked:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.wp-card--static {
  cursor: default;
}
.wp-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.wp-card-band,
.wp-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wp-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.wp-card-medium {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.wp-card-role {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.wp-card-proof {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0.35rem 0 0;
}


/* -- Card media (image or placeholder) ------------------------------------- */
.wp-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #12100e;
}
.wp-card-media--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 12px,
      rgba(255, 255, 255, 0.05) 12px,
      rgba(255, 255, 255, 0.05) 24px
    ),
    #1a1613;
  border-bottom: 1px solid var(--rule);
}
.wp-card-media-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9c088;
  padding: 0.5rem 0.9rem;
  border: 1px solid #6a4f22;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}

/*
 * Phase 7E-3: public-only empty media slot for Featured Proof Strip cards
 * that have no project cover in src/data.js (e.g. Georgia Mausoleums). No
 * visible label — the card's title, one-line, and status carry meaning. The
 * neutral warm surface keeps the card silhouette without borrowing draft-
 * chrome stripes or the "Media placeholder" typography.
 */
.wp-card-media--empty {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    #1a1613;
  border-bottom: 1px solid var(--rule);
}
.wp-card-review-ribbon {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe4a1;
  background: rgba(30, 21, 12, 0.85);
  border: 1px solid #8a6a2e;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}


/* -- Final CTA -------------------------------------------------------------- */
.wp-final-cta {
  padding: clamp(3rem, 5vw + 1rem, 6rem) 0 clamp(4rem, 6vw + 1rem, 7rem);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.wp-final-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--text);
  max-width: 24ch;
}
.wp-final-support {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 1.75rem;
}
.wp-internal-note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* -- Internal band section framing (shared with homepage/services drafts) -- */
.wp-section { padding-block: 2rem 0; }
.wp-head {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  margin-bottom: 1.25rem;
}
.wp-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wp-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.wp-intro {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.5rem 0 0;
  max-width: 60ch;
}


/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .wp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-head {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
@media (max-width: 640px) {
  .wp-proof-grid { grid-template-columns: 1fr; }
  .wp-band-grid { grid-template-columns: 1fr; }
  .wp-hero-ctas { flex-direction: column; align-items: flex-start; }
  .wp-hero-cta-note { margin-top: 0.5rem; }
}


/* ---------------------------------------------------------------------------
   PHASE 5.1 — HEADING GLYPH FIX (Fraunces WONK/SOFT lock)
   ---------------------------------------------------------------------------
   Fraunces exposes two variation axes — SOFT (0..100) and WONK (0..1) —
   that toggle stylistic alternates (swashy S, curly g, etc). When neither
   is set in CSS, Fraunces renders stylized letterforms at heading sizes.
   Fix: force SOFT=100 (calmest letterforms) and WONK=0 (no alternates) on
   every .wp-* display heading, 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. No other page loads this
   stylesheet, so this cannot bleed elsewhere.
   -------------------------------------------------------------------------- */
.wp-hero-headline,
.wp-proof-heading,
.wp-proof-title,
.wp-band-name,
.wp-card-title,
.wp-final-heading,
.wp-head h2 {
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}