:root {
    --ink: #111111;
    --paper: #f3f1ea;
    --paper-deep: #ebe7dc;
    --rule: #111111;
    --muted: #3a3a3a;
    --expansion: #5c5c5c;
    --focus: #1a1a1a;
    --font-display: "Archivo Black", "Arial Black", sans-serif;
    --font-body: "IBM Plex Mono", "Courier New", monospace;
    --font-serif: "Libre Baskerville", "Times New Roman", Times, serif;
    --rule-w: 1.5px;
}

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

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-body);
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 0, 0, 0.03), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.04), transparent 45%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.015) 2px,
            rgba(0, 0, 0, 0.015) 3px
        ),
        var(--paper);
}

a {
    color: inherit;
    text-decoration: none;
}

em {
    font-style: normal;
    border-bottom: 1.5px solid currentColor;
}

.sheet {
    width: min(1120px, calc(100% - 1.5rem));
    margin: 1.25rem auto 2.5rem;
    border: var(--rule-w) solid var(--rule);
    background: color-mix(in srgb, var(--paper) 92%, white);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.08);
    animation: sheet-in 520ms ease-out;
}

@keyframes sheet-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.app-tile .illu .etch,
.poster-cell .etch,
.detail-illu .etch {
    animation: etch-in 700ms ease-out both;
}

@keyframes etch-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.masthead {
    display: grid;
    grid-template-columns: 96px 1fr 170px;
}

.cell {
    border-right: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
    padding: 1rem 1.1rem;
}

.masthead .cell:last-child,
.nav a:last-child,
.footer .cell:last-child,
.how-grid .cell:last-child {
    border-right: 0;
}

.logo-cell {
    display: grid;
    place-items: center;
    padding: 0.75rem;
}

.mark {
    width: 58px;
    height: 58px;
    display: block;
    object-fit: contain;
}

.brand-cell {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

.dateline,
.deck,
.caption,
.tagline,
.meta,
.kicker,
.hint,
.figure-caption,
.blog-date {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--muted);
}

.brand {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.55rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
}

.locales-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    text-align: center;
}

.locales-cell p {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.blog-index {
    display: grid;
}

.blog-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: 1rem;
    align-items: start;
    transition: background 180ms ease;
}

.blog-row:hover,
.blog-row:focus-visible {
    background: var(--paper-deep);
    outline: none;
}

.blog-num {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.blog-main h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
    line-height: 1.1;
}

.blog-main p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
}

.blog-date {
    white-space: nowrap;
}

.article-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
}

.article-grid .cell:last-child {
    border-right: 0;
}

.prose {
    font-size: 0.98rem;
    line-height: 1.65;
}

.prose > *:first-child {
    margin-top: 0;
}

.prose h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin: 1.75rem 0 0.75rem;
}

.prose p {
    margin: 0 0 1rem;
}

.prose a {
    border-bottom: 1.5px solid currentColor;
}

.prose pre {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    background: var(--paper-deep);
    border: var(--rule-w) solid var(--rule);
    font-size: 0.88rem;
    line-height: 1.5;
}

.prose code {
    font-family: inherit;
    font-size: 0.92em;
}

.prose pre code {
    font-size: inherit;
}

.prose :not(pre) > code {
    padding: 0.1em 0.3em;
    background: var(--paper-deep);
    border: 1px solid color-mix(in srgb, var(--rule) 35%, transparent);
}

.prose ul,
.prose ol {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.prose li {
    margin: 0.35rem 0;
}

.prose strong {
    font-weight: 600;
}

.expansion {
    color: var(--expansion);
}

.article-side .meta {
    margin: 0.35rem 0 1rem;
    word-break: break-all;
}

.article-side code,
.blog-index code {
    font-family: inherit;
}

.nav a {
    border-right: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
    padding: 0.85rem 0.5rem;
    text-align: center;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    transition: background 160ms ease, color 160ms ease;
}

.nav a:hover,
.nav a:focus-visible {
    background: var(--ink);
    color: var(--paper);
    outline: none;
}


.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
}

.manifesto-cell h1,
.page-head h1,
.detail-copy h1,
.app-tile h2,
.how-grid h2,
.manifesto-grid h2,
.deploy-side h2,
.result-grid h2 {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.manifesto-cell h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    max-width: 16ch;
}

.manifesto-cell p,
.page-head p,
.detail-copy p,
.manifesto-grid p,
.deploy-side p,
.app-tile .blurb,
.how-grid p {
    margin: 0 0 1rem;
    line-height: 1.55;
    font-size: 0.92rem;
}

.poster-cell,
.detail-illu,
.deploy-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--paper-deep);
}

.poster-cell {
    position: relative;
    overflow: visible;
    /* Ben-Day dots — newspaper / Lichtenstein */
    background-color: #f7f4eb;
    background-image: radial-gradient(circle, #111111 32%, transparent 33%);
    background-size: 14px 14px;
    background-position: 0 0;
}

.poster-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Soft paper wash so dots read like print ink on stock */
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(0, 0, 0, 0.06), transparent 50%);
}

.poster-cell > * {
    position: relative;
    z-index: 1;
}

.detail-illu,
.deploy-side {
    background:
        linear-gradient(135deg, transparent 49%, rgba(0, 0, 0, 0.04) 49%, rgba(0, 0, 0, 0.04) 51%, transparent 51%),
        var(--paper-deep);
}

.poster-figure {
    position: relative;
    margin: 0.35rem auto;
    width: min(100%, 260px);
    text-align: center;
    background-color: #f7f4eb;
    padding: 0.85rem 0.85rem 0.65rem;
    transform: rotate(-2.8deg);
    clip-path: polygon(
        1.5% 3.5%,
        96.5% 0.8%,
        99.2% 95.5%,
        2.8% 99.4%
    );
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.18));
}

/* A few print-shop flecks — not grain, just stray ink/dust */
.poster-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 22%, #1a1a1a 0 0.9px, transparent 1.1px),
        radial-gradient(circle at 72% 14%, #222 0 0.7px, transparent 0.9px),
        radial-gradient(circle at 88% 41%, #111 0 1.1px, transparent 1.3px),
        radial-gradient(circle at 31% 68%, #1c1c1c 0 0.65px, transparent 0.85px),
        radial-gradient(circle at 64% 77%, #222 0 0.8px, transparent 1px),
        radial-gradient(circle at 12% 86%, #181818 0 0.55px, transparent 0.75px),
        radial-gradient(ellipse 3px 1.2px at 79% 58%, #111 0 50%, transparent 70%),
        radial-gradient(ellipse 2px 2.5px at 44% 38%, #1a1a1a 0 40%, transparent 65%);
    opacity: 0.55;
}

.poster-figure img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1) contrast(1.05);
}

.figure-caption {
    margin: 0.7rem 0 0;
}

.etch {
    width: min(100%, 260px);
    height: auto;
    color: var(--ink);
}

.illu {
    display: grid;
    place-items: center;
    min-height: 140px;
    margin: 0.5rem 0;
}

.illu-lg .etch {
    width: min(100%, 320px);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--rule-w) solid var(--rule);
    background: var(--ink);
    color: var(--paper);
    padding: 0.7rem 1rem;
    letter-spacing: 0.08em;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.cta:hover,
.cta:focus-visible {
    transform: translate(-2px, -2px);
    outline: none;
}

.cta-ghost {
    background: transparent;
    color: var(--ink);
}

.cta-ghost:hover,
.cta-ghost:focus-visible {
    background: var(--ink);
    color: var(--paper);
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.apps-grid .app-tile {
    grid-column: span 3;
}

.apps-grid-full .app-tile {
    grid-column: span 2;
}

.app-tile {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    text-align: center;
    transition: background 180ms ease;
}

.app-tile:hover,
.app-tile:focus-visible {
    background: var(--paper-deep);
    outline: none;
}

.app-tile h2 {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.app-tile .meta {
    margin-top: auto;
}

.how-grid,
.footer,
.result-grid,
.deploy-grid,
.detail-grid {
    display: grid;
}

.how-grid {
    grid-template-columns: repeat(3, 1fr);
}

.how-grid h2 {
    font-size: 1rem;
}

.page-head {
    display: grid;
}

.page-head .cell {
    border-right: 0;
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.manifesto-grid .wide {
    grid-column: 1 / -1;
    border-right: 0;
}

.manifesto-grid .cell:nth-child(2n),
.detail-grid .cell:last-child,
.deploy-grid .cell:last-child,
.result-grid .cell:last-child {
    border-right: 0;
}

.detail-grid,
.deploy-grid,
.result-grid {
    grid-template-columns: 1.15fr 0.85fr;
}

.facts,
.file-list,
.log {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.facts li,
.file-list li,
.log li {
    border-top: var(--rule-w) solid var(--rule);
    padding: 0.55rem 0;
    font-size: 0.85rem;
}

.facts li span {
    display: inline-block;
    min-width: 6.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: 0.72rem;
}

.log {
    counter-reset: log;
}

.log li {
    counter-increment: log;
}

.log li::before {
    content: counter(log, decimal-leading-zero) " · ";
    color: var(--muted);
}

.deploy-form label {
    display: block;
    margin-bottom: 0.9rem;
}

.deploy-form label span {
    display: block;
    margin-bottom: 0.35rem;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.deploy-form input[type="text"],
.deploy-form input[type="password"],
.deploy-form input[type="number"],
.deploy-form input[type="email"],
.deploy-form textarea {
    width: 100%;
    border: var(--rule-w) solid var(--rule);
    background: #fffef9;
    color: var(--ink);
    font: inherit;
    padding: 0.7rem 0.75rem;
}

.deploy-form textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.deploy-form input:focus-visible,
.deploy-form textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.config-block {
    margin: 1.25rem 0 1rem;
    padding-top: 1rem;
    border-top: var(--rule-w) solid var(--rule);
}

.config-block .kicker {
    margin-bottom: 0.35rem;
}

.mode-block {
    margin: 0 0 1.1rem;
    padding: 0;
    border: var(--rule-w) solid var(--rule);
}

.mode-block legend {
    padding: 0 0.4rem;
    margin-left: 0.65rem;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.mode-option {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-top: var(--rule-w) solid var(--rule);
    cursor: pointer;
}

.mode-option:first-of-type {
    border-top: 0;
}

.mode-option input {
    margin-top: 0.2rem;
}

.mode-option strong {
    display: block;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.mode-option em {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--muted);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.field-help {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: lowercase;
}

.form-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: end;
}

.checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.7rem;
}

.checkbox span {
    margin: 0 !important;
}

.notice {
    border: var(--rule-w) solid var(--rule);
    padding: 0.75rem 0.85rem;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    background: var(--paper-deep);
}

.notice strong {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.notice-hint {
    display: block;
    opacity: 0.9;
}

.notice-error {
    background: #111;
    color: var(--paper);
}

.notice-success {
    background: var(--ink);
    color: var(--paper);
}

.deploy-form label.has-error input,
.deploy-form label.has-error.checkbox {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.deploy-form label.has-error span {
    color: var(--ink);
    font-weight: 600;
}

.deploy-progress {
    margin: 0 0 1.1rem;
}

.deploy-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.deploy-progress-track {
    border: var(--rule-w) solid var(--rule);
    height: 1.1rem;
    background: #fffef9;
    overflow: hidden;
}

.deploy-progress-fill {
    height: 100%;
    width: 0%;
    background:
        repeating-linear-gradient(
            -45deg,
            #111 0 6px,
            #333 6px 12px
        );
    transition: width 90ms linear;
}

.deploy-log {
    border: var(--rule-w) solid var(--rule);
    padding: 0.75rem 0.85rem;
    margin: 0 0 1rem;
    background: #fffef9;
}

.deploy-log h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.deploy-log .log {
    margin: 0;
}

.deploy-status.is-empty {
    display: none;
}

.cta:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.hint code {
    font-family: inherit;
}

.footer {
    grid-template-columns: repeat(3, 1fr);
}

.footer p {
    margin: 0;
    text-align: center;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
}

@media (max-width: 860px) {
    .masthead,
    .hero-grid,
    .how-grid,
    .detail-grid,
    .deploy-grid,
    .result-grid,
    .manifesto-grid,
    .article-grid,
    .footer,
    .apps-grid {
        grid-template-columns: 1fr;
    }

    .blog-row {
        grid-template-columns: 3.25rem 1fr;
    }

    .blog-date {
        grid-column: 2;
    }

    .masthead {
        grid-template-columns: 84px 1fr;
    }

    .locales-cell {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-around;
        border-right: 0;
    }

    .nav {
        grid-template-columns: 1fr 1fr;
    }

    .nav a:nth-child(2n),
    .apps-grid .app-tile,
    .apps-grid .app-tile:nth-child(1),
    .apps-grid .app-tile:nth-child(2),
    .apps-grid .app-tile:nth-child(n + 3),
    .apps-grid-full .app-tile,
    .manifesto-grid .cell,
    .how-grid .cell,
    .footer .cell {
        border-right: 0;
        grid-column: auto;
    }

    .brand {
        font-size: 1.35rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}