/* Salish Skies web brand layer | shared foundation for treatments A and B (draft, not approved)
   Aligns the live site with ADIW v14, Committee Brief v4 and the official logo.
   Loaded AFTER the existing page styles, so it re-skins without changing markup, content or motion.
   Fonts: Saira (existing, OFL) for display and labels; Noto Serif (OFL, Committee Brief v4) for reading text. */

@font-face{ font-family:"Noto Serif"; src:url("/assets/fonts/noto-serif-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Noto Serif"; src:url("/assets/fonts/noto-serif-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Noto Serif"; src:url("/assets/fonts/noto-serif-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root{
  /* brand palette (print-derived) mapped onto the site's existing token names */
  --night:#0B1220;          /* was #060912; Committee Brief v4 cover navy */
  --void:#070c17;
  --cold:#f4efe4;           /* was #dfeaff (cool blue-white); warm ivory-white like ADIW headline white */
  --ink:#d6dbe6;            /* reading text on night */
  --faint:#9aa6c0;          /* was #7c89a6; lifted for small-text contrast (7.7:1) */
  --blue:#e2c08f;           /* links/focus/accent now gold-light; the cool blue retires to the starfield only */
  --amber:#e2c08f;          /* was #ffcf9e; ADIW gold on dark */
  --gold:#C89B5C;           /* Committee Brief v4 gold: rules, dots, fills */
  --gold-light:#e2c08f;     /* gold for text on navy (10.9:1) */
  --gold-deep:#7a5a2a;      /* gold for text on ivory (5.8:1) */
  --ivory:#F7F4EC;          /* Committee Brief v4 interior */
  --ivory-2:#efe9dc;
  --navy-ink:#0B1220;
  --muted-ink:#4a5263;      /* body on ivory (7.1:1) */
  --teal:#2C5F5B;           /* editorial accent, sparingly */
  --line:rgba(226,192,143,0.18);
  --line-ivory:rgba(122,90,42,0.28);
  --sans:"Saira", "Saira Variable", system-ui, sans-serif;
  --serif:"Saira", "Saira Variable", system-ui, sans-serif; /* existing display var stays Saira */
  --reading:"Noto Serif", Georgia, serif;
}

/* body tint: navy instead of near-black, softer vignette */
body{ background:var(--night); }
body::after{ background:radial-gradient(125% 120% at 50% 18%, transparent 40%, rgba(5,8,16,0.6) 100%); }

/* ---- type: ADIW-style tracked uppercase display, serif reading text ---- */
.display{ font-weight:300; text-transform:uppercase; letter-spacing:.06em; line-height:1.12; font-size:clamp(2rem, 5.2vw, 4.1rem); }
.display.sm{ font-size:clamp(1.7rem, 4.1vw, 3rem); }
.display em.amber, em.amber{ color:var(--gold-light); }
.display::after{ content:""; display:block; width:56px; height:1px; background:var(--gold); margin-top:1.5rem; }
#signature .display::after, #invite .display::after, .center[style*="center"] .display::after{ margin-left:auto; margin-right:auto; }
.eyebrow{ color:var(--gold-light); font-weight:500; letter-spacing:.26em; }
.eyebrow::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-right:.75em; vertical-align:.12em; }
#signature .eyebrow::before, #invite .eyebrow::before{ display:none; }
.lead, .place-body, .local-point p, .mode p, .aud-card p, .qa .a, .feature p, .choose-card p.body, .form-note, .form-privacy, .ft-sub{ font-family:var(--reading); font-weight:400; }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.8; }
.place-body{ font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.75; color:var(--ink); }
.island-line{ font-family:var(--reading); font-style:italic; }
.hero-tag{ font-family:var(--reading); font-style:italic; color:var(--cold); letter-spacing:.01em; }
.hero-eyebrow{ letter-spacing:.34em; }
.hero-eyebrow::before{ display:none; }
h3, .local-point h3, .mode h3, .aud-card h3, .qa .q, .feature h3, .choose-card h3{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(.92rem,1.2vw,1.05rem); line-height:1.4; color:var(--cold); }
.qa .q{ font-size:clamp(.95rem,1.3vw,1.08rem); }

/* gold rules replace the cool hairlines */
.local-point, .mode, .feature, .qa, .qa .row{ border-color:var(--line); }
.local-point, .mode, .feature{ border-top:1px solid var(--line); position:relative; }
.local-point::before, .mode::before, .feature::before{ content:""; position:absolute; top:-1px; left:0; width:40px; height:1px; background:var(--gold); }

/* ---- side constellations: gold, quieter ---- */
.side-motif{ color:var(--gold-light); }

/* ---- hero: keep logo animation; refine the route buttons ---- */
.hero-routes .btn{ padding:.85rem 1.6rem; font-size:.72rem; letter-spacing:.22em; }
.btn-primary{ background:var(--gold-light); color:var(--night); }
.btn-primary:hover{ background:#ecd1a6; box-shadow:0 0 36px -10px rgba(226,192,143,.7); }
.btn-ghost{ border-color:rgba(226,192,143,.45); color:var(--cold); }
.btn-ghost:hover{ border-color:var(--gold-light); }
.hero-status{ color:var(--faint); font-family:var(--reading); font-style:italic; }
.hero-status a{ font-style:normal; font-family:var(--sans); }

/* ---- nav: navy glass, gold accents ---- */
.ss-nav{ background:rgba(11,18,32,.78); border-bottom-color:rgba(226,192,143,.16); }
.ss-nav a.navlink{ color:var(--ink); }
.ss-nav a.navlink:hover, .ss-nav a.navlink[aria-current="page"]{ border-color:var(--gold); color:var(--cold); }
.ss-nav a.navlink.wed{ color:var(--gold-light); }
.ss-nav .nav-cta{ background:transparent; color:var(--gold-light); border:1px solid rgba(226,192,143,.55); }
.ss-nav .nav-cta:hover{ background:rgba(226,192,143,.12); }

/* ---- "Choose your night": constellations, not cards ---- */
.choose-grid{ background:none; border:0; gap:clamp(2rem,4vw,3.6rem); }
.choose-card{ background:none; padding:1.6rem 0 0; border-top:1px solid var(--line); position:relative; }
.choose-card::before{ content:""; position:absolute; top:-1px; left:0; width:40px; height:1px; background:var(--gold); }
.choose-card:hover{ background:none; }
.choose-card .motif{ color:var(--cold); opacity:.6; width:132px; }
.choose-card.wed .motif{ color:var(--gold-light); opacity:1; }
.choose-card .kicker{ color:var(--gold-light); letter-spacing:.24em; }
.choose-card .kicker::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:.6em; vertical-align:.15em; }
.choose-card h3{ text-transform:none; letter-spacing:.01em; font-family:var(--reading); font-weight:400; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.35; }
.choose-card .go, .choose-card.wed .go{ color:var(--gold-light); border-color:rgba(226,192,143,.4); }

/* ---- Island horizon in "Salish Skies is of this coast" (illustrative artwork) ---- */
.place{ padding-bottom:0; }
.place .center{ position:relative; z-index:2; }
.ss-horizon{ position:relative; margin:clamp(2.5rem,7vh,5rem) calc(-1 * clamp(16px,7vw,96px)) 0; height:clamp(170px,26vw,360px);
  background:url("/assets/img/landscape-band-v1.webp") center 62%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 38%, #000 70%, transparent 100%); }
.ss-horizon .credit{ position:absolute; right:clamp(16px,4vw,48px); bottom:18%; font-size:.66rem; color:rgba(244,239,228,.7); letter-spacing:.04em; }

/* ---- signature + practical bits ---- */
.feature .num{ color:var(--gold-light); }

/* ---- audiences: keep grid, warmer surface ---- */
.aud-grid{ background:var(--line); border-color:var(--line); }
.aud-card{ background:var(--night); }
.aud-card:hover{ background:#0f182b; }
.aud-card p{ color:var(--ink); }

/* ---- invitation + form ---- */
.route-callout{ border-color:rgba(226,192,143,.4); background:rgba(226,192,143,.06); }
.route-callout p{ font-family:var(--reading); font-style:italic; }
.field label{ color:var(--faint); letter-spacing:.2em; }
.field input, .field textarea, .field select{ border-bottom-color:rgba(226,192,143,.28); color:var(--cold); }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold-light); }
.field select option{ background:var(--night); }
.req{ color:var(--gold-light); }
.cta{ background:var(--gold-light); color:var(--night); }
.cta:hover{ background:#ecd1a6; box-shadow:0 0 44px -8px rgba(226,192,143,.6); }
:focus-visible, .cta:focus-visible, .btn:focus-visible{ outline-color:var(--gold-light); }
a{ color:var(--gold-light); }

/* ---- footer ---- */
.footline{ color:var(--faint); }
.ss-tagline{ font-family:var(--reading); font-style:italic; color:var(--gold-light); font-size:1.08rem; }
.ss-footer-links a{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){ .ss-horizon{ transition:none; } }

/* uppercase sets wider: give display lines more room than the mixed-case original */
.promise .display{ max-width:24ch; }
.craft .display, #choose .display, .practical .display{ max-width:26ch; }