/* ============================================================================
   GEPA — blog

   The GEPA Blog: a forest masthead to arrive under, paper to read on. The
   lead story, a post's cover and an empty state all ride up over the bottom
   of the masthead by the same distance, so the two surfaces interlock rather
   than stacking as two boxes.

   Reads the token layer. Components here read local tokens (--text,
   --card, --rule …) and never name a surface, so a card is the same card on
   the index, under a post, or in a band of well colour.
   ========================================================================== */

.blog { --blog-lift: var(--s7); --blog-frame: 1120px; }
@media (min-width: 768px) { .blog { --blog-lift: var(--s8); } }

/* One column that the header, the cover and the body all hang from, so their
   left edges line up at every width. */
.blog-frame { width: 100%; max-width: var(--blog-frame); margin-inline: auto; }

/* ------------------------------------------------------------ masthead --
   A photograph under the band, held back by a forest gradient heavy enough
   that the smallest text on it (text-2) clears 4.5:1 over a white pixel. The
   gradient runs top-to-bottom on a phone, where text spans the width, and
   left-to-right from 900px, where the text keeps to the left. */

.blog-mast {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.blog-mast-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.blog-mast-photo picture { display: block; width: 100%; height: 100%; }
.blog-mast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .4;
}
/* A post's own cover, blurred to colour, behind its header. */
.blog-mast-photo.is-ambient img {
    opacity: .5;
    filter: blur(28px) saturate(1.25);
    transform: scale(1.2);
}
.blog-mast::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(70% 60% at 90% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--forest-base) 64%, transparent) 0%, var(--forest-base) 92%);
}
@media (min-width: 900px) {
    .blog-mast::before {
        background:
            radial-gradient(55% 70% at 92% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
            linear-gradient(90deg, var(--forest-base) 34%, color-mix(in srgb, var(--forest-base) 62%, transparent) 100%);
    }
    .blog-mast.is-post::before {
        background:
            radial-gradient(55% 70% at 92% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
            linear-gradient(180deg, color-mix(in srgb, var(--forest-base) 66%, transparent) 0%, var(--forest-base) 100%);
    }
}

.blog-mast-inner {
    display: grid;
    gap: var(--s4);
    padding-block: var(--s7);
}
/* Room for whatever rides up over the band's bottom edge. */
.blog-mast.has-lift .blog-mast-inner { padding-bottom: calc(var(--blog-lift) + var(--s6)); }

.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
}
.blog-kicker::before {
    content: "";
    flex: none;
    width: 26px;
    height: 1.5px;
    background: var(--gold);
}

.blog-mast-title {
    margin: 0;
    font: 400 clamp(56px, 15vw, 132px)/.9 var(--font-display);
    letter-spacing: -.04em;
    color: var(--text-title);
}
.blog-mast-title em {
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
}

.blog-mast-lead {
    margin: 0;
    max-width: 50ch;
    font: 400 17px/1.6 var(--font-ui);
    color: var(--text-2);
}
@media (min-width: 768px) { .blog-mast-lead { font-size: 19px; } }

.blog-mast-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    font: 500 13px/1.5 var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
.blog-mast-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-dot { color: var(--deco); }

/* ------------------------------------------------------ topic chips --
   A swipeable row on a phone, where seven chips would otherwise stack four
   deep; a wrapping row from 768px. The chips carry a sunk fill so their text
   never sits straight on the photograph. */

.blog-chips {
    display: flex;
    gap: var(--s2);
    margin: var(--s2) calc(-1 * var(--gutter)) 0;
    padding: 6px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: var(--gutter);
}
.blog-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .blog-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.blog-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--forest-sunk) 72%, transparent);
    color: var(--text);
    font: 600 14px/1 var(--font-ui);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .14s ease, background .14s ease;
}
.blog-chip:hover { border-color: var(--gold); }
.blog-chip-count {
    font: 500 12px/1 var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
/* The chosen topic: gold fill, and a check mark so it is not colour alone. */
.blog-chip[aria-current="page"] {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--gold-ink);
}
.blog-chip[aria-current="page"] .blog-chip-count { color: var(--gold-ink); }

/* ------------------------------------------------------------- paper -- */

.blog-paper { padding-bottom: var(--section); }

/* A picture slot. Everything that holds a cover uses one, so an uploaded
   image, a library photograph and a course cover all crop the same way.
   16:10 because that is the shape gepa:compose-covers cuts course covers to,
   with the workshop flyer at full height, and the shape the catalogue's
   course cards show them at: any narrower and the flyer loses its top and
   bottom. */
.blog-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--forest-lifted);
}
.blog-media picture { display: block; width: 100%; height: 100%; }
.blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

/* ------------------------------------------------------- lead story -- */

.blog-lead {
    position: relative;
    display: grid;
    margin-top: calc(-1 * var(--blog-lift));
    background: var(--card);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-float);
}
.blog-lead:hover .blog-media img { transform: scale(1.03); }
/* The ring follows the keyboard, not the mouse: :focus-within would also
   light up on a click in Chromium. Browsers without :has() keep the old rule. */
.blog-lead:has(.blog-stretch:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@supports not selector(:has(*)) {
    .blog-lead:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
}

.blog-lead-body {
    display: grid;
    align-content: center;
    gap: var(--s4);
    padding: var(--s5);
}
@media (min-width: 900px) {
    .blog-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .blog-lead .blog-media { aspect-ratio: auto; min-height: 460px; }
    .blog-lead-body { padding: var(--s7) var(--s6); }
}

.blog-lead-flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.blog-flag {
    font: 800 12px/1.4 var(--font-ui);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--action);
}

.blog-lead-title {
    margin: 0;
    font: 400 clamp(28px, 4vw, 44px)/1.08 var(--font-display);
    letter-spacing: -.02em;
    color: var(--text-title);
    text-wrap: balance;
}
.blog-lead-excerpt {
    margin: 0;
    font: 400 17px/1.6 var(--font-ui);
    color: var(--text-2);
}

/* One tab stop for a whole tile: the title's link is stretched over it and
   the focus ring is drawn on the tile. */
.blog-stretch { color: inherit; text-decoration: none; }
.blog-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-stretch:focus-visible { outline: none; }

.blog-lead-cta { justify-self: start; pointer-events: none; }

/* ------------------------------------------------------------- tags -- */

.blog-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--well);
    color: var(--text);
    font: 700 12px/1.3 var(--font-ui);
    letter-spacing: .02em;
    white-space: nowrap;
}
/* Gilt is decoration here — a 7px dot — so the 3:1 non-text bar applies. */
.blog-tag::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gilt);
}
/* On a photograph the tag carries the card's own fill and a lift. */
.blog-media .blog-tag {
    position: absolute;
    left: var(--s3);
    bottom: var(--s3);
    background: var(--card);
    box-shadow: var(--shadow-raised);
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
    font: 500 12.5px/1.5 var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ------------------------------------------------------------ cards -- */

.blog-section { padding-top: var(--s8); }
.blog-section.is-first { padding-top: var(--s7); }

.blog-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule-strong);
}
.blog-section-title {
    margin: 0;
    font: 400 clamp(26px, 3.4vw, 38px)/1.1 var(--font-display);
    letter-spacing: -.02em;
    color: var(--text-title);
}
.blog-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--action);
    font: 700 14px/1 var(--font-ui);
    text-decoration: none;
}
.blog-section-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.blog-grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-raised);
    transition: transform .16s ease, box-shadow .16s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.blog-card:hover .blog-media img { transform: scale(1.04); }
.blog-card:has(.blog-stretch:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@supports not selector(:has(*)) {
    .blog-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
}

.blog-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s5);
}
.blog-card-title {
    margin: 0;
    font: 500 23px/1.2 var(--font-display);
    letter-spacing: -.01em;
    color: var(--text-title);
    text-wrap: balance;
}
.blog-card-excerpt {
    flex: 1;
    margin: 0;
    font: 400 15px/1.6 var(--font-ui);
    color: var(--text-2);
}
.blog-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s3);
    margin-top: var(--s2);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}
.blog-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--action);
    font: 700 14px/1 var(--font-ui);
    white-space: nowrap;
}
.blog-read .icon { transition: transform .16s ease; }
.blog-card:hover .blog-read .icon,
.blog-lead:hover .blog-read .icon { transform: translateX(3px); }

/* ------------------------------------------------------ empty state --
   Rides up over the masthead like the lead story would, so an empty blog
   still looks composed rather than unfinished. */

.blog-empty {
    position: relative;
    display: grid;
    margin-top: calc(-1 * var(--blog-lift));
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-float);
}
.blog-empty-body {
    display: grid;
    gap: var(--s4);
    justify-items: start;
    align-content: center;
    padding: var(--s6) var(--s5);
}
@media (min-width: 900px) {
    .blog-empty { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .blog-empty .blog-media { aspect-ratio: auto; min-height: 380px; }
    .blog-empty-body { padding: var(--s7); }
}
/* Gilt at display size, where the large-text bar is 3:1 and gilt clears it. */
.blog-empty-mark {
    margin: 0;
    font: 400 72px/.8 var(--font-display);
    color: var(--gilt);
}
.blog-empty-title {
    margin: 0;
    font: 400 clamp(28px, 3.6vw, 40px)/1.1 var(--font-display);
    letter-spacing: -.02em;
    color: var(--text-title);
}
.blog-empty-copy { margin: 0; max-width: 46ch; font: 400 16px/1.65 var(--font-ui); color: var(--text-2); }
.blog-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ------------------------------------------------------- pagination --
   The paginator view is shared, so it is styled where it is used. */

.blog .gepa-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s7); }
.blog .gepa-pagination .gp-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s3);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--action);
    font: 700 14px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.blog .gepa-pagination a.gp-link:hover { background: var(--well); }
.blog .gepa-pagination .gp-active { background: var(--gold); border-color: transparent; color: var(--gold-ink); }
.blog .gepa-pagination .gp-disabled { color: var(--text-muted); background: transparent; border-style: dashed; }
.blog .gepa-pagination .gp-dots { border: 0; background: transparent; color: var(--text-muted); min-width: 0; }

/* ========================================================== the post == */

.blog-preview {
    background: var(--gold);
    color: var(--gold-ink);
}
.blog-preview-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s4);
    padding-block: var(--s3);
    font: 600 14px/1.5 var(--font-ui);
}
.blog-preview-inner a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

.blog-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 600 13px/1.4 var(--font-ui);
    color: var(--text-2);
}
.blog-crumb li { display: inline-flex; align-items: center; gap: var(--s2); }
.blog-crumb li + li::before { content: "/"; color: var(--deco); }
.blog-crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--text-2);
    text-decoration: none;
}
.blog-crumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.blog-head-title {
    margin: 0;
    max-width: 20ch;
    font: 400 clamp(34px, 6.2vw, 70px)/1.03 var(--font-display);
    letter-spacing: -.028em;
    color: var(--text-title);
    text-wrap: balance;
}
.blog-head-dek {
    margin: 0;
    max-width: 58ch;
    font: italic 300 clamp(19px, 2.3vw, 24px)/1.45 var(--font-display);
    color: var(--text-2);
}
.blog-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: var(--s2) 0 0;
    font: 500 13px/1.5 var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
.blog-byline-author { font: 700 14px/1.5 var(--font-ui); color: var(--text); }

.blog-cover {
    position: relative;
    margin: calc(-1 * var(--blog-lift)) 0 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-float);
}

.blog-layout {
    display: grid;
    gap: var(--s7);
    padding-top: var(--s7);
}
@media (min-width: 1024px) {
    .blog-layout.has-aside {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--s8);
        align-items: start;
    }
    .blog-aside { position: sticky; top: 112px; }
}

/* ------------------------------------------------------------ prose --
   Long-form reading: a 68ch measure, 1.7 leading, Petrona for the section
   heads and Manrope for everything read at length. Body links are underlined
   because in running copy colour alone does not say "link". */

.blog-prose {
    max-width: var(--measure);
    font: 400 17px/1.7 var(--font-ui);
    color: var(--text);
    overflow-wrap: break-word;
}
@media (min-width: 768px) { .blog-prose { font-size: 18px; } }

.blog-prose > * { margin-block: 0; }
.blog-prose > * + * { margin-top: 1.15em; }

/* The opening paragraph is the lede: a size up, and a drop cap in gilt at a
   size where gilt meets the large-text bar. */
.blog-prose > p:first-child { font-size: 1.14em; line-height: 1.62; }
.blog-prose > p:first-child::first-letter {
    float: left;
    margin: .08em .1em 0 0;
    font: 400 3.6em/.8 var(--font-display);
    color: var(--gilt);
}

.blog-prose h1,
.blog-prose h2 {
    margin-top: 1.9em;
    font: 500 clamp(25px, 3vw, 32px)/1.2 var(--font-display);
    letter-spacing: -.015em;
    color: var(--text-title);
    text-wrap: balance;
}
.blog-prose h3 {
    margin-top: 1.6em;
    font: 700 19px/1.35 var(--font-ui);
    letter-spacing: -.01em;
    color: var(--text);
}
.blog-prose h4,
.blog-prose h5,
.blog-prose h6 {
    margin-top: 1.5em;
    font: 800 13px/1.4 var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
}
.blog-prose h1 + *,
.blog-prose h2 + *,
.blog-prose h3 + *,
.blog-prose h4 + * { margin-top: .55em; }

.blog-prose a {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.blog-prose a:hover { text-decoration-thickness: 2px; }

.blog-prose strong { font-weight: 700; }

.blog-prose ul,
.blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: .45em; }
.blog-prose li > ul,
.blog-prose li > ol { margin-top: .45em; }
.blog-prose ul > li::marker { color: var(--gilt); }
.blog-prose ol > li::marker { color: var(--text-2); font: 600 .9em var(--font-data); }

.blog-prose blockquote {
    margin: 1.8em 0;
    padding: 2px 0 2px 1.1em;
    border-left: 3px solid var(--gilt);
    font: italic 400 clamp(21px, 2.4vw, 25px)/1.45 var(--font-display);
    color: var(--text-title);
}
.blog-prose blockquote > * { margin: 0; }
.blog-prose blockquote > * + * { margin-top: .6em; }

.blog-prose hr {
    width: 96px;
    height: 1px;
    margin: 2.4em 0;
    border: 0;
    background: var(--gilt);
}

.blog-prose code {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--well);
    font: 500 .88em/1.5 var(--font-data);
}
.blog-prose pre {
    overflow-x: auto;
    padding: var(--s4);
    border-radius: var(--r-sm);
    background: var(--well);
}
.blog-prose pre code { padding: 0; background: none; }

.blog-prose img { border-radius: var(--r-md); }

.blog-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}
.blog-prose th,
.blog-prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}
.blog-prose th { font-weight: 700; border-bottom-color: var(--rule-strong); }

/* The end of the essay: a gilt diamond, the topic, and the way back. */
.blog-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s4);
    max-width: var(--measure);
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--rule-strong);
}
.blog-end-mark {
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--gilt);
    transform: rotate(45deg);
}
.blog-end .t-meta { margin: 0; flex: 1 1 200px; }

/* ------------------------------------------------ from the workshop --
   A forest card on paper: the one place on the page that sells, set apart
   from the reading by surface rather than by shouting. */

.blog-course {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-float);
}
.blog-course-body { display: grid; gap: var(--s3); padding: var(--s5); }
.blog-course-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font: 800 12px/1.4 var(--font-ui);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}
.blog-course-kicker::before { content: ""; flex: none; width: 20px; height: 1.5px; background: var(--gold); }
.blog-course-title {
    margin: 0;
    font: 500 23px/1.2 var(--font-display);
    letter-spacing: -.01em;
    color: var(--text-title);
}
.blog-course-by { margin: 0; font: 500 14px/1.5 var(--font-ui); color: var(--text-2); }
.blog-course .btn { margin-top: var(--s2); }

/* ------------------------------------------------------- more posts -- */

.blog-more {
    padding-block: var(--s8) var(--section);
    background: var(--well);
}