/* ───────────────────────────────────────────────────────────────────────
   home-editorial.css — page-scoped editorial homepage
   All rules live under .page-home--editorial so the rest of the site is
   unaffected. Cream paper + deep ink, Erode display + Inter body +
   JetBrains Mono accents. Two-column photo spread (each photo keeps its
   natural aspect ratio) + typographic ToC. On PC at decent height the
   whole page fits within the viewport (no scroll).
   ─────────────────────────────────────────────────────────────────────── */

.page-home--editorial {
    /* Local token overrides ------------------------------------------- */
    --bg-base: #f5f1ea;
    --bg-primary: #efe9df;
    --bg-secondary: #e8e1d4;
    --bg-elevated: #ffffff;
    --text-primary: #161413;
    --text-secondary: #4a4641;
    --text-muted: #8a847a;
    --border-subtle: rgba(22, 20, 19, 0.06);
    --border-default: rgba(22, 20, 19, 0.12);
    --border-hover: rgba(22, 20, 19, 0.24);

    /* Editorial-only vars --------------------------------------------- */
    --ed-ink: #161413;
    --ed-ink-soft: #4a4641;
    --ed-ink-mute: #8a847a;
    --ed-paper: #f5f1ea;
    --ed-paper-deep: #ebe4d6;
    --ed-rule: 1px solid var(--ed-ink);
    --ed-hair: 1px solid rgba(22, 20, 19, 0.18);
    --ed-gutter: clamp(1.25rem, 3.5vw, 3.5rem);
    --ed-serif: 'Erode', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --ed-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --ed-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

    background: var(--ed-paper);
    color: var(--ed-ink);
    font-family: var(--ed-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    /* On PC at >= 820px the page fits the viewport without scrolling. */
    min-height: 100vh;
}

/* Dark theme overrides (page-specific; shared vars in editorial-dark.css) */
[data-theme="dark"] .page-home--editorial .ed-contents__row:focus-visible {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .page-home--editorial .ed-refresh {
    background: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .page-home--editorial .ed-refresh__label {
    border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .page-home--editorial .ed-photo::after {
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .page-home--editorial .ed-photo:hover::after {
    border-color: rgba(255, 255, 255, 0.32);
}

/* Lock-to-viewport on PC heights ≥ 820px (and width ≥ 1024px). Mobile
   and short windows continue to scroll naturally. */
@media (min-width: 1024px) and (min-height: 820px) {
    .page-home--editorial { min-height: 100vh; }
}

/* Neutralize any global ambient layers if they leak in ---------------- */
.page-home--editorial .fixed-grid,
.page-home--editorial .ambient-splashes,
.page-home--editorial .grain-overlay { display: none !important; }

/* Subtle paper-grain --------------------------------------------------- */
.page-home--editorial::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* ───── Standalone theme toggle (header hidden on homepage) ─────────── */
.page-home--editorial .ed-theme-toggle {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--ed-paper);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--ed-ink);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.page-home--editorial .ed-theme-toggle:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: scale(1.06);
}
[data-theme="dark"] .page-home--editorial .ed-theme-toggle {
    background: var(--ed-paper);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .page-home--editorial .ed-theme-toggle:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16);
}

/* ───── Standalone command-palette trigger (sits left of theme toggle) ─ */
.page-home--editorial .ed-cmdp-toggle {
    position: fixed;
    top: 1.1rem;
    right: calc(1.1rem + 2.4rem + 0.5rem);
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4rem;
    padding: 0 0.7rem;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--ed-paper);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--ed-ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.page-home--editorial .ed-cmdp-toggle:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: scale(1.04);
}
.page-home--editorial .ed-cmdp-toggle i { font-size: 1rem; }
.page-home--editorial .ed-cmdp-kbd {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1;
    padding: 4px 7px;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--ed-ink) 10%, transparent);
    color: color-mix(in srgb, var(--ed-ink) 85%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.page-home--editorial .ed-cmdp-cmd {
    font-size: 1.35em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.page-home--editorial .ed-cmdp-letter {
    font-size: 1em;
    line-height: 1;
}
[data-theme="dark"] .page-home--editorial .ed-cmdp-toggle {
    background: var(--ed-paper);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .page-home--editorial .ed-cmdp-toggle:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16);
}
@media (max-width: 480px) {
    .page-home--editorial .ed-cmdp-toggle {
        padding: 0;
        width: 2.4rem;
        justify-content: center;
    }
    .page-home--editorial .ed-cmdp-kbd { display: none; }
}

.page-home--editorial .site-footer { display: none; }

/* ───── Page container ──────────────────────────────────────────────── */
.ed-page {
    position: relative;
    z-index: 1;
    max-width: 2080px;
    margin: 0 auto;
    padding: 1.5rem var(--ed-gutter) 0;
    display: flex;
    flex-direction: column;
}

/* On PC (locked-viewport mode) the page fills the available height and
   the spread takes whatever's left after masthead + colophon. Padding is
   pulled in tight here so the spread (editorial + photos) reaches almost
   to the bottom edge — the photo grid is height-bound on most desktop
   sizes, so every pixel reclaimed here becomes a larger photo. */
@media (min-width: 1024px) and (min-height: 820px) {
    .ed-page {
        min-height: 100vh;
        padding-top: 1rem;
        padding-bottom: 0;
    }
}

/* ───── Masthead ────────────────────────────────────────────────────── */
.ed-masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0 0.55rem;
    border-top: var(--ed-rule);
    font-family: var(--ed-mono);
    font-size: clamp(0.7rem, 0.78vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
    flex: 0 0 auto;
}
.ed-masthead__left,
.ed-masthead__right {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    min-width: 0;
}
.ed-masthead__sep { color: var(--ed-ink-mute); }
.ed-masthead.is-animating { transform-origin: left center; }
.ed-masthead [data-mast-hidden="1"] { display: none; }

/* ───── Spread (two-pane) ───────────────────────────────────────────── */
.ed-spread {
    display: grid;
    /* Editorial column sizes to its content; photos fill the rest */
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
}

/* Locked-viewport: spread fills remaining height. Three things matter:
     1. grid-template-rows: 1fr — without it the row is auto/max-content
        and neither pane truly stretches.
     2. .ed-photos drops its aspect-ratio lock and uses flex: 1 1 0 +
        height: 100% to fill the pane vertically (no gap below).
     3. Spread columns are re-weighted so photos take ~80% of the inner
        width, the page max-width is widened, and the right gutter is
        tightened — so photos extend much further horizontally too. */
@media (min-width: 1024px) and (min-height: 820px) {
    .ed-page {
        max-width: 2400px;
        padding-top: 0;
        padding-right: clamp(0.75rem, 1.2vw, 1.5rem);
        padding-left: clamp(1rem, 2vw, 2.5rem);
        padding-bottom: 0;
    }
    .ed-spread {
        flex: 0 0 auto;
        height: 100vh;
        align-items: stretch;
        align-content: center;
        padding: clamp(2.5rem, 5vh, 6rem) 0;
        grid-template-columns: minmax(18rem, 1fr) minmax(0, 3fr);
        grid-template-rows: auto;
        gap: clamp(1rem, 2vw, 2rem);
        min-height: 0;
    }
    .ed-spread__editorial,
    .ed-spread__photos {
        height: 100%;
        min-height: 0;
    }
    .ed-spread .ed-spread__photos {
        padding: 0;
    }
    /* Taller grid for locked-viewport: ~15% more height for the same
       width. Cell aspect ratios shift slightly (A/B/C → ~2:3 instead
       of 3:4, D → ~7:6 instead of 4:3) but object-fit: cover absorbs
       the difference gracefully. Auto margins centre the grid
       vertically within the photos pane. */
    .ed-spread__photos .ed-photos {
        aspect-ratio: 99 / 78;
        flex: 0 1 auto;
        min-height: 0;
    }
    .ed-masthead { padding: 0.4rem 0 0.35rem; }
    .ed-refresh { margin-bottom: 0.35rem; }
    .ed-spread__editorial { justify-content: flex-start; }
    /* Lift the wordmark so the vertical centre of "Nino" aligns with
       the vertical centre of the masthead rule bar. The offset is
       roughly (nameHeight - mastheadHeight) / 2, responsive to the
       name's font-size which scales with vw. */
    .ed-wordmark { margin-top: clamp(-2.2rem, -3.2vw, -1rem); }
    .ed-contents {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .ed-contents__row {
        flex: 1 1 0;
        min-height: 0;
        padding: clamp(0.7rem, 1.6vh, 1.4rem) 0.1rem;
    }
}

.ed-spread__editorial {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ed-spread__photos {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ───── Wordmark ────────────────────────────────────────────────────── */
.ed-wordmark {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
}
.ed-wordmark__name {
    font-family: var(--ed-serif);
    font-weight: 500;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--ed-ink);
    margin: 0;
    font-feature-settings: "ss01";
}
.ed-wordmark__handle {
    font-family: var(--ed-mono);
    font-weight: 400;
    font-size: clamp(0.78rem, 1.1vw, 1rem);
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--ed-ink-mute);
    margin: 0.4rem 0 0 0.2em;
}

/* ───── Headline + FR subhead ───────────────────────────────────────── */
.ed-headline {
    font-family: var(--ed-serif);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.85vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--ed-ink);
    margin: 0 0 0.7rem 0;
    max-width: 28ch;
}
.ed-subhead {
    font-family: var(--ed-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    line-height: 1.4;
    color: var(--ed-ink-mute);
    margin: 0 0 clamp(1.4rem, 3vw, 2.25rem);
    max-width: 32ch;
}

/* ───── Table of Contents (the evolved wheel) ───────────────────────── */
.ed-contents__heading {
    font-family: var(--ed-mono);
    font-weight: 500;
    font-size: clamp(0.68rem, 0.78vw, 0.78rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ed-ink-mute);
    margin: 0 0 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: var(--ed-hair);
}
.ed-contents { display: block; }
.ed-contents__row {
    display: grid;
    grid-template-columns: auto minmax(max-content, 1fr) auto;
    column-gap: 0.9rem;
    align-items: center;
    padding: clamp(0.55rem, 1.1vh, 0.85rem) 0.1rem clamp(0.55rem, 1.1vh, 0.85rem) 0;
    border-bottom: var(--ed-hair);
    color: var(--ed-ink);
    text-decoration: none;
    transition: color 250ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-contents__icon {
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    color: var(--ed-ink-mute);
    transition: color 250ms ease;
}
.ed-contents__label-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    overflow: hidden;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-contents__label {
    font-family: var(--ed-serif);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.15vw, 2rem);
    color: var(--ed-ink);
    line-height: 1;
    flex: 0 0 auto;
}
.ed-contents__leader {
    flex: 1 1 auto;
    height: 1px;
    background-image: radial-gradient(circle, var(--ed-ink-mute) 1px, transparent 1.4px);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: left center;
    opacity: 0.55;
}
.ed-contents__arrow {
    font-family: var(--ed-mono);
    font-size: clamp(1rem, 1.1vw, 1.18rem);
    color: var(--ed-ink-soft);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                color 250ms ease;
    line-height: 1;
}
.ed-contents__row:hover {
    color: var(--ed-ink);
    border-bottom-color: var(--ed-ink);
}
.ed-contents__row:hover .ed-contents__icon {
    color: var(--ed-ink);
}
.ed-contents__row:hover .ed-contents__label-wrap {
    transform: translateX(6px);
}
.ed-contents__row:hover .ed-contents__arrow {
    color: var(--ed-ink);
    transform: translateX(4px);
}
.ed-contents__row:focus-visible {
    outline: none;
    background: rgba(22, 20, 19, 0.04);
}

@keyframes edArrowHint {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(8px); }
    70%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}
.ed-contents__row.is-hint .ed-contents__arrow {
    animation: edArrowHint 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ───── Auto-refresh progress strip ─────────────────────────────────── */
/* Slim editorial bar above the photos that fills left→right over the
   refresh interval. JS restarts the animation on each fetch so the bar
   stays in sync with the actual cadence. */
.ed-refresh {
    flex: 0 0 auto;
    height: 2px;
    background: rgba(22, 20, 19, 0.10);
    margin-bottom: clamp(0.55rem, 1vh, 0.85rem);
    /* Visible so the paused label can extend above/below the 2px strip. */
    overflow: visible;
    position: relative;
}
.ed-refresh__bar {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--ed-ink);
    transform: scaleX(0);
    transform-origin: left center;
    animation: ed-refresh-fill 10s linear infinite;
    will-change: transform;
    transition: opacity 220ms ease;
}
.ed-refresh__label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ed-mono);
    font-weight: 500;
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ed-ink);
    /* Solid paper pill: stays legible whether the bar fill is below it
       or not, since the pill itself masks the strip behind the text. */
    background: var(--ed-paper);
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(22, 20, 19, 0.55);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}
.ed-refresh.is-paused .ed-refresh__bar { opacity: 0.45; }
.ed-refresh.is-paused .ed-refresh__label { opacity: 1; }
@keyframes ed-refresh-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ───── Photo spread (asymmetric perfect square, no gap) ───────────── */
/* Layout follows the editorial mockup:
     +-------+---+---+
     |       | B | C |
     |   A   +---+---+
     |       |   D   |
     +-------+-------+
   A = big portrait (left, full height)
   B, C = small portraits (top right, side by side)
   D = landscape (bottom right, spans both right columns)
   Columns 2:1:1, rows 1:1, container is a perfect square. */
.ed-photos {
    display: grid;
    /* Track sizes derived to make every cell match its photo's natural
       aspect: cell A = 17fr × 68fr → 0.75 (3:4 portrait), cells B/C =
       8fr × 32fr → 0.75, cell D = 16fr × 36fr → 1.333 (4:3 landscape).
       These ratios only hold if the grid container is at 99/68 aspect. */
    grid-template-columns: minmax(0, 17fr) minmax(0, 8fr) minmax(0, 8fr);
    grid-template-rows: minmax(0, 32fr) minmax(0, 36fr);
    grid-template-areas:
        "A B C"
        "A D D";
    gap: 0.375rem;
    aspect-ratio: 99 / 68;
    width: 100%;
    max-width: var(--ed-grid-w, none);
    margin-left: auto;
    margin-right: 0; /* keep photos toward the outer edge of the spread */
    min-height: 0;
    flex: 0 0 auto;
    transition: opacity 240ms ease;
}
.ed-photos.is-loading { opacity: 0.5; }

.ed-photo--A { grid-area: A; }
.ed-photo--B { grid-area: B; }
.ed-photo--C { grid-area: C; }
.ed-photo--D { grid-area: D; }

/* Mobile/tablet fallback: when not placed in the desktop grid, give each
   cell its natural orientation so the masonry layout has a real height.
   Overridden by the grid's row sizing on desktop (height: 100%). */
.ed-photo--A,
.ed-photo--B,
.ed-photo--C { aspect-ratio: 3 / 4; }
.ed-photo--D { aspect-ratio: 4 / 3; }
/* Inside the grid the tracks fully determine cell size — neutralise the
   per-cell aspect-ratios so Safari doesn't feed them back into the track
   sizing algorithm (WebKit bug: aspect-ratio on grid children inflates
   the item's intrinsic contribution even when height is explicit). */
.ed-photos > .ed-photo { aspect-ratio: auto; }

.ed-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ed-paper-deep);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* All children are absolutely-positioned so the item's size comes
       entirely from the grid tracks. contain prevents Safari from
       re-running track sizing when images load inside. */
    contain: size layout;
}

.ed-photo__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--ed-paper-deep);
}
.ed-photo__placeholder,
.ed-photo__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ed-photo__placeholder {
    filter: blur(20px);
    transform: scale(1.1);
    transition: opacity 600ms ease;
}
.ed-photo__image {
    opacity: 0;
    transition: opacity 600ms ease;
}
.ed-photo__media.loaded .ed-photo__image { opacity: 1; }
.ed-photo__media.loaded .ed-photo__placeholder { opacity: 0; }

/* Caption: now wraps to multiple lines if needed, never overflows ----- */
.ed-photo__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.7rem 0.95rem 0.75rem;
    background: linear-gradient(to top, rgba(22, 20, 19, 0.78) 0%, rgba(22, 20, 19, 0.55) 55%, rgba(22, 20, 19, 0) 100%);
    color: #f5f1ea;
    font-family: var(--ed-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    /* Allow wrapping inside the caption, never spill past the image. */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.ed-photo:hover .ed-photo__caption,
.ed-photo:focus-visible .ed-photo__caption {
    opacity: 1;
    transform: translateY(0);
}
.ed-photo__title {
    font-weight: 500;
    color: #f5f1ea;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ed-photo__camera {
    color: rgba(245, 241, 234, 0.78);
    white-space: normal;
    overflow-wrap: anywhere;
}

.ed-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(22, 20, 19, 0.08);
    pointer-events: none;
    transition: border-color 280ms ease;
}
.ed-photo:hover::after { border-color: rgba(22, 20, 19, 0.32); }

/* Empty state when DB returns no photos ------------------------------- */
.ed-photos--empty {
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 320px;
}
.ed-photos--empty .ed-photos__empty {
    font-family: var(--ed-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-ink-mute);
    text-align: center;
    padding: 2rem;
    border: var(--ed-hair);
}

/* ───── Colophon (home override) ────────────────────────────────────── */
.ed-colophon {
    padding: 0.8rem 0 0.9rem;
    margin-top: clamp(0.75rem, 2vw, 2rem);
    flex: 0 0 auto;
}

/* ───── Entrance animation states ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ed-anim-rule { transform: scaleX(0); }
    .ed-anim-rise { opacity: 0; transform: translateY(12px); }
    .ed-anim-photo { opacity: 0; transform: translateY(14px); }
}

/* ───── Tablet: 641–1023px ──────────────────────────────────────────── */
@media (max-width: 1023px) {
    .ed-spread {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.5rem, 4vw, 2.5rem);
        padding-top: clamp(1.5rem, 4vw, 2.5rem);
    }
    .ed-photos {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    .ed-headline { max-width: 30ch; }
}

/* ───── Mobile: ≤640px ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ed-page {
        padding: calc(var(--header-height, 80px) + 0.5rem) 1.25rem 0;
    }
    /* Header is hidden on the homepage — drop the header-height offset */
    .page-home--editorial .ed-page {
        padding-top: 1rem;
    }
    .ed-masthead {
        font-size: 0.6rem;
        gap: 0.5rem;
    }
    .ed-masthead__left,
    .ed-masthead__right { gap: 0.5rem; }
    .ed-masthead__issue,
    .ed-masthead__volume,
    .ed-masthead__author { display: none; }

    .ed-spread {
        gap: 1.75rem;
        padding: 1.5rem 0 1rem;
    }

    .ed-wordmark__name { font-size: clamp(3.25rem, 17vw, 5rem); }
    .ed-wordmark__handle { letter-spacing: 0.28em; }
    .ed-headline { font-size: clamp(1.5rem, 5.5vw, 2rem); }
    .ed-subhead { font-size: 1rem; }

    .ed-photos {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "A B"
            "C D";
        gap: 0.5rem;
        /* Container aspect = 2 cols × 2 rows of 3:4 cells → 3:4 overall.
           Forces equal row heights so all four tiles are uniform. */
        aspect-ratio: 3 / 4;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .ed-photo { margin: 0; }
    .ed-photo__caption { display: none; }

    .ed-contents__row {
        padding: 0.85rem 0;
        min-height: 52px;
        grid-template-columns: auto 1fr auto;
    }
    .ed-contents__leader { display: none; }
    .ed-contents__label { font-size: 1.4rem; }

}

/* ───── Reduced motion: skip entrance, keep hover ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ed-anim-rule,
    .ed-anim-rise,
    .ed-anim-photo {
        transform: none !important;
        opacity: 1 !important;
    }
    .ed-contents__row,
    .ed-contents__icon,
    .ed-contents__label-wrap,
    .ed-contents__arrow,
    .ed-photo__caption,
    .ed-photo::after {
        transition: none !important;
    }
    .ed-contents__row.is-hint .ed-contents__arrow { animation: none !important; }
    .ed-refresh__bar { animation: none !important; transform: scaleX(0); }
}