/*
 * Orvanthe: shared stylesheet for every page. Chrome (nav, phone sheet, footer), the type
 * system, the split button, labels, the phase track and the pipeline table.
 * Every value comes from tokens.css. Page compositions live in home.css and pages.css.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--s-nav-h) + var(--s-ribbon-h) + var(--s-space-4)); }
body {
    margin: 0;
    background: var(--s-bg);
    color: var(--s-ink);
    font-family: var(--s-font-body);
    font-size: var(--s-size-body);
    font-weight: var(--s-weight-regular);
    line-height: var(--s-leading-body);
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; text-underline-offset: var(--s-space-1); text-decoration-thickness: var(--s-hairline); }
a:hover { text-decoration-color: var(--s-accent); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--s-font-display); font-weight: var(--s-weight-semi); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--s-rule-w) solid var(--s-focus); outline-offset: var(--s-space-1); }
::selection { background: var(--s-tint); color: var(--s-ink); }

.ov-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.ov-skip {
    position: absolute; left: var(--s-space-4); top: var(--s-space-4); z-index: 50;
    padding: var(--s-space-3) var(--s-space-4); background: var(--s-ink); color: var(--s-paper);
    transform: translateY(-200%);
}
.ov-skip:focus { transform: none; }

/* ── type ─────────────────────────────────────────────────────── */
.ov-h2 {
    font-size: var(--s-size-h2);
    line-height: var(--s-leading-tight);
    letter-spacing: var(--s-track-h2);
    font-weight: var(--s-weight-semi);
    text-wrap: balance;
}
.ov-h3 {
    font-size: var(--s-size-h3);
    line-height: var(--s-leading-snug);
    letter-spacing: var(--s-track-h2);
    font-weight: var(--s-weight-semi);
    text-wrap: balance;
}
.ov-statement {
    font-size: var(--s-size-statement);
    line-height: var(--s-leading-display);
    letter-spacing: var(--s-track-display);
    font-weight: var(--s-weight-semi);
    text-wrap: balance;
}
.ov-label {
    display: flex; align-items: center; gap: var(--s-space-3);
    font-family: var(--s-font-mono);
    font-size: var(--s-size-mono);
    font-weight: var(--s-weight-medium);
    letter-spacing: var(--s-track-label);
    line-height: var(--s-leading-snug);
    text-transform: uppercase;
    color: var(--s-graphite);
}
/* the plate's chamfered corner, small: the site's one recurring mark */
.ov-label::before {
    content: ""; flex: none; width: var(--s-space-3); height: var(--s-space-3);
    background: var(--s-accent);
    clip-path: polygon(0 0, 60% 0, 100% 40%, 100% 100%, 0 100%);
}
.ov-label--dark { color: var(--s-dark-muted); }
.ov-label--dark::before { background: var(--s-dark-accent); }
.ov-code {
    font-family: var(--s-font-mono);
    font-weight: var(--s-weight-semi);
    letter-spacing: var(--s-track-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}
.ov-wrap { max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter); }
.ov-section { padding-block: var(--s-section); }

/* ── the split button: label cell | 1px rule | arrow cell ─────── */
.ov-btn {
    display: inline-flex; align-items: stretch;
    min-height: var(--s-touch);
    border: var(--s-hairline) solid var(--s-ink);
    text-decoration: none;
    font-weight: var(--s-weight-semi);
    font-size: var(--s-size-body);
    line-height: var(--s-leading-solid);
    border-radius: var(--s-radius);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease), border-color var(--s-dur-fast) var(--s-ease);
}
.ov-btn__label { display: flex; align-items: center; padding: var(--s-space-4) var(--s-space-5); }
.ov-btn__arrow {
    display: grid; place-items: center;
    width: var(--s-btn-arrow); flex: none;
    border-left: var(--s-hairline) solid currentColor;
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.ov-btn__arrow svg { transition: transform var(--s-dur) var(--s-ease); }
.ov-btn:hover { text-decoration: none; }
.ov-btn:hover .ov-btn__arrow svg, .ov-btn:focus-visible .ov-btn__arrow svg { transform: translateX(var(--s-space-1)); }
.ov-btn--primary { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink); }
.ov-btn--primary .ov-btn__arrow { border-left-color: var(--s-tint); }
.ov-btn--primary:hover .ov-btn__arrow, .ov-btn--primary:focus-visible .ov-btn__arrow { background: var(--s-paper); color: var(--s-accent); }
.ov-btn--primary:active { background: var(--s-accent-deep); border-color: var(--s-accent-deep); }
.ov-btn--line { background: transparent; color: var(--s-ink); }
.ov-btn--line:hover .ov-btn__arrow, .ov-btn--line:focus-visible .ov-btn__arrow { background: var(--s-ink); color: var(--s-paper); }
.ov-btn--dark { border-color: var(--s-dark-text); color: var(--s-dark-text); }
.ov-btn--dark:hover .ov-btn__arrow { background: var(--s-dark-text); color: var(--s-dark); }
.ov-btn[data-size="nav"] { font-size: var(--s-size-small); }
.ov-btn[data-size="nav"] .ov-btn__label { padding-inline: var(--s-space-4); }
.ov-btn[data-size="nav"] .ov-btn__arrow { width: var(--s-touch); }

/* ── nav ──────────────────────────────────────────────────────── */
.ov-nav {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--s-space-6);
    height: var(--s-nav-h);
    padding-inline: var(--s-gutter);
    background: var(--s-bg);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    transition: border-color var(--s-dur) var(--s-ease);
}
.ov-nav.is-scrolled { border-bottom-color: var(--s-rule-strong); }
.ov-logo {
    display: inline-flex; align-items: center; gap: var(--s-space-3);
    min-height: var(--s-touch);
    text-decoration: none; color: var(--s-ink);
}
.ov-logo__name {
    font-size: var(--s-size-logo);
    font-weight: var(--s-weight-bold);
    letter-spacing: var(--s-track-logo);
    line-height: var(--s-leading-solid);
}
.ov-mark { width: var(--s-space-7); height: auto; flex: none; }
.ov-mark__body { fill: var(--s-paper); stroke: var(--s-ink); stroke-width: 1.4; }
.ov-mark__well { fill: var(--s-well); stroke: var(--s-rule-strong); stroke-width: 0.8; }
.ov-mark__on { fill: var(--s-accent); }
.ov-nav__links { margin-left: auto; }
.ov-nav__links ul { display: flex; gap: var(--s-space-2); }
.ov-nav__links a {
    display: inline-flex; align-items: baseline; gap: var(--s-space-2);
    min-height: var(--s-touch); padding: var(--s-space-3) var(--s-space-3);
    text-decoration: none; color: var(--s-graphite);
    font-weight: var(--s-weight-medium);
    border-bottom: var(--s-rule-w) solid transparent;
    transition: color var(--s-dur-fast) var(--s-ease), border-color var(--s-dur-fast) var(--s-ease);
}
.ov-nav__links a:hover { color: var(--s-ink); }
.ov-nav__links a[aria-current="page"] { color: var(--s-ink); border-bottom-color: var(--s-accent); }
.ov-nav__n {
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
    color: var(--s-faint); font-variant-numeric: tabular-nums;
}
.ov-nav__menu {
    min-height: var(--s-touch); min-width: var(--s-touch);
    padding: var(--s-space-2) var(--s-space-4);
    border: var(--s-hairline) solid var(--s-ink); background: var(--s-paper);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
    cursor: pointer;
}

/* ── phone sheet (a <dialog>) ─────────────────────────────────── */
.ov-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; padding: var(--s-space-4) var(--s-gutter) var(--s-space-7);
    border: 0; background: var(--s-bg); color: var(--s-ink);
}
.ov-sheet::backdrop { background: var(--s-scrim); }
.ov-sheet[open] { display: flex; flex-direction: column; gap: var(--s-space-6); animation: ov-sheet-in var(--s-dur) var(--s-ease); }
.ov-sheet__top { display: flex; align-items: center; justify-content: space-between; }
.ov-sheet__pages { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-sheet__pages a {
    display: flex; align-items: baseline; gap: var(--s-space-4);
    min-height: var(--s-touch); padding: var(--s-space-4) 0;
    border-bottom: var(--s-hairline) solid var(--s-rule);
    font-size: var(--s-size-h3); font-weight: var(--s-weight-semi); text-decoration: none;
}
.ov-sheet__pages a[aria-current="page"] { color: var(--s-accent); }
.ov-sheet__concept { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
@keyframes ov-sheet-in { from { opacity: 0; transform: translateY(var(--s-space-5)); } }

/* ── phase track ──────────────────────────────────────────────── */
.ov-track {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-phase-gap);
    width: 100%;
}
.ov-track__seg {
    position: relative; height: var(--s-phase-h); overflow: hidden;
    background: var(--s-rule);
}
.ov-track__seg.is-now {
    background: repeating-linear-gradient(-45deg, var(--s-tint) 0 var(--s-space-1), var(--s-paper) var(--s-space-1) var(--s-space-2));
}
.ov-track__bar {
    position: absolute; inset: 0;
    background: var(--s-accent);
    transform-origin: left center;
    transform: scaleX(var(--fill));
    transition: transform var(--s-dur-bar) var(--s-ease);
    transition-delay: calc(var(--i) * var(--s-stagger));
}
.ov-track--mini { --s-phase-h: 6px; --s-phase-gap: 2px; }
.ov-track--big { --s-phase-h: 18px; --s-phase-gap: 4px; }
/* with JS the bars wait at zero until they enter the viewport, then extend */
.ov-js .ov-track:not(.is-in) .ov-track__bar { transform: scaleX(0); transition-duration: 0s; }

/* ── pipeline table ───────────────────────────────────────────── */
.ov-pipe__table {
    width: 100%; border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.ov-pipe__table thead th, .ov-pipe__table thead td {
    padding: 0 var(--s-space-4) var(--s-space-3) 0;
    border-bottom: var(--s-rule-w) solid var(--s-ink);
    text-align: left; vertical-align: bottom;
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
    font-weight: var(--s-weight-medium);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
    color: var(--s-graphite);
}
.ov-pipe__h--0 { width: 17%; }
.ov-pipe__h--1 { width: 22%; }
.ov-pipe__h--2 { width: 18%; }
.ov-pipe__h--4 { width: 13%; }
.ov-pipe__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-phase-gap); }
.ov-pipe__scale span { border-left: var(--s-hairline) solid var(--s-rule-strong); padding-left: var(--s-space-1); }
.ov-pipe__row { border-bottom: var(--s-hairline) solid var(--s-rule); transition: background-color var(--s-dur-fast) var(--s-ease); }
.ov-pipe__row:hover, .ov-pipe__row.is-open { background: var(--s-paper); }
.ov-pipe__main > * {
    padding: var(--s-space-5) var(--s-space-4) var(--s-space-5) 0;
    text-align: left; vertical-align: middle;
    font-weight: var(--s-weight-regular);
}
.ov-pipe__code { display: flex; flex-direction: column; gap: var(--s-space-1); }
.ov-pipe__code .ov-code { font-size: var(--s-size-h3); line-height: var(--s-leading-solid); }
.ov-pipe__status {
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
    color: var(--s-graphite); letter-spacing: var(--s-track-mono);
}
.ov-pipe__target, .ov-pipe__area { color: var(--s-graphite); font-size: var(--s-size-small); line-height: var(--s-leading-snug); }
.ov-pipe__area { color: var(--s-ink); font-weight: var(--s-weight-medium); }
.ov-pipe__phase .ov-track { margin-bottom: var(--s-space-2); }
.ov-pipe__phasename { font-weight: var(--s-weight-semi); font-size: var(--s-size-small); }
.ov-pipe__study { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); font-weight: var(--s-weight-regular); margin-left: var(--s-space-2); }
.ov-pipe__toggle { text-align: right; padding-right: 0; }
.ov-toggle {
    display: inline-flex; align-items: center; gap: var(--s-space-3);
    min-height: var(--s-touch); padding: 0 0 0 var(--s-space-3);
    border: 0; background: none; cursor: pointer;
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
    letter-spacing: var(--s-track-mono); color: var(--s-graphite);
}
.ov-toggle:hover { color: var(--s-ink); }
.ov-toggle__icon {
    position: relative; width: var(--s-touch); height: var(--s-touch); flex: none;
    border: var(--s-hairline) solid var(--s-rule-strong); background: var(--s-paper);
    transition: background-color var(--s-dur-fast) var(--s-ease), border-color var(--s-dur-fast) var(--s-ease);
}
.ov-toggle__icon::before, .ov-toggle__icon::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: var(--s-space-4); height: var(--s-rule-w); background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--s-dur) var(--s-ease);
}
.ov-toggle__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ov-toggle[aria-expanded="true"] .ov-toggle__icon { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-paper); }
.ov-toggle[aria-expanded="true"] .ov-toggle__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.ov-pipe__more td { padding: 0 0 var(--s-space-6); }
.ov-pipe__more[hidden] { display: none; }
.ov-pipe__detail {
    display: grid; grid-template-columns: 17% minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--s-space-3) var(--s-space-6);
    animation: ov-open var(--s-dur) var(--s-ease);
}
.ov-pipe__q { grid-column: 2; font-size: var(--s-size-h3); line-height: var(--s-leading-snug); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-h2); }
.ov-pipe__body { grid-column: 2; color: var(--s-graphite); max-width: var(--s-measure); }
.ov-pipe__next { grid-column: 3; grid-row: 1 / span 2; align-self: start; padding: var(--s-space-4); background: var(--s-tint-soft); border-left: var(--s-rule-w) solid var(--s-accent); }
.ov-pipe__next .ov-label { margin-bottom: var(--s-space-2); }
.ov-pipe__detail .ov-btn { grid-column: 2; justify-self: start; }
.ov-pipe__foot {
    margin-top: var(--s-space-5);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono);
    color: var(--s-graphite); line-height: var(--s-leading-mono);
}
.ov-pipe__concept { color: var(--s-ink); font-weight: var(--s-weight-semi); }
@keyframes ov-open { from { opacity: 0; transform: translateY(calc(var(--s-space-2) * -1)); } }

/* ── footer ───────────────────────────────────────────────────── */
.ov-foot { border-top: var(--s-rule-w) solid var(--s-ink); background: var(--s-paper); }
.ov-foot__inner {
    max-width: var(--s-max-wide); margin-inline: auto;
    padding: var(--s-space-8) var(--s-gutter) var(--s-space-6);
    display: grid; gap: var(--s-space-7) var(--s-space-6);
    grid-template-columns: 1.3fr 1.2fr 0.8fr 1fr;
}
.ov-foot__statement {
    margin-top: var(--s-space-5);
    font-size: var(--s-size-h2); line-height: var(--s-leading-tight);
    letter-spacing: var(--s-track-h2); font-weight: var(--s-weight-semi);
    max-width: var(--s-measure-hero);
}
.ov-foot__sites { margin-top: var(--s-space-4); color: var(--s-graphite); font-size: var(--s-size-small); }
.ov-foot__concept {
    align-self: start; padding: var(--s-space-5);
    border: var(--s-hairline) solid var(--s-accent); background: var(--s-tint-soft);
    font-size: var(--s-size-small); color: var(--s-graphite);
    clip-path: polygon(0 0, calc(100% - var(--s-chamfer-s)) 0, 100% var(--s-chamfer-s), 100% 100%, 0 100%);
}
.ov-foot__line { margin-bottom: var(--s-space-2); color: var(--s-ink); font-weight: var(--s-weight-semi); font-size: var(--s-size-body); }
.ov-foot .ov-label { margin-bottom: var(--s-space-3); }
.ov-foot__pages a, .ov-foot__credits a {
    display: inline-flex; align-items: center; gap: var(--s-space-2);
    min-height: var(--s-touch); text-decoration: none;
}
.ov-foot__pages a:hover, .ov-foot__credits a:hover { text-decoration: underline; }
.ov-foot__credits p { font-size: var(--s-size-small); color: var(--s-graphite); }
.ov-foot__credits ul { display: flex; flex-wrap: wrap; column-gap: var(--s-space-4); font-size: var(--s-size-small); }
.ov-foot__legal {
    grid-column: 1 / -1; padding-top: var(--s-space-5);
    border-top: var(--s-hairline) solid var(--s-rule);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-faint);
}

/* ── reveal: generic fade-up for blocks marked data-ov-rise ───── */
.ov-js [data-ov-rise] { opacity: 0; transform: translateY(var(--s-space-5)); transition: opacity var(--s-dur-slow) var(--s-ease), transform var(--s-dur-slow) var(--s-ease); }
.ov-js [data-ov-rise].is-in { opacity: 1; transform: none; }

/* ── tablet and phone ─────────────────────────────────────────── */
.ov-nav__menu[data-ov-menu] { display: none; }
@media (max-width: 1100px) {
    .ov-nav__n { display: none; }
    .ov-foot__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .ov-nav { gap: var(--s-space-3); }
    .ov-nav__links, .ov-nav > .ov-btn { display: none; }
    .ov-nav__menu[data-ov-menu] { display: inline-block; margin-left: auto; }
    .ov-nav__menu[data-ov-menu][hidden] { display: none; }
    .ov-pipe__table thead { display: none; }
    .ov-pipe__table, .ov-pipe__row, .ov-pipe__main, .ov-pipe__more, .ov-pipe__more td { display: block; width: 100%; }
    .ov-pipe__row { border-top: var(--s-rule-w) solid var(--s-ink); border-bottom: 0; padding-block: var(--s-space-5); }
    .ov-pipe__main {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-space-3) var(--s-space-4);
    }
    .ov-pipe__main > * { padding: 0; }
    .ov-pipe__code { grid-column: 1; grid-row: 1; }
    .ov-pipe__toggle { grid-column: 2; grid-row: 1; align-self: start; }
    .ov-pipe__target, .ov-pipe__area, .ov-pipe__phase { grid-column: 1 / -1; }
    .ov-pipe__target::before, .ov-pipe__area::before {
        content: attr(data-label); display: block;
        font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
        letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-faint);
    }
    .ov-pipe__target { grid-row: 2; }
    .ov-pipe__area { grid-row: 3; }
    .ov-pipe__phase { grid-row: 4; }
    .ov-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ov-pipe__more td { padding: var(--s-space-4) 0 0; }
    .ov-pipe__detail { grid-template-columns: minmax(0, 1fr); }
    .ov-pipe__q, .ov-pipe__body, .ov-pipe__next, .ov-pipe__detail .ov-btn { grid-column: 1; grid-row: auto; }
    .ov-pipe__scale { display: none; }
}
@media (max-width: 760px) {
    .ov-foot__inner { grid-template-columns: 1fr; gap: var(--s-space-6); padding-top: var(--s-space-7); }
    .ov-btn__label { padding-inline: var(--s-space-4); }
}

/* ── reduced motion: the finished state, no travel ────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
    .ov-js [data-ov-rise] { opacity: 1; transform: none; }
    .ov-js .ov-track:not(.is-in) .ov-track__bar { transform: scaleX(var(--fill)); }
}