:root {
      --ink: #1c1714;
      --body: #3a342e;
      --muted: #5e574f;
      --ivory: #f3efe8;
      --paper: #f7f4ee;
      --line: #e3d9cc;
      --line-strong: #d4c8b8;
      --burgundy: #6e2430;
      --burgundy-deep: #4c1520;
      --band: #3b121a;
      --caption: #f6f1ea;
      --shadow: 0 18px 50px rgba(28, 23, 20, 0.08);
      --wrap: 1180px;
      --gutter: clamp(20px, 4vw, 56px);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--ivory);
      color: var(--ink);
      font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
      font-size: 18px;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
    :focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
    ::selection { background: #ead7d4; color: var(--ink); }
    .skip {
      position: absolute;
      left: 16px;
      top: -40px;
      background: var(--ink);
      color: white;
      padding: 8px 12px;
      z-index: 30;
    }
    .skip:focus { top: 12px; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 14px var(--gutter);
      background: rgba(247, 244, 238, 0.92);
      backdrop-filter: blur(16px) saturate(1.15);
      border-bottom: 1px solid transparent;
    }
    header.scrolled { border-bottom-color: var(--line); }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
    }
    .brand img { width: 34px; height: 42px; object-fit: contain; }
    .brand span {
      font-family: Fraunces, Georgia, serif;
      font-weight: 560;
      font-size: 12px;
      line-height: 1.05;
      letter-spacing: 0.14em;
    }
    .primary-nav {
      display: flex;
      gap: 22px;
      margin-left: auto;
      font-size: 15px;
      font-weight: 500;
      color: #2c2723;
    }
    .primary-nav a { position: relative; padding: 6px 0; }
    .primary-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 1px;
      background: var(--burgundy);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 180ms ease;
    }
    .primary-nav a:hover::after { transform: scaleX(1); }
    .nav-actions { display: flex; gap: 10px; flex: 0 0 auto; }
    .nav-toggle {
      display: none;
      margin-left: auto;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 600;
    }
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--ink);
      position: relative;
    }
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
      content: "";
      position: absolute;
      left: 0;
    }
    .nav-toggle-bars::before { top: -6px; }
    .nav-toggle-bars::after { top: 6px; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid var(--burgundy);
      color: var(--burgundy);
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1;
      transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    }
    .btn.fill { background: var(--burgundy); color: white; }
    .btn.light { border-color: rgba(246, 241, 234, 0.72); color: var(--caption); }
    .btn.light.fill { background: var(--caption); color: var(--burgundy-deep); border-color: var(--caption); }
    .btn:hover { background: var(--burgundy); color: white; }
    .btn.fill:hover { background: var(--burgundy-deep); }
    .btn.light:hover,
    .btn.light.fill:hover { background: white; color: var(--burgundy-deep); border-color: white; }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
      min-height: calc(100vh - 74px);
      min-height: calc(100svh - 74px);
      background: var(--ivory);
    }
    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 72px) clamp(48px, 7vw, 84px) var(--gutter);
      max-width: 760px;
    }
    .rule {
      width: 42px;
      height: 1.5px;
      background: var(--burgundy);
      margin: 0 0 22px;
    }
    .eyebrow {
      margin: 0 0 18px;
      color: var(--burgundy);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 560; }
    h1 {
      margin: 0;
      max-width: 11.2em;
      font-size: clamp(46px, 4.7vw, 76px);
      line-height: 0.98;
      letter-spacing: -0.028em;
      text-wrap: balance;
    }
    h1 em { font-style: italic; font-weight: 500; }
    .lede {
      max-width: 38rem;
      margin: 26px 0 0;
      color: var(--body);
      font-size: 19px;
      line-height: 1.5;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-top: 34px;
      flex-wrap: wrap;
    }
    .text-link {
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid var(--ink);
      padding-bottom: 2px;
    }
    .text-link:hover { color: var(--burgundy); border-color: var(--burgundy); }
    .hero-photo { position: relative; min-height: 560px; background: #c8bfb4; }
    .hero-photo img,
    .portrait img,
    .court img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-photo img { object-position: center 46%; }
    .caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      padding: 56px 22px 16px;
      color: var(--caption);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      background: linear-gradient(to top, rgba(22, 14, 12, 0.72), rgba(22, 14, 12, 0));
    }

    .wrap {
      width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
      margin: 0 auto;
    }
    section { padding: clamp(72px, 9vw, 112px) 0; }
    h2 {
      margin: 0;
      font-size: clamp(38px, 4vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    .work-head {
      display: grid;
      grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
      gap: 28px 64px;
      align-items: end;
    }
    .closer {
      margin: 0;
      max-width: 38rem;
      padding-bottom: 8px;
      color: var(--body);
      font-size: 20px;
      line-height: 1.45;
    }
    .lanes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      list-style: none;
      margin: 48px 0 0;
      padding: 0;
      border-top: 1px solid var(--line-strong);
    }
    .lanes li, .lanes article {
      padding: 28px 32px 8px 0;
    }
    .lanes li + li, .lanes article + article {
      padding-left: 32px;
      border-left: 1px solid var(--line);
    }
    .lanes span {
      display: block;
      margin-bottom: 10px;
      color: var(--burgundy);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .lanes p {
      margin: 0;
      max-width: 22rem;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.35;
    }

    .failures { padding-top: clamp(28px, 4vw, 48px); }
    .failure-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.72fr);
      gap: 48px 56px;
      align-items: start;
    }
    .intro {
      max-width: 40rem;
      margin: 18px 0 0;
      color: var(--body);
      font-size: 19px;
    }
    .failure-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 34px 36px;
      margin-top: 40px;
    }
    .num {
      margin: 0 0 10px;
      color: var(--burgundy);
      font-family: Fraunces, Georgia, serif;
      font-size: 28px;
      font-weight: 500;
      line-height: 1;
    }
    .failure-list h3 {
      margin: 0 0 10px;
      font-family: "Source Sans 3", sans-serif;
      font-size: 20px;
      font-weight: 650;
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
    .failure-list p {
      margin: 0;
      color: var(--body);
      font-size: 16.5px;
      line-height: 1.45;
    }
    .portrait {
      position: relative;
      margin: 0;
      background: #ddd6cc;
      box-shadow: var(--shadow);
    }
    @media (min-width: 861px) {
      .portrait { position: sticky; top: 96px; }
    }
    .portrait img {
      aspect-ratio: 4 / 5;
      object-position: 68% 22%;
    }
    .portrait .caption { font-size: 11px; letter-spacing: 0.12em; }

    .plate {
      position: relative;
      margin: 0;
      background: #1a1412;
      overflow: hidden;
    }
    .plate img {
      width: 100%;
      height: auto;
      aspect-ratio: 1920 / 850;
      object-fit: cover;
      object-position: center;
    }

    .solution {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      padding: 0;
      min-height: 680px;
      background: var(--paper);
    }
    .solution-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(64px, 8vw, 104px) clamp(28px, 5vw, 72px) clamp(64px, 8vw, 104px) var(--gutter);
    }
    .solution-copy p {
      max-width: 38rem;
      margin: 20px 0 0;
      color: var(--body);
      font-size: 19px;
    }
    .court { position: relative; min-height: 520px; background: #c5b8a4; }
    .court img { object-position: center 18%; }

    .risk-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      margin-top: 42px;
      border-top: 1px solid var(--line-strong);
    }
    .risk-row article {
      padding: 28px 18px 8px;
      text-align: center;
    }
    .risk-row article + article { border-left: 1px solid var(--line); }
    .risk-row svg { width: 30px; height: 30px; color: var(--burgundy); }
    .risk-row p {
      margin: 14px auto 0;
      max-width: 9rem;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.25;
    }

    .band {
      background:
        radial-gradient(1200px 420px at 80% 120%, rgba(255, 236, 220, 0.08), transparent 60%),
        var(--band);
      color: var(--caption);
      padding: clamp(72px, 9vw, 108px) 0 clamp(76px, 9vw, 112px);
    }
    .band h2 { color: white; max-width: 12em; }
    .band .intro { color: #f0e6df; max-width: 40rem; }
    .band .row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    footer {
      background: var(--paper);
      padding: 36px 0 28px;
      color: #3f3a34;
      font-size: 15px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr) auto;
      gap: 28px 40px;
      align-items: center;
    }
    .footer-top p {
      margin: 0;
      max-width: 36rem;
      padding-left: 28px;
      border-left: 1px solid var(--line-strong);
      line-height: 1.45;
    }
    footer nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px 18px;
      font-size: 14.5px;
      font-weight: 500;
    }
    .fine {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .fine p { margin: 0 0 8px; }
    .fine a { text-decoration: underline; text-underline-offset: 2px; }

    @media (max-width: 1100px) {
      .primary-nav { gap: 14px; font-size: 14px; }
      .failure-layout, .work-head { gap: 32px; }
      .risk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .risk-row article:nth-child(4) { border-left: 0; }
      .risk-row article:nth-child(n + 4) { border-top: 1px solid var(--line); }
    }
    @media (max-width: 860px) {
      .nav-toggle { display: inline-flex; }
      .primary-nav, .nav-actions { display: none; }
      header.open { flex-wrap: wrap; align-items: flex-start; }
      header.open .primary-nav,
      header.open .nav-actions { display: flex; }
      header.open .primary-nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 8px 0 0;
        padding-bottom: 8px;
      }
      header.open .nav-actions { order: 4; width: 100%; margin: 4px 0 8px; }
      header.open .nav-actions .btn { flex: 1; }
      .hero, .work-head, .failure-layout, .solution, .footer-top { display: block; }
      .hero { min-height: 0; }
      .hero-photo { min-height: 78vw; height: 72vh; }
      .lanes, .failure-list, .risk-row { display: block; }
      .lanes { margin-top: 32px; }
      .lanes li, .lanes article, .lanes li + li, .lanes article + article, .failure-list article, .risk-row article, .risk-row article + article {
        border-left: 0;
        padding-left: 0;
      }
      .lanes li, .lanes article, .risk-row article { padding: 22px 0; border-top: 1px solid var(--line); }
      .failure-list { margin-top: 28px; }
      .failure-list article { padding: 22px 0; border-top: 1px solid var(--line); }
      .portrait { margin-top: 28px; }
      .plate img {
        height: 68vh;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center 62%;
      }
      .court img { object-position: 40% 28%; }
      .solution-copy { padding: 64px var(--gutter); }
      .court { min-height: 72vh; }
      .footer-top p { margin-top: 22px; padding-left: 0; border-left: 0; }
      footer nav { justify-content: flex-start; margin-top: 22px; }
      .band .btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; }
    }

    .page { padding: clamp(48px, 7vw, 88px) 0 32px; }
    .prose { max-width: 820px; }
    .prose h1 { font-size: clamp(40px, 5vw, 64px); max-width: 16em; }
    .prose h2 { font-size: clamp(28px, 3vw, 40px); margin: 36px 0 12px; }
    .prose h3 { font-family: "Source Sans 3", sans-serif; font-size: 20px; font-weight: 650; margin: 26px 0 8px; letter-spacing: -0.01em; }
    .prose p, .prose li { color: var(--body); font-size: 18.5px; }
    .prose p { margin: 0 0 14px; }
    .prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.2em; }
    .prose li { margin: 0 0 8px; }
    .prose a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }
    .prose blockquote {
      margin: 28px 0;
      padding: 8px 0 8px 22px;
      border-left: 1.5px solid var(--burgundy);
      font-family: Fraunces, Georgia, serif;
      font-size: 24px;
      line-height: 1.35;
      color: var(--ink);
    }
    .prose blockquote cite { display: block; margin-top: 10px; font-family: "Source Sans 3", sans-serif; font-size: 14px; font-style: normal; letter-spacing: 0.04em; color: var(--muted); }
    .cards { display: grid; gap: 18px; margin: 22px 0 8px; }
    .cards article { padding: 18px 0; border-top: 1px solid var(--line); }
    .cards h3 { margin-top: 0; }
    .cards p { margin: 0; }
    .seo-close {
      margin-top: 42px;
      padding-top: 22px;
      border-top: 1px solid var(--line-strong);
      max-width: 40rem;
    }
    .seo-close p { margin: 0; font-size: 17px; }
    .warn {
      background: var(--paper);
      border-left: 1.5px solid var(--burgundy);
      padding: 16px 18px;
      margin: 0 0 18px;
    }
    .quote-band {
      margin: 0;
      padding: clamp(56px, 8vw, 88px) 0;
      background: var(--paper);
    }
    .quote-band blockquote { margin: 0 auto; max-width: 860px; }
    .method { margin-top: 18px; grid-template-columns: 1fr 1fr; }
    .method article:nth-child(odd) { border-left: 0; padding-left: 0; }
    .method article:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .risk-row .detail {
      display: block;
      margin-top: 8px;
      max-width: 12rem;
      font-size: 13.5px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--muted);
    }
    .footer-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    .footer-actions a { color: var(--burgundy); }
    .news-list { display: grid; gap: 0; margin-top: 28px; }
    .news-list a.item { display: block; padding: 22px 0; border-top: 1px solid var(--line); }
    .news-list a.item strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 28px; font-weight: 560; color: var(--ink); text-decoration: none; }
    .news-list a.item span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }
    .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin: 12px 0 20px; }
    @media (max-width: 860px) {
      .pair { display: block; }
      .risk-row .detail { max-width: none; }
    }