/* Conserve Safari — site-wide brand layer.
   Applies the official "Conserve Safari Design System - Master"
   (https://claude.ai/artifact/AumgmDCr3MLeKuTAoLdRAS) on top of each page's own
   inline styles. Linked LAST in every <head>, so equal-specificity rules here win.
   Token values are copied verbatim from the system's project/tokens/*.css; change
   them there first, then here. Scope (Oct 2026): look & feel only — fonts, logo,
   headlines, eyebrows, buttons, controls, grain. Text sizes and layout are still
   the pages' own. */

:root {
  /* colors.css */
  --cs-paper: #F8F6F2;
  --cs-white: #FEFDFB;
  --cs-sand: #DBD1BD;
  --cs-sand-deep: #C7BAA0;
  --cs-stone: #757263;
  --cs-ink: #1A1A1A;
  --cs-ink-soft: #2E2E2C;
  --border-strong: var(--cs-stone);
  --border-on-dark: rgba(248, 246, 242, 0.22);

  /* typography.css */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, "Helvetica Neue", sans-serif;
  --ls-display: -0.005em;
  --ls-eyebrow: 0.1em;
  --ls-body: 0.005em;
  --ls-label: 0.03em;

  /* elevation.css */
  --radius-control: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;

  /* texture.css */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-opacity-light: 0.045;
}

/* ---- Body: Hanken Grotesk regular ---- */
body {
  font-weight: 400;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Titles: Newsreader light, sentence case, NO italic accent word ----
   The system retires the one-italic-word headline. Markup keeps its <em>s;
   !important beats the pages' more specific rules (e.g. `.hero h1 em`). */
h1, h2, h3, h4 { letter-spacing: var(--ls-display); }
h1 em, h2 em, h3 em, h4 em {
  font-style: normal !important;
  font-family: inherit;
  font-weight: inherit;
}

/* ---- Eyebrow (E1): tracked caps, restrained ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.3;
}

/* ---- Buttons: near-square (4px), ~44px tall, uppercase labels ----
   .btn-dark = primary (ink) · .btn = ghost · .btn-ghost / .btn-sand = ghost-light */
.btn {
  border-radius: var(--radius-control);
  padding: 14px 34px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  line-height: 1;
  border: 1.5px solid var(--border-strong);
  color: var(--cs-ink);
  justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: transparent; color: var(--cs-ink); border-color: var(--cs-ink); }
.btn:active { transform: scale(0.97); }

.btn-dark { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-paper); }
.btn-dark:hover { background: var(--cs-ink-soft); border-color: var(--cs-ink-soft); color: var(--cs-paper); }

.btn-ghost { border-color: var(--border-on-dark); color: var(--cs-paper); }
.btn-ghost:hover { background: rgba(248, 246, 242, 0.08); border-color: var(--cs-paper); color: var(--cs-paper); }

.btn-sand { border-color: var(--border-on-dark); color: var(--cs-sand); }
.btn-sand:hover { background: rgba(248, 246, 242, 0.08); border-color: var(--cs-sand); color: var(--cs-sand); }

/* ---- Form controls: 4px corners, regular weight ---- */
.field input, .field select, .field textarea {
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 400;
}

/* ---- Logo: the official SVG wordmark, 64px tall in the desktop nav ---- */
.nav-logo img { height: 64px; width: auto; display: block; }
.footer-logo img { height: 48px; width: auto; filter: invert(1) brightness(1.7); }
@media (max-width: 960px) {
  .nav-logo img { height: 44px; }
}

/* ---- Selection ---- */
::selection { background: var(--cs-sand); color: var(--cs-ink); }

/* ---- Film grain: faint, fixed, never intercepts clicks ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background-image: var(--texture-grain);
  background-size: 180px 180px;
  opacity: var(--grain-opacity-light);
  mix-blend-mode: multiply;
}
@media print { body::after { display: none; } }

/* =====================================================================
   Round 2 (Oct 2026): the system's type scale, layout and radii.
   Values from project/tokens/typography.css, spacing.css, elevation.css.
   Selectors mirror the pages' own so these (loaded last) win.
   ===================================================================== */
:root {
  --h1: clamp(2.85rem, 7.4vw, 5.9rem);   /* hero */
  --h2: clamp(2.1rem, 5vw, 3.85rem);     /* section / page title */
  --h3: clamp(1.6rem, 3.15vw, 2.4rem);   /* subsection */
  --h4: clamp(1.25rem, 2.1vw, 1.65rem);  /* card title / smallest head */
  --b1: clamp(18px, 1.3vw, 20px);        /* lead / running text */
  --b2: 16px;                            /* secondary text */
  --label: 12px;                         /* E2: nav, tags, footer heads, legal line */
  --small: 14px;                         /* E1 size: footer links, notes */
  --lh-tight: 1.04;
  --lh-normal: 1.65;
  --container-max: 1280px;
  --container-text: 680px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --radius-sm: 2px;
}

/* ---- Layout: 1280px container, one gutter for nav, heroes and content ---- */
.container { max-width: var(--container-max); padding: 0 var(--gutter); }
nav { padding-left: var(--gutter); padding-right: var(--gutter); }
nav.scrolled { padding-left: var(--gutter); padding-right: var(--gutter); }
.hero-content, .camp-hero-content, .p-hero-content { padding-left: var(--gutter); padding-right: var(--gutter); }
.post-body { max-width: calc(var(--container-text) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- H1: heroes ---- */
.hero h1, .camp-hero-content h1 { font-size: var(--h1); line-height: var(--lh-tight); }
/* Page titles: H1 element, H2 size (interior pages) */
.avail-hero h1, .faq-hero h1, .blog-hero h1, .p-hero-content h1, .post-hero h1, .nf h1, .legal-title {
  font-size: var(--h2); line-height: var(--lh-tight);
}
/* ---- H2 ---- */
.section-title { font-size: var(--h2); line-height: var(--lh-tight); }
/* ---- H3 ---- */
.camp-overlay h3, .post-body h2 { font-size: var(--h3); line-height: 1.08; }
/* ---- H4 ---- */
.post-body h3, .blog-card h3, .avail-sidebar h3, .faq-sidebar h3, .inc-item h4, .pillar h4,
.mat-card h4, .loc-card h4, .legal-section h2 { font-size: var(--h4); line-height: 1.15; }

/* ---- B1: running text ---- */
.hero-sub, .section-body, .post-body p, .post-body ul, .post-body ol, .legal-standfirst {
  font-size: var(--b1); line-height: var(--lh-normal);
}
.hero-sub { max-width: 34rem; }
/* ---- B2: secondary text ---- */
.blog-card p, .camp-overlay p, .inc-item p, .pillar p, .mat-card p, .amenity-list li, .loc-row,
.loc-row-sm, .faq-answer-inner, .faq-question, .avail-sidebar p, .faq-sidebar p, .cal-box p,
.fam-box>p.fam-intro, .fam-help, .fam-date-hint, .form-status, .award-list li, .legal-section p,
.legal-list li, .embed-placeholder p, .field input, .field select, .field textarea {
  font-size: var(--b2); line-height: var(--lh-normal);
}
.review-text { font-size: 20px; line-height: 1.6; }
/* ---- Small: footer links, notes ---- */
.footer-col a, .footer-tagline, .form-note, .post-refs { font-size: var(--small); }
/* ---- Labels (E2): 12px tracked caps ---- */
.nav-links a, .nav-wa, .footer-col h5, .stat-label, .camp-tag, .review-source, .blog-date, .blog-read,
.post-meta, .post-back, .loc-k, .fam-facts .loc-k, .field label, .contact-label, .legal-updated,
.camp-link, .camp-award-text, .hero-award-text {
  font-size: var(--label); letter-spacing: var(--ls-eyebrow);
}
.footer-bottom p { font-size: var(--label); }

/* ---- Radius: photography, cards, panels 2px (full-bleed stays square) ---- */
.blog-card, .blog-img, .review-card, .mat-card, .loc-card, .fam-box, .cal-box, .camp-card,
.intro-photo, .embed-placeholder { border-radius: var(--radius-sm); }
.blog-card, .camp-card, .intro-photo { overflow: hidden; }
/* Partners: the FAM intro beside the form is running text (B1); the one inside
   the form box keeps B2 via the more specific `.fam-box>p.fam-intro`. */
p.fam-intro { font-size: var(--b1); line-height: var(--lh-normal); }
/* Homepage hero: the place line sits over the brightest part of the sunset
   sky, where sand-on-photo disappeared. Paper white, a touch heavier, and a
   soft scrim-like shadow for legibility (the system allows scrims over imagery). */
.hero .eyebrow {
  color: var(--cs-paper);
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(26, 26, 26, 0.55), 0 0 24px rgba(26, 26, 26, 0.6);
}
/* Slightly deeper scrim at the top of the homepage hero (was .08 → .30). */
.hero-overlay { background: linear-gradient(to bottom, rgba(26,26,26,.30) 0%, rgba(26,26,26,.22) 40%, rgba(26,26,26,.58) 100%); }
.hero .eyebrow strong { font-weight: 600; }

/* ---- Primary CTA: clay (Janis, 28 Oct 2026) ----
   One clay call-to-action per section, per the design system's Button "primary"
   (components/core/Button.jsx): clay fill, INK label — paper on clay is only
   2.9:1, ink is 5.55:1 — hover deepens to clay-deep. Defined last so it beats
   .btn-ghost / .btn-dark if combined. */
.btn-primary { background: #C4834A; border-color: #C4834A; color: #1A1A1A; }
.btn-primary:hover { background: #A66A37; border-color: #A66A37; color: #1A1A1A; }