@font-face {
  font-family: "Inter U+0026";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2") format("woff2");
  unicode-range: U+0026;
}

:root {
  --theme-background: #f6f0e4;
  --theme-surface: #fffaf0;
  --theme-text: #21352a;
  --theme-text-muted: #596159;
  --theme-primary: #143d2b;
  --theme-accent: #c6693f;
  --theme-border: #d8cebb;
  --theme-button-bg: #4e6046;
  --theme-button-text: #ffffff;
  --theme-hero-bg: #173d2c;
  --theme-page-bg: var(--theme-background);
  --theme-hero-surface: var(--theme-hero-bg);
  --theme-section-surface: var(--theme-surface);
  --theme-card-surface: var(--theme-surface);
  --theme-elevated-surface: var(--theme-surface);
  --theme-overlay-surface: color-mix(in srgb, var(--theme-hero-bg) 92%, transparent);
  --theme-elevation-0: none;
  --theme-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 20px 44px rgba(33, 53, 42, .16), 0 4px 12px rgba(33, 53, 42, .09);
  --theme-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, .50), 0 28px 64px rgba(33, 53, 42, .22), 0 7px 18px rgba(33, 53, 42, .12);
  --theme-elevation-1: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 24px rgba(33, 53, 42, .11), 0 2px 7px rgba(33, 53, 42, .07);
  --theme-elevation-2: var(--theme-shadow);
  --theme-elevation-3: var(--theme-shadow-strong);
  --theme-border-subtle: color-mix(in srgb, var(--theme-border) 72%, transparent);
  --theme-border-strong: color-mix(in srgb, var(--theme-border) 70%, var(--theme-text));
  --theme-focus-border: var(--theme-primary);
  --theme-heading: var(--theme-text);
  --theme-body: var(--theme-text);
  --theme-muted: var(--theme-text-muted);
  --theme-inverse: var(--theme-button-text);
  --theme-button-secondary-bg: var(--theme-card-surface);
  --theme-button-secondary-text: var(--theme-text);
  --theme-button-hover-bg: color-mix(in srgb, var(--theme-button-bg) 88%, var(--theme-text));
  --theme-button-active-bg: color-mix(in srgb, var(--theme-button-bg) 78%, var(--theme-text));
  --theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-focus-border) 38%, transparent);
  --theme-radius-section: 22px;
  --theme-radius-card: 12px;
  --theme-radius-control: 8px;
  --theme-radius-pill: 999px;
  --theme-metallic-highlight: rgba(255, 255, 255, .72);
  --theme-metallic-shadow: rgba(33, 53, 42, .18);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-section: clamp(40px, 7vw, 76px);

  --font-heading: "Inter U+0026", "Playfair Display", serif;
  --font-body: "DM Sans", sans-serif;
  --font-accent: "Shadows Into Light", cursive;
}

/* Public pages start unresolved and are revealed by the shared theme bootstrap. */
html:not([data-theme-ready]) body:not(:has(.shell)) {
  visibility: hidden;
  animation: theme-bootstrap-failsafe 1500ms steps(1, end) forwards;
}

@keyframes theme-bootstrap-failsafe {
  to { visibility: visible; }
}

/* Platform surface and elevation hooks. Templates may use either hook. */
[data-surface="page"] { background: var(--theme-page-bg); }
[data-surface="hero"] { background: var(--theme-hero-surface); }
[data-surface="section"] { background: var(--theme-section-surface); border: 1px solid var(--theme-border-subtle); border-radius: var(--theme-radius-section); }
[data-surface="card"] { background: var(--theme-card-surface); border: 1px solid var(--theme-border-subtle); border-radius: var(--theme-radius-card); }
[data-surface="elevated"] { background: var(--theme-elevated-surface); border: 1px solid var(--theme-border-subtle); border-radius: var(--theme-radius-card); }
[data-surface="overlay"] { background: var(--theme-overlay-surface); }
[data-elevation="0"] { box-shadow: var(--theme-elevation-0); }
[data-elevation="1"] { box-shadow: var(--theme-elevation-1); }
[data-elevation="2"] { box-shadow: var(--theme-elevation-2); }
[data-elevation="3"] { box-shadow: var(--theme-elevation-3); }

/* Public templates inherit the platform page layer. Full-bleed media and
   hero imagery remain component-owned, but their surrounding surfaces do not. */
body, [data-surface="page"] { background: var(--theme-page-bg); color: var(--theme-body); }
.site-header { background: var(--theme-section-surface); border-color: var(--theme-border-subtle); }
.public-page footer, body > footer { background: var(--theme-hero-surface); color: var(--theme-inverse); }
.public-page footer a, body > footer a { color: var(--theme-inverse); }

/* One public header CTA contract, shared by every page template. */
.main-nav .subscribe-link {
  align-self: center;
  margin: 18px 0;
  padding: 10px 14px;
  border: 1px solid var(--theme-button-bg);
  border-radius: var(--theme-radius-control);
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  font: 700 11px/1 var(--font-body);
  text-transform: none;
}
.main-nav .subscribe-link:hover,
.main-nav .subscribe-link:focus-visible,
.main-nav .subscribe-link.active {
  background: var(--theme-button-hover-bg);
  border-color: var(--theme-button-hover-bg);
  color: var(--theme-button-text);
}

/* Legacy public aliases resolve to the same semantic layers during migration. */
:root { --deep: var(--theme-hero-surface); --cream: var(--theme-page-bg); --paper: var(--theme-card-surface); --ink: var(--theme-body); --line: var(--theme-border); --green: var(--theme-primary); --rust: var(--theme-accent); }

:where(button, [role="button"], a).platform-control,
:where(button, [role="button"], a)[data-control] { min-block-size: 44px; }
:where(button, [role="button"], a):focus-visible,
:where(input, select, textarea):focus-visible { outline: 2px solid var(--theme-focus-border); outline-offset: 3px; }

/* Shared interaction for whole public content-card links only. */
:root {
  --content-card-lift: -2px;
  --content-card-transition: 180ms ease;
}
.content-card-interaction {
  transition: transform var(--content-card-transition), box-shadow var(--content-card-transition), border-color var(--content-card-transition), background-color var(--content-card-transition);
}
.content-card-interaction:focus-visible {
  outline: 2px solid var(--theme-focus-border);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .content-card-interaction:hover {
    transform: translateY(var(--content-card-lift));
    box-shadow: var(--theme-elevation-2, 0 12px 28px #0003);
    border-color: var(--theme-primary, #59665d);
    background-color: var(--theme-elevated-surface, var(--theme-card-surface));
  }
}
@media (hover: none) and (pointer: coarse) {
  .content-card-interaction:active {
    transform: translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Phase 5.9C compatibility pass: route-owned selectors consume the same
   contract even where their markup predates data-surface hooks. */
:where(.adventures-hero, .adventure-browser, .memories-hero, .public-memories,
  .movies-hero, .movies-library, .info-hero, .dog-profiles, .contact-page,
  .subscribe-page, .privacy-page, .updates-page, .update-detail,
  .mountain-list, .trip-story, .route-section, .media-story, .engagement) {
  background: var(--theme-section-surface) !important;
  border-color: var(--theme-border-subtle);
}
:where(.adventures-hero, .adventure-browser, .memories-hero, .public-memories,
  .movies-hero, .movies-library, .info-hero, .dog-profiles, .contact-page,
  .subscribe-page, .privacy-page, .updates-page, .update-detail,
  .mountain-list, .trip-story, .route-section, .media-story, .engagement) {
  box-shadow: var(--theme-elevation-2);
}
:where(.public-card, .public-memory-card, .movie-card, .movie-detail-card,
  .dog-profile, .contact-card, .contact-form-card, .subscribe-card, .memory-gallery-card,
  .privacy-card, .update-card, .featured-trip, .mountain-card) {
  background: var(--theme-card-surface) !important;
  color: var(--theme-body);
  border-color: var(--theme-border-subtle);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-elevation-1);
}
:where(input, select, textarea) {
  background: var(--theme-card-surface);
  color: var(--theme-body);
  border-color: var(--theme-border);
}
:where(.memory-group-nav a, .memory-year-nav a) {
  border-color: var(--theme-border);
  background: var(--theme-card-surface);
  color: var(--theme-text);
}
:where(.memory-group-nav a:hover, .memory-group-nav a:focus-visible, .memory-year-nav a:hover, .memory-year-nav a:focus-visible) {
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
}
:where(.contact-form button, .subscribe-form button, .load-more, .engagement-form button) {
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  border-radius: var(--theme-radius-control);
}