/* ============================================================================
   explore_v2.css — VARIANT 2 · SWISS / INTERNATIONAL TYPOGRAPHIC STYLE

   Philosophy: Müller-Brockmann Grid Systems × Emil Ruder × Helvetica.
   A strict 12-column grid (visible at low opacity). A 5-step type scale.
   Hairline rules. Generous unfilled cells. One red callout color. Reads
   like opening a 1965 design manual.

   Type scale (px, ≈pt): 8 / 10 / 14 / 20 / 48
   Baseline grid: 8px
   Accent: #d62828 — used only for one or two callouts per page.
   ========================================================================== */


/* ─────────────── reset & root ─────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

:root {
    /* Strict 5-step type scale. NOTHING in between. */
    --t-xs:   8px;   /* meta */
    --t-sm:  10px;   /* small labels */
    --t-md:  14px;   /* body */
    --t-lg:  20px;   /* sub-headers */
    --t-xl:  48px;   /* section headers, masthead */

    /* 8pt baseline grid */
    --u: 8px;

    /* Two greys for hairlines and meta — both derived from black, not
       independent colors. Used at low opacity to preserve the "two-color +
       one accent" Swiss palette. */
    --hair: #000;
    --hair-faint: rgba(0, 0, 0, 0.18);
    --meta:  rgba(0, 0, 0, 0.55);

    /* Swiss-poster red — the only accent. Used sparingly. */
    --accent: #d62828;

    /* Grid container — wide enough to read the grid, narrow enough that the
       hairlines don't get lost. 12 cols × 56px max + 11 gutters × 12px. */
    --container: 920px;
    --gutter: 12px;
}

body.s {
    background: #ffffff;
    color: #000000;
    overflow-x: hidden;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    font-size: var(--t-md);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Hairline links — accent on hover. Sparingly. */
.s a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid var(--hair-faint);
    transition: border-color 80ms linear, color 80ms linear;
}
.s a:hover,
.s a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.s a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─────────────── topbar ─────────────── */
.s-top {
    border-bottom: 1px solid var(--hair);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
.s-top-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: var(--u) 0;
}
.s-brand {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: 0.4px;
    border-bottom: 0;
}
.s-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.s-nav a {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.4px;
    border-bottom: 0;
}
.s-nav a[aria-current="page"] {
    color: var(--accent);
}

/* ─────────────── container & 12-column grid ─────────────── */
.s-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 calc(var(--u) * 2);
    position: relative;
}

/* A row IS the 12-column grid. Cells use s-c{start}-{end} for span. */
.s-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gutter);
    margin-bottom: calc(var(--u) * 4);
}

/* Column-span utilities. Mobile collapses these to full-width below. */
.s-c1-3   { grid-column: 1 / span 3; }
.s-c1-6   { grid-column: 1 / span 6; }
.s-c4-6   { grid-column: 4 / span 3; }
.s-c4-9   { grid-column: 4 / span 6; }
.s-c4-12  { grid-column: 4 / span 9; }
.s-c7-9   { grid-column: 7 / span 3; }
.s-c7-12  { grid-column: 7 / span 6; }
.s-c10-12 { grid-column: 10 / span 3; }

/* Generated cell positions for the auto-flowing figures/places grids.
   Each row of 4 cards uses cols 1-3, 4-6, 7-9, 10-12. */
.s-c1-3, .s-c4-6, .s-c7-9, .s-c10-12 { min-width: 0; }

/* Defensive overflow handling — long names (some places have multi-clause
   captions) must not blow out their grid cells on a 390px phone. */
.s-figure-name,
.s-place-name,
.s-place-region,
.s-period-label,
.s-period-blurb,
.s-theme-h,
.s-theme-spine li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ─────────────── grid overlay — faint guides behind the whole page ─────────────── */
.s-grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.s-grid-overlay .s-container {
    height: 100%;
    padding: 0 calc(var(--u) * 2);
}
.s-grid-guides {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gutter);
}
.s-grid-col {
    height: 100%;
    border-left: 1px dashed var(--hair-faint);
}
.s-grid-col:last-child {
    border-right: 1px dashed var(--hair-faint);
}

/* The main content sits above the overlay. */
.s-top, .s-main { position: relative; z-index: 2; }

/* ─────────────── main ─────────────── */
.s-main { padding: calc(var(--u) * 6) 0 calc(var(--u) * 10); }

/* ─────────────── masthead ─────────────── */
.s-masthead { margin-bottom: calc(var(--u) * 12); }

.s-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u) calc(var(--u) * 2);
    align-content: start;
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
}
.s-meta-line {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}
.s-meta-val {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.s-mast {
    font-size: var(--t-xl);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
}

.s-mast-blurb {
    font-size: var(--t-md);
    line-height: 1.5;
    border-top: 1px solid var(--hair-faint);
    padding-top: var(--u);
}

.s-mast-callout {
    border-top: 1px solid var(--hair-faint);
    padding-top: var(--u);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s-accent-bar {
    display: block;
    width: 32px;
    height: 4px;
    background: var(--accent);
    margin-bottom: 4px;
}
.s-accent-num {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
}
.s-accent-label {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}

.s-mast-counts { margin-top: calc(var(--u) * 4); }
.s-count {
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s-count-num {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.s-count-label {
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}

/* ─────────────── section heads — right-aligned per brief ─────────────── */
.s-section { margin-bottom: calc(var(--u) * 12); }

.s-section-head { align-items: end; }

.s-folio {
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s-folio-num {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.s-folio-meta {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}

.s-section-h {
    font-size: var(--t-xl);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: right;
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
}

.s-section-blurb {
    font-size: var(--t-md);
    line-height: 1.5;
    border-top: 1px solid var(--hair-faint);
    padding-top: var(--u);
}

/* ─────────────── figures grid ─────────────── */
.s-figures-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    /* override the s-row default margin-bottom so the grid hugs the next section */
    margin-bottom: calc(var(--u) * 4);
    row-gap: var(--gutter);
}
.s-figure {
    margin: 0;
}
.s-figure-link {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 4px;
    padding: var(--u);
    border-top: 1px solid var(--hair);
    border-bottom: 0; /* overrides the s a hairline */
    height: 100%;
    min-height: calc(var(--u) * 16);
}
.s-figure-link:hover,
.s-figure-link:focus-visible {
    border-top-color: var(--accent);
    color: #000; /* keep body text black; only border + monogram shift */
}
.s-figure-link:hover .s-figure-mono,
.s-figure-link:focus-visible .s-figure-mono {
    color: var(--accent);
}
.s-figure-num {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}
.s-figure-mono {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.s-figure-name {
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 1.3;
    margin-top: auto;
}
.s-figure-cat {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}

/* ─────────────── places grid — photos on the grid ─────────────── */
.s-places-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: calc(var(--u) * 4);
    row-gap: calc(var(--u) * 3);
}
.s-place { margin: 0; }
.s-place-link {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--u);
    border-bottom: 0;
    height: 100%;
}
.s-place-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3; /* consistent crop, Swiss-block proportion */
    border: 1px solid var(--hair);
    overflow: hidden;
    background: #fafafa;
}
.s-place-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-place-img-blank {
    background:
        repeating-linear-gradient(
            45deg,
            #f4f4f4 0 8px,
            #fff    8px 16px
        );
}
.s-place-meta {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--hair-faint);
}
.s-place-link:hover .s-place-frame,
.s-place-link:focus-visible .s-place-frame {
    border-color: var(--accent);
}
.s-place-link:hover .s-place-name,
.s-place-link:focus-visible .s-place-name {
    color: var(--accent);
}
.s-place-num {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}
.s-place-name {
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 1.3;
}
.s-place-coords {
    font-size: var(--t-xs);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--meta);
}
.s-place-region {
    font-size: var(--t-xs);
    color: var(--meta);
    line-height: 1.4;
}

/* ─────────────── themes ─────────────── */
.s-theme-row {
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
    margin-bottom: calc(var(--u) * 3);
    align-items: start;
}
.s-theme-folio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s-theme-num {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1;
}
.s-theme-meta {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}
.s-theme-h {
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    margin-bottom: var(--u);
}
.s-theme-spine {
    list-style: none;
    padding: 0;
    margin: var(--u) 0 0;
    display: grid;
    grid-column: 4 / span 9;
    grid-template-columns: 1fr;
    gap: 4px;
}
.s-theme-spine li {
    border-top: 1px solid var(--hair-faint);
    padding: 4px 0;
    font-size: var(--t-md);
    line-height: 1.4;
}
.s-theme-spine li a {
    border-bottom: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--u);
}
.s-kind {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--meta);
    min-width: 20px;
}
.s-theme-empty {
    font-size: var(--t-sm);
    color: var(--meta);
    font-style: italic;
}

/* ─────────────── periods ─────────────── */
.s-period-row {
    border-top: 1px solid var(--hair-faint);
    padding-top: var(--u);
    margin-bottom: calc(var(--u) * 2);
    align-items: baseline;
}
.s-period-folio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s-period-num {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.s-period-label {
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 1.3;
}
.s-period-blurb {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--meta);
}

/* ─────────────── colophon ─────────────── */
.s-colophon { margin-bottom: 0; }
.s-colo-list {
    border-top: 1px solid var(--hair);
    padding-top: var(--u);
}
.s-colo-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--u);
    padding: 4px 0;
    border-bottom: 1px solid var(--hair-faint);
}
.s-colo-row dt {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meta);
}
.s-colo-row dd {
    font-size: var(--t-sm);
}
.s-colo-row dd code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--t-xs);
}
.s-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--accent);
    vertical-align: middle;
}

/* ─────────────── mobile — collapse the grid, keep the rhythm ─────────────── */
@media (max-width: 720px) {
    :root { --gutter: 8px; }

    .s-container { padding: 0 16px; }
    .s-main { padding: calc(var(--u) * 4) 0 calc(var(--u) * 8); }

    .s-row { gap: var(--u) var(--gutter); margin-bottom: calc(var(--u) * 3); }

    /* All column-span utilities collapse to full width on mobile. */
    .s-c1-3, .s-c1-6, .s-c4-6, .s-c4-9, .s-c4-12,
    .s-c7-9, .s-c7-12, .s-c10-12 {
        grid-column: 1 / -1;
    }

    /* But the figure & place grids stay 2-up on mobile — they're meant to
       feel like a grid, not a list. */
    .s-figures-grid .s-figure,
    .s-places-grid  .s-place {
        grid-column: span 6;
    }
    .s-figures-grid { row-gap: var(--u); }

    /* Section headers return to left-align on mobile — right-align loses
       its grid logic without the wide cell. */
    .s-section-h { text-align: left; }
    .s-theme-h { text-align: left; }
    .s-theme-spine { grid-column: 1 / -1; }

    /* Faint grid guides are noisy on a phone — hide them. */
    .s-grid-overlay { display: none; }

    /* Type scale stays the same — that's the point of a strict scale. The
       only mobile concession is that the masthead and section heads use
       the next step down so they fit a 360px container. */
    .s-mast { font-size: 36px; }
    .s-section-h { font-size: 32px; }
    .s-count-num { font-size: 36px; }

    .s-meta { grid-template-columns: 1fr 1fr; }
    .s-colo-row { grid-template-columns: 72px 1fr; }
}

/* ─────────────── reduced motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .s a { transition: none; }
}