/* The editorial hero. Shared by the archives and the calendar, because a rubric
   and a month are the same kind of page: a coloured field, a title block, and an
   illustration composited into the field rather than placed on top of it. */

.gi-editorial-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--gi-muted); font-size: .75rem; }
.gi-editorial-breadcrumb a { color: inherit; text-decoration: none; }
.gi-editorial-breadcrumb a:hover { text-decoration: underline; }
.gi-editorial-breadcrumb > * + *::before { content: '/'; color: var(--gi-muted); display: inline-block; padding-right: .5rem; }

.gi-journal__hero { background: var(--gi-cat-ground); color: var(--gi-ivory-50); isolation: isolate; min-height: clamp(26rem, 33vw, 34rem); overflow: hidden; position: relative; }
/* A flat rectangle of colour reads as a placeholder; the light falls from the
   illustration side so the field has somewhere to come from. */
.gi-journal__hero::before { background: radial-gradient(78% 92% at 74% 62%, color-mix(in oklch, var(--gi-cat-ground) 52%, var(--gi-ivory-50)) 0%, transparent 68%), linear-gradient(180deg, transparent 40%, var(--gi-cat-deep) 100%); content: ''; inset: 0; opacity: .6; pointer-events: none; position: absolute; z-index: 0; }
/* The traced sprig sits behind the wordmark side as a watermark, tinted by the
   rubric like every other accent on the page. */
.gi-journal__hero::after { color: var(--gi-cat-accent); content: ''; height: 132%; left: -6rem; opacity: .07; position: absolute; top: -16%; width: 26rem; z-index: 0; background: currentColor; -webkit-mask: url('../images/botanical-sprig-mark.svg') no-repeat center / contain; mask: url('../images/botanical-sprig-mark.svg') no-repeat center / contain; }
.gi-journal__hero-inner { display: flex; flex-direction: column; justify-content: center; margin-inline: auto; min-height: inherit; padding-block: clamp(1.25rem, 2vw, 2rem) clamp(3rem, 6vw, 6rem); position: relative; width: var(--gi-content); }
/* The trail belongs to the hero, not to a white strip above it. It is pinned to
   the top so the title block stays optically centred in the field. */
.gi-editorial-breadcrumb--hero { color: color-mix(in oklch, var(--gi-ivory-50) 72%, var(--gi-cat-ground)); margin-bottom: auto; position: relative; z-index: 2; }
.gi-editorial-breadcrumb--hero a { color: inherit; }
.gi-editorial-breadcrumb--hero a:hover { color: var(--gi-ivory-50); }
/* The hero is a dark field of the rubric colour. The parent theme's global
   `a:hover` resolves to a dark olive that disappears against it, so every
   control in the hero states its own hover here: the rubric's light accent, or
   ivory, both of which are drawn from the field they sit on. */
.gi-journal__hero :is(a, button):hover { color: var(--gi-cat-accent); }
.gi-journal__hero :is(.gi-editorial-breadcrumb--hero a, .gi-journal__hero-badge):hover { color: var(--gi-ivory-50); }
.gi-editorial-breadcrumb--hero > * + *::before { color: color-mix(in oklch, var(--gi-ivory-50) 62%, var(--gi-cat-ground)); }
.gi-editorial-breadcrumb--hero [aria-current] { color: var(--gi-cat-accent); font-weight: 700; }
/* The copy block keeps the vertical centre the breadcrumb would otherwise pull. */
.gi-journal__hero-copy { margin-top: auto; }
.gi-journal__hero-copy, .gi-journal__intro { max-width: min(52rem, 54%); position: relative; z-index: 1; }
.gi-journal__hero .gi-eyebrow { color: var(--gi-cat-accent); margin: 0 0 1.4rem; }
.gi-journal__hero h1 { color: var(--gi-ivory-50); font-size: clamp(3rem, 4.8vw, 5.4rem); letter-spacing: -.06em; line-height: .98; margin: 0; max-width: 13ch; overflow-wrap: anywhere; }
.gi-journal__hero h1 small { display: block; font-size: .28em; letter-spacing: -.015em; line-height: 1.15; margin-top: 1.25rem; }
.gi-journal__intro { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.gi-journal__intro p, .gi-journal__description { color: var(--gi-brand-line); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.75; margin: 0 0 1.5rem; }
.gi-journal__description > :first-child { margin-top: 0; }
.gi-journal__description > :last-child { margin-bottom: 1.5rem; }
.gi-journal__jump { align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--gi-cat-accent) 45%, transparent); color: var(--gi-ivory-50); display: inline-flex; gap: 2rem; font-size: .8125rem; font-weight: 750; min-height: 2.75rem; padding-bottom: .35rem; text-decoration: none; transition: border-color 180ms var(--gi-ease); }
.gi-journal__jump:hover { border-bottom-color: var(--gi-cat-accent); color: var(--gi-cat-accent); }
.gi-journal__jump:hover span { color: var(--gi-ivory-50); }
.gi-journal__jump span { color: var(--gi-cat-accent); font-size: 1.4rem; }
/* The artwork is composited into the field, not placed on it: a radial dissolve
   with no straight edge to give it away, a small desaturation, and a tint layer
   that lends the rubric's hue to the illustration while leaving the ground it
   covers unchanged (tinting a colour with itself is a no-op). */
.gi-journal__hero-media { inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.gi-journal__hero-media::after {
    background: var(--gi-cat-ground);
    content: '';
    inset: 0;
    mix-blend-mode: color;
    opacity: .42;
    position: absolute;
}
/* The artwork files are themselves cropped: seven of the nine carry opaque ink
   pressed against their own top edge, so whatever shows that edge shows a
   straight cut. The mask below dissolves it, which only works if the mask knows
   where the edge is. With `height: 100%` and `contain` the drawn image floated
   inside a taller box and its top landed at a different offset per viewport
   (67px at 1000, 0 at 1440), which no fixed percentage can track. Carrying the
   artwork's own ratio, capped to the hero, pins the top of the bitmap to the top
   of the element at every width, and nothing is left for the hero to clip. */
.gi-journal__hero-art { aspect-ratio: 1672 / 941; bottom: 0; filter: saturate(.88) contrast(.97); height: auto; max-height: 100%; object-fit: contain; object-position: right bottom; position: absolute; right: 0; top: auto; width: min(62vw, 70rem);
    -webkit-mask-image: radial-gradient(112% 118% at 79% 68%, #000 34%, rgb(0 0 0 / .78) 56%, rgb(0 0 0 / .3) 78%, transparent 93%), linear-gradient(0deg, transparent 0%, #000 11%), linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .5) 6%, #000 16%);
    -webkit-mask-composite: source-in, source-in;
    mask-image: radial-gradient(112% 118% at 79% 68%, #000 34%, rgb(0 0 0 / .78) 56%, rgb(0 0 0 / .3) 78%, transparent 93%), linear-gradient(0deg, transparent 0%, #000 11%), linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .5) 6%, #000 16%);
    mask-composite: intersect, intersect; }

@media (max-width: 760px) {
    /* --- Mobile hero -----------------------------------------------------
       Rebuilt for the stacked layout. The illustration is not a band placed
       under the copy: it is the ground of the section. It fills the hero,
       anchored to the bottom where the arrangement is densest, and dissolves
       upward into the rubric colour, so the copy sits inside the same image
       rather than on top of a second block. */
    .gi-journal__hero { min-height: 0; }
    .gi-journal__hero-inner { justify-content: flex-start; padding-block: 1rem calc(min(75vw, 22rem) - 2.5rem); }
    .gi-journal__hero-copy { margin-top: 1.5rem; }
    .gi-journal__hero-copy, .gi-journal__intro { max-width: 100%; }
    .gi-journal__hero .gi-eyebrow { margin-bottom: .8rem; }
    .gi-journal__hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.4rem); max-width: 14ch; }
    .gi-journal__intro { margin-top: 1.1rem; }
    .gi-journal__intro p, .gi-journal__description { font-size: .95rem; line-height: 1.65; margin-bottom: 1.1rem; }

    .gi-journal__hero-art {
        aspect-ratio: 4 / 3;
        bottom: 0;
        height: auto;
        left: 0;
        max-height: 22rem;
        object-fit: cover;
        object-position: center bottom;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        /* Solid where the arrangement sits, gone before it reaches the copy.
           The composite list is reset with it: this is one layer, not the
           three the desktop rule composites. */
        -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 28%, rgb(0 0 0 / .58) 58%, rgb(0 0 0 / .14) 82%, transparent 100%);
        mask-image: linear-gradient(0deg, #000 0%, #000 28%, rgb(0 0 0 / .58) 58%, rgb(0 0 0 / .14) 82%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
    /* Tonal rather than illustrative: the artwork carries the rubric's colour
       almost entirely, so it reads as the section's own ground. */
    .gi-journal__hero-media::after { opacity: .48; }
    /* A scrim under the copy, so legibility never depends on what the
       illustration happens to be doing behind it. */
    .gi-journal__hero::before {
        background:
            linear-gradient(180deg, var(--gi-cat-ground) 0%, color-mix(in oklch, var(--gi-cat-ground) 78%, transparent) 30%, transparent 52%),
            radial-gradient(130% 58% at 50% 104%, color-mix(in oklch, var(--gi-cat-deep) 55%, transparent) 0%, transparent 72%);
        opacity: 1;
        z-index: 1;
    }
    .gi-journal__hero::after { display: none; }
}

/* --- Photographic artwork ------------------------------------------------
   The archive illustrations are cut-outs with an alpha channel, so a radial
   dissolve is enough to seat them. A featured photograph is a full rectangle:
   it has to bleed across the field and dissolve on the copy side instead, and
   it takes a heavier tint so it reads as part of the coloured section rather
   than a window cut into it. */
.gi-journal__hero--photo .gi-journal__hero-art {
    filter: saturate(.82) contrast(.95);
    height: 100%;
    object-fit: cover;
    object-position: center;
    right: 0;
    width: 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 16%, rgb(0 0 0 / .82) 40%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 16%, rgb(0 0 0 / .82) 40%, #000 62%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}
.gi-journal__hero--photo .gi-journal__hero-media::after { opacity: .5; }
/* The copy keeps its own side of the field. */
.gi-journal__hero--photo .gi-journal__hero-copy,
.gi-journal__hero--photo .gi-journal__intro { max-width: min(44rem, 46%); }
/* A photograph is unpredictable behind text in a way a cut-out is not, so the
   copy side carries its own scrim above the media rather than below it. */
.gi-journal__hero--photo::before {
    background:
        linear-gradient(90deg, var(--gi-cat-ground) 0%, color-mix(in oklch, var(--gi-cat-ground) 88%, transparent) 38%, transparent 62%),
        linear-gradient(180deg, transparent 55%, var(--gi-cat-deep) 100%);
    opacity: 1;
    z-index: 1;
}

@media (max-width: 760px) {
    .gi-journal__hero--photo .gi-journal__hero-art {
        aspect-ratio: 3 / 2;
        height: auto;
        object-position: center;
        width: 100%;
        -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 34%, rgb(0 0 0 / .6) 62%, rgb(0 0 0 / .15) 84%, transparent 100%);
        mask-image: linear-gradient(0deg, #000 0%, #000 34%, rgb(0 0 0 / .6) 62%, rgb(0 0 0 / .15) 84%, transparent 100%);
    }
    .gi-journal__hero--photo .gi-journal__hero-copy,
    .gi-journal__hero--photo .gi-journal__intro { max-width: 100%; }
    .gi-journal__hero--photo .gi-journal__hero-inner { padding-bottom: calc(min(66vw, 19rem) - 1.5rem); }
}

/* --- Article hero ---------------------------------------------------------
   Same field, same compositing; the article adds a rubric chip and a byline. */
.gi-journal__hero-badge {
    align-items: center;
    background: color-mix(in oklch, var(--gi-ivory-50) 18%, transparent);
    border: 1px solid color-mix(in oklch, var(--gi-ivory-50) 34%, transparent);
    border-radius: 999px;
    color: var(--gi-ivory-50);
    display: inline-flex;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 1.1rem;
    min-height: 2rem;
    padding: .3rem .9rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 180ms var(--gi-ease);
}
.gi-journal__hero-badge:hover { background: color-mix(in oklch, var(--gi-ivory-50) 30%, transparent); color: var(--gi-ivory-50); }

.gi-journal__hero-meta { align-items: center; display: flex; gap: .9rem; margin-top: clamp(1.5rem, 2.5vw, 2.25rem); position: relative; z-index: 1; }
.gi-journal__hero-meta .gi-article__avatar { border-radius: 999px; flex: 0 0 auto; height: 2.75rem; object-fit: cover; width: 2.75rem; }
.gi-journal__hero-author { color: var(--gi-ivory-50); font-size: .9375rem; font-weight: 750; margin: 0; }
.gi-journal__hero-dates { color: color-mix(in oklch, var(--gi-ivory-50) 90%, var(--gi-cat-ground)); display: flex; flex-wrap: wrap; font-size: .8125rem; gap: .4rem; margin: .2rem 0 0; }

/* --- Article hero, its own proportions ------------------------------------
   An archive title is one or two words; an article title is a sentence. The
   same display scale turned a 60-character title into five lines and a hero
   nearly a thousand pixels tall, so the article gets its own scale, a wider
   measure, and room for the byline. */
.gi-journal__hero--article { min-height: clamp(22rem, 27vw, 30rem); }
.gi-journal__hero--article h1 {
    font-size: clamp(1.9rem, 2.9vw, 3.25rem);
    letter-spacing: -.04em;
    line-height: 1.06;
    max-width: 20ch;
}
.gi-journal__hero--article .gi-journal__hero-inner { padding-block: clamp(1.25rem, 2vw, 2rem) clamp(2.25rem, 4vw, 4rem); }
.gi-journal__hero--article .gi-journal__intro { margin-top: clamp(1rem, 1.8vw, 1.6rem); }
.gi-journal__hero--article .gi-journal__description { font-size: clamp(.95rem, 1.1vw, 1.0625rem); }
.gi-journal__hero--article .gi-journal__description p { margin-bottom: 0; }
/* The copy runs longer here, so the photograph takes a little less of the row. */
.gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-art { width: 56%; }
.gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-copy,
.gi-journal__hero--article.gi-journal__hero--photo .gi-journal__intro,
.gi-journal__hero--article .gi-journal__hero-meta { max-width: min(42rem, 52%); }

@media (max-width: 760px) {
    .gi-journal__hero--article { min-height: 0; }
    .gi-journal__hero--article h1 { font-size: clamp(1.75rem, 6.4vw, 2.4rem); max-width: 100%; }
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-copy,
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__intro,
    .gi-journal__hero--article .gi-journal__hero-meta { max-width: 100%; }
}

/* The article page is already full-bleed but carries inline padding; the hero
   escapes it so it reads as a section boundary, not a card inside the page. */
.gi-article-page .gi-journal__hero { margin-inline: calc(50% - 50vw); width: 100vw; }
.gi-article-page .gi-journal__hero-inner { width: var(--gi-shell); }

/* Article photography keeps the same copy-left, image-right composition on a
   phone. The image narrows with the viewport and dissolves behind the copy edge;
   it never becomes a separate band below the text. */
@media (max-width: 760px) {
    .gi-journal__hero--article {
        min-height: clamp(34rem, 92vw, 42rem);
    }
    .gi-journal__hero--article .gi-journal__hero-inner {
        justify-content: center;
        min-height: inherit;
        padding-block: 1rem 1.75rem;
    }
    .gi-journal__hero--article .gi-editorial-breadcrumb--hero,
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-copy,
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__intro,
    .gi-journal__hero--article .gi-journal__hero-meta {
        max-width: 62%;
    }
    .gi-journal__hero--article .gi-journal__hero-copy { margin-top: auto; }
    .gi-journal__hero--article h1 {
        font-size: clamp(1.65rem, 6vw, 2.35rem);
        line-height: 1.04;
        max-width: 100%;
    }
    .gi-journal__hero--article .gi-journal__description {
        font-size: clamp(.82rem, 2.5vw, .95rem);
        line-height: 1.58;
    }
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-art {
        aspect-ratio: auto;
        bottom: 0;
        height: 100%;
        left: auto;
        max-height: none;
        object-fit: cover;
        object-position: center;
        right: 0;
        top: 0;
        width: 52%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .28) 17%, rgb(0 0 0 / .8) 42%, #000 64%);
        mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .28) 17%, rgb(0 0 0 / .8) 42%, #000 64%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
    .gi-journal__hero--article.gi-journal__hero--photo::before {
        background:
            linear-gradient(90deg, var(--gi-cat-ground) 0%, var(--gi-cat-ground) 45%, color-mix(in oklch, var(--gi-cat-ground) 82%, transparent) 62%, transparent 82%),
            linear-gradient(180deg, transparent 62%, var(--gi-cat-deep) 100%);
        opacity: 1;
        z-index: 1;
    }
}

@media (max-width: 480px) {
    .gi-journal__hero--article .gi-editorial-breadcrumb--hero,
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__hero-copy,
    .gi-journal__hero--article.gi-journal__hero--photo .gi-journal__intro,
    .gi-journal__hero--article .gi-journal__hero-meta {
        max-width: 68%;
    }
    .gi-journal__hero--article .gi-journal__hero-badge {
        font-size: .58rem;
        padding-inline: .7rem;
    }
    .gi-journal__hero--article .gi-journal__hero-dates {
        font-size: .7rem;
    }
}