/* SKY ROOFTOP — vertical rail + glass hero + day-parts + horizontal menu */
body.cafe-rooftop{
  font-family:Tahoma,"Segoe UI",system-ui,sans-serif;
  background:#faf6f1;
  color:#2a2118;
  display:grid;
  grid-template-columns:88px 1fr;
  min-height:100vh;
}
@media(max-width:860px){body.cafe-rooftop{grid-template-columns:1fr}.cr-rail{flex-direction:row;position:sticky;top:0;z-index:20;width:100%;height:auto;padding:.6rem 4%;overflow-x:auto}}
.cr-rail{
  background:#1c3a4a;color:#e8f4fc;display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding:1.4rem .5rem;position:sticky;top:0;height:100vh;
}
.cr-mark{font-family:Georgia,"Times New Roman",serif;font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.12em;margin-bottom:1rem;color:#f0c9a0}
.cr-rail a{font-size:.78rem;opacity:.85;writing-mode:vertical-rl;transform:rotate(180deg)}
.cr-rail a:hover{opacity:1;color:#f0c9a0}
.cr-rail-v{margin-top:auto;color:#7ec8e3!important}
.cr-main{min-width:0}
.cr-hero{position:relative;min-height:72vh;display:grid;place-items:end start;overflow:hidden}
.cr-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-glass{
  position:relative;margin:6% 5% 8%;max-width:440px;padding:1.6rem 1.5rem;
  background:rgba(250,246,241,.88);backdrop-filter:blur(10px);border-radius:20px;
  border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 50px rgba(28,58,74,.25);
}
.cr-eyebrow{font-size:.72rem;letter-spacing:.14em;color:#c45c26;font-weight:700;margin-bottom:.5rem}
.cr-glass h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.25;margin-bottom:.6rem;color:#1c3a4a}
.cr-glass p{color:#5a4a3a;margin-bottom:1.1rem}
.cr-cta{display:inline-block;background:#c45c26;color:#fff;padding:.75rem 1.25rem;border-radius:999px;font-weight:700}
.cr-parts{width:min(960px,92%);margin:3rem auto}
.cr-parts h2,.cr-menu-head h2,.cr-terrace h2,.cr-faq h2,.cr-contact h2{font-family:Georgia,"Times New Roman",serif;color:#1c3a4a;margin-bottom:1.2rem}
.cr-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:700px){.cr-timeline{grid-template-columns:1fr}}
.cr-timeline li{background:#fff;border-radius:16px;padding:1.2rem;border:1px solid #eadfce;border-top:4px solid #c45c26}
.cr-timeline .t{display:block;font-size:.8rem;font-weight:700;color:#c45c26;margin-bottom:.4rem}
.cr-timeline p{color:#6b5b4b;font-size:.92rem}
.cr-menu{margin:2.5rem 0 3rem;padding:2rem 0 2rem 0;background:linear-gradient(180deg,#e8f4fc 0%,#faf6f1 100%)}
.cr-menu-head{width:min(1100px,92%);margin:0 auto 1rem;display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.cr-menu-head p{color:#5a7080;font-size:.9rem}
.cr-scroll{display:flex;gap:1rem;overflow-x:auto;padding:0 4% 1rem;scroll-snap-type:x mandatory}
.cr-scroll article{flex:0 0 min(260px,78vw);background:#fff;border-radius:18px;overflow:hidden;border:1px solid #d7e6ef;scroll-snap-align:start}
.cr-scroll img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cr-scroll h3{font-size:1rem;padding:.8rem 1rem 0;font-family:Georgia,"Times New Roman",serif}
.cr-scroll p{padding:.2rem 1rem;color:#6b5b4b;font-size:.88rem}
.cr-scroll b{display:block;padding:.4rem 1rem 1rem;color:#c45c26}
.cr-terrace{width:min(1000px,92%);margin:0 auto 3rem}
.cr-masonry{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:180px 180px;gap:.75rem}
@media(max-width:700px){.cr-masonry{grid-template-columns:1fr;grid-template-rows:auto}}
.cr-masonry img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.cr-masonry img:first-child{grid-row:1 / span 2}
.cr-masonry .tall{grid-row:auto}
.cr-note{margin-top:1rem;color:#6b5b4b;font-size:.92rem}
.cr-faq{width:min(720px,92%);margin:0 auto 3rem}
.cr-faq details{background:#fff;border:1px solid #eadfce;border-radius:12px;padding:1rem 1.1rem;margin-bottom:.6rem}
.cr-faq summary{cursor:pointer;font-weight:700;color:#1c3a4a}
.cr-faq p{margin-top:.5rem;color:#5a4a3a}
.cr-contact{width:min(1000px,92%);margin:0 auto 3rem;display:grid;grid-template-columns:1fr 1.15fr;gap:1.25rem;align-items:center}
@media(max-width:800px){.cr-contact{grid-template-columns:1fr}}
.cr-wa{display:inline-block;margin:1rem 0 .6rem;background:#25D366;color:#fff;padding:.75rem 1.2rem;border-radius:999px;font-weight:700}
.cr-back{display:block;color:#1c3a4a;font-size:.9rem}
.cr-contact iframe{width:100%;height:240px;border:0;border-radius:14px}
.cr-foot{text-align:center;padding:1.5rem;color:#8a7a6a;font-size:.85rem;border-top:1px solid #eadfce}

/* mobile/reliability fixes v98 */
@media (max-width: 860px) {
  body.cafe-rooftop { grid-template-columns: 1fr !important; }
  .cr-rail {
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
    height: auto !important;
    width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    gap: .75rem !important;
    padding: .7rem 4% !important;
    overflow-x: auto !important;
  }
  .cr-mark, .cr-rail a {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: nowrap;
  }
  .cr-rail-v { margin-top: 0 !important; margin-inline-start: auto; }
  .cr-hero { min-height: 56vh; }
  .cr-glass { margin: 12% 4% 8%; }
}