/* The app's own tokens, sampled from Sources/App/DesignSystem.swift rather
   than re-picked by eye. The site and the camera are the same object. */
:root {
    --bg: #0f0f10;
    --surface: #1a1a1c;
    --surface-raised: #242426;
    --fg: #e8e6e1;
    --muted: #8e8c88;
    --dim: #5a5a5a;
    --border: #333336;
    --accent: #c4a35a;
    --accent-hi: #e0c07e;
    --ready: #7ab87a;
    --warning: #c45c5c;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    /* Anything a camera would engrave. Keeping this split is most of why the
       app reads like an instrument, so the site keeps it too. */
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    --measure: 62ch;
    /* The floor is what a phone actually gets: 5vw on a 390-point screen is
       19.5px, so the minimum was always the value that applied and the page
       sat 20px from both edges — close enough that a bordered callout or a
       code block reads as touching the sides. 1.5rem is the floor now, and
       6vw gets away from it faster, so the gutter grows with the screen
       instead of waiting for a tablet to notice. */
    --gutter: clamp(1.5rem, 6vw, 3rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap { max-width: 68rem; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* Small engraved captions: uppercase, tracked out, monospace. */
.engraved {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
}

/* ---------- Header ---------- */

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

header .wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 60px;
}

header img { width: 30px; height: 30px; border-radius: 7px; }
header .name { font-weight: 600; letter-spacing: -0.01em; }
header nav { margin-left: auto; display: flex; gap: 1.5rem; align-items: center; }
header nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
header nav a:hover { color: var(--fg); }
@media (max-width: 640px) { header nav a:not(.button) { display: none; } }

/* ---------- Buttons ---------- */

.button {
    display: inline-block;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--accent);
    color: var(--bg);
    background: var(--accent);
    white-space: nowrap;
}
.button:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--bg); }
.button.ghost { background: none; color: var(--accent); }
.button.ghost:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-hi); }

/* ---------- Hero ---------- */

.hero { padding: clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 5rem); text-align: center; }
.hero .mark { width: 108px; height: 108px; border-radius: 24px; margin-bottom: 2rem; overflow: hidden; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); font-weight: 600; }
.hero .lede {
    max-width: 46ch;
    margin: 1.5rem auto 0;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--muted);
}
.hero .lede strong { color: var(--fg); font-weight: 600; }
.hero .actions { margin-top: 2.5rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.hero .note { margin-top: 1.25rem; }

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

section { padding: clamp(3.5rem, 9vw, 6rem) 0; border-top: 1px solid var(--border); }
section > .wrap > .engraved { margin-bottom: 0.9rem; }
section h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 600; }
section h2 + p { margin-top: 1.25rem; color: var(--muted); font-size: 1.05rem; }

/* ---------- The voices the product came from ----------
   Cards rather than one long pull-quote: three people saying three different
   things is the point, and a single block flattens them into one voice. */

.voices {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    margin-top: 2.5rem;
}

.voices figure {
    margin: 0;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* An opening quote mark, set in the brass, sitting just off the text. */
.voices figure::before {
    content: "\201C";
    position: absolute;
    top: 0.35rem;
    left: 1.35rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.35;
}

.voices blockquote {
    margin: 0 0 1.25rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--fg);
}

/* Pushed to the bottom so the attributions line up across cards of unequal
   length, the way a row of cards has to. */
.voices figcaption { margin-top: auto; color: var(--accent); }

/* ---------- Card grids ---------- */

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    margin-top: 2.5rem;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
}
.card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.6rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.card .engraved { display: block; margin-bottom: 0.9rem; color: var(--accent); }

/* ---------- Bento ----------
   Six columns so the row can be split 4+2 and 3+3. Four equal cards fit three
   to a row at this container width and orphan the fourth — and they flatten
   items of very different weight into the same box. */

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.bento .card { padding: 1.75rem; display: flex; flex-direction: column; }
.bento .wide { grid-column: span 4; }
.bento .narrow { grid-column: span 2; }
.bento .half { grid-column: span 3; }

/* The narrow tile shares a row with the tallest one, so its short text would
   otherwise sit against the top of a lot of empty card. Centred, the space
   reads as deliberate. */
.bento .narrow { justify-content: center; }
@media (max-width: 860px) { .bento .narrow { justify-content: flex-start; } }

.bento .card h3 { font-size: 1.3rem; margin-bottom: 0.75rem; letter-spacing: -0.01em; }
.bento .card p { font-size: 1rem; line-height: 1.6; }
.bento .aside { margin-top: 0.9rem; font-size: 0.9rem; color: var(--dim); }

/* Below the point where a 2-column tile still holds a sentence, everything
   goes full width — a 2-of-6 column on a phone is a word per line. */
@media (max-width: 860px) {
    .bento { grid-template-columns: 1fr; }
    .bento .wide, .bento .narrow, .bento .half { grid-column: auto; }
}

/* The mode-to-arc mapping, as the table it is. */
table.arcs {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.85rem;
}
table.arcs th {
    text-align: left;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}
table.arcs td { padding: 0.6rem 0; border-bottom: 1px solid var(--border); color: var(--muted); }
table.arcs tr:last-child td { border-bottom: 0; padding-bottom: 0; }
table.arcs td:first-child { color: var(--accent); font-weight: 600; }

/* The focal ladder, engraved the way the arc engraves it. */
.ladder {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
/* Sized so all nine sit on one line in the tile — one rung wrapping alone
   onto a second row reads as a mistake rather than as a ladder. */
.ladder li {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
}

/* ---------- Looks ---------- */

.looks { margin-top: 2.5rem; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.looks h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.looks > div > p { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.25rem; }

.look {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
    align-items: baseline;
}
.look:last-child { border-bottom: 1px solid var(--border); }
.look dt { font-weight: 600; font-size: 0.95rem; }
.look dt span { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.2rem; }
.look dd { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 520px) { .look { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ---------- Screenshots ---------- */

.shots {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    scroll-snap-type: x mandatory;
    /* Bleeds past the container so the strip reads as continuing off-screen. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
}
.shots figure { margin: 0; flex: 0 0 clamp(13rem, 40vw, 16rem); scroll-snap-align: start; }
.shots img { width: 100%; border-radius: 18px; border: 1px solid var(--border); display: block; background: var(--surface); aspect-ratio: 1320 / 2868; object-fit: cover; }
.shots figcaption { margin-top: 0.85rem; font-size: 0.88rem; color: var(--muted); }
.shots .placeholder { display: grid; place-items: center; text-align: center; padding: 2rem 1.25rem; color: var(--dim); font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; }

/* ---------- Honest limitations ---------- */

.limits { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0.9rem; }
.limits li { padding-left: 1.6rem; position: relative; color: var(--muted); font-size: 0.95rem; }
.limits li::before { content: "—"; position: absolute; left: 0; color: var(--warning); }
.limits strong { color: var(--fg); font-weight: 600; }

/* ---------- Footer ---------- */

/* ---------- The "developed by" dialog ---------- */

dialog#about {
    max-width: min(30rem, calc(100vw - 2.5rem));
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--fg);
    font-family: var(--sans);
    /* A dialog is centred by the UA; this only stops it being flush to the
       viewport edges on a short screen. */
    margin: auto;
}

dialog#about::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }

dialog#about h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; }
dialog#about .engraved { margin-bottom: 0.5rem; }
dialog#about p { color: var(--muted); font-size: 0.95rem; line-height: 1.65; }

/* The three words a prospective client scans for, in the engraved style the
   rest of the site uses for values a camera would stamp on itself. Set a
   shade smaller because mono runs larger than the surrounding sans at the
   same size, and uppercase runs larger again. */
dialog#about .cap {
    font-family: var(--mono);
    font-size: 0.84em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}
dialog#about p + p { margin-top: 0.9rem; }
dialog#about .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.75rem; }

dialog#about .close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
dialog#about .close:hover { color: var(--fg); background: var(--surface-raised); }

/* `showModal()` focuses the first control, and the UA's blue ring is loud
   against this palette. Recoloured rather than removed — a keyboard user
   still needs to see where they are. */
dialog#about :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Tutorials ----------
   Notes on how the camera is built, written for people who arrive from a
   search engine rather than from the landing page. Same tokens, same engraved
   captions — a reader who lands here first should recognise the app when they
   get to it, and one who comes from the pitch should not feel handed off to a
   different site. */

.crumbs { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 0.45rem; }

/* The masthead of an article, above the measure-limited body. */
.tut-head { padding: clamp(2.5rem, 7vw, 4rem) 0 0; }
.tut-head h1 { font-size: clamp(2rem, 5.5vw, 3.15rem); font-weight: 600; margin-top: 1.25rem; max-width: 20ch; }
.tut-head .standfirst { max-width: var(--measure); margin: 1.5rem 0 0; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--muted); }
.tut-head .standfirst strong { color: var(--fg); font-weight: 600; }

/* Byline and reading time, on the hairline that separates them from the body. */
.tut-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
    margin-top: 2rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.tut-meta > * { margin: 0; }

/* ---------- Article body ----------
   Held to the same measure as the landing page's .narrow, but with its own
   vertical rhythm: a marketing section is a few sentences, an article is
   forty paragraphs and needs the spacing to be a system rather than inline
   styles. */

.prose { max-width: var(--measure); }
.prose > * { margin-inline: 0; }
.prose p, .prose ul, .prose ol { color: var(--muted); }
.prose p { margin: 1.15rem 0; }
.prose strong { color: var(--fg); font-weight: 600; }

.prose h2 {
    font-size: clamp(1.4rem, 3.2vw, 1.85rem);
    font-weight: 600;
    margin: 3.5rem 0 0;
    scroll-margin-top: 80px;   /* clears the sticky header on a jump link */
}
.prose h2 + p { margin-top: 1rem; color: var(--muted); font-size: 1rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 2.25rem 0 0; scroll-margin-top: 80px; }
.prose h3 + p { margin-top: 0.75rem; }

/* The step number that runs alongside a heading, engraved rather than part of
   the sentence — so the heading still reads as a heading out of context, in a
   search result or a table of contents. */
.prose h2 .step { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }

.prose ul, .prose ol { padding-left: 1.2rem; margin: 1.15rem 0; }
.prose li { margin: 0.5rem 0; }
.prose li::marker { color: var(--dim); }

.prose > .wide { max-width: none; }

/* Inline code, at the weight the engraved captions use. */
.prose code {
    font-family: var(--mono);
    font-size: 0.86em;
    color: var(--fg);
    background: var(--surface-raised);
    border-radius: 5px;
    padding: 0.1em 0.35em;
}

/* ---------- Code blocks ----------
   No highlighter. A syntax library is 30 KB and a build step for colour that
   this palette would have to be talked out of anyway; the language chip and
   the mono face carry it. */

.prose pre {
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.855rem;
    line-height: 1.6;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: var(--fg); }

/* The language, stamped in the corner the way a lens carries its numbers. */
.prose pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 0.55rem;
    right: 0.8rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
}

/* Long listings scroll rather than push the page down. */
.prose pre.tall { max-height: 32rem; overflow-y: auto; }

/* ---------- Callouts ---------- */

.callout {
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 0 12px 12px 0;
}
.callout p { margin: 0.5rem 0 0; font-size: 0.95rem; }
.callout p:first-of-type { margin-top: 0; }
.callout .engraved { display: block; color: var(--accent); margin-bottom: 0.6rem; }
.callout.warn { border-left-color: var(--warning); }
.callout.warn .engraved { color: var(--warning); }

/* ---------- Table of contents ---------- */

.toc { margin: 2.5rem 0; padding: 1.35rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.toc .engraved { display: block; margin-bottom: 0.85rem; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.toc li { margin: 0.3rem 0; break-inside: avoid; }
.toc a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.toc a:hover { color: var(--accent); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* ---------- The live demo ----------
   The control itself, running in the page. It is the one thing an article
   about a control can do that a video cannot, so it sits above the fold of
   the body rather than at the end as a reward. */

.demo { margin: 2.5rem 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.demo .stage { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; }
.demo svg { flex: 0 0 auto; width: min(260px, 62vw); height: auto; touch-action: none; }
.demo .readout { flex: 1 1 9rem; min-width: 8rem; }
.demo .readout .value { font-family: var(--mono); font-size: clamp(1.5rem, 5vw, 2rem); color: var(--accent); line-height: 1.2; }
.demo .readout .label { display: block; margin-top: 0.35rem; }
.demo figcaption { padding: 0.9rem 1.5rem; border-top: 1px solid var(--border); color: var(--dim); font-size: 0.85rem; }

.demo .controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.demo .controls button {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}
.demo .controls button:hover { color: var(--fg); border-color: var(--dim); }
.demo .controls button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* The wheel is a slider, so it takes a focus ring and arrow keys like one. */
.demo .wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.demo .wheel { cursor: grab; }
.demo .wheel:active { cursor: grabbing; }

/* The ink, styled here rather than by attribute on each node: `var()` inside
   an SVG presentation attribute is not reliably substituted, and the palette
   belongs in one file anyway. */
.demo .band { fill: rgba(0, 0, 0, 0.34); }
.demo .hairline { fill: none; stroke: var(--border); stroke-width: 1; }
.demo .tick { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; }
.demo .tick-lit { stroke: var(--muted); stroke-width: 2; }
.demo .tick-active { stroke: var(--accent); stroke-width: 3; }
.demo .rung { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.demo .rung.is-active { fill: var(--accent); font-weight: 600; }
.demo .hub { fill: var(--surface-raised); stroke: var(--border); stroke-width: 1; }

/* Without JavaScript the figure still has to say something rather than sit
   there as an empty box. */
.demo .fallback { padding: 1.5rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- Spec table ---------- */

table.spec { width: 100%; margin: 1.75rem 0; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; }
table.spec caption { text-align: left; font-family: var(--sans); font-size: 0.9rem; color: var(--dim); margin-bottom: 0.75rem; }
table.spec th { text-align: left; font-weight: 400; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); }
table.spec td { padding: 0.5rem 0; border-bottom: 1px solid var(--border); color: var(--muted); }
table.spec td:first-child { color: var(--fg); padding-right: 1.5rem; }
table.spec tr:last-child td { border-bottom: 0; }
table.spec strong { color: var(--accent); font-weight: 600; }

/* ---------- Tutorial index ---------- */

.tut-list { display: grid; gap: 1rem; margin-top: 2.5rem; }

.tut-card {
    display: block;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
}
a.tut-card:hover { border-color: var(--accent); }
.tut-card h3 { font-size: 1.3rem; font-weight: 600; margin: 0.75rem 0 0; letter-spacing: -0.01em; }
a.tut-card:hover h3 { color: var(--accent-hi); }
.tut-card p { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.98rem; }
.tut-card .tags { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tut-card .tags li { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.55rem; }

/* A card for something not written yet. Deliberately not a link, and
   deliberately not styled to look like one — a hub that promises four
   articles and delivers one teaches a reader not to come back. */
.tut-card.pending { border-style: dashed; opacity: 0.72; }
.tut-card.pending h3 { color: var(--muted); }

/* ---------- Article footer nav ---------- */

.tut-next { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }

footer { border-top: 1px solid var(--border); padding: 3rem 0 4rem; color: var(--dim); font-size: 0.85rem; }
/* The company name is a control, so it has to look like one. */
footer [data-about] { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
footer [data-about]:hover { color: var(--accent); }
footer .wrap { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
footer nav { margin-left: auto; display: flex; gap: 1.5rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--fg); }

/* On a phone the header's links are hidden, so this is not a sign-off — it is
   the only navigation on the page, and it has to behave like navigation.
   Stacked, links first, and each one padded to something a thumb can hit
   rather than a 14px line of text.
   `margin-left: auto` has to go with it: on one line it pushes the links to
   the right, but once the row wraps it pushes them to the right of *their own*
   line, which reads as two things that could not agree on an alignment. */
@media (max-width: 640px) {
    footer { padding: 2.5rem 0 3rem; }
    footer .wrap { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    footer nav {
        order: -1;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 0 1.5rem;
        width: 100%;
    }
    footer nav a { padding: 0.4rem 0; }
}