/* ==========================================================================
   Habitat 2D — the "newsprint" design system
   Single hand-written stylesheet, no build step. Every value here is lifted
   verbatim from the Claude Design v2 artboards (cream ground, 3px ink
   borders, DotGothic16 display, no drop shadows anywhere). The artboards
   were all inline styles; the tokens and class names are the one thing
   invented in the port. Keep it that way: no inline style="" (strict CSP).
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */

@font-face {
    font-family: 'DotGothic16';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dotgothic16-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---------- tokens ---------- */

:root {
    /* surfaces */
    --cream: #f7f2e7;
    --cream-alt: #efe7d6;
    --white: #ffffff;
    --ink: #1f2430;

    /* text */
    --body: #4a4535;
    --muted: #7a705e;
    --muted-2: #6f6656;
    --on-dark: #cfc8b8;
    --on-dark-muted: #9a9282;
    --ink-on-yellow: #3d2f10;
    --muted-on-yellow: #6b4c07;

    /* rules and textures */
    --rule: #ddd2ba;
    --hatch-a: #e6dcc6;
    --hatch-b: #d9ceb4;
    --hatch: repeating-linear-gradient(135deg, var(--hatch-a) 0 10px, var(--hatch-b) 10px 20px);

    /* accents */
    --yellow: #f2b53c;
    --yellow-hover: #ffc855;
    --vermilion: #ec5b3a;
    --blue: #2f4bd8;
    --blue-hover: #4560ea;
    --blue-pale: #c3cdfb;
    --green: #0f8b6f;
    --lilac: #8b7fd8;
    --felt: #0f6b57;
    --felt-rule: #0a4f40;
    --felt-text: #d6efe6;
    --felt-muted: #8fbfae;
    --error: #c33b1c;
    --disabled: #8b93b8;

    /* structure */
    --border: 3px solid var(--ink);
    --border-soft: 3px solid var(--rule);
    --pad-x: 28px;

    /* type */
    --font-display: 'DotGothic16', monospace;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

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

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
}

a {
    color: var(--blue);
    text-decoration: none;
}
a:hover {
    color: var(--ink);
}

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

img {
    max-width: 100%;
}

details summary::-webkit-details-marker {
    display: none;
}
details summary {
    list-style: none;
    cursor: pointer;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 30;
    background: var(--yellow);
    color: var(--ink);
    border: var(--border);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.skip-link:focus {
    left: 8px;
}

/* ---------- colour utilities (one per accent, for numbers, swatches, tags) ---------- */

.c-yellow { color: var(--yellow); }
.c-green { color: var(--green); }
.c-vermilion { color: var(--vermilion); }
.c-blue { color: var(--blue); }
.c-ink { color: var(--ink); }
.c-lilac { color: var(--lilac); }
.c-muted { color: var(--muted); }

.bg-yellow { background: var(--yellow); }
.bg-green { background: var(--green); }
.bg-vermilion { background: var(--vermilion); }
.bg-blue { background: var(--blue); }
.bg-ink { background: var(--ink); }
.bg-lilac { background: var(--lilac); }

/* ---------- layout primitives ---------- */

/* The artboards' one responsive idea: auto-fit grids with a minimum column.
   min(…, 100%) keeps a 340px minimum from overflowing a 320px phone. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 250px), 100%), 1fr));
    gap: var(--gap, 22px);
}
.grid--center { align-items: center; }
.grid--340 { --min: 340px; }
.grid--320 { --min: 320px; }
.grid--300 { --min: 300px; }
.grid--280 { --min: 280px; }
.grid--250 { --min: 250px; }
.grid--230 { --min: 230px; }
.grid--220 { --min: 220px; }
.grid--210 { --min: 210px; }
.grid--200 { --min: 200px; }
.grid--180 { --min: 180px; }
.grid--170 { --min: 170px; }

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 16px);
    min-width: 0;
}

.gap-8 { --gap: 8px; }
.gap-12 { --gap: 12px; }
.gap-14 { --gap: 14px; }
.gap-16 { --gap: 16px; }
.gap-18 { --gap: 18px; }
.gap-20 { --gap: 20px; }
.gap-22 { --gap: 22px; }
.gap-24 { --gap: 24px; }
.gap-26 { --gap: 26px; }
.gap-30 { --gap: 30px; }
.gap-40 { --gap: 40px; }
.gap-44 { --gap: 44px; }

.actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
}

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

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px var(--pad-x);
    background: var(--ink);
    color: var(--cream);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header--static {
    position: static;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cream);
}
.brand:hover {
    color: var(--cream);
}
/* The mark: one yellow square whose three hard shadows draw the other three.
   The only box-shadow in the design, and it is a shape rather than a shadow. */
.brand__mark {
    width: 16px;
    height: 16px;
    background: var(--yellow);
    box-shadow: 5px 0 0 var(--vermilion), 0 5px 0 var(--blue), 5px 5px 0 var(--cream);
}
.brand__name {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 14px;
    flex-wrap: wrap;
}
.nav-links a {
    color: var(--on-dark);
}
.nav-links a:hover,
.nav-links a[aria-current] {
    color: var(--yellow);
}
.nav-links a.nav-join {
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    padding: 10px 18px;
}
.nav-links a.nav-join:hover {
    background: var(--yellow-hover);
}
.nav-signin {
    color: var(--on-dark-muted);
}
/* Six items and a CTA is wider than the four this header was drawn for, so
   the wrap point moved up into tablet widths. Tighten it back under 760px,
   and stop a wrapped header from owning a third of a phone screen. */
@media (max-width: 900px) {
    .nav-links {
        gap: 16px;
        font-size: 13px;
    }
}
@media (max-width: 760px) {
    .site-header {
        position: static;
    }
}
.nav-links .nav-signin a {
    color: var(--yellow);
}

/* ---------- beta band ---------- */

/* Site-wide, from nav.ejs, so a page cannot be published without it. Yellow
   rather than the marquee's vermilion: on the homepage the two are stacked and
   a second hot strip would fight the first. Static rather than sticky — the
   header already follows you down the page, and two sticky strips eat a phone
   screen. Unlike the marquee it neither moves nor hides from a screen reader:
   it carries information rather than decorating the top of a page. */
.beta-band {
    background: var(--yellow);
    color: var(--ink-on-yellow);
    border-bottom: var(--border);
    padding: 9px var(--pad-x);
}
.beta-band__text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
}
.beta-band__tag {
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-right: 6px;
}
@media (max-width: 760px) {
    .beta-band__text {
        font-size: 12px;
    }
}

/* ---------- marquee ---------- */

.marquee {
    overflow: hidden;
    background: var(--vermilion);
    color: var(--cream);
    border-bottom: var(--border);
    padding: 9px 0;
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
}
.marquee__track span {
    padding-right: 40px;
    white-space: nowrap;
}
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}

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

.kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--muted);
}
.kicker--wide {
    letter-spacing: 0.22em;
}

.display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 5.4vw, 72px);
    line-height: 1.04;
    max-width: 16ch;
    text-wrap: balance;
}
.display--page {
    font-size: clamp(32px, 5.4vw, 64px);
    line-height: 1.08;
    max-width: 20ch;
}
.display--18 {
    max-width: 18ch;
}
.display--room {
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.1;
    max-width: none;
}
.display--form {
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.1;
    max-width: 20ch;
    margin-top: 8px;
}

.lede {
    font-size: 18px;
    line-height: 1.7;
    color: var(--body);
    max-width: 50ch;
}
.lede--52 { max-width: 52ch; }
.lede--56 { max-width: 56ch; }
.lede--58 { max-width: 58ch; }

.h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.3;
}
.h2--lg {
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.25;
    max-width: 18ch;
}
.h2--sm {
    font-size: clamp(22px, 2.8vw, 30px);
}
.h2--faq {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.25;
}

.prose {
    font-size: 17px;
    line-height: 1.75;
    color: var(--body);
}
.prose--60 { max-width: 60ch; }
.prose--62 { max-width: 62ch; }
.prose strong {
    color: var(--ink);
}

.note {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.note--13 {
    font-size: 13px;
}

.soft {
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
}

.more {
    font-family: var(--font-mono);
    font-size: 13px;
}
.more--14 {
    font-size: 14px;
}

.aside-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: normal;
    padding: 17px 30px;
    border: var(--border);
    text-align: center;
    cursor: pointer;
    appearance: none;
    border-radius: 0;
}
.btn--blue {
    background: var(--blue);
    color: var(--cream);
}
.btn--blue:hover {
    background: var(--blue-hover);
    color: var(--cream);
}
.btn--paper {
    background: var(--cream);
    color: var(--ink);
}
.btn--paper:hover {
    background: var(--cream-alt);
    color: var(--ink);
}
/* The CTA-band button: yellow, cream border because it sits on ink. */
.btn--yellow {
    background: var(--yellow);
    color: var(--ink);
    font-size: 19px;
    padding: 18px 34px;
    border-color: var(--cream);
}
.btn--yellow:hover {
    background: var(--yellow-hover);
    color: var(--ink);
}
.btn--outline {
    background: var(--cream);
    color: var(--ink);
    font-size: 17px;
    padding: 14px 24px;
}
.btn--outline:hover {
    background: var(--yellow);
    color: var(--ink);
}
.btn--room {
    align-self: flex-start;
    padding: 16px 28px;
}
.btn--submit {
    display: block;
    width: 100%;
    font-size: 19px;
    padding: 18px 24px;
}
.btn[disabled],
.btn--submit[disabled] {
    background: var(--disabled);
    color: var(--cream);
    cursor: not-allowed;
}

/* ---------- hero / page head ---------- */

.hero {
    padding: 56px var(--pad-x) 48px;
    border-bottom: var(--border);
    align-items: center;
}
.hero--room {
    padding: 52px var(--pad-x) 44px;
}

.page-head {
    padding: 52px var(--pad-x) 40px;
    border-bottom: var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.page-head--tall {
    padding: 72px var(--pad-x) 80px;
}

.error-detail {
    margin: 16px 0 0;
    padding: 16px;
    border: var(--border-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-x: auto;
    color: var(--body);
}

/* ---------- promo image ---------- */

.promo {
    position: relative;
    border: var(--border);
    background: var(--ink);
    padding: 12px;
    min-width: 0;
}
.promo--tight {
    padding: 10px;
}
/*
 * ⚠ NOT `image-rendering: pixelated`, and the reason is worth keeping.
 *
 * That is the right setting for pixel art scaled by a whole number. These are
 * screenshots of the client — pixel art AND anti-aliased chat text in one
 * frame — dropped into a fluid `.grid` column, so the scale is whatever the
 * column happens to be and is essentially never a whole number. Nearest
 * neighbour at 0.49 does not "keep the pixels sharp", it deletes every other
 * one: the chat log turns to mush and the 1px outlines on the sprites break
 * up. A smooth downscale of a 4x capture is what actually looks crisp.
 *
 * If a future image IS raw sprite art shown at exactly 1x/2x/3x, give it its
 * own class and put pixelated there.
 */
.promo img {
    width: 100%;
    height: auto;
    display: block;
}
.sticker {
    position: absolute;
    left: -6px;
    top: -14px;
    background: var(--yellow);
    color: var(--ink);
    border: var(--border);
    padding: 7px 12px;
    font-family: var(--font-display);
    font-size: 15px;
    transform: rotate(-3deg);
}
.sticker--sm {
    padding: 6px 11px;
    font-size: 14px;
}

/* ---------- stats ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    border-bottom: var(--border);
}
.stat {
    padding: 26px var(--pad-x);
    border-right: var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat:last-child {
    border-right: 0;
}
.stat__num {
    font-family: var(--font-display);
    font-size: 34px;
}
.stat__label {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}
/* ---------- journal article ---------- */

/* An article is read start to finish, not scanned, so it gets a measure a
   person can track from one line to the next. Everywhere else on this site
   the columns do that job; here there is only one column. */
.article {
    max-width: 68ch;
}
.article h2 {
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1.25;
    color: var(--ink);
    margin: 18px 0 0;
}
.article p {
    margin: 0;
}
.article strong {
    color: var(--ink);
}

/* ---------- breadcrumbs ---------- */

.crumbs {
    padding: 14px var(--pad-x);
    border-bottom: var(--border-soft);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--rule);
}
.crumbs a {
    color: var(--muted-2);
}
.crumbs a:hover {
    color: var(--ink);
}

/* ---------- sections ---------- */

.section {
    padding: 56px var(--pad-x);
    border-bottom: var(--border);
}
.section--52 { padding-top: 52px; padding-bottom: 52px; }
.section--48 { padding-top: 48px; padding-bottom: 48px; }
.section--44 { padding-top: 44px; padding-bottom: 44px; }
.section--alt {
    background: var(--cream-alt);
}
.section--start {
    align-items: flex-start;
}
.section.stack {
    --gap: 16px;
}
.section.stack.gap-24 { --gap: 24px; }
.section.stack.gap-26 { --gap: 26px; }
.section.stack.gap-30 { --gap: 30px; }

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}

/* ---------- cards ---------- */

.card {
    background: var(--cream);
    border: var(--border);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ink);
    min-width: 0;
}
.card--feature {
    gap: 12px;
}
a.card:hover {
    color: var(--ink);
    transform: translate(-3px, -3px);
}
.card--blue {
    background: var(--blue);
    color: var(--cream);
    justify-content: center;
}
.card--yellow {
    background: var(--yellow);
}
.card--sm {
    padding: 18px;
    gap: 6px;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card__swatch {
    width: 22px;
    height: 22px;
    border: var(--border);
}
.card__num,
.card__tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}
.card--yellow .card__tag {
    color: var(--muted-on-yellow);
}
.card__kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--blue-pale);
}
.card__index {
    font-family: var(--font-display);
    font-size: 20px;
}
.card__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
}
.card__title--20 { font-size: 20px; }
.card__title--18 { font-size: 18px; }
.card__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--body);
}
.card--sm .card__text {
    line-height: 1.6;
}
.card--yellow .card__text {
    color: var(--ink-on-yellow);
}
.card--blue .card__text {
    font-size: 16px;
    line-height: 1.75;
    color: var(--cream);
}

/* ---------- the felt (poker panel) ---------- */

.felt {
    border: var(--border);
    background: var(--felt);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.felt--room {
    padding: 24px;
    gap: 20px;
}
.hand {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.card-face {
    width: 56px;
    height: 80px;
    background: var(--cream);
    border: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink);
}
.felt--room .card-face {
    width: 58px;
    height: 84px;
    font-size: 28px;
}
.card-face--red {
    color: var(--vermilion);
}
.card-face--back {
    background: var(--blue);
}
.felt__meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--felt-text);
    border-top: 3px solid var(--felt-rule);
    padding-top: 14px;
}
.felt__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--felt-text);
}
.felt__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 3px solid var(--felt-rule);
    padding-top: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.felt__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--felt-text);
}
.felt__row--pot {
    color: var(--white);
}
.felt__row--out {
    color: var(--felt-muted);
}

/* ---------- panels (object menu, tables, what-happens-next, forms) ---------- */

.panel {
    border: var(--border);
    background: var(--cream);
    min-width: 0;
}
.panel__head {
    padding: 12px 16px;
    border-bottom: var(--border);
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 12px;
}
.panel__head--form {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.panel__head--vermilion {
    padding: 14px 20px;
    background: var(--vermilion);
    font-family: var(--font-display);
    font-size: 17px;
}
.panel__title {
    font-family: var(--font-display);
    font-size: 17px;
}
.panel__aside {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--on-dark);
}
.panel__rows {
    display: flex;
    flex-direction: column;
}
.panel__rows--mono {
    font-family: var(--font-mono);
    font-size: 14px;
}
.panel__row {
    padding: 14px 16px;
    border-bottom: var(--border-soft);
    font-size: 15px;
}
.panel__rows--mono .panel__row {
    font-size: 14px;
}
.panel__row:last-child {
    border-bottom: 0;
}
.panel__row--split {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.panel__row--active {
    background: var(--yellow);
}
.panel__row--alt {
    background: var(--cream-alt);
}
.panel__row--muted {
    color: var(--muted);
}

.step {
    padding: 18px 20px;
    border-bottom: var(--border-soft);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.step:last-child {
    border-bottom: 0;
}
.step__num {
    font-family: var(--font-display);
    font-size: 18px;
    flex: none;
}
.step__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--body);
}

.callout {
    border: var(--border);
    background: var(--blue);
    color: var(--cream);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.callout__kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--blue-pale);
}
.callout__text {
    font-size: 15px;
    line-height: 1.7;
}
.callout a {
    color: var(--yellow);
}
.callout a:hover {
    color: var(--yellow-hover);
}

/* ---------- dev log ---------- */

.log-list {
    display: flex;
    flex-direction: column;
}
.log-row {
    display: grid;
    grid-template-columns: minmax(90px, 110px) minmax(90px, 130px) minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0;
    border-top: var(--border-soft);
    align-items: baseline;
}
.log-row__date {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}
.log-row__tag {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--blue);
}
.log-row__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
}
@media (max-width: 520px) {
    .log-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
    }
    .log-row__text {
        grid-column: 1 / -1;
    }
}

.log {
    display: flex;
    flex-direction: column;
}
.entry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 28px;
    padding: 28px 0;
    border-bottom: var(--border-soft);
}
.entry__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.entry__date {
    font-family: var(--font-mono);
    font-size: 14px;
}
.entry__tag {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--blue);
}
.entry__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    grid-column: span 2;
}
.entry__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
}
.entry__text {
    font-size: 16px;
    line-height: 1.75;
    color: var(--body);
    max-width: 70ch;
}
@media (max-width: 720px) {
    .entry__body {
        grid-column: auto;
    }
}

/* ---------- manual ---------- */

.anchor-bar {
    padding: 16px var(--pad-x);
    border-bottom: var(--border);
    background: var(--vermilion);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
}
.anchor-bar a {
    color: var(--cream);
}
.anchor-bar a:hover {
    color: var(--ink);
}

.manual {
    padding: 48px var(--pad-x);
    border-bottom: var(--border);
    align-items: start;
    scroll-margin-top: 72px;
}
.manual__index {
    font-family: var(--font-display);
    font-size: 22px;
}
.manual__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.3;
}
.manual__sub {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.chips {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
}
.chip {
    border: var(--border);
    padding: 8px 12px;
}
.chip--yellow {
    background: var(--yellow);
}

.faq {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.faq details {
    border-top: var(--border-soft);
}
.faq summary {
    padding: 20px 0;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--ink);
}
.faq__plus {
    font-family: var(--font-display);
    color: var(--vermilion);
}
.faq__a {
    padding: 0 0 20px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--body);
    max-width: 64ch;
}

/* ---------- CTA band ---------- */

.cta-band {
    padding: 64px var(--pad-x);
    border-bottom: var(--border);
    background: var(--ink);
    color: var(--cream);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.cta-band__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.25;
    max-width: 22ch;
}
.cta-band--center {
    padding: 70px var(--pad-x);
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
.cta-band--center .cta-band__title {
    font-size: clamp(26px, 4vw, 46px);
    line-height: 1.2;
    max-width: 20ch;
}
.cta-band__note {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--on-dark-muted);
}

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

.site-footer {
    padding: 40px var(--pad-x);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 32px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted-2);
}
.site-footer--rule {
    border-top: var(--border);
}
.footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer__col--brand {
    gap: 12px;
}
.footer__brand {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--ink);
}
.footer__mark {
    width: 14px;
    height: 14px;
    background: var(--yellow);
    border: 2px solid var(--ink);
}
.footer__name {
    font-family: var(--font-display);
    font-size: 16px;
}
.footer__head {
    color: var(--ink);
}

/* ---------- signup form ---------- */

.signup {
    padding: 44px var(--pad-x) 56px;
    align-items: start;
}

.form-panel__body {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-panel__foot {
    padding: 20px 22px;
    border-top: var(--border);
    background: var(--cream-alt);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.field__label {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}
.field input,
.field select {
    width: 100%;
    border: var(--border);
    border-radius: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 16px;
    background: var(--white);
    color: var(--ink);
}
.field input::placeholder {
    color: var(--muted);
    opacity: 1;
}
.field input:focus,
.field select:focus,
.check input:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: -1px;
}
.field input[disabled],
.field select[disabled],
.check input[disabled] {
    background: var(--cream-alt);
    color: var(--muted);
    cursor: not-allowed;
}
.field__note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
.field__note--error {
    color: var(--error);
}

.checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: var(--border-soft);
    padding-top: 20px;
}
.check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body);
}
.check input {
    appearance: none;
    width: 22px;
    height: 22px;
    border: var(--border);
    background: var(--white);
    flex: none;
    margin: 2px 0 0;
    cursor: pointer;
}
.check input:checked {
    background: var(--blue);
}
.check .field__note {
    display: block;
}

.form-status {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}
.form-status--ok {
    color: var(--green);
}
.form-status--error {
    color: var(--error);
}

.turnstile {
    min-height: 65px;
}

/* Honeypot: off-screen, never hidden with display:none (bots skip those). */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}