:root{
  --bg:#0B1320;
  --bg2:#0F1A2C;
  --ink:#10131A;
  --paper:#F6F2EA;
  --paper2:#FBFAF7;
  --muted:#6A7486;
  --gold:#C8A96A;
  --gold2:#E3C88A;
  --line:rgba(16,19,26,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.20);
  --radius: 22px;
  --radius2: 28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper2);
  line-height:1.5;
}

img{max-width:100%; display:block}

.container{
  width:min(1120px, calc(100% - 40px));
  margin-inline:auto;
}

.top{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--paper2) 80%, transparent);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  min-width: 220px;
}

.brand__mark{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(11,19,32,.25);
  overflow:hidden;
}

.brand__logo{
  width:38px;height:38px;
  display:block;
}


.brand__name{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.05;
}
.brand__tag{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  margin-top:2px;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav__links a{
  text-decoration:none;
  color:color-mix(in srgb, var(--ink) 86%, var(--muted));
  font-size:.95rem;
}
.nav__links a:hover{color:var(--ink)}

.nav__toggle{
  display:none;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:transparent;
}
.nav__toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--ink);
  margin:4px auto;
  border-radius:2px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid transparent;
  font-weight:600;
  letter-spacing:.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px)}
.btn--gold{
  background:linear-gradient(135deg, var(--gold2), var(--gold));
  color:#1B1406;
  box-shadow: 0 16px 40px rgba(200,169,106,.35);
}
.btn--soft{
  background:rgba(11,19,32,.06);
  color:var(--ink);
  border-color:rgba(11,19,32,.10);
}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(11,19,32,.12);
}
.btn--large{
  padding:14px 18px;
  border-radius:16px;
  font-size:1.02rem;
}

.section{
  padding:74px 0;
}
.section--dark{
  background:linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--paper2);
}
.section--tint{
  background:linear-gradient(180deg, rgba(200,169,106,.10), rgba(11,19,32,.02));
}

.section__head{
  display:grid;
  gap:12px;
  max-width: 780px;
  margin-bottom: 28px;
}
.section__head h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: -.01em;
}
.section__head p{margin:0; color:color-mix(in srgb, var(--ink) 72%, var(--muted))}
.section__head--dark p{color: color-mix(in srgb, var(--paper2) 86%, #ffffff)}

.hero{
  position:relative;
  min-height: 84vh;
  display:grid;
  align-items:center;
  overflow:hidden;
  background: var(--bg);
}
.hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,19,32,.92) 0%, rgba(11,19,32,.62) 55%, rgba(11,19,32,.42) 100%),
    var(--hero-image, url("../img/exterior-street.jpg"));
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.02);
}
.hero__content{
  position:relative;
  padding: 110px 0 80px;
  color: var(--paper2);
}
.eyebrow{
  margin:0 0 10px;
  color: rgba(227,200,138,.92);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size:.82rem;
}
.hero h1{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height:1.05;
  letter-spacing: -.02em;
  max-width: 900px;
}
.lead{
  margin: 14px 0 0;
  max-width: 740px;
  font-size: 1.05rem;
  color: rgba(246,242,234,.88);
}
.lead strong{color:rgba(255,255,255,.96)}
.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 22px;
}
.hero__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 28px;
}
.chip{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(15,26,44,.35);
  font-size:.92rem;
  color: rgba(246,242,234,.92);
}

.grid{
  display:grid;
  gap:16px;
}
.cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.card{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px 18px 16px;
  box-shadow: 0 18px 44px rgba(16,19,26,.08);
}
.card__icon{font-size:1.4rem}
.card h3{
  margin:10px 0 6px;
  font-size:1.02rem;
}
.card p{
  margin:0;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size:.95rem;
}

.strip{
  padding: 0;
  background: linear-gradient(180deg, rgba(11,19,32,.02), rgba(200,169,106,.08));
}
.strip__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:center;
  padding: 54px 0;
}
.strip__copy h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
}
.strip__copy p{
  margin:10px 0 14px;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}
.strip__media img{
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.16);
}

.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.gallery__item{
  border:0;
  padding:0;
  border-radius: 18px;
  overflow:hidden;
  background:transparent;
  cursor:pointer;
  position:relative;
  outline: 1px solid rgba(255,255,255,.10);
}
.gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.01);
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.05) contrast(1.02);
}
.gallery__item:hover img{transform: scale(1.04)}
.gallery__item:nth-child(1){grid-column: span 7; aspect-ratio: 16/9}
.gallery__item:nth-child(2){grid-column: span 5; aspect-ratio: 4/3}
.gallery__item:nth-child(3){grid-column: span 4; aspect-ratio: 4/3}
.gallery__item:nth-child(4){grid-column: span 4; aspect-ratio: 4/3}
.gallery__item:nth-child(5){grid-column: span 4; aspect-ratio: 4/3}
.gallery__item:nth-child(6){grid-column: span 12; aspect-ratio: 21/9}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 22px;
}

.amen{
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.amen__group{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.amen__group h3{margin:0 0 10px}
.amen__group ul{margin:0; padding-left: 18px; color:color-mix(in srgb, var(--ink) 78%, var(--muted))}
.amen__group li{margin:6px 0}

.loc{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.loc__card{
  background: rgba(246,242,234,.86);
  border:1px solid rgba(11,19,32,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(11,19,32,.06);
}
.loc__card h3{margin:0 0 10px}
.loc__card ul{margin:0; padding-left:18px; color:color-mix(in srgb, var(--ink) 78%, var(--muted))}
.loc__card li{margin:6px 0}

.milan-card{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  background: var(--paper);
  border:1px solid rgba(11,19,32,.10);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.milan-card img{
  height:100%;
  object-fit:cover;
  min-height: 280px;
}
.milan-card__copy{
  padding: 20px;
  display:grid;
  gap: 10px;
  align-content:center;
}
.milan-card__copy h3{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:1.55rem;
}
.milan-card__copy p{
  margin:0;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}

.rules{
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.rules__card{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.rules__card h3{margin:0 0 10px}
.rules__card ul{margin:0; padding-left: 18px; color:color-mix(in srgb, var(--ink) 78%, var(--muted))}
.rules__card li{margin:6px 0}

.fineprint{
  margin-top: 18px;
  color: color-mix(in srgb, var(--ink) 68%, var(--muted));
  font-size: .95rem;
}

.final{
  padding: 56px 0;
  background: radial-gradient(60% 60% at 10% 20%, rgba(227,200,138,.22), transparent),
              radial-gradient(70% 70% at 90% 40%, rgba(11,19,32,.12), transparent);
}
.final__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  background: var(--paper);
  border:1px solid rgba(11,19,32,.10);
  border-radius: var(--radius2);
  padding: 24px;
  box-shadow: 0 18px 60px rgba(11,19,32,.10);
}
.final h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: 1.85rem;
}
.final p{
  margin:6px 0 0;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}


/* Footer brand (for guide pages) */
.footer__brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:.01em;
}
.footer__brand img{
  width:34px;height:34px;
  background: rgba(255,255,255,.92);
  border-radius:12px;
  padding:5px;
}
.footer__muted{
  margin-top:6px;
  font-size:.92rem;
  color: rgba(246,242,234,.70);
}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 16px;
}
.footer__links a{
  color: rgba(246,242,234,.82);
  text-decoration:none;
  font-size:.95rem;
}
.footer__links a:hover{color: rgba(246,242,234,.96); text-decoration:underline;}

.footer{
  background: var(--bg);
  color: rgba(246,242,234,.88);
  padding: 26px 0 90px; /* space for mobile bar */
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer__small{
  font-size:.88rem;
  color: rgba(246,242,234,.70);
  max-width: 520px;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 26px;
  z-index: 50;
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width: min(1100px, 100%);
  max-height: 82vh;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}
.lightbox__close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 26px;
  cursor:pointer;
}

/* Always-visible booking */
.book-fab{
  position:fixed;
  right: 16px;
  bottom: 92px;
  z-index: 40;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 16px;
  color: #1B1406;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  box-shadow: 0 18px 50px rgba(200,169,106,.40);
  font-weight: 700;
  letter-spacing: .01em;
}
.book-fab:hover{transform: translateY(-1px)}
.book-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 45;
  background: color-mix(in srgb, var(--bg) 94%, #000);
  border-top: 1px solid rgba(255,255,255,.10);
  display:none;
}
.book-bar__inner{
  width:min(1120px, calc(100% - 24px));
  margin-inline:auto;
  padding: 12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.book-bar__text{
  color: rgba(246,242,234,.92);
  display:grid;
  gap: 2px;
}
.book-bar__text span{
  font-size:.88rem;
  color: rgba(246,242,234,.68);
}

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .amen{grid-template-columns: repeat(2, minmax(0,1fr))}
  .loc{grid-template-columns: 1fr}
  .rules{grid-template-columns: repeat(2, minmax(0,1fr))}
  .strip__inner{grid-template-columns: 1fr}
  .milan-card{grid-template-columns: 1fr}
  .gallery__item:nth-child(1){grid-column: span 12}
  .gallery__item:nth-child(2){grid-column: span 12}
  .gallery__item:nth-child(3){grid-column: span 6}
  .gallery__item:nth-child(4){grid-column: span 6}
  .gallery__item:nth-child(5){grid-column: span 12}
  .gallery__item:nth-child(6){grid-column: span 12; aspect-ratio: 16/9}
}

@media (max-width: 760px){
  .nav__toggle{display:inline-block}
  .nav__links{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 68px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background: var(--paper2);
    border:1px solid var(--line);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.10);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:10px 10px}

  .book-fab{display:none}
  .book-bar{display:block}
  .hero__content{padding: 92px 0 70px}
  .section{padding: 62px 0}
  .cards{grid-template-columns: 1fr}
  .amen{grid-template-columns: 1fr}
  .rules{grid-template-columns: 1fr}
  .final__inner{flex-direction:column; align-items:flex-start}
}


/* Reviews */
.rating-row{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  align-items:stretch;
  margin: 18px 0 14px;
}
.rating-card{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: 0 18px 44px rgba(16,19,26,.08);
}
.rating-card__score{
  font-family:"Playfair Display", serif;
  font-size: 3rem;
  line-height:1;
  letter-spacing:-.02em;
}
.rating-card__stars{
  margin-top:6px;
  color: var(--gold);
  letter-spacing:.12em;
}
.rating-card__meta{
  margin-top:10px;
  color: var(--muted);
  font-size:.95rem;
}

.rating-list{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 18px;
  box-shadow: 0 18px 44px rgba(16,19,26,.08);
}
.rating-list__item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(11,19,32,.04);
  border:1px solid rgba(11,19,32,.06);
}
.rating-list__item span{color: color-mix(in srgb, var(--ink) 72%, var(--muted))}
.rating-list__item strong{font-weight:700}

.review-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
}
.chip--light{
  border-color: rgba(11,19,32,.10);
  background: rgba(11,19,32,.04);
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
}

.review-cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.review{
  margin:0;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px 18px 16px;
  box-shadow: 0 18px 44px rgba(16,19,26,.08);
}
.review blockquote{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
}
.review figcaption{
  margin-top:12px;
  color: var(--muted);
  font-size:.92rem;
}

/* Responsive tweaks */
@media (max-width: 980px){
  .rating-row{grid-template-columns: 1fr;}
  .review-cards{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .review-cards{grid-template-columns: 1fr;}
  .rating-list{grid-template-columns: 1fr;}
}

/* ---------- Guide pages (SEO) ---------- */
.hero--page{min-height:60vh}
.hero--page .hero__content{padding: 92px 0 62px;}

.breadcrumbs{
  margin-top: 18px;
  font-size: .92rem;
  color: rgba(246,242,234,.82);
}
.breadcrumbs a{color: rgba(227,200,138,.92); text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline}

.prose{
  max-width: 860px;
}
.prose h2{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  margin: 34px 0 10px;
  letter-spacing: -.01em;
}
.prose h3{
  margin: 22px 0 8px;
  font-size: 1.1rem;
}
.prose p{margin: 0 0 14px; color: color-mix(in srgb, var(--ink) 80%, var(--muted));}
.prose ul{margin: 0 0 16px; padding-left: 18px; color: color-mix(in srgb, var(--ink) 84%, var(--muted));}
.prose li{margin: 8px 0;}

.callouts{display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 18px;}
.callout{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: 0 18px 44px rgba(16,19,26,.06);
}
.callout strong{display:block; margin-bottom:6px;}
.callout p{margin:0; color: color-mix(in srgb, var(--ink) 76%, var(--muted)); font-size:.96rem;}

.guide-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.faq{
  margin-top: 18px;
  display:grid;
  gap: 12px;
}
.details{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.details summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
.details summary::-webkit-details-marker{display:none}
.details p{margin: 10px 0 0;}

@media (max-width: 980px){
  .callouts{grid-template-columns: 1fr;}
}

/* Itinerary */
.itinerary{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.itinerary__day{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:18px;
  padding:18px;
}
.itinerary__day h3{margin:0 0 10px 0;}
.itinerary__grid{display:grid; gap:12px;}
@media (min-width: 860px){.itinerary__grid{grid-template-columns: 1fr 1fr;}}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:.92rem;
  color: color-mix(in srgb, var(--ink) 86%, var(--muted));
}

.footer__logo-link{display:inline-flex; align-items:center;}
.footer__logo-link:focus-visible{outline: 2px solid rgba(222,181,104,.9); outline-offset: 3px; border-radius: 14px;}

/* --- Printable checklists (SEO pages) --- */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
}
.checklist label{cursor:pointer}
.checklist input[type="checkbox"]{
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color: var(--gold);
}
.checklist--cols{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 760px){
  .checklist--cols{grid-template-columns: 1fr;}
}

/* Print styles */
.no-print{display:block}
@media print{
  .no-print, .nav__toggle, .book-fab, .book-bar{display:none !important;}
  body{background:#fff;}
  .hero__bg{display:none !important;}
  .hero{padding: 34px 0 10px;}
  .section{padding: 18px 0;}
  a[href]:after{content:"";}
}