/* debuss-a.me
 *
 * One stylesheet for the whole site. The colour tokens come straight from the design handoff (tokens.css): every
 * colour below goes through them, nothing is hard-coded but --on-accent and --white, which are identical in both
 * themes on purpose.
 *
 * Rule that must never break: anything sitting on --accent or --coral uses color: var(--on-accent). Otherwise, in
 * dark mode, it inherits the light ink and turns unreadable.
 *
 * Single breakpoint: 760px.
 */

/* ------------------------------------------------------------------------------------------------------------
 * Fonts, self-hosted (no request to Google Fonts). The fallbacks are metric-matched to cut layout shift while the
 * web fonts load.
 * --------------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/archivo-latin-wght.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial'), local('Liberation Sans'), local('Helvetica');
    size-adjust: 102.16%;
    ascent-override: 85.94%;
    descent-override: 20.56%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'IBM Plex Mono Fallback';
    src: local('Courier New'), local('Liberation Mono'), local('Courier');
    size-adjust: 99.98%;
    ascent-override: 102.52%;
    descent-override: 27.5%;
    line-gap-override: 0%;
}

/* ------------------------------------------------------------------------------------------------------------
 * Tokens
 * --------------------------------------------------------------------------------------------------------- */

:root {
    --bg: #F6F7F3;        /* page background */
    --paper: #FFFFFF;     /* cards, labels, chips */
    --band: #ECEEE7;      /* full-width bands */
    --ink: #1A1D21;       /* text, 2px borders, hard shadows */
    --soft: #353B41;      /* body copy */
    --muted: #555C63;     /* secondary labels */
    --accent: #C6F24E;    /* lime: highlights, primary buttons, "current/delivered" */
    --coral: #FF7A5C;     /* coral: returns, incidents, "open/damaged" */
    --on-accent: #1A1D21; /* text on lime or coral, identical in both themes */
    --white: #FFFFFF;     /* the ID card and the button text inside the lime contact block, identical in both themes */

    --sans: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, monospace;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #14191D;
    --paper: #1D252B;
    --band: #192026;
    --ink: #ECF0EC;
    --soft: #C9D1D4;
    --muted: #A3ADB2;
    color-scheme: dark;
}

/* No JS and no stored choice: follow the system. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #14191D;
        --paper: #1D252B;
        --band: #192026;
        --ink: #ECF0EC;
        --soft: #C9D1D4;
        --muted: #A3ADB2;
        color-scheme: dark;
    }
}

/* ------------------------------------------------------------------------------------------------------------
 * Base
 * --------------------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

a { color: inherit; }
a:hover { opacity: .8; }

img { max-width: 100%; }

h1, h2, h3, h4, p { margin: 0; }

.mono { font-family: var(--mono); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The page frame: header, main, footer. The column keeps the footer down on short pages (errors). */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page > main { flex: 1 0 auto; }

.wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* Turbo's progress bar, in the site colours. */
.turbo-progress-bar { height: 4px; background: var(--accent); }

/* ------------------------------------------------------------------------------------------------------------
 * Skip link
 * --------------------------------------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------------------------------------------------------
 * Header and footer
 * --------------------------------------------------------------------------------------------------------- */

.site-header {
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
}

.brand__mark {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-family: var(--mono);
    font-size: 14px;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.site-nav__link {
    padding: 10px 12px;
    border: 2px solid transparent;
    text-decoration: none;
}

.site-nav__link[aria-current="page"] {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--ink);
    font-weight: 600;
}

.theme-toggle {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    cursor: pointer;
}

.theme-toggle svg { display: block; }

.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: inline-flex; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* Without JS the toggle cannot work: hide it rather than show a dead button. */
:root:not([data-theme]) .theme-toggle { display: none; }

.hire-link {
    padding: 10px 16px;
    background: var(--ink);
    color: var(--bg);
    border: 2px solid var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.site-header__aside {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.site-footer {
    padding-bottom: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

/* ------------------------------------------------------------------------------------------------------------
 * Type
 * --------------------------------------------------------------------------------------------------------- */

.display {
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
}

.display--home { font-size: 5.8rem; }
.display--page { font-size: 5.2rem; }
.display--error { font-size: 5.4rem; }
.display--note { font-size: 3.6rem; line-height: 1.02; letter-spacing: -.03em; }

.h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.h2--xl { font-size: 54px; line-height: 1; letter-spacing: -.03em; }
.h2--lg { font-size: 50px; }
.h2--md { font-size: 44px; letter-spacing: -.02em; }
.h2--sm { font-size: 36px; letter-spacing: -.02em; }
.h2--xs { font-size: 34px; letter-spacing: -.02em; }

.h3 { font-size: 23px; font-weight: 800; line-height: 1.2; }
.h3--lg { font-size: 30px; line-height: 1.15; letter-spacing: -.015em; }

.lead { max-width: 600px; font-size: 20px; color: var(--soft); }
.intro { max-width: 640px; font-size: 21px; color: var(--soft); }
.soft { color: var(--soft); }
.muted { color: var(--muted); }

.kicker {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.kicker--muted { color: var(--muted); }

.text-link {
    align-self: flex-start;
    padding: 10px 0;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}

/* Animated lime highlight on a word of the home title. */
.hl {
    padding: 0 .12em;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: var(--on-accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: draw .9s cubic-bezier(.6, 0, .2, 1) .3s both;
}

@keyframes draw {
    from { background-size: 0% 100%; }
    to { background-size: 100% 100%; }
}

/* ------------------------------------------------------------------------------------------------------------
 * Small parts: flags, tags, chips, buttons, rules
 * --------------------------------------------------------------------------------------------------------- */

/* Mono strip on coral: "OPEN TO FREELANCE", "EXCEPTION · 404". */
.flag {
    display: inline-block;
    padding: 5px 10px;
    background: var(--coral);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

/* Small inline tag inside a card header. */
.tag {
    padding: 0 6px;
    background: var(--accent);
    color: var(--on-accent);
}

.tag--outline {
    background: transparent;
    color: inherit;
    border: 2px solid var(--ink);
}

.tag--coral {
    padding: 4px 8px;
    background: var(--coral);
    color: var(--on-accent);
    font-weight: 600;
}

.chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--mono);
    font-size: 13px;
}

.chips--lg { font-size: 14px; }

.chip {
    display: block;
    padding: 4px 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    text-decoration: none;
}

.chip--sm { padding: 3px 9px; }

.chip--hl {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 15px 24px;
    border: 2px solid var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 5px 5px 0 var(--ink);
}

.btn--secondary {
    background: var(--paper);
    color: var(--ink);
}

/* "BUILD & RUN ———————— 05" */
.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.divider__rule { flex: 1 1 auto; border-top: 2px solid var(--ink); }
.divider__count { color: var(--muted); }

/* "Experience ————————" */
.rule-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rule-head::after {
    content: '';
    flex: 1 1 auto;
    border-top: 2px solid var(--ink);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    align-items: baseline;
    justify-content: space-between;
}

/* Marching dashed line: returns travelling back, the road from Bangkok. */
.ants {
    height: 4px;
    background-image: repeating-linear-gradient(90deg, var(--coral) 0 12px, transparent 12px 20px);
    background-size: 40px 4px;
    animation: ants 1.4s linear infinite;
}

.ants--ink {
    height: 3px;
    background-image: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
    background-size: 40px 3px;
}

@keyframes ants { to { background-position: -40px 0; } }

/* Labels lean a little. Never on mobile. */
.tilt { transform: rotate(var(--tilt, -2deg)); }
.tilt--l1 { --tilt: -1deg; }
.tilt--r1 { --tilt: 1deg; }
.tilt--r2 { --tilt: 2deg; }

/* Clickable cards lift on hover. */
.hop { transition: transform .15s ease, box-shadow .15s ease; }
.hop:hover { transform: translate(-3px, -3px); opacity: 1; }

/* ------------------------------------------------------------------------------------------------------------
 * Sections
 * --------------------------------------------------------------------------------------------------------- */

.section {
    padding-top: 104px;
    padding-bottom: 104px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section--flush { padding-top: 0; }
.section--end { padding-top: 0; padding-bottom: 96px; }
.section--gap-24 { gap: 24px; }
.section--gap-28 { gap: 28px; }
.section--gap-36 { gap: 36px; }

.band {
    background: var(--band);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.band__inner {
    padding-top: 88px;
    padding-bottom: 88px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.band__inner--tight { gap: 32px; }

.section-intro {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-intro p { font-size: 20px; color: var(--soft); }

/* Hero of the inner pages. */
.page-hero {
    padding-top: 56px;
    padding-bottom: 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 64px;
    align-items: flex-end;
    justify-content: space-between;
}

.page-hero__copy {
    flex: 1 1 560px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ------------------------------------------------------------------------------------------------------------
 * Home: hero
 * --------------------------------------------------------------------------------------------------------- */

.hero {
    padding-top: 72px;
    padding-bottom: 104px;
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    align-items: center;
}

.hero__copy {
    flex: 1 1 560px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.hero__label {
    flex: 1 1 360px;
    display: flex;
    justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------------
 * Parcel label: a header strip, then rows split by 2px borders.
 * Home hero (flippable), error pages.
 * --------------------------------------------------------------------------------------------------------- */

.parcel {
    width: 100%;
    max-width: 400px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    font-family: var(--mono);
    font-size: 14px;
}

.parcel--incident { box-shadow: 8px 8px 0 var(--coral); }

[data-face][hidden] { display: none !important; }

.flip { animation: flipin .45s cubic-bezier(.2, .7, .2, 1); }

@keyframes flipin {
    from { transform: perspective(900px) rotateY(75deg); opacity: .3; }
    to { opacity: 1; }
}

.strip {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    font-family: var(--mono);
    font-weight: 600;
}

.strip--accent { background: var(--accent); color: var(--on-accent); border-bottom: 2px solid var(--ink); }
.strip--ink { background: var(--ink); color: var(--paper); }
.strip--coral { background: var(--coral); color: var(--on-accent); border-bottom: 2px solid var(--ink); }
.strip--wide { padding-left: 20px; padding-right: 20px; font-size: 13px; }

.parcel__row {
    padding: 12px 16px;
    border-bottom: 2px solid var(--ink);
}

.parcel__split {
    display: flex;
    border-bottom: 2px solid var(--ink);
}

.parcel__split > * { flex: 1 1 50%; padding: 12px 16px; }
.parcel__split > * + * { border-left: 2px solid var(--ink); }

.parcel__key { font-size: 11px; color: var(--muted); }

.parcel__big {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 18px;
}

.parcel__strong { font-weight: 600; }

.parcel__slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.barcode {
    height: 48px;
    background: repeating-linear-gradient(90deg,
        var(--ink) 0 3px, var(--paper) 3px 5px, var(--ink) 5px 6px,
        var(--paper) 6px 9px, var(--ink) 9px 13px, var(--paper) 13px 15px);
}

.parcel__foot {
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.parcel__caption {
    text-align: center;
    letter-spacing: .3em;
    font-size: 12px;
}

.parcel__button {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    border: 0;
    border-top: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Back face */
.parcel__status {
    padding: 16px;
    border-bottom: 2px solid var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parcel__headline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
}

.square {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 2px solid var(--ink);
}

.square--off { background: var(--paper); }

.parcel__actions { display: flex; }

.parcel__book {
    flex: 1 1 auto;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    border-right: 2px solid var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.parcel__actions .parcel__button {
    flex: 0 0 auto;
    width: auto;
    padding: 0 16px;
    border-top: 0;
}

/* Tracking steps */
.track {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.track li {
    display: flex;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 2px solid var(--ink);
}

.track__when { flex: 0 0 52px; font-weight: 600; }

.track--steps li { padding: 12px 16px; }
.track--steps .track__when { flex-basis: 22px; }

.track .is-current { background: var(--accent); color: var(--on-accent); }
.track .is-alert { background: var(--coral); color: var(--on-accent); }

/* ------------------------------------------------------------------------------------------------------------
 * Home: home ground band, the order flow
 * --------------------------------------------------------------------------------------------------------- */

.band__lede {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: center;
}

.band__lede p {
    flex: 1 1 480px;
    max-width: 680px;
    font-size: 18px;
    color: var(--soft);
}

.route {
    flex: 0 1 380px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.route__stop {
    padding: 6px 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    white-space: nowrap;
}

.route__stop--here { background: var(--accent); color: var(--on-accent); }

.route__road { flex: 1 1 60px; border-top: 3px dashed var(--ink); }
.route__road.ants--ink { border-top: 0; }

.flow {
    display: flex;
    align-items: center;
}

.flow__box {
    flex: 1 1 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration: none;
}

.flow__kind {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

.flow__name { font-weight: 800; font-size: 21px; line-height: 1.3; }

.conn {
    flex: 0 1 110px;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 12px;
}

.conn__line {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10px;
    background: var(--accent);
    border: 2px solid var(--ink);
}

.packet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 35%;
    background: var(--ink);
    animation: packet 2.4s linear infinite;
}

.packet--d1 { animation-delay: .45s; }
.packet--d2 { animation-delay: .9s; }

@keyframes packet {
    0% { left: -35%; }
    55%, 100% { left: 105%; }
}

.returns {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 13px;
}

.returns .ants { flex: 1 1 auto; }

.statement {
    max-width: 900px;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.28;
    letter-spacing: -.01em;
}

/* ------------------------------------------------------------------------------------------------------------
 * Cards: services, incident, toolbox ledger
 * --------------------------------------------------------------------------------------------------------- */

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.cards--20 { gap: 20px; }
.cards--16 { gap: 16px; }

.card-head {
    display: flex;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 16px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.svc-card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
}

.svc-card:target { outline: 4px solid var(--coral); outline-offset: 6px; }

.svc-card__body {
    padding: 20px 18px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svc-card__body p { color: var(--soft); }

.incident {
    display: flex;
    flex-wrap: wrap;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--coral);
}

.incident__tag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: var(--coral);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.incident__body {
    flex: 1 1 420px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.incident__body p { color: var(--soft); }

.ledger {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
}

.ledger__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    padding: 20px 24px;
}

.ledger__row + .ledger__row { border-top: 2px solid var(--ink); }

.ledger__label {
    flex: 0 0 230px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.ledger__row .chips { flex: 1 1 400px; }

/* ------------------------------------------------------------------------------------------------------------
 * Project rows: tag, title, description, ↗
 * --------------------------------------------------------------------------------------------------------- */

.rows {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--ink);
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 2px solid var(--ink);
    text-decoration: none;
}

.row--compact { gap: 12px 32px; padding: 24px 0; }

.row__tag {
    flex: 0 0 auto;
    padding: 4px 8px;
    background: var(--paper);
    border: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}

.row__tag--hl { background: var(--accent); color: var(--on-accent); }
.row__tag--transit { background: transparent; border: 2px dashed var(--coral); }

.row__title {
    flex: 1 1 320px;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
}

.row__title--mono {
    flex-basis: 260px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
}

.row__text { flex: 2 1 360px; color: var(--soft); }
.row--compact .row__text { flex-basis: 420px; }

.row__arrow { font-size: 24px; }

/* ------------------------------------------------------------------------------------------------------------
 * Home: contact block
 * --------------------------------------------------------------------------------------------------------- */

.contact { padding-bottom: 80px; }

.contact__card {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    align-items: center;
    padding: 64px 56px;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

/* On lime, the dark-mode ink outline would vanish. */
.contact__card :focus-visible { outline-color: var(--on-accent); }

.idcard {
    flex: 0 0 220px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 2px solid var(--on-accent);
    box-shadow: 6px 6px 0 var(--on-accent);
    font-family: var(--mono);
    font-size: 12px;
}

/* Duotone: ink on lime, done in CSS so it follows the accent colour. */
.duotone {
    position: relative;
    height: 200px;
    overflow: hidden;
    isolation: isolate;
    background: var(--accent);
    border: 2px solid var(--on-accent);
}

.duotone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2) brightness(1.08);
    mix-blend-mode: multiply;
}

.duotone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--on-accent);
    mix-blend-mode: lighten;
}

.idcard__foot {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--on-accent);
}

.contact__copy {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact__copy p { max-width: 600px; font-size: 18px; }

.contact__actions { gap: 12px; }

.btn--dark {
    background: var(--on-accent);
    color: var(--white);
    border-color: var(--on-accent);
}

.contact__link {
    padding: 12px 8px;
    color: var(--on-accent);
    font-weight: 700;
}

/* ------------------------------------------------------------------------------------------------------------
 * Résumé: timeline of missions
 * --------------------------------------------------------------------------------------------------------- */

.timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mission {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.mission__rail {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}

.station {
    width: 20px;
    height: 20px;
    background: var(--paper);
    border: 3px solid var(--ink);
}

.station--current { background: var(--accent); }

.mission__line {
    flex: 1 1 auto;
    margin-left: 9px;
    border-left: 3px solid var(--ink);
}

.mission__card {
    flex: 1 1 600px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
}

.mission__card .card-head { flex-wrap: wrap; padding: 10px 20px; }

.mission__body {
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mission__summary { max-width: 760px; font-size: 18px; color: var(--soft); }

.subcard {
    flex: 1 1 280px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 2px solid var(--ink);
}

.subcard h4 { font-size: 19px; font-weight: 800; line-height: 1.25; }
.subcard p { font-size: 16px; color: var(--soft); }

.worked {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding-top: 6px;
}

.worked__label {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

/* "Elsewhere" tiles */
.tile {
    flex: 1 1 260px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration: none;
}

.tile__kind {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.tile__value { font-weight: 800; font-size: 19px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------------------------------------------------
 * Projects: case files, modules, sealed parcel
 * --------------------------------------------------------------------------------------------------------- */

.cases {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: stretch;
}

.case {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

.case__title {
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 2px solid var(--ink);
}

.case__title h3 { line-height: 1.12; }

.case__context {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.case__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 16px 20px;
    border-bottom: 2px solid var(--ink);
}

.case__key {
    flex: 0 0 120px;
    padding-top: 3px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.case__row p { flex: 1 1 280px; }

.bar-link {
    margin-top: auto;
    min-height: 52px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.bar-link--accent {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 14px;
}

.module {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    text-decoration: none;
}

a.module { box-shadow: 4px 4px 0 var(--ink); }

.module .card-head { padding: 8px 14px; font-size: 12px; }

.module__body {
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.module__name { font-weight: 800; font-size: 20px; line-height: 1.2; }

.band__note { max-width: 520px; color: var(--soft); }

.sealed {
    display: flex;
    flex-wrap: wrap;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--coral);
}

.sealed__tag {
    flex: 0 0 auto;
    min-width: 180px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    background: var(--coral);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.sealed__body {
    flex: 1 1 520px;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sealed__body p { max-width: 760px; font-size: 18px; color: var(--soft); }
.sealed__body strong { color: var(--ink); }

/* ------------------------------------------------------------------------------------------------------------
 * Notes
 * --------------------------------------------------------------------------------------------------------- */

.notes-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: center;
}

.notes-list {
    flex: 1 1 520px;
    max-width: 680px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.notes-list > li:nth-child(even) .tilt { --tilt: 1deg; }

.note-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

/* Still being written: dashed lines all the way. */
.note-card--transit,
.note-card--transit .note-card__body,
.note-card--transit .note-card__cells,
.note-card--transit .note-card__cells > * + * { border-style: dashed; }

.note-card__body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 2px solid var(--ink);
}

.note-card__status {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.note-card__title {
    font-weight: 800;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.note-card__title a { text-decoration: none; }

.note-card__body p:last-child { font-size: 18px; color: var(--soft); }

.note-card__cells {
    display: flex;
    border-bottom: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 14px;
}

.note-card__cells > * { flex: 1 1 50%; padding: 12px 20px; }
.note-card__cells > * + * { border-left: 2px solid var(--ink); }

.note-card__cell--alert { background: var(--coral); color: var(--on-accent); }
.note-card__cell--alert .parcel__key { color: var(--on-accent); }

.notes-aside {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notes-aside p:not(.kicker) { font-size: 18px; color: var(--soft); }

/* A single note */
.article {
    padding-top: 56px;
    padding-bottom: 104px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.article__head {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.prose {
    max-width: 68ch;
    font-size: 18px;
    color: var(--soft);
}

.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3 {
    margin-top: 1.8em;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.prose h2 { font-size: 30px; }
.prose h3 { font-size: 23px; }

.prose strong { color: var(--ink); }

.prose ul,
.prose ol { padding-left: 1.3em; }

.prose li + li { margin-top: .4em; }

.prose code {
    padding: 1px 5px;
    background: var(--band);
    border: 1px solid var(--muted);
    font-family: var(--mono);
    font-size: .85em;
    color: var(--ink);
}

.prose pre {
    padding: 18px 20px;
    overflow-x: auto;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    font-size: 14px;
    line-height: 1.55;
}

.prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }

.prose blockquote {
    margin-left: 0;
    padding-left: 18px;
    border-left: 4px solid var(--ink);
}

.prose hr { border: 0; border-top: 2px solid var(--ink); }

.note-cta {
    max-width: 68ch;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
}

.note-cta p { font-size: 18px; color: var(--soft); }

/* ------------------------------------------------------------------------------------------------------------
 * Error pages (the 500 carries its own copy of what it needs, inline)
 * --------------------------------------------------------------------------------------------------------- */

.error {
    padding-top: 56px;
    padding-bottom: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    align-items: center;
    /* The stamp lands from scale(1.6): keep it from scrolling the page sideways on its way down. */
    overflow-x: clip;
}

.error__copy {
    flex: 1 1 520px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.error__copy .lead { max-width: 540px; }

.error__label {
    position: relative;
    flex: 1 1 360px;
    display: flex;
    justify-content: center;
}

/* The only round thing on the site: a rubber stamp. */
.stamp {
    position: absolute;
    top: -18px;
    right: 4px;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--paper);
    border: 4px solid var(--coral);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transform: rotate(-10deg);
    animation: stamp .5s cubic-bezier(.3, 1.4, .5, 1) .4s both;
}

@keyframes stamp {
    0% { transform: scale(1.6) rotate(-18deg); opacity: 0; }
    70% { transform: scale(.95) rotate(-10deg); opacity: 1; }
    100% { transform: scale(1) rotate(-10deg); }
}

/* ------------------------------------------------------------------------------------------------------------
 * Small screens
 * --------------------------------------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .wrap { padding-left: 20px; padding-right: 20px; }

    /* Compact header, no burger. Row 1: name, theme toggle. Row 2: the three links across the full width.
       The <nav> steps aside (display: contents) so its children join the header grid; the DOM order, hence the
       keyboard order, stays name → links → theme. "Hire me" goes: the hero's "Send me the details" takes over. */
    .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px 12px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .site-nav { display: contents; }
    .brand { font-size: 18px; }
    .theme-toggle { grid-column: 2; grid-row: 1; }

    .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 -12px;
    }

    .hire-link { display: none; }

    /* Error pages: their header aside takes the second row, like the links do elsewhere. */
    .site-header__aside { grid-column: 1 / -1; }

    .display--home { font-size: 3.1rem; }
    .display--page { font-size: 3.2rem; }
    .display--error { font-size: 3rem; }
    .display--note { font-size: 2.4rem; }

    .h2--xl { font-size: 40px; }
    .h2--lg { font-size: 40px; }
    .h2--md { font-size: 36px; }
    .statement { font-size: 26px; }
    .note-card__title { font-size: 28px; }

    .tilt { transform: none; }

    .flow { flex-direction: column; align-items: stretch; }
    .flow > a { flex: 0 0 auto; }
    .conn { min-height: 48px; }
    .conn__line { width: 8px; height: 48px; }

    .mission__rail { display: none; }

    .contact__card { padding: 40px 24px; }
    .idcard { flex-basis: 200px; }

    .incident__tag,
    .sealed__tag { flex-basis: 100%; }
}

/* ------------------------------------------------------------------------------------------------------------
 * Reduced motion: everything stops, in its final state.
 * --------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hl,
    .packet,
    .ants,
    .flip,
    .stamp { animation: none !important; }

    .hl { background-size: 100% 100%; }
    .packet { display: none; }
    .hop { transition: none; }
}