/* ─────────────────────────── Liz's Safari — front door ───────────────────────────
   Warm lodge light. Teak, cream, amber, leaf. Nothing decorative that isn't earned.
──────────────────────────────────────────────────────────────────────────────── */

:root{
  --cream:#fbf5ea;
  --sand:#f2e6cf;
  --paper:#fffdf8;
  --teak:#4a2f1b;
  --ink:#241a10;
  --ink-soft:#6b5842;
  --ink-faint:#a3927b;
  --amber:#c0761d;
  --amber-hot:#e09433;
  --leaf:#3f6b3a;
  --deep:#14110c;
  --line:rgba(74,47,27,.16);

  --shell:min(1180px,92vw);
  --r:18px;
  --ease:cubic-bezier(.22,.68,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(1rem,.55vw + .9rem,1.09rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit}

h1,h2,h3,.display{
  font-family:"Bespoke Slab","Satoshi",Georgia,serif;
  font-weight:700;line-height:1.05;letter-spacing:-.015em;margin:0;
  text-wrap:balance;
}
.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 14px;
}
.lede{font-size:clamp(1.06rem,.7vw + .92rem,1.32rem);line-height:1.55;color:var(--ink-soft);max-width:56ch}

/* ───────────────────────────── header ───────────────────────────── */
.top{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(18px,4vw,42px);
  background:rgba(251,245,234,0);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
}
.top.stuck{background:rgba(251,245,234,.9);border-bottom-color:var(--line);backdrop-filter:blur(14px) saturate(1.2)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper);transition:color .4s var(--ease)}
.top.stuck .brand{color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:"Bespoke Slab",Georgia,serif;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.top nav{display:flex;gap:4px}
.top nav a{
  text-decoration:none;font-size:.88rem;font-weight:600;color:rgba(255,253,248,.82);
  padding:8px 13px;border-radius:999px;transition:background .25s,color .4s var(--ease)
}
.top.stuck nav a{color:var(--ink-soft)}
.top nav a:hover{background:rgba(255,255,255,.16)}
.top.stuck nav a:hover{background:rgba(74,47,27,.08);color:var(--ink)}
@media (max-width:720px){.top nav a:not(.nav-key){display:none}}

/* ───────────────────────────── hero ───────────────────────────── */
.hero{position:relative;min-height:min(94svh,900px);display:grid;align-items:end;overflow:hidden;background:var(--deep)}
.hero .bleed{position:absolute;inset:0}
.hero .bleed video,.hero .bleed img{width:100%;height:100%;object-fit:cover}
.hero .bleed::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(20,17,12,.96) 0%,rgba(20,17,12,.86) 26%,rgba(20,17,12,.5) 54%,rgba(20,17,12,.14) 78%,rgba(20,17,12,.42) 100%);
}
@media (max-width:720px){
  .hero .bleed::after{background:linear-gradient(to top,rgba(20,17,12,.97) 0%,rgba(20,17,12,.9) 40%,rgba(20,17,12,.62) 70%,rgba(20,17,12,.4) 100%)}
}
.hero-in{position:relative;width:var(--shell);margin:0 auto;padding:0 0 clamp(52px,7vw,96px);color:var(--paper)}
.hero h1{font-size:clamp(2.9rem,7.4vw,5.6rem);color:var(--paper);max-width:19ch}
.hero .lede{color:rgba(255,253,248,.84);margin:20px 0 0;max-width:48ch}
.hero .eyebrow,.band-in .eyebrow{color:#f0b45f;text-shadow:0 1px 10px rgba(20,17,12,.85)}
.hero h1,.band-in h2{text-shadow:0 2px 26px rgba(20,17,12,.42)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  font-family:"Satoshi",sans-serif;font-size:.97rem;font-weight:700;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--ease),background .22s,border-color .22s,box-shadow .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn--go{background:var(--amber-hot);color:#2a1704;box-shadow:0 10px 26px -12px rgba(224,147,51,.9)}
.btn--go:hover{background:#eda547}
.btn--ghost{border-color:rgba(255,253,248,.42);color:var(--paper)}
.btn--ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.1)}
.btn--dark{background:var(--teak);color:var(--cream)}
.btn--dark:hover{background:#5d3c23}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--teak);background:rgba(74,47,27,.05)}
.btn svg{width:17px;height:17px;flex:none}

/* ───────────────────────────── sections ───────────────────────────── */
section{position:relative}
[id]{scroll-margin-top:78px}
.shell{width:var(--shell);margin:0 auto}
.pad{padding:clamp(76px,10vw,146px) 0}
.head{max-width:64ch;margin-bottom:clamp(38px,5vw,62px)}
.head h2{font-size:clamp(2rem,4vw,3.15rem)}
.head .lede{margin:18px 0 0}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,68px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.frame{
  border-radius:var(--r);overflow:hidden;background:var(--sand);
  box-shadow:0 34px 70px -34px rgba(36,26,16,.5),0 2px 0 rgba(255,255,255,.7) inset;
}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.frame--tall img{aspect-ratio:3/4}

.note{
  margin-top:26px;padding:16px 20px;border-left:3px solid var(--amber);
  background:rgba(192,118,29,.07);border-radius:0 12px 12px 0;
  font-size:.95rem;line-height:1.55;color:var(--ink-soft)
}
.note strong{color:var(--ink)}

/* the three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
@media (max-width:920px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.door:hover{transform:translateY(-5px);box-shadow:0 30px 56px -30px rgba(36,26,16,.42)}
.door .shot{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sand)}
.door .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.door:hover .shot img{transform:scale(1.05)}
.door .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.door h3{font-size:1.4rem}
.door p{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.door .go{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber)
}
.door .go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.door:hover .go svg{transform:translateX(4px)}
.tag{
  position:absolute;top:13px;left:13px;z-index:2;
  padding:5px 12px;border-radius:999px;background:var(--amber-hot);color:#2a1704;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.tag--soon{background:rgba(20,17,12,.78);color:rgba(255,253,248,.92)}

/* full-bleed moving bands */
.band{position:relative;min-height:min(78svh,720px);display:grid;place-items:center;overflow:hidden;background:var(--deep)}
.band .bleed{position:absolute;inset:0}
.band .bleed video,.band .bleed img{width:100%;height:100%;object-fit:cover}
.band .bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,17,12,.5),rgba(20,17,12,.24) 42%,rgba(20,17,12,.82))}
.band-in{position:relative;width:var(--shell);color:var(--paper);text-align:center;padding:clamp(48px,7vw,90px) 0}
.band-in h2{font-size:clamp(1.9rem,4.4vw,3.4rem);color:var(--paper);max-width:24ch;margin:0 auto}
.band-in p{color:rgba(255,253,248,.85);max-width:52ch;margin:18px auto 0;font-size:clamp(1rem,.6vw + .9rem,1.2rem)}

/* the gallery */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.tile{
  position:relative;border-radius:var(--r);overflow:hidden;margin:0;
  background:var(--sand);border:1px solid var(--line);
}
.tile--full{grid-column:1 / -1}
@media (max-width:640px){.gal{grid-template-columns:1fr}}
.tile img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{
  position:absolute;inset:auto 0 0;padding:44px 20px 18px;
  background:linear-gradient(to top,rgba(20,17,12,.9),rgba(20,17,12,0));
  color:var(--paper);
}
.tile figcaption b{display:block;font-family:"Bespoke Slab",serif;font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.tile figcaption span{display:block;margin-top:3px;font-size:.86rem;color:rgba(255,253,248,.78)}

/* the roster */
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(20px,3vw,40px)}
.roster h3{
  font-family:"Satoshi",sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.roster ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.roster li{font-size:.95rem;color:var(--ink-soft);line-height:1.42}

/* footer */
.foot{background:var(--deep);color:rgba(255,253,248,.74);padding:clamp(58px,7vw,92px) 0 40px}
.foot .shell{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,60px)}
@media (max-width:820px){.foot .shell{grid-template-columns:1fr}}
.foot h2{color:var(--paper);font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:22ch}
.foot p{font-size:.95rem;line-height:1.6;margin:14px 0 0;max-width:52ch}
.credits{display:grid;gap:16px;align-content:start}
.credits div{padding-bottom:14px;border-bottom:1px solid rgba(255,253,248,.14)}
.credits span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,248,.5);margin-bottom:4px}
.credits b{font-family:"Bespoke Slab",serif;font-size:1.06rem;font-weight:700;color:var(--paper)}
.rule{margin:clamp(38px,5vw,58px) auto 0;padding-top:22px;border-top:1px solid rgba(255,253,248,.14);font-size:.83rem;color:rgba(255,253,248,.5)}

/* reveal */
.rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.door:hover,.tile:hover img,.door:hover .shot img{transform:none}
}