/* =========================================================
   MEJN.life — Quiet Premium Editorial
   1  Fonts
   2  Tokens
   3  Reset & Basis
   4  Layout
   5  Rail & Labels
   6  Header / Footer
   7  Startseite
   8  Archiv & Karten
   9  Artikel
   10 Autoren, Newsletter, Kommentare
   11 Utilities & Motion
   ========================================================= */

/* 1 — Fonts ------------------------------------------------ */
/* Self-hosted, DSGVO-freundlich. Dateien in assets/fonts/ ablegen.
   Solange sie fehlen, greift der System-Fallback sauber. */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Variable.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* 2 — Tokens ----------------------------------------------- */

:root {
    /* Farbe */
    --papier: #F4F3EF;
    --papier-tief: #EDEBE5;
    --graphit: #17181A;
    --bleistift: #6C6B65;
    --linie: #DBD8D0;
    --tinte: #2F4858;
    --tinte-hell: #47677A;

    /* Schrift */
    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Ghosts Font-Auswahl im Admin darf überschreiben */
    --schrift-text: var(--gh-font-body, var(--serif));
    --schrift-titel: var(--gh-font-heading, var(--serif));

    /* Skala */
    --t-meta: 0.75rem;
    --t-small: 0.875rem;
    --t-body: 1.0625rem;
    --t-lead: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem);
    --t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --t-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
    --t-h1: clamp(2.125rem, 1.5rem + 3.2vw, 3.75rem);
    --t-claim: clamp(2.5rem, 1.4rem + 5.6vw, 5rem);
    --t-mark: clamp(3.75rem, 1rem + 15vw, 10rem);

    /* Maß & Raum */
    --measure: 42rem;
    --rail: 8.5rem;
    --gap: 3rem;
    --wrap: 76rem;
    --pad: clamp(1.25rem, 5vw, 3.5rem);
    --raum-s: clamp(2rem, 5vw, 3rem);
    --raum-m: clamp(3.5rem, 8vw, 6rem);
    --raum-l: clamp(5rem, 12vw, 9rem);
}

/* 3 — Reset & Basis ---------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--graphit);
    font-family: var(--schrift-text);
    font-optical-sizing: auto;
    font-size: var(--t-body);
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1.2em; }

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

.post-content a,
.author-bio a,
.profile-bio a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--linie);
    transition: text-decoration-color 160ms ease, color 160ms ease;
}

.post-content a:hover,
.author-bio a:hover {
    color: var(--tinte);
    text-decoration-color: var(--tinte);
}

h1 a, h2 a, h3 a {
    background-image: linear-gradient(var(--linie), var(--linie));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 260ms ease;
}

h1 a:hover, h2 a:hover, h3 a:hover { background-size: 100% 1px; }

:focus-visible {
    outline: 2px solid var(--tinte);
    outline-offset: 3px;
}

button { font: inherit; }

/* 4 — Layout ----------------------------------------------- */

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.wrap--narrow {
    max-width: calc(var(--measure) + var(--pad) * 2);
}

.site-main { display: block; }

.section { padding-block: var(--raum-m); }

.section + .section { padding-top: 0; }

.section-head {
    display: grid;
    gap: 0.5rem;
    margin-bottom: var(--raum-s);
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--linie);
}

.section-title {
    font-size: var(--t-h2);
    letter-spacing: -0.02em;
}

.section-more {
    margin: var(--raum-s) 0 0;
}

.more-link {
    font-family: var(--sans);
    font-size: var(--t-small);
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--linie);
    padding-bottom: 2px;
    transition: border-color 160ms ease, color 160ms ease;
}

.more-link:hover { color: var(--tinte); border-color: var(--tinte); }

/* 5 — Rail & Labels ---------------------------------------- */

.label {
    font-family: var(--sans);
    font-size: var(--t-meta);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bleistift);
    display: inline-block;
}

a.label:hover { color: var(--tinte); }

.meta {
    font-family: var(--sans);
    font-size: var(--t-small);
    color: var(--bleistift);
    letter-spacing: 0.005em;
}

.meta-sep { padding-inline: 0.55em; color: var(--linie); }

.rail { margin-bottom: 0.75rem; }

.rail .meta { display: block; margin-top: 0.35rem; }

/* 6 — Header / Footer -------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--linie);
    background: var(--papier);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 2rem;
    padding-block: 1.1rem;
}

.wordmark {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: auto;
}

.wordmark-tld {
    letter-spacing: 0.06em;
    color: var(--bleistift);
    font-weight: 400;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.nav-item a,
.util-link {
    font-family: var(--sans);
    font-size: var(--t-small);
    color: var(--graphit);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
}

.nav-item a:hover,
.util-link:hover,
.nav-item--current a { border-bottom-color: var(--graphit); }

.header-utils {
    display: flex;
    gap: 1.25rem;
}

.header-utils .util-link { color: var(--bleistift); }

.site-footer {
    margin-top: var(--raum-l);
    border-top: 1px solid var(--linie);
    padding-block: var(--raum-s);
}

.footer-mark {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
}

.footer-claim {
    font-size: var(--t-small);
    font-style: italic;
    color: var(--bleistift);
    margin: 0 0 1.5rem;
}

.footer-nav .nav-list { flex-wrap: wrap; gap: 1.25rem; }

.footer-legal {
    font-family: var(--sans);
    font-size: var(--t-meta);
    color: var(--bleistift);
    margin: 1.5rem 0 0;
}

.footer-legal a { border-bottom: 1px solid var(--linie); }

/* 7 — Startseite ------------------------------------------- */

.opening {
    padding-block: var(--raum-m) var(--raum-s);
}

.opening-mark {
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--t-mark);
    line-height: 0.86;
    letter-spacing: 0.02em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.opening-claim {
    font-size: var(--t-h2);
    font-style: italic;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
    max-width: 20ch;
}

.opening-line {
    font-size: var(--t-lead);
    color: var(--bleistift);
    max-width: 34ch;
    margin: 0;
}

.section--featured { padding-top: var(--raum-s); }

.featured-image {
    display: block;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--papier-tief);
}

.featured-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.featured-image:hover img { transform: scale(1.015); }

.featured-title {
    font-size: var(--t-h1);
    margin-bottom: 0.6rem;
}

.featured-excerpt {
    font-size: var(--t-lead);
    max-width: 46ch;
    margin-bottom: 0.8rem;
}

.byline { margin: 0; }

.explore-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    font-size: var(--t-h3);
}

.explore-list a {
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}

.explore-list a:hover { border-bottom-color: var(--graphit); }

.explore-count {
    font-family: var(--sans);
    font-size: var(--t-meta);
    color: var(--bleistift);
    vertical-align: 0.5em;
}

/* 8 — Notes-Grid, Archiv, Karten --------------------------- */

.note-grid {
    display: grid;
    gap: var(--raum-s);
}

.note-image {
    display: block;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--papier-tief);
}

.note-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.note-image:hover img { transform: scale(1.015); }

.note-title {
    font-size: var(--t-h3);
    margin-bottom: 0.45rem;
}

.note-excerpt {
    color: var(--graphit);
    margin-bottom: 0.6rem;
}

/* Note 4 ist bewusst textdominant: kein Bild, größere Type */
.note--4 .note-title { font-size: var(--t-h2); }
.note--4 .note-excerpt { font-size: var(--t-lead); max-width: 52ch; }

.archive-head {
    padding-block: var(--raum-m) var(--raum-s);
    border-bottom: 1px solid var(--linie);
    margin-bottom: var(--raum-m);
}

.archive-title { font-size: var(--t-h1); }

.archive-line {
    font-size: var(--t-lead);
    color: var(--bleistift);
    margin: 0.75rem 0 0;
    max-width: 40ch;
}

.archive-list { display: grid; gap: var(--raum-s); }

.entry {
    display: grid;
    gap: 1rem;
    padding-bottom: var(--raum-s);
    border-bottom: 1px solid var(--linie);
}

.archive-list .entry:last-child { border-bottom: 0; padding-bottom: 0; }

.entry-image { display: block; overflow: hidden; background: var(--papier-tief); }

.entry-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.entry-image:hover img { transform: scale(1.015); }

.entry-title { font-size: var(--t-h2); margin-bottom: 0.5rem; }

.entry-excerpt { max-width: 52ch; margin-bottom: 0.6rem; }

.pagination {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--raum-m);
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
}

.pagination-link {
    font-family: var(--sans);
    font-size: var(--t-small);
}

.pagination-link:hover { color: var(--tinte); }

/* 9 — Artikel ---------------------------------------------- */

.post-header { padding-block: var(--raum-m) var(--raum-s); }

.post-header-inner {
    max-width: var(--measure);
    margin-inline: auto;
    position: relative;
}

.post-title {
    font-size: var(--t-h1);
    letter-spacing: -0.022em;
    margin-bottom: 0.7rem;
}

.post-dek {
    font-size: var(--t-lead);
    font-style: italic;
    color: var(--bleistift);
    max-width: 44ch;
    margin-bottom: 1.1rem;
}

.post-byline { margin: 0; }

.post-hero {
    margin: 0 0 var(--raum-s);
    background: var(--papier-tief);
}

.post-hero img {
    width: 100%;
    max-height: 78vh;
    object-fit: cover;
}

.post-hero figcaption {
    max-width: var(--measure);
    margin: 0.75rem auto 0;
    padding-inline: var(--pad);
    font-size: var(--t-meta);
}

/* Lesespalte + Kartenbreiten (Ghost-Editor) */
.post-content {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--pad), 1fr)
        [wide-start] minmax(0, 6rem)
        [main-start] min(var(--measure), calc(100% - var(--pad) * 2)) [main-end]
        minmax(0, 6rem) [wide-end]
        minmax(var(--pad), 1fr) [full-end];
    font-size: var(--t-lead);
    line-height: 1.68;
}

.post-content > * { grid-column: main-start / main-end; }
.post-content > .kg-width-wide { grid-column: wide-start / wide-end; }
.post-content > .kg-width-full { grid-column: full-start / full-end; }

.post-content > p { margin-bottom: 1.45em; }

.post-content > h2 {
    font-size: var(--t-h2);
    margin-top: 2.2em;
    margin-bottom: 0.5em;
}

.post-content > h3 {
    font-size: var(--t-h3);
    margin-top: 1.8em;
    margin-bottom: 0.4em;
}

.post-content > blockquote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--tinte);
    font-style: italic;
    color: var(--graphit);
}

.post-content > .kg-callout-card {
    background: var(--papier-tief);
    border-radius: 0;
}

.post-content figcaption,
.post-content .kg-card figcaption {
    font-family: var(--sans);
    font-size: var(--t-meta);
    color: var(--bleistift);
    text-align: left;
    margin-top: 0.6rem;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: 2.75rem 0;
}

.post-content ul, .post-content ol { padding-left: 1.2em; }
.post-content li { margin-bottom: 0.4em; }

.post-footer { padding-top: var(--raum-m); }

.post-tags {
    padding-top: 1.25rem;
    border-top: 1px solid var(--linie);
    font-family: var(--sans);
    font-size: var(--t-small);
    color: var(--bleistift);
}

.post-tags a { border-bottom: 1px solid var(--linie); margin-right: 0.75rem; }
.post-tags a:hover { color: var(--tinte); border-color: var(--tinte); }

.next-note {
    margin-top: var(--raum-m);
    padding-block: var(--raum-s);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}

.next-title { font-size: var(--t-h2); margin-bottom: 0.5rem; }
.next-excerpt { color: var(--bleistift); max-width: 50ch; margin: 0; }

/* 10 — Autoren, Newsletter, Kommentare --------------------- */

.author-duo { display: grid; gap: var(--raum-s); }

.author-portrait {
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 1rem;
    background: var(--papier-tief);
}

.author-portrait--small {
    width: 4.5rem;
    max-width: none;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0;
}

.author-name { font-size: var(--t-h3); margin-bottom: 0.4rem; }

.author-bio { color: var(--bleistift); max-width: 42ch; margin: 0; }

.author-box {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: var(--raum-s);
    padding-top: var(--raum-s);
    border-top: 1px solid var(--linie);
}

.profile-head {
    padding-block: var(--raum-m);
    border-bottom: 1px solid var(--linie);
}

.profile-inner { display: grid; gap: 1.5rem; }

.profile-name { font-size: var(--t-h1); margin-block: 0.4rem 0.75rem; }

.profile-bio { font-size: var(--t-lead); max-width: 46ch; }

.newsletter {
    margin-top: var(--raum-l);
    padding-block: var(--raum-m);
    background: var(--papier-tief);
}

.newsletter-title { font-size: var(--t-h2); margin-bottom: 0.6rem; }

.newsletter-text { color: var(--bleistift); max-width: 42ch; }

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 30rem;
    margin-top: 1.5rem;
}

.newsletter-input {
    flex: 1 1 14rem;
    font-family: var(--sans);
    font-size: var(--t-small);
    padding: 0.85rem 0.25rem;
    color: var(--graphit);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--graphit);
    border-radius: 0;
}

.newsletter-input::placeholder { color: var(--bleistift); }
.newsletter-input:focus { outline: 0; border-bottom-color: var(--tinte); }

.newsletter-button {
    font-family: var(--sans);
    font-size: var(--t-small);
    letter-spacing: 0.06em;
    padding: 0.85rem 1.5rem;
    color: var(--papier);
    background: var(--graphit);
    border: 0;
    cursor: pointer;
    transition: background 200ms ease;
}

.newsletter-button:hover { background: var(--tinte); }

.newsletter-message {
    font-family: var(--sans);
    font-size: var(--t-small);
    margin-top: 1rem;
    display: none;
}

.newsletter-form.success ~ .newsletter-message--success { display: block; }
.newsletter-form.error ~ .newsletter-message--error { display: block; color: var(--tinte); }
.newsletter-form.loading .newsletter-button { opacity: 0.55; }

.comments { padding-top: var(--raum-m); }

/* 11 — Utilities & Motion ---------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--graphit);
    color: var(--papier);
    padding: 0.75rem 1rem;
    font-family: var(--sans);
    font-size: var(--t-small);
    z-index: 20;
}

.skip-link:focus { left: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- ab 46em: erste Zweispaltigkeit --------------- */

@media (min-width: 46em) {
    .entry {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .entry:not(:has(.entry-image)) { grid-template-columns: minmax(0, 1fr); }

    .author-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .profile-inner { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}

/* ---------- ab 62em: Editorial-Rhythmus ------------------ */

@media (min-width: 62em) {

    .section-head {
        grid-template-columns: var(--rail) minmax(0, 1fr);
        column-gap: var(--gap);
        align-items: baseline;
    }

    .section-head .rail {
        margin-bottom: 0;
        text-align: right;
    }

    .featured {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .featured-body {
        display: grid;
        grid-template-columns: var(--rail) minmax(0, 1fr);
        column-gap: var(--gap);
        align-items: start;
    }

    .featured-body .rail { text-align: right; margin-bottom: 0; }
    .featured-title { max-width: 18ch; }

    /* Rhythmus: 1 groß · 2+3 nebeneinander · 4 textdominant · 5+6 klein */
    .note-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: var(--gap);
        row-gap: var(--raum-m);
    }

    .note--1 { grid-column: span 6; display: grid; grid-template-columns: subgrid; }
    .note--1 .note-image { grid-column: span 4; margin-bottom: 0; }
    .note--1 .note-body { grid-column: span 2; }
    .note--1 .note-title { font-size: var(--t-h2); }
    .note--1 .note-image img { aspect-ratio: 3 / 2; }

    .note--2, .note--3 { grid-column: span 3; }

    .note--4 {
        grid-column: 2 / span 4;
        text-align: left;
        padding-block: 1rem;
        border-top: 1px solid var(--linie);
        border-bottom: 1px solid var(--linie);
    }

    .note--5, .note--6 { grid-column: span 3; }
    .note--5 .note-image img, .note--6 .note-image img { aspect-ratio: 1 / 1; }

    .entry { grid-template-columns: 20rem minmax(0, 1fr); gap: 3rem; }

    .explore-list { font-size: var(--t-h2); gap: 0.4rem 2.5rem; }

    .newsletter-inner {
        display: grid;
        grid-template-columns: var(--rail) minmax(0, 1fr);
        column-gap: var(--gap);
    }

    .newsletter-inner .rail { text-align: right; margin-bottom: 0; }

    .next-note .rail { margin-bottom: 1rem; }
}

/* ---------- ab 82em: Rail hängt in den Rand -------------- */

@media (min-width: 82em) {
    .rail--post {
        position: absolute;
        top: 0.5rem;
        right: calc(100% + var(--gap));
        width: var(--rail);
        text-align: right;
        margin-bottom: 0;
    }
}

/* Fallback für Browser ohne :has() */
@supports not (selector(:has(*))) {
    .entry { grid-template-columns: minmax(0, 1fr); }
}

.page-spacer { height: var(--raum-m); }