/* Canonical Buildhaus token system, ported from index.html / work.html so the
     blog index renders in the same visual family as the rest of the site. */
  :root {
    --bg: #FAFAF8;
    --ink: #111C18;
    --ink-soft: rgba(17, 28, 24, 0.55);
    --ink-faint: rgba(17, 28, 24, 0.10);
    --rule: rgba(17, 28, 24, 0.10);
    --rule-med: rgba(17, 28, 24, 0.16);
    --yellow: #FBDC11;
    --yellow-deep: #D8BB00;
    --cream: #F2EED6;
    --blue: #314095;

    /* Dark sage-green: the structural outline / frame accent (card frames,
       meta-rail dividers, section hairlines). Yellow stays the pop accent. */
    --sage: #2C3A31;
    --rule-sage: rgba(44, 58, 49, 0.22);

    /* Dark-surface roles (for the pivot footer + drawer). --ink-deep is NOT --ink. */
    --ink-deep: #0E1714;
    --on-dark: #FAFAF8;
    --on-dark-soft: rgba(250, 250, 248, 0.88);
    --on-dark-mute: rgba(250, 250, 248, 0.55);
    --on-dark-faint: rgba(250, 250, 248, 0.10);
    --rule-dark: rgba(250, 250, 248, 0.10);
    --rule-dark-med: rgba(250, 250, 248, 0.18);

    --font-display: "Inter", -apple-system, system-ui, sans-serif;
    --font-body:    "Inter", -apple-system, system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;
    --font-display-serif: "Fraunces", "Iowan Old Style", Georgia, serif; /* display serif: heroes + section h2s only, never below 18px rendered */
    --tracking-serif-hero: -0.02em;
    --tracking-serif-display: -0.01em;

    /* Two Fraunces weights only: 850 for the true page-mast hero, 620 for every
       other display + section head. */
    --weight-hero: 850;
    --weight-display: 620;
    --weight-secondary: 620;

    --fs-jumbo:   clamp(40px, 9vw, 152px);
    --fs-mast:    clamp(44px, 7.4vw, 124px); /* page-mast h1 only */
    --fs-pivot:   clamp(48px, 8vw, 132px);   /* footer megahead only */
    --fs-display: clamp(34px, 6vw, 96px);
    --fs-h2:      clamp(28px, 4.4vw, 72px);
    --fs-feature: clamp(26px, 3vw, 44px);
    --fs-value:   clamp(26px, 2.6vw, 40px);
    --fs-h3:      clamp(22px, 2.4vw, 36px);  /* single sans-subhead role */
    --fs-lead:    clamp(18px, 1.6vw, 22px);
    --fs-body:    clamp(15px, 1.1vw, 17px);
    --fs-body-sm: 14px;

    /* Spacing scale (8px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;
    /* Fluid layout tokens */
    --pad-section:    clamp(56px, 6.5vw, 88px);
    --pad-section-lg: clamp(64px, 7vw, 104px);
    --pad-mast-top:   clamp(132px, 15vw, 220px);
    --wrap-pad:       clamp(20px, 3.4vw, 72px);
    --gap-head:       clamp(48px, 5vw, 80px);
    --rail-pad:       clamp(18px, 2vw, 26px);

    /* Radius scale */
    --radius-xs: 2px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-pill: 999px;

    /* Shadow scale */
    --shadow-card: 0 18px 48px -24px rgba(17, 28, 24, 0.34);
    --shadow-card-hover: 0 36px 80px -28px rgba(17, 28, 24, 0.48);

    --tracking-display: -0.035em;
    --leading-display: 0.94;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  }
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: var(--bg); scroll-behavior: auto; }
  body {
    background-color: var(--bg);
    background-image:
      /* Yellow corner glow (top-right) */
      radial-gradient(ellipse 1200px 800px at 100% -10%, rgba(251, 220, 17, 0.14), transparent 58%),
      /* Blue corner glow (bottom-left) */
      radial-gradient(ellipse 900px 700px at -8% 70%, rgba(49, 64, 149, 0.07), transparent 62%),
      /* Wide vertical blueprint hairlines every 120px */
      repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(17, 28, 24, 0.04) 119px, rgba(17, 28, 24, 0.04) 120px),
      /* Tight architectural dot grid at 24px */
      radial-gradient(circle at 1px 1px, rgba(17, 28, 24, 0.09) 1px, transparent 1.6px);
    background-size: auto, auto, auto, 24px 24px;
    background-attachment: fixed, fixed, fixed, fixed;
    color: var(--ink);
    font-family: var(--font-body); font-weight: 400;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; line-height: 1.5;
  }
  /* Architectural backdrop - let the pattern bleed through light sections */
  .page-hero, .blog-list {
    background-color: transparent !important;
  }
  .wrap { max-width: 1920px; margin: 0 auto; padding: 0 var(--wrap-pad); }
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); }
  .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* Nav (shared canonical chrome with index / work) */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px, 3.4vw, 48px); font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; transition: background 0.3s ease, backdrop-filter 0.3s ease; }
  .nav.is-pinned { background: rgba(250, 250, 248, 0.85); backdrop-filter: saturate(120%) blur(14px); -webkit-backdrop-filter: saturate(120%) blur(14px); box-shadow: 0 1px 0 var(--rule); }
  .nav.over-dark.is-pinned { background: color-mix(in srgb, var(--ink-deep) 85%, transparent); box-shadow: 0 1px 0 var(--rule-dark); }
  .nav.over-dark a, .nav.over-dark ul a { color: var(--bg); }
  .nav.over-dark .cta { border-color: rgba(250, 250, 248, 0.45); color: var(--bg); }
  .nav.over-dark ul a:hover, .nav.over-dark ul a[aria-current="page"] { color: var(--yellow); }
  .nav a { color: var(--ink); text-decoration: none; }
  .nav .brand-mark { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; color: var(--ink); line-height: 1; position: relative; }
  .nav .brand-mark .b-build { color: inherit; }
  .nav .brand-mark .b-haus { color: inherit; background-image: linear-gradient(to top, var(--yellow) 0%, rgba(251, 220, 17, 0.78) 14%, transparent 14%, transparent 100%); padding: 0 0.04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .nav .brand-mark .b-dot { display: inline-block; width: 0.20em; height: 0.20em; border-radius: 50%; background: var(--yellow); margin-left: 0.04em; vertical-align: baseline; transform: translateY(-0.04em); transition: transform 0.35s var(--ease-out), background 0.25s ease; }
  .nav .brand-mark:hover .b-dot { transform: translateY(-0.04em) scale(1.6); background: var(--blue); }
  .nav.over-dark .brand-mark:hover .b-dot { background: var(--bg); }
  .nav.over-dark .brand-mark { color: var(--bg); }
  .nav ul { display: flex; gap: 28px; list-style: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }
  .nav ul a { opacity: 0.65; transition: opacity 0.2s ease, color 0.2s ease; }
  .nav ul a:hover, .nav ul a[aria-current="page"] { opacity: 1; color: var(--blue); }
  .nav .cta { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }
  .nav .cta::after { content: ""; width: 6px; height: 6px; background: var(--yellow); border-radius: var(--radius-pill); }
  .nav .cta:hover { background: var(--ink); color: var(--bg); }
  .nav.over-dark.is-pinned .cta:hover { background: var(--bg); color: var(--ink); }
  .nav .nav-status { display: none; }
  .nav-menu-btn { display: none; }
  .nav-drawer { display: none; }
  .nav-action { display: none; }

  @media (max-width: 820px) {
    /* Always-visible sticky header on mobile: 3-element grid.
       Burger left, wordmark centre, start-a-project action right.
       Solid backing regardless of scroll position; the over-dark
       variant flips treatment when over the hero or pivot. */
    .nav {
      display: grid;
      grid-template-columns: 38px 1fr 38px;
      grid-auto-flow: dense;
      align-items: center;
      gap: 10px;
      padding: 11px clamp(16px, 4vw, 24px);
      background: rgba(250, 250, 248, 0.94);
      backdrop-filter: saturate(120%) blur(14px);
      -webkit-backdrop-filter: saturate(120%) blur(14px);
      box-shadow: 0 1px 0 var(--rule);
    }
    .nav.over-dark {
      background: rgba(14, 23, 20, 0.94);
      box-shadow: 0 1px 0 rgba(250, 250, 248, 0.10);
    }
    .nav ul, .nav .cta { display: none; }
    .nav .nav-status { display: none; }
    .nav .brand-mark {
      grid-column: 2; grid-row: 1;
      justify-self: center;
      font-size: 18px;
    }

    /* Left: circular ghost burger. Flips treatment over dark. */
    .nav-menu-btn {
      display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 5px; width: 38px; height: 38px; padding: 0;
      background: rgba(17, 28, 24, 0.08); border: 0; border-radius: 50%;
      cursor: pointer;
      grid-column: 1; grid-row: 1; justify-self: start;
      transition: background 0.25s ease;
    }
    .nav.over-dark .nav-menu-btn { background: rgba(255, 255, 255, 0.14); }
    .nav-menu-btn span {
      display: block; width: 16px; height: 1.5px; background: var(--ink);
      transition: transform 0.35s var(--ease-out), opacity 0.2s ease, background 0.25s ease;
      transform-origin: center;
    }
    .nav.over-dark .nav-menu-btn span { background: var(--bg); }
    .nav-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-menu-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-menu-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Right: yellow action circle, the site's one primary action.
       Yellow on both nav states; the halo ring flips with the theme. */
    .nav .nav-action {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--yellow); color: var(--ink);
      grid-column: 3; grid-row: 1; justify-self: end;
      box-shadow: 0 0 0 1px rgba(17, 28, 24, 0.10);
      transition: transform 0.3s var(--ease-out), box-shadow 0.25s ease;
    }
    .nav .nav-action svg { width: 15px; height: 15px; display: block; }
    .nav .nav-action:active { transform: scale(0.92); }
    .nav.over-dark .nav-action {
      color: var(--ink);
      box-shadow: 0 0 0 1px rgba(250, 250, 248, 0.22);
    }

    /* Top-drop drawer: ink gradient + corner yellow glow + the site's
       blueprint dot grid (24px, yellow at 6%). */
    .nav-drawer {
      display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(circle at 84% 8%, rgba(251, 220, 17, 0.13), transparent 52%),
        radial-gradient(circle, rgba(251, 220, 17, 0.06) 1px, transparent 1.6px),
        linear-gradient(168deg, #16231E 0%, var(--ink) 46%, #0B1310 100%);
      background-size: auto, 24px 24px, auto;
      color: var(--bg); z-index: 49;
      padding: 84px clamp(20px, 5vw, 40px) clamp(24px, 5vw, 40px);
      transform: translateY(-100%); transition: transform 0.55s var(--ease-out);
      overflow-y: auto; pointer-events: none;
    }
    .nav-drawer.is-open { transform: translateY(0); pointer-events: auto; }
    .nav-drawer-inner { max-width: 480px; margin: 0 auto; counter-reset: navnum; }

    /* Eyebrows: yellow dash + ruled baseline (MENU / FOLLOW). */
    .nav-drawer-eyebrow {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em;
      text-transform: uppercase; color: var(--yellow);
      padding-bottom: 12px; margin-bottom: 10px;
      border-bottom: 1px solid rgba(251, 220, 17, 0.28);
    }
    .nav-drawer-eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--yellow); flex: 0 0 auto; }
    .nav-drawer .drawer-follow { margin-top: 26px; margin-bottom: 12px; }

    /* Numbered nav links: mono counter, display label, arrow. */
    .nav-drawer .drawer-link {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(26px, 7vw, 34px); letter-spacing: -0.025em; line-height: 1.1;
      color: var(--bg); text-decoration: none; padding: 12px 0;
      border-bottom: 1px solid rgba(250, 250, 248, 0.10);
      transition: padding-left 0.3s var(--ease-out), color 0.2s ease;
    }
    .nav-drawer .drawer-link::before {
      counter-increment: navnum;
      content: counter(navnum, decimal-leading-zero);
      font-family: var(--font-mono); font-weight: 400;
      font-size: 11px; letter-spacing: 0.08em;
      color: var(--yellow); flex: 0 0 24px;
      transform: translateY(0.18em);
    }
    .nav-drawer .drawer-link::after {
      content: "\2192"; font-family: var(--font-mono); font-weight: 400;
      font-size: 18px; opacity: 0.4; margin-left: auto;
      transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
    }
    .nav-drawer .drawer-link:hover,
    .nav-drawer .drawer-link.active { padding-left: 6px; color: var(--yellow); }
    .nav-drawer .drawer-link:hover::after { opacity: 1; transform: translateX(4px); }

    /* Primary CTA pill. */
    .nav-drawer .drawer-cta {
      display: inline-flex; align-items: center; gap: 12px;
      margin-top: 18px; padding: 15px 26px;
      background: var(--yellow); color: var(--ink); border-radius: 999px;
      text-decoration: none; font-family: var(--font-display); font-weight: 700;
      font-size: 15px; letter-spacing: -0.005em;
    }
    .nav-drawer .drawer-cta::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }

    /* Socials: 3-up bordered cards. Real accounts only. */
    .nav-drawer .drawer-socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .nav-drawer .drawer-socials a {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 12px 6px; border-radius: 10px;
      background: rgba(250, 250, 248, 0.05);
      border: 1px solid rgba(250, 250, 248, 0.08);
      color: var(--bg); text-decoration: none;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .nav-drawer .drawer-socials a:hover { border-color: rgba(251, 220, 17, 0.55); background: rgba(250, 250, 248, 0.08); }
    .nav-drawer .drawer-socials svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }

    /* Direct contact card: the studio inbox. */
    .nav-drawer .drawer-contact {
      display: block; margin-top: 10px; padding: 14px 18px;
      background: var(--yellow); color: var(--ink);
      border-radius: 14px; text-decoration: none;
      transition: transform 0.3s var(--ease-out);
    }
    .nav-drawer .drawer-contact:active { transform: scale(0.985); }
    .nav-drawer .drawer-contact .label {
      display: block; font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(17, 28, 24, 0.72); margin-bottom: 4px;
    }
    .nav-drawer .drawer-contact .value {
      display: block; font-family: var(--font-display-serif, "Fraunces", Georgia, serif);
      font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
    }

    /* Locations: the studio's own footer phrasing, yellow dot separator. */
    .nav-drawer .drawer-locations {
      margin-top: 18px; padding-top: 14px;
      border-top: 1px solid rgba(250, 250, 248, 0.10);
      display: flex; align-items: center; justify-content: center;
      column-gap: 10px; row-gap: 4px; flex-wrap: wrap; text-align: center;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(250, 250, 248, 0.55);
    }
    .nav-drawer .drawer-locations .sep { color: var(--yellow); }
    body.nav-locked { overflow: hidden; }
  }
  /* Reduced motion: mobile nav + drawer transitions off, matching the .reveal guard. */
  @media (prefers-reduced-motion: reduce) {
    .nav-drawer,
    .nav-menu-btn, .nav-menu-btn span,
    .nav .nav-action,
    .nav-drawer .drawer-link, .nav-drawer .drawer-link::after,
    .nav-drawer .drawer-socials a,
    .nav-drawer .drawer-contact { transition: none; }
  }

  /* Page masthead, single-column left-aligned. Canonical page-mast hero role:
     Fraunces serif h1 (weight 850), mono sec-marker eyebrow with the yellow dot,
     Inter lede. Matches /work and the home masthead. */
  .page-hero { padding: var(--pad-mast-top) 0 clamp(48px, 6vw, 88px); background: var(--bg); border-bottom: 1px solid var(--rule); }
  .page-hero .grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.2vw, 36px); align-items: start; }
  .page-hero .sec-marker {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .page-hero .sec-marker::before {
    content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill);
    background: var(--yellow); box-shadow: 0 0 0 4px rgba(251, 220, 17, 0.18);
  }
  .page-hero h1 {
    font-family: var(--font-display-serif); font-weight: var(--weight-hero);
    font-size: var(--fs-mast); line-height: 0.95; letter-spacing: var(--tracking-serif-hero);
    color: var(--ink); max-width: 16ch; text-align: left;
  }
  .page-hero h1 em {
    font-style: italic; margin-inline: -0.06em 0.08em;
    background-image: linear-gradient(to top, var(--yellow) 0%, rgba(251, 220, 17, 0.78) 14%, transparent 14%, transparent 100%);
    padding: 0 0.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .page-hero .lede {
    font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 300;
    line-height: 1.5; color: var(--ink-soft); max-width: 60ch; margin-top: clamp(24px, 2.6vw, 36px);
  }
  .page-hero .lede strong { font-weight: 500; color: var(--ink); }

  /* Blog index - strict magazine contents page. Mono column heads + row meta use
     the canonical meta-key role (11px / 0.18em). The sage hairline frames the
     contents header so the list reads in the site's structural-accent system. */
  .blog-list { padding: clamp(24px, 3vw, 48px) 0 clamp(64px, 8vw, 120px); }
  .blog-list-head {
    display: grid; grid-template-columns: 56px 200px 1fr 220px 80px;
    column-gap: clamp(20px, 2.4vw, 36px);
    padding: 0 clamp(8px, 1vw, 16px) 18px;
    border-bottom: 1px solid var(--sage);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  }
  .blog-list-head span:last-child { text-align: right; }
  @media (max-width: 800px) { .blog-list-head { display: none; } }

  .post-card {
    border-bottom: 1px solid var(--rule-sage);
    transition: background 0.3s ease;
  }
  .post-card:hover { background: rgba(251, 220, 17, 0.06); }
  .post-card-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
    align-items: center;
    padding: clamp(20px, 2.2vw, 32px) clamp(8px, 1vw, 16px);
    text-decoration: none;
    color: var(--ink);
    transition: padding-left 0.3s var(--ease-out);
  }
  @media (min-width: 800px) {
    .post-card-link {
      grid-template-columns: 56px 200px 1fr 220px 80px;
      column-gap: clamp(20px, 2.4vw, 36px);
    }
  }
  .post-card:hover .post-card-link { padding-left: clamp(16px, 1.6vw, 28px); }
  .post-card-num {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; color: var(--ink-soft);
    align-self: start;
  }
  .post-card-thumb {
    display: block; width: 100%; aspect-ratio: 16 / 10;
    object-fit: cover; border-radius: var(--radius-sm);
    border: 1px solid var(--rule-sage);
    transition: filter 0.4s var(--ease-out), border-color 0.4s ease;
  }
  .post-card:hover .post-card-thumb { filter: brightness(1.05); border-color: var(--sage); }
  .post-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .post-card-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.15; letter-spacing: -0.02em;
    color: var(--ink); max-width: 36ch;
  }
  .post-card-title em {
    font-style: italic;
    background-image: linear-gradient(to top, var(--yellow) 0%, rgba(251, 220, 17, 0.78) 14%, transparent 14%, transparent 100%);
    padding: 0 0.04em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .post-card-excerpt {
    font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 300;
    line-height: 1.5; color: var(--ink-soft); max-width: 50ch;
  }
  .post-card-meta {
    display: grid; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
    align-self: start;
  }
  .post-card-meta .cat { color: var(--ink); font-weight: 500; }
  .post-card-meta .date, .post-card-meta .read { color: var(--ink-soft); }
  .post-card-arrow {
    font-family: var(--font-mono); font-size: 18px;
    color: var(--ink); justify-self: end; align-self: start;
    transition: transform 0.3s ease;
  }
  .post-card:hover .post-card-arrow { transform: translateX(6px); color: var(--blue); }

  @media (max-width: 800px) {
    .post-card-num { order: -1; }
    .post-card-arrow { display: none; }
  }

  /* Pivot footer (canonical dark-surface chrome). Fraunces serif megahead,
     dark-surface role tokens, 0.18em mono labels, sage hairline frames. */
  .pivot { position: relative; background: var(--ink); color: var(--bg); overflow: hidden; }
  .pivot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--yellow); z-index: 3; }
  .pivot::after {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(45deg, rgba(250, 250, 248, 0.025) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(-45deg, rgba(250, 250, 248, 0.025) 0 1px, transparent 1px 30px);
    pointer-events: none; z-index: 0; opacity: 0.6;
  }
  .pivot .wrap { position: relative; z-index: 2; padding-top: clamp(72px, 9vw, 144px); padding-bottom: clamp(40px, 4.4vw, 64px); }
  .pivot .head { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 48px); align-items: end; margin-bottom: clamp(56px, 6vw, 96px); }
  @media (min-width: 900px) { .pivot .head { grid-template-columns: 1.4fr 1fr; } }
  .pivot .eyebrow { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: clamp(20px, 2vw, 32px); display: inline-block; }
  .pivot .stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); padding: clamp(32px, 3.6vw, 48px) 0; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); margin-bottom: clamp(48px, 5vw, 80px); }
  @media (min-width: 760px) { .pivot .stats { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 760px) { .pivot .stats { padding: clamp(20px, 3vw, 28px) 0; margin-bottom: clamp(28px, 4vw, 40px); gap: 18px 24px; } }
  .pivot .stats .stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--bg); }
  .pivot .stats .stat .l { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-mute); }
  /* Socials: icon + label, in line with the rest of the site. */
  .pivot-grid ul.socials { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
  .pivot-grid ul.socials a { display: inline-flex; align-items: center; gap: 10px; color: var(--bg); text-decoration: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border: none; padding: 4px 0; transition: color 0.2s ease, transform 0.25s var(--ease-out); }
  .pivot-grid ul.socials a:hover { color: var(--yellow); transform: translateX(2px); }
  .pivot-grid ul.socials a svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
  .pivot h2 { font-family: var(--font-display-serif); font-weight: var(--weight-display); font-size: var(--fs-pivot); line-height: 0.94; letter-spacing: var(--tracking-serif-display); color: var(--bg); max-width: 14ch; }
  .pivot h2 em { font-style: italic; margin-inline: -0.06em 0.08em; background-image: linear-gradient(to top, var(--yellow) 0%, rgba(251, 220, 17, 0.78) 14%, transparent 14%, transparent 100%); padding: 0 0.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .pivot .start-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px; border-radius: var(--radius-pill); background: var(--yellow); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.005em; transition: background 0.25s ease, transform 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out); box-shadow: 0 0 0 0 rgba(251, 220, 17, 0); }
  .pivot .start-btn::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink); flex-shrink: 0; }
  .pivot .start-btn:hover { background: var(--bg); transform: translateY(-2px); box-shadow: 0 20px 50px -20px rgba(251, 220, 17, 0.45); }
  .pivot .start-btn .arrow { transition: transform 0.3s var(--ease-out); }
  .pivot .start-btn:hover .arrow { transform: translateX(6px); }
  .pivot-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 48px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-mute); }
  @media (min-width: 900px) { .pivot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .pivot-grid .brand-block .brand-mark-img { display: inline-block; line-height: 0; }
  .pivot-grid .brand-block .brand-mark-img img { display: block; width: clamp(120px, 14vw, 180px); height: auto; border-radius: var(--radius-sm); }
  .pivot-grid .brand-block p { margin-top: clamp(18px, 2vw, 28px); font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.6; font-weight: 300; color: var(--bg); letter-spacing: -0.005em; text-transform: none; max-width: 36ch; }
  .pivot-grid h4 { color: var(--on-dark-mute); margin-bottom: var(--space-3); font-weight: 500; }
  .pivot-grid > div > * + h4 { margin-top: var(--space-5); }
  .pivot-grid p { color: var(--bg); font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; }
  .pivot-grid p a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(250, 250, 248, 0.3); }
  .pivot-grid p a:hover { border-color: var(--bg); }
  .pivot-grid p strong { color: var(--yellow); font-weight: 500; }
  .colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: clamp(40px, 4vw, 64px); padding-top: var(--space-5); border-top: 1px solid var(--rule-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-mute); }
  .colophon a { color: inherit; text-decoration: none; }
  .colophon a:hover { color: var(--bg); }

  /* ─── Keyboard focus: consistent on-brand yellow ring (matches home / work) ── */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

/* ============================================================
   BLOG POST ARTICLE STYLES (v4)
   The .post-* classes already exist in each post's markup; these
   restyle them in the canonical Buildhaus v4 system (Fraunces
   display serif headings, Inter body, JetBrains Mono labels,
   sage + yellow accents). The architectural body backdrop shows
   through: post sections are transparent and sit at z-index 2.
   ============================================================ */
.post-breadcrumb {
  max-width: 820px; margin: 0 auto;
  padding: clamp(96px, 12vw, 132px) var(--wrap-pad) 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  position: relative; z-index: 2;
}
.post-breadcrumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule-sage); }
.post-breadcrumb a:hover { color: var(--ink); }
.post-breadcrumb .sep { color: var(--yellow-deep); margin: 0 8px; }

.post-header {
  max-width: 820px; margin: 0 auto;
  padding: clamp(96px, 12vw, 132px) var(--wrap-pad) clamp(28px, 4vw, 44px);
  position: relative; z-index: 2;
}
.post-breadcrumb + .post-header { padding-top: clamp(14px, 2vw, 22px); }
.post-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: clamp(20px, 2.5vw, 28px);
}
.post-meta .post-cat {
  background: var(--yellow); color: var(--ink);
  padding: 4px 12px; border-radius: var(--radius-xs); font-weight: 600; letter-spacing: 0.16em;
}
.post-title {
  font-family: var(--font-display-serif); font-weight: var(--weight-display);
  font-size: clamp(34px, 5vw, 64px); line-height: 1.04;
  letter-spacing: var(--tracking-serif-display); color: var(--ink);
  margin: 0 0 clamp(18px, 2vw, 26px);
}
.post-lede {
  font-family: var(--font-body); font-weight: 400; font-style: normal;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft);
  max-width: 64ch; margin: 0;
}
.post-hero {
  max-width: 1100px; margin: clamp(20px, 3vw, 36px) auto clamp(28px, 4vw, 44px);
  padding: 0 var(--wrap-pad); position: relative; z-index: 2;
}
.post-hero img {
  display: block; width: 100%; height: auto; max-height: 560px;
  object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--rule-sage);
}
.post-body {
  max-width: 720px; margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) var(--wrap-pad) clamp(56px, 7vw, 96px);
  font-family: var(--font-body); font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.75; color: rgba(17, 28, 24, 0.86);
  position: relative; z-index: 2;
}
.post-body > h2 {
  font-family: var(--font-display-serif); font-weight: var(--weight-display);
  font-size: clamp(25px, 3vw, 38px); line-height: 1.12;
  letter-spacing: var(--tracking-serif-display); color: var(--ink);
  margin: clamp(44px, 5vw, 64px) 0 clamp(14px, 1.5vw, 20px);
}
.post-body > h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 1.16em; line-height: 1.3;
  color: var(--ink); margin: clamp(32px, 3.5vw, 40px) 0 12px; letter-spacing: -0.01em;
}
.post-body p { margin: 0 0 22px; }
.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 26px; }
.post-body li { margin-bottom: 10px; }
.post-body li::marker { color: var(--yellow-deep); }
.post-body blockquote {
  border-left: 3px solid var(--sage); background: rgba(44, 58, 49, 0.04);
  padding: 16px 24px; margin: 32px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display-serif); font-style: italic; font-weight: 500;
  font-size: 1.12em; line-height: 1.45; color: var(--ink);
}
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  background-image: linear-gradient(to top, rgba(251, 220, 17, 0.5) 0, rgba(251, 220, 17, 0.5) 100%);
  background-size: 100% 0.2em; background-position: 0 0.92em; background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}
.post-body a:hover { background-size: 100% 100%; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 28px 0; }
.post-body hr { border: 0; border-top: 1px solid var(--rule-sage); margin: 48px 0; }
.post-body figure { margin: 28px 0; }
.post-body figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 8px;
}
.post-signoff {
  max-width: 720px; margin: 0 auto; padding: clamp(28px, 3vw, 40px) var(--wrap-pad);
  border-top: 1px solid var(--rule-sage);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft);
  position: relative; z-index: 2;
}
.post-signoff a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-sage); }
.post-signoff a:hover { color: var(--yellow-deep); }

@media (max-width: 760px) {
  .post-breadcrumb { padding-left: 24px; padding-right: 24px; }
  .post-header { padding-left: 24px; padding-right: 24px; }
  .post-body { padding-left: 24px; padding-right: 24px; }
  .post-signoff { padding-left: 24px; padding-right: 24px; }
}