/*
Theme Name: The Anglo-Italian Runner
Theme URI: https://runner.kalica.co.uk
Description: A running journal set in Italy. Custom theme for The Anglo-Italian Runner.
Version: 1.0.7
Author: James Sayers
Author URI: https://kalica.co.uk
Tags: blog, journal, running
*/

/* ============================================================
   RESET & ROOT
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --paper:       #f7f4ef;
    --paper-dark:  #ede9e1;
    --ink:         #1c1b18;
    --ink-mid:     #4a4740;
    --ink-light:   #8a8680;
    --red:         #c0392b;
    --red-soft:    #e8d5d3;
    --walk:        #6b7c5c;
    --walk-soft:   #dce4d7;
    --serif:       'Libre Baskerville', Georgia, serif;
    --cond:        'Barlow Condensed', sans-serif;
    --sans:        'Barlow', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
    border-bottom: 3px solid var(--ink);
    padding: 0 3rem;
}

.masthead-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid var(--ink);
    gap: 2rem;
}

.masthead-date {
    font-family: var(--cond);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mid);
    white-space: nowrap;
    flex-shrink: 0;
}

.masthead-title {
    text-align: center;
    flex: 1;
}

.masthead-title h1,
.masthead-title .site-name {
    font-family: var(--cond);
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
}

.masthead-title .site-name span { color: var(--red); }

.masthead-title p,
.masthead-title .site-tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-mid);
    margin-top: 0.25rem;
    letter-spacing: 0.03em;
}

.masthead-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.masthead-nav a {
    font-family: var(--cond);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mid);
    transition: color 0.2s;
}

.masthead-nav a:hover { color: var(--red); }

.masthead-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.masthead-tag,
.masthead-issue {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-light);
}

/* ============================================================
   HERO (homepage featured run)
   ============================================================ */
.hero {
    display: grid;
    grid-template-columns: 3fr 2fr;
    height: 60vh;
    border-bottom: 2px solid var(--ink);
}

.hero-photo {
    position: relative;
    overflow: hidden;
    border-right: 2px solid var(--ink);
    min-height: 300px;
    background: var(--paper-dark);
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-photo-caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(28,27,24,0.6);
    background: rgba(247,244,239,0.88);
    padding: 0.35rem 0.75rem;
    z-index: 2;
}

.hero-text {
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper);
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--cond);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
}

.hero-kicker::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--red);
}

.hero-headline {
    font-family: var(--cond);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.hero-headline em {
    font-style: italic;
    font-family: var(--serif);
    font-weight: 400;
    text-transform: none;
    font-size: 0.72em;
    color: var(--ink-mid);
    display: block;
    letter-spacing: 0.01em;
    margin-top: 0.25rem;
}

.hero-body {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--ink-mid);
    margin: 1.5rem 0 2rem;
    border-left: 3px solid var(--red-soft);
    padding-left: 1rem;
}

.hero-stats-box {
    background: var(--ink);
    color: var(--paper);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.hero-stats-box-label {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.4;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-stats-box-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}

.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-value {
    display: block;
    font-family: var(--cond);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--paper);
    line-height: 1;
}

.stat-label {
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.45;
    margin-top: 0.15rem;
    display: block;
}

.hero-cta {
    font-family: var(--cond);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--red);
    padding-bottom: 0.25rem;
    transition: color 0.2s;
}

.hero-cta:hover { color: var(--red); }

/* ============================================================
   SECTION RULE
   ============================================================ */
.section-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3rem;
    border-bottom: 1px solid var(--paper-dark);
}

.section-rule-label {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    background: var(--red);
    color: var(--paper);
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.section-rule-line {
    flex: 1;
    height: 1px;
    background: var(--ink);
    opacity: 0.15;
}

/* ============================================================
   RUN CARDS GRID
   ============================================================ */
.runs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
}

.run-card {
    padding: 2.5rem 3rem;
    border-right: 1px solid rgba(28,27,24,0.12);
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    overflow: hidden;
}

.run-card:last-child { border-right: none; }
.run-card:hover { background: var(--paper-dark); }

.run-number {
    font-family: var(--cond);
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    opacity: 0.14;
    position: absolute;
    bottom: 1.25rem;
    right: 2rem;
    letter-spacing: -0.02em;
    pointer-events: none;
}

.run-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 1rem;
}

.run-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}

/* Grid card — two-column inner layout (text + thumb) */
.grid-card-inner {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    min-height: 160px;
}

.grid-card-content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-card-thumb {
    flex: 0 0 160px;
    width: 160px;
    overflow: hidden;
    border-radius: 2px;
    align-self: stretch;
}

.grid-card-thumb a {
    display: block;
    height: 100%;
}

.grid-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.run-card:hover .grid-card-thumb img {
    opacity: 0.88;
}

@media ( max-width: 640px ) {
    .grid-card-inner {
        flex-direction: column;
    }
    .grid-card-thumb {
        flex: none;
        width: 100%;
        height: 180px;
    }
}

.run-card-title {
    font-family: var(--cond);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.run-card-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.run-card-excerpt {
    font-family: var(--serif);
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--ink-mid);
    margin-bottom: 1.75rem;
    max-width: 42ch;
    flex-grow: 1;
}

.run-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(28,27,24,0.1);
}

.run-stat-strip {
    display: flex;
    gap: 1.5rem;
}

.run-stat-item {
    font-family: var(--cond);
    font-size: 0.7rem;
}

.run-stat-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
}

.run-stat-item span {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
}

.run-read-link {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.25s;
}

.run-card:hover .run-read-link { opacity: 1; }

/* ============================================================
   STATIC PAGES (page.php)
   ============================================================ */

.page-masthead {
    border-bottom: 2px solid var(--ink);
    padding: 3rem;
}

.page-kicker {
    font-family: var(--cond);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-kicker::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--red);
}

.page-title {
    font-family: var(--cond);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.05;
    margin: 0;
}

/* Intro band — styled standfirst above the main page content */
.page-intro-band {
    background: var(--paper-dark);
    border-bottom: 1px solid rgba(28,27,24,0.12);
    padding: 2.5rem 3rem;
}

.page-intro-inner {
    max-width: 720px;
}

.page-intro-inner p {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1rem;
    font-style: italic;
}

.page-intro-inner p:last-child {
    margin-bottom: 0;
}

/* Page body — matches single post body style */
.page-body-wrap {
    max-width: 780px;
    padding: 3rem;
    margin: 0 auto;
    text-align: left;
}

.page-body {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-mid);
    overflow: hidden;
}

.page-body p { margin-bottom: 1.5rem; }

/* Drop cap disabled on static pages — suits run posts, not long-form prose */
.page-body p:first-child::first-letter {
    float: none;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
}

.page-body h2 {
    font-family: var(--cond);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 2.5rem 0 1rem;
}

.page-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--red);
    text-decoration: none;
}

.page-body a:hover {
    color: var(--red);
}

/* ============================================================
   WALKS — card and post variants
   ============================================================ */

/* Walk card shading */
.run-card--walk {
    background: var(--walk-soft);
    border-left: 4px solid var(--walk);
}

/* Walk card number — green tint instead of default ink */
.run-card--walk .run-number {
    color: var(--walk);
    opacity: 0.35;
}

/* Walk meta dot — walk colour */
.run-meta-dot--walk {
    background: var(--walk) !important;
}

/* Type badges — small pill labels on cards */
.run-type-badge {
    font-family: var(--cond);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.15em 0.5em;
    border-radius: 2px;
    margin-left: 0.5rem;
}
.run-type-badge--run {
    background: var(--ink);
    color: var(--paper);
}
.run-type-badge--walk {
    background: var(--walk);
    color: #fff;
    border: 1px solid var(--walk);
}

/* Featured badge */
.card-featured-badge {
    display: inline-block;
    font-family: var(--cond);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid var(--red);
    padding: 0.15em 0.5em;
    border-radius: 2px;
    margin-bottom: 0.75rem;
}

/* Featured card — subtle red left border (WP sticky) */
.run-card--featured {
    border-left: 3px solid var(--red);
}

/* ACF Featured strip — stronger highlight */
.section-rule--featured {
    margin-top: 0;
}

.runs-grid--featured {
    margin-bottom: 0;
    padding-bottom: 0;
}

.run-card--acf-featured {
    border-left: 3px solid var(--red);
    background: var(--paper-dark);
}

.run-card--acf-featured .card-featured-badge {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
}

.run-card--acf-featured:hover {
    background: #e6e1d7;
}

/* Featured card — two-column inner layout (text + thumb) */
.featured-card-inner {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.featured-card-content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.featured-card-thumb {
    flex: 0 0 200px;
    width: 200px;
    align-self: stretch;
    overflow: hidden;
    border-radius: 2px;
}

.featured-card-thumb a {
    display: block;
    height: 100%;
}

.featured-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.run-card--acf-featured:hover .featured-card-thumb img {
    opacity: 0.9;
}

/* Responsive: stack thumb below text on narrow screens */
@media ( max-width: 640px ) {
    .featured-card-inner {
        flex-direction: column;
    }
    .featured-card-thumb {
        flex: none;
        width: 100%;
        height: 180px;
    }
}

/* Walk hero — walk-tinted text panel */
.hero--walk .hero-text {
    background: var(--walk-soft);
}

/* Post type label in masthead kicker */
.post-type-label {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 0.15em 0.5em;
    border-radius: 2px;
    margin-right: 0.5rem;
}
.post-masthead--walk .post-type-label {
    background: var(--walk);
}

/* Walk post — shaded sidebar */
.post-sidebar--walk {
    background: var(--walk-soft);
}

/* Walk post body wrap — subtle walk tint */
.post-body-wrap--walk {
    background: #eef1ea;
}

/* Strava route screenshot in sidebar */
.sidebar-section--screenshot {
    margin-bottom: 2rem;
}

.strava-screenshot-link {
    display: block;
    text-decoration: none;
    border: 1px solid rgba(28,27,24,0.12);
    border-radius: 3px;
    overflow: hidden;
    transition: opacity 0.2s;
}

.strava-screenshot-link:hover {
    opacity: 0.85;
}

.strava-screenshot-img {
    width: 100%;
    height: auto;
    display: block;
}

.strava-screenshot-caption {
    display: block;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-light);
    padding: 0.5rem 0.75rem;
    background: rgba(28,27,24,0.04);
    border-top: 1px solid rgba(28,27,24,0.08);
}

/* ============================================================
   FILTER TOGGLE
   ============================================================ */
.filter-toggle {
    display: flex;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
}

.filter-btn {
    font-family: var(--cond);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mid);
    text-decoration: none;
    padding: 0.4em 0.9em;
    border: 1px solid rgba(28,27,24,0.2);
    border-right: none;
    transition: background 0.15s, color 0.15s;
}
.filter-btn:first-child { border-radius: 3px 0 0 3px; }
.filter-btn:last-child  { border-right: 1px solid rgba(28,27,24,0.2); border-radius: 0 3px 3px 0; }
.filter-btn:hover       { background: var(--paper-dark); color: var(--ink); }
.filter-btn--active     { background: var(--ink); color: var(--paper); }
.filter-btn--active:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   BOTTOM STRIP — About + Guided Runs
   ============================================================ */
.bottom-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
}

.about-col {
    padding: 3rem;
    border-right: 1px solid rgba(28,27,24,0.12);
}

.guide-col {
    padding: 3rem;
    background: var(--paper-dark);
}

.col-label {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.col-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--red);
    opacity: 0.25;
}

.about-col p {
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1rem;
}

.guide-col h2 {
    font-family: var(--cond);
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.guide-col h2 em {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    font-size: 0.65em;
    color: var(--ink-mid);
    letter-spacing: 0;
    margin-top: 0.25rem;
}

.guide-col p {
    font-family: var(--serif);
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--ink-mid);
    margin: 1.25rem 0 2rem;
}

.guide-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--cond);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    padding: 0.85rem 1.75rem;
    transition: background 0.2s;
}

.guide-cta:hover { background: var(--red); }

.guide-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.guide-form input,
.guide-form textarea {
    font-family: var(--serif);
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink-light);
    padding: 0.65rem 0.9rem;
    width: 100%;
    box-sizing: border-box;
    resize: none;
}
.guide-form input:focus,
.guide-form textarea:focus { outline: 1px solid var(--ink); }
.guide-form button.guide-cta { border: none; cursor: pointer; align-self: flex-start; }

/* ============================================================
   SINGLE POST — Individual run page
   ============================================================ */
.post-masthead {
    border-bottom: 2px solid var(--ink);
    padding: 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: end;
}

.post-kicker {
    font-family: var(--cond);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.post-kicker::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--red);
}

.post-title {
    font-family: var(--cond);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.post-title em {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    font-size: 0.6em;
    color: var(--ink-mid);
    letter-spacing: 0.01em;
    margin-top: 0.25rem;
}

.post-meta-line {
    font-family: var(--cond);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.post-meta-line span { color: var(--red); }

.post-stats-panel {
    background: var(--ink);
    color: var(--paper);
    padding: 2rem;
}

.post-stats-panel .stats-row {
    grid-template-columns: 1fr 1fr;
}

.post-hero-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center;
    border-bottom: 2px solid var(--ink);
}

.post-body-wrap {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    border-bottom: 2px solid var(--ink);
}

.post-body {
    padding: 3rem 4rem 3rem 3rem;
    border-right: 1px solid rgba(28,27,24,0.12);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-mid);
}

.post-body p { margin-bottom: 1.5rem; }

.post-body p:first-child::first-letter {
    font-family: var(--cond);
    font-size: 4rem;
    font-weight: 600;
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.08em 0 0;
    color: var(--ink);
}

/* Images inside post body — fill the column properly on desktop */
.post-body img,
.post-body .wp-block-image img,
.post-body figure img {
    width: 100%;
    min-height: 280px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-bottom: 1.5rem;
}

/* Full-width image blocks that should bleed edge to edge within the column */
.post-body .wp-block-image {
    margin-left: 0;
    margin-right: 0;
}

.post-sidebar {
    padding: 3rem 2rem;
    background: var(--paper-dark);
}

.sidebar-section {
    margin-bottom: 2.5rem;
}

.sidebar-label {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(192,57,43,0.2);
}

.sidebar-route {
    font-family: var(--cond);
    font-size: 0.78rem;
    color: var(--ink-mid);
    line-height: 1.7;
    letter-spacing: 0.03em;
}

/* Post photo gallery */
.post-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border-bottom: 2px solid var(--ink);
}

.post-gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: opacity 0.2s;
}

.post-gallery img:hover { opacity: 0.9; }

/* Post navigation */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
}

.post-nav-item {
    padding: 2rem 3rem;
    transition: background 0.2s;
}

.post-nav-item:hover { background: var(--paper-dark); }

.post-nav-item + .post-nav-item {
    border-left: 1px solid rgba(28,27,24,0.12);
    text-align: right;
}

.post-nav-direction {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.5rem;
    display: block;
}

.post-nav-title {
    font-family: var(--cond);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    padding: 1.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--paper);
    border-top: 1px solid rgba(28,27,24,0.08);
}

.footer-brand {
    font-family: var(--cond);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mid);
}

.footer-brand strong { color: var(--ink); }

.footer-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.footer-links a {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-light);
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--red); }

.footer-kalica {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ink-light);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .masthead { padding: 0 1.5rem; }
    .masthead-title h1,
    .masthead-title .site-name { font-size: 2rem; }
    .masthead-date,
    .masthead-nav { display: none; }

    .hero { grid-template-columns: 1fr; }
    .hero-photo { min-height: 300px; border-right: none; border-bottom: 2px solid var(--ink); }
    .hero-text { padding: 2rem 1.5rem; }
    .hero-headline { font-size: 2rem; }

    .post-hero-image { height: auto; max-height: 55vw; }

    .runs-grid { grid-template-columns: 1fr; }
    .run-card { border-right: none; border-bottom: 1px solid rgba(28,27,24,0.12); }
    .run-read-link { opacity: 1; }

    .bottom-strip { grid-template-columns: 1fr; }
    .page-masthead { padding: 2rem 1.5rem; }
    .page-intro-band { padding: 1.5rem; }
    .page-body-wrap { padding: 2rem 1.5rem; }
    .about-col { border-right: none; border-bottom: 1px solid rgba(28,27,24,0.12); }

    .post-masthead { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
    .post-body-wrap { grid-template-columns: 1fr; }
    .post-body { padding: 2rem 1.5rem; border-right: none; }
    .post-gallery { grid-template-columns: 1fr 1fr; }

    .site-footer { flex-direction: column; gap: 1rem; text-align: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   RAVENNA PAGE
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.rav-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 85vh;
    border-bottom: 2px solid var(--ink);
}

.rav-hero-img {
    position: relative;
    overflow: hidden;
    border-right: 2px solid var(--ink);
}

.rav-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    min-height: 500px;
}

.rav-hero-caption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}

.rav-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3.5rem;
    background: var(--paper);
}

.rav-kicker {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rav-kicker::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}

.rav-headline {
    font-family: var(--cond);
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 2rem;
}

.rav-standfirst {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* ── Sections ───────────────────────────────────────────────── */
.rav-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
}

.rav-section--light {
    background: var(--paper);
}

.rav-section--dark {
    background: var(--paper-dark);
}

.rav-section-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rav-section-kicker {
    font-family: var(--cond);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rav-section-kicker::before {
    content: '';
    width: 1.25rem;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}

.rav-section-title {
    font-family: var(--cond);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 1.75rem;
}

.rav-section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mid);
}

.rav-section-text p {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
}

.rav-section-text p:last-child { margin-bottom: 0; }

.rav-section-img {
    overflow: hidden;
}

.rav-section-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 460px;
    display: block;
}

.rav-section-img--right {
    border-left: 2px solid var(--ink);
    order: 2;
}

.rav-section--light .rav-section-text { order: 1; }

.rav-section-img--left {
    border-right: 2px solid var(--ink);
    order: 1;
}

.rav-section--dark .rav-section-text { order: 2; }

/* ── Full-width photo break ─────────────────────────────────── */
.rav-photo-break {
    position: relative;
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    height: 420px;
}

.rav-photo-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display: block;
}

.rav-photo-break-caption {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}

/* ── Mosaic band ────────────────────────────────────────────── */
.rav-mosaic-band {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 2px solid var(--ink);
    padding: 4rem 3rem;
}

.rav-mosaic-intro {
    max-width: 680px;
    margin-bottom: 3rem;
}

.rav-mosaic-band .rav-section-kicker {
    color: rgba(247,244,239,0.5);
}

.rav-mosaic-band .rav-section-kicker::before {
    background: rgba(247,244,239,0.5);
}

.rav-mosaic-title {
    font-family: var(--cond);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--paper);
    margin-bottom: 1.5rem;
}

.rav-mosaic-title em {
    font-style: italic;
    font-weight: 400;
    color: rgba(247,244,239,0.6);
}

.rav-mosaic-intro p {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: rgba(247,244,239,0.7);
}

.rav-mosaic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 3px;
}

.rav-mosaic-img {
    overflow: hidden;
    position: relative;
}

.rav-mosaic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 280px;
    transition: transform 0.4s ease;
}

.rav-mosaic-img:hover img { transform: scale(1.03); }

.rav-mosaic-img--tall {
    grid-row: span 2;
}

.rav-mosaic-img--tall img { min-height: 560px; }

.rav-mosaic-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    background: linear-gradient(to top, rgba(28,27,24,0.75) 0%, transparent 100%);
    padding: 2rem 1rem 0.75rem;
}

/* ── Cyclamen / flowers section ─────────────────────────────── */
.rav-cyclamen-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
    background: var(--paper);
}

.rav-cyclamen-img {
    overflow: hidden;
    border-right: 2px solid var(--ink);
}

.rav-cyclamen-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 460px;
    display: block;
}

.rav-cyclamen-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rav-cyclamen-title {
    font-family: var(--cond);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 1.75rem;
}

.rav-cyclamen-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mid);
}

.rav-cyclamen-text p {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
}

/* ── CTA strip ──────────────────────────────────────────────── */
.rav-cta-strip {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    background: var(--paper-dark);
    border-bottom: 2px solid var(--ink);
}

.rav-cta-col {
    padding: 3.5rem 3rem;
}

.rav-cta-divider {
    background: rgba(28,27,24,0.12);
}

.rav-cta-label {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.75rem;
}

.rav-cta-col h3 {
    font-family: var(--cond);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin-bottom: 1rem;
}

.rav-cta-col p {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1.75rem;
}

.rav-cta-btn {
    display: inline-block;
    font-family: var(--cond);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 2px solid var(--red);
    padding-bottom: 0.25rem;
    text-decoration: none;
    transition: color 0.2s;
}

.rav-cta-btn:hover { color: var(--red); }

.rav-cta-btn--tours {
    border-bottom-color: var(--walk);
}

.rav-cta-btn--tours:hover { color: var(--walk); }

/* ── Ravenna responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .rav-hero { grid-template-columns: 1fr; min-height: auto; }
    .rav-hero-img { min-height: 55vw; border-right: none; border-bottom: 2px solid var(--ink); }
    .rav-hero-img img { min-height: 55vw; }
    .rav-hero-text { padding: 2.5rem 1.5rem; }

    .rav-section { grid-template-columns: 1fr; }
    .rav-section-img--right,
    .rav-section-img--left { order: 1; border-left: none; border-right: none; border-bottom: 2px solid var(--ink); }
    .rav-section--light .rav-section-text,
    .rav-section--dark .rav-section-text { order: 2; padding: 2.5rem 1.5rem; }
    .rav-section-img img { min-height: 55vw; }

    .rav-photo-break { height: 55vw; }

    .rav-mosaic-band { padding: 2.5rem 1.5rem; }
    .rav-mosaic-grid { grid-template-columns: 1fr 1fr; }
    .rav-mosaic-img--tall { grid-row: span 1; }
    .rav-mosaic-img--tall img { min-height: 45vw; }
    .rav-mosaic-img img { min-height: 45vw; }

    .rav-cyclamen-band { grid-template-columns: 1fr; }
    .rav-cyclamen-img { border-right: none; border-bottom: 2px solid var(--ink); }
    .rav-cyclamen-img img { min-height: 55vw; }
    .rav-cyclamen-text { padding: 2.5rem 1.5rem; }

    .rav-cta-strip { grid-template-columns: 1fr; }
    .rav-cta-divider { display: none; }
    .rav-cta-col { padding: 2.5rem 1.5rem; border-bottom: 1px solid rgba(28,27,24,0.12); }
}
/* ============================================================
   ABOUT PAGE
   ============================================================ */
 
/* ── Hero ───────────────────────────────────────────────────── */
.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 60vh;
    border-bottom: 2px solid var(--ink);
}
 
.about-hero-img {
    position: relative;
    overflow: hidden;
    border-right: 2px solid var(--ink);
}
 
.about-hero-img img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 360px;
}
 
.about-hero-caption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}
 
.about-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3.5rem;
    background: var(--paper);
}
 
.about-kicker {
    font-family: var(--cond);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
 
.about-kicker::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}
 
.about-headline {
    font-family: var(--cond);
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 2rem;
}
 
.about-standfirst {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
    font-style: italic;
}
 
/* ── Shared section styles ──────────────────────────────────── */
.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
}
 
.about-section--light { background: var(--paper); }
.about-section--dark  { background: var(--paper-dark); }
 
.about-section-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.about-section-kicker {
    font-family: var(--cond);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
 
.about-section-kicker::before {
    content: '';
    width: 1.25rem;
    height: 2px;
    background: var(--red);
    flex-shrink: 0;
}
 
.about-section-title {
    font-family: var(--cond);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 1.75rem;
}
 
.about-section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mid);
    text-transform: none;
}
 
.about-section-text p {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-mid);
    margin-bottom: 1.25rem;
}
 
.about-section-text p:last-child { margin-bottom: 0; }
 
.about-section-text p strong {
    color: var(--ink);
    font-weight: 600;
}
 
.about-section-img {
    overflow: hidden;
}
 
.about-section-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 480px;
    display: block;
}
 
.about-section-img--right {
    border-left: 2px solid var(--ink);
    order: 2;
}
 
.about-section--light .about-section-text { order: 1; }
 
.about-section-img--left {
    border-right: 2px solid var(--ink);
    order: 1;
}
 
.about-section--dark .about-section-text { order: 2; }
 
/* ── Newspaper / press band ─────────────────────────────────── */
.about-press-band {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 2px solid var(--ink);
    background: var(--ink);
    min-height: 420px;
}
 
.about-press-img {
    overflow: hidden;
    border-right: 2px solid rgba(247,244,239,0.15);
}
 
.about-press-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    min-height: 420px;
    display: block;
    filter: grayscale(20%);
}
 
.about-press-text {
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px solid rgba(247,244,239,0.15);
}
 
.about-press-text .about-section-kicker {
    color: rgba(247,244,239,0.5);
}
 
.about-press-text .about-section-kicker::before {
    background: rgba(247,244,239,0.5);
}
 
.about-press-title {
    font-family: var(--cond);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.15;
    color: var(--paper);
    margin-bottom: 1.5rem;
}
 
.about-press-title em {
    font-style: italic;
    font-weight: 400;
    color: rgba(247,244,239,0.65);
    text-transform: none;
}
 
.about-press-text p {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(247,244,239,0.65);
}
 
.about-press-medal {
    overflow: hidden;
    position: relative;
}
 
.about-press-medal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 420px;
    display: block;
}
 
.about-press-caption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}
 
/* ── Half marathon flat lay band ────────────────────────────── */
.about-flatlay-band {
    position: relative;
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    height: 400px;
}
 
.about-flatlay-img {
    position: relative;
    height: 100%;
}
 
.about-flatlay-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
 
.about-flatlay-caption {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}
 
/* ── Full-width photo break ─────────────────────────────────── */
.about-photo-break {
    position: relative;
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    height: 460px;
}
 
.about-photo-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
 
.about-photo-break-caption {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(28,27,24,0.55);
    padding: 0.3em 0.7em;
    backdrop-filter: blur(2px);
}
 
/* ── Siena three-photo band ─────────────────────────────────── */
.about-siena-band {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 2px solid var(--ink);
    gap: 0;
}
 
.about-siena-img {
    overflow: hidden;
    position: relative;
    border-right: 1px solid var(--ink);
}
 
.about-siena-img:last-child { border-right: none; }
 
.about-siena-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 380px;
    display: block;
    transition: transform 0.4s ease;
}
 
.about-siena-img:hover img { transform: scale(1.03); }
 
.about-siena-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: var(--cond);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    background: linear-gradient(to top, rgba(28,27,24,0.75) 0%, transparent 100%);
    padding: 2rem 1rem 0.75rem;
}
 
/* ── Closing dark band ──────────────────────────────────────── */
.about-close-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
}
 
.about-close-img {
    overflow: hidden;
    border-right: 2px solid rgba(247,244,239,0.15);
}
 
.about-close-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 500px;
    display: block;
}
 
.about-close-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.about-close-kicker {
    font-family: var(--cond);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247,244,239,0.5);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
 
.about-close-kicker::before {
    content: '';
    width: 1.25rem;
    height: 2px;
    background: rgba(247,244,239,0.5);
    flex-shrink: 0;
}
 
.about-close-title {
    font-family: var(--cond);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--paper);
    margin-bottom: 1.75rem;
}
 
.about-close-title em {
    font-style: italic;
    font-weight: 400;
    color: rgba(247,244,239,0.6);
    text-transform: none;
}
 
.about-close-text p {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.9;
    color: rgba(247,244,239,0.7);
    margin-bottom: 1.25rem;
}
 
.about-close-sign {
    font-style: italic;
    color: var(--paper) !important;
    font-size: 1.05rem !important;
    margin-top: 1rem;
    border-left: 3px solid rgba(192,57,43,0.6);
    padding-left: 1rem;
}
 
.about-close-byline {
    font-family: var(--cond) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(247,244,239,0.45) !important;
    margin-top: 0.5rem !important;
}
 
/* ── CTA strip ──────────────────────────────────────────────── */
.about-cta-strip {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    background: var(--paper-dark);
    border-bottom: 2px solid var(--ink);
}
 
.about-cta-col {
    padding: 3.5rem 3rem;
}
 
.about-cta-divider {
    background: rgba(28,27,24,0.12);
}
 
.about-cta-label {
    font-family: var(--cond);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.75rem;
}
 
.about-cta-col h3 {
    font-family: var(--cond);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin-bottom: 1rem;
}
 
.about-cta-col p {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-bottom: 1.75rem;
}
 
.about-cta-btn {
    display: inline-block;
    font-family: var(--cond);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 2px solid var(--red);
    padding-bottom: 0.25rem;
    text-decoration: none;
    transition: color 0.2s;
}
 
.about-cta-btn:hover { color: var(--red); }
 
.about-cta-btn--alt {
    border-bottom-color: var(--ink-light);
}
 
.about-cta-btn--alt:hover { color: var(--ink-mid); }
 
/* ── About page responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .about-hero { grid-template-columns: 1fr; min-height: auto; }
    .about-hero-img { min-height: 55vw; border-right: none; border-bottom: 2px solid var(--ink); }
    .about-hero-img img { min-height: 55vw; }
    .about-hero-text { padding: 2.5rem 1.5rem; }
 
    .about-section { grid-template-columns: 1fr; }
    .about-section-img--right,
    .about-section-img--left { order: 1; border-left: none; border-right: none; border-bottom: 2px solid var(--ink); }
    .about-section--light .about-section-text,
    .about-section--dark  .about-section-text { order: 2; padding: 2.5rem 1.5rem; }
    .about-section-img img { min-height: 55vw; }
 
    .about-press-band { grid-template-columns: 1fr; }
    .about-press-img { border-right: none; border-bottom: 2px solid rgba(247,244,239,0.15); }
    .about-press-img img { min-height: 55vw; }
    .about-press-text { padding: 2.5rem 1.5rem; border-right: none; border-bottom: 2px solid rgba(247,244,239,0.15); }
    .about-press-medal img { min-height: 55vw; }
 
    .about-flatlay-band { height: 55vw; }
    .about-photo-break { height: 55vw; }
 
    .about-siena-band { grid-template-columns: 1fr; }
    .about-siena-img { border-right: none; border-bottom: 1px solid var(--ink); }
    .about-siena-img img { min-height: 55vw; }
 
    .about-close-band { grid-template-columns: 1fr; }
    .about-close-img { border-right: none; border-bottom: 2px solid rgba(247,244,239,0.15); }
    .about-close-img img { min-height: 55vw; }
    .about-close-text { padding: 2.5rem 1.5rem; }
 
    .about-cta-strip { grid-template-columns: 1fr; }
    .about-cta-divider { display: none; }
    .about-cta-col { padding: 2.5rem 1.5rem; border-bottom: 1px solid rgba(28,27,24,0.12); }
}
 
/* ═══════════════════════════════════════════════════════════════
   RUN WITH ME — template-run-with-me.php
   Matches the About page design language.
   Add to style.css or a dedicated run-with-me.css file.
   ═══════════════════════════════════════════════════════════════ */
 
/* ── HERO ──────────────────────────────────────────────────────── */
.rwm-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}
 
.rwm-hero-img {
    position: relative;
    overflow: hidden;
}
 
.rwm-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.rwm-hero-text {
    background: var(--color-cream, #f5f0e8);
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.rwm-kicker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.75rem;
}
 
.rwm-headline {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.25rem;
}
 
.rwm-standfirst {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-ink, #1a1a18);
    max-width: 38ch;
}
 
/* ── SHARED SECTION STRUCTURE ──────────────────────────────────── */
.rwm-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}
 
.rwm-section--light {
    background: var(--color-cream, #f5f0e8);
}
 
.rwm-section--dark {
    background: var(--color-ink, #1a1a18);
}
 
.rwm-section--dark .rwm-section-text p,
.rwm-section--dark .rwm-section-title,
.rwm-section--dark .rwm-section-kicker {
    color: var(--color-cream, #f5f0e8);
}
 
.rwm-section--dark .rwm-section-kicker {
    color: var(--color-red, #8b1a1a);
}
 
.rwm-section--dark strong {
    color: var(--color-cream, #f5f0e8);
}
 
.rwm-section-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.rwm-section-img {
    overflow: hidden;
}
 
.rwm-section-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.rwm-section-img--left {
    order: -1;
}
 
.rwm-section-kicker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.75rem;
}
 
.rwm-section-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.5rem;
}
 
.rwm-section-title em {
    font-style: italic;
    font-weight: 400;
}
 
.rwm-section-text p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1rem;
    max-width: 52ch;
}
 
/* ── RAVENNA CITY BAND ─────────────────────────────────────────── */
.rwm-city-band {
    background: var(--color-red, #8b1a1a);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    padding: 4rem 3.5rem;
    align-items: start;
}
 
.rwm-city-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 0;
}
 
.rwm-city-title em {
    font-style: italic;
    font-weight: 400;
}
 
.rwm-city-band-text .rwm-section-kicker {
    color: rgba(255,255,255,0.6);
}
 
.rwm-city-band-body p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1rem;
    max-width: 60ch;
}
 
/* ── SARAH / TOURS CROSSOVER BAND ──────────────────────────────── */
.rwm-tours-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-cream, #f5f0e8);
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
 
.rwm-tours-text {
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.rwm-tours-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.25rem;
}
 
.rwm-tours-title em {
    font-style: italic;
    font-weight: 400;
}
 
.rwm-tours-text p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.25rem;
    max-width: 52ch;
}
 
.rwm-tours-btn {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    border-bottom: 1px solid var(--color-red, #8b1a1a);
    padding-bottom: 2px;
    text-decoration: none;
    transition: opacity 0.2s;
}
 
.rwm-tours-btn:hover {
    opacity: 0.7;
}
 
.rwm-tours-img {
    overflow: hidden;
    min-height: 360px;
}
 
.rwm-tours-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
/* ── CONTACT FORM ──────────────────────────────────────────────── */
.rwm-form-section {
    background: var(--color-ink, #1a1a18);
    padding: 5rem 3.5rem;
}
 
.rwm-form-inner {
    max-width: 680px;
    margin: 0 auto;
}
 
.rwm-form-section .rwm-section-kicker {
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.5rem;
}
 
.rwm-form-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}
 
.rwm-form-title em {
    font-style: italic;
    font-weight: 400;
}
 
.rwm-form-intro {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.75);
    margin-bottom: 2rem;
    max-width: 56ch;
}
 
.rwm-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
 
.rwm-form-input,
.rwm-form-textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: 'Libre Baskerville', serif;
    font-size: 0.9rem;
    padding: 0.9rem 1rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
 
.rwm-form-input::placeholder,
.rwm-form-textarea::placeholder {
    color: rgba(255,255,255,0.35);
}
 
.rwm-form-input:focus,
.rwm-form-textarea:focus {
    border-color: rgba(255,255,255,0.6);
}
 
.rwm-form-textarea {
    resize: vertical;
    min-height: 120px;
}
 
.rwm-form-btn {
    align-self: flex-start;
    background: #fff;
    color: var(--color-ink, #1a1a18);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.2s, color 0.2s;
}
 
.rwm-form-btn:hover {
    background: var(--color-red, #8b1a1a);
    color: #fff;
}
 
/* ── CTA STRIP ─────────────────────────────────────────────────── */
.rwm-cta-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background: var(--color-cream, #f5f0e8);
    padding: 4rem 3.5rem;
    gap: 2rem;
    align-items: start;
}
 
.rwm-cta-divider {
    width: 1px;
    background: rgba(0,0,0,0.12);
    align-self: stretch;
}
 
.rwm-cta-col {
    padding: 0 2rem;
}
 
.rwm-cta-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.4rem;
}
 
.rwm-cta-col h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 0.75rem;
}
 
.rwm-cta-col p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.25rem;
}
 
.rwm-cta-btn {
    display: inline-block;
    background: var(--color-ink, #1a1a18);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    transition: background 0.2s;
}
 
.rwm-cta-btn:hover {
    background: var(--color-red, #8b1a1a);
}
 
.rwm-cta-btn--alt {
    background: transparent;
    color: var(--color-ink, #1a1a18);
    border: 1px solid var(--color-ink, #1a1a18);
}
 
.rwm-cta-btn--alt:hover {
    background: var(--color-red, #8b1a1a);
    color: #fff;
    border-color: var(--color-red, #8b1a1a);
}
 
/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
 
    .rwm-hero,
    .rwm-section,
    .rwm-tours-band {
        grid-template-columns: 1fr;
    }
 
    .rwm-hero-img {
        min-height: 280px;
    }
 
    .rwm-hero-text,
    .rwm-section-text,
    .rwm-tours-text {
        padding: 2.5rem 1.5rem;
    }
 
    .rwm-section-img--left {
        order: 0;
    }
 
    .rwm-city-band {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.5rem;
        gap: 1.5rem;
    }
 
    .rwm-tours-img {
        min-height: 240px;
    }
 
    .rwm-form-section {
        padding: 3rem 1.5rem;
    }
 
    .rwm-cta-strip {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.5rem;
    }
 
    .rwm-cta-divider {
        display: none;
    }
 
    .rwm-cta-col {
        padding: 0;
    }
 
    .rwm-form-btn {
        align-self: stretch;
        text-align: center;
    }
}
 /* ═══════════════════════════════════════════════════════════════
   THE JOURNEY — template-journey.php
   Chronological arc page for runner.kalica.co.uk
   Matches About / Run With Me design language.
   Add to style.css or a dedicated journey.css file.
   ═══════════════════════════════════════════════════════════════ */
 
/* ── HERO ──────────────────────────────────────────────────────── */
.journey-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}
 
.journey-hero-img {
    position: relative;
    overflow: hidden;
}
 
.journey-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.journey-hero-text {
    background: var(--color-ink, #1a1a18);
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.journey-kicker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.75rem;
}
 
.journey-headline {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.25rem;
}
 
.journey-standfirst {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    max-width: 38ch;
}
 
/* ── COUNTER BAND ──────────────────────────────────────────────── */
.journey-counter-band {
    background: var(--color-red, #8b1a1a);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 3rem 3.5rem;
    gap: 0;
}
 
.journey-counter-item {
    text-align: center;
    padding: 0 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}
 
.journey-counter-item:last-child {
    border-right: none;
}
 
.journey-counter-number {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.4rem;
}
 
.journey-counter-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
 
/* ── CHAPTER INTRO BAND ────────────────────────────────────────── */
.journey-chapter-intro {
    background: var(--color-cream, #f5f0e8);
    padding: 4rem 3.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
 
.journey-chapter-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.75rem;
}
 
.journey-chapter-heading {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-ink, #1a1a18);
}
 
.journey-chapter-heading em {
    font-style: italic;
    font-weight: 400;
}
 
.journey-chapter-body p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 0;
    max-width: 60ch;
}
 
/* ── CHAPTER BLOCK ─────────────────────────────────────────────── */
.journey-chapter {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
 
.journey-chapter--dark {
    background: var(--color-ink, #1a1a18);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
 
.journey-chapter--cream {
    background: var(--color-cream, #f5f0e8);
}
 
.journey-chapter--white {
    background: #fff;
}
 
/* ── CHAPTER HEADER ────────────────────────────────────────────── */
.journey-chapter-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
}
 
.journey-chapter-header-img {
    overflow: hidden;
}
 
.journey-chapter-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.journey-chapter-header-text {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.journey-chapter--dark .journey-chapter-header-text {
    background: var(--color-ink, #1a1a18);
}
 
.journey-chapter--cream .journey-chapter-header-text {
    background: var(--color-cream, #f5f0e8);
}
 
.journey-chapter--white .journey-chapter-header-text {
    background: #fff;
}
 
.journey-chapter-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.6rem;
}
 
.journey-chapter-title {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1rem;
}
 
.journey-chapter--dark .journey-chapter-title {
    color: #fff;
}
 
.journey-chapter-title em {
    font-style: italic;
    font-weight: 400;
}
 
.journey-chapter-desc {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-ink, #1a1a18);
    max-width: 48ch;
}
 
.journey-chapter--dark .journey-chapter-desc {
    color: rgba(255,255,255,0.72);
}
 
/* ── POST LIST ─────────────────────────────────────────────────── */
.journey-post-list {
    padding: 0 3.5rem 3.5rem;
}
 
.journey-chapter--dark .journey-post-list {
    background: var(--color-ink, #1a1a18);
}
 
.journey-post-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    text-decoration: none;
    transition: background 0.15s;
}
 
.journey-chapter--dark .journey-post-row {
    border-bottom-color: rgba(255,255,255,0.07);
}
 
.journey-post-row:last-child {
    border-bottom: none;
}
 
.journey-post-row:hover {
    background: rgba(0,0,0,0.03);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
 
.journey-chapter--dark .journey-post-row:hover {
    background: rgba(255,255,255,0.04);
}
 
.journey-post-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    white-space: nowrap;
}
 
.journey-post-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.95rem;
    color: var(--color-ink, #1a1a18);
    line-height: 1.4;
}
 
.journey-chapter--dark .journey-post-title {
    color: rgba(255,255,255,0.88);
}
 
.journey-post-meta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    white-space: nowrap;
}
 
.journey-chapter--dark .journey-post-meta {
    color: rgba(255,255,255,0.3);
}
 
.journey-post-meta--run {
    color: var(--color-red, #8b1a1a);
    opacity: 0.8;
}
 
.journey-post-meta--walk {
    color: rgba(0,0,0,0.45);
}
 
.journey-chapter--dark .journey-post-meta--walk {
    color: rgba(255,255,255,0.35);
}
 
/* ── PHOTO BREAK ───────────────────────────────────────────────── */
.journey-photo-break {
    position: relative;
    height: 320px;
    overflow: hidden;
}
 
.journey-photo-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.journey-photo-break-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.4);
    padding: 0.3rem 0.6rem;
}
 
/* ── ITALY COUNTER WIDGET ──────────────────────────────────────── */
.journey-italy-band {
    background: var(--color-red, #8b1a1a);
    padding: 3.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    align-items: center;
}
 
.journey-italy-flag {
    font-size: 3rem;
    line-height: 1;
}
 
.journey-italy-stat {
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    padding: 0 2rem;
}
 
.journey-italy-stat-number {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.4rem;
}
 
.journey-italy-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
 
.journey-italy-text p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.85);
    max-width: 40ch;
    margin: 0 0 0 auto;
}
 
/* ── CTA STRIP ─────────────────────────────────────────────────── */
.journey-cta-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background: var(--color-cream, #f5f0e8);
    padding: 4rem 3.5rem;
    gap: 2rem;
    align-items: start;
}
 
.journey-cta-divider {
    width: 1px;
    background: rgba(0,0,0,0.12);
    align-self: stretch;
}
 
.journey-cta-col {
    padding: 0 2rem;
}
 
.journey-cta-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-red, #8b1a1a);
    margin-bottom: 0.4rem;
}
 
.journey-cta-col h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 0.75rem;
}
 
.journey-cta-col p {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-ink, #1a1a18);
    margin-bottom: 1.25rem;
}
 
.journey-cta-btn {
    display: inline-block;
    background: var(--color-ink, #1a1a18);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    transition: background 0.2s;
}
 
.journey-cta-btn:hover {
    background: var(--color-red, #8b1a1a);
}
 
.journey-cta-btn--alt {
    background: transparent;
    color: var(--color-ink, #1a1a18);
    border: 1px solid var(--color-ink, #1a1a18);
}
 
.journey-cta-btn--alt:hover {
    background: var(--color-red, #8b1a1a);
    color: #fff;
    border-color: var(--color-red, #8b1a1a);
}
 
/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
 
    .journey-hero,
    .journey-chapter-header {
        grid-template-columns: 1fr;
    }
 
    .journey-hero-img {
        min-height: 280px;
    }
 
    .journey-hero-text,
    .journey-chapter-header-text {
        padding: 2.5rem 1.5rem;
    }
 
    .journey-counter-band {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 0;
        padding: 2.5rem 1.5rem;
    }
 
    .journey-counter-item:nth-child(2) {
        border-right: none;
    }
 
    .journey-chapter-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 1.5rem;
    }
 
    .journey-post-list {
        padding: 0 1.5rem 2.5rem;
    }
 
    .journey-post-row {
        grid-template-columns: 70px 1fr;
        gap: 0.75rem 1rem;
    }
 
    .journey-post-meta {
        grid-column: 2;
        margin-top: -0.5rem;
    }
 
    .journey-italy-band {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 1.5rem;
        text-align: center;
    }
 
    .journey-italy-stat {
        border: none;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding: 2rem 0 0;
    }
 
    .journey-italy-text p {
        margin: 0 auto;
        text-align: left;
    }
 
    .journey-cta-strip {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.5rem;
    }
 
    .journey-cta-divider {
        display: none;
    }
 
    .journey-cta-col {
        padding: 0;
    }
 
    .journey-photo-break {
        height: 220px;
    }
}