/* SilverStarBucks - Editorial alpine
   v2 - 2026-04-25
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ink-deep:#0a1929;
  --ink:#1d2733;
  --ink-soft:#4a5568;
  --ink-mute:#8895a0;
  --bone:#faf6ef;
  --frost:#f1ece3;
  --snow:#ffffff;
  --gold:#c9a961;
  --gold-deep:#a48741;
  --line:rgba(29,39,51,0.12);
  --line-light:rgba(255,255,255,0.18);

  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --max:1320px;
  --max-narrow:720px;
  --pad:clamp(1.5rem, 5vw, 4rem);
  --section-y:clamp(5rem, 12vw, 10rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bone)}
body{
  font-family:var(--sans);
  font-size:17px;line-height:1.7;font-weight:400;
  color:var(--ink);background:var(--bone);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}

/* Typography */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.005em}
.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;text-transform:uppercase;letter-spacing:0.22em;
  font-weight:500;color:var(--gold-deep);
  margin-bottom:1.2rem;display:inline-block;
}
.eyebrow.light{color:var(--gold)}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:400;
  letter-spacing:-0.01em;line-height:1.05;
  color:var(--ink-deep);
}
h1{font-size:clamp(3rem, 8vw, 6rem);font-weight:300}
h2{font-size:clamp(2.2rem, 5.5vw, 3.8rem);font-weight:400;line-height:1.1;margin-bottom:1rem}
h3{font-size:clamp(1.6rem, 3.5vw, 2.3rem);font-weight:500;line-height:1.2;margin-bottom:0.8rem}
h4{font-size:1.3rem;font-weight:500;color:var(--ink)}
p{margin-bottom:1.3em;max-width:62ch}
.lede{font-size:clamp(1.05rem, 2vw, 1.3rem);line-height:1.55;color:var(--ink-soft);font-weight:300;font-family:var(--serif);font-style:italic;max-width:48ch}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);transition:color 0.2s,border-color 0.2s}
a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-narrow{max-width:var(--max-narrow);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-tight{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.bg-deep{background:var(--ink-deep);color:var(--bone)}
.bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4{color:var(--bone)}
.bg-deep .lede{color:rgba(250,246,239,0.78)}
.bg-deep a{color:var(--gold);border-color:var(--gold)}
.bg-deep a:hover{color:var(--snow);border-color:var(--snow)}
.bg-frost{background:var(--frost)}

/* Header - transparent over hero, solid on scroll */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.4rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  transition:background 0.3s,padding 0.3s,box-shadow 0.3s;
  color:var(--bone);
}
header.site.scrolled{
  background:rgba(10,25,41,0.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-top:0.9rem;padding-bottom:0.9rem;
  box-shadow:0 1px 0 rgba(255,255,255,0.05);
}
header.site .logo{
  display:flex;align-items:center;gap:0.7rem;
  font-family:var(--serif);font-weight:500;
  font-size:1.2rem;letter-spacing:0.01em;
  color:var(--bone);text-decoration:none;border:none;
}
header.site .logo img{height:42px;width:auto;display:block;transition:height 0.3s}
header.site.scrolled .logo img{height:34px}
header.site .logo .wordmark{display:none}
@media(max-width:520px){
  header.site .logo img{height:36px}
  header.site.scrolled .logo img{height:30px}
}
nav.primary ul{list-style:none;display:flex;gap:2.4rem;align-items:center}
nav.primary a{
  color:var(--bone);font-size:0.83rem;
  text-transform:uppercase;letter-spacing:0.18em;font-weight:500;
  border:none;padding:0.4rem 0;
}
nav.primary a:hover{color:var(--gold)}
nav.primary a.cta{
  background:var(--gold);border:1px solid var(--gold);padding:0.7rem 1.5rem;
  font-size:0.78rem;color:var(--ink-deep);font-weight:600;
  border-radius:2px;letter-spacing:0.16em;
  box-shadow:0 2px 8px rgba(201,161,73,0.25);
  transition:all 0.2s;
}
nav.primary a.cta:hover{background:var(--bone);border-color:var(--bone);color:var(--ink-deep);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.menu-btn{
  display:none;background:none;border:none;color:var(--bone);
  font-size:1.6rem;cursor:pointer;padding:0.3rem 0;line-height:1;
}
@media(max-width:880px){
  nav.primary ul{
    display:none;flex-direction:column;position:fixed;top:0;right:0;
    width:min(360px,80vw);height:100vh;background:var(--ink-deep);
    padding:6rem 2.5rem 2rem;gap:0;align-items:flex-start;
  }
  nav.primary ul.open{display:flex}
  nav.primary li{padding:1.1rem 0;border-bottom:1px solid var(--line-light);width:100%}
  nav.primary a{font-size:0.95rem;letter-spacing:0.14em}
  nav.primary a.cta{margin-top:1rem;display:inline-block}
  .menu-btn{display:block;z-index:200;position:relative}
}

/* Hero - full viewport, photographic */
.hero{
  position:relative;min-height:max(100vh, 660px);
  display:flex;align-items:flex-end;
  background:var(--ink-deep);overflow:hidden;color:var(--bone);
}
.hero img.bg{
  position:absolute;inset:0;width:100%;height:100%;min-height:100%;
  object-fit:cover;
  animation:slowZoom 18s ease-out forwards;
}
@keyframes slowZoom{from{transform:scale(1.04)}to{transform:scale(1.0)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,25,41,0.45) 0%,rgba(10,25,41,0.05) 35%,rgba(10,25,41,0.5) 100%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,8vw,6rem);padding-top:clamp(8rem,16vh,12rem)}
.hero h1{color:var(--bone);max-width:14ch;text-shadow:0 2px 16px rgba(0,0,0,0.35)}
.hero .lede{color:rgba(250,246,239,0.88);margin-top:1.4rem;text-shadow:0 1px 8px rgba(0,0,0,0.3)}
.hero .eyebrow{color:var(--gold)}
.hero .scroll-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:2;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.25em;
  color:rgba(250,246,239,0.65);text-align:center;
}
.hero .scroll-cue::after{
  content:"";display:block;width:1px;height:36px;background:rgba(250,246,239,0.4);
  margin:0.8rem auto 0;animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{0%,100%{transform:scaleY(0.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* Hero variant: short hero for inner pages */
.hero-short{
  position:relative;min-height:max(62vh, 580px);
  display:flex;align-items:flex-end;
  background:var(--ink-deep);overflow:hidden;color:var(--bone);
}
.hero-short img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:slowZoom 18s ease-out forwards}
.hero-short::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,25,41,0.55) 0%,rgba(10,25,41,0.1) 50%,rgba(10,25,41,0.55) 100%);
  pointer-events:none;
}
.hero-short .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,6vw,5rem);padding-top:clamp(8rem,16vh,11rem)}
.hero-short h1{color:var(--bone);max-width:18ch;text-shadow:0 2px 14px rgba(0,0,0,0.35)}
.hero-short .lede{color:rgba(250,246,239,0.86);margin-top:1.2rem}
.hero-short .eyebrow{color:var(--gold)}

/* Editorial split - alternating text + image */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.split.flip > div:first-child{order:2}
.split img{width:100%;border-radius:2px}
.split-text{padding:1rem 0}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split.flip > div:first-child{order:0}
}

/* Full-bleed photo block */
.bleed{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(420px,72vh,820px);overflow:hidden;
}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed .overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(2rem,5vw,4rem);
  background:linear-gradient(180deg,rgba(10,25,41,0) 50%,rgba(10,25,41,0.7) 100%);
  color:var(--bone);
}
.bleed .overlay-content{max-width:560px}
.bleed .overlay h2,.bleed .overlay p{color:var(--bone)}

/* Photo grid - editorial */
.photo-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(0.8rem,1.5vw,1.4rem);margin:2rem 0;
}
.photo-grid img{width:100%;height:100%;object-fit:cover;border-radius:2px;cursor:pointer;transition:opacity 0.3s}
.photo-grid img:hover{opacity:0.9}
.photo-grid .span-3{grid-column:span 3}
.photo-grid .span-4{grid-column:span 4}
.photo-grid .span-5{grid-column:span 5}
.photo-grid .span-6{grid-column:span 6}
.photo-grid .span-7{grid-column:span 7}
.photo-grid .span-8{grid-column:span 8}
.photo-grid .span-12{grid-column:span 12}
.photo-grid .tall{aspect-ratio:3/4}
.photo-grid .wide{aspect-ratio:3/2}
.photo-grid .square{aspect-ratio:1/1}
@media(max-width:760px){
  .photo-grid{grid-template-columns:1fr 1fr;gap:0.5rem}
  .photo-grid > img{grid-column:span 1 !important}
  .photo-grid .span-12, .photo-grid .span-8{grid-column:span 2 !important}
}

/* Pillar card - photography-led */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.pillar{display:flex;flex-direction:column}
.pillar .img-wrap{aspect-ratio:4/5;overflow:hidden;border-radius:2px;margin-bottom:1.5rem}
.pillar img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.pillar:hover img{transform:scale(1.04)}
.pillar h3{font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:500;margin-bottom:0.6rem}
.pillar p{font-size:0.97rem;color:var(--ink-soft);line-height:1.65}
@media(max-width:760px){.pillars{grid-template-columns:1fr;gap:2.5rem}}

/* Buttons - quiet */
.btn{
  display:inline-block;padding:1.05rem 2.2rem;background:var(--ink-deep);color:var(--bone);
  text-decoration:none;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.2em;font-weight:500;
  border:1px solid var(--ink-deep);border-radius:0;border-bottom:1px solid var(--ink-deep);
  transition:background 0.2s,color 0.2s;cursor:pointer;
}
.btn:hover{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}
.btn-light{background:transparent;color:var(--bone);border-color:rgba(250,246,239,0.4);border-bottom:1px solid rgba(250,246,239,0.4)}
.btn-light:hover{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}
.btn-gold{background:var(--gold);color:var(--ink-deep);border-color:var(--gold);border-bottom:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--bone)}

/* Quote - editorial pull */
.pull-quote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.3;color:var(--ink-deep);
  max-width:30ch;margin:0 auto;text-align:center;
}
.pull-quote .attr{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.22em;
  color:var(--ink-mute);font-weight:500;margin-top:1.6rem;
}

/* Specs - clean table */
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;border-top:1px solid var(--line);
}
.spec{
  padding:1.4rem 1.2rem;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.spec:last-child{border-right:none}
.spec .label{
  font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;
  color:var(--ink-mute);font-weight:500;margin-bottom:0.4rem;
}
.spec .value{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--ink-deep);line-height:1.2}

/* Amenity columns */
.amenities{
  columns:2;column-gap:3rem;list-style:none;margin:1.5rem 0;
  font-size:0.97rem;line-height:1.85;
}
.amenities li{break-inside:avoid;color:var(--ink-soft);padding-left:1.4rem;position:relative}
.amenities li::before{
  content:"";position:absolute;left:0;top:0.85em;
  width:6px;height:1px;background:var(--gold);
}
@media(max-width:680px){.amenities{columns:1}}

/* OTA cards - elegant */
.ota-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin:3rem 0}
.ota{
  display:block;padding:clamp(2rem,4vw,3.5rem) 2rem;
  text-align:center;background:var(--snow);
  border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;
  text-decoration:none;color:var(--ink-deep);
  transition:all 0.3s ease;cursor:pointer;
}
.ota:hover{
  border-color:var(--gold);background:var(--frost);
  transform:translateY(-4px);
  box-shadow:0 12px 30px -12px rgba(10,25,41,0.18);
  color:var(--ink-deep);
}
.ota .name{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2rem);font-weight:500;display:block;margin-bottom:0.5rem;color:var(--ink-deep)}
.ota .sub{font-size:0.92rem;color:var(--ink-soft);line-height:1.55;display:block}
.ota .arrow{display:inline-block;margin-top:1.2rem;color:var(--gold-deep);font-size:1.1rem;letter-spacing:0.1em}
@media(max-width:760px){.ota-grid{grid-template-columns:1fr}}

/* CTA band - minimal */
.cta-band{padding:var(--section-y) 0;background:var(--ink-deep);color:var(--bone);text-align:center}
.cta-band h2{color:var(--bone);max-width:18ch;margin-left:auto;margin-right:auto}
.cta-band .lede{color:rgba(250,246,239,0.78);margin:1.4rem auto 2.5rem}
.cta-band .eyebrow{color:var(--gold)}

/* Footer */
footer.site{
  background:var(--ink-deep);color:var(--bone);
  padding:clamp(3rem,7vw,5rem) var(--pad) 2rem;font-size:0.88rem;
}
footer.site .wrap{padding:0;max-width:var(--max)}
footer.site .top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:3rem;border-bottom:1px solid var(--line-light);
}
footer.site h4{
  font-family:var(--sans);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.22em;
  color:var(--gold);margin-bottom:1rem;font-weight:500;
}
footer.site .brand .logo{
  font-family:var(--serif);font-size:1.5rem;font-weight:500;
  color:var(--bone);text-decoration:none;border:none;display:inline-block;margin-bottom:0.8rem;
}
footer.site .brand p{color:rgba(250,246,239,0.65);font-size:0.86rem;line-height:1.65;max-width:32ch}
footer.site ul{list-style:none}
footer.site li{margin-bottom:0.5rem}
footer.site a{color:rgba(250,246,239,0.78);border:none;font-size:0.88rem}
footer.site a:hover{color:var(--gold)}
footer.site .legal{
  padding-top:2rem;display:flex;justify-content:space-between;align-items:center;
  font-size:0.74rem;color:rgba(250,246,239,0.5);text-transform:uppercase;letter-spacing:0.12em;
}
@media(max-width:760px){
  footer.site .top{grid-template-columns:1fr 1fr;gap:2rem}
  footer.site .brand{grid-column:span 2}
  footer.site .legal{flex-direction:column;gap:1rem;text-align:center}
}

/* Lightbox style overrides for elegance */
.lb-active{overflow:hidden}

/* Section divider */
.divider-line{
  border:none;height:1px;background:var(--line);
  width:60px;margin:2.5rem 0;
}
.divider-line.center{margin-left:auto;margin-right:auto}

/* Caption */
.caption{
  font-size:0.78rem;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:0.18em;
  margin-top:0.8rem;font-weight:500;
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.9s ease,transform 0.9s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Skip link */
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:0.5rem 1rem;background:var(--gold)}


/* Sticky mobile booking bar - shows on inner pages on mobile */
.sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--ink-deep);border-top:1px solid var(--gold);
  padding:0.8rem 1rem;
  box-shadow:0 -4px 20px rgba(0,0,0,0.2);
}
.sticky-cta a{
  display:block;width:100%;text-align:center;
  background:var(--gold);color:var(--ink-deep);
  padding:0.95rem 1rem;border:none;border-radius:2px;
  font-size:0.85rem;text-transform:uppercase;letter-spacing:0.18em;font-weight:600;
}
@media(max-width:760px){.sticky-cta{display:block} body{padding-bottom:74px}}

/* Hero CTA - solid gold for visibility */
.hero .cta-row, .hero-short .cta-row, .hero-block .cta-row{
  margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap;
}
.hero .btn-primary, .hero-short .btn-primary, .hero-block .btn-primary{
  background:var(--gold);color:var(--ink-deep);border-color:var(--gold);
  padding:1.05rem 2.2rem;font-size:0.85rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.hero .btn-primary:hover, .hero-short .btn-primary:hover, .hero-block .btn-primary:hover{
  background:var(--bone);color:var(--ink-deep);border-color:var(--bone);transform:translateY(-2px);
}
.ota .rating{
  display:block;font-size:0.95rem;font-weight:600;
  color:var(--gold-deep);margin:0.4rem 0 0.6rem;
  letter-spacing:0.02em;
}
/* Pages without a dark hero: push first section below the now-solid header */
body.no-hero main > section:first-child{padding-top:7rem}
body.no-hero main > section:first-child[style*="padding-top"]{padding-top:7rem !important}
/* Short-viewport guard: if window is short, anchor hero text to TOP+safe padding instead of bottom */
@media (max-height: 640px){
  .hero, .hero-short{align-items:flex-start}
  .hero .wrap, .hero-short .wrap{padding-top:6.5rem}
}