/* =================================================================
   BELLE VUE TO TULLIE — A HISTORICAL WALKING ROUTE
   Stylesheet
   -----------------------------------------------------------------
   Built for Belle Vue Primary School & Tullie Museum, Carlisle.
   
   The palette draws on Carlisle's heritage: red sandstone of the
   city walls and cathedral, slate from the Cumbrian fells, the
   cream of old paper and parchment, and Solway-mist blue.
   
   You can change colours, fonts and spacing in the :root section
   below — every other style refers back to these variables.
   ================================================================= */

/* ----------------------------- 
   1. DESIGN TOKENS
   You can edit these values to change the whole site at once.
   ----------------------------- */
:root {
  /* Carlisle heritage palette */
  --sandstone:        #B5532A;   /* Carlisle red sandstone */
  --sandstone-deep:   #8C3D1F;   /* Cathedral-stone shadow */
  --sandstone-pale:   #E8D4C0;   /* Weathered sandstone wash */
  --slate:            #3D4A52;   /* Cumbrian slate */
  --slate-soft:       #6B7780;   /* Misted slate */
  --parchment:        #F7F0E3;   /* Old paper / cream background */
  --parchment-deep:   #EDE3CE;   /* Old paper, darker */
  --ink:              #2A2520;   /* Body text — warm near-black */
  --solway:           #4A6878;   /* Solway-mist blue accent */
  --moss:             #5A6B3A;   /* Engine Lonning green */
  --gold:             #B8932B;   /* Royal Warrant gold */

  /* Typography */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", cursive;
  --font-stencil: "Stardos Stencil", "Special Elite", Georgia, serif;
  --font-typewriter: "Special Elite", "Courier New", monospace;

  /* Spacing — keep consistent rhythm */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Layout */
  --content-max: 720px;
  --wide-max: 960px;
  --radius: 4px;
}

/* ----------------------------- 
   2. RESET & BASE
   ----------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--parchment);
  background-image: 
    radial-gradient(at 20% 10%, rgba(184, 147, 43, 0.04) 0%, transparent 50%),
    radial-gradient(at 80% 90%, rgba(74, 104, 120, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Subtle paper texture using SVG noise */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer, section, article {
  position: relative;
  z-index: 2;
}

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

a {
  color: var(--sandstone-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

a:hover {
  color: var(--sandstone);
}

/* ----------------------------- 
   3. TYPOGRAPHY
   ----------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--slate);
  margin: 0 0 var(--space-sm) 0;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-top: var(--space-lg);
}

h3 {
  font-size: 1.25rem;
  color: var(--sandstone-deep);
  font-style: italic;
}

p {
  margin: 0 0 var(--space-sm) 0;
}

.lead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--slate);
  margin-bottom: var(--space-md);
}

/* ----------------------------- 
   4. LAYOUT WRAPPERS
   ----------------------------- */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.wrap-wide {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ----------------------------- 
   5. SITE HEADER — White card with sandstone border
   ----------------------------- */
.site-header {
  background: var(--parchment-deep);
  border-bottom: 1px solid rgba(61, 74, 82, 0.15);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  justify-content: center;
}

.site-header__card {
  background: #fff;
  border: 1.5px solid var(--sandstone);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: 0 4px 14px rgba(61, 74, 82, 0.08), 0 1px 3px rgba(61, 74, 82, 0.06);
  max-width: 100%;
}

.site-header__logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 56px;
  flex-shrink: 0;
}

.site-header__logo {
  height: 50px;
  width: auto;
  display: block;
}

.site-header__partnership {
  font-family: var(--font-display);
  color: var(--slate);
  line-height: 1.3;
  text-align: center;
}

.site-header__partnership-main {
  display: block;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--slate);
}

.site-header__partnership-main em {
  font-style: normal;
  color: var(--sandstone);
  font-weight: 600;
  margin: 0 0.25rem;
}

.site-header__partnership-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-soft);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Footer logo treatment */
.site-footer__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__logo-card {
  background: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.site-footer__logo-card img {
  height: 48px;
  width: auto;
  display: block;
}

.site-footer__logo-card--wide img {
  height: 38px;
}

/* Mobile: keep the header horizontal but shrink everything down */
@media (max-width: 540px) {
  .site-header {
    padding: var(--space-sm) var(--space-sm);
  }
  .site-header__card {
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    justify-content: space-between;
  }
  .site-header__logo-frame {
    height: 36px;
    min-width: 36px;
  }
  .site-header__logo {
    height: 32px;
  }
  .site-header__partnership-main {
    font-size: 0.82rem;
  }
  .site-header__partnership-sub {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }
}

/* ----------------------------- 
   6. HOMEPAGE — Back-of-the-book design
   ----------------------------- */

/* Hero section with title and map */
.hero-map {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
  position: relative;
}

/* When the map section has no title block above it */
.hero-map--map-only {
  padding-top: 0;
}

.hero-map__title-block {
  margin-bottom: var(--space-sm);
}

.hero-map__eyebrow {
  display: inline-block;
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sandstone);
  margin-bottom: var(--space-sm);
  padding: 0.3rem 0.9rem;
  border-top: 1px solid var(--sandstone);
  border-bottom: 1px solid var(--sandstone);
}

.hero-map__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: 1;
  color: var(--slate);
  margin: 0 0 var(--space-xs);
  font-weight: 500;
  font-style: italic;
}
.hero-map__title em {
  font-style: normal;
  color: var(--sandstone);
}

.hero-map__subtitle {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--slate-soft);
  margin: 0;
}

/* The map frame */
.trail-map-wrap {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

/* ── Flip card container ── */
.trail-map-flip {
  perspective: 1800px;
  width: 100%;
}

.trail-map-flip__inner {
  position: relative;
  width: 100%;
  transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transform-style: preserve-3d;
}

.trail-map-flip__inner.is-flipped {
  transform: rotateY(180deg);
}

.trail-map-flip__face {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1.5px solid var(--sandstone-deep);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.trail-map-flip__face--back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}

.trail-map-flip__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Controls row beneath the card ── */
.trail-map-flip__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.9rem;
}

.trail-map-flip__btn {
  font-family: var(--font-typewriter);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--parchment);
  background: var(--sandstone-deep);
  border: none;
  border-radius: 3px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.trail-map-flip__btn:hover {
  background: var(--sandstone);
}

/* Zoom icon on map faces */
.trail-map-flip__zoom-wrap {
  position: relative;
  cursor: zoom-in;
}

.trail-map-flip__zoom-icon {
  position: absolute;
  bottom: 0.6rem;
  right: 0.7rem;
  background: rgba(61, 74, 82, 0.75);
  color: var(--parchment);
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.trail-map-flip__zoom-wrap:hover .trail-map-flip__zoom-icon {
  opacity: 1;
}

.trail-map-flip__hint {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--slate-soft);
}

/* Stops index strip below map */
.stops-index {
  max-width: 760px;
  margin: var(--space-md) auto var(--space-lg);
  padding: 0 var(--space-md);
}

.stops-index__label {
  text-align: center;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sandstone);
  margin-bottom: var(--space-sm);
}

.stops-index__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .stops-index__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.stop-mini {
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 0.3rem;
  border-radius: 4px;
  border: 1.5px solid rgba(181, 83, 42, 0.35);
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  display: block;
}
.stop-mini:hover {
  background: rgba(181, 83, 42, 0.07);
  border-color: var(--sandstone);
  transform: translateY(-2px);
}
.stop-mini__num {
  display: block;
  font-family: var(--font-stencil);
  font-size: 1.3rem;
  color: var(--sandstone);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.stop-mini__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--slate);
  font-weight: 600;
}

/* Home page divider */
.home-divider {
  text-align: center;
  margin: var(--space-md) auto;
}
.home-divider svg {
  width: 80px;
  height: 16px;
}

/* Home intro */
.home-intro {
  max-width: 580px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
  text-align: center;
}
.home-intro p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
  font-style: italic;
}

/* How-to (compact slate band) */
.how-to-compact {
  background: var(--slate);
  color: var(--parchment);
  padding: var(--space-md) var(--space-md);
  margin-top: var(--space-md);
  text-align: center;
}
.how-to-compact__title {
  font-family: var(--font-display);
  color: var(--parchment);
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
}
.how-to-compact__line {
  font-family: var(--font-hand);
  color: var(--sandstone-pale);
  font-size: 1.15rem;
  margin: 0;
}

/* Mobile tweaks for hero map */
@media (max-width: 540px) {
  .hero-map { padding-top: var(--space-md); }
  .trail-map-flip__btn { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .trail-map-flip__hint { font-size: 0.9rem; }
}

/* ----------------------------- 
   7. (legacy stops-list and how-to styles removed —
       homepage now uses .stops-index and .how-to-compact)
   ----------------------------- */

/* ----------------------------- 
   9. STOP HEADER — bold slate band
   ----------------------------- */
.stop-header {
  background: var(--slate);
  color: var(--parchment);
  padding: var(--space-lg) 0 var(--space-md);
  text-align: center;
  position: relative;
}

.stop-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: var(--sandstone);
}

.stop-header__number {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sandstone-pale);
  margin-bottom: var(--space-sm);
}

.stop-header__logo {
  max-width: 180px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-md);
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.stop-header__logo-placeholder {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-md);
  border: 2px dashed rgba(247, 240, 227, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(247, 240, 227, 0.5);
  font-size: 0.85rem;
  line-height: 1.3;
}

.stop-header__title {
  margin-bottom: var(--space-xs);
  color: var(--parchment);
}

.stop-header__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(247, 240, 227, 0.8);
  font-size: 1.15rem;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-md);
}

/* ----------------------------- 
   10. AUDIO INTRO
   ----------------------------- */
.audio-intro {
  background: rgba(184, 83, 42, 0.06);
  border: 1px solid rgba(184, 83, 42, 0.2);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  text-align: center;
}

.audio-intro__label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sandstone-deep);
  margin-bottom: var(--space-xs);
  font-size: 1.05rem;
}

.audio-intro__by {
  font-size: 0.85rem;
  color: var(--slate-soft);
  margin-top: var(--space-xs);
}

.audio-intro audio {
  width: 100%;
  max-width: 400px;
  margin: var(--space-xs) auto 0;
}

/* ----------------------------- 
   11. CONTENT SECTIONS
   ----------------------------- */
.section {
  padding: var(--space-md) 0;
}

.section__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--slate);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.section__title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--sandstone);
}

/* Did you know callout */
.callout {
  background: linear-gradient(to bottom right, rgba(184, 147, 43, 0.08), rgba(184, 147, 43, 0.03));
  border-left: 4px solid var(--gold);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--sandstone-deep);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.callout p:last-child { margin-bottom: 0; }

/* People to know */
.people {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

@media (min-width: 540px) {
  .people {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

.person {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(61, 74, 82, 0.12);
  padding: var(--space-sm);
  border-radius: var(--radius);
}

.person__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sandstone-deep);
  margin: 0 0 0.25rem 0;
}

.person__role {
  font-size: 0.85rem;
  color: var(--slate-soft);
  font-style: italic;
  margin: 0 0 0.5rem 0;
}

.person p:last-child { margin-bottom: 0; }

/* ----------------------------- 
   12. PHOTO GALLERY — breaks out wider on desktop
   ----------------------------- */
.gallery-section {
  /* This wraps the gallery so it can break out wider than the text column */
  max-width: var(--wide-max);
  margin: var(--space-md) auto;
  padding: 0 var(--space-md);
}

.gallery {
  margin: var(--space-md) 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(61, 74, 82, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0;
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(61, 74, 82, 0.12);
}

.gallery-item__img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  background: var(--parchment-deep);
  display: block;
  border: none;
  padding: 0;
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}

/* For pupil illustrations and drawings — show the whole image, not cropped,
   with parchment showing through around it. */
.gallery-item--illustration .gallery-item__img-wrap {
  background: #fff;
}

.gallery-item--illustration .gallery-item__img {
  object-fit: contain;
  padding: 4%;
}

/* Featured item — spans full grid width (used when total items is odd) */
.gallery-item--featured {
  grid-column: 1 / -1;
}

.gallery-item--featured .gallery-item__img-wrap {
  aspect-ratio: 16/7;
}

.gallery-item__img-wrap:hover .gallery-item__img {
  transform: scale(1.04);
}

.gallery-item__zoom-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.gallery-item__img-wrap:hover .gallery-item__zoom-icon {
  opacity: 1;
}

.gallery-item__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(
    45deg,
    var(--parchment-deep),
    var(--parchment-deep) 12px,
    var(--parchment) 12px,
    var(--parchment) 24px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  cursor: default;
}

.gallery-item__caption {
  padding: var(--space-sm);
  font-size: 0.95rem;
  line-height: 1.55;
}

.gallery-item__credit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

.gallery-item__by-child {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--sandstone-deep);
}

/* ----------------------------- 
   12c. PUPIL ILLUSTRATIONS (margin/inline placement)
   
   For child-drawn illustrations that sit alongside body text rather than
   in the gallery. On desktop, the drawing floats to the right margin,
   alongside the paragraphs that mention what it shows. On phones, it 
   collapses to centred inline so it appears between paragraphs.
   
   Usage:
   <figure class="pupil-illustration pupil-illustration--right">
     <img src="..." alt="..." class="pupil-illustration__img">
     <figcaption class="pupil-illustration__caption">
       Caption text — by [Pupil], Year 6
     </figcaption>
   </figure>
   
   Variants:
   --right : floats to right margin on desktop (default)
   --left  : floats to left margin on desktop
   --centre: always centred, never floats (good for taller portraits)
   ----------------------------- */
.pupil-illustration {
  margin: 0.6rem 0 1.2rem;
  background: #fff;
  border: 1px solid rgba(61, 74, 82, 0.12);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
  padding: 12px 12px 8px;
  border-radius: 3px;
  /* Default: centred inline. Desktop floats override below. */
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  /* Slight rotation — feels like a polaroid pinned to the page.
     Individual instances can override via inline style for variety. */
  transform: rotate(-1.2deg);
  transition: transform 0.3s ease;
}

.pupil-illustration:hover {
  transform: rotate(0deg) scale(1.02);
}

.pupil-illustration__img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;  /* lightbox.js makes these clickable */
}

.pupil-illustration__caption {
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--sandstone-deep);
  text-align: center;
  margin-top: 6px;
  padding: 0 4px;
}

/* On desktop (≥ 760px), drawings float to the side of the body text */
@media (min-width: 760px) {
  .pupil-illustration--right {
    float: right;
    clear: right;
    width: 36%;
    max-width: 280px;
    margin: 0.2rem 0 1rem 1.4rem;
  }
  
  .pupil-illustration--left {
    float: left;
    clear: left;
    width: 36%;
    max-width: 280px;
    margin: 0.2rem 1.4rem 1rem 0;
  }
  
  /* --centre always stays in the flow, never floats */
}

/* Wider screens get a more generous margin treatment */
@media (min-width: 1100px) {
  .pupil-illustration--right,
  .pupil-illustration--left {
    width: 30%;
    max-width: 240px;
  }
}

/* As a section divider — smaller, faded, no floating */
.pupil-illustration--divider {
  max-width: 200px;
  margin: 1.6rem auto;
  opacity: 0.88;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  transform: none;
}

.pupil-illustration--divider:hover {
  transform: none;
}

.pupil-illustration--divider .pupil-illustration__img {
  cursor: default;
}

.pupil-illustration--divider .pupil-illustration__caption {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandstone);
  margin-top: 8px;
}

/* ----------------------------- 
   12d. THEN-AND-NOW SLIDER
   
   Interactive comparison of a historical and modern photograph of the same 
   spot. Drag the handle to reveal more of either image. Works on mouse and 
   touch, plus arrow keys for keyboard users.
   
   Usage:
   <figure class="then-now">
     <div class="then-now__viewport" data-position="50">
       <img class="then-now__img then-now__img--then" src="..." alt="">
       <img class="then-now__img then-now__img--now" src="..." alt="">
       <span class="then-now__label then-now__label--then">Then · YEAR</span>
       <span class="then-now__label then-now__label--now">Now · YEAR</span>
       <button class="then-now__handle" aria-label="Drag to compare then and now">
         <span class="then-now__handle-icon" aria-hidden="true">⇄</span>
       </button>
     </div>
     <figcaption class="then-now__caption">
       Caption — by Pupil, Year 6
     </figcaption>
   </figure>
   
   Data attributes:
   data-position : starting handle position as a percentage from left (0-100). Default 50.
   ----------------------------- */

.then-now {
  margin: var(--space-md) 0;
  max-width: 100%;
}

.then-now__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--parchment-deep);
  border: 1px solid rgba(61, 74, 82, 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;       /* Allow vertical page scroll, capture horizontal drag */
  user-select: none;          /* Prevent accidental text selection during drag */
  -webkit-user-select: none;
  cursor: ew-resize;          /* Hint to mouse users that this slides */
}

.then-now__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;       /* Clicks pass through to the viewport */
}

/* "Then" image sits underneath, fully visible */
.then-now__img--then {
  z-index: 1;
}

/* "Now" image sits on top, clipped to the right of the handle */
.then-now__img--now {
  z-index: 2;
  clip-path: inset(0 0 0 50%);   /* default — overridden by JS based on data-position */
}

/* Corner labels */
.then-now__label {
  position: absolute;
  top: 12px;
  z-index: 4;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(247, 240, 227, 0.92);
  color: var(--sandstone-deep);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.then-now__label--then {
  left: 12px;
}

.then-now__label--now {
  right: 12px;
}

/* The handle: vertical line + circular grip */
.then-now__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;                       /* default — moved by JS */
  width: 3px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transform: translateX(-50%);
  border: none;
  padding: 0;
  cursor: ew-resize;
}

.then-now__handle::before {
  /* Round grip in the centre of the line */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  background: var(--sandstone);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.then-now__handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  z-index: 1;
}

.then-now__handle:focus {
  outline: none;
}

.then-now__handle:focus::before {
  outline: 3px solid var(--solway);
  outline-offset: 3px;
}

.then-now__handle:hover::before {
  background: var(--sandstone-deep);
}

/* Active dragging state */
.then-now__viewport--dragging {
  cursor: grabbing;
}
.then-now__viewport--dragging .then-now__handle {
  cursor: grabbing;
}

/* Caption */
.then-now__caption {
  margin-top: 0.6rem;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
}

.then-now__caption strong {
  color: var(--sandstone-deep);
}

.then-now__caption .then-now__credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--slate-soft);
  font-style: italic;
}

.then-now__caption .then-now__by-child {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--sandstone-deep);
}

/* Hint for first-time visitors — gently fades out after a few seconds */
.then-now__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(61, 74, 82, 0.85);
  color: var(--parchment);
  border-radius: 2px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

.then-now__viewport--touched .then-now__hint {
  opacity: 0;
}

/* Lightbox suppression — then-now sliders should NOT open in the lightbox 
   (the lightbox is for static images; sliders are interactive on the page) */
.then-now__img {
  cursor: default;
}

/* ----------------------------- 
   12b. LIGHTBOX (full-screen photo viewer)
   ----------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.96);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.lightbox.lightbox--show {
  display: flex;
  animation: lightbox-fade-in 0.25s;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__img {
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  display: block;
}

.lightbox__caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;
  width: calc(100% - 40px);
  background: rgba(0, 0, 0, 0.7);
  color: var(--parchment);
  padding: 12px 20px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: var(--font-body);
  line-height: 1;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__hint {
  position: absolute;
  top: 22px;
  left: 22px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-style: italic;
}

@media (max-width: 540px) {
  .lightbox__hint {
    display: none;
  }
}

/* ----------------------------- 
   13a. INLINE PULL-QUOTE — used between sections in the body
   ----------------------------- */
.inline-quote {
  position: relative;
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: rgba(74, 104, 120, 0.07);
  border-left: 3px solid var(--solway);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.inline-quote::before {
  content: "\201C";
  position: absolute;
  top: -4px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--solway);
  line-height: 1;
  opacity: 0.5;
}

.inline-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--slate);
  padding-left: var(--space-md);
  margin: 0 0 var(--space-xs) 0;
}

.inline-quote__author {
  display: block;
  text-align: right;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--sandstone-deep);
  padding-right: var(--space-xs);
}

/* ----------------------------- 
   13b. FINAL "WORD FROM YEAR 6" — one closing quote band per page
   ----------------------------- */
.final-quote {
  background: var(--solway);
  color: var(--parchment);
  padding: var(--space-lg) 0;
  margin: var(--space-lg) 0;
  text-align: center;
}

.final-quote__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sandstone-pale);
  margin: 0 0 var(--space-sm);
  display: block;
}

.final-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--parchment);
  max-width: 640px;
  margin: 0 auto var(--space-sm);
  padding: 0 var(--space-md);
}

.final-quote__author {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--sandstone-pale);
  display: block;
}

/* ----------------------------- 
   14. MEET THE EXPERTS (interviews)
   ----------------------------- */
.interview {
  background: var(--slate);
  color: var(--parchment);
  padding: var(--space-lg) 0;
  margin: var(--space-lg) 0;
  position: relative;
}

.interview__wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.interview__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sandstone-pale);
  border-bottom: 1px solid var(--sandstone);
  padding-bottom: 0.3rem;
  margin-bottom: var(--space-sm);
}

.interview__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--parchment);
  margin: 0 0 var(--space-xs) 0;
  font-style: italic;
}

.interview__role {
  font-size: 0.95rem;
  color: var(--sandstone-pale);
  margin: 0 0 var(--space-md);
}

.interview__bio {
  font-size: 1rem;
  margin-bottom: var(--space-md);
  color: rgba(247, 240, 227, 0.85);
}

.qa {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(247, 240, 227, 0.1);
}

.qa:last-child { border-bottom: none; }

.qa__q {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sandstone-pale);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.qa__a {
  margin: 0;
  color: rgba(247, 240, 227, 0.9);
}

.interview__paintings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.interview__paintings .gallery-item {
  margin: 0;
}

.interview__paintings .gallery-item__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

@media (max-width: 560px) {
  .interview__paintings {
    grid-template-columns: 1fr;
  }
  .interview__paintings .gallery-item__img {
    height: 180px;
  }
}

.interview__audio {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(247, 240, 227, 0.15);
}

.interview__audio audio {
  width: 100%;
}

.interview__audio-label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sandstone-pale);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------- 
   15. LOOK AROUND YOU
   ----------------------------- */
.look-around {
  background: rgba(90, 107, 58, 0.08);
  border: 1px solid rgba(90, 107, 58, 0.25);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.look-around__label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--moss);
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

/* ----------------------------- 
   16. TRAIL CLUE — ticket-stub stamp on sandstone band
   ----------------------------- */
.trail-clue-band {
  background: var(--sandstone);
  padding: var(--space-lg) 0;
  margin: var(--space-lg) 0 0;
  position: relative;
  overflow: hidden;
}

/* Add a paper-noise texture to the sandstone band for authenticity */
.trail-clue-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.15 0 0 0 0 0.05 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.trail-clue {
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* The ticket stub itself — scalloped edges using radial-gradient masks */
.trail-clue__stamp {
  display: inline-block;
  position: relative;
  transform: rotate(-3deg);
  z-index: 2;
  background: var(--parchment);
  padding: 16px 32px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  /* Scalloped left and right edges using mask */
  --notch: 9px;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent calc(var(--notch) - 1px), #fff var(--notch)),
    radial-gradient(circle at 100% 50%, transparent calc(var(--notch) - 1px), #fff var(--notch));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 50%, transparent calc(var(--notch) - 1px), #fff var(--notch)),
    radial-gradient(circle at 100% 50%, transparent calc(var(--notch) - 1px), #fff var(--notch));
  mask-composite: intersect;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.trail-clue__inner {
  border: 2.5px solid var(--sandstone-deep);
  border-radius: 4px;
  padding: 18px 30px;
  position: relative;
  filter: contrast(1.05);
}

.trail-clue__inner::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--sandstone-deep);
  border-radius: 2px;
  opacity: 0.5;
}

/* Distress / ink-unevenness overlay */
.trail-clue__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 1.4 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: lighten;
  pointer-events: none;
  opacity: 0.45;
}

.trail-clue__label {
  display: block;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--sandstone-deep);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.trail-clue__word {
  font-family: var(--font-stencil);
  font-size: 2.1rem;
  color: var(--sandstone-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.trail-clue__divider {
  width: 36px;
  height: 1px;
  background: var(--sandstone-deep);
  margin: 10px auto 8px;
  opacity: 0.6;
}

.trail-clue__meta {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  color: var(--sandstone-deep);
  letter-spacing: 0.15em;
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

.trail-clue__hint {
  display: block;
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: var(--parchment);
  font-style: italic;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ----------------------------- 
   17. WALK ON / NEXT STOP
   ----------------------------- */
.walk-on {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  text-align: center;
  background: rgba(184, 83, 42, 0.06);
  border-radius: var(--radius);
}

.walk-on__label {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--slate-soft);
  font-size: 0.95rem;
  margin: 0 0 0.4rem 0;
}

.walk-on__link {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--sandstone-deep);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.walk-on__link:hover {
  color: var(--sandstone);
}

.walk-on__arrow {
  font-size: 1.3rem;
  transition: transform 0.25s;
}

.walk-on__link:hover .walk-on__arrow {
  transform: translateX(4px);
}

/* ----------------------------- 
   18. SITE FOOTER
   ----------------------------- */
.site-footer {
  background: var(--slate);
  color: var(--parchment);
  padding: var(--space-lg) 0;
  margin-top: var(--space-xl);
  text-align: center;
}

.site-footer__credits {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 var(--space-xs);
}

.site-footer__small {
  font-size: 0.85rem;
  color: rgba(247, 240, 227, 0.7);
  margin: 0;
}

.site-footer a {
  color: var(--sandstone-pale);
}

.site-footer a:hover {
  color: var(--parchment);
}

/* ----------------------------- 
   19. BACK TO MAP (top of stop pages)
   ----------------------------- */
.back-link {
  display: inline-block;
  margin: var(--space-sm) 0;
  font-size: 0.9rem;
  color: var(--slate-soft);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.back-link::before {
  content: "← ";
}

.back-link:hover {
  color: var(--sandstone);
}

/* ----------------------------- 
   20. RESPONSIVE TWEAKS
   ----------------------------- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .stop-card__number { font-size: 2rem; }
  .interview__title { font-size: 1.5rem; }
}

/* ----------------------------- 
   21. PRINT STYLES (in case anyone prints a page)
   ----------------------------- */
@media print {
  body::before { display: none; }
  .audio-intro, .walk-on, .site-footer { display: none; }
}