@font-face{font-family:'Bitter';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/bitter-400.woff2') format('woff2');}
@font-face{font-family:'Bitter';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/bitter-600.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/karla-400.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/karla-500.woff2') format('woff2');}
@font-face{font-family:'Karla';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/karla-700.woff2') format('woff2');}

:root{
  --pine:#1f3d34;
  --pine-deep:#122820;
  --pine-mid:#2d4f43;
  --sand:#f3e8cf;
  --sand-deep:#e8d8b4;
  --sand-line:rgba(31,61,52,.14);
  --sea:#3f7d8c;
  --sea-deep:#2c5c68;
  --sea-light:#d7e8e4;
  --sun:#e2963f;
  --sun-deep:#c67d2e;
  --ink:#2a3530;
  --ink-soft:#5a6960;
  --paper:#fffcf5;
  --display:'Bitter', Georgia, serif;
  --body:'Karla', -apple-system, 'Segoe UI', sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.76,0,.24,1);
  --gutter:clamp(1.5rem, 2.6vw, 2.5rem);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }
body{font-family:var(--body); background:var(--sand); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--sun-deep); outline-offset:3px;}
.skip-link{
  position:absolute; left:1rem; top:-60px; background:var(--sun); color:var(--pine-deep);
  padding:.7rem 1.2rem; font-size:.85rem; font-weight:700; z-index:1000; transition:.3s var(--ease-out);
}
.skip-link:focus{top:1rem;}
.container{max-width:1180px; margin:0 auto; padding:0 var(--gutter);}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.15; color:var(--pine-deep); text-wrap:balance;}
h1{font-size:clamp(2.3rem,4.6vw,4.4rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
h3{font-size:1.25rem;}
p{line-height:1.7; color:var(--ink-soft); font-size:1rem;}
.on-dark{color:var(--sand);} .on-dark p{color:#c3d2ca;} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--sand);}
.section-tag{text-align:center; margin-bottom:3rem;}
.kicker{
  display:inline-block; font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sea-deep); border-bottom:2px solid var(--sun); padding-bottom:.3rem; margin-bottom:1rem;
}
.page-hero .kicker{color:var(--sun); border-bottom-color:var(--sun);}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.9rem; border:2px solid var(--pine); color:var(--pine-deep); font-family:var(--body); font-size:.86rem; font-weight:700; border-radius:3px; transition:.4s var(--ease-out); background:transparent;}
.btn:hover{background:var(--pine); color:var(--sand);}
.btn-solid{background:var(--sun); color:var(--pine-deep); border-color:var(--sun);}
.btn-solid:hover{background:var(--sun-deep); border-color:var(--sun-deep); box-shadow:0 14px 28px -12px rgba(226,150,63,.5); transform:translateY(-1px);}
.btn-light{border-color:rgba(255,255,255,.6); color:var(--sand);}
.btn-light:hover{background:var(--sand); color:var(--pine-deep); border-color:var(--sand);}

/* ---------- NAV ---------- */
.site-nav{position:sticky; top:0; z-index:1000; background:var(--pine-deep);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:1.5rem;}
.nav-brand{font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--sand); flex-shrink:0;}
.nav-brand b{color:var(--sun); font-style:normal;}
.nav-links{display:flex; align-items:center; gap:2.1rem; list-style:none;}
.nav-links a{font-family:var(--body); font-size:.82rem; color:#bcd0c6; font-weight:700; padding:.5rem 0; position:relative; transition:.25s var(--ease-out);}
.nav-links a:hover, .nav-links a.active{color:var(--sand);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--sun);}
.nav-phone{font-size:.82rem; color:var(--sun); font-weight:700; flex-shrink:0;}
.nav-toggle{display:none; background:none; border:0; width:26px; height:20px; position:relative; z-index:1001; cursor:pointer; flex-shrink:0;}
.nav-toggle span,.nav-toggle i{content:""; position:absolute; left:0; right:0; height:2px; background:var(--sand); transition:.3s var(--ease-out); display:block;}
.nav-toggle i.top{top:0;} .nav-toggle span{top:9px;} .nav-toggle i.bot{top:18px;}
.nav-toggle[aria-expanded="true"] i.top{transform:translateY(9px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] i.bot{transform:translateY(-9px) rotate(-45deg);}
.nav-toggle[aria-expanded="true"] span{opacity:0;}

/* ---------- HERO (postcard) ---------- */
.hero{background:var(--pine-deep); position:relative; padding:clamp(3.5rem,7vw,6rem) 0 clamp(4.5rem,9vw,7rem); overflow:hidden;}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px; background:var(--sand);
  clip-path:polygon(0 100%,0 40%,4% 46%,9% 36%,14% 48%,19% 34%,24% 50%,29% 38%,34% 52%,39% 36%,44% 48%,49% 34%,54% 50%,59% 38%,64% 52%,69% 36%,74% 48%,79% 34%,84% 50%,89% 38%,94% 52%,100% 40%,100% 100%);}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;}
.eyebrow-tag{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--sun); color:var(--pine-deep);
  font-family:var(--body); font-weight:700; font-size:.74rem; letter-spacing:.03em; padding:.5rem 1rem 1rem;
  transform:rotate(-2deg); position:relative; margin-bottom:1.6rem; clip-path:polygon(0 0,100% 0,100% 78%,94% 100%,88% 78%,82% 100%,76% 78%,70% 100%,64% 78%,58% 100%,52% 78%,46% 100%,40% 78%,34% 100%,28% 78%,22% 100%,16% 78%,10% 100%,4% 78%,0 78%);
}
.hero h1{color:var(--sand);}
.hero h1 em{color:var(--sun); font-style:normal;}
.hero .lead{color:#c3d2ca; font-size:1.06rem; max-width:480px; margin:1.3rem 0 2.2rem;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}
.postcard{
  position:relative; background:#fff; padding:.6rem .6rem 2.4rem; transform:rotate(2.5deg);
  box-shadow:0 26px 50px -20px rgba(0,0,0,.5); max-width:420px; margin:0 auto;
}
.postcard img{width:100%; aspect-ratio:5/4; object-fit:cover;}
.postcard .cap{position:absolute; bottom:.7rem; left:0; right:0; text-align:center; font-family:var(--display); font-size:.92rem; color:var(--ink); font-style:italic;}
.postcard .tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); width:90px; height:30px;
  background:rgba(226,150,63,.55); box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* ---------- TRAIL MARKERS ---------- */
.trail{background:var(--sand); padding:1rem 0 4rem;}
.trail-path{position:relative; border-top:3px dotted var(--sand-line); padding-top:2.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
.trail-marker{background:var(--paper); border:1px solid var(--sand-line); border-radius:2px; padding:1.1rem 1rem; text-align:center; position:relative; box-shadow:0 10px 22px -14px rgba(31,61,52,.25);}
.trail-marker::before{content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--paper); border:3px solid var(--sea);}
.trail-num{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--sea-deep); display:block;}
.trail-label{font-size:.72rem; color:var(--ink-soft); font-weight:700; margin-top:.2rem;}

section{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.section-sea{background:var(--sea-light);}

/* ---------- HANGING SIGN ---------- */
.sign-wrap{display:flex; justify-content:center; padding:1rem 0 2rem;}
.hanging-sign{
  position:relative; background:linear-gradient(160deg,#3a2818,#2c1e12); border:3px solid #1c1108;
  padding:3rem 3.5rem; max-width:640px; text-align:center; transform:rotate(-1.2deg);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.6);
}
.hanging-sign::before{content:""; position:absolute; left:50%; top:-46px; transform:translateX(-50%); width:2px; height:46px; background:#7c6a52;}
.hanging-sign::after{content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:#3a3a3a; box-shadow:0 2px 4px rgba(0,0,0,.5);}
.hanging-sign blockquote{font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.8vw,1.9rem); color:var(--sand); line-height:1.45;}
.hanging-sign cite{display:block; margin-top:1.1rem; font-style:normal; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sun); font-family:var(--body); font-weight:700;}

/* ---------- CLOTHESLINE CABINS ---------- */
.clothesline{position:relative; margin-top:3.5rem; padding-top:1.5rem;}
.clothesline::before{content:""; position:absolute; top:0; left:2%; right:2%; height:2px; background:var(--sand-line);}
.cabins-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
.cabin-card{position:relative; background:var(--paper); padding:.7rem .7rem 1.6rem; box-shadow:0 24px 46px -22px rgba(31,61,52,.3); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);}
.cabin-card:nth-child(1){transform:rotate(-1.6deg);}
.cabin-card:nth-child(2){transform:rotate(1.4deg);}
.cabin-card:hover{box-shadow:0 34px 62px -24px rgba(31,61,52,.42);}
.cabin-card:nth-child(1):hover{transform:rotate(-1.6deg) translateY(-6px) scale(1.015);}
.cabin-card:nth-child(2):hover{transform:rotate(1.4deg) translateY(-6px) scale(1.015);}
.cabin-card .pin{position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:var(--sun-deep); box-shadow:0 3px 6px rgba(0,0,0,.3), inset -3px -3px 4px rgba(0,0,0,.25);}
.cabin-photo{aspect-ratio:16/10; overflow:hidden;}
.cabin-photo img{width:100%; height:100%; object-fit:cover;}
.cabin-body{padding:1.4rem .6rem 0;}
.cabin-body h3{margin-bottom:.5rem;}
.cabin-body p{font-size:.92rem; margin-bottom:.9rem;}
.cabin-body ul{list-style:none;}
.cabin-body li{font-size:.87rem; color:var(--ink-soft); padding:.4rem 0; border-top:1px dashed var(--sand-line);}
.cabin-body li::before{content:"✓ "; color:var(--sea-deep); font-weight:700;}

/* ---------- AMENITIES ---------- */
.amenity-line{position:relative; margin-top:3rem; padding:1.5rem 0;}
.amenity-line::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--sand-line);}
.amenities-strip{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 1rem;}
.amenity-tag{
  background:var(--paper); border:1px solid var(--sand-line); border-radius:2px; padding:.65rem 1.1rem .65rem 1rem;
  font-size:.85rem; color:var(--ink); font-weight:500; display:flex; align-items:center; gap:.55rem;
  box-shadow:0 8px 16px -10px rgba(31,61,52,.3);
}
.amenity-tag:nth-child(odd){transform:rotate(-1.5deg);}
.amenity-tag:nth-child(even){transform:rotate(1.2deg);}
.amenity-tag .ic{color:var(--sea-deep);}

/* ---------- GALLERY ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.5rem; margin-top:3rem;}
.g-tile{position:relative; background:var(--paper); padding:.5rem .5rem 1.1rem; cursor:pointer; transition:.45s var(--ease-out); box-shadow:0 20px 38px -20px rgba(31,61,52,.35);}
.g-tile:nth-child(4n+1){transform:rotate(-2deg);} .g-tile:nth-child(4n+2){transform:rotate(1.5deg);}
.g-tile:nth-child(4n+3){transform:rotate(-1deg);} .g-tile:nth-child(4n+4){transform:rotate(2.2deg);}
.g-tile:hover{transform:rotate(0deg) translateY(-4px) scale(1.03); box-shadow:0 30px 50px -20px rgba(31,61,52,.45); z-index:5;}
.g-tile .ph{aspect-ratio:1; overflow:hidden;}
.g-tile .ph img{width:100%; height:100%; object-fit:cover;}

/* ---------- CONTACT ---------- */
.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:3rem;}
.contact-info{background:var(--paper); border:1px solid var(--sand-line); padding:2.3rem; box-shadow:0 24px 46px -26px rgba(31,61,52,.3);}
.contact-block{padding:.9rem 0; border-bottom:1px dashed var(--sand-line);}
.contact-block:last-child{border-bottom:0;}
.contact-block h4{font-family:var(--body); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sea-deep); margin-bottom:.4rem; font-weight:700;}
.contact-block .val{font-size:1rem; font-weight:500; color:var(--ink);}
.map-frame{background:var(--paper); border:1px solid var(--sand-line); min-height:320px; height:100%; overflow:hidden;}
.nav-btns{display:flex; gap:.8rem; margin-top:1.3rem; flex-wrap:wrap;}
.nav-btn{display:flex; align-items:center; gap:.5rem; font-size:.76rem; border:1px solid var(--sand-line); padding:.55rem .95rem; font-weight:700; color:var(--ink); transition:.3s var(--ease-out);}
.nav-btn:hover{border-color:var(--sea); color:var(--sea-deep);}

/* ---------- INNER PAGE HERO ---------- */
.page-hero{background:var(--pine-deep); padding:clamp(5rem,10vw,7.5rem) 0 clamp(2.5rem,5vw,4rem); text-align:center; position:relative;}
.page-hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:44px; background:var(--sand);
  clip-path:polygon(0 100%,0 55%,6% 62%,12% 48%,18% 64%,24% 46%,30% 62%,36% 48%,42% 64%,48% 46%,54% 62%,60% 48%,66% 64%,72% 46%,78% 62%,84% 48%,90% 64%,96% 48%,100% 55%,100% 100%);}
.page-hero h1{color:var(--sand);}
.breadcrumb{font-size:.75rem; color:#9db4a9; margin-top:.8rem;}

/* ---------- RULES ---------- */
.rules-body{max-width:740px; margin:0 auto;}
.rules-body > p{margin-bottom:1.2rem; font-size:1.02rem;}
.rules-list{list-style:none; margin-top:2.5rem; display:flex; flex-direction:column; gap:1.3rem;}
.rules-list li{display:flex; gap:1.2rem; align-items:flex-start; background:var(--paper); border:1px solid var(--sand-line); padding:1.3rem 1.5rem; box-shadow:0 14px 26px -18px rgba(31,61,52,.3);}
.rules-list .num{font-family:var(--display); font-weight:600; color:var(--sun-deep); font-size:1.3rem; flex-shrink:0; width:2rem;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--pine-deep); color:#9db4a9; padding:3.2rem 0 2rem;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand{font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--sand); margin-bottom:.8rem;}
.footer-brand b{color:var(--sun); font-style:normal;}
.footer-grid h5{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); margin-bottom:.9rem; font-weight:700;}
.footer-grid a,.footer-grid p{display:block; font-size:.87rem; margin-bottom:.5rem; color:#9db4a9;}
.footer-grid a{transition:.25s var(--ease-out);}
.footer-grid a:hover{color:var(--sun);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:1.4rem; font-size:.74rem; flex-wrap:wrap; gap:1rem;}
.footer-credit{color:#9db4a9; text-decoration:none; transition:.25s var(--ease-out);}
.footer-credit strong{color:var(--sun); font-weight:700;}
.footer-credit:hover{color:var(--sun);}
.footer-credit:hover strong{color:var(--sand);}

/* ---------- LIGHTBOX ---------- */
body.lightbox-open{overflow:hidden;}
.lightbox{position:fixed; inset:0; z-index:2000; background:rgba(18,40,32,.95); display:flex; align-items:center; justify-content:center; padding:2rem; opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out);}
.lightbox[data-open]{opacity:1; visibility:visible;}
.lightbox-stage{position:relative; max-width:min(1100px,92vw); max-height:88vh;}
.lightbox-stage img{max-width:100%; max-height:80vh; object-fit:contain; border:6px solid #fff; box-shadow:0 44px 90px -30px rgba(0,0,0,.85);}
.lightbox-close,.lightbox-nav{position:fixed; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; transition:.3s var(--ease-out); line-height:1;}
.lightbox-close:hover,.lightbox-nav:hover{border-color:var(--sun); color:var(--sun);}
.lightbox-close{top:1.5rem; right:1.5rem; width:44px; height:44px; font-size:1.6rem;}
.lightbox-nav{top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.8rem;}
.lightbox-prev{left:1.5rem;} .lightbox-next{right:1.5rem;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .trail-path{grid-template-columns:repeat(2,1fr); row-gap:2rem;}
  .cabins-grid,.contact-layout{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr; gap:1.6rem;}
}
@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-phone{display:none;}
  .nav-links{position:fixed; top:72px; left:0; right:0; bottom:0; z-index:900; background:var(--pine-deep); flex-direction:column; align-items:stretch; padding:.5rem 1.75rem 2rem; transform:translateX(100%); opacity:0; transition:transform .42s var(--ease-soft), opacity .32s var(--ease-out); gap:0; overflow-y:auto;}
  .nav-links.open{transform:translateX(0); opacity:1;}
  .nav-links li{border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-links a{padding:1.1rem 0; font-size:1.02rem; display:block;}
  body.nav-open{overflow:hidden;}
  .trail-path{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .hanging-sign{padding:2.2rem 1.6rem;}
}