/* ============================================================
   Maribor's Attic — main stylesheet
   Single-file CSS. Mobile-first. No build step.
   Tokens, type, layout, components, responsive — in that order.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------------ */
:root {
  /* Cream is the surface. Pure white is forbidden anywhere. */
  --cream-50: #FBF8F2;
  --cream-100: #F5F0E5;
  --cream-200: #E8DEC9;

  /* Terracotta: single accent. terracotta-500 for fills/rules/dots only;
     terracotta-600 for TEXT (WCAG AA on cream); 700 for CTA hover. */
  --terracotta-500: #C8654A;
  --terracotta-600: #A84F38;
  --terracotta-700: #8A3F2C;
  --terracotta-100: #F5E1D9;

  /* Forest: graphic accent. Floor-plan ink, icon strokes, footer rule. */
  --forest-700: #2D4A36;
  --forest-500: #4A7053;
  --forest-100: #DCE6DD;

  /* Charcoal: warm off-black. Body text, headings. Never #000. */
  --charcoal-900: #1F1A14;
  --charcoal-700: #4A3F30;
  --charcoal-500: #847562;          /* decoration only — fails AA as text */
  --text-muted: #6E6151;            /* muted TEXT that passes AA (5.0:1 on cream) */

  /* Motion — one signature easing family (award benchmark §4) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-rev: 900ms;

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Container */
  --container-max: 1200px;
  --container-pad: 24px;
}

@media (min-width: 768px) {
  :root { --container-pad: 48px; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 80px; }
}

/* --- 2. Reset + base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px; /* offset for sticky nav */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--cream-50);
  color: var(--charcoal-900);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "kern", "calt", "ss01";
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Global keyboard focus ring (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--terracotta-600);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Skip link — visually hidden until focused (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  background: var(--charcoal-900);
  color: var(--cream-50);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  transition: top 180ms var(--ease-out);
}
.skip-link:focus { top: 16px; }

html { overflow-x: hidden; } /* guard against 100vw + scrollbar x-overflow */

/* --- 3. Typography -------------------------------------------- */

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--charcoal-900);
  margin: 0;
}

/* H1: hero only. 96-120 desktop, 56-72 mobile. Tight. */
h1, .h1 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
@media (min-width: 768px) { h1, .h1 { font-size: 92px; } }
@media (min-width: 1100px) { h1, .h1 { font-size: 128px; line-height: 1.04; letter-spacing: -0.018em; } }
@media (min-width: 1280px) { h1, .h1 { font-size: 144px; line-height: 1.02; letter-spacing: -0.02em; } }
@media (min-width: 1600px) { h1, .h1 { font-size: 156px; line-height: 1.0; letter-spacing: -0.022em; } }

/* H2: section heads. 56-72 desktop, 36-44 mobile. */
h2, .h2 {
  font-size: 36px;
  line-height: 1.10;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 768px) { h2, .h2 { font-size: 52px; } }
@media (min-width: 1100px) { h2, .h2 { font-size: 64px; } }
@media (min-width: 1280px) { h2, .h2 { font-size: 72px; } }
@media (min-width: 1600px) { h2, .h2 { font-size: 80px; letter-spacing: -0.015em; } }

/* H3: sub-heads. */
h3, .h3 {
  font-size: 22px;
  line-height: 1.20;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { h3, .h3 { font-size: 28px; } }

/* Body */
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: 19px; line-height: 1.55; }
@media (min-width: 768px) { body { font-size: 18px; } .lead { font-size: 20px; } }

em, i { font-style: italic; }
strong, b { font-weight: 600; } /* used sparingly; italic preferred */

/* Labels — uppercase Inter, used in spec strip + small captions */
.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal-700);
}

/* Captions under photos */
.caption {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* --- 4. Layout ------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

section {
  padding: 80px 0;
}
@media (min-width: 768px) { section { padding: 128px 0; } }

/* 12-col grid for asymmetric placement */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

/* Asymmetric text blocks */
.text-left { grid-column: 1 / -1; }
.text-right { grid-column: 1 / -1; }
@media (min-width: 768px) {
  /* All section text starts at the container's left edge for a consistent column */
  .text-left  { grid-column: 1 / 9; }
  .text-right { grid-column: 1 / 9; }
}

/* Full-bleed (escapes container) */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* --- 5. Components -------------------------------------------- */

/* 5.1 Top nav — sticky, with quiet shrink-on-scroll behavior */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream-50);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.nav.scrolled {
  border-bottom-color: var(--cream-200);
  /* Tiny translucency only when scrolled, retains brand cream */
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
  transition: padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled .nav-inner { padding-top: 14px; padding-bottom: 14px; }
.wordmark {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal-900);
  letter-spacing: -0.005em;
  transition: font-size 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled .wordmark { font-size: 19px; }
.nav-links {
  display: flex;
  gap: var(--space-5);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal-700);
  white-space: nowrap;
}
/* Tighten nav on narrow viewports so wordmark + 3 links fit on one line */
@media (max-width: 599px) {
  .wordmark { font-size: 18px; }
  .nav-links { gap: 18px; font-size: 11px; letter-spacing: 0.03em; }
  .nav-inner { padding-top: 14px; padding-bottom: 14px; }
}
/* Underline-from-left grows on hover (Vivre-style restraint) */
.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color 240ms ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--terracotta-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover { color: var(--terracotta-600); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.lead-link {
  color: var(--charcoal-900);
}
.nav-links a.lead-link::after {
  transform: scaleX(1); /* Always underlined for the BOOK link */
}
.nav-links a.lead-link:hover { color: var(--terracotta-600); }
/* Enquire CTA — exposed booking action: a small terracotta pill in the nav. */
.nav-links a.nav-cta {
  border: 1px solid var(--terracotta-500);
  border-radius: 100px;
  padding: 6px 16px;
  color: var(--terracotta-600);
  transition: background-color 240ms ease, color 240ms ease;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover { background: var(--terracotta-500); color: var(--cream-50); }
/* On phones, drop the section anchors; keep the guide link + the Enquire pill. */
@media (max-width: 599px) {
  .nav-links a.nav-d { display: none; }
}

/* 5.2 Hero */
.hero {
  padding-top: 0;
  padding-bottom: 0;
}
.hero-image-wrap {
  position: relative;
  overflow: hidden;
  width: 100vw;
}
.hero-image {
  width: 100vw;
  height: 60vh;
  min-height: 420px;
  max-height: 720px;
  object-fit: cover;
  display: block;
  /* Initial entrance: gentle scale-down + fade in. Plays on load. */
  animation: heroImageReveal 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}
@media (min-width: 1024px) {
  .hero-image { height: 64vh; max-height: 740px; }
}

/* Scroll cue at the bottom of the hero image */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-50);
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(31, 26, 20, 0.4);
  opacity: 0;
  animation: cueIn 800ms 1200ms ease-out forwards;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-scroll-cue:hover {
  transform: translate(-50%, 4px);
}
.hero-scroll-cue::after {
  content: '';
  width: 1px;
  height: 28px;
  background: var(--cream-50);
  box-shadow: 0 1px 4px rgba(31, 26, 20, 0.4);
  animation: cueLineDrop 1800ms 2000ms ease-in-out infinite;
}

.hero-meta {
  padding-top: 56px;
  padding-bottom: 40px;
  /* horizontal padding inherited from .container so the hero aligns with every section */
}
@media (min-width: 768px) {
  .hero-meta { padding-top: 88px; padding-bottom: 64px; }
}
.hero-meta h1 { margin-bottom: var(--space-5); }
.hero-meta h1 > .reveal-line,
.guide-hero-meta h1 > .reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(-24px); /* descend into place — light entering from above */
  animation: fadeUp 1000ms var(--ease-out) forwards;
}
.hero-meta h1 > .reveal-line:nth-child(1),
.guide-hero-meta h1 > .reveal-line:nth-child(1) { animation-delay: 200ms; }
.hero-meta h1 > .reveal-line:nth-child(2),
.guide-hero-meta h1 > .reveal-line:nth-child(2) { animation-delay: 400ms; }
.guide-hero-meta h1 { margin-bottom: var(--space-5); }
.hero-meta p {
  max-width: 32em;
  color: var(--charcoal-700);
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 800ms 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin: 0 0 var(--space-4);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 600ms 100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--terracotta-500);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}
.hero-microline {
  margin-top: var(--space-5);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 800ms 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 768px) { .hero-microline { font-size: 13px; } }

/* Hero animations */
@keyframes heroImageReveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cueIn {
  to { opacity: 0.9; }
}
@keyframes cueLineDrop {
  0%   { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(0); transform-origin: bottom; }
  51%  { transform: scaleY(0); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: top; }
}

/* Honor reduce-motion users — drop animations entirely */
@media (prefers-reduced-motion: reduce) {
  .hero-image, .hero-meta h1 > .reveal-line, .hero-meta p,
  .hero-eyebrow, .hero-microline, .hero-scroll-cue, .hero-scroll-cue::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* 5.3 Spec strip
   At ≥768 the strip is a single horizontal row with terracotta verticals.
   At <768 it becomes a 2-col grid (3 rows) so it never wraps awkwardly. */
.spec-strip {
  padding: 32px 0;
  border-top: 1px solid var(--cream-200);
  border-bottom: 1px solid var(--cream-200);
}
.spec-strip-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.spec {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-700);
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid rgba(200, 101, 74, 0.55); /* terracotta @ 55% */
  border-bottom: 1px solid var(--cream-200);
}
.spec:nth-child(2n) { border-right: none; }     /* no right rule on right column */
.spec:nth-child(n+5) { border-bottom: none; }   /* no bottom rule on last row */
/* single row only once there's room (>=900) — avoids the 768–820 crowd */
@media (min-width: 900px) {
  .spec-strip-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .spec {
    font-size: 13px;
    padding: 8px 22px;
    white-space: nowrap;
    border-bottom: none;
    border-right: 1px solid rgba(200, 101, 74, 0.55);
  }
  .spec:last-child { border-right: none; }
  .spec:nth-child(2n) { border-right: 1px solid rgba(200, 101, 74, 0.55); }
  .spec:nth-child(n+5) { border-bottom: none; }
}

/* 5.4 Story */
.story h2 { margin-bottom: var(--space-5); }
.story p { font-size: 18px; line-height: 1.65; max-width: 64ch; hanging-punctuation: first last; }
@media (min-width: 768px) { .story p { font-size: 19px; } }

/* Story visual — generated architectural section (right column on desktop). */
.story-visual { grid-column: 1 / -1; margin-top: var(--space-7); max-width: 420px; }
@media (min-width: 768px) {
  .story-visual {
    grid-column: 9 / 13;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 120px;
    margin-top: 0;
  }
}
.story-card {
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  padding: var(--space-6);
}
.story-svg { width: 100%; height: auto; display: block; }
.story-rays line {
  stroke: var(--terracotta-500);
  stroke-width: 1;
  opacity: 0.45;
}
.story-structure {
  fill: none;
  stroke: var(--forest-700);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.story-structure ellipse,
.story-structure rect { fill: var(--cream-100); }
.story-caption {
  margin-top: var(--space-4);
  max-width: 32ch;
}

/* Pull-quote — used between story and photo essay */
.pull-quote {
  padding: 96px 0;
  text-align: center;
}
@media (min-width: 768px) { .pull-quote { padding: 144px 0; } }
.pull-quote-inner {
  max-width: 56ch;
  margin: 0 auto;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--forest-500);
  border-bottom: 1px solid var(--forest-500);
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--charcoal-700);
}
@media (min-width: 768px) {
  .pull-quote blockquote { font-size: 44px; }
}

/* Section lead — single utility for the muted paragraph that follows a section H2 */
.section-lead {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--charcoal-700);
  font-size: 18px;
  line-height: 1.6;
}
@media (min-width: 768px) { .section-lead { font-size: 19px; } }
.section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Section number — a small chapter-book label that sits above each H2.
   Reads as editorial counting, not a UI numbering tag.
   Uses p.section-no specificity to win over .story p / .neighbourhood p. */
p.section-no {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin: 0 0 var(--space-4);
  max-width: none;
}
p.section-no::after {
  content: '';
  display: block;
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: var(--terracotta-500);
  opacity: 0.55;
}

/* Hairline + dot section divider. Used between major sections for rhythm.
   Forest hairline with a single terracotta dot in the middle. */
.section-divider {
  border: 0;
  height: 1px;
  background: var(--forest-500);
  position: relative;
  margin: 0;
  opacity: 0.5;
  width: 100%;
  max-width: 100%;
}
.section-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--terracotta-500);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* GPS coordinates — small typographic motif used as a recurring editorial detail */
.coords {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
p.hero-coords {
  margin: 0 0 var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 600ms 50ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Attic mark — small SVG used in nav + occasional section ornament */
.attic-mark {
  display: inline-block;
  vertical-align: -3px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: var(--forest-700);
}
.attic-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 5.5 Photo essay */
.photo-essay { padding: 0; }
.photo-essay > * + * { margin-top: 80px; }
@media (min-width: 768px) {
  .photo-essay > * + * { margin-top: 128px; }
}
.photo-wide img {
  width: 100vw;
  max-height: 90vh;
  object-fit: cover;
}
.photo-wide .caption {
  padding: var(--space-3) var(--container-pad);
}
.photo-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0 var(--container-pad);
}
@media (min-width: 768px) {
  .photo-pair { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.photo-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0 var(--container-pad);
}
@media (min-width: 768px) {
  .photo-trio { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.photo-trio img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* 5.6 Floor plan placeholder */
.floor-plan {
  background: var(--cream-100);
  text-align: center;
}
.floor-plan-stage {
  border: 1px dashed var(--forest-500);
  padding: 80px 24px;
  margin-top: var(--space-6);
  color: var(--forest-700);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}

/* 5.7 Sleeping arrangements */
.sleeping {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .sleeping { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.sleeping-card h3 { margin-bottom: var(--space-2); }
.sleeping-card .label { display: block; margin-bottom: var(--space-3); color: var(--terracotta-600); }
.sleeping-card p { color: var(--charcoal-700); }

/* 5.8 Amenities — three short prose blocks (Casa Talía pattern) */
.amenities {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .amenities { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.amenity-group h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--charcoal-900);
  margin: 0 0 var(--space-3);
}
.amenity-group p {
  margin: 0;
  color: var(--charcoal-700);
  font-size: 16px;
  line-height: 1.65;
}

/* 5.9 Good to know */
.good-to-know {
  background: var(--cream-100);
}
.good-to-know-list {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .good-to-know-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
.good-to-know-item h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: var(--space-2);
}
.good-to-know-item p { color: var(--charcoal-700); margin: 0; }

/* 5.10 Neighbourhood */
.neighbourhood h2 { margin-bottom: var(--space-6); }
.neighbourhood p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 64ch;
}
/* Sticky panel removed for now — the prose spans the full column (paragraphs stay capped at 64ch). */
.neighbourhood .text-right { grid-column: 1 / -1; }

/* Sticky scroll-swapping itinerary panel — desktop only (cols 1–6). [currently unused] */
.nbhd-visual { display: none; }
@media (min-width: 1024px) {
  .nbhd-visual { display: block; grid-column: 9 / 13; }
  .nbhd-sticky {
    position: sticky;
    top: 120px;
    height: 74vh;
    max-height: 680px;
    min-height: 460px;
  }
}
.nbhd-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  overflow: hidden;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.nbhd-frame.is-active { opacity: 1; transform: scale(1); }

/* Optional photo slot — give this a background-image to use a real Maribor shot.
   Sits behind the text with a warm cream scrim for legibility. */
.nbhd-frame-media {
  position: absolute;
  inset: 0;
  background-color: var(--cream-100);
  background-size: cover;
  background-position: center;
}
.nbhd-frame-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,248,242,0.25) 0%, rgba(251,248,242,0.78) 70%, rgba(251,248,242,0.92) 100%);
}
.nbhd-frame-body { position: relative; }

.nbhd-index {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin-bottom: var(--space-4);
}
.nbhd-mark {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--forest-500);
  margin-bottom: var(--space-3);
}
.nbhd-mark svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.nbhd-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--charcoal-900);
  margin: 0 0 var(--space-3);
}
.nbhd-note {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--charcoal-700);
  max-width: 30ch !important;
  margin: 0 0 var(--space-4) !important;
}
.nbhd-meta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .nbhd-frame { transition: opacity 200ms linear; transform: none; }
  .nbhd-frame.is-active { transform: none; }
}
.neighbourhood .signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--charcoal-700);
  margin-top: var(--space-5);
}
.neighbourhood-times {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--forest-500);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal-700);
  max-width: 64ch;
}

/* 5.11 About */
.about {
  background: var(--cream-100);
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .about-inner { grid-template-columns: 280px 1fr; gap: var(--space-7); }
}
.about-portrait {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  background: var(--cream-200);
  border: 1px dashed var(--forest-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest-700);
  font-family: var(--serif);
  font-style: italic;
}
.about p { color: var(--charcoal-700); max-width: 64ch; }
.about-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin-top: var(--space-4);
}

/* Host visual — generated Ljubljana–Maribor map (left column on desktop). */
.host-visual { grid-column: 1 / -1; margin-top: var(--space-7); max-width: 420px; }
@media (min-width: 768px) {
  .host-visual {
    grid-column: 9 / 13;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 120px;
    margin-top: 0;
    max-width: none;
  }
}
.host-card { background: var(--cream-50); border: 1px solid var(--cream-200); padding: var(--space-6); }
.host-svg { width: 100%; height: auto; display: block; }
.host-caption { margin-top: var(--space-4); max-width: 34ch; }
.map-route { fill: none; stroke: var(--forest-500); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.7; }
.map-ring { fill: none; stroke: var(--forest-700); stroke-width: 1.6; }
.map-dot { fill: var(--charcoal-500); }
.map-dot-home { fill: var(--terracotta-500); }
.map-attic { fill: none; stroke: var(--forest-700); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.map-label { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--charcoal-700); }
.map-label--home { fill: var(--terracotta-500); }
.map-sub { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--charcoal-500); }
.map-dist { font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--charcoal-500); }
.map-compass line, .map-compass path { stroke: var(--charcoal-500); stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-compass text { font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; fill: var(--charcoal-500); }

/* 5.12 Pricing — calm prose, not a settings table */
.pricing-prose {
  margin-top: var(--space-6);
  max-width: 43rem; /* ~688px — matches the column-capped body width elsewhere */
  font-size: 18px;
  line-height: 1.7;
  color: var(--charcoal-700);
}
@media (min-width: 768px) { .pricing-prose { font-size: 19px; } }
.pricing-prose strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  color: var(--charcoal-900);
}
.pricing-prose-fine { margin-top: var(--space-3); font-size: 16px; }
@media (min-width: 768px) { .pricing-prose-fine { font-size: 16px; } }

/* Inline text link with terracotta underline (used in prose) */
.inline-link {
  border-bottom: 1px solid var(--terracotta-500);
  transition: color 240ms ease;
}
.inline-link:hover { color: var(--terracotta-600); }

/* 5.13 FAQ */
.faq-list { margin-top: var(--space-6); max-width: 64ch; }
.faq-item {
  border-bottom: 1px solid var(--cream-200);
  padding: var(--space-4) 0;
}
.faq-item summary {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-left: var(--space-3);
  transition: transform 240ms ease;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--terracotta-500);
  transition: opacity 240ms ease;
}
.faq-icon::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--terracotta-600); }
.faq-item[open] summary { color: var(--terracotta-600); }
.faq-item .answer {
  margin-top: var(--space-3);
  color: var(--charcoal-700);
  font-size: 17px;
  line-height: 1.65;
}

.more-link {
  margin-top: var(--space-6);
}
.more-link a {
  border-bottom: 1px solid var(--terracotta-500);
  padding-bottom: 2px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal-900);
}
.more-link a:hover { color: var(--terracotta-600); }
.more-link-spaced { margin-top: var(--space-5); }

/* 5.14 Final CTA */
.final-cta { text-align: left; padding: 80px 0; }
@media (min-width: 768px) { .final-cta { padding: 128px 0 80px; } }
.final-cta h2 { margin-bottom: var(--space-5); }
.final-cta .section-lead { margin-left: 0; margin-right: 0; max-width: 48ch; }
.cta-button-wrap { margin-top: var(--space-6); }
.btn-primary {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-50);
  background: var(--terracotta-600); /* AA: cream on -600 = ~6:1 */
  padding: 18px 40px;
  border: none;
  text-decoration: none;
  transition: color 280ms ease;
  isolation: isolate;
}
/* On hover, a darker fill sweeps in from the bottom (subtle, not gimmicky) */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--terracotta-700);
  transform: translateY(101%);
  transition: transform 380ms var(--ease-out);
  z-index: -1;
}
.btn-primary:hover::before { transform: translateY(0); }

.final-image {
  width: 100vw;
  height: 50vh;
  min-height: 320px;
  object-fit: cover;
  margin-top: 80px;
}

/* 5.15 Footer — two-row composition with brand statement at scale */
footer {
  background: var(--cream-100);
  padding: 80px 0 48px;
  border-top: 1px solid var(--cream-200);
}
@media (min-width: 768px) { footer { padding: 112px 0 56px; } }
.footer-statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.10;
  letter-spacing: -0.01em;
  color: var(--charcoal-900);
  max-width: 24ch;
  margin: 0 0 var(--space-7);
}
@media (min-width: 768px) { .footer-statement { font-size: 56px; } }
@media (min-width: 1100px) { .footer-statement { font-size: 64px; } }
.footer-rule {
  border: 0;
  border-top: 1px solid var(--forest-500);
  margin: 0 0 var(--space-6);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-7); }
}
.footer-block h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}
.footer-block p, .footer-block a {
  font-size: 15px;
  color: var(--charcoal-700);
  margin: 0;
  line-height: 1.6;
}
.footer-block a:hover { color: var(--terracotta-600); }
.footer-coords {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.footer-credentials {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-7);
  line-height: 1.7;
  max-width: 64ch;
}
.footer-credentials-quiet {
  margin-top: var(--space-2);
  color: var(--forest-500);
  letter-spacing: 0.06em;
}
.footer-signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--forest-700);
  margin-top: var(--space-5);
  text-align: left;
}
.footer-legal {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-4);
  line-height: 1.6;
  max-width: 64ch;
}

/* --- 6. Page-specific (faq.html, house-rules.html) ----------- */
.page-header {
  padding: 80px 0 40px;
}
@media (min-width: 768px) { .page-header { padding: 128px 0 64px; } }
.page-header .label { display: block; margin-bottom: var(--space-3); color: var(--terracotta-600); }
.page-header .lead { margin-top: var(--space-4); max-width: 60ch; }
.page-content { padding-bottom: 96px; }
/* Reading text caps at a comfortable measure, left-aligned at the container edge
   (so every page's content shares the same left/right edges as the rest of the site) */
.page-content .container > p,
.page-content .container > h2,
.page-content .container > h3,
.page-content .container > ul,
.page-content .container > ol { max-width: 64ch; }
.page-content h2 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
@media (min-width: 768px) { .page-content h2 { font-size: 30px; } }
.page-content h2:first-child { margin-top: 0; }
.page-content p { margin-bottom: var(--space-3); }
.page-content p {
  color: var(--charcoal-700);
  font-size: 17px;
  line-height: 1.7;
}
.page-content em { font-style: italic; }

/* --- 7. Guide page (guide.html) ----------------------------- */

/* Guide hero — same composition language as home but no scroll cue,
   shorter image, more prose-led. */
.guide-hero {
  padding-top: 0;
}
.guide-hero .hero-image {
  height: 50vh;
  min-height: 360px;
  max-height: 560px;
}
.guide-hero-meta {
  padding: 56px 0 32px;
}
@media (min-width: 768px) { .guide-hero-meta { padding: 88px 0 56px; } }

/* Table of contents — two-column at desktop */
.toc {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--forest-500);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 720px;
}
@media (min-width: 640px) { .toc { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-7); } }
.toc-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--charcoal-900);
  text-decoration: none;
  border-bottom: 1px solid var(--cream-200);
  transition: color 240ms ease, padding-left 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.toc-item:hover {
  color: var(--terracotta-600);
  padding-left: 4px;
}
.toc-num {
  font-weight: 500;
  color: var(--terracotta-600);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* Guide section block — each numbered section uses the same .section-no + H2
   pattern as home; subsections use .h3 sub-heads */
.guide-section {
  padding: 96px 0;
  border-top: 1px solid var(--cream-200);
  scroll-margin-top: 80px;
}
@media (min-width: 768px) { .guide-section { padding: 128px 0; } }
.guide-section:first-of-type { border-top: 0; }
.guide-section .grid-12 .text-left,
.guide-section .grid-12 .text-right {
  grid-column: 1 / -1;
  max-width: 43rem; /* ~688px — matches the body reading width used site-wide */
}
.guide-section h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--charcoal-900);
  margin: var(--space-6) 0 var(--space-3);
}
@media (min-width: 768px) { .guide-section h3 { font-size: 28px; } }
.guide-section p {
  color: var(--charcoal-700);
  font-size: 17px;
  line-height: 1.7;
  max-width: 64ch;
  hanging-punctuation: first last;
}
.guide-section p strong {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  color: var(--charcoal-900);
}
.guide-section em { font-style: italic; }
.guide-section a {
  color: var(--charcoal-900);
  border-bottom: 1px solid var(--terracotta-500);
  padding-bottom: 1px;
  transition: color 240ms ease;
}
.guide-section a:hover { color: var(--terracotta-600); }
.guide-section ul {
  margin: var(--space-3) 0;
  padding-left: 0;
  list-style: none;
  max-width: 64ch;
}
.guide-section ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--space-2);
  color: var(--charcoal-700);
  font-size: 17px;
  line-height: 1.65;
}
.guide-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 1px;
  background: var(--terracotta-500);
}

/* Data tables (inline content tables) */
.guide-section .data-table {
  width: 100%;
  margin: var(--space-5) 0;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.guide-section .data-table thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--forest-500);
}
.guide-section .data-table tbody td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--cream-200);
  color: var(--charcoal-700);
  vertical-align: top;
  line-height: 1.5;
}
.guide-section .data-table tbody tr:last-child td { border-bottom: 0; }
.guide-section .data-table tbody td:first-child {
  font-family: var(--serif);
  color: var(--charcoal-900);
  font-size: 16px;
  letter-spacing: -0.005em;
}

/* Ranked list — used at the top of section 0 */
.ranked-list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  max-width: 64ch;
  counter-reset: ranked;
}
.ranked-list li {
  counter-increment: ranked;
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 56px;
  border-bottom: 1px solid var(--cream-200);
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal-700);
}
.ranked-list li:last-child { border-bottom: 0; }
.ranked-list li::before {
  content: '0' counter(ranked);
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--terracotta-600);
}
.ranked-list li strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--charcoal-900);
  margin-bottom: 2px;
}

/* Itinerary day-cards — for the multi-day sections */
.itinerary {
  margin: var(--space-5) 0;
}
.itinerary-day {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--cream-200);
}
.itinerary-day:last-child { border-bottom: 0; }
.itinerary-day h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin: 0 0 var(--space-2);
}
.itinerary-day .day-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--charcoal-900);
  margin: 0 0 var(--space-3);
}
.itinerary-day p {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  line-height: 1.6;
}

/* Itineraries sticky-swap panel — mirrors the home neighbourhood panel.
   Desktop only; mobile keeps the original single-column day-cards. */
.itin-content { grid-column: 1 / -1; }
.itin-visual { display: none; }
@media (min-width: 1024px) {
  .itin-visual { display: block; grid-column: 1 / 4; }
  .itin-content { grid-column: 5 / 13; }
  .itin-sticky {
    position: sticky;
    top: 120px;
    height: 58vh;
    min-height: 400px;
    max-height: 560px;
  }
}
.itin-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.itin-frame.is-active { opacity: 1; }
.itin-letter {
  position: absolute;
  top: var(--space-3);
  left: var(--space-5);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 132px;
  line-height: 0.8;
  color: var(--terracotta-600);
  opacity: 0.16;
}
.itin-frame-body { position: relative; }
.itin-frame .itin-index {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin: 0 0 var(--space-3);
}
.itin-frame .itin-name {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--charcoal-900);
  margin: 0 0 var(--space-3);
}
.itin-frame .itin-note {
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal-700);
  max-width: 30ch;
  margin: 0 0 var(--space-4);
}
.itin-frame .itin-meta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .itin-frame { transition: opacity 200ms linear; }
}

/* Back-to-top link at end of guide */
.back-to-top {
  text-align: center;
  padding: var(--space-7) 0;
}
.back-to-top a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal-700);
  text-decoration: none;
  border-bottom: 1px solid var(--terracotta-500);
  padding-bottom: 2px;
}
.back-to-top a:hover { color: var(--terracotta-600); }

/* ============================================================
   8. Motion + concept system — "Light From Above"
   (award-design-benchmark §3/§4). All compositor-friendly
   (transform/opacity/clip-path), all reduced-motion safe.
   ============================================================ */

/* 8.0 Responsive + a11y fixes from the audit */
/* Tablet (768–1023): when sticky panels are hidden, prose spans full width */
@media (min-width: 768px) and (max-width: 1023px) {
  .neighbourhood .text-right,
  .topic-swap .text-right,
  .itin-content { grid-column: 1 / -1; }
}

/* ============================================================
   Guide chapter rail — pinned left sidebar for the long guide.
   Two-column shell on desktop; the rail is a sticky scroll-spy
   index. Below 1080px the rail hides and the header .toc serves.
   ============================================================ */
.guide-shell { width: 100%; }
@media (min-width: 1080px) {
  .guide-shell {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 84px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
    align-items: start;
  }
  /* Sections live inside the flow column; neutralise their own .container. */
  .guide-flow .guide-section > .container { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  /* The rail supersedes the itinerary sticky panel — drop it here to avoid two left rails. */
  .guide-flow .itin-visual { display: none; }
  .guide-flow .itin-content { grid-column: 1 / -1; }
  /* Hide the header jump-list on desktop; the rail replaces it. */
  .page-header .toc { display: none; }
}

.chapter-rail { display: none; }
@media (min-width: 1080px) {
  .chapter-rail {
    display: block;
    position: sticky;
    top: 92px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 2px 8px 24px 0;
    font-family: var(--sans);
    scrollbar-width: thin;
  }
}
.rail-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  margin: 0 0 var(--space-3);
}
.rail-group {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-muted);
  margin: var(--space-5) 0 6px;
}
.rail-group:first-of-type { margin-top: var(--space-3); }
.rail-link {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 5px 0 5px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--charcoal-700);
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.rail-link:hover { color: var(--charcoal-900); }
.rail-num {
  flex-shrink: 0;
  min-width: 15px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--terracotta-600);
}
.rail-link.is-current {
  color: var(--forest-500);
  border-left-color: var(--terracotta-500);
  font-weight: 500;
}

/* Line-art chapter mark — reuses the .ta asset style from the city topics. */
.chapter-mark {
  width: 84px;
  height: 52px;
  margin-bottom: var(--space-4);
  color: var(--forest-500);
}
.chapter-mark svg { width: 100%; height: 100%; display: block; }

/* Smooth in-page jumps for the rail (motion-safe). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Mobile nav tap targets >= ~44px */
@media (max-width: 599px) {
  .nav-links a { padding: 12px 0; }
}

/* 8.1 Concept: a faint light-shaft falling from the top of every page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 60% at 50% -12%,
    rgba(200, 101, 74, 0.07) 0%, rgba(251, 248, 242, 0) 56%);
  mix-blend-mode: multiply;
}
/* keep real content above the shaft */
.nav, .hero, section, footer, .skip-link, .curtain { position: relative; z-index: 1; }
.nav { z-index: 50; }
.curtain { z-index: 100; }

/* 8.2 One reveal system — sections descend into place (light entering).
   Hidden state gated behind .js so content is never stuck if JS fails. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-rev) var(--ease-out),
              transform var(--dur-rev) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 90ms; }
.reveal[data-d="2"] { transition-delay: 180ms; }
.reveal[data-d="3"] { transition-delay: 270ms; }

/* 8.3 Photo essay: top-down "shutter of light" clip reveal on the full-bleed
   wides + final image (robust: these are direct, single-image blocks). */
.js .photo-wide img,
.js .final-image {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path 1100ms var(--ease-out), transform 1400ms var(--ease-out);
  will-change: clip-path, transform;
}
.photo-wide.in img,
.final-cta.in .final-image { clip-path: inset(0 0 0 0); transform: none; }

/* Uniform warm grade so the mixed iPhone set reads as one shoot (interim
   until pro shoot) — perceptible warmth + gentle film contrast. */
.photo-essay img, .hero-image, .final-image,
.photo-wide img, .photo-pair img, .photo-trio img,
.dest-figure img {
  filter: saturate(0.9) contrast(1.04) brightness(1.015) sepia(0.07);
}

/* 8.4 Signature moment: the attic section + the host map draw themselves.
   stroke-dashoffset is set per-path in JS to each path's length. */
.story-structure path, .story-structure line, .story-structure polygon,
.story-structure ellipse, .story-structure rect,
.map-route, .map-ring, .map-attic path {
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1500ms var(--ease-out);
}
.story-visual.in .story-structure path,
.story-visual.in .story-structure line,
.story-visual.in .story-structure polygon,
.story-visual.in .story-structure ellipse,
.story-visual.in .story-structure rect,
.host-visual.in .map-route,
.host-visual.in .map-ring,
.host-visual.in .map-attic path { stroke-dashoffset: 0; }
/* rays/dots fade in after the lines have drawn (gated behind .js) */
.js .story-rays line, .js .map-dot, .js .map-dot-home {
  opacity: 0;
  transition: opacity 700ms var(--ease-out) 950ms;
}
.story-visual.in .story-rays line { opacity: 0.45; }
.host-visual.in .map-dot { opacity: 1; }
.host-visual.in .map-dot-home { opacity: 1; }

/* 8.5 Type-as-image: a near-transparent concept word bleeding off-edge */
.bleed-host { position: relative; overflow: hidden; }
.bleedword {
  position: absolute;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(140px, 24vw, 420px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(200, 101, 74, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 8.6 Page-transition curtain (clip-path wipe carries the brand across pages) */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--cream-100);
  clip-path: inset(0 0 100% 0);   /* default (no-JS): hidden, never blocks content */
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: clip-path 600ms var(--ease-io);
}
/* Curtain default is hidden and never blocks content. It covers only on
   navigate-away (exit transition), then the next page loads with it hidden —
   no blank-page risk if a frame/timeout is missed. */
.curtain.cover { clip-path: inset(0 0 0 0); }   /* exit cover */
.curtain.wipe  { clip-path: inset(0 0 100% 0); } /* hidden (same as default) */
.curtain .attic-mark { width: 34px; height: 34px; color: var(--terracotta-600); opacity: 0.9; }

/* 8.7 Reduced-motion: render everything in its final state, no movement */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .photo-essay figure img, .final-image { clip-path: none; transform: none; transition: none; }
  .story-structure *, .map-route, .map-ring, .map-attic path { stroke-dashoffset: 0 !important; transition: none; }
  .story-rays line, .map-dot, .map-dot-home { opacity: 1; transition: none; }
  .curtain { display: none; }
  .nav-inner, .wordmark, .btn-primary::before, .toc-item, .hero-scroll-cue { transition: none !important; }
}

/* 8.8 Trust line — borrowed authority, high on the page */
.trust-line {
  text-align: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--cream-200);
}
.trust-line p {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--charcoal-700);
}
@media (min-width: 768px) { .trust-line p { font-size: 20px; } }
.trust-line .sep { color: var(--terracotta-600); padding: 0 6px; font-style: normal; }

/* 8.9 Mid-page CTA — a calm decision-point link, not a sticky bar */
.mid-cta { text-align: center; padding: 0; }
.mid-cta a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-900);
  border-bottom: 1px solid var(--terracotta-600);
  padding-bottom: 3px;
  transition: color 240ms var(--ease-out);
}
.mid-cta a:hover { color: var(--terracotta-600); }

/* ============================================================
   Section 9 — Location + interactive map ("Finding the door")
   ============================================================ */
.location { padding: var(--space-8) 0; }
.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .location-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-7); align-items: start; }
}

/* arrival steps */
.arrival-steps { list-style: none; margin: 0; padding: 0; }
.arrival-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--cream-200);
}
.arrival-steps li:first-child { border-top: none; padding-top: 0; }
.arrival-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--terracotta-600);
  color: var(--terracotta-600);
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.arrival-steps p { margin: 0; padding-top: 4px; }

/* address + directions button */
.location-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cream-200);
}
.location-address { margin: 0; font-style: normal; color: var(--charcoal-700); }
.btn-ghost {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta-600);
  text-decoration: none;
  border: 1px solid var(--terracotta-600);
  padding: 12px 22px;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}
.btn-ghost:hover { background: var(--terracotta-600); color: var(--cream-50); }

/* distance list */
.distance-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.distance-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--cream-200);
  font-family: var(--sans);
  font-size: 15px;
}
.distance-list li span:first-child { color: var(--charcoal-700); }
.distance-list li span:last-child {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* map */
.location-map-wrap { position: static; }
@media (min-width: 900px) { .location-map-wrap { position: sticky; top: 96px; } }
.location-map {
  height: 360px;
  border: 1px solid var(--cream-200);
  background: var(--cream-100);
  z-index: 0;
}
@media (min-width: 900px) { .location-map { height: 520px; } }
.location-map-cap { margin-top: var(--space-3); }

/* Leaflet attic pin (teardrop) */
.attic-pin { background: none !important; border: none !important; }
.attic-pin-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--cream-50);
  border: 1.5px solid var(--terracotta-600);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  box-shadow: 0 6px 16px rgba(31, 26, 20, 0.22);
}
.attic-pin-mark svg {
  width: 18px; height: 18px;
  transform: rotate(-45deg);
  fill: none;
  stroke: var(--terracotta-600);
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* keep Leaflet UI on-brand and legible */
.leaflet-container { font-family: var(--sans); }
.leaflet-bar a, .leaflet-bar a:hover {
  color: var(--forest-500);
  background: var(--cream-50);
  border-bottom-color: var(--cream-200);
}
.leaflet-popup-content-wrapper {
  border-radius: 2px;
  font-family: var(--sans);
  color: var(--charcoal-900);
}

/* ============================================================
   Section 10 — Destination gallery (real Maribor landmarks)
   ============================================================ */
.destinations { padding: var(--space-8) 0; }
.dest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 700px) {
  .dest-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.dest-figure { margin: 0; }
.dest-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--cream-200);
}
.dest-figure figcaption { margin-top: var(--space-3); }
.dest-credit {
  margin-top: var(--space-6);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   Section 11 — Conversion anchors (price + reassurance)
   ============================================================ */
.hero-price {
  margin-top: var(--space-3);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--terracotta-600);
}
@media (min-width: 768px) { .hero-price { font-size: 15px; } }
.cta-reassure {
  margin-top: var(--space-4);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
/* a11y: give nav links a 44px touch target without changing visual size */
@media (max-width: 768px) {
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   Section 12 — Maribor guides hub (homepage link grid)
   ============================================================ */
.guides-hub { padding: var(--space-8) 0; border-top: 1px solid var(--cream-200); }
.guides-grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .guides-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
}
.guides-grid li { border-top: 1px solid var(--cream-200); }
.guides-grid a { display: block; padding: var(--space-4) 0; text-decoration: none; }
.guide-title {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--charcoal-900);
  transition: color 200ms var(--ease-out);
}
.guides-grid a:hover .guide-title,
.guides-grid a:focus-visible .guide-title { color: var(--terracotta-600); }
.guide-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================================================
   Section 13 — Text-only hero · The Kit bg · floor plan · wayfinding · alignment
   ============================================================ */
/* Hero is now text-only (no image): give it presence; hide the image-era scroll cue */
.hero--text .hero-meta { padding-top: clamp(64px, 11vh, 150px); padding-bottom: clamp(48px, 8vh, 112px); }
.hero--text .hero-scroll-cue { display: none; }

/* "What's in it" takes the background the removed Good-to-know section used */
.amenities-section { background: var(--cream-100); }

/* Hero headline — cap the size so the title holds to two lines on desktop
   (the global h1 scale grows to 156px, which wrapped the title to 3-4 lines). */
.hero-meta h1 { font-size: clamp(46px, 8vw, 94px); line-height: 1.06; letter-spacing: -0.015em; }
@media (min-width: 1100px) { .hero-meta h1 > .reveal-line { white-space: nowrap; } }

/* Topic scroll-swap (Things to do): line-art asset per section, in the loved style */
.topic-asset { margin: 0 0 var(--space-4); max-width: 240px; }
.topic-asset svg { width: 100%; height: auto; display: block; }
.topic-asset .ta { fill: none; stroke: var(--forest-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topic-asset .ta-a { fill: none; stroke: var(--terracotta-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topic-asset .ta-f { fill: var(--terracotta-500); }
.topic-swap .nbhd-frame { justify-content: center; }
.topic-body .topic { padding-bottom: var(--space-7); }
.topic-body .topic:last-child { padding-bottom: 0; }
.topic-body .topic > h2:first-child { margin-top: 0; }
.topic-body .topic p { max-width: 64ch; }

/* Floor plan */
.floorplan-figure { margin: var(--space-7) 0 0; }
.floorplan-svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--cream-200);
  background: var(--cream-50);
}
.floorplan-figure .caption { margin-top: var(--space-3); }
.floorplan-legend { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .floorplan-legend { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }
.floorplan-legend li { padding: var(--space-4) 0; border-top: 1px solid var(--cream-200); }
.fl-k { display: block; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--charcoal-900); margin-bottom: 4px; }
.fl-v { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--charcoal-700); }

/* Wayfinding diagram */
.wayfinding { margin: var(--space-7) 0 0; }
.wayfinding-cap { margin: 0 0 var(--space-4); max-width: 60ch; }
.wayfinding-svg {
  width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--cream-200);
  background: var(--cream-50);
}