/* =========================================================================
   PastPin — public site design system
   Light-first, warm, editorial. System fonts only. Mobile-first.
   Layout-stability is a first-class concern (see notes inline).
   ========================================================================= */

:root {
  /* --- Surfaces (warm off-white, very low chroma) --- */
  --bg:          #faf7f2;
  --surface:     #ffffff;
  --surface-2:   #f6f1e9;   /* soft tinted section background */
  --surface-3:   #f1eadf;

  /* --- Ink (warm near-black) --- */
  --ink:    #2c2723;
  --ink-2:  #6c6258;
  --ink-3:  #968c80;

  /* --- Warm neutral lines --- */
  --line:        #e9e1d5;
  --line-strong: #ddd2c1;

  /* --- Terracotta scale (chosen warmth: 500) --- */
  --clay-500: #cf7a4d;  /* decorative accent, icons, hover tint edges */
  --clay-600: #c06138;  /* filled CTA background (white text ~5:1) */
  --clay-700: #a14f2b;  /* text links / strong accent on light */
  --clay-tint:   #f8eee3;
  --clay-tint-2: #fbf5ee;

  /* --- Status (kept friendly, never admin) --- */
  --ok:     #5f7d52;
  --ok-bg:  #eef2e8;

  /* --- Elevation: very subtle --- */
  --shadow-sm: 0 1px 2px rgba(44,39,35,.04);
  --shadow-md: 0 2px 10px rgba(44,39,35,.06);
  --shadow-lg: 0 8px 28px rgba(44,39,35,.08);

  /* --- Radius --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Type --- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Layout --- */
  --maxw: 1140px;
  --gutter: 20px;
  --header-h: 64px;
}

/* ----------------------------------------------------------------------- */
/* Reset                                                                   */
/* ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* Turkish-safe wrapping: balance headings, never hyphenate mid-word */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}
p { text-wrap: pretty; hyphens: none; }

/* ----------------------------------------------------------------------- */
/* Layout primitives                                                       */
/* ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: 56px; }
.section--tint { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
.section-head p { color: var(--ink-2); margin-top: 10px; font-size: 1.02rem; }
.stack > * + * { margin-top: 16px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-700);
}

/* ----------------------------------------------------------------------- */
/* Buttons — fixed height, consistent alignment inside cards               */
/* ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 18px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 550;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--clay-600); color: #fff; }
.btn--primary:hover { background: var(--clay-700); }
.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--clay-500); color: var(--clay-700); }
.btn--quiet { background: transparent; color: var(--ink-2); padding-inline: 8px; }
.btn--quiet:hover { color: var(--clay-700); }
.btn--sm { height: 38px; padding-inline: 14px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn--disabled, .btn:disabled {
  background: var(--surface-2);
  color: var(--ink-3);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------------------- */
/* Badges & chips                                                          */
/* ----------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .76rem;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--period { background: var(--clay-tint); border-color: #f0ddca; color: var(--clay-700); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 550;
  color: var(--ok);
}
.trust-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

/* ----------------------------------------------------------------------- */
/* Media placeholders — fixed aspect ratios, calm tonal fill + mono label  */
/* ----------------------------------------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(44,39,35,.022) 11px 12px),
    linear-gradient(160deg, var(--surface-2), var(--clay-tint-2));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph[data-ratio="16x10"] { aspect-ratio: 16 / 10; }
.ph[data-ratio="4x3"]   { aspect-ratio: 4 / 3; }
.ph[data-ratio="3x2"]   { aspect-ratio: 3 / 2; }
.ph[data-ratio="1x1"]   { aspect-ratio: 1 / 1; }
.ph[data-ratio="21x9"]  { aspect-ratio: 21 / 9; }
.ph__label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--ink-3);
  text-align: center;
  padding: 8px 14px;
  max-width: 90%;
}

/* ----------------------------------------------------------------------- */
/* Header                                                                  */
/* ----------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,247,242,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand__mark {
  width: 26px; height: 26px; flex: none;
}
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; }
.brand__name b { color: var(--clay-700); font-weight: 600; }

.nav { display: none; align-items: center; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--clay-700); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.lang-switch button {
  padding: 6px 11px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
}
.lang-switch button[aria-pressed="true"] { background: var(--clay-600); color: #fff; }

.saved-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding-inline: 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .88rem;
  font-weight: 550;
}
.saved-link:hover { border-color: var(--clay-500); }
.saved-link .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--clay-600);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.saved-link .count[data-empty="true"] { background: var(--surface-2); color: var(--ink-3); }

.hamburger {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.hamburger span, .hamburger span::before, .hamburger span::after {
  content: ""; display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px;
}
.hamburger span { position: relative; }
.hamburger span::before { position: absolute; top: -5px; }
.hamburger span::after  { position: absolute; top: 5px; }

/* Mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 8px var(--gutter) 16px;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.mobile-nav a:last-child { border-bottom: none; }

/* ----------------------------------------------------------------------- */
/* Breadcrumb                                                              */
/* ----------------------------------------------------------------------- */
.breadcrumb { padding-block: 16px 4px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--clay-700); }
.breadcrumb li[aria-current] { color: var(--ink); font-weight: 550; }
.breadcrumb .sep { color: var(--line-strong); }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 550; color: var(--clay-700);
  margin-bottom: 8px;
}
.back-link:hover { color: var(--clay-600); }

/* ----------------------------------------------------------------------- */
/* Hero                                                                    */
/* ----------------------------------------------------------------------- */
.hero { padding-block: 40px 8px; }
.hero__grid { display: grid; gap: 32px; }
.hero__copy { max-width: 600px; }
.hero h1 {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  margin-block: 14px 16px;
}
.hero__intro { font-size: 1.12rem; color: var(--ink-2); max-width: 48ch; }
.hero .cta-row { margin-top: 24px; }
.hero__micro {
  margin-top: 18px;
  font-size: .85rem;
  color: var(--ink-3);
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 44ch;
}
.hero__micro svg { margin-top: 2px; flex: none; }

/* Hero side stats panel */
.stat-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.stat-panel__title { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  background: var(--clay-tint-2);
}
.stat-card .num { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--ink); }
.stat-card .label { font-size: .85rem; color: var(--ink-2); margin-top: 7px; }

/* ----------------------------------------------------------------------- */
/* Section nav (anchor chips)                                              */
/* ----------------------------------------------------------------------- */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: rgba(250,247,242,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.section-nav__scroll {
  display: flex;
  gap: 8px;
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav__scroll::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .87rem;
  font-weight: 550;
  color: var(--ink-2);
  transition: all .12s;
}
.section-nav a:hover { border-color: var(--clay-500); color: var(--clay-700); }

/* ----------------------------------------------------------------------- */
/* Card grids — rows stretch; cards are flex columns; CTA pinned to bottom */
/* ----------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; align-items: stretch; }
.grid--3 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
.grid--auto { grid-template-columns: 1fr; }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
  height: 100%;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px); }
.card__media { border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 16px; gap: 9px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card__title { font-size: 1.16rem; line-height: 1.25; }
.card__title a:hover { color: var(--clay-700); }
.card__teaser {
  color: var(--ink-2);
  font-size: .94rem;
  /* fixed line count keeps every card the same body height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot {
  margin-top: auto;        /* pin CTA row to bottom regardless of title length */
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__foot .btn--primary { flex: 1 1 auto; }
.card__foot .save-btn { flex: none; }

/* Save toggle button */
.save-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; width: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  transition: all .14s;
}
.save-btn:hover { border-color: var(--clay-500); color: var(--clay-700); }
.save-btn svg { width: 18px; height: 18px; }
.save-btn .ico-filled { display: none; }
.save-btn[aria-pressed="true"] { background: var(--clay-tint); border-color: var(--clay-500); color: var(--clay-700); }
.save-btn[aria-pressed="true"] .ico-line { display: none; }
.save-btn[aria-pressed="true"] .ico-filled { display: block; }
/* wide variant with label */
.save-btn--wide { width: auto; padding-inline: 16px; font-size: .9rem; font-weight: 550; }

/* place meta line under title */
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--ink-3); }
.meta-line .meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-line b { color: var(--ink-2); font-weight: 600; }

/* ----------------------------------------------------------------------- */
/* Layer cards (time layers) — symmetric even with 5                       */
/* ----------------------------------------------------------------------- */
.layer-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.layer-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 100%;
}
.layer-card .layer-period {
  align-self: flex-start;          /* never stretches across the card */
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--clay-700);
  background: var(--clay-tint);
  border: 1px solid #f0ddca;
  padding: 4px 9px;
  border-radius: var(--r-xs);
}
.layer-card h3 { font-size: 1.12rem; }
.layer-card p { font-size: .9rem; color: var(--ink-2); }

/* ----------------------------------------------------------------------- */
/* Walk cards                                                              */
/* ----------------------------------------------------------------------- */
.walk-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--ink-2); }
.walk-stats .ws { display: inline-flex; align-items: center; gap: 6px; }
.walk-stats .ws b { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------------- */
/* Photo cards                                                             */
/* ----------------------------------------------------------------------- */
.photo-card .card__body { gap: 8px; }
.photo-note { font-size: .82rem; color: var(--ink-3); }

/* ----------------------------------------------------------------------- */
/* Detail pages                                                            */
/* ----------------------------------------------------------------------- */
.detail-hero { padding-block: 8px 24px; }
.detail-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.85rem); margin-block: 10px 12px; }
.detail-hero__teaser { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; }
.detail-hero__media { margin-top: 22px; }
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .9rem;
}
.detail-meta .dm { display: flex; flex-direction: column; gap: 2px; }
.detail-meta .dm .k { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.detail-meta .dm .v { color: var(--ink); font-weight: 550; }

.detail-layout { display: grid; gap: 36px; }
.detail-main { min-width: 0; }
.detail-section { padding-top: 8px; }
.detail-section + .detail-section { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.detail-section h2 { font-size: 1.45rem; margin-bottom: 12px; }
.detail-section h3 { font-size: 1.1rem; margin: 18px 0 8px; }
.detail-section p { color: var(--ink-2); margin-bottom: 12px; font-size: 1.04rem; }
.detail-section p:last-child { margin-bottom: 0; }
.prose > * + * { margin-top: 14px; }

/* aside / sidebar */
.detail-aside { display: flex; flex-direction: column; gap: 18px; }
.aside-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.aside-card h3 { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.aside-list { display: flex; flex-direction: column; }
.aside-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; font-weight: 500;
}
.aside-list a:last-child { border-bottom: none; }
.aside-list a:hover { color: var(--clay-700); }
.aside-list a .arr { color: var(--ink-3); }
.aside-list a:hover .arr { color: var(--clay-700); }

/* sticky aside on desktop */
@media (min-width: 960px) {
  .detail-aside.is-sticky { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
}

/* ----------------------------------------------------------------------- */
/* Trust panel — friendly, never exposes internal status                   */
/* ----------------------------------------------------------------------- */
.trust-panel {
  background: var(--clay-tint-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.trust-panel h2 { font-size: 1.25rem; margin-bottom: 6px; }
.trust-panel__sub { font-size: .92rem; color: var(--ink-2); margin-bottom: 16px; }
.trust-rows { display: grid; gap: 12px; }
.trust-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.trust-row__icon { width: 22px; height: 22px; color: var(--ok); }
.trust-row__icon--neutral { color: var(--ink-3); }
.trust-row .t-title { font-size: .92rem; font-weight: 600; }
.trust-row .t-desc { font-size: .86rem; color: var(--ink-2); margin-top: 2px; }
.source-links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.source-links a { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--clay-700); font-weight: 500; }
.source-links a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------- */
/* Walk stop list — numbered                                               */
/* ----------------------------------------------------------------------- */
.stop-list { display: flex; flex-direction: column; gap: 12px; counter-reset: stop; }
.stop {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  align-items: start;
}
.stop__num {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--clay-tint);
  border: 1px solid #f0ddca;
  color: var(--clay-700);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
}
.stop__body h3 { font-size: 1.05rem; margin-bottom: 3px; }
.stop__body p { font-size: .92rem; color: var(--ink-2); margin: 0; }
.stop__meta { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }

/* ----------------------------------------------------------------------- */
/* Before / after photo                                                    */
/* ----------------------------------------------------------------------- */
.beforeafter { display: grid; gap: 14px; grid-template-columns: 1fr; }
.beforeafter figure { display: flex; flex-direction: column; gap: 8px; }
.beforeafter figcaption { font-size: .82rem; color: var(--ink-3); font-family: var(--mono); }

/* ----------------------------------------------------------------------- */
/* Empty states                                                            */
/* ----------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  max-width: 460px;
  margin-inline: auto;
  padding: 40px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.empty-state__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--clay-tint);
  color: var(--clay-700);
}
.empty-state h2 { font-size: 1.3rem; margin-bottom: 8px; }
.empty-state p { color: var(--ink-2); font-size: .98rem; margin-bottom: 20px; }
.empty-state .cta-row { justify-content: center; }

/* inline (section-level) empty note */
.empty-inline {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: .94rem;
}
.empty-inline svg { flex: none; color: var(--clay-600); }

/* ----------------------------------------------------------------------- */
/* Saved route page                                                        */
/* ----------------------------------------------------------------------- */
.saved-list { display: flex; flex-direction: column; gap: 12px; }
.saved-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.saved-item__num {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; color: var(--ink-2);
}
.saved-item__info { min-width: 0; }
.saved-item__info .t { font-weight: 600; font-size: 1rem; }
.saved-item__info .m { font-size: .82rem; color: var(--ink-3); }
.saved-item__remove {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
}
.saved-item__remove:hover { color: var(--clay-700); border-color: var(--clay-500); }
.saved-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.saved-toolbar .count-note { font-size: .9rem; color: var(--ink-2); }

/* ----------------------------------------------------------------------- */
/* Footer — calm, balanced, no oversized pills                             */
/* ----------------------------------------------------------------------- */
.site-footer {
  margin-top: 64px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.site-footer__top {
  display: grid;
  gap: 32px;
  padding-block: 44px;
  grid-template-columns: 1fr;
}
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { font-size: .9rem; color: var(--ink-2); }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.footer-col h4 { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: .92rem; color: var(--ink-2); }
.footer-col a:hover { color: var(--clay-700); }
.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
}
.site-footer__bottom .privacy-note { font-size: .82rem; color: var(--ink-3); max-width: 60ch; }
.site-footer__bottom .copyright { font-size: .82rem; color: var(--ink-3); }

/* ----------------------------------------------------------------------- */
/* Responsive — mobile-first; enhance up                                   */
/* ----------------------------------------------------------------------- */
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--auto { grid-template-columns: repeat(2, 1fr); }
  .layer-grid { grid-template-columns: repeat(2, 1fr); }
  .beforeafter { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 760px) {
  :root { --gutter: 28px; }
  .section { padding-block: 68px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .nav { display: flex; }
  .hamburger { display: none; }
  .hero__grid { grid-template-columns: 1.4fr .9fr; align-items: center; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--auto { grid-template-columns: repeat(3, 1fr); }
  .layer-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-layout { grid-template-columns: minmax(0,1fr) 320px; }
  .site-footer__top { grid-template-columns: 1.1fr 1.6fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .layer-grid { grid-template-columns: repeat(5, 1fr); }  /* 5 layers, symmetric */
}

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

/* Focus visibility */
:focus-visible { outline: 2px solid var(--clay-600); outline-offset: 2px; border-radius: 4px; }

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.center { text-align: center; }

.related{display:flex;flex-wrap:wrap;gap:10px}.related a,.related span{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font-weight:600;color:var(--ink)}.related a:hover{border-color:var(--clay-500);color:var(--clay-700)}.route-stops{display:grid;gap:10px;margin:10px 0 22px;padding:0;list-style:none}.route-stops li{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px}.route-stops strong{display:block;margin-bottom:4px}.route-stops span{display:block;color:var(--ink-2)}.ph img,.card img,.hero img{width:100%;height:auto;object-fit:cover;content-visibility:auto}.image-credit{font-size:.76rem;color:var(--ink-3);margin-top:6px}.time-layer-card{text-decoration:none;color:inherit}.time-layer-card:hover{border-color:var(--clay-500);box-shadow:var(--shadow-md)}.stop-number{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--clay-tint);color:var(--clay-700);font-weight:900;margin-right:8px;float:left}.route-stops li strong{display:block;font-size:1.03rem}.route-stops li span:not(.stop-number){clear:both}

/* PastPin v3.7: clean public shell. Isolated pp7-* classes; no legacy header/footer collision. */
html{scroll-padding-top:86px}body{min-width:0;overflow-x:hidden}.container{width:min(100% - 44px,1180px)!important;margin-inline:auto!important}.pp7-header{position:sticky;top:0;z-index:100;width:100%;background:rgba(251,247,241,.98);border-bottom:1px solid #E9D8CC;backdrop-filter:blur(12px)}.pp7-inner{width:min(100% - 44px,1180px);margin:0 auto;min-height:68px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}.pp7-brand{display:inline-flex;align-items:center;gap:10px;color:#2B2521;text-decoration:none;font-weight:950;white-space:nowrap}.pp7-mark{width:36px;height:36px;border-radius:999px;background:#D8845F;color:#fff;display:grid;place-items:center;font-weight:950;flex:0 0 auto}.pp7-nav{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}.pp7-nav::-webkit-scrollbar{display:none}.pp7-nav a{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 15px;border:1px solid #E9D8CC;border-radius:999px;background:#fff;color:#5F473B;font-size:14px;font-weight:850;text-decoration:none;line-height:1;flex:0 0 auto}.pp7-nav a.active,.pp7-nav a:hover{background:#2B2521;border-color:#2B2521;color:#fff}.pp7-lang{display:inline-flex;align-items:center;gap:6px;border:1px solid #E9D8CC;background:#fff;border-radius:999px;padding:7px 10px;font-weight:900;white-space:nowrap}.pp7-lang a{text-decoration:none;color:#6D5549;line-height:1}.pp7-lang a.active{background:#2B2521;color:#fff;border-radius:999px;padding:4px 7px}.pp7-page{min-height:calc(100vh - 270px)}.pp7-page>main.container:first-child,.pp7-page>.container:first-child{padding-top:40px}.pp7-page .section:first-child{padding-top:48px}.pp7-page .section{clear:both}.pp7-page h1{max-width:960px}.pp7-page .photo-grid,.pp7-page .story-grid,.pp7-page .walk-grid,.pp7-page .place-grid,.pp7-page .layer-grid{width:100%;align-items:stretch}.pp7-page .card,.pp7-page .place,.pp7-page .story,.pp7-page .walk,.pp7-page .photo,.pp7-page .layer{min-width:0}.pp7-page .related a,.pp7-page .related span{min-width:0;overflow-wrap:anywhere}.pp7-footer{width:100%;margin-top:64px;border-top:1px solid #E9D8CC;background:rgba(255,255,255,.48)}.pp7-footer-inner{width:min(100% - 44px,1180px);margin:0 auto;padding:38px 0 46px;display:grid;grid-template-columns:minmax(220px,1.1fr) repeat(4,minmax(120px,1fr));gap:30px;align-items:start}.pp7-footer-brand strong{display:block;font-size:23px;color:#2B2521;margin-bottom:8px}.pp7-footer-brand p{margin:0;max-width:330px;line-height:1.65;color:#735A4E}.pp7-footer nav{display:flex;flex-direction:column;gap:8px;min-width:0}.pp7-footer h2{font-family:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:950;color:#2B2521;margin:0 0 4px;line-height:1.2}.pp7-footer a{display:inline-flex;width:max-content;max-width:100%;padding:0;border:0;background:transparent;color:#735A4E;text-decoration:none;font-size:14px;font-weight:760;line-height:1.35}.pp7-footer a:hover{color:#D8845F}.stats.pp-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 22px}.stats.pp-stat-grid span{display:flex;flex-direction:column;gap:3px;min-height:72px;justify-content:center;border:1px solid #E8D4C6;background:#FFF9F4;border-radius:18px;padding:12px 13px;color:#6C5043}.stats.pp-stat-grid span b{font-size:24px;line-height:1;color:#2B2421;font-weight:950}.stats.pp-stat-grid span small{font-size:12px;line-height:1.2;font-weight:850;color:#7A6257}.site-header,.site-footer{display:none!important}@media(max-width:940px){.pp7-inner{grid-template-columns:auto auto;justify-content:space-between;gap:12px;min-height:auto;padding:12px 0}.pp7-nav{grid-column:1 / -1;justify-content:flex-start}.pp7-footer-inner{grid-template-columns:1fr 1fr;gap:26px}.pp7-footer-brand{grid-column:1 / -1}.stats.pp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.container,.pp7-inner,.pp7-footer-inner{width:min(100% - 32px,1180px)!important}}@media(max-width:560px){.pp7-inner{width:min(100% - 28px,1180px)!important}.pp7-nav a{height:38px;padding-inline:12px;font-size:13px}.pp7-footer-inner{width:min(100% - 28px,1180px)!important;grid-template-columns:1fr}.stats.pp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pp7-page>main.container:first-child,.pp7-page>.container:first-child{padding-top:28px}}

/* PastPin v4.1: public card symmetry + user friendly labels */
.pp7-page .place-grid,.pp7-page .story-grid,.pp7-page .walk-grid,.pp7-page .layer-grid,.pp7-page .photo-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important;}
.pp-place-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:520px!important;border:1px solid var(--pp-line,#ead7ca)!important;border-radius:28px!important;background:linear-gradient(180deg,#fffdf9,#fff9f3)!important;box-shadow:0 14px 34px rgba(56,38,27,.055)!important;overflow:hidden!important;min-width:0!important;}
.pp-place-card__media{height:156px!important;flex:0 0 156px!important;margin:16px 16px 0!important;border-radius:22px!important;border:1px solid #f0dbce!important;background:radial-gradient(circle at 20% 20%, rgba(222,128,91,.16), transparent 34%),linear-gradient(135deg,#f6dfd5,#fff8f0)!important;}
.pp-place-card__body{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;padding:20px 24px 24px!important;min-width:0!important;}
.pp-place-card__meta{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;min-height:22px!important;margin-bottom:8px!important;color:#a45b3c!important;font-weight:900!important;font-size:12px!important;line-height:1.2!important;}
.pp-place-card__meta span{display:inline-block!important;max-width:50%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.pp-place-card h2{font-size:clamp(30px,3vw,44px)!important;line-height:1.02!important;letter-spacing:-.055em!important;margin:0 0 12px!important;min-height:92px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.pp-place-card__type{min-height:26px!important;margin-bottom:12px!important;color:#2b2421!important;font-size:14px!important;font-weight:900!important;line-height:1.3!important;}
.pp-place-card__pills{min-height:32px!important;display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-bottom:14px!important;}
.ppc-pill{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:0 11px!important;border:1px solid #ead3c4!important;background:#fff8f2!important;border-radius:999px!important;color:#6d4d3f!important;font-size:12px!important;font-weight:900!important;line-height:1!important;}
.pp-place-card p{color:#744f3e!important;font-size:16px!important;line-height:1.62!important;margin:0!important;min-height:78px!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.pp-place-card__actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:auto!important;padding-top:24px!important;}
.pp-place-card__actions .btn{width:100%!important;min-width:0!important;height:48px!important;padding:0 14px!important;}
.pp7-page .place-grid>.place,.pp7-page .place-grid>.card.place{display:none!important;}
.pp7-page .place-grid{grid-auto-rows:1fr!important;}
@media(max-width:1120px){.pp7-page .place-grid,.pp7-page .story-grid,.pp7-page .walk-grid,.pp7-page .layer-grid,.pp7-page .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:760px){.pp7-page .place-grid,.pp7-page .story-grid,.pp7-page .walk-grid,.pp7-page .layer-grid,.pp7-page .photo-grid{grid-template-columns:1fr!important;}.pp-place-card{min-height:auto!important;}.pp-place-card h2{min-height:auto!important;-webkit-line-clamp:unset!important;}.pp-place-card p{min-height:auto!important;-webkit-line-clamp:unset!important;}.pp-place-card__actions{grid-template-columns:1fr!important;}}