/* Site components. Colours come only from var() — tokens.css owns every hex. */

/* --- layout primitives --------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto;
             padding: 0 var(--space-4); }
.band { padding: var(--space-7) 0; }
.band--sand { background: var(--sand); border-block: 1px solid var(--line); }
.band--dark { background: var(--dark); color: var(--cream); }
.band__lead { max-width: var(--prose); color: var(--ink-2); }

.eyebrow { font-size: var(--step-eyebrow); letter-spacing: 2.4px;
           text-transform: uppercase; font-weight: 700; color: var(--brown);
           margin: 0 0 var(--space-4); }

.btn { display: inline-block; background: var(--brown); color: var(--card);
       text-decoration: none; font-size: var(--step-ui); font-weight: 600;
       padding: 13px 24px; border-radius: 9px; border: 1px solid transparent; }
.btn:hover { background: var(--brown-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--card); }

/* --- navigation ---------------------------------------------------------- */

.nav { position: sticky; top: 0; z-index: 5; background: var(--cream);
       border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; gap: var(--space-5);
              min-height: 68px; }
.nav__brand { display: flex; align-items: center; gap: 12px; font-weight: 700;
              font-size: 1.3125rem; text-decoration: none; color: var(--ink); }
.nav__brand img { width: 34px; height: 34px; }
.nav__links { display: flex; gap: var(--space-5); margin-left: auto;
              list-style: none; padding: 0; }
.nav__links a { font-size: var(--step-ui); color: var(--ink);
                text-decoration: none; opacity: 0.72; }
.nav__links a:hover { opacity: 1; }
.nav__cta { margin-left: var(--space-5); }
.nav__toggle { display: none; }

@media (max-width: 820px) {
  .nav__toggle { display: block; margin-left: auto; background: none;
                 border: 1px solid var(--line); border-radius: var(--radius-sm);
                 padding: 8px 12px; font-size: var(--step-ui); color: var(--ink); }
  .nav__links { display: none; }
  .nav__links[data-open="true"] { display: flex; flex-direction: column;
                                  position: absolute; inset-inline: 0; top: 68px;
                                  background: var(--cream); padding: var(--space-4);
                                  border-bottom: 1px solid var(--line); }
  .nav__cta { display: none; }
}

/* --- hero ---------------------------------------------------------------- */

.hero { padding: var(--space-7) 0 var(--space-6); text-align: center; }
.hero h1 { margin: 0 0 var(--space-4); }
.hero__lead { max-width: 620px; margin: 0 auto var(--space-5);
              color: var(--ink-2); }
.hero__diagram { display: block; width: 100%; margin: 0 auto var(--space-5); }
.hero__node rect { fill: var(--card); stroke: var(--line); }
.hero__node text { font: 700 13px var(--font); fill: var(--ink); }
.hero__node .hero__sub { font: 400 11px var(--font); fill: var(--ink-2); }
.hero__rule { fill: var(--brown); stroke: none; }
.hero__node--twin rect { fill: var(--dark); stroke: none; }
.hero__node--twin text { fill: var(--cream); }
.hero__node--twin .hero__sub { fill: var(--line); }
.hero__arrowhead { fill: var(--brown); }
.hero__flow path { stroke: var(--brown); stroke-width: 1.6; fill: none;
                   marker-end: url(#arrow); }
.hero__arc path { stroke: var(--brown); stroke-width: 1.3; stroke-dasharray: 4 4;
                  fill: none; opacity: 0.6; }
.hero__annot { font: 400 11.5px var(--font); fill: var(--brown-dark);
               text-anchor: middle; }
.hero__actions { margin: 0 0 var(--space-5); display: flex; gap: var(--space-3);
                 justify-content: center; flex-wrap: wrap; }

/* Below 820px the six-stage SVG would render its labels at ~5px, so the
   diagram is replaced by a vertical thread carrying the same content. */
.thread { display: none; }

@media (max-width: 820px) {
  .hero__diagram { display: none; }
  .thread { display: grid; gap: var(--space-2); list-style: none; padding: 0;
            margin: 0 0 var(--space-5); text-align: left; }
  .thread li { background: var(--card); border: 1px solid var(--line);
               border-left: 4px solid var(--brown);
               border-radius: var(--radius-sm); padding: var(--space-3); }
  .thread b { display: block; font-size: 1rem; }
  .thread span { font-size: 0.8125rem; color: var(--ink-2); }
  /* Selectors must outrank `.thread li` above, or the dark fill loses while
     the cream text wins and the item goes invisible. */
  .thread li.thread__twin { background: var(--dark); border-color: var(--dark);
                            border-left-color: var(--brown); }
  .thread li.thread__twin b { color: var(--cream); }
  .thread li.thread__twin span { color: var(--line); }
}

.stats { display: flex; justify-content: center; gap: var(--space-6);
         flex-wrap: wrap; margin: 0; padding-top: var(--space-4);
         border-top: 1px solid var(--line); }
.stats__item { text-align: center; }
.stats dd { margin: 0; }
.stats b { font-size: 1.875rem; letter-spacing: -0.03em; }
.stats dt { font-size: 0.8125rem; color: var(--ink-2); }

/* --- proof strip, problem, capabilities, languages ----------------------- */

.shots__grid, .problem__grid, .langs__grid {
  display: grid; gap: var(--space-4);
}
.shots__grid { grid-template-columns: repeat(3, 1fr); }
.problem__grid { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-5); }
.langs__grid { grid-template-columns: 1.4fr 1fr; margin-top: var(--space-5); }

.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--line);
            border-radius: var(--radius-sm); box-shadow: var(--shadow-shot);
            display: block; }
.shot figcaption { font-size: 0.8125rem; color: var(--ink-2);
                   margin-top: var(--space-2); }
.shot figcaption b { display: block; font-size: var(--step-ui); color: var(--ink); }

.grid-9 { list-style: none; padding: 0; margin: var(--space-5) 0 0;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-9 li { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--radius); padding: var(--space-4); }
.grid-9 h3, .problem__grid h3, .langs__grid h3 { margin: 0 0 var(--space-2);
                                                  font-size: 1.0625rem; }
.grid-9 p, .problem__grid p { margin: 0; color: var(--ink-2);
                              font-size: 0.9375rem; }
.langs__grid ul { margin: 0; padding-left: 1.1em; color: var(--ink-2);
                  font-size: 0.9375rem; }
.langs__grid li { margin-bottom: var(--space-2); }
.langs__grid b { color: var(--ink); }

@media (max-width: 820px) {
  .shots__grid, .problem__grid, .grid-9, .langs__grid {
    grid-template-columns: 1fr;
  }
}

/* --- capability matrix --------------------------------------------------- */

.matrix__hint { font-size: 0.8125rem; color: var(--ink-2);
                margin: var(--space-4) 0 var(--space-2); }
/* position: relative is load-bearing. Each cell holds an absolutely
   positioned .visually-hidden span; without a positioned ancestor those
   resolve against the initial containing block, escape this container's
   overflow, and pan the whole document ~370px sideways on a phone. */
.matrix-scroll { position: relative; overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
                 border: 1px solid var(--line); border-radius: var(--radius);
                 background: var(--card); }
.matrix { border-collapse: collapse; width: 100%; min-width: 700px;
          font-size: 0.8125rem; }
.matrix th, .matrix td { padding: 12px 10px; text-align: center;
                         border-bottom: 1px solid var(--line); }
.matrix thead th { font-size: 0.75rem; line-height: 1.25;
                   color: var(--ink-2); font-weight: 600; vertical-align: bottom; }
.matrix th[scope="row"] { position: sticky; left: 0; background: var(--card);
                          text-align: left; font-weight: 600; white-space: normal;
                          min-width: 230px;
                          border-right: 1px solid var(--line); }
/* Principia is the last column, and the arrival point. */
.matrix thead th:last-child, .matrix tbody td:last-child { background: var(--sand); }
.matrix thead th:last-child { color: var(--ink); font-weight: 700; }
.matrix .tick { color: var(--tick); font-weight: 700; }
.matrix .no { color: var(--ink-2); opacity: 0.5; }
.matrix__note { font-size: 0.8125rem; color: var(--ink-2); max-width: var(--prose);
                margin-top: var(--space-4); }

/* --- formal verification, deep-dives, teaser, contact -------------------- */

.formal__grid { display: grid; grid-template-columns: repeat(4, 1fr);
                gap: var(--space-4); margin-top: var(--space-5); }
.formal__grid h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.formal__grid p { margin: 0; font-size: 0.9375rem; opacity: 0.78; }
.band--dark .band__lead { color: var(--cream); }
.band--dark .eyebrow { color: var(--cream); opacity: 0.6; }

.split__inner { display: grid; grid-template-columns: 1fr 1fr;
                gap: var(--space-6); align-items: center; }
.split--flip .split__inner > div { order: 2; }
.split--solo .band__lead { max-width: var(--prose); }
.split h2 { margin: 0 0 var(--space-3); }
.split p { color: var(--ink-2); }

.teaser__grid { display: grid; grid-template-columns: 1fr 1fr;
                gap: var(--space-4); margin: var(--space-5) 0; }
.contact__actions { display: flex; gap: var(--space-3); flex-wrap: wrap;
                    margin: var(--space-5) 0; }

@media (max-width: 820px) {
  .formal__grid, .split__inner, .teaser__grid { grid-template-columns: 1fr; }
  .split--flip .split__inner > div { order: 0; }
}

/* --- case study ---------------------------------------------------------- */

.phase-intro { padding-bottom: 0; }
.phase-intro h1 { margin: 0 0 var(--space-4); }
.phase h2 { margin: 0 0 var(--space-2); }
.phase__shots { display: grid; gap: var(--space-4); margin-top: var(--space-5);
                grid-template-columns: repeat(2, 1fr); }
.phase__shots .shot img { cursor: zoom-in; }

.lightbox { border: none; padding: 0; max-width: 92vw; max-height: 92vh;
            background: var(--card); border-radius: var(--radius); }
.lightbox::backdrop { background: rgb(34 29 25 / 0.72); }
.lightbox img { display: block; width: 100%; height: auto; }
.lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3);
                   background: var(--dark); color: var(--cream); border: none;
                   border-radius: var(--radius-sm); padding: 8px 14px;
                   font-size: var(--step-ui); cursor: pointer; }

@media (max-width: 820px) { .phase__shots { grid-template-columns: 1fr; } }

/* --- footer -------------------------------------------------------------- */

.footer { background: var(--dark); color: var(--cream); padding: var(--space-6) 0; }
.footer a { color: var(--cream); }
.footer__meta { font-size: 0.875rem; opacity: 0.68; margin-top: var(--space-4); }