:root{
  --marina-deep:#0B3B4B;
  --marina-deeper:#082A36;
  --adriatic-teal:#1E7A87;
  --archway-sand:#ECE0C8;
  --colosseum-clay:#B3602E;
  --colosseum-clay-dark:#8F4A22;
  --littorina-maroon:#6E2027;
  --foam:#F7F5EF;
  --ink:#10262C;
  --ink-soft:#3C4F55;
  --line:rgba(16,38,44,0.14);
  --line-light:rgba(247,245,239,0.22);
  --radius:4px;
  --display: 'Archivo', sans-serif;
  --body: 'Source Serif 4', serif;
  --mono: 'Space Mono', monospace;

  --page-bg: var(--foam);
  --card-bg: var(--foam);
  --surface-bg: #ffffff;
  /* Heading/value color on light card backgrounds (La Casa cards, section
     headings, host stats, practical-detail values) -- deep navy reads fine
     on the light --card-bg, but needs to flip to something light in dark
     mode (see below), since --marina-deep itself stays a literal dark navy
     throughout for the brand-color blocks (hero, quartiere, CTA button)
     that are deliberately navy regardless of site theme. */
  --heading-ink: var(--marina-deep);
}

/* Dark mode: deepen the marina/ink tones further and flip the page
   background to the "deeper" marina shade instead of the cream foam, while
   keeping the same accent hues (teal, clay, sand) so the brand still reads
   as itself -- not just an inverted light theme. Two trigger paths, same
   variables: the OS-level prefers-color-scheme when the user has left the
   in-app toggle on "Auto" (no [data-theme] set), and an explicit
   [data-theme="dark"] from the toggle which always wins regardless of OS
   setting. See app.js's applyTheme(). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --page-bg:#081D25;
    --card-bg:#0E2B35;
    --surface-bg:#0E2B35;
    --ink:#EDEAE1;
    --ink-soft:#AEC0C4;
    --line:rgba(237,234,225,0.14);
    --foam:#EDEAE1;
    --heading-ink: var(--archway-sand);
  }
}
:root[data-theme="dark"]{
  --page-bg:#081D25;
  --card-bg:#0E2B35;
  --surface-bg:#0E2B35;
  --ink:#EDEAE1;
  --ink-soft:#AEC0C4;
  --heading-ink: var(--archway-sand);
  --line:rgba(237,234,225,0.14);
  --foam:#EDEAE1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background 0.2s ease, color 0.2s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:0.01em;}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--adriatic-teal);
  margin-bottom:0.9rem;
  display:block;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

a:focus-visible,button:focus-visible,select:focus-visible{
  outline:3px solid var(--colosseum-clay);
  outline-offset:3px;
}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(11,59,75,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-light);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--foam);}
.brand img{height:44px;width:44px;border-radius:50%;object-fit:cover;background:var(--foam);}
.brand-word{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.15;color:#F7F5EF;}
.brand-word small{display:block;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.14em;color:var(--archway-sand);text-transform:uppercase;margin-top:2px;}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-controls{display:flex;align-items:center;gap:8px;}
.nav-select{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;
  background:rgba(247,245,239,0.1);color:var(--foam);
  border:1px solid rgba(247,245,239,0.3);border-radius:999px;
  padding:6px 10px;cursor:pointer;
}
.nav-select option{color:#10262C;}
.nav-cta{
  font-family:var(--display);font-weight:700;font-size:0.85rem;
  background:var(--colosseum-clay);color:#F7F5EF;
  padding:10px 20px;border-radius:999px;text-decoration:none;
  white-space:nowrap;
  transition:background 0.15s ease;
}
.nav-cta:hover{background:var(--colosseum-clay-dark);}

.site-subnav{
  max-width:1120px;margin:0 auto;padding:0 28px 12px;
  display:flex;gap:22px;overflow-x:auto;
  border-top:1px solid rgba(247,245,239,0.1);
  padding-top:10px;
}
.site-subnav a{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.04em;
  color:rgba(247,245,239,0.78);text-decoration:none;white-space:nowrap;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color 0.15s ease,border-color 0.15s ease;
}
.site-subnav a:hover{color:var(--foam);border-bottom-color:var(--archway-sand);}
.site-subnav::-webkit-scrollbar{height:0;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--marina-deep) 0%, var(--marina-deeper) 100%);
  color:#F7F5EF;
  overflow:hidden;
}
.hero-inner{
  max-width:1120px;margin:0 auto;padding:76px 28px 0;
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:900;
  line-height:1.02;
  color:#F7F5EF;
}
.hero h1 em{
  font-style:normal;color:var(--archway-sand);
}
.hero .sub-it{
  font-family:var(--body);font-style:italic;color:var(--archway-sand);
  font-size:1.05rem;margin-top:18px;opacity:0.85;
}
.hero p.lede{
  font-family:var(--body);font-size:1.12rem;line-height:1.65;
  color:rgba(247,245,239,0.9);
  margin-top:16px;max-width:46ch;
}
.hero-photo{
  border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  border:1px solid rgba(247,245,239,0.15);
}
.hero-photo img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.hero-photo img.spin-in{
  animation:heroSpinIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes heroSpinIn{
  0%{transform:rotate(-230deg) scale(0.6);opacity:0;}
  100%{transform:rotate(0) scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo img.spin-in{animation:none;}
}

/* ---------- DEPARTURE BOARD ---------- */
.board-wrap{max-width:1120px;margin:56px auto 0;padding:0 28px;}
.board{
  background:var(--marina-deeper);
  border:1px solid rgba(247,245,239,0.18);
  border-radius:6px;
  padding:6px;
  font-family:var(--mono);
}
.board-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;color:var(--archway-sand);
  font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;
  border-bottom:1px dashed rgba(247,245,239,0.2);
}
.board-title .dot{width:7px;height:7px;border-radius:50%;background:#5fbf7a;display:inline-block;margin-right:8px;box-shadow:0 0 6px #5fbf7a;}
.board-row{
  display:grid;
  grid-template-columns:1.4fr 1.4fr 0.9fr 0.7fr;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(247,245,239,0.08);
  color:#F7F5EF;
  font-size:0.82rem;
  align-items:center;
}
.board-row:last-child{border-bottom:none;}
.board-row .from{color:var(--archway-sand);letter-spacing:0.03em;}
.board-row .to{letter-spacing:0.03em;}
.board-row .time{color:#7fd6a6;text-align:right;font-weight:700;}
.board-row .mode{color:rgba(247,245,239,0.55);font-size:0.72rem;text-align:right;}

/* ribbon divider */
.ribbon-divider{position:relative;height:140px;margin-top:40px;}
.ribbon-divider svg{width:100%;height:100%;display:block;}

section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:900;color:var(--heading-ink);}
.section-head p{color:var(--ink-soft);margin-top:14px;font-size:1.05rem;}

/* ---------- LA CASA GRID ---------- */
.casa-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:6px;overflow:hidden;
}
.casa-card{background:var(--card-bg);padding:28px 24px;}
.casa-card .num{font-family:var(--mono);font-size:0.7rem;color:var(--adriatic-teal);letter-spacing:0.1em;}
.casa-card h3{font-size:1.05rem;color:var(--heading-ink);margin:10px 0 8px;font-weight:700;}
.casa-card p{margin:0;color:var(--ink-soft);font-size:0.95rem;line-height:1.55;}

/* ---------- GALLERY ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:160px;
  gap:8px;
}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
.gallery a:nth-child(1){grid-column:span 2;grid-row:span 2;}
.gallery a{display:block;overflow:hidden;border-radius:4px;}
.gallery img{transition:transform 0.4s ease;}
.gallery a:hover img{transform:scale(1.04);}

/* ---------- QUARTIERE SPLIT ---------- */
.quartiere{
  background:var(--marina-deep);
  color:#F7F5EF;
}
.quartiere .section-head h2{color:#F7F5EF;}
.quartiere .section-head p{color:rgba(247,245,239,0.75);}
.split{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid rgba(247,245,239,0.18);
  border-radius:6px;overflow:hidden;
}
.split > div{padding:36px 32px;}
.split .mare{background:rgba(30,122,135,0.22);border-right:1px solid rgba(247,245,239,0.18);}
.split .roma{background:rgba(179,96,46,0.16);}
.split .eyebrow{color:var(--archway-sand);}
.split h3{font-size:1.5rem;margin-bottom:12px;color:#F7F5EF;}
.split ul{margin:0;padding-left:1.1em;color:rgba(247,245,239,0.88);font-size:0.98rem;line-height:1.7;}
.split li{margin-bottom:6px;}

/* ---------- LOCATION ---------- */
.location-address{
  font-family:var(--mono);font-size:0.95rem;color:var(--ink-soft);
  margin:0 0 20px;letter-spacing:0.02em;
}
.location-map-wrap{
  position:relative;width:100%;padding-top:45%;
  border-radius:6px;overflow:hidden;border:1px solid var(--line);
  background:var(--card-bg);
}
.location-map-wrap iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
@media (max-width:860px){
  .location-map-wrap{padding-top:75%;}
  .reviews-grid{grid-template-columns:1fr;}
}

/* ---------- HOST ---------- */
.host-card{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;
  background:var(--card-bg);border:1px solid var(--line);border-radius:6px;padding:36px;
}
.host-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;}
.host-stats{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap;}
.host-stat{font-family:var(--mono);}
.host-stat b{display:block;font-size:1.3rem;color:var(--heading-ink);}
.host-stat span{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);}
.badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.badge{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.05em;
  background:var(--archway-sand);color:var(--marina-deep);
  padding:6px 12px;border-radius:999px;
}

/* ---------- REVIEWS ---------- */
.reviews-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;}
.reviews-rating{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--heading-ink);}
.reviews-count{color:var(--ink-soft);font-size:0.95rem;}
.reviews-categories{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.review-category{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.02em;
  border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;color:var(--ink-soft);
}
.review-category-value{font-weight:700;color:var(--heading-ink);}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.review-card{
  border:1px solid var(--line);border-radius:6px;padding:22px;background:var(--card-bg);
}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.review-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.review-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:var(--adriatic-teal);color:#F7F5EF;font-weight:700;font-size:1.1rem;
}
.review-name{font-weight:700;color:var(--heading-ink);font-size:0.95rem;}
.review-years{font-size:0.78rem;color:var(--ink-soft);}
.review-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.review-stars{color:var(--colosseum-clay);letter-spacing:0.05em;}
.review-date{font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft);}
.review-text{margin:0;color:var(--ink-soft);font-size:0.92rem;line-height:1.6;}

/* ---------- PRACTICALITIES ---------- */
.practical-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.practical-card{
  border:1px solid var(--line);border-radius:6px;padding:22px;background:var(--card-bg);
}
.practical-card .label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--adriatic-teal);}
.practical-card .value{font-family:var(--display);font-weight:700;color:var(--heading-ink);font-size:1.15rem;margin-top:8px;}
.note-box{
  margin-top:28px;border-left:3px solid var(--colosseum-clay);
  background:rgba(179,96,46,0.06);padding:18px 22px;border-radius:0 4px 4px 0;
  font-size:0.95rem;color:var(--ink-soft);
}

/* ---------- CTA ---------- */
.cta{
  background:var(--colosseum-clay);
  color:#F7F5EF;text-align:center;padding:80px 0;
}
.cta h2{color:#F7F5EF;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;}
.cta p{color:rgba(247,245,239,0.9);margin-top:14px;font-size:1.05rem;}
.cta-button{
  display:inline-block;margin-top:30px;
  background:var(--marina-deep);color:#F7F5EF;
  font-family:var(--display);font-weight:700;
  padding:16px 40px;border-radius:999px;text-decoration:none;font-size:1rem;
  transition:transform 0.15s ease, background 0.15s ease;
}
.cta-button:hover{background:var(--marina-deeper);transform:translateY(-2px);}
.cta small{display:block;margin-top:16px;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;color:rgba(247,245,239,0.7);}

/* ---------- ABOUT OSTIA (static page) ---------- */
.ostia-hero{
  background:linear-gradient(180deg,var(--marina-deep) 0%, var(--marina-deeper) 100%);
  color:#F7F5EF;padding:0 0 48px;
}
.ostia-hero-photo{position:relative;width:100%;max-height:360px;overflow:hidden;}
.ostia-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ostia-hero-credit{
  position:absolute;right:12px;bottom:10px;
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.03em;
  color:rgba(247,245,239,0.85);background:rgba(11,59,75,0.55);
  padding:3px 8px;border-radius:4px;
}
.ostia-hero .wrap{padding-top:40px;}
.ostia-hero .eyebrow{color:var(--archway-sand);}
.ostia-hero h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2rem,4.2vw,3rem);margin:12px 0 18px;color:#F7F5EF;
}
.ostia-hero p{font-size:1.08rem;color:rgba(247,245,239,0.88);max-width:72ch;line-height:1.65;}
.ostia-groups{display:flex;flex-direction:column;gap:56px;}
.ostia-group h2{
  font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:900;color:var(--heading-ink);
  margin-bottom:22px;
}
.ostia-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.ostia-card{
  border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--card-bg);
  display:flex;flex-direction:column;gap:10px;
}
.ostia-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ostia-card h3{font-size:1.1rem;color:var(--heading-ink);font-weight:700;margin:0;}
.ostia-meta{display:flex;gap:10px;flex-wrap:wrap;}
.ostia-tag{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--adriatic-teal);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  white-space:nowrap;
}
.ostia-rating{font-family:var(--mono);font-size:0.78rem;color:var(--colosseum-clay);white-space:nowrap;}
.ostia-card p{margin:0;color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}
.ostia-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px;}
.ostia-card a.ostia-link{
  font-family:var(--mono);font-size:0.78rem;color:var(--adriatic-teal);text-decoration:none;
  border-bottom:1px solid var(--adriatic-teal);
}
.ostia-card a.ostia-link:hover{color:var(--colosseum-clay);border-bottom-color:var(--colosseum-clay);}
@media (max-width:860px){
  .ostia-grid{grid-template-columns:1fr;}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--marina-deeper);color:rgba(247,245,239,0.7);
  padding:40px 0;font-size:0.85rem;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
footer a{color:var(--archway-sand);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding-top:52px;}
  .hero-photo{order:-1;}
  .casa-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split .mare{border-right:none;border-bottom:1px solid rgba(247,245,239,0.18);}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery a:nth-child(1){grid-column:span 2;}
  .host-card{grid-template-columns:1fr;text-align:left;}
  .practical-grid{grid-template-columns:repeat(2,1fr);}
  .board-row{grid-template-columns:1fr;gap:2px;text-align:left;}
  .board-row .time,.board-row .mode{text-align:left;}
  section{padding:60px 0;}
  .nav-right{gap:8px;}
  .nav-select{font-size:0.62rem;padding:5px 8px;}
}

/* Loading state: hide everything content-dependent until app.js has
   fetched /api/content and rendered it, rather than flashing empty
   sections or literal {{placeholder}} text. */
body:not(.content-ready) [data-bind],
body:not(.content-ready) [data-bind-html]{
  visibility:hidden;
}