/* Casa Lumen — the page's own compositions, built only from Orvel's Design DNA (tokens.css + orvel.css parts).
   Load after orvel.css. Every colour, radius and size comes from tokens.css. */

/* ── Type: Orvel's own tracking (tokens.css) over the engine's +0.02em, and +0.05em on the uppercase labels ── */
.t-display { letter-spacing: -2px; }
.t-h1, .stat__num b { letter-spacing: -1px; }
.t-h2 { letter-spacing: -1.5px; }
.t-h3 { letter-spacing: -1px; }
.t-ghost { letter-spacing: 0; }
.t-label, .menu-toggle, .site-foot__tag, .tlink { letter-spacing: .05em; }
@media (max-width: 767px) { .t-display { letter-spacing: -1.5px; } .t-h1 { letter-spacing: 0; } .t-h2 { letter-spacing: -1px; } }

/* ── Hero (hero-d): the page opens on white, so the first section clears the absolute header ── */
.cl-hero { padding: 160px 0 var(--section); overflow-x: clip; }
.cl-hero .v-hero-d__img { width: 840px; max-width: 100%; aspect-ratio: 840 / 495; }   /* narrower than the ghost word so "Alfama" shows at both sides */
.cl-hero .t-display { max-width: 1240px; }

/* ── Rooms: label-column head, then a tall room photo beside the rate ledger (the listing card's anatomy, stacked) ── */
.cl-rooms { padding: var(--section) 0; }
.cl-rooms__head { display: flex; justify-content: space-between; gap: 40px; }
.cl-rooms__head .t-h2 { width: 876px; max-width: 100%; }
.cl-rooms__row { display: grid; grid-template-columns: 663px minmax(0, 1fr); gap: var(--gap-col); align-items: stretch; margin-top: 80px; }
.cl-rooms__img { width: 100%; height: 100%; min-height: 780px; object-fit: cover; border-radius: var(--r-img); }
.cl-rooms__ledger { display: flex; flex-direction: column; gap: 2px; }
.cl-rooms__ledger .listing__top { flex: 1 1 0; justify-content: center; background: var(--surface); }
.cl-rooms__ledger .listing__title { max-width: none; }
.cl-rooms__ledger .listing__sub { max-width: 34em; }
.cl-rooms__foot { display: grid; grid-template-columns: minmax(0, 1fr) 445px; gap: var(--gap-col); align-items: center; margin-top: var(--gap-block); }
.cl-rooms__foot .t-lead { max-width: 640px; }
.cl-detail__img { width: 100%; aspect-ratio: 445 / 400; object-fit: cover; border-radius: var(--r-img); }

/* ── Chef's table: a ghost word, the 1360 film frame floating over it, then label | 72px statement ── */
.cl-table { padding: var(--section) 0; overflow-x: clip; }
.cl-table .ghost-title { margin-bottom: -130px; }
.cl-table__frame { position: relative; z-index: 1; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 1360 / 789; }
.cl-table__frame img { width: 100%; height: 100%; object-fit: cover; animation: drift 18s var(--ease) infinite alternate; }
.cl-table__split { display: flex; justify-content: space-between; gap: 40px; margin-top: 80px; }
.cl-table__text { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.cl-table__text .t-body { max-width: 34em; }

/* ── Mornings: ghost word, a big breakfast photo + a side column of one stat card and the guest's words ── */
.cl-mornings { padding: var(--section) 0; overflow-x: clip; }
.cl-mornings .ghost-title { margin-bottom: -157px; }
.cl-mornings__row { display: grid; grid-template-columns: 875px minmax(0, 1fr); gap: 40px; align-items: stretch; }
.cl-mornings__img { width: 100%; aspect-ratio: 875 / 700; object-fit: cover; border-radius: var(--r-img); }
.cl-mornings__side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.cl-mornings__side .stat { width: 100%; }
.cl-mornings__quote { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 4px; }
.cl-mornings__quote .quote__text { font-size: 36px; line-height: 1.22; letter-spacing: -.5px; }

/* ── Alfama on foot: label-column head, a hairline list of walks left, the lane photo right ── */
.cl-alfama { padding: var(--section) 0; }
.cl-alfama__head { display: flex; justify-content: space-between; gap: 40px; }
.cl-alfama__head .t-h2 { width: 876px; max-width: 100%; }
.cl-alfama__row { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: var(--gap-col); align-items: center; margin-top: 80px; }
.cl-alfama__img { width: 100%; aspect-ratio: 560 / 700; object-fit: cover; border-radius: var(--r-img); }
.cl-walks { border-top: 1px solid var(--line); }
.cl-walks__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cl-walks__row h3 { font: 400 24px/1.25 var(--font-display); letter-spacing: -.5px; }
.cl-walks__row p { color: var(--text-2); }
.cl-walks__min { font: 400 24px/1.3 var(--font-display); letter-spacing: -.5px; white-space: nowrap; }
.cl-walks__min span { font: 400 14px/1 var(--font); margin-left: 6px; }
.cl-alfama .tlink { margin-top: 32px; }

/* ── The view (film-b) and the closing statement (cta-a at 72px) ── */
.cl-view { padding: var(--section) 0; }
.cl-stay { padding: var(--section-lg) 0; }
.cl-stay .t-h1 { max-width: 1060px; }
.cl-stay .ct-schedule__p { max-width: 34em; }
.cl-stay__note { max-width: 34em; margin-top: 40px; color: var(--text-2); }

/* ── Tablet ── */
@media (max-width: 1199px) {
  .cl-rooms__row { grid-template-columns: 1fr; }
  .cl-rooms__img { min-height: 0; aspect-ratio: 4 / 3; }
  .cl-mornings__row { grid-template-columns: 1fr 1fr; }
  .cl-mornings__img { aspect-ratio: 1; }
  .cl-alfama__row { grid-template-columns: minmax(0, 1fr) 42%; }
}
@media (max-width: 1023px) {
  .cl-hero { padding-top: 150px; }
  .cl-rooms__head, .cl-alfama__head { flex-direction: column; gap: 24px; }
  .cl-rooms__foot { grid-template-columns: 1fr; gap: 40px; }
  .cl-detail__img { max-width: 445px; }
  .cl-table .ghost-title, .cl-mornings .ghost-title { margin-bottom: -90px; }
  .cl-table__split { flex-direction: column; gap: 24px; }
  .cl-mornings__row { grid-template-columns: 1fr; }
  .cl-mornings__quote .quote__text { font-size: 30px; }
  .cl-alfama__row { grid-template-columns: 1fr; }
  .cl-alfama__img { max-width: 560px; }
}
/* ── Phone ── */
@media (max-width: 767px) {
  .cl-hero { padding: 130px 0 var(--section); }
  .cl-hero .v-hero-d__img { aspect-ratio: 335 / 240; }
  .cl-rooms__row, .cl-rooms__foot { margin-top: 40px; gap: 24px; }
  .cl-rooms__img { aspect-ratio: 335 / 305; }
  .cl-rooms__ledger .listing__top { padding: 20px; }
  .cl-table .ghost-title, .cl-mornings .ghost-title { margin-bottom: -30px; }
  .cl-mornings .ghost-title { font-size: 74px; }   /* "Mornings" in Marcellus runs 377px at 84px: keep it inside 375 */
  .cl-table__frame { aspect-ratio: 335 / 194; }
  .cl-table__split { margin-top: 40px; }
  .cl-mornings__row { gap: 24px; }
  .cl-mornings__img { aspect-ratio: 1; }
  .cl-mornings__quote .quote__text { font-size: 25px; }
  .cl-alfama__row { margin-top: 40px; gap: 24px; }
  .cl-alfama__img { aspect-ratio: 335 / 305; max-width: none; }
  .cl-walks__row { gap: 16px; padding: 16px 0; }
  .cl-walks__row h3, .cl-walks__min { font-size: 20px; }
}