/* Swiss style (preview, branch swiss-preview, 4 Oct 2026).
   Lightened 8 Oct 2026 (Joshua: "too boxy, congested, too many dark
   lines"). Two box weights now: ink cells for the hero tests, the story
   and the projects; hairline cells in the rule colour for the ledger, the
   five commitments and the layers. No rules between sections.
   Labels hang in the left columns in small uppercase, type sits flush
   left, and nothing is rounded or shadowed.
   Colour stays the page's own: ink, the cool near-white, one green.
   Loaded after the page's own styles. */

:root {
  --sw-rule: 4px;
}

/* ---- The header: wordmark and menu in small uppercase ------------------ */
.top nav a {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.top nav a:hover {
  color: var(--accent);
}

/* Labels: the Swiss index in the margin, set heavier. */
.label {
  color: var(--ink);
  font-weight: 700;
}
.band .label {
  color: var(--band-ink);
}

.project .status {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Nothing rounded --------------------------------------------------- */
.btn,
.ask textarea,
.ask input[type="text"] {
  border-radius: 0 !important;
}
.btn {
  font-family: var(--display);
  font-stretch: 110%;
  letter-spacing: 0.02em;
}

/* ---- Footer: a heavy rule, small uppercase ----------------------------- */
.foot {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Keyboard focus: a square, solid outline. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0;
}

/* ---- The hero, after three Swiss references Joshua chose (4 Oct 2026):
   a running meta row like a deck's header, a large light headline, and a
   visible four-cell grid holding the statement and the three tests. The
   lines are the cells' own borders, not a background pattern. ---------- */
.sw-hero { padding-top: clamp(24px, 4.5vw, 64px); }
.sw-meta {
  display: grid;
  grid-template-columns: 1fr;
  color: var(--ink-3);
}
.sw-meta span:first-child { color: var(--ink); font-weight: 700; }

.sw-meta-row { padding-top: clamp(24px, 3vw, 40px); }

/* The pinned headline: it sticks to the top of the screen until the
   story ends. The paper background hides what scrolls beneath it, and a
   short fade under it keeps lines from looking cut in half. It only pins
   on screens at least 700px tall; on short screens and at high zoom it
   would cover too much, so it scrolls normally there. */
.pin-head {
  margin-top: clamp(32px, 7vw, 104px);
  padding: 16px 0 clamp(16px, 2vw, 24px);
  background: var(--paper);
}
@media (min-height: 700px) {
  .pin-head { position: sticky; top: 0; z-index: 5; }
  .pin-head::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
    background: linear-gradient(var(--paper), transparent); pointer-events: none;
  }
}
.pin-head .sw-h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 380;
  font-stretch: 100%;
  font-size: clamp(2.6rem, 7.2vw, 7.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.pin-head .sw-h1 em { font-style: normal; color: var(--accent); font-weight: 450; }

.sw-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--sw-rule) solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.sw-statement {
  margin: 0;
  padding: 18px 20px 22px 0;
  color: var(--ink);
}
.sw-tests { display: contents; list-style: none; margin: 0; padding: 0; }
.sw-tests li { border-left: 1px solid var(--ink); }
.sw-tests a {
  display: grid;
  gap: 10px;
  height: 100%;
  min-height: 11rem;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--ink);
}
.sw-tests strong::before { content: "\25A0  " / ""; white-space: pre; color: var(--accent); }
.sw-tests span { font-size: 1.06rem; color: var(--ink-2); text-wrap: balance; }
.sw-tests i { justify-self: end; font-style: normal; font-family: var(--display); color: var(--ink-3); }
.sw-tests a:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }

/* Each test's diagram (4 Oct 2026), drawn from the section its arrow leads
   to, in thin geometric lines (Joshua's ask): the tool's work runs to a person, who
   keeps the decision; the builders' lines meet in one direction; a group
   works in one place before it links to the next.
   The figure and the arrow share the cell's last row. */
.sw-tests a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; }
.sw-tests strong, .sw-tests span { grid-column: 1 / -1; }
.test-fig { grid-column: 1; grid-row: 3; align-self: end; display: block; width: 100%; max-width: 220px; height: auto; margin-top: 18px; overflow: visible; }
.sw-tests i { grid-column: 2; grid-row: 3; align-self: end; }
.test-fig .tf-mute { fill: var(--ink-3); }
.test-fig .tf-ink { fill: var(--ink); }
.test-fig .tf-acc { fill: var(--accent); }
.test-fig .tf-line { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.test-fig .tf-acc-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.test-fig .tf-ring { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.test-fig .tf-far { stroke-dasharray: 3 5; stroke: var(--ink-3); }
.test-fig .tf-link { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 5; }
.test-fig text { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; fill: var(--ink-3); }
.sw-tests a:hover i { color: var(--accent); }

@media (max-width: 899px) {
  .sw-cells { grid-template-columns: 1fr; }
  .sw-statement { padding-right: 0; }
  .sw-tests li { border-left: 0; border-top: 1px solid var(--ink); }
  .sw-tests a { min-height: 0; padding: 16px 0; }
}

/* ---- One headline voice everywhere (4 Oct 2026): the hero's light,
   normal-width Archivo, not the old heavy condensed cut. --------------- */
.p-title,
.work-head h2,
.project h3,
.ledger-human li {
  font-family: var(--display);
  font-weight: 380 !important;
  font-stretch: 100% !important;
  letter-spacing: -0.035em !important;
}
.p-title { line-height: 1 !important; }
.p-title em, .work-head h2 em { font-weight: 400; }
.ledger-human li { font-weight: 400 !important; line-height: 1.1; }

/* ---- The same visible cell grid as the hero, section by section -------- */

/* Light boxes for the secondary groups (8 Oct 2026): the ledger, the five
   commitments and the layers sit in hairline cells in the rule colour,
   one step below the ink cells of the hero, the story and the projects. */
.ledger { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ledger h3 { color: var(--ink) !important; font-weight: 700 !important; }
.ledger-agent { padding: 18px 20px 22px 0 !important; }
.ledger-human { padding: 18px 0 18px 20px !important; }

/* Governance first: the five commitments become five cells across. */
.commit {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--band-rule);
  border-bottom: 1px solid var(--band-rule);
}
.commit div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start;
  gap: 10px !important;
  padding: 18px 18px 22px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.commit dd { font-size: 1rem; }


/* Projects: three cells across, each with its stage at the foot. */
.projects {
  display: grid;
  border-top: var(--sw-rule) solid var(--ink) !important;
  border-bottom: 1px solid var(--ink);
}
.project {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 14px !important;
  padding: 22px 20px 20px !important;
  border-bottom: 0 !important;
}
.project h3, .project p, .project .meta { grid-column: 1 !important; }
.project .status::before { content: "\25A0  " / ""; white-space: pre; }


/* Footer: two ruled cells. */
.foot .wrap { align-items: baseline; }

/* The five commitments: five across from 1150px, three over two below
   that, where five would squeeze each to a few words a line. */
@media (min-width: 1150px) {
  .commit { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .commit div + div { border-left: 1px solid var(--band-rule) !important; }
  .commit div:first-child { padding-left: 0 !important; }
}
@media (min-width: 900px) and (max-width: 1149px) {
  .commit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commit div:not(:nth-child(3n+1)) { border-left: 1px solid var(--band-rule) !important; }
  .commit div:nth-child(3n+1) { padding-left: 0 !important; }
  .commit div:nth-child(n+4) { border-top: 1px solid var(--band-rule) !important; }
}
@media (min-width: 900px) {
  .band .label { white-space: nowrap; }
  /* Each project spans three shared rows, so the stage lines up across. */
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; }
  .project { grid-row: span 3; grid-template-rows: subgrid !important; }
  .p-agents .ledger-human { border-left: 1px solid var(--rule); }
  .project + .project { border-left: 1px solid var(--ink) !important; }
  .project:first-child { padding-left: 0 !important; }
}
@media (max-width: 899px) {
  .project + .project { border-top: 1px solid currentColor !important; }
  .project { padding-left: 0 !important; padding-right: 0 !important; }
  .commit div + div { border-top: 1px solid var(--band-rule) !important; }
  .commit div { padding-left: 0 !important; padding-right: 0 !important; }
  .ledger-agent { padding-right: 0 !important; }
  .ledger-human { padding-left: 0 !important; border-top: 1px solid var(--rule); }
}

/* The big contact address in the same light voice as the headlines. */
.email { font-weight: 380 !important; font-stretch: 100% !important; letter-spacing: -0.035em !important; }
.email span { font-weight: 380 !important; }

/* Archivo's ampersand reads like an "E" at headline size, so "R&D" takes
   Noto Sans's plain one. */
.sw-h1 .amp { font-family: var(--body); font-weight: 300; }

/* ---- The three-person story, under the hero (4 Oct 2026): Joshua's
   paragraph, then the three people as three cells, the third tinted. ---- */
.story {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.story-body p { max-width: 36em; }
.story-body p + p { margin-top: 1em; }
.story-cells {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  border-top: var(--sw-rule) solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.story-cells li { display: grid; align-content: start; gap: 8px; padding: 18px 20px 22px; }
.story-cells strong {
  font-family: var(--display);
  font-weight: 380;
  font-stretch: 100%;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.story-cells span { color: var(--ink-2); }
.story-cells li.key { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.story-cells li.key strong { color: var(--accent); }
@media (min-width: 900px) {
  .story .label { grid-column: 1 / 3; grid-row: 1; padding-top: 0.4em; }
  .story-body { grid-column: 3 / 9; }
  .story-cells { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-cells li + li { border-left: 1px solid var(--ink); }
  .story-cells li:first-child { padding-left: 0; }
}
@media (max-width: 899px) {
  .story .label { margin-bottom: 18px; }
  .story-cells li { padding-left: 0; padding-right: 0; }
  .story-cells li.key { padding-left: 14px; padding-right: 14px; }
  .story-cells li + li { border-top: 1px solid var(--ink); }
}

/* The incubation filter, from Joshua's note "Two types of opportunity". */
.contact .opp { color: var(--ink); font-weight: 600; margin-top: 1em !important; }
@media (min-width: 900px) { .contact .opp { grid-column: 3 / 8; } }

/* Local first: each layer gets a small line figure in the test figures'
   style (8 Oct 2026, Joshua's ask). Each shows the claim, not just the
   noun: a box you can open, a window that works with the link cut, a
   device running here with the cloud dashed, houses on one street. */
.layer-fig { display: block; width: 44px; height: 32px; margin-bottom: 10px; overflow: visible; }
.layer-fig .lf-line { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.layer-fig .lf-acc { fill: var(--accent); }
.layer-fig .lf-acc-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.layer-fig .lf-far { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.layers { gap: 0 !important; border-top: 1px solid var(--rule); }
.layers div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 559px) {
  .layers dt { display: flex; align-items: center; gap: 12px; }
  .layer-fig { margin-bottom: 0; }
}