/* ---- the typeface, served from here --------------------------------------------
 * Space Grotesk, SIL Open Font License 1.1 — fonts/OFL.txt, which must travel with
 * the files. Two woff2 of about 20 KB each.
 *
 * It was loaded from fonts.googleapis.com until 23 October 2026. That handed Google
 * every visitor's IP address and the page they were reading, on a site whose privacy
 * policy says it uses no third parties — and a German court has fined a site operator
 * over this exact arrangement. Serving it from our own domain costs 40 KB and removes
 * the contradiction, along with a DNS lookup and a TLS handshake.
 *
 * One file per subset, not per weight: Space Grotesk is a variable font, so 400, 500
 * and 700 all come out of the same file. `font-display: swap` keeps text readable
 * while it loads, and the unicode-ranges are Google's own, so a page of plain English
 * never fetches the Central European file.
 */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/space-grotesk-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Strixeo — one stylesheet, no framework, no build step.
 *
 * Palette and type are the ones the mark was approved in (design/Lockup.dc.html): cream ground,
 * bark ink, tawny accent, Space Grotesk.
 *
 * **Two widths, deliberately.** Layout runs to 72rem so a section can hold a grid; running text
 * is capped at 42rem, because prose stops being readable much past ninety characters a line. The
 * first version of this site used one narrow width for everything, which turned every page into a
 * single column of stacked paragraphs — a document, not a product site.
 */

:root {
    color-scheme: light dark;

    --ink: #3f2d1e;
    --ink-soft: #6d5c48;
    --ink-faint: #7a6a52;   /* 4.65:1 on --page, 5.15:1 on --card */
    --page: #f6f1e6;
    --card: #fffdf8;
    --line: #e4dac7;
    --accent: #8f5a25;
    --accent-soft: #f0e6d4;
    /* The same brown on a near-black band measures 3.18:1, so dark bands get
     * their own accent rather than the page's. */
    --accent-on-night: #d9a65a;
    --night: #1a1410;
    --on-night: #f2ece0;
    --on-night-soft: #bdae97;

    --w-wide: 72rem;
    --w-text: 42rem;
    --band: clamp(56px, 9vw, 104px);
    --radius: 16px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #f2ece0; --ink-soft: #c2b49c; --ink-faint: #8d7d68;
        --accent-on-night: #d9a65a;
        --page: #15100c; --card: #1f1813; --line: #35291f;
        --accent: #d9a65a; --accent-soft: #2b2016; --night: #0e0b08;
    }
}

:root[data-theme="dark"] {
    --ink: #f2ece0; --ink-soft: #c2b49c; --ink-faint: #8d7d68;
    --accent-on-night: #d9a65a;
    --page: #15100c; --card: #1f1813; --line: #35291f;
    --accent: #d9a65a; --accent-soft: #2b2016; --night: #0e0b08;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 17px/1.6 "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

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

/* ---- structure ------------------------------------------------------------------ */

.wrap { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; }
@media (max-width: 30rem) { .wrap { padding: 0 16px; } }

/* A full-width band of colour. Sections alternate, so the page has a rhythm visible while
 * scrolling past at speed rather than one undifferentiated column. */
.band { padding: var(--band) 0; }
.band--soft { background: var(--card); border-block: 1px solid var(--line); }
.band--night { background: var(--night); color: var(--on-night); }
.band--night h2, .band--night h3 { color: var(--on-night); }
.band--night p { color: var(--on-night-soft); }

.measure { max-width: var(--w-text); }
.center { text-align: center; margin-inline: auto; }

/* ---- type ----------------------------------------------------------------------- */

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 16px; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: 20px; }
h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.015em; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }
.band--night .lead, .hero .lead { color: var(--on-night-soft); }

.eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 14px;
}
.band--night .eyebrow, .hero .eyebrow { color: var(--accent-on-night); }
.band--night a, .hero a { color: var(--accent-on-night); }

a { color: var(--accent); }

/* ---- header --------------------------------------------------------------------- */

/* The first focusable thing on every page, visible only once it has focus. Without it
 * a keyboard reaches the content through six navigation links on every page. */
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 50;
    padding: 10px 18px; border-radius: 0 0 10px 10px;
    background: var(--accent); color: var(--page); font-weight: 700;
    text-decoration: none; transition: top .12s ease;
}
.skip:focus { top: 0; }

/* A sticky header covers whatever an anchor scrolls to, so every target reserves its
 * own height plus a little air. */
:target, [id] { scroll-margin-top: 86px; }

header.site {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--page) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}

header.site .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; height: 66px;
}

.brand {
    display: inline-flex; align-items: baseline; gap: 1px;
    font-weight: 700; font-size: 1.24rem; letter-spacing: 0.02em;
    color: var(--ink); text-decoration: none;
}

/* The O of STRIXEO is the owl, on the baseline with the letters rather than beside them. */
/* **Bigger than the cap height, deliberately.** The artwork carries its own margin — the
 * ring is 104 of a 120 box — so sizing the SVG to match the letters leaves the ring reading
 * noticeably smaller than the O it replaces. 1.26em puts the ring at about the width of the
 * other round letters; the nudge drops its centre from the line box onto the letters' own. */
.brand .owl {
    width: 1.12em; height: 1.12em; align-self: center;
    margin: -0.25em -0.03em -0.25em 0.01em;
    transform: translateY(0.03em);
    color: var(--ink);
}
.brand .owl .ac { fill: var(--accent); }
.brand .owl .bg { fill: var(--page); }

header.site nav { display: flex; align-items: center; gap: 22px; }
header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
header.site nav a:hover { color: var(--accent); }

/* ---- the header at narrow widths -------------------------------------------------
 * Six links and a button need about 1000px. Below that they used to wrap onto two
 * lines and then, at around 600px, push the page wider than the window and raise a
 * horizontal scrollbar. So the full row is swapped for a disclosure well before it
 * gets cramped, rather than hidden only on a phone.
 *
 * `<details>` and not a checkbox: it opens with Enter or Space, closes with Escape,
 * and announces its own expanded state. No JavaScript either way.
 */

.nav-menu { position: relative; }
.nav-menu > summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--card);
    color: var(--ink); font-size: 0.95rem; font-weight: 600;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { border-color: var(--accent); color: var(--accent); }
.nav-menu[open] > summary { border-color: var(--accent); color: var(--accent); }

.nav-menu > nav {
    position: absolute; right: 0; top: calc(100% + 10px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    min-width: 220px; padding: 8px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
}
.nav-menu > nav a { padding: 11px 14px; border-radius: 9px; }
.nav-menu > nav a:hover { background: var(--accent-soft); color: var(--accent); }

/* One of the two shows at a time. 64rem, not 36: the row is cramped long before it
 * overflows, and a wrapped header is a broken header too. */
.nav-menu { display: none; }
@media (max-width: 64rem) {
    .nav-wide { display: none; }
    .nav-menu { display: block; }
}

.btn {
    display: inline-block; background: var(--accent); color: var(--page) !important;
    padding: 12px 24px; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn--ghost {
    background: transparent; color: var(--on-night) !important;
    border: 1px solid color-mix(in srgb, var(--on-night) 38%, transparent);
}
/* The ghost is cream, for a dark band. On a light one that is cream on cream — a
 * button you can only find by hovering. */
.band:not(.band--night) .btn--ghost {
    color: var(--ink) !important;
    border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}
@media (max-width: 36rem) { .hide-s { display: none; } }

/* ---- hero ----------------------------------------------------------------------- */

.hero { background: var(--night); color: var(--on-night); padding: var(--band) 0; }
.hero h1 { color: var(--on-night); }

.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.hero-shot {
    margin: 0; border-radius: var(--radius); overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--on-night) 14%, transparent);
    box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}

.shot-caption { color: var(--on-night-soft); font-size: 0.86rem; line-height: 1.5; margin: 14px 2px 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- numbers -------------------------------------------------------------------- */

.stats { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat .n {
    font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700;
    letter-spacing: -0.03em; color: var(--accent); line-height: 1.1;
}
.stat .t { font-size: 0.92rem; color: var(--ink-soft); margin-top: 8px; }
.band--night .stat .t { color: var(--on-night-soft); }

/* ---- card grids ----------------------------------------------------------------- */

.grid { display: grid; gap: 22px; }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px; display: flex; flex-direction: column;
}
.band--soft .card { background: var(--page); }
.card p { font-size: 0.97rem; color: var(--ink-soft); }
.card figure { margin: 0 0 20px; border-radius: 10px; overflow: hidden; background: #241c14; }

.card-note {
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 0.86rem; color: var(--ink-faint);
}
.card-note b { color: var(--ink-soft); font-weight: 500; }

.chip {
    align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; border-radius: 999px; padding: 4px 11px; margin-bottom: 14px;
    border: 1px solid transparent;
}
.chip.now { background: var(--accent-soft); color: var(--accent); }
.chip.soon { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.chip.later { background: transparent; color: var(--ink-faint); border-color: var(--line); }

/* ---- the ladder ----------------------------------------------------------------- */

.ladder { display: grid; gap: 22px; counter-reset: rung; }
@media (min-width: 56rem) { .ladder { grid-template-columns: repeat(3, 1fr); } }

.rung {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 30px 28px 28px;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: border-color .15s, transform .15s;
}
.band--soft .rung { background: var(--page); }
a.rung:hover { border-color: var(--accent); transform: translateY(-2px); }

.rung::before {
    counter-increment: rung; content: counter(rung);
    width: 40px; height: 40px; border-radius: 50%; margin-bottom: 18px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 1.15rem; font-weight: 700; display: grid; place-items: center;
}

.rung .need { color: var(--accent); font-size: 0.89rem; font-weight: 500; margin: 0 0 10px; }
.rung p { color: var(--ink-soft); font-size: 0.97rem; }
.rung .more { margin-top: auto; padding-top: 18px; font-size: 0.92rem; font-weight: 700; color: var(--accent); }

/* ---- setup page: the five answers ----------------------------------------------- */

.spec { border-top: 1px solid var(--line); margin-top: 8px; }
.spec > div { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 26px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 46rem) { .spec > div { grid-template-columns: 13rem 1fr; gap: 36px; } }

.spec .k {
    color: var(--ink-faint); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; padding-top: 5px;
}
.spec .v { max-width: var(--w-text); }
.spec .v p { margin-bottom: 10px; }
.spec .v ul, .spec .v ol { margin: 0; padding-left: 1.15rem; }
.spec .v li { margin-bottom: 9px; }

/* The honest half, styled as calmly as the rest: a warning box reads as legal cover, and
 * this is meant to read as competence. */
/* ---- a plain checklist -----------------------------------------------------------
 * The thing a practical page should open with: what you have to have, before any of
 * the reasoning about it.
 */

.check { list-style: none; margin: 22px 0; padding: 0; }
.check li {
    position: relative; padding-left: 32px; margin-bottom: 13px;
    color: var(--ink-soft); line-height: 1.5;
}
.check li::before {
    content: ""; position: absolute; left: 4px; top: 7px;
    width: 11px; height: 6px;
    border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
    transform: rotate(-45deg);
}
.check li strong { color: var(--ink); }
.band--night .check li { color: var(--on-night-soft); }
.band--night .check li strong, .band--night .check li em { color: var(--on-night); }
.band--night .check li::before { border-color: var(--accent-on-night); }

/* ---- a numbered chain ------------------------------------------------------------
 * One sighting told as the four things that happened to it. Numbered because the order
 * is the argument: noticed, followed, named, delivered — each step only possible
 * because the one before it worked.
 */

.chain { counter-reset: chain; list-style: none; margin: 26px 0; padding: 0; }
.chain li {
    position: relative; padding-left: 46px; margin-bottom: 18px;
    color: var(--ink-soft); line-height: 1.55;
}
.chain li::before {
    counter-increment: chain; content: counter(chain);
    position: absolute; left: 0; top: -1px;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: var(--page);
    font-size: 0.86rem; font-weight: 700;
}
.chain li strong { color: var(--ink); }
.band--night .chain li { color: var(--on-night-soft); }
.band--night .chain li strong { color: var(--on-night); }
.band--night .chain li::before { background: var(--accent-on-night); color: var(--night); }

.limits { border-left: 3px solid var(--ink-faint); padding-left: 20px; }
.limits li { color: var(--ink-soft); }

.crumb { font-size: 0.88rem; color: var(--ink-faint); margin: 0 0 14px; }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

/* ---- prose, tables, notes -------------------------------------------------------- */

.prose { max-width: var(--w-text); }
.prose h2 { margin-top: 52px; }
.prose h3 { margin-top: 34px; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: 9px; }

/* A table narrower than its columns scrolls sideways. On a phone that was silent: no
 * edge, no hint, and the last column simply did not exist as far as anyone could tell.
 * A shadow on whichever side has more table behind it, and a focusable scroller so the
 * keyboard can reach it too. */
table {
    width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.95rem;
    display: block; overflow-x: auto;
    background:
        linear-gradient(to right, var(--page) 30%, transparent) left / 40px 100% no-repeat,
        linear-gradient(to left,  var(--page) 30%, transparent) right / 40px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) left / 14px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}
table:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
th, td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-faint); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--accent-soft); padding: 2px 6px; border-radius: 5px; }

.note {
    background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; margin: 28px 0;
    color: var(--ink-soft); font-size: 0.97rem; max-width: var(--w-text);
}
.note strong { color: var(--ink); }

.updated { color: var(--ink-faint); font-size: 0.9rem; margin: -8px 0 34px; }

/* ---- footer ---------------------------------------------------------------------- */

footer.site { background: var(--night); color: var(--on-night-soft); padding: 46px 0 56px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; font-size: 0.9rem; }
footer.site a { color: var(--on-night-soft); text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---- image placeholder ----------------------------------------------------------
 * Stands in for a photograph that exists but has not been dropped in yet. Deliberately
 * obvious: a grey box nobody mistakes for a design decision, so it cannot quietly ship.
 */
/* ---- point at a picture to enlarge it -------------------------------------------
 * Several of these are small by nature: a thermal frame is 384x512 as the camera
 * wrote it, and a rendered part is a detail of a detail. Pointing at one magnifies
 * it without a lightbox, a script, or a second copy of every image.
 *
 * `img:hover` and nothing else, behind `@media (hover: hover)`. There was a hidden
 * checkbox here so a finger could tap instead, and a tap on a touch screen leaves the
 * picture standing large with nowhere to hover away to. A gesture with no finger
 * equivalent is better absent on a phone than stuck.
 *
 * 1.6x, because the sources have the pixels for it: the renders are 760 wide and
 * shown around 210, the frames 384 shown around 200. Nothing is upscaled past what
 * it actually holds.
 */

/* Three figure classes, because three of them hold a picture: the captioned photograph,
 * a frame of the contact sheet, and a single large frame. A figure that holds one and is
 * not named here is one you can point at with nothing happening, which is how the night
 * page shipped unzoomable. */
.photo, .fr, .shot { position: relative; }
.photo img, .fr img, .shot img { transition: transform .18s ease, box-shadow .18s ease; }

/* The picture is a link to itself: the keyboard route to the same enlargement the
 * pointer gets, and the only one a touch screen has. It must not look like body text. */
a.full { display: block; text-decoration: none; border-radius: var(--radius); }
a.full:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.band--night a.full:focus-visible, .hero a.full:focus-visible {
    outline-color: var(--accent-on-night);
}

@media (hover: hover) {
    .photo img:hover, .fr img:hover, .shot img:hover {
        /* Transform rather than width, so nothing below reflows while it happens.
         * It grows round its own centre, so the pointer stays inside it and the
         * hover does not drop the instant it begins. */
        transform: scale(1.15);
        box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
        position: relative; z-index: 30;
        cursor: zoom-in;
    }
    /* A frame, a rendered part or a screenshot is small to begin with and has the
     * pixels to spare. */
    .frames img:hover, .shots img:hover { transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) { .photo img, .fr img, .shot img { transition: none; } }

/* ---- a row of thermal frames ----------------------------------------------------
 * Three or four at once, because the argument is the comparison: the same subject at
 * different distances, each under what the feeder concluded about it. Side by side on
 * anything wide enough, stacked on a phone.
 */

.frames {
    display: grid; gap: 18px; margin: 28px 0 20px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.frames .photo img {
    /* The frames are 384x512 as the camera wrote them. Contained, never cropped: a
     * picture of how much is left of an animal at a distance must not be trimmed. */
    aspect-ratio: 3 / 4; object-fit: contain;
    background: #140f0c;
}
.frames--models { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.frames--models .photo img {
    /* Rendered parts, not photographs: they want room round them and the page's own
     * background, not the black a thermal frame needs. */
    aspect-ratio: 4 / 3; object-fit: contain; background: transparent;
    box-shadow: none;
}

.frames figcaption b { color: var(--ink-soft); }
.band--night .frames figcaption b { color: var(--on-night); }

/* ---- a row of phone screenshots -------------------------------------------------
 * The one place the site shows the app rather than what the app saw. 1:2, contained,
 * and on the page's own background: a screenshot is a picture of a screen, and giving
 * it a black mat of its own would read as a second device.
 */

.shots {
    display: grid; gap: 22px; margin: 34px 0 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* One screenshot beside a column of text, rather than a row of them. Capped, because a
 * 1:2 picture given half a wide page becomes a thousand pixels of phone. */
.shots--one { grid-template-columns: minmax(0, 270px); justify-content: center; }

.shots .photo img {
    aspect-ratio: 1 / 2; object-fit: contain;
    background: transparent; box-shadow: none;
    border-radius: 14px;
}

/* ---- a real photograph ----------------------------------------------------------
 * Sits where a placeholder sat, so the page's rhythm does not change when one is
 * replaced. Captioned, because the argument of this site is that the thing exists:
 * a photograph with a date under it carries that where a bare image does not.
 */

.photo { margin: 0; }
.photo img {
    width: 100%; object-fit: cover; display: block;
    border-radius: var(--radius);
    /* The subject is a black box against a white October sky. A frame keeps it from
     * bleeding into a pale page and losing its edges entirely. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-faint) 25%, transparent);
}
.photo figcaption {
    font-size: 0.82rem; line-height: 1.45; color: var(--ink-faint);
    padding: 10px 2px 0;
}
.band--night .photo figcaption { color: var(--on-night-soft); }

.placeholder {
    display: grid; place-items: center; text-align: center;
    border: 2px dashed color-mix(in srgb, var(--ink-faint) 55%, transparent);
    border-radius: var(--radius); background: color-mix(in srgb, var(--ink-faint) 8%, transparent);
    color: var(--ink-faint); aspect-ratio: 3 / 2; padding: 24px; margin: 0;
}
.placeholder b { display: block; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 4px; }
.placeholder span { font-size: 0.84rem; line-height: 1.45; }
.band--night .placeholder { border-color: color-mix(in srgb, var(--on-night) 30%, transparent); color: var(--on-night-soft); }
.band--night .placeholder b { color: var(--on-night); }

/* ---- the three senses -----------------------------------------------------------
 * The spine of the site. Alternating rows rather than cards: each sense gets room to say
 * what it is for and where it stops, which a card cannot hold without becoming a wall of
 * small text.
 */

.senses { display: grid; gap: 28px; margin-top: 44px; }

.sense {
    display: grid; gap: 26px; align-items: center;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 30px;
}
.band--soft .sense { background: var(--page); }

@media (min-width: 52rem) {
    .sense { grid-template-columns: 300px 1fr; gap: 44px; padding: 36px 40px; }
    /* Every other row mirrored, so a long page does not become a column of identical blocks. */
    .sense:nth-child(even) { grid-template-columns: 1fr 300px; }
    .sense:nth-child(even) .sense-art { order: 2; }
}

.sense-art {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 12px; padding: 20px; color: var(--ink-faint);
}
.diagram { width: 100%; height: auto; display: block; }

.sense-text h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: 12px; }
.sense-text p { color: var(--ink-soft); }
.sense-stop { font-size: 0.96rem; }
.sense-stop b { color: var(--ink); }

/* ---- the four steps -------------------------------------------------------------- */

@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
/* The four numbered steps are one paragraph each; the cards under "what we are trying"
   are not, and margin:0 would run their paragraphs together. */
.step p + p { margin-top: 12px; }

.step-n {
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 1rem; font-weight: 700; display: grid; place-items: center;
}

/* A standalone limits list, outside the setup-page context. */
.band--night .limits { border-left-color: color-mix(in srgb, var(--on-night) 35%, transparent); }
.band--night .limits li { color: var(--on-night-soft); }
.band--night .limits strong { color: var(--on-night); }
.limits ul { margin: 0; padding-left: 1.15rem; }
.limits li { margin-bottom: 14px; }

.sense .more { margin-top: 16px; font-size: 0.93rem; font-weight: 700; }
.sense .more a { text-decoration: none; }
.sense .more a:hover { text-decoration: underline; }
.sense-text .prose p:last-child { margin-bottom: 0; }

/* A table inside a dark band: the default borders and label colour vanish against it. */
.band--night th { color: var(--on-night-soft); }
.band--night td { border-bottom-color: color-mix(in srgb, var(--on-night) 18%, transparent); }
.band--night th { border-bottom-color: color-mix(in srgb, var(--on-night) 28%, transparent); }
.band--night table { color: var(--on-night-soft); }
.band--night td strong { color: var(--on-night); }

/* ---- the story -------------------------------------------------------------------
 * Two columns at width so it reads as an argument rather than a wall; one column on a
 * phone. The closing line sits apart from both, because it is the promise rather than
 * part of the reasoning.
 */

.story h2 { max-width: 20ch; margin-bottom: 36px; }

.story-cols { display: grid; gap: 28px; }
@media (min-width: 54rem) { .story-cols { grid-template-columns: 1fr 1fr; gap: 52px; } }
.story-cols p { font-size: 1.04rem; line-height: 1.62; }

.story-close {
    max-width: var(--w-text); margin-top: 40px; padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--on-night) 20%, transparent);
    font-size: 1.04rem;
}
.band--night .story-close { color: var(--on-night-soft); }

/* ---- the closing thought ---------------------------------------------------------
 * Each sense page otherwise ends on a specification table, which is accurate and says
 * nothing about why anyone should care. Set larger and quieter than body text, so it
 * reads as the page drawing breath rather than another fact.
 */
.why {
    max-width: var(--w-text); margin: 44px 0 0;
    padding-top: 30px; border-top: 1px solid var(--line);
}
.why p { font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }


/* The header lockup grows a little too — it was set when the owl was the only mark. */
header.site .brand { font-size: 1.4rem; }

/* ---- one night, unedited ---------------------------------------------------------
 * A contact sheet of a whole night. The frames that held an animal are marked, because
 * the point of the page is that most of them did not.
 */

.frames {
    display: grid; gap: 12px; margin-top: 40px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.fr { margin: 0; }
.fr img {
    width: 100%; border-radius: 9px; display: block;
    border: 1px solid var(--line); background: #241c14;
}
.fr.is-animal img { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.fr figcaption {
    display: flex; justify-content: space-between; gap: 8px;
    margin-top: 7px; font-size: 0.8rem; color: var(--ink-faint);
}
.fr figcaption b { color: var(--ink-soft); font-weight: 500; }
.fr.is-animal figcaption span { color: var(--accent); font-weight: 700; }

.shot { margin: 0; }
.shot img {
    width: 100%; height: auto;
    /* The radius and the border are on the picture, not on a clipping figure: overflow
     * hidden here would crop the enlargement it is supposed to show. */
    border-radius: var(--radius); border: 1px solid var(--line);
}

/* The climbing contrast of one animal walking in. Set large: it is the evidence. */
.nums {
    font-size: 1.06rem; color: var(--ink-faint); letter-spacing: 0.01em;
    padding: 16px 0; border-block: 1px solid var(--line); margin-bottom: 18px;
}
.nums strong { color: var(--accent); }