/* princecollection.com, quiet luxury (Ricky, 2026-10-19: "take a step up in terms of making the design feel more luxury
   like"; of four looks he picked A). Laid out like a hotel's own folio: full-bleed
   photographs, a centred masthead, hairlines instead of boxes and pills, Cormorant Garamond for the voice and Jost for the
   small print. PC's rose-gold is the crown's own, #CF8B82 (from #B36B63 to #EEAEA5): the rules, the numerals, the marks,
   a foil wash under the pointer, and the four-pointed star from the logo, which leads the labels and draws the star map. */
:root {
  --paper: #f4f2ee; --paper-2: #ebe7e1; --card: #faf9f6; --ink: #1d1b19; --body: #3b3834; --soft: #6a645c; --line: #d9d3ca;
  --rose: #8f5149; --night: #1f1c1a; --on-night: #ece7df; --on-night-soft: #a8a095; --scrim: 16 13 11;
  --rg: #cf8b82; --rg-deep: #b36b63; --rg-text: #8f5149; --rg-night: #d99c93; --rule: #dcb9b1;
  --land-ink: rgb(207 139 130 / .4); --star-glow: rgb(214 150 141 / .38);
  --star-ink: linear-gradient(135deg, #9a5a51 0%, #b36b63 45%, #cf8b82 100%);  /* (a lit star: the deeper tones, over the land's light ones) */
  --foil: linear-gradient(105deg, #b36b63 0%, #cf8b82 34%, #eeaea5 50%, #cf8b82 66%, #a9645c 100%);
  --foil-text: linear-gradient(105deg, #9a5a51 0%, #b97970 40%, #d9a097 50%, #b36b63 62%, #8f5149 100%);
  --foil-btn: linear-gradient(105deg, #c27c74 0%, #d6968d 34%, #eeb3a9 50%, #d6968d 66%, #c27c74 100%);  /* (a button's foil: dark type reads on all of it) */
  --serif: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1280px; --band: clamp(72px, 9vw, 136px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141312; --paper-2: #1b1a18; --card: #1e1c1a; --ink: #f0ebe4; --body: #d6cfc6; --soft: #9e968c; --line: #35312d;
    --rose: #d99c93; --night: #0d0c0b; --on-night: #ece7df; --on-night-soft: #a39b91; --scrim: 8 7 6; color-scheme: dark;
    --rg: #cf8b82; --rg-deep: #d99c93; --rg-text: #d99c93; --rg-night: #d99c93; --rule: #5a3f3a;
    --land-ink: rgb(207 139 130 / .3); --star-glow: rgb(238 174 165 / .3);
    --star-ink: linear-gradient(135deg, #f8d2ca 0%, #eeaea5 45%, #d99c93 100%);
    --foil-text: linear-gradient(105deg, #c27c74 0%, #e0a49b 40%, #f4c4bb 50%, #d99c93 62%, #c27c74 100%);
  }
}
:root[data-theme="dark"] {
  --paper: #141312; --paper-2: #1b1a18; --card: #1e1c1a; --ink: #f0ebe4; --body: #d6cfc6; --soft: #9e968c; --line: #35312d;
  --rose: #d99c93; --night: #0d0c0b; --on-night: #ece7df; --on-night-soft: #a39b91; --scrim: 8 7 6; color-scheme: dark;
  --rg: #cf8b82; --rg-deep: #d99c93; --rg-text: #d99c93; --rg-night: #d99c93; --rule: #5a3f3a;
  --land-ink: rgb(207 139 130 / .3); --star-glow: rgb(238 174 165 / .3);
    --star-ink: linear-gradient(135deg, #f8d2ca 0%, #eeaea5 45%, #d99c93 100%);
  --foil-text: linear-gradient(105deg, #c27c74 0%, #e0a49b 40%, #f4c4bb 50%, #d99c93 62%, #c27c74 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--body); font: 400 16.5px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 300; line-height: 1.1; margin: 0; text-wrap: balance; overflow-wrap: break-word; letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.1rem); }
h3 { font-weight: 500; font-size: 1.45rem; line-height: 1.2; letter-spacing: 0; }
em { font-style: italic; font-weight: inherit; }
p { margin: 0; text-wrap: pretty; }  /* (no paragraph ends on one word alone) */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.select { user-select: all; }
.nobr { white-space: nowrap; }  /* (only round one hyphenated word of a name, such as "Shangri-La") */
.soft { color: var(--soft); }
.on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .on-light { display: none; } :root:not([data-theme="light"]) .on-dark { display: block; } }
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }
.ic { flex: none; }
.arrow { transition: transform .3s; }
a:hover > .arrow { transform: translateX(3px); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .phero :focus-visible, .foot :focus-visible { outline-color: #f4f2ee; }  /* (on a photograph or the dark footer the ink ring didn't show) */

/* The preview's own line (never on princecollection.com) */
.preview-bar { background: var(--night); color: var(--on-night); font-size: 12px; letter-spacing: .04em; text-align: center; padding: 7px 16px; }
.draft-note, .draft-box { color: var(--rose); font-size: 13px; }
.draft-box { display: block; border: 1px dashed var(--rose); padding: 10px 14px; margin-bottom: 14px; font-family: var(--sans); }

/* The small print: labels, links, buttons */
.eyebrow, .foot-h, .sub, .crumb, .facts dt, .req label, .pcard-count, .hcard-place, .link, .btn, .nav a {
  font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: var(--soft); margin-bottom: 22px; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.link:hover { border-color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); padding: 18px 34px; text-decoration: none; letter-spacing: .2em; transition: background .3s, color .3s, border-color .3s; }
.btn:hover { background: transparent; color: var(--ink); }
.btn.line { background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.btn.light { background: #f4f2ee; border-color: #f4f2ee; color: #1d1b19; }  /* (on a photograph: the same in either theme) */
.btn.light:hover { background: transparent; color: #f4f2ee; }
.btn.line.light { background: transparent; color: #f4f2ee; border-color: rgb(244 242 238 / .7); }
.btn.line.light:hover { background: #f4f2ee; color: #1d1b19; }
.btn.wide { width: 100%; }
@media (max-width: 520px) { .btn-more { display: none; } }  /* ("Inquire about a Dorchester Collection stay" is two lines on a phone: there, "Inquire") */

/* The masthead: the programs and about on the left, the wordmark in the middle, the request on the right */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 78px; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav-right { justify-content: flex-end; }
.nav a { text-decoration: none; color: var(--body); padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.nav a:hover { color: var(--ink); border-color: var(--ink); }
.nav a.ask-link { color: var(--ink); border-color: var(--line); }
.nav a.ask-link:hover { border-color: var(--ink); }
@media (max-width: 640px) {
  .top-row { height: 64px; gap: 10px; }
  .nav { gap: 16px; }
  .nav a { font-size: 10.5px; letter-spacing: .16em; }
  .nav a.wide { display: none; }
  .brand img { height: 36px; }
}

/* Section rhythm */
.band { padding-block: var(--band); }
.band.slim { padding-block: clamp(56px, 6vw, 88px); }
.band.inset { background: var(--paper-2); }
.band.top-pad { padding-top: clamp(56px, 7vw, 104px); }
.band > .wrap > h2, .band > .wrap > .eyebrow, .band > .wrap > [data-reveal] > h2, .band > .wrap > [data-reveal] > .eyebrow { text-align: center; }
.h-page { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.2rem); text-align: center; }
.intro { max-width: 620px; margin: 24px auto 0; text-align: center; color: var(--soft); }
.intro.left { text-align: left; margin-inline: 0; }
.wrap.narrow .eyebrow, .wrap.narrow .h-page { text-align: left; }
.center .h-page, .center .intro, .center .eyebrow, .wrap.narrow.center .h-page { text-align: center; margin-inline: auto; }  /* (the 404's heading sat left of its centred line) */
.fine { margin-top: 28px; text-align: center; font-size: 13.5px; color: var(--soft); }
.sub { color: var(--soft); margin: 72px 0 28px; }
.band.slim .sub { margin-top: 0; }

/* The home page's opening photograph */
.hero { position: relative; min-height: min(86vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; color: #f4f2ee; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-frame > .hero-img, .hero-frame > .hero-shade { z-index: auto; }
.hero-img[data-parallax], .hero-video[data-parallax] { inset: -9% 0 auto; height: 118%; will-change: transform; }
/* the opening film (Ricky, V1): over its own first frame, which shows at once; it fades in once it plays (hero.js), and never
   shows for a visitor who asks for reduced motion */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion) { .hero-video { display: none; } }  /* (any wish for less motion: the same as "reduce") */
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(16 13 11 / .42) 0%, rgb(16 13 11 / .12) 55%, transparent 80%),
  linear-gradient(180deg, rgb(16 13 11 / .22) 0%, transparent 34%, rgb(16 13 11 / .66) 100%); }
.hero-body { width: 100%; padding-block: 120px clamp(56px, 8vw, 104px); }
.hero .eyebrow { color: #f4f2ee; }
.hero h1 { color: #f4f2ee; font-size: clamp(2.7rem, 1.5rem + 4.6vw, 5.4rem); line-height: 1.02; max-width: 11.5em; }
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.statement { padding-block: clamp(72px, 9vw, 128px) clamp(40px, 5vw, 64px); }
.statement-grid { display: grid; justify-items: center; }
.statement:not(.overlap) .statement-grid { max-width: 820px; text-align: center; }
.statement-text { display: grid; justify-items: center; gap: 30px; }
.crown { width: 34px; height: auto; }
.lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); line-height: 1.4; color: var(--ink); text-wrap: pretty; }

/* Program logos: one quiet line of marks. Each is its own shape in one ink, the page's soft one (tools/pc_site_logo_row.py,
   QA 5: Hyatt's and Belmond's grey had come out pale, and Four Seasons' words too small to read), at the size that gives
   the marks about the same weight (--w, a wide screen's width in px; a phone's is --mark of it) */
.logos { padding-block: 8px clamp(56px, 7vw, 96px); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 36px; --mark: 1; }
.logo-row a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 10px; }  /* (a finger-sized target round each mark) */
.logo-break { display: none; flex-basis: 100%; height: 0; }  /* (the lines' breaks: two even lines on a wide screen, three on a tablet) */
@media (min-width: 1140px) { .logo-break.half { display: block; } }
@media (min-width: 761px) and (max-width: 1139px) { .logo-break.third { display: block; } }
.logo-row img { width: auto; max-height: 34px; max-width: 150px; height: auto; filter: grayscale(1); opacity: .5; transition: opacity .4s; }
.logo-row img.mark { width: calc(var(--w) * var(--mark) * 1px); max-width: none; max-height: none; filter: var(--mark-ink, brightness(0)); opacity: var(--mark-o, .6); }
.logo-row a:hover img.mark { opacity: .95; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-row { --mark-ink: brightness(0) invert(1); --mark-o: .62; } }
:root[data-theme="dark"] .logo-row { --mark-ink: brightness(0) invert(1); --mark-o: .62; }
@media (max-width: 1239px) { .logo-row { column-gap: 32px; --mark: .9; } }
@media (max-width: 900px) { .logo-row { --mark: .82; } }
@media (max-width: 560px) { .logo-row { column-gap: 24px; --mark: .76; } .logo-row a { padding-block: 3px; } .logo-row img { max-height: 24px; max-width: 104px; } }
@media (max-width: 360px) { .logo-row { column-gap: 20px; --mark: .68; } }
.logo-row a:hover img { opacity: .95; }
.logo-row img.flip { filter: grayscale(1) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-row img { filter: grayscale(1) invert(1); opacity: .55; } :root:not([data-theme="light"]) .logo-row img.flip { filter: grayscale(1); } }
:root[data-theme="dark"] .logo-row img { filter: grayscale(1) invert(1); opacity: .55; }
:root[data-theme="dark"] .logo-row img.flip { filter: grayscale(1); }

/* What you get: the heading beside the list */
.split { display: grid; gap: 48px 80px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
.split .eyebrow, .split h2 { text-align: left; }
.split .fine { text-align: left; margin-top: 28px; max-width: 30ch; }
.perk-grid { display: grid; gap: 0 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.perk { border-top: 1px solid var(--line); padding-block: 26px 34px; }
.perk p { margin-top: 8px; font-size: 15px; color: var(--soft); max-width: 36ch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* How it works: three steps in order */
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; gap: 0 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { border-top: 1px solid var(--line); padding-top: 22px; }
.step-n { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--rose); margin-bottom: 18px; }
.steps p { margin-top: 8px; font-size: 15px; color: var(--soft); max-width: 34ch; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 0; } .steps li { padding-block: 22px 30px; } }

/* Program cards: the program's hotel, its mark, its name */
/* (three to a row, two on a tablet and a phone, on a grid of half-columns so a short last row is centred) */
.program-grid { margin-top: 64px; display: grid; gap: 48px 28px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.program-grid > * { grid-column: span 2; }
.program-grid > :nth-child(3n+1):last-child { grid-column: 3 / span 2; }
.program-grid > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
@media (max-width: 980px) {
  .program-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .program-grid > :nth-child(3n+1):last-child, .program-grid > :nth-child(3n+1):nth-last-child(2) { grid-column: span 2; }
  .program-grid > :nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}
.pcard { display: grid; gap: 18px; text-decoration: none; align-content: start; }
.pcard-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--paper-2); overflow: hidden; }
.pcard-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.pcard:hover .pcard-img > img { transform: scale(1.04); }
.pcard-img::after { content: ""; position: absolute; inset: 0; background: rgb(16 13 11 / .4); transition: background .6s; }
.pcard:hover .pcard-img::after { background: rgb(16 13 11 / .3); }
.pcard-logo { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.pcard-logo img { max-width: 52%; max-height: 34%; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.pcard-body { display: grid; gap: 6px; }
.pcard-name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.pcard-count { color: var(--soft); font-size: 10.5px; }

/* Hotel cards: a tall photograph and its name */
.hotel-grid { margin-top: 64px; display: grid; gap: 48px 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hotel-grid.five { margin-top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 20px; }
.hotel-grid.three { margin-top: 0; }
@media (max-width: 1100px) { .hotel-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A program's hotels below its top five: a list by country, in columns */
.more-hotels { columns: 3 260px; column-gap: 48px; }
.mh-country { break-inside: avoid; padding-bottom: 28px; }
.mh-country h4 { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--rg-text);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mh-country ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mh-country li { display: grid; gap: 1px; }
.mh-country a { font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--ink); text-decoration: none; padding-block: 3px; margin-block: -3px; }  /* (a 30 px target, the same lines) */
.mh-country a:hover { color: var(--rg-text); }
.mh-country span { font-size: 13px; color: var(--soft); }
.hcard { display: grid; gap: 16px; text-decoration: none; align-content: start; }
.hcard-img { aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; background: var(--paper-2); }
.hcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.hcard:hover .hcard-img img { transform: scale(1.04); }
.hcard-body { display: grid; gap: 6px; }
.hcard-name { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.hcard-place { font-size: 10.5px; letter-spacing: .18em; color: var(--soft); }

/* A program's page */
.phero { position: relative; isolation: isolate; overflow: hidden; color: #f4f2ee; }
.phero .hero-img { z-index: -2; }
.phero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(16 13 11 / .5), rgb(16 13 11 / .66)); }
.phero-body { padding-block: clamp(96px, 13vw, 184px); display: grid; justify-items: center; text-align: center; }
.phero .crumb { color: #f4f2ee; }
/* (the small capitals over a photograph faded into its bright patches: "Hotel programs" over the Four Seasons hero
   measured 3.1:1; a soft shadow behind them, and behind the lead, keeps them readable and isn't seen on dark ground) */
.phero .crumb, .phero .lead, .hero .eyebrow { text-shadow: 0 0 14px rgb(16 13 11 / .5), 0 1px 2px rgb(16 13 11 / .25); }
.phero h1 { color: #f4f2ee; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); margin-top: 22px; }
.phero .lead { color: rgb(244 242 238 / .9); font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); max-width: 34em; margin-top: 22px; }
.phero .btn { margin-top: 40px; }
.phero-logo { max-height: 56px; max-width: 220px; width: auto; filter: brightness(0) invert(1); margin-top: 30px; }
.crumb { display: inline-block; text-decoration: none; color: var(--rose); padding-block: 6px; margin-block: -6px; }  /* (a taller target, the same layout) */
.crumb:hover { text-decoration: underline; text-underline-offset: 4px; }
.benefits { list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; max-width: 920px; }
.benefits li { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding-block: 20px; color: var(--ink); font-size: 16px; min-width: 0; }
.benefits .perk-ic { color: var(--soft); display: inline-grid; }
@media (max-width: 720px) { .benefits { grid-template-columns: 1fr; } }

/* A hotel's page */
.gallery { display: grid; gap: 4px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(170px, 34vh)); }
.gallery figure { margin: 0; overflow: hidden; background: var(--paper-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .g1 { grid-row: span 2; }
.gallery.n3 { grid-template-columns: 2fr 1fr; }  /* (three photos: the lead and two beside it; four: the last across the foot) */
.gallery.n4 .g4 { grid-column: span 2; }
.gallery.one { grid-template-columns: 1fr; grid-template-rows: minmax(280px, 62vh); }
.gallery.one figure:not(.g1) { display: none; }
@media (max-width: 760px) {
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-rows: none; gap: 3px; }
  .gallery figure { flex: 0 0 86%; height: 68vw; max-height: 440px; scroll-snap-align: start; }
  .gallery.one figure { flex-basis: 100%; }
}
.hhead { padding-block: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.hhead-grid { display: grid; gap: 48px 96px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .hhead-grid { grid-template-columns: 1fr; } }
.crumb-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.hname { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.04; margin-top: 22px; }
.hplace { margin-top: 16px; color: var(--soft); font-size: 15px; }
/* (the hotel's awards, one quiet line under the place: Ricky, 2026-10-21) */
.hawards { margin-top: 8px; color: var(--rg-text); font-size: 14px; line-height: 1.6; letter-spacing: .01em; text-wrap: balance; }
.hawards .sep { color: var(--soft); }
.habout { margin-top: 24px; max-width: 60ch; color: var(--soft); line-height: 1.7; text-wrap: pretty; }
.facts { margin: 36px 0 32px; display: flex; flex-wrap: wrap; gap: 18px 56px; border-block: 1px solid var(--line); padding-block: 20px; }
.facts dt { color: var(--soft); font-size: 10.5px; }
.facts dd { margin: 6px 0 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.ask { position: sticky; top: 112px; background: var(--card); border: 1px solid var(--line); padding: 36px 32px; }
.ask-h { font-family: var(--serif); font-size: 1.75rem; font-weight: 300; color: var(--ink); line-height: 1.2; text-wrap: balance; }
.ask p:not(.ask-h) { margin: 14px 0 28px; color: var(--soft); font-size: 15px; }
.with-logo { max-height: 44px; max-width: 190px; width: auto; filter: grayscale(1); opacity: .6; }
.with-logo.flip { filter: grayscale(1) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .with-logo { filter: grayscale(1) invert(1); } :root:not([data-theme="light"]) .with-logo.flip { filter: grayscale(1); } }
:root[data-theme="dark"] .with-logo { filter: grayscale(1) invert(1); }
:root[data-theme="dark"] .with-logo.flip { filter: grayscale(1); }

/* The closing invitation and the monthly letter */
.cta { padding-block: var(--band); text-align: center; background: var(--paper-2); }
.cta h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); }
.cta p { margin: 24px auto 40px; max-width: 540px; color: var(--soft); }
.letter { padding-block: clamp(72px, 8vw, 112px); text-align: center; }
.letter .wrap { display: grid; justify-items: center; }
.letter h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-top: 22px; }
.letter p { margin-top: 12px; color: var(--soft); }
.letter-form { margin-top: 36px; display: flex; align-items: stretch; gap: 0; width: 100%; max-width: 520px; border-bottom: 1px solid var(--ink); }
.letter-form input[type=email] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 2px; }
.letter-form input[type=email]:focus { box-shadow: none; }
.letter-form .btn { background: transparent; color: var(--ink); border: 0; padding: 14px 4px 14px 20px; }
.letter-form .btn:hover { color: var(--rose); }
.form-note { margin-top: 18px; font-size: 14px; color: var(--rose); }
/* (the letter box's first name beside the address, under one rule; on a phone each on its own line, the button below) */
.letter-form input[name=firstName] { flex: 0 1 34%; min-width: 0; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 14px 12px 14px 2px; margin-right: 14px; }
.letter-form input[name=firstName]:focus { box-shadow: none; }
.letter .letter-consent { margin-top: 16px; max-width: 520px; font-size: 12.5px; line-height: 1.55; }
@media (max-width: 560px) {
  .letter-form { flex-wrap: wrap; border-bottom: 0; }
  .letter-form input[name=firstName], .letter-form input[type=email] { flex: 1 1 100%; border: 0; border-bottom: 1px solid var(--rg, var(--ink)); margin-right: 0; padding: 14px 2px; }
  .letter-form .btn { flex: 1 1 100%; padding: 18px 4px 6px; }
}

/* Forms */
input, select, textarea { font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; width: 100%; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
input.prefilled { border-color: var(--rose); background-color: color-mix(in srgb, var(--rose) 7%, var(--card)); }
.req { margin-top: 48px; display: grid; gap: 22px; }
.req label { display: grid; gap: 10px; color: var(--soft); font-size: 10.5px; min-width: 0; }
.row2 { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.req .btn { margin-top: 12px; }
.req .fine { text-align: left; margin-top: 0; }
.req .btn:disabled { opacity: .6; cursor: progress; }
/* the thanks the script puts in the form's place, once the answer carries the reference (site.js) */
.req-done { margin-top: 48px; display: grid; gap: 18px; }
.req-done:focus { outline: none; }
.req-done .intro, .req-done .fine { margin: 0; text-align: left; }

/* About */
.about-grid { display: grid; gap: 48px 80px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; max-width: 1040px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; background: var(--paper); display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; }
.portrait img { width: 64px; height: auto; }
.portrait.photo { padding: 0; background: none; }
.portrait.photo img { width: 100%; height: 100%; object-fit: cover; }
.about-grid h2 { text-align: left; margin-bottom: 22px; }
.about-grid p:not(.draft-box) + p { margin-top: 14px; }
.about-grid p a { text-decoration: underline 1px var(--rg); text-underline-offset: .22em; }  /* (a hotel named in Nancy's words, to its page) */
.about-grid p a:hover { color: var(--rg-text); }
.perk-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
@media (max-width: 760px) { .perk-grid.three { grid-template-columns: 1fr; } }

/* Nancy's line and the footer */
.nancy { border-top: 1px solid var(--line); }
.nancy-row { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: clamp(56px, 6vw, 80px); }
.nancy-crown { width: 28px; height: auto; }
.nancy-row p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.4; color: var(--ink); max-width: 30em; }
.nancy-row strong { font-weight: 500; }
.foot { padding-block: clamp(64px, 7vw, 96px) 32px; background: var(--night); color: var(--on-night); font-size: 14.5px; }
.foot .soft { color: var(--on-night-soft); }
.foot-grid { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid > div { display: grid; gap: 10px; align-content: start; }
.foot-grid img { height: 58px; width: auto; margin-bottom: 10px; }
.foot-grid a { text-decoration: none; color: var(--on-night); }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-h { color: var(--on-night-soft); margin-bottom: 6px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(236 231 223 / .14); color: var(--on-night-soft); font-size: 12px; letter-spacing: .04em; }
.foot .draft-note { color: var(--on-night-soft); }

/* A phone: two photographs a row, the program marks smaller, the lists one column */
@media (max-width: 560px) {
  :root { --band: 72px; }
  body { font-size: 16px; }
  .hero { min-height: min(84vh, 720px); }
  .hero-body { padding-block: 96px 48px; }
  .actions { flex-direction: column; align-items: stretch; }
  .perk-grid { grid-template-columns: 1fr; }
  .perk { padding-block: 20px 24px; }
  .program-grid { margin-top: 44px; gap: 32px 14px; }
  .pcard { gap: 12px; }
  .pcard-name { font-size: 1.2rem; }
  .pcard-logo img { max-width: 70%; max-height: 44%; }
  .hotel-grid, .hotel-grid.five { margin-top: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .hotel-grid.five, .hotel-grid.three { margin-top: 0; }
  .hcard { gap: 12px; }
  .hcard-name { font-size: 1.15rem; }
  .hcard-place { font-size: 9.5px; letter-spacing: .14em; }
  .sub { margin: 56px 0 22px; }
  .ask { padding: 28px 22px; }
  .facts { gap: 16px 36px; }
}


/* ---- Movement and the rose-gold details ------------------------------------------------------------------------------ */
main { overflow-x: clip; }  /* (a rail that runs to the window's edge never makes the page scroll sideways) */

/* overlap: a photograph off the grid with the words laid over its edge */
.statement.overlap .statement-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; justify-items: stretch; }
.statement-photo { grid-column: 1 / 8; grid-row: 1; margin: 0; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--paper-2); }
.statement-photo img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.statement.overlap .statement-text { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 3; justify-items: start; text-align: left;
  background: var(--paper); padding: clamp(32px, 4.4vw, 72px); }
@media (max-width: 760px) {
  .statement.overlap .statement-grid { grid-template-columns: minmax(0, 1fr); }
  .statement-photo { grid-column: 1; aspect-ratio: 4 / 3.4; }
  .statement.overlap .statement-text { grid-column: 1; grid-row: 2; margin: -72px 18px 0; padding: 32px 26px; }
}

/* rail: hotels in a sideways row that runs to the window's edge, with arrows and a line that shows how far along it is */
.rail-wrap { margin-top: 64px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 3.35); gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-right: calc(50% - 50vw); padding-right: 24px; }
.rail::-webkit-scrollbar { display: none; }
.rail .hcard { scroll-snap-align: start; }
.rail:focus-visible { outline-offset: 8px; }
.rail-foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; }
.rail-progress { position: relative; flex: 1; max-width: 440px; height: 1px; background: var(--line); overflow: hidden; }
.rail-progress span { position: absolute; left: 0; top: 0; height: 1px; width: 30%; background: var(--rg); transition: transform .2s linear; }
.rail-nav { display: flex; gap: 10px; }
.rail-btn { width: 54px; height: 54px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.rail-btn:hover:not(:disabled) { border-color: var(--rg); color: var(--rg-text); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn[data-step="-1"] svg { transform: rotate(180deg); }
@media (max-width: 760px) { .rail { grid-auto-columns: 74%; gap: 14px; } .rail-wrap { margin-top: 44px; } .rail-btn { width: 46px; height: 46px; } }

/* numerals: a large rose-gold number beside each program's name */
.pcard-n { display: none; }
.pcard.numbered { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
.pcard.numbered .pcard-img { grid-column: 1 / -1; }
.pcard.numbered .pcard-n { display: block; grid-row: 2; grid-column: 1; font-family: var(--serif); font-weight: 300; font-size: 3rem; line-height: .82;
  background: var(--foil-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.pcard.numbered .pcard-body { grid-row: 2; grid-column: 2; }

/* reveal: what comes into view settles in (site.js marks only what starts below the fold) */
html[data-reveal] [data-reveal] { transition: opacity 1.1s cubic-bezier(.2, .6, .2, 1), transform 1.1s cubic-bezier(.2, .6, .2, 1), clip-path 1.4s cubic-bezier(.2, .6, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms); }
html[data-reveal] .pre { opacity: 0; transform: translateY(28px); }
html[data-reveal] .pre[data-reveal="photo"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }


/* ---- Look A: the rose-gold details ------------------------------------------------------------------------------------- */
/* The logo's four-pointed star (each side a quarter circle centred on the corner between two tips), in rose-gold and, for
   labels on a photograph, in the crown's light */
:root {
  --star-rg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23cf8b82' d='M0-5a5 5 0 0 0 5 5a5 5 0 0 0-5 5a5 5 0 0 0-5-5a5 5 0 0 0 5-5z'/%3E%3C/svg%3E");
  --star-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23eeaea5' d='M0-5a5 5 0 0 0 5 5a5 5 0 0 0-5 5a5 5 0 0 0-5-5a5 5 0 0 0 5-5z'/%3E%3C/svg%3E");
}

/* labels: a rose-gold hairline ending in the star (centred labels get one either side, facing in) */
.eyebrow { color: var(--rg-text); display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; flex: none; width: 48px; height: 9px;
  background: var(--star-rg) right center / 9px 9px no-repeat, linear-gradient(var(--rg), var(--rg)) left center / 36px 1px no-repeat; }
.band > .wrap > [data-reveal] > .eyebrow, .band > .wrap > .eyebrow { justify-content: center; }
.band > .wrap > [data-reveal] > .eyebrow::after, .band > .wrap > .eyebrow::after { content: ""; flex: none; width: 48px; height: 9px;
  background: var(--star-rg) left center / 9px 9px no-repeat, linear-gradient(var(--rg), var(--rg)) right center / 36px 1px no-repeat; }
.hero .eyebrow { color: #f4dcd6; }
.hero .eyebrow::before { background-image: var(--star-light), linear-gradient(#eeaea5, #eeaea5); }
.split .eyebrow, .wrap.narrow .eyebrow { justify-content: flex-start; }
/* (the heading beside the list reads from the left, like its fine print: the centred band rule had won over it) */
.band > .split > [data-reveal] > h2, .band > .split > [data-reveal] > .eyebrow { text-align: left; justify-content: flex-start; }
.band > .split > [data-reveal] > .eyebrow::after { content: none; }
.wrap.narrow .eyebrow::after { content: none; }

/* the rules between things are rose-gold hairlines; the benefits' rules each begin at a star */
.perk, .steps li, .benefits li, .facts { border-color: var(--rule); }
.perk, .benefits li { position: relative; }
.perk::before, .benefits li::before { content: ""; position: absolute; top: -4.5px; left: 0; width: 8px; height: 8px; background: var(--star-rg) center / contain no-repeat; }
.benefits li { padding-left: 2px; }
.top { border-bottom-color: var(--rule); }
.nav a:hover, .nav a.ask-link { border-color: var(--rg); }
.link { border-bottom-color: var(--rg); }
.link:hover { color: var(--rg-text); border-color: var(--rg-text); }
.crumb { color: var(--rg-text); }

/* buttons: ink, with a rose-gold foil wash under the pointer */
.btn:hover { background: var(--foil-btn); border-color: var(--rg); color: #1d1b19; }
.btn.line:hover { background: var(--foil-btn); border-color: var(--rg); color: #1d1b19; }
.btn.light:hover, .btn.line.light:hover { background: var(--foil-btn); border-color: #eeaea5; color: #1d1b19; }
.letter-form .btn:hover { background: transparent; color: var(--rg-text); }
.letter-form { border-bottom-color: var(--rg); }

/* the opening photograph drifts a little (site.js); its words sit low on the left */
.hero { min-height: min(90vh, 900px); }
.hero h1 em { color: #f4dcd6; }

/* the opening words laid over the edge of a photograph */
.statement { padding-block: clamp(80px, 10vw, 152px) clamp(48px, 6vw, 88px); }
.statement.overlap .statement-text { gap: 28px; box-shadow: 0 0 0 1px var(--rule) inset; }
.statement.overlap .statement-text::after { content: ""; position: absolute; left: clamp(32px, 4.4vw, 72px); bottom: 0; width: 72px; height: 2px; background: var(--foil); }
.statement.overlap .lead { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.15rem); }

/* the hotels in a rail */
.featured .rail .hcard-img { aspect-ratio: 4 / 5; }
.featured .rail .hcard-name { font-size: 1.6rem; }

/* steps and programs: rose-gold numerals */
.step-n { background: var(--foil-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 3.6rem; padding-right: .1em; }
.pcard.numbered .pcard-n { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); font-style: italic; }
.pcard-count { color: var(--rg-text); }
@media (max-width: 560px) {
  .pcard.numbered .pcard-n { grid-column: 1 / -1; font-size: 2rem; }
  .pcard.numbered .pcard-body { grid-row: 3; grid-column: 1 / -1; }
}

/* hotel page: the request card wears a rose-gold edge */
.ask { border-top: 2px solid var(--rg); }
.with-logo { opacity: .5; }

/* the closing band and footer: a rose-gold line where the dark begins */
.cta { background: var(--paper-2); border-top: 1px solid var(--rule); }
.foot { border-top: 2px solid var(--rg); }
.nancy { border-top-color: var(--rule); }
.form-note { color: var(--rg-text); }
input.prefilled { border-color: var(--rg); }

/* ---- The star map ------------------------------------------------------------------------------------------------------
   The world in the logo's star (static/site/starmap-land.svg, laid on as a mask so it takes the page's colours). Each town
   with hotels to show lights the land's own star nearest it (pc_site.Site.starmap, one town to a star): the same star in
   the same place, deeper rose-gold, a touch larger, glowing softly and twinkling slowly. Sizes follow the land's stars
   (--lit, in the frame's width: a land star is 0.6% of it, a lit one 1.05%). The land is lit from west to east as the map
   comes into view, then its stars in the same sweep; pointing at one (or a tap, on a phone) opens its box: the place in
   small capitals, its country in the serif, and the hotels, each its page's link. On the home page's map, a few places
   are named on the map itself at wide widths. No words explain it. */
.starmap-land, .starfield { display: block; -webkit-mask: var(--land) 0 0 / 100% 100% no-repeat; mask: var(--land) 0 0 / 100% 100% no-repeat; }
.starmap { margin-top: clamp(40px, 5vw, 64px); }
.sub + .starmap { max-width: 920px; margin: clamp(8px, 2vw, 24px) auto clamp(36px, 4.5vw, 56px); }  /* (a program's few hotels: a smaller map) */
.starmap-frame { position: relative; aspect-ratio: 1500 / 652.1; max-width: 100%; container-type: inline-size; --lit: max(4px, 1.05cqw); }
.starmap-land { position: absolute; inset: 0; background: linear-gradient(90deg, var(--land-ink) 0 44%, transparent 56%) 0 0 / 240% 100% no-repeat;
  transition: background-position 2.4s cubic-bezier(.3, .55, .2, 1); }
.star { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(500ms + var(--k) * 18ms); }  /* (--k: how far east, 0 to 100: the stars light in the land's own sweep) */
.star::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--lit) * 2.8); height: calc(var(--lit) * 2.8);
  margin: calc(var(--lit) * -1.4) 0 0 calc(var(--lit) * -1.4); border-radius: 50%; background: radial-gradient(closest-side, var(--star-glow), transparent); pointer-events: none; }
.star i { position: relative; width: var(--lit); height: var(--lit); background: var(--star-ink); -webkit-mask: var(--star-rg) center / contain no-repeat; mask: var(--star-rg) center / contain no-repeat;
  animation: pc-twinkle 7s ease-in-out var(--d, 0s) infinite; transition: transform .35s; }
/* (with site.js, .near, one star is open at a time, .is-on: the one a mouse is nearest, a keyboard is on or a finger
   chose; without it, the one under the pointer or the keyboard) */
.starmap:not(.near) .star:hover, .starmap:not(.near) .star:focus-visible, .starmap:not(.near) .star:focus-within, .star.is-on { z-index: 4; }
.starmap:not(.near) .star:hover i, .star:focus-visible i, .starmap:not(.near) .star:focus-within i, .star.is-on i { animation-play-state: paused; transform: scale(1.4); opacity: 1; }
.starmap.rest .star i { animation-play-state: paused; }  /* (site.js: off screen or in a hidden tab, the map's stars rest) */
.star:focus-visible, .star button:focus-visible { outline: none; }
.star:focus-visible::before, .star.many:has(button:focus-visible)::before { box-shadow: 0 0 0 1px var(--rg); }
.star button { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
/* the box: above the star (below it near the top edge; from its side near the left or right edge). Its widest is a share of
   the map's own width (cqw: the frame is a size container), the same share pc_site.STARMAP_BOX opens it toward the middle
   by, so no box runs past the map at any width; a long list (.long: more than six names) sits in two columns */
.star-list { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translate(-50%, 6px); width: max-content; min-width: min(200px, 28cqw); max-width: min(300px, 40cqw);
  padding: 12px 18px 14px; text-align: left; background: var(--paper); border: 1px solid var(--rule); border-top: 1px solid var(--rg);
  box-shadow: 0 22px 44px -30px rgb(var(--scrim) / .55); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, transform .3s, visibility 0s .3s; }
.star.long .star-list { max-width: min(560px, 64cqw); }
.star.long .star-list ul { display: block; columns: 2; column-gap: 26px; }
.star.long .star-list li { break-inside: avoid; margin-bottom: 5px; }
.star-list b { display: block; font-family: var(--sans); font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--rg-text); text-wrap: balance; }  /* (a long title wraps inside its box: QA, the Los Angeles title) */
.star-list small { display: block; margin-top: 1px; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.25; color: var(--soft); }
.star-list ul { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.star-list li { position: relative; padding-left: 15px; }
.star-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--star-rg) center / contain no-repeat; }
.star-list a, .star-list li span, .star-one { display: block; font-family: var(--serif); font-size: 1.1rem; line-height: 1.25; color: var(--ink); text-decoration: none; text-wrap: pretty; }
.star-one { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.star-list a { text-decoration: underline 1px var(--rg); text-underline-offset: .22em; }  /* (a hotel with its page) */
.star-list a:hover, .star-list a:focus-visible { color: var(--rg-text); outline: none; }
.starmap:not(.near) .star:hover .star-list, .starmap:not(.near) .star:focus-visible .star-list, .starmap:not(.near) .star:focus-within .star-list, .star.is-on .star-list {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s; }
.starmap:not(.near) .star.many:hover .star-list, .starmap:not(.near) .star.many:focus-within .star-list, .star.many.is-on .star-list { pointer-events: auto; }
.star.at-l .star-list { left: -6px; transform: translate(0, 6px); }
.star.at-r .star-list { left: auto; right: -6px; transform: translate(0, 6px); }
.star.at-b .star-list { bottom: auto; top: calc(100% + 2px); }
.starmap:not(.near) .star.at-l:hover .star-list, .starmap:not(.near) .star.at-l:focus-visible .star-list, .starmap:not(.near) .star.at-l:focus-within .star-list, .star.at-l.is-on .star-list,
.starmap:not(.near) .star.at-r:hover .star-list, .starmap:not(.near) .star.at-r:focus-visible .star-list, .starmap:not(.near) .star.at-r:focus-within .star-list, .star.at-r.is-on .star-list { transform: none; }
/* (with site.js the box sits on whichever side of its star covers the fewest other stars, data-at: it comes in from its
   star a few pixels, and its links take the pointer while it is open) */
.starmap.placed .star-list[data-at] { bottom: auto; right: auto; transform: translate(0, 5px); }
.starmap.placed .star-list[data-at="below"] { transform: translate(0, -5px); }
.starmap.placed .star-list[data-at="right"] { transform: translate(-5px, 0); }
.starmap.placed .star-list[data-at="left"] { transform: translate(5px, 0); }
.starmap.placed .star.is-on .star-list[data-at] { transform: none; }
@container (max-width: 1000px) {  /* (a narrower map: a tighter box, so it hides fewer of the stars around its own) */
  .star-list { padding: 10px 14px 11px; }
  .star-list ul { margin-top: 8px; padding-top: 8px; gap: 3px; }
  .star-list a, .star-list li span, .star-one { font-size: 1rem; }
  .star-one { margin-top: 8px; padding-top: 8px; }
}
.starmap-lead { position: absolute; z-index: 3; height: 1px; margin-top: -.5px; transform-origin: 0 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(207 139 130 / .35), var(--rg)); transition: opacity .3s; }
.starmap-lead.on { opacity: 1; transition: opacity .3s .08s; }
@media (hover: none) { .starmap-lead { display: none; } }
@keyframes pc-twinkle { 0%, 100% { opacity: .7; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
/* a few places named on the world's map itself, at widths with room for them, each on its side of open sea (r, l, or b:
   below), with a halo of the page behind it so a land star beneath never crosses a letter */
.starmap-mark { position: absolute; left: var(--x); top: var(--y); transform: translate(calc(var(--lit) * .8 + 5px), -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--soft); opacity: .85;
  text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper); transition: opacity 1s 1.6s; }
.starmap-mark.l { transform: translate(calc(-100% - var(--lit) * .8 - 5px), -50%); }
.starmap-mark.b { transform: translate(-50%, calc(var(--lit) * .8 + 4px)); }
@media (max-width: 1099px) { .starmap-mark { display: none; } }
/* the note under the map: no words until a star is chosen (no caption, no hint: people find the stars themselves); a
   screen reader hears the chosen star, and on a touch screen, where no box opens, the star's hotels show here */
.starmap-note { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--soft); }
.starmap-note:empty { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) { .starmap-note { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); } }
.starmap-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rg); }
.starmap-note b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.starmap-note b, .starmap-note span { margin-right: 14px; }
.starmap-note span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.starmap-note a { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.starmap-note b { display: block; margin: 0 0 8px; }
.starmap-note.many a, .starmap-note.many em { display: inline-block; margin: 0 9px 6px; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.starmap-note.many em { font-style: normal; color: var(--ink); }
/* (until the map comes into view, site.js dims it: the land and stars then light up as it arrives) */
.starmap.dim .starmap-land { background-position: 100% 0; }
.starmap.dim .star { opacity: 0; transform: scale(.4); }
.starmap.dim .starmap-mark { opacity: 0; }
@media (max-width: 760px) {
  .star { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .starmap-frame { --lit: max(3.4px, 1.05cqw); }
  .starmap.world .star::before { width: calc(var(--lit) * 2.2); height: calc(var(--lit) * 2.2); margin: calc(var(--lit) * -1.1) 0 0 calc(var(--lit) * -1.1); }
}
@media (hover: none) {  /* (on a phone the names show under the map, see site.js; the chosen star wears a ring) */
  .star-list { display: none; }
  .star.is-on::before { box-shadow: 0 0 0 1px var(--rg); }
}
/* the arrows either side of the note on a touch screen: the star before and after the chosen one, by region, west to east */
.starmap-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start; column-gap: 4px; }
.starmap-pick .starmap-note { grid-column: 2; }
.starmap-step { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--rg-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.starmap-step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.starmap-pick:not(.on) .starmap-step { visibility: hidden; }
@media (hover: hover) { .starmap-step { display: none; } .starmap-pick { display: block; } }

/* the same land, faint: over the opening photograph's (or film's) sky, at the head of the request, and across the footer.
   The field is the land's mask; its ink (.starfield-ink) is the faint stars, and site.js lays light over the ink inside the
   same mask, so only stars ever brighten: on the opening, a soft light where the pointer is (with the scroll, on a touch
   screen) and the odd star there twinkling (.starfield-spark, one land star's square); in the footer, now and then one star
   somewhere brightening and fading. Opacity and transforms only; nothing at all for reduced motion. */
.starfield { position: absolute; pointer-events: none; aspect-ratio: 1500 / 652.1; overflow: hidden; }
.starfield-ink { position: absolute; inset: 0; background: var(--field-ink); opacity: var(--field-o); }
.hero-field { top: 5%; right: -4%; width: min(74%, 1180px); --field-ink: #f4dcd6; --field-o: .16; }  /* (faint over the film, so the light finds it: PC Master, 2026-10-21) */
.asking { position: relative; overflow: hidden; isolation: isolate; }
.asking > .wrap { position: relative; }
.ask-field { z-index: -1; top: 8px; left: 50%; width: max(1100px, 100%); transform: translateX(-50%); --field-ink: var(--land-ink); --field-o: .55; }
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot-field { z-index: -1; top: -10%; left: 50%; width: max(1200px, 112%); transform: translateX(-50%); --field-ink: var(--rg-night); --field-o: .12; }
@media (max-width: 760px) {
  .hero-field { top: 7%; right: -55%; width: 190%; --field-o: .16; }
  .ask-field { width: 260%; top: 0; }
  .foot-field { width: 300%; top: 2%; }
}
.starfield-glow { position: absolute; left: 0; top: 0; width: var(--glow, 360px); height: var(--glow, 360px); margin: calc(var(--glow, 360px) / -2) 0 0 calc(var(--glow, 360px) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, rgb(255 246 242 / .62), rgb(255 238 232 / .26) 45%, rgb(255 238 232 / 0)); opacity: 0;
  transition: opacity .9s ease; will-change: transform, opacity; }
.starfield-glow.on { opacity: 1; transition-duration: .5s; }
.starfield-spark { position: absolute; width: .6667%; height: 1.5335%; background: #fff7f3; opacity: 0; will-change: opacity; }
.foot-field .starfield-spark { background: #f4d3cc; animation: field-spark var(--t, 8s) ease-in-out var(--wait, 0s) infinite; }
.foot-field.rest .starfield-spark { animation-play-state: paused; }
@keyframes field-spark {  /* (one star brightening, a breath of shimmer, then fading; dark the rest of the turn, while it moves) */
  0%, 100% { opacity: 0; }
  7% { opacity: .55; }
  10% { opacity: .38; }
  14% { opacity: .62; }
  26% { opacity: 0; }
}

/* a hotel's page: its corner of the world, its star lit */
.locator { position: relative; margin: 0 0 26px; width: min(100%, 440px); aspect-ratio: 1500 / 652.1; border-block: 1px solid var(--rule); overflow: hidden;
  container-type: inline-size; --lit: calc(var(--z, 3.2) * 1.05cqw); }  /* (its land star, enlarged --z times, and a touch larger) */
.locator .starmap-land { position: absolute; inset: 0; background: var(--land-ink); opacity: .8; -webkit-mask-size: var(--zoom) auto; mask-size: var(--zoom) auto;
  -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my); }
.locator-star { position: absolute; left: var(--sx); top: var(--sy); width: var(--lit); height: var(--lit); margin: calc(var(--lit) / -2) 0 0 calc(var(--lit) / -2); background: var(--star-ink);
  -webkit-mask: var(--star-rg) center / contain no-repeat; mask: var(--star-rg) center / contain no-repeat; animation: pc-twinkle 7s ease-in-out infinite; }
.locator::after { content: ""; position: absolute; left: var(--sx); top: var(--sy); width: calc(var(--lit) * 2.6); height: calc(var(--lit) * 2.6);
  margin: calc(var(--lit) * -1.3) 0 0 calc(var(--lit) * -1.3); border-radius: 50%;
  background: radial-gradient(closest-side, var(--star-glow), transparent); z-index: -1; }
.locator { isolation: isolate; }

/* ---- A hotel's full page (templates/site/_full.html) ------------------------------------------------------------------
   Read like a letter from people who've been: each first-hand part under its source, set in the serif, in a folio of
   hairlines; the guests' words large; the benefits and the request as on every hotel page. */
.hintro { margin-top: 26px; max-width: 34ch; font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height: 1.4; color: var(--ink); font-weight: 400; }
.fp-nav { border-block: 1px solid var(--line); }
.fp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; padding-block: 16px; }
.fp-nav li { display: flex; align-items: center; gap: 10px; }
.fp-nav li::before { content: ""; width: 7px; height: 7px; background: var(--star-rg) center / contain no-repeat; }
.fp-nav a { font-size: 11px; font-weight: 500; letter-spacing: .16em; white-space: nowrap; text-transform: uppercase; color: var(--soft); text-decoration: none; padding-block: 6px; }
.fp-nav a:hover { color: var(--ink); }
.fp { padding-block: var(--band); scroll-margin-top: 80px; }
.fp [id], .fp-col { scroll-margin-top: 96px; }
.fp-head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 64px); }
.fp-head .eyebrow { justify-content: center; }
.fp-head.left { text-align: left; }
.fp-head .intro { margin-top: 20px; }
.fp-source { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rg-text); line-height: 1.5; }
.fp-source::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--star-rg) center / contain no-repeat; }
.fp-body p, .fp-said p:not(.fp-source), .fp-plan p { font-family: var(--serif); font-size: clamp(1.18rem, 1.08rem + .3vw, 1.32rem); line-height: 1.6; color: var(--ink); font-weight: 400; }
.fp-body { display: grid; gap: 18px; max-width: 64ch; }
.fp-part { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); border-top: 1px solid var(--rule); padding-block: clamp(32px, 4vw, 48px); }
.fp-part:last-child { border-bottom: 1px solid var(--rule); }
.fp-side { display: grid; gap: 12px; align-content: start; position: sticky; top: 104px; }
.fp-part-team .fp-body p:first-child { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.45; }
.fp-lines { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 48px; }
.fp-lines div { border-top: 1px solid var(--line); padding-block: 16px 4px; }
.fp-lines dt { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.fp-lines dd { margin: 8px 0 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--ink); }
.fp-photos { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-photos.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-photos.n1 { grid-template-columns: minmax(0, 1fr); }
.fp-photos figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); max-width: 100%; }
.fp-photos.n1 figure { aspect-ratio: 21 / 9; }
.fp-photos img { width: 100%; height: 100%; object-fit: cover; }
.fp-pair { padding-block: var(--band); }
.fp-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(48px, 7vw, 112px); }
.fp-col { display: grid; gap: 0; align-content: start; }
.fp-col h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: 28px; }
.fp-said { display: grid; gap: 12px; border-top: 1px solid var(--rule); padding-block: 22px 26px; }
.fp-guests { background: var(--paper-2); }
/* (with a photo of the hotel: the guests' words in the crown's light, on the photograph darkened, the same in both themes) */
.fp-guests.over { position: relative; overflow: hidden; isolation: isolate; background: #1a1714; --rule: rgb(238 174 165 / .42); }
.fp-guests-photo { position: absolute; inset: -10% 0; z-index: -1; }
.fp-guests-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.fp-guests-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(18 15 13 / .84), rgb(18 15 13 / .76) 45%, rgb(18 15 13 / .86)); }
.fp-guests.over h2, .fp-guests.over .fp-quote blockquote p { color: #f4f2ee; }
.fp-guests.over .eyebrow, .fp-guests.over .as-if { color: #f4dcd6; }
.fp-guests.over .eyebrow::before { background-image: var(--star-light), linear-gradient(#eeaea5, #eeaea5); }
.fp-guests.over .fp-quote::before { background-image: var(--star-light); }
.fp-guests.over .fp-quote figcaption { color: rgb(244 242 238 / .74); }
.fp-guests.over .as-if { border-color: rgb(238 174 165 / .6); }
.fp-quotes { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.fp-quotes.n1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; text-align: center; }
.fp-quotes.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
.fp-quote { margin: 0; display: grid; gap: 22px; padding-top: 28px; border-top: 1px solid var(--rule); position: relative; }
.fp-quote::before { content: ""; position: absolute; top: -4.5px; left: 0; width: 9px; height: 9px; background: var(--star-rg) center / contain no-repeat; }
.fp-quotes.n1 .fp-quote::before { left: calc(50% - 4.5px); }
.fp-quote blockquote { margin: 0; }
.fp-quote blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height: 1.4; color: var(--ink); }
.fp-quote blockquote p::before { content: "\201C"; }
.fp-quote blockquote p::after { content: "\201D"; }
.fp-quote figcaption { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.fp-quotes.n1 .fp-quote figcaption { justify-content: center; }
.as-if { color: var(--rg-text); border: 1px solid var(--rg); padding: 3px 8px; letter-spacing: .14em; }

/* ---- What you get with us (templates/site/_with.html; Ricky, 2026-10-20, H3: "it's all getting a bit long", "a side
   swipe"): one section, the heading beside a card per program instead of a band for each. Two programs or more sit in a
   row that swipes sideways, a tab for each above it (links to the cards: they work with no script); one program, a single
   card. Each card is the request card's cousin (the page's lightest paper, a hairline, the crown's cut on its corner). A
   plain page sets it on the second paper, between the hotel's header and "You might also like"; a full page, on the first,
   after the guests' words on the second. */
.with-band { background: var(--paper-2); --behind: var(--paper-2); }
.fp-benefits { --behind: var(--paper); }
.with-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
.wrap.with-grid > .with-head > h2, .wrap.with-grid > .with-head > .eyebrow { text-align: left; justify-content: flex-start; }
.wrap.with-grid > .with-head > .eyebrow::after { content: none; }
.with-head h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); text-wrap: pretty; }  /* ("What you get / with us": not "What you / get with us", nor a lone "us") */
.with-head .intro { margin-top: 18px; }
@media (min-width: 1000px) {
  .with-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
  .with-head { position: sticky; top: 112px; padding-top: 6px; }
}
.with-set { display: grid; min-width: 0; }
.with-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.with-tab { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); transition: color .3s; }
.with-tab:hover, .with-tab[aria-current] { color: var(--ink); }
.with-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rg);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.with-tab[aria-current]::after { transform: none; }
.with-n { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--rg-text); }
.with-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; min-width: 0; }
.many .with-track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.many .with-track::-webkit-scrollbar { display: none; }
.with-track:focus-visible { outline: 1px solid var(--rg); outline-offset: 6px; }
.with-card { position: relative; scroll-snap-align: start; scroll-margin-top: 112px; min-width: 0; background: var(--card);
  border: 1px solid var(--line); padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(36px, 4vw, 52px); }
.with-card .corner { --corner: 40px; --corner-line: var(--line); }
.with-top { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 14px 28px; }
.with-h { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.with-card .with-logo { max-height: 34px; max-width: 150px; }
.with-card .benefits { margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: none; gap: 0 clamp(28px, 3.4vw, 48px); }
.with-card .benefits li { padding-block: 16px; font-size: 16px; line-height: 1.45; }
@media (max-width: 999px) {
  .with-head { max-width: 620px; }
}
@media (max-width: 720px) {
  /* (a phone: the next card shows at the edge, so the row reads as one to swipe, and the row runs to the screen's edges) */
  .many .with-track { grid-auto-columns: 86%; gap: 12px; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  /* (the tabs one above the other, each the row's width: a program's name is often too long to share a line) */
  .with-tabs { display: grid; border-bottom: 0; margin-bottom: 18px; }
  .with-tab { border-bottom: 1px solid var(--line); }
  .with-card .benefits li { padding-block: 14px; }
}
.fp-plan { text-align: center; }
.fp-plan .wrap { display: grid; justify-items: center; gap: 22px; }
.fp-plan h2 { margin-bottom: 6px; }
.fp-plan p { max-width: 52ch; color: var(--body); }
.fp-plan .btn { margin-top: 18px; }
@media (max-width: 860px) {
  .fp-part { grid-template-columns: minmax(0, 1fr); }
  .fp-side { position: static; }
  .fp-pair-grid, .fp-quotes, .fp-quotes.n2 { grid-template-columns: minmax(0, 1fr); }
  .fp-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fp-photos figure:first-child:nth-last-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .fp-nav ul { flex-wrap: nowrap; justify-content: flex-start; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-right: 48px;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }  /* (one row to swipe, fading where it goes on) */
  .fp-nav ul::-webkit-scrollbar { display: none; }
}

/* A visitor who asks for less motion gets none: no drifting, sliding, settling, twinkling or zooming */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .pcard:hover .pcard-img > img, .hcard:hover .hcard-img img, .ncard:hover .ncard-img img { transform: none; }
  .star i, .locator-star { transform: none; opacity: 1; }
  .starfield-glow, .starfield-spark { display: none; }  /* (the star fields' light: site.js makes none, and none shows) */
}

/* ---- the other programs, at the foot of a program's page (Ricky, 2026-10-20: "centered and made more elegant"): centred
   rows of small cards, each a photograph with the program's mark, its name beneath in the serif; a rose-gold hairline draws
   in under the photograph to the pointer. Seven to a row, five on a tablet, three on a phone; a short last row is centred. */
.others { text-align: center; }
.others h2 { margin-top: 18px; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.75rem); }
.others-grid { list-style: none; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; max-width: 1180px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 20px; }
.others-grid > li { flex: 0 0 calc((100% - 6 * 20px) / 7); min-width: 0; }
.ocard { display: grid; gap: 14px; justify-items: center; text-decoration: none; }
.ocard-img { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #2b2724; }
.ocard-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.ocard-img::after { content: ""; position: absolute; inset: 0; background: rgb(16 13 11 / .46); transition: background .6s; }
.ocard-img::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; background: var(--foil);
  transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.ocard:hover .ocard-img > img { transform: scale(1.05); }
.ocard:hover .ocard-img::after { background: rgb(16 13 11 / .3); }
.ocard:hover .ocard-img::before, .ocard:focus-visible .ocard-img::before { transform: scaleX(1); }
.ocard-logo { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.ocard-logo img { max-width: 72%; max-height: 24%; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.ocard-name { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; max-width: 100%; }
.ocard:hover .ocard-name { color: var(--rg-text); }
@media (max-width: 1100px) { .others-grid > li { flex-basis: calc((100% - 4 * 20px) / 5); } }
@media (max-width: 640px) {
  .others-grid { gap: 30px 14px; }
  .others-grid > li { flex-basis: calc((100% - 2 * 14px) / 3); }
  .ocard { gap: 10px; }
  .ocard-name { font-size: .98rem; }
  .ocard-logo img { max-width: 76%; max-height: 28%; }
}
@media (prefers-reduced-motion: reduce) { .ocard:hover .ocard-img > img { transform: none; } }  /* (and no transition: the rule above) */


/* ---- "…and more" (Nancy, 2026-10-20): the programs we book through besides those with a page of their own, as a card with
   no photograph: on the paper inside a rose-gold hairline, the names in the serif, a star, then the cruise lines in italic.
   The same size as a program card (4:3), and taller only if its names ever need it: the box's shape comes from a spacer in
   the same grid cell as the words, never from clipping them. */
.more-box { display: grid; aspect-ratio: auto; overflow: visible; background: var(--card); box-shadow: 0 0 0 1px var(--rule) inset;
  text-align: center; transition: box-shadow .6s; }
.pcard-img.more-box::after { content: ""; position: static; inset: auto; background: none; grid-area: 1 / 1; padding-top: 75%; }
.more-in { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(14px, 2.2vw, 30px) clamp(12px, 2vw, 26px); }
.more-names { display: flex; flex-direction: column; align-items: center; gap: .3em; font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem); line-height: 1.2; text-wrap: balance; }
.more-cruise { font-family: var(--serif); font-style: italic; color: var(--rg-text); font-size: clamp(.98rem, .85rem + .3vw, 1.15rem); line-height: 1.2; }
.more-cruise::before { content: ""; display: block; width: 84px; height: 9px; margin: 0 auto clamp(8px, 1vw, 14px);
  background: var(--star-rg) center / 9px 9px no-repeat, linear-gradient(var(--rg), var(--rg)) left center / 34px 1px no-repeat,
  linear-gradient(var(--rg), var(--rg)) right center / 34px 1px no-repeat; }
.pcard-more:hover .more-box, .pcard-more:focus-visible .more-box { box-shadow: 0 0 0 1px var(--rg) inset; }
.pcard.numbered .pcard-n.more-star { width: .42em; height: .42em; margin: .14em .12em 0; background: var(--star-rg) center / contain no-repeat; }
/* (on a phone the names run on, a rose-gold point between them, never starting a line) */
@media (max-width: 560px) {
  .more-in { padding: 9px 8px; gap: 6px; }
  .more-names { display: block; font-size: .8rem; line-height: 1.25; }
  .more-name:not(:last-child)::after { content: "\00a0· "; color: var(--rg); }
  .more-cruise { font-size: .76rem; }
  .more-cruise::before { width: 52px; height: 8px; background-size: 8px 8px, 20px 1px, 20px 1px; margin-bottom: 6px; }
  .pcard.numbered .pcard-n.more-star { height: .82em; margin: 0; background-position: left center; background-size: .42em .42em; }  /* (the numerals' height, so the names line up) */
}

/* ---- "New" (Nancy, 2026-10-20: the Danieli and Rosewood Amsterdam; pc_site.NEW_HOTELS) ---------------------------------
   A quiet mark, the logo's star and "New" in rose gold before the place: on a hotel's card, its page and the lists of more
   hotels. A new hotel leads its program's page, after the benefits, as one wide card. */
.new-mark { display: inline-flex; align-items: center; gap: .6em; margin-right: 1em; font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--rg-text); }
.new-mark::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--star-rg) center / contain no-repeat; }
.hcard-place .new-mark { font-size: inherit; letter-spacing: inherit; margin-right: .8em; }
.mh-country span.new-mark { font-size: 10px; color: var(--rg-text); margin-right: .8em; }
.hplace .new-mark { font-size: 11px; vertical-align: .1em; }
.new-grid { display: grid; gap: 48px; }
.ncard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; text-decoration: none; color: inherit; }
.ncard-img { aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--paper-2); }
.ncard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.ncard:hover .ncard-img img { transform: scale(1.03); }
.ncard-body { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.ncard-name { font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.7rem); line-height: 1.08; color: var(--ink); text-wrap: balance; }
.ncard-place { color: var(--soft); font-size: 15px; margin-top: -6px; }
.ncard-about { color: var(--soft); line-height: 1.7; max-width: 54ch; text-wrap: pretty; }
.ncard .link { margin-top: 4px; }
.ncard:hover .link { border-color: var(--rg-text); color: var(--rg-text); }
@media (max-width: 980px) {  /* (a tablet stacks it too: beside the photo, the lines ran twice its height) */
  .ncard { grid-template-columns: 1fr; gap: 24px; }
  .ncard-body { gap: 12px; }
  .ncard-about { font-size: 15px; }
}

/* ---- Recognition, on the About page (Nancy and Ricky, 2026-10-20: what "award-winning" rests on; pc_site.RECOGNITION):
   each hotel group in small rose-gold capitals over what it named us, in the serif, under a hairline with the logo's star */
.recog-grid { list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; max-width: 1080px; }
.recog-grid li { position: relative; display: grid; gap: 12px; align-content: start; justify-items: center; text-align: center; padding-top: 24px; border-top: 1px solid var(--rule); }
.recog-grid li::before { content: ""; position: absolute; top: -4.5px; left: calc(50% - 4px); width: 8px; height: 8px; background: var(--star-rg) center / contain no-repeat; }
.recog-who { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--rg-text); }
.recog-what { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.recog-note { margin-top: 2px; max-width: 28ch; font-size: 14.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }  /* (a line on what it means for a guest: C3) */
.recog-draft { max-width: 620px; margin: 40px auto 0; }
.recog-draft + .recog-draft { margin-top: 12px; }
@media (max-width: 980px) { .recog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 560px) {
  .recog-grid { gap: 36px 20px; margin-top: 44px; }
  .recog-who { font-size: 10.5px; letter-spacing: .18em; }
  .recog-what { font-size: 1.25rem; }
}

/* ---- The crown's cut: the site's second motif (Ricky, 2026-10-20 voice note, H6 and D1: "the diagonals of our crown",
   "the line that cuts directly across from the corner"; templates/site/_motif.html) ------------------------------------
   The four-pointed star stays the first motif. This one is the crown's two facets and the long cut between them, at the
   crown's own angles (measured from logos/crown.png): the cut rises at 36.3 degrees (tan .735) from the lower-left corner,
   and the gap between the facets is 3% of the crown's width. In rose gold or the page's own colour, faint, never over words,
   and still for a visitor who asks for less motion. */
:root { --cut-angle: -36.3deg; --facet-fill: rgb(207 139 130 / .075); --facet-line: rgb(179 107 99 / .4); --cut-gap: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --facet-fill: rgb(207 139 130 / .055); --facet-line: rgb(217 156 147 / .3); } }
:root[data-theme="dark"] { --facet-fill: rgb(207 139 130 / .055); --facet-line: rgb(217 156 147 / .3); }

/* the cut across a photograph: a gap of the page's colour from its lower-left corner, rising at the crown's angle; it draws
   across as the photograph arrives (the photograph is the positioned, clipped box it sits in) */
.cut { position: absolute; left: 0; bottom: calc(var(--cut-gap) / -2); z-index: 2; width: 200%; height: var(--cut-gap); pointer-events: none;
  background: var(--behind, var(--paper)); transform-origin: 0 50%; transform: rotate(var(--cut-angle)); transition: transform 1.6s cubic-bezier(.5, .1, .2, 1) .5s; }
html[data-reveal] .pre .cut, html[data-reveal] .pre.cut { transform: rotate(var(--cut-angle)) scaleX(0); }

/* a card's corner cut off along the crown's line, and the wedge beyond a hairline gap, in rose gold */
.corner { position: absolute; right: -1px; bottom: -1px; z-index: 1; width: var(--corner, 50px); height: calc(var(--corner, 50px) * .735); overflow: visible; pointer-events: none; }
.corner-off { fill: var(--behind, var(--paper)); }
.corner-edge { fill: none; stroke: var(--corner-line, var(--rule)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.corner-gem { fill: var(--rg); opacity: .85; }

/* the facets, large and faint behind a section; with site.js they drift a little as the page scrolls (--p, 0 to 1 as the
   section passes), the two sliding apart along their cut */
.facets { position: absolute; z-index: 0; pointer-events: none; overflow: visible; height: auto;
  transform: translate3d(0, calc((var(--p, .5) - .5) * var(--rise, -64px)), 0); }
.facets path { fill: var(--facet-fill); stroke: var(--facet-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: miter;
  transition: transform .2s linear; }
.facets .facet-l { transform: translate(calc((var(--p, .5) - .5) * -14px), calc((var(--p, .5) - .5) * 10.3px)); }
.facets .facet-w { transform: translate(calc((var(--p, .5) - .5) * 14px), calc((var(--p, .5) - .5) * -10.3px)); }
.facets .facet-star { transform: translate(0, calc((var(--p, .5) - .5) * -12px)); }  /* (the logo's star, rising a little above them) */

/* a pair of rose-gold hairlines at the cut's angle: the two edges of the crown's gap; drawn in from the lower-left as they
   come into view (data-reveal) */
.cut-rule { position: absolute; z-index: 0; width: var(--len, 220px); height: calc(var(--len, 220px) * .735); pointer-events: none; overflow: visible;
  clip-path: inset(-2px -2px -2px -2px); }
.cut-rule path { fill: none; stroke: var(--rg); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.cut-rule path + path { opacity: .32; }
html[data-reveal] .cut-rule[data-reveal] { transition: clip-path 2s cubic-bezier(.5, .1, .2, 1) .2s; }
html[data-reveal] .cut-rule.pre { opacity: 1; transform: none; clip-path: inset(-2px 100% -2px -2px); }

/* where the crown's cut is used: the home page's scroll (D1) and a hotel's page (H6) */
.statement-photo, .statement-text { position: relative; }
.statement.overlap .statement-text[data-lift] { translate: 0 var(--lift, 0px); }  /* (site.js: the card rides over the photograph,
   above the photograph's cut, z-index 3 against the cut's 2) */
.statement-text .corner { right: 0; bottom: 0; --corner: 46px; }
.perks, .cta, .fp-plan { position: relative; overflow: hidden; isolation: isolate; }
.perks > .wrap, .cta > .wrap, .fp-plan > .wrap { position: relative; z-index: 1; }
.perks-facets { left: max(-40px, calc(50% - 760px)); bottom: -90px; width: min(460px, 36vw); }
.cta-rule { left: 0; bottom: 0; --len: clamp(160px, 22vw, 320px); }
@media (max-width: 760px) { .perks-facets { left: auto; right: -12%; bottom: -118px; width: 58vw; } }  /* (in the band's foot, clear of the last perk) */
.ask .corner { --corner: 44px; }
.plan-facets { right: 4%; bottom: -150px; width: min(460px, 32vw); }
@media (max-width: 760px) { .plan-facets { right: -10%; bottom: -120px; width: 56vw; } }  /* (below the button) */
.plan-rule { left: 0; top: 0; --len: clamp(150px, 20vw, 300px); transform: translateY(-1px); }
.how, .fp-plan { position: relative; overflow: hidden; }
.how > .wrap { position: relative; z-index: 1; }
.how-rule { right: 0; top: 0; --len: clamp(150px, 20vw, 300px); }
.ask .corner { --corner-line: var(--line); }

/* ---- Fingers and eyes on a phone (Website QA's batch 1, Oct 21: 6 and 7) ------------------------------------------------
   Every link a finger is meant for takes a 44 px tap, by a hit box round it (::after, the same look) or by padding taken
   back by a negative margin; where links stand one under another (the footer's, a hotel's programs when they wrap) they
   sit a little further apart, so that no two of them overlap. On a phone the words people read are 16 px or more; the
   small letter-spaced capitals (labels, links, buttons) are 12.5 px, still capitals. The small lines under a hotel's or program's name are the serif's italic there, at 16 px, as a map box
   names a country; a form's and the facts' labels, plain at 16 px. A landscape phone counts as a phone. */
.nav a, .brand, .link, .starmap-note a { position: relative; }
.nav a::after, .brand::after, .link::after { content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 46px; transform: translateY(-50%); }
.brand::after { left: -2px; right: -2px; }
.letter-form .btn { min-height: 44px; }
@media (hover: none), (max-width: 560px) {
  .foot-grid a { padding-block: 8.5px; margin-block: -4.5px; }  /* (44 px each, a line under the other, never overlapping) */
  .crumb { padding-block: 11.5px; margin-block: -11.5px; }
  .crumb-row { row-gap: 24px; }
  .fp-nav a { position: relative; }
  .fp-nav ul { row-gap: 28px; }  /* (on a wide touch screen, where its links can wrap) */
  .fp-nav a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 46px; transform: translateY(-50%); }  /* (inside the row's own padding: it scrolls sideways, so it clips) */
  .mh-country a { position: relative; padding-block: 10.5px; margin-block: -10.5px; }  /* (over the town under it, which is its own) */
  .starmap-note:not(.many) a { display: inline-block; }
  .starmap-note:not(.many) a::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 46px; transform: translateY(-50%); }
}
@media (max-width: 560px), (hover: none) and (max-height: 500px) {
  .eyebrow, .foot-h, .sub, .crumb, .link, .btn, .nav a, .with-tab, .fp-nav a, .fp-source, .fp-quote figcaption, .mh-country h4,
  .new-mark, .mh-country span.new-mark, .hplace .new-mark, .recog-who, .fp-lines dt, .starmap-note span, .starmap-note a { font-size: 12.5px; }
  .nav a { letter-spacing: .16em; }
  .hcard-place, .pcard-count, .mh-country span { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.3; letter-spacing: 0; text-transform: none; }
  .hcard-place .new-mark { font-family: var(--sans); font-style: normal; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; }
  .mh-country span.new-mark { font-family: var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; }
  .facts dt, .req label { font-size: 16px; font-weight: 400; letter-spacing: .01em; text-transform: none; }
  .hplace, .perk p, .steps p, .ask p:not(.ask-h), .ncard-place, .ncard-about, .fine, .letter .letter-consent, .recog-note, .foot,
  .foot-legal { font-size: 16px; }
  .ocard-name { font-size: 1rem; }
  .hawards { font-size: 15px; }
}

/* A hotel card's bigger copy on a very wide screen (QA 9): the picture around it takes no box, so the photo fills the card
   as before. */
.hcard-img picture { display: contents; }

/* ---- The crown's facets never behind words (Website QA's batch 2, Oct 21: C) ------------------------------------------
   They show only where there are no words. On a wide screen, under the perks band's heading, low enough that the star's tip
   clears its last line even as they drift (up to 38 px above where they rest). Where the band's words stack (900 px and
   under), and under a hotel page's plan (760 and under), in the band's own foot, made taller for them, drifting a third as
   far. --fw is their width and --fh how much of them shows above the band's lower edge (the star, whole, and the facets'
   tips; the rest is under the edge). */
.perks-facets { --fw: min(460px, 36vw); --fh: 236px; width: var(--fw); bottom: calc(var(--fh) - var(--fw) * .894); }
@media (max-width: 900px) {
  .perks { padding-bottom: calc(var(--band) + 76px); }
  .perks-facets { left: auto; right: -9%; --fw: min(330px, 62vw); --fh: 132px; --rise: -24px; }
}
.plan-facets { --fw: min(460px, 32vw); --fh: min(216px, calc(var(--fw) * .894 - 150px)); width: var(--fw); bottom: calc(var(--fh) - var(--fw) * .894); }
@media (max-width: 760px) {
  .fp-plan { padding-bottom: calc(var(--band) + 76px); }
  .plan-facets { right: -9%; --fw: min(330px, 62vw); --fh: 132px; --rise: -24px; }
}

/* ---- A full page's more photos never stretched far past their own size (Website QA's batch 2, Oct 21: B) -------------
   --src is the width of the copy the strip shows (_full.html, Site.img_w): on a wide screen each photo's slot stops at
   about 1.15 times it, and the strip sits in the middle of the page like a framed photograph. A lone photo's slot is wider
   than the photo (21:9), so it fills by its width: 1.15 times. The 4:3 slots are taller than most photos (3:2), so they fill
   by their height and stop sooner, at 1.02 times the width. A phone's strip is as it was. */
@media (min-width: 861px) {
  .fp-photos { justify-content: center; grid-template-columns: repeat(3, minmax(0, calc(var(--src, 1800) * 1.02px))); }
  .fp-photos.n2 { grid-template-columns: repeat(2, minmax(0, calc(var(--src, 1800) * 1.02px))); }
  .fp-photos.n1 { grid-template-columns: minmax(0, calc(var(--src, 1800) * 1.15px)); }
}

/* ---- "Also here" under a chosen star where stars crowd (Website QA's batch 2, Oct 21: A; site.js) --------------------
   The other places within a fingertip of the chosen star, each a button set like the note's hotel names, a 44 px tap,
   in a line of their own under the note. */
.starmap-note .starmap-also { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 14px; margin: 14px 0 0; }
.starmap-also i { font-style: normal; margin-right: 4px; }
.starmap-also button { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; text-decoration: underline;
  text-decoration-color: var(--rg); text-decoration-thickness: 1px; text-underline-offset: 4px; }