/* Share the City
   Palette taken from the Liverpool waterfront: the Mersey at dusk, the Portland
   stone of the Pier Head, and the red lettering of the city's street signs. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --stone: #f4f1ea;
    --stone-deep: #e8e2d5;
    --paper: #fbfaf6;
    --ink: #10151b;
    --ink-soft: #505a65;
    --mersey: #0c2036;
    --mersey-mid: #1b426b;
    --sign-red: #c0362c;
    --sign-red-dark: #9d281f;
    --line: rgba(16, 21, 27, 0.14);
    --line-light: rgba(255, 255, 255, 0.2);

    --sans: var(--gh-font-body, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: var(--gh-font-heading, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

    --gap: clamp(20px, 4vw, 48px);
    --wrap: 1240px;
    --measure: 700px;
}

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

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

body {
    margin: 0;
    background: var(--stone);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--sign-red); outline-offset: 3px; }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; }
.brand img { max-height: 40px; width: auto; }
.brand-mark { width: 11px; height: 11px; background: var(--sign-red); flex: none; }
.brand-name { white-space: nowrap; }

.site-nav ul { list-style: none; display: flex; gap: clamp(18px, 2.6vw, 36px); margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: 0.94rem; font-weight: 500; padding: 8px 0; position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--sign-red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.site-nav a:hover::after, .site-nav .nav-current a::after { transform: scaleX(1); }

.nav-toggle { display: none; background: none; border: 0; padding: 12px 0 12px 12px; color: inherit; cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before { display: block; width: 24px; height: 2px; background: currentColor; }
.nav-toggle-bars { position: relative; top: -4px; }
.nav-toggle-bars::before { content: ""; position: absolute; top: 8px; }

.has-hero .site-header { position: absolute; left: 0; right: 0; top: 0; color: #fff; border-bottom-color: var(--line-light); }

@media (max-width: 760px) {
    .nav-toggle { display: block; }
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--mersey); color: #fff; padding: 12px var(--gap) 24px; }
    .nav-open .site-nav { display: block; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav li + li { border-top: 1px solid var(--line-light); }
    .site-nav a { display: block; padding: 14px 0; font-size: 1.05rem; }
    .site-nav a::after { display: none; }
}

/* ---------- Buttons & small type ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; border: 1.5px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-primary { background: var(--sign-red); color: #fff; }
.btn-primary:hover { background: var(--sign-red-dark); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--mersey); border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--mersey-mid); }

.eyebrow, .kicker { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.2; color: var(--sign-red); letter-spacing: 0; text-decoration: none; }
.kicker { font-size: 1.06rem; display: inline-block; }

/* ---------- Hero ---------- */

.hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; color: #fff; background: var(--mersey); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 32, 54, 0.6) 0%, rgba(12, 32, 54, 0.28) 45%, rgba(12, 32, 54, 0) 75%), linear-gradient(180deg, rgba(12, 32, 54, 0.62) 0%, rgba(12, 32, 54, 0.1) 30%, rgba(12, 32, 54, 0.55) 62%, rgba(12, 32, 54, 0.94) 100%); }
.hero-inner { position: relative; padding-top: 140px; padding-bottom: clamp(44px, 8vh, 92px); }
.hero-title { font-size: clamp(2.7rem, 7.4vw, 6.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; max-width: 13ch; }
.hero-text { margin-top: 26px; max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- Sections ---------- */

.section { padding: clamp(56px, 9vw, 120px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head .eyebrow { grid-column: 1 / -1; }
.section-title { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; }
.section-more { font-size: 0.94rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sign-red); padding-bottom: 3px; white-space: nowrap; }
.section-more:hover { color: var(--sign-red); }

/* Tours */
.section-tours { background: var(--paper); }
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.tour { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mersey); color: #fff; text-decoration: none; }
.tour img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tour::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 32, 54, 0) 35%, rgba(12, 32, 54, 0.9) 100%); }
.tour:hover img { transform: scale(1.05); }
.tour-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2.2vw, 30px); display: block; }
.tour-number { display: block; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #f3d9c9; margin-bottom: 8px; }
.tour-title { display: block; font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
@media (max-width: 860px) {
    .tour-grid { grid-template-columns: 1fr; }
    .tour { aspect-ratio: 16 / 10; }
}

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4.4vw, 64px) clamp(20px, 2.6vw, 36px); }
.card-link { display: block; text-decoration: none; }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone-deep); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card-link:hover .card-media img { transform: scale(1.04); }
.card-placeholder { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 22px; background: var(--mersey); color: #f3d9c9; font-family: var(--serif); font-style: italic; font-size: 1.7rem; line-height: 1.05; }
.card-body { padding-top: 18px; }
.card-title { font-size: clamp(1.18rem, 1.5vw, 1.38rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; margin-top: 6px; transition: color 0.2s ease; }
.card-link:hover .card-title { color: var(--sign-red); }
.card-date { display: block; margin-top: 10px; font-size: 0.84rem; color: var(--ink-soft); }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.94rem; }
.pagination a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sign-red); padding-bottom: 3px; }
.pagination a:hover { color: var(--sign-red); }
.pagination .page-number { color: var(--ink-soft); margin: 0 auto; }

/* Call to action */
.cta { background: var(--mersey); color: #fff; padding: clamp(64px, 10vw, 130px) 0; }
.cta-kicker { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #f3d9c9; margin-bottom: 14px; }
.cta-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.035em; max-width: 17ch; margin-bottom: 36px; }

/* Archives & errors */
.archive-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 780px; }
.archive-title { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; margin-top: 8px; }
.archive-text { margin-top: 18px; font-size: 1.15rem; color: var(--ink-soft); }
.section-error .btn { margin-top: 32px; }

/* ---------- Article ---------- */

.article { padding: clamp(44px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); }
.article-header { max-width: calc(var(--measure) + 2 * var(--gap)); margin: 0 auto clamp(32px, 5vw, 56px); padding: 0 var(--gap); }
.article-title { font-size: clamp(2.2rem, 5.6vw, 4.3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin-top: 12px; }
.article-page .article-title { margin-top: 0; }
.article-lede { margin-top: 22px; font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.45; color: var(--ink-soft); max-width: 60ch; }
.article-meta { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-soft); display: flex; gap: 10px; }
.article-image { max-width: calc(1040px + 2 * var(--gap)); margin: 0 auto clamp(32px, 5vw, 56px); padding: 0 var(--gap); }
.article-image img { width: 100%; }

.gh-content { display: grid; grid-template-columns: [full-start] minmax(var(--gap), 1fr) [wide-start] minmax(0, 170px) [main-start] min(var(--measure), calc(100% - 2 * var(--gap))) [main-end] minmax(0, 170px) [wide-end] minmax(var(--gap), 1fr) [full-end]; font-size: 1.09rem; line-height: 1.72; }
.gh-content > * { grid-column: main; min-width: 0; margin: 0; }
.gh-content > * + * { margin-top: 1.35em; }
.gh-content > .kg-width-wide { grid-column: wide; }
.gh-content > .kg-width-full { grid-column: full; }
.gh-content > .kg-width-full img { width: 100%; }

.gh-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); font-weight: 750; letter-spacing: -0.03em; }
.gh-content h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-weight: 700; letter-spacing: -0.025em; }
.gh-content h4, .gh-content h5, .gh-content h6 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
.gh-content > h2, .gh-content > h3, .gh-content > h4 { margin-top: 2.1em; }
.gh-content > h2 + *, .gh-content > h3 + *, .gh-content > h4 + * { margin-top: 0.7em; }
.gh-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sign-red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gh-content a:hover { color: var(--sign-red); }
.gh-content strong, .gh-content b { font-weight: 650; }
.gh-content ul, .gh-content ol { padding-left: 1.25em; }
.gh-content li + li { margin-top: 0.45em; }
.gh-content li::marker { color: var(--sign-red); }
.gh-content blockquote { border-left: 2px solid var(--sign-red); padding: 2px 0 2px 22px; color: #2b333c; }
.gh-content blockquote p + p { margin-top: 0.9em; }
.gh-content hr { border: 0; border-top: 1px solid var(--line); margin-top: 3em; margin-bottom: 0.6em; width: 100%; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content > figure, .gh-content > .kg-card { margin-top: 2.1em; }
.gh-content > figure + *, .gh-content > .kg-card + * { margin-top: 2.1em; }
.gh-content .kg-image-card img { margin: 0 auto; }
.gh-content figcaption { margin-top: 12px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.gh-content figcaption a { color: inherit; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.gh-content th, .gh-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.gh-content pre { overflow-x: auto; padding: 18px; background: var(--ink); color: #f1f1f1; font-size: 0.9rem; }
.gh-content iframe, .gh-content video { max-width: 100%; }

.article-footer { max-width: calc(var(--measure) + 2 * var(--gap)); margin: clamp(40px, 6vw, 64px) auto 0; padding: 0 var(--gap); }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.tag-list a { display: block; padding: 6px 13px; border: 1px solid var(--line); font-size: 0.84rem; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.tag-list a:hover { border-color: var(--sign-red); color: var(--sign-red); }
.article-comments { max-width: calc(var(--measure) + 2 * var(--gap)); margin: 48px auto 0; padding: 0 var(--gap); }
.section-more-reading { background: var(--paper); border-top: 1px solid var(--line); }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #fff; padding: clamp(48px, 7vw, 84px) 0 28px; }
.site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; }
.footer-title { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.footer-tagline { margin-top: 10px; color: rgba(255, 255, 255, 0.66); max-width: 36ch; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-nav ul + ul { margin-top: 10px; }
.footer-nav a { text-decoration: none; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--sign-red); text-underline-offset: 4px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(36px, 6vw, 68px); padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}