/* =========================================================================
   Additions for the two-site build (humanis.ai + crucible.ag).
   base.css and sections.css are the chosen mockup's styles, unchanged.
   This file adds: the type baseline, sub-page layouts, reading styles, and
   Crucible's product components.
   ========================================================================= */

:root {
    /* Michelangelus is the baseline. Where it is absent (the public build does
       not ship its files) the stack falls back to EB Garamond, the wordmark's
       face: close in character, and within 2% of Michelangelus's width, so the
       layouts hold in either. */
    --serif: 'Michelangelus', 'EB Garamond', Georgia, serif;
    --body-font: 'Manrope', Arial, sans-serif;
    /* Small uppercase labels. --mono keeps its old name; it now holds whichever
       face the labels use. Tracking and weight are tokens so the face can change
       without retuning every rule. */
    --mono: 'Manrope', Arial, sans-serif;
    --label-track: .7;
    --label-weight: 500;
    --flow-ink: #7a8970;
    --flow-accent: #a04f34;
    /* names used by the letter's figure, ported from the live site */
    --bg-color: var(--bg);
    --glass-border: var(--line);
    --glass-bg: var(--glass);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --accent-primary: var(--accent);
    --accent-secondary: var(--accent-2);
}
[data-theme="dark"] { --flow-ink: #a8b79c; --flow-accent: #c79a75; }

/* ---------------------------------------------------------------- shell */
.topnav a[aria-current="page"] { color: var(--ink); }
.topnav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--accent); }
/* A nav item with sub-pages (see build.py). The item is an ordinary link; its
   panel of sub-pages opens on hover and on keyboard focus, with no script. On
   a touch screen the item simply goes to its own page, which lists them. */
.topnav a[aria-current="true"] { color: var(--ink); }
.topnav a[aria-current="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--accent); }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > a { display: inline-flex; align-items: center; gap: .5em; }
.nav-group > a::before { content: ''; order: 2; width: .34em; height: .34em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-30%) rotate(45deg); opacity: .75; }
.nav-sub { position: absolute; top: 100%; left: -1.25rem; z-index: 5; padding-top: 1rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-sub > div { display: grid; min-width: 14rem; padding: .45rem; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 22px 44px -30px rgba(47, 49, 51, .5); }
.nav-sub a { display: block; padding: .7rem .8rem; white-space: nowrap; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--bg-2); color: var(--ink); }
.topnav .nav-sub a[aria-current="page"] { color: var(--accent); }
.topnav .nav-sub a[aria-current="page"]::after { content: none; }
.mmenu a.sub { padding: .3rem 0 .3rem 1.3rem; font-size: clamp(1.1rem, 4.6vw, 1.5rem); color: var(--ink-2); }
.mmenu a.sub[aria-current="page"] { color: var(--accent); }
/* The external-link arrow is drawn, not typed, so it looks the same whatever face the labels use. */
.topnav a .ext, .mmenu a .ext, .foot-links a .ext, .tb-right .btn .ext { display: inline-block; width: .62em; height: .62em; margin-left: .45em; overflow: hidden; color: transparent; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3.5 1.5h5v5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3.5 1.5h5v5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.brand .by { font: 500 .56rem var(--mono); letter-spacing: calc(.14em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); align-self: flex-end; padding-bottom: .32rem; margin-left: -.15rem; white-space: nowrap; }
@media (max-width: 480px) { .brand .by { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 46px; padding: 0 1.5rem; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 500 .82rem var(--body-font); letter-spacing: .01em; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; white-space: nowrap; }
.btn span[aria-hidden] { transition: transform .25s; }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--small { min-height: 40px; padding: 0 1.15rem; font-size: .76rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.tb-right .btn { display: none; }
@media (min-width: 620px) { .tb-right .btn { display: inline-flex; } }
/* the header button that leads to the other site: its arrow sits closer than a nav link's */
.tb-right .btn:has(.ext) { gap: .5rem; }
.tb-right .btn .ext { margin-left: 0; }
.tb-right .btn--ghost:hover .ext { background: var(--accent); }

/* Crucible runs without the vertical rails and the reticle cursor. */
body.no-rails .wrap { padding-left: var(--pad); padding-right: var(--pad); }
body.no-rails .topbar .bar { padding-left: var(--pad); padding-right: var(--pad); }
body.no-rails .synthesis-footer { padding-inline: var(--pad); }

/* The big wordmark's box reaches up over the row of links above it and was taking
   their clicks, so the links sit on a layer above it. */
.foot-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin-bottom: 2.2rem; font: 500 .74rem var(--mono); letter-spacing: calc(.14em * var(--label-track, 1)); text-transform: uppercase; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--accent); }
/* an address in the footer links reads as an address: not capitalised, not letter-spaced */
.foot-links .addr { text-transform: none; letter-spacing: .01em; font-size: 1.12em; color: var(--ink); }
.foot-links a:hover .addr { color: inherit; }
/* The footer wordmark: full width on phones as before, but it stops growing at
   110px (it reached 220px on desktop, which read as oversized). */
.synthesis-footer .huge { font-size: clamp(48px, 15vw, 110px); margin-bottom: 34px; }

/* ------------------------------------------------------------ page hero */
.page-hero { padding-top: clamp(8.5rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.page-hero .label { display: block; margin-bottom: 1.6rem; }
.page-hero h1 { font-size: clamp(2.7rem, 7.4vw, 6rem); line-height: 1; letter-spacing: -.025em; max-width: 17ch; }
.page-hero h1 em { color: var(--accent); font-weight: 400; }
.page-hero .lead { margin-top: 1.8rem; max-width: 46ch; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.45; color: var(--ink-2); }
.page-hero .btn-row { margin-top: 2.2rem; }
.page-hero .lead--wide { max-width: 62ch; }
.page-hero .lead + .lead { margin-top: 1em; }
/* numbered points set in the lead's type: i) ii) iii), each on its own line with a hanging indent */
.page-hero .lead-list { list-style: none; counter-reset: point; }
.page-hero .lead + .lead-list { margin-top: .55em; }
.page-hero .lead-list li { counter-increment: point; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); }
.page-hero .lead-list li + li { margin-top: .3em; }
.page-hero .lead-list li::before { content: counter(point, lower-roman) ')'; }
.back-link { display: inline-block; margin-bottom: 2rem; font: 500 .7rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-2); }
.back-link:hover { color: var(--accent); }

.band { padding-block: clamp(60px, 7vw, 110px); }
.band--tint { background: var(--bg-2); }
.band--line { border-top: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: 50px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 24px; }
.card .k { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card h3 { margin-top: 12px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.card h3 span { color: var(--accent); }
.card p { margin-top: 14px; }
.card .synthesis-link { margin-top: auto; padding-top: 22px; }
.card .eq { margin-top: 18px; font: italic 19px var(--serif); color: var(--accent); }
@media (max-width: 1000px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; gap: 34px; margin-top: 32px; } }

/* ------------------------------------------------- humanis: home doorways */
.doorway { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8%; align-items: center; }
.doorway figure { margin: 0; }
.doorway figure .eng { max-width: 420px; margin-left: auto; }
.doorway figcaption { margin-top: 22px; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.doorway .section-lead { margin-top: 28px; max-width: 34ch; }
.doorway .prose { margin-top: 20px; max-width: 46ch; }
.doorway .btn-row { margin-top: 32px; }
@media (max-width: 768px) { .doorway { display: block; } .doorway figure { margin-top: 36px; } .doorway figure .eng { max-width: 260px; margin: 0; } .doorway figcaption { text-align: left; } }

.post-list { margin-top: 44px; border-bottom: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 190px 1fr auto; gap: 34px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); transition: color .25s; }
.post .date { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.post h3 { font-size: clamp(25px, 2.7vw, 38px); line-height: 1.16; letter-spacing: -.02em; }
.post p { margin-top: 12px; max-width: 62ch; }
.post .arrow { font: 22px var(--serif); color: var(--flow-accent); transition: transform .25s; }
.post:hover h3 { color: var(--flow-accent); }
.post:hover .arrow { transform: translateX(4px); }
@media (max-width: 768px) { .post { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; } .post .arrow { display: none; } }

/* ------------------------------------------------------- reading pages */
.reading { padding-top: clamp(8rem, 14vw, 10.5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.reading .col { max-width: 46rem; margin: 0 auto; }
.reading h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.022em; }
.reading .essay-subtitle { margin-top: 1.4rem; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--ink-2); font-style: italic; }
.reading .byline { margin-top: 1.6rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); font: 500 .68rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.reading .col > p, .reading .col > ul, .reading .col > ol { font-size: clamp(1.1rem, 1.35vw, 1.24rem); line-height: 1.68; color: var(--ink); margin-top: 1.35em; }
.reading .col > ul, .reading .col > ol { padding-left: 1.3em; }
.reading .col li { margin-top: .55em; }
.reading .col li::marker { color: var(--accent); }
.reading .col h2 { margin-top: 2.6em; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.18; letter-spacing: -.015em; }
.reading .col a { border-bottom: 1px solid var(--accent); }
.reading .col a:hover { color: var(--accent); }
.reading .col em { font-style: italic; }
.reading .col strong { font-weight: 700; }
.reading .signoff { margin-top: 3.2em; }
.reading .signoff p { font-size: 1.2rem; line-height: 1.5; }
.reading .signoff .names { font-size: 1.55rem; margin-top: .3em; }
.reading .signoff .role { margin-top: .5em; font: 500 .68rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.reading .founders-note { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.reading .founders-note p { font: 14px/1.9 var(--body-font); color: var(--ink-2); }
.reading figure { margin: 2.8rem 0; }
/* Tables and sub-headings in reading pages (the privacy notice). On phones a
   table row becomes a small block, with the column's name above each value. */
.reading .col h3 { margin-top: 2em; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; }
.reading .table-wrap { margin-top: 1.5em; }
.reading table { width: 100%; border-collapse: collapse; font: 14.5px/1.6 var(--body-font); color: var(--ink-2); }
.reading th { padding: 0 18px 10px 0; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--line); font: 500 10px var(--mono); letter-spacing: calc(.14em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.reading td { padding: 12px 18px 12px 0; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.reading th:last-child, .reading td:last-child { padding-right: 0; }
.reading td strong { font-weight: 600; color: var(--ink); }
.reading .col li > p { margin-top: .8em; color: inherit; }
.reading .col li > ul { margin: .5em 0 .9em; padding-left: 1.5em; list-style: circle; }
.reading .col li > ul li { margin-top: .3em; }
.reading .col li > .table-wrap { margin: 1em 0 1.2em; }
@media (max-width: 640px) {
  .reading thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .reading tr { display: block; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .reading td { display: block; padding: 0; border: 0; }
  .reading td + td { margin-top: 8px; }
  .reading td + td::before { content: attr(data-label); display: block; font: 500 10px var(--mono); letter-spacing: calc(.14em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
}
.reading figcaption { margin-top: 1rem; font: 13px/1.8 var(--body-font); color: var(--ink-2); }

/* role sheets, ported from the live careers pages */
.sheet .s-head { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.sheet .s-logo, .sheet .s-headrule, .sheet .s-foot { display: none; }
.sheet .s-tagline { font: 500 .68rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; }
.sheet .s-meta { margin-top: 1.3rem; font: 15px/1.7 var(--body-font); color: var(--ink-2); }
.sheet .s-dot { color: var(--accent); margin: 0 .35em; }
.sheet .s-milestone { font: 500 .66rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--accent); }
.sheet .s-closing { font-style: italic; }
.sheet .s-apply { display: flex; gap: 1.8rem; align-items: center; margin-top: 3rem; padding: 1.8rem; background: var(--bg-2); border: 1px solid var(--line-soft); }
.sheet .s-qr { width: 112px; height: 112px; flex: none; background: #fff; padding: 6px; }
.sheet .s-apply-caps { font: 500 .66rem var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--accent); }
.sheet .s-apply-lead { margin-top: .6rem; font-size: 1.4rem; line-height: 1.3; }
.sheet .s-apply-small { margin-top: .6rem; font: 14px/1.8 var(--body-font); color: var(--ink-2); }
@media (max-width: 560px) { .sheet .s-apply { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------ humanis: team */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 70px); margin-top: 46px; }
.founder { border-top: 1px solid var(--line); padding-top: 24px; }
.founder .k { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.founder h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.02em; }
.founder p { margin-top: 14px; max-width: 52ch; }
@media (max-width: 768px) { .founders { grid-template-columns: 1fr; } }
/* three or more founders: a list, name beside bio, so nothing is squeezed into a narrow column */
.founders--list { grid-template-columns: 1fr; gap: 0; }
.founders--list .founder { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 10px clamp(24px, 4vw, 56px); padding-block: 26px; }
.founders--list .founder p { margin-top: 6px; }
@media (max-width: 768px) { .founders--list .founder { grid-template-columns: 1fr; } }
/* Paper grain and the header.
   The light theme has no grain: the paper is Stone, flat. The dark theme keeps
   a faint grain. Grain is a fixed layer under the page and the header sits
   above it, so wherever grain is on, the header carries the same grain,
   thinned by the share of the page its glass tint lets through. Its backdrop
   is blurred but not recoloured, so the header stays the colour of the page. */
:root { --grain: 0; --glass-a: .6; }
/* In the dark theme the glass tint was lighter than the page; it is now the page colour at alpha, as in the light theme. */
[data-theme="dark"] { --grain: .045; --glass-a: .5; --glass: rgba(6, 6, 7, .5); }
body::before, [data-theme="dark"] body::before { opacity: var(--grain); }
[data-study="combined"] .topbar, .topbar.solid { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.topbar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--grain) * var(--glass-a));
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px 300px; }

/* Crucible's paper is pure white; Humanis keeps Stone (the default in base.css).
   The glass tints are the paper colour at alpha, so they change with it. */
html:not([data-theme="dark"]) body.crucible { --bg: #ffffff; --bg-2: #f7f7f5; --glass: rgba(255, 255, 255, .6); --glass-strong: rgba(255, 255, 255, .86); }

/* Trial: the navigation without its 01, 02, 03 … numbers, in the header and in
   the mobile menu. The numbers are still in the markup (build.py writes them);
   delete this rule to bring them back, or drop them from build.py to keep this. */
.topnav a .n, .mmenu a .n { display: none; }

/* The nav sits centred on the page on both sites: the brand on its left and
   whatever is on its right (nothing on Humanis, the demo button on Crucible)
   take equal shares of the bar. Where the window is too narrow for that, the
   brand keeps its width and the nav moves over. */
@media (min-width: 900px) {
  .topbar .brand, .topbar .tb-right { flex: 1 1 0; }
  .topbar .tb-right { justify-content: flex-end; }
}

/* The header's contents sit in the same column as the page (the .wrap), so on a
   wide screen the logo lines up with the left edge of the text below it. The
   bar's background still runs edge to edge. For comparison, ?header=edge puts
   the contents back at the window's edges and ?header=column returns here. */
html:not([data-header="edge"]) .topbar .bar { max-width: 1500px; margin-inline: auto; }

/* A page shorter than the window keeps its footer at the bottom of the window:
   the spare room goes between the content and the footer, not under the footer. */
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.foot { width: 100%; }

/* For comparing label faces: add ?labels=mono to any URL (and ?labels=sans to go back). */
[data-labels="mono"] { --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --label-track: 1; --label-weight: 400; }
/* a section heading that is a full sentence: let it wrap in even lines */
.synthesis-section h2.h2--long { max-width: 23ch; text-wrap: balance; }
.synthesis-section h2.h2--long em { white-space: nowrap; }

/* The section straight after the hero needs little room above it: the hero
   fills the first screen, so there is already open space under its content,
   and the divider that used to sit between the two is gone. */
.hero + .synthesis-section { padding-top: clamp(30px, 3vw, 48px); }

/* Running text on the Humanis home page (the north star and renaissance
   sections): paragraphs in one column, all in the serif at one size, filling
   the width of their text column. Elsewhere a section keeps a larger serif
   lead over sans .prose. */
.thesis-prose { display: block; margin-top: 31px; font: clamp(1.15rem, 1.6vw, 1.5rem)/1.5 var(--serif); letter-spacing: -.008em; color: var(--ink-2); }
.thesis-prose p + p { margin-top: 1.05em; }
/* a named thing in running text: bronze, with a dotted line under it */
.thesis-prose .term, .lead .term { color: var(--accent); text-decoration: underline dotted; text-decoration-thickness: .07em; text-underline-offset: .22em; }
.thesis-prose .term:hover, .lead .term:hover { text-decoration-style: solid; }
/* a numbered reference at the end of a sentence */
.fnref { margin-left: .15em; font: .62em var(--mono); vertical-align: super; color: var(--accent); text-decoration: none; }
.fnref:hover { text-decoration: underline; }

.roles { margin-top: 44px; border-bottom: 1px solid var(--line); }
.role { display: grid; grid-template-columns: 1fr auto; gap: 8px 30px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); }
.role h3 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.14; letter-spacing: -.025em; transition: color .25s; }
.role .meta { grid-column: 1; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.role p { grid-column: 1; max-width: 60ch; }
.role .arrow { grid-row: 1; grid-column: 2; font: 22px var(--serif); color: var(--flow-accent); transition: transform .25s; }
.role:hover h3 { color: var(--flow-accent); }
.role:hover .arrow { transform: translateX(4px); }

/* -------------------------------------------------- humanis: research */
.programme { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 34px 50px; padding: 38px 0; border-top: 1px solid var(--line); align-items: start; }
.programme:last-child { border-bottom: 1px solid var(--line); }
.programme .k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: .9em; }
.programme h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.025em; }
.programme .section-lead { margin-top: 14px; font-size: clamp(18px, 1.6vw, 23px); }
.programme ul { list-style: none; }
.programme li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font: 14px/1.75 var(--body-font); color: var(--ink-2); }
.programme li:first-child { padding-top: 0; }
.programme li b { color: var(--ink); font-weight: 500; }
@media (max-width: 1000px) { .programme { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; } .programme .k { padding-top: 0; } }

.reflist { margin-top: 40px; border-bottom: 1px solid var(--line); }
.ref { display: grid; grid-template-columns: 190px 1fr auto; gap: 30px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.ref .k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ref h3 { font-size: clamp(20px, 2vw, 27px); line-height: 1.25; letter-spacing: -.012em; }
.ref p { margin-top: 6px; }
.ref .by { margin-top: 8px; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ref .arrow { font: 20px var(--serif); color: var(--flow-accent); transition: transform .25s; }
.ref:hover h3 { color: var(--flow-accent); }
.ref:hover .arrow { transform: translate(3px, -3px); }
@media (max-width: 768px) { .ref { grid-template-columns: 1fr; gap: 6px; } .ref .arrow { display: none; } }

/* ------------------------------------------------------ crucible: hero */
/* Like the Humanis hero, this one is exactly the first screen at any
   resolution, so the next section never shows on landing and the "working
   with" bar always sits at the bottom. Its spacing and type follow the
   viewport's height as well as its width, and the field takes the room that is
   left. Only a window too short to hold the text at its smallest size (a phone
   on its side) makes the hero taller than the screen. */
.c-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; padding-top: clamp(5.4rem, min(11vw, 15.3svh), 8.6rem); }
.c-hero .copy { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; }
.c-hero .label { color: var(--ink-2); }
.c-hero h1 { margin-top: clamp(.8rem, 2.4svh, 1.4rem); font-size: clamp(2.6rem, min(6.2vw, 9.6svh), 5.4rem); line-height: 1; letter-spacing: -.028em; max-width: 22ch; }
.c-hero h1 em { font-style: italic; color: var(--accent); white-space: nowrap; }
/* On a phone the headline follows the width, so "critical infrastructure." stays on one line down to 320px. */
@media (max-width: 480px) { .c-hero h1 { font-size: clamp(1.9rem, min(10.6vw, 9.6svh), 2.6rem); } }
.c-hero .lead { margin-top: clamp(.9rem, 3svh, 1.7rem); max-width: 44ch; font: clamp(1rem, 1.35vw, 1.18rem)/1.7 var(--body-font); color: var(--ink-2); }
.c-hero .btn-row { margin-top: clamp(1rem, 3.7svh, 2.1rem); justify-content: center; }
.c-hero .stage { position: relative; flex: 1; min-height: clamp(84px, 16svh, 460px); margin-top: -2.5rem; z-index: 1; }
#hero-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
/* The field is drawn to fill its stage, so a tall stage stretches it upwards.
   On a wide window the stage therefore stops at about a fifth of the width,
   the proportions it has on a laptop screen. Whatever height is then left over
   is shared between the top of the copy and the foot of the field. */
@media (min-width: 769px) {
    .c-hero .copy { margin-top: auto; }
    .c-hero .stage { max-height: max(21vw, 26svh); margin-bottom: auto; }
}
/* The product in the hero: two windows of the app with the field running
   behind them. Everything shares the one screen. The copy and the "working
   with" bar take the height they need; the windows take what is left, at
   whatever size that allows, so nothing is cut off at the fold. Where the room
   left is wide and shallow (a laptop) the windows sit side by side; where it
   is deeper (a large monitor, a phone held upright) the session overlaps the
   world model. Only a window under about 35rem tall is too short for it all. */
.c-hero--product { min-height: max(100svh, 35rem); padding-top: clamp(4.9rem, 11.5svh, 8.6rem); }
.c-hero--product .copy { margin-top: 0; }
.showcase { position: relative; flex: 1 1 0; min-height: 7rem; display: flex; flex-direction: column; margin-top: clamp(.9rem, 3svh, 2.6rem); padding-bottom: clamp(.9rem, 2.6svh, 1.8rem); }
.c-hero--product .stage { position: absolute; top: 50%; left: 0; right: 0; z-index: 0; flex: none; height: min(24vw, 100%); min-height: 0; max-height: none; margin: 0; transform: translateY(-50%); }
/* The room that is left, as a box the windows measure themselves against. */
.showcase-box { container: showcase / size; position: relative; z-index: 2; flex: 1 1 0; min-height: 0; width: min(100% - 2 * var(--pad), 1500px - 2 * var(--pad)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shots { container-type: inline-size; position: relative; flex: none; aspect-ratio: 100 / 55; width: min(100cqw, 100cqh * 100 / 55); }
.shot { position: absolute; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(4px, .75cqw, 10px); background: #fff;
    box-shadow: 0 40px 80px -48px rgba(47, 49, 51, .5), 0 3px 14px -8px rgba(47, 49, 51, .25); }
[data-theme="dark"] .shot { border-color: rgba(255, 255, 255, .22); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
.shot img { display: block; width: 100%; height: auto; }
.shot--world { top: 7%; right: 0; width: 74%; }
.shot--chat { top: 0; left: 0; width: 54%; z-index: 1; }
@container showcase (min-aspect-ratio: 21 / 10) {
    .shots { aspect-ratio: 100 / 36; width: min(100cqw, 100cqh * 100 / 36); }
    .shot--world { top: 3%; width: 50.5%; }
    .shot--chat { width: 50.5%; }
}
/* The windows' title bars scale with the windows. */
.shot-bar { display: flex; align-items: center; gap: clamp(3px, .45cqw, 6px); height: clamp(10px, 1.9cqw, 26px); padding: 0 clamp(5px, .8cqw, 11px); border-bottom: 1px solid rgba(47, 49, 51, .1); background: #f7f7f5; }
.shot-bar i { flex: none; width: clamp(3px, .6cqw, 8px); height: clamp(3px, .6cqw, 8px); border: 1px solid rgba(47, 49, 51, .28); border-radius: 50%; }
.shot-bar span { margin-left: clamp(2px, .5cqw, 8px); font: 500 clamp(6px, .68cqw, 9px) var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: #8c8d8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 700px) { .shot-bar span { display: none; } }
/* A laptop screen is wide and shallow: one line of headline and two of lead
   leave the windows more of it. */
@media (min-width: 1000px) and (max-height: 1100px) {
    .c-hero--product h1 { max-width: none; font-size: clamp(2.4rem, min(4.9vw, 9svh), 5.4rem); }
    .c-hero--product h1 br { display: none; }
    .c-hero--product .lead { max-width: 66ch; font-size: clamp(1rem, 1.25vw, 1.1rem); }
}
/* A small phone: the lead and the buttons give up a little so the windows keep some room. */
@media (max-width: 480px) {
    .c-hero--product .lead { font-size: clamp(.88rem, 4vw, 1rem); line-height: 1.6; }
    .c-hero--product .btn-row { flex-wrap: nowrap; gap: .5rem; }
    .c-hero--product .btn { min-height: 42px; padding: 0 clamp(.8rem, 4.4vw, 1.5rem); font-size: clamp(.74rem, 3.5vw, .82rem); white-space: nowrap; }
}

/* "Working with": a label and a row of logos along the foot of the hero. Add a logo as another <li>. */
.partners { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; padding-block: clamp(.6rem, 1.8svh, 1.1rem); border-top: 1px solid var(--line-soft); }
.partners .k { font: 500 10px var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.partners ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 3rem; list-style: none; }
.partners img { display: block; height: clamp(26px, 4.2svh, 44px); width: auto; opacity: .85; }
[data-theme="dark"] .partners img { filter: invert(1); }
/* the partners we cannot name yet, as one sentence before the logos, set like the "Working with" label */
.partners .partners-claim { flex: 1 0 100%; font: 500 10px/1.6 var(--mono); letter-spacing: calc(.16em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); text-align: center; text-wrap: balance; }
@media (min-width: 1200px) { .partners .partners-claim { flex: none; white-space: nowrap; } }
/* A section's statement: a few sentences set large, in place of a headline. */
.statement { max-width: 27em; font: clamp(22px, 2.7vw, 40px)/1.24 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.statement em { font-style: italic; color: var(--accent); }
/* How it works without its drawing: the three steps are a plain list. */
.method-steps--static { list-style: none; margin-top: 50px; }
.method-steps--static .method-step { cursor: default; }
.method-steps--static .method-step:before { content: none; }

/* crucible sets its running text a little larger than the lab site */
body.crucible .prose { font-size: 15px; line-height: 1.85; }
body.crucible .section-index { font-size: 11px; }
body.crucible .synthesis-section h2, body.crucible .synthesis-method h2 { font-size: clamp(34px, 4vw, 56px); }

.pillar-icon { width: 44px; height: 44px; color: var(--flow-accent); margin-bottom: 18px; }
.pillar-icon svg { width: 100%; height: 100%; display: block; }
/* the technology cards open with a small field (tech-fields.js) in place of an icon */
.tech-field { display: block; width: 100%; height: 56px; margin-bottom: 12px; touch-action: pan-y; }   /* tech-fields.js sets the height that fits the fields */

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 50px); }
.metric { border-top: 1px solid var(--line); padding-top: 22px; }
.metric b { display: block; font: 400 clamp(44px, 5.4vw, 78px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.metric b small { font-size: .5em; color: var(--accent); margin-left: .08em; }
.metric span { display: block; margin-top: 12px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.metric p { margin-top: 10px; font: 13px/1.8 var(--body-font); color: var(--ink-2); }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }

.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: 46px; counter-reset: step; }
.steps4 .card { counter-increment: step; }
.steps4 .card .k::before { content: '0' counter(step) ' / '; }
@media (max-width: 1000px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } }
/* three steps, numbered in the title itself (01 Quantify.) */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); list-style: none; counter-reset: step; }
.steps3 .card { counter-increment: step; }
.steps3 .card h3 { margin-top: 0; }
.steps3 .card h3::before { content: '0' counter(step); margin-right: .38em; color: var(--ink-3); font-variant-numeric: lining-nums; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

.compat { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.compat span { padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px var(--body-font); color: var(--ink-2); }

.cta-band { text-align: center; padding-block: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line-soft); }
.cta-band h2 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.05; letter-spacing: -.03em; }
.cta-band h2 em { color: var(--accent); font-weight: 400; }
.cta-band .prose { max-width: 52ch; margin: 24px auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: 34px; }

/* certificate teaser */
.proofcard { border: 1px solid var(--ink); background: var(--bg); max-width: 560px; margin-left: auto; }
.proofcard .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 24px 14px; }
.proofcard .top h3 { font-size: 26px; letter-spacing: -.015em; }
.proofcard .top span { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.proofcard .nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proofcard .nums div { padding: 14px 24px; }
.proofcard .nums div + div { border-left: 1px solid var(--line); }
.proofcard .nums b { display: block; font: 400 32px/1.1 var(--serif); }
.proofcard .nums small { font: 12px/1.6 var(--body-font); color: var(--ink-2); }
.proofcard .verdict { display: flex; gap: 14px; align-items: center; padding: 16px 24px; background: var(--ink); color: var(--bg); }
.proofcard .verdict svg { width: 34px; height: 34px; flex: none; }
.proofcard .verdict strong { display: block; font: 400 20px/1.25 var(--serif); }
.proofcard .verdict span { font: 12px/1.6 var(--body-font); opacity: .78; }
.proofcard .left-out { padding: 14px 24px 18px; font: 13px/1.75 var(--body-font); color: var(--ink-2); }
.proofcard .left-out i { color: var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split .section-lead { margin-top: 26px; max-width: 34ch; }
.split .prose { margin-top: 18px; max-width: 48ch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .proofcard { margin: 0; } }
/* An industry page's own drawing: the explorer's diagram, standing alone. */
.domain-figure { min-width: 0; }
.domain-figure .diagram-meta { justify-content: flex-start; margin-top: 6px; }
@media (max-width: 480px) { .proofcard .nums { grid-template-columns: 1fr; } .proofcard .nums div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ------------------------------------------------ crucible: calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); margin-top: 46px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label, .field .lab { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field .hint { font: 12px/1.6 var(--body-font); color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--ink); font: 15px var(--body-font); }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--flow-accent); outline-offset: 2px; border-color: var(--flow-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.calc-out { border: 1px solid var(--line); padding: 28px; background: var(--bg); position: sticky; top: 96px; }
.calc-out .k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.calc-out .big { margin-top: 10px; font: 400 clamp(46px, 6vw, 84px)/1 var(--serif); letter-spacing: -.03em; }
.calc-out .range { margin-top: 10px; font: 13px/1.7 var(--body-font); color: var(--ink-2); }
.calc-out dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.calc-out dt { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.calc-out dd { margin-top: 6px; font: 400 26px/1.15 var(--serif); }
.calc-out .note { margin-top: 22px; font: 12px/1.75 var(--body-font); color: var(--ink-3); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc-out { position: static; } }

/* --------------------------------------------------- crucible: contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.contact-side { border-top: 1px solid var(--line); padding-top: 24px; }
.contact-side h3 { font-size: 28px; letter-spacing: -.02em; }
.contact-side ol { list-style: none; counter-reset: s; margin-top: 18px; }
.contact-side li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font: 14px/1.75 var(--body-font); color: var(--ink-2); }
.contact-side li::before { content: '0' counter(s); font: 500 10px var(--mono); letter-spacing: .1em; color: var(--accent); padding-top: .45em; }
.contact-side .direct { margin-top: 26px; font: 14px/1.8 var(--body-font); color: var(--ink-2); }
.contact-side .direct a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.form-status { margin-top: 14px; font: 13px/1.7 var(--body-font); color: var(--ink-2); min-height: 1.7em; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 404 etc */
.notfound { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.notfound h1 { font-size: clamp(3rem, 10vw, 8rem); line-height: .95; letter-spacing: -.03em; }
.notfound p { margin-top: 1.4rem; font-size: 1.3rem; color: var(--ink-2); }
.notfound .btn-row { margin-top: 2rem; }

@media (max-width: 768px) {
    .page-hero .lead { font-size: 1.12rem; }
    .method-steps--static { margin-top: 26px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.reading code, .prose code { font: .86em ui-monospace, 'SFMono-Regular', Menlo, monospace; background: var(--bg-2); padding: .1em .35em; border-radius: 2px; }

/* The hero is exactly the first screen, at any resolution.
   On desktop it is one composition that scales as a whole. A single unit,
   --hero-u, sets the headline, the artwork and the distance between them, so a
   smaller window shows the same picture smaller, never the same pieces spread
   further apart. The unit is the room between the text's left edge and the
   right rail divided by the composition's width (85.6 units), capped at its
   full size (15px, reached on a 1500px column), and reduced only when the
   window is too short for the artwork (43.7 units tall, plus 75px above and
   below). The artwork is placed from the text's left edge, not from the right
   edge of the page, so in a wide, short window the spare room falls to its
   right. */
.hero { min-height: 100svh; }
.hero h1 { line-height: .98; max-width: none; }
@media (min-width: 769px) {
  .hero {
    --hero-left: var(--pad);
    --hero-u: max(5.5px, min((min(100vw, 1500px) - var(--hero-left) - var(--rail)) / 85.6, 15px, (100svh - 150px) / 43.7));
  }
  .hero h1 { font-size: calc(7.67 * var(--hero-u)); }
  .hero-foot { margin-top: calc(3.84 * var(--hero-u)); }
  .hero-foot p { font-size: max(1.05rem, calc(1.39 * var(--hero-u))); }
  .hero-plate { width: calc(39.3 * var(--hero-u)); left: calc(var(--hero-left) + 46.3 * var(--hero-u)); right: auto; }
}
@media (min-width: 1080px) { .hero { --hero-left: calc(var(--rail) + var(--pad)); } }
/* Phones and small tablets: the artwork sits behind the headline, so the headline
   is sized from the screen's width alone, small enough for a 320 px phone and
   larger on a tablet. */
@media (max-width: 768px) { .hero h1 { font-size: clamp(2.3rem, 12.4vw, 5.6rem); } }
/* Each headline line is a clipping box (for the entrance), and at this line
   spacing the box is shorter than the letters: descenders and the italic's
   overhang were cut off. Pad the box so they show, and pull it back by the
   same amount so the lines sit exactly where they did. The headline is a
   flex column because block margins would collapse and undo only part of it. */
.hero h1 { display: flex; flex-direction: column; }
.hero h1 .line { padding: .14em .12em .3em; margin: -.14em -.12em -.3em; }
@media (max-width: 768px) { .hero-foot { margin-top: clamp(1.2rem, min(5vw, 6svh), 3.6rem); } }

.c-hero > .wrap { width: 100%; }

/* The letter marks its headings with .sec, which base.css uses for page sections. */
.reading .col h2.sec { padding: 0; margin-top: 2.6em; margin-bottom: 0; border: 0; min-height: 0; display: block; }
/* The byline is a paragraph, so the rule for the letter's paragraphs was
   overriding its size, spacing and colour; restate them with enough weight to win. */
.reading .col > p.byline { font-size: .68rem; line-height: 1.6; margin-top: 1.6rem; color: var(--ink-3); }

/* sections.css resets button colour and font; restore them for real buttons styled as .btn */
[data-study="combined"] button.btn { font: 500 .82rem var(--body-font); color: var(--ink); }
[data-study="combined"] button.btn--solid { color: var(--bg); }

/* Phones: a section's engraving sits behind its text as a faint ghost, as the
   hero's does, instead of stacking under it. The figure is taken out of the
   flow and placed against the top of its block; z-index -1 puts it behind
   everything else in the section (each section is its own stacking context). */
@media (max-width: 768px) {
  .thesis-layout, .people-layout, .doorway { position: relative; }
  .thesis-layout > figure, .people-layout > figure, .doorway > figure {
    position: absolute; z-index: -1; top: -18px; left: 50%; transform: translateX(-50%);
    display: block; width: min(74vw, 340px); max-width: none; margin: 0; padding: 0;
    opacity: .2; pointer-events: none;
  }
  .thesis-layout > figure .eng, .people-layout > figure .eng, .doorway > figure .eng { width: 100%; max-width: none; margin: 0; }
}

/* Phones: the smallest labels were set at 7 and 8 px, too small to read on a handset. */
@media (max-width: 768px) {
  .section-index, .diagram-caption, .domain-number, .card .k, .founder .k, .ref .by { font-size: 10px; }
  .synthesis-footer .foot-meta { font-size: 10px; gap: 10px 17px; }
}

/* ------------------------------------------------- Crucible solution pages */
/* Hero with the industry's drawing beside it, a numbered index of the use
   cases, then one section per use case with its clip or still, and the
   smaller ones together at the end. */
.page-hero--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.page-hero--split .domain-figure { margin: 0; }
.hero-evidence { margin-top: 1.4rem; max-width: 52ch; font-family: var(--body-font); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.uc-index { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2.6rem; list-style: none; }
.uc-index a { font: 500 10px var(--mono); letter-spacing: calc(.12em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-2); transition: color .25s; }
.uc-index a:hover { color: var(--accent); }
.uc-index b { margin-right: .6em; font-weight: 500; color: var(--ink-3); }
@media (max-width: 900px) { .page-hero--split { grid-template-columns: 1fr; } }

.usecase { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 84px); align-items: center; scroll-margin-top: 90px; }
.usecase--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.usecase--flip .uc-text { order: 2; }
.usecase .k { font: 500 10px var(--mono); letter-spacing: calc(.12em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.usecase h2 { margin-top: 16px; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -.022em; }
.usecase h2 em { color: var(--accent); }
.usecase .prose { margin-top: 18px; max-width: 46ch; }
.uc-status { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-family: var(--body-font); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.uc-status .k { flex: none; }
.uc-status a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .25s; }
.uc-status a:hover { text-decoration-color: currentColor; }
.uc-media { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    box-shadow: 0 40px 80px -48px rgba(47, 49, 51, .5), 0 3px 14px -8px rgba(47, 49, 51, .25); }
[data-theme="dark"] .uc-media { border-color: rgba(255, 255, 255, .22); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
.uc-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid rgba(47, 49, 51, .1); background: #f7f7f5;
    font: 500 9px var(--mono); letter-spacing: calc(.1em * var(--label-track, 1)); text-transform: uppercase; color: #8a8882; }
.uc-bar i { width: 7px; height: 7px; border-radius: 50%; background: #dcdcd6; }
.uc-bar span { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uc-media video, .uc-media img { display: block; width: 100%; height: auto; }
.uc-media figcaption { padding: 10px 14px; font-family: var(--body-font); border-top: 1px solid rgba(47, 49, 51, .08); font-size: 12px; line-height: 1.5; color: #77797c; background: #fff; }
@media (max-width: 900px) {
  .usecase { grid-template-columns: 1fr; }
  .usecase--flip { grid-template-columns: 1fr; }
  .usecase--flip .uc-text { order: 0; }
}

/* Use cases laid out like Geminus's industry pages: a compact index on the left
   that stays in view and follows the scroll (usecase-nav.js), and one card per
   use case on the right with its description, results, media and next step.
   The .usecase rules above are for the earlier pages in src/content/crucible/. */
.uc-title { margin-top: 26px; text-wrap: balance; }   /* two lines on desktop: the <br> sets the break */
.uc-layout { display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.uc-nav { position: sticky; top: 108px; }
.uc-nav ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.uc-nav a { display: flex; gap: 12px; align-items: baseline; padding: 14px 0 13px; border-bottom: 1px solid var(--line); font: 14px/1.35 var(--body-font); color: var(--ink-3); transition: color .25s, box-shadow .25s; }
.uc-nav b { flex: none; width: 1.7em; font: 500 10px var(--mono); letter-spacing: calc(.08em * var(--label-track, 1)); color: inherit; }
.uc-nav a:hover { color: var(--ink); }
.uc-nav a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.uc-nav a[aria-current="true"] b { color: var(--accent); }
.uc-cards { display: grid; gap: 0; }
/* Each use case opens like a page section: its label in the accent colour over a rule. No box around it. */
.uc-card { scroll-margin-top: 104px; padding-bottom: clamp(52px, 6vw, 88px); }
.uc-card:last-child { padding-bottom: 0; }
.uc-card .k { font: 500 10px var(--mono); letter-spacing: calc(.12em * var(--label-track, 1)); text-transform: uppercase; color: var(--ink-3); }
.uc-card h3 { margin-top: 0; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
.uc-card h3 em { color: var(--accent); }
.uc-card .uc-text .prose { margin-top: 16px; max-width: 54ch; }
.uc-card .uc-media { margin-top: clamp(26px, 3vw, 42px); box-shadow: 0 30px 60px -44px rgba(47, 49, 51, .45), 0 2px 10px -6px rgba(47, 49, 51, .2); }
.uc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(18px, 2.2vw, 28px); font: 14px/1.6 var(--body-font); color: var(--ink-2); }
.uc-cta .uc-cta-text { flex: 1 1 14em; }
.uc-cta .uc-cta-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .25s; }
.uc-cta .uc-cta-text a:hover { text-decoration-color: currentColor; }
.uc-cta .btn { min-height: 40px; }
.uc-card--more .cards { margin-top: 22px; gap: clamp(22px, 3vw, 40px); }
.uc-card--more .card h3 { font-size: clamp(22px, 1.9vw, 28px); }
.uc-card--more .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-compat { margin-top: clamp(34px, 4vw, 52px); }
/* The use-case number, from a counter (the label holds the name only) */
.uc-cards { counter-reset: uc; }
.uc-card:not(.uc-card--more) { counter-increment: uc; }
.uc-card:not(.uc-card--more) .uc-label::before { content: '0' counter(uc) ' · '; }

.uc-card .uc-label, .uc-card--more > .k { display: block; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line-soft); color: var(--accent); font-size: 11px; letter-spacing: .1em; }
@media (max-width: 900px) {
  .uc-layout { grid-template-columns: 1fr; }
  .uc-nav { position: static; }
  .uc-nav ol { display: flex; flex-wrap: wrap; gap: 0 24px; border-top: 0; }
  .uc-nav a { padding: 6px 0; border-bottom: 0; }
  .uc-nav a[aria-current="true"] { box-shadow: none; }
}
@media (max-width: 768px) { .uc-card--more .cards--2 { grid-template-columns: 1fr; } }

/* ------------------------------------------- Crucible: review fixes, 18 October 2026
   From an external review: smaller headlines next to larger body text, labels
   that pass contrast, links that look clickable, a shorter page, and a menu
   button that turns into a close button. Crucible only. */
html:not([data-theme="dark"]) body.crucible { --ink-3: #6f6c64; }   /* 5.2:1 on white, was 2.9:1 */
[data-theme="dark"] body.crucible { --ink-3: #8f8c86; }

/* headlines: about 72px at the top of a page, 44px for sections */
body.crucible .c-hero--product h1 { font-size: clamp(2.4rem, min(4.9vw, 9svh), 4.5rem); }
body.crucible .page-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
body.crucible .synthesis-section h2, body.crucible .synthesis-method h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; }
body.crucible .cta-band h2 { font-size: clamp(32px, 3.6vw, 52px); }
body.crucible .uc-card h3 { font-size: clamp(26px, 2.3vw, 34px); }
body.crucible .card h3 { font-size: clamp(22px, 2vw, 28px); }
body.crucible .uc-card--more .card h3 { font-size: clamp(20px, 1.7vw, 24px); }
body.crucible .statement { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.32; }

/* body text 16px; labels a step larger */
body.crucible .prose { font-size: 16px; line-height: 1.7; }
body.crucible .card .k, body.crucible .uc-card .k { font-size: 11px; }

/* links at the end of a section and in the footer, at reading size */
body.crucible .synthesis-link { font-size: 15px; }
body.crucible .foot-links { font-size: .86rem; }

/* a shorter page: less space between sections */
body.crucible .synthesis-section { padding-block: clamp(56px, 6vw, 96px); }
body.crucible .section-heading { margin-bottom: 36px; }

/* the menu button becomes a close button while the menu is open */
body.crucible .burger svg line { transition: transform .25s var(--ease); transform-box: view-box; transform-origin: 12px 12px; }
body.crucible .burger[aria-expanded="true"] svg line:first-child { transform: rotate(45deg) translateY(4px); }
body.crucible .burger[aria-expanded="true"] svg line:last-child { transform: rotate(-45deg) translateY(-4px); }

/* -------------------------------------------- Humanis: review fixes, 18 October 2026
   The same external review, for humanis.ai: smaller headlines next to larger
   body text, labels that pass contrast, and a menu button that turns into a
   close button. The hero keeps its one-screen composition. Humanis only. */
body.humanis { --ink-3: #6e695e; }   /* 5.0:1 on the page, 4.6:1 on panels; was 2.7:1 */

/* headlines: about 72px at the top of a page, 44px for sections, on a laptop */
body.humanis .page-hero h1 { font-size: clamp(2.6rem, 5vw, 4.75rem); }
body.humanis .synthesis-section h2, body.humanis .synthesis-method h2 { font-size: clamp(32px, 3.1vw, 48px); line-height: 1.1; }

/* body text 16px; labels a step larger */
body.humanis .prose { font-size: 16px; line-height: 1.75; }
body.humanis .sheet .s-apply-small { font-size: 15px; line-height: 1.7; }
body.humanis .card .k, body.humanis .founder .k, body.humanis .post .date, body.humanis .role .meta,
body.humanis .ref .k, body.humanis .ref .by, body.humanis .foot-meta { font-size: 11px; }

/* role pages: the form behind a button, where the QR code was. The reading pages'
   link rules (bronze underline, bronze on hover) must not reach the button. */
body.humanis .sheet .s-apply-cta { margin-top: 1.2rem; }
body.humanis .reading .col .s-apply-cta .btn { border: 1px solid var(--ink); color: var(--bg); }
body.humanis .reading .col .s-apply-cta .btn:hover { border-color: var(--accent); color: var(--bg); }

/* team page: the note on AI-written applications, under the "No role that fits?" link */
body.humanis .roles-note { max-width: 62ch; margin-top: 28px; }

/* the menu button becomes a close button while the menu is open */
body.humanis .burger svg line { transition: transform .25s var(--ease); transform-box: view-box; transform-origin: 12px 12px; }
body.humanis .burger[aria-expanded="true"] svg line:first-child { transform: rotate(45deg) translateY(4px); }
body.humanis .burger[aria-expanded="true"] svg line:last-child { transform: rotate(-45deg) translateY(-4px); }

/* Crucible: anchors the previous crucible.ag's pages still link to (/#how, /#telecoms, /#fabs),
   kept clear of the sticky header like the sections */
body.crucible #how, body.crucible #telecoms, body.crucible #fabs { scroll-margin-top: 104px; }

/* Crucible: the demo form's confirmation, shown in place of the fields once the request is sent */
.form-sent { border-top: 1px solid var(--line); padding-top: 24px; }
.form-sent h2 { font-size: 28px; letter-spacing: -.02em; }
.form-sent p { margin-top: 14px; max-width: 46ch; font: 16px/1.7 var(--body-font); color: var(--ink-2); }
.form-sent:focus { outline: none; }