/* ============================================================
   SVANSTUL LØYPELAG — shared design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  /* Brand greens */
  --green-900:#13261a;
  --green-850:#18301f;
  --green-800:#23412f;   /* brand primary — the ring */
  --green-700:#2f5440;
  --green-600:#3c6a50;
  --sage:#687f66;
  --sage-400:#8aa087;
  --sage-300:#a9bca5;

  /* Warm neutrals */
  --cream:#e7dfc2;       /* brand cream / parchment */
  --cream-200:#efe9d6;
  --cream-100:#f3eedd;
  --paper:#f6f4ec;       /* page background */
  --snow:#fcfcfc;
  --ink:#16221b;         /* body text */
  --ink-soft:#42514494;

  /* Status (earthy, muted) */
  --st-open:#3f7d4e;
  --st-open-bg:#e4eee2;
  --st-partial:#b8862f;
  --st-partial-bg:#f3ead2;
  --st-closed:#a8493a;
  --st-closed-bg:#f1ddd6;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);
  --radius:4px;
  --shadow:0 1px 2px rgba(20,40,28,.06),0 12px 32px -12px rgba(20,40,28,.22);
  --shadow-lg:0 30px 70px -30px rgba(19,38,26,.55);

  --font-display:'Anton',sans-serif;
  --font-sans:'Schibsted Grotesk',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.02;letter-spacing:-.01em}

/* ---- type helpers ---- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.05;
}
.eyebrow{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.mono{font-family:var(--font-mono)}
.measure{max-width:62ch}

/* Anton renders multi-line headings exactly one line short, so the last line
   bleeds onto the following element. These section headings can wrap to 2 lines
   and sit right above body copy — reserve the missing line with padding. */
.split h2,.toll h2,.why h2,.join h2,.intro h2,.dugnad h2,.trail h2,
.joinband h2,.trails__intro h2,.board__title h2,.tiers__head h2,
.board2__head h2,.endcta h2{padding-bottom:.9em}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,120px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--green-800);
  color:var(--cream);
  border-bottom:1px solid #ffffff14;
}
.site-head__bar{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand img{width:64px;height:64px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:1.18rem;letter-spacing:.04em;color:var(--cream);
}
.brand__sub{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--sage-400);margin-top:3px;
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  font-weight:600;font-size:.9rem;
  padding:9px 11px;border-radius:var(--radius);
  color:#e7dfc2cc;transition:.15s;white-space:nowrap;
}
.nav a:hover{color:var(--cream);background:#ffffff14}
.nav a.is-active{color:var(--green-800);background:var(--cream)}
.nav__cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:8px;padding:9px 14px;border-radius:100px;
  background:var(--cream);color:var(--green-800);font-weight:700;font-size:.88rem;white-space:nowrap;
}
.nav__cta:hover{background:#fff}
.nav__dot{width:8px;height:8px;border-radius:50%;background:var(--st-open);box-shadow:0 0 0 3px #3f7d4e44;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--cream);cursor:pointer;padding:6px}
.burger svg{width:28px;height:28px}

@media(max-width:980px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--green-800);padding:12px var(--gutter) 24px;gap:2px;
    border-bottom:1px solid #ffffff1a;transform:translateY(-130%);transition:.28s;margin:0}
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 12px;font-size:1rem}
  .nav__cta{margin:10px 0 0;justify-content:center;padding:13px}
  .burger{display:block}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;
  transition:.16s;
}
.btn--cream{background:var(--cream);color:var(--green-800)}
.btn--cream:hover{background:#fff;transform:translateY(-1px)}
.btn--green{background:var(--green-800);color:var(--cream)}
.btn--green:hover{background:var(--green-700)}
.btn--ghost{border-color:#ffffff44;color:var(--cream)}
.btn--ghost:hover{background:#ffffff14}
.btn--outline{border-color:var(--green-800);color:var(--green-800)}
.btn--outline:hover{background:var(--green-800);color:var(--cream)}
.btn__arrow{transition:.18s}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   STATUS CHIPS
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-weight:500;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px 5px 9px;border-radius:100px;
}
.chip__dot{width:8px;height:8px;border-radius:50%}
.chip--open{background:var(--st-open-bg);color:#2c6a3c}
.chip--open .chip__dot{background:var(--st-open)}
.chip--partial{background:var(--st-partial-bg);color:#8a6217}
.chip--partial .chip__dot{background:var(--st-partial)}
.chip--closed{background:var(--st-closed-bg);color:#8c3729}
.chip--closed .chip__dot{background:var(--st-closed)}

/* ============================================================
   IMAGE SLOTS / PLACEHOLDERS
   ============================================================ */
image-slot{
  --is-bg:#dfe5d8;
  background:
    repeating-linear-gradient(135deg,#0000 0 13px,#23412f0d 13px 14px),
    var(--is-bg);
}
.ph-label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:#23412f88;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--green-900);color:#e7dfc2cc;padding-block:64px 32px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-400);margin-bottom:16px;font-weight:500}
.foot a{display:block;padding:5px 0;color:#e7dfc2bb}
.foot a:hover{color:var(--cream)}
.foot__bottom a{display:inline;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#e7dfc240}
.foot__bottom a:hover{color:var(--cream)}
.foot__brand{display:flex;gap:14px;align-items:flex-start}
.foot__brand img{width:64px;height:64px}
.foot__bottom{margin-top:48px;padding-top:24px;border-top:1px solid #ffffff14;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:#e7dfc277}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ============================================================
   UTIL
   ============================================================ */
.divider{height:1px;background:#23412f1f;border:0;margin:0}
.kicker-row{display:flex;align-items:center;gap:14px;color:var(--sage)}
.kicker-row .line{height:1px;width:46px;background:currentColor;opacity:.5}
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.fade-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}.nav__dot{animation:none}}