/* The Website's pages (ADR 067, 094): navigation, masthead, Collections, Info and footer, on the galleries' tokens.
   Motion follows ADR 017: the bar frosts by opacity, the phone menu slides in by transform, links draw their
   underline by transform; nothing waits. */
html:has(.website-page) { scroll-padding-top: 4.5rem; }
/* Back to top lands at the very top, under nothing. */
#top { scroll-margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { html:has(.website-page) { scroll-behavior: smooth; } }
.website-page { padding-bottom: 0; }
.website-page a:focus-visible, .website-page button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 3px; }

/* ---- Navigation ------------------------------------------------------------ */
.website-page { --nav-h: 3.4rem; }
.site-nav {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem 1.75rem;
  min-height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--page) 0; margin-top: calc(-1 * env(safe-area-inset-top, 0px));
}
/* Over the Hero: the bar stays in the flow (so the Preview bar still sits above it) and the Hero slides up under
   it. While clear it takes the Hero's white ink, over the scrim's top shade; frosted, the theme's own. The ink
   changes at once (ADR 017: only transform and opacity animate); the frosting under it fades in by opacity. */
.site-nav + .hero { margin-top: calc(-1 * (var(--nav-h) + env(safe-area-inset-top, 0px))); }
.website-page:has(.hero) .site-nav.is-clear { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / .3); }
.website-page:has(.hero) .site-nav.is-clear .theme-toggle,
.website-page:has(.hero) .site-nav.is-clear .nav-menu-button { color: #fff; }
.website-page:has(.hero) .site-nav.is-clear a:focus-visible,
.website-page:has(.hero) .site-nav.is-clear button:focus-visible { outline-color: #fff; }
@media (min-width: 48rem) {
  .website-page:has(.hero) .site-nav.is-clear .site-menu a { color: rgb(255 255 255 / .82); }
  .website-page:has(.hero) .site-nav.is-clear .site-menu a:hover { color: #fff; }
}
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent); transition: opacity var(--t-base) ease;
}
.site-nav.is-clear::before { opacity: 0; }
.nav-brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; line-height: 1.2; }
.nav-brand .brand-mark { height: 1.75rem; }
.site-menu ul { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.site-menu a { color: var(--muted); font-size: .92rem; text-decoration: none; }
.site-menu a:hover, .site-menu a[aria-current] { color: var(--fg); }
.site-nav .theme-toggle { margin-left: auto; margin-right: -.35rem; }
/* Wide screens (ADR 094): the brand and the three pages at the top left; the Customer link at the right, beside the
   theme toggle. */
@media (min-width: 48rem) {
  .site-menu { flex: 1 1 auto; }
  .site-menu .menu-page + .menu-customer { margin-left: auto; }
  .site-nav .site-menu ~ .theme-toggle { margin-left: 0; }
}
.nav-menu-button, .menu-close { display: none; }

/* Phones: the links fold into a sheet from the top. It is a popover, so it opens, closes on Escape or a tap outside,
   and keeps focus without any JS. */
@media (max-width: 47.99rem) {
  .nav-menu-button { display: inline-flex; order: 2; padding: .45rem; border: 0; background: transparent; color: var(--fg); line-height: 0; }
  .nav-menu-button svg { width: 22px; height: 22px; }
  .site-menu {
    position: fixed; inset: 0 0 auto; width: auto; max-width: none; height: auto; margin: 0; border: 0; border-bottom: 1px solid var(--line);
    padding: calc(3.5rem + env(safe-area-inset-top, 0px)) var(--page) 1.75rem; color: var(--fg); text-shadow: none;
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .site-menu::backdrop { background: rgb(0 0 0 / .4); }
  .site-menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-menu li + li { border-top: 1px solid var(--line); }
  .site-menu a { display: block; padding: .85rem 0; color: var(--fg); font-size: 1.3rem; }
  .menu-close {
    display: block; position: absolute; top: calc(.55rem + env(safe-area-inset-top, 0px)); right: calc(var(--page) - .5rem);
    padding: .35rem .6rem; border: 0; background: transparent; color: var(--fg); font-size: 1.75rem; line-height: 1;
  }
  .site-menu:popover-open { animation: menu-in var(--t-base) var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .site-menu:popover-open { animation: none; } .site-nav::before { transition: none; } }
/* Wider screens: the same list sits inline in the bar. Author styles outrank the popover's own hiding. */
@media (min-width: 48rem) {
  .site-menu, .site-menu:popover-open {
    display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0;
    overflow: visible; background: none; color: inherit;
  }
}

/* ---- Links say they are links (ADR 096) --------------------------------------- */
/* Text links draw a hairline underline in from the left on hover and keyboard focus: a pseudo-element scaled on
   the x axis, so only transform animates. The current page keeps its line. Reduced motion: it appears at once. */
.site-menu a, .website-footer a, .social a, .contact-email a, .about-text a, .to-top a, .masthead-back a {
  position: relative; text-decoration: none;
}
.site-menu a::after, .website-footer a::after, .social a::after, .contact-email a::after,
.about-text a::after, .to-top a::after, .masthead-back a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.18em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
:is(.site-menu a, .website-footer a, .social a, .contact-email a, .about-text a, .to-top a, .masthead-back a):is(:hover, :focus-visible)::after,
.site-menu a[aria-current]::after { transform: none; }
/* The contact email is the page's one big link: its line is always there, and thickens in. */
.contact-email a::after { transform: none; opacity: .35; transition: opacity var(--t-base) ease; }
.contact-email a:is(:hover, :focus-visible)::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-menu a::after, .website-footer a::after, .social a::after, .contact-email a::after,
  .about-text a::after, .to-top a::after, .masthead-back a::after { transition: none; }
}
/* A card's name (a Collection on /collections, an Album on Your galleries) draws the same line
   while its card is hovered or focused, under the name only: the name is as wide as its words. */
.collection-name, .gallery-title { position: relative; width: fit-content; }
.collection-name::after, .gallery-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
:is(a.collection-card, a.gallery-card):is(:hover, :focus-visible) :is(.collection-name, .gallery-title)::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .collection-name::after, .gallery-title::after { transition: none; } }
/* In the phone sheet the links are large rows: the line sits under the words, not the row. */
@media (max-width: 47.99rem) { .site-menu a { display: block; width: fit-content; } .site-menu a::after { bottom: .6rem; } }

/* ---- Masthead -------------------------------------------------------------- */
.website-masthead { padding: clamp(2.5rem, 9vw, 7rem) var(--page) clamp(2rem, 5vw, 3.5rem); }
html.js .website-masthead { animation: rise var(--t-slow) var(--ease-out) backwards; }
.website-masthead h1 { max-width: 22ch; margin: 0; font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.website-masthead .meta { margin: .9rem 0 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); }
/* Collections and a Collection: a short masthead, so the photos start near the top. */
.website-masthead.is-compact { padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem); }
.website-masthead.is-compact h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.website-masthead.is-compact .meta { margin-top: .4rem; font-size: .95rem; }
.website-masthead.is-compact .masthead-back { margin-bottom: .5rem; }
/* A Collection's S / M / L sit at the right, level with its photo count, so its photos start as close under the
   masthead as the Collections' covers do (ADR 105). */
.website-masthead:has(> .grid-sizes) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
.website-masthead > .grid-sizes { margin: 0 0 -.45rem; padding: 0; }
.masthead-back { margin: 0 0 .9rem; color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.masthead-back a { color: inherit; }
.masthead-back a:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { html.js .website-masthead { animation: none; } }

/* ---- Sections ---------------------------------------------------------------- */
.website-block { padding: clamp(4.5rem, 11vw, 9rem) var(--page) 0; }
/* On /info About opens the page, under its masthead. */
.website-masthead + main > .website-block:first-child { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.website-block h2 { margin: 0 0 1.5rem; color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

.about { display: grid; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.about.has-portrait { grid-template-columns: minmax(0, 26rem) minmax(0, 38rem); justify-content: center; }
.about:not(.has-portrait) { max-width: calc(38rem + 2 * var(--page)); margin: 0 auto; }
.about-portrait { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ph) center / cover, var(--panel); }
.about-portrait img { width: 100%; height: auto; }
.about-text p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.7; text-wrap: pretty; }
.about-text p:last-child { margin-bottom: 0; }
@media (max-width: 47.99rem) {
  .about.has-portrait { grid-template-columns: minmax(0, 1fr); }
  .about-portrait { max-width: 24rem; }
}

.contact { max-width: calc(38rem + 2 * var(--page)); margin: 0 auto; text-align: center; }
.contact p { margin: 0 0 1.5rem; }
.contact .book { padding: .95rem 1.9rem; border-color: var(--fg); border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 1.02rem; }
.contact .book:hover { opacity: .88; }
.contact-email a { font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing: -.01em; overflow-wrap: anywhere; }
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.social a { color: var(--muted); text-decoration: none; }
.social a:hover { color: var(--fg); }

/* ---- Footer -------------------------------------------------------------------- */
.website-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; margin-top: clamp(4.5rem, 11vw, 9rem);
  padding: 1.5rem var(--page) calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}
.website-footer p { margin: 0 auto 0 0; }
.website-footer a { color: var(--muted); text-decoration: none; }
.website-footer a:hover { color: var(--fg); }
/* Phones: the copyright on its own line, the links wrapping under it. The theme switch is the navigation's only. */
@media (max-width: 30rem) { .website-footer p { flex-basis: 100%; } }

/* The Preview bar scrolls away; the theme switch lives in the navigation here. */
.website-page .preview-bar { padding-right: var(--page); }

/* ---- Grid size, back to top (ADR 096) --------------------------------------------- */
/* The size control starts `hidden`; its display rule must not undo it. */
.grid-sizes[hidden], .grid-sizes button[hidden] { display: none; }
/* S / M / L: three quiet letters above the grid's right edge, the chosen one in full ink. Shown by website.js. */
.grid-sizes { display: flex; justify-content: flex-end; gap: .15rem; margin: 0 0 .6rem; padding: 0 var(--page); }
.grid-sizes button {
  min-width: 2rem; min-height: 2rem; padding: 0 .4rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .08em; cursor: pointer;
}
.grid-sizes button:hover { color: var(--fg); }
.grid-sizes button[aria-pressed="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.to-top { display: flex; justify-content: flex-end; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0 var(--page); font-size: .85rem; }
.to-top a { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.to-top a:hover { color: var(--fg); }
.to-top svg { width: 15px; height: 15px; }

/* ---- Collections (ADR 094) ------------------------------------------------------- */
/* One cover per Collection in an even grid, its name and count under it. The photo leans in inside its frame on
   hover and focus, as a gallery tile does (3.5 %), by transform only. */
.collection-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1rem, 2.4vw, 2rem);
  margin: 0 auto; padding: 0 var(--page); max-width: 96rem; list-style: none;
}
.collection-card { display: block; color: inherit; text-decoration: none; }
.collection-card .collection-cover { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--ph) var(--focus, 50% 50%) / cover, var(--panel); }
.collection-card picture, .collection-card img { display: block; width: 100%; height: 100%; }
.collection-card img { object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); }
.collection-name { display: block; margin-top: .95rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.collection-count { display: block; margin-top: .3rem; color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.collection-card:focus-visible { outline: none; }
.collection-card:focus-visible .collection-cover { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .collection-card img { transition: transform var(--t-slow) var(--ease-out); }
  .collection-card:is(:hover, :focus-visible) img { transform: scale(1.035); }
}

/* ---- Album cards (Your galleries, ADR 083) --------------------------------------- */
/* Covers in an even grid, each framed around its Album's cover point, the title and date set quietly under it.
   Hover leans in a little, by transform only. */
.galleries {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1rem, 2.4vw, 2rem);
  margin: 0 auto; padding: 0 var(--page); max-width: 96rem; list-style: none;
}
.gallery-card { display: block; color: inherit; text-decoration: none; }
.gallery-cover { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--ph) center / cover, var(--panel); }
.gallery-cover picture, .gallery-cover img { display: block; width: 100%; height: 100%; }
.gallery-cover img { object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); }
.gallery-title { display: block; margin-top: .95rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.gallery-date { display: block; margin-top: .3rem; color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-cover img { transition: transform var(--t-slow) var(--ease-out); }
  .gallery-card:hover .gallery-cover img { transform: scale(1.03); }
}
.galleries-empty { margin: 0; padding: 0 var(--page); color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.22rem); }

/* ---- Customer pages (ADR 082) --------------------------------------------------- */
/* Signing in and /account: one narrow column under the masthead, the sections headed like the Website's. */
.customer-main { max-width: calc(34rem + 2 * var(--page)); padding: 0 var(--page); }
/* Policy pages (ADR 093): the operator's text in the same column, at reading size. */
.policy p { margin: 0 0 1.1em; line-height: 1.6; overflow-wrap: anywhere; }
.customer-form { display: grid; gap: .5rem; margin: 0 0 1.5rem; }
.customer-form label { margin: .75rem 0 0; }
.customer-form .notice { margin: 0 0 .5rem; }
.customer-form #code { font-size: 1.25rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.customer-aside { margin: 0; font-size: .9rem; }
.customer-aside a { color: var(--muted); }
.customer-section { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.customer-section h2 { margin: 0 0 1rem; color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.customer-section .galleries-empty { padding: 0; }
/* Your galleries (ADR 083): small cards, two across a phone and three across the column, each with
   where it stands. A closed Album keeps its place but links nowhere and has no photos to show. */
.your-galleries { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 1.75rem 1rem; padding: 0; }
.your-galleries .gallery-title { margin-top: .7rem; font-size: 1rem; }
.gallery-cover.is-empty { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.gallery-state { display: block; margin-top: .35rem; color: var(--muted); font-size: .9rem; }
.gallery-card.is-closed .gallery-title { color: var(--muted); }
/* A Saved Album's way off the account: a small text button under its card. */
.gallery-remove { margin: .35rem 0 0; }
.gallery-remove button { padding: 0; border: 0; color: var(--muted); font-size: .85rem; text-decoration: underline; text-underline-offset: .2em; }
.gallery-remove button:hover { color: var(--fg); }
/* Your orders (ADR 084): one quiet row per order, the whole row its order page's link. */
.orders { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.orders li { border-bottom: 1px solid var(--line); }
.order { display: grid; gap: .2rem; padding: .85rem 0; color: inherit; text-decoration: none; }
.order-name { font-size: 1.05rem; }
.order-meta { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.order-meta em { font-style: normal; }
.order:hover .order-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Continue with Google (ADR 087), under the code form after the "or" rule, as wide as the passkey button under it.
   Google's own button colours: its dark button on the dark theme, its light one on the light theme; the mark is
   never recoloured. */
.sign-in-with { --g-bg: #131314; --g-line: #8e918f; --g-fg: #e3e3e3; margin: 0 0 .75rem; }
:root[data-theme="light"] .sign-in-with { --g-bg: #fff; --g-line: #747775; --g-fg: #1f1f1f; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sign-in-with { --g-bg: #fff; --g-line: #747775; --g-fg: #1f1f1f; }
}
.google-button {
  display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 2.6rem; padding: 0 1rem;
  border: 1px solid var(--g-line); border-radius: var(--radius); background: var(--g-bg); color: var(--g-fg);
  font-size: .95rem; font-weight: 500; text-decoration: none;
}
.google-button:hover { box-shadow: 0 0 0 1px var(--g-line); }
.google-button svg { flex: none; }
/* Customer passkeys (ADR 086): under the code form an "or" rule and the passkey button; on /account a row per
   passkey like an order's, with a small text Remove. passkeys.js unhides them only where a passkey can work. */
.customer-or { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; color: var(--muted); font-size: .86rem; }
.customer-or::before, .customer-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.customer-passkey [data-passkey-go] { width: 100%; }
.customer-passkey .notice, [data-passkey-add] .notice { margin: .75rem 0 0; }
.customer-passkeys { margin: 0 0 1rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.customer-passkey-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.customer-passkey-row .passkey-name { flex: 1 1 auto; font-size: 1.05rem; }
.customer-passkey-row .order-meta { flex: 1 1 100%; order: 3; }
.customer-passkey-row form { margin: 0; }
.customer-passkey-row button { padding: 0; border: 0; background: none; color: var(--muted); font-size: .85rem; text-decoration: underline; text-underline-offset: .2em; }
.customer-passkey-row button:hover { color: var(--fg); }
[data-customer-passkeys] > .meta { margin: 0 0 .9rem; }
/* Connect Google on /account (ADR 089): the connected account as a passkey's row; the button Google's own, sized
   to its words rather than the column. */
[data-account-google] > .meta, [data-account-google] > .notice { margin: 0 0 .9rem; }
.connect-google { margin: 0; }
.connect-google .google-button { display: inline-flex; font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; }

/* ---- Hero motion (ADR 069) ------------------------------------------------------ */
/* Nothing here hides the first photo: it is in place, still, before any of this starts. With JS, each photo in
   turn drifts (scales up about its Focal point, so the frame closes in on the subject and never uncovers an edge)
   for its dwell plus the cross-fade, and the next fades in over it. website.js only swaps classes. The overlay
   rises in once, then the scroll cue; on scroll the photo sinks at a fraction of the scroll speed and the words
   fade, where the browser has scroll-driven animations. Reduced motion: one still photo (website.js never brings
   in the others, and nothing here runs). */
.hero-frame .hero-photo { transition: opacity var(--t-morph) var(--ease-in-out); }
.hero-frame .hero-photo.is-next { opacity: 0; }
.hero-frame .hero-photo.is-front { z-index: 1; }
.hero-photo img { transform-origin: var(--focus, 50% 50%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo.is-on img { animation: hero-drift calc(var(--dwell, 6s) + var(--t-morph)) linear both; }
  .hero.is-paused .hero-photo img { animation-play-state: paused; }

  .js .hero-overlay > * { animation: hero-rise var(--t-morph) var(--ease-out) 120ms backwards; }
  .js .hero-overlay > :nth-child(2) { animation-delay: 210ms; }
  .js .hero-overlay > :nth-child(3) { animation-delay: 300ms; }
  .js .hero-overlay > :nth-child(n+4) { animation-delay: 390ms; }
  .js .hero-overlay > .hero-cue { animation: fade var(--t-slow) ease 1.1s backwards; }
}
@keyframes hero-drift { to { transform: scale(1.07); } }

@keyframes hero-rise { from { opacity: 0; transform: translateY(1.1rem); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline: --hero block; }
    .hero-frame { animation: hero-sink linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-overlay { animation: hero-recede linear both; animation-timeline: --hero; animation-range: exit 0% exit 55%; }
  }
}
@keyframes hero-sink { to { transform: translateY(38%); } }
@keyframes hero-recede { to { opacity: 0; transform: translateY(-2.5rem); } }

/* ---- Headings rise in as they enter view, like the tiles (gallery.css) ------------- */
.js [data-rise] { opacity: 0; transform: translateY(14px); }
.js [data-rise]:not(.in) { animation: show-anyway 0s 4s forwards; }
.js [data-rise].in { opacity: 1; transform: none; transition: opacity var(--t-slow) ease, transform var(--t-morph) var(--ease-out); }
/* /account's own actions (ADR 085): Sign out and Sign out everywhere else side by side, Delete a quiet link below. */
.account-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.account-actions form { margin: 0; }
.customer-section .notice { margin: 0 0 1rem; }

/* ---- Glass and settling (ADR 106) ------------------------------------------------ */
.site-nav::before { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
@media (max-width: 47.99rem) {
  /* The phone sheet is glass over a dimmed, softened page; its links follow it down one after another. */
  .site-menu { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: var(--glass-lift); }
  .site-menu::backdrop { background: rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .site-menu:popover-open li { animation: rise var(--t-base) var(--ease-out) backwards; }
  .site-menu:popover-open li:nth-child(2) { animation-delay: 35ms; }
  .site-menu:popover-open li:nth-child(3) { animation-delay: 70ms; }
  .site-menu:popover-open li:nth-child(n+4) { animation-delay: 105ms; }
}
@media (prefers-reduced-motion: reduce) { .site-menu:popover-open li { animation: none; } }
/* Over the Hero: the call to action and the scroll cue are panes of glass on the photo. The cue nods down a few
   times once the words have risen, then rests. */
.hero-book a { -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.hero-cue { border-radius: 999px; background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: var(--glass-ink-edge); transition: background-color var(--t-fast) ease; }
.hero-cue:hover { background: rgb(255 255 255 / .14); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-cue svg { animation: cue-nod 2.4s var(--ease-in-out) 1.9s 3; }
}
@keyframes cue-nod { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
/* A cover catches the light when hovered: a soft sheen fades across it, by opacity. */
.collection-cover, .gallery-cover { position: relative; }
.collection-cover::after, .gallery-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(155deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 42%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: opacity var(--t-slow) var(--ease-out);
}
:is(a.collection-card, a.gallery-card):is(:hover, :focus-visible) :is(.collection-cover, .gallery-cover)::after { opacity: 1; }
/* Cards and headings that rise in together arrive one after another (website.js sets --d). */
.js [data-rise].in { transition-delay: var(--d, 0ms); }
.contact .book:hover { transform: translateY(-1px); }