/* Official Amex public artwork. Source URLs and original paths: assets/amex/SOURCES.md.
 * Portrait and ornamental textures use the published assets; no redrawn brand artwork.
 */
:root[data-color-theme="classic"] {
  --ink: #282b2e;
  --muted: #64686c;
  --faint: #777b7e;
  --paper: #e4e5e4;
  --panel: #fafaf8;
  --panel-alpha: rgba(250, 250, 248, .97);
  --card-alpha: #fafaf8;
  --soft: #e6e7e5;
  --line: #cbcecc;
  --control-bg: #fcfcfa;
  --control-border: #b8bdbb;
  --label: #565c5e;
  --green: #42494b;
  --green-2: #e1e5e3;
  --gold: #5d6466;
  --atelier-metal: #a8aeae;
  --atelier-glint: #fff;
  --atelier-rail: #dadddc;
  --atelier-rail-ink: #51595a;
  --atelier-hero: linear-gradient(110deg, #ededeb, #dadbd9 70%, #babfbe);
  --atelier-button: linear-gradient(135deg, #596162, #343a3c);
  --atelier-button-ink: #fff;
}
:root[data-theme="dark"][data-color-theme="classic"] {
  --ink: #f0e9dc;
  --muted: #b7ad9b;
  --faint: #99907d;
  --paper: #0e0e0d;
  --panel: #191917;
  --panel-alpha: rgba(25, 25, 23, .98);
  --card-alpha: #191917;
  --soft: #2a271f;
  --line: #494131;
  --control-bg: #1c1c19;
  --control-border: #615740;
  --label: #c5b89f;
  --green: #c5ac7a;
  --green-2: #353021;
  --gold: #c5ac7a;
  --atelier-metal: #776748;
  --atelier-glint: #d5c2a2;
  --atelier-rail: #131312;
  --atelier-rail-ink: #c0ad88;
  --atelier-hero: linear-gradient(115deg, #20201d, #111110 74%, #24211b);
  --atelier-button: linear-gradient(125deg, #d4c1a0, #aa8d58);
  --atelier-button-ink: #18150f;
}
.amexCameo {
  display: inline-block;
  flex: 0 0 auto;
  width: 36px;
  height: 45px;
  background: currentColor;
  mask: url('../assets/amex/centurion-official.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/amex/centurion-official.svg') center / contain no-repeat;
}
.brand > .brandCameo { width: 36px; height: 45px; }
.railBrand > .amexCameo { width: 38px; height: 47px; }
body.atelierPage { background: var(--paper); }
/* Old invented guilloche is retired. The original card face remains the material reference. */
body.atelierPage::before,
[data-theme="dark"] body.atelierPage::before {
  background: url('../assets/amex/platinum-pattern-seamless.svg') left top / 429px 246px repeat;
  mask: none;
  -webkit-mask: none;
  opacity: .34;
  filter: contrast(1.25);
}
[data-theme="dark"] body.atelierPage::before {
  background-image: url('../assets/amex/platinum-pattern-seamless.svg');
  background-size: 429px 246px;
  background-repeat: repeat;
  filter: invert(1) sepia(.8) saturate(.65) brightness(1.6);
  opacity: .23;
}
.atelierHero,
[data-theme="dark"] .atelierHero {
  min-height: 210px;
  padding: 25px 38px 35px;
  border: 0;
  border-bottom: 1px solid var(--atelier-metal);
  border-radius: 0;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--panel) 45%, transparent);
  box-shadow: none;
}
.atelierHero::before { display: none; }
.atelierHero::after,
[data-theme="dark"] .atelierHero::after {
  background: url('../assets/amex/platinum-pattern-seamless.svg') center / 429px 246px repeat;
  mask: linear-gradient(90deg, transparent, #000);
  -webkit-mask: linear-gradient(90deg, transparent, #000);
  opacity: .4;
  filter: contrast(1.3);
}
[data-theme="dark"] .atelierHero::after {
  background-image: url('../assets/amex/platinum-pattern-seamless.svg');
  background-size: 429px 246px;
  background-repeat: repeat;
  filter: invert(1) sepia(.8) saturate(.65) brightness(1.7);
  opacity: .28;
}
.heroTitle { font-size: clamp(30px, 2.8vw, 39px); line-height: 1.25; letter-spacing: .015em; }
.heroTitle span { display: inline; }
.heroCopy { max-width: calc(100% - 200px); gap: 13px; }
.heroDescription { font-size: 12px; max-width: none; }
.heroActions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.heroExplore { min-height: 33px; font-size: 11px; border-radius: 2px; }
.heroPrograms > * { min-height: 22px; }
.heroSeal {
  right: 6%;
  width: 145px;
  height: 180px;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr;
  gap: 0;
  opacity: 1;
  color: var(--green);
}
.heroCollectionLabel { display: none; }
.heroSeal > .heroPortrait {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .9;
}
.heroSeal .heroEditionLine { display: none; }
.heroSerial { inset: auto 38px 11px; font-size: 7px; }
.hotelNameZh, .hotelNameEn { display: block; }
.hotelNameEn {
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .64em;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.shortlistChip .hotelNameEn { font-size: 11px; }
.popupBody h3 .hotelNameEn { font-size: 12px; }
.compareCard h3 .hotelNameEn { font-size: 12px; }
/* Chinese remains the primary property name even when the interface is English. */
html[lang] .hotelNameZh { margin-top: 0; color: inherit; font-size: 1em; font-weight: inherit; line-height: inherit; }
@media (max-width: 1020px) {
  .atelierHero { min-height: 210px; padding-inline: 28px; }
  .heroCopy { max-width: calc(100% - 155px); }
  .heroSeal { right: 4%; width: 120px; height: 148px; }
  .heroTitle { font-size: 32px; }
  .heroDescription { font-size: 11px; }
}
@media (max-width: 700px) {
  .brand > .brandCameo { width: 30px; height: 38px; }
  .atelierHero,
  [data-theme="dark"] .atelierHero {
    display: block;
    min-height: 0;
    padding: 20px 18px 31px;
    margin-bottom: 16px;
  }
  .heroCopy { max-width: none; gap: 10px; }
  .heroTitle { max-width: calc(100% - 77px); font-size: 27px; line-height: 1.35; }
  .heroDescription { max-width: none; font-size: 11px; line-height: 1.7; }
  .heroEyebrow { max-width: calc(100% - 77px); font-size: 7px; }
  .heroActions { gap: 9px; }
  .heroPrograms { gap: 4px; }
  .heroPrograms > * { font-size: 7px; padding-inline: 5px; }
  .heroSeal {
    position: absolute;
    inset: 21px 18px auto auto;
    transform: none;
    width: 63px;
    height: 78px;
    opacity: 1;
  }
  .heroSeal .heroEditionLine { display: none; }
  .heroSerial { inset: auto 20px 12px; font-size: 5px; }
}