/* The lyntl.app landing page (LIN-431) in the look of the signed-off site artifact (LIN-432,
   ADR-18 amendment 2026-10-28 "the site follows the artifact"). Every colour, font size and corner
   is a var() from tokens.css, generated from mobile/src/theme/tokens.ts: the site's own `site`
   group (--site-…) for colours, type and fluid spacing, the app's tokens for the rest. Copper only
   where something is due now: the gutters' reminder, the gutters in the house and the "get
   reminded" step of How it works. /js/landing.js adds the history scroll and the appliance switch
   (LIN-433) by switching classes; /js/house.js plays the hero show (LIN-434), whose seasons come
   from the `site` season tokens by the month the stage names, and whose copper marks only the job
   that is due. */

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

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

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

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}

/* ---------- base ---------- */

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

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

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--site-color-ground);
    color: var(--site-color-ink);
    font-family: var(--site-text-body-family);
    font-weight: var(--site-text-body-weight);
    font-size: var(--site-text-body-size);
    line-height: var(--site-text-body-line-height);
    overflow-wrap: break-word;
}

/* German runs long words together; in the large type, break them with a hyphen, never mid-word. */
:lang(de) :is(h1, h2, h3, .tb-thing strong) {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
}

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

h1,
h2,
h3 {
    color: var(--site-color-ink);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

strong {
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
}

a {
    color: inherit;
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: var(--border-emphasis) solid var(--color-focus);
    outline-offset: 3px;
}

.prose {
    max-width: 52ch;
    color: var(--site-color-ink-soft);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: var(--site-space-gutter);
    top: 10px;
    z-index: 9;
    padding: 10px 14px;
    background: var(--site-color-ink);
    color: var(--site-color-on-ink);
    transform: translateY(calc(-100% - 20px));
}

.skip:focus {
    transform: none;
}

/* ---------- header and footer ---------- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--site-space-gutter) 0;
}

.brand {
    display: inline-flex;
    padding: 6px 0;
}

.lockup {
    display: block;
    width: auto;
    height: var(--site-logo-header);
}

.bottom .lockup {
    height: var(--site-logo-footer);
}

.lockup-blob,
.lockup-wordmark {
    fill: var(--site-color-ink);
}

.lockup-house {
    fill: var(--site-color-logo-house);
}

.top ul,
.bottom ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top ul {
    gap: 0 clamp(14px, 2.4vw, 32px);
}

.top nav a {
    display: inline-block;
    padding: 10px 0;
    font-size: var(--site-text-small-size);
    line-height: var(--site-text-small-line-height);
    text-decoration: none;
}

.top nav a:hover {
    text-decoration: underline;
}

.bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px var(--site-space-gutter) 34px;
    border-top: var(--border-hairline) solid var(--site-color-rule);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

.bottom ul {
    gap: 0 24px;
}

.bottom a {
    display: inline-block;
    padding: 8px 0;
}

/* ---------- hero: the words on the left, the example house on the right ---------- */

.hero {
    display: grid;
    /* The house's shadow and its edge labels may reach past a phone's edge; never a sideways scroll. */
    overflow-x: clip;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head head"
        "copy stage"
        "remind stage";
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--site-space-hero-columns);
    padding: clamp(18px, 3.4vh, 44px) var(--site-space-gutter) clamp(40px, 6vh, 72px);
    align-items: start;
}

.hero h1 {
    grid-area: head;
    padding-bottom: clamp(6px, 1.2vh, 14px);
    font-family: var(--site-text-headline-family);
    font-weight: var(--site-text-headline-weight);
    font-size: var(--site-text-headline-size);
    line-height: var(--site-text-headline-line-height);
    letter-spacing: var(--site-text-headline-tracking);
    /* Stops about where the house begins, so the drawing keeps its own space beside the words. */
    max-width: 13.5em;
    text-wrap: balance;
}

.headline-more {
    display: block;
}

.hero-copy {
    grid-area: copy;
    display: grid;
    gap: 14px;
    align-content: start;
    margin-top: clamp(10px, 2vh, 22px);
    padding-top: clamp(20px, 4.5vh, 56px);
    border-top: var(--border-rule) solid var(--site-color-ink);
}

.lede {
    max-width: 44ch;
    color: var(--site-color-ink-soft);
}

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

.pilot-line {
    max-width: 44ch;
}

.pilot-line a {
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
}

/* The house keeps its proportions and fills the height the window leaves under the headline. */
.stage {
    grid-area: stage;
    position: relative;
    justify-self: end;
    height: min(calc(100vh - 236px), 860px);
    min-height: 520px;
    max-width: 62vw;
    margin: -4px 0 0;
    aspect-ratio: 1072 / 1029;
}

/* A soft light behind the house in the season's sky (late autumn without JavaScript). */
.stage::before {
    content: "";
    position: absolute;
    inset: 6% -4% 10% 6%;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
}

.stage .art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The note sits under the garden like a title block on a drawing. */
.note {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: min(17rem, 34%);
    padding-top: 9px;
    border-top: var(--border-rule) solid var(--site-color-ink);
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-fine-size);
    line-height: var(--site-text-fine-line-height);
}

.reminders {
    grid-area: remind;
    align-self: start;
    width: 100%;
    max-width: 27rem;
    margin-top: clamp(28px, 5vh, 56px);
}

.reminders-label {
    margin-bottom: 8px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

.reminder-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A notification-style card with its status bar down the left edge. */
.notice {
    position: relative;
    padding: 13px 16px 15px 18px;
    background: var(--site-color-raised);
    border: var(--border-hairline) solid var(--site-color-rule);
    border-radius: var(--radius-card);
}

.notice::before {
    content: "";
    position: absolute;
    left: calc(var(--border-hairline) * -1);
    top: 14px;
    bottom: 14px;
    width: var(--border-status-bar);
    background: var(--site-color-track);
}

.notice-due::before {
    background: var(--site-color-copper);
}

.notice-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-fine-size);
    line-height: var(--site-text-fine-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.notice-title {
    margin-top: 6px;
    font-size: var(--site-text-body-compact-size);
    line-height: 1.3;
}

.notice-body {
    margin-top: 3px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-small-size);
    line-height: var(--site-text-small-line-height);
}

.notice-when {
    margin-top: 9px;
    color: var(--site-color-ink);
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.notice-due .notice-when {
    color: var(--site-color-copper-ink);
}

/* ---------- the example house (static: late November, the gutters due) ---------- */

.art path,
.art circle {
    stroke: var(--site-color-draw-ink);
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.art .mt,
.art .stair,
.art .sheet {
    fill: var(--site-color-face-top);
}

.art .mf,
.art .outer {
    fill: var(--site-color-face-left);
}

.art .mr,
.art .outer2 {
    fill: var(--site-color-face-right);
}

.art .wall {
    fill: var(--site-color-wall);
}

.art .wall2,
.art .rail,
.art .grille {
    fill: var(--site-color-wall-side);
}

.art .floor {
    fill: var(--site-color-floor);
}

.art .cut {
    fill: var(--site-color-cut);
    stroke: var(--site-color-cut);
}

/* Nothing but the gutters is due, so the boiler's lamp stays slate. */
.art .dark,
.art .warmdot {
    fill: var(--site-color-draw-ink);
}

.art .warmdot {
    stroke: none;
}

.art .worktop {
    fill: var(--site-color-worktop);
}

.art .glass {
    fill: var(--site-color-glass);
    stroke: var(--site-color-draw-line);
}

.art .glassd {
    fill: var(--site-color-glass-dark);
}

.art .water {
    fill: var(--site-color-water);
    stroke: var(--site-color-draw-line);
}

.art .screen {
    fill: var(--site-color-screen);
    fill-opacity: 0.35;
    stroke: var(--site-color-draw-line);
}

.art .ln2 {
    fill: none;
    stroke: var(--site-color-draw-line);
}

.art .ln3 {
    fill: none;
    stroke: var(--site-color-draw-pencil);
}

/* The fine lines are the roof's tiles. */
.art .ln4 {
    fill: none;
    stroke: var(--site-color-roof-line);
    stroke-width: 0.8;
}

.art .roof-face .ln2 {
    stroke: var(--site-color-roof-line);
}

.art .rug {
    fill: var(--site-color-rug);
    stroke: var(--site-color-draw-line);
}

.art .sofa {
    fill: var(--site-color-sofa);
}

.art .sofaf {
    fill: var(--site-color-sofa-front);
}

.art .sofar {
    fill: var(--site-color-sofa-side);
}

.art .shade {
    fill: var(--site-color-shade);
}

.art .void {
    fill: var(--site-color-void);
}

.art .quilt {
    fill: var(--site-color-quilt);
}

.art .quiltf {
    fill: var(--site-color-quilt-front);
}

.art .quiltr {
    fill: var(--site-color-quilt-side);
}

.art .roof {
    fill: var(--site-color-roof);
}

.art .roofb {
    fill: var(--site-color-roof-side);
}

.art .attic {
    fill: none;
    stroke: var(--site-color-attic);
    stroke-dasharray: 3 3;
}

.art .gut {
    fill: var(--site-color-gutter);
}

.art .gutter-in {
    fill: var(--site-color-gutter-inside);
}

.art .leaf {
    fill: var(--site-color-leaf);
    stroke: none;
}

.art .leaf.l2 {
    fill: var(--site-color-leaf-light);
}

.art .basef {
    fill: var(--site-color-base-front);
}

.art .baser {
    fill: var(--site-color-base-side);
}

.art .pave {
    fill: var(--site-color-pave);
    stroke: var(--site-color-draw-pencil);
}

.art .soil,
.art .trunk {
    fill: var(--site-color-soil);
}

.art .trunkr {
    fill: var(--site-color-trunk-side);
}

.art .shrub {
    fill: var(--site-color-shrub);
}

.art .shrubf {
    fill: var(--site-color-shrub-front);
}

.art .shrubr {
    fill: var(--site-color-shrub-side);
}

.art .canopy {
    stroke: none;
}

.art .canopy-sh {
    fill: var(--site-color-ink);
    fill-opacity: 0.09;
    stroke: none;
}

.art .branch {
    fill: none;
    stroke: var(--site-color-branch);
    stroke-width: 2;
}

.art .pipe {
    fill: none;
    stroke: var(--site-color-pipe);
    stroke-width: 4;
}

.art .guide {
    fill: none;
    stroke: var(--site-color-draw-line);
    stroke-dasharray: 2 5;
    stroke-width: 1;
}

/* The one thing due now: the gutters, outlined in copper. */
.art .thing.is-due path {
    stroke: var(--site-color-copper);
    stroke-width: 1.9;
}

.art .thing.is-due .gleaves path {
    stroke: none;
}

/* ---------- the hero show (LIN-434) ---------- */

/* The season the stage shows. Without JavaScript these are the static late-November house's values;
   /js/house.js names the month (data-month) and the garden takes that month's `site` season tokens. */
.stage {
    --sky: var(--site-color-sky);
    --lawn: var(--site-color-lawn);
    --canopy: var(--site-color-canopy);
    --canopy-opacity: 0.9;
    --gutter-leaves: 1;
    --ground-leaves: 1;
    --warm: 0;
    --frost: 0;
    --roof-snow: 0;
    --blossom: 0;
    --flowers: 0;
    --season-change: 2.6s;
}

.stage[data-month="1"] { --sky: var(--site-season-sky-1); --lawn: var(--site-season-lawn-1); --canopy: var(--site-season-canopy-1); --canopy-opacity: 0; --ground-leaves: 0; --warm: 1; --frost: 1; --roof-snow: 0.95; --blossom: 0; --flowers: 0; }
.stage[data-month="2"] { --sky: var(--site-season-sky-2); --lawn: var(--site-season-lawn-2); --canopy: var(--site-season-canopy-2); --canopy-opacity: 0; --ground-leaves: 0; --warm: 1; --frost: 0.65; --roof-snow: 0.7; --blossom: 0; --flowers: 0; }
.stage[data-month="3"] { --sky: var(--site-season-sky-3); --lawn: var(--site-season-lawn-3); --canopy: var(--site-season-canopy-3); --canopy-opacity: 0; --ground-leaves: 0; --warm: 1; --frost: 0; --roof-snow: 0; --blossom: 0.45; --flowers: 0; }
.stage[data-month="4"] { --sky: var(--site-season-sky-4); --lawn: var(--site-season-lawn-4); --canopy: var(--site-season-canopy-4); --canopy-opacity: 0.9; --ground-leaves: 0; --warm: 1; --frost: 0; --roof-snow: 0; --blossom: 1; --flowers: 0.4; }
.stage[data-month="5"] { --sky: var(--site-season-sky-5); --lawn: var(--site-season-lawn-5); --canopy: var(--site-season-canopy-5); --canopy-opacity: 0.88; --ground-leaves: 0; --warm: 0; --frost: 0; --roof-snow: 0; --blossom: 0.3; --flowers: 1; }
.stage[data-month="6"] { --sky: var(--site-season-sky-6); --lawn: var(--site-season-lawn-6); --canopy: var(--site-season-canopy-6); --canopy-opacity: 0.92; --ground-leaves: 0; --warm: 0; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 1; }
.stage[data-month="7"] { --sky: var(--site-season-sky-7); --lawn: var(--site-season-lawn-7); --canopy: var(--site-season-canopy-7); --canopy-opacity: 0.92; --ground-leaves: 0; --warm: 0; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 1; }
.stage[data-month="8"] { --sky: var(--site-season-sky-8); --lawn: var(--site-season-lawn-8); --canopy: var(--site-season-canopy-8); --canopy-opacity: 0.9; --ground-leaves: 0; --warm: 0; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 1; }
.stage[data-month="9"] { --sky: var(--site-season-sky-9); --lawn: var(--site-season-lawn-9); --canopy: var(--site-season-canopy-9); --canopy-opacity: 0.9; --ground-leaves: 0; --warm: 0; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 1; }
.stage[data-month="10"] { --sky: var(--site-season-sky-10); --lawn: var(--site-season-lawn-10); --canopy: var(--site-season-canopy-10); --canopy-opacity: 0.9; --ground-leaves: 0.6; --warm: 1; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 0; }
.stage[data-month="11"] { --sky: var(--site-season-sky-11); --lawn: var(--site-season-lawn-11); --canopy: var(--site-season-canopy-11); --canopy-opacity: 0.9; --ground-leaves: 1; --warm: 1; --frost: 0; --roof-snow: 0; --blossom: 0; --flowers: 0; }
.stage[data-month="12"] { --sky: var(--site-season-sky-12); --lawn: var(--site-season-lawn-12); --canopy: var(--site-season-canopy-12); --canopy-opacity: 0; --ground-leaves: 0.35; --warm: 1; --frost: 0.65; --roof-snow: 0.55; --blossom: 0; --flowers: 0; }

/* Leaves in the gutters fall in autumn until they are cleared; a few stay over the winter. */
.stage[data-gutters="full"] { --gutter-leaves: 1; }
.stage[data-gutters="some"] { --gutter-leaves: 0.45; }
.stage[data-gutters="few"] { --gutter-leaves: 0.35; }
.stage[data-gutters="none"] { --gutter-leaves: 0; }

.stage::before {
    background-image: radial-gradient(closest-side, var(--sky), transparent);
}

.art .lawn {
    fill: var(--lawn);
    transition: fill var(--season-change);
}

.art .canopy {
    fill: var(--canopy);
    transition: fill var(--season-change);
}

.canopies {
    opacity: var(--canopy-opacity);
    transition: opacity var(--season-change);
}

.gleaves {
    opacity: var(--gutter-leaves);
    transition: opacity 1s;
}

.ground-leaves {
    opacity: var(--ground-leaves);
    transition: opacity var(--season-change);
}

.frost {
    opacity: var(--frost);
    transition: opacity var(--season-change);
}

.blossom {
    opacity: var(--blossom);
    transition: opacity var(--season-change);
}

.shrubs + .blossom {
    opacity: var(--flowers);
}

/* The radiators' warmth while the heating is on: a warm light, not copper (nothing is due). */
.art .warm {
    fill: var(--site-color-sun);
    stroke: none;
    opacity: calc(var(--warm) * 0.35);
    transition: opacity var(--season-change);
}

.art .snow {
    fill: var(--site-color-snow);
    stroke: var(--site-color-snow-line);
    opacity: calc(var(--roof-snow) * 0.7);
    transition: opacity var(--season-change);
}

.art .snowp {
    fill: var(--site-color-snow);
    stroke: none;
}

.art .bl {
    fill: var(--site-color-blossom);
}

.art .flower {
    fill: var(--site-color-flower);
    stroke: none;
}

.art .flower.f2 {
    fill: var(--site-color-flower-yellow);
}

.art .slip {
    fill: var(--site-color-roof-slip);
    opacity: 0;
    transition: opacity 1.6s;
}

.stage.is-roof .slip {
    opacity: 1;
}

.art .shadow {
    fill: var(--site-color-ink);
    fill-opacity: 0.1;
    stroke: none;
}

.art .roof-ring {
    fill: none;
    stroke: none;
}

/* Falling leaves in autumn and snow in winter, only while the show plays. */
.falling,
.snowfall {
    opacity: 0;
}

.stage.is-running[data-season="autumn"] .falling,
.stage.is-running[data-season="winter"] .snowfall {
    opacity: 1;
}

.art .fall {
    fill: var(--site-color-leaf);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
}

.art .f3,
.art .f4,
.art .f5,
.art .k3,
.art .k4 {
    display: none;
}

.stage.is-running[data-season="autumn"] .fall { animation: fall 13s linear infinite; }
.stage.is-running[data-season="autumn"] .f1 { animation-delay: -5s; animation-duration: 15s; }
.stage.is-running[data-season="autumn"] .f2 { animation-delay: -9s; animation-duration: 14s; }

.art .flake {
    fill: var(--site-color-snow);
    stroke: var(--site-color-snow-line);
    stroke-width: 0.6;
}

.stage.is-running[data-season="winter"] .flake { animation: snow 16s linear infinite; }
.stage.is-running[data-season="winter"] .k1 { animation-delay: -3s; animation-duration: 11s; }
.stage.is-running[data-season="winter"] .k2 { animation-delay: -6s; animation-duration: 8s; }

@keyframes fall {
    0% { transform: translate(0, 0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translate(-18px, 90px) rotate(160deg); }
    90% { opacity: 1; }
    100% { transform: translate(6px, 180px) rotate(320deg); opacity: 0; }
}

@keyframes snow {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(-30px, 520px); opacity: 0; }
}

/* The appliance whose job is current lifts out of the house, outlined in ink; copper only once it is due. */
.hero.is-live .art .thing.is-due path {
    stroke: var(--site-color-draw-ink);
    stroke-width: 1;
}

.art .thing {
    transition: transform 1.6s var(--easing-calm);
}

.art .thing path {
    transition: stroke 0.9s;
}

.hero.is-live .art .thing.is-current {
    transform: translateY(-15px);
    filter: drop-shadow(0 12px 5px var(--site-color-rule));
}

.hero.is-live .art .thing.is-current path {
    stroke: var(--site-color-ink);
    stroke-width: 1.9;
}

.hero.is-live .art .thing.is-current.is-due path {
    stroke: var(--site-color-copper);
}

.hero.is-live .art .thing.is-peek {
    transform: translateY(-6px);
}

.hero.is-live .art .thing.is-peek path {
    stroke: var(--site-color-ink);
    stroke-width: 1.4;
}

.art .thing .gleaves path,
.hero.is-live .art .thing.is-current .gleaves path {
    stroke: none;
}

.hero.is-live .art .roof-hi.is-current {
    transform: none;
}

.hero.is-live .art .roof-hi.is-current .roof-ring {
    stroke: var(--site-color-ink);
    stroke-width: 2.5;
}

.hero.is-live .art .roof-hi.is-current.is-due .roof-ring {
    stroke: var(--site-color-copper);
}

/* The labels on the house: the season's jobs, the current one strongest. Copper only for the job due. */
.pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translate(-7px, -50%);
    pointer-events: none;
    transition: opacity 0.9s;
}

.pin[hidden] {
    display: none;
}

.pin.is-left {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 7px), -50%);
}

.pin.is-off {
    opacity: 0;
}

.pin.is-fresh {
    animation: pin-in 1.1s var(--easing-calm);
}

@keyframes pin-in {
    from { opacity: 0; }
}

.pin-dot {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--site-color-raised);
    border: var(--border-emphasis) solid var(--site-color-ink);
    border-radius: var(--radius-full);
    transition: background-color 0.9s, border-color 0.9s;
}

.pin-name {
    padding: 3px 6px;
    background: var(--site-color-raised);
    box-shadow: 0 0 0 1px var(--site-color-rule);
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-fine-size);
    line-height: 1.15;
    white-space: nowrap;
}

.pin.is-done .pin-dot {
    background: var(--site-color-ink);
}

.pin.is-done .pin-name {
    color: var(--site-color-ink-soft);
    font-family: var(--site-text-body-family);
    font-weight: var(--site-text-body-weight);
}

.pin.is-soon .pin-dot,
.pin.is-due .pin-dot {
    width: 18px;
    height: 18px;
    background: var(--site-color-ink);
}

.pin.is-soon .pin-name,
.pin.is-due .pin-name {
    padding: 4px 8px;
    background: var(--site-color-ink);
    color: var(--site-color-on-ink);
    box-shadow: none;
    font-size: var(--site-text-note-size);
}

.pin.is-due .pin-dot {
    background: var(--site-color-copper);
    border-color: var(--site-color-copper);
}

.pin.is-due .pin-name {
    background: var(--site-color-copper-ink);
}

.pin.is-due .pin-dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: var(--border-emphasis) solid var(--site-color-copper);
    border-radius: var(--radius-full);
    opacity: 0.55;
}

/* The title block under the garden while the show plays: the date and season, then the job. */
.tb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35em;
    font-variant-numeric: tabular-nums lining-nums;
}

.tb-meta[hidden],
.tb-thing[hidden] {
    display: none;
}

.tb-thing {
    margin-top: 6px;
    color: var(--site-color-ink);
}

.tb-thing strong {
    display: block;
    font-family: var(--site-text-step-family);
    font-weight: var(--site-text-step-weight);
    font-size: var(--site-text-step-size);
    line-height: var(--site-text-step-line-height);
    letter-spacing: var(--site-text-step-tracking);
}

.tb-thing .lay > span {
    display: block;
    margin-top: 3px;
    font-size: var(--site-text-small-size);
    line-height: 1.35;
}

.hero.is-live .tb-note {
    margin-top: 8px;
}

.xf {
    display: inline-grid;
}

.tb-thing.xf:not([hidden]) {
    display: grid;
}

.xf > .lay {
    grid-area: 1 / 1;
    min-width: 0;
}

.xf > .lay.is-in {
    animation: cross-in 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) backwards;
}

.xf > .lay.is-out {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.6, 0, 0.8, 0.4);
}

@keyframes cross-in {
    from { opacity: 0; }
}

/* The controls: pause first, then previous and next; each at least 44px. */
.controls {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 4px;
}

.controls[hidden] {
    display: none;
}

.ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    background: var(--site-color-ground);
    border: var(--border-hairline) solid var(--site-color-track);
    border-radius: var(--radius-control);
    color: var(--site-color-ink-soft);
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-fine-size);
    line-height: 1;
    cursor: pointer;
}

.ctl:hover {
    color: var(--site-color-ink);
    border-color: var(--site-color-ink);
}

.ctl svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ctl-play svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
    stroke: none;
}

.ctl-play .icon-play,
.ctl-play.is-paused .icon-pause {
    display: none;
}

.ctl-play.is-paused .icon-play {
    display: inline;
}

/* A hot spot on each appliance, at least 44px, opens its card. */
.hot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 3;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hot[hidden] {
    display: none;
}

.hot.is-current {
    z-index: 4;
}

.hot:hover,
.hot[aria-expanded="true"] {
    box-shadow: inset 0 0 0 var(--border-emphasis) var(--site-color-ink);
}

/* Appliances without a label this season still show where they are. */
.hot.is-bare::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 17px;
    width: 10px;
    height: 10px;
    background: var(--site-color-raised);
    border: var(--border-rule) solid var(--site-color-ink-soft);
    border-radius: var(--radius-full);
    opacity: 0.8;
}

.hc {
    position: absolute;
    left: var(--card-x, 0);
    top: var(--card-y, 0);
    z-index: 6;
    width: 15.5rem;
    min-height: var(--card-height, 0);
    padding: 12px 14px 13px;
    background: var(--site-color-raised);
    border: var(--border-hairline) solid var(--site-color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 28px -18px var(--site-color-draw-line);
}

.hc[hidden],
.hc [hidden] {
    display: none;
}

.hc-name {
    font-family: var(--site-text-name-family);
    font-weight: var(--site-text-name-weight);
    font-size: var(--site-text-name-size);
    line-height: var(--site-text-name-line-height);
}

.hc-where {
    margin-top: 2px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-fine-size);
    line-height: var(--site-text-fine-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.hc-job {
    margin-top: 9px;
    font-size: var(--site-text-small-size);
    line-height: 1.35;
}

.hc-when {
    margin-top: 2px;
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.hc-when.is-due {
    color: var(--site-color-copper-ink);
}

.hc-do {
    min-height: 44px;
    margin-top: 10px;
    padding: 0 14px;
    background: var(--site-color-ink);
    border: 0;
    border-radius: var(--radius-control);
    color: var(--site-color-on-ink);
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-note-size);
    line-height: 1;
    cursor: pointer;
}

.hc-ok {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-note-size);
}

.hc-ok svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-color-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hc-ok:focus {
    outline: none;
}

/* The reminders while the show plays: one card each in a window, new ones coming in at the top. */
.hero.is-live .reminder-list {
    display: block;
    position: relative;
    height: 16.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(var(--site-color-ink) 70%, transparent);
    mask-image: linear-gradient(var(--site-color-ink) 70%, transparent);
}

.hero.is-live .reminder-list .notice {
    margin: 0 0 10px;
    transition: transform 0.8s var(--easing-calm), opacity 0.8s var(--easing-calm);
}

.hero.is-live .reminder-list .notice + .notice {
    opacity: 0.62;
}

.reminder-list.is-shifting .notice:not(.is-gone) {
    transform: translateY(calc(var(--shift) * -1));
    transition: none;
}

.reminder-list .notice.is-new {
    opacity: 0;
}

.reminder-list .notice.is-gone {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--top);
}

.reminder-list .notice.is-leaving {
    transform: translateY(var(--shift));
    opacity: 0;
}

.notice.is-logged::before {
    background: var(--site-color-ink);
}

.notice.is-logged .notice-when {
    color: var(--site-color-ink);
}

.tick {
    position: absolute;
    left: -10px;
    top: -8px;
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.8s var(--easing-calm);
}

.tick circle {
    fill: var(--site-color-ink);
    stroke: none;
}

.tick path {
    fill: none;
    stroke: var(--site-color-on-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notice.is-logged .tick {
    opacity: 1;
}

.notice-logged {
    display: none;
}

.notice.is-logged .notice-logged {
    display: inline;
}

.reminders-note {
    display: none;
    margin-top: 10px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

@media (max-width: 1099px) {
    .controls {
        right: var(--site-space-gutter);
        top: 12px;
    }

    .hero.is-live .tb-thing,
    .hero.is-live .tb-note {
        display: none;
    }

    .hero.is-live .reminders-note {
        display: block;
    }

    .hero.is-live .reminder-list {
        height: 12.5rem;
    }
}

@media (max-width: 699px) {
    .stage .pin-name {
        font-size: var(--site-text-fine-size);
    }

    /* On a phone the card below carries the date; the title block steps aside so it never covers a label. */
    .hero.is-live .note {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .controls {
        top: auto;
        bottom: 10px;
    }

    .hero.is-live .reminder-list {
        height: 13.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage *,
    .stage .art *,
    .stage::before,
    .reminder-list .notice,
    .xf > .lay {
        transition: none;
        animation: none;
    }

    .falling,
    .snowfall {
        display: none;
    }
}

/* ---------- one appliance's history ---------- */

/* All four example appliances are on the page; the ones not shown are hidden (the switch). */
[data-appliance][hidden] {
    display: none;
}

.band {
    padding: var(--site-space-band) var(--site-space-gutter);
    border-top: var(--border-hairline) solid var(--site-color-rule);
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--site-space-columns);
    align-items: end;
}

.section-head h2,
.how h2 {
    max-width: 15ch;
    font-family: var(--site-text-section-family);
    font-weight: var(--site-text-section-weight);
    font-size: var(--site-text-section-size);
    line-height: var(--site-text-section-line-height);
    letter-spacing: var(--site-text-section-tracking);
}

.switch {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 22px;
    margin: clamp(18px, 2.4vw, 28px) 0 clamp(28px, 4vw, 52px);
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

.switch a {
    display: inline-block;
    padding: 8px 0;
    color: var(--site-color-ink);
}

.switch a[aria-current="true"] {
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    text-decoration: none;
}

.history {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 88px);
}

.history-figure {
    position: sticky;
    top: clamp(14px, 5vh, 48px);
    align-self: start;
}

.bo {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(40vh, 400px);
    margin: 0 auto;
}

.bo path {
    stroke: var(--site-color-draw-ink);
    stroke-width: 1.1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.bo .mt {
    fill: var(--site-color-face-top);
}

.bo .mf {
    fill: var(--site-color-face-left);
}

.bo .mr {
    fill: var(--site-color-face-right);
}

.bo .wall {
    fill: var(--site-color-wall);
}

.bo .wall2 {
    fill: var(--site-color-wall-side);
}

.bo .floor {
    fill: var(--site-color-floor);
}

.bo .cut {
    fill: var(--site-color-cut);
    stroke: var(--site-color-cut);
}

.bo .dark {
    fill: var(--site-color-draw-ink);
}

.bo .pipe,
.bo .valve {
    fill: var(--site-color-copper-pipe);
}

.bo .piper {
    fill: var(--site-color-copper-pipe-side);
}

.bo .duct {
    fill: var(--site-color-duct);
}

.bo .ductr {
    fill: var(--site-color-duct-side);
}

.bo .worktop {
    fill: var(--site-color-worktop);
}

.bo .worktopf {
    fill: var(--site-color-worktop-front);
}

.bo .tile,
.bo .paper-l {
    fill: none;
    stroke: var(--site-color-draw-pencil);
}

.bo .water {
    fill: var(--site-color-water);
    fill-opacity: 0.8;
    stroke: var(--site-color-draw-line);
}

.bo .ln2 {
    fill: none;
    stroke: var(--site-color-draw-line);
}

.bo .ln4 {
    fill: none;
    stroke: var(--site-color-part-line);
}

.bo .part {
    fill: var(--site-color-part);
}

.bo .partf {
    fill: var(--site-color-part-front);
}

.bo .partr {
    fill: var(--site-color-part-side);
}

.bo .paper,
.bo .tag {
    fill: var(--site-color-paper);
}

/* Nothing in a told history is due: the lamp, the invoice's pin and the sticker's ring are slate. */
.bo .warmdot {
    fill: var(--site-color-ink);
    stroke: none;
}

.bo .ping {
    fill: none;
    stroke: var(--site-color-ink);
    stroke-width: 2;
}

.ledger {
    margin-top: 18px;
    border-top: var(--border-rule) solid var(--site-color-ink);
}

.ledger-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 12px;
    padding: 10px 0 8px;
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.ledger-head strong {
    font-family: var(--site-text-name-family);
    font-weight: var(--site-text-name-weight);
    font-size: var(--site-text-name-size);
    line-height: var(--site-text-name-line-height);
}

.ledger-head span,
.ledger-when,
.ledger-tag {
    color: var(--site-color-ink-soft);
}

.ledger ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ledger-row {
    display: grid;
    grid-template-columns: 6.4em minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px 0;
    border-top: var(--border-hairline) solid var(--site-color-rule);
    font-size: var(--site-text-note-size);
    line-height: 1.35;
    font-variant-numeric: tabular-nums lining-nums;
    transition: opacity 0.6s var(--easing-calm);
}

.ledger-row.is-planned {
    border-top-style: dashed;
}

.ledger-tag {
    font-size: var(--site-text-fine-size);
    line-height: var(--site-text-fine-line-height);
    white-space: nowrap;
}

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

/* Each step takes a good part of the window, so the history scroll moves one event at a time. */
.step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(29vh, 270px);
    padding: 0 0 22px;
}

.step:first-child {
    justify-content: flex-start;
    min-height: min(26vh, 240px);
    padding-top: clamp(20px, 4vh, 48px);
}

.step:last-child {
    min-height: min(36vh, 320px);
}

.step-when {
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
    font-variant-numeric: tabular-nums lining-nums;
}

.step h3 {
    margin-top: 6px;
    font-family: var(--site-text-step-family);
    font-weight: var(--site-text-step-weight);
    font-size: var(--site-text-step-size);
    line-height: var(--site-text-step-line-height);
    letter-spacing: var(--site-text-step-tracking);
}

.step p:not(.step-when):not(.step-status) {
    max-width: 44ch;
    margin-top: 12px;
    color: var(--site-color-ink-soft);
}

.step-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

.step-status::before {
    content: "";
    flex: none;
    width: 22px;
    border-top: var(--border-emphasis) solid var(--site-color-ink);
}

/* "After the pilot" is not due, so it is muted ink with a dashed rule, not copper. */
.step-status.is-planned {
    color: var(--site-color-ink-soft);
}

.step-status.is-planned::before {
    border-top-style: dashed;
    border-top-color: var(--site-color-ink-soft);
}

/* The history scroll (LIN-433). With the script (html.js-history) the drawing shows the overlays of
   the event in view, the ledger is written up to it and that event stands out. Without the script,
   or with Reduce Motion, the told record shows: the overlays that stay (no data-to), every row. */
html:not(.js-history) .bo [data-to] {
    display: none;
}

.bo [data-from] {
    transition: opacity 0.9s var(--easing-calm);
}

.js-history .bo [data-from] {
    opacity: 0;
}

.js-history .bo [data-from].is-on {
    opacity: 1;
}

.js-history .ledger-row {
    opacity: 0.32;
}

.js-history .ledger-row.is-on {
    opacity: 1;
}

/* The current row is marked in the band's neutral tone, not copper: nothing in a told history is due. */
.js-history .ledger-row.is-now {
    background: var(--site-color-band);
    box-shadow: -10px 0 0 var(--site-color-band), 10px 0 0 var(--site-color-band);
}

.js-history .step {
    opacity: 0.4;
    transition: opacity 0.7s var(--easing-calm);
}

.js-history .step.is-on {
    opacity: 1;
}

.foot {
    max-width: 60ch;
    margin-top: 28px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

/* ---------- how it works ---------- */

.how .prose {
    max-width: 56ch;
    margin-top: 14px;
}

.loop {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 clamp(14px, 2vw, 28px);
    margin: clamp(32px, 5vw, 56px) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.loop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    border-top: 1.4px solid var(--site-color-track);
}

.loop li {
    position: relative;
    padding-top: 40px;
    counter-increment: step;
}

.loop li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--site-color-ground);
    border: 2.5px solid var(--site-color-ink);
    border-radius: var(--radius-full);
}

/* "Get reminded" is the moment a job is due: copper. */
.loop li:nth-child(4)::before {
    background: var(--site-color-copper);
    border-color: var(--site-color-copper);
}

.loop li:nth-child(5)::before {
    background: var(--site-color-ink);
}

.loop h3 {
    font-family: var(--site-text-loop-family);
    font-weight: var(--site-text-loop-weight);
    font-size: var(--site-text-loop-size);
    line-height: var(--site-text-loop-line-height);
    letter-spacing: var(--site-text-loop-tracking);
}

.loop h3::before {
    content: counter(step) ". ";
    color: var(--site-color-ink-soft);
    font-variant-numeric: tabular-nums lining-nums;
}

.loop p {
    max-width: 28ch;
    margin-top: 8px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-small-size);
    line-height: var(--site-text-small-line-height);
}

.how-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

.entry {
    max-width: 30rem;
    margin: clamp(30px, 4vw, 48px) 0 0;
}

.entry-sheet {
    border-top: var(--border-rule) solid var(--site-color-ink);
}

.entry-name {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 12px;
    padding: 10px 0 8px;
}

.entry-name strong {
    font-family: var(--site-text-name-family);
    font-weight: var(--site-text-name-weight);
    font-size: var(--site-text-name-size);
    line-height: var(--site-text-name-line-height);
}

.entry-name span {
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-fine-size);
    line-height: var(--site-text-fine-line-height);
}

.entry ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 8px 0;
    border-top: var(--border-hairline) solid var(--site-color-rule);
    font-size: var(--site-text-small-size);
    line-height: 1.35;
}

.entry-interval {
    color: var(--site-color-ink-soft);
    text-align: right;
}

/* The changed interval is not due, so it is bold ink rather than copper. */
.entry-task.is-changed .entry-interval {
    color: var(--site-color-ink);
    font-family: var(--font-semibold);
    font-weight: var(--font-semibold-weight);
}

.entry-task s {
    margin-right: 6px;
    color: var(--site-color-ink-soft);
    font-family: var(--font-regular);
    font-weight: var(--font-regular-weight);
}

.entry figcaption {
    max-width: 46ch;
    margin-top: 10px;
    color: var(--site-color-ink-soft);
    font-size: var(--site-text-note-size);
    line-height: var(--site-text-note-line-height);
}

.again {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-family: var(--site-text-name-family);
    font-weight: var(--site-text-name-weight);
    font-size: var(--site-text-name-size);
    line-height: var(--site-text-name-line-height);
}

.again svg {
    flex: none;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--site-color-ink);
    stroke-width: 1.6;
}

/* ---------- the pilot and the one action ---------- */

.pilot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--site-space-columns);
    align-items: end;
    padding: var(--site-space-pilot-band) var(--site-space-gutter);
    background: var(--site-color-band);
    border-top: var(--border-hairline) solid var(--site-color-rule);
}

.pilot h2 {
    max-width: 12ch;
    font-family: var(--site-text-pilot-family);
    font-weight: var(--site-text-pilot-weight);
    font-size: var(--site-text-pilot-size);
    line-height: var(--site-text-pilot-line-height);
    letter-spacing: var(--site-text-pilot-tracking);
}

.pilot .prose {
    display: grid;
    gap: 16px;
    max-width: 44ch;
    color: var(--site-color-ink);
}

/* The address is the page's one action; it is not due, so it is ink, not copper. */
.mail {
    font-family: var(--site-text-mail-family);
    font-weight: var(--site-text-mail-weight);
    font-size: var(--site-text-mail-size);
    line-height: var(--site-text-mail-line-height);
    letter-spacing: var(--site-text-mail-tracking);
    overflow-wrap: anywhere;
}

.mail a {
    text-decoration-thickness: var(--border-emphasis);
}

/* ---------- tablet: the reminders beside the words, the house under them ---------- */

@media (max-width: 1099px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "copy remind"
            "stage stage";
        grid-template-rows: auto;
        column-gap: 32px;
    }

    .hero h1 {
        max-width: 20ch;
        font-size: var(--site-text-headline-tablet-size);
        line-height: var(--site-text-headline-tablet-line-height);
        letter-spacing: var(--site-text-headline-tablet-tracking);
        text-wrap: balance;
    }

    .headline-more {
        display: inline;
    }

    .hero-copy {
        padding-top: 18px;
    }

    .stage {
        justify-self: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        max-width: none;
        margin-top: 28px;
        aspect-ratio: 4 / 3.3;
    }

    /* The camera crops the drawing to the current appliance; what lies outside the crop stays hidden. */
    .stage .art {
        overflow: hidden;
    }

    .note {
        left: var(--site-space-gutter);
        bottom: 12px;
        width: auto;
        max-width: 60%;
        padding: 7px 11px 8px;
        background: var(--site-color-ground);
        border: var(--border-hairline) solid var(--site-color-rule);
    }

    .reminders {
        max-width: 32rem;
        margin-top: clamp(10px, 2vh, 22px);
        padding-top: 18px;
        border-top: var(--border-rule) solid var(--site-color-ink);
    }

    .section-head,
    .pilot {
        grid-template-columns: minmax(0, 1fr);
    }

    .history {
        gap: 32px;
    }

    .loop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 34px;
    }

    .loop::before {
        display: none;
    }
}

/* ---------- phone: one column, the drawing beside the ledger ---------- */

@media (max-width: 699px) {
    body {
        font-size: var(--site-text-body-compact-size);
        line-height: var(--site-text-body-compact-line-height);
    }

    .top nav li:not(:last-child) {
        display: none;
    }

    .lockup {
        height: var(--site-logo-phone);
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "copy"
            "stage"
            "remind";
        padding-top: 10px;
    }

    .hero h1 {
        max-width: 15ch;
        padding-bottom: 0;
        font-size: var(--site-text-headline-phone-size);
        line-height: var(--site-text-headline-phone-line-height);
        letter-spacing: var(--site-text-headline-phone-tracking);
    }

    .hero-copy {
        margin-top: 0;
        padding-top: 10px;
        border-top: 0;
    }

    .stage {
        width: auto;
        height: auto;
        margin: 16px calc(var(--site-space-gutter) * -1) 0;
        aspect-ratio: auto;
    }

    .stage .art {
        position: relative;
        height: clamp(320px, 52vh, 460px);
    }

    .note {
        position: relative;
        width: auto;
        max-width: none;
        margin: 0 var(--site-space-gutter);
        padding: 0;
        background: transparent;
        border: 0;
    }

    .reminders {
        margin-top: 16px;
        padding-top: 0;
        border-top: 0;
    }

    .switch {
        margin: 16px 0 22px;
    }

    .history {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .history-figure {
        top: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        margin: 0 calc(var(--site-space-gutter) * -1);
        padding: 8px var(--site-space-gutter) 4px;
        background: var(--site-color-ground);
        border-bottom: var(--border-hairline) solid var(--site-color-rule);
    }

    .bo {
        width: auto;
        max-width: none;
        height: 148px;
    }

    .ledger {
        margin-top: 0;
        border-top: 0;
    }

    .ledger-head {
        padding: 0 0 4px;
        font-size: var(--site-text-fine-size);
        line-height: var(--site-text-fine-line-height);
    }

    .ledger-head strong {
        font-size: var(--site-text-body-compact-size);
    }

    .ledger-head span,
    .ledger-tag {
        display: none;
    }

    .ledger-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 5px 0;
        font-size: var(--site-text-fine-size);
    }

    /* On a phone the ledger beside the drawing shows the current row only. */
    .js-history .ledger-row {
        display: none;
    }

    .js-history .ledger-row.is-now {
        display: grid;
        background: none;
        box-shadow: none;
    }

    .step {
        min-height: 30vh;
    }

    .step:first-child {
        min-height: auto;
        padding-top: 24px;
        padding-bottom: 14vh;
    }

    .step:last-child {
        min-height: 36vh;
    }

    .loop {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        padding-left: 30px;
    }

    .loop li {
        padding: 0 0 26px;
    }

    .loop li::before {
        left: -30px;
        top: 4px;
    }

    .loop li::after {
        content: "";
        position: absolute;
        left: -22px;
        top: 24px;
        bottom: -2px;
        border-left: 1.4px solid var(--site-color-track);
    }

    .loop li:last-child::after {
        display: none;
    }

    .again {
        justify-content: flex-start;
    }
}

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

    .bo [data-from],
    .ledger-row,
    .step {
        transition: none;
    }
}