/* =========================================================
   THE ART NEWBIE · design tokens + components (v2, theme v1)
   One stylesheet for every template. The design file, unchanged except the
   home column order; WordPress additions are at the end of the file.
   Flexbox only. No absolute/fixed (sticky header only). Every value is a token.
   ========================================================= */

:root {
  /* Colour */
  --color-paper: #FBF8F2;
  --color-cream: #F5EBD7;
  --color-ochre: #E2C47F;
  --color-blue: #3A5BD9;
  --color-blue-deep: #2A44AE;
  --color-travel: #C1300C; /* same contrast as the blue: 5.4:1 on paper, 4.8:1 on cream */
  --color-travel-soft: #F8E0D8;
  --color-blue-soft: #E2E7F8; /* the blue's twin of travel-soft, for boxes towards Art History */
  --color-ink: #1E0F0E;
  --color-ink-soft: #4A3B38;
  --color-muted: #6B5A55;
  --color-rule-soft: #DCD2C2;
  --color-white: #FFFFFF;
  --color-on-dark: #F5EBD7;
  --color-on-dark-muted: #CBBBAA;
  --color-rule-dark: #4A3B38;

  /* Families */
  --font-display: "DM Serif Display", "Georgia", serif;
  --font-text: "Newsreader", "Georgia", serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", sans-serif;

  /* Type scale (rem, 1rem = 16px). Body 18px, headings on a ~1.25 ratio */
  --text-xs: 0.75rem;      /* labels, meta */
  --text-sm: 0.875rem;     /* captions, excerpts */
  --text-base: 1.125rem;   /* body */
  --text-lead: 1.25rem;    /* standfirst */
  --text-h4: 1.25rem;      /* card titles */
  --text-h3: 1.5rem;       /* H3 */
  --text-h2: 2rem;         /* H2 */
  --text-h1: 2.75rem;      /* H1 on inner pages */
  --text-display: 3.25rem; /* H1 on Home only */

  --leading-heading: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --tracking-label: 0.08em;
  --tracking-heading: -0.01em;
  --weight-regular: 400;
  --weight-bold: 600;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: 5rem;
  --gutter: 3rem;

  /* Sizes */
  --container: 84rem;
  --measure: 42.5rem;
  --col-side: 26rem;
  --col-side-sm: 19rem;
  --card-min: 15rem;
  --period-min: 8.5rem;
  --strip-card: 12rem;
  --logo-header: 4.5rem;
  --logo-footer: 6.5rem;
  --icon: 1.25rem;
  --icon-lg: 1.625rem;
  --icon-stroke: 1.75;
  --dot: 0.5rem;
  --thumb: 5rem;
  --thumb-w: 7.5rem; /* 3:2 thumbnail, as tall as --thumb */
  --control-h: 3rem;
  --search-h: 4.25rem;
  --fact-min: 7.5rem;
  --title-max: 56rem;
  --rule-thin: 1px;
  --rule-mid: 2px;
  --rule-thick: 4px;
  --radius-pill: 999px;
  --ratio-card: 3 / 2;
  --ratio-portrait: 4 / 5;
  --ratio-square: 1 / 1;
  --w-full: 100%;
  --w-half: 45%;
  --sheet-offset: 3rem;
  --strip-offset: -0.75rem;
  --hero-max: 56rem;
  --strip-min: 13rem;
  --sign-w: 14rem;
  --star-badge: 2rem;
  --clamp-lines: 2;
  --duration-strip: 220ms;
  --duration-sheet: 320ms;
  --duration-hover: 150ms;
  --aside-img-min: 8rem;
  --focus-offset: 0.1875rem;
  --underline-offset: 0.18em;
  --target-min: 2.75rem;
}

@media (max-width: 1080px) {
  :root {
    --text-h2: 1.875rem;
    --text-h1: 2.375rem;
    --text-display: 2.75rem;
    --space-section: 4rem;
    --gutter: 2rem;
    --logo-header: 4rem;
    --card-min: 13.5rem;
  }
}

@media (max-width: 640px) {
  :root {
    --text-base: 1.0625rem;
    --text-lead: 1.125rem;
    --text-h4: 1.125rem;
    --text-h3: 1.3125rem;
    --text-h2: 1.625rem;
    --text-h1: 2rem;
    --text-display: 2.25rem;
    --space-section: 3rem;
    --gutter: 1.25rem;
    --logo-header: 3.25rem;
    --logo-footer: 5.25rem;
    --search-h: 3.5rem;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading-body); }
img { display: block; max-width: var(--w-full); height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Keyboard focus: always visible, same ring everywhere */
:focus-visible { outline: var(--rule-mid) solid var(--color-blue); outline-offset: var(--focus-offset); }
.site-footer :focus-visible { outline-color: var(--color-ochre); }
/* Skip link: first thing in the header, only visible when it gets keyboard focus */
.skip-link { display: flex; align-items: center; height: 0; overflow: hidden; padding-left: var(--gutter); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.skip-link:focus { height: auto; min-height: var(--target-min); outline-offset: calc(-1 * var(--focus-offset)); }

/* Hover on titles and text links: the colour stays, an underline appears */
.card-guide:hover .card-guide-title, .featured-item:hover .card-guide-title, .aside-card:hover .card-guide-title, .mini-card:hover .card-guide-title, .start-card:hover .card-guide-title, .pager-item:hover .card-guide-title, .prev-next-item:hover .card-guide-title, .period-card:hover .period-name, .faq-q:hover, .city-link:hover, .breadcrumb a:hover { text-decoration-line: underline; text-decoration-thickness: var(--rule-thin); text-underline-offset: var(--underline-offset); }

.page { display: flex; flex-direction: column; width: var(--w-full); background: var(--color-paper); }
/* the container owns the side gutter: never override its padding */
.container { display: flex; flex-direction: column; width: var(--w-full); max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { display: flex; flex-direction: column; padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-cream { background: var(--color-cream); }
.section-ruled { border-top: var(--rule-thin) solid var(--color-ink); }

/* ---------- Type roles ---------- */
.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
.display { font-size: var(--text-display); }
.lead { font-size: var(--text-lead); color: var(--color-ink-soft); max-width: var(--measure); }
.caption { font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-snug); }
.credit { display: block; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-1); }

.label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: var(--leading-snug); color: var(--color-ink); }
.label-dot { flex: none; width: var(--dot); height: var(--dot); border-radius: var(--radius-pill); background: var(--color-ink); }
.label-history { color: var(--color-blue); }
.label-history .label-dot { background: var(--color-blue); }
.label-travel { color: var(--color-travel); }
.label-travel .label-dot { background: var(--color-travel); }
.label-muted { color: var(--color-muted); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); }
.meta-sep { width: var(--space-3); height: var(--rule-thin); background: var(--color-muted); }

/* Section head: label + title (+ note) on the left, one link on the right */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: var(--rule-thin) solid var(--color-ink); }
.section-head-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.section-note { font-size: var(--text-sm); color: var(--color-ink-soft); max-width: var(--measure); }

/* ---------- Buttons + links ---------- */
.button-primary, .button-light { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-5); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); border: var(--rule-mid) solid var(--color-ink); cursor: pointer; transition: background var(--duration-hover), color var(--duration-hover); }
.button-primary { background: var(--color-ink); color: var(--color-paper); }
.button-primary:hover { background: var(--color-blue); border-color: var(--color-blue); }
.button-light { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; border-bottom: var(--rule-mid) solid currentColor; padding-bottom: var(--space-1); }
.link-arrow:hover { border-bottom-color: transparent; }
.icon { flex: none; width: var(--icon); height: var(--icon); }
.icon-lg { flex: none; width: var(--icon-lg); height: var(--icon-lg); }
/* line icons: stroke settings live here, not on every <svg> */
.icon, .icon-lg { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

.chip { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-4); border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--text-sm); background: var(--color-paper); cursor: pointer; white-space: nowrap; transition: background var(--duration-hover), color var(--duration-hover); }
.chip:hover { border-color: var(--color-blue); color: var(--color-blue); }
.chip.is-active { background: var(--color-ink); color: var(--color-paper); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Header ---------- */
.site-header { display: flex; flex-direction: column; background: var(--color-paper); position: sticky; top: 0; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-4); }
.brand-logo { width: var(--logo-header); height: var(--logo-header); }
.brand-descriptor { display: flex; flex-direction: column; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); line-height: var(--leading-snug); padding-left: var(--space-4); border-left: var(--rule-thin) solid var(--color-rule-soft); }
.nav-primary { display: flex; align-items: center; gap: var(--space-4); }
.nav-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); font-family: var(--font-display); font-size: var(--text-h4); border-bottom: var(--rule-mid) solid transparent; transition: color var(--duration-hover); }
.nav-link:hover { border-bottom-color: var(--color-ink); }
.nav-link.is-active { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.nav-link.is-active.is-travel { color: var(--color-travel); border-bottom-color: var(--color-travel); }
.nav-sep { width: var(--rule-thin); height: var(--space-5); background: var(--color-ink); }
.header-rule { height: var(--rule-mid); background: var(--color-ink); }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-direction: column; background: var(--color-ink); color: var(--color-on-dark); }
.footer-top { display: flex; flex-direction: row; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-7); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); flex: 0 1 var(--col-side); }
.footer-logo { width: var(--logo-footer); height: var(--logo-footer); }
.footer-about { font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.footer-col-title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ochre); padding-bottom: var(--space-2); border-bottom: var(--rule-thin) solid var(--color-rule-dark); }
.footer-link { font-size: var(--text-sm); color: var(--color-on-dark); }
.footer-link:hover { color: var(--color-ochre); }
.footer-news { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 var(--col-side); }
.footer-news-title { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-snug); }
.footer-form { display: flex; gap: var(--space-2); }
.field-dark { flex: 1 1 auto; min-width: 0; min-height: var(--control-h); padding: 0 var(--space-4); background: transparent; border: var(--rule-thin) solid var(--color-on-dark-muted); color: var(--color-on-dark); font-size: var(--text-sm); }
.footer-bottom { display: flex; flex-direction: row; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-5); padding-bottom: var(--space-5); border-top: var(--rule-thin) solid var(--color-rule-dark); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-on-dark-muted); }
.footer-legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.mockup-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-ochre); }

/* ---------- Guide card (the one card used everywhere) ---------- */
.card-row { display: flex; flex-wrap: wrap; gap: var(--space-7) var(--space-6); }
.card-guide { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 var(--card-min); min-width: 0; }
/* rows of four or more: four equal columns, the last line does not stretch */
.card-row:has(> .card-guide:nth-child(4)) > .card-guide { flex: 0 0 calc((var(--w-full) - 3 * var(--space-6)) / 4); }
.card-guide-media { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
.card-guide-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card-guide-title { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); }
.card-guide-excerpt { font-size: var(--text-sm); color: var(--color-ink-soft); }
.image-placeholder { display: flex; align-items: center; justify-content: center; padding: var(--space-4); width: var(--w-full); aspect-ratio: var(--ratio-portrait); background: var(--color-cream); border: var(--rule-thin) dashed var(--color-muted); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.card-guide .image-placeholder { aspect-ratio: var(--ratio-card); }

.search-form { display: flex; align-items: stretch; border: var(--rule-mid) solid var(--color-ink); background: var(--color-white); }
.search-label { display: flex; align-items: center; padding: 0 var(--space-4); color: var(--color-ink); }
.search-input { flex: 1 1 auto; min-width: 0; min-height: var(--search-h); border: 0; background: transparent; font-family: var(--font-text); font-size: var(--text-lead); padding: 0; }
.search-input:focus { outline: none; }
.search-form:focus-within { border-color: var(--color-blue); }
.search-button { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-6); border: 0; background: var(--color-blue); color: var(--color-white); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.search-button:hover { background: var(--color-blue-deep); }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Home · two doors ---------- */
.doors { display: flex; flex-direction: row; gap: var(--space-6); }
.door { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 0; min-width: 0; padding: var(--space-6); background: var(--color-paper); border-top: var(--rule-thick) solid var(--color-blue); }
.door.is-travel { border-top-color: var(--color-travel); }
.door-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }

/* ---------- Home · featured ---------- */
.featured-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
.featured-list { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; border-top: var(--rule-thin) solid var(--color-ink); }
.featured-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
.featured-num { flex: none; min-width: var(--space-6); font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-heading); color: var(--color-blue); }
.featured-item .card-guide-title { font-size: var(--text-lead); }

/* ---------- Hub intro (Learn / Visit / About) ---------- */
.hub-intro { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.jump-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }

/* ---------- Timeline with images (Learn) ---------- */
.period-row { display: flex; gap: var(--space-4); }
.period-card { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 var(--period-min); min-width: 0; }
.period-card-media { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
.period-card-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.period-num { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-blue); }
.period-name { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); }
.period-dates { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); }
.period-arrow { display: none; }
/* timeline arrow: one line under the photos, a dot per period, the arrowhead after the last */
.timeline .period-card { gap: 0; }
.timeline .period-card-body { position: relative; margin-top: var(--space-4); padding-top: var(--space-4); padding-right: var(--space-4); margin-right: calc(-1 * var(--space-4)); border-top: var(--rule-mid) solid var(--color-ink); }
.timeline .period-card:last-child .period-card-body { margin-right: 0; padding-right: 0; }
.timeline .period-card-body::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-blue); }
.timeline .period-card:last-child .period-card-body::after { content: ""; position: absolute; top: -7px; right: -2px; border-left: 12px solid var(--color-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.timeline .period-dates { color: var(--color-blue); font-weight: var(--weight-bold); }

/* ---------- About ---------- */
.contact-wrap { display: flex; flex-direction: row; gap: var(--space-8); }
.contact-intro { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 0; min-width: 0; }
.form-mockup { display: flex; flex-direction: column; gap: var(--space-5); flex: 1.4 1 0; min-width: 0; padding: var(--space-6); background: var(--color-paper); border: var(--rule-mid) dashed var(--color-ink); }
.form-badge { align-self: flex-start; padding: var(--space-1) var(--space-3); background: var(--color-ochre); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.form-row { display: flex; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.form-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.form-input { min-height: var(--control-h); padding: 0 var(--space-4); border: var(--rule-thin) solid var(--color-ink); background: var(--color-white); font-size: var(--text-base); }
.form-textarea { min-height: calc(var(--control-h) * 3); padding: var(--space-3) var(--space-4); border: var(--rule-thin) solid var(--color-ink); background: var(--color-white); font-size: var(--text-base); resize: vertical; }
.form-help { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Search page (slides up from the bottom on arrival) ---------- */
@keyframes sheet-up { from { transform: translateY(var(--sheet-offset)); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-sheet { display: flex; flex-direction: column; animation: sheet-up var(--duration-sheet) ease-out both; }
@media (prefers-reduced-motion: reduce) { .search-sheet { animation: none; } }
.search-top { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-7); padding-bottom: var(--space-6); }
.empty-state { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0; }

/* ---------- Guide template ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-muted); }
.breadcrumb-sep { width: var(--space-3); height: var(--rule-thin); background: var(--color-muted); }
.guide-head { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; padding-top: var(--space-7); padding-bottom: var(--space-6); }
.guide-head .h1 { max-width: var(--title-max); }
.guide-head .lead { text-align: center; }
.byline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; font-family: var(--font-ui); font-size: var(--text-sm); }
.byline-name { font-weight: var(--weight-bold); }
.guide-hero { display: flex; flex-direction: column; gap: var(--space-2); width: var(--w-full); max-width: var(--hero-max); margin: 0 auto; padding-bottom: var(--space-7); }
.guide-hero-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
/* the reading column: centred, with empty bands either side */
.guide-column { display: flex; flex-direction: column; gap: var(--space-5); width: var(--w-full); max-width: var(--measure); margin: 0 auto; padding-bottom: var(--space-section); }
/* Reading column plus a side column for Journey's ads. The side column is never sticky, 19rem (304px) wide with no padding (Journey needs at least 300px) and as tall as the article so its sticky ad can travel. A thin rule in the gap separates it from the text. Do not add ad code here; Journey places the ads itself. */
:root { --guide-gap: var(--space-8); }
.guide-layout { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: var(--guide-gap); width: var(--w-full); }
.guide-layout > .guide-column { flex: 0 1 var(--measure); min-width: 0; margin: 0; }
.guide-sidebar { position: relative; display: flex; flex-direction: column; flex: 0 0 var(--col-side-sm); width: var(--col-side-sm); padding-bottom: var(--space-section); }
.guide-sidebar::before { content: ""; position: absolute; top: 0; bottom: var(--space-section); left: calc(var(--guide-gap) / -2); border-left: var(--rule-thin) solid var(--color-rule-soft); }
/* optional list of guides above Journey's ads (off by default, see single.php) */
.guide-side-related { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-5); }
.guide-side-related .aside-card { flex: none; }
/* on articles the photo is as wide as reading column + gap + side column, so the edges line up */
.single-post .guide-hero { max-width: calc(var(--measure) + var(--guide-gap) + var(--col-side-sm)); }
@media (max-width: 1280px) { :root { --guide-gap: var(--space-7); } }
@media (max-width: 980px) { .guide-sidebar { display: none; } .single-post .guide-hero { max-width: var(--hero-max); } }
.toc { display: flex; flex-direction: column; border-top: var(--rule-mid) solid var(--color-ink); border-bottom: var(--rule-thin) solid var(--color-ink); padding: var(--space-3) 0; }
.toc-title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; padding-bottom: var(--space-2); }
.toc-link { display: flex; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-base); color: var(--color-ink); transition: color var(--duration-hover); }
.toc-link:hover { color: var(--color-blue); }
.toc-num { flex: none; min-width: var(--space-5); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); padding-top: var(--space-1); }
.guide-h2 { font-size: var(--text-h2); padding-top: var(--space-5); }
.short-answer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-cream); border-top: var(--rule-thick) solid var(--color-blue); }
.pull-quote { display: flex; padding: var(--space-5) 0; border-top: var(--rule-mid) solid var(--color-ink); border-bottom: var(--rule-mid) solid var(--color-ink); }
.pull-quote-text { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-snug); font-style: italic; }
.figure { display: flex; flex-direction: column; gap: var(--space-2); }
.figure-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
.term { font-weight: var(--weight-bold); }
.facts-box { display: flex; flex-direction: column; padding: var(--space-5); background: var(--color-cream); }
.fact-line { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
.fact-line .fact-label { flex: 0 0 var(--fact-min); }
.fact-label { flex: none; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); padding-top: var(--space-1); }
.fact-value { font-size: var(--text-sm); }
.visit-box { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-5); background: var(--color-travel-soft); border-top: var(--rule-thick) solid var(--color-travel); }
.visit-box.is-history { background: var(--color-blue-soft); border-top-color: var(--color-blue); }
.visit-box:hover .card-guide-title { text-decoration-line: underline; text-decoration-thickness: var(--rule-thin); text-underline-offset: var(--underline-offset); }
.visit-box-img { flex: none; width: 12rem; height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; }
.visit-box-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.prev-next { display: flex; flex-direction: row; gap: var(--space-5); }
.prev-next-item { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; padding-top: var(--space-4); border-top: var(--rule-mid) solid var(--color-ink); }
.prev-next-item.is-next { text-align: right; align-items: flex-end; }

/* ---------- Header search strip (opens under the menu, pushes the page down) ---------- */
button.nav-link { background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; cursor: pointer; }
@keyframes strip-in { from { transform: translateY(var(--strip-offset)); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-strip { display: flex; background: var(--color-cream); border-bottom: var(--rule-thin) solid var(--color-ink); animation: strip-in var(--duration-strip) ease-out both; }
@media (prefers-reduced-motion: reduce) { .search-strip { animation: none; } }
.search-strip-inner { gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.search-strip-row { display: flex; align-items: center; gap: var(--space-3); }
.search-strip-row .search-form { flex: 1 1 auto; min-width: 0; }
.close-button { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-3); background: none; border: 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.close-button:hover { color: var(--color-blue); }

/* ---------- Home · front page (three columns) ---------- */
.front { display: flex; flex-direction: column; padding-top: var(--space-6); padding-bottom: var(--space-section); }
.front-cols { display: flex; flex-direction: row; align-items: stretch; }
/* The introduction comes first in the HTML (reading and focus order); on desktop the featured list is placed on its left */
.front-side { order: 1; display: flex; flex-direction: column; gap: var(--space-3); flex: 0 0 var(--col-side-sm); padding-right: var(--space-6); border-right: var(--rule-thin) solid var(--color-rule-soft); }
.front-main { order: 2; display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 auto; min-width: 0; padding-left: var(--space-7); padding-right: var(--space-7); }
.front-aside { order: 3; display: flex; flex-direction: column; gap: var(--space-5); flex: 0 0 var(--col-side-sm); padding-left: var(--space-6); border-left: var(--rule-thin) solid var(--color-rule-soft); }
.front-strip { display: flex; flex-direction: row; gap: var(--space-3); flex: 1 1 auto; min-height: var(--strip-min); }
.front-strip-img { flex: 1 1 0; min-width: 0; align-self: stretch; object-fit: cover; }
.aside-card { display: flex; flex-direction: column; gap: var(--space-2); }
.aside-card-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
/* card previews stay 3:2 everywhere, also in the home side column */
.front-aside .aside-card { flex: none; }
.front-aside .aside-card-img { flex: none; min-height: 0; aspect-ratio: var(--ratio-card); }
.pick-icon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-ochre); }

/* ---------- Newsletter band ---------- */
.newsletter-band { display: flex; flex-direction: row; align-items: center; gap: var(--space-7); }
.newsletter-text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.newsletter-row { display: flex; flex-direction: row; gap: var(--space-2); }
.newsletter-row .form-input { flex: 1 1 auto; min-width: 0; }

/* ---------- Home · section cards: big section name + most read ---------- */
.door-title { font-size: var(--text-h1); line-height: var(--leading-heading); }
.door-tagline { font-family: var(--font-display); font-size: var(--text-lead); font-style: italic; color: var(--color-ink-soft); }
.mini-list { display: flex; flex-direction: column; border-top: var(--rule-mid) solid var(--color-ink); }
.mini-list-title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; padding-top: var(--space-3); padding-bottom: var(--space-2); }
.mini-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--rule-thin) solid var(--color-rule-soft); }
.mini-card-img { flex: none; width: var(--thumb-w); height: auto; aspect-ratio: var(--ratio-card); object-fit: cover; }

/* ---------- Section colours: Art History = blue, Art Travel = vermilion ---------- */
.inline-history { color: var(--color-blue); border-bottom: var(--rule-thin) solid var(--color-blue); }
.inline-travel { color: var(--color-travel); border-bottom: var(--rule-thin) solid var(--color-travel); }
.door-title.is-history { color: var(--color-blue); }
.door-title.is-travel { color: var(--color-travel); }
.door .button-row { margin-top: auto; }
.mini-card .card-guide-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-lines); overflow: hidden; }

/* ---------- Featured star, sitting on the image corner (no absolute positioning) ---------- */
.card-star { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; align-self: flex-end; width: var(--star-badge); height: var(--star-badge); margin-top: var(--space-2); margin-right: var(--space-2); margin-bottom: calc(-1 * (var(--star-badge) + var(--space-2) + var(--space-3))); background: var(--color-paper); border-radius: var(--radius-pill); color: var(--color-ochre); }
.card-star .pick-icon { width: var(--icon); height: var(--icon); }
.featured-lead { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }

/* ---------- Hub pages (period and city) ---------- */
.hub-head { display: flex; flex-direction: row; gap: var(--space-8); align-items: center; padding-top: var(--space-6); padding-bottom: var(--space-7); }
.hub-head-text { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 0; min-width: 0; }
.hub-head-media { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.hub-head-img { width: var(--w-full); aspect-ratio: var(--ratio-card); object-fit: cover; }
.facts-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-4); border-top: var(--rule-thin) solid var(--color-ink); }
.fact { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 var(--fact-min); min-width: 0; }
.fact-big { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); }
.start-card { display: flex; flex-direction: row; gap: var(--space-6); align-items: center; padding: var(--space-5); background: var(--color-cream); border-top: var(--rule-thick) solid var(--color-blue); }
.start-card.is-travel { border-top-color: var(--color-travel); }
.start-card-img { flex: 1 1 0; min-width: 0; aspect-ratio: var(--ratio-card); object-fit: cover; }
.start-card-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 0; min-width: 0; }
.pager { display: flex; flex-direction: row; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-5); border-top: var(--rule-mid) solid var(--color-ink); }
.pager-item { display: flex; flex-direction: column; gap: var(--space-1); }
.pager-item.is-next { align-items: flex-end; text-align: right; }

.chip-row + .card-row { margin-top: var(--space-6); }

/* ---------- Art Travel: the city leads ---------- */
.city-name { font-size: var(--text-h1); color: var(--color-travel); }
/* row of cities on Art Travel, like the timeline without the arrow: five per line */
.city-row { flex-wrap: wrap; row-gap: var(--space-5); }
.city-row .period-card { flex: 0 0 calc((var(--w-full) - 4 * var(--space-4)) / 5); }
.city-row .period-dates { color: var(--color-travel); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
/* introduction of a period or city: the first thing to read, set like a pull quote */
.hub-head .lead { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--color-ink); padding-top: var(--space-4); border-top: var(--rule-thin) solid var(--color-ink); }
.city-groups { display: flex; flex-direction: row; gap: var(--space-5); padding-top: var(--space-3); border-top: var(--rule-thin) solid var(--color-rule-soft); }
.city-group { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.city-link { font-size: var(--text-sm); line-height: var(--leading-snug); }

/* ---------- Search field: clear inside, quiet ---------- */
.clear-button { display: flex; align-items: center; justify-content: center; flex: none; width: var(--control-h); background: none; border: 0; color: var(--color-muted); cursor: pointer; }
.clear-button:hover { color: var(--color-ink); }

/* ---------- Guide body ---------- */
.entry-content { display: flex; flex-direction: column; gap: var(--space-5); }
/* Ads: Journey by Mediavine injects its own units inside .entry-content.
   Keep .entry-content a flat list of p, h2, h3, figure, blockquote, ul (no wrappers),
   so the script can count paragraphs and place units between them.
   Boxes that must never be split (TOC, short answer, facts, visit box) live OUTSIDE .entry-content.
   The rule below only gives injected units breathing room; confirm the wrapper class with Mediavine. */
.entry-content > [class*="mv-ad"] { margin-top: var(--space-6); margin-bottom: var(--space-6); }

/* ---------- Footer links (no group titles) ---------- */
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; }

/* ---------- About ---------- */
.profile-head { display: flex; flex-direction: row; gap: var(--space-8); align-items: center; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.profile-text { display: flex; flex-direction: column; gap: var(--space-4); flex: 1.2 1 0; min-width: 0; }
.profile-media { display: flex; flex: 0 1 var(--col-side); min-width: 0; }
.profile-img { width: var(--w-full); aspect-ratio: var(--ratio-portrait); object-fit: cover; }
.signature { width: var(--sign-w); }
.faq { display: flex; flex-direction: column; border-top: var(--rule-mid) solid var(--color-ink); }
.faq-item { border-bottom: var(--rule-thin) solid var(--color-rule-soft); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.faq-q { font-family: var(--font-display); font-size: var(--text-h4); cursor: pointer; }
.faq-a { padding-top: var(--space-3); color: var(--color-ink-soft); }
.social-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- 404 = coming soon (one status page) ---------- */
.status-page { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding-top: var(--space-8); padding-bottom: var(--space-7); }
.status-page .lead { text-align: center; }
.status-search { width: var(--w-full); max-width: var(--measure); }
.status-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* =========================================================
   TABLET · 1080px and below
   ========================================================= */
@media (max-width: 1080px) {
  .brand-descriptor { display: none; }
  .profile-head { flex-direction: column-reverse; align-items: stretch; gap: var(--space-5); }
  .profile-media { flex: none; max-width: var(--col-side); }

  .front-cols { align-items: flex-start; flex-wrap: wrap; }
  .front-aside .aside-card { flex: none; }
  .front-aside .aside-card-img { flex: none; min-height: 0; aspect-ratio: var(--ratio-card); }
  .front-strip { flex: none; min-height: 0; }
  .front-strip-img { aspect-ratio: var(--ratio-portrait); align-self: auto; }

  /* the introduction first, the photo after it */
  .hub-head { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .city-row { flex-wrap: nowrap; }
  .city-row .period-card { flex: 0 0 var(--strip-card); }
  .start-card { flex-direction: column; align-items: stretch; }
  .start-card-img { flex: none; width: var(--w-full); }

  .front-main { order: 1; flex: 1 1 var(--w-full); padding: 0 0 var(--space-7); }
  .front-side { order: 2; flex: 1 1 0; padding-top: var(--space-6); border-top: var(--rule-thin) solid var(--color-ink); }
  .front-aside { order: 3; flex: 1 1 0; padding-top: var(--space-6); border-top: var(--rule-thin) solid var(--color-ink); }
  .newsletter-band { flex-direction: column; align-items: stretch; gap: var(--space-5); }

  .period-row { overflow-x: auto; padding-bottom: var(--space-3); }
  .period-card { flex: 0 0 var(--strip-card); }
  .contact-wrap { flex-direction: column; gap: var(--space-6); }
  .footer-top { flex-wrap: wrap; gap: var(--space-7); }
  .footer-brand { flex: 1 1 var(--w-full); flex-direction: row; align-items: center; }
  .footer-news { flex: 1 1 var(--w-full); }
  /* rows of four or more cards go two by two, so no card is left alone at full width */
  .card-row:has(> .card-guide:nth-child(4)) > .card-guide { flex: 0 0 calc((var(--w-full) - var(--space-6)) / 2); }
}

/* =========================================================
   MOBILE · 640px and below · laid out on purpose
   ========================================================= */
@media (max-width: 640px) {
  .card-row-list .card-star { display: none; }
  .city-groups { flex-direction: column; gap: var(--space-4); }
  .period-row.city-row { border-top: 0; }
  .city-row .period-card { flex: none; }
  .pager { flex-direction: column; }
  .pager-item.is-next { align-items: flex-start; text-align: left; }
  .status-page { padding-top: var(--space-7); }

  .front-main { padding-bottom: var(--space-6); }
  .front-aside, .front-side { flex: 1 1 var(--w-full); padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; }
  .front-strip-img:last-child { display: none; }
  .newsletter-row { flex-direction: column; }
  .search-strip-row { flex-direction: column-reverse; align-items: stretch; }
  .close-button { align-self: flex-end; }

  .header-row { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: 0; }
  .brand { justify-content: center; }
  .nav-primary { justify-content: space-between; gap: 0; border-top: var(--rule-thin) solid var(--color-ink); }
  .nav-link { flex: 1 1 auto; justify-content: center; font-size: var(--text-base); white-space: nowrap; }
  .nav-sep { height: var(--space-4); }

  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .search-form { flex-wrap: wrap; }
  .search-label { padding: 0 var(--space-3); }
  .search-button { flex: 1 1 var(--w-full); justify-content: center; min-height: var(--control-h); }
  .suggest { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .doors { flex-direction: column; gap: var(--space-5); }
  .door { padding: var(--space-5) 0 0; background: transparent; }

  .period-row { flex-direction: column; overflow: visible; gap: 0; border-top: var(--rule-thin) solid var(--color-ink); padding-bottom: 0; }
  .period-card { flex: none; flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
  .period-card-media { flex: none; width: var(--thumb-w); aspect-ratio: var(--ratio-card); }
  .period-arrow { display: flex; }
  /* the timeline arrow turns vertical */
  .timeline { position: relative; border-top: 0; border-left: var(--rule-mid) solid var(--color-ink); margin-left: 5px; padding-left: var(--space-4); }
  .timeline::after { content: ""; position: absolute; bottom: -12px; left: -7px; border-top: 12px solid var(--color-ink); border-left: 6px solid transparent; border-right: 6px solid transparent; }
  .timeline .period-card { position: relative; gap: var(--space-4); }
  .timeline .period-card::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--space-4) - 6px); width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--color-blue); }
  .timeline .period-card-body, .timeline .period-card:last-child .period-card-body { margin: 0; padding: 0; border-top: 0; }
  .timeline .period-card-body::before, .timeline .period-card:last-child .period-card-body::after { display: none; }

  /* card lists become compact rows on phones */
  .card-row-list { flex-direction: column; gap: 0; border-top: var(--rule-thin) solid var(--color-ink); }
  .card-row-list .card-guide, .card-row-list:has(> .card-guide:nth-child(4)) > .card-guide { flex: none; flex-direction: row; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
  .card-row-list .card-guide-media, .card-row-list .image-placeholder { flex: none; width: var(--thumb-w); aspect-ratio: var(--ratio-card); }
  .card-row-list .card-guide-excerpt { display: none; }

  .form-row { flex-direction: column; }
  .form-mockup { padding: var(--space-5); }

  .guide-head { text-align: left; align-items: flex-start; padding-top: var(--space-5); }
  .guide-head .lead { text-align: left; }
  .byline { justify-content: flex-start; }
  .guide-hero { padding-bottom: var(--space-5); }
  .fact-line { flex-direction: column; gap: var(--space-1); }
  .entry-content dl.facts { grid-template-columns: 1fr; padding: var(--space-2) var(--space-4); }
  .entry-content dl.facts dt { border-bottom: 0; padding-bottom: 0; }
  .fact-line .fact-label { flex: none; }
  .visit-box { flex-direction: column; align-items: flex-start; }
  .prev-next { flex-direction: column; gap: var(--space-4); }
  .prev-next-item.is-next { text-align: left; align-items: flex-start; }

  .footer-brand { flex-direction: column; align-items: flex-start; }
  .footer-form { flex-direction: column; }
  .footer-bottom { flex-direction: column; }

  /* touch targets: at least 44px tall on phones, without changing how the links look */
  .link-arrow { min-height: var(--target-min); align-items: flex-end; }
  .city-group { gap: 0; }
  .city-link, .footer-links .footer-link, .footer-legal a, .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); }
  .footer-links { gap: 0; }
  .footer-legal { flex-direction: column; gap: 0; }
}

/* =========================================================
   WORDPRESS THEME ADDITIONS
   Everything below exists because the design became a real theme:
   accessibility fixes from the audit, WordPress markup, empty states.
   ========================================================= */

/* ---------- Accessibility ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The sticky header stays above cards and badges; the WordPress admin bar sits above it */
.site-header { z-index: 50; }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
/* Anchors (table of contents, jump links) land below the sticky header */
[id] { scroll-margin-top: calc(var(--logo-header) + var(--space-8)); }
/* [hidden] must win over the display rules of the components */
.search-strip[hidden], .clear-button[hidden] { display: none; }
/* Chips used as links show the current filter */
a.chip[aria-current] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Image slots without a photo yet: a quiet cream block of the same shape ---------- */
.is-empty { display: block; background: var(--color-cream); }
.card-guide-media.is-empty, .featured-img.is-empty, .start-card-img.is-empty, .city-img.is-empty, .door-img.is-empty { aspect-ratio: var(--ratio-card); }
.period-card-media.is-empty { aspect-ratio: var(--ratio-card); }
.aside-card-img.is-empty { aspect-ratio: var(--ratio-card); }
.mini-card-img.is-empty, .visit-box-img.is-empty { aspect-ratio: var(--ratio-card); }

/* ---------- Photos: one master, other versions made by WordPress ---------- */
/* <picture> (no longer output by the theme: card previews are 3:2 everywhere); layout stays on the <img> */
.tan-picture { display: contents; }
/* Photos in the text keep their own proportions: never cropped, only scaled to the column */
.entry-content .wp-block-image img { width: var(--w-full); height: auto; }
/* Vertical figure, only when the subject needs it: narrower than the column */
.entry-content .is-style-tan-vertical { align-self: center; width: var(--w-full); max-width: 30rem; }
/* Full container width (static pages): wider than the text column, centred on it */
.entry-content > .alignwide, .entry-content > .alignfull { align-self: center; width: calc(100vw - 2 * var(--gutter) - 1rem); min-width: var(--w-full); max-width: calc(var(--container) - 2 * var(--gutter)); }

/* ---------- Home: the three photos are links to their guides ---------- */
.front-strip a.front-strip-img { display: block; overflow: hidden; }
.front-strip a.front-strip-img img { width: var(--w-full); height: var(--w-full); object-fit: cover; }

/* ---------- Card titles are headings (h3) inside sections ---------- */
h3.card-guide-title, h4.card-guide-title { font-size: var(--text-h4); line-height: var(--leading-snug); }
.start-card .card-guide-title.h3 { font-size: var(--text-h3); }

/* ---------- Guide ---------- */
.short-answer.is-travel { border-top-color: var(--color-travel); }
.short-answer p + p { margin-top: var(--space-3); }
.facts-list, dl.facts-row { margin: 0; }
.facts-list { display: flex; flex-direction: column; padding-top: var(--space-3); }
.facts-list dd, .facts-row dd { margin: 0; }
/* practical facts in an Art Travel guide (Ticket, Booking, Hours…): same look as the facts box */
.entry-content dl.facts { display: grid; grid-template-columns: var(--fact-min) 1fr; margin: 0; padding: var(--space-2) var(--space-5); background: var(--color-cream); border-top: var(--rule-thick) solid var(--color-travel); }
.entry-content dl.facts dt, .entry-content dl.facts dd { margin: 0; padding: var(--space-3) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
.entry-content dl.facts dt { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); padding-top: calc(var(--space-3) + var(--space-1)); }
.entry-content dl.facts dd { font-size: var(--text-sm); }
.entry-content dl.facts dt:last-of-type, .entry-content dl.facts dd:last-of-type { border-bottom: 0; }

/* Body of a guide: core blocks in the design's style */
.entry-content > h2 { font-size: var(--text-h2); padding-top: var(--space-5); }
.entry-content > h3 { font-size: var(--text-h3); line-height: var(--leading-snug); padding-top: var(--space-3); }
.entry-content a:not([class]) { color: var(--color-blue); text-decoration: underline; text-decoration-thickness: var(--rule-thin); text-underline-offset: var(--underline-offset); }
.entry-content a:not([class]):hover { color: var(--color-blue-deep); }
.entry-content strong, .entry-content b { font-weight: var(--weight-bold); }
.entry-content ul, .entry-content ol { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li::marker { color: var(--color-muted); }
.entry-content blockquote { margin: 0; padding-left: var(--space-5); border-left: var(--rule-thick) solid var(--color-ochre); font-style: italic; }
.entry-content cite { display: block; padding-top: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-style: normal; color: var(--color-muted); }
.entry-content .wp-block-pullquote { margin: 0; padding: var(--space-5) 0; border: 0; border-top: var(--rule-mid) solid var(--color-ink); border-bottom: var(--rule-mid) solid var(--color-ink); text-align: left; }
.entry-content .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.entry-content .wp-block-pullquote p { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-snug); font-style: italic; }
.entry-content figure, .entry-content .wp-block-image { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.entry-content figure img { width: var(--w-full); height: auto; }
.entry-content figcaption, .entry-content .wp-element-caption { margin: 0; font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-snug); text-align: left; }
.entry-content hr { width: var(--w-full); border: 0; border-top: var(--rule-thin) solid var(--color-rule-soft); }
.entry-content table { width: var(--w-full); border-collapse: collapse; font-size: var(--text-sm); }
.entry-content th, .entry-content td { padding: var(--space-2) var(--space-3); border-bottom: var(--rule-thin) solid var(--color-rule-soft); text-align: left; vertical-align: top; }
.entry-content th { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.entry-content .wp-block-embed, .entry-content .wp-block-embed__wrapper { margin: 0; }
.entry-content iframe { max-width: var(--w-full); }
/* FAQ written with Details blocks (About) */
.entry-content details { padding: var(--space-4) 0; border-bottom: var(--rule-thin) solid var(--color-rule-soft); }
.entry-content details:first-of-type { border-top: var(--rule-mid) solid var(--color-ink); }
.entry-content summary { font-family: var(--font-display); font-size: var(--text-h4); cursor: pointer; }
.entry-content summary:hover { text-decoration-line: underline; text-decoration-thickness: var(--rule-thin); text-underline-offset: var(--underline-offset); }
.entry-content details > :not(summary) { padding-top: var(--space-3); color: var(--color-ink-soft); }
/* Forms written in the editor (contact form on About) */
.entry-content input[type="text"], .entry-content input[type="email"], .entry-content input[type="url"], .entry-content input[type="tel"], .entry-content select, .entry-content textarea { width: var(--w-full); min-height: var(--control-h); padding: 0 var(--space-4); border: var(--rule-thin) solid var(--color-ink); border-radius: 0; background: var(--color-white); font-size: var(--text-base); }
.entry-content textarea { min-height: calc(var(--control-h) * 3); padding: var(--space-3) var(--space-4); }
.entry-content label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.entry-content button[type="submit"], .entry-content .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-5); border: var(--rule-mid) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.entry-content button[type="submit"]:hover, .entry-content .wp-block-button__link:hover { background: var(--color-blue); border-color: var(--color-blue); }

/* ---------- Cards inside the text: Read also, small list, grid ---------- */
/* Read also / Plan your visit: one visit-box per guide (blue towards History, red towards Travel) */
.read-also { display: flex; flex-direction: column; gap: var(--space-4); }
/* links in the text of a guide are bold, so they stand out when you scan */
.entry-content p a, .entry-content li a, .entry-content dd a { font-weight: var(--weight-bold); }
.tan-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.tan-cards-title { padding-bottom: var(--space-2); border-bottom: var(--rule-thin) solid var(--color-ink); }
.tan-cards-empty { padding: var(--space-4); border: var(--rule-thin) dashed var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Lists: pagination and empty states ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-7); font-family: var(--font-ui); font-size: var(--text-sm); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h); min-height: var(--control-h); padding: 0 var(--space-3); border: var(--rule-thin) solid var(--color-ink); }
.pagination .page-numbers.current { background: var(--color-ink); color: var(--color-paper); }
.pagination .page-numbers.dots { border-color: transparent; }
.pagination a.page-numbers:hover { color: var(--color-blue); border-color: var(--color-blue); }
.chip-row + .empty-state { margin-top: var(--space-6); }

/* ---------- Newsletter (Jetpack Subscriptions form in the design's style) ---------- */
.tan-newsletter form { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.tan-newsletter p { margin: 0; }
.tan-newsletter .wp-block-jetpack-subscriptions__form-elements { display: flex; flex-direction: row; gap: var(--space-2); }
.tan-newsletter input[type="email"] { flex: 1 1 auto; min-width: 0; width: var(--w-full); min-height: var(--control-h); margin: 0; padding: 0 var(--space-4) !important; border: var(--rule-thin) solid var(--color-ink) !important; border-radius: 0 !important; background: var(--color-white) !important; color: var(--color-ink) !important; font-family: var(--font-text) !important; font-size: var(--text-base) !important; }
.tan-newsletter button { min-height: var(--control-h); margin: 0 !important; padding: 0 var(--space-5) !important; border: var(--rule-mid) solid var(--color-ink) !important; border-radius: 0 !important; background: var(--color-ink) !important; color: var(--color-paper) !important; font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; font-weight: var(--weight-bold) !important; cursor: pointer; }
.tan-newsletter button:hover { background: var(--color-blue) !important; border-color: var(--color-blue) !important; }
.site-footer .tan-newsletter input[type="email"] { background: transparent !important; border-color: var(--color-on-dark-muted) !important; color: var(--color-on-dark) !important; }
.site-footer .tan-newsletter button { background: var(--color-paper) !important; border-color: var(--color-paper) !important; color: var(--color-ink) !important; }
@media (max-width: 640px) { .tan-newsletter .wp-block-jetpack-subscriptions__form-elements { flex-direction: column; } }

/* ---------- Image credits page ---------- */
.credits-table-wrap { overflow-x: auto; }
.credits-table { width: var(--w-full); border-collapse: collapse; font-size: var(--text-sm); }
.credits-table th, .credits-table td { padding: var(--space-3); border-bottom: var(--rule-thin) solid var(--color-rule-soft); text-align: left; vertical-align: middle; }
.credits-table th { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.credits-table .credit { padding-top: 0; font-size: var(--text-sm); }
.credits-table a { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.credits-thumb { width: var(--thumb); height: var(--thumb); object-fit: cover; }
.credit a { text-decoration: underline; text-underline-offset: var(--underline-offset); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  /* long link labels may wrap instead of pushing the page sideways */
  .link-arrow { white-space: normal; }
}