@charset "UTF-8";

/* =========================================================================
   huruphansen.dk

   The page is a drawing sheet. Everything structural borrows from technical
   drafting: a ruled grid that never goes away, a sheet border in the margins,
   figure callouts instead of headings-in-a-vacuum, and — the one element the
   site is built around — real dimension lines that measure something true.

   Two inks, two jobs:
     cyanotype blue  construction. Rules, links, the drawing itself.
     redline         annotation. What a reviewer marks on top of a drawing.

   Hand written, no framework, no build step.
   ========================================================================= */

/* ------------------------------------------------------------- 1. tokens */

:root {
    /* Drafting vellum: warm enough to read as paper, grey-green enough not
       to be cream. The blue ink is cool, and the contrast is the point. */
    --paper: #f2f3ef;
    --paper-lift: #fbfbf9;
    --paper-deep: #e8eae4;

    --ink: #10161c;
    --ink-2: #4c5866;
    --ink-3: #8a94a0;

    --line: #c9cec6;
    --line-soft: #dcdfd8;

    --blue: #14509e;
    --blue-deep: #0e3a74;
    --blue-wash: rgba(20, 80, 158, 0.07);

    --redline: #c8442a;
    --redline-wash: rgba(200, 68, 42, 0.08);

    --grid-minor: rgba(16, 22, 28, 0.04);
    --grid-major: rgba(16, 22, 28, 0.072);

    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --sheet: 1140px;
    --gutter: clamp(1.25rem, 5vw, 3.25rem);
    --section-pad: clamp(3.75rem, 8vw, 7rem);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- 2. base */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--paper);
    /* The ruled sheet: 24px minor squares, a heavier line every 120px. */
    background-image:
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
        linear-gradient(var(--grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

a:hover {
    color: var(--blue-deep);
}

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

/* Anchored case studies must clear the sticky masthead. */
[id] {
    scroll-margin-top: 5.5rem;
}

::selection {
    background: var(--blue);
    color: #fff;
}

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The sheet border: two hairlines down the margins of the drawing. Fixed,
   so they frame the viewport the way a border frames a sheet. */
.sheet-frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.sheet-frame span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    opacity: 0.75;
}

.sheet-frame span:first-child {
    left: max(var(--gutter), calc(50% - var(--sheet) / 2));
}

.sheet-frame span:last-child {
    right: max(var(--gutter), calc(50% - var(--sheet) / 2));
}

@media (max-width: 900px) {
    .sheet-frame {
        display: none;
    }
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 60;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}

.skip:focus {
    left: 0;
}

/* ------------------------------------------------------------- 3. layout */

.wrap {
    width: 100%;
    max-width: var(--sheet);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}

/* Top padding only, so two stacked sections do not add up to a chasm.
   The last section on the page pays for the bottom gap. */
.section {
    padding-block-start: var(--section-pad);
}

.section--tight {
    padding-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* The gap before the footer is the footer's own margin, so it works whatever
   the last section on the page happens to be. */

.section--rule {
    border-top: 1px solid var(--line-soft);
}

.lede {
    font-size: clamp(1.0625rem, 1.55vw, 1.28rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 60ch;
}

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

.prose {
    max-width: 68ch;
    color: var(--ink-2);
}

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

/* -------------------------------------------- 4. drafting primitives */

/* Annotation type. Every label, caption and measurement on the sheet. */
.anno {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.anno--red {
    color: var(--redline);
}

.anno--blue {
    color: var(--blue);
}

.anno--ink {
    color: var(--ink);
}

/* Eyebrow with a redline dot — the mark a reviewer leaves on a drawing. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--redline);
    border-radius: 50%;
    flex: none;
}

/* Figure callout: FIG. 03 · YDELSER ───────────────────────────────── */
.fig {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fig__id {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--redline);
    flex: none;
}

.fig__label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
    flex: none;
}

.fig__rule {
    flex: 1;
    height: 1px;
    background: var(--line);
    min-width: 1.5rem;
}

/* ---- The signature: a dimension line that measures something real ---- */
.dim {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dim__bound {
    color: var(--ink);
    font-weight: 600;
    flex: none;
}

.dim__rule {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The measured line itself. Draws in on load. */
.dim__rule::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    animation: draw 1s var(--ease) 0.15s forwards;
}

/* Extension ticks at each terminator. */
.dim__tick {
    position: relative;
    z-index: 1;
    flex: none;
    width: 1px;
    height: 15px;
    background: var(--blue);
}

/* Drafting convention: the measurement breaks the line it sits on. */
.dim__value {
    position: relative;
    z-index: 1;
    padding-inline: 0.95rem;
    background: var(--paper);
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation: fade-in 0.45s var(--ease) 0.75s forwards;
}

@keyframes draw {
    to {
        transform: scaleX(1);
    }
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Crop marks: L-brackets on opposing corners instead of a full box. */
.tickbox {
    position: relative;
}

.tickbox::before,
.tickbox::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-color: var(--line);
    border-style: solid;
    border-width: 0;
    transition: width 0.3s var(--ease), height 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.tickbox::before {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
}

.tickbox::after {
    right: 0;
    bottom: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

.tickbox:hover::before,
.tickbox:hover::after {
    width: 26px;
    height: 26px;
    border-color: var(--blue);
}

/* A drawn panel: flat paper, hairline, no radius. Nothing on this sheet
   has rounded corners — drawings do not. */
.plate {
    background: var(--paper-lift);
    border: 1px solid var(--line-soft);
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    position: relative;
    transition: border-color 0.25s var(--ease);
}

.plate:hover {
    border-color: var(--line);
}

.plate__index {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-3);
}

/* --------------------------------------------------------- 5. buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.9rem 1.5rem;
    border: 1px solid var(--blue);
    text-decoration: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.btn--solid {
    background: var(--blue);
    color: var(--paper-lift);
}

.btn--solid:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: var(--paper-lift);
}

.btn--ghost {
    background: transparent;
    color: var(--blue);
    border-color: var(--line);
}

.btn--ghost:hover {
    border-color: var(--blue);
    color: var(--blue-deep);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* An arrow link that draws its own rule on hover. */
.arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blue);
    padding-bottom: 3px;
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size 0.35s var(--ease);
}

.arrow:hover {
    background-size: 100% 1px;
}

.arrow span:last-child {
    transition: transform 0.25s var(--ease);
}

.arrow:hover span:last-child {
    transform: translateX(3px);
}

/* ---------------------------------------------------------- 6. header */

.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 4.25rem;
}

.mark {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--ink);
    flex: none;
}

.mark__name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}

.mark__rule {
    display: none;
    width: 26px;
    height: 1px;
    background: var(--line);
    align-self: center;
}

.mark__role {
    display: none;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

@media (min-width: 700px) {
    .mark__rule,
    .mark__role {
        display: block;
    }
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav__link {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-2);
    position: relative;
    padding-block: 0.35rem;
    transition: color 0.2s var(--ease);
}

.nav__link:hover {
    color: var(--ink);
}

.nav__link[aria-current="page"] {
    color: var(--ink);
}

.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--redline);
}

.lang {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    border: 1px solid var(--line);
    padding: 0.35rem 0.6rem;
}

.lang__on {
    color: var(--ink);
}

.lang__sep {
    color: var(--line);
}

.lang__off {
    color: var(--ink-3);
    text-decoration: none;
}

.lang__off:hover {
    color: var(--blue);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--line);
    padding: 0.5rem 0.7rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper-lift);
        border-bottom: 1px solid var(--line);
        padding: 0.5rem var(--gutter) 1.25rem;
    }

    .nav[data-open="true"] {
        display: flex;
    }

    .nav__link {
        padding-block: 0.85rem;
        border-bottom: 1px solid var(--line-soft);
        font-size: 0.75rem;
    }

    .nav__link[aria-current="page"]::after {
        display: none;
    }

    .nav__link[aria-current="page"] {
        color: var(--redline);
    }
}

/* ------------------------------------------------------------ 7. hero */

/* No bottom padding: the section that follows brings its own top padding,
   and doubling them opens a gap you could park a car in. */
.hero {
    padding-block: clamp(3.5rem, 9vw, 7.5rem) 0;
}

.hero__eyebrow {
    animation: rise 0.6s var(--ease) both;
}

.hero__title {
    margin-top: 1.5rem;
    font-size: clamp(2.35rem, 6.4vw, 4.6rem);
    line-height: 1.015;
    letter-spacing: -0.032em;
    max-width: 17ch;
    animation: rise 0.7s var(--ease) 0.08s both;
}

.hero__title em {
    font-style: normal;
    color: var(--blue);
    display: block;
}

.hero__lead {
    margin-top: 1.75rem;
    max-width: 58ch;
    font-size: clamp(1.0625rem, 1.6vw, 1.28rem);
    line-height: 1.55;
    color: var(--ink-2);
    animation: rise 0.7s var(--ease) 0.16s both;
}

.hero__actions {
    margin-top: 2.25rem;
    animation: rise 0.7s var(--ease) 0.24s both;
}

.hero__dim {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.hero__note {
    margin-top: 1.5rem;
    max-width: 54ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-3);
    border-left: 1px solid var(--redline);
    padding-left: 1rem;
}

/* Metrics read as a row of dimensioned values under the drawing. */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin-top: 2.5rem;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}

.metric {
    background: var(--paper);
    padding: 1.25rem 1.25rem 1.35rem;
}

.metric__value {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
}

.metric__value--sm {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    letter-spacing: -0.01em;
    padding-block: 0.4rem 0.35rem;
}

.metric__label {
    margin-top: 0.6rem;
    display: block;
}

/* ---------------------------------------------------- 8. page headers */

.pagehead {
    padding-block: clamp(3rem, 7vw, 5.5rem) 0;
}

.pagehead__title {
    margin-top: 1.35rem;
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.pagehead__lead {
    margin-top: 1.5rem;
}

/* -------------------------------------------------------- 9. sections */

.split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: start;
    }
}

.section__title {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: -0.028em;
    max-width: 20ch;
}

/* Scope: two columns, one drawn in blue, one struck through in redline. */
.scope {
    display: grid;
    gap: 1px;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}

@media (min-width: 800px) {
    .scope {
        grid-template-columns: 1fr 1fr;
    }
}

.scope__col {
    background: var(--paper-lift);
    padding: clamp(1.35rem, 2.5vw, 1.9rem);
}

.scope__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
}

.scope__list {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.8rem;
}

.scope__item {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.65rem;
    font-size: 0.9688rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.scope__item::before {
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.scope__col--in .scope__item::before {
    content: "+";
    color: var(--blue);
}

.scope__col--out .scope__item::before {
    content: "×";
    color: var(--redline);
}

.scope__col--out .scope__item {
    color: var(--ink-3);
}

/* Service plates */
.grid-3 {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}

@media (min-width: 640px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service {
    background: var(--paper-lift);
    padding: clamp(1.5rem, 2.6vw, 2rem);
    position: relative;
    transition: background-color 0.25s var(--ease);
}

.service:hover {
    background: #fff;
}

.service__icon {
    color: var(--blue);
    margin-bottom: 1.1rem;
}

.service__index {
    position: absolute;
    top: 1.35rem;
    right: 1.4rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-3);
}

.service__title {
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
    line-height: 1.3;
    max-width: 22ch;
}

.service__body {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.service__points {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 0.5rem;
}

.service__point {
    display: grid;
    grid-template-columns: 0.9rem 1fr;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.service__point::before {
    content: "";
    width: 5px;
    height: 1px;
    background: var(--line);
    margin-top: 0.65em;
}

/* Process: a genuine sequence, so it is genuinely numbered. */
.steps {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 700px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1050px) {
    .steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Three-up variant. Declared after .steps so it wins at every breakpoint,
   and it skips the two-column stage that would leave one cell empty. */
.steps--3 {
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .steps--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step {
    background: var(--paper-lift);
    padding: clamp(1.35rem, 2.4vw, 1.75rem);
}

.step__no {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--redline);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
    display: block;
}

.step__title {
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
}

.step__body {
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* ----------------------------------------------------------- 10. cases */

.cases {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.case {
    background: var(--paper-lift);
    border: 1px solid var(--line-soft);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    transition: border-color 0.25s var(--ease);
}

.case:hover {
    border-color: var(--line);
}

@media (min-width: 880px) {
    .case {
        grid-template-columns: 15rem minmax(0, 1fr);
    }
}

.case__meta {
    display: grid;
    gap: 1.15rem;
    align-content: start;
}

.case__field {
    display: grid;
    gap: 0.3rem;
}

.case__value {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ink);
}

.case__title {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.026em;
}

.case__summary {
    margin-top: 0.55rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--blue);
}

.case__body {
    margin-top: 1.15rem;
    font-size: 0.9688rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 64ch;
}

.case__result {
    margin-top: 1.35rem;
    padding-left: 1rem;
    border-left: 1px solid var(--redline);
}

.case__result-value {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
}

.case__foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
    padding: 0.28rem 0.55rem;
    background: var(--paper);
}

/* Compact case card for the front page */
.case-card {
    background: var(--paper-lift);
    padding: clamp(1.5rem, 2.6vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s var(--ease);
}

.case-card:hover {
    background: #fff;
    color: inherit;
}

.case-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.case-card__title {
    font-size: 1.125rem;
    letter-spacing: -0.018em;
}

.case-card__summary {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-2);
    flex: 1;
}

.case-card__foot {
    margin-top: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
}

/* -------------------------------------------------------- 11. timeline */

/* Vertical spacing is proportional to elapsed years, so the drawing is to
   scale: the gap between 1986 and 2004 really is longer than 2011 to 2012. */
.timeline {
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    position: relative;
    padding-left: 0.5rem;
    /* Grid, so the per-item margins that carry the scale cannot collapse. */
    display: grid;
}

.timeline::before {
    content: "";
    position: absolute;
    left: calc(3.5rem + 0.5rem);
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1px;
    background: var(--line);
}

@media (max-width: 560px) {
    .timeline::before {
        left: 0.5rem;
    }
}

.tl-item {
    display: grid;
    grid-template-columns: 3.5rem 2rem minmax(0, 1fr);
    align-items: start;
    position: relative;
}

@media (max-width: 560px) {
    .tl-item {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .tl-item__year {
        grid-column: 1 / -1;
        margin-bottom: 0.2rem;
        padding-left: 2rem;
    }
}

.tl-item__year {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink);
    line-height: 1.2;
    padding-top: 0.05rem;
}

.tl-item__node {
    position: relative;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The marker distinguishes the two tracks: filled for work, hollow for life. */
.tl-item__node::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    position: relative;
    z-index: 1;
}

.tl-item--life .tl-item__node::before {
    background: var(--paper);
    border: 1px solid var(--redline);
}

.tl-item__text {
    font-size: 0.9688rem;
    line-height: 1.45;
    color: var(--ink-2);
    padding-top: 0.02rem;
}

.tl-item--life .tl-item__text {
    color: var(--ink-3);
}

.tl-key {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line-soft);
}

.tl-key__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tl-key__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    flex: none;
}

.tl-key__dot--life {
    background: var(--paper);
    border: 1px solid var(--redline);
}

/* ------------------------------------------------------- 12. interests */

.interests {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 700px) {
    .interests {
        grid-template-columns: repeat(2, 1fr);
    }
}

.interest {
    background: var(--paper-lift);
    padding: clamp(1.35rem, 2.4vw, 1.8rem);
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 1rem;
    align-items: start;
}

.interest__icon {
    color: var(--blue);
    margin-top: 0.1rem;
}

.interest__title {
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
}

.interest__body {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* --------------------------------------------------------- 13. contact */

/* Each panel carries its own border rather than relying on gaps in a shared
   background, because the number of contact fields depends on how many are
   filled in and a half-empty table row leaves a grey hole. */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.contact-item {
    background: var(--paper-lift);
    border: 1px solid var(--line-soft);
    padding: clamp(1.35rem, 2.4vw, 1.75rem);
}

/* The label sits above the value, not beside it. */
.contact-item .anno {
    display: block;
}

.contact-item__value {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    word-break: break-word;
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size 0.35s var(--ease), color 0.2s var(--ease);
}

a.contact-item__value:hover {
    color: var(--blue);
    background-size: 100% 1px;
}

.checklist {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    display: grid;
    gap: 0.9rem;
    max-width: 52rem;
}

.checklist__item {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0.85rem;
    align-items: baseline;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.checklist__no {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--blue);
}

/* ------------------------------------------------------ 14. data scale */

.volumes {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.volume {
    background: var(--paper-lift);
    padding: clamp(1.5rem, 2.6vw, 2rem);
    display: flex;
    flex-direction: column;
}

/* Side by side the three panels share one set of rows, so the numbers sit on
   the same baseline even though one project name wraps to two lines. Browsers
   without subgrid fall back to auto rows, which looks like the flex column. */
@media (min-width: 760px) {
    .volumes {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto auto auto;
    }

    .volume {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        align-content: start;
    }
}

/* Set in the display face and tightened right up, because the number is the
   whole point of the panel. Tabular figures so the three line up. */
.volume__value {
    margin-top: 0.9rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.volume__unit {
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
}

/* A dimension line under the measurement, with a terminator tick each end. */
.volume__rule {
    position: relative;
    display: block;
    height: 1px;
    background: var(--line);
    margin: 1.15rem 0 1.15rem;
}

.volume__rule::before,
.volume__rule::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: var(--line);
}

.volume__rule::before {
    left: 0;
}

.volume__rule::after {
    right: 0;
}

.volume__note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Relation chains. Every link is a join, so the row reads left to right and
   pans on narrow screens rather than wrapping into a shape that lies. */
.chains {
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    display: grid;
    gap: 1.35rem;
}

.chain-row {
    display: grid;
    gap: 0.6rem;
}

@media (min-width: 820px) {
    .chain-row {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 1.25rem;
        align-items: center;
    }
}

.chain-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.chain {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    min-width: 100%;
}

.chain__node {
    position: relative;
    flex: none;
    background: var(--paper-lift);
    border: 1px solid var(--line-soft);
    padding: 0.55rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--ink);
    white-space: nowrap;
}

.chain__node + .chain__node::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: 1.5rem;
    height: 1px;
    background: var(--blue);
}

.chains__note {
    margin-top: 1.35rem;
    max-width: 60ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-3);
    border-left: 1px solid var(--redline);
    padding-left: 1rem;
}

/* Shared cell for the consequences and the remedies. The marker colour is
   the only thing that separates them: red is what a reviewer flags, blue is
   what gets drawn in response. */
.note-cell {
    background: var(--paper-lift);
    padding: clamp(1.5rem, 2.6vw, 2rem);
}

.note-cell__mark {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--blue);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.note-cell--risk .note-cell__mark {
    color: var(--redline);
}

.note-cell__title {
    font-size: 1.0625rem;
    letter-spacing: -0.012em;
    line-height: 1.3;
}

.note-cell__body {
    margin-top: 0.7rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* -------------------------------------------------------- 15. call out */

.callout {
    border: 1px solid var(--line);
    background: var(--paper-lift);
    padding: clamp(1.85rem, 4.5vw, 3.25rem);
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 850px) {
    .callout {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2.5rem;
    }
}

.callout__title {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.028em;
    max-width: 22ch;
}

.callout__body {
    margin-top: 0.85rem;
    max-width: 52ch;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------------------------------------------------- 16. stack tables */

.stack-group {
    display: grid;
    gap: 0.9rem;
    padding-block: 1.35rem;
    border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 800px) {
    .stack-group {
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 2rem;
        align-items: baseline;
    }
}

.stack-group:first-of-type {
    border-top: 1px solid var(--line-soft);
}

.stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ----------------------------------------------------------- 17. footer */

.footer {
    margin-top: var(--section-pad);
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
    position: relative;
    z-index: 2;
}

.footer__cols {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

@media (min-width: 700px) {
    .footer__cols {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .footer__cols {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }
}

.footer__blurb {
    margin-top: 1rem;
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.footer__list {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.65rem;
}

.footer__link {
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
}

.footer__link:hover {
    color: var(--blue);
    text-decoration: underline;
}

.footer__note {
    display: block;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 0.15rem;
}

/* The title block. Every technical drawing ends in one. */
.titleblock {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) {
    .titleblock {
        grid-template-columns: 2.2fr repeat(4, minmax(0, 1fr));
    }
}

.titleblock__cell {
    padding: 0.9rem clamp(0.85rem, 2vw, 1.25rem);
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    min-width: 0;
}

.titleblock__cell:last-child {
    border-right: 0;
}

.titleblock__value {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    overflow-wrap: break-word;
}

.colophon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    padding-block: 1.15rem;
}

/* -------------------------------------------------- 18. accessibility */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .dim__rule::before {
        transform: scaleX(1);
    }

    .dim__value {
        opacity: 1;
    }
}

@media print {
    .masthead,
    .sheet-frame,
    .skip {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}