/*
 * SzymonExplores - Editorial styles (Journal)
 *
 * Loaded on single posts, and printed LAST (after phase2.css) so the journal
 * owns its own cascade; also loaded inside the block editor. Tokens come from
 * style.css, so light and dark mode follow automatically.
 *
 *  1. Post hero: four openings (paper, overlay, split, type)
 *  2. Reading progress
 *  3. Article layout: the lanes
 *  4. Body typography and vertical rhythm
 *  5. Blocks in the body: figures, captions, quotes, tables, rules
 *  6. Block styles: Plate, Mono caption, Field note, steps, hub link
 *  7. Journal galleries
 *  8. The ending: end mark, sign-off, share, read next, more stories
 *  9. Restrained scroll motion
 *
 * Selectors that only make sense in a published post are scoped to
 * .post-content__body. Block styles are left unscoped so the editor canvas
 * shows them too.
 */


/* ==========================================================================
   1. POST HERO
   Resolved per post by se_post_hero_style() (includes/journal.php):
     paper    title on the page, photograph below it in the wide lane
     overlay  title on the photograph, full bleed, fills the first screen
     split    photograph beside the title; image above title on phones
     type     no photograph; the title carries the opening
   The hero sits on the same lane grid as the body, so display type starts
   on the feature line and reading text on the text line in every variant.
   ========================================================================== */

.post-hero {
    display: grid;
    grid-template-columns: var(--lanes);
    align-items: start;
    background: var(--clr-bg);
}

.post-hero__content {
    grid-column: feature;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.75rem, 4vw, 2.75rem);
}

/* Breadcrumb: quiet navigation above the lockup. The current page is the
   heading right below it, so that crumb (and the arrow before it) is hidden
   visually but kept for the BreadcrumbList microdata and screen readers. */
.post-hero .breadcrumb {
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}
.post-hero .breadcrumb__list {
    gap: 0.3rem 0.55rem;
}
.post-hero :is(.breadcrumb__link, .breadcrumb__sep) {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}
.post-hero .breadcrumb__link:hover {
    color: var(--clr-accent);
}
.post-hero .breadcrumb__sep {
    opacity: 0.7;
}
.post-hero .breadcrumb__item--current,
.post-hero .breadcrumb__sep:nth-last-child(2) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Eyebrow: the place in Pine (the brand's place signal), else the category
   in Tide. Typography comes from .eyebrow in main.css. */
.post-hero__eyebrow {
    margin: 0 0 clamp(0.9rem, 2vw, 1.2rem);
    color: var(--clr-accent);
    text-decoration: none;
}
.post-hero__eyebrow--place {
    color: var(--clr-pine);
}
.post-hero__eyebrow:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* Title: trimmed to its cap height (text-box), so the space above and below
   it is exactly what the margins say and its first line sits on the same
   optical edge as the eyebrow. fit-content keeps the box tight to the words,
   which is also what the card-to-hero morph animates between. */
.post-hero__title {
    margin: 0;
    width: fit-content;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--clr-text);
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
}
.post-hero--long-title .post-hero__title {
    font-size: clamp(2.1rem, 1.1rem + 3vw, 3.5rem);
    line-height: 1.05;
}

.post-hero__rule {
    display: block;
    width: 3rem;
    height: 2px;
    margin-top: clamp(1.25rem, 2.5vw, 1.6rem);
    background: var(--clr-accent);
}

/* Meta in DM Mono, separated by centred dots. overflow: clip hides the dot
   of any item that wraps to the start of a new line. */
.post-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.35rem;
    margin-top: clamp(1rem, 2vw, 1.35rem);
    overflow: clip;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--clr-text-muted);
}
.post-hero__meta > * {
    position: relative;
    white-space: nowrap;
}
.post-hero__meta > * + *::before {
    content: "\00B7";
    position: absolute;
    left: -0.85rem;
    opacity: 0.7;
}

/* Night edition marker, in Sand, the brand's accent on dark. Hidden when the
   reader has chosen Light, since the page is then no longer set on Night. */
.post-hero__edition {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-sand);
}
.post-hero__edition .se-icon {
    flex: none;
}
:root[data-theme="light"] .post-hero__edition {
    display: none;
}

/* The photograph. Absolutely positioned inside its frame: an in-flow image at
   height: 100% in an auto-sized grid row cannot resolve the percentage, falls
   back to its own ratio and silently makes the hero taller than intended. */
.post-hero__image-wrap {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--clr-bg-alt);
}
.post-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ── Paper: title on the page, photograph below in the wide lane ───────── */
.post-hero--paper .post-hero__image-wrap {
    grid-column: wide;
    grid-row: 2;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-sm);
}
@media (min-width: 48rem) {
    .post-hero--paper .post-hero__image-wrap {
        aspect-ratio: 16 / 9;
    }
}
/* Portraits and squares would be cut to a letterbox in the wide lane; they
   take the text lane instead, at 4:5 and 1:1 (se_post_hero_sizes() knows
   this width, so the right file is downloaded). */
.post-hero--paper:is(.post-hero--portrait, .post-hero--square) .post-hero__image-wrap {
    grid-column: text;
    aspect-ratio: 4 / 5;
}
.post-hero--paper.post-hero--square .post-hero__image-wrap {
    aspect-ratio: 1;
}
.post-hero--paper .post-hero__rule {
    display: none;
}
/* Without the rule, the meta needs its own clearance below the descenders
   that text-box trims out of the title's box. */
.post-hero--paper .post-hero__meta {
    margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* ── Overlay: title on the photograph ──────────────────────────────────── */
/* The scrim is a dark ground in both colour modes, so text on it is the
   dark-mode cream. The gradient stays at 66% or more over the lower half,
   where the lockup sits. Measured against a plain white sky (the worst
   case): title 6.5:1, breadcrumb 5.2:1, meta 6.5:1. Tide and Pine text
   drop to about 3:1 there, so on this variant the eyebrow is cream and the
   accent colour lives in the rule under the title. */
.post-hero--overlay {
    --hero-ink:  #ECE4D8;
    --hero-tide: #3FB0C2;
    min-height: min(calc(100svh - var(--header-height)), 60rem);
    background: #17140F;
}
.post-hero--overlay .post-hero__image-wrap {
    grid-column: full;
    grid-row: 1;
    align-self: stretch;
    background: #17140F;
}
.post-hero--overlay .post-hero__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgb(23 20 15 / 0.88) 0%,
        rgb(23 20 15 / 0.66) 50%,
        rgb(23 20 15 / 0) 85%
    );
}
.post-hero--overlay .post-hero__content {
    align-self: end;
    padding-block: clamp(6rem, 18vh, 10rem) clamp(2.25rem, 6vw, 4.5rem);
    color: var(--hero-ink);
}
.post-hero--overlay .post-hero__title {
    color: var(--hero-ink);
    text-shadow: 0 1px 1.5rem rgb(23 20 15 / 0.35);
}
.post-hero--overlay :is(.breadcrumb__link, .post-hero__eyebrow) {
    color: var(--hero-ink);
}
.post-hero--overlay .breadcrumb__link:hover {
    color: var(--hero-ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.post-hero--overlay :is(.breadcrumb__sep, .post-hero__meta) {
    color: rgb(236 228 216 / 0.82);
}
.post-hero--overlay .post-hero__rule {
    background: var(--hero-tide);
}

/* ── Type-led: no photograph, the title carries the page ───────────────── */
.post-hero--type .post-hero__content {
    padding-block: clamp(4.5rem, 15vh, 10rem) clamp(1.5rem, 4vw, 3rem);
}
.post-hero--type .post-hero__title {
    font-size: clamp(3.1rem, 1.3rem + 6.6vw, 7.2rem);
    line-height: 0.95;
    letter-spacing: -0.038em;
}
.post-hero--type.post-hero--long-title .post-hero__title {
    font-size: clamp(2.6rem, 1.2rem + 4.8vw, 5.4rem);
    line-height: 1;
}

/* ── Split: photograph beside the title ────────────────────────────────── */
.post-hero--split .post-hero__image-wrap {
    grid-column: full;
    grid-row: 1;
    aspect-ratio: 4 / 5;
    max-height: 72svh;
}
.post-hero--split .post-hero__content {
    grid-column: text;
    grid-row: 2;
    padding-block: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 56rem) {
    .post-hero--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: min(calc(100svh - var(--header-height)), 62rem);
    }
    .post-hero--split .post-hero__image-wrap {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        aspect-ratio: auto;
        max-height: none;
    }
    .post-hero--split .post-hero__content {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        max-width: 38rem;
        padding: clamp(2rem, 5vw, 5rem);
    }
}


/* ==========================================================================
   2. READING PROGRESS (4D)
   Driven by the article's own scroll position in CSS (a scroll-driven
   animation on a view timeline), so it runs on the compositor with no
   JavaScript and cannot stutter. It fills from the moment the body's top
   reaches the top of the screen to the moment its last line reaches the
   bottom. Browsers without scroll-driven animations get the same result
   from the scroll listener in journal.js, which stands down otherwise.
   Kept under reduced motion: it is a position indicator, not decoration.
   ========================================================================== */
.reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: var(--z-sticky);
    pointer-events: none;
}
.reading-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--clr-accent-bright);
    transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
    .reading-progress__bar { transition: none; }
}
@media print {
    .reading-progress { display: none; }
}

@keyframes se-reading-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@supports (animation-timeline: view()) and (timeline-scope: --se-article) {
    /* The bar sits outside the article, so the timeline is hoisted to a
       shared ancestor with timeline-scope. */
    body {
        timeline-scope: --se-article;
    }
    .post-content__body {
        view-timeline: --se-article block;
    }
    .reading-progress__bar {
        width: 100%;
        transform-origin: 0 50%;
        transition: none;
        animation: se-reading-progress linear both;
        animation-duration: auto !important; /* outlive the global reduced-motion override */
        animation-timeline: --se-article;
        animation-range: contain 0% contain 100%;
    }
}


/* ==========================================================================
   3. ARTICLE LAYOUT: THE LANES
   The body is a named grid (--lanes in style.css). Every top-level block is a
   grid item in the text lane unless it asks for more:
     text     38rem   reading text, inline images (default)
     feature  54rem   "Feature width" block style, pull quotes, Plate, two-up
     wide     76rem   core Wide alignment
     full     edge    core Full alignment
   Placement is by grid-column, not margins, so no rule elsewhere that sets a
   margin can knock a block out of its lane, and nothing uses 100vw (which
   includes the scrollbar and pushes the page sideways on desktop).
   ========================================================================== */

.post-layout {
    padding-bottom: clamp(4rem, 10vw, 6rem);
}

.post-content__body,
.post-content__footer,
.post-sidebar {
    display: grid;
    grid-template-columns: var(--lanes);
}

.post-content__body > *,
.post-content__footer > *,
.post-sidebar > * {
    grid-column: text;
    min-width: 0;
}

/* Feature lane: display pieces hang on the feature line. */
.post-content__body > .is-style-se-feature,
.post-content__body > .is-style-se-pull,
.post-content__body > :is(.is-style-se-plate, .se-two-up, .se-three-up):not(.alignwide, .alignfull) {
    grid-column: feature;
}

/* Core alignments. After the feature rules so Wide or Full always wins. */
.post-content__body > .alignwide {
    grid-column: wide;
}
.post-content__body > .alignfull {
    grid-column: full;
}

/* A grid cannot float, so left/right-aligned blocks keep their side of the
   text lane at up to half its width, without text wrapping round them. */
.post-content__body > .alignleft {
    justify-self: start;
}
.post-content__body > .alignright {
    justify-self: end;
}
.post-content__body > :is(.alignleft, .alignright) {
    width: min(100%, 20rem);
}
.post-content__body > .aligncenter {
    justify-self: center;
}


/* ==========================================================================
   4. BODY TYPOGRAPHY AND VERTICAL RHYTHM
   Grid items do not collapse margins, so spacing is one-directional: every
   block sets only the space ABOVE it, through --flow. The --flow rules use
   :where() so they all weigh the same and the last matching rule wins, which
   is what lets a heading bind to whatever follows it.
   ========================================================================== */

.post-content__body {
    --flow: 1em;
    --flow-block: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    padding-top: clamp(2.25rem, 5vw, 3.5rem);
    font-size: clamp(1.0625rem, 0.97rem + 0.35vw, 1.1875rem); /* 17 to 19px */
    line-height: 1.68;
    color: var(--clr-text);
}

.post-content__body > * {
    margin: 0;
}
.post-content__body > * + * {
    margin-block-start: var(--flow);
}

/* Set pieces get room on both sides. */
.post-content__body > :where(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns,
    .wp-block-table, .wp-block-quote, .wp-block-pullquote, .wp-block-group, .wp-block-separator,
    hr, .wp-block-embed, .wp-block-video, .wp-block-media-text, .wp-block-cover),
.post-content__body > :where(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns,
    .wp-block-table, .wp-block-quote, .wp-block-pullquote, .wp-block-group, .wp-block-separator,
    hr, .wp-block-embed, .wp-block-video, .wp-block-media-text, .wp-block-cover) + * {
    --flow: var(--flow-block);
}

/* Headings: generous space above, then bound tight to what follows. */
.post-content__body > :where(h2) {
    --flow: clamp(2.6rem, 2rem + 2vw, 3.6rem);
}
.post-content__body > :where(h3) {
    --flow: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
}
.post-content__body > :where(h4, h5, h6) {
    --flow: 1.75em;
}
.post-content__body > :where(h2, h3, h4, h5, h6) + * {
    --flow: 0.8rem;
}

/* Text. The global p rule sets its own size, so body text inherits here. */
.post-content__body :where(p, li, dd, dt) {
    font-size: inherit;
    line-height: inherit;
}
.post-content__body :where(p, li, figcaption, blockquote) {
    text-wrap: pretty;          /* no single-word last lines */
}

.post-content__body :where(h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--clr-text);
    text-wrap: balance;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
.post-content__body :where(h2) {
    font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
}
.post-content__body :where(h3) {
    font-size: clamp(1.3rem, 1.12rem + 0.7vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.post-content__body :where(h4) {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1em;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Links: Tide text, a hairline underline set clear of descenders. Hover
   strengthens the underline rather than lightening the text, which would
   drop it under 4.5:1. */
.post-content__body a:where(:not(.wp-block-button__link, .wp-element-button)) {
    color: var(--clr-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, var(--clr-accent) 55%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.post-content__body a:hover {
    text-decoration-color: currentColor;
}

/* Lists (the global reset removes markers). */
.post-content__body :where(ul, ol) {
    list-style: revert;
    padding-inline-start: 1.3em;
}
.post-content__body :where(li) + :where(li) {
    margin-top: 0.45em;
}
.post-content__body :where(li)::marker {
    color: var(--clr-text-muted);
}

/* Times and data in DM Mono: its figures line up in columns, and the
   embedded DM Sans subsets carry no tabular figures to switch on. */
.post-content__body time {
    font-family: var(--font-mono);
    font-size: 0.92em;
    letter-spacing: 0.01em;
}

/* No automatic hyphenation: it breaks surnames such as Kwiatkowski. */


/* ==========================================================================
   5. BLOCKS IN THE BODY
   ========================================================================== */

/* ── Figures and images ────────────────────────────────────────────────── */
.post-content__body :where(figure) img {
    height: auto;
    border-radius: var(--radius-md);
}
.post-content__body > .alignfull img {
    width: 100%;
    border-radius: 0;
}

/* Captions start where their photograph starts, set roman and left-aligned
   so they read as text, not decoration. */
.wp-element-caption,
.wp-block-image figcaption,
.blocks-gallery-caption {
    margin: 0.75rem 0 0;
    max-width: 62ch;
    font-size: var(--text-sm);
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    color: var(--clr-text-muted);
    text-wrap: pretty;
}

/* A full-bleed photograph has no edge to start from, so its caption returns
   to the text lane and lines up with the paragraphs. */
.post-content__body > .alignfull > :is(figcaption, .wp-element-caption),
.post-content__body > .se-seq > .alignfull > :is(figcaption, .wp-element-caption) {
    width: min(var(--lane-text), 100% - 2 * var(--gutter));
    max-width: none;
    margin-inline: auto;
}

/* Portrait frames (marked .se-portrait in includes/journal.php) never grow
   taller than the screen: they shrink to fit and centre in their lane, and
   the table display shrink-wraps the figure so the caption matches the
   photograph's width. Nothing is cropped. */
.post-content__body > .se-portrait:not(.alignleft, .alignright) {
    display: table;
    justify-self: center;
}
.post-content__body > .se-portrait img {
    width: auto;
    max-height: calc(100svh - var(--header-height) - 3rem);
}
.post-content__body > .se-portrait > figcaption {
    display: table-caption;
    caption-side: bottom;
}

.se-figure-links { font-size: var(--text-sm); letter-spacing: 0.03em; }
.se-figure-links a {
    color: var(--clr-link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

/* ── Columns (two-up / three-up) ───────────────────────────────────────── */
.post-content__body .wp-block-columns { gap: var(--sp-3); }
.post-content__body .se-three-up { gap: var(--sp-2); }
.post-content__body .wp-block-columns .wp-block-image { margin: 0; }

/* ── Framed image style ────────────────────────────────────────────────── */
.wp-block-image.is-style-se-frame img {
    padding: var(--sp-3);
    /* The mat stays paper; only the photograph's own area takes its
       placeholder colour while it loads. */
    background: linear-gradient(var(--ph, transparent), var(--ph, transparent)) content-box, var(--clr-bg);
    border: 1px solid var(--clr-mist);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
}

/* ── Gallery: carousel style (scroll-snap, no JS) ──────────────────────── */
.wp-block-gallery.is-style-se-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--sp-3);
}
.wp-block-gallery.is-style-se-carousel .wp-block-image {
    flex: 0 0 min(82%, 540px);
    scroll-snap-align: center;
    margin: 0;
}
.wp-block-gallery.is-style-se-carousel img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ── Quotes ────────────────────────────────────────────────────────────── */
.post-content__body blockquote:not(.is-style-se-pull) {
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-6);
    border-left: 2px solid var(--clr-accent);
    font-family: var(--font-display);
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.55;
    color: var(--clr-text-muted);
}
.post-content__body blockquote:not(.is-style-se-pull) cite {
    display: block;
    margin-top: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: normal;
}

/* Pull quote: set on the feature line between two hairlines. Its opening
   quotation mark hangs outside the text edge, so the words align with the
   edge rather than the punctuation: natively in Safari, and by a negative
   first-line indent elsewhere, applied only when the quote really opens with
   a quotation mark (.se-hang, added in includes/journal.php). */
.wp-block-quote.is-style-se-pull {
    margin-inline: 0;
    padding: clamp(1.4rem, 3vw, 2.2rem) 0;
    border: 0;
    border-block: 1px solid var(--clr-mist);
    border-radius: 0;
    background: none;
    text-align: left;
}
.wp-block-quote.is-style-se-pull p {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 1.05rem + 2.1vw, 2.65rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--clr-text);
    text-wrap: balance;
    hanging-punctuation: first last;
}
@supports not (hanging-punctuation: first) {
    .wp-block-quote.is-style-se-pull.se-hang > p:first-of-type {
        text-indent: -0.42em;
    }
}
.wp-block-quote.is-style-se-pull cite {
    display: block;
    margin-top: var(--sp-4);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

/* ── Separators ────────────────────────────────────────────────────────── */
.post-content__body .wp-block-separator:where(:not(.is-style-se-accent)) {
    border: 0;
    border-top: 1px solid var(--clr-mist);
    opacity: 1;
}
.post-content__body .is-style-se-rule {
    grid-column: feature;
}
.post-content__body .wp-block-separator.is-style-se-dots {
    height: auto;
    border: 0;
    background: none;
    text-align: center;
}
.post-content__body .is-style-se-dots::before {
    content: "\2022  \2022  \2022";
    letter-spacing: 0.6em;
    font-size: var(--text-lg);
    color: var(--clr-accent-bright);
}
/* Accent rule: the short brand rule as a section divider. */
hr.is-style-se-accent {
    width: 56px;
    height: 5px;
    border: none;
    background: var(--clr-accent);
    opacity: 1;
}
.post-content__body > hr.is-style-se-accent {
    justify-self: center;
}

/* ── Drop cap (Lead pattern) ───────────────────────────────────────────── */
/* initial-letter sinks the capital exactly three lines, cap height on the
   first line and baseline on the third. The float is the fallback. */
p.se-dropcap::first-letter {
    float: left;
    padding: 0.04em 0.12em 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.4em;
    line-height: 0.78;
    color: var(--clr-accent-bright);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    p.se-dropcap::first-letter {
        float: none;
        padding: 0;
        margin-inline-end: 0.1em;
        -webkit-initial-letter: 3;
        initial-letter: 3;
    }
}

/* ── Tables ────────────────────────────────────────────────────────────── */
/* Hairline rows, no cage of borders; small tracked headers. "Data" sets
   the cells in DM Mono for times, prices and settings. */
.wp-block-table table {
    border-collapse: collapse;
    font-size: 0.92em;
    line-height: 1.45;
}
.wp-block-table :is(th, td) {
    padding: 0.7rem 1rem 0.7rem 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--clr-mist) 70%, transparent);
    text-align: left;
    vertical-align: baseline;
}
.wp-block-table :is(thead, tfoot) {
    border: 0;
}
.wp-block-table th {
    padding-bottom: 0.6rem;
    border-bottom-color: var(--clr-mist);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.wp-block-table.is-style-se-data td {
    font-family: var(--font-mono);
    font-size: 0.9em;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--clr-bg-alt);
}


/* ==========================================================================
   6. BLOCK STYLES - journal photo-layout system and guide furniture.
   All tokens flip for dark mode automatically.
   ========================================================================== */

/* Plate - gallery-mat presentation: even sides, heavier base (the museum
   convention; optically centres the image, reads like a matted print).
   Feature width by default; Wide or Full when aligned. */
.is-style-se-plate {
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    padding: clamp(0.9rem, 3.5%, 2.4rem);
    padding-bottom: clamp(1.45rem, 5.6%, 3.8rem);
}
.is-style-se-plate img { display: block; }
.is-style-se-plate figcaption {
    margin-top: clamp(0.7rem, 2.4%, 1.4rem);
    margin-inline: auto;
    margin-bottom: 0;
    text-align: center;
    color: var(--clr-text-muted);
}

/* Mono caption - the capture-strip voice under journal photographs. */
.is-style-se-monocap figcaption,
.wp-block-gallery.is-style-se-monocap figcaption {
    max-width: none;
    border-top: 1px solid var(--clr-mist);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

/* Offset two-up - second frame drops for editorial rhythm (desktop only). */
@media (min-width: 782px) {
    .se-two-up--offset .wp-block-column:last-child {
        margin-top: clamp(2rem, 6vw, 4.5rem);
    }
}

/* Field note box - practical info for guides. */
.is-style-se-note {
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    border-left: 4px solid var(--clr-accent);
    border-radius: 4px;
    padding: var(--sp-6);
}
.is-style-se-note > h3:first-child,
.is-style-se-note > h2:first-child { margin-top: 0; }
.is-style-se-note > :last-child { margin-bottom: 0; }

/* Numbered steps - accent markers, generous breathing room. */
.se-steps ol { padding-left: 1.5rem; }
.se-steps li { margin-bottom: var(--sp-3); padding-left: 0.35rem; }
.se-steps li::marker { color: var(--clr-accent); font-weight: 600; }

/* Destination hub link pattern: small-caps lead-in, Tide link, fine top
   rule. Stories no longer need one at the end (the sign-off links the place
   automatically); it remains for pointing to a place mid-story. */
.se-hub-link {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--clr-mist);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.post-content__body > .se-hub-link {
    --flow: var(--sp-10);
    font-size: var(--text-sm);
}
.se-hub-link a {
    color: var(--clr-accent);
    font-weight: 600;
    text-decoration: none;
}
.post-content__body .se-hub-link a:hover,
.se-hub-link a:hover {
    color: var(--clr-accent-strong);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. JOURNAL GALLERIES
   Four ways to present a set of photographs in a post. Galleries 1 to 3 are
   CSS only: no script is loaded for them at all. Only the contact sheet
   pulls in JavaScript, and only for its lightbox.

   Deliberately no carousel. An auto-advancing component shows one frame and
   hides the rest, moves in the reader's periphery mid-sentence, and needs
   pause controls to meet WCAG 2.2 for a problem it created.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared: below-fold galleries skip layout and paint until near the viewport.
   On a long photo essay this is the single biggest rendering win available.
   contain-intrinsic-size gives the skipped box a plausible height so the
   scrollbar does not jump, which is what would otherwise cost us CLS. */
.post-content__body .se-seq,
.post-content__body .se-strip,
.post-content__body .se-pair,
.post-content__body .se-tri,
.post-content__body .se-sheet {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ── 1 · Sequence ────────────────────────────────────────────────────── */

/* The sequence frames are Full-aligned inside a plain group, so the group
   itself takes the full lane; anything else placed inside it keeps to the
   text lane. */
.post-content__body > .se-seq {
    grid-column: full;
}
.post-content__body .se-seq > :not(.alignfull) {
    width: min(var(--lane-text), 100% - 2 * var(--gutter));
}

.post-content__body .se-seq {
    display: flex;
    flex-direction: column;
    /* Fluid: a fixed gap looks cramped on desktop and wasteful on a phone. */
    gap: clamp(1.5rem, 4vw, 3rem);
}

.post-content__body .se-seq > figure {
    margin: 0;
}

/* A 2:3 portrait at full width is taller than the viewport and costs the
   reader a whole scroll per photograph. Cap and centre it. */
.post-content__body .se-seq > figure img {
    max-height: 82vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    display: block;
    border-radius: 0;
}

/* ── 2 · Filmstrip ───────────────────────────────────────────────────── */

.post-content__body .se-strip {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Without this, reaching the end drags the whole page sideways on iOS. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-3);
    scrollbar-width: thin;
    scrollbar-color: var(--clr-mist) transparent;
}

.post-content__body .se-strip > figure {
    /* 78% leaves a sliver of the next frame visible. That sliver IS the
       affordance, and it is why this needs no arrows, dots or instructions.
       Never a fixed pixel width: this has to hold on a phone and a desktop. */
    flex: 0 0 min(78%, 420px);
    scroll-snap-align: start;
    margin: 0;
}

.post-content__body .se-strip > figure img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content__body .se-strip::-webkit-scrollbar { height: 6px; }
.post-content__body .se-strip::-webkit-scrollbar-thumb {
    background: var(--clr-mist);
    border-radius: 3px;
}

/* ── 3 · Pair and triptych ───────────────────────────────────────────── */

.post-content__body .se-pair,
.post-content__body .se-tri {
    display: grid;
    gap: var(--sp-3);
    /* Mixed orientations meet on a shared centreline: the gallery-wall
       convention, and the same rule the print templates already follow. */
    align-items: center;
}

.post-content__body .se-pair { grid-template-columns: repeat(2, 1fr); }
.post-content__body .se-tri  { grid-template-columns: repeat(3, 1fr); }

.post-content__body .se-pair > figure,
.post-content__body .se-tri > figure {
    margin: 0;
}

.post-content__body .se-pair > figure img,
.post-content__body .se-tri > figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Three frames side by side on a phone are three thumbnails, which reads as
   an accident rather than a choice. */
@media (max-width: 620px) {
    .post-content__body .se-pair,
    .post-content__body .se-tri {
        grid-template-columns: 1fr;
    }
}

/* ── 4 · Contact sheet ───────────────────────────────────────────────── */

/* Justified rows, NOT masonry columns. Masonry flows down columns, so an
   ordered set reads 1, 4, 7, 2, 5, 8: wrong for a sequence, and incoherent
   for anyone following DOM order. Rows preserve left-to-right order, respect
   each image's true ratio, and give clean edges on both sides.
   flex-basis is written per figure by se_sheet_justify_rows() in PHP, from
   the stored image dimensions, so the layout is right in the first paint. */
.post-content__body .se-sheet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.post-content__body .se-sheet > figure {
    flex-grow: 1;
    /* Fallback only. PHP overrides this inline with the real ratio. */
    flex-basis: 190px;
    height: 190px;
    margin: 0;
    overflow: hidden;
}

.post-content__body .se-sheet > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    border-radius: 0;
}

/* The last row would otherwise stretch its few items to full width, which
   looks broken next to justified rows above it. Decided once, here. */
.post-content__body .se-sheet::after {
    content: "";
    flex-grow: 999999;
}

@media (max-width: 600px) {
    .post-content__body .se-sheet > figure { height: 130px; }
}

/* A focus ring drawn on top of a dark photograph is invisible, so it sits
   outside the frame. */
.post-content__body .se-sheet > figure a:focus-visible,
.post-content__body .se-sheet > figure img:focus-visible {
    outline: 3px solid var(--clr-accent-bright);
    outline-offset: 3px;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .post-content__body .se-strip {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
}


/* ==========================================================================
   8. THE ENDING
   A story closes in four beats, each quieter than the last:
     1. the end mark after the last word of running text;
     2. the sign-off, which mirrors the hero: Tide rule, byline, and a DM
        Mono line saying where and when the story was photographed;
     3. share and tags;
     4. onward, outside the article: one story to read next across the wide
        lane, then a short row of more from the same place.
   Everything up to 3 sits in the text lane; prints and onward take the wide
   lane. Data and markup: section 5 of includes/journal.php, single.php and
   template-parts/components/read-next.php.
   ========================================================================== */

/* ── 1. End mark ──────────────────────────────────────────────────────────
   A small Tide square after the last word: the magazine tombstone that says
   "this is the end", so the reader never scrolls on wondering. It rides on
   two no-break spaces, which keep it on the last word's line. :has() finds
   the last paragraph of running text among the body's own children, skipping
   the destination hub link and empty paragraphs; a browser without :has()
   shows no mark and nothing else changes. */
.post-content__body {
    --se-endmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='9' height='9' fill='%2316798B'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .post-content__body {
        --se-endmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='9' height='9' fill='%233FB0C2'/%3E%3C/svg%3E");
    }
}
:root[data-theme="dark"] .post-content__body {
    --se-endmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='9' height='9' fill='%233FB0C2'/%3E%3C/svg%3E");
}
.post-content__body > p:not(.se-hub-link, :empty):not(:has(~ p:not(.se-hub-link, :empty)))::after {
    content: "\00A0\00A0" var(--se-endmark);
}

/* ── 2. Sign-off ──────────────────────────────────────────────────────────
   Mirrors the hero's close: the same 3rem Tide rule, a small-caps byline,
   and the DM Mono meta voice for the dateline. The bio is set in Fraunces
   italic, the tagline convention of print magazines. */
.post-content__footer {
    margin-top: clamp(2.75rem, 6vw, 4rem);
}
.post-content__footer > * {
    margin: 0;
}
.post-content__footer > * + * {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}
.post-content__footer > .article-prints {
    grid-column: wide;
}

.post-signoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
    padding-top: clamp(1.4rem, 3vw, 1.75rem);
    background: linear-gradient(var(--clr-accent), var(--clr-accent)) no-repeat 0 0 / 3rem 2px;
}
.post-signoff > * {
    margin: 0; /* the global p + p margin would open gaps in the grid */
}
.post-signoff--portrait {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.1rem;
}
.post-signoff--portrait > :not(.post-signoff__portrait) {
    grid-column: 2;
}
.post-signoff__portrait {
    grid-row: 1 / span 3;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
}
.post-signoff__name {
    font-size: var(--text-xs);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-text);
}
.post-signoff__name a {
    color: inherit;
    text-decoration: none;
}
.post-signoff__name a:hover {
    color: var(--clr-accent);
}
.post-signoff__bio {
    max-width: 34rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
    line-height: 1.5;
    color: var(--clr-text-muted);
    text-wrap: pretty;
}
.post-signoff__dateline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.35rem;
    margin-top: 0.4rem;
    overflow: clip;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--clr-text-muted);
}
.post-signoff__dateline > * {
    position: relative;
    white-space: nowrap;
}
.post-signoff__dateline > * + *::before {
    content: "\00B7";
    position: absolute;
    left: -0.85rem;
    opacity: 0.7;
}
.post-signoff__place {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-pine);
    text-decoration: none;
}
.post-signoff__place .se-icon {
    flex: none;
}
a.post-signoff__place:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* ── 3. Share and tags ──────────────────────────────────────────────────── */
.post-share {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--clr-mist);
}
.post-share__label {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-right: auto;
}
.post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--clr-mist);
    color: var(--clr-text-muted);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.post-share__btn:hover {
    color: var(--clr-on-accent);
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}
.post-share__btn svg { width: 17px; height: 17px; }
.post-share__copied {
    font-size: var(--text-xs);
    color: var(--clr-success);
    opacity: 0;
    transition: opacity var(--dur-fast);
}
.post-share__copied.is-shown { opacity: 1; }

/* Tags follow share directly, without a second rule between them. */
.post-content__footer > .post-share + .post-tags {
    margin-top: var(--sp-5);
    padding-top: 0;
    border-top: 0;
}

/* ── 4. Onward ────────────────────────────────────────────────────────────
   Outside the article, on its own lane grid, opened by a hairline across
   the wide lane. */
.post-onward {
    display: grid;
    grid-template-columns: var(--lanes);
    row-gap: clamp(3.5rem, 8vw, 5.5rem);
    margin-top: clamp(4rem, 10vw, 6.5rem);
}
.post-onward > * {
    grid-column: wide;
    min-width: 0;
}
.post-onward > :first-child {
    padding-top: clamp(3rem, 7vw, 4.5rem);
    border-top: 1px solid var(--clr-mist);
}

/* Read next: the photograph beside the story on wide screens, above it on
   narrow ones. The title's link is stretched over the whole card, so the
   card is one target with one accessible name, and the focus ring is drawn
   around the card rather than the title alone. */
.read-next {
    position: relative;
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    align-items: center;
}
@media (min-width: 56rem) {
    .read-next {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
    .read-next--portrait {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
    .read-next--text {
        grid-template-columns: minmax(0, 1fr);
    }
}
.read-next__image-wrap {
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--clr-bg-alt);
}
.read-next--portrait .read-next__image-wrap {
    aspect-ratio: 4 / 5;
    max-height: 72svh; /* stacked on a phone, never taller than the screen */
}
.read-next__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slower) var(--ease-out);
}
.read-next__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.read-next__eyebrow {
    margin-bottom: clamp(0.9rem, 2vw, 1.2rem);
}
.read-next__place {
    margin-bottom: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--clr-pine);
}
/* fit-content matches the hero title's box, which is what the morph into
   the next story animates between. */
.read-next__title {
    width: fit-content;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    color: var(--clr-text);
    text-wrap: balance;
}
.read-next--text .read-next__title {
    font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem);
}
.read-next__link {
    color: inherit;
    text-decoration: none;
}
.read-next__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.read-next__link:focus-visible {
    outline: none;
    box-shadow: none;
}
.read-next:has(.read-next__link:focus-visible) {
    outline: 2px solid var(--clr-focus);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}
.read-next__excerpt {
    max-width: 32rem;
    margin-top: 1rem;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--clr-text-muted);
    text-wrap: pretty;
}
.read-next__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.read-next__cta .se-icon {
    transition: transform var(--dur-base) var(--ease-out);
}
.read-next:hover .read-next__link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}
.read-next:hover .read-next__image {
    transform: scale(1.03);
}
.read-next:hover .read-next__cta .se-icon {
    transform: translateX(3px);
}

/* More from the same place: compact journal cards, three across. */
.post-more__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.post-more__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--clr-text);
    text-wrap: balance;
}
.post-more__all {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-accent);
    text-decoration: none;
}
.post-more__all:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}
.post-more__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}

@media (prefers-reduced-motion: reduce) {
    .read-next__image,
    .read-next__cta .se-icon {
        transition: none;
    }
    .read-next:hover .read-next__image,
    .read-next:hover .read-next__cta .se-icon {
        transform: none;
    }
}

/* Widgets, when the Blog Sidebar has any, follow in the text lane. */
.post-sidebar {
    position: static;
    margin-top: clamp(2.5rem, 6vw, 4rem);
}


/* ==========================================================================
   9. RESTRAINED SCROLL MOTION
   Two movements, both driven by scroll position in CSS (scroll-driven
   animations: compositor only, no JavaScript) and both off entirely with
   reduced motion or in browsers without support, where the page is simply
   still:
     - photographs in the body settle into place as they come up the screen:
       a short rise and a fade from 35%, complete once half the photograph
       (or, for one taller than the screen, half the screen) is in view, so
       nothing is looked at half-faded;
     - the full-bleed photograph behind an "Over image" title drifts at a
       third of the scroll speed as the page moves away from it.
   Nothing moves by itself, loops, or runs on a timer, and text never moves
   except with the page.
   ========================================================================== */

@keyframes se-settle {
    from {
        opacity: 0.35;
        transform: translateY(1.75rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes se-hero-drift {
    to {
        transform: translateY(33svh);
    }
}

@media screen and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .post-content__body > :is(figure, .wp-block-image, .wp-block-gallery,
            .wp-block-columns, .wp-block-cover, .wp-block-media-text, .wp-block-video),
        .post-content__body > .se-seq > figure {
            animation: se-settle linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 50%;
        }

        .post-hero--overlay .post-hero__image {
            animation: se-hero-drift linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 100svh;
        }
    }
}