/* Residence Lodge — base styles
   Design system: Stitch "Serene Boutique" palette (see DESIGN.md) — coastal
   blue primary + antique tan/gold secondary + dark navy tertiary on warm
   ivory, editorial Libre Caslon Text headlines over uppercase/tracked
   Manrope for subheads, nav and body. Flat, bordered cards (no shadows)
   with a soft small-radius shape language (not sharp/square). */
:root{
  /* Color — confirmed via Stitch reference palette sheet (Primary/Secondary/
     Tertiary/Neutral swatches) */
  --primary:#0a6ca9;
  --primary-dark:#085683;
  --primary-light:#eaf2f7;
  --on-primary:#ffffff;
  --secondary:#b98b4e;
  --secondary-dark:#a67a3e;
  --secondary-light:#f4ead8;
  --on-secondary:#ffffff;
  --tertiary:#0a2e47;
  --on-tertiary:#ffffff;
  --neutral:#23303a;

  --surface:#ffffff;
  --bg-soft:#f6f3ec;
  --ink:var(--neutral);
  --muted:#5b6b78;
  --line:#e1e6ea;
  --on-tertiary-variant:rgba(255,255,255,.72);

  /* Shape — soft small radius on buttons/cards/chips, never sharp/square,
     never a full shadow (depth comes from borders + flat color) */
  --radius-sm:.25rem;
  --radius:.5rem;
  --radius-md:.75rem;
  --radius-full:9999px;

  /* Spacing rhythm */
  --space-mobile:24px;
  --space-desktop:64px;
  --gutter:32px;
  --stack-sm:16px;
  --stack-md:32px;
  --stack-lg:80px;
  --section-padding:120px;

  --maxw:1280px;
  --font-serif:"Libre Caslon Text",Georgia,serif;
  --font-sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);color:var(--ink);
  background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.text-link{color:var(--primary)}
.text-link:hover{text-decoration:underline}
.text-link strong{color:inherit}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-desktop)}
.section{padding:var(--section-padding) 0;scroll-margin-top:96px}
.eyebrow{
  font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;
  font-size:.75rem;font-weight:600;line-height:1;color:var(--primary);margin:0 0 12px;
}
.eyebrow.center,.center{text-align:center}

/* Typography — Libre Caslon Text headlines, Manrope for everything else */
h1,h2{font-family:var(--font-serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.5rem,6vw,4rem)}
h2{font-weight:600;line-height:1.3;letter-spacing:0;font-size:clamp(1.75rem,4vw,2rem)}
h3{font-family:var(--font-sans);font-size:1.125rem;font-weight:600;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 .4em}
p{margin:0 0 1rem;font-size:1rem;line-height:1.6}
.lede{font-size:1.125rem;line-height:1.8;max-width:560px;margin-left:auto;margin-right:auto}

/* Buttons — soft small radius, flat (no shadow) */
.btn{display:inline-block;padding:15px 32px;border-radius:var(--radius);font-weight:600;
  font-size:.85rem;line-height:1;text-transform:uppercase;letter-spacing:.1em;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
/* Outline button — used only in the hero, over the photo, so it's styled
   for a dark background (white border/text), not for a light surface */
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Header / nav — clean white bar, icon mark + serif wordmark */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center}
.brand-logo{height:34px;width:auto;display:block;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:500;font-size:.8rem;line-height:1;text-transform:uppercase;letter-spacing:.15em;
  white-space:nowrap;color:var(--neutral);background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;transition:background-size .25s ease,color .15s ease}
.nav-links a:hover{background-size:100% 1px;color:var(--primary)}
.nav-cta{background:var(--primary);color:var(--on-primary) !important;padding:10px 20px !important;
  border-radius:var(--radius);background-image:none !important}
.nav-cta:hover{background:var(--primary-dark)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--neutral);border-radius:2px;transition:.2s}

/* Language selector — ha-website's pattern, restyled to rl's palette */
.lang-selector{position:relative;display:flex;align-items:center}
.lang-btn{display:flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--line);border-radius:var(--radius);padding:7px 13px;
  font-family:var(--font-sans);font-size:.8rem;line-height:1;color:var(--neutral);
  cursor:pointer;transition:border-color .15s,color .15s}
.lang-btn:hover{border-color:var(--secondary);color:var(--primary)}
.lang-globe{width:15px;height:15px;flex-shrink:0}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 10px 28px rgba(10,46,71,.12);list-style:none;margin:0;padding:6px;
  min-width:140px;z-index:60}
.lang-dropdown li{width:auto}
.lang-option{display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 12px;border-radius:var(--radius);font-family:var(--font-sans);
  font-size:.88rem;line-height:1;color:var(--neutral);cursor:pointer;
  transition:background .15s,color .15s}
.lang-option:hover{background:var(--bg-soft)}
.lang-option.active{color:var(--primary);font-weight:700}

/* Hero — centered layout from the Stitch "Centered Hero" reference (mark +
   caption, serif headline, lede, scroll cue, solid + outline buttons), but
   with the property photo restored as the background instead of Stitch's
   flat gradient (that mockup had no real photo to show). Text recolored
   for contrast against the photo+overlay instead of the light gradient. */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,46,71,.35),rgba(10,46,71,.75))}
.hero-content{position:relative;max-width:680px;margin:0 auto;text-align:center}
.hero-mark{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 28px}
.hero-mark img{height:38px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.hero-mark span{font-family:var(--font-sans);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:rgba(255,255,255,.85)}
.hero .eyebrow{color:var(--secondary)}
.hero h1{color:#fff}
.hero .lede{max-width:520px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.92)}
.hero-scroll-cue{display:inline-block;margin:6px 0 26px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:rgba(255,255,255,.75)}
.hero-scroll-cue::after{content:"⌄";display:block;margin-top:4px;font-size:1rem;line-height:1}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Intro — asymmetric editorial split (8/4 of 12 columns) */
.intro{display:grid;grid-template-columns:8fr 4fr;gap:64px;align-items:center}
.intro-stats{list-style:none;margin:0;padding:28px;display:grid;gap:20px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.intro-stats li{display:flex;flex-direction:column}
.stat-num{font-family:var(--font-serif);font-weight:500;font-size:1.5rem;color:var(--primary);line-height:1}
.stat-label{color:var(--muted);font-size:.75rem;font-weight:600;line-height:1;
  text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

/* Rooms — soft-radius cards, thin border instead of shadow */
.rooms{background:var(--bg-soft)}
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.room-grid-2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
.room-grid-2 .room-card img{aspect-ratio:4/3}
.room-meta{color:var(--primary);font-weight:600;font-size:.85rem;margin:0 0 8px}
.room-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;transition:border-color .18s}
.room-card:hover{border-color:var(--secondary)}
.room-card:hover img{transform:scale(1.03)}
.room-card img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .4s ease}
.room-card-body{padding:18px 20px 22px}
.room-card-body p{color:var(--muted);font-size:.92rem;margin:0}

/* Amenities — icon cards, following ha-website's pattern: auto-fill grid of
   vertical icon-over-label tiles instead of a row of small pill chips */
.amenity-grid{list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:20px}
.amenity-grid li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:13px;padding:28px 14px 26px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius-md);transition:transform .18s,box-shadow .18s,border-color .18s}
.amenity-grid li:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10,46,71,.09);border-color:var(--secondary)}
.amenity-ico{width:36px;height:36px;color:var(--primary)}
.amenity-ico svg{width:100%;height:100%}
.amenity-label{font-family:var(--font-sans);font-size:.95rem;font-weight:400;
  letter-spacing:.02em;color:var(--ink);line-height:1.4}

/* Gallery — full-bleed dark navy mosaic wall, random subset reshuffled per visit */
.gallery{background:var(--tertiary)}
.gallery-header{margin-bottom:40px}
.gallery .eyebrow{color:var(--secondary)}
.gallery h2{color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 32px}
.gallery-item{position:relative;margin:0;border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:0;background:#081f31;aspect-ratio:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 8px;font-size:.78rem;color:#fff;font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(6,20,32,.82));opacity:0;transition:opacity .2s}
.gallery-item:hover figcaption{opacity:1}

/* Location — asymmetric split, soft-radius framed map (border, not shadow) */
.location{background:var(--bg-soft)}
.location-inner{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.location-media img,.location-media iframe{border-radius:var(--radius-md);border:1px solid var(--line);
  aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
.location-addr{color:var(--muted)}
.location-addr a{color:var(--primary);font-weight:600}

/* Book on OTAs — brand-colored pill buttons, ha-website's exact pattern */
.ota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;margin-top:36px;max-width:900px;margin-left:auto;margin-right:auto}
.ota-btn{position:relative;display:flex;align-items:center;justify-content:center;
  padding:20px 14px;border-radius:var(--radius);font-family:var(--font-sans);
  font-size:.95rem;font-weight:600;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.ota-btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10,46,71,.18);filter:brightness(1.06)}
.ota-booking{background:#003580;color:#fff}
.ota-expedia{background:#1d3453;color:#ffc72c}
.ota-trip{background:#1677ff;color:#fff}
.ota-agoda{background:#eb0226;color:#fff}
.ota-airbnb{background:#ff5a5f;color:#fff}
.ota-hotels{background:#d9211d;color:#fff}
.ota-tripadvisor{background:#00aa6c;color:#fff}

/* Contact — small bordered cards, soft radius */
.contact{background:var(--surface)}
.contact-sub{color:var(--muted);max-width:520px;margin:0 auto 32px}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto}
.contact-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:28px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md);
  transition:border-color .15s}
a.contact-card:hover{border-color:var(--secondary)}
.contact-ico{font-size:1.6rem}
.contact-label{font-size:.75rem;line-height:1;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted)}
.contact-value{font-family:var(--font-sans);font-weight:600}
.contact-note{color:var(--muted);font-size:.82rem;margin-top:22px}

/* Footer — dark navy (tertiary); logo is its own solid-blue badge, so it
   sits as a contained tile rather than needing to read directly on navy */
.site-footer{background:var(--tertiary);color:var(--on-tertiary-variant);padding:52px 0 24px}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-logo{height:110px;width:auto;display:block;object-fit:contain}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.9rem;margin:6px 0 0}
.footer-nav{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-heading{color:var(--secondary);font-size:.7rem;line-height:1;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:2px}
.footer-nav a{color:rgba(255,255,255,.82);font-size:.75rem;line-height:1;font-weight:500;text-transform:uppercase;letter-spacing:.12em}
.footer-nav a:hover{color:#fff}
.footer-legal{color:rgba(255,255,255,.45);font-size:.82rem;margin-top:20px}
.footer-legal a{color:rgba(255,255,255,.6)}
.footer-legal a:hover{color:#fff}

/* Mobile booking bar — sticky CTA, hidden on desktop (nav already floats one) */
.booking-bar{display:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(6,20,32,.94);padding:30px}
.lightbox.open{display:flex}
.lb-figure{margin:0;max-width:92vw;max-height:88vh;text-align:center}
.lb-img{max-width:92vw;max-height:80vh;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-caption{color:#e7edf1;margin-top:14px;font-size:.95rem}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;
  border:0;cursor:pointer;border-radius:var(--radius-full);width:48px;height:48px;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}

/* Responsive */

/* Tightened nav tier — below 1280px the full-width nav (wide 1-line logo
   + 5 links + language selector + CTA) needs smaller type and gaps or it
   overflows. Only matters down to 1025px; below that the hamburger takes
   over anyway. */
@media (max-width:1279px){
  .brand-logo{height:25px}
  .nav-links{gap:16px}
  .nav-links a{font-size:.72rem;letter-spacing:.1em}
  .nav-cta{padding:9px 16px !important}
  .lang-btn{padding:6px 10px;font-size:.75rem}
}

/* Hamburger nav — kicks in at 1024px, not 680: with the language selector
   and Reserve link added, the one-row nav physically can't fit between
   681–1024px (logo overlapped links, CTA wrapped/clipped). */
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:88px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 22px 18px;
    display:none}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0;background-image:none;font-size:.85rem}
  .nav-cta{display:inline-block;margin-top:6px}

  /* Language selector: full-width chips inside the hamburger panel */
  .lang-selector-item{width:100%;order:10;margin-top:6px}
  .lang-selector{flex-direction:column;align-items:stretch;width:100%}
  .lang-btn{width:100%;justify-content:center;padding:9px 13px;font-size:.8rem}
  .lang-dropdown{position:static;box-shadow:none;border:none;display:flex;
    flex-wrap:wrap;gap:6px;margin-top:8px;padding:0;width:100%}
  .lang-dropdown li{flex:1 1 auto}
  .lang-option{text-align:center;border:1px solid var(--line);border-radius:var(--radius)}
}

@media (max-width:960px){
  .container{padding:0 var(--space-mobile)}
  .intro{grid-template-columns:1fr;gap:32px}
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr);padding:0 20px}
  .location-inner{grid-template-columns:1fr;gap:28px}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:680px){
  .section{padding:var(--stack-lg) 0}
  .room-grid{grid-template-columns:1fr 1fr;gap:10px}
  .room-grid-2{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:3px;padding:0 16px}
  .lb-prev{left:10px}.lb-next{right:10px}

  .booking-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    padding:12px var(--space-mobile);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line)}
  .booking-bar .btn{width:100%;text-align:center}
  body{padding-bottom:72px}
}

/* ─── CJK typography — active only when a CJK language is selected.
   Latin brand fonts stay first in each stack so "Residence Lodge",
   numbers and the Roman-character address keep the brand look; CJK
   glyphs fall through to the paired CJK face (loaded on demand by
   ensureLangFont() in main.js — English visitors download none). ─── */
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2{font-family:"Libre Caslon Text","Noto Serif SC",Georgia,serif}
html[lang="zh-CN"] body, html[lang="zh-CN"] p, html[lang="zh-CN"] a, html[lang="zh-CN"] button,
html[lang="zh-CN"] span, html[lang="zh-CN"] li, html[lang="zh-CN"] h3{font-family:"Manrope","Noto Sans SC",system-ui,sans-serif}

html[lang="zh-TW"] h1, html[lang="zh-TW"] h2{font-family:"Libre Caslon Text","Noto Serif TC",Georgia,serif}
html[lang="zh-TW"] body, html[lang="zh-TW"] p, html[lang="zh-TW"] a, html[lang="zh-TW"] button,
html[lang="zh-TW"] span, html[lang="zh-TW"] li, html[lang="zh-TW"] h3{font-family:"Manrope","Noto Sans TC",system-ui,sans-serif}

html[lang="ja"] h1, html[lang="ja"] h2{font-family:"Libre Caslon Text","Shippori Mincho",Georgia,serif}
html[lang="ja"] body, html[lang="ja"] p, html[lang="ja"] a, html[lang="ja"] button,
html[lang="ja"] span, html[lang="ja"] li, html[lang="ja"] h3{font-family:"Manrope","Noto Sans JP",system-ui,sans-serif}

html[lang="ko"] h1, html[lang="ko"] h2{font-family:"Libre Caslon Text","Gowun Batang",Georgia,serif;font-weight:700}
html[lang="ko"] body, html[lang="ko"] p, html[lang="ko"] a, html[lang="ko"] button,
html[lang="ko"] span, html[lang="ko"] li, html[lang="ko"] h3{font-family:"Manrope","Noto Sans KR",system-ui,sans-serif}

/* CJK rhythm: wide Latin tracking looks gappy on CJK glyphs — ease it.
   Generous line-height aids CJK readability. */
html[lang="zh-CN"] .nav-links a, html[lang="zh-TW"] .nav-links a,
html[lang="ja"] .nav-links a, html[lang="ko"] .nav-links a{letter-spacing:.08em}
html[lang="zh-CN"] .btn, html[lang="zh-TW"] .btn,
html[lang="ja"] .btn, html[lang="ko"] .btn{letter-spacing:.05em}
html[lang="zh-CN"] h3, html[lang="zh-TW"] h3,
html[lang="ja"] h3, html[lang="ko"] h3{letter-spacing:.05em}
html[lang="zh-CN"] .footer-heading, html[lang="zh-TW"] .footer-heading,
html[lang="ja"] .footer-heading, html[lang="ko"] .footer-heading{letter-spacing:.1em}
html[lang="zh-CN"] .hero-scroll-cue, html[lang="zh-TW"] .hero-scroll-cue,
html[lang="ja"] .hero-scroll-cue, html[lang="ko"] .hero-scroll-cue{letter-spacing:.1em}
html[lang="zh-CN"] p, html[lang="zh-TW"] p, html[lang="ja"] p, html[lang="ko"] p{line-height:1.9}

/* (Mobile language-selector chips live in the max-width:1024px hamburger
   block in the Responsive section above.) */