:root{
  --bg: oklch(97.3% 0.012 75);
  --bg-alt: oklch(93.5% 0.018 70);
  --ink: oklch(20% 0.018 55);
  --ink-soft: oklch(42% 0.02 55);
  --accent: oklch(68% 0.19 45);
  --accent-dark: oklch(54% 0.18 45);
  --accent2: oklch(56% 0.19 27);
  --navy: oklch(20% 0.03 255);
  --navy2: oklch(26% 0.035 255);
  --navy-soft: oklch(78% 0.03 255);
  --line: oklch(87% 0.012 70);
  --cream-text: oklch(96% 0.01 75);
}
*{ box-sizing: border-box; }
body{ margin:0; background: var(--bg); color: var(--ink); font-family: "Work Sans", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; }
h1,h2,h3{ font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif; font-weight: 400; margin: 0; letter-spacing: -0.01em; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-dark); }
img{ max-width:100%; }

.tag{ display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; background: var(--accent); color: oklch(99% 0 0); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tag-outline{ background: transparent; border: 1.5px solid currentColor; }

.btn{ display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px; border-radius: 3px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.btn-solid{ background: var(--accent); color: oklch(99% 0 0); }
.btn-solid:hover{ background: var(--accent-dark); color: oklch(99% 0 0); }
.btn-outline{ background: transparent; color: var(--cream-text); border: 1.5px solid oklch(70% 0.02 255); }
.btn-outline:hover{ border-color: var(--cream-text); color: var(--cream-text); }

.hero-bg{
  background-image: linear-gradient(0deg, oklch(14% 0.02 255 / 0.92) 0%, oklch(14% 0.02 255 / 0.55) 42%, oklch(14% 0.02 255 / 0.12) 68%, oklch(14% 0.02 255 / 0.35) 100%), url("assets/hero-bridge-night.jpg");
  background-size: cover;
  background-position: center 62%;
}
.split-bg{
  background-image: linear-gradient(0deg, oklch(14% 0.02 255 / 0.75) 0%, oklch(14% 0.02 255 / 0.08) 55%), url("assets/central-park.jpg");
  background-size: cover;
  background-position: center 40%;
}
.guide-hero-bg{
  background-size: cover;
  background-position: center;
}

.guide-link{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 600; }
.guide-link:hover{ color: var(--accent-dark); }
.guide-link:last-child{ border-bottom: none; }
.guide-link-dark{ border-bottom-color: oklch(35% 0.03 255); color: var(--cream-text); }
.guide-link-dark:hover{ color: var(--accent); }

.num-item{ display: flex; gap: 24px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid oklch(35% 0.03 255); }
.num-item:last-child{ border-bottom: none; }
.num{ font-family: "Libre Caslon Text", Georgia, serif; font-size: 44px; color: var(--accent); line-height: 1; min-width: 76px; }

.see-all{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-top: 24px; text-transform: uppercase; letter-spacing: 0.04em; }

.social-circle{ display:flex; align-items:center; justify-content:center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid oklch(45% 0.02 255); color: var(--cream-text); }
.social-circle:hover{ border-color: var(--accent); color: var(--accent); }

.related-card{ display:block; padding:22px; background:var(--bg-alt); border-radius:4px; }
.related-card:hover{ background: oklch(90% 0.02 70); }

header nav a, header .search-btn{ color: inherit; }

@media (max-width: 900px){
  header{ flex-wrap: wrap; padding: 20px 24px !important; }
  header nav{ display:none !important; }
  section{ padding-left:24px !important; padding-right:24px !important; }
  h1{ font-size: 44px !important; }
  h2{ font-size: 30px !important; }
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
}