/* ───────────────────────────────────────────────────────────────────────────
   Smokies visual system, card 758.

   The foundation every Smokies template builds on, so the section is
   stunning by default and not by accident. It layers on the house Nightfall
   tokens in site.css (paper, ink, gold, display and text faces, the 4pt
   spacing scale) and adds only what the mountains need: ridge blues that
   fade like haze, festival colour used as a scarce accent, a generous type
   scale, and a section rhythm with real air in it.

   Rules the system enforces
   - Hero first. Every Smokies page opens with .smokies-hero, a full bleed
     opening at least 72svh tall, layered mountain ridges behind the title,
     and the planning content visible in the first screen. Decoration never
     pushes the tools below the fold on mobile.
   - Images. Real park or mountain photography only, never stock filler
     standing in for a place. Every photograph goes through the shared
     figure partial, which requires alt text, a caption that adds
     information, and a credit line, and serves it lazy below the hero with
     a fixed aspect ratio so pages do not shift while it loads. A page with
     no real photograph uses the layered ridge artwork in the hero partial
     and says nothing photographic at all.
   - Colour. Ridge blues and haze over the Nightfall paper, candlelight
     cream ink, festival rose and gold only as accents. Text tokens below
     are the pairs that pass WCAG AA on the paper colours they sit on.
   - Type. Display face for titles at a fluid scale, text face for body,
     label face tracked and uppercase for eyebrows and credits.
   - Rhythm. Sections breathe on --smokies-section, cards share one radius
     and one hairline, and nothing nests a card inside a card.
   - Performance. No webfont beyond the site faces, no image is required
     for the hero artwork (inline SVG ridges), no JavaScript, and motion
     is removed under prefers-reduced-motion.
   ─────────────────────────────────────────────────────────────────────────── */

.smokies {
  --smokies-ridge-1: oklch(72% 0.07 235);
  --smokies-ridge-2: oklch(58% 0.08 242);
  --smokies-ridge-3: oklch(44% 0.09 252);
  --smokies-ridge-4: oklch(33% 0.08 262);
  --smokies-haze: oklch(84% 0.05 225);
  --smokies-festival: oklch(72% 0.17 12);
  --smokies-festival-soft: oklch(80% 0.11 20);
  --smokies-leaf: oklch(76% 0.12 145);
  --smokies-section: clamp(56px, 9vw, 112px);
  --smokies-radius: 18px;
  --smokies-measure: 68ch;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 var(--space-3xl);
  color: var(--ink);
}

/* ── Type scale ─────────────────────────────────────────────────────────── */
.smokies-display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 7.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
.smokies-h2 {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.smokies-h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.12;
  margin: 0;
}
.smokies-lede {
  font-family: var(--text);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--smokies-measure);
  text-wrap: pretty;
}
.smokies-body { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: var(--smokies-measure); text-wrap: pretty; }
.smokies-eyebrow,
.smokies-credit {
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.smokies-eyebrow { color: var(--smokies-haze); margin: 0; }
.smokies-credit { color: var(--muted); letter-spacing: 0.06em; text-transform: none; font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Full bleed inside the site container, layered ridges behind the title,
   and a photograph when a page has a real one. The ridge artwork is inline
   SVG from the hero partial, so the opening paints with no image request. */
.smokies-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(72svh, 640px);
  display: flex;
  align-items: flex-end;
  border-radius: 0 0 var(--smokies-radius) var(--smokies-radius);
  background: linear-gradient(180deg, oklch(38% 0.07 250) 0%, var(--smokies-ridge-3) 52%, var(--smokies-ridge-4) 100%);
  margin: 0 calc(50% - 50vw);
  padding: clamp(72px, 12vw, 128px) max(var(--space-md), calc(50vw - 560px)) clamp(28px, 5vw, 52px);
}
.smokies-hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.smokies-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, oklch(24% 0.045 276 / 0.12) 30%, oklch(24% 0.045 276 / 0.82) 88%);
}
.smokies-hero-ridges { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 46%; }
.smokies-hero-in { max-width: 56rem; display: grid; gap: var(--space-md); }
.smokies-hero .smokies-lede { color: var(--ink); }

/* ── Section rhythm ─────────────────────────────────────────────────────── */
.smokies-section { padding-top: var(--smokies-section); display: grid; gap: var(--space-lg); }
.smokies-section-head { display: grid; gap: var(--space-sm); max-width: var(--smokies-measure); }
.smokies-rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ── Cards, one recipe for tools, guides and town cards ────────────────── */
.smokies-grid { display: grid; gap: clamp(12px, 1.8vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .smokies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .smokies-grid { grid-template-columns: 1fr; } }
.smokies-card {
  --accent: var(--gold);
  border: 1px solid var(--hair);
  border-radius: var(--smokies-radius);
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 55%),
    var(--paper-2);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.smokies-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.smokies-card-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.smokies-card-link:focus-visible,
.smokies a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Festival accent is scarce on purpose, one band or one card per page. */
.smokies-card.is-festival { --accent: var(--smokies-festival); }
.smokies-card.is-leaf { --accent: var(--smokies-leaf); }
.smokies-card.is-ridge { --accent: var(--smokies-ridge-1); }

/* ── Photographs ────────────────────────────────────────────────────────── */
/* Fixed ratios stop layout shift, cover keeps the place honest and large,
   and the caption plus credit are part of the component, not an afterthought. */
.smokies-figure { margin: 0; display: grid; gap: var(--space-xs); }
.smokies-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--smokies-radius); display: block; background: var(--paper-2);
}
.smokies-figure.is-portrait img { aspect-ratio: 4 / 5; }
.smokies-figure figcaption { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.smokies-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.smokies-swatch { width: 92px; height: 64px; border-radius: 12px; border: 1px solid var(--hair); }

@media (prefers-reduced-motion: reduce) {
  .smokies * { transition: none !important; }
}