:root { --x-big: clamp(3.5rem, 1rem + 10vw, 11rem); }
/* Small identifiers and calm metadata keep the hotel name in focus. */
.xg .xg-n { font-size:1rem; font-weight:400; padding-top:.4rem; }
.xg .project-fact-value { font-size:clamp(1rem,1.6vw,1.5rem); }
.xg .project-fact-unit { font-size:1rem; }
.xg .project-facts { margin-top:1.25rem; }
.xg .project-preview-frame { aspect-ratio:16 / 10; background:var(--color-sand); }
.xg .project-preview-frame img { width:100%; height:100%; object-fit:contain; transform:none; }
.xg .project-preview-frame img[hidden], .project-preview-controls[hidden] { display:none; }
.xg .project-preview-frame:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.xg-card .t-h3 a { color:inherit; text-decoration:none; }
.project-preview-story { display:inline-block; margin-top:1.5rem; }
.xg .reception-crop.flagship figure { aspect-ratio:16 / 9; }
.xg .reception-crop.flagship img { height:100%; object-fit:cover; object-position:50% 88%; }
.x-light { font-weight: 300; letter-spacing: -0.045em; line-height: .86; margin: 0 0 0 -0.09em; }

.xl-head { padding-block: calc(var(--spacing) * 6) var(--spacing-block); }
.xl-h1 { font-size: var(--x-big); }
.xl-sub { display:grid; gap: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 6); }
.xl-count { font-size: var(--text-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); margin: 0; }
@media (min-width:1000px){
  .xl-sub { grid-template-columns: repeat(12,1fr); gap: 0 var(--grid-gap); align-items: end; }
  .xl-count { grid-column: 1 / 5; }
  .xl-sub .t-lead { grid-column: 7 / 13; }
}

.xg { display:grid; gap: calc(var(--spacing) * 7) var(--grid-gap); }
.xg-card { display:block; color: inherit; text-decoration: none; }
.xg-card figure { margin:0; overflow:hidden; background: var(--accent-bg); aspect-ratio: 4 / 3; }
.xg-card img { width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(var(--s, 1)); transform-origin: var(--o, 50% 50%); transition: transform 1.2s var(--ease); }
a.xg-card:hover img, a.xg-card:focus-visible img { transform: scale(calc(var(--s, 1) * 1.035)); }
a.xg-card:hover .t-h3 { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.xg-cap { display:grid; grid-template-columns: minmax(0,1fr); gap: calc(var(--spacing) * 1) 0; margin-top: calc(var(--spacing) * 2); }
.xg-n { font-size: var(--text-h2); font-weight: 200; line-height: 1; letter-spacing: -0.02em; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.xg-cap .t-small { margin: 0; }
.xg-tag { display:inline-block; margin-left: .5em; font-size: .75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; vertical-align: .2em; }


.xg .w8 figure { aspect-ratio: 4 / 5; }

@media (min-width:700px) and (max-width:999px){
  .xg { grid-template-columns: 1fr 1fr; }
  .xg .w8 { grid-column: 1 / -1; }
  .xg .w8 figure { aspect-ratio: 16 / 10; }
}
@media (min-width:1000px){
  .xg { grid-template-columns: repeat(12,1fr); row-gap: calc(var(--spacing) * 12); }
  .xg .w8 { grid-column: span 8; }
  .xg .w4 { grid-column: span 4; }
  .xg .w8 figure { aspect-ratio: 16 / 10; }
  .xg .pair4 figure { aspect-ratio: 4 / 5; }

  .xg .pair4 { align-self: end; }
}
.xf-h { font-size: clamp(2.25rem, 1rem + 4.5vw, 5rem); font-weight: 300; letter-spacing: -0.035em; line-height: .98; max-width: 12ch; margin: 0 0 0 -0.04em; }

@media(prefers-reduced-motion:reduce){.xg-card img{transition:none}}

/* Round 1: the three five-star concepts lead the portfolio. */
.catalog-intro { display:flex; justify-content:space-between; gap:2rem; margin-top:3rem; }
.catalog-intro .t-lead { margin:0; }
.catalog-intro nav { display:flex; gap:2rem; align-items:end; }
.catalog-intro a { color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:.65rem; }
.catalog-intro a span { margin-left:1rem; color:var(--fg-muted); font-size:.8rem; }
.catalog-divider { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid var(--rule); padding-top:1.25rem; margin-bottom:2rem; scroll-margin-top:7rem; }
.catalog-divider h2 { font-size:var(--text-body); font-weight:400; margin:0; }
.catalog-divider > span { font-size:var(--text-small); color:var(--fg-muted); font-variant-numeric:tabular-nums; }
#other-projects { margin-top:clamp(5rem, 10vw, 10rem); }
.xg .w12 figure { aspect-ratio: 16 / 9; }
.xg .portrait figure { aspect-ratio: 3 / 4; }
.xg .flagship figure { aspect-ratio:auto; }
.xg .flagship img { height:auto; object-fit:contain; }
.xg .portrait.flagship { width:min(100%,38rem); justify-self:center; }
.xg .portrait.flagship figure { aspect-ratio:auto; }
.xg .portrait.flagship .t-h3 { font-size:clamp(1.5rem,2.5vw,2.5rem); }
.xg-secondary img { object-fit:cover; }
.xg-secondary figure { background:var(--color-white); aspect-ratio:16 / 10; }
.xg-card:focus-visible { outline:2px solid currentColor; outline-offset:8px; }
.xg-card .t-h3 { text-wrap:balance; margin:0 0 .5rem; }
.xg-card .t-small { max-width:56ch; line-height:1.6; }
@media(min-width:700px) {
  .xg .w12 { grid-column:1 / -1; }
  .xg .flagship.w12 .t-h3 { font-size:clamp(2rem, 3.5vw, 4rem); font-weight:300; letter-spacing:-.035em; }
  .xg .portrait.flagship .t-h3 { font-size:clamp(1.5rem,2.5vw,2.5rem); }
}
@media(min-width:1000px) {
  .xg .w6 { grid-column:span 6; }
  .xg .portrait { align-self:start; }
  .xg-secondary { row-gap:5rem; }
}
@media(max-width:699px) {
  .xl-head { padding-top:2.5rem; padding-bottom:3rem; }
  .catalog-intro { flex-direction:column; }
  .catalog-intro nav { gap:1.5rem; font-size:.875rem; }
  .xg { gap:3rem; }
  .xg .w8 figure { aspect-ratio:4 / 3; }
  .xg .w12 figure { aspect-ratio:4 / 3; }
  .xg-secondary figure { aspect-ratio:16 / 10; }
  .xg .portrait figure { aspect-ratio:auto; }
  .xg .flagship figure { aspect-ratio:auto; }
  .xg-n { font-size:1.5rem; }
  .xg-cap .t-h3 { font-size:1.5rem; }
}

/* All three images share one stable frame, including former flagship crops. */
.xg .xg-card .project-preview-frame { aspect-ratio:16 / 10; }
.xg .xg-card .project-preview-frame img { height:100%; object-fit:contain; object-position:center; }

.catalog-intro .catalog-note { margin:1.25rem 0 0; max-width:42ch; color:var(--fg-muted); }

/* ===== Catalog v2: one ruler for every card =====
   Frames are always 16:9 (3:2 on phones) and cover their box, so photos fill the
   full width with no sand bars. Captions sit on the 12-column grid; in the
   two-up rows, rows are shared (subgrid) so titles and facts line up. */
.xg > .xg-card figure.project-preview-frame { position:relative; aspect-ratio:16 / 9; background:var(--color-sand); overflow:hidden; cursor:pointer; touch-action:pan-y; }
.xg > .xg-card .project-preview-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); transform:none; }
.xg > .xg-card.reception-crop .project-preview-frame img { --pos:50% 62%; }
.xg > .xg-card .project-preview-frame:focus-visible { outline:2px solid currentColor; outline-offset:6px; }

/* Captions share a compact number column and one content axis. */
.xg-card .xg-cap {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:0 var(--grid-gap);
  margin-top:calc(var(--spacing) * 3);
  align-items:start;
}
.xg-card .xg-n { grid-column:1; grid-row:1; padding-top:.5rem; font-size:.8125rem; font-weight:400; letter-spacing:.04em; color:var(--fg-muted); }
.xg-card .xg-cap .t-h3 { grid-column:2; grid-row:1; margin:0; text-wrap:balance; }
.xg-card .project-preview-story { display:inline; margin:0; color:inherit; text-decoration:none; }
.xg-card .project-preview-story:hover { text-decoration:none; }
.xg-card .project-preview-story:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.xg-card .xg-cap .project-facts-block { grid-column:2; grid-row:2; margin-top:calc(var(--spacing) * 3); }
.xg-card .project-facts--card .project-facts { margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--spacing) * 3) var(--grid-gap); align-items:start; }
.xg-card .project-facts--card .project-fact { min-width:0; }
.xg-card .project-facts--card .project-fact dt { min-height:0; }
.xg-card .xg-cap .catalog-status { grid-column:2; grid-row:3; margin-top:calc(var(--spacing) * 2); font-size:var(--text-small); color:var(--fg-muted); }

@media(min-width:700px) {
  .xg-secondary { row-gap:0; }
  .xg-secondary > .xg-card { display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; margin-bottom:calc(var(--spacing) * 8); }
  .xg-secondary > .xg-card .xg-cap { grid-template-rows:subgrid; grid-row:span 3; }
  .xg-secondary .t-h3 { min-height:0; }
  .xg > .xg-card.w12 .project-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:699px) {
  .xg > .xg-card figure.project-preview-frame { aspect-ratio:3 / 2; }
  .xg { gap:3.5rem; }
  .project-preview-controls { gap:.75rem; }
}

/* scroll arrival: the frame opens from the top edge, the caption follows */
@media(prefers-reduced-motion:no-preference) {
  .xg-card[data-motion].motion-ready { transform:none; opacity:1; }
  .xg-card[data-motion].motion-ready .project-preview-frame { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
  .xg-card[data-motion].motion-ready .project-preview-controls,
  .xg-card[data-motion].motion-ready .xg-cap { opacity:0; transform:translateY(1rem); transition:opacity .8s var(--ease) .25s, transform .9s var(--ease) .25s; }
  .xg-card[data-motion].motion-ready.motion-visible .project-preview-frame { clip-path:inset(0); }
  .xg-card[data-motion].motion-ready.motion-visible .project-preview-controls,
  .xg-card[data-motion].motion-ready.motion-visible .xg-cap { opacity:1; transform:none; }
}