/* Shibolett Operations. Self-hosted Source Serif 4. No scripts, no external requests.
   Home page built from the October 2026 mockup; articles and 404 share its header, footer and bands.
   No media queries: flex-wrap, auto-fit grids and clamp() handle phone widths. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 400 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 600 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 600 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #111628;
    --grey: #5C6070;
    --panel: #F1F2F5;
    --rule: #D9DBE1;
    --gold: #C9962B;
    --white: #FFFFFF;
    --on-navy-rule: rgba(255, 255, 255, 0.24);
    --on-navy-text: rgba(255, 255, 255, 0.84);
    --serif: 'Source Serif 4', Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --page: 1200px;
    --gutter: clamp(20px, 5vw, 64px);
    --strip-pad: clamp(64px, 8vw, 104px);
    --stack: clamp(32px, 4vw, 48px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: var(--white);
    color: var(--navy);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    display: block;
}

/* ---------- Layout ---------- */
/* content-box so the 1200px measure excludes the gutters, as in the mockup */
.wrap {
    box-sizing: content-box;
    max-width: var(--page);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.icon {
    display: block;
    flex: 0 0 auto;
}

/* ---------- Practices bar: the same strip on both practice sites ---------- */
/* Near-black navy above the white header; 64% white text is about 9:1 on it */
.practices-bar {
    background: #0B0F1C;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 20px;
}

.practices-bar-row,
.practices-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(10px, 3vw, 20px);
}

.practices-list {
    list-style: none;
}

/* A small dot before each practice, drawn rather than typed so screen readers skip it */
.practices-list li {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 20px);
}

.practices-list li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.64);
}

.practices-bar a {
    display: inline-block;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.64);
    text-decoration: none;
    transition: color 0.2s ease;
}

.practices-bar .practices-home {
    font-weight: 600;
    color: var(--white);
}

.practices-bar a:hover,
.practices-bar a[aria-current] {
    color: var(--white);
}

/* Gold on near-black is decoration here, and passes as text too (about 7:1) */
.practices-bar a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.practices-bar a:focus-visible {
    outline-color: var(--white);
}

@media (min-width: 600px) {
    .practices-bar {
        font-size: 13px;
    }
}

/* ---------- Header ---------- */
.masthead {
    border-bottom: 1px solid var(--rule);
}

.masthead-bar {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 32px;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--navy);
    text-decoration: none;
}

.wordmark-inline {
    display: inline-flex;
}

/* margin-bottom matches the 5px gap + 3px rule under the practice name, so the mark
   centres on the letters rather than on the letters plus the rule (it sat 4px low) */
.wordmark-mark {
    display: block;
    width: 22px;
    height: auto;
    margin-bottom: 8px;
}

.wordmark-text {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.wordmark-firm {
    font-weight: 600;
}

.wordmark-practice {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}

.wordmark-rule {
    display: block;
    width: 36px;
    height: 3px;
    background: var(--gold);
}

.topnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 20px;
}

.topnav a {
    padding: 12px 0;
    color: var(--navy);
    text-decoration: none;
}

.topnav .topnav-email {
    padding: 11px 16px;
    border: 1px solid var(--navy);
}

/* Pinned from 740px; the header is one row from 690px, and the margin allows for wider system fonts.
   Below that it wraps to two rows and would take too much of a phone screen. */
@media (min-width: 740px) {
    .masthead {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        backdrop-filter: saturate(1.4) blur(10px);
    }

    section[id] {
        scroll-margin-top: 73px;
    }
}

/* ---------- Hero ---------- */
.intro {
    padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
}

.intro-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px clamp(40px, 5vw, 80px);
}

.intro-copy {
    flex: 5 1 480px;
    min-width: 0;
}

.intro-title {
    margin: 0;
    max-width: 14em;
    font-weight: 400;
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.intro-sub {
    margin: 32px 0 0;
    max-width: 34em;
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.5;
}

.intro-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    font-family: var(--sans);
    font-size: 16px;
}

.button-navy {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 22px;
    background: var(--navy);
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
}

.link-down {
    padding: 12px 0;
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Hero diagram: incoming work, AI then rules, routine work and exceptions */
.flow {
    flex: 4 1 360px;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    padding: clamp(20px, 3vw, 36px);
    background-color: var(--panel);
    background-image: radial-gradient(var(--rule) 1.2px, transparent 1.4px);
    background-size: 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-family: var(--sans);
    color: var(--navy);
}

.flow-inputs {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 8px;
}

.flow-inputs-label {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
}

.flow-arrow {
    align-self: center;
}

.flow-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-shaft {
    display: block;
    width: 2px;
    height: 22px;
    background: var(--navy);
}

.arrow-head {
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--navy);
}

.flow-engine {
    background: var(--white);
    border: 1px solid var(--navy);
    border-radius: 10px;
    padding: 16px;
}

.flow-engine-label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
}

.flow-stages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-stage {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flow-badge {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

/* Gold as a fill behind navy text, never as text on a light ground */
.flow-badge-ai {
    background: var(--gold);
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
}

.flow-badge-rule {
    border: 1.5px solid var(--navy);
}

.flow-stage-text {
    font-size: 14px;
    line-height: 1.35;
}

.flow-down {
    padding-left: 17px;
    font-size: 14px;
    line-height: 1;
}

.flow-outcome {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 14px;
}

.flow-outcome-title {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
}

.flow-outcome-note {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--grey);
}

/* ---------- Sections ---------- */
.strip {
    padding: var(--strip-pad) 0;
}

.strip-ruled {
    border-top: 1px solid var(--rule);
}

.strip-navy {
    background: var(--navy);
    color: var(--white);
}

.strip-grey {
    background: var(--panel);
}

/* The hero panel's dot grid, faint on navy */
.strip-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.4px);
    background-size: 20px 20px;
}

.section-title {
    margin: 0;
    font-weight: 400;
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

/* ---------- What we do ---------- */
.offer-grid {
    margin-top: var(--stack);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 40px clamp(32px, 4vw, 56px);
}

.offer {
    border-top: 1px solid var(--navy);
    padding-top: 24px;
}

.offer-title {
    margin: 18px 0 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
}

.offer-text {
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.6;
}

/* ---------- How we work ---------- */
.stage-list {
    list-style: none;
    margin: var(--stack) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 40px clamp(28px, 3vw, 40px);
}

.stage {
    position: relative;
    border-top: 1px solid var(--on-navy-rule);
    padding-top: 22px;
}

.stage-node {
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
}

.stage-num {
    display: block;
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
}

.stage-title {
    margin: 18px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.stage-text {
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--on-navy-text);
}

.stage-note {
    margin: var(--stack) 0 0;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--on-navy-text);
}

/* ---------- Ownership and data ---------- */
.ownership-list {
    list-style: none;
    margin: var(--stack) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 0 clamp(32px, 4vw, 56px);
}

.ownership-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border-top: 1px solid var(--rule);
    padding: 22px 0 28px;
    font-size: 19px;
    line-height: 1.5;
}

.ownership-icon {
    margin-top: -2px;
}

/* ---------- Perspectives ---------- */
.writing-list {
    list-style: none;
    margin: var(--stack) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px clamp(32px, 4vw, 56px);
}

.writing-item {
    border-top: 1px solid var(--navy);
}

.writing-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    color: var(--navy);
    text-decoration: none;
}

.writing-title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.writing-arrow {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 18px;
    color: var(--navy);
}

/* ---------- Contact ---------- */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px clamp(40px, 6vw, 96px);
}

.contact-title {
    flex: 1 1 480px;
    min-width: 0;
    font-size: clamp(32px, 3.8vw, 52px);
}

/* Gold fill with navy text (6.7:1), on the navy band */
.button-gold {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    background: var(--gold);
    color: var(--navy);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
}

/* ---------- Footer ---------- */
.page-footer {
    padding: 56px 0 28px;
    font-size: 15px;
    color: var(--grey);
}

.footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 36px clamp(32px, 4vw, 56px);
}

.footer-lead {
    flex: 2 1 260px;
    min-width: 0;
}

.footer-group {
    flex: 1 1 200px;
    min-width: 0;
}

.footer-heading {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-link {
    display: inline-block;
    padding: 11px 0;
    line-height: 1.4;
    color: var(--navy);
    text-decoration: none;
}

.footer-base {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    font-family: var(--sans);
    font-size: 13px;
}

.footer-base > * {
    padding: 12px 0;
}

.footer-base a {
    color: var(--navy);
    text-decoration: none;
}

/* ---------- Hover and focus (not shown in the static mockup) ---------- */
/* Gold underline that slides in from the left; gold here is decoration, the text stays navy */
.topnav a:not(.topnav-email),
.footer-link,
.footer-base a {
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size 0.3s ease;
}

.topnav a:not(.topnav-email) {
    background-position: 0 calc(100% - 10px);
}

.footer-link {
    background-position: 0 calc(100% - 8px);
}

.footer-base a {
    background-position: 0 calc(100% - 9px);
}

.topnav a:not(.topnav-email):hover,
.topnav a:not(.topnav-email):focus-visible,
.footer-link:hover,
.footer-link:focus-visible,
.footer-base a:hover,
.footer-base a:focus-visible {
    background-size: 100% 2px;
}

.topnav-email {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.topnav .topnav-email:hover {
    background: var(--navy);
    color: var(--white);
}

.button-navy,
.button-gold {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.button-navy:hover {
    background: color-mix(in srgb, var(--navy) 85%, var(--white));
    box-shadow: 0 10px 24px -12px rgba(17, 22, 40, 0.6);
}

.button-gold:hover {
    background: color-mix(in srgb, var(--gold) 85%, var(--white));
}

.link-down {
    transition: text-decoration-color 0.2s ease;
}

.link-down:hover {
    text-decoration-color: var(--navy);
}

.writing-title {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s ease;
}

.writing-link:hover .writing-title {
    text-decoration-color: var(--navy);
}

/* Navy ring on light grounds; gold on white is 2.7:1, below the 3:1 a focus indicator needs */
a:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.strip-navy a:focus-visible {
    outline-color: var(--gold);
}

/* ---------- Articles and 404 ---------- */
.kicker {
    margin: 0 0 20px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
}

.post-head {
    padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--rule);
}

.post-title {
    margin: 0;
    max-width: 20em;
    font-weight: 400;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.post-standfirst {
    margin: 24px 0 0;
    max-width: 34em;
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.5;
    color: var(--grey);
}

.post-byline {
    margin: 24px 0 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--grey);
}

.post-body {
    max-width: 38em;
    padding: clamp(40px, 5vw, 64px) 0 var(--strip-pad);
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.7;
}

.post-body p + p {
    margin-top: 1.2em;
}

.post-body h2 {
    margin: 44px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    font-size: clamp(20px, 2vw, 23px);
    font-weight: 600;
    line-height: 1.25;
}

/* ---------- 404: the request fails the rules check and becomes an exception ---------- */
.lost {
    padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 104px);
    /* The entrance animations start rotated or oversized; clip so they never cause sideways scrolling */
    overflow-x: clip;
}

.lost-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px clamp(40px, 5vw, 80px);
}

.lost-copy {
    flex: 5 1 420px;
    min-width: 0;
}

/* The error comes first and large, so nobody mistakes the page for content; the joke follows */
.lost-code {
    margin: 0;
    font-size: clamp(96px, 13vw, 168px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--navy);
}

.lost-code::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 20px;
    background: var(--gold);
}

.lost-title {
    margin: 24px 0 0;
    font-weight: 400;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.lost-quip {
    margin: 12px 0 0;
    max-width: 22em;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    color: var(--grey);
}

.lost-text {
    margin: 20px 0 0;
    max-width: 32em;
    font-size: 19px;
    line-height: 1.55;
}

/* The home page diagram's panel, in miniature */
.lost-flow {
    flex: 4 1 300px;
    min-width: 0;
    margin: 0;
    padding: clamp(24px, 3vw, 40px);
    background-color: var(--panel);
    background-image: radial-gradient(var(--rule) 1.2px, transparent 1.4px);
    background-size: 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--sans);
    color: var(--navy);
}

.lost-chip,
.lost-check,
.lost-exception {
    background: var(--white);
}

.lost-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.lost-arrow {
    position: relative;
    width: 2px;
    height: 30px;
    margin-bottom: 8px;
    background: var(--navy);
}

.lost-arrow::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: -8px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--navy);
}

.lost-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 14px;
    border: 1px solid var(--navy);
    border-radius: 10px;
    font-size: 14px;
}

.lost-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--navy);
    border-radius: 10px;
}

/* Flagged: a gold outline (decoration on white) */
.lost-exception {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 200px;
    padding: 14px 18px;
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 12px 26px -14px rgba(17, 22, 40, 0.45);
}

.lost-ex-title {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.lost-ex-note {
    font-size: 13px;
    color: var(--grey);
}

.lost-dot {
    display: none;
}

/* Plays once, in under four seconds: the request drops in, the check shakes its head, the exception lights up */
@keyframes lost-drop {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(30px); }
}

@keyframes lost-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes lost-flag {
    from {
        border-color: var(--rule);
        box-shadow: 0 0 0 0 rgba(17, 22, 40, 0);
        transform: scale(0.96);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lost-code,
    .lost-title,
    .lost-quip,
    .lost-text { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lost-title { animation-delay: 0.1s; }
    .lost-quip { animation-delay: 0.2s; }
    .lost-text { animation-delay: 0.3s; }
    .lost-chip { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
    .lost-check { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }

    .lost-dot {
        display: block;
        position: absolute;
        left: -2px;
        top: -3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        animation: lost-drop 0.8s ease-in 0.9s both;
    }

    .lost-dot-2 { animation-delay: 2.2s; }
    .lost-badge { animation: lost-shake 0.5s ease 1.75s both; }
    .lost-exception { animation: lost-flag 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 2.9s both; }
}

/* ==========================================================================
   Motion. Everything below is off for anyone whose device asks for reduced
   motion; they get the static page. No JavaScript (the CSP allows none):
   load sequences are timed CSS animations, reveals use scroll-driven
   animations where the browser supports them, and the diagram's pause
   control is a checkbox.
   ========================================================================== */

/* Decorative parts that exist only when motion is on */
.arrow-dot,
.flow-pause,
.flow-pause-button {
    display: none;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
}

@keyframes grow-down {
    from {
        transform: scaleY(0);
    }
}

@keyframes pop {
    from {
        transform: scale(0);
    }
}

@keyframes draw {
    from {
        stroke-dashoffset: 111;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes lift {
    from {
        box-shadow: 0 0 0 0 rgba(17, 22, 40, 0);
    }
    to {
        box-shadow: 0 10px 30px -18px rgba(17, 22, 40, 0.45);
    }
}

/* A gold marker runs along a rule, fading in and out at the ends */
@keyframes travel {
    0% { left: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: calc(100% - 7px); opacity: 0; }
}

@keyframes dots-drift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -60px;
    }
}

@keyframes parallax {
    to {
        transform: translateY(24px);
    }
}

/* Uncovers a rule left to right by shrinking a navy mask laid over it.
   The mask's resting state is scaleX(0), so if the animation never runs the rule still shows. */
@keyframes unmask {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Hero loop. One item every 6s: down the input arrow (0.9s), AI (0.9s),
   rules (0.9s), down an output arrow (0.9s), outcome highlighted (1.4s).
   The output steps run on an 18s cycle: two items to routine, then one to exceptions. */
@keyframes dot-in {
    0% { opacity: 0; transform: translateY(0); }
    2% { opacity: 1; }
    13% { opacity: 1; }
    15% { opacity: 0; transform: translateY(26px); }
    100% { opacity: 0; transform: translateY(26px); }
}

@keyframes dot-routine {
    0% { opacity: 0; transform: translateY(0); }
    0.67% { opacity: 1; }
    4.33% { opacity: 1; }
    5% { opacity: 0; transform: translateY(26px); }
    5.01% { transform: translateY(0); }
    33.33% { opacity: 0; transform: translateY(0); }
    34% { opacity: 1; }
    37.67% { opacity: 1; }
    38.33% { opacity: 0; transform: translateY(26px); }
    100% { opacity: 0; transform: translateY(26px); }
}

@keyframes dot-exception {
    0%, 66.67% { opacity: 0; transform: translateY(0); }
    67.33% { opacity: 1; }
    71% { opacity: 1; }
    71.67% { opacity: 0; transform: translateY(26px); }
    100% { opacity: 0; transform: translateY(26px); }
}

@keyframes pulse {
    0% { opacity: 0; transform: scale(1); }
    2% { opacity: 0.9; }
    15% { opacity: 0; transform: scale(1.45); }
    100% { opacity: 0; transform: scale(1.45); }
}

@keyframes card-routine {
    0% { opacity: 0; }
    1% { opacity: 1; }
    6% { opacity: 1; }
    8% { opacity: 0; }
    33.33% { opacity: 0; }
    34.33% { opacity: 1; }
    39.33% { opacity: 1; }
    41.33% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes card-exception {
    0%, 66.67% { opacity: 0; }
    67.67% { opacity: 1; }
    72.67% { opacity: 1; }
    74.67% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Hover movement ---------- */
    .button-navy {
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .button-navy:hover {
        transform: translateY(-1px);
    }

    .link-down > span {
        display: inline-block;
        transition: transform 0.25s ease;
    }

    .link-down:hover > span {
        transform: translateY(3px);
    }

    .writing-arrow {
        transition: transform 0.25s ease;
    }

    .writing-link:hover .writing-arrow {
        transform: translateX(6px);
    }

    /* ---------- Hero on load: copy settles, then the diagram assembles ---------- */
    .intro-title,
    .intro .intro-sub,
    .intro .intro-actions,
    .flow-inputs,
    .flow-engine,
    .flow-stage,
    .flow-outcome {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .intro .intro-sub { animation-delay: 0.1s; }
    .intro .intro-actions { animation-delay: 0.2s; }
    .flow-inputs { animation-delay: 0.35s; }
    .flow-engine { animation-delay: 0.8s; }
    .flow-stage:first-child { animation-delay: 1s; }
    .flow-stage:last-child { animation-delay: 1.25s; }
    .flow-outcome:first-child { animation-delay: 1.65s; }
    .flow-outcome:last-child { animation-delay: 1.75s; }

    .flow-down {
        animation: fade 0.4s ease 1.15s both;
    }

    .arrow-shaft {
        transform-origin: top;
        animation: grow-down 0.35s ease-out 0.6s both;
    }

    .arrow-head {
        animation: fade 0.25s ease 0.85s both;
    }

    .flow-pair .arrow-shaft { animation-delay: 1.45s; }
    .flow-pair .arrow-head { animation-delay: 1.7s; }

    /* ---------- Hero loop (starts at 2.4s, once the diagram is built) ---------- */
    .flow {
        position: relative;
    }

    .arrow {
        position: relative;
    }

    .arrow-dot {
        display: block;
        position: absolute;
        top: -3px;
        left: 50%;
        width: 6px;
        height: 6px;
        margin-left: -3px;
        border-radius: 50%;
        background: var(--gold);
        animation: dot-in 6s linear 2.4s infinite backwards;
    }

    .arrow-dot-routine { animation: dot-routine 18s linear 5.1s infinite backwards; }
    .arrow-dot-exception { animation: dot-exception 18s linear 5.1s infinite backwards; }

    .flow-badge {
        position: relative;
    }

    .flow-badge::after {
        content: "";
        position: absolute;
        inset: -2px;
        border: 2px solid var(--gold);
        border-radius: 12px;
        opacity: 0;
        animation: pulse 6s ease-out 3.3s infinite backwards;
    }

    .flow-badge-rule::after {
        border-color: var(--navy);
        animation-delay: 4.2s;
    }

    .flow-outcome {
        position: relative;
    }

    .flow-outcome::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 1px solid var(--navy);
        border-radius: 8px;
        box-shadow: 0 8px 20px -12px rgba(17, 22, 40, 0.55);
        opacity: 0;
        pointer-events: none;
    }

    .flow-outcome:first-child::after { animation: card-routine 18s ease-in-out 6s infinite backwards; }
    .flow-outcome:last-child::after { animation: card-exception 18s ease-in-out 6s infinite backwards; }

    /* Pause control: a checkbox, so it works without scripts and reads as a toggle */
    /* Visually hidden, but placed inside the button's area so focusing it never scrolls the page */
    .flow-pause {
        display: block;
        position: absolute;
        top: calc(100% + 26px);
        right: 16px;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Sits just under the diagram's bottom-right corner, in the hero's bottom padding
       (at least 56px), so it never covers the diagram at any width */
    .flow-pause-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 32px;
        height: 32px;
        border: 1px solid var(--rule);
        border-radius: 50%;
        background: var(--white);
        color: var(--grey);
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease;
        animation: fade 0.4s ease 2.4s both;
    }

    .flow-pause-button:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .flow-pause:focus-visible + .flow-pause-button {
        outline: 3px solid var(--navy);
        outline-offset: 2px;
    }

    .flow-play-icon,
    .flow-pause:checked + .flow-pause-button .flow-pause-icon {
        display: none;
    }

    .flow-pause:checked + .flow-pause-button .flow-play-icon {
        display: block;
    }

    .flow:has(.flow-pause:checked) .arrow-dot,
    .flow:has(.flow-pause:checked) .flow-badge::after,
    .flow:has(.flow-pause:checked) .flow-outcome::after {
        animation-play-state: paused;
    }

    /* ---------- Article heading on load ---------- */
    .post-head .kicker,
    .post-title,
    .post-standfirst,
    .post-byline {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .post-title { animation-delay: 0.08s; }
    .post-standfirst { animation-delay: 0.16s; }
    .post-byline { animation-delay: 0.24s; }
}

/* ---------- Reveals tied to scrolling ---------- */
/* Each element finishes arriving by the time it is a quarter of the way up the screen.
   Browsers without scroll-driven animations skip this block and show everything. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        .strip .section-title,
        .offer,
        .ownership-item,
        .writing-item,
        .stage-note,
        .contact-row > .button-gold {
            animation: rise linear both;
            animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
            animation-timeline: view();
            animation-range: cover 0% cover 22%;
        }

        .offer:nth-child(2),
        .writing-item:nth-child(2),
        .ownership-item:nth-child(even) {
            animation-range: cover 4% cover 26%;
        }

        .offer:nth-child(3),
        .writing-item:nth-child(3) {
            animation-range: cover 8% cover 30%;
        }

        /* Line icons draw themselves as their item arrives */
        .offer,
        .ownership-item {
            view-timeline: --item block;
        }

        .offer .icon *,
        .ownership-icon * {
            stroke-dasharray: 110;
            animation: draw linear both;
            animation-timeline: --item;
            animation-range: cover 4% cover 32%;
        }

        /* How we work: each step's rule draws across, then its gold node lands */
        .stage {
            view-timeline: --stage block;
            --lag: 0%;
            --seq: 0%;
        }

        .stage:nth-child(2) { --lag: 4%; --seq: 6%; }
        .stage:nth-child(3) { --lag: 8%; --seq: 12%; }
        .stage:nth-child(4) { --lag: 12%; --seq: 18%; }

        .stage::before {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--navy);
            transform: scaleX(0);
            transform-origin: right;
            animation: unmask linear both;
            animation-timeline: --stage;
            animation-range: cover var(--lag) cover calc(14% + var(--lag));
        }

        .stage-node {
            animation: pop linear both;
            animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1);
            animation-timeline: --stage;
            animation-range: cover calc(12% + var(--lag)) cover calc(18% + var(--lag));
        }

        .stage-num,
        .stage-title,
        .stage-text {
            animation: rise linear both;
            animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
            animation-timeline: --stage;
            animation-range: cover calc(4% + var(--lag)) cover calc(22% + var(--lag));
        }

        .stage-title {
            animation-range: cover calc(6% + var(--lag)) cover calc(24% + var(--lag));
        }

        .stage-text {
            animation-range: cover calc(8% + var(--lag)) cover calc(26% + var(--lag));
        }

        /* ...then a gold marker runs along each rule in turn, like the one in the hero diagram */
        .stage::after {
            content: "";
            position: absolute;
            top: -4px;
            left: 0;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
            opacity: 0;
            animation: travel linear both;
            animation-timeline: --stage;
            animation-range: cover calc(18% + var(--seq)) cover calc(24% + var(--seq));
        }

        /* Ruled lists: each rule draws across as its item arrives,
           by shrinking a mask the colour of the ground */
        .offer,
        .ownership-item,
        .writing-item {
            position: relative;
            view-timeline: --item block;
        }

        .offer::before,
        .ownership-item::before,
        .writing-item::before {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--white);
            transform: scaleX(0);
            transform-origin: right;
            animation: unmask linear both;
            animation-timeline: --item;
            animation-range: cover 0% cover 16%;
        }

        .writing-item::before {
            background: var(--panel);
        }

        .offer:nth-child(2)::before,
        .writing-item:nth-child(2)::before,
        .ownership-item:nth-child(even)::before {
            animation-range: cover 4% cover 20%;
        }

        .offer:nth-child(3)::before,
        .writing-item:nth-child(3)::before {
            animation-range: cover 8% cover 24%;
        }

        /* Gold line tracking progress down the page: under the pinned header,
           or along the top of the screen where the header is not pinned */
        .masthead::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 30;
            height: 2px;
            background: var(--gold);
            transform: scaleX(0);
            transform-origin: left;
            animation: progress linear both;
            animation-timeline: scroll(root block);
        }

        /* Contact band: the dot grid drifts as the band passes */
        .strip-dots {
            animation: dots-drift linear both;
            animation-timeline: view();
        }

        @media (min-width: 740px) {
            .masthead {
                animation: lift linear both;
                animation-timeline: scroll(root block);
                animation-range: 0px 160px;
            }

            .masthead::after {
                position: absolute;
                top: auto;
                bottom: -1px;
            }
        }

        /* Hero diagram falls behind the copy slightly as the hero leaves; side-by-side layout only.
           24px keeps the pause button inside the hero's bottom padding (70px at 1000px wide). */
        @media (min-width: 1000px) {
            .flow {
                animation: parallax linear both;
                animation-timeline: view();
                animation-range: exit 0% exit 100%;
            }
        }
    }
}