/* ============================================================
   BERGHAUS WEISSBRIACH — DESIGN CONTRACT
   This file is the contract. Builders import it and must not
   invent colours, radii, spacing steps or type sizes outside it.

   Direction  : Hotel/travel row bent one notch toward Storytelling.
                Swiss restraint + Motion-led. Elegant, welcoming, alpine.
   Palette    : derived from the client's own stag logo
                (#596746 forest, #698C67 moss, #8B7F6F taupe, #ABB1A1 sage)
   Type       : Petrona (display) + Hanken Grotesk (body) — new pairing,
                never shipped on a Bracmort site before. Self-hosted.
   Depth      : ONE-STEP SURFACE SHIFT (ground -> white card).
                ZERO box-shadow on cards and buttons. Hairline borders only.
   Radius     : SQUARE register, 2px. Not 8px, not rounded-2xl.
   Accent     : forest green is the ONLY chromatic accent. Taupe and sage
                are neutrals, not second accents.
   Motion     : COMPLEX tier (scrub-driven, <=2 pinned sections).
   ============================================================ */

:root {
  /* ---- ground & surface (one-step shift; never pure #fff as page ground) ---- */
  --ground:        #F4F2EC;   /* warm paper — the page */
  --ground-2:      #EBE8DF;   /* subtle band separation */
  --surface:       #FFFFFF;   /* cards only, on the tinted ground */

  /* ---- ink ---- */
  --ink:           #1B2118;   /* headlines, near-black with green cast */
  --ink-2:         #47513F;   /* body copy */
  --ink-3:         #6E7767;   /* captions, meta */

  /* ---- the one chromatic accent (client's logo green) ---- */
  --forest:        #596746;   /* buttons, links, active states. 6.08:1 on white */
  --forest-deep:   #2E3A26;   /* dark full-bleed bands */
  --forest-night:  #161C13;   /* deepest band — the dusk/fire section */
  --moss:          #698C67;   /* hover lift on forest, never a second accent */

  /* ---- neutrals (NOT accents) ---- */
  --taupe:         #8B7F6F;
  --sage:          #ABB1A1;
  --snow:          #E4EBEF;   /* cool tint reserved for winter sections */

  /* ---- text on dark ---- */
  --on-dark:       #F2F0E9;
  --on-dark-dim:   rgba(242,240,233,0.68);
  --on-dark-faint: rgba(242,240,233,0.42);

  /* ---- hairlines (the only depth device besides the surface shift) ---- */
  --line:          rgba(27,33,24,0.14);
  --line-soft:     rgba(27,33,24,0.08);
  --line-on-dark:  rgba(242,240,233,0.18);

  /* ---- type families ---- */
  --display: 'Petrona', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- type scale ----
     Display:body ratio at desktop = 104/17 ≈ 6.1x  (target 4x min, 6–8x ideal)
     Line-height INVERTS with size: 0.92 display, 1.6 body. Tracking tightens as it grows. */
  --fs-hero:    clamp(2.55rem, 8.2vw, 6.5rem);    /* 40.8px -> 104px */
  --fs-h1:      clamp(2.1rem, 5.4vw, 4rem);       /* 33.6 -> 64 */
  --fs-h2:      clamp(1.7rem, 3.6vw, 2.75rem);    /* 27 -> 44 */
  --fs-h3:      clamp(1.28rem, 2vw, 1.6rem);      /* 20.5 -> 25.6 */
  --fs-lead:    clamp(1.06rem, 1.5vw, 1.32rem);   /* 17 -> 21 */
  --fs-body:    1.0625rem;                        /* 17px — never below 15 */
  --fs-small:   0.9375rem;                        /* 15px */
  --fs-label:   0.8125rem;                        /* 13px, uppercase tracked only */

  --lh-display: 0.92;
  --lh-h3:      1.15;
  --lh-body:    1.6;

  --tr-hero:   -0.035em;
  --tr-h1:     -0.03em;
  --tr-h2:     -0.022em;
  --tr-label:   0.16em;

  /* ---- shape: committed SQUARE register ---- */
  --r:      2px;   /* buttons, inputs, tags */
  --r-card: 2px;   /* cards sit in the same register */
  --r-pill: 2px;   /* deliberately NOT a pill — keeps one register */

  /* ---- rhythm (4/8 base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --section-y:   clamp(3.5rem, 8vw, 7rem);   /* 56 -> 112px */
  --page-max:    1280px;
  --measure:     60ch;                        /* running copy cap (~600px) */

  /* ---- motion: COMPLEX tier, one tier for the whole site ---- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-hover:  260ms;
  --t-reveal: 620ms;
  --t-band:   800ms;
}

/* ---------- reset floor ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1);  letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2);  letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3);  letter-spacing: -0.01em; line-height: var(--lh-h3); font-weight: 600; }
p  { margin: 0 0 1em; max-width: var(--measure); }

/* Numbers align without monospace — monospace is banned. */
.tnum { font-variant-numeric: tabular-nums; }

/* Uppercase tracked label — the ONLY place --fs-label is allowed. */
.label {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ink-3);
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--section-y); }

/* ---------- buttons: zero shadow, square register ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--body); font-size: var(--fs-small); font-weight: 600;
  padding: 0.95rem 1.6rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--t-hover) var(--e-out),
              color var(--t-hover) var(--e-out),
              border-color var(--t-hover) var(--e-out),
              transform var(--t-hover) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }          /* <=2px shift */
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--moss); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--forest); color: var(--forest); }
.btn-on-dark { background: transparent; color: var(--on-dark); border-color: var(--line-on-dark); }
.btn-on-dark:hover { background: var(--on-dark); color: var(--ink); }

/* ---------- cards: hairline or one-step fill, never a shadow ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}

/* ---------- dark bands ---------- */
.band-dark  { background: var(--forest-deep);  color: var(--on-dark); }
.band-night { background: var(--forest-night); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3,
.band-night h1, .band-night h2, .band-night h3 { color: var(--on-dark); }
.band-dark .label, .band-night .label { color: var(--on-dark-faint); }

/* ---------- focus ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* ---------- scroll reveal (COMPLEX tier) ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--e-out),
              transform var(--t-reveal) var(--e-out);
}
.reveal[data-d="1"].is-in { transition-delay: 70ms; }
.reveal[data-d="2"].is-in { transition-delay: 140ms; }
.reveal[data-d="3"].is-in { transition-delay: 210ms; }
.reveal[data-d="4"].is-in { transition-delay: 280ms; }
.reveal[data-d="5"].is-in { transition-delay: 350ms; }
.reveal[data-d="6"].is-in { transition-delay: 420ms; }

/* ---------- accessibility: motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .season-layer, .glow { display: none !important; }
}

/* Content must be visible with no JS at all. */
.no-js .reveal { opacity: 1; transform: none; }