/* the-q-mono — monospace-web-inspired theme for The Q
   Design language after Oskar Wickström's "The Monospace Web" (MIT). */

:root {
    /* Readable body sans + monospace reserved for chrome, dates, code.
       IBM Plex pairs a humanist sans with its own mono — techy, not typewriter. */
    --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --fg: #222;
    --fg-dim: #666;
    --bg: #fff;
    --accent: #ff2e88;      /* one drop of gorilla pink */
    --border: #222;
    --line: 1.3rem;         /* the vertical grid unit */
    --maxw: 84ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg: #ddd;
        --fg-dim: #888;
        --bg: #161616;
        --border: #ddd;
    }
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
    font-family: var(--font);
    font-size: 1.06rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    color: var(--fg);
    background: var(--bg);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--line) 2ch calc(var(--line) * 2);
}

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

h1, h2, h3, h4 {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line);
    margin: calc(var(--line) * 2) 0 var(--line);
    text-transform: uppercase;
    letter-spacing: 0.05ch;
}

h1 { font-size: 1.35rem; line-height: calc(var(--line) * 1.5); }

h3 { text-transform: none; }

p, ul, ol, table, figure, blockquote, pre, hr, form {
    margin: 0 0 var(--line);
}

a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
a:hover { color: var(--accent); }

hr {
    border: none;
    border-top: 2px solid var(--border);
    height: 0;
}

blockquote {
    border-left: 2ch solid var(--border);
    padding-left: 2ch;
    color: var(--fg-dim);
}

code, pre {
    font-family: var(--mono);
    background: color-mix(in srgb, var(--fg) 8%, var(--bg));
    padding: 0 0.5ch;
}

pre { padding: var(--line) 2ch; overflow-x: auto; }

img, video {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--line);
    filter: none;
}

figure { text-align: center; }
figcaption { color: var(--fg-dim); }

/* Koenig card widths (required by Ghost; on a narrow mono grid all = full) */
.kg-width-wide, .kg-width-full { width: 100%; margin-left: 0; margin-right: 0; }

ul { list-style: none; padding-left: 2ch; }
ul li::before { content: "· "; margin-left: -2ch; }
ol { padding-left: 4ch; }

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

.site-header { margin-bottom: calc(var(--line) * 2); }

.masthead {
    font-family: var(--mono);
    background: none;
    padding: 0;
    margin: 0 0 var(--line);
    line-height: var(--line);
    font-weight: 700;
}

.site-nav { font-family: var(--mono); color: var(--fg-dim); }

/* ------------------------------------------------------------- landing ---- */

.landing { text-align: center; padding-top: calc(var(--line) * 2); }

.landing-title { text-transform: uppercase; }

.landing-tagline { font-family: var(--mono); color: var(--fg-dim); }

.landing-pitch {
    text-align: left;
    border: 2px solid var(--border);
    padding: var(--line) 2ch;
    margin: calc(var(--line) * 2) 0;
}

.landing-archive-link { margin-top: calc(var(--line) * 2); }

/* --------------------------------------------------------------- forms ---- */

.signup-box { margin: 0 auto; max-width: 48ch; }

form[data-members-form] {
    display: flex;
    gap: 1ch;
    justify-content: center;
    flex-wrap: wrap;
}

input[type="email"] {
    font-family: var(--mono);
    font-size: 1rem;
    line-height: var(--line);
    color: var(--fg);
    background: var(--bg);
    border: 2px solid var(--border);
    padding: calc(var(--line) / 4) 1ch;
    flex: 1;
    min-width: 24ch;
}

button {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line);
    color: var(--bg);
    background: var(--fg);
    border: 2px solid var(--border);
    padding: calc(var(--line) / 4) 2ch;
    cursor: pointer;
    box-shadow: 0.5ch 0.4rem 0 color-mix(in srgb, var(--fg) 35%, var(--bg));
}

button:hover { background: var(--accent); border-color: var(--accent); }
button:active { transform: translate(0.25ch, 0.2rem); box-shadow: 0.25ch 0.2rem 0 color-mix(in srgb, var(--fg) 35%, var(--bg)); }

.form-note { color: var(--fg-dim); margin-top: calc(var(--line) / 2); }
form.success ~ [data-members-success],
form.error ~ [data-members-error] { display: block !important; }

/* -------------------------------------------------------------- archive ---- */

.archive-table {
    font-family: var(--mono);
    font-size: 0.94rem;
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--border);
}

.archive-table th, .archive-table td {
    text-align: left;
    padding: calc(var(--line) / 4) 1ch;
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, var(--bg));
}

.archive-table th {
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
}

.col-date { width: 12ch; white-space: nowrap; color: var(--fg-dim); }

.badge { color: var(--accent); }

/* ---------------------------------------------------------- pagination ---- */

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 2ch;
}

.pagination .page-number { color: var(--fg-dim); }

/* ---------------------------------------------------------------- post ---- */

.issue-meta { font-family: var(--mono); color: var(--fg-dim); }

.issue-content h3 a { text-decoration-thickness: 2px; }

.paywall-box {
    border: 2px dashed var(--border);
    padding: var(--line) 2ch;
    text-align: center;
    margin: calc(var(--line) * 2) 0;
}

/* Ghost's default content CTA for gated posts, restyled to match */
.gh-post-upgrade-cta, .kg-signup-card {
    font-family: var(--font) !important;
    /* keep body face for readability */
    background: none !important;
    border: 2px dashed var(--border);
}

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

.site-footer { font-family: var(--mono); font-size: 0.9rem; margin-top: calc(var(--line) * 3); color: var(--fg-dim); }
.site-footer hr { margin-bottom: var(--line); }

/* -------------------------------------------------------------- mobile ---- */

@media (max-width: 600px) {
    body { padding: var(--line) 1ch; }
    .col-date { width: 11ch; }
}


/* ------------------------------------------------------ readability ---- */

.issue-content p, .issue-content li { max-width: 68ch; }
.issue-content p { margin-bottom: 1.1rem; }
.issue-content h3 { font-size: 1.12rem; line-height: 1.4; margin-top: 2.2rem; }
.issue-content blockquote { font-size: 1.02rem; }
.landing-pitch p { margin-bottom: 0; }

@media (max-width: 600px) {
    html { font-size: 16px; }
    body { line-height: 1.6; }
    .issue-content h3 { font-size: 1.06rem; }
}