/* NVS luxury direction: the shared language for the lux-* concept pages and the direction presentation.
   Four type sizes (display, heading, text, note). Night ground for the ice, dusk ground for the Namib, one signal red
   that belongs to the enquiry alone. No cards, no panels: space separates, a hairline marks a change. */
:root {
  --night: #08161F; --glacier: #EDF2F0; --ice: #C7D9D8; --melt: #7FAFB5; --red: #E4502A;
  --dusk: #120A08; --sand: #F0B48C; --bone: #F3EAD9;
  --ground: var(--night); --ink: var(--glacier); --soft: var(--ice); --quiet: var(--melt); --line: rgba(237, 242, 240, .2); --veil: 8, 22, 31;
  --disp: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --t-display: clamp(4.5rem, 17.6vw, 17.5rem); --t-head: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem); --t-text: 1.125rem; --t-note: .8125rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 192px;
  --gut: clamp(20px, 4.2vw, 64px); --col: 24px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
.sos { --ground: var(--dusk); --ink: var(--bone); --soft: #E6CDB3; --quiet: #C39A7B; --line: rgba(243, 234, 217, .2); --veil: 18, 10, 8; }
.bone { --ground: var(--bone); --ink: #1C110C; --soft: #43312A; --quiet: #6A5446; --line: rgba(28, 17, 12, .22); background: var(--ground); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-block: 96px 88px; scrollbar-color: #35505B var(--night); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-text)/1.62 var(--sans); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; overflow-x: clip; caret-color: var(--red); }
::selection { background: var(--red); color: var(--night); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
a, button, summary, input[type="range"] { touch-action: manipulation; }
button, summary, .ring, .lx-bar a, .lx-top a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
[id] { scroll-margin-top: 96px; }
.skip { position: fixed; left: var(--gut); top: 12px; z-index: 80; padding: 12px 16px; background: var(--ink); color: var(--ground); font-size: var(--t-note); transform: translateY(-200%); }
.skip:focus { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* measure and grid */
.w { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); }

/* type: four sizes. The short names (.d .t .n .ring .plate) stop at the door of a living experience ([data-own]), whose own markup uses the same names for other things. */
h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.d:not(:where([data-own] *)) { font: 300 var(--t-display)/.86 var(--disp); letter-spacing: -.04em; text-wrap: balance; }
.h { font: 300 var(--t-head)/1.1 var(--disp); letter-spacing: -.022em; text-wrap: balance; }
.h em, .d em, .say em { font-style: italic; }
.qm { margin-left: -.09em; }
.say { font: 300 var(--t-head)/1.22 var(--disp); letter-spacing: -.018em; text-wrap: pretty; }
.t:not(:where([data-own] *)) { font-size: var(--t-text); line-height: 1.62; color: var(--soft); max-width: 34em; text-wrap: pretty; }
.ts { font: 400 var(--t-text)/1.5 var(--disp); letter-spacing: -.004em; color: var(--ink); text-wrap: pretty; }
.n:not(:where([data-own] *)) { font-size: var(--t-note); line-height: 1.5; letter-spacing: .01em; color: var(--quiet); }
.fig { font: 400 var(--t-note)/1.4 var(--mono); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.on-photo { color: #F4F7F5; text-shadow: 0 1px 28px rgba(var(--veil), .5); }

/* a chapter begins: its name, and the one hairline */
.ch { display: flex; align-items: baseline; gap: var(--s5); font: 300 italic var(--t-text)/1.2 var(--disp); color: var(--quiet); }
.ch::after { content: ''; flex: 1; height: 1px; background: var(--line); transform: translateY(-.3em); }

/* the single call to action, and its quiet relatives */
.ring:not(:where([data-own] *)) { display: inline-flex; align-items: center; gap: var(--s4); min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer; text-decoration: none; color: inherit; font: 400 var(--t-text)/1.2 var(--disp); text-align: left; }
.ring > i { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.ring svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ring.big { font: 300 var(--t-head)/1.1 var(--disp); letter-spacing: -.02em; gap: var(--s5); } .ring.big > i { width: 64px; height: 64px; } .ring.big svg { width: 22px; height: 22px; }
.ring.go > i { background: var(--red); border-color: var(--red); color: var(--night); }
.ring:active > i { transform: scale(.96); }
.ql { font-size: var(--t-text); color: var(--soft); text-decoration: underline; text-decoration-color: var(--line); display: inline-flex; align-items: center; min-height: 44px; transition: text-decoration-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .ring:hover > i { transform: translateX(6px); background: var(--ink); border-color: var(--ink); color: var(--ground); }
  .ring.go:hover > i { background: #F0633D; border-color: #F0633D; color: var(--night); }
  .ql:hover { color: var(--ink); text-decoration-color: currentColor; }
}

/* top bar */
.lx-top { position: fixed; inset: 0 0 auto 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: env(safe-area-inset-top, 0px) max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); box-sizing: content-box; color: var(--ink); pointer-events: none; }
.lx-top::before { content: ''; position: absolute; inset: 0 0 -36px 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--veil), .72), rgba(var(--veil), .34) 56%, rgba(var(--veil), 0)); }
/* round 2: once the opening has passed the header stands on solid ground for its whole height, so a heading can no longer be read through the mark */
.lx-top::after { content: ''; position: absolute; inset: 0 0 -22px 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--veil)) 0, rgb(var(--veil)) calc(100% - 22px), rgba(var(--veil), 0)); opacity: 0; transition: opacity 300ms ease; }
.has-bar .lx-top::after { opacity: 1; }
.lx-top > * { pointer-events: auto; }
.on-bone .lx-top { color: #1C110C; } .on-bone .lx-top::before { opacity: 0; } .on-bone .lx-top::after { opacity: 1; background: linear-gradient(180deg, #F3EAD9 0, #F3EAD9 calc(100% - 22px), rgba(243, 234, 217, 0)); } .on-bone .lx-word img { filter: brightness(0); } .lx-top::before { transition: opacity 300ms ease; }
.lx-mb { justify-self: start; display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s2) 0 0; background: none; border: 0; cursor: pointer; font-size: var(--t-note); letter-spacing: .04em; }
.lx-mb i { position: relative; width: 26px; height: 9px; } .lx-mb i::before, .lx-mb i::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 200ms var(--ease-out); } .lx-mb i::before { top: 0; } .lx-mb i::after { bottom: 0; }
.lx-word { justify-self: center; display: grid; place-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.lx-word img { height: 34px; width: auto; }
/* a picture that could not be had (lux.js asks twice): it steps aside, and the ground stands in for it */
.lx-nopic { visibility: hidden; } .lx-nopic-in { background: linear-gradient(180deg, #1D3A49 0%, #0D2330 55%, #08161F 100%); } .sos .lx-nopic-in { background: linear-gradient(180deg, #5B2E1C 0%, #2A150E 55%, #120A08 100%); }
.lx-word-t { font: 400 1.25rem/1 var(--disp); letter-spacing: .22em; padding-left: .22em; color: inherit; }
.lx-plan { justify-self: end; font-size: var(--t-note); letter-spacing: .04em; gap: var(--s3); transition: opacity 200ms ease, visibility 200ms; }
.lx-plan > i { width: 36px; height: 36px; } .lx-plan svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .lx-mb:hover i::before { transform: translateY(-2px); } .lx-mb:hover i::after { transform: translateY(2px); } }

/* full-screen menu */
.lx-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--glacier); overflow: auto; overscroll-behavior: contain; opacity: 0; transition: opacity 180ms ease, overlay 180ms allow-discrete, display 180ms allow-discrete; --ink: var(--glacier); --soft: var(--ice); --quiet: var(--melt); --line: rgba(237, 242, 240, .2); --ground: var(--night); }
.lx-menu[open] { opacity: 1; transition-duration: 280ms; }
@starting-style { .lx-menu[open] { opacity: 0; } }
.lx-menu::backdrop { background: var(--night); }
.lx-menu-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* closing round: a picture that is not showing is not painted at all (twelve full-screen filtered layers were being made on every opening); it leaves by the same 500 ms fade as before */
.lx-menu-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; filter: saturate(.8); }
.lx-menu-bg img.on { opacity: .34; visibility: visible; transition-delay: 0s; }
.lx-menu-in { position: relative; z-index: 1; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-block: env(safe-area-inset-top, 0px) max(var(--s6), env(safe-area-inset-bottom, 0px)); }
.lx-menu-top { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.lx-menu-top .lx-mb i::before { transform: translateY(4px) rotate(45deg); } .lx-menu-top .lx-mb i::after { transform: translateY(-4px) rotate(-45deg); }
.lx-menu-main { align-self: center; padding-block: var(--s7); row-gap: var(--s8); }
.lx-menu nav { grid-column: 1 / span 8; }
.lx-menu nav a { display: block; text-decoration: none; padding-block: var(--s3); }
.lx-menu nav a b { display: block; font: 300 clamp(2.75rem, 7.4vw, 7rem)/1 var(--disp); letter-spacing: -.035em; padding-bottom: .06em; transition: transform 400ms var(--ease-out), font-style 0s; }
.lx-menu nav a span { display: block; margin-top: var(--s2); color: var(--quiet); font-size: var(--t-note); }
.lx-menu nav a[aria-current] b { font-style: italic; }
.lx-else { margin-top: var(--s7); max-width: 34em; }
.lx-else .ts { color: var(--soft); }
.lx-menu-side { grid-column: 10 / -1; align-self: end; display: grid; gap: var(--s4); justify-items: start; }
.lx-menu-side ul { display: grid; margin-top: var(--s5); }
.lx-menu-side ul a { display: inline-flex; min-height: 44px; align-items: center; font-size: var(--t-note); color: var(--soft); text-decoration: none; }
.lx-menu-base { color: var(--quiet); }
.lx-menu[open] .stg { animation: lx-rise 420ms var(--ease-out) backwards; animation-delay: calc(60ms + var(--i, 0) * 50ms); }
@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); } }
@media (hover: hover) and (pointer: fine) { .lx-menu nav a:hover b { transform: translateX(.12em); font-style: italic; } .lx-menu-side ul a:hover { color: var(--ink); } }

/* pinned journey bar */
.lx-bar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 64px; padding: 8px max(var(--gut), env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(var(--gut), env(safe-area-inset-left, 0px)); background: rgba(var(--veil), .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-top: 1px solid var(--line); color: var(--ink); transform: translateY(105%); visibility: hidden; transition: transform 260ms var(--ease-out), visibility 260ms; }
.has-bar .lx-bar { transform: none; visibility: visible; transition: transform 500ms var(--ease-drawer), visibility 0s; }
.has-bar.at-invite .lx-bar { transform: translateY(105%); visibility: hidden; transition: transform 260ms var(--ease-out), visibility 260ms; }
@media (min-width: 861px) { body:not([data-page="direction"]) .lx-bar { display: none; } [data-page="direction"] .lx-bar { min-height: 52px; background: rgba(var(--veil), .9); } [data-page="direction"] .lx-bar .ring > i { width: 36px; height: 36px; } [data-page="direction"] .lx-bar .ring svg { width: 14px; height: 14px; } body:not([data-page="direction"]) .lx-foot { padding-bottom: var(--s9); } }
.lx-bar-place { font: 300 italic var(--t-text)/1.15 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lx-bar ol { display: flex; gap: var(--s5); }
.lx-bar ol a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-note); letter-spacing: .02em; color: var(--quiet); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat; transition: color 200ms ease, background-size 250ms var(--ease-out); }
.lx-bar ol a[aria-current] { color: var(--ink); background-size: 100% 1px; }
.lx-bar .ring { font-size: var(--t-note); font-family: var(--sans); letter-spacing: .04em; white-space: nowrap; }
.lx-bar .ring > i { width: 44px; height: 44px; }
@media (hover: hover) and (pointer: fine) { .lx-bar ol a:hover { color: var(--ink); } }
@media (prefers-reduced-transparency: reduce) { .lx-bar { background: rgb(var(--veil)); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* a full-bleed plate of photograph or film, with a legible foot */
.plate:not(:where([data-own] *)) { position: relative; isolation: isolate; overflow: hidden; background: rgb(var(--veil)); }
.plate > picture, .plate > video, .plate > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.plate:not(:where([data-own] *)) img, .plate:not(:where([data-own] *)) video { width: 100%; height: 100%; object-fit: cover; }
.plate:not(:where([data-own] *))::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--veil), .5) 0%, rgba(var(--veil), .12) 22%, rgba(var(--veil), 0) 44%, rgba(var(--veil), .46) 72%, rgba(var(--veil), .9) 100%); pointer-events: none; }

/* an "enter" moment: a still that opens the living scene */
.enter { display: grid; align-items: end; min-height: min(78svh, 760px); color: #F4F7F5; text-decoration: none; }
.enter-in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); padding-block: var(--s8) var(--s7); }
.enter-in > span { display: grid; gap: var(--s2); } .enter-pl { margin-top: var(--s2); } .enter .ts { color: #E3ECEA; max-width: 24em; }
.enter > picture img { transition: transform 1400ms var(--ease-out); }
.enter .ring > i { background: rgba(var(--veil), .28); }
@media (hover: hover) and (pointer: fine) { .enter:hover > picture img { transform: scale(1.035); } .enter:hover .ring > i { background: #F4F7F5; border-color: #F4F7F5; color: var(--night); transform: translateX(6px); } }
.enter:active .ring > i { transform: scale(.96); }
.enter:focus-visible { outline-offset: -6px; }

/* film control */
.film-ctl { position: absolute; right: max(var(--gut), env(safe-area-inset-right, 0px)); bottom: var(--s7); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(244, 247, 245, .7); background: rgba(var(--veil), .3); color: #F4F7F5; display: grid; place-items: center; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.film-ctl svg { width: 14px; height: 14px; fill: currentColor; } .film-ctl .pl, .film-ctl[aria-pressed="true"] .pa { display: none; } .film-ctl[aria-pressed="true"] .pl { display: block; }
.film-ctl:active { transform: scale(.96); }

/* field notes: the optional door to figures and instruments */
.door { border-top: 1px solid var(--line); }
.door summary { list-style: none; display: flex; align-items: center; gap: var(--s5); min-height: 96px; cursor: pointer; }
.door summary::-webkit-details-marker { display: none; }
.door summary > i { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform 300ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.door summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.door[open] summary > i { transform: rotate(45deg); }
.door summary span { font: 300 var(--t-head)/1.1 var(--disp); letter-spacing: -.02em; }
.door summary small { font-size: var(--t-note); color: var(--quiet); margin-left: auto; text-align: right; }
.door-in { padding: var(--s5) 0 var(--s9) calc(48px + var(--s5)); display: grid; gap: var(--s7); }
.door[open] .door-in { animation: lx-open 320ms var(--ease-out); }
@keyframes lx-open { from { opacity: 0; clip-path: inset(0 0 40% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.door dl { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); }
.door dl div { display: grid; gap: var(--s1); } .door dt { font-size: var(--t-note); color: var(--quiet); } .door dd { font: 400 var(--t-text)/1.3 var(--mono); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.door-links { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); }
.door summary:active > i { transform: scale(.96); } .door[open] summary:active > i { transform: rotate(45deg) scale(.96); }
@media (hover: hover) and (pointer: fine) { .door summary:hover > i { background: var(--ink); color: var(--ground); } }

/* round instrument toolbar (shown working on the direction page; the chart already uses it) */
.pill { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(237, 242, 240, .05); }
.pill button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.pill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.pill button[aria-pressed="true"] { background: var(--ink); color: var(--ground); } .pill button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .pill button:not([aria-pressed="true"]):hover { background: rgba(237, 242, 240, .12); } }

/* a photograph unveils once as it arrives (only when scripts run; visible by default) */
.rv { overflow: hidden; }
.rv-on .rv img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 900ms var(--ease-in-out), transform 1600ms var(--ease-out); }
.rv-on .rv.in img { clip-path: inset(0 0 0 0); transform: none; }

/* footer */
.lx-foot { padding-block: var(--s9) calc(var(--s9) + 64px); }
.lx-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s6) var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.lx-foot-name { display: grid; gap: var(--s2); } .lx-foot-name img { height: 44px; width: auto; justify-self: start; }
.lx-foot ul { display: flex; flex-wrap: wrap; gap: 0 var(--s6); } .lx-foot ul a { display: inline-flex; min-height: 44px; align-items: center; font-size: var(--t-note); color: var(--soft); text-decoration: none; }
.lx-foot .n { flex-basis: 100%; max-width: 62em; }
/* round 5: every footer link is at least 44 px to the touch; the line's own link grows upward and downward without moving the line */
.lx-foot ul a { min-width: 44px; } .lx-foot .n a { padding-block: 14px; }
.lx-contact { display: inline; } .lx-contact a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .lx-mail { -webkit-user-select: all; user-select: all; }
@media (hover: hover) and (pointer: fine) { .lx-contact a:hover { color: var(--ink); text-decoration-color: currentColor; } }
@media (hover: hover) and (pointer: fine) { .lx-foot ul a:hover { color: var(--ink); text-decoration: underline; } }

@media (max-width: 860px) {
  :root { --t-text: 1.0625rem; }
  .lx-top { height: 64px; grid-template-columns: 1fr auto 1fr; } .lx-plan { display: none; } .lx-word img { height: 28px; }
  .lx-menu-top { height: 64px; } .lx-menu-main { display: block; align-self: start; padding-block: var(--s5) var(--s7); } .lx-menu-side { margin-top: var(--s7); } .lx-else { margin-top: var(--s6); }
  .lx-bar ol { display: none; } .lx-bar { min-height: 60px; }
  .door summary { min-height: 80px; gap: var(--s4); } .door summary small { display: none; } .door-in { padding-left: 0; padding-bottom: var(--s8); }
  .enter { min-height: min(72svh, 620px); } .enter-in { padding-block: var(--s7) var(--s6); gap: var(--s4); }
  .lx-foot { padding-block: var(--s8) calc(var(--s8) + 72px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-on .rv img { clip-path: none; transform: none; transition: none; }
  .lx-menu[open] .stg { animation: none; } .door[open] .door-in { animation: lx-fade 200ms ease; }
  .enter > picture img, .lx-menu nav a b, .ring > i, .lx-bar { transition-property: background-color, border-color, color, opacity, visibility; }
  .has-bar .lx-bar { transition: none; }
}
@keyframes lx-fade { from { opacity: 0; } }
@media (prefers-contrast: more) { :root { --line: rgba(237, 242, 240, .5); --quiet: var(--ice); } .lx-bar { background: rgb(var(--veil)); } }

/* ---------- the house navigation (round 2: moved here from home.css so every page can carry it) ----------
   The menu and footer built by lux.js from the place list: journeys, places being drawn, the long list, the house links. */
html:has(dialog.hm[open]) { overflow: hidden; }
.hm nav { grid-column: 1 / span 8; }
.hm-lab { font: 300 italic var(--t-text)/1.2 var(--disp); color: var(--quiet); padding-bottom: var(--s2); }
.hm-lab ~ .hm-lab { padding-top: var(--s6); }
.hm nav a b { font-size: clamp(2.25rem, min(5.4vw, 6.3vh), 5rem); }   /* wire-in: five journeys. The names follow the height of the window too, so the menu still fits a laptop screen without scrolling */
.hm nav > a { padding-block: var(--s2); }
@media (min-width: 861px) { .hm .lx-menu-main { padding-block: var(--s6); } }
@media (min-width: 861px) and (max-height: 820px) { .hm .lx-menu-main { padding-block: var(--s4); } .hm nav > a { padding-block: var(--s1); } .hm nav a b { font-size: clamp(2.25rem, min(5.4vw, 5.6vh), 5rem); } .hm nav a span { margin-top: var(--s1); } .hm .hm-here { margin-top: var(--s3); } }   /* a short laptop window: the same five names, set closer */
.hm-mk { display: flex; flex-wrap: wrap; gap: 0 var(--s7); }
.hm .hm-mk a { display: inline-flex; align-items: center; min-height: 52px; padding: 0; font: 300 italic clamp(1.75rem, 2.9vw, 2.75rem)/1.1 var(--disp); letter-spacing: -.02em; color: var(--soft); transition: color 200ms ease; }
.hm-more { margin-top: var(--s3); max-width: 34em; color: var(--soft); } .hm .hm-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); white-space: nowrap; }
.hm .hm-here { margin-top: var(--s5); }
.hm .lx-menu-side { grid-column: 10 / -1; align-self: end; } .hm .lx-menu-side ul { margin-top: 0; order: 2; } .hm .lx-menu-side .ring { order: 1; margin-bottom: var(--s5); }
.hm .lx-menu-side ul a { font: 400 var(--t-text)/1.2 var(--disp); color: var(--ink); min-height: 48px; min-width: 48px; }
.hm .lx-menu-side [aria-current] { font-style: italic; color: var(--soft); }
.hm-mk a:active, .hf a:active, .hm .lx-menu-side ul a:active, .hm .hm-more a:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .hm .hm-mk a:hover { color: var(--ink); } .hm .hm-more a:hover { text-decoration-color: currentColor; } }
.lx-foot.hf { padding-block: var(--s10) calc(var(--s8) + 64px); }
.hf-strap { font: 300 clamp(2.25rem, 1rem + 4.6vw, 5.5rem)/1 var(--disp); letter-spacing: -.035em; max-width: 12em; text-wrap: balance; padding-bottom: var(--s9); }
.hf-strap em { font-style: italic; color: var(--soft); }
.hf-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); row-gap: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.hf-cols nav { grid-column: span 3; } .hf-cols nav:last-child { grid-column: 9 / -1; }
.hf-cols h2 { font-weight: 400; padding-bottom: var(--s2); margin: 0; }
.hf .hf-cols ul { display: grid; gap: 0; } .hf .hf-cols ul a { font: 400 var(--t-text)/1.2 var(--disp); color: var(--ink); min-height: 44px; }
.hf-base { display: flex; align-items: end; justify-content: space-between; gap: var(--s6) var(--s8); padding-top: var(--s9); }
.hf-base img { height: 44px; width: auto; } .hf .hf-base .n { max-width: 44em; text-align: right; flex-basis: auto; }
.bone ~ .lx-foot.hf, .on-bone .lx-foot.hf { color: var(--ink); }
@media (min-width: 861px) { body:not([data-page="direction"]) .lx-foot.hf { padding-bottom: var(--s8); } }
@media (max-width: 860px) {
  .lx-foot.hf { padding-block: var(--s9) calc(var(--s8) + 72px); } .hf-strap { padding-bottom: var(--s8); }
  .hf-cols { grid-template-columns: 1fr 1fr; } .hf-cols nav, .hf-cols nav:last-child { grid-column: auto; } .hf-cols nav:last-child { grid-column: 1 / -1; } .hf .hf-cols nav:last-child ul { grid-template-columns: 1fr 1fr; column-gap: var(--col); }
  .hf-base { display: grid; padding-top: var(--s8); } .hf .hf-base .n { text-align: left; }
  /* the phone menu is its own design: journeys first, the makings as a line of italics, plain rows for the rest, and the enquiry under the thumb */
  .hm .lx-menu-in { grid-template-rows: auto 1fr; padding-bottom: 0; }
  .hm .lx-menu-main { padding-block: var(--s4) 0; display: flex; flex-direction: column; min-height: 100%; }
  .hm nav a b { font-size: clamp(2.25rem, 10.6vw, 3rem); } .hm nav > a span { max-width: 22em; }
  .hm-lab ~ .hm-lab { padding-top: var(--s5); }
  .hm-mk { gap: 0 var(--s5); } .hm .hm-mk a { font-size: 1.75rem; min-height: 48px; }
  .hm-more { margin-top: var(--s3); font-size: 1rem; }
  .hm .lx-menu-side { display: contents; }
  .hm .lx-menu-side ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col); border-top: 1px solid var(--line); margin-top: 0; padding-block: var(--s2) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); order: 2; }
  .hm .lx-menu-side .ring { order: 1; position: static; margin: var(--s6) 0 0; padding: var(--s3) 0; border-top: 1px solid var(--line); justify-content: space-between; font-size: var(--t-text); }   /* round 2: in the flow, above the house links, so nothing is hidden beneath it */
  .hm .lx-menu-base { display: none; }
}

/* a place line: where a photograph was taken, as far as its record supports. A short hairline, then the words. */
.pln { display: flex; align-items: center; gap: var(--s3); font: 400 var(--t-note)/1.4 var(--sans); letter-spacing: .02em; color: var(--quiet); text-decoration: none; }
.pln::before { content: ''; flex: none; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.pln.on-photo { color: #E3ECEA; text-shadow: 0 1px 14px rgba(var(--veil), .9); }

/* ---------- round 2 additions to the journey pages (additive: a facts ledger, a mid-page invitation, the phone bar from the first screen) ---------- */
.jx-led { padding-block: var(--s7) 0; }
.jx-led dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); row-gap: var(--s5); margin: 0; padding-top: var(--s5); border-top: 1px solid var(--line); }
.jx-led dl div { display: grid; gap: var(--s1); align-content: start; }
.jx-led dt { font-size: var(--t-note); line-height: 1.5; letter-spacing: .01em; color: var(--quiet); }
.jx-led dd { font: 400 var(--t-text)/1.4 var(--disp); color: var(--ink); max-width: 16em; text-wrap: balance; }
.jx-led dd small { display: block; margin-top: var(--s1); font: 400 var(--t-note)/1.4 var(--sans); letter-spacing: .01em; color: var(--soft); }
.jx-led .n { margin-top: var(--s5); } .jx-led .n a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .4em; color: var(--soft); white-space: nowrap; }
/* the other journeys at the foot of every journey page: eight names in two columns, each with its country, no pictures */
.jx-on { padding-block: var(--s10) var(--s7); }
.jx-on ul { margin-top: var(--s5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col) * 3); }
.jx-on li { border-bottom: 1px solid var(--line); }
.jx-on li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: center; padding-block: var(--s4); text-decoration: none; }
.jx-on b { grid-column: 1; font: 300 clamp(1.75rem, 1rem + 1.7vw, 2.75rem)/1.05 var(--disp); letter-spacing: -.03em; padding-bottom: .06em; transition: transform 400ms var(--ease-out); }
.jx-on li span { grid-column: 1; margin-top: var(--s1); color: var(--quiet); font: 400 var(--t-note)/1.4 var(--sans); letter-spacing: .01em; }
.jx-on li i { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.jx-on li svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.jx-on li a:active i { transform: scale(.96); }
.jx-on-more { display: flex; flex-wrap: wrap; gap: 0 var(--s7); padding-top: var(--s5); }
@media (hover: hover) and (pointer: fine) { .jx-on li a:hover b { transform: translateX(.1em); font-style: italic; } .jx-on li a:hover i { transform: translateX(5px); background: var(--ink); border-color: var(--ink); color: var(--ground); } }
@media (max-width: 860px) { .jx-on { padding-block: var(--s9) var(--s6); } .jx-on ul { grid-template-columns: 1fr; } .jx-on li a { padding-block: var(--s3); min-height: 64px; } }
@media (prefers-reduced-motion: reduce) { .jx-on b, .jx-on li i { transition-property: background-color, color, border-color; } }
/* nine journeys in the menu: names only, in two columns, so the whole list is on one screen */
.hm-many nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col); align-content: start; }
.hm-many nav > p { grid-column: 1 / -1; }
.hm-many nav > a span { display: none; }
.hm.hm-many nav a b { font-size: clamp(2rem, min(3.7vw, 6.4vh), 3.75rem); }
.hm.hm-many nav > a { padding-block: var(--s2); }
.hf-cols nav.hf-many { grid-column: span 6; } .hf .hf-cols nav.hf-many ul { grid-template-columns: 1fr 1fr; column-gap: var(--col); }
.hm-many nav b i { font-style: inherit; } .hm-many .hm-short { display: none; }
@media (max-width: 860px) { .hm-many .hm-full { display: none; } .hm-many .hm-short { display: inline; } .hm.hm-many nav a b { font-size: clamp(1.375rem, 6.6vw, 1.75rem); } .hm.hm-many nav > a { padding-block: 0; min-height: 44px; display: flex; align-items: center; } .hm-many .hm-here { display: none; } .hm.hm-many .lx-menu-main { padding-top: var(--s2); } .hm.hm-many .lx-menu-side .ring { margin-top: var(--s2); padding-block: var(--s2); } .hm.hm-many .lx-menu-side ul { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } .hm-many .hm-lab { padding-bottom: 0; } .hm.hm-many .lx-menu-side ul a { min-height: 44px; } .hf-cols nav.hf-many { grid-column: 1 / -1; } }
.jx-mi { padding-block: var(--s9); }
.jx-mi .say { max-width: 22em; margin-left: calc((100% + var(--col)) / 12); }
.jx-mi a { display: inline-flex; align-items: center; gap: var(--s3); min-height: 48px; font-style: italic; text-decoration: underline; text-decoration-color: var(--line); white-space: nowrap; transition: text-decoration-color 200ms ease, opacity 120ms ease; }
.jx-mi a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 160ms var(--ease-out); }
.jx-mi a:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .jx-mi a:hover { text-decoration-color: currentColor; } .jx-mi a:hover svg { transform: translateX(5px); } .jx-led .n a:hover { color: var(--ink); } }
@media (max-width: 860px) {
  .jx-led { padding-top: var(--s6); } .jx-led dl { grid-template-columns: 1fr 1fr; } .jx-guide { grid-column: 1 / -1; } .jx-led .n a { display: none; }
  .jx-mi { padding-block: var(--s8); } .jx-mi .say { margin-left: 0; }
  /* a journey page offers its enquiry on the first phone screen: the bar is there from the start, and steps aside for the page's own invitation */
  body[data-to]:not([data-mode="scene"]) .lx-bar { transform: none; visibility: visible; }
  body[data-to]:not([data-mode="scene"]).at-invite .lx-bar { transform: translateY(105%); visibility: hidden; }
  body[data-to]:not([data-mode="scene"]) [data-open] > .w { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }   /* the opening keeps clear of the bar */
}
@media (prefers-reduced-motion: reduce) { .jx-mi a svg { transition: none; } }
/* the mark keeps its place when the house menu opens: the menu's top row is laid out exactly as the header is */
.hm .lx-menu-top { display: grid; grid-template-columns: 1fr auto 1fr; } .hm .lx-menu-top > :first-child { justify-self: start; } .hm .lx-menu-top > :last-child { justify-self: end; }
html { scrollbar-gutter: stable; }   /* so the page does not widen, and the mark does not step sideways, while the menu is open */
/* closing round, the lows: the phone bar's label takes two lines before it is cut short ("Booking with confidence" lost half its words at 320 and 375); a one-word link on the long list is a full 44 px wide */
@media (max-width: 860px) { .lx-bar-place { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(.9375rem, 4.6vw, 1.125rem); } }
.hm .hm-more a { min-width: 44px; justify-content: center; }