/* ==========================================================
   On My Way — editorial theme
   One design system: colours, type, rules, captions, links.
   ========================================================== */

:root {
    --bg: #F5F3F4;
    --ink: #2B2930;
    --body: #2F2C33;
    --soft: #4A4651;
    --muted: #6C6772;
    --line: #DCD8DE;
    --placeholder: #DFDCE2;
    --pink: #9C6170;
    --pink-line: #C99AA3;
    --blue: #546F87;

    --serif: 'Instrument Serif', Georgia, serif;
    --text: 'Newsreader', Georgia, serif;
    --sans: 'Hanken Grotesk', system-ui, sans-serif;

    --gutter: 40px;
}

@media (max-width: 700px) {
    :root { --gutter: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--pink); }

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

em { font-style: italic; }

.wrap {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.wrap-narrow { max-width: 1080px; }

/* ---------- small type: labels, links, captions ---------- */

.label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.9;
}
a.label:hover { color: var(--pink); }

.sec-the-pizza-department { color: var(--pink); }
.sec-places-along-the-way { color: var(--blue); }
.sec-the-art-of-things { color: var(--muted); }

.link-more {
    align-self: flex-start;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: var(--pink-line);
}

.caption, figcaption {
    font-family: var(--text);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}
.caption-right { text-align: right; }

.rule-head {
    margin: 0 0 40px;
    border-top: 1px solid var(--ink);
    padding-top: 16px;
}
.rule-head-split {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.meta { font-size: 13px; color: var(--muted); }

/* ---------- images: always cropped to the frame ---------- */

.frame {
    position: relative;
    overflow: hidden;
    background: var(--placeholder);
    width: 100%;
}
.frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.f-21x9 { aspect-ratio: 21 / 9; }
.f-16x8 { aspect-ratio: 16 / 8; }
.f-16x7 { aspect-ratio: 16 / 7; }
.f-4x5 { aspect-ratio: 4 / 5; }
.f-4x3 { aspect-ratio: 4 / 3; }
.f-3x4 { aspect-ratio: 3 / 4; }
.f-3x2 { aspect-ratio: 3 / 2; }
.f-2x3 { aspect-ratio: 2 / 3; }

/* ---------- header & footer ---------- */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 40px;
    padding-top: 28px;
}

.wordmark {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.nav a { text-decoration: none; }
.nav a.nav-current {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: var(--pink-line);
}

.site-footer { padding-top: 0; padding-bottom: 48px; }
.footer-inner {
    border-top: 1px solid var(--line);
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand span { font-size: 14px; color: var(--muted); }
.wordmark-lg {
    font-family: var(--serif);
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* ---------- home ---------- */

.masthead { padding-top: 128px; padding-bottom: 120px; }
.masthead-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(76px, 16vw, 240px);
    line-height: 0.8;
    letter-spacing: -0.04em;
}
.masthead-row {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}
.tagline {
    margin: 0;
    flex: 1 1 440px;
    max-width: 640px;
    font-family: var(--serif);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.18;
}
.tagline .accent { font-style: italic; color: var(--pink); }
.masthead-note { margin: 0; flex: 0 1 260px; }

.home-feature { padding-bottom: 160px; }
.h-feature-xl {
    margin: 0 0 48px;
    max-width: 1120px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(48px, 7.5vw, 112px);
    line-height: 0.92;
    letter-spacing: -0.025em;
}
.h-feature-xl a, .h-feature a, .h-article a { text-decoration: none; }
.home-feature-media { display: block; text-decoration: none; }
.home-feature .caption { margin: 12px 0 0; }
.home-feature-foot {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px 72px;
}
.home-feature-text {
    flex: 0 1 560px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.dek {
    margin: 0;
    font-family: var(--text);
    font-size: 20px;
    line-height: 1.6;
    color: var(--soft);
}

.home-latest { padding-bottom: 176px; }

.home-closing { padding-bottom: 160px; display: flex; justify-content: flex-end; }
.home-closing-inner {
    flex: 0 1 860px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.closing-line {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.08;
}

/* ---------- lists (archives, latest) ---------- */

.rows { margin: 0; padding: 0; list-style: none; flex: 1 1 600px; }
.row { border-bottom: 1px solid var(--line); }
.list-split .rows .row:first-child { border-top: 1px solid var(--line); }
.row-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 36px;
    padding: 22px 0;
    text-decoration: none;
}
.row-date { flex: 0 0 110px; font-size: 13px; color: var(--muted); }
.row-title {
    flex: 1 1 320px;
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.1;
}
.rows-wide .row-title { font-size: clamp(28px, 2.8vw, 36px); }
.row-note {
    flex: 0 1 220px;
    font-family: var(--text);
    font-style: italic;
    font-size: 16px;
    color: var(--muted);
}

.list-section { padding-bottom: 160px; }
.list-split { display: flex; flex-wrap: wrap; gap: 32px 72px; }
.list-aside { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; }
.h-list {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
}
.list-note { margin: 0; font-family: var(--text); font-size: 16px; color: var(--muted); }

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 96px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.pagination a { text-decoration: none; }

/* ---------- section pages ---------- */

.section-head {
    padding-top: 120px;
    padding-bottom: 112px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px 72px;
}
.section-head-title { flex: 1 1 620px; display: flex; flex-direction: column; gap: 22px; }
.section-title {
    margin: 0;
    max-width: 900px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(64px, 10.5vw, 156px);
    line-height: 0.86;
    letter-spacing: -0.035em;
}
.section-intro {
    margin: 0;
    flex: 0 1 360px;
    font-family: var(--text);
    font-size: 20px;
    line-height: 1.55;
    white-space: pre-line;
}
.section-head-stack { flex-direction: column; align-items: stretch; }
.section-head-stack .section-title { max-width: none; }
.section-head-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px 72px;
}
.section-intro-wide { flex: 0 1 540px; }

/* pizza: picture + words side by side */
.feature-split { padding-bottom: 160px; }
.split { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: center; }
.split-media { flex: 1 1 480px; display: block; }
.split-text { flex: 1 1 400px; display: flex; flex-direction: column; gap: 24px; }
.h-feature {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.015em;
}
.pull-small {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 30px;
    line-height: 1.2;
    color: var(--pink);
}

/* places: photo edge to edge */
.feature-bleed { padding-bottom: 176px; }
.bleed-media { display: block; }
.feature-bleed-text {
    padding-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px 72px;
}
.feature-bleed-text .h-feature-xl { margin: 0; flex: 1 1 560px; }
.feature-bleed-side {
    flex: 0 1 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 12px;
}

/* art: typography first */
.feature-type {
    padding-bottom: 176px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 72px;
}
.feature-type::before {
    content: "";
    flex: 0 0 100%;
    border-top: 1px solid var(--ink);
    margin-bottom: 0;
}
.feature-type-label { flex: 0 0 200px; }
.feature-type-main { flex: 1 1 640px; display: flex; flex-direction: column; gap: 40px; }
.feature-type-main .h-feature-xl { margin: 0; font-size: clamp(44px, 6.4vw, 96px); }
.feature-type-row { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end; }
.feature-type-media { flex: 0 1 280px; display: block; }
.feature-type-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }

.right-now { padding-bottom: 176px; }
.right-now .h-list { margin-bottom: 48px; }
.right-now-cols { display: flex; flex-wrap: wrap; gap: 48px 56px; }
.right-now-cols .col {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.right-now-cols h2, .right-now-cols h3 {
    margin: 0;
    border-top: 1px solid var(--ink);
    padding-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.right-now-cols p, .right-now-cols li {
    margin: 0;
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.15;
}
.right-now-cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.right-now-cols em { font-family: var(--text); font-size: 16px; color: var(--muted); }

/* ---------- articles ---------- */

.article-head {
    padding-top: 112px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.h-article {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(52px, 8vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.03em;
}
.h-article-xl {
    margin: 0;
    max-width: 1100px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 10vw, 152px);
    line-height: 0.86;
    letter-spacing: -0.035em;
}
.dek-italic {
    margin: 0;
    max-width: 720px;
    font-family: var(--text);
    font-style: italic;
    font-size: 25px;
    line-height: 1.4;
    color: var(--soft);
}
.article-figure { margin-top: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 12px; }
.article-figure-bleed { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.article-nav {
    padding-top: 96px;
    padding-bottom: 120px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.article-nav a { text-decoration: none; }

.article-head-center { align-items: center; text-align: center; padding-top: 136px; }
.subtitle {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    color: var(--soft);
}
.art-figure {
    margin: 24px auto 0;
    max-width: 440px;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.travel-intro { padding-top: 96px; }
.lead {
    margin: 0;
    max-width: 760px;
    font-family: var(--serif);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.22;
}

/* ---------- the writing itself (what you type in Ghost) ---------- */

.gh-content {
    --main: 680px;
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, 220px)
        [main-start] min(var(--main), calc(100% - var(--gutter) * 2))
        [main-end] minmax(0, 220px)
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    padding-top: 72px;
    font-family: var(--text);
    font-size: 20px;
    line-height: 1.75;
    color: var(--body);
}
.gh-content > * { grid-column: main-start / main-end; }
.gh-content > .kg-width-wide { grid-column: wide-start / wide-end; }
.gh-content > .kg-width-full { grid-column: full-start / full-end; }
.gh-content > .kg-width-full img { width: 100%; }

.gh-content p { margin: 0 0 24px; }
.gh-content a {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--pink-line);
}
.gh-content h2 {
    margin: 64px 0 18px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.05;
    color: var(--ink);
}
.gh-content h3 {
    margin: 48px 0 14px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    color: var(--ink);
}
.gh-content ul, .gh-content ol { margin: 0 0 24px; padding-left: 22px; }
.gh-content li { margin-bottom: 8px; }
.gh-content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 48px 0;
}
.gh-content figure { margin: 56px 0; }
.gh-content figcaption { margin-top: 12px; }
.gh-content .kg-width-full figcaption { padding: 0 var(--gutter); text-align: right; }

/* the pull quote (Ghost's quote button, first style) */
.gh-content blockquote:not(.kg-blockquote-alt) {
    grid-column: wide-start / wide-end;
    margin: 72px 0;
    padding: 36px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.gh-content blockquote p { margin: 0; }
/* the quieter quote (press the quote button twice) */
.gh-content blockquote.kg-blockquote-alt {
    margin: 56px 0;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--ink);
    text-align: left;
}

/* helpers added automatically by the theme script */
.gh-content ul.facts, .about-content ul.facts {
    list-style: none;
    padding: 0;
    font-family: var(--text);
    font-style: italic;
    font-size: 17px;
    color: var(--soft);
}
.gh-content ul.facts li {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.gh-content ul.facts li:last-child { border-bottom: 1px solid var(--line); }

/* The Pizza Department: small uppercase section labels */
.content-pizza h2 {
    margin: 56px 0 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.content-pizza h2.go-back { margin-top: 88px; color: var(--pink); }
.content-pizza p.big-answer {
    font-family: var(--serif);
    font-size: clamp(88px, 12vw, 168px);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 8px 0 28px;
}

/* Places Along the Way: big day numbers, roomier column */
.content-travel { --main: 720px; padding-top: 104px; }
.content-travel h2.day {
    margin: 0;
    padding: 56px 0 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.content-travel h2.day .day-num {
    font-size: 120px;
    line-height: 0.75;
    letter-spacing: -0.02em;
}
.content-travel p.closing-note,
.content-pizza p.closing-note,
.content-art p.closing-note {
    margin: 8px 0 64px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.12;
    color: var(--ink);
}

/* The Art of Things: centred, typographic */
.content-art { padding-top: 64px; }
.content-art > p:first-child {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.25;
    text-align: center;
    color: var(--ink);
    margin-bottom: 56px;
}
.content-art ol {
    list-style: none;
    padding: 0;
    counter-reset: took;
}
.content-art ol li {
    counter-increment: took;
    display: flex;
    gap: 32px;
    align-items: baseline;
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}
.content-art ol li:last-child { border-bottom: 1px solid var(--line); }
.content-art ol li::before {
    content: counter(took, lower-roman) ".";
    flex: 0 0 48px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: var(--pink);
}

/* ---------- about ---------- */

.about {
    padding-top: 136px;
    padding-bottom: 160px;
    display: flex;
    flex-wrap: wrap;
    gap: 64px 112px;
    align-items: flex-start;
}
.about-photo {
    margin: 0;
    flex: 1 1 360px;
    max-width: 480px;
    position: sticky;
    top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.about-text {
    flex: 1 1 480px;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.h-about {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(48px, 5.6vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}
.about-content {
    font-family: var(--text);
    font-size: 20px;
    line-height: 1.75;
    color: var(--body);
}
.about-content p { margin: 0 0 26px; }
.about-content > p:first-child {
    font-family: var(--serif);
    font-size: clamp(28px, 2.6vw, 34px);
    line-height: 1.22;
    color: var(--ink);
}
.about-content blockquote {
    margin: 56px 0 26px;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.08;
    color: var(--ink);
}
.about-content blockquote p { margin: 0; }
.about-content figure { margin: 40px 0; }

/* ---------- error ---------- */

.error-page {
    padding-top: 160px;
    padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- small screens ---------- */

@media (max-width: 700px) {
    .masthead { padding-top: 72px; padding-bottom: 72px; }
    .section-head, .article-head { padding-top: 64px; padding-bottom: 48px; }
    .home-feature, .home-latest, .feature-split, .feature-bleed,
    .feature-type, .right-now, .list-section, .home-closing { padding-bottom: 96px; }
    .about { padding-top: 64px; }
    .about-photo { position: static; }
    .row-date { flex-basis: 100%; }
    .content-travel h2.day .day-num { font-size: 88px; }
}

/* ==========================================================
   About — an editorial composition, built from plain writing:
   text before the first heading = the introduction,
   each heading = a section, each quote = a pull quote,
   a heading called "Say hello" = the contact block.
   ========================================================== */

.about2 { padding-bottom: 80px; }

.ab-hero { padding-top: 120px; padding-bottom: 136px; }
.ab-title {
    margin: 20px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(64px, 12vw, 184px);
    line-height: 0.84;
    letter-spacing: -0.04em;
    max-width: 1100px;
}
.ab-hero-row { margin-top: 72px; }
.ab-intro p {
    margin: 0 0 24px;
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.18;
}
.ab-intro p + p {
    font-family: var(--text);
    font-style: italic;
    font-size: 21px;
    line-height: 1.5;
    color: var(--pink);
}
.ab-toc { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.ab-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ab-toc li { border-bottom: 1px solid var(--line); }
.ab-toc a {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    text-decoration: none;
    color: var(--muted);
}
.ab-toc a:hover { color: var(--pink); }
.ab-toc .n { color: var(--ink); min-width: 22px; }
.ab-hero-photo { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.ab-body { font-family: var(--text); font-size: 20px; line-height: 1.75; color: var(--body); }
.ab-body p { margin: 0 0 24px; }
.ab-body a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pink-line); }

/* sections */
.ab-sec { padding: 0 0 128px; }
.ab-sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.ab-sec-head .n {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--muted);
}
.ab-sec h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.ab-sec figure { margin: 0 0 24px; }
.ab-sec figure img { width: 100%; }

/* pull quotes */
.ab-quote { padding: 0 0 136px; }
.ab-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(40px, 6vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.ab-quote blockquote p { margin: 0; }
.ab-quote blockquote::before {
    content: "";
    display: block;
    width: 56px;
    border-top: 1px solid var(--pink-line);
    margin-bottom: 28px;
}
.ab-quote-aside p { font-size: 18px; color: var(--soft); }

/* contact */
.ab-contact {
    border-top: 1px solid var(--ink);
    padding: 20px 0 40px;
}
.ab-contact h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.ab-contact p:first-of-type a {
    font-family: var(--serif);
    font-size: clamp(30px, 4.2vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-decoration-thickness: 1px;
    text-underline-offset: 10px;
    word-break: break-word;
}
.ab-contact p { margin: 0 0 16px; }
.ab-contact p + p { font-size: 17px; color: var(--muted); }

/* the magazine grid: only where there is room for it */
@media (min-width: 900px) {
    .ab-hero-row, .ab-sec, .ab-quote, .ab-contact {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 28px;
        align-items: start;
    }

    /* hero: contents on the left, introduction on the right */
    .ab-toc { grid-column: 1 / 4; grid-row: 1; margin-top: 10px; }
    .ab-intro { grid-column: 5 / 12; grid-row: 1; }
    /* with a photo: photo left, words right, contents under the words */
    .has-photo .ab-hero-photo { grid-column: 1 / 6; grid-row: 1 / 3; }
    .has-photo .ab-intro { grid-column: 7 / 13; grid-row: 1; }
    .has-photo .ab-toc { grid-column: 7 / 11; grid-row: 2; margin-top: 40px; }

    .ab-sec > * { grid-column: 6 / 12; }

    /* section A: heading left, text right */
    .ab-sec-a .ab-sec-head { grid-column: 1 / 5; grid-row: 1 / 99; position: sticky; top: 40px; }
    .ab-sec-a > :not(.ab-sec-head) { grid-column: 6 / 12; }

    /* section B: text left, heading on the right */
    .ab-sec-b .ab-sec-head { grid-column: 9 / 13; grid-row: 1 / 99; position: sticky; top: 40px; text-align: right; align-items: flex-end; }
    .ab-sec-b > :not(.ab-sec-head) { grid-column: 2 / 8; }

    /* section C: a big heading across, text in two columns */
    .ab-sec-c .ab-sec-head { grid-column: 1 / 13; margin-bottom: 40px; }
    .ab-sec-c .ab-sec-head h2 { font-size: clamp(48px, 7vw, 104px); }
    .ab-sec-c .ab-sec-cols { grid-column: 3 / 13; column-count: 2; column-gap: 56px; }
    .ab-sec-c .ab-sec-cols p { break-inside: avoid; }

    /* a photo inside a section breaks out of the text column */
    .ab-sec-a > figure { grid-column: 6 / 13; margin: 24px 0 48px; }
    .ab-sec-b > figure { grid-column: 1 / 8; margin: 24px 0 48px; }

    /* a wide photo on its own row */
    .ab-wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; }
    .ab-wide figure { grid-column: 3 / 13; }
    .ab-wide.is-left figure { grid-column: 1 / 10; }

    /* quotes take turns on the page */
    .ab-quote-1 blockquote { grid-column: 3 / 12; }
    .ab-quote-2 blockquote { grid-column: 5 / 13; text-align: right; }
    .ab-quote-2 blockquote::before { margin-left: auto; }
    .ab-quote-3 blockquote { grid-column: 1 / 10; }
    .ab-quote .ab-quote-aside { grid-column: 9 / 13; margin-top: 48px; }
    .ab-quote-3 .ab-quote-aside { grid-column: 9 / 13; }

    .ab-contact h2 { grid-column: 1 / 4; padding-top: 14px; }
    .ab-contact > :not(h2) { grid-column: 4 / 13; }
}

@media (max-width: 899px) {
    .ab-hero { padding-top: 64px; padding-bottom: 80px; }
    .ab-toc { margin-top: 40px; }
    .ab-hero-photo { margin-bottom: 40px; }
    .ab-sec { padding-bottom: 88px; }
    .ab-quote { padding-bottom: 88px; }
    .ab-quote-2 blockquote { text-align: right; }
    .ab-quote-2 blockquote::before { margin-left: auto; }
    .ab-quote-aside { margin-top: 32px; }
}

.ab-wide { padding: 0 0 136px; }
.ab-wide figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-wide img, .ab-hero-photo img { width: 100%; }
.ab-sec figcaption, .ab-wide figcaption { font-family: var(--text); font-style: italic; font-size: 14px; color: var(--muted); margin-top: 10px; }
.ab-sec-c .ab-sec-cols figure { break-inside: avoid; margin: 0 0 24px; }
@media (max-width: 899px) { .ab-wide { padding-bottom: 88px; } }

/* About: running text blocks */
.ab-text { padding: 0 0 112px; }
.ab-text p { margin: 0 0 26px; max-width: 640px; }
.ab-intro p + p { font-family: var(--serif); font-style: normal; font-size: clamp(28px, 3vw, 42px); color: var(--ink); }
.ab-contact p { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--ink); max-width: 820px; }
.ab-contact p a { white-space: nowrap; }
@media (min-width: 900px) {
    .ab-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; }
    .ab-text-1 > * { grid-column: 5 / 12; }
    .ab-text-2 > * { grid-column: 3 / 10; }
    .about2 .ab-hero-row:not(.has-photo) .ab-intro { grid-column: 5 / 13; }
}

/* About, compact: one calm reading column, title on the side */
.about-compact { padding-top: 72px; padding-bottom: 96px; }
.about-compact .ac-title {
    margin: 16px 0 40px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.about-compact .ac-main { max-width: 680px; }
.about-compact .ab-intro p {
    margin: 0 0 28px;
    font-family: var(--serif);
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.22;
    color: var(--ink);
}
.about-compact .ab-body { font-size: 21px; line-height: 1.65; }
.about-compact .ab-body p { margin: 0 0 20px; max-width: none; }
.about-compact .ab-text { display: block; padding: 0; }
.about-compact .ab-quote { display: block; padding: 0; margin: 36px 0; }
.about-compact .ab-quote blockquote {
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pink);
}
.about-compact .ab-quote blockquote::before { width: 40px; margin-bottom: 18px; }
.about-compact .ab-contact { display: block; margin-top: 44px; padding: 18px 0 0; }
.about-compact .ab-contact h2 { margin-bottom: 12px; }
.about-compact .ab-contact p { font-family: var(--text); font-size: 21px; line-height: 1.65; color: var(--body); max-width: none; }
.about-compact .ab-contact p:first-of-type a { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: 0; text-underline-offset: 4px; white-space: normal; }
@media (min-width: 900px) {
    .about-compact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; padding-top: 104px; }
    .about-compact .ac-head { grid-column: 1 / 5; position: sticky; top: 48px; align-self: start; }
    .about-compact .ac-main { grid-column: 5 / 12; padding-top: 34px; }
}
@media (max-width: 899px) {
    .about-compact .ab-body, .about-compact .ab-contact p { font-size: 19px; }
}

/* Portrait photos in posts: keep them from taking over the screen */
.gh-content > .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img { width: auto; max-width: 100%; max-height: min(78vh, 720px); }
.gh-content .kg-gallery-card figcaption { margin-top: 12px; }

/* Trip map: a drawn map of the route, with numbered stops */
.trip-map { display: grid; gap: 28px; margin: 72px 0; padding: 28px 0 8px; border-top: 1px solid var(--ink); }
.trip-map-head { display: flex; flex-direction: column; gap: 10px; }
.trip-map-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.trip-map-head p { margin: 0; font-family: var(--text); font-size: 17px; color: var(--muted); }
.trip-map svg { display: block; width: 100%; height: auto; max-width: 560px; }
.trip-map .tm-land { fill: var(--placeholder); stroke: var(--ink); stroke-width: 0.8; stroke-linejoin: round; }
.trip-map .tm-route { fill: none; stroke: var(--pink-line); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.trip-map .tm-dot circle { fill: var(--pink); stroke: var(--bg); stroke-width: 2; }
.trip-map .tm-dot text { fill: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.trip-map .tm-name { fill: var(--ink); font-family: var(--serif); font-style: italic; font-size: 30px; }
.trip-map .tm-small { fill: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.trip-map .tm-scale { stroke: var(--ink); stroke-width: 1; fill: none; }
.gh-content .trip-map ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gh-content .trip-map li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trip-map li .n { grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; color: var(--pink); }
.trip-map li b { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.trip-map li span.note { font-family: var(--text); font-size: 16px; line-height: 1.45; color: var(--soft); }
.gh-content .trip-map li a { font-family: var(--sans); font-size: 12px; color: var(--blue); text-decoration-color: var(--line); white-space: nowrap; }
@media (min-width: 900px) {
    .trip-map { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
    .trip-map-head { grid-column: 1 / -1; }
}