/* ============================================================
   SIELANA ADVENTURES — Design System / Tokens
   Aesthetic: "Alpine Editorial"
   Bone paper base · warm ink · one glacier-blue accent
   Bricolage Grotesque (display) · Hanken Grotesk (body)
   IBM Plex Mono (expedition data readouts)
   ============================================================ */

:root {
  /* ---- Palette: base ---- */
  --bone:        #F2EEE6;   /* paper base */
  --bone-2:      #EAE4D8;   /* deeper panel */
  --snow:        #FBFAF6;   /* card / surface */
  --ink:         #17130E;   /* near-black, warm */
  --ink-2:       #322C24;
  --stone:       #6A6357;   /* muted body text */
  --stone-2:     #9A9384;   /* faint labels */
  --line:        rgba(23,19,14,0.14);
  --line-strong: rgba(23,19,14,0.30);

  /* ---- Accent: winter / ski vertical = glacier ---- */
  --glacier:        #1C5A78;
  --glacier-bright: #2E86AB;
  --glacier-deep:   #123C50;
  --ice:            #CFE1EA;
  --ice-wash:       rgba(28,90,120,0.08);

  /* activity accent tokens (system scales past winter) */
  --acc-ski:   #1C5A78;   /* narty / snowboard */
  --acc-surf:  #C56B3E;   /* future */
  --acc-kite:  #3E8A6E;   /* future */

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* fluid scale */
  --fs-display:  clamp(3.1rem, 9vw, 8.5rem);
  --fs-h1:       clamp(2.6rem, 6vw, 5rem);
  --fs-h2:       clamp(2rem, 4.2vw, 3.6rem);
  --fs-h3:       clamp(1.35rem, 2.2vw, 1.9rem);
  --fs-lead:     clamp(1.15rem, 1.6vw, 1.45rem);
  --fs-body:     1.06rem;
  --fs-sm:       0.92rem;
  --fs-label:    0.72rem;

  /* ---- Space ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-5: 3rem;   --sp-6: 4.5rem;
  --sp-7: 6.5rem;  --sp-8: 9rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1360px;

  /* ---- Misc ---- */
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(23,19,14,.06), 0 8px 30px rgba(23,19,14,.09);
  --shadow-lift: 0 2px 4px rgba(23,19,14,.08), 0 24px 60px rgba(23,19,14,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* clip, not hidden — sticky safe on iOS */
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }

/* paper grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-7); }
.section-tight { padding-block: var(--sp-6); }

/* ============================================================
   Typography helpers
   ============================================================ */
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.035em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -0.03em; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }

/* mono expedition label */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--stone);
}
.label--accent { color: var(--glacier); }
.label--light { color: rgba(255,255,255,.75); }

/* eyebrow with tick */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500;
  color: var(--glacier);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--glacier); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--ink);
  border-radius: 100px;
  background: var(--ink); color: var(--bone);
  transition: transform .5s var(--ease-out), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn .arw { transition: transform .5s var(--ease-out); }
.btn:hover { background: var(--glacier); border-color: var(--glacier); }
.btn:hover .arw { transform: translateX(5px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--light:hover { background: var(--glacier); border-color: var(--glacier); color: #fff; }
.btn--lg { padding: 1.2rem 2.1rem; font-size: .84rem; }

/* text link with underline sweep */
.tlink {
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
  padding-bottom: 3px; position: relative;
}
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.tlink:hover::after { transform: scaleX(1); }
.tlink:hover .arw { transform: translateX(4px); }
.tlink .arw { transition: transform .4s var(--ease-out); }

/* ============================================================
   Badges + difficulty meter
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .42rem .7rem; border-radius: 100px;
  background: var(--ice-wash); color: var(--glacier);
  border: 1px solid rgba(28,90,120,.2);
}
.badge--solid { background: var(--glacier); color: #fff; border-color: var(--glacier); }
.badge--warn { background: #F4E3D2; color: #9A5B23; border-color: rgba(154,91,35,.25); }
.badge--ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }

/* difficulty as a mountain-line meter (4 rising bars) */
.meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.meter i { width: 5px; background: var(--line-strong); border-radius: 1px; transition: background .3s; }
.meter i:nth-child(1){ height: 30%; }
.meter i:nth-child(2){ height: 55%; }
.meter i:nth-child(3){ height: 78%; }
.meter i:nth-child(4){ height: 100%; }
.meter[data-level="1"] i:nth-child(-n+1),
.meter[data-level="2"] i:nth-child(-n+2),
.meter[data-level="3"] i:nth-child(-n+3),
.meter[data-level="4"] i:nth-child(-n+4) { background: var(--glacier); }
.meter--light i { background: rgba(255,255,255,.3); }
.meter--light[data-level="1"] i:nth-child(-n+1),
.meter--light[data-level="2"] i:nth-child(-n+2),
.meter--light[data-level="3"] i:nth-child(-n+3),
.meter--light[data-level="4"] i:nth-child(-n+4) { background: #fff; }

/* ============================================================
   Media grade — unifies stock into one art-directed system
   ============================================================ */
.media { position: relative; overflow: hidden; background: var(--bone-2); }
.media img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.99); }
.media--tint::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(18,60,80,.12), rgba(23,19,14,.04) 55%, rgba(23,19,14,.42));
  mix-blend-mode: multiply; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Ukrycie tylko gdy JS potwierdzony (klasa .js na <html>). Bez JS albo gdy
   obserwator przewijania kogoś przegapi, treść jest normalnie widoczna —
   niewidoczna strona główna to gorszy błąd niż brak animacji. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}