/* ============================================================
   WEDGE TRAVEL — design system
   Quiet luxury · warm bone + ink + muted bronze · contemporary sans
   ============================================================ */

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

:root{
  /* palette */
  --paper:#FBF8F2;
  --bone:#F2ECE1;
  --bone-2:#E7DFD0;
  --bone-3:#DCD2BF;
  --ink:#16140F;
  --ink-2:#26221A;
  --ink-soft:#4A4438;
  --ink-mute:#7C7363;
  --line:#C7BBA3;
  --line-soft:rgba(22,20,15,.12);
  --bronze:#9C7C4C;
  --bronze-2:#B2925E;
  --bronze-deep:#6E5631;
  --bronze-tint:#EFE6D5;
  --on-dark:#EFE8DA;
  --on-dark-mute:#A89C84;

  /* type */
  --display:'Schibsted Grotesk', system-ui, sans-serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --section-y: clamp(72px, 11vw, 168px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--bronze);color:var(--paper);}

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:1620px; margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--bronze-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;background:var(--bronze);
  display:inline-block;
}
.eyebrow.no-tick::before{display:none;}

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; line-height:1.02; letter-spacing:-.022em; }
.display-xl{ font-size:clamp(44px, 8.2vw, 124px); font-weight:800; line-height:.96; letter-spacing:-.03em; }
.display-l{ font-size:clamp(34px, 5.4vw, 76px); font-weight:700; line-height:1.0; letter-spacing:-.025em; }
.display-m{ font-size:clamp(28px, 3.6vw, 50px); font-weight:700; line-height:1.04; letter-spacing:-.02em; }
.display-s{ font-size:clamp(22px, 2.4vw, 32px); font-weight:600; line-height:1.1; letter-spacing:-.015em; }

.lead{ font-size:clamp(19px,1.7vw,24px); line-height:1.5; color:var(--ink-soft); font-weight:400; }
.muted{ color:var(--ink-mute); }
.balance{ text-wrap:balance; }
.pretty{ text-wrap:pretty; }

.tm{ font-feature-settings:"sups"; } /* not used heavily; ® kept inline */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--body); font-weight:600; font-size:15px;
  letter-spacing:.01em;
  padding:14px 26px; border-radius:0;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-bronze{ background:var(--bronze-deep); border-color:var(--bronze-deep); color:var(--paper); }
.btn-bronze:hover{ background:transparent; color:var(--bronze-deep); }
.btn-on-dark{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-on-dark:hover{ background:transparent; color:var(--paper); }

/* text link with underline sweep */
.tlink{
  position:relative; font-weight:600; font-size:15px;
  display:inline-flex; gap:.5em; align-items:center;
  padding-bottom:3px;
}
.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);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arr{ transition:transform .4s var(--ease); }
.tlink:hover .arr{ transform:translateX(4px); }

/* ---------- hairlines ---------- */
.hr{ height:1px; background:var(--line-soft); border:0; margin:0; }
.dark .hr{ background:rgba(239,232,218,.16); }

/* ---------- dark blocks ---------- */
.dark{ background:var(--ink); color:var(--on-dark); }
.dark .eyebrow{ color:var(--bronze-2); }
.dark .eyebrow::before{ background:var(--bronze-2); }
.dark .lead{ color:var(--on-dark-mute); }
.dark .muted{ color:var(--on-dark-mute); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:76px; display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav .wrap-wide{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav.scrolled{ background:rgba(242,236,225,.86); backdrop-filter:saturate(140%) blur(14px); border-color:var(--line-soft); height:66px; }
.nav.on-light{ color:var(--ink); }
.nav.on-dark{ color:var(--on-dark); }
.nav.scrolled.on-dark{ color:var(--ink); }

.brand{ font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:.16em; }
.brand sup{ font-size:.5em; letter-spacing:0; top:-.9em; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-link{ font-size:14.5px; font-weight:500; letter-spacing:.01em; position:relative; padding:6px 0; opacity:.9; white-space:nowrap; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
.nav-link:hover{opacity:1;}
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.active{opacity:1;}
.nav-link.active::after{ transform:scaleX(1); background:var(--bronze); }
.nav-cta{
  font-size:14px; font-weight:600; padding:10px 20px; border:1px solid currentColor;
  letter-spacing:.02em; white-space:nowrap; transition:background .4s var(--ease), color .4s var(--ease);
}
/* mobile menu hidden on desktop; positioned only within mobile media query */
.mobile-menu{ display:none; }
.nav.on-light .nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav.on-dark:not(.scrolled) .nav-cta:hover{ background:var(--paper); color:var(--ink); }
.nav.scrolled .nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav-burger{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
  .nav-burger span{ width:24px;height:1.5px;background:currentColor;display:block;transition:.3s;}
  .mobile-menu{ position:fixed; inset:0; z-index:115; background:var(--ink); color:var(--on-dark);
    display:flex; flex-direction:column; justify-content:center; gap:8px; padding:40px var(--gutter);
    transform:translateY(-100%); transition:transform .6s var(--ease); }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{ font-family:var(--display); font-size:34px; font-weight:700; padding:10px 0; border-bottom:1px solid rgba(239,232,218,.12); }
}

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:var(--on-dark); padding-top:clamp(64px,8vw,110px); }
.footer a{ color:var(--on-dark-mute); transition:color .3s var(--ease); }
.footer a:hover{ color:var(--on-dark); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze-2); margin:0 0 18px; font-weight:500;}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:15px; }
.footer-brand{ font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:.1em; margin-bottom:18px; }
.footer-legal{ border-top:1px solid rgba(239,232,218,.14); margin-top:clamp(48px,6vw,80px); padding:30px 0 38px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.footer-legal p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--on-dark-mute); max-width:680px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px;} }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr;} }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s;}
.reveal.d2{ transition-delay:.16s;}
.reveal.d3{ transition-delay:.24s;}
.reveal.d4{ transition-delay:.32s;}
.reveal.d5{ transition-delay:.40s;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* clip-reveal for images */
.img-clip{ overflow:hidden; }
.img-clip img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
.img-clip.in img{ transform:scale(1); }

/* line-mask headline reveal (with descender buffer so glyphs aren't clipped) */
.mask-line{ display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em; }
.mask-line > span{ display:block; transform:translateY(120%); transition:transform 1.05s var(--ease); }
.mask-line.in > span{ transform:translateY(0); }

/* ---------- utility ---------- */
.media{ position:relative; overflow:hidden; background:var(--bone-2); }
.media img{ width:100%; height:100%; object-fit:cover; }
.kicker-num{ font-family:var(--mono); color:var(--bronze); font-size:13px; }
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}