/* ==========================================================================
   Med Island Suites — stylesheet
   Generated by generate.js. Edits here are overwritten on the next run;
   change generate.js instead.
   ========================================================================== */

/* -- 1. tokens ----------------------------------------------------------- */
:root{
  color-scheme: light dark;

  --canvas:#FBFAF8; --surface:#FFFFFF; --sunken:#F4F1EA; --sunken-2:#EFEAE0;
  --line:#E6E1D8; --line-strong:#D2CCC0; --line-ui:#8A8377;
  --ink:#171614; --ink-2:#575147; --ink-3:#6E675B;

  --accent:#0E5157; --accent-strong:#0A3F44; --accent-fg:#FFFFFF;
  --accent-tint:#EAF0EF; --accent-ink:#0B4A50; --focus:#0E5157;

  --on-photo:#FFFFFF; --on-photo-2:rgba(255,255,255,.80);
  --on-photo-line:rgba(255,255,255,.22);
  --glass:rgba(18,17,15,.66); --focus-inverse:#7FD6D8;
  --photo-inset:rgba(23,22,20,.08);

  --footer-bg:#1B1A17; --footer-ink:#F2EFEA; --footer-ink-2:#B0A99D;
  --footer-accent:#7FD6D8; --footer-line:rgba(255,255,255,.12);

  --lb-bg:rgba(12,12,11,.95); --lb-ink:#FFFFFF; --lb-ink-2:#C9C4BC;
  --lb-line:rgba(255,255,255,.28); --lb-fill:rgba(255,255,255,.10);

  --note-bg:#F7EDE7; --note-line:#E3CDBF; --note-ink:#7E3418;

  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --font-display:"Instrument Serif","Instrument Serif Fallback","Iowan Old Style",
         "Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;

  --fs-overline:11px; --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px;
  --fs-base:clamp(16px,1.05vw,17px);
  --fs-md:clamp(17px,1.5vw,19px);
  --fs-lg:clamp(20px,2vw,23px);
  --fs-xl:clamp(25px,3vw,33px);
  --fs-2xl:clamp(31px,4.4vw,48px);
  --fs-3xl:clamp(38px,6.4vw,72px);

  --gutter:20px; --maxw:1280px; --maxw-wide:1440px; --maxw-text:68ch;
  --header-h:60px; --subnav-h:0px; --sec-y:56px; --gap:6px;

  --r-1:2px; --r-2:4px; --r-3:6px;

  --sh-sticky:0 1px 0 var(--line), 0 6px 20px -14px rgba(23,22,20,.28);
  --sh-float:0 2px 6px -2px rgba(12,12,11,.28), 0 12px 32px -12px rgba(12,12,11,.32);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.65,.05,.36,1);
  --t-fast:140ms; --t:220ms; --t-slow:420ms; --t-photo:700ms;
}
.page--property{ --subnav-h:52px; }

@media (min-width:640px){ :root{ --gutter:28px; --gap:8px; } }
@media (min-width:768px){ :root{ --sec-y:80px; } }
@media (min-width:1024px){
  :root{ --gutter:40px; --header-h:72px; --sec-y:112px; --gap:10px; }
}
@media (min-width:1440px){ :root{ --gutter:56px; } }

@media (prefers-color-scheme: dark){
  :root{
    --canvas:#131211; --surface:#1C1A18; --sunken:#201E1B; --sunken-2:#2A2724;
    --line:#2E2B27; --line-strong:#3A3630; --line-ui:#726B60;
    --ink:#F2EFEA; --ink-2:#B8B1A6; --ink-3:#9C9488;
    --accent:#5AC8CB; --accent-strong:#7FD6D8; --accent-fg:#131211;
    --accent-tint:#16292B; --accent-ink:#7FD6D8; --focus:#7FD6D8;
    --note-bg:#2A1C15; --note-line:#4A3226; --note-ink:#F0B694;
    --footer-bg:#0E0D0C;
    --photo-inset:rgba(255,255,255,.10);
  }
}

@font-face{
  font-family:"Instrument Serif Fallback";
  src:local("Iowan Old Style"),local("Palatino Linotype"),local("Palatino"),
      local("Book Antiqua"),local("Georgia");
  size-adjust:103%; ascent-override:90%; descent-override:22%; line-gap-override:0%;
}

/* -- 2. base ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--header-h) + var(--subnav-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure,dl{ margin:0; }
ul{ list-style:none; padding:0; }
h1,h2,h3{ font-weight:400; text-wrap:balance; }
p{ text-wrap:pretty; }
button{ font:inherit; color:inherit; }
a{
  color:inherit;
  text-decoration-line:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(23,22,20,.35);
  text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);
  transition:text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a:hover{ text-decoration-color:currentColor; }
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:12px; top:12px; z-index:999; padding:10px 14px; background:var(--accent);
  color:var(--accent-fg); border-radius:var(--r-2); text-decoration:none;
}
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-2); transition:none; }
.on-photo :focus-visible, dialog :focus-visible, .site-footer :focus-visible{ outline-color:var(--focus-inverse); }
.tile:focus-visible, .mosaic__cell:focus-visible{ outline-offset:-3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:var(--maxw-wide); }
.band{ padding-block:var(--sec-y); }
.band--sunken{ background:var(--sunken); }
.band--tight{ padding-block:calc(var(--sec-y) * .62); }
.band--edge{ border-top:1px solid var(--line-strong); }
.tnum{ font-variant-numeric:tabular-nums; }

/* -- 3. rule label (S2) --------------------------------------------------- */
.rule-label{
  position:relative; --knockout:var(--canvas); margin:0 0 24px;
  /* the label sets its own type so the floated aside shares the same line box */
  font-family:var(--font); font-size:var(--fs-overline); line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink-3);
}
.rule-label::before{
  content:""; position:absolute; inset-inline:0; top:.55em; height:1px; background:var(--line);
}
.rule-label > span{
  position:relative; background:var(--knockout); padding-inline-end:14px;
}
.rule-label > .rule-label__aside{
  float:right; padding-inline:14px 0; font-variant-numeric:tabular-nums;
}
.band--sunken .rule-label{ --knockout:var(--sunken); }
.site-footer .rule-label{ --knockout:var(--footer-bg); }
@media (max-width:479px){ .rule-label__aside{ display:none; } }

/* -- 4. buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:var(--r-2);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:.01em; text-decoration:none; cursor:pointer; border:0;
  background:transparent; text-align:center;
  transition:background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn--lg{ min-height:52px; padding:0 26px; font-size:var(--fs-base); }
.btn--block{ width:100%; }
.btn--primary{ background:var(--accent); color:var(--accent-fg); }
.btn--primary:hover{ background:var(--accent-strong); transform:translateY(-1px); }
.btn--primary:active{ transform:none; }
.btn--outline{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-ui); }
.btn--outline:hover{ box-shadow:inset 0 0 0 1px var(--ink); background:var(--sunken); }
.btn--disabled{ box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink-3); cursor:not-allowed; background:repeating-linear-gradient(135deg,transparent,transparent 7px,var(--sunken) 7px,var(--sunken) 8px); }
/* a primary button can be switched off at runtime (a stay under the minimum),
   so the hatch has to outrank .btn--primary and its hover */
.btn--primary.btn--disabled,.btn--primary.btn--disabled:hover{
  background:repeating-linear-gradient(135deg,transparent,transparent 7px,var(--sunken) 7px,var(--sunken) 8px);
  color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-strong); transform:none;
}
.btn__soon{ font-weight:400; font-size:var(--fs-2xs); opacity:.85; }
.arrow{ display:inline-block; transition:transform var(--t-fast) var(--ease); }
a:hover .arrow, .btn:hover .arrow{ transform:translateX(3px); }

.note{
  background:var(--note-bg); border:1px solid var(--note-line); border-radius:var(--r-2);
  padding:12px 14px; font-size:var(--fs-2xs); line-height:1.5; color:var(--note-ink);
}
.note code{ font-size:.95em; }
.note b{ font-weight:600; }

/* -- 5. header ------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:var(--canvas);
  background:color-mix(in oklab, var(--canvas) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--sh-sticky); }
.site-header__in{ height:100%; display:flex; align-items:center; gap:18px; }
.wordmark{ display:inline-flex; align-items:center; gap:11px; color:inherit; text-decoration:none; margin-inline-end:auto; }
.wordmark::before{
  content:"M"; width:38px; height:38px; display:grid; place-items:center; flex:none;
  border-radius:50%; color:var(--accent-fg);
  background:radial-gradient(circle at 73% 24%,#F0C985 0 3px,transparent 3.5px),var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-family:var(--font-display); font-size:20px; line-height:1; font-weight:400; letter-spacing:-.04em;
}
.wordmark__name{
  display:flex; flex-direction:column; font-family:var(--font-display);
  font-size:23px; letter-spacing:-.015em; line-height:1;
}
.wordmark__name::after{
  content:"medislandsuites.com"; margin-top:4px; font-family:var(--font); font-size:8px;
  line-height:1; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.52;
}
.wordmark__rule{ width:1px; height:15px; background:currentColor; opacity:.32; }
.wordmark__sub{ font-family:var(--font); font-size:10px; font-weight:500; letter-spacing:.20em; text-transform:uppercase; opacity:.62; }
@media (max-width:479px){
  .wordmark__rule,.wordmark__sub{ display:none; }
  .wordmark__name{ font-size:20px; }
  .wordmark__name::after{ font-size:7px; letter-spacing:.12em; }
}

.nav{ display:none; }
@media (min-width:900px){
  .nav{ display:flex; align-items:center; gap:26px; }
  .nav a{
    background-image:linear-gradient(var(--accent),var(--accent));
    background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
    transition:background-size var(--t) var(--ease);
    padding-bottom:3px; text-decoration:none; color:var(--ink);
    font-size:var(--fs-sm); font-weight:500;
  }
  .nav a:hover,.nav a:focus-visible{ background-size:100% 1px; }
  .nav a[aria-current="page"]{ background-size:100% 1px; color:var(--accent); }
}
.header-cta{ display:none; }
@media (min-width:900px){ .header-cta{ display:inline-flex; } }
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px;
  min-height:44px; padding:0 10px; background:transparent; border:0; cursor:pointer;
  font-size:var(--fs-sm); font-weight:500; letter-spacing:.02em;
}
.menu-btn::after{ content:""; display:block; }
@media (min-width:900px){ .menu-btn{ display:none; } }
.sentinel{ height:1px; margin-bottom:-1px; }

/* -- 6. mobile menu ------------------------------------------------------- */
.mm{
  width:min(100%,460px); max-width:100%; margin:0 0 0 auto; height:100dvh; max-height:none;
  border:0; padding:0; background:var(--canvas); color:var(--ink);
  overflow-y:auto; overscroll-behavior:contain;
}
.mm::backdrop{ background:rgba(12,12,11,.5); }
.mm__in{ padding:20px var(--gutter) 32px; }
.mm__top{ display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:20px; }
.mm__close{
  min-width:44px; min-height:44px; background:transparent; border:0; cursor:pointer;
  font-size:var(--fs-sm); font-weight:500;
}
/* 3-column grid (index · thumb · name+score stack) so every row is the same
   height and the score chip can never detach to a line of its own. */
.mm__row{
  display:grid; grid-template-columns:1.6rem 56px minmax(0,1fr); align-items:center;
  gap:14px; padding:12px 0;
  border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
.mm__row:last-of-type{ border-bottom:1px solid var(--line); }
.mm__n{ font-size:var(--fs-overline); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.mm__thumb{ width:56px; height:42px; object-fit:cover; border-radius:var(--r-1); background:var(--sunken-2); }
.mm__txt{
  min-width:0; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:5px; min-height:56px;
}
.mm__name{ font-family:var(--font-display); font-size:19px; line-height:1.2; }
.mm__txt .score{ padding:3px 8px; line-height:1.25; }
.mm__links{ display:flex; flex-direction:column; gap:4px; margin:24px 0; }
.mm__links a{ padding:8px 0; font-size:var(--fs-sm); font-weight:500; text-decoration:none; }
.mm__actions{ display:flex; flex-direction:column; gap:10px; }
.mm__row[aria-current="page"] .mm__name{ color:var(--accent); }

/* -- 7. index hero -------------------------------------------------------- */
.hero{ padding-block:clamp(18px,3vw,34px) clamp(44px,6vw,82px); }
.hero__panel{
  display:grid; min-height:clamp(590px,72vh,760px); overflow:hidden;
  background:#103E43; color:#fff; border-radius:clamp(18px,2vw,28px);
  box-shadow:0 24px 70px -42px rgba(16,62,67,.72);
}
.hero__copy{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(38px,6vw,86px); overflow:hidden;
}
.hero__copy::after{
  content:""; position:absolute; width:360px; height:360px; right:-220px; bottom:-240px;
  border:1px solid rgba(255,255,255,.10); border-radius:50%; box-shadow:0 0 0 72px rgba(255,255,255,.025);
  pointer-events:none;
}
.hero__over{
  display:flex; align-items:center; gap:10px; font-size:var(--fs-overline); letter-spacing:.18em;
  text-transform:uppercase; color:#DCE9E4; font-weight:600;
}
.hero__over::before{ content:""; width:28px; height:1px; background:#F0C985; }
.hero h1{
  font-family:var(--font-display); font-size:clamp(48px,5.8vw,82px); line-height:.96;
  letter-spacing:-.035em; margin:24px 0 0; max-width:10.5ch; color:#fff;
}
.hero__lede{
  font-size:clamp(17px,1.45vw,20px); line-height:1.55; letter-spacing:-.008em;
  color:rgba(255,255,255,.76); max-width:47ch; margin-top:24px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero .btn--primary{ background:#F0C985; color:#173B3F; }
.hero .btn--primary:hover{ background:#F7D79C; }
.hero .btn--outline{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.hero .btn--outline:hover{ background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.72); }
.hero__proof{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:auto; padding-top:42px;
}
.hero__proof div{ border-top:1px solid rgba(255,255,255,.18); padding-top:14px; }
.hero__proof strong{ display:block; font-family:var(--font-display); font-size:25px; line-height:1; font-weight:400; color:#fff; }
.hero__proof span{ display:block; margin-top:6px; font-size:11px; line-height:1.4; color:rgba(255,255,255,.62); }
.hero__visual{ position:relative; min-height:420px; background:#D8DED9; }
.triptych{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);
  grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; width:100%; height:100%; overflow:hidden;
}
.triptych img{ width:100%; height:100%; min-height:0; object-fit:cover; object-position:center 45%; }
.triptych img:first-child{ grid-row:1 / 3; }
.hero__place{
  position:absolute; left:24px; bottom:24px; display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:999px; color:#fff; background:rgba(13,37,39,.76);
  backdrop-filter:blur(12px); box-shadow:0 8px 28px rgba(0,0,0,.18);
  font-size:12px; font-weight:600; letter-spacing:.02em;
}
.hero__place::before{ content:""; width:7px; height:7px; border-radius:50%; background:#F0C985; box-shadow:0 0 0 4px rgba(240,201,133,.18); }
@media (min-width:900px){
  .hero__panel{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
}
@media (max-width:899px){
  .hero__panel{ min-height:0; }
  .hero__copy{ min-height:520px; }
  .hero__visual{ min-height:380px; }
}
@media (max-width:599px){
  .hero{ padding-top:12px; }
  .hero__panel{ border-radius:16px; }
  .hero__copy{ min-height:0; padding:38px 24px 30px; }
  .hero h1{ font-size:clamp(44px,14vw,60px); max-width:9ch; }
  .hero__proof{ margin-top:40px; padding-top:0; gap:10px; }
  .hero__proof strong{ font-size:21px; }
  .hero__visual{ min-height:320px; }
  .triptych{ grid-template-columns:1.35fr .8fr; gap:4px; }
  .hero__place{ left:14px; bottom:14px; }
}

/* -- 8. cards ------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); gap:32px; } }
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.cards > li{ display:flex; }
.card{ position:relative; display:flex; flex-direction:column; flex:1 1 auto; height:100%; }
.card__media{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-2);
  background:var(--sunken-2); box-shadow:inset 0 0 0 1px var(--photo-inset);
}
.card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transition:transform var(--t-photo) var(--ease);
}
.card:hover .card__media img,.card:focus-within .card__media img{ transform:scale(1.03); }
.card__rule{ position:relative; height:1px; background:var(--line-strong); margin-top:16px; }
.card__rule::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease);
}
.card:hover .card__rule::after,.card:focus-within .card__rule::after{ transform:scaleX(1); }
.card__head{ display:flex; align-items:baseline; gap:12px; margin-top:14px; }
.card__n{ font-size:var(--fs-overline); color:var(--ink-3); font-variant-numeric:tabular-nums; flex:none; letter-spacing:.14em; }
.card__title{ font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.25; letter-spacing:-.01em; }
.card__title a{ text-decoration-color:rgba(23,22,20,.25); }
.card__title a::after{ content:""; position:absolute; inset:0; }
.card:hover .card__title a{ text-decoration-color:currentColor; }
.card__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative; z-index:1; }
.card__meta{ margin-top:10px; font-size:var(--fs-xs); color:var(--ink-3); }
.card__meta.tnum{ font-variant-numeric:tabular-nums; }
/* margin-top:auto keeps the terminal CTA on one baseline across a row, whether
   or not the card carries a score chip or a second line of facility chips. */
.card__go{ margin-top:auto; padding-top:16px; font-size:var(--fs-sm); color:var(--accent); font-weight:500; }

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); line-height:1.3;
  background:var(--sunken-2); border:1px solid var(--line-strong); border-radius:var(--r-1);
  padding:4px 9px; color:var(--ink-2);
}
.chip .ico{ width:14px; height:14px; }
.chip--status{ color:var(--ink-2); }
.chip--book{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500; }
@media (prefers-color-scheme: dark){ .chip--book{ color:var(--surface); } }
:root[data-theme="dark"] .chip--book{ color:var(--surface); }
:root[data-theme="light"] .chip--book{ color:#fff; }
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }

.score{
  display:inline-flex; align-items:baseline; gap:6px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-1); padding:5px 9px;
  flex:0 0 auto; white-space:nowrap;
}
.score__label{ font-size:10px; font-weight:500; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.score__num{ font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.score__den{ font-size:10px; font-weight:500; color:var(--ink-3); }
.score--glass{
  background:var(--glass); backdrop-filter:blur(6px); border-color:transparent;
  box-shadow:inset 0 0 0 1px var(--on-photo-line);
}
.score--glass .score__label,.score--glass .score__den{ color:var(--on-photo-2); }
.score--glass .score__num{ color:var(--on-photo); }

/* -- 9. why book direct --------------------------------------------------- */
/* scoped: the compact variant marks its section label as h2.rule-label, which an
   unscoped ".why h2" would restyle as a 33px display heading. */
.why .why__h{ font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.15; letter-spacing:-.015em; max-width:22ch; margin-bottom:8px; }
.why__grid{ border-top:1px solid var(--line-strong); margin-top:32px; display:grid; grid-template-columns:1fr; }
@media (min-width:640px){ .why__grid{ grid-template-columns:repeat(2,1fr); column-gap:24px; } }
@media (min-width:1024px){ .why__grid{ grid-template-columns:repeat(4,1fr); column-gap:0; } }
.why__item{ padding:24px 0 32px; }
@media (max-width:639px){ .why__item + .why__item{ border-top:1px solid var(--line); } }
@media (min-width:640px) and (max-width:1023px){ .why__item:nth-child(odd){ padding-inline-end:24px; } }
@media (min-width:1024px){
  .why__item:not(:last-child){ padding-inline-end:24px; }
  .why__item + .why__item{ border-inline-start:1px solid var(--line); padding-inline-start:24px; }
}
.why__n{ font-size:var(--fs-overline); letter-spacing:.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.why__item h3{ font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.25; margin:8px 0 8px; }
.why__item p{ font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); }

/* -- 10. contact block ---------------------------------------------------- */
.contact__grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:768px){ .contact__grid{ grid-template-columns:1.15fr 1fr; gap:56px; } }
.contact h2{ font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.15; letter-spacing:-.015em; }
.contact__lede{ margin-top:14px; color:var(--ink-2); max-width:52ch; }
.actions{ display:flex; flex-direction:column; gap:10px; }

/* -- 11. footer ----------------------------------------------------------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); padding-block:64px 32px; border-top:1px solid var(--footer-line); }
.site-footer a{ color:var(--footer-ink); }
.site-footer .rule-label > span{ color:var(--footer-ink-2); }
.site-footer .rule-label::before{ background:var(--footer-line); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:640px){ .footer__grid{ grid-template-columns:repeat(2,1fr); gap:40px 32px; } }
@media (min-width:1024px){ .footer__grid{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:48px 32px; } }
.footer__brand .wordmark__name{ font-size:26px; }
.footer__tag{ margin-top:14px; color:var(--footer-ink-2); font-size:var(--fs-sm); max-width:34ch; }
.footer__list li{ padding:7px 0; font-size:var(--fs-sm); }
.footer__list .n{ font-size:var(--fs-overline); color:var(--footer-ink-2); font-variant-numeric:tabular-nums; margin-inline-end:10px; letter-spacing:.14em; }
.footer__c{ display:block; padding:6px 0; font-size:var(--fs-sm); color:var(--footer-ink); }
.footer__c--muted{ color:var(--footer-ink-2); }
.footer__note{ font-size:var(--fs-2xs); color:var(--footer-ink-2); line-height:1.6; }
.footer__ext li{ padding:4px 0; }
.footer__ext a{ font-size:var(--fs-2xs); color:var(--footer-ink-2); }
.footer__bar{ margin-top:48px; padding-top:20px; border-top:1px solid var(--footer-line); font-size:var(--fs-2xs); color:var(--footer-ink-2); line-height:1.7; }
.footer__bar p + p{ margin-top:6px; }
.site-footer .note{ margin-top:12px; }
.site-footer .btn--disabled{ box-shadow:inset 0 0 0 1px var(--footer-line); color:var(--footer-ink-2); }

/* -- 12. subnav ----------------------------------------------------------- */
.subnav{
  position:sticky; top:var(--header-h); z-index:55; height:var(--subnav-h);
  background:var(--canvas);
  background:color-mix(in oklab, var(--canvas) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t) var(--ease);
}
.subnav.is-stuck{ box-shadow:var(--sh-sticky); }
.subnav__in{ height:100%; display:flex; align-items:center; gap:16px; }
.subnav__name{ font-size:var(--fs-sm); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
.subnav__links{ display:none; }
@media (min-width:900px){
  .subnav__links{ display:flex; gap:22px; flex:0 0 auto; }
  .subnav__links a{ font-size:var(--fs-sm); text-decoration:none; color:var(--ink-2); }
  .subnav__links a:hover{ color:var(--ink); }
}
.subnav__cta{ display:none; }
@media (min-width:900px){ .subnav__cta{ display:inline-flex; min-height:44px; padding:0 16px; flex:0 0 auto; } }
@media (min-width:900px){ .subnav__name{ flex:0 1 auto; margin-inline-end:auto; } }

/* -- 13. hero mosaic ------------------------------------------------------ */
.mosaic{
  position:relative; display:grid; gap:8px; height:clamp(360px,44vw,560px);
  margin-block:24px 0; border-radius:var(--r-2); overflow:hidden;
}
.mosaic__cell{
  position:relative; overflow:hidden; background:var(--sunken-2); border:0; padding:0;
  cursor:zoom-in; transition:box-shadow var(--t) var(--ease);
}
.mosaic__cell img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; transition:transform var(--t-photo) var(--ease); }
.mosaic__cell:hover img,.mosaic__cell:focus-visible img{ transform:scale(1.04); }
.mosaic__cell:hover{ box-shadow:inset 0 0 0 2px var(--accent); }
.mosaic__all{
  position:absolute; right:12px; bottom:12px; z-index:2; min-height:44px; padding:10px 16px;
  background:var(--canvas); color:var(--ink); border:0; border-radius:var(--r-2);
  box-shadow:var(--sh-float); font-size:var(--fs-sm); font-weight:500; cursor:pointer;
}
.mosaic__all:hover{ background:var(--surface); }
@media (min-width:900px){
  /* The plate always sits at the bottom-right of the mosaic itself (§7.2). */
  .mosaic[data-hero="wide"]{ grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; }
  .mosaic[data-hero="wide"] > :nth-child(1){ grid-area:1/1/3/2; }
  .mosaic[data-hero="tall"]{ grid-template-columns:1fr 1.55fr 1fr; grid-template-rows:1fr 1fr; }
  .mosaic[data-hero="tall"] > :nth-child(1){ grid-area:1/1/3/2; }
  .mosaic[data-hero="tall"] > :nth-child(2){ grid-area:1/2/3/3; }
}
@media (max-width:899px){
  .mosaic{ display:block; height:auto; }
  .mosaic__cell:not(:first-child){ display:none; }
  .mosaic[data-hero="wide"] .mosaic__cell:first-child{ aspect-ratio:4/3; }
  .mosaic[data-hero="tall"] .mosaic__cell:first-child{ aspect-ratio:3/4; }
}

/* -- 14. property title + overview ---------------------------------------- */
.titleblock{ padding-block:40px 0; }
.titleblock__over{ font-size:var(--fs-overline); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }
.titleblock h1{ font-family:var(--font-display); font-size:var(--fs-2xl); line-height:1.08; letter-spacing:-.02em; margin-top:14px; max-width:18ch; }
.titleblock__meta{ margin-top:16px; font-size:var(--fs-xs); color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
/* the meta facts are one wrapping text run; each separator is bound to the word
   before it with a NBSP, so a wrapped line can never begin with a middot */
.titleblock__metatext{ min-width:0; }
.titleblock__meta .sep{ opacity:.55; }

.overview{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:1024px){
  .overview{ grid-template-columns:minmax(0,7fr) minmax(320px,5fr); gap:64px; }
  .overview__side{ position:sticky; top:calc(var(--header-h) + var(--subnav-h) + 24px); align-self:start; }
}
.desc__row{ border-top:1px solid var(--line); padding-block:20px; }
/* the rule-label above already draws the section's opening hairline */
.desc__row:first-child,.rule-label + .desc__row{ border-top:0; padding-top:0; }
.desc__row:last-child{ border-bottom:1px solid var(--line); }
.desc__label{ font-size:var(--fs-overline); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.desc__body{ margin-top:8px; color:var(--ink-2); max-width:var(--maxw-text); }
.desc__prose p{ color:var(--ink-2); max-width:var(--maxw-text); }
.desc__prose p + p{ margin-top:16px; }

/* -- 15. booking module --------------------------------------------------- */
.book{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-3); padding:24px; }
.book__over{ font-size:var(--fs-overline); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.book h3{ font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.25; margin:10px 0 8px; }
.book__line{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6; }
.book__actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.book__hr{ height:1px; background:var(--line); margin:20px 0; }
.book__benefits{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--ink-2); }
.book__benefits li{ display:flex; gap:8px; }
.book__benefits li::before{ content:"—"; color:var(--ink-3); }
.book__quiet{ font-size:var(--fs-2xs); color:var(--ink-3); line-height:1.6; }
.book__quiet a{ color:var(--ink-3); }
.book__ask{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--fs-sm); color:var(--ink-2); }
.book__notice{ font-size:var(--fs-sm); color:var(--ink-2); background:var(--sunken); border-radius:var(--r-2); padding:12px 14px; margin-bottom:16px; }
.book .note{ margin-top:14px; }
/* one centred column: a two-column band left ~450px of empty paper beside the
   card at 1440 and duplicated the sticky card wholesale. */
.bookband{ max-width:660px; margin-inline:auto; }
.bookband__lead{ font-size:var(--fs-md); line-height:1.5; color:var(--ink); }
.bookband__copy p + p{ margin-top:14px; color:var(--ink-2); }
.bookband__copy{ margin-bottom:28px; }

/* -- 16. rooms ------------------------------------------------------------ */
.rooms__intro{ color:var(--ink-2); max-width:var(--maxw-text); margin-bottom:24px; }
.rooms__row{
  display:grid; grid-template-columns:2.5rem minmax(0,1fr) auto; gap:16px;
  align-items:baseline; padding-block:18px; border-top:1px solid var(--line);
  transition:background-color var(--t-fast) var(--ease);
}
.rooms__row:last-child{ border-bottom:1px solid var(--line); }
.rooms__n{ font-size:var(--fs-overline); color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.14em; }
.rooms__name{ font-size:var(--fs-md); color:var(--ink); line-height:1.4; }
.rooms__go{ font-size:var(--fs-sm); color:var(--accent); white-space:nowrap; text-decoration:none; font-weight:500; }
.rooms__row:hover{ background:var(--sunken); }
.rooms__foot{ margin-top:16px; font-size:var(--fs-xs); color:var(--ink-3); }
@media (max-width:479px){
  .rooms__go{ grid-column:2; grid-row:2; justify-self:start; }
  .rooms__row{ row-gap:6px; }
}

/* -- 17. facilities ------------------------------------------------------- */
/* explicit column counts (not auto-fill) so the first row is addressable and
   cannot draw a second hairline 31px below the section's rule-label */
.fac{ display:grid; grid-template-columns:1fr; gap:0 32px; }
@media (min-width:640px){ .fac{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .fac{ grid-template-columns:repeat(3,1fr); } }
.fac__row{ display:flex; align-items:center; gap:12px; padding-block:14px; border-top:1px solid var(--line); font-size:var(--fs-sm); }
.fac__row .ico{ color:var(--ink-2); }
.fac__row:first-child:not(.fac__ask){ border-top:0; }
@media (min-width:640px){ .fac__row:nth-child(-n+2):not(.fac__ask){ border-top:0; } }
@media (min-width:1024px){ .fac__row:nth-child(-n+3):not(.fac__ask){ border-top:0; } }
/* the ask row always closes the list full-width, whatever the facility count */
.fac__ask{ grid-column:1/-1; border-top:1px dashed var(--line-ui); color:var(--accent); text-decoration:none; font-weight:500; }
.fac__ask .ico{ color:var(--accent); }
.fac__note{ margin-top:16px; font-size:var(--fs-xs); color:var(--ink-3); max-width:var(--maxw-text); }

/* -- 18. location --------------------------------------------------------- */
.loc__grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .loc__grid{ grid-template-columns:1.4fr 1fr; gap:56px; } }
.loc__addr{ font-size:var(--fs-md); }
.loc__city{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:4px; }
.loc__body{ margin-top:24px; color:var(--ink-2); max-width:var(--maxw-text); }
.loc__body .desc__label{ margin-bottom:6px; }
/* content-width controls in a wrap row — not stacked full-bleed slabs */
.loc__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.loc__actions .btn{ flex:0 0 auto; }
.loc__status{ font-size:var(--fs-xs); color:var(--ink-3); min-height:1.4em; }

/* -- 19. gallery ---------------------------------------------------------- */
.gallery{ display:grid; gap:var(--gap); grid-auto-flow:dense; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .gallery{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1440px){ .gallery{ grid-template-columns:repeat(5,1fr); } }
.tile{
  aspect-ratio:1/1; position:relative; overflow:hidden; border-radius:var(--r-2);
  background:var(--sunken-2); border:0; padding:0; margin:0; cursor:zoom-in;
  box-shadow:inset 0 0 0 1px var(--photo-inset);
}
.tile--tall{ aspect-ratio:3/4; }
.tile--feature{ grid-column:span 2; }
.gallery--measured{ grid-auto-rows:var(--cell); }
.gallery--measured .tile{ aspect-ratio:auto; }
.gallery--measured .tile--tall{ grid-row:span 2; }
.gallery--measured .tile--feature{ grid-column:span 2; grid-row:span 2; }
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%; transition:transform var(--t-photo) var(--ease);
}
.tile:hover img{ transform:scale(1.04); }
.tile__idx{
  position:absolute; left:8px; bottom:8px; opacity:0; transform:translateY(3px);
  padding:3px 6px; border-radius:var(--r-1); background:var(--glass); color:#fff;
  font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.04em;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile:hover .tile__idx,.tile:focus-visible .tile__idx{ opacity:1; transform:none; }
.gallery[data-collapsed="true"] .tile:nth-child(n+25){ display:none; }
@media (max-width:1199px){ .gallery[data-collapsed="true"] .tile:nth-child(n+19){ display:none; } }
@media (max-width:767px){ .gallery[data-collapsed="true"] .tile:nth-child(n+13){ display:none; } }
.gallery__more{ margin-top:24px; display:flex; justify-content:center; }

/* -- 20. more stays ------------------------------------------------------- */
.more{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; }
.more > li{ scroll-snap-align:start; }
@media (min-width:900px){ .more{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; } }
.more__card{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line-strong); text-decoration:none; color:inherit; }
.more__thumb{ width:56px; height:42px; object-fit:cover; border-radius:var(--r-1); background:var(--sunken-2); flex:none; }
.more__n{ font-size:var(--fs-overline); color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.14em; flex:none; }
.more__name{ font-family:var(--font-display); font-size:19px; line-height:1.2; flex:1 1 auto; min-width:0; }

/* -- 21. mobile action bar ------------------------------------------------ */
.actionbar{
  position:fixed; inset:auto 0 0 0; z-index:50; display:flex; align-items:center; gap:12px;
  height:60px; padding:0 var(--gutter) env(safe-area-inset-bottom);
  background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:var(--sh-float);
  transform:translateY(115%); transition:transform var(--t) var(--ease);
}
.actionbar.is-visible{ transform:none; }
.actionbar__txt{ flex:1 1 auto; min-width:0; }
.actionbar__name{ font-size:var(--fs-sm); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actionbar__sub{ font-size:var(--fs-2xs); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.actionbar .btn{ flex:none; }
@media (min-width:900px){ .actionbar{ display:none; } }
@media (max-width:899px){ .page--property main{ padding-bottom:76px; } }

/* -- 22. lightbox --------------------------------------------------------- */
html.lb-open{ overflow:hidden; }
.lb{
  width:100dvw; height:100dvh; max-width:none; max-height:none; padding:0; border:0;
  background:var(--lb-bg); color:var(--lb-ink);
  display:none; grid-template-rows:56px 1fr 72px;
}
.lb[open]{ display:grid; }
.lb::backdrop{ background:rgba(12,12,11,.92); backdrop-filter:blur(2px); }
.lb__top,.lb__bot{ display:flex; align-items:center; gap:12px; padding-inline:clamp(12px,2vw,24px); }
.lb__title{ font-size:var(--fs-xs); color:var(--lb-ink-2); flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:44px; min-height:44px; padding:0 12px; border-radius:var(--r-2);
  background:var(--lb-fill); border:1px solid var(--lb-line); color:var(--lb-ink);
  font-size:var(--fs-sm); cursor:pointer; transition:background-color var(--t-fast) var(--ease);
}
.lb__btn:hover{ background:rgba(255,255,255,.18); }
.lb__btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
@media (max-width:639px){ .lb__closelabel{ display:none; } }
.lb__stage{
  position:relative; display:grid; place-items:center; overflow:hidden;
  padding:clamp(8px,2vw,28px); touch-action:none;
}
.lb__blur{
  position:absolute; inset:0; background-position:center; background-size:contain;
  background-repeat:no-repeat; filter:blur(18px); transform:scale(1.02); opacity:0;
  transition:opacity var(--t) var(--ease);
}
.lb__blur.is-on{ opacity:.9; }
.lb__img{
  position:relative; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; opacity:0; transition:opacity var(--t) var(--ease);
  view-transition-name:lb-img;
}
.lb__img.is-on{ opacity:1; }
.lb__bar{ position:absolute; top:0; left:0; height:2px; width:100%; overflow:hidden; }
.lb__bar::after{ content:""; display:block; height:100%; width:35%; background:var(--accent-strong); animation:lbbar 1.1s var(--ease-io) infinite; }
@keyframes lbbar{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(340%);} }
.lb__count{ font-size:var(--fs-xs); color:var(--lb-ink-2); font-variant-numeric:tabular-nums; letter-spacing:.04em; flex:1 1 auto; margin:0; }
.lb__nav{ display:flex; gap:10px; }
.lb__edge{ display:none; }
@media (min-width:900px){
  .lb__edge{
    display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; border-radius:var(--r-2); background:rgba(255,255,255,.10);
    border:1px solid var(--lb-line); color:var(--lb-ink); font-size:24px; line-height:1; cursor:pointer;
  }
  .lb__edge:hover{ background:rgba(255,255,255,.18); }
  .lb__edge--prev{ left:clamp(8px,1.6vw,20px); }
  .lb__edge--next{ right:clamp(8px,1.6vw,20px); }
  .lb__edge[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
}

/* -- 23. phone layout ----------------------------------------------------- */
@media (max-width:639px){
  :root{ --gutter:16px; --sec-y:48px; }

  .site-header__in{ gap:10px; }
  .wordmark{ gap:9px; min-width:0; }
  .wordmark::before{ width:34px; height:34px; font-size:18px; }
  .wordmark__name{ font-size:18px; min-width:0; }
  .wordmark__name::after{ font-size:6.5px; letter-spacing:.10em; }

  .hero__copy{ padding-inline:22px; }
  .hero__over{ gap:8px; letter-spacing:.13em; }
  .hero__over::before{ width:20px; }
  .hero h1{ font-size:clamp(40px,13vw,54px); }
  .hero__cta{ display:grid; grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
  .hero__proof{ grid-template-columns:1fr; gap:0; }
  .hero__proof div{
    display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center;
    gap:12px; padding-block:12px;
  }
  .hero__proof strong{ font-size:20px; }
  .hero__proof span{ margin-top:0; font-size:12px; }
  .hero__visual{ min-height:290px; }

  .cards{ gap:38px; }
  .card__media{ aspect-ratio:16/11; }
  .card__title{ font-size:23px; }
  .chip{ align-items:flex-start; max-width:100%; }
  .chip .ico{ margin-top:1px; }

  .mosaic{ margin-top:16px; }
  .mosaic__all{ right:8px; bottom:8px; padding-inline:13px; }
  .titleblock{ padding-top:30px; }
  .overview{ gap:32px; }
  .book{ padding:20px; }

  .rooms__row{ grid-template-columns:2rem minmax(0,1fr); column-gap:10px; }
  .rooms__go{ grid-column:2; grid-row:2; }
  .fac__row{ align-items:flex-start; }
  .fac__row .ico{ margin-top:2px; }
  .loc__actions .btn{ flex:1 1 100%; width:100%; }

  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .more{ grid-auto-columns:minmax(82vw,1fr); }

  .page--property .site-footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .actionbar{
    height:auto; min-height:68px;
    padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .actionbar .btn{ min-height:48px; padding-inline:16px; }

  .lb{
    grid-template-rows:calc(56px + env(safe-area-inset-top)) 1fr
                       calc(72px + env(safe-area-inset-bottom));
  }
  .lb__top{ padding-top:env(safe-area-inset-top); }
  .lb__bot{ padding-bottom:env(safe-area-inset-bottom); }
}

/* -- 24. reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important;
  }
  .card__media img,.tile img,.mosaic__cell img{ transform:none!important; }
  .lb__bar{ display:none; }
}

/* -- 25. prices & availability -------------------------------------------- */
/* Ordered last on purpose: the calendar carries its own phone rules, and they
   must not be re-overridden by the generic phone block in §23. */
/* .btn sets display:inline-flex, which outranks the UA sheet's [hidden] rule */
.cal[hidden],.cal__nojs[hidden],.book__dates[hidden],.cal__actions .btn[hidden]{ display:none; }
.cal{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
/* the same split as .overview, so the summary card lines up with the sticky
   booking card the visitor already met at the top of the page */
@media (min-width:1024px){
  .cal{ grid-template-columns:minmax(0,7fr) minmax(300px,5fr); gap:64px; }
}
.cal__pane{ min-width:0; max-width:720px; }

.cal__head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cal__month{
  flex:1 1 auto; text-align:center; font-family:var(--font-display);
  font-size:var(--fs-lg); line-height:1.2; letter-spacing:-.01em;
}
.cal__nav{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0; cursor:pointer; background:transparent;
  border:0; border-radius:var(--r-2); box-shadow:inset 0 0 0 1px var(--line-ui);
  font-size:19px; line-height:1;
  transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cal__nav:hover:not(:disabled){ background:var(--sunken); box-shadow:inset 0 0 0 1px var(--ink); }
.cal__nav:disabled{ color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); cursor:not-allowed; }

/* the weekday strip lives INSIDE the grid as a row of column headers, so grid
   navigation has something to announce; the 2px keeps the old 6px optical gap
   once the parent grid's own 4px gap is added */
.cal__dow{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;
  border-top:1px solid var(--line-strong); padding-top:10px; margin-bottom:2px;
}
.cal__dow span{
  text-align:center; font-size:var(--fs-overline); letter-spacing:.10em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.cal__grid{ display:grid; gap:4px; }
.cal__row{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.cal__pad{ min-height:54px; }
.cal__day{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:54px; padding:4px 2px; border-radius:var(--r-2); cursor:pointer;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  -webkit-user-select:none; user-select:none;
  transition:background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal__num{ font-size:var(--fs-sm); line-height:1.1; }
.cal__price{ font-size:var(--fs-overline); line-height:1.1; color:var(--ink-3); white-space:nowrap; }
/* Seven room types share one cell, so the number is a floor, not a price. The
   word carries that whole caveat, so it must never be dropped to save 18px —
   and never dimmed either: at 11px an opacity of .72 took it to 3.1:1, under
   the 4.5:1 floor. It reads at the price's own colour. */
.cal__from{ font-variant-numeric:normal; }
.cal__day:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
/* the grid gap is 4px, so the global 3px focus offset would sit on the
   neighbours — the same inset ring .tile/.mosaic__cell already use */
.cal__day:focus-visible{ outline-offset:-2px; }
.cal__day[aria-disabled="true"]{
  cursor:not-allowed; color:var(--ink-3); background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--line);
}
.cal__day[aria-disabled="true"]:hover{ box-shadow:inset 0 0 0 1px var(--line); }
/* longhand + the disabled selector, or the shorthand above wipes the hatch and
   a closed date becomes indistinguishable from a date that has simply passed.
   The stripe is --line-ui, not --sunken-2: at 1.06:1 against the cell the old
   hatch was invisible to most viewers and "sold out" and "can't check in" were
   the same grey square, in both themes and especially at legend size. This
   clears 3:1 either way and is still only a texture, not a scribble. */
.cal__day[aria-disabled="true"].cal__day--closed{
  background-image:repeating-linear-gradient(135deg,transparent,transparent 4px,var(--line-ui) 4px,var(--line-ui) 5px);
}
/* and a cue that is not colour or texture at all: the date itself is struck
   out. Not on a ringed cell — in phase two a sold-out morning is exactly the
   date to click, and striking it there would contradict the ring. */
.cal__day--closed:not(.cal__day--outok) .cal__num{ text-decoration:line-through; }
/* Phase two: once a check-in is chosen the grid stops answering "can a stay
   start here" and answers "can THIS stay end here" — so the dates that can are
   ringed and the rest, however good a check-in they were, go quiet. A hairline
   only: the run's own fill has to stay the loudest thing on the grid.
   A sold-out night is a legal check-out — nobody sleeps in the morning they
   leave — so it keeps its hatch and gains the ring rather than quietly
   pretending to be an open night. */
.cal__day--outok{ box-shadow:inset 0 0 0 1px var(--accent); }
.cal__day--outok:hover{ box-shadow:inset 0 0 0 2px var(--accent); }
.cal__day--outok.cal__day--closed{
  background-color:var(--sunken);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 4px,var(--line-ui) 4px,var(--line-ui) 5px);
}
/* Phase two, the other half of finding one: a date that cannot end THIS stay
   but can start one of its own. It is not disabled — clicking it really does
   start a new stay — so it keeps the pointer and the hover ring, and only goes
   quiet. Same fill as the disabled state, opposite affordance. */
.cal__day--quiet{ color:var(--ink-3); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--line); }
.cal__day--quiet:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.cal__day--mid{ background:var(--accent-tint); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent-tint); }
.cal__day--mid .cal__price{ color:inherit; opacity:.75; }
.cal__day--in{ background:var(--accent); color:var(--accent-fg); box-shadow:inset 0 0 0 1px var(--accent); }
.cal__day--in .cal__price{ color:inherit; opacity:.82; }
.cal__day--in:hover{ box-shadow:inset 0 0 0 1px var(--accent); }
/* the check-out night is not charged, so the end of the run is drawn as an
   edge, not as another paid night — its price slot carries an em dash */
.cal__day--out{ background:var(--accent-tint); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent); }
.cal__day--out .cal__price{ color:inherit; opacity:.7; }
.cal__day--out:hover{ box-shadow:inset 0 0 0 1px var(--accent); }
/* the second click is not made yet: the tail of the run is a proposal, not a choice */
.cal__grid--preview .cal__day--out{ box-shadow:inset 0 0 0 1px var(--accent-tint); }

.cal__legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:14px;
  font-size:var(--fs-2xs); color:var(--ink-3);
}
.cal__legend span{ display:inline-flex; align-items:center; gap:7px; }
/* the keys come and go with the phase, and .cal__legend span would otherwise
   out-specify the UA's [hidden] rule and leave every one of them on screen */
.cal__legend span[hidden]{ display:none; }
.cal__swatch{
  width:13px; height:13px; border-radius:var(--r-1); flex:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.cal__swatch--sel{ background:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
/* phase two's only actionable state, and it is a ring rather than a fill —
   the same hairline the cells wear, thickened so it survives 13px */
.cal__swatch--out{ background:var(--surface); box-shadow:inset 0 0 0 2px var(--accent); }
/* the commonest un-clickable cell on the grid, and the one the legend used to
   leave unexplained: a night that exists but cannot carry the stay being built */
.cal__swatch--no{ background:var(--sunken); }
/* An exaggerated version of the cells' hatch, not a scaled-down one: at 13px a
   7px period drew at most a single faint line, so this key and the flat one
   above it read as the same grey square. Four stripes and a --line-ui stroke
   make the difference the swatch exists to show. */
.cal__swatch--off{
  background:var(--sunken);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 2px,var(--line-ui) 2px,var(--line-ui) 3px);
}

.cal__side{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-3); padding:20px;
}
.cal__sum{
  font-size:var(--fs-md); line-height:1.45; color:var(--ink);
  font-variant-numeric:tabular-nums; min-height:4.2em;
}
/* .cal__sum reserves the room-count line and the reason line, so the CTA never
   moves under a finger between "choose your dates" and a priced or refused
   stay — 4.2em is the tallest of those three at both breakpoints */
/* a rule the stay breaks, or a reason the dates restarted: never the same
   voice as the price it sits under */
.cal__warn{
  display:block; margin-top:5px; color:var(--note-ink);
  font-size:var(--fs-2xs); line-height:1.5; font-variant-numeric:normal;
}
/* the count that makes the total's "from" mean something: it is the floor of
   this many room types, not one mystery price */
.cal__rooms{
  display:block; margin-top:5px; color:var(--ink-3);
  font-size:var(--fs-2xs); line-height:1.5; font-variant-numeric:normal;
}
.cal__actions{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.cal__meta{ margin-top:16px; font-size:var(--fs-2xs); line-height:1.6; color:var(--ink-3); }
.cal__note{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-ui);
  font-size:var(--fs-2xs); line-height:1.6; color:var(--ink-3);
}
.cal__nojs{ font-size:var(--fs-md); line-height:1.5; color:var(--ink-2); max-width:var(--maxw-text); }
.book__dates{
  margin-top:14px; padding:10px 12px; border-radius:var(--r-2); background:var(--sunken);
  font-size:var(--fs-sm); line-height:1.5; color:var(--ink); font-variant-numeric:tabular-nums;
}

@media (max-width:639px){
  .cal{ gap:24px; }
  .cal__dow{ gap:3px; }
  .cal__grid,.cal__row{ gap:3px; }
  .cal__day,.cal__pad{ min-height:58px; }
  .cal__side{ padding:18px; }
  /* A phone cell is ~46px wide and "from €160" is not. The qualifier stacks
     above the figure rather than shrinking to an unreadable 8px — and it is
     never dropped, because without it the number reads as THE price. */
  .cal__price{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
  .cal__from{ font-size:9px; letter-spacing:.02em; }
}
/* the price stays on the type scale at every width: below 360px the cell is
   narrower than the touch minimum already, and a 9px glyph would not save it */
@media (max-width:359px){
  .cal__dow span{ letter-spacing:.02em; }
  .cal__num{ font-size:var(--fs-xs); }
}