/* ──────────────────────────────────────────────────────────────────────────
 * os-theme.css — Operating System brand. Self-contained.
 *
 * This file is the *only* external stylesheet on each page (alongside the
 * page's own inline <style>). Paper-theme.css is no longer linked; every
 * token, font, button radius, image treatment, and SVG hex remap that
 * paper-theme used to provide is consolidated here so the OS theme can't
 * leak with or be overridden by another theme layer.
 *
 * Load order:
 *   page inline <style>  →  os-theme.css   (this wins)
 * ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* 1) Tokens — remap Paper variables to Operating System palette.
 *    Same specificity as paper-theme.css's :root but later in cascade. */
:root {
  /* Foundation — all cool grays now. The legacy "sage" tokens are reused
   * by inline page CSS for section backgrounds, so they must remap to
   * the cool wash family, never warm cream/parchment, otherwise tan
   * leaks through .cross-program, .cta-strip, etc. */
  --parchment:  #FBFCFF;   /* lightest periwinkle */
  --sage-pale:  #FBFCFF;   /* lightest periwinkle */
  --sage-light: #F4F6FC;   /* slightly deeper     */
  --sage:       #E8E4ED;   /* fog                 */
  --sage-mid:   #D7CCE8;   /* lilac               */

  /* Diagram / accent fills (formerly moss / forest-light) */
  --moss-light: #B8C5E8;   /* periwinkle   */
  --moss:       #D7CCE8;   /* lilac        */
  --forest-light: #E85D5D; /* coral — emphasis accent */
  --forest-mid:   #1A1F3A; /* ink                     */
  --forest:       #1A1F3A; /* ink (dark)              */

  /* Authority */
  --ink:       #1A1F3A;
  --ink-mid:   #2C3354;
  --ink-muted: #5A6080;
  --ink-faint: #9AA0B8;

  /* OS-native tokens — also expose them under their own names so future
   * components can pull them in directly. */
  --os-chalk:      #FAF7F4;
  --os-cream:      #F2EDE6;
  --os-fog:        #E8E4ED;
  --os-periwinkle: #B8C5E8;
  --os-lilac:      #D7CCE8;
  --os-blush:      #F4C9D0;
  --os-apricot:    #F5D9C4;
  --os-wheat:      #F0DDA8;
  --os-bone:       #EFE9DD;   /* cool warm neutral */
  --os-bone-warm:  #E8D9C0;   /* warm-side neutral counterpart */
  --os-ink:        #1A1F3A;
  --os-coral:      #EFA8A8;   /* softer coral — accent without being harsh */
  --os-coral-deep: #E85D5D;   /* original coral kept available for ink-level emphasis */
  --os-electric:   #5B3FD9;

  /* Type stack — three faces:
   *   --serif  Fraunces   reserved for the largest display headers only
   *   --sans   General Sans for everything below: card titles, nav,
   *                          section labels, project tags, eyebrows
   *   --body   Inter        copy + UI chrome
   */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Poppins', system-ui, sans-serif;
  --body:  'Poppins', system-ui, sans-serif;
}

/* 2) Grain texture — keep the existing paper grain (paper-theme.css already
 *    provides the parchment surface). Skipping the OS grain overlay because
 *    stacking the two reads muddy. */

/* 3) Heading weight + tracking — General Sans wants tighter negative
 *    tracking on display sizes. Bump weight to 700 on the largest. */
h1, h2,
.hero-headline, .page-hero h1, .site-headline, .site-title,
.section-headline {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  text-shadow: none !important;
}

/* No drop shadows on any text — OS rule. */
*, *::before, *::after { text-shadow: none !important; }

/* Hero "em" — no italic, no accent color. Just inline ink so the
 * phrase reads as part of the headline. */
.hero-headline em, .page-hero h1 em, .site-headline em {
  color: var(--os-ink) !important;
  font-style: normal !important;
}

/* Nav: lemon mark + name in Fraunces. */
body .nav-mark, body .nav-mark span,
body .nav-mark-name, body .nav-mark-name span {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

h3, h4, h5, h6,
.section-label, .hero-label, .phase-number, .outcome-number,
.project-tag, .nav-mark, .next-study-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 4) Coral accent — single-use emphasis. Map "forest-light" emphasis used
 *    in section labels / outcome numbers / phase numbers to coral so the
 *    site picks up the OS accent. */
.section-label, .phase-number, .hero-label,
[class*="eyebrow"] {
  color: var(--os-coral) !important;
}

/* Project tags and meta read as muted ink, not coral, to avoid stacking
 * accents. */
.project-tag { color: var(--ink-muted) !important; }

/* 5) Hero background — tightened multi-radial pastel wash. Smaller, more
 *    concentrated ellipses sitting in the upper-left and lower-right corners
 *    so the center stays clean chalk. */
/* Hero gradient — full-bleed linear wash white → pink → blue. The image
 * is oversized (140%) and shifted by --bgx/--bgy as the cursor moves,
 * which warps the visible portion subtly without ever showing a blob.
 * Acts like a smooth matrix slide of the underlying canvas. */
.hero-wrapper, .page-hero {
  --bgx: 50%;
  --bgy: 50%;
  background-color: #FBFCFF !important;
  background-image:
    linear-gradient(100deg,
      #FFFFFF 0%,
      #FFFFFF 22%,
      #FBEFF3 38%,
      var(--os-blush) 55%,
      #C9CDEC 75%,
      var(--os-periwinkle) 92%,
      #9AAEDA 100%) !important;
  background-size: 140% 140% !important;
  background-position: var(--bgx) var(--bgy) !important;
  overflow: hidden !important;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.hero-wrapper::before, .page-hero::before {
  opacity: 0.35 !important;
}

/* 6) Buttons — flatten to OS register. Primary buttons use ink, ghost buttons
 *    keep an ink outline. Pill radius matches OS. */
.btn-primary, .btn-home, #pw-submit, button[type="submit"] {
  background: var(--os-ink) !important;
  color: var(--os-chalk) !important;
  border-radius: 12px !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.btn-primary:hover, .btn-home:hover, #pw-submit:hover {
  background: #2C3354 !important;
}

/* Global button radius constant — 20px on every button-like element. */
.btn-primary, .btn-ghost, .btn-home, .btn-external,
button, [type="submit"], #pw-submit,
input[type="button"], input[type="reset"] {
  border-radius: 12px !important;
}

.btn-ghost, .btn-external {
  border-radius: 12px !important;
  font-family: var(--body) !important;
  font-weight: 500 !important;
  border-color: rgba(26, 31, 58, 0.2) !important;
  color: var(--os-ink) !important;
}

.btn-ghost:hover, .btn-external:hover {
  background: rgba(26, 31, 58, 0.06) !important;
  border-color: var(--os-ink) !important;
}

/* Kill the inherited body::before warm-wash from index.html — it's a
 * fixed parchment tint that gives everything a beige cast. */
body::before { background: transparent !important; backdrop-filter: none !important; }

/* Make the document root cool too so any layer between body and the
 * viewport edge (scrollbar gutter, browser default margin, html bg)
 * doesn't show as warm. */
html { background-color: #FBFCFF !important; margin: 0 !important; padding: 0 !important; }
body { margin: 0 !important; padding: 0 !important; }

/* Base body wash — the lightest periwinkle. Applies sitewide so the
 * portfolio pages (case studies, art, applied-ai, 404) all share this
 * cool off-white. Override --parchment too so any place that still
 * references it picks up the same color. */
:root { --parchment: #FBFCFF; }
body { background-color: #FBFCFF !important; }

/* Full-bleed section helper — Selected Work, About, etc. need to break
 * out of any parent container so their backgrounds reach the viewport
 * edges. */
.projects-section,
#about {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
}

/* Selected Work — pale periwinkle wash. */
.projects-section { background: #FBFCFF !important; }

/* About — clean white. Push back the internal padding so content stays
 * aligned to the same gutter the rest of the page uses. */
#about {
  background: #FFFFFF !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
@media (max-width: 900px) {
  #about { padding-left: 2rem !important; padding-right: 2rem !important; }
}
@media (max-width: 560px) {
  #about { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* Password gate overlay (case study pages) — full-bleed, lightest
 * periwinkle. Force background-image off and background-color hard so
 * the inline `background:var(--parchment)` cannot reintroduce tan. */
#pw-overlay {
  background-color: #FBFCFF !important;
  background-image: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
#pw-overlay input[type="password"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 31, 58, 0.12) !important;
  border-radius: 12px !important;
  font-family: var(--body) !important;
}
/* The "Enter password to view" prompt uses inline Instrument Serif and
 * the legacy ink #1A2218 — route through OS tokens. */
#pw-overlay p {
  font-family: var(--serif) !important;
  color: var(--os-ink) !important;
}
#pw-overlay #pw-error { color: var(--os-coral) !important; }
#pw-overlay a { color: var(--os-ink) !important; }

/* Card chrome — only the actual card-like components get the white box.
 * .showcase-item and .cross-item are content layouts inside case studies,
 * not cards; they should flow inline without rounded borders. */
.project-card, .takeaway, .artifact-card, .next-study, .cta-strip {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 31, 58, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.project-card .project-info { background: #FFFFFF !important; }

/* Strip the sage hairline borders off showcase / cross items so case
 * study sections don't read as boxes-within-boxes. */
.showcase-item, .cross-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.showcase-item:first-child, .showcase-item:last-child { border: none !important; }

/* Showcase layout — image on the LEFT, copy on the right. The markup
 * has the text div first, image second; CSS `order` flips it without
 * touching the HTML. Body copy bumps to 1rem (16px). 1px ink border
 * around the images for definition. */
.showcase-item > div { order: 2 !important; }
.showcase-item > img { order: 1 !important; }
.showcase-item img, .cross-item img {
  border: 1px solid rgba(26, 31, 58, 0.12) !important;
  border-radius: 10px !important;
  position: relative !important;
  top: 0 !important;
  transition: top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.showcase-item img:hover, .cross-item img:hover {
  top: -6px !important;
}
.showcase-body { font-size: 1rem !important; }

/* Cert page hero meta — push the View Course meta-item (which wraps
 * the btn-external) to the right edge of the flex row. */
.hero-meta { justify-content: flex-start !important; align-items: flex-start !important; }
.hero-meta .hero-meta-item:has(.btn-external) { margin-left: auto !important; }
.hero-meta .hero-meta-item:last-child { margin-left: auto !important; }

/* Contact form submit — sits on a dark ink footer. Force a chalk
 * background + ink text so the button reads against the dark wall. */
.contact-form button,
.contact-section button,
.contact-section [type="submit"] {
  background: #FBFCFF !important;
  color: var(--os-ink) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 2rem !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
}
.contact-form button:hover,
.contact-section button:hover,
.contact-section [type="submit"]:hover {
  background: var(--os-blush) !important;
}

/* Case study section backgrounds — kill any remaining warm tones and
 * the sage hairline borders that draw rule-lines through the page. */
.cross-program, .cta-strip {
  background: #FFFFFF !important;
  border-top: none !important;
}
.page-hero { border-bottom: none !important; }
.showcase-grid, .cross-grid, .cross-program-grid { background: transparent !important; }

/* Each card's image backdrop pulls a slice from the hero wash. Six
 * variations across the project grid, each card occupying a slightly
 * different position along the white → blush → periwinkle arc so the
 * grid reads as a coherent palette family rather than identical tiles. */
.project-card:nth-of-type(1) .project-image {
  background: linear-gradient(135deg,
    #FFFFFF 0%, #FBEFF3 40%, var(--os-blush) 100%) !important;
}
.project-card:nth-of-type(2) .project-image {
  background: linear-gradient(135deg,
    #FBEFF3 0%, var(--os-blush) 50%, #D9DCF0 100%) !important;
}
.project-card:nth-of-type(3) .project-image {
  background: linear-gradient(135deg,
    #FFFFFF 0%, #D9DCF0 45%, var(--os-periwinkle) 100%) !important;
}
/* Card 4 (Product Curriculum) — reuse card 2's blush → periwinkle
 * bridge gradient. Cool periwinkle diagram still reads against it. */
.project-card:nth-of-type(4) .project-image {
  background: linear-gradient(135deg,
    #FBEFF3 0%, var(--os-blush) 50%, #D9DCF0 100%) !important;
}
/* Card 5 (Ramus) — reuse card 3's periwinkle gradient. Apricot diagram
 * remains warm-on-cool. */
.project-card:nth-of-type(5) .project-image {
  background: linear-gradient(135deg,
    #FFFFFF 0%, #D9DCF0 45%, var(--os-periwinkle) 100%) !important;
}
/* Card 6 (EIM) — reuse card 1's blush gradient. Periwinkle diagram
 * remains cool-on-warm. */
.project-card:nth-of-type(6) .project-image {
  background: linear-gradient(135deg,
    #FFFFFF 0%, #FBEFF3 40%, var(--os-blush) 100%) !important;
}

/* ─── Per-card diagram palette ───────────────────────────────────────
 * Each card's diagram is MONOCHROMATIC — three shades of a single hue
 * (light / mid / deep) plus white for neutral shapes and ink strokes.
 * The hue is complementary to the backdrop so the diagram still reads
 * with strong contrast against its gradient.
 *
 *   Card 1 (blush bg)      → mono periwinkle
 *   Card 2 (pink/coral bg) → mono periwinkle
 *   Card 3 (periwinkle bg) → mono blush
 *   Card 4 (apricot bg)    → mono periwinkle
 *   Card 5 (lilac bg)      → mono apricot
 *   Card 6 (wheat bg)      → mono periwinkle
 */

/* Card 1 — mono periwinkle */
.project-card:nth-of-type(1) .project-image svg .main { fill: #8FA1D0 !important; }
.project-card:nth-of-type(1) .project-image svg .sec  { fill: #C5CFE8 !important; }
.project-card:nth-of-type(1) .project-image svg .neu  { fill: #FFFFFF !important; }
.project-card:nth-of-type(1) .project-image svg .acc  { fill: #6E84BF !important; }
.project-card:nth-of-type(1) .project-image svg .str  { stroke: var(--os-ink) !important; }

/* Card 2 — mono periwinkle (cert frame becomes deep periwinkle) */
.project-card:nth-of-type(2) .project-image svg .main,
.project-card:nth-of-type(2) .project-image svg .geo-main { fill: #8FA1D0 !important; }
.project-card:nth-of-type(2) .project-image svg .sec,
.project-card:nth-of-type(2) .project-image svg .geo-sec  { fill: #C5CFE8 !important; }
.project-card:nth-of-type(2) .project-image svg .neu,
.project-card:nth-of-type(2) .project-image svg .geo-neu  { fill: #FFFFFF !important; }
.project-card:nth-of-type(2) .project-image svg .acc,
.project-card:nth-of-type(2) .project-image svg .geo-acc  { fill: #6E84BF !important; }
.project-card:nth-of-type(2) .project-image svg .str,
.project-card:nth-of-type(2) .project-image svg .geo-str  { stroke: var(--os-ink) !important; }
.project-card:nth-of-type(2) .project-image svg rect.geo-main[x="9.67"] { fill: #6E84BF !important; }

/* Card 3 — mono blush. Hourglass shading: dark on the outer slabs,
 * lightest at the white center, value steps down toward s4. */
.project-card:nth-of-type(3) .project-image svg .price-s1 polygon { fill: #D87A8C !important; }
.project-card:nth-of-type(3) .project-image svg .price-s2 polygon { fill: #E89BA8 !important; }
.project-card:nth-of-type(3) .project-image svg .price-s3 polygon { fill: #F0B5C0 !important; }
.project-card:nth-of-type(3) .project-image svg .price-s4 rect    { fill: #FBE5EA !important; }
.project-card:nth-of-type(3) .project-image svg .price-s5 polygon { fill: #F0B5C0 !important; }
.project-card:nth-of-type(3) .project-image svg .price-s6 polygon { fill: #E89BA8 !important; }
.project-card:nth-of-type(3) .project-image svg .price-s7 polygon { fill: #D87A8C !important; }

/* Card 4 — mono periwinkle */
.project-card:nth-of-type(4) .project-image svg .main { fill: #8FA1D0 !important; }
.project-card:nth-of-type(4) .project-image svg .sec  { fill: #C5CFE8 !important; }
.project-card:nth-of-type(4) .project-image svg .neu  { fill: #FFFFFF !important; }
.project-card:nth-of-type(4) .project-image svg .acc  { fill: #6E84BF !important; }
.project-card:nth-of-type(4) .project-image svg .str  { stroke: var(--os-ink) !important; }

/* Card 5 (Ramus) — mono blush (warm against the cool periwinkle backdrop
 * without veering brown). */
.project-card:nth-of-type(5) .project-image svg .main { fill: #E89BA8 !important; }
.project-card:nth-of-type(5) .project-image svg .sec  { fill: #F0B5C0 !important; }
.project-card:nth-of-type(5) .project-image svg .neu  { fill: #FFFFFF !important; }
.project-card:nth-of-type(5) .project-image svg .acc  { fill: #D87A8C !important; }
.project-card:nth-of-type(5) .project-image svg .str  { stroke: var(--os-ink) !important; }

/* Card 6 — mono periwinkle */
.project-card:nth-of-type(6) .project-image svg .main { fill: #8FA1D0 !important; }
.project-card:nth-of-type(6) .project-image svg .sec  { fill: #C5CFE8 !important; }
.project-card:nth-of-type(6) .project-image svg .neu  { fill: #FFFFFF !important; }
.project-card:nth-of-type(6) .project-image svg .acc  { fill: #6E84BF !important; }
.project-card:nth-of-type(6) .project-image svg .str  { stroke: var(--os-ink) !important; }

/* Belt-and-braces — if a .project-image still falls through to the
 * paper-theme sage-light fill, force it cool. */
.project-image { background-color: #F4F6FC !important; }

/* Generic .item-img fallback. */
.item-img[style*="#ffffff"], .item-img[style*="#FFFFFF"] {
  background: var(--os-cream) !important;
}

/* 8) Section dividers — full-bleed 2px, soft ink at low opacity. Unhide
 *    the divider directly after the hero (paper-theme.css hides it). */
.hero-wrapper + hr { display: block !important; }

hr, .section-divider {
  border: none !important;
  border-top: 2px solid rgba(26, 31, 58, 0.06) !important;
  background: transparent !important;
  margin: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
}

/* 9) Footer / CTA dark sections — if the original used forest dark, switch
 *    to ink. */
footer, .cta-dark, .contact-section.dark {
  background: var(--os-ink) !important;
  color: var(--os-chalk) !important;
}

/* 10) SVG project-card hooks — each card SVG gets its own slot in the hue
 *     arc so the set reads as a deliberate system. Common rules: stroke is
 *     ink, accent (single-use emphasis) is coral, loop indicator is coral.
 *     Arc order reference:
 *       Ink → Periwinkle → Lilac → Blush → Apricot → Wheat → Coral
 */

/* Shared: strokes + accent + loop */
.syst-svg .str, .geo-svg .str, .price-svg .str, .cedu-svg .str,
.ramus-svg .str, .eim-svg .str { stroke: var(--os-ink) !important; }

.syst-svg .acc, .geo-svg .acc, .price-svg .acc, .cedu-svg .acc,
.ramus-svg .acc, .eim-svg .acc { fill: var(--os-coral) !important; }

.syst-svg .loop, .geo-svg .loop, .price-svg .loop, .cedu-svg .loop,
.ramus-svg .loop, .eim-svg .loop { stroke: var(--os-coral) !important; }

/* Each SVG class is monochromatic — three shades of one hue, plus
 * white for the neutral shape and ink for strokes. Same approach as
 * the per-card overrides on index, but applied globally so the case
 * study page-heroes inherit the same treatment. */

/* syst — mono periwinkle */
.syst-svg .main { fill: #8FA1D0 !important; }
.syst-svg .sec  { fill: #C5CFE8 !important; }
.syst-svg .neu  { fill: #FFFFFF !important; }

/* price — mono blush (mirrored bar shape handled below) */
.price-svg .main { fill: #E89BA8 !important; }
.price-svg .sec  { fill: #F0B5C0 !important; }
.price-svg .neu  { fill: #FFFFFF !important; }

/* cedu — mono periwinkle */
.cedu-svg .main { fill: #8FA1D0 !important; }
.cedu-svg .sec  { fill: #C5CFE8 !important; }
.cedu-svg .neu  { fill: #FFFFFF !important; }

/* ramus — mono blush */
.ramus-svg .main { fill: #E89BA8 !important; }
.ramus-svg .sec  { fill: #F0B5C0 !important; }
.ramus-svg .neu  { fill: #FFFFFF !important; }

/* eim — mono periwinkle */
.eim-svg .main { fill: #8FA1D0 !important; }
.eim-svg .sec  { fill: #C5CFE8 !important; }
.eim-svg .neu  { fill: #FFFFFF !important; }

/* geo — mono apricot (cert is warm) */
.geo-svg .main { fill: #ECC6A6 !important; }
.geo-svg .sec  { fill: #F2D3B5 !important; }
.geo-svg .neu  { fill: #FFFFFF !important; }

/* .geo-svg prefixed classes */
.geo-svg .geo-main { fill: #ECC6A6 !important; }
.geo-svg .geo-sec  { fill: #F2D3B5 !important; }
.geo-svg .geo-neu  { fill: #FFFFFF !important; }
.geo-svg .geo-acc  { fill: var(--os-coral) !important; }
.geo-svg .geo-str  { stroke: var(--os-ink) !important; }

/* Index hero graphic — cycles through syst/geo/cedu/price. Force all
 * to mono periwinkle here so the hero reads as a single blue color
 * across every cycle frame. Higher specificity (.hero-graphic prefix)
 * beats the per-svg-class rules above. */
.hero-graphic .syst-svg .main,
.hero-graphic .geo-svg .main, .hero-graphic .geo-svg .geo-main,
.hero-graphic .cedu-svg .main,
.hero-graphic .price-svg .main { fill: #8FA1D0 !important; }

.hero-graphic .syst-svg .sec,
.hero-graphic .geo-svg .sec, .hero-graphic .geo-svg .geo-sec,
.hero-graphic .cedu-svg .sec,
.hero-graphic .price-svg .sec { fill: #C5CFE8 !important; }

.hero-graphic .syst-svg .neu,
.hero-graphic .geo-svg .neu, .hero-graphic .geo-svg .geo-neu,
.hero-graphic .cedu-svg .neu,
.hero-graphic .price-svg .neu { fill: #FFFFFF !important; }

.hero-graphic .syst-svg .acc,
.hero-graphic .geo-svg .acc, .hero-graphic .geo-svg .geo-acc,
.hero-graphic .cedu-svg .acc,
.hero-graphic .price-svg .acc { fill: #6E84BF !important; }

.hero-graphic .syst-svg .str,
.hero-graphic .geo-svg .str, .hero-graphic .geo-svg .geo-str,
.hero-graphic .cedu-svg .str,
.hero-graphic .price-svg .str { stroke: var(--os-ink) !important; }

.hero-graphic .price-svg .price-s1 polygon,
.hero-graphic .price-svg .price-s7 polygon { fill: #6E84BF !important; }
.hero-graphic .price-svg .price-s2 polygon,
.hero-graphic .price-svg .price-s6 polygon { fill: #8FA1D0 !important; }
.hero-graphic .price-svg .price-s3 polygon,
.hero-graphic .price-svg .price-s5 polygon { fill: #C5CFE8 !important; }
.hero-graphic .price-svg .price-s4 rect    { fill: #E0E8F5 !important; }

/* .price-svg bars: gradient through ink → electric → coral so the ascending
 * bar reads as "single accent at the end." */
/* price bars — symmetric two-hue progression. The seven-slab shape is
 * mirrored around s4, so the left half (s1–s3) carries one hue stepping
 * deeper toward the middle, the right half (s5–s7) carries another. s4
 * is the neutral pivot. No coral here — the price chart shouldn't pull
 * focus from the single-accent rule elsewhere. */
/* Mirror the seven-slab shape around s4 white, mono blush gradient. */
.price-svg .price-s1 polygon { fill: #D87A8C !important; }
.price-svg .price-s2 polygon { fill: #E89BA8 !important; }
.price-svg .price-s3 polygon { fill: #F0B5C0 !important; }
.price-svg .price-s4 rect    { fill: #FBE5EA !important; }
.price-svg .price-s5 polygon { fill: #F0B5C0 !important; }
.price-svg .price-s6 polygon { fill: #E89BA8 !important; }
.price-svg .price-s7 polygon { fill: #D87A8C !important; }

/* 11) SVG hex re-map — catch any remaining sage/forest hexes still hardcoded
 *     in raw SVGs across pages. */
svg [fill="#2D4A2D"], svg [fill="#2d4a2d"],
svg [fill="#3D5E3A"], svg [fill="#3d5e3a"] { fill: var(--os-ink); }
svg [fill="#4E7249"], svg [fill="#4e7249"] { fill: var(--os-electric); }
svg [fill="#C8D5C0"], svg [fill="#c8d5c0"] { fill: var(--os-lilac); }
svg [fill="#E4EDE0"], svg [fill="#e4ede0"] { fill: var(--os-fog); }
svg [fill="#F0F4EE"], svg [fill="#f0f4ee"] { fill: var(--os-chalk); }
svg [fill="#A8BBA0"], svg [fill="#a8bba0"] { fill: var(--os-periwinkle); }
svg [fill="#6B8C5F"], svg [fill="#6b8c5f"] { fill: var(--os-electric); }
svg [fill="#8FAB82"], svg [fill="#8fab82"] { fill: var(--os-lilac); }
svg [stroke="#2D4A2D"], svg [stroke="#2d4a2d"],
svg [stroke="#3D5E3A"], svg [stroke="#3d5e3a"] { stroke: var(--os-ink); }
svg [stroke="#4E7249"], svg [stroke="#4e7249"] { stroke: var(--os-electric); }
svg [stroke="#C8D5C0"], svg [stroke="#c8d5c0"] { stroke: var(--os-lilac); }

/* ──────────────────────────────────────────────────────────────────────────
 * 12) Carry-overs from paper-theme.css — folded in so os-theme is the
 *     single source of truth and paper-theme.css can be unlinked.
 * ────────────────────────────────────────────────────────────────────── */

/* Display-font routing.
 *   Fraunces (--serif): only the largest display headers — hero h1,
 *     section h2, page-hero h1, site headline, contact heading,
 *     CTA strip h2. These are the moments that should feel editorial.
 *   General Sans (--sans): every other heading / title / label —
 *     project titles, card titles, nav, eyebrows, tags, phase numbers,
 *     outcome numbers, next-study titles. These read as UI labels,
 *     not display type, so they stay sans.
 */
h1, h2, .hero-headline, .page-hero h1, .section-headline,
.site-headline, .site-title, .cta-strip h2, .contact-heading {
  font-family: var(--serif) !important;
}

h3, h4, h5, h6,
.nav-mark, .hero-label, .section-label, .phase-number, .outcome-number,
.next-study-title, .project-title, .project-tag,
[class*="title"]:not(.section-headline):not(.hero-headline):not(.site-headline):not(.site-title),
[class*="headline"]:not(.section-headline):not(.hero-headline):not(.site-headline) {
  font-family: var(--sans) !important;
}

/* Body-font routing — everything else through Inter (--body). */
body p, body li, body .hero-desc, body .project-excerpt,
body .content-body p, body .content-body li,
body .takeaway p, body .cta-strip p, body .section-sub,
body .artifact-caption, body .contact-alt, body footer p,
body .nav-mark, body .nav-mark span, body .nav-links a, body .nav-dropdown-inner a,
body .btn-primary, body .btn-ghost, body .btn-home, body .btn-external,
body button, body [type="submit"], body #pw-submit,
body .project-tag, body .project-link,
body .hero-meta-label, body .hero-meta-value,
body input, body textarea, body select,
body .wip-badge {
  font-family: var(--body) !important;
}

/* Suppress the dot-grid hero canvas from index.html. */
#hero-canvas { display: none !important; }

/* Hero grid lines — thin warm-ink 48px grid with bottom fade so the
 * pastel wash transitions softly into the next section. */
.hero-wrapper::before, .page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(to right, rgba(26,31,58,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,31,58,0.05) 1px, transparent 1px) !important;
  background-size: 48px 48px, 48px 48px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important;
}
.hero-wrapper > *, .page-hero > * { position: relative; z-index: 1; }

/* Case-study content images — 10px rounded corners. */
.showcase-item img, .cross-item img,
.overview-img,
.artifact-grid img, .motion-grid img,
.phase-section img,
.fade-up .content-grid img {
  border-radius: 10px !important;
}

/* Locked-content subsection titles — UI label register, but heavier
 * weight so they punch enough to anchor each section. */
:root h3.showcase-title,
:root h3.cross-item-title {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* End-of-file override — final word on nav-mark typography. Placed last
 * to beat the body-font routing rule in section 12, which catches
 * .nav-mark for Inter. */
body nav .nav-mark,
body nav .nav-mark span,
body nav .nav-mark-name,
body nav .nav-mark-name span {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Hero headshot — replaces the cycling SVG suite in .hero-graphic
 * on the home page only (case study heroes use SVG, not .hero-headshot). */
/* Hi, I'm Nick — small greeting line above the hero headline. Same
 * weight register as the nav "Nick Lemen" mark. Left-aligned. */
.hero-greeting {
  font-family: var(--serif) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--os-ink) !important;
  margin: 0 0 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.hero-greeting .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: heroWave 2.4s ease-in-out 0.5s 2;
}
@keyframes heroWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* Pull the hero graphic closer to the headline by shrinking the flex
 * gap on the hero container. */
.hero { gap: 1.5rem !important; }
.hero-graphic {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}
.hero-graphic .hero-headshot {
  display: block !important;
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* Site content max-width — cap inner content at ~1240px on wide
 * displays so headlines and copy don't stretch edge-to-edge. The
 * section backgrounds (Selected Work pale wash, About white) still
 * bleed full-bleed via the rules earlier in the file; only the
 * *content inside* each section gets centered and capped. */
.hero-wrapper { --content-max: 1480px; }
.projects-section,
#about,
.contact-section,
section[id],
.cross-program,
.cta-strip {
  --content-max: 1240px;
}

/* Wrap a max-width band on every direct content child. Use a
 * uniform inline-padding via `padding-inline` so we keep gutters
 * inside the capped band. */
.hero-wrapper > *,
.projects-section > *,
#about > *,
.contact-section > *,
.cross-program > *,
.cta-strip > * {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Page-hero on case studies — let the gradient bleed edge-to-edge.
 * Capping the element width left tan body bg in the side margins.
 * The existing inline padding (10rem 4rem) keeps content from the
 * viewport edges; on very wide displays the inner grid still reads
 * because the 2-column layout has its own max widths internally. */
/* Page-hero — let the gradient fill its natural block width (100% of
 * body). Body is unconstrained, so this is full viewport already. No
 * 100vw tricks (those cause horizontal overflow). */
.page-hero {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
}

/* Default everything to Poppins via inheritance from body. Targeted
 * rules above (h1/h2/.hero-headline) override with Fraunces. This
 * approach uses low-specificity rules so the cascade is predictable.
 * Inline `style="font-family:..."` attributes are handled below with
 * specific overrides only where they exist (pw-overlay inputs etc). */
body { font-family: 'Poppins', system-ui, sans-serif !important; }

/* Inherit from body for all elements except where we explicitly set
 * Fraunces. `inherit` keeps the cascade clean — wherever we set
 * body to Poppins, everything inherits, and headers override. */
nav, main, section, article, aside, footer, div, p, span, li, ul, ol,
a, button, input, textarea, select, label, strong, b, i, small, code {
  font-family: inherit;
}

/* Headers + their descendants → Fraunces. Word-wrap spans inside the
 * hero headline are caught by the descendant selector. */
h1, h2,
.hero-headline, .page-hero h1, .site-headline, .site-title,
.section-headline, .cta-strip h2, .contact-heading,
h1 *, h2 *,
.hero-headline *, .page-hero h1 *, .site-headline *,
.section-headline *, .cta-strip h2 *, .contact-heading * {
  font-family: 'Fraunces', Georgia, serif !important;
}