/* NamastayTO — namastaytoronto.com showcase site
   Same "Warm Boutique" / "Midnight Luxe" system as the guest guides.
   Colorblind-safe accents (Okabe-Ito family); meaning never rides on hue alone. */

@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../assets/fonts/dmsans-latin.woff2') format('woff2');
  font-weight:100 1000; font-style:normal; font-display:swap;
}

:root{
  --bg:#FBF6EC; --bg2:#F4ECDA; --card:#FFFDF8; --card2:#F8F2E4;
  --ink:#2A2318; --muted:#75684F; --faint:#9B8E74;
  --line:#E8DFCA; --line2:#D9CCAC;
  --gold:#E69F00; --gold-ink:#8A5E00; --gold-soft:#FAEEDA; --gold-line:#EFD9A8;
  --teal:#0F6E56; --teal-soft:#E1F5EE;
  --link:#185FA5; --info-soft:#E6F1FB; --info-ink:#0C447C;
  --warn:#A32D2D; --warn-soft:#FCEBEB;
  --shadow:0 2px 14px rgba(90,70,30,.10);
  --logo-filter:none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#191713; --bg2:#14120E; --card:#221F19; --card2:#2A261E;
    --ink:#F2EADA; --muted:#BDB29C; --faint:#8E836C;
    --line:#3A352C; --line2:#4A4436;
    --gold:#FAC775; --gold-ink:#FAC775; --gold-soft:#2C2415; --gold-line:#584722;
    --teal:#5DCAA5; --teal-soft:#12241C;
    --link:#85B7EB; --info-soft:#161F2A; --info-ink:#B5D4F4;
    --warn:#F09595; --warn-soft:#2A1616;
    --shadow:0 2px 14px rgba(0,0,0,.35);
    --logo-filter:invert(92%) sepia(18%) saturate(384%) hue-rotate(345deg) brightness(103%);
    color-scheme: dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--link)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; line-height:1.2; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5.5vw,3rem); margin:.2em 0}
h2{font-size:clamp(1.4rem,3.5vw,1.9rem); margin:1.6em 0 .5em}
h3{font-size:1.15rem; margin:1.2em 0 .35em}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

/* top bar */
.top{
  position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; gap:14px; padding-top:10px; padding-bottom:10px}
.top img{height:34px; width:auto; filter:var(--logo-filter)}
.top .brand{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.15rem; color:var(--ink); text-decoration:none}
.top nav{margin-left:auto; display:flex; gap:6px}
.top nav a{
  color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem;
  padding:7px 12px; border-radius:999px;
}
.top nav a:hover{background:var(--bg2)}
.top nav a.cta{background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--gold-ink)}

/* hero */
.hero{padding:44px 0 8px}
.hero .kicker{color:var(--gold-ink); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem}
.hero p.lead{font-size:1.12rem; color:var(--muted); max-width:46rem}
.trust{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px; padding:0; list-style:none}
.trust li{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-size:.9rem; font-weight:500;
}
.trust li b{color:var(--gold-ink)}

/* room cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin:26px 0}
.rcard{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  color:inherit; text-decoration:none; transition:transform .15s ease;
}
.rcard:hover{transform:translateY(-3px)}
.rcard img{aspect-ratio:4/3; object-fit:cover; width:100%}
.rcard .pad{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1}
.rcard h3{margin:0; font-size:1.25rem}
.rcard .sub{color:var(--muted); font-size:.95rem; margin:0}
.rcard .meta{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; font-size:.92rem}
.rcard .stars{font-weight:700}
.rcard .from{margin-left:auto; font-weight:600; color:var(--gold-ink)}
.badge{
  display:inline-block; background:var(--gold-soft); border:1px solid var(--gold-line);
  color:var(--gold-ink); border-radius:999px; padding:2px 10px; font-size:.8rem; font-weight:600;
}

/* generic card + buttons */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow)}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 4px}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border-radius:12px; padding:12px 20px; font-weight:600; font-size:1rem;
  border:1px solid var(--line2); color:var(--ink); background:var(--card);
}
.btn.primary{background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold-ink)}
.btn:hover{filter:brightness(.97)}

/* room page */
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:150px; gap:8px; border-radius:18px; overflow:hidden; margin:18px 0}
.gallery img{width:100%; height:100%; object-fit:cover}
.gallery img:first-child{grid-column:1; grid-row:1 / span 2}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr 1fr; grid-auto-rows:120px}
  .gallery img:first-child{grid-column:1 / -1; grid-row:1; height:100%}
  .gallery img:nth-child(n+6){display:none}
}
.gallery-cta{position:relative}
.viewall{
  position:absolute; right:12px; bottom:12px;
  background:var(--card); border:1px solid var(--line2); border-radius:10px;
  padding:8px 14px; font:inherit; font-weight:600; font-size:.92rem; color:var(--ink);
  cursor:pointer; box-shadow:var(--shadow);
}
.viewall:hover{filter:brightness(.97)}

/* full-screen photo tour, grouped by room */
.lightbox{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 16px 48px; display:none; scroll-behavior:smooth;
}
.lightbox.open{display:block}
.lb-inner{max-width:840px; margin:0 auto; padding-top:16px}
.lb-group{scroll-margin-top:120px}
.lb-group h2{
  font-size:1.25rem; margin:26px 0 12px; display:flex; align-items:baseline; gap:10px;
}
.lb-group .lb-n{font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; color:var(--faint)}
.lb-group figure{margin:0 0 16px}
.lightbox img{width:100%; height:auto; border-radius:14px; background:var(--card2)}
.lb-group figcaption{
  color:var(--muted); font-size:.92rem; padding:8px 4px 0; line-height:1.5;
}
.lb-top{
  position:sticky; top:0; z-index:101; margin:0 -16px;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:10px 18px 8px;
}
.lb-top-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lb-top .lb-count{color:var(--muted); font-size:.95rem}
.lb-close{
  background:var(--card); border:1px solid var(--line2); border-radius:999px;
  padding:7px 16px; font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
}
.lb-nav{
  display:flex; gap:8px; overflow-x:auto; padding:8px 0 2px;
  scrollbar-width:none;
}
.lb-nav::-webkit-scrollbar{display:none}
.lb-chip{
  flex:0 0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; font:inherit; font-size:.9rem; font-weight:500;
  color:var(--ink); cursor:pointer; white-space:nowrap;
}
.lb-chip span{color:var(--faint); font-size:.82rem; margin-left:2px}
.lb-chip:hover{background:var(--gold-soft); border-color:var(--gold-line)}
body.lb-lock{overflow:hidden}

.facts{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 4px; padding:0; list-style:none}
.facts li{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:.92rem}
.amen{columns:2; gap:2em; margin:8px 0; padding-left:1.2em}
@media (max-width:560px){.amen{columns:1}}
.note{
  background:var(--info-soft); color:var(--info-ink);
  border-radius:12px; padding:12px 16px; font-size:.95rem; margin:14px 0;
}
blockquote{
  margin:14px 0; padding:12px 18px; border-left:3px solid var(--gold);
  background:var(--card2); border-radius:0 12px 12px 0; font-style:italic; color:var(--muted);
}
blockquote cite{display:block; font-style:normal; font-size:.88rem; margin-top:4px}

/* availability calendar */
.cal-wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin:14px 0}
.cal{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.cal h4{margin:0 0 8px; text-align:center; font-family:'Fraunces',Georgia,serif}
.cal table{width:100%; border-collapse:collapse; font-size:.85rem; table-layout:fixed}
.cal th{color:var(--faint); font-weight:500; padding:2px 0}
.cal td{text-align:center; padding:0}
.cal td span{
  display:flex; align-items:center; justify-content:center;
  height:32px; margin:2px; border-radius:8px;
}
.cal td .free{background:var(--teal-soft); color:var(--teal); font-weight:600}
.cal td .booked{color:var(--faint); text-decoration:line-through}
.cal td .ask{background:var(--gold-soft); color:var(--gold-ink); border:1px dashed var(--gold-line)}
.cal td .past{color:var(--line2)}
.cal-key{display:flex; gap:18px; font-size:.88rem; color:var(--muted); margin:4px 0}
.cal-key .k{display:inline-flex; align-items:center; gap:6px}
.cal-key .sw{width:16px; height:16px; border-radius:5px; display:inline-block}
.cal-key .sw.free{background:var(--teal-soft); border:1px solid var(--teal)}
.cal-key .sw.booked{background:var(--bg2); border:1px solid var(--line2)}
.cal-key .sw.ask{background:var(--gold-soft); border:1px dashed var(--gold-line)}
.cal-fallback{display:none}
.cal-fallback.show{display:block}

/* your hosts */
.hosts{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; box-shadow:var(--shadow);
}
@media (max-width:680px){ .hosts{grid-template-columns:1fr; gap:16px} }
.hosts img{width:100%; height:auto; border-radius:14px}
.hosts p{margin:0 0 10px}
.hosts p:last-child{margin-bottom:0}
.hosts .sign{font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--gold-ink)}

/* footer */
footer{border-top:1px solid var(--line); margin-top:56px; padding:28px 0 40px; color:var(--muted); font-size:.92rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center}
footer a{color:var(--muted)}