/* ==========================================================================
   Himalayan Plein-Air — base.css
   Colour tokens, typography, reset and buttons. Loaded on every page.
   ========================================================================== */

/* --- Header font -----------------------------------------------------------
   Ambicase Fatface needs a WEB licence (Adobe Fonts or MyFonts/Type Network).
   Once licensed, EITHER:
     a) Adobe Fonts: add its <link> tag in each page <head> and rename the
        family below to the name Adobe gives you, OR
     b) Self-host: put ambicase-fatface.woff2 in assets/fonts/ and uncomment:

   @font-face{
     font-family:"Ambicase Fatface";
     src:url("../fonts/ambicase-fatface.woff2") format("woff2");
     font-weight:400; font-style:normal; font-display:swap;
   }
   Until then, Abril Fatface (free, SIL Open Font Licence) stands in.
---------------------------------------------------------------------------- */

/* Self-hosted, open-licence fonts (no Google Fonts request needed) */
@font-face{font-family:"Abril Fatface";src:url("../fonts/abril-fatface.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Brand — from the logo */
  --sage:#7F8C6B;
  --sage-deep:#4E5A40;
  --snow:#FFC620;          /* logo snowcap — accents on dark */
  --snow-deep:#E8B21C;     /* rules/dots on light */

  /* Landscape palette */
  --alpine:#1F2A24;
  --alpine-2:#26332C;
  --alpine-3:#304037;
  --terracotta:#C05C46;
  --terracotta-deep:#A84D39;
  --sky:#4A739C;
  --paper:#F9F8F5;
  --paper-2:#F1EEE6;
  --paper-3:#E7E2D6;

  /* Text */
  --ink:#1F2A24;
  --ink-2:rgba(31,42,36,.78);
  --ink-3:rgba(31,42,36,.6);
  --line:rgba(31,42,36,.12);
  --on-dark:rgba(249,248,245,.9);
  --on-dark-2:rgba(249,248,245,.66);
  --line-dark:rgba(249,248,245,.14);

  /* Type */
  --display:"Ambicase Fatface","Abril Fatface","Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Layout */
  --max:1200px;
  --gutter:32px;
  --header-h:76px;
  --r:3px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px}
body{
  background:var(--paper);color:var(--ink-2);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul[role="list"],ol[role="list"]{list-style:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:2px}
::selection{background:var(--snow);color:var(--alpine)}

.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--alpine);color:var(--paper);padding:12px 18px;border-radius:var(--r);text-decoration:none;font-weight:600}
.skip-link:focus{top:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Typography ---------------------------------------------------------- */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;color:var(--alpine);line-height:1.08;letter-spacing:-.005em}
h2{font-size:clamp(34px,4.4vw,56px);margin-bottom:20px}
h3{font-size:clamp(22px,2vw,26px);line-height:1.2}
h4{font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
p{max-width:68ch}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--ink-3)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.eyebrow::before{content:"";flex:0 0 28px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.center{justify-content:center}
.dark .eyebrow,.on-dark .eyebrow{color:var(--snow)}
.dark,.on-dark{color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}
.dark .lead,.on-dark .lead{color:var(--on-dark-2)}
.num{font-variant-numeric:tabular-nums}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  --bg:transparent;--fg:currentColor;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:var(--r);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font:600 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{--bg:var(--terracotta);--fg:var(--paper);--bd:var(--terracotta)}
.btn-primary:hover{--bg:var(--terracotta-deep);--bd:var(--terracotta-deep);box-shadow:0 10px 24px -12px rgba(192,92,70,.7)}
.btn-secondary{--fg:var(--alpine);--bd:var(--alpine)}
.btn-secondary:hover{--bg:var(--alpine);--fg:var(--paper)}
.dark .btn-secondary,.on-dark .btn-secondary{--fg:var(--paper);--bd:rgba(249,248,245,.6)}
.dark .btn-secondary:hover,.on-dark .btn-secondary:hover{--bg:var(--paper);--fg:var(--alpine);--bd:var(--paper)}
.btn-snow{--bg:var(--snow);--fg:var(--alpine);--bd:var(--snow)}
.btn-snow:hover{--bg:#FFD24D;--bd:#FFD24D}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}

/* --- Tags & badges ------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font:600 12px/1 var(--sans);letter-spacing:.04em;background:var(--terracotta);color:var(--paper)}
.badge.snow{background:var(--snow);color:var(--alpine)}
.badge.sage{background:var(--sage);color:var(--paper)}
.badge.outline{background:transparent;border:1px solid currentColor}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge .dot.live{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.nw{white-space:nowrap}