/* GeoGazette
   ---------------------------------------------------------------------------
   A newspaper, not an app. The design does its work through typography,
   hierarchy and hairline rules rather than colour, boxes or shadows.

   Deliberately no web fonts: a German-operated site loading fonts from a
   third-party server is a data-protection problem nobody needs, and
   self-hosting means shipping binaries. The stacks below resolve to genuinely
   good screen faces on every platform. Swapping in a self-hosted face later
   means changing two variables.
   ------------------------------------------------------------------------- */

:root {
    --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --paper: #fbfaf7;
    --ink: #16130f;
    --ink-muted: #6a6058;
    --rule: #ddd6cb;
    --rule-strong: #16130f;
    --accent: #8c1d18;

    --measure: 38rem;
    --page: 68rem;
    --gap: 1.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #14120f;
        --ink: #eae5dd;
        --ink-muted: #9a9187;
        --rule: #332e28;
        --rule-strong: #6d655b;
        --accent: #e08a83;
    }
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

/* Story images always fill their column. A newspaper grid lives from the
   pictures lining up; letting each one keep its own natural width makes the
   page look accidental. */
.lead > a img,
.story img {
    width: 100%;
    object-fit: cover;
    background: var(--rule);
}

.lead > a img { aspect-ratio: 16 / 9; }
.story img { aspect-ratio: 3 / 2; }

a { color: inherit; }

/* Headlines are links, but should not look like them until you point at one. */
a.plain,
h1 a, h2 a, h3 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

/* Body copy links keep the underline - in running text you want to see them. */
.article__body a { text-decoration: underline; text-underline-offset: 0.12em; }
.article__body a:hover { color: var(--accent); }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.012em;
    margin: 0;
    text-wrap: balance;
    /* Place names get long. Without this a single unbroken word widens its
       grid column and pushes the whole page sideways on a phone. */
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ---- Layout ------------------------------------------------------------- */

.page {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}

/* ---- Masthead ----------------------------------------------------------- */

.masthead {
    text-align: center;
    padding: 2.25rem 0 1rem;
}

.masthead__title {
    display: inline-block;
    margin: 0;
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.masthead__strapline {
    margin: 0.5rem 0 0;
    font-family: var(--sans);
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The double rule under the masthead is the oldest newspaper trick there is. */
.masthead-rule {
    border: 0;
    border-top: 2px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
    height: 3px;
    margin: 0.75rem 0 0;
}

/* ---- Section navigation ------------------------------------------------- */

.sections {
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2rem;
}

.sections ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.75rem;
    margin: 0;
    padding: 0.7rem 0;
    list-style: none;
}

.sections a {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-muted);
}

.sections a:hover { color: var(--accent); }

/* ---- Shared story furniture --------------------------------------------- */

.byline {
    margin: 0.6rem 0 0;
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}

.kicker,
.article__kicker {
    margin: 0 0 0.6rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.article__kicker a { text-decoration: none; }
.article__kicker a:hover { text-decoration: underline; }

figcaption {
    margin-top: 0.5rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

figcaption .credit { display: inline-block; margin-top: 0.15rem; opacity: 0.85; }

/* ---- Lead story --------------------------------------------------------- */

.lead {
    padding-bottom: 2.75rem;
    margin-bottom: 2.75rem;
    border-bottom: 1px solid var(--rule);
}

/* Text beside the picture, not under it. A lead image at full column width
   is half a screen tall and pushes its own headline out of sight - which is
   the opposite of what a front page is for. */
@media (min-width: 50rem) {
    .lead {
        display: grid;
        grid-template-columns: 1fr 1.25fr;
        gap: 0 2.5rem;
        align-items: start;
    }

    .lead > a {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin-bottom: 0;
    }

    .lead__headline,
    .lead__dek,
    .lead .byline { grid-column: 1; }
}

.lead > a { margin-bottom: 1.1rem; }

.lead__headline {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    max-width: 20ch;
}

.lead > * { min-width: 0; }

.lead__dek {
    margin: 0.7rem 0 0;
    max-width: 48ch;
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

/* ---- Story list --------------------------------------------------------- */

.latest__label,
.section-header h1 {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--rule-strong);
}

.story-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hairlines between columns, the way a printed page separates them. */
.story {
    position: relative;
    padding-left: var(--gap);
    border-left: 1px solid var(--rule);
    /* Grid items default to min-width: auto and refuse to shrink below their
       longest word. This lets them. */
    min-width: 0;
}

.story:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
}

.story img { margin-bottom: 0.7rem; }

.story__headline { font-size: 1.25rem; }

.story__dek {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.story--empty {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    color: var(--ink-muted);
    font-style: italic;
}

@media (max-width: 62rem) {
    .story-list { grid-template-columns: repeat(2, 1fr); }
    .story:nth-child(3n + 1) { padding-left: var(--gap); border-left: 1px solid var(--rule); }
    .story:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 40rem) {
    .story-list { grid-template-columns: 1fr; gap: 1.75rem; }
    .story {
        padding-left: 0;
        border-left: 0;
        padding-top: 1.5rem;
        border-top: 1px solid var(--rule);
    }
    .story:first-child { padding-top: 0; border-top: 0; }
}

/* ---- Section page ------------------------------------------------------- */

.section-header { margin-bottom: 0.5rem; }
.section-header h1 { display: block; }

.section-header__intro {
    margin: -0.75rem 0 1.75rem;
    max-width: var(--measure);
    color: var(--ink-muted);
}

/* ---- Article ------------------------------------------------------------ */

/* Full-bleed grid: everything sits in the middle reading column, and the
   hero image is allowed to span the whole width. Done with grid rather than
   negative margins and 100vw, which overflow horizontally as soon as a
   scrollbar appears. */
.article {
    display: grid;
    grid-template-columns: 1fr min(var(--measure), 100%) 1fr;
}

.article > * { grid-column: 2; }

.article__header {
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
}

.article__headline { font-size: clamp(1.9rem, 4.4vw, 2.75rem); }

.article__dek {
    margin: 0.75rem 0 0;
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.article__hero {
    grid-column: 1 / -1;
    /* Wider than the reading column, but not edge to edge: a full-bleed
       photograph is a wall of image before the reader reaches a sentence. */
    width: min(52rem, 100%);
    margin: 0 auto 2.25rem;
}

/* Capped, or a tall photograph puts the whole article below the fold. */
.article__hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article__hero figcaption {
    max-width: var(--measure);
    margin-inline: auto;
}

.article__body { font-size: 1.1875rem; line-height: 1.68; }
.article__body > * { margin-block: 0 1.3rem; }
.article__body h2 { font-size: 1.5rem; margin-block: 2.2rem 0.8rem; }

.article__body figure { margin: 2rem 0; }
.article__body figure img { width: 100%; }

.article__body blockquote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    font-style: italic;
    color: var(--ink-muted);
}

.article__tags {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.article__tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article__tags li {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
}

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

.site-footer {
    margin-top: 4rem;
    padding: 1.75rem 0 3rem;
    border-top: 2px solid var(--rule-strong);
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

.site-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.site-footer__disclaimer { margin: 0; max-width: 52ch; }