:root{
    --bg: #FAFAF9;
    --bg-2: #F5F5F4;
    --ink: #1C1917;
    --ink-2: #57534E;
    --muted: #78716C;
    --hair: #1C19171A;
    --hair-strong: #1C191733;
    --accent: #C8102E;
    --serif: "IBM Plex Sans", "Hanken Grotesk", "Barlow", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --sans: "IBM Plex Sans", "Hanken Grotesk", "Barlow", system-ui, sans-serif;
    --side-w: 200px;
    --gutter: 136px;
    --main-max: 1776px;
    --ease: cubic-bezier(.2,.7,.2,1);
    --dot-sm: 6px;
    --dot-md: 7px;
    --media-saturation: .92;

    /* ============================================================
       Fluid type system — 2026
       Page-scale tokens use viewport (clamp + 100vw).
       Component-scale tokens use container query units (cqi).
       Calibrated for viewports 320px → 1600px.
       ============================================================ */

    /* Viewport-scaled (page-level) */
    --fs-display:  clamp(36px, calc(28px + 2vw), 60px);        /* hero / display headlines */
    --fs-headline: clamp(26px, calc(21px + 1.2vw), 38px);      /* section headlines */
    --fs-subtitle: clamp(17px, calc(15px + 0.5vw), 21px);      /* lede, hero-intro */
    --fs-serif-md: clamp(16px, calc(14.5px + 0.35vw), 19px);   /* editorial body / medium UI */
    --fs-body:     clamp(13px, calc(12.5px + 0.22vw), 16px);   /* base body text */
    --fs-body-sm:  clamp(12px, calc(11px + 0.2vw), 14px);      /* secondary body text */
    --fs-small:    clamp(10px, calc(10px + 0.1vw), 12px);      /* mono labels, captions */
    --fs-micro:    clamp(9px, calc(9px + 0.1vw), 11px);        /* overline / counters */
    --fs-filter-value: clamp(16px, calc(13px + 0.8cqi), 19px); /* visually tuned filter value */
    --fs-price: clamp(32px, calc(27px + 1.4vw), 50px);        /* booking totals */
    --fs-list-title: clamp(24px, calc(19px + 0.9vw), 32px);    /* compact list/card titles */

    /* Container-scaled (component-level) — drive these by adding `container-type: inline-size` */
    --fs-cq-title:    clamp(21px, calc(14px + 3.5cqi), 34px);  /* card / hall name in flexible columns */
    --fs-cq-subtitle: clamp(15px, calc(12px + 1.4cqi), 20px);  /* secondary in card */
    --fs-cq-nav:      clamp(18px, calc(15px + 1.6cqi), 22px);  /* sidebar nav-link */
    --fs-cq-nav-sm:   clamp(14px, calc(12.5px + 1.35cqi), 17px); /* sidebar nav-link child */

    /* Line-height (unitless, paired with sizes) */
    --lh-display:  1;
    --lh-headline: 1;
    --lh-tight:    1.15;
    --lh-snug:     1.25;
    --lh-body:     1.5;
    --lh-loose:    1.6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  img{display:block;max-width:100%}

  .media-muted{filter:saturate(var(--media-saturation))}
  .strip{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .editorial-row{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:64px;align-items:start}
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
    background:var(--accent);color:var(--bg);border:1px solid var(--accent);
    font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;
    transition:background .25s,border-color .25s,color .25s;
  }
  .btn-primary--sm{padding:14px 22px}
  .btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .booking-actions--spaced{margin-top:18px}
  .contact-form--narrow{margin-top:28px;max-width:560px}
  @media (max-width:760px){.editorial-row{grid-template-columns:1fr;gap:24px}}

  /* ===== layout ===== */
  .app{display:grid;grid-template-columns:var(--side-w) minmax(0,var(--main-max));min-height:100vh}
  @media (max-width: 960px){ .app{grid-template-columns:1fr} }

  /* ===== sidebar (desktop) ===== */
  .side{
    position:sticky;top:0;height:100vh;
    padding:28px 24px 24px;
    display:flex;flex-direction:column;gap:36px;
    background:var(--bg);
    container-type:inline-size;
  }
  @media (max-width:960px){ .side{display:none} }
  .brand{display:flex;align-items:baseline;gap:10px}
  .brand .mark{font-family:var(--serif);font-style:italic;font-size:clamp(20px,calc(17px + 0.9cqi),25px);letter-spacing:-0.02em;line-height:1}
  .brand .dot{width:var(--dot-md);height:var(--dot-md);background:var(--accent);display:inline-block;transform:translateY(-3px)}
  .brand small{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}

  .nav-cat{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
  .nav-cat .count{opacity:.5}
  .nav-list{list-style:none;display:flex;flex-direction:column}
  .nav-list--mobile{margin-top:24px}
  .nav-list li{position:relative}
  .nav-list a{
    display:block;
    padding:6px 0;font-family:var(--serif);font-size:var(--fs-cq-nav);letter-spacing:-0.01em;line-height:var(--lh-tight);
    font-weight:300;color:var(--ink);
    transition:padding-left .35s var(--ease), color .2s;
  }
  .nav-list a:hover{padding-left:8px;color:var(--accent)}
  .nav-list a.active{color:var(--accent)}
  .nav-list li[hidden]{display:none}
  .nav-list li.has-children > a{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .nav-list li.has-children > a::after{content:"+";font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0;color:var(--muted);transition:color .2s var(--ease),transform .25s var(--ease)}
  .nav-list li.has-children > a[aria-expanded="true"]::after{content:"−";color:var(--accent)}
  .nav-list li.has-children > a:hover::after{color:var(--accent)}
  .nav-list li.nav-open > a{color:var(--accent)}
  .nav-list li.child a{padding-left:28px;font-size:var(--fs-cq-nav-sm);color:var(--ink-2)}
  .nav-list li.child a:hover{padding-left:34px;color:var(--accent)}
  .nav-list li.child a.active{padding-left:28px;color:var(--accent)}
  .nav-list li.child-summary a{color:var(--muted)}

  .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
  .lang{display:flex;gap:0;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.1em;text-transform:uppercase}
  .lang button{padding:6px 0;color:var(--muted);position:relative}
  .lang button + button{margin-left:14px}
  .lang button.on{color:var(--ink)}
  .lang button.on::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink)}
.book-btn{
    padding:14px 18px;
    overflow:hidden;position:relative;
  }
  .book-btn .arr{transition:transform .35s var(--ease)}
  .book-btn:hover .arr{transform:translateX(6px)}

  /* ===== mobile header ===== */
  .mhead{display:none}
  .mnav{display:none}
  @media (max-width:960px){
    .mnav{display:flex}
    .mhead{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:73px;padding:18px 20px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--bg);z-index:60}
    .mhead .ham{order:0}
    .mhead .brand{order:1}
    .mhead .brand .mark{font-size:var(--fs-subtitle)}
    .mhead .mbook{order:2;margin-left:auto;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:4px}
    .mhead .mbook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
    .ham{width:36px;height:36px;display:grid;place-items:center;border:0}
    .ham span{display:block;width:18px;height:1px;background:var(--ink);position:relative;transition:background .2s}
    .ham span::before,.ham span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .35s var(--ease), top .35s var(--ease)}
    .ham span::before{top:-6px}.ham span::after{top:6px}
    body.nav-open .ham span{background:transparent}
    body.nav-open .ham span::before{top:0;transform:rotate(45deg)}
    body.nav-open .ham span::after{top:0;transform:rotate(-45deg)}
    .mnav{position:fixed;top:73px;bottom:0;left:0;width:100%;background:var(--bg);z-index:50;transform:translateX(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;padding:24px 20px 40px;border-right:0}
    .mnav.open{transform:translateX(0)}
    .mnav::after{display:none}
    .mnav .top{display:none}
    .mnav .top .brand .mark{font-size:var(--fs-subtitle)}
    .mnav .close{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase}
    .mnav ul{list-style:none}
    .nav-list--mobile{margin-top:24px}
    .mnav .nav-cat{margin:18px 0 10px}
    .mnav .nav-list a{font-size:clamp(22px,5.6vw,28px);padding:8px 0}
    .mnav .nav-list li.mobile-phone a{font-family:var(--mono);font-size:var(--fs-body);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);padding:0 0 24px;margin-bottom:14px;border-bottom:0}
    .mnav .nav-list li.mobile-phone a:hover{padding-left:0;color:var(--ink)}
    .mnav .nav-list li.child a{font-size:clamp(18px,4.6vw,23px);padding-left:32px}
    .mnav .nav-list li.has-children > a{align-items:center}
    .mnav .book-btn{margin-top:auto;justify-content:space-between}
  }

  /* ===== main ===== */
  main{padding:32px var(--gutter) 0;width:100%;min-width:0}
  @media (max-width:960px){ main{padding:24px 20px 0} }

  .topbar{display:flex;align-items:center;justify-content:flex-end;width:calc(100% + (var(--gutter) * 2));margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter) 24px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
  .topbar a:hover .topbar-u{transform:scaleX(1) !important}
  .topbar a{color:var(--ink)}
  .topbar .now{display:flex;gap:18px}
  .topbar .topbar-actions{margin-left:auto;display:flex;gap:24px;align-items:center}
  .topbar-link{position:relative;display:inline-flex;align-items:center;gap:8px}
  .topbar-u{position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform .35s var(--ease)}
  .topbar .now span b{color:var(--ink);font-weight:500}
  @media (max-width:960px){ .topbar{display:none} }

  /* hero */
  .hero{padding:80px 0 64px;display:grid;grid-template-columns:1fr;gap:40px}
  .eyebrow{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--ink)}
  h1.display{
    font-family:var(--serif);font-weight:300;
    font-size:var(--fs-display);
    line-height:var(--lh-display);letter-spacing:-0.035em;
    margin-top:18px;
    max-width:14ch;
  }
  h1.display em{font-style:italic;color:var(--accent);font-weight:300}
  .hero-row{display:grid;grid-template-columns:1fr;gap:0;align-items:end;margin-top:28px}
  .hero-row-end{display:none}
  @media (max-width:760px){ .hero-row{grid-template-columns:1fr;gap:32px} }
  .hero-intro{font-family:var(--serif);font-weight:300;font-size:var(--fs-subtitle);line-height:1.4;letter-spacing:-0.005em;max-width:none;color:var(--ink-2)}
  .hero-meta{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
  .hero-meta .kv{display:flex;gap:16px;width:100%;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hair)}
  .hero-meta .kv b{color:var(--ink);font-weight:500}

  /* filter bar */
  .filter{
    margin-top:24px;
    display:flex;align-items:stretch;gap:0;
  }
  .filter--offset-lg{margin-top:32px}
  .filter .lbl{display:flex;align-items:center;gap:10px;padding:18px 22px;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--hair)}
  .filter .lbl .pulse{width:var(--dot-sm);height:var(--dot-sm);background:var(--accent);display:inline-block;animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .filter button.f{
    flex:1;text-align:left;padding:18px 22px;border-right:1px solid var(--hair);
    display:flex;flex-direction:column;gap:4px;
    transition:background .25s;
  }
  .filter button.f:hover{background:var(--bg-2)}
  .filter button.f .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
  .filter button.f .v{font-family:var(--serif);font-size:var(--fs-filter-value);letter-spacing:-0.01em;font-weight:400;line-height:1.18}
  .filter button.f .v.placeholder{color:var(--muted);font-style:italic}
  .filter .code{display:flex;align-items:center;padding:0 22px;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;position:relative}
  .filter-code-input{background:transparent;border:0;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;width:90px;color:var(--ink);outline:none}
  .filter .code .underline{position:absolute;left:22px;right:22px;bottom:14px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}
  .filter .code:hover .underline{transform:scaleX(1)}
  .filter .filter-submit{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:180px;padding:0 26px;background:var(--accent);color:var(--bg);
    border:1px solid var(--accent);white-space:nowrap;
  }
  .filter .filter-submit:hover{background:var(--ink);border-color:var(--ink)}
  @media (max-width:760px){
    .filter{flex-direction:column}
    .filter .lbl,.filter button.f,.filter .code{border-right:0;border-bottom:1px solid var(--hair)}
    .filter .code{padding:18px 22px}
    .filter .code .underline{left:22px;right:auto;width:60px;bottom:14px}
    .filter .filter-submit{min-height:58px;border-bottom:0}
  }

  /* responsive booking search box */
  .filter.booking-search{
    display:grid;
    grid-template-columns:minmax(170px,.72fr) minmax(220px,1.25fr) minmax(250px,1.45fr) minmax(220px,1fr) minmax(180px,.8fr);
    align-items:stretch;
    min-height:96px;
  }
  .filter.booking-search .lbl,
  .filter.booking-search button.f,
  .filter.booking-search .code,
  .filter.booking-search .filter-submit{
    min-width:0;
    min-height:94px;
  }
  .filter.booking-search .lbl{
    border-right:1px solid var(--hair);
    padding:0 28px;
    gap:12px;
    font-size:var(--fs-small);
    white-space:nowrap;
  }
  .filter.booking-search .lbl .pulse{
    width:var(--dot-sm);
    height:var(--dot-sm);
    flex:0 0 auto;
  }
  .filter.booking-search button.f{
    padding:0 28px;
    gap:4px;
    justify-content:center;
  }
  .filter.booking-search button.f .k{
    font-size:var(--fs-micro);
    line-height:1;
    letter-spacing:0.16em;
  }
  .filter.booking-search button.f .v{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:var(--fs-filter-value);
    line-height:1.18;
  }
  .filter.booking-search .code{
    justify-content:center;
    padding:0 28px;
    font-size:var(--fs-small);
    letter-spacing:0.14em;
    white-space:nowrap;
  }
  .filter.booking-search .filter-submit{
    min-width:0;
    padding:0 28px;
    gap:10px;
    font-size:var(--fs-small);
    letter-spacing:0.14em;
    text-transform:uppercase;
  }

  @media (max-width:1439px){
    .filter.booking-search{
      min-height:0;
      grid-template-columns:1.3fr 1.3fr 1fr 200px;
      grid-template-areas:
        "label label label label"
        "dates guests disc submit";
    }
    .filter.booking-search .lbl{
      grid-area:label;
      min-height:48px;
      border-right:0;
      border-bottom:1px solid var(--hair);
      padding:0 24px;
    }
    .filter.booking-search button.f:nth-of-type(1){
      grid-area:dates;
    }
    .filter.booking-search button.f:nth-of-type(2){
      grid-area:guests;
    }
    .filter.booking-search .code{
      grid-area:disc;
      justify-content:flex-start;
    }
    .filter.booking-search .filter-submit{
      grid-area:submit;
    }
    .filter.booking-search button.f,
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      min-height:78px;
    }
    .filter.booking-search button.f{
      padding:0 24px;
    }
  }

  @media (max-width:1180px){
    .filter.booking-search{
      min-height:0;
      grid-template-columns:1.3fr 1.3fr 1fr 200px;
      grid-template-areas:
        "label label label label"
        "dates guests disc submit";
    }
    .filter.booking-search .lbl{
      grid-area:label;
      min-height:48px;
      border-right:0;
      border-bottom:1px solid var(--hair);
      padding:0 24px;
      font-size:14px;
    }
    .filter.booking-search button.f:nth-of-type(1){
      grid-area:dates;
    }
    .filter.booking-search button.f:nth-of-type(2){
      grid-area:guests;
    }
    .filter.booking-search .code{
      grid-area:disc;
      justify-content:flex-start;
    }
    .filter.booking-search .filter-submit{
      grid-area:submit;
    }
    .filter.booking-search button.f,
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      min-height:78px;
    }
    .filter.booking-search button.f{
      gap:4px;
      padding:0 24px;
    }
    .filter.booking-search button.f .k{
      font-size:13px;
    }
  }

  @media (max-width:960px){
    .filter.booking-search{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "label label"
        "dates guests"
        "disc submit";
    }
    .filter.booking-search button.f,
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      min-height:74px;
      padding:0 22px;
    }
    .filter.booking-search .code{
      border-right:0;
      border-top:1px solid var(--hair);
      border-bottom:0;
    }
    .filter.booking-search .filter-submit{
      border-top:1px solid var(--hair);
    }
  }

  @media (max-width:1279px){
    .filter.booking-search{
      grid-template-columns:1fr;
      grid-template-areas:none;
      min-height:0;
    }
    .filter.booking-search .lbl,
    .filter.booking-search button.f:nth-of-type(1),
    .filter.booking-search button.f:nth-of-type(2),
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      grid-area:auto;
    }
    .filter.booking-search .lbl,
    .filter.booking-search button.f,
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      min-height:86px;
      border-right:0;
      border-top:1px solid var(--hair);
      border-bottom:0;
      padding:0 22px;
    }
    .filter.booking-search .lbl{
      min-height:86px;
      border-top:0;
      font-size:15px;
    }
    .filter.booking-search button.f{
      border-bottom:0;
    }
    .filter.booking-search .code,
    .filter.booking-search .filter-submit{
      justify-content:flex-start;
    }
  }

  /* rooms grid */
  .grid-head{display:flex;justify-content:space-between;align-items:baseline;margin:80px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
  .grid-head h2{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.18em;text-transform:uppercase;font-weight:500}
  .grid-head .toggle{display:flex;gap:0;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase}
  .grid-head .toggle button{padding:6px 12px;color:var(--muted);border:1px solid transparent}
  .grid-head .toggle button.on{color:var(--ink);border-color:var(--ink)}

  .rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 40px;padding-bottom:96px}
  @media (max-width:640px){ .rooms{grid-template-columns:1fr;gap:48px} }
  .rooms.list{grid-template-columns:1fr;gap:0}
  .rooms.list .card{display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:center;padding:18px 0;border-top:1px solid var(--hair)}
  .rooms.list .card:last-child{border-bottom:1px solid var(--hair)}
  .rooms.list .img{aspect-ratio: 4/3;height:auto}
  .rooms.list .meta{padding:0}
  .rooms.list .name{font-size:var(--fs-list-title)}
  .rooms.list .num{display:none}
  .rooms.list .view{align-self:center}

  .card{position:relative;display:flex;flex-direction:column;gap:16px;container-type:inline-size}
  .card .img{
    position:relative;aspect-ratio:4/5;width:100%;
    background:var(--bg-2);overflow:hidden;
    transition:transform .6s var(--ease);
  }
  .card .img.img--landscape{aspect-ratio:4/3}
  .card .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);filter:saturate(var(--media-saturation))}
  .card:hover .img img{transform:scale(1.03)}
  .card .img .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
  .card .img .stripes{position:absolute;inset:0;background:repeating-linear-gradient(135deg, transparent 0 12px, rgba(20,20,19,.04) 12px 13px)}
  .card .img .num{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.16em;color:var(--ink);background:var(--bg);padding:4px 8px}
  .card .img .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.16em;color:var(--bg);background:var(--ink);padding:4px 8px;text-transform:uppercase}
  .card:hover .img{transform:translateY(-4px)}
  .card .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .card .name{font-family:var(--serif);font-weight:300;font-size:var(--fs-cq-title);letter-spacing:-0.025em;line-height:0.95}
  .card .name em{font-style:italic;color:var(--accent)}
  .card .cap{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
  .card .room-copy{max-width:44ch;margin-top:10px;font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:1.45;color:var(--ink-2)}
  .card .view{
    font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:8px;position:relative;align-self:flex-end;
    padding-bottom:4px;
  }
  .card .view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(1);transition:transform .4s var(--ease)}
  .card:hover .view::after{transform:scaleX(0);animation:redraw 0.7s .25s var(--ease) forwards}
  @keyframes redraw{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
  .card .view .arr{display:inline-block;transition:transform .35s var(--ease)}
  .card:hover .view .arr{transform:translateX(6px)}

  /* image placeholders – varying tonal "photos" */
  .ph-img{position:absolute;inset:0}
  .ph-img.a{background:linear-gradient(160deg,#3a342e 0%,#241f1b 60%, #14110f 100%)}
  .ph-img.b{background:linear-gradient(160deg,#cdc4b3 0%,#9c9080 60%, #5e5448 100%)}
  .ph-img.c{background:linear-gradient(180deg,#aab1a8 0%,#6f786d 60%, #3c4239 100%)}
  .ph-img.d{background:linear-gradient(160deg,#b8a48a 0%,#7b6951 60%, #423427 100%)}
  .ph-img.e{background:linear-gradient(160deg,#d8d3c8 0%,#a8a294 60%, #5d584d 100%)}
  .ph-img.f{background:linear-gradient(160deg,#5e5247 0%,#3a322b 60%, #1b1814 100%)}
  .ph-img.g{background:linear-gradient(160deg,#8a8f86 0%,#535a51 60%, #2a2e29 100%)}
  .ph-img::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.04) 16px 17px)}

  /* footer */
  .reserve-strip{background:var(--ink);color:var(--bg);padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;width:auto;max-width:var(--main-max);margin-left:var(--side-w)}
  .reserve-strip__copy{display:flex;flex-direction:column;gap:3px}
  .reserve-strip__label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:rgba(250,250,249,.55)}
  .reserve-strip__headline{font-family:var(--serif);font-size:var(--fs-subtitle);font-weight:300;letter-spacing:-0.02em;line-height:1.1}
  .reserve-strip__cta{display:inline-flex;align-items:center;gap:10px;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;padding:13px 22px;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
  .reserve-strip__cta:hover{background:var(--accent);color:var(--bg)}
  .reserve-strip__cta .arr{transition:transform .3s var(--ease)}
  .reserve-strip__cta:hover .arr{transform:translateX(5px)}

  footer{border-top:1px solid var(--ink);padding:64px var(--gutter) 0;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px 40px;background:var(--bg);width:auto;max-width:var(--main-max);margin-left:var(--side-w)}
  .footer-brand__mark{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:20px}
  .footer-brand__dot{display:inline-block;width:var(--dot-sm);height:var(--dot-sm);background:var(--accent);flex-shrink:0}
  .footer-brand__address{font-family:var(--serif);font-weight:300;font-size:var(--fs-headline);line-height:1.05;letter-spacing:-0.025em;margin-bottom:28px}
  .footer-brand__address span{color:var(--muted)}
  .footer-brand__contacts{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.04em;color:var(--ink-2);margin-bottom:28px}
  .footer-brand__contacts a,.footer-brand__socials a{position:relative;display:inline-flex;align-items:center;gap:6px}
  .footer-brand__contacts a .u,.footer-brand__socials a .u,footer ul a .u{position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}
  .footer-brand__contacts a:hover .u,.footer-brand__socials a:hover .u,footer ul a:hover .u{transform:scaleX(1)}
  .footer-brand__socials{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
  .footer-brand__socials a{color:var(--ink-2)}
  .footer-brand__socials a .ext{font-size:var(--fs-micro);color:var(--muted)}
  footer h4{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-body)}
  footer ul a{display:inline-flex;align-items:center;gap:7px;position:relative}
  footer ul a .arr{font-family:var(--mono);font-size:.85em;opacity:0;transform:translateX(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--accent)}
  footer ul a:hover .arr{opacity:1;transform:translateX(0)}
  footer ul a:hover{color:var(--ink)}
  .legal-row{grid-column:1/-1;border-top:1px solid var(--hair);margin-top:16px;padding:20px 0 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
  .legal-row__left{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .legal-row a{position:relative;display:inline-block}
  .legal-row a .u{position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform .35s var(--ease)}
  .legal-row a:hover{color:var(--ink)}
  .legal-row a:hover .u{transform:scaleX(1)}
  .legal-row__right{display:flex;align-items:center;gap:16px}
  .legal-row__lang{display:flex;gap:10px}
  .legal-row__lang button{color:var(--muted);letter-spacing:0.14em;text-transform:uppercase;font-family:var(--mono);font-size:var(--fs-micro)}
  .legal-row__lang button.on,.legal-row__lang button:hover{color:var(--ink)}
  @media (max-width:960px){.reserve-strip{margin-left:0}.reserve-strip{padding:20px}.reserve-strip__cta{width:100%;justify-content:space-between}footer{padding:48px 20px 0;grid-template-columns:1fr 1fr;gap:36px 32px;margin-left:0}.footer-brand__address{font-size:var(--fs-headline)}}
  @media (max-width:640px){footer{grid-template-columns:1fr;gap:32px}.reserve-strip{padding:20px}}
  @media (max-width:520px){.legal-row{flex-direction:column;align-items:flex-start;gap:12px}.legal-row__left{flex-direction:column;align-items:flex-start;gap:8px}}

  @media (max-width:640px){
    html{overflow-x:hidden}
    h1.display,
    .room-hero h1,
    .closing h3,
    .footer-brand__address{text-wrap:balance}
    .hero-intro,
    .editorial-copy p,
    .room-body .section .body p,
    .card .room-copy,
    .closing p{text-wrap:pretty}

    .btn-primary,
    .book-btn,
    .hero-primary,
    .hero-secondary,
    .hotel-cta,
    .card .view,
    .salon-card .view,
    .cross-card .view{
      min-height:40px;
      transition-property:background,border-color,color,transform;
    }
    .btn-primary:active,
    .book-btn:active,
    .hero-primary:active,
    .hero-secondary:active,
    .hotel-cta:active,
    .card .view:active,
    .salon-card .view:active,
    .cross-card .view:active{
      transform:scale(.96);
    }

    .hotel-cta,
    .card .view,
    .salon-card .view,
    .cross-card .view{
      align-items:center;
      padding:10px 0;
    }
    .hotel-cta{
      margin-top:28px;
    }
    .card .view::after,
    .salon-card .view::after,
    .cross-card .view::after{
      bottom:8px;
    }
    .card .meta{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
    }
    .room-hero .crumbs{
      min-height:40px;
      align-items:center;
      flex-wrap:wrap;
    }
    .room-hero .crumbs a{
      display:inline-flex;
      min-height:40px;
      align-items:center;
    }
    .rooms{
      gap:56px;
    }

    .hotel-hero-media img,
    .hotel-photo img,
    .card .img,
    .room-photo img,
    .cross-card .img{
      outline:1px solid rgba(0,0,0,.1);
      outline-offset:-1px;
    }

    footer ul{
      gap:4px;
    }
    .footer-brand__contacts a,
    .footer-brand__socials a,
    footer ul a,
    .legal-row a,
    .legal-row__lang button{
      min-height:40px;
      align-items:center;
    }
  }

  /* mobile preview wrapper — forces mobile breakpoint */
  body.mobile-preview{
    background:#0a0a09;
    min-height:100vh;
    display:flex;justify-content:center;align-items:flex-start;
    padding:24px 0;
  }
  body.mobile-preview > #root{
    width:390px;
    min-height:780px;
    background:var(--bg);
    border:1px solid #2a2a26;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    border-radius:36px;
    container-type:inline-size;
  }
  body.mobile-preview .app{grid-template-columns:1fr}
  body.mobile-preview .side{display:none}
  body.mobile-preview .mhead{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:73px;padding:18px 20px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--bg);z-index:60}
  body.mobile-preview .mhead .ham{order:0}
  body.mobile-preview .mhead .brand{order:1}
  body.mobile-preview .mhead .mbook{order:2;margin-left:auto;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:4px}
  body.mobile-preview .mhead .mbook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
  body.mobile-preview .mnav{display:flex}
  body.mobile-preview .topbar{display:none}
  body.mobile-preview main{padding:24px 20px 0;max-width:none}
  body.mobile-preview footer{padding:48px 20px 32px;grid-template-columns:1fr;gap:32px;max-width:none;margin-left:0}
  body.mobile-preview .rooms{grid-template-columns:1fr;gap:48px}
  body.mobile-preview .hero{padding:40px 0 32px}
  body.mobile-preview h1.display{font-size:var(--fs-display)}
  body.mobile-preview .hero-row{grid-template-columns:1fr;gap:28px}
  body.mobile-preview .hero-intro{font-size:var(--fs-subtitle)}
  body.mobile-preview .filter{flex-direction:column}
  body.mobile-preview .filter .lbl,
  body.mobile-preview .filter button.f,
  body.mobile-preview .filter .code{border-right:0;border-bottom:1px solid var(--hair)}
  body.mobile-preview .grid-head{margin-top:48px}

  /* hamburguesa + menú desplegable dentro del preview */
  body.mobile-preview .mhead .brand .mark{font-size:var(--fs-subtitle)}
  body.mobile-preview .ham{width:36px;height:36px;display:grid;place-items:center;border:0}
  body.mobile-preview .ham span{display:block;width:18px;height:1px;background:var(--ink);position:relative;transition:background .2s}
  body.mobile-preview .ham span::before,
  body.mobile-preview .ham span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .35s var(--ease), top .35s var(--ease)}
  body.mobile-preview .ham span::before{top:-6px}
  body.mobile-preview .ham span::after{top:6px}
  body.mobile-preview.nav-open .ham span{background:transparent}
  body.mobile-preview.nav-open .ham span::before{top:0;transform:rotate(45deg)}
  body.mobile-preview.nav-open .ham span::after{top:0;transform:rotate(-45deg)}
  body.mobile-preview .mnav{position:absolute;top:73px;bottom:0;left:0;width:100%;background:var(--bg);z-index:50;transform:translateX(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;padding:24px 20px 40px;border-right:0}
  body.mobile-preview .mnav.open{transform:translateX(0)}
  body.mobile-preview .mnav::after{display:none}
  body.mobile-preview .mnav .top{display:none}
  body.mobile-preview .mnav .top .brand .mark{font-size:var(--fs-subtitle)}
  body.mobile-preview .mnav .close{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase}
  body.mobile-preview .mnav ul{list-style:none;margin-top:24px}
  body.mobile-preview .mnav .nav-cat{margin:18px 0 10px}
  body.mobile-preview .mnav .nav-list a{font-size:clamp(22px,5.6vw,28px);padding:8px 0}
  body.mobile-preview .mnav .nav-list li.mobile-phone a{font-family:var(--mono);font-size:var(--fs-body);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);padding:0 0 24px;margin-bottom:14px;border-bottom:0}
  body.mobile-preview .mnav .nav-list li.mobile-phone a:hover{padding-left:0;color:var(--ink)}
  body.mobile-preview .mnav .nav-list li.child a{font-size:clamp(18px,4.6vw,23px);padding-left:32px}
  body.mobile-preview .mnav .book-btn{margin-top:auto;justify-content:space-between}

  /* mobile-preview: brand y CTAs en una sola línea */
  body.mobile-preview .mhead .brand .mark{white-space:nowrap;font-size:var(--fs-body)}
  body.mobile-preview .card .view,
  body.mobile-preview .salon-card .view,
  body.mobile-preview .filter .code{white-space:nowrap}
  body.mobile-preview .pop.open{padding:14px 0}
  body.mobile-preview .pop .panel{width:calc(100vw - 28px);max-height:calc(100vh - 28px);padding:22px}
  body.mobile-preview .age-grid{grid-template-columns:1fr}

  /* mobile-preview: espejo de @media (max-width:640px|760px) */
  body.mobile-preview .salon-card .meta .head{flex-direction:column;align-items:flex-start;gap:8px}
  body.mobile-preview .salones-list{gap:56px}
  body.mobile-preview .cross-grid{grid-template-columns:1fr;gap:48px}
  body.mobile-preview .amenities{grid-template-columns:1fr}
  body.mobile-preview .specs{grid-template-columns:1fr}
  body.mobile-preview .room-hero h1{font-size:var(--fs-display);max-width:none}
  body.mobile-preview .room-hero .quick{gap:20px}
  body.mobile-preview .amenities li{padding:8px 0}

  /* utility */
  .arr-svg{width:14px;height:10px;flex-shrink:0}

  /* date / guest popovers */
  .pop{position:fixed;inset:0;z-index:60;display:none;background:rgba(20,20,19,.4);backdrop-filter:blur(2px)}
  .pop.open{display:grid;place-items:center;padding:24px 0}
  .pop .panel{background:var(--bg);border:1px solid var(--ink);width:min(560px,92vw);max-height:calc(100vh - 48px);padding:28px;display:flex;flex-direction:column;overflow:hidden}
  .pop .panel.panel--narrow{max-width:520px}
  .pop .panel.date-panel{width:min(900px,92vw)}
  .pop h3{font-family:var(--serif);font-weight:300;font-size:var(--fs-headline);letter-spacing:-0.02em;margin-bottom:18px}
  .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-family:var(--mono);font-size:var(--fs-small)}
  .cal .dh{padding:6px 0;text-align:center;color:var(--muted);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase}
  .cal button{padding:10px 0;border:1px solid transparent}
  .cal button:hover{border-color:var(--hair-strong)}
  .cal button.sel{background:var(--ink);color:var(--bg)}
  .cal button.in{background:var(--bg-2)}
  .cal button.dim{color:var(--muted);opacity:.4}
  .pop-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);flex:0 0 auto}
  .pop-foot--tight{margin-top:18px}
  .pop-foot .summary{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
  .pop-foot .summary b{color:var(--ink);font-weight:500}
  .pop-foot button.apply{padding:12px 18px}

  .booking-calendar{display:block;width:min(720px,100%);margin-inline:auto;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.02em;color:var(--ink);min-height:0;overflow:auto}
  .booking-calendar [slot="previous"],
  .booking-calendar [slot="next"]{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);font-family:var(--mono);font-size:var(--fs-small);line-height:1}
  .booking-calendar::part(container){display:flex;flex-direction:column;gap:16px}
  .booking-calendar::part(header){display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:12px}
  .booking-calendar::part(heading){font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;text-align:center;color:var(--muted)}
  .booking-calendar::part(button){border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);width:30px;height:30px}
  .booking-calendar::part(disabled){opacity:.25}
  .booking-calendar::part(months){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .booking-calendar calendar-month{--color-accent:var(--ink);--color-text-on-accent:var(--bg);width:100%}
  .booking-calendar calendar-month::part(month){width:100%}
  .booking-calendar calendar-month::part(heading){font-family:var(--serif);font-size:var(--fs-subtitle);font-weight:300;letter-spacing:-0.01em;color:var(--ink);margin-bottom:10px}
  .booking-calendar calendar-month::part(day){font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
  .booking-calendar calendar-month::part(day-0),
  .booking-calendar calendar-month::part(day-6){color:var(--accent)}
  .booking-calendar calendar-month::part(button){border-radius:0;border:1px solid transparent;background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--fs-small);min-width:34px;min-height:34px}
  .booking-calendar calendar-month::part(button):hover{border-color:var(--hair-strong)}
  .booking-calendar calendar-month::part(disabled),
  .booking-calendar calendar-month::part(disallowed){opacity:.32;color:var(--muted);text-decoration:none}
  .booking-calendar calendar-month::part(selected),
  .booking-calendar calendar-month::part(range-start),
  .booking-calendar calendar-month::part(range-end){background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .booking-calendar calendar-month::part(range-inner){background:var(--bg-2);color:var(--ink);border-radius:0}

  .gr{display:flex;flex:1 1 auto;flex-direction:column;gap:10px;margin-bottom:8px;overflow:auto;min-height:0;padding-right:2px}
  .guest-room{border-bottom:1px solid var(--hair);padding:0 0 10px}
  .guest-room-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
  .guest-room-head button{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
  .guest-room-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .guest-counter{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;border:1px solid var(--hair);padding:8px 10px}
  .guest-counter > span{font-family:var(--serif);font-size:var(--fs-body);font-weight:300;letter-spacing:-0.01em}
  .guest-counter .ctrl{display:flex;align-items:center;gap:8px;flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-small)}
  .guest-counter .ctrl button{width:32px;height:32px;border:1px solid var(--ink);display:grid;place-items:center}
  .guest-counter .ctrl button:disabled{opacity:.3;border-color:var(--hair-strong)}
  .guest-counter .ctrl b{min-width:16px;text-align:center;font-weight:500}
  .age-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 0 0}
  .age-field{display:flex;flex-direction:column;gap:8px}
  .age-field span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
  .age-field select{appearance:none;background:transparent;border:1px solid var(--hair-strong);padding:8px 30px 8px 10px;font-family:var(--serif);font-weight:300;font-size:var(--fs-body);line-height:1.1;color:var(--ink);border-radius:0;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
  .add-room{display:block;width:100%;padding:10px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;text-align:left}
  .add-room:disabled{opacity:.35;cursor:default}
  @media (max-width:520px){
    .pop.open{padding:14px 0}
    .pop .panel{width:calc(100vw - 28px);max-height:calc(100vh - 28px);padding:22px}
    .pop .panel.date-panel{width:calc(100vw - 28px)}
    .pop-foot{gap:16px;align-items:flex-start}
    .pop-foot .summary{line-height:1.4}
    .booking-calendar::part(months){grid-template-columns:1fr;gap:18px}
    .guest-room-controls{grid-template-columns:1fr}
    .guest-counter{padding:7px 8px}
    .guest-counter .ctrl{gap:6px}
    .guest-counter .ctrl button{width:30px;height:30px}
    .age-grid{grid-template-columns:1fr}
  }

  .ticker{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:10px 0;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ticker-track{display:inline-flex;gap:48px;animation:tk 40s linear infinite;padding-left:48px}
  .ticker-track span{display:inline-flex;align-items:center;gap:14px}
  .ticker-track span::before{content:"●";color:var(--accent);font-size:.75em}
  @keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* book modal */
  .toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,80px);background:var(--ink);color:var(--bg);padding:14px 22px;font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;transition:transform .4s var(--ease);z-index:80;display:flex;align-items:center;gap:14px}
  .toast.show{transform:translate(-50%,0)}
  .toast .dot{width:var(--dot-sm);height:var(--dot-sm);background:var(--accent);display:inline-block;animation:pulse 1.5s infinite}
  .pop-success{padding:40px 0;text-align:center}
  .pop-success__title{font-family:var(--serif);font-size:var(--fs-serif-md);font-weight:300}
  .pop-success__meta{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:14px}


/* ===== single room page ===== */
.room-page main{padding:32px var(--gutter) 0;margin:0 auto;width:100%}
@media (max-width:960px){ .room-page main{padding:24px 20px 0} }

.room-hero{padding:48px 0 24px}
.room-hero .crumbs{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center;margin-bottom:32px}
.room-hero .crumbs a{color:var(--muted);position:relative}
.room-hero .crumbs a:hover{color:var(--ink)}
.room-hero .crumbs .sep{opacity:.5}
.room-hero .crumbs .here{color:var(--ink)}

.room-hero h1{font-family:var(--serif);font-weight:300;font-size:var(--fs-display);line-height:1;letter-spacing:-0.035em;max-width:18ch}
.room-hero h1 em{font-style:italic;color:var(--accent)}
.room-hero .lede{font-family:var(--serif);font-weight:300;font-size:var(--fs-subtitle);line-height:1.4;letter-spacing:-0.005em;max-width:none;color:var(--ink-2);margin-top:32px}

.room-hero .quick{display:flex;gap:36px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase}
.room-hero .quick .q{display:flex;flex-direction:column;gap:4px}
.room-hero .quick .q .k{color:var(--muted);font-size:var(--fs-micro)}
.room-hero .quick .q .v{color:var(--ink);font-size:var(--fs-small);font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-0.01em}

.room-photo{margin-top:24px;width:100%;background:transparent;overflow:hidden;display:block}
.room-photo.hero{aspect-ratio:auto}
.room-photo.tall{aspect-ratio:auto}
.room-photo img{display:block;width:100%;height:auto;object-fit:cover;filter:saturate(var(--media-saturation))}

.room-body{display:grid;grid-template-columns:1fr;gap:24px;padding:80px 0 0}
.room-body .section{padding:48px 0}
.room-body .section:first-child{padding-top:0}
.room-body .section h2{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.18em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:28px}
.editorial-copy p,
.room-body .section .body p{font-family:var(--serif);font-weight:300;font-size:var(--fs-serif-md);line-height:1.5;letter-spacing:-0.005em;max-width:none;color:var(--ink-2)}
.room-body .section .body p + p{margin-top:18px}

.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 48px;border:0 !important}
@media (max-width:640px){ .specs{grid-template-columns:1fr} }
.specs .s{display:flex;flex-direction:column;gap:6px;padding:14px 0;border:0 !important}
.specs .s .k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
.specs .s .v{font-family:var(--serif);font-weight:300;font-size:var(--fs-serif-md);letter-spacing:-0.015em;line-height:1.1}

.amenities{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 48px;border:0 !important}
@media (max-width:640px){ .amenities{grid-template-columns:1fr} }
.amenities li{list-style:none;display:flex;align-items:baseline;gap:14px;padding:10px 0;font-family:var(--serif);font-weight:300;font-size:var(--fs-serif-md);letter-spacing:-0.005em;border:0 !important}
.amenities li::before{content:"";width:6px;height:6px;background:var(--ink);display:inline-block;flex-shrink:0;transform:translateY(-3px)}

.cross{padding:80px 0 96px}
.cross-head{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.18em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cross-grid--single{grid-template-columns:repeat(1,minmax(0,520px))}
@media (max-width:760px){ .cross-grid{grid-template-columns:1fr;gap:48px} }
.cross-card{display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.cross-card .img{aspect-ratio:4/5;background:var(--bg-2);overflow:hidden}
.cross-card .img img{width:100%;height:100%;object-fit:cover;filter:saturate(var(--media-saturation));transition:transform .9s var(--ease)}
.cross-card:hover .img img{transform:scale(1.03)}
.cross-card .name{font-family:var(--serif);font-weight:300;font-size:var(--fs-cq-title);letter-spacing:-0.02em;line-height:0.95}
.cross-card .cap{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.cross-card .view{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;position:relative;padding-bottom:4px;align-self:flex-start;margin-top:4px}
.cross-card .view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform-origin:left;transition:transform .4s var(--ease)}
.cross-card:hover .view{padding-left:0}
.cross-card .view .arr{display:inline-block;transition:transform .35s var(--ease)}
.cross-card:hover .view .arr{transform:translateX(6px)}