/* Layout: the frame every page shares — header, theme switch, page containers, © line, loader, cursor */

/* header: name (with the two cities under it) left, menu right; blends over photos */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:baseline;padding:calc(18px + var(--safe-t)) var(--gut) 0;color:#fff;mix-blend-mode:difference;pointer-events:none;font-weight:500}
.hdr a{pointer-events:auto}
.hdr nav{display:flex;gap:clamp(14px,2vw,28px)}
.hdr nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.brand-sub{display:block;font-size:10.5px;letter-spacing:.06em;opacity:.6;margin-top:3px;transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* phones, over a full-screen photo (home, full view): the header is not pinned either, or Safari paints a solid plate */
@media (pointer:coarse){:root:has(.page[data-page="home"]:not([hidden]),.vw:not([hidden])) .hdr{position:absolute;top:var(--vy)}}
:root.scrolled .brand-sub{opacity:0;transform:translateY(-10px)} /* once a page scrolls, the cities tuck under the name and leave room for the docked title */
/* phones too: the cities sit under the name; once a page scrolls they tuck away as on desktop */

/* theme switch: Day / Night / System, top centre in line with the header */
.tone{position:fixed;left:50%;transform:translateX(-50%);top:calc(19px + var(--safe-t));z-index:51;display:flex;gap:9px;align-items:center}
.tone button{width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent);transition:box-shadow .2s}
.tone button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tone button[aria-checked="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent),0 0 0 2px var(--bg),0 0 0 3px var(--ink)}
@media (max-width:640px){.tone{display:none}}
:root:has(.page[data-page="home"]:not([hidden])) .tone{display:none} /* the home frame covers the whole screen: nothing to switch there */

/* pages: app screens are fixed to the window; text pages are ordinary flowing pages scrolled by the document */
.page{position:fixed;inset:0}
.page.scroll{position:relative;inset:auto;min-height:100dvh}

/* © line closing a page (filled by js/components/footer.js) */
.foot{margin-top:72px;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px;pointer-events:auto}

/* loader */
.loader{position:fixed;inset:0;z-index:500;background:var(--bg);display:grid;place-items:center;transition:opacity .5s}
.loader.done{opacity:0;pointer-events:none}

/* cursor: a word or an arrow that follows the mouse over photos (js/components/cursor.js) */
@media (pointer:fine){.vw-stage,.sr-stage{cursor:none}}
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;color:#fff;mix-blend-mode:difference;font-family:var(--m);font-weight:500;font-size:20px;line-height:1;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .18s;white-space:nowrap}
.cur.arrow{font-size:30px;letter-spacing:0}
.cur.on{opacity:1}
.cur.on.idle{opacity:0;transition:opacity 1.4s ease}