/* Generated by scripts/build-site-styles.mjs; edit source styles, then rebuild. */

/* Source: ui.css */
/* A numeric mask alpha fades only the dropdown portion of one glass surface. */
@property --navigation-glass-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }
/* Shared glass navigation: the surface and links close on the same timeline. */
body { --site-header-height: 97px; --site-menu-height: 250px; --navigation-glass-tint: 82%; }
html[data-theme="light"] body { --navigation-glass-tint: 78%; --navigation-glass-colour: #FCFAF6; }
html[data-theme] body .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: var(--glass-panel);
  background: color-mix(in srgb, var(--navigation-glass-colour, var(--bg, var(--paper))) var(--navigation-glass-tint), transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--theme-colour-duration, 450ms) ease;
}
html[data-theme] body .site-header .header-controls,
html[data-theme] body .site-header .wordmark,
html[data-theme] body .site-header .wordmark-signature,
html[data-theme] body .site-header .wordmark-note {
  opacity: 1 !important; transform: none !important; animation: none !important;
  transition: none !important; will-change: auto;
}
@media (min-width: 701px) {
  html[data-theme] body .site-header .primary-navigation { background: transparent; box-shadow: none; }
  html[data-theme] body .site-header .primary-navigation a { animation: none !important; }
}
@media (max-width: 700px) {
  body { --site-header-height: 83px; }
  .site-header::before {
    bottom: calc(-1 * var(--site-menu-height) + 1px);
    --navigation-glass-opacity: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--site-header-height) - 1px), rgba(0, 0, 0, var(--navigation-glass-opacity)) calc(var(--site-header-height) - 1px), rgba(0, 0, 0, var(--navigation-glass-opacity)) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--site-header-height) - 1px), rgba(0, 0, 0, var(--navigation-glass-opacity)) calc(var(--site-header-height) - 1px), rgba(0, 0, 0, var(--navigation-glass-opacity)) 100%);
    transition: --navigation-glass-opacity 420ms cubic-bezier(.25, .1, .25, 1), background-color var(--theme-colour-duration, 450ms) ease;
  }
  html.navigation-open .site-header::before { --navigation-glass-opacity: 1; }
  html.navigation-open .site-header { border-bottom-color: transparent; }
  html[data-theme] body .primary-navigation {
    --motion-panel: 420ms;
    top: calc(var(--site-header-height) - 1px);
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-theme] body .primary-navigation {
    transition: opacity 420ms cubic-bezier(.25, .1, .25, 1), transform 420ms cubic-bezier(.25, .1, .25, 1), visibility 0s linear 420ms;
  }
  html[data-theme] body .primary-navigation.is-open { transition-delay: 0s; }
  html[data-theme] body .primary-navigation a {
    opacity: 1; transform: none;
    transition: color var(--theme-colour-duration, var(--motion-hover)) var(--ease-quiet), background-color var(--theme-colour-duration, var(--motion-hover)) var(--ease-quiet), border-color var(--theme-colour-duration, var(--motion-hover)) var(--ease-quiet), transform var(--motion-hover) var(--ease-quiet);
    transition-delay: 0s !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before, html[data-theme] body .primary-navigation, .navigation-scrim { transition: none !important; }
}

/* The lighter glass needs clear lettering over both photographs and paper. */
html[data-theme="light"] body .site-header .primary-navigation a { color: var(--ink); }

@media (max-width: 700px) {
  html[data-theme="light"] body { --navigation-divider: rgba(36, 40, 34, .2); }
  html[data-theme="dark"] body { --navigation-divider: rgba(233, 230, 222, .16); }
  html[data-theme] body .primary-navigation,
  html[data-theme] body .primary-navigation a { border-color: var(--navigation-divider); }
}

/* Menu control contrast is tuned for each glass tint. */
html[data-theme="light"] body { --menu-ring: rgba(36, 40, 34, .35); --menu-ring-active: #8B6845; }
html[data-theme="dark"] body { --menu-ring: rgba(233, 230, 222, .3); --menu-ring-active: #c3a37c; }
html[data-theme] body .site-header .menu-toggle {
  border-color: var(--menu-ring); background: transparent; color: var(--ink); box-shadow: none;
}
html[data-theme] body .site-header .menu-toggle[aria-expanded="true"] { border-color: var(--menu-ring-active); }
html[data-theme] body .site-header .menu-toggle:focus-visible { outline: 2px solid var(--menu-ring-active); outline-offset: 3px; }

/* Link feedback is independent of the parent panel entrance. */
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body .site-header .primary-navigation a:hover { color: var(--ink); }
}
html[data-theme] body .site-header .primary-navigation a {
  transform: none !important;
  transition: color var(--theme-colour-duration, 180ms) ease, background-color var(--theme-colour-duration, 180ms) ease, border-color var(--theme-colour-duration, 180ms) ease !important;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] body .site-header .primary-navigation a:active { color: var(--accent); background: transparent; }
html[data-theme] body .site-header .primary-navigation a[aria-current="page"] { color: var(--accent); }

/* Show the destination theme; crossfade only opacity and transform. */
.theme-toggle-icon :is(.theme-icon-moon, .theme-icon-sun) {
  transform-origin: 12px 12px;
  transition: opacity 450ms ease, transform 450ms var(--ease-editorial);
}
.theme-icon-sun { opacity: 0; transform: rotate(-30deg) scale(.8); }
.theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(30deg) scale(.8); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icon, .theme-toggle-icon :is(.theme-icon-moon, .theme-icon-sun) { transition: none !important; }
}

/* Shared, static glass surfaces. Only tint colours animate between themes. */
body {
  --glass-panel: rgba(252, 250, 246, .80);
  --glass-border: rgba(37, 43, 37, .22);
  --glass-shadow: 0 18px 54px rgba(22, 29, 24, .15);
  --glass-blur: 10px;
  --label-ink: #62675F;
  --ui-feedback: 200ms;
  --theme-duration: 450ms;
}
html[data-theme="dark"] body {
  --glass-panel: rgba(16, 16, 16, .88);
  --glass-border: rgba(236, 234, 224, .2);
  --glass-shadow: 0 18px 54px rgba(0, 0, 0, .3);
  --label-ink: #b8bcb2;
}
html[data-theme] body :is(.contact-popover, .gallery-filter-panel, .gallery-more-options) {
  background: var(--glass-panel);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
html[data-theme] body .photo-dialog {
  border: 1px solid var(--glass-border);
  background: var(--glass-panel);
  box-shadow: var(--glass-shadow);
}
html[data-theme] body .photo-dialog:not(.is-hero) .photo-dialog-info { background: transparent; }

/* A panel owns its entrance. Controls respond without inherited stagger delays. */
.gallery-page .gallery-filter {
  /* An opacity animation on the parent blocks the panel's backdrop sampling. */
  opacity: 1;
  transform: none !important;
  animation: none !important;
}
.gallery-page .gallery-toolbar:has(.gallery-filter[open]) {
  opacity: 1;
  transform: none;
  animation: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-page .gallery-filter > summary {
    animation: gallery-editorial-control 800ms var(--gallery-editorial-ease) 260ms backwards;
  }
}
.gallery-page .gallery-filter-panel {
  --motion-panel: 420ms;
  --glass-blur: 14px;
  will-change: auto;
  transition: opacity 360ms var(--ease-standard), transform 420ms var(--ease-standard), visibility 0s linear 420ms, background-color var(--theme-colour-duration, var(--theme-duration)) ease, border-color var(--theme-colour-duration, var(--theme-duration)) ease;
}
.gallery-page .gallery-filter-panel :is(.gallery-filter-group, .gallery-filter-option, .gallery-more-collections > summary) {
  opacity: 1;
  transform: none;
  transition-delay: 0ms !important;
}
.gallery-page .gallery-filter-panel > .gallery-filter-group { transition: none; }
html[data-theme] body :is(.gallery-filter-option, .gallery-more-collections > summary, .filter-button) {
  min-height: 44px;
  font-size: 12px;
  transition: color var(--theme-colour-duration, var(--ui-feedback)) ease, border-color var(--theme-colour-duration, var(--ui-feedback)) ease, background-color var(--theme-colour-duration, var(--ui-feedback)) ease, transform var(--ui-feedback) var(--ease-standard);
}
/* Entry runs once. Opening or closing the menu never restarts the trigger. */
html[data-theme] body.gallery-page .gallery-filter > summary {
  max-width: 100%;
  gap: 18px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transform: none !important;
  box-shadow: none;
  animation: none !important;
  will-change: auto;
  transition: color var(--theme-colour-duration, 200ms) ease, border-color var(--theme-colour-duration, 200ms) ease, background-color var(--theme-colour-duration, 200ms) ease !important;
}
html[data-theme] body.gallery-page .gallery-filter > summary > span:first-child {
  letter-spacing: .1em !important;
  transition: none;
}
html[data-theme] body.gallery-page .gallery-filter-panel,
html[data-theme] body.gallery-page .gallery-filter-panel * {
  user-select: none;
  -webkit-user-select: none;
}
html[data-theme] body.gallery-page .gallery-filter-chevron {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-size: 14px;
  line-height: 1;
  color: currentColor;
  transform: rotate(0deg);
  transform-origin: center;
  will-change: auto;
  transition: transform 320ms var(--ease-standard) !important;
}
html[data-theme] body.gallery-page .gallery-filter > summary[aria-expanded="true"] .gallery-filter-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme].gallery-arrival-motion body.gallery-page .gallery-filter:not(.has-interacted) > summary {
    animation: gallery-browse-entrance 850ms cubic-bezier(.4,0,.2,1) 80ms backwards !important;
  }
}
@keyframes gallery-browse-entrance { from { opacity: 0; } to { opacity: 1; } }
html[data-theme] body :is(.theme-toggle, .menu-toggle, .contact-link, .contact-popover-actions a, .photo-dialog-nav, .photo-dialog-close) {
  transition: color var(--theme-colour-duration, var(--ui-feedback)) ease, background-color var(--theme-colour-duration, var(--ui-feedback)) ease, border-color var(--theme-colour-duration, var(--ui-feedback)) ease, transform var(--ui-feedback) var(--ease-standard);
}
html[data-theme] body .site-header .primary-navigation a { --motion-hover: 200ms; }
.home-cover-button { transition: border-color var(--theme-colour-duration, var(--ui-feedback)) ease, background-color var(--theme-colour-duration, var(--ui-feedback)) ease, transform var(--ui-feedback) var(--ease-standard); }

/* Small editorial labels should remain readable over paper and photographs. */
.home-photo-card figcaption { font-size: 12px; letter-spacing: .08em; flex-wrap: wrap; }
.home-photo-card figcaption > :last-child { color: var(--label-ink); font-size: 12px; }
.home-destination-label { font-size: 12px; }
.gallery-page .gallery-intro-note { color: var(--label-ink) !important; font-size: 12px !important; }
.gallery-page :is(.gallery-filter-group legend, .gallery-photo-count) { color: var(--label-ink); font-size: 12px; }
.gallery-page .gallery-filter-state { font-size: 12px; line-height: 1.6; }
.photo-dialog .caption-kicker, .photo-dialog .photo-meta-grid dt { color: var(--label-ink); font-size: 12px; line-height: 1.6; }
.photo-dialog .photo-meta-grid dd { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.photo-dialog .photo-dialog-nav { font-size: 12px; }
.contact-popover :is(.contact-popover-kicker, .contact-popover-location) { color: var(--label-ink); font-size: 12px; }
.contact-popover .contact-popover-actions a { font-size: 12px; }

@media (max-width: 700px) {
  body { --glass-blur: 8px; }
  .gallery-page .gallery-filter-panel { --glass-blur: 12px; }
  .work-page .gallery-filter-groups { gap: 12px; }
  .work-page .filter-set { flex-wrap: wrap; gap: 6px 10px; }
  .gallery-page .gallery-filter-state { flex: 1; min-width: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body :is(.contact-popover, .gallery-filter-panel, .gallery-more-options, .photo-dialog) { background: var(--bg, var(--paper)); }
  .site-header::before { background: var(--bg, var(--paper)); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.gallery-filter-panel, .gallery-filter-option, .gallery-filter-chevron, .gallery-filter > summary, .gallery-more-collections > summary, .filter-button, .theme-toggle, .menu-toggle, .contact-link, .contact-popover-actions a, .photo-dialog-nav, .photo-dialog-close, .home-cover-button) { transition: none !important; }
}

/* The same quiet controls and footer finish every editorial page. */
body {
  --footer-surface: var(--bg);
  --footer-ink: var(--ink);
  --footer-muted: var(--ink-soft);
  --footer-rule: var(--rule);
  --footer-accent: var(--accent);
  --motion-reveal: 850ms;
}
html[data-theme] body :is(.home-cover-button, .work-intro-link, .contact-submit, .contact-actions .contact-link) {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
}
html[data-theme] body :is(.home-cover-button, .work-intro-link, .contact-submit, .contact-link) .arrow-icon {
  width: 19px;
  height: 19px;
  transition: transform 220ms var(--ease-standard), color var(--theme-colour-duration, 200ms) ease;
}
.home-page :is(.home-kicker, .home-editorial-link, .home-quote-note),
.work-page :is(.eyebrow, .caption-kicker, .collection-index, .collection-count, .filter-button span) {
  font-size: 12px;
  letter-spacing: .08em;
}
.home-page :is(.home-editorial-copy p, .home-selected-copy) { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.85; }
.contact-popover-copy { font-size: 14px; }
html[data-theme] body .site-footer { padding-block: 32px; min-height: 164px; }
html[data-theme="light"] body .copyright-signature { filter: brightness(0); }

/* Put the floating control in the outer gutter on wider layouts. Phone
   captions reserve a small area so their words never sit beneath the button. */
html[data-theme] body .contact-float {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
}
@media (max-width: 700px) {
  .home-photo-card figcaption, .work-caption { padding-right: 52px; }
  .home-photo-card figcaption { gap: 4px 12px; }
  html[data-theme] body .site-footer { padding-block: 28px 36px; }
  html[data-theme] body.work-page .filter-button { font-size: 11px; letter-spacing: .04em; }
}

/* Camera information remains visible in the original photograph viewer. */
.photo-dialog .photo-dialog-description { font-size: 15px; line-height: 1.75; }
.photo-dialog .photo-dialog-position { font-size: 12px; }
.photo-dialog .photo-dialog-navigation { margin-top: 20px; }
.photo-dialog .photo-dialog-art, .photo-dialog .photo-dialog-info { will-change: auto !important; }
.gallery-page .photo-dialog { --gallery-popup-sequence: 1300ms; --gallery-popup-image: 700ms; }
@media (max-width: 850px) {
  .photo-dialog .photo-dialog-info { padding: 24px; }
  .photo-dialog .photo-dialog-description { margin-top: 12px; }
}
@media (max-width: 380px) {
  html[data-theme] body :is(.home-cover-button, .work-intro-link, .contact-submit, .contact-actions .contact-link) { padding-inline: 16px; }
  .photo-dialog .photo-dialog-info { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.home-cover-button, .work-intro-link, .contact-submit, .contact-link) .arrow-icon { transition: none; }
  html[data-theme] body.gallery-page .gallery-filter > summary,
  html[data-theme] body.gallery-page .gallery-filter-chevron { transition: none !important; }
}

/* Neutral charcoal surfaces keep the dark theme free of an olive cast. */
html[data-theme="dark"] body { --navigation-glass-colour: #090909; --label-ink: #bbb8b2; }
html[data-theme="dark"] body.home-page .home-cover { background: #090909; }
html[data-theme="dark"] body.home-page .home-cover-art::after {
  background-color: rgba(9, 9, 9, .50);
  background-image: linear-gradient(90deg, rgba(4, 4, 4, .62), rgba(4, 4, 4, .24) 39%, transparent 65%), linear-gradient(0deg, rgba(4, 4, 4, .28), transparent 35%);
}
@media (max-width: 700px) {
  html[data-theme="dark"] body.home-page .home-cover-art::after {
    background-image: radial-gradient(ellipse at 50% 48%, rgba(4, 4, 4, .28), transparent 76%), linear-gradient(0deg, rgba(4, 4, 4, .6), rgba(4, 4, 4, .38) 58%, rgba(4, 4, 4, .04));
  }
}

html[data-theme="dark"] body.home-page .home-cover-button { background: rgba(9, 9, 9, .78); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] body.home-page .home-cover-button:hover { background: rgba(9, 9, 9, .95); }
}

/* Anthropic's display cut carries more visual weight than Cormorant.
   Large editorial copy uses Light; smaller titles keep Regular for clarity. */
html body { font-stretch: normal; letter-spacing: .008em; }
html body :is(h1, .home-display, .section-heading h2, .about-heading h2,
  .about-story-heading h2, .about-final-copy h2, .contact-content h2,
  .contact-closing h2, .home-quote) {
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.08;
}
html body :is(h1, .home-display, .section-heading h2, .about-heading h2,
  .about-story-heading h2, .about-final-copy h2, .contact-content h2,
  .contact-closing h2, .home-quote) em { font-weight: 300; }
html body :is(.work-caption h3, .footer-name) { font-weight: 400; }
html body :is(.home-cover-tagline, .about-lead, .about-aside,
  .about-approach-statement, .home-explore-note) { font-weight: 300; }
html body :is(.home-cover-intro, .home-editorial-copy p, .home-selected-copy,
  .work-intro-copy, .gallery-intro-aside p, .contact-heading-copy,
  .about-copy p, .contact-aside p) { letter-spacing: .012em; word-spacing: .025em; }
html body :is(input, textarea, select) { font-stretch: normal; letter-spacing: .01em; }
@media (min-width: 1200px) {
  html body.home-page .home-cover-copy { width: min(57%, 680px); }
  html body.home-page .home-cover h1 { font-size: clamp(52px, 4.4vw, 74px); }
}
html body.work-page .work-intro h1,
html body.work-page .work-intro h1 em { font-weight: 300; letter-spacing: -.025em; }
html body :is(h1, .home-display, .section-heading h2, .about-heading h2,
  .about-story-heading h2, .about-final-copy h2, .contact-content h2,
  .contact-closing h2) { word-spacing: .025em; }

/* Photograph frames stay still and unlit; only the image moves on hover. */
html[data-theme] body :is(.hero-art, .work-card, .work-art, .about-image,
  .portrait-frame, .about-intro-portrait, .about-intro-frame, .about-category,
  .gallery-tile, .gallery-photo-open, .home-photo-card, .home-photo-link,
  .home-photo-frame, .home-destination, .contact-destination) {
  box-shadow: none !important;
}
html[data-theme] body :is(.work-art, .about-image, .portrait-frame,
  .about-intro-frame, .gallery-photo-open, .home-photo-frame,
  .home-destination, .contact-destination) { overflow: hidden; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-theme] body :is(.work-card, .about-category):hover {
    transform: none !important;
  }
  html[data-theme] body .about-intro-frame img {
    transition: transform 1100ms cubic-bezier(.22, .61, .36, 1);
  }
  html[data-theme] body.gallery-page .gallery-tile.is-previously-revealed.is-loaded .gallery-photo {
    transition: transform 1000ms cubic-bezier(.22, .61, .36, 1);
  }
  html[data-theme] body .work-card.is-visible:hover .work-art img,
  html[data-theme] body .work-card:not(.reveal-on-scroll):hover .work-art img,
  html[data-theme] body .portrait-frame:hover img,
  html[data-theme] body .about-intro-frame:hover img,
  html[data-theme].has-reveal body.about-page .about-image.is-image-visible:hover img,
  html[data-theme]:not(.has-reveal) body .about-image:hover img,
  html[data-theme] body.gallery-page .gallery-tile.is-visible.is-loaded .gallery-photo-open:hover .gallery-photo,
  html[data-theme]:not(.has-reveal) body .gallery-photo-open:hover .gallery-photo,
  html[data-theme].has-reveal body.home-page.home-scroll-ready.home-media-enabled .home-reveal.is-visible .home-photo-link:hover .is-home-image-ready,
  html[data-theme].has-reveal body.home-page.home-scroll-ready.home-media-enabled .home-destination.is-visible:hover > .is-home-image-ready,
  html[data-theme] body .home-photo-link:hover img,
  html[data-theme] body .home-destination:hover > img,
  html[data-theme] body .contact-destination:hover > img {
    transform: scale(1.018) !important;
    transition-delay: 0ms !important;
  }
}


/* Source: typography-finish.css */
/* Serif glyphs paint with their authored ink. Background-clipped gradients
   cut off descenders and italic overhang at tight display line boxes. Solid
   glyph paint preserves the fonts, sizes, spacing and entrance choreography. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) and (color: color-mix(in srgb, black, transparent)) {
  html[data-theme] body :is(
    .home-cover h1 > .home-cover-enter,
    .home-display > .home-motion,
    .work-title-line,
    .gallery-title-line,
    .about-title-line,
    .contact-heading h1,
    .contact-direct-line,
    .contact-closing h2,
    .about-story-heading h2,
    .about-final-copy h2,
    .section-heading h2,
    .work-collection-head h2
  ),
  html[data-theme] body :is(
    .home-cover h1,
    .home-display,
    .work-intro h1,
    .gallery-intro h1,
    .about-heading h1,
    .about-intro-heading h1,
    .contact-heading h1,
    .contact-content h2,
    .contact-closing h2,
    .about-story-heading h2,
    .about-final-copy h2,
    .section-heading h2
  ) em {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}
/* Native high contrast and print keep the original, solid text colours. */
@media (forced-colors: active), print {
  html[data-theme] body :is(main h1, main h2, main h3, main h1 span,
    main h2 span, main h1 em, main h2 em, main h3 em) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}


/* Source: about-intro.css */
/* One editorial composition: a portrait paired with the page's main statement. */
.about-page .about-intro {
  padding-block: clamp(44px, 5vw, 72px) 0;
  color: var(--ink);
}
.about-page .about-intro-shell {
  display: grid;
  width: var(--shell);
  grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
  grid-template-areas: "portrait heading" "portrait bio";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 88px);
  align-items: stretch;
}
.about-page .about-intro-shell > * { min-width: 0; }
.about-page .about-intro-heading { grid-area: heading; }
.about-page .about-intro-label {
  display: flex;
  gap: 16px;
  margin: 0 0 22px;
  color: var(--label-ink, var(--muted));
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .12em;
}
.about-page .about-intro-label span { color: var(--accent); }
.about-page .about-intro-heading h1 {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 5.5vw, 78px);
  line-height: 1.06;
  letter-spacing: -.025em;
}
.about-page .about-intro-heading .about-title-line { display: block; }
.about-page .about-intro-heading h1 em { color: var(--accent); font-weight: 300; }
.about-page .about-intro-portrait {
  grid-area: portrait;
  width: 100%;
  margin: 0;
  align-self: start;
}
.about-page .about-intro-frame {
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 560px;
  overflow: hidden;
  background: var(--photo-matte);
}
.about-page .about-intro-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transition: transform 1100ms cubic-bezier(.16,1,.3,1);
}
.about-page .about-intro-portrait figcaption {
  padding-top: 14px;
  color: var(--label-ink, var(--muted));
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.about-page .about-intro-bio {
  grid-area: bio;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding-block: 26px 32px;
}
.about-page .about-intro-writing { max-width: 600px; }
.about-page .about-intro-lead {
  margin: 0 0 22px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(22px, 1.75vw, 25px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.about-page .about-intro-lead :is(span, em) { display: block; }
.about-page .about-intro-lead em { font-weight: 300; color: var(--ink-soft); }
.about-page .about-intro-copy {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
  letter-spacing: .01em;
  text-wrap: pretty;
}
.about-page .about-intro-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.about-page .about-intro-location {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .01em;
}
.about-page .about-intro-location span {
  color: var(--label-ink, var(--muted));
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.about-page .about-intro-work {
  display: inline-flex;
  min-height: 44px;
  max-width: 100%;
  align-items: center;
  gap: 22px;
  padding-block: 9px 5px;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .015em;
  transition: color var(--theme-colour-duration, 250ms) ease, border-color var(--theme-colour-duration, 250ms) ease;
}
.about-page .about-intro-work .arrow-icon { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.about-page .about-intro-work:hover { color: var(--accent); border-color: var(--accent); }
.about-page .about-intro-work:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.about-page .about-page-story { padding-top: 0; }
@media (min-width: 701px) and (max-width: 1000px) {
  .about-page .about-intro-shell { column-gap: 36px; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); }
  .about-page .about-intro-heading h1 { font-size: clamp(48px, 6.2vw, 60px); }
  .about-page .about-intro-label { margin-bottom: 16px; }
  .about-page .about-intro-frame { aspect-ratio: 2 / 3; }
  .about-page .about-intro-bio { padding-block: 22px 0; gap: 24px; }
  .about-page .about-intro-lead { font-size: 22px; margin-bottom: 18px; }
  .about-page .about-intro-details { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .about-page .about-intro-work { justify-self: start; }
}
@media (max-width: 700px) {
  .about-page .about-intro { padding-top: 32px; }
  .about-page .about-intro-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "portrait" "bio";
    grid-template-rows: auto;
    gap: 28px;
  }
  .about-page .about-intro-heading h1 { font-size: clamp(48px, 12.5vw, 66px); line-height: 1.04; }
  .about-page .about-intro-label { margin-bottom: 16px; }
  .about-page .about-intro-frame { max-height: 520px; }
  .about-page .about-intro-bio { padding: 0; gap: 28px; }
  .about-page .about-intro-writing { max-width: 55ch; }
  .about-page .about-intro-lead { font-size: 24px; }
  .about-page .about-intro-details { gap: 16px; }
  .about-page .about-intro-work { gap: 12px; font-size: 12px; }
}
@media (max-width: 380px) {
  .about-page .about-intro-portrait figcaption { font-size: 10px; }
  .about-page .about-intro-details { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .about-page .about-intro-work { justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  html.about-intro-motion .about-intro [data-about-enter] { opacity: 0; transform: translate3d(0, 12px, 0); }
  html.about-intro-motion .about-intro [data-about-enter].is-intro-visible {
    animation: about-intro-editorial 1050ms cubic-bezier(.22, 1, .36, 1) var(--intro-delay, 0ms) both;
  }
  /* Scroll reveals start promptly, independently of the opening timeline. */
  html.about-intro-motion .about-intro [data-about-enter].is-intro-scroll { --intro-delay: 0ms !important; }
  @keyframes about-intro-editorial {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  html.about-intro-motion .about-intro.is-intro-focused [data-about-enter] {
    opacity: 1; transform: none; animation: none;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .about-intro [data-about-enter] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html.about-intro-motion[data-about-intro-ready] .about-intro-frame img {
    opacity: 0;
    transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 1100ms cubic-bezier(.16,1,.3,1);
  }
  html.about-intro-motion[data-about-intro-ready] .about-intro-frame img.is-intro-image-ready { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-page .about-intro-frame:hover img { transform: scale(1.025); }
}


/* Source: apple-system.css */
/* Generated by scripts/build-apple-system.mjs. Edit the source layers, then rebuild. */

/* Source: apple-polish.css */
/* A removable Apple-inspired finish for the existing editorial identity. */
html {
  --polish-feedback: 180ms;
  --polish-panel: 280ms;
  --polish-ease: cubic-bezier(.28, .11, .32, 1);
  scroll-padding-top: 100px;
}
html[data-theme] body { --site-header-height: 84px; }
html[data-theme] body .site-header {
  height: 84px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--theme-colour-duration, var(--polish-feedback)) ease;
}
html[data-theme] body .site-header .header-inner {
  height: 83px;
  min-height: 83px;
  padding-block: 0 !important;
}
html[data-theme] .site-header::before {
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
html[data-theme="light"] body { --navigation-glass-tint: 84%; }
html[data-theme="dark"] body { --navigation-glass-tint: 78%; }
html.apple-scrolled[data-theme] body .site-header {
  border-bottom-color: color-mix(in srgb, var(--rule) 58%, transparent);
}
html[data-theme] body .header-controls { gap: 22px; }
@media (min-width: 701px) {
  html[data-theme] body .primary-navigation { gap: clamp(22px, 3vw, 38px); }
  html[data-theme] body .primary-navigation a::after { bottom: 0; }
}
html[data-theme] body :is(.theme-toggle, .menu-toggle, .photo-dialog-close,
  .photo-dialog-nav, .gallery-filter-close, .gallery-filter-done) {
  min-width: 44px;
  min-height: 44px;
}
html[data-theme] body :is(.theme-toggle, .menu-toggle, .contact-link,
  .contact-popover-actions a, .photo-dialog-nav, .photo-dialog-close,
  .gallery-filter-option, .gallery-filter-close, .gallery-filter-done,
  .work-intro-link, .gallery-view-link, .about-gallery-link) {
  transition: color var(--theme-colour-duration, var(--polish-feedback)) ease,
    background-color var(--theme-colour-duration, var(--polish-feedback)) ease,
    border-color var(--theme-colour-duration, var(--polish-feedback)) ease,
    opacity var(--polish-feedback) ease !important;
}
html[data-theme] body :is(.work-intro-link, .gallery-view-link, .about-gallery-link) {
  border-radius: 999px;
  box-shadow: none !important;
}
html[data-theme] body .work-intro-link:hover { transform: none; }
html[data-theme] body :is(.work-intro-link, .gallery-view-link, .about-gallery-link):active { opacity: .78; }
html[data-theme] body .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
html[data-theme] body.home-page .home-cover-button {
  min-height: 52px;
  padding-inline: 28px;
  border-color: #f5f2ec;
  border-radius: 999px;
  background: #f5f2ec;
  color: #242824;
  box-shadow: none;
  transition: opacity var(--polish-feedback) ease, background-color var(--theme-colour-duration, var(--polish-feedback)) ease;
}
html[data-theme] body.home-page .home-cover-button:hover { background: #fcfaf6; border-color: #fcfaf6; }
html[data-theme] body.home-page .home-cover-button:active { opacity: .78; }
html[data-theme] body .contact-submit { border-radius: 12px; box-shadow: none; }
html[data-theme] body .contact-field :is(input, textarea),
html[data-theme] body .contact-inquiry-trigger { border-radius: 10px; }
html[data-theme] body :is(.work-art, .home-photo-frame, .about-image) { border-radius: 10px; }
html[data-theme] body .about-intro-frame { border-radius: 14px; }
html[data-theme] body :is(.home-destination, .contact-destination) { border-radius: 16px; }
html[data-theme] body .gallery-photo-open { border-radius: 6px; }
html[data-theme] body .site-footer { border-top-color: color-mix(in srgb, var(--rule) 60%, transparent); }

/* A filter is a quiet control; the collection remains the dominant element. */
html[data-theme] body.gallery-page .gallery-toolbar { gap: 20px; padding-block: 16px; }
html[data-theme] body.gallery-page .gallery-filter > summary {
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent);
  border-radius: 999px;
  background: var(--surface, var(--paper-deep));
  color: var(--ink);
  box-shadow: none !important;
  animation: none !important;
  transition: background-color var(--theme-colour-duration, var(--polish-feedback)) ease, border-color var(--theme-colour-duration, var(--polish-feedback)) ease !important;
}
html[data-theme] body.gallery-page .gallery-filter > summary > span:first-child { letter-spacing: .065em !important; }
html[data-theme] body.gallery-page .gallery-filter > summary:is(:hover, [aria-expanded="true"]) {
  border-color: var(--accent);
  background: var(--control-hover);
  color: var(--ink);
}
html[data-theme] body.gallery-page .gallery-filter-panel {
  --motion-panel: 280ms;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(580px, calc(100vw - 72px));
  max-height: min(68dvh, var(--apple-filter-space, 590px));
  padding: 20px 22px 24px;
  border-radius: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 12px 36px rgb(0 0 0 / 10%);
  transform: translate3d(0, -6px, 0);
  transition: opacity 220ms var(--polish-ease), transform var(--polish-panel) var(--polish-ease), visibility 0s linear var(--polish-panel);
}
html[data-theme] body.gallery-page .gallery-filter-panel.is-open { transform: none; transition-delay: 0s; }
@media (min-width: 701px) {
  html[data-theme] body.gallery-page .gallery-filter-panel[data-placement="above"] {
    top: auto !important;
    bottom: calc(100% + 9px);
  }
}
.gallery-filter-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.gallery-filter-content { display: grid; min-height: 0; gap: 22px; overflow-y: auto; overscroll-behavior: contain; }
.gallery-filter-heading p { margin: 0; color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.gallery-filter-close { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.gallery-filter-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.gallery-filter-close:hover { background: var(--control-hover); color: var(--ink); }
html[data-theme] body.gallery-page .gallery-filter-panel .gallery-filter-options { gap: 8px; }
html[data-theme] body.gallery-page .gallery-filter-option,
html[data-theme] body.gallery-page .gallery-more-collections > summary {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--control-hover);
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: none;
  transform: none !important;
}
html[data-theme] body.gallery-page .gallery-filter-option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--ink);
}
html[data-theme] body.gallery-page .gallery-filter-option:hover { color: var(--ink); border-color: var(--rule); }
html[data-theme] body.gallery-page .gallery-more-collections[open] { flex-basis: 100%; }
html[data-theme] body.gallery-page .gallery-more-options {
  position: static;
  width: 100%;
  max-width: none;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
.gallery-filter-done { display: none; }
.apple-filter-scrim { position: fixed; z-index: 90; inset: 0; background: rgb(0 0 0 / 35%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--polish-panel) ease, visibility 0s linear var(--polish-panel); }

/* The photograph gets the space; information is an opaque, readable sidebar. */
html[data-theme] body .photo-dialog {
  --motion-dialog: 320ms;
  --motion-panel: 280ms;
  width: min(1440px, calc(100vw - 48px));
  height: min(88dvh, 960px);
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
}
html[data-theme] body.gallery-page .photo-dialog { height: min(90dvh, 980px); }
html[data-theme] body .photo-dialog-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
html[data-theme] body .photo-dialog:not(.is-hero) .photo-dialog-art {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  background: var(--photo-matte);
}
html[data-theme] body .photo-dialog-art img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
html[data-theme] body .photo-dialog .photo-dialog-info { padding: 64px 26px 28px; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] body .photo-dialog-info h2 { font-size: clamp(30px, 2.8vw, 38px); }
html[data-theme] body .photo-dialog .photo-meta-grid { margin-top: 24px; }
html[data-theme] body .photo-dialog .photo-meta-grid > div { gap: 10px; grid-template-columns: 84px minmax(0, 1fr); padding-block: 10px; }
html[data-theme] body .photo-dialog .photo-meta-grid dt { font-size: 10px; letter-spacing: .08em; }
html[data-theme] body .photo-dialog .photo-meta-grid dd { font-size: 13px; }
html[data-theme] body .photo-dialog .photo-dialog-close {
  top: 12px; right: 12px;
  border: 0; border-radius: 50%;
  background: var(--paper-deep); color: var(--ink);
  box-shadow: none;
}
html[data-theme] body .photo-dialog .photo-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme] body .photo-dialog .photo-dialog-nav { gap: 8px; padding-inline: 10px; border-radius: 999px; letter-spacing: .01em; text-transform: none; }
html[data-theme] body .photo-dialog .photo-dialog-nav:hover { background: var(--control-hover); }
html[data-theme] body .photo-dialog::backdrop { background: rgb(0 0 0 / 72%); }

/* A consistent chapter rhythm makes a long biography easier to follow. */
html[data-theme] body.about-page .about-story { margin-top: clamp(68px, 7vw, 96px); padding-top: 36px; }
html[data-theme] body.about-page .about-story .about-label { font-size: 11px; letter-spacing: .12em; }
html[data-theme] body.about-page .about-story.is-visible { border-top-color: color-mix(in srgb, var(--rule) 65%, transparent) !important; }
html[data-theme] body.about-page .about-category h3 { margin-top: 18px; margin-bottom: 10px; }
html[data-theme] body.about-page .about-category p { max-width: 40ch; }

@media (max-width: 850px) {
  html[data-theme] body .photo-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  html[data-theme] body .photo-dialog-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html[data-theme] body .photo-dialog:not(.is-hero) .photo-dialog-art { height: min(calc((100vw - 24px) * 2 / 3), 50dvh); }
  html[data-theme] body .photo-dialog .photo-dialog-info { padding: 26px; }
  html[data-theme] body .photo-dialog .photo-dialog-close { background: var(--paper); }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 92px; }
  html[data-theme] body { --site-header-height: 76px; }
  html[data-theme] body .site-header { height: 76px; }
  html[data-theme] body .site-header .header-inner { height: 75px; min-height: 75px; }
  html[data-theme] body .site-header .wordmark { --wordmark-width: 68px; }
  html[data-theme] body .site-header .header-controls { gap: 10px; }
  html[data-theme] body .site-header .primary-navigation {
    --motion-panel: 280ms;
    transition: opacity 220ms var(--polish-ease), transform var(--polish-panel) var(--polish-ease), visibility 0s linear var(--polish-panel);
  }
  html[data-theme] .site-header::before { transition: --navigation-glass-opacity var(--polish-panel) var(--polish-ease), background-color var(--theme-colour-duration, 450ms) ease; }
  html[data-theme] body.gallery-page .gallery-toolbar { gap: 12px 16px; }
  html[data-theme] body.gallery-page .gallery-filter > summary { justify-content: space-between; width: 100%; }
  html[data-theme] body.gallery-page .gallery-filter-panel {
    --motion-panel: 320ms;
    position: fixed !important;
    z-index: 100 !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px !important; right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 600px !important;
    max-height: min(76dvh, 620px);
    margin-inline: auto !important;
    padding: 14px 20px max(20px, env(safe-area-inset-bottom));
    border-radius: 22px;
    background: var(--surface, var(--paper)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    opacity: 1;
    transform: translate3d(0, calc(100% + 24px), 0);
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
  }
  html[data-theme] body.gallery-page .gallery-filter-panel.is-open { transform: none; transition-delay: 0s; }
  html.gallery-filter-active { overflow: hidden; overscroll-behavior: none; }
  html.gallery-filter-active body { overflow: visible; }
  html.gallery-filter-active .apple-filter-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  /* The sheet and scrim share a root stacking context. */
  html.gallery-filter-active body.gallery-page :is(.gallery-main, .gallery-archive, .gallery-toolbar, .gallery-filter) { z-index: auto; isolation: auto; }
  .gallery-filter-heading { margin-bottom: 8px; }
  .gallery-filter-done { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 100%; margin-top: 2px; border: 0; border-radius: 12px; min-height: 48px; background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; cursor: pointer; }
  html[data-theme] body.gallery-page .gallery-filter-done { min-height: 48px; }
  html[data-theme] body.about-page .about-story { margin-top: 64px; padding-top: 28px; }
  html[data-theme] body .photo-dialog .photo-dialog-info { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.site-header, .site-header::before, .primary-navigation,
    .gallery-filter-panel, .gallery-filter-close, .gallery-filter-done,
    .apple-filter-scrim, .photo-dialog, .photo-dialog-close, .photo-dialog-nav,
    .work-intro-link, .gallery-view-link, .about-gallery-link) { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] .site-header::before,
  html[data-theme] body .gallery-filter-panel { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Source: apple-chrome.css */
/* Shared design primitives. Page-specific composition is bundled after these. */
html[data-theme] {
  --apple-control-radius: 999px;
  --apple-card-radius: 14px;
  --apple-feedback: 180ms;
  --apple-panel: 280ms;
  --apple-ease: cubic-bezier(.22, 1, .36, 1);
  --apple-chrome: color-mix(in srgb, var(--surface) 88%, transparent);
  --apple-chrome-rule: color-mix(in srgb, var(--ink) 10%, transparent);
  scroll-padding-top: 100px;
}
html[data-theme] body {
  --motion-fast: 180ms;
  --motion-ui: 220ms;
}

/* Keep the original header; a single rounded highlight follows its links. */
@media (min-width: 701px) {
  html[data-theme] body .site-header .primary-navigation {
    position: relative;
    gap: 6px;
    isolation: isolate;
  }
  html[data-theme] body .site-header .primary-navigation a {
    z-index: 1;
    padding-inline: 16px;
    border-radius: 999px;
  }
  html[data-theme] body .site-header .primary-navigation a::after { display: none; }
  .navigation-highlight {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 44px;
    border-radius: 999px;
    background: var(--control-hover);
    pointer-events: none;
    opacity: 0;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1),
      width 280ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  }
  .navigation-highlight.is-positioned { opacity: 1; }
  .navigation-highlight.is-initializing { transition: none; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  html[data-theme] body .site-header .primary-navigation { gap: 2px; }
  html[data-theme] body .site-header .primary-navigation a { padding-inline: 10px; font-size: 11px; }
  html[data-theme] body .site-header .header-controls { gap: 10px; }
}
@media (max-width: 700px) {
  .navigation-highlight { display: none; }
  html[data-theme] body .site-header .primary-navigation a {
    padding-inline: 14px;
    border: 0;
    border-radius: 12px;
  }
  html[data-theme] body .site-header .primary-navigation a[aria-current="page"] {
    background: var(--control-hover);
  }
}

/* The same action language appears in the hero, pages and closing sections. */
html[data-theme] body :is(.home-cover-button, .work-intro-link,
  .contact-link, .gallery-view-link, .about-gallery-link, .contact-submit) {
  min-height: 48px;
  border-radius: var(--apple-control-radius);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  text-transform: none;
  box-shadow: none !important;
}
html[data-theme] body :is(.contact-link, .gallery-view-link, .about-gallery-link):hover {
  transform: none;
}
html[data-theme] body :is(.contact-link, .gallery-view-link, .about-gallery-link):active { opacity: .76; }
html[data-theme] body :is(.home-cover-button, .work-intro-link, .contact-link) .arrow-icon { color: currentColor; }
html[data-theme] body :is(.home-photo-frame, .work-art, .home-destination, .contact-destination) {
  border-radius: var(--apple-card-radius);
}
html[data-theme] body :is(.contact-popover-actions a, .photo-dialog-nav, .photo-dialog-close):hover {
  transform: none !important;
}
html[data-theme] body :is(button, summary, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
html[data-theme] body .contact-float-button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--apple-chrome-rule);
  border-radius: 50%;
  background: var(--apple-chrome);
  color: var(--ink);
  box-shadow: 0 3px 16px rgb(0 0 0 / 6%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: none !important;
  transition: background-color var(--theme-colour-duration, 180ms) ease, border-color var(--theme-colour-duration, 180ms) ease !important;
}
html[data-theme] body .contact-float-button:hover {
  background: var(--control-hover);
  border-color: var(--rule);
  box-shadow: 0 3px 16px rgb(0 0 0 / 6%);
}
html[data-theme] body .contact-popover {
  padding: 28px;
  border-radius: var(--apple-card-radius);
  border-color: var(--apple-chrome-rule);
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 12px 36px rgb(0 0 0 / 12%);
}
html[data-theme] body .contact-popover-close { min-width: 44px; min-height: 44px; border-radius: 50%; }
html[data-theme] body .contact-popover-actions a {
  min-height: 44px;
  border-radius: var(--apple-control-radius);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] body .site-footer {
  min-height: 140px;
  gap: 20px 32px;
  padding-block: 32px;
}
html[data-theme] body .footer-name { font-size: 24px; font-weight: 300; letter-spacing: -.02em; }
html[data-theme] body .site-footer > p { font-size: 12px; }
html[data-theme] body .footer-links { gap: 8px 24px; }
html[data-theme] body .footer-links a { font-size: 12px; letter-spacing: 0; text-transform: none; }
html[data-theme] body .copyright-signature { opacity: .65; }

@media (max-width: 700px) {
  /* One element owns the menu surface and its links. The header's old
     animated glass mask caused the background to move on a second timeline. */
  html[data-theme] body .site-header::before {
    bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
    transition: background-color var(--theme-colour-duration, 300ms) ease;
  }
  html[data-theme] body .site-header .primary-navigation {
    --motion-panel: 320ms;
    top: calc(var(--site-header-height) - 1px);
    padding: 12px 20px 20px;
    max-height: calc(100dvh - var(--site-header-height) - 16px);
    border: 0;
    border-bottom: 1px solid var(--apple-chrome-rule);
    border-radius: 0 0 20px 20px;
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 240ms cubic-bezier(.22, 1, .36, 1),
      transform 320ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 320ms;
  }
  html[data-theme] body .site-header .primary-navigation.is-open {
    transition-delay: 0s;
  }
  html[data-theme] body .site-header .primary-navigation a {
    min-height: 48px;
    opacity: 1;
    transform: none !important;
    transition: background-color var(--theme-colour-duration, 180ms) ease, color var(--theme-colour-duration, 180ms) ease !important;
    transition-delay: 0s !important;
  }
  .navigation-scrim {
    inset: 0;
    background: rgb(0 0 0 / 28%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.navigation-lock { overflow: hidden; overscroll-behavior: none; }
  html.navigation-lock body { overflow: visible; }
  html.navigation-lock .navigation-scrim { pointer-events: auto; }
  html[data-theme] body :is(.home-photo-frame, .work-art, .home-destination, .contact-destination) { border-radius: 20px; }
  html[data-theme] body .site-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 8px;
    padding: 28px 0 80px;
  }
  html[data-theme] body .site-footer > * { grid-column: 1; grid-row: auto; justify-self: start; }
  html[data-theme] body .site-footer .footer-links { flex-wrap: wrap; column-gap: 22px; row-gap: 0; }
  html[data-theme] body .site-footer .copyright { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.site-header, .site-header::before,
    .primary-navigation, .contact-float-button, .contact-popover-actions a),
  .navigation-highlight { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] body .contact-float-button {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body .contact-float-button { background: var(--surface); }
}

/* Source: apple-pages.css */
/* Page composition follows the shared Apple-inspired control language.
   The homepage cover and every entrance animation retain their existing owner. */
html[data-theme] body:is(.home-page, .work-page) {
  --apple-page-space: clamp(80px, 8vw, 120px);
  --apple-photo-gap: 24px;
}

/* One clear statement leads to the photographs, with supporting copy beneath. */
html[data-theme] body.home-page .home-selected {
  padding-bottom: var(--apple-page-space);
}
html[data-theme] body.home-page .home-selected > .page-shell {
  padding-top: var(--apple-page-space);
}
html[data-theme] body.home-page .home-section-head {
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-bottom: 48px;
  text-align: center;
}
html[data-theme] body.home-page .home-section-head > div:first-child {
  flex: initial;
  width: 100%;
}
html[data-theme] body.home-page .home-section-head .home-kicker {
  justify-content: center;
  margin-bottom: 24px;
  font-size: 11px;
  letter-spacing: .1em;
}
html[data-theme] body.home-page .home-section-head .home-kicker::after {
  display: none;
}
html[data-theme] body.home-page .home-section-head .home-display {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(48px, 5.6vw, 80px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
html[data-theme] body.home-page .home-selected-copy {
  width: 100%;
  max-width: 58ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  text-wrap: balance;
}
html[data-theme] body.home-page :is(.home-photo-grid, .home-destination-grid) {
  gap: var(--apple-photo-gap);
}
html[data-theme] body.home-page .home-photo-card figcaption {
  padding-top: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .005em;
  text-transform: none;
}
html[data-theme] body.home-page .home-photo-card figcaption > :last-child {
  font-size: 11px;
  letter-spacing: .02em;
}
html[data-theme] body.home-page .home-explore {
  padding-bottom: var(--apple-page-space);
}
html[data-theme] body.home-page .home-explore > .page-shell {
  padding-top: clamp(48px, 5.5vw, 80px);
  border-top-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
html[data-theme] body.home-page .home-explore-head {
  margin-bottom: 28px;
}
html[data-theme] body.home-page .home-explore .home-kicker {
  font-size: 11px;
  letter-spacing: .1em;
}
html[data-theme] body.home-page .home-destination {
  background: #151515;
}
html[data-theme] body.home-page .home-destination-copy {
  padding: clamp(16px, 2.4vw, 34px);
}
html[data-theme] body.home-page .home-destination h3 {
  margin-bottom: 28px;
  font-size: clamp(27px, 2.4vw, 36px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.025em;
}
html[data-theme] body.home-page .home-destination-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: none;
}
html[data-theme] body.home-page .home-quote-inner {
  padding-block: clamp(72px, 7vw, 104px);
}

/* The Work introduction keeps its proven line-by-line entrance. */
html[data-theme] body.work-page .work-intro {
  gap: 26px;
  padding-block: clamp(56px, 6vw, 88px);
}
html[data-theme] body.work-page .work-intro-copy {
  max-width: 48ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
}
html[data-theme] body.work-page .work-intro-link {
  min-height: 48px;
  padding-inline: 24px;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  text-transform: none;
  box-shadow: none;
}
html[data-theme] body.work-page .work-intro-link .arrow-icon {
  color: currentColor;
}
html[data-theme] body.work-page .work-intro-link:is(:hover, :focus-visible) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  opacity: .86;
  box-shadow: none;
  transform: none;
}
html[data-theme] body.work-page .work-intro-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
html[data-theme] body.work-page .work-collection-head {
  gap: 12px 32px;
}
html[data-theme] body.work-page .work-collection-head h2 {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.15;
}
html[data-theme] body.work-page .work-collection-head p {
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.6;
}

/* Independent segmented groups keep filtering calm and easy to scan. */
html[data-theme] body.work-page .gallery-tools {
  margin-block: 28px 18px;
  padding-bottom: 28px;
  border-bottom-color: color-mix(in srgb, var(--rule) 65%, transparent);
}
html[data-theme] body.work-page .gallery-filter-groups {
  align-items: center;
  gap: 16px 24px;
}
html[data-theme] body.work-page .filter-set {
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  border-radius: 999px;
  background: var(--surface, var(--paper-deep));
}
html[data-theme] body.work-page .filter-button {
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .005em;
  text-transform: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--theme-colour-duration, 180ms) ease, color var(--theme-colour-duration, 180ms) ease;
}
html[data-theme] body.work-page .filter-button::after {
  display: none;
}
html[data-theme] body.work-page .filter-button span {
  color: currentColor;
  opacity: .65;
  font-size: 10px;
  letter-spacing: 0;
}
html[data-theme] body.work-page .filter-button.is-active {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme] body.work-page .filter-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme] body.work-page .gallery-collection-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  min-height: 0;
  margin-bottom: 30px;
  padding-block: 28px;
  border-bottom-color: color-mix(in srgb, var(--rule) 65%, transparent);
}
html[data-theme] body.work-page .collection-index {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  letter-spacing: .09em;
}
html[data-theme] body.work-page .gallery-collection-title {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(34px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-align: left;
}
html[data-theme] body.work-page .collection-count {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding-bottom: 4px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .045em;
}
html[data-theme] body.work-page .collection-grid {
  column-gap: var(--apple-photo-gap);
  row-gap: clamp(44px, 5vw, 64px);
}
html[data-theme] body.work-page .work-caption {
  padding-top: 18px;
}
html[data-theme] body.work-page .work-caption .caption-kicker {
  margin-bottom: 8px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .07em;
}
html[data-theme] body.work-page .work-caption h3 {
  font-size: clamp(25px, 2.4vw, 33px);
  font-weight: 300;
  line-height: 1.2;
}
html[data-theme] body.work-page .gallery-foot {
  margin-top: 64px;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: .035em;
  border-top-color: color-mix(in srgb, var(--rule) 65%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body.work-page .filter-button:not(.is-active):hover {
    background: var(--control-hover);
    color: var(--ink);
  }
}
@media (max-width: 1000px) {
  html[data-theme] body.work-page .gallery-filter-groups {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  html[data-theme] body.work-page .filter-button {
    padding-inline: 12px;
  }
}
@media (max-width: 700px) {
  html[data-theme] body:is(.home-page, .work-page) {
    --apple-page-space: 72px;
    --apple-photo-gap: 20px;
  }
  html[data-theme] body.home-page .home-section-head {
    gap: 24px;
    margin-bottom: 36px;
  }
  html[data-theme] body.home-page .home-section-head .home-display {
    font-size: clamp(42px, 10.2vw, 64px);
    line-height: 1.08;
  }
  html[data-theme] body.home-page .home-selected-copy {
    max-width: 36ch;
    font-size: 16px;
    line-height: 1.8;
  }
  html[data-theme] body.home-page .home-photo-grid {
    row-gap: 32px;
  }
  html[data-theme] body.home-page .home-photo-card figcaption {
    padding-right: 52px;
  }
  html[data-theme] body.home-page .home-explore > .page-shell {
    padding-top: 48px;
  }
  html[data-theme] body.home-page .home-destination-copy { padding: 24px; }
  html[data-theme] body.home-page .home-destination h3 {
    font-size: clamp(29px, 7vw, 38px);
  }
  html[data-theme] body.work-page .work-intro {
    gap: 24px;
    padding-block: 52px 64px;
  }
  html[data-theme] body.work-page .work-collection-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  html[data-theme] body.work-page .work-collection-head p {
    font-size: 12px;
  }
  html[data-theme] body.work-page .gallery-tools {
    margin-block: 24px 12px;
    padding-bottom: 24px;
  }
  html[data-theme] body.work-page .gallery-filter-groups {
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  html[data-theme] body#page-top.work-page .filter-set {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    gap: 2px;
    padding: 3px;
  }
  html[data-theme] body#page-top.work-page .filter-button {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    gap: 4px;
    padding-inline: 6px;
    font-size: 12px;
    letter-spacing: 0;
    white-space: normal;
    text-wrap: balance;
  }
  html[data-theme] body#page-top.work-page .filter-button span {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  html[data-theme] body.work-page .gallery-collection-heading {
    gap: 12px 16px;
    padding-block: 24px;
    margin-bottom: 24px;
  }
  html[data-theme] body.work-page .gallery-collection-title {
    font-size: clamp(29px, 7.3vw, 40px);
  }
  html[data-theme] body.work-page .collection-count {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0;
    font-size: 9px;
  }
  html[data-theme] body.work-page .gallery-collection-title {
    grid-column: 1 / -1;
  }
  html[data-theme] body.work-page .collection-grid {
    row-gap: 36px;
  }
  html[data-theme] body.work-page .gallery-foot {
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 48px;
    text-align: center;
  }
  html[data-theme] body.work-page .gallery-foot #gallery-total,
  html[data-theme] body.work-page .gallery-foot .gallery-view-link {
    grid-column: 1;
    justify-self: center;
  }
}
@media (max-width: 700px) and (min-height: 620px) {
  html[data-theme] body.work-page .work-intro {
    padding-top: 76px;
  }
}
@media (max-width: 380px) {
  html[data-theme] body#page-top.work-page .filter-button {
    min-height: 50px;
    padding-inline: 4px;
    gap: 4px;
    font-size: 11px;
  }
  html[data-theme] body#page-top.work-page .filter-button span {
    font-size: 10px;
  }
}
@media (max-height: 600px) and (min-width: 701px) {
  html[data-theme] body.work-page .work-intro {
    gap: 18px;
    padding-block: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.work-page .filter-button {
    transition: none;
  }
}

/* Source: apple-content.css */
/* Content uses quiet, opaque materials; glass remains in the shared controls.
   This layer deliberately leaves the established reveal choreography intact. */
html[data-theme] body.about-page,
html[data-theme] body.contact-page {
  --content-card-radius: var(--apple-card-radius, 24px);
  --content-control-radius: var(--apple-control-radius, 999px);
  --content-hairline: color-mix(in srgb, var(--rule) 66%, transparent);
}

/* About: one portrait, one statement, then clearly separated chapters. */
html[data-theme] body.about-page .about-intro {
  padding-top: clamp(40px, 4.5vw, 64px);
}
html[data-theme] body.about-page .about-intro-shell {
  column-gap: clamp(40px, 5.5vw, 80px);
}
html[data-theme] body.about-page .about-intro-heading h1 {
  font-size: clamp(56px, 5.55vw, 80px);
  line-height: 1.055;
  letter-spacing: -.028em;
  text-wrap: balance;
}
html[data-theme] body.about-page .about-intro-label {
  margin-bottom: 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
}
html[data-theme] body.about-page .about-intro-frame {
  border-radius: var(--content-card-radius);
  box-shadow: none !important;
}
html[data-theme] body.about-page .about-intro-portrait figcaption {
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: .035em;
  text-transform: none;
}
html[data-theme] body.about-page .about-intro-bio {
  padding-top: 28px;
  padding-bottom: 12px;
  gap: 32px;
}
html[data-theme] body.about-page .about-intro-lead {
  max-width: 38ch;
  margin-bottom: 22px;
  font-size: clamp(23px, 1.9vw, 27px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -.015em;
}
html[data-theme] body.about-page .about-intro-copy {
  max-width: 44ch;
  font-size: clamp(16px, 1.22vw, 18px);
  line-height: 1.75;
  letter-spacing: .005em;
}
html[data-theme] body.about-page .about-intro-details {
  gap: 20px;
  padding-top: 22px;
  border-top-color: var(--content-hairline);
  align-items: center;
}
html[data-theme] body.about-page .about-intro-location {
  gap: 5px;
  font-size: 13px;
}
html[data-theme] body.about-page .about-intro-location span {
  font-size: 11px;
  letter-spacing: .035em;
  text-transform: none;
}
html[data-theme] body.about-page .about-intro-work {
  min-height: 44px;
  gap: 12px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: var(--content-control-radius);
  background: var(--control-hover);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  transition: background-color var(--theme-colour-duration, 180ms) ease, color var(--theme-colour-duration, 180ms) ease, opacity 180ms ease;
}
html[data-theme] body.about-page .about-intro-work:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 10%, var(--paper));
  color: var(--ink);
}
html[data-theme] body.about-page .about-intro-work:active { opacity: .74; }
html[data-theme] body.about-page .about-story {
  margin-top: clamp(80px, 8vw, 112px);
  padding-top: clamp(28px, 3.5vw, 44px);
}
html[data-theme] body.about-page .about-story-heading h2 {
  font-weight: 300;
  font-size: clamp(40px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
html[data-theme] body.about-page .about-story-heading .about-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
}
html[data-theme] body.about-page .about-image {
  border-radius: var(--content-card-radius);
}
html[data-theme] body.about-page :is(.about-copy p, .about-category p) {
  font-size: clamp(16px, 1.15vw, 17px);
  line-height: 1.8;
  letter-spacing: .005em;
}
html[data-theme] body.about-page .about-approach-statement {
  font-weight: 300;
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -.018em;
}
html[data-theme] body.about-page .about-categories {
  gap: clamp(22px, 2.5vw, 32px);
}
html[data-theme] body.about-page .about-category h3 {
  margin-top: 22px;
  margin-bottom: 10px;
  padding-top: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: none;
}
html[data-theme] body.about-page .about-category p { max-width: 35ch; }
html[data-theme] body.about-page .about-gallery-link {
  gap: 12px;
  padding-inline: 22px;
  border-color: transparent;
  background: var(--control-hover);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
html[data-theme] body.about-page .about-gallery-link:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 10%, var(--paper));
}
html[data-theme] body.about-page .about-final-copy h2 {
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.1;
}
html[data-theme] body.about-page .about-final-credit {
  padding-top: 18px;
  border-top-color: var(--content-hairline);
  font-size: 12px;
  letter-spacing: .015em;
}

/* Contact: a purposeful form card, with a consistent label and input rhythm. */
html[data-theme] body.contact-page .contact-main { background: none; }
html[data-theme] body.contact-page .contact-layout {
  column-gap: clamp(48px, 6vw, 88px);
}
html[data-theme] body.contact-page .contact-heading h1 {
  font-weight: 300;
  font-size: clamp(64px, 6.6vw, 94px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
html[data-theme] body.contact-page .contact-heading h1 em { font-weight: 300; }
html[data-theme] body.contact-page .contact-heading-copy {
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .005em;
}
html[data-theme] body.contact-page .contact-kicker {
  gap: 0;
  font-size: 11px;
  letter-spacing: .1em;
}
html[data-theme] body.contact-page .contact-kicker::after { display: none; }
html[data-theme] body.contact-page .contact-form-panel {
  padding: clamp(28px, 2.6vw, 40px);
  border: 1px solid var(--content-hairline);
  border-radius: var(--content-card-radius);
  background: var(--surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme] body.contact-page .contact-form-panel > .contact-kicker {
  margin-bottom: 26px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.018em;
  text-transform: none;
}
html[data-theme] body.contact-page .contact-form { gap: 24px; }
html[data-theme] body.contact-page .contact-field { gap: 9px; }
html[data-theme] body.contact-page .contact-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] body.contact-page .contact-field label > span {
  font-size: 12px;
  font-weight: 400;
}
html[data-theme] body.contact-page .contact-field :is(input, textarea, select),
html[data-theme] body.contact-page .contact-inquiry-trigger {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--rule) 78%, transparent);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  transition: border-color var(--theme-colour-duration, 180ms) ease, background-color var(--theme-colour-duration, 180ms) ease;
}
html[data-theme] body.contact-page .contact-field :is(input, textarea, select):hover,
html[data-theme] body.contact-page .contact-inquiry-trigger:hover {
  border-color: var(--rule-soft);
}
html[data-theme] body.contact-page .contact-field :is(input, textarea, select):focus,
html[data-theme] body.contact-page .contact-inquiry-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme] body.contact-page .contact-field:has([aria-invalid="true"]) label,
html[data-theme] body.contact-page .contact-field :is(input, textarea)[aria-invalid="true"] {
  color: var(--contact-error);
}
html[data-theme] body.contact-page .contact-field :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--contact-error);
  outline-color: var(--contact-error);
}
html[data-theme] body.contact-page .contact-field :is(input, textarea)[aria-invalid="true"]::placeholder {
  color: var(--contact-error);
}
html[data-theme] body.contact-page .contact-inquiry-menu {
  padding: 6px;
  border-radius: 16px;
  box-shadow: 0 10px 32px rgb(0 0 0 / 10%);
}
html[data-theme] body.contact-page .contact-inquiry-option {
  min-height: 46px;
  padding: 11px 13px;
  border: 0;
  border-radius: 10px;
}
html[data-theme] body.contact-page .contact-submit {
  min-height: 50px;
  gap: 24px;
  padding: 13px 22px;
  border-radius: var(--content-control-radius);
  background: var(--ink);
  border-color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
html[data-theme] body.contact-page .contact-submit:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  opacity: .86;
}
html[data-theme] body.contact-page .contact-submit:active:not(:disabled) {
  transform: none;
  opacity: .72;
}
html[data-theme] body.contact-page .contact-submit:hover:not(:disabled) .arrow-icon { transform: none; }
html[data-theme] body.contact-page .contact-form-note {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
}
html[data-theme] body.contact-page .contact-form-bottom { gap: 16px 22px; }
html[data-theme] body.contact-page .contact-form-status {
  max-width: 55ch;
  padding-top: 4px;
  line-height: 1.7;
}
html[data-theme] body.contact-page :is(.contact-section, .contact-closing) {
  border-top-color: var(--content-hairline);
}
html[data-theme] body.contact-page .contact-actions .contact-link {
  min-height: 48px;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--content-control-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] body.contact-page .contact-closing h2 {
  font-weight: 300;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.08;
}
html[data-theme] body.contact-page .contact-destination-grid { gap: 20px; }
html[data-theme] body.contact-page .contact-destination {
  border-radius: var(--content-card-radius);
  background: #101010;
}
html[data-theme] body.contact-page .contact-destination::after {
  background: linear-gradient(180deg, rgb(0 0 0 / 2%) 12%, rgb(0 0 0 / 76%) 100%);
}
html[data-theme] body.contact-page .contact-destination h3 {
  font-weight: 300;
  letter-spacing: -.02em;
}
html[data-theme] body.contact-page .contact-destination-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: none;
}
html[data-theme] body.contact-page .contact-success h2 { font-weight: 300; }
html[data-theme] body.contact-page .contact-success button {
  padding-inline: 18px;
  border: 0;
  border-radius: var(--content-control-radius);
  background: var(--control-hover);
}

@media (min-width: 701px) and (max-width: 1000px) {
  html[data-theme] body.about-page .about-intro-shell { column-gap: 32px; }
  html[data-theme] body.about-page .about-intro-heading h1 { font-size: clamp(48px, 6.2vw, 60px); }
  html[data-theme] body.about-page .about-intro-bio { padding-bottom: 0; gap: 24px; }
  html[data-theme] body.about-page .about-intro-lead { font-size: 23px; }
  html[data-theme] body.about-page .about-intro-work { justify-self: start; }
  html[data-theme] body.contact-page .contact-heading-copy { max-width: 46ch; }
}
@media (max-width: 700px) {
  html[data-theme] body.about-page .about-intro { padding-top: 32px; }
  html[data-theme] body.about-page .about-intro-shell { gap: 28px; }
  html[data-theme] body.about-page .about-intro-heading h1 { font-size: clamp(48px, 12.5vw, 66px); }
  html[data-theme] body.about-page .about-intro-label { margin-bottom: 18px; }
  html[data-theme] body.about-page .about-intro-frame { border-radius: 20px; }
  html[data-theme] body.about-page .about-intro-bio { padding: 0; gap: 26px; }
  html[data-theme] body.about-page .about-intro-lead { margin-bottom: 18px; font-size: 25px; }
  html[data-theme] body.about-page .about-intro-copy { line-height: 1.8; }
  html[data-theme] body.about-page .about-intro-details { gap: 14px; padding-top: 20px; }
  html[data-theme] body.about-page .about-intro-work { gap: 8px; padding-inline: 14px; font-size: 12px; }
  html[data-theme] body.about-page .about-story { margin-top: 64px; padding-top: 28px; }
  html[data-theme] body.about-page .about-story-heading h2 { font-size: clamp(36px, 9.5vw, 48px); }
  html[data-theme] body.about-page .about-category h3 { margin-top: 18px; font-size: 26px; }
  html[data-theme] body.about-page .about-categories { row-gap: 36px; }
  html[data-theme] body.about-page .about-image { border-radius: 20px; }
  html[data-theme] body.about-page .about-approach-statement { font-size: clamp(28px, 7.2vw, 34px); }
  html[data-theme] body.contact-page .contact-heading h1 { font-size: clamp(56px, 14vw, 76px); }
  html[data-theme] body.contact-page .contact-main { padding-top: 38px; }
  html[data-theme] body.contact-page .contact-form-panel { padding: 26px 22px; border-radius: 22px; }
  html[data-theme] body.contact-page .contact-form { gap: 22px; }
  html[data-theme] body.contact-page .contact-fields { gap: 22px; }
  html[data-theme] body.contact-page .contact-heading-copy { font-size: 16px; }
  html[data-theme] body.contact-page .contact-destination-grid { gap: 18px; }
  html[data-theme] body.contact-page .contact-destination { border-radius: 22px; }
}
@media (max-width: 380px) {
  html[data-theme] body.about-page .about-intro-details { gap: 14px; }
  html[data-theme] body.about-page .about-intro-work { font-size: 13px; padding-inline: 16px; }
  html[data-theme] body.contact-page .contact-form-panel { padding: 24px 18px; }
}
@media (min-width: 1001px) and (max-height: 680px) {
  html[data-theme] body.contact-page .contact-form-panel { padding: 24px 28px; }
  html[data-theme] body.contact-page .contact-form-panel > .contact-kicker { margin-bottom: 20px; }
  html[data-theme] body.contact-page .contact-form { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.about-page .about-intro-work,
  html[data-theme] body.contact-page :is(.contact-submit, .contact-inquiry-trigger, input, select, textarea) {
    transition: none !important;
  }
}

/* Source: apple-gallery.css */
/* Archive refinements: the images lead, controls share one quiet vocabulary. */
html[data-theme] body.gallery-page {
  --gallery-image-gap: 12px;
}
html[data-theme] body.gallery-page .gallery-intro-aside {
  max-width: 38ch;
}
html[data-theme] body.gallery-page .gallery-intro-aside > p:first-child {
  max-width: 38ch;
  text-wrap: pretty;
}
html[data-theme] body.gallery-page .gallery-toolbar {
  gap: 18px 24px;
  margin-bottom: 24px;
  padding-block: 18px;
  border-color: color-mix(in srgb, var(--rule) 60%, transparent);
}
html[data-theme] body.gallery-page .gallery-toolbar::before,
html[data-theme] body.gallery-page .gallery-toolbar::after {
  background: color-mix(in srgb, var(--rule) 60%, transparent);
}
html[data-theme] body.gallery-page .gallery-filter > summary {
  min-height: 48px;
  gap: 16px;
  padding-inline: 20px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}
html[data-theme] body.gallery-page .gallery-filter > summary > span:first-child {
  letter-spacing: .005em !important;
}
html[data-theme] body.gallery-page .gallery-filter-state {
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .005em;
  line-height: 1.5;
  text-wrap: balance;
}
html[data-theme] body.gallery-page .gallery-photo-count {
  min-width: auto;
  color: var(--ink-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .065em;
}
html[data-theme] body.gallery-page .gallery-photo-open {
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] body.gallery-page .gallery-filter-panel {
  overflow: hidden;
}
html[data-theme] body.gallery-page .gallery-filter-heading {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}
html[data-theme] body.gallery-page .gallery-filter-group legend {
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}
html[data-theme] body.gallery-page .gallery-filter-option {
  line-height: 1.4;
  text-align: center;
}
html[data-theme] body.gallery-page .gallery-filter-group:last-of-type > .gallery-filter-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
  border-radius: 14px;
  background: var(--paper-deep);
}
html[data-theme] body.gallery-page .gallery-filter-option[data-tone] {
  min-width: 0;
  padding: 9px 8px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
}
html[data-theme] body.gallery-page .gallery-filter-option[data-tone][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--rule) 65%, transparent);
  background: var(--surface, var(--paper));
  color: var(--ink);
}
html[data-theme] body.gallery-page .gallery-filter-option[data-tone]:hover {
  color: var(--ink);
}
html[data-theme] body.gallery-page .gallery-filter-reset {
  padding-inline: 10px;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: .005em;
}
html[data-theme] body.gallery-page .gallery-filter-reset:hover {
  background: var(--control-hover);
  color: var(--ink);
}
html[data-theme] body.gallery-page .gallery-filter-empty,
html[data-theme] body.gallery-page .gallery-empty {
  margin: 0;
  padding-block: clamp(56px, 9vw, 96px);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 1000px) {
  html[data-theme] body.gallery-page { --gallery-image-gap: 10px; }
}
@media (max-width: 700px) {
  html[data-theme] body.gallery-page { --gallery-image-gap: 8px; }
  html[data-theme] body.gallery-page .gallery-toolbar {
    gap: 14px 16px;
    margin-bottom: 20px;
    padding-block: 16px;
  }
  html[data-theme] body.gallery-page .gallery-filter > summary { font-size: 14px; }
  html[data-theme] body.gallery-page .gallery-filter-state {
    font-size: 12px;
    text-wrap: pretty;
  }
  html[data-theme] body.gallery-page .gallery-photo-count { font-size: 10px; }
  html[data-theme] body.gallery-page .gallery-photo-open { border-radius: 6px; }
  html[data-theme] body.gallery-page .gallery-filter-panel { gap: 18px; }
  html[data-theme] body.gallery-page .gallery-filter-option[data-tone] { font-size: 12px; }
}
@media (max-width: 360px) {
  html[data-theme] body.gallery-page .gallery-toolbar {
    column-gap: 10px;
  }
  html[data-theme] body.gallery-page .gallery-filter-option[data-tone] {
    padding-inline: 4px;
    font-size: 11px;
  }
}

/* Source: apple-motion.css */
/* A single input-driven motion system. No timers or animation loops on controls. */
html[data-theme] body#page-top {
  --button-ease: cubic-bezier(.22, 1, .36, 1);
  --button-settle: 260ms;
  --button-press: 120ms;
}
html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
  .contact-link, .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
  .contact-submit, .contact-popover-actions a, .gallery-filter > summary,
  .gallery-filter-option, .gallery-filter-done, .gallery-filter-reset,
  .filter-button, .contact-inquiry-trigger, .contact-inquiry-option,
  .photo-dialog-nav, .photo-dialog-close, .gallery-filter-close,
  .contact-popover-close, .contact-float-button) {
  scale: 1;
  transform-origin: center;
  transition: scale var(--button-settle) var(--button-ease),
    background-color var(--theme-colour-duration, 180ms) ease, border-color var(--theme-colour-duration, 180ms) ease,
    color var(--theme-colour-duration, 180ms) ease, opacity 180ms ease !important;
  transition-delay: 0ms !important;
  -webkit-tap-highlight-color: transparent;
}
/* Header geometry stays fixed beside the locked mobile backdrop. The menu
   icon and theme colours already provide feedback without scaling the glass. */
html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
  transition: background-color var(--theme-colour-duration, 180ms) ease,
    border-color var(--theme-colour-duration, 180ms) ease,
    color var(--theme-colour-duration, 180ms) ease !important;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
  .contact-link, .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
  .contact-submit, .contact-popover-actions a, .gallery-filter > summary,
  .gallery-filter-option, .gallery-filter-done, .gallery-filter-reset,
  .filter-button, .contact-inquiry-trigger, .contact-inquiry-option,
  .photo-dialog-nav):active:not(:disabled) {
  scale: .985;
  opacity: .9 !important;
  transition-duration: var(--button-press), var(--theme-colour-duration, 180ms), var(--theme-colour-duration, 180ms), var(--theme-colour-duration, 180ms), 180ms !important;
}
html[data-theme] body#page-top :is(.photo-dialog-close, .gallery-filter-close,
  .contact-popover-close, .contact-float-button):active {
  scale: .94;
  transition-duration: var(--button-press), var(--theme-colour-duration, 180ms), var(--theme-colour-duration, 180ms), var(--theme-colour-duration, 180ms), 180ms !important;
}
@media (min-width: 701px) {
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
    scale: 1;
    transition: scale var(--button-settle) var(--button-ease),
      background-color var(--theme-colour-duration, 180ms) ease,
      border-color var(--theme-colour-duration, 180ms) ease,
      color var(--theme-colour-duration, 180ms) ease !important;
  }
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle):active { scale: .94; }
}
html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
  .contact-link, .gallery-view-link, .about-gallery-link,
  .about-intro-work, .closing-contact, .contact-submit, .contact-popover-actions a) .arrow-icon {
  translate: 0 0;
  transform: none !important;
  transition: translate 300ms var(--button-ease), color var(--theme-colour-duration, 180ms) ease !important;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
    .contact-link, .gallery-view-link, .about-gallery-link,
    .about-intro-work, .closing-contact, .contact-submit, .contact-popover-actions a):hover:not(:disabled) {
    scale: 1.012;
    opacity: 1;
  }
  html[data-theme] body#page-top :is(.contact-link, .gallery-view-link,
    .about-gallery-link, .about-intro-work, .closing-contact, .contact-submit,
    .contact-popover-actions a):hover:not(:disabled) .arrow-icon {
    translate: 2px -2px;
  }
  html[data-theme] body#page-top .home-cover-button:hover .arrow-icon { translate: 3px 0; }
  html[data-theme] body#page-top .work-intro-link:hover .arrow-icon { translate: 2px 2px; }
  /* Press feedback wins even while the pointer remains over the control. */
  html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
    .contact-link, .gallery-view-link, .about-gallery-link,
    .about-intro-work, .closing-contact, .contact-submit, .contact-popover-actions a):hover:active:not(:disabled) {
    scale: .985;
  }
}
html[data-theme] body#page-top :is(.contact-submit, .gallery-filter-option, .filter-button):disabled {
  scale: 1;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
    .contact-link, .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
    .contact-submit, .contact-popover-actions a, .gallery-filter > summary,
    .gallery-filter-option, .gallery-filter-done, .gallery-filter-reset,
    .filter-button, .contact-inquiry-trigger, .contact-inquiry-option,
    .photo-dialog-nav, .photo-dialog-close, .gallery-filter-close,
    .contact-popover-close, .contact-float-button, .theme-toggle, .menu-toggle) {
    scale: 1 !important;
    transition: none !important;
  }
  html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
    .contact-link, .gallery-view-link, .about-gallery-link,
    .about-intro-work, .closing-contact, .contact-submit, .contact-popover-actions a) .arrow-icon {
    translate: 0 0 !important;
    transition: none !important;
  }
}

/* Focus completes a reveal once; leaving the control cannot restart it. */
html[data-theme] body#page-top .is-focus-revealed {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Source: apple-material.css */
/* Light, edge and tint are one material. Photograph/content surfaces stay opaque. */
html[data-theme] body {
  --material-fill: rgb(252 250 246 / 86%);
  --material-fill-strong: rgb(252 250 246 / 95%);
  --material-edge: rgb(255 255 255 / 62%);
  --material-edge-soft: rgb(36 40 36 / 10%);
  --material-light: rgb(255 255 255 / 35%);
  --material-shadow: rgb(32 27 20 / 9%);
  --material-blur: 12px;
}
html[data-theme="dark"] body {
  --material-fill: rgb(20 20 20 / 85%);
  --material-fill-strong: rgb(20 20 20 / 95%);
  --material-edge: rgb(255 255 255 / 13%);
  --material-edge-soft: rgb(255 255 255 / 9%);
  --material-light: rgb(255 255 255 / 5%);
  --material-shadow: rgb(0 0 0 / 22%);
}

/* The full-width header keeps its familiar shape; content is visible beneath. */
html[data-theme] body#page-top .site-header::before {
  background:
    linear-gradient(115deg, var(--material-light), transparent 48%),
    var(--material-fill);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(100%);
  backdrop-filter: blur(var(--material-blur)) saturate(100%);
  box-shadow: inset 0 1px 0 var(--material-edge-soft);
}
html.apple-scrolled[data-theme] body#page-top .site-header {
  border-bottom-color: transparent;
}
html.apple-scrolled[data-theme] body#page-top .site-header::before {
  box-shadow: inset 0 -1px 0 var(--material-edge-soft), 0 6px 16px rgb(0 0 0 / 3%);
}
.navigation-highlight {
  background:
    linear-gradient(135deg, var(--material-light), transparent 70%),
    var(--control-hover);
  box-shadow: inset 0 1px 0 var(--material-edge-soft);
}

/* Compact functional overlays share the same quiet glass, never moving blur. */
html[data-theme] body#page-top :is(.contact-popover, .contact-inquiry-menu) {
  border-color: var(--material-edge-soft);
  background:
    linear-gradient(135deg, var(--material-light), transparent 42%),
    var(--material-fill-strong);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(100%);
  backdrop-filter: blur(var(--material-blur)) saturate(100%);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 12px 36px var(--material-shadow);
}
html[data-theme] body#page-top .gallery-filter-panel {
  border: 1px solid var(--material-edge-soft);
  background:
    linear-gradient(135deg, var(--material-light), transparent 44%),
    var(--material-fill-strong);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(100%);
  backdrop-filter: blur(var(--material-blur)) saturate(100%);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 12px 36px var(--material-shadow);
}
html[data-theme] body#page-top .contact-float-button {
  border-color: var(--material-edge-soft);
  background:
    linear-gradient(135deg, var(--material-light), transparent 72%),
    var(--material-fill);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 4px 16px var(--material-shadow);
}

/* A panel's surface and its contents move together; no separate glass mask. */
@media (max-width: 700px) {
  html[data-theme] body { --material-blur: 10px; }
  html[data-theme] body#page-top .site-header::before {
    bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation {
    border-bottom-color: var(--material-edge-soft);
    background:
      linear-gradient(125deg, var(--material-light), transparent 55%),
      var(--material-fill-strong);
    -webkit-backdrop-filter: blur(var(--material-blur)) saturate(100%);
    backdrop-filter: blur(var(--material-blur)) saturate(100%);
    box-shadow: inset 0 1px 0 var(--material-edge-soft), 0 12px 28px var(--material-shadow);
  }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background:
      linear-gradient(135deg, var(--material-light), transparent 70%),
      var(--control-hover);
  }
  html[data-theme] body#page-top .gallery-filter-panel {
    background:
      linear-gradient(135deg, var(--material-light), transparent 44%),
      var(--material-fill-strong) !important;
    -webkit-backdrop-filter: blur(var(--material-blur)) saturate(100%) !important;
    backdrop-filter: blur(var(--material-blur)) saturate(100%) !important;
  }
}

/* Dense, solid alternatives are a first-class material, not a degraded view. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  html[data-theme] body#page-top :is(.site-header::before, .site-header .primary-navigation,
    .gallery-filter-panel, .contact-popover, .contact-inquiry-menu, .contact-float-button) {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body#page-top :is(.site-header::before, .site-header .primary-navigation,
    .gallery-filter-panel, .contact-popover, .contact-inquiry-menu, .contact-float-button) {
    background: var(--surface) !important;
  }
}

/* Source: apple-sheet.css */
/* A grip advertises direct manipulation; filter choices keep native scrolling. */
.apple-sheet-grip { display: none; }
@media (max-width: 700px) {
  html[data-theme] body.gallery-page .gallery-filter-panel.apple-sheet-enabled .gallery-filter-heading {
    position: relative;
    min-height: 60px;
    padding-top: 16px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  html[data-theme] body.gallery-page .apple-sheet-grip {
    position: absolute;
    top: 1px;
    left: 50%;
    display: block;
    width: 34px;
    height: 4px;
    margin-left: -17px;
    border-radius: 999px;
    background: currentColor;
    color: var(--ink-soft);
    opacity: .3;
    pointer-events: none;
  }
  html[data-theme] body#page-top.gallery-page .gallery-filter-panel.apple-sheet-controlled {
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    will-change: translate;
    /* The near-opaque moving sheet does not resample a blurred backdrop each frame. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme] body.gallery-page .gallery-filter-panel.apple-sheet-dragging .gallery-filter-heading {
    cursor: grabbing;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.gallery-page .gallery-filter-panel.apple-sheet-enabled .gallery-filter-heading {
    min-height: 44px;
    padding-top: 0;
    cursor: auto;
    touch-action: auto;
  }
  .apple-sheet-grip { display: none !important; }
}

/* Source: apple-palette.css */
/* Neutral charcoal and paper, with a trace of earth in small controls.
   Canvases stay achromatic; low-chroma brass, olive, ochre, clay and moss
   distinguish page accents without colouring the surrounding interface. */

html[data-theme="light"] {
  --palette-canvas: #F4F2ED;
  --palette-surface: #FAF9F5;
  --palette-surface-2: #E9E7E0;
  --palette-elevated: #FEFDFA;
  --palette-ink: #2A2B28;
  --palette-secondary: #60615B;
  --palette-body: #4D4D4A;
  --palette-muted: #696862;
  --palette-rule: #D5D4CD;
  --palette-control-edge: #85847F;
  --palette-field: var(--palette-elevated);
  --palette-nav-surface: var(--palette-surface);
  --palette-link: #496060;
  --palette-fill: #454E4E;
  --palette-fill-hover: #3D4646;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #DEDED7;
  --palette-emphasis: #496060;
  --palette-subtle-border: #CFD1CC;
  --palette-error: #984B3D;
  --palette-error-subtle: #F3E1D9;
  --palette-success: #48634B;
  --palette-warning: #7E642E;
  --palette-glass-edge: rgb(254 253 250 / 60%);
  --palette-glass-light: rgb(254 253 250 / 25%);
  --palette-glass-shadow: rgb(42 43 40 / 10%);
  --palette-action-rim: rgb(254 253 250 / 14%);
  --palette-matte: var(--palette-surface);
  --palette-glass: color-mix(in srgb, var(--palette-surface) 88%, transparent);
  --palette-glass-strong: color-mix(in srgb, var(--palette-surface) 94%, transparent);
  --palette-glass-rule: color-mix(in srgb, var(--palette-ink) 9%, transparent);
  --palette-frost: color-mix(in srgb, var(--palette-elevated) 70%, transparent);
  --palette-frost-hover: color-mix(in srgb, var(--palette-elevated) 90%, transparent);
  --palette-action-edge: color-mix(in srgb, var(--palette-on-fill) 14%, transparent);
}

html[data-theme="dark"] {
  --palette-canvas: #111111;
  --palette-surface: #2A2A29;
  --palette-surface-2: #343433;
  --palette-elevated: #3E3E3B;
  --palette-ink: #EAE9E3;
  --palette-secondary: #DBDBD5;
  --palette-body: #DBDBD5;
  --palette-muted: #C2C1BB;
  --palette-rule: #51514D;
  --palette-control-edge: #888881;
  --palette-field: var(--palette-canvas);
  --palette-nav-surface: var(--palette-surface-2);
  --palette-link: #ADC7C6;
  --palette-fill: #B3C1C1;
  --palette-fill-hover: #BDCBCA;
  --palette-on-fill: #242424;
  --palette-subtle: #3C3E3D;
  --palette-emphasis: #ADC7C6;
  --palette-subtle-border: #474C4B;
  --palette-error: #E5B6A5;
  --palette-error-subtle: #3B2C26;
  --palette-success: #B7CBAE;
  --palette-warning: #D8BC82;
  --palette-glass-edge: rgb(234 233 227 / 12%);
  --palette-glass-light: rgb(234 233 227 / 4%);
  --palette-glass-shadow: rgb(12 12 12 / 20%);
  --palette-action-rim: rgb(234 233 227 / 18%);
  --palette-matte: var(--palette-surface);
  --palette-glass: color-mix(in srgb, var(--palette-surface) 88%, transparent);
  --palette-glass-strong: color-mix(in srgb, var(--palette-surface) 94%, transparent);
  --palette-glass-rule: color-mix(in srgb, var(--palette-ink) 9%, transparent);
  --palette-frost: color-mix(in srgb, var(--palette-elevated) 70%, transparent);
  --palette-frost-hover: color-mix(in srgb, var(--palette-elevated) 90%, transparent);
  --palette-action-edge: color-mix(in srgb, var(--palette-on-fill) 14%, transparent);
}

/* Only small editorial details and selected controls carry a page accent. */
html[data-theme="light"]:has(body.home-page) {
  --palette-link: #496060;
  --palette-fill: #454E4E;
  --palette-fill-hover: #3D4646;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #DEDED7;
  --palette-emphasis: #496060;
  --palette-subtle-border: #CFD1CC;
}
html[data-theme="dark"]:has(body.home-page) {
  --palette-link: #ADC7C6;
  --palette-fill: #B3C1C1;
  --palette-fill-hover: #BDCBCA;
  --palette-on-fill: #242424;
  --palette-subtle: #3C3E3D;
  --palette-emphasis: #ADC7C6;
  --palette-subtle-border: #474C4B;
}
html[data-theme="light"]:has(body.work-page) {
  --palette-link: #575E4C;
  --palette-fill: #4A4D46;
  --palette-fill-hover: #42453E;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #DFDDD6;
  --palette-emphasis: #575E4C;
  --palette-subtle-border: #D2D1C8;
}
html[data-theme="dark"]:has(body.work-page) {
  --palette-link: #BCC5B0;
  --palette-fill: #BBC0B5;
  --palette-fill-hover: #C5C9BF;
  --palette-on-fill: #242424;
  --palette-subtle: #3E3E3C;
  --palette-emphasis: #BCC5B0;
  --palette-subtle-border: #4A4B47;
}
html[data-theme="light"]:has(body.gallery-page) {
  --palette-link: #645A44;
  --palette-fill: #4F4B44;
  --palette-fill-hover: #47433D;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #E0DDD5;
  --palette-emphasis: #645A44;
  --palette-subtle-border: #D4D0C7;
}
html[data-theme="dark"]:has(body.gallery-page) {
  --palette-link: #CBC0A8;
  --palette-fill: #C3BEB4;
  --palette-fill-hover: #CCC7BD;
  --palette-on-fill: #242424;
  --palette-subtle: #3F3E3B;
  --palette-emphasis: #CCC0A8;
  --palette-subtle-border: #4C4A46;
}
html[data-theme="light"]:has(body.about-page) {
  --palette-link: #69564C;
  --palette-fill: #514A46;
  --palette-fill-hover: #49423E;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #E0DDD6;
  --palette-emphasis: #69564C;
  --palette-subtle-border: #D5D0C8;
}
html[data-theme="dark"]:has(body.about-page) {
  --palette-link: #D3BDB1;
  --palette-fill: #C7BCB6;
  --palette-fill-hover: #D1C5BF;
  --palette-on-fill: #242424;
  --palette-subtle: #3F3E3C;
  --palette-emphasis: #D3BDB1;
  --palette-subtle-border: #4D4A47;
}
html[data-theme="light"]:has(body.contact-page) {
  --palette-link: #525F52;
  --palette-fill: #484E48;
  --palette-fill-hover: #404540;
  --palette-on-fill: #FEFDFA;
  --palette-subtle: #DEDDD6;
  --palette-emphasis: #525F52;
  --palette-subtle-border: #D1D1C9;
}
html[data-theme="dark"]:has(body.contact-page) {
  --palette-link: #B7C5B7;
  --palette-fill: #B8C1B8;
  --palette-fill-hover: #C2CAC2;
  --palette-on-fill: #242424;
  --palette-subtle: #3D3E3C;
  --palette-emphasis: #B7C5B7;
  --palette-subtle-border: #494B48;
}

/* Root aliases cover overscroll, prepaint and browser chrome. */
html[data-theme] {
  --bg: var(--palette-canvas);
  --paper: var(--palette-canvas);
  --surface: var(--palette-surface);
  --ink: var(--palette-ink);
  --ink-soft: var(--palette-secondary);
  --muted: var(--palette-muted);
  --accent: var(--palette-link);
  background-color: var(--palette-canvas);
}

html[data-theme] body#page-top {
  --bg: var(--palette-canvas);
  --paper: var(--palette-canvas);
  --surface: var(--palette-surface);
  --surface-2: var(--palette-surface-2);
  --surface-3: var(--palette-elevated);
  --surface-elevated: var(--palette-elevated);
  --paper-deep: var(--palette-surface-2);
  --paper-work: var(--palette-canvas);
  --paper-contact: var(--palette-canvas);
  --paper-card: var(--palette-surface);
  --paper-card-mono: var(--palette-surface-2);
  --ink: var(--palette-ink);
  --text: var(--palette-ink);
  --text-strong: var(--palette-ink);
  --ink-soft: var(--palette-secondary);
  --text-soft: var(--palette-secondary);
  --body-ink: var(--palette-body);
  --muted: var(--palette-muted);
  --label-ink: var(--palette-muted);
  --heading-muted: var(--palette-link);
  --rule: var(--palette-rule);
  --line: var(--palette-rule);
  --rule-soft: var(--palette-control-edge);
  --line-strong: var(--palette-control-edge);
  --rule-contact: var(--palette-rule);
  --accent: var(--palette-link);
  --accent-soft: var(--palette-link);
  --primary-fill: var(--palette-fill);
  --primary-hover: var(--palette-fill-hover);
  --primary-on-fill: var(--palette-on-fill);
  --primary-subtle: var(--palette-subtle);
  --primary-emphasis: var(--palette-emphasis);
  --primary-subtle-border: var(--palette-subtle-border);
  --control-hover: var(--palette-surface-2);
  --card-hover: var(--palette-surface-2);
  --card-mono-hover: var(--palette-surface-2);
  --section-mark: var(--palette-muted);
  --photo-matte: var(--palette-matte);
  --footer-surface: var(--palette-canvas);
  --footer-ink: var(--palette-ink);
  --footer-muted: var(--palette-secondary);
  --footer-rule: var(--palette-rule);
  --footer-accent: var(--palette-link);
  --ribbon-bg: var(--palette-glass-strong);
  --ribbon-ink: var(--palette-secondary);
  --hero-detail-surface: var(--palette-surface);
  --hero-detail-ink: var(--palette-ink);
  --hero-detail-muted: var(--palette-secondary);
  --hero-detail-rule: var(--palette-rule);
  --selection-bg: var(--palette-fill);
  --selection-text: var(--palette-on-fill);
  --navigation-glass-colour: var(--palette-surface);
  --navigation-divider: var(--palette-rule);
  --menu-ring: var(--palette-control-edge);
  --menu-ring-active: var(--palette-link);
  --glass-panel: var(--palette-glass-strong);
  --glass-border: var(--palette-glass-rule);
  --glass-shadow: 0 12px 36px var(--palette-glass-shadow);
  --material-fill: var(--palette-glass);
  --material-fill-strong: var(--palette-glass-strong);
  --material-edge: var(--palette-glass-edge);
  --material-edge-soft: var(--palette-glass-rule);
  --material-light: var(--palette-glass-light);
  --material-shadow: var(--palette-glass-shadow);
  --apple-chrome: var(--palette-glass);
  --apple-chrome-rule: var(--palette-glass-rule);
  --contact-glass: var(--palette-glass-strong);
  --contact-field: var(--palette-canvas);
  --contact-glow: transparent;
  --contact-error: var(--palette-error);
  --error: var(--palette-error);
  --error-subtle: var(--palette-error-subtle);
  --success: var(--palette-success);
  --warning: var(--palette-warning);
  --info: var(--palette-link);
  --on-photo: #F2F1EC;
  --on-photo-secondary: #DCDDD5;
  --on-photo-accent: #ADC7C6;
  --on-photo-ink: var(--on-photo);
  --on-photo-shadow: rgb(16 16 16 / 58%);
  --on-photo-fill: #B3C1C1;
  --on-photo-fill-hover: #BDCBCA;
  --on-photo-fill-ink: #242424;
  --photo-surface: #222222;
  background: var(--palette-canvas);
  color: var(--palette-ink);
}
html[data-theme] body#page-top ::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
/* Sustained reading uses a stronger ink than captions and small metadata. */
html[data-theme] body#page-top :is(.home-selected-copy p, .work-intro-copy,
  .journal-description, .collection-description, .about-intro-copy, .about-copy p,
  .contact-heading-copy, .contact-aside > p, .contact-popover-copy,
  .photo-dialog-description) {
  color: var(--body-ink);
}
html[data-theme] body#page-top .about-section { --about-muted: var(--palette-secondary); }
html[data-theme] body#page-top :is(.about-section, .about-intro,
  .work-section, .gallery-main, .contact-section) { background: var(--paper); }
html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle, .header-controls) { color: var(--ink); }
html[data-theme] body#page-top .site-header .primary-navigation a { color: var(--ink-soft); }
html[data-theme] body#page-top .site-header .primary-navigation a:is([aria-current="page"], :active) { color: var(--accent); }

/* A primary action always uses its own fill/on-fill pair, in both themes. */
html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
  .contact-email-link, .contact-popover-email, .gallery-filter-done) {
  border-color: var(--primary-fill);
  background: var(--primary-fill);
  color: var(--primary-on-fill);
}
html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
  .contact-email-link, .contact-popover-email, .gallery-filter-done):is(:hover, :focus-visible, :active):not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: var(--primary-on-fill);
}
html[data-theme] body#page-top :is(.contact-email-link, .contact-instagram-link,
  .contact-popover-actions a) svg { color: currentColor; }
html[data-theme] body#page-top :is(.contact-instagram-link,
  .contact-popover-actions a:not(.contact-popover-email)) {
  border-color: var(--palette-control-edge);
  background: var(--surface);
  color: var(--ink);
}
html[data-theme] body#page-top :is(.contact-instagram-link,
  .contact-popover-actions a:not(.contact-popover-email)):is(:hover, :focus-visible, :active) {
  border-color: var(--accent);
  background: var(--primary-subtle);
  color: var(--ink);
}
html[data-theme] body#page-top .filter-button.is-active,
html[data-theme] body#page-top .gallery-filter-option[data-tone][aria-pressed="true"] {
  background: var(--primary-fill);
  color: var(--primary-on-fill);
  border-color: transparent;
}
html[data-theme] body#page-top .gallery-filter-option:not([data-tone])[aria-pressed="true"] {
  background: var(--primary-subtle);
  border-color: var(--accent);
  color: var(--ink);
}
html[data-theme] body#page-top .gallery-filter-option:not([data-tone])[aria-pressed="true"]:hover { border-color: var(--accent); }

/* Fields have a deliberate, accessible edge rather than a mixed-opacity rule. */
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger):not([aria-invalid="true"]) {
  border-color: var(--palette-control-edge);
  color: var(--ink);
}
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger):not([aria-invalid="true"]):is(:focus, :focus-visible) { border-color: var(--accent); }
html[data-theme] body#page-top :is(input, textarea)::placeholder { color: var(--palette-muted); }
html[data-theme] body#page-top :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-subtle);
}
html[data-theme] body#page-top :is(input, textarea)[aria-invalid="true"]::placeholder { color: var(--error); }

/* Photography is its own contrast context; its original colours are unchanged. */
html[data-theme] body#page-top.home-page .home-cover { background: var(--photo-surface); color: var(--on-photo); }
html[data-theme] body#page-top.home-page .home-cover h1 { color: var(--on-photo); }
/* Keep the original cyan photo accent independent of the page's light/dark
   link colour and the new translucent content surface. */
html[data-theme] body#page-top.home-page .home-cover-role em { color: var(--on-photo-accent); }
html[data-theme] body#page-top.home-page .home-cover :is(.eyebrow, .home-cover-intro) { color: var(--on-photo-secondary); }
html[data-theme] body#page-top.home-page .home-cover .eyebrow-dot { background: var(--on-photo-accent); }
html[data-theme] body#page-top.home-page .home-cover-tagline { color: var(--on-photo); }
html[data-theme] body#page-top.home-page .home-cover-tagline em { color: var(--on-photo-accent); }
html[data-theme] body#page-top.home-page .home-cover-button {
  border-color: var(--on-photo-fill);
  background: var(--on-photo-fill);
  color: var(--on-photo-fill-ink);
}
html[data-theme] body#page-top.home-page .home-cover-button:is(:hover, :focus-visible, :active) {
  border-color: var(--on-photo-fill-hover);
  background: var(--on-photo-fill-hover);
  color: var(--on-photo-fill-ink);
}
html[data-theme] body#page-top.home-page .home-cover-button .arrow-icon { color: currentColor; }
html[data-theme] body#page-top.home-page .home-cover-button:focus-visible { outline-color: var(--on-photo); }
html[data-theme] body#page-top.home-page .home-cover-art::after {
  background-image: linear-gradient(90deg, rgb(4 5 7 / 62%), rgb(4 5 7 / 24%) 39%, transparent 65%),
    linear-gradient(0deg, rgb(4 5 7 / 28%), transparent 35%);
}
html[data-theme="light"] body#page-top.home-page .home-cover-art::after { background-color: rgb(9 10 12 / 8%); }
html[data-theme="dark"] body#page-top.home-page .home-cover-art::after { background-color: rgb(9 10 12 / 50%); }
html[data-theme] body#page-top :is(.home-destination, .contact-destination) { background: var(--photo-surface); }
html[data-theme] body#page-top :is(.home-destination, .home-quote,
  .contact-destination h3, .contact-destination-label) { color: var(--on-photo); }
html[data-theme] body#page-top .home-destination::after {
  background: linear-gradient(180deg, rgb(8 9 12 / 6%) 16%, rgb(8 9 12 / 78%) 100%);
}
html[data-theme] body#page-top .home-quote::after {
  background: linear-gradient(90deg, rgb(8 9 12 / 66%), rgb(8 9 12 / 16%) 90%);
}
html[data-theme] body#page-top :is(.home-destination, .contact-destination):focus-visible { outline-color: var(--on-photo-accent); }
@media (max-width: 700px) {
  html[data-theme] body#page-top.home-page .home-cover-art::after {
    background-image: radial-gradient(ellipse at 50% 48%, rgb(4 5 7 / 28%), transparent 76%),
      linear-gradient(0deg, rgb(4 5 7 / 60%), rgb(4 5 7 / 38%) 58%, rgb(4 5 7 / 4%));
  }
  html[data-theme] body#page-top .home-quote::after { background: rgb(8 9 12 / 44%); }
}

/* Source: apple-quality.css */
/* Responsive and accessibility finish. Normal entrance motion remains owned
   by the existing page controllers; this layer adds no animation timelines. */
html[data-theme] body#page-top :is(.about-intro-bio, .about-intro-writing,
  .about-intro-details, .about-copy, .contact-heading, .contact-aside,
  .contact-form-bottom, .contact-form-status, .photo-dialog-info) {
  min-width: 0;
}
html[data-theme] body#page-top :is(.contact-form-status, .contact-field-error,
  .contact-inquiry-trigger span, .contact-inquiry-option,
  .photo-meta-grid dd, .photo-dialog-description) {
  overflow-wrap: anywhere;
}
html[data-theme] body#page-top :is(.collection-count, .filter-button span,
  .gallery-photo-count, .photo-dialog-position, .photo-meta-grid dd) {
  font-variant-numeric: tabular-nums;
}
html[data-theme] body#page-top :is(.about-intro-work, .contact-submit,
  .contact-link, .gallery-view-link, .about-gallery-link) .arrow-icon {
  flex-shrink: 0;
}
html[data-theme] body#page-top :is(.gallery-filter-reset,
  .contact-success button, .contact-popover-actions a) {
  min-height: 44px;
}
html[data-theme] body#page-top :is(.gallery-filter-reset,
  .contact-success button) {
  display: inline-flex;
  align-items: center;
}
html[data-theme] body#page-top summary {
  touch-action: manipulation;
}
html[data-theme] body#page-top main :is(a, button, input, textarea, select, summary) {
  scroll-margin-block: calc(var(--site-header-height, 84px) + 16px) 24px;
}

/* Photo buttons fill an overflow-clipped frame. Put the keyboard ring around
   that frame so it remains visible without changing the photograph itself. */
html[data-theme] body#page-top .work-art:has(.photo-open:focus-visible),
html[data-theme] body#page-top .gallery-tile:has(.gallery-photo-open:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
html[data-theme] body#page-top .contact-inquiry-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

@media (max-width: 380px) {
  html[data-theme] body#page-top .contact-popover {
    padding-inline: 20px;
  }
  html[data-theme] body#page-top .contact-popover-actions {
    gap: 6px;
  }
  html[data-theme] body#page-top .contact-popover-actions a {
    padding-inline: 3px;
    font-size: 12px;
    line-height: 1.45;
  }
}

/* A stronger-contrast preference keeps the same palette and hierarchy while
   making labels, field boundaries and display lettering easier to read. */
@media (prefers-contrast: more) {
  html[data-theme] body#page-top {
    --muted: var(--ink-soft);
    --label-ink: var(--ink);
  }
  html[data-theme] body#page-top :is(.contact-field input,
    .contact-field textarea, .contact-inquiry-trigger, .filter-set,
    .gallery-filter > summary, .gallery-filter-option, .photo-dialog-nav) {
    border-color: var(--ink-soft);
  }
  html[data-theme] body#page-top :is(main h1, main h2, main h3,
    main h1 span, main h2 span, main h1 em, main h2 em, main h3 em) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
  html[data-theme] body#page-top :is(a, button, summary):focus-visible {
    outline-width: 3px;
  }
}

/* Platform high-contrast themes remove many background fills. Selection and
   focus therefore receive explicit system-colour edges as well. */
@media (forced-colors: active) {
  html[data-theme] body#page-top .site-header::before,
  html[data-theme] body#page-top :is(.contact-popover,
    .contact-inquiry-menu, .gallery-filter-panel,
    .contact-float-button) {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html[data-theme] body#page-top :is(.filter-button.is-active,
    .gallery-filter-option[aria-pressed="true"],
    .contact-inquiry-option[aria-selected="true"],
    .primary-navigation a[aria-current="page"]) {
    outline: 2px solid Highlight !important;
    outline-offset: -3px;
  }
  html[data-theme] body#page-top :is(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px;
  }
  html[data-theme] body#page-top :is(input, textarea)[aria-invalid="true"] {
    border: 2px dashed CanvasText !important;
  }
  html[data-theme] body#page-top .contact-field-error {
    color: CanvasText;
  }
}

/* Opaque controls are the fallback material; the content never depends on
   backdrop-filter support to provide sufficient text contrast. */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] body#page-top .site-header::before,
  html[data-theme] body#page-top :is(.contact-popover,
    .contact-float-button, .contact-inquiry-menu,
    .gallery-filter-panel) {
    background: var(--surface, var(--paper)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body#page-top .site-header::before,
  html[data-theme] body#page-top :is(.contact-popover,
    .contact-float-button, .contact-inquiry-menu,
    .gallery-filter-panel) {
    background: var(--surface, var(--paper)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Source: photo-fluid.css */
/* Lock only the document root. Leaving body visible preserves the sticky
   header's clipping ancestors when the native viewer opens and closes. */
html.photo-dialog-active {
  overflow: hidden;
  overscroll-behavior: none;
}
html.photo-dialog-active body {
  overflow: visible;
  overscroll-behavior: none;
}

/* One contained rounded surface owns entrance and exit. The native dialog
   and its backdrop never travel through the page header. */
html[data-theme] body .photo-dialog.photo-fluid-enabled {
  --motion-dialog: 240ms;
  overflow: visible !important;
  contain: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: none !important;
  animation: none !important;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled::backdrop {
  background: rgb(0 0 0 / 54%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 240ms cubic-bezier(.22, 1, .36, 1);
}
html[data-theme] body .photo-dialog.photo-fluid-enabled.is-open::backdrop {
  transition-duration: 320ms;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-layout {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: inherit;
  clip-path: inset(0 round var(--radius-panel, 18px));
  isolation: isolate;
  background: var(--paper);
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none !important;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled :is(.photo-dialog-art,
  .photo-dialog-info, .photo-dialog-art > img, .photo-dialog-info .caption-kicker,
  .photo-dialog-info h2, .photo-dialog-description, .photo-meta-grid > div,
  .photo-detail-note, .photo-dialog-position) {
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
  will-change: auto;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-art > img {
  object-fit: contain;
  filter: none;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-info {
  background: var(--paper) !important;
}
html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-close {
  animation: none !important;
}
@media (max-width: 850px) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-info {
    --photo-info-inset: 26px;
    --photo-info-block-inset: 26px;
    justify-content: flex-start;
    scroll-padding-block: 16px 88px;
  }
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-navigation {
    position: sticky;
    z-index: 2;
    bottom: calc(-1 * var(--photo-info-block-inset));
    flex-shrink: 0;
    order: 2;
    margin: 24px calc(-1 * var(--photo-info-inset)) calc(-1 * var(--photo-info-block-inset));
    padding: 12px var(--photo-info-inset) 16px;
    border-top: 1px solid var(--rule);
    background: var(--paper);
  }
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-detail-note { order: 1; }
}
@media (max-width: 700px) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled::backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-info {
    --photo-info-inset: 20px;
    --photo-info-block-inset: 24px;
  }
}
/* A short landscape screen needs a readable details pane. Where there is
   enough width, place it beside the photograph; narrower zoomed windows keep
   the stacked layout with a smaller photograph instead of a tiny text slot. */
@media (max-width: 850px) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-art {
    height: 30dvh;
  }
}
@media (min-width: 540px) and (max-width: 850px) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-layout {
    grid-template-columns: minmax(0, 1fr) minmax(288px, .95fr);
    grid-template-rows: minmax(0, 1fr);
  }
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-art {
    height: 100%;
  }
  html[data-theme] body .photo-dialog.photo-fluid-enabled .photo-dialog-info {
    padding-top: 56px;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled::backdrop {
    background: rgb(0 0 0 / 72%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .photo-dialog.photo-fluid-enabled::backdrop {
    transition: none;
  }
}

/* Source: editorial-footer.css */
/* A closing spread: one invitation, a useful directory, a quiet colophon. */
html[data-theme] body#page-top .site-footer.editorial-footer {
  display: block;
  min-height: 0;
  padding: 0;
  margin-top: clamp(40px, 5vw, 72px);
  --closing-rule: color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink);
  background: var(--paper);
  border: 0;
}
html[data-theme] body#page-top .editorial-footer > [data-footer-reveal] {
  width: 100%; min-width: 0; box-sizing: border-box;
  opacity: 1; visibility: visible; transform: none;
  animation: none; transition: none;
}
html[data-theme] body#page-top .editorial-footer::before,
html[data-theme] body#page-top .editorial-footer::after { content: none; }
html[data-theme] body#page-top .editorial-footer :is(p,h2) { margin: 0; }
html[data-theme] body#page-top .editorial-footer p {
  font-family: var(--sans, Inter, sans-serif);
  font-style: normal;
  text-align: left;
  justify-self: auto;
  align-self: auto;
}
html[data-theme] body#page-top .editorial-footer a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] body#page-top .editorial-footer svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1);
}
html[data-theme] body#page-top .closing-invitation {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; padding: clamp(36px,4.5vw,64px) 0;
  border-block: 1px solid var(--closing-rule);
}
html[data-theme] body#page-top .closing-heading .closing-eyebrow {
  color: var(--muted); font-size: 12px; line-height: 1.5;
  letter-spacing: .035em; margin-bottom: 22px;
}
html[data-theme] body#page-top .closing-heading h2 {
  color: var(--ink); background: none; -webkit-text-fill-color: currentColor;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px,4.2vw,64px); line-height: 1.08; letter-spacing: -.025em;
}
html[data-theme] body#page-top .closing-heading h2 em {
  color: var(--accent); font-weight: inherit;
  background: none; -webkit-text-fill-color: currentColor;
}
html[data-theme] body#page-top .closing-contact {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; gap: 16px; margin-bottom: 6px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--apple-control-radius, 999px);
  background: var(--control-hover); color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
html[data-theme] body#page-top .closing-directory {
  display: grid; grid-template-columns: minmax(0,2fr) repeat(2,minmax(0,1fr));
  gap: 32px; padding: clamp(32px,3.4vw,48px) 0;
}
html[data-theme] body#page-top .closing-identity > a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--serif); font-size: 26px; font-weight: 300;
  letter-spacing: -.025em;
}
html[data-theme] body#page-top .closing-identity > p {
  color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 8px;
}
html[data-theme] body#page-top .closing-links { display: flex; flex-direction: column; align-items: flex-start; }
html[data-theme] body#page-top .closing-links > p {
  color: var(--muted); font-size: 11px; line-height: 1.5; margin: 10px 0 12px;
}
html[data-theme] body#page-top .closing-links > a {
  display: inline-flex; align-items: center; min-height: 44px; gap: 12px;
  color: var(--ink-soft); font-size: 13px;
  transition: color var(--theme-colour-duration, 180ms) ease;
}
html[data-theme] body#page-top .closing-links svg { width: 13px; height: 13px; flex-basis: 13px; }
html[data-theme] body#page-top .closing-colophon {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 72px 28px 0; border-top: 1px solid var(--closing-rule); color: var(--muted);
}
html[data-theme] body#page-top .closing-colophon small { font-size: 11px; line-height: 1.5; }
html[data-theme] body#page-top .closing-colophon a {
  display: inline-flex; gap: 20px; min-height: 44px; align-items: center; font-size: 11px;
}
html[data-theme] body#page-top .closing-colophon a span { font-size: 18px; transition: transform 220ms ease; }
html[data-theme] body#page-top .editorial-footer a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .editorial-footer a:hover { color: var(--accent); }
  html[data-theme] body#page-top .closing-links a:hover svg { transform: translate(2px,-2px); }
  html[data-theme] body#page-top .closing-colophon a:hover span { transform: translateY(-2px); }
}
@media (max-width: 700px) {
  html[data-theme] body#page-top .closing-invitation { align-items: flex-start; flex-direction: column; gap: 28px; }
  html[data-theme] body#page-top .closing-heading h2 { font-size: clamp(36px,8.2vw,52px); }
  html[data-theme] body#page-top .closing-heading .closing-eyebrow { margin-bottom: 20px; }
  html[data-theme] body#page-top .closing-contact { min-width: 0; margin: 0; }
  html[data-theme] body#page-top .closing-directory { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 24px; }
  html[data-theme] body#page-top .closing-identity { grid-column: 1 / -1; }
  html[data-theme] body#page-top .closing-colophon { gap: 14px; padding: 20px 0 72px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* A translated closing row must not add 12px to the scroll timeline's
     range, then remove it as it settles. Horizontal focus rings stay clear. */
  html[data-theme] body#page-top .editorial-footer.footer-progressive {
    overflow: visible clip;
  }
  html[data-theme] body#page-top .editorial-footer.footer-progressive > [data-footer-reveal] {
    opacity: var(--footer-entry-opacity, 1);
    transform: translate3d(0, var(--footer-entry-y, 0px), 0);
    animation: none;
    transition: none;
  }
  html[data-theme] body#page-top .editorial-footer.footer-progressive > [data-footer-reveal]:focus-within {
    opacity: 1 !important;
    transform: none !important;
  }
  html[data-theme] body#page-top .editorial-footer [data-footer-reveal].footer-waiting { opacity: 0; transform: translateY(14px); }
  html[data-theme] body#page-top .editorial-footer [data-footer-reveal].footer-visible {
    animation: footer-settle 680ms var(--ease-editorial, cubic-bezier(.16,1,.3,1)) both;
  }
  @keyframes footer-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body#page-top .editorial-footer * { animation: none !important; transition: none !important; }
}

/* Keep keyboard navigation visible even before a row has entered the viewport. */
html[data-theme] body#page-top .editorial-footer [data-footer-reveal]:focus-within {
  opacity: 1 !important; transform: none !important; animation: none;
}
html[data-theme] body#page-top .closing-links > a[aria-current="page"] { color: var(--ink); }

/* The same signature and quiet control vocabulary used in the header and pages. */
html[data-theme] body#page-top .closing-wordmark { padding: 0; }
html[data-theme] body#page-top .closing-signature {
  display: block; width: 142px; aspect-ratio: 1768 / 889;
  background-color: var(--ink); opacity: .84;
  -webkit-mask: url("images/abhimanyu-sharma-signature.png") center / contain no-repeat;
  mask: url("images/abhimanyu-sharma-signature.png") center / contain no-repeat;
}
html[data-theme] body#page-top .closing-identity > p { margin-top: 4px; }
html[data-theme] body#page-top.home-page .editorial-footer { margin-top: 0; }
html[data-theme] body#page-top.home-page .closing-invitation { border-top: 0; }
html[data-theme] body#page-top.gallery-page .closing-invitation { border-top: 0; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .editorial-footer .closing-contact:hover {
    background: color-mix(in srgb, var(--ink) 10%, var(--paper)); color: var(--ink);
  }
}
@media (max-width: 700px) {
  html[data-theme] body#page-top .closing-signature { width: 128px; }
}

/* Source: editorial-finish.css */
/* One neutral material for controls; the photographs retain the colour story. */
html[data-theme] body#page-top {
  --frost-fill: var(--palette-frost);
  --frost-hover: var(--palette-frost-hover);
  --frost-edge: var(--palette-glass-rule);
  --frost-rim: var(--palette-glass-edge);
  --frost-action: color-mix(in srgb, var(--primary-fill) 95%, transparent);
  --frost-action-hover: color-mix(in srgb, var(--primary-hover) 96%, transparent);
  --frost-action-ink: var(--primary-on-fill);
  --frost-selected-edge: var(--palette-action-edge);
  --frost-action-rim: var(--palette-action-rim);
}
/* Initialization and background restores settle without a partially painted theme. */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}

/* The material is static; there is no animated shine, tint or blur. */
html[data-theme] body#page-top :is(.site-header::before, .gallery-filter-panel,
  .contact-popover, .contact-inquiry-menu) {
  background-image: none;
  background-color: var(--material-fill-strong);
}
html[data-theme] body#page-top .site-header::before { background-color: var(--material-fill); }
html[data-theme] body#page-top .navigation-highlight {
  background: var(--frost-fill);
  box-shadow: inset 0 0 0 1px var(--frost-edge), inset 0 1px 0 var(--frost-rim);
}

/* A segmented group owns the blur once; its children only change their fill. */
html[data-theme] body#page-top :is(.filter-set, .gallery-filter-group:last-of-type .gallery-filter-options) {
  border: 1px solid var(--frost-edge);
  background: var(--frost-fill);
  box-shadow: inset 0 1px 0 var(--frost-rim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-theme] body#page-top .filter-button {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
}
html[data-theme] body#page-top .filter-button span {
  color: currentColor; opacity: 1; font-size: 11px;
}
html[data-theme] body#page-top .filter-button.is-active,
html[data-theme] body#page-top .gallery-filter-option[data-tone][aria-pressed="true"] {
  color: var(--frost-action-ink);
  background: var(--frost-action);
  box-shadow: inset 0 0 0 1px var(--frost-selected-edge), inset 0 1px 0 var(--frost-action-rim);
}
html[data-theme] body#page-top .gallery-filter-group:last-of-type .gallery-filter-options {
  /* This group already sits inside a blurred sheet. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Standalone secondary actions use the same faint edge as the filter groups. */
html[data-theme] body#page-top :is(.gallery-view-link, .about-gallery-link,
  .about-intro-work, .closing-contact, .contact-instagram-link,
  .contact-popover-actions a:not(.contact-popover-email), .gallery-filter > summary) {
  border: 1px solid var(--frost-edge);
  background: var(--frost-fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--frost-rim) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Primary actions retain a distinct, readable light/dark value. */
html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
  .contact-email-link, .contact-popover-email, .gallery-filter-done) {
  border: 1px solid var(--frost-selected-edge);
  background: var(--frost-action);
  color: var(--frost-action-ink);
  box-shadow: inset 0 1px 0 var(--frost-action-rim) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme] body#page-top .home-cover-button {
  background: color-mix(in srgb, var(--on-photo-fill) 95%, transparent);
  border-color: var(--palette-action-edge);
  color: var(--on-photo-fill-ink);
  box-shadow: inset 0 1px 0 var(--palette-action-rim) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Reuse the surrounding material in nested controls, rather than stacking blur. */
html[data-theme] body#page-top :is(.contact-popover-actions a,
  .gallery-filter-done, .gallery-filter-option, .theme-toggle, .menu-toggle,
  .photo-dialog-nav, .photo-dialog-close, .gallery-filter-close) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme] body#page-top .gallery-filter-option:not([data-tone]) {
  background: var(--frost-fill);
  border-color: var(--frost-edge);
  color: var(--ink-soft);
}
html[data-theme] body#page-top .gallery-filter-option:not([data-tone])[aria-pressed="true"] {
  background: var(--primary-subtle);
  border-color: var(--palette-control-edge);
  color: var(--ink);
}
html[data-theme] body#page-top :is(.theme-toggle, .menu-toggle,
  .photo-dialog-nav, .photo-dialog-close, .gallery-filter-close) {
  border-color: var(--frost-edge);
  background: var(--frost-fill);
  box-shadow: inset 0 1px 0 var(--frost-rim);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top :is(.gallery-view-link, .about-gallery-link,
    .about-intro-work, .closing-contact, .contact-instagram-link,
    .contact-popover-actions a:not(.contact-popover-email), .gallery-filter > summary,
    .filter-button:not(.is-active), .gallery-filter-option:not([aria-pressed="true"])):hover {
    background: var(--frost-hover); color: var(--ink); border-color: var(--frost-edge);
  }
  html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
    .contact-email-link, .contact-popover-email, .gallery-filter-done):hover:not(:disabled) {
    background: var(--frost-action-hover); color: var(--frost-action-ink);
    border-color: var(--frost-selected-edge);
  }
  html[data-theme] body#page-top .home-cover-button:hover { background: var(--on-photo-fill-hover); }
}

/* Functional metadata shares a readable scale, including the narrow filters. */
html[data-theme] body#page-top :is(.collection-count, .gallery-photo-count,
  .gallery-photo-caption, .closing-links > p, .closing-colophon small,
  .closing-colophon a) { font-size: 12px; }
html[data-theme] body#page-top.contact-page .editorial-footer { margin-top: 48px; }
html[data-theme] body#page-top.contact-page .closing-heading h2 { font-size: clamp(36px,3.2vw,48px); }
html[data-theme] body#page-top.contact-page .closing-invitation { padding-block: 36px; }
html[data-theme] body#page-top :is(.home-photo-frame, .work-art,
  .home-destination, .contact-destination, .about-intro-frame, .about-image) {
  border-radius: var(--apple-card-radius, 14px);
}
@media (max-width: 700px) {
  html[data-theme] { --apple-card-radius: 12px; }
  html[data-theme] body#page-top .filter-button { font-size: 12px; }
  html[data-theme] body#page-top :is(.collection-count, .gallery-photo-count) { font-size: 11px; }
  html[data-theme] body#page-top .site-header .primary-navigation {
    background-image: none;
    background-color: var(--material-fill-strong);
  }
}
@media (max-width: 380px) {
  html[data-theme] body#page-top .filter-button { padding-inline: 9px; gap: 5px; font-size: 11px; }
}

/* Flat materials preserve the same hierarchy on low-cost or high-contrast modes. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow), (forced-colors: active) {
  html[data-theme] body#page-top :is(.filter-set, .gallery-filter-options,
    .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
    .contact-instagram-link, .contact-popover-actions a, .gallery-filter > summary,
    .work-intro-link, .contact-submit, .contact-email-link, .gallery-filter-done,
    .home-cover-button) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme] body#page-top :is(.filter-set, .gallery-filter-options,
    .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
    .contact-instagram-link, .gallery-filter > summary) { background: var(--surface); }
  html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
    .contact-email-link, .contact-popover-email, .gallery-filter-done,
    .filter-button.is-active, .gallery-filter-option[data-tone][aria-pressed="true"]) {
    background: var(--primary-fill); color: var(--primary-on-fill);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body#page-top :is(.filter-set, .gallery-filter-options,
    .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
    .contact-instagram-link, .gallery-filter > summary) { background: var(--surface); }
}

@media (forced-colors: active) {
  html[data-theme] body#page-top :is(.filter-set, .gallery-filter-options,
    .gallery-view-link, .about-gallery-link, .about-intro-work, .closing-contact,
    .contact-instagram-link, .contact-popover-actions a, .gallery-filter > summary,
    .work-intro-link, .contact-submit, .contact-email-link, .gallery-filter-done,
    .home-cover-button, .filter-button, .gallery-filter-option) {
    background: Canvas !important; color: CanvasText !important;
    border-color: ButtonText !important; box-shadow: none !important;
  }
  html[data-theme] body#page-top :is(.filter-button.is-active,
    .gallery-filter-option[aria-pressed="true"]) {
    background: Highlight !important; color: HighlightText !important;
  }
}

/* Header glass stays darker than content so photography cannot wash it out. */
html[data-theme] body#page-top {
  --navigation-surface: var(--palette-glass);
  --navigation-sheet: var(--palette-elevated);
  --navigation-frost: color-mix(in srgb, var(--palette-surface) 88%, transparent);
  --navigation-frost-hover: color-mix(in srgb, var(--palette-elevated) 94%, transparent);
  --navigation-edge: var(--palette-glass-rule);
  --navigation-rim: var(--palette-glass-light);
}
html[data-theme] body#page-top .site-header::before {
  background: var(--navigation-surface);
  box-shadow: inset 0 -1px 0 var(--navigation-edge);
}
html[data-theme] body#page-top .site-header .navigation-highlight {
  box-sizing: border-box;
  border: 1px solid var(--navigation-edge);
  background: var(--navigation-frost);
  box-shadow: inset 0 1px 0 var(--navigation-rim);
}
html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
  border: 1px solid var(--navigation-edge);
  background: var(--navigation-frost);
  box-shadow: inset 0 1px 0 var(--navigation-rim);
}
@media (max-width: 700px) {
  html[data-theme] body#page-top .site-header .primary-navigation {
    top: var(--site-header-height, 76px);
    padding: 18px 20px;
    background: var(--navigation-sheet);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: 0 10px 24px rgb(0 0 0 / 8%);
  }
  html.navigation-open[data-theme] body#page-top .site-header::before {
    box-shadow: none;
  }
  html.navigation-open[data-theme] body#page-top .site-header {
    border-bottom-color: transparent;
  }
  /* The scrim dims the page without resampling its entire contents. */
  .navigation-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background: var(--navigation-frost);
    box-shadow: inset 0 0 0 1px var(--navigation-edge), inset 0 1px 0 var(--navigation-rim);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .navigation-scrim { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), (update: slow) {
  .navigation-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  html[data-theme] body#page-top .site-header::before,
  html[data-theme] body#page-top .site-header .primary-navigation { background: var(--surface) !important; }
}

/* Fields are calm at rest; keyboard focus and validation stay explicit. */
html[data-theme] body#page-top {
  --field-rest-edge: color-mix(in srgb, var(--palette-ink) 18%, transparent);
  --field-rest-fill: var(--palette-field);
}
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger):not([aria-invalid="true"]) {
  background: var(--field-rest-fill);
  border-color: var(--field-rest-edge);
  box-shadow: none;
}
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger):not([aria-invalid="true"]):is(:focus, :focus-visible),
html[data-theme] body#page-top .contact-inquiry-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

/* Pressable and moving surfaces keep a tint instead of a live backdrop filter.
   The stationary header retains its frost; clicks cannot expose blur tiles. */
html[data-theme] body#page-top :is(.contact-popover, .contact-inquiry-menu,
  .contact-float-button, .contact-popover-actions a) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The popover has one animation owner in script.js, including rapid reversals. */
html[data-theme] body#page-top .contact-popover:not([hidden]) {
  animation: none;
  transform: none;
}

/* A short note, one email action, then two quiet social links. */
html[data-theme] body#page-top .contact-popover {
  background: var(--navigation-sheet);
  width: min(350px, calc(100vw - 40px));
  max-height: calc(100dvh - 104px);
  padding: 24px;
  border: 1px solid var(--material-edge-soft);
  border-radius: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 12px 32px var(--material-shadow);
}
html[data-theme] body#page-top .contact-popover-close {
  top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: transparent; box-shadow: none;
}
html[data-theme] body#page-top .contact-popover-kicker {
  margin: 0 40px 20px 0; color: var(--muted);
  font-size: 11px; line-height: 1.5; letter-spacing: .03em; text-transform: none;
}
html[data-theme] body#page-top .contact-popover h2 {
  max-width: none; font-size: 34px; font-weight: 300;
  line-height: 1.08; letter-spacing: -.025em;
}
html[data-theme] body#page-top .contact-popover h2 em { color: var(--accent); font-weight: inherit; }
html[data-theme] body#page-top .contact-popover-copy {
  margin: 18px 0 24px; color: var(--ink-soft);
  font-size: 14px; line-height: 1.7; max-width: 30ch;
}
html[data-theme] body#page-top .contact-popover-actions {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 18px;
  margin: 0;
}
html[data-theme] body#page-top .contact-popover-actions .contact-popover-email {
  grid-column: 1 / -1; justify-content: space-between;
  min-height: 46px; padding: 12px 18px; margin-bottom: 8px;
  border-color: transparent; box-shadow: none !important;
}
html[data-theme] body#page-top .contact-popover-actions a:not(.contact-popover-email) {
  justify-content: flex-start; gap: 8px; min-height: 44px; padding: 6px 0;
  border: 0; border-radius: 0; background: transparent;
  color: var(--ink-soft); font-size: 12px; line-height: 1.5;
  box-shadow: none !important; scale: 1 !important;
}
html[data-theme] body#page-top .contact-popover-actions a:not(.contact-popover-email):hover {
  background: transparent; color: var(--ink);
}
html[data-theme] body#page-top .contact-popover-actions .arrow-icon {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
}
html[data-theme] body#page-top .contact-popover-actions a:not(.contact-popover-email) .arrow-icon {
  width: 12px; height: 12px; flex-basis: 12px;
}
html[data-theme] body#page-top .contact-popover-location {
  margin: 16px 0 0; padding-top: 16px;
  border-top: 1px solid var(--material-edge-soft);
  font-size: 11px; line-height: 1.5; letter-spacing: .01em; text-transform: none;
}
@media (max-width: 380px) {
  html[data-theme] body#page-top .contact-popover { padding: 20px; }
  html[data-theme] body#page-top .contact-popover h2 { font-size: 31px; }
}
@media (max-height: 500px) {
  html[data-theme] body#page-top .contact-popover { max-height: calc(100dvh - 96px); }
}
@media (prefers-contrast: more) {
  html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
    .contact-inquiry-trigger):not([aria-invalid="true"]) { border-color: var(--palette-control-edge); }
}
@media (forced-colors: active) {
  html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
    .contact-inquiry-trigger) { background: Canvas !important; border-color: ButtonText !important; }
}

/* One radius scale, assigned by function rather than by individual page. */
html[data-theme] {
  --radius-media: 14px;
  --radius-thumbnail: 8px;
  --radius-panel: 20px;
  --radius-control: 999px;
  --radius-field: 12px;
  --radius-circle: 50%;
  --radius-segment: 999px;
  --apple-card-radius: var(--radius-media);
  --apple-control-radius: var(--radius-control);
}
html[data-theme] body#page-top button { border-radius: var(--radius-control); }
html[data-theme] body#page-top :is(.gallery-filter-panel, .contact-popover,
  .contact-form-panel, .contact-inquiry-menu, .photo-dialog) { border-radius: var(--radius-panel); }
html[data-theme] body#page-top :is(.gallery-photo-open, .gallery-photo,
  .gallery-tile) { border-radius: var(--radius-thumbnail); }
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger, .gallery-filter-option, .contact-inquiry-option,
  .work-intro-link, .home-cover-button, .gallery-view-link, .about-gallery-link,
  .about-intro-work, .contact-submit, .contact-link, .closing-contact,
  .contact-popover-email, .gallery-filter-done, .photo-dialog-nav) { border-radius: var(--radius-control); }
html[data-theme] body#page-top .filter-set { border-radius: var(--radius-segment); }
html[data-theme] body#page-top .filter-button { border-radius: var(--radius-control); }
html[data-theme] body#page-top :is(.theme-toggle, .menu-toggle, .photo-dialog-close,
  .gallery-filter-close, .contact-popover-close, .contact-float-button) { border-radius: var(--radius-circle); }

/* A compact frosted inset follows the link without changing its hit target. */
@media (min-width: 701px) {
  html[data-theme] body#page-top .site-header .navigation-highlight {
    border: 1px solid var(--navigation-edge);
    border-radius: var(--radius-control);
    background: var(--navigation-frost);
    box-shadow: inset 0 1px 0 var(--navigation-rim);
  }
  html[data-theme] body#page-top .site-header .navigation-highlight.is-positioned { opacity: 1; }
  html[data-theme] body#page-top .site-header .primary-navigation a {
    border-radius: var(--radius-control); background: transparent;
  }
}
@media (max-width: 700px) {
  html[data-theme] { --radius-media: 12px; --radius-panel: 18px; }
  html[data-theme] body#page-top .site-header .primary-navigation {
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  }
  html[data-theme] body#page-top .site-header .primary-navigation a { border-radius: var(--radius-control); }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background: var(--navigation-frost);
    box-shadow: inset 0 0 0 1px var(--navigation-edge);
  }
}
html[data-theme] body#page-top .gallery-filter-group:last-of-type .gallery-filter-options {
  border-radius: var(--radius-segment);
}

/* Single-line entry and action controls share the same full curve. Tall
   writing surfaces use the panel curve rather than an oversized capsule. */
html[data-theme] body#page-top :is(.contact-field input, .contact-field textarea,
  .contact-inquiry-trigger) { border-radius: var(--radius-field); }
html[data-theme] body#page-top.contact-page {
  --radius-field: var(--radius-control);
  --radius-panel: 26px;
}
html[data-theme] body#page-top.contact-page .contact-field textarea {
  border-radius: var(--radius-panel);
}
html[data-theme] body#page-top.contact-page :is(.contact-field input, .contact-inquiry-trigger) {
  padding-inline: 20px;
}

/* Animate semantic colour values once at their source. Descendant text, rules,
   fields and gradient stops share that progress, while their scroll, opening,
   hover and press motion retains its own independent transition owner. Typed
   properties also let a rapid second toggle reverse from the presented colour. */
@property --palette-canvas { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-surface { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-surface-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-elevated { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-ink { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-secondary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-body { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-muted { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-rule { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-control-edge { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-field { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-nav-surface { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-link { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-fill-hover { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-on-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-subtle { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-emphasis { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-subtle-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-error { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-error-subtle { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-success { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-warning { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-glass-edge { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-glass-light { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-glass-shadow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --palette-action-rim { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-glass-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-glass-wash { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-glass-rim { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --navigation-capsule-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-query-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-form-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --portfolio-primary-opacity { syntax: "<percentage>"; inherits: true; initial-value: 82%; }

html.theme-token-transitions.theme-css-fade {
  --theme-colour-duration: 0ms;
  transition: --palette-canvas 320ms ease,
    --palette-surface 320ms ease,
    --palette-surface-2 320ms ease,
    --palette-elevated 320ms ease,
    --palette-ink 320ms ease,
    --palette-secondary 320ms ease,
    --palette-body 320ms ease,
    --palette-muted 320ms ease,
    --palette-rule 320ms ease,
    --palette-control-edge 320ms ease,
    --palette-field 320ms ease,
    --palette-nav-surface 320ms ease,
    --palette-link 320ms ease,
    --palette-fill 320ms ease,
    --palette-fill-hover 320ms ease,
    --palette-on-fill 320ms ease,
    --palette-subtle 320ms ease,
    --palette-emphasis 320ms ease,
    --palette-subtle-border 320ms ease,
    --palette-error 320ms ease,
    --palette-error-subtle 320ms ease,
    --palette-success 320ms ease,
    --palette-warning 320ms ease,
    --palette-glass-edge 320ms ease,
    --palette-glass-light 320ms ease,
    --palette-glass-shadow 320ms ease,
    --palette-action-rim 320ms ease,
    --portfolio-glass-fill 320ms ease,
    --portfolio-glass-wash 320ms ease,
    --portfolio-glass-rim 320ms ease,
    --navigation-capsule-fill 320ms ease,
    --portfolio-query-fill 320ms ease,
    --portfolio-form-fill 320ms ease,
    --portfolio-primary-opacity 320ms ease;
}
/* The two aliases whose source differs between modes need explicit final
   endpoints too. These are the existing palette values, not new colours. */
html[data-theme="light"] { --palette-field: #FEFDFA; --palette-nav-surface: #FAF9F5; }
html[data-theme="dark"] { --palette-field: #111111; --palette-nav-surface: #343433; }
/* The photograph overlay is a direct theme state rather than a palette alias.
   Sampling blur stays fixed; only the small tint difference changes. */
html.theme-css-fade body#page-top.home-page .home-cover-art::after {
  transition: background-color 320ms ease;
}
/* Older engines keep a colour-only fallback on the page's stable canvases.
   Moving copy and controls retain their existing animation declarations. */
html.theme-css-fade:not(.theme-token-transitions),
html.theme-css-fade:not(.theme-token-transitions) body#page-top,
html.theme-css-fade:not(.theme-token-transitions) body#page-top :is(.work-section,
  .about-section, .about-intro, .gallery-main, .contact-section, .contact-main,
  .contact-form-panel, .site-footer.editorial-footer) {
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-css-fade,
  html.theme-css-fade body#page-top,
  html.theme-css-fade body#page-top.home-page .home-cover-art::after {
    transition: none !important;
  }
}

/* Theme changes crossfade complete, contrast-paired surfaces. No independent
   text fade, image recolouring, or live backdrop-filter interpolation. */
html.theme-view-active {
  --theme-colour-duration: 0ms;
  transition: none !important;
}
html.theme-view-active::view-transition-group(root) { animation: none; }
html.theme-view-active::view-transition-old(root),
html.theme-view-active::view-transition-new(root) { mix-blend-mode: normal; }
html.theme-view-active::view-transition-old(root) { animation: none; }
html.theme-view-active::view-transition-new(root) {
  animation: theme-crossfade 320ms ease both;
}
html.theme-view-active::view-transition { pointer-events: none; }
html.theme-view-active .gallery-collage-shade::before,
html.theme-view-active .gallery-collage-shade::after,
html.theme-view-active .gallery-stage-art::after,
html.theme-view-active .home-cover-art::after { transition: none !important; }
@keyframes theme-crossfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.theme-view-active::view-transition-group(root),
  html.theme-view-active::view-transition-new(root) { animation: none !important; }
}

/* Source: navigation-capsule.css */
/* Navigation is one material. The selected segment stays distinct from hover. */
html[data-theme] body#page-top {
  --navigation-capsule-fill: color-mix(in srgb, var(--palette-elevated) 74%, transparent);
  --navigation-capsule-selected: color-mix(in srgb, var(--primary-fill) 95%, transparent);
  --navigation-capsule-ink: var(--primary-on-fill);
  --navigation-capsule-wash: var(--palette-glass-light);
  --navigation-mobile-fill: color-mix(in srgb, var(--palette-surface) 88%, transparent);
}
html[data-theme="dark"] body#page-top {
  --navigation-capsule-fill: color-mix(in srgb, var(--palette-canvas) 66%, transparent);
}

@media (min-width: 701px) {
  .navigation-scrim { display: none; }
  html[data-theme] body#page-top .site-header .header-controls { gap: 14px; }
  html[data-theme] body#page-top .site-header .theme-toggle { width: 52px; height: 52px; }
  html[data-theme] body#page-top .site-header .primary-navigation {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    width: clamp(420px, 35vw, 492px);
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--navigation-edge);
    border-radius: var(--radius-segment);
    background: linear-gradient(115deg, var(--navigation-capsule-wash), transparent 62%), var(--navigation-capsule-fill);
    box-shadow: inset 0 1px 0 var(--navigation-rim);
    /* The final floating-header layer supplies a fixed local frost. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color var(--theme-colour-duration, 180ms) ease, border-color var(--theme-colour-duration, 180ms) ease;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: .065em;
    white-space: nowrap;
    touch-action: manipulation;
    transition: color var(--theme-colour-duration, 160ms) ease, background-color var(--theme-colour-duration, 160ms) ease, scale 160ms var(--apple-ease) !important;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background: var(--navigation-capsule-selected);
    color: var(--navigation-capsule-ink);
    font-weight: 400;
  }
  html[data-theme] body#page-top .site-header .primary-navigation.has-navigation-highlight a[aria-current="page"] {
    background: transparent;
  }
  html[data-theme] body#page-top .site-header .navigation-highlight {
    inset: 3px auto 3px 3px;
    width: calc((100% - 14px) / 5);
    height: auto;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--navigation-capsule-selected);
    box-shadow: inset 0 1px 0 var(--frost-action-rim);
    transform: translateX(calc(var(--navigation-index, 0) * (100% + 2px)));
    transition: transform 250ms var(--apple-ease), opacity 160ms ease;
  }
  html[data-theme] body#page-top .site-header .navigation-highlight.is-initializing { transition: none; }
  html[data-theme] body#page-top .site-header .primary-navigation a:active { scale: .975; }
  html[data-theme] body#page-top .site-header .primary-navigation a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  html[data-theme] body#page-top .site-header .primary-navigation {
    width: clamp(376px, 46vw, 420px);
  }
  html[data-theme] body#page-top .site-header .primary-navigation a {
    padding-inline: 6px;
    font-size: 11px;
    letter-spacing: .045em;
  }
  html[data-theme] body#page-top .site-header .header-controls { gap: 10px; }
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .site-header .primary-navigation a:not([aria-current="page"]):hover {
    background: var(--navigation-frost-hover);
    color: var(--ink);
  }
}

/* Phones use a roomy vertical group, with equal space above and below the links.
   Its translucent tint sits above the one stationary background blur. */
@media (max-width: 700px) {
  .navigation-scrim { opacity: 0; transition: none; }
  /* script.js fades one stationary sampler with the panel's progress. Its
     blur strength never changes; it unmounts only at zero opacity. */
  html.navigation-lock .navigation-scrim {
    visibility: visible;
    opacity: 1;
    background: rgb(0 0 0 / 18%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  html[data-theme] body#page-top .site-header .primary-navigation {
    --navigation-row-height: 48px;
    --navigation-inset: 10px;
    top: calc(var(--site-header-height, 76px) + 8px);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    gap: 2px;
    padding: var(--navigation-inset);
    max-height: calc(100dvh - var(--site-header-height, 76px) - 24px - env(safe-area-inset-bottom));
    border: 1px solid var(--navigation-edge);
    /* 24px inner curve + 10px inset + 1px edge = concentric 35px corners. */
    border-radius: calc(var(--navigation-row-height) / 2 + var(--navigation-inset) + 1px);
    background: var(--navigation-mobile-fill);
    box-shadow: inset 0 1px 0 var(--navigation-rim), 0 12px 28px rgb(0 0 0 / 12%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    scrollbar-width: thin;
    scroll-padding-block: var(--navigation-inset);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    /* Geometry and opacity have one JS owner, including fast reversals.
       Palette tokens already own theme colours, with no follower delays. */
    transition: none !important;
  }
  html[data-theme] body#page-top .site-header .primary-navigation.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation.is-closing {
    visibility: visible;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a {
    flex: 0 0 auto;
    min-height: var(--navigation-row-height);
    padding: 12px 18px;
    touch-action: manipulation;
    opacity: 0;
    translate: 0 -6px;
    transition: none !important;
  }
  html[data-theme] body#page-top .site-header .primary-navigation.is-open a {
    opacity: 1;
    translate: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background: var(--navigation-capsule-selected);
    color: var(--navigation-capsule-ink);
    box-shadow: inset 0 1px 0 var(--frost-action-rim);
    font-weight: 400;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a:focus-visible {
    outline-offset: -3px;
  }
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"]:focus-visible {
    outline-color: var(--primary-on-fill);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body#page-top .site-header .primary-navigation,
  html[data-theme] body#page-top .site-header .primary-navigation:is(.is-open, .is-closing),
  html[data-theme] body#page-top .site-header .primary-navigation:is(.is-open, .is-closing) a {
    transition: none !important;
  }
  html[data-theme] body#page-top .site-header :is(.primary-navigation a, .navigation-highlight) {
    transition: none !important;
    scale: 1 !important;
    translate: none !important;
    opacity: 1;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), (update: slow) {
  html.navigation-lock .navigation-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation {
    background: var(--surface) !important;
  }
}
@media (forced-colors: active) {
  html[data-theme] body#page-top .site-header .primary-navigation {
    border-color: ButtonText;
    background: Canvas;
    box-shadow: none;
  }
  html[data-theme] body#page-top .site-header .navigation-highlight { display: none; }
  html[data-theme] body#page-top .site-header .primary-navigation.has-navigation-highlight a[aria-current="page"],
  html[data-theme] body#page-top .site-header .primary-navigation a[aria-current="page"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* Source: gallery-editorial.css */
/* A photographic contents page and quiet, dedicated collection chapters.
   Photographs carry the colour; the surrounding system inherits the site palette. */
body:is(.gallery-index-page, .collection-page) {
  --journal-ease: cubic-bezier(.22, 1, .36, 1);
  --journal-image-radius: 10px;
  --journal-gap: clamp(20px, 2.5vw, 36px);
  --journal-rule: color-mix(in srgb, var(--rule) 72%, transparent);
  --gallery-load-first: 860ms;
  --gallery-load-standard: 760ms;
  background: var(--paper);
  color: var(--ink);
}
body:is(.gallery-index-page, .collection-page) .journal-main {
  display: block;
  min-width: 0;
  overflow: visible;
  padding-bottom: clamp(72px, 8vw, 120px);
  background: var(--paper);
}
body:is(.gallery-index-page, .collection-page) .page-shell {
  max-width: 1440px;
}
body.gallery-index-page .journal-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
body.gallery-index-page :is(.journal-label, .journal-total) {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.5;
  text-transform: none;
}
body.gallery-index-page .journal-label {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.1;
}
body.gallery-index-page .journal-total { color: var(--ink-soft); text-align: right; }
body.gallery-index-page .journal-collections { scroll-margin-top: 100px; }
body.gallery-index-page .collection-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
}
body:is(.gallery-index-page, .collection-page) .collection-cover {
  display: block;
  position: relative;
  min-width: 0;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
body:is(.gallery-index-page, .collection-page) .collection-cover-art {
  position: relative;
  display: block;
  isolation: isolate;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--journal-image-radius);
  background: transparent;
  box-shadow: none;
}
body:is(.gallery-index-page, .collection-page) .collection-cover-art > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--cover-position, center);
  border: 0;
  border-radius: 0;
  filter: none;
  transform: scale(1);
  transition: transform 850ms var(--journal-ease);
}
body:is(.gallery-index-page, .collection-page) .collection-cover-arrow {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  width: 42px;
  height: 42px;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: rgb(12 12 12 / 60%);
  color: #fff;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 320ms var(--journal-ease), background-color var(--theme-colour-duration, 180ms) ease;
  pointer-events: none;
}
/* The photographic cover explains its action only when approached. */
body:is(.gallery-index-page, .collection-page) .collection-cover-cue {
  position: absolute;
  right: calc(clamp(14px, 2vw, 24px) + 54px);
  bottom: calc(clamp(14px, 2vw, 24px) + 3px);
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(12 12 12 / 60%);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(7px, 0, 0);
  transition: opacity 220ms ease, transform 360ms var(--journal-ease);
  pointer-events: none;
}
body:is(.gallery-index-page, .collection-page) .collection-cover:focus-visible .collection-cover-cue {
  opacity: 1;
  transform: none;
}
body.collection-page .collection-cover-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding-top: clamp(15px, 1.5vw, 22px);
}
body.collection-page .collection-cover-caption h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(29px, 2.65vw, 40px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.17;
}
body.collection-page .collection-cover-detail {
  display: contents;
}
body.collection-page .collection-cover-detail p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.65;
  text-transform: none;
}
body.collection-page .collection-cover-detail p:first-child {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: left;
}
body.collection-page .collection-cover-detail p:last-child {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
body:is(.gallery-index-page, .collection-page) .collection-cover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 7px;
  border-radius: var(--journal-image-radius);
}

/* The Gallery index reads as photographic covers, with one quiet text group
   in each frame. Keep related chapter thumbnails in their original layout. */
body.gallery-index-page {
  --journal-image-radius: 18px;
  --cover-inset: clamp(26px, 4vw, 58px);
  --cover-arrival-x: -26px;
  --copy-arrival-x: -20px;
  --opening-photo-scale: 1.07;
}
body.gallery-index-page .collection-cover {
  scroll-margin-top: 106px;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--journal-image-radius);
}
body.gallery-index-page .collection-cover-surface {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--journal-image-radius);
}
body.gallery-index-page .collection-cover-art {
  height: clamp(420px, calc(100svh - 190px), 780px);
  aspect-ratio: auto;
}
/* Local shading protects the caption without washing over the mountains,
   skies, faces or architecture in the main part of each photograph. */
body.gallery-index-page .collection-cover-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 25% 0 0;
  background: linear-gradient(to top, rgb(0 0 0 / 78%), rgb(0 0 0 / 44%) 32%, rgb(0 0 0 / 12%) 68%, transparent);
  pointer-events: none;
}
body.gallery-index-page .collection-cover-caption {
  position: absolute;
  z-index: 3;
  inset: auto var(--cover-inset) var(--cover-inset);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  pointer-events: none;
}
body.gallery-index-page .collection-cover-copy { min-width: 0; }
body.gallery-index-page .collection-cover-copy h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--on-photo);
  font-family: var(--serif);
  font-size: clamp(54px, 6.6vw, 98px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / 12%);
}
body.gallery-index-page .collection-cover-copy p {
  margin: 14px 0 0;
  color: var(--on-photo);
  font: 400 clamp(13px, 1.15vw, 16px)/1.5 var(--sans);
  letter-spacing: .005em;
  text-wrap: pretty;
}
body.gallery-index-page .collection-cover-action {
  display: inline-flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin-bottom: 2px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--on-photo);
  font: 400 12px/1.5 var(--sans);
  white-space: nowrap;
}
body.gallery-index-page .collection-cover-action svg { width: 18px; height: 18px; flex: none; transition: transform 180ms var(--journal-ease); }
body.gallery-index-page .collection-cover-action svg path { transition: transform 240ms var(--journal-ease); }
body.gallery-index-page .collection-cover-title-mask { display: block; overflow: hidden; padding-block: .05em; margin-block: -.05em; }
body.gallery-index-page .collection-cover-title-line { display: block; }
/* Progress values have one owner in gallery-cover-motion.js. No timed CSS
   transitions lag behind scrolling, and the first cover is visible at rest. */
@media (prefers-reduced-motion: no-preference) {
  html.gallery-cover-motion-ready body.gallery-index-page .collection-cover-surface {
    opacity: var(--cover-opacity, 1);
    transform: translate3d(var(--cover-x, 0px), 0, 0);
  }
  html.gallery-cover-motion-ready body.gallery-index-page .collection-cover-copy h2 {
    opacity: var(--title-opacity, 1);
    transform: translate3d(var(--title-x, 0px), 0, 0);
  }
  html.gallery-cover-motion-ready body.gallery-index-page .collection-cover-copy p {
    opacity: var(--detail-opacity, 1);
    transform: translate3d(var(--detail-x, 0px), 0, 0);
  }
  html.gallery-cover-motion-ready body.gallery-index-page .collection-cover-action {
    opacity: var(--action-opacity, 1);
    transform: translate3d(var(--action-x, 0px), 0, 0);
  }
  html.gallery-cover-motion-ready body.gallery-index-page .is-cover-revealing .collection-cover-surface { will-change: opacity, transform; }
  body.gallery-index-page .journal-intro { animation: gallery-copy-arrival 650ms 40ms var(--journal-ease) both; }
  body.gallery-index-page .is-cover-entering .collection-cover-surface { animation: gallery-cover-arrival 1800ms var(--journal-ease) both; }
  body.gallery-index-page .is-cover-entering .collection-cover-art > img { animation: gallery-opening-photo 1800ms var(--journal-ease) both; }
  body.gallery-index-page .is-cover-entering .collection-cover-title-line { animation: gallery-opening-title 960ms 260ms var(--journal-ease) both; }
  body.gallery-index-page .is-cover-entering .collection-cover-copy p { animation: gallery-opening-detail 740ms 420ms var(--journal-ease) both; }
  body.gallery-index-page .is-cover-entering .collection-cover-action { animation: gallery-opening-detail 760ms 540ms var(--journal-ease) both; }
  html.gallery-cover-scrolled body.gallery-index-page :is(.journal-intro, .is-featured .collection-cover-title-line, .is-featured .collection-cover-copy h2, .is-featured .collection-cover-copy p, .is-featured .collection-cover-action) { animation: none; }
}
@keyframes gallery-cover-arrival {
  from { opacity: .5; clip-path: inset(0 4.5% round 18px); }
  50% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 round 18px); }
}
@keyframes gallery-opening-photo {
  from { transform: scale(var(--opening-photo-scale)); }
  to { transform: scale(var(--opening-rest-scale, 1)); }
}
@keyframes gallery-opening-title {
  from { opacity: 0; transform: translate3d(0, 110%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes gallery-opening-detail {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes gallery-copy-arrival {
  from { opacity: 0; transform: translate3d(var(--copy-arrival-x), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
body.gallery-index-page .collection-cover:focus-visible { outline-color: var(--ink); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  body.gallery-index-page .collection-cover:hover { --opening-rest-scale: 1.015; }
  body.gallery-index-page .collection-cover:hover .collection-cover-art > img { transform: scale(1.015); }
  body.gallery-index-page .collection-cover:hover .collection-cover-action svg path { transform: translate(2px, -2px); }
}
body.gallery-index-page .collection-cover:active .collection-cover-action svg { transform: scale(.91); }
@media (max-width: 700px) {
  body.gallery-index-page { --cover-inset: 25px; --cover-arrival-x: -18px; --copy-arrival-x: -16px; --opening-photo-scale: 1.045; }
  body.gallery-index-page .journal-intro { padding-top: 12px; padding-bottom: 14px; }
  body.gallery-index-page .collection-index-grid { gap: 24px; }
  body.gallery-index-page .collection-cover-art { height: clamp(350px, 66svh, 620px); }
  body.gallery-index-page .collection-cover-caption { gap: 14px; }
  body.gallery-index-page .collection-cover-copy h2 { font-size: clamp(39px, 10vw, 66px); line-height: 1.04; }
  body.gallery-index-page .collection-cover-copy p { max-width: 25ch; margin-top: 10px; font-size: 12px; }
  body.gallery-index-page .collection-cover-action { width: 46px; min-height: 46px; padding: 13px; margin: 0 0 1px; }
  body.gallery-index-page .collection-cover-action > span { display: none; }
  /* The navigation already offers Contact. Keep its duplicate floating
     shortcut from covering the collection action on narrow screens. */
  body.gallery-index-page .contact-float { display: none; }
}
@media (max-width: 380px) {
  body.gallery-index-page { --cover-inset: 20px; }
  body.gallery-index-page .collection-cover-copy h2 { font-size: 38px; }
  body.gallery-index-page .collection-cover-caption { gap: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.gallery-index-page .collection-cover-art { height: max(320px, 90svh); }
}
@media (prefers-reduced-motion: reduce) {
  body.gallery-index-page :is(.journal-intro, .collection-cover-surface, .collection-cover-title-line, .collection-cover-copy h2, .collection-cover-copy p, .collection-cover-action) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  body.gallery-index-page .collection-cover-action :is(svg, svg path) { transform: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  body.gallery-index-page .collection-cover-art::before { background: none; }
  body.gallery-index-page .collection-cover-copy { padding: 10px; border-radius: 8px; background: Canvas; }
  body.gallery-index-page .collection-cover-copy :is(h2, p) { color: CanvasText; text-shadow: none; }
}
body.collection-page .collection-intro {
  padding-top: 20px;
  padding-bottom: clamp(26px, 3vw, 40px);
}
body.collection-page .collection-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.5;
  transition: color var(--theme-colour-duration, 180ms) ease;
}
body.collection-page .collection-back svg { width: 16px; height: 16px; }
body.collection-page .collection-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: 22px;
  text-align: center;
}
body.collection-page .collection-heading {
  max-width: min(100%, 18ch);
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(64px, 7.4vw, 110px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: normal;
}
body.collection-page .collection-intro-aside { width: min(100%, 50ch); padding-bottom: 0; }
body.collection-page .collection-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  text-wrap: pretty;
}
body.collection-page .collection-location {
  margin: 15px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: .035em;
  line-height: 1.5;
}
body.collection-page .collection-archive {
  position: relative;
  overflow: visible;
  scroll-margin-top: 0;
}
body.collection-page .collection-toolbar {
  position: sticky;
  z-index: 12;
  top: calc(var(--site-header-height, 84px) + 8px);
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(24px, 2.8vw, 40px);
  padding-block: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
/* Filter results stay available to assistive technology without adding a
   second visual item beside the compact floating controls. */
body.collection-page #gallery-photo-count {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
body.collection-page .collection-tone-options {
  --collection-filter-glass: color-mix(in srgb, var(--palette-surface, var(--paper)) 74%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--palette-glass-rule, color-mix(in srgb, var(--ink) 9%, transparent));
  border-radius: 999px;
  background: var(--palette-nav-surface, var(--paper));
  box-shadow: inset 0 1px 0 var(--palette-glass-light, rgb(255 255 255 / 12%));
  isolation: isolate;
  pointer-events: auto;
}
html[data-theme="dark"] body.collection-page .collection-tone-options {
  --collection-filter-glass: color-mix(in srgb, var(--palette-canvas, var(--paper)) 64%, transparent);
}
html[data-theme] body#page-top.collection-page .collection-tone {
  display: inline-flex;
  min-height: 44px;
  min-width: 54px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: color var(--theme-colour-duration, 180ms) ease, background-color var(--theme-colour-duration, 180ms) ease, opacity 180ms ease;
}
html[data-theme] body#page-top.collection-page .collection-tone[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary-fill) 95%, transparent);
  color: var(--primary-on-fill);
}
html[data-theme] body#page-top.collection-page .collection-tone:active { opacity: .75; }
html[data-theme] body#page-top.collection-page .collection-tone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body.collection-page .collection-photo-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--journal-gap);
  align-items: start;
}
html[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-tile {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: auto;
  break-inside: avoid;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  content-visibility: visible;
  contain-intrinsic-size: none;
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none;
  will-change: auto;
}
html[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-tile[hidden] { display: none !important; }
body.collection-page .collection-photo-reveal { display: block; width: 100%; }
html[data-theme] body#page-top.collection-page .gallery-photo-open {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
  transform: none;
  scale: 1;
  touch-action: manipulation;
}
html[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  opacity: 1;
  filter: none;
  background: transparent;
  transform: none;
  animation: none;
  transition: transform 800ms var(--journal-ease);
}
/* The controller marks cached images loaded before claiming this state.
   Only the image fades after loading; its tile keeps the scroll reveal. */
html.journal-photo-ready[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-photo {
  opacity: 0;
  transition: opacity 420ms ease-out, transform 800ms var(--journal-ease);
}
html.journal-photo-ready[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-tile:is(.is-loaded, .is-error) .gallery-photo {
  opacity: 1;
}
/* Reserve geometry without painting an empty matte. Photograph and inset rim
   share the decode-ready state and one duration, so no box leads the pixels. */
html.journal-photo-ready[data-theme] body#page-top.collection-page .collection-photo:not(.is-loaded):not(.is-error):not(:focus-within) .collection-photo-reveal { opacity: 0; }
html.journal-cover-ready[data-theme] body#page-top:is(.gallery-index-page, .collection-page) .collection-cover-art > img {
  opacity: 0;
  transition: opacity 420ms ease-out, transform 850ms var(--journal-ease);
}
html.journal-cover-ready[data-theme] body#page-top:is(.gallery-index-page, .collection-page) .is-image-loaded .collection-cover-art > img { opacity: 1; }
body.collection-page .collection-photo-grid.has-single-photo { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
body.collection-page .collection-empty {
  padding-block: 48px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
body.collection-page .collection-empty[hidden] { display: none; }
body.collection-page .collection-related {
  margin-top: clamp(64px, 8vw, 116px);
  padding-top: clamp(28px, 3.6vw, 48px);
  border-top: 1px solid var(--journal-rule);
}
body.collection-page .collection-related > h2 {
  margin: 0 0 clamp(26px, 3vw, 40px);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.12;
}
body.collection-page .collection-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--journal-gap);
}
body.collection-page .collection-related-grid .collection-cover-art { aspect-ratio: 3 / 2; }
body.collection-page .collection-related-grid .collection-cover-caption h2 { font-size: clamp(28px, 2.6vw, 38px); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.collection-page .collection-tone-options {
    background: var(--collection-filter-glass);
    -webkit-backdrop-filter: blur(10px) saturate(105%);
    backdrop-filter: blur(10px) saturate(105%);
  }
}
@media (hover: hover) and (pointer: fine) {
  body.collection-page .collection-cover:hover .collection-cover-art > img { transform: scale(1.025); }
  body:is(.gallery-index-page, .collection-page) .collection-cover:hover .collection-cover-arrow { transform: translate3d(2px, -2px, 0); background-color: rgb(12 12 12 / 66%); }
  body:is(.gallery-index-page, .collection-page) .collection-cover:hover .collection-cover-cue { opacity: 1; transform: none; }
  body.collection-page .collection-back:hover { color: var(--ink); }
  html[data-theme] body#page-top.collection-page .collection-tone:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
  html[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-photo-open:hover .gallery-photo { transform: scale(1.018); }
}
@media (max-width: 1000px) {
  body.collection-page .collection-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.collection-page .collection-intro-layout { gap: 20px; }
  body.collection-page .collection-heading { font-size: clamp(58px, 8.2vw, 82px); }
}
@media (max-width: 700px) {
  body.collection-page { --journal-image-radius: 8px; --journal-gap: 20px; }
  body.gallery-index-page .journal-total { font-size: 11px; }
  body.collection-page .collection-cover-caption { gap: 6px 12px; padding-top: 14px; }
  body.collection-page .collection-cover-caption h2 { font-size: 30px; }
  body.collection-page .collection-cover-detail { padding-top: 2px; gap: 2px; }
  body.collection-page .collection-cover-detail p { font-size: 11px; }
  body:is(.gallery-index-page, .collection-page) .collection-cover-arrow { width: 38px; height: 38px; padding: 11px; }
  body:is(.gallery-index-page, .collection-page) .collection-cover-cue { right: calc(clamp(14px, 2vw, 24px) + 50px); bottom: calc(clamp(14px, 2vw, 24px) + 1px); }
  body.collection-page .collection-intro { padding-top: 12px; padding-bottom: 24px; }
  body.collection-page .collection-back { margin-bottom: 16px; }
  body.collection-page .collection-intro-layout { gap: 18px; }
  body.collection-page .collection-heading { max-width: 100%; font-size: clamp(50px, 12.5vw, 76px); letter-spacing: -.05em; line-height: 1.04; }
  body.collection-page .collection-intro-aside { max-width: 39ch; padding-bottom: 0; }
  body.collection-page .collection-description { font-size: 14px; line-height: 1.75; }
  body.collection-page .collection-location { margin-top: 12px; font-size: 10px; }
  body.collection-page .collection-toolbar { margin-bottom: 24px; }
  html[data-theme] body#page-top.collection-page .collection-tone { min-height: 44px; padding: 9px 13px; font-size: 11px; }
  body.collection-page .collection-photo-grid { grid-template-columns: minmax(0, 1fr); }
  body.collection-page .collection-related { margin-top: 54px; padding-top: 26px; }
  body.collection-page .collection-related > h2 { margin-bottom: 26px; font-size: 38px; }
  body.collection-page .collection-related-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.collection-page .collection-related-grid .collection-cover-art { aspect-ratio: 3 / 2; }
}
@media (max-width: 420px) {
  body.collection-page .collection-tone-options { width: 100%; }
  html[data-theme] body#page-top.collection-page .collection-tone { flex: 1 1 auto; min-width: 0; padding-inline: 9px; }
}
/* One reveal owner per element. Without JS every photograph remains visible. */
@media (prefers-reduced-motion: no-preference) {
  body.collection-page .collection-heading { animation: collection-copy-enter 900ms 40ms var(--journal-ease) both; }
  body.collection-page .collection-description { animation: collection-copy-enter 800ms 150ms var(--journal-ease) both; }
  body.collection-page .collection-location { animation: collection-copy-enter 760ms 250ms var(--journal-ease) both; }
  body.collection-page .collection-tone > span { display: block; animation: collection-copy-enter 700ms 310ms var(--journal-ease) both; }
  body.collection-page .collection-tone:nth-child(2) > span { animation-delay: 370ms; }
  body.collection-page .collection-tone:nth-child(3) > span { animation-delay: 430ms; }
  html.journal-motion-ready body:is(.gallery-index-page, .collection-page) .journal-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 760ms var(--journal-ease), transform 860ms var(--journal-ease);
  }
  html.journal-motion-ready body:is(.gallery-index-page, .collection-page) .journal-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  html.chapter-photo-motion-ready[data-theme] body#page-top.collection-page .collection-photo-reveal {
    opacity: var(--photo-entry-opacity, 1);
    transform: translate3d(var(--photo-entry-x, 0px), 0, 0);
    transition: none;
  }
  html.chapter-photo-motion-ready[data-theme] body#page-top.collection-page .is-photo-progressing .collection-photo-reveal { will-change: opacity, transform; }
  html.chapter-photo-motion-ready[data-theme] body#page-top.collection-page .collection-photo:focus-within .collection-photo-reveal { opacity: 1; transform: none; }
}
@keyframes collection-copy-enter {
  from { opacity: 0; transform: translate3d(-22px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes journal-line-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes journal-copy-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
html.journal-restored body:is(.gallery-index-page, .collection-page) :is(.journal-heading > span, .journal-intro-top, .journal-intro-bottom, .collection-intro-layout, .collection-heading, .collection-description, .collection-location, .collection-tone > span, .journal-reveal),
body:is(.gallery-index-page, .collection-page).journal-restored :is(.journal-heading > span, .journal-intro-top, .journal-intro-bottom, .collection-intro-layout, .collection-heading, .collection-description, .collection-location, .collection-tone > span, .journal-reveal) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body:is(.gallery-index-page, .collection-page) .collection-cover-cue { transform: none; transition: none; }
  body:is(.gallery-index-page, .collection-page) :is(.journal-heading > span, .journal-intro-top, .journal-intro-bottom, .collection-heading, .collection-description, .collection-location, .collection-tone > span, .collection-intro-aside, .collection-intro-layout, .collection-photo-reveal, .journal-reveal, .collection-cover-art > img, .collection-cover-arrow, .journal-jump svg),
  html[data-theme] body#page-top.collection-page :is(.collection-photo-grid .gallery-photo, .collection-photo-grid .gallery-tile, .collection-tone) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  body.collection-page .collection-tone-options { background: var(--palette-nav-surface, var(--paper)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme] body#page-top.collection-page .collection-tone[aria-pressed="true"] { background: var(--primary-fill); }
}
@media (forced-colors: active) {
  body.collection-page .collection-tone-options { border-color: ButtonText; background: Canvas; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme] body#page-top.collection-page .collection-tone { color: ButtonText; }
  body:is(.gallery-index-page, .collection-page) .collection-cover-arrow { border-color: ButtonText; background: Canvas; color: ButtonText; }
  html[data-theme] body#page-top.collection-page .collection-tone[aria-pressed="true"] { border-color: Highlight; background: Highlight; color: HighlightText; }
}

body.collection-page .collection-image-error { display: block; padding: 20px; color: var(--ink); font: 14px var(--sans); }
body.collection-page .gallery-empty { margin: 0; padding-block: 48px; color: var(--ink-soft); }
body.collection-page .gallery-empty[hidden] { display:none; }

/* Source: gallery-stage.css */
/* Gallery index: photographs form a full-screen scene. Chapter pages retain
   their independent grid and viewer. Only this owner moves the index scene. */
html[data-theme] body#page-top.gallery-index-page .gallery-presentation {
  padding: 0;
  margin-top: calc(-1 * var(--site-header-height, 84px));
  background: var(--paper);
}
.gallery-stage-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gallery-stage {
  position: relative; isolation: isolate; color: var(--on-photo, #F2F1EC);
  background: var(--photo-surface, #111111);
  --collage-word-accent: #CBC0A8;
}
.gallery-stage-size { position: absolute; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.gallery-stage-viewport { position: relative; }
html.gallery-stage-restoring .gallery-stage-viewport { visibility: hidden; }
.gallery-stage-intro { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--photo-surface); }
.gallery-collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; }
.gallery-collage-panel { min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: var(--photo-surface); transition: opacity 650ms cubic-bezier(.22,.61,.36,1); }
.gallery-collage-panel img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.025); pointer-events: none; user-select: none; }
.gallery-collage-shade { position: absolute; inset: 0; pointer-events: none; }
/* Two static masks crossfade on the compositor. Theme changes never repaint
   or interpolate a full-screen photograph/filter on every animation frame. */
.gallery-collage-shade::before, .gallery-collage-shade::after { content: ""; position: absolute; inset: 0; transition: opacity 400ms ease; }
.gallery-collage-shade::before { background: radial-gradient(ellipse at 50% 48%, rgb(0 0 0 / 66%), rgb(0 0 0 / 38%) 78%), linear-gradient(0deg,rgb(0 0 0 / 25%),transparent 80%),rgb(0 0 0 / 40%); opacity: 1; }
.gallery-collage-shade::after { background: radial-gradient(ellipse at 50% 48%,rgb(0 0 0 / 42%),rgb(0 0 0 / 6%) 78%),linear-gradient(0deg,rgb(0 0 0 / 10%),transparent 80%),rgb(0 0 0 / 2.5%); opacity: 0; }
html[data-theme="light"] .gallery-collage-shade::before { opacity: 0; }
html[data-theme="light"] .gallery-collage-shade::after { opacity: 1; }
.gallery-intro-content { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 112px 28px 128px; }
html[data-theme] body#page-top.gallery-index-page .gallery-journal-copy { width: min(100%,900px); text-align: center; opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
html[data-theme] body#page-top .gallery-journal-copy > .gallery-intro-enter { opacity: var(--intro-opacity,1); transform: translate3d(var(--intro-x,0px),0,0); }
html[data-theme] body#page-top .gallery-journal-copy h1 { margin: 0; font: 300 clamp(60px,6.2vw,94px)/1.04 var(--serif); letter-spacing: -.035em; color: var(--on-photo); text-wrap: balance; }
html[data-theme] body#page-top .gallery-journal-copy p { margin: 22px 0 30px; color: var(--on-photo); font: 300 clamp(23px,2.1vw,32px)/1.4 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
html[data-theme] body#page-top .gallery-journal-copy p em { color: var(--collage-word-accent); font-weight: inherit; font-style: italic; }
html[data-theme="light"] body#page-top .gallery-journal-copy :is(h1,p) { text-shadow: 0 2px 12px rgb(0 0 0 / 40%); }
html[data-theme] body#page-top .gallery-intro-action { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; gap: 24px; padding: 14px 23px; border: 1px solid var(--portfolio-photo-rim); border-radius: 999px; color: var(--on-photo); background: linear-gradient(150deg,var(--portfolio-photo-wash),transparent 64%),var(--portfolio-photo-fill); box-shadow: inset 0 1px 0 var(--portfolio-photo-rim),0 3px 12px rgb(0 0 0 / 12%); backdrop-filter: blur(16px) saturate(108%); -webkit-backdrop-filter: blur(16px) saturate(108%); font: 400 13px/1.5 var(--sans); text-decoration: none; transition: background-color 400ms ease,border-color var(--theme-colour-duration, 320ms) ease,box-shadow var(--theme-colour-duration, 320ms) ease; }
.gallery-intro-action svg { width: 20px; height: 20px; transition: transform 240ms var(--journal-ease); }
.gallery-intro-action:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 5px; }
.gallery-intro-action:active svg { transform: translateY(2px); }
.gallery-stage-slide {
  position: relative; min-height: 100vh; min-height: 100svh;
  overflow: hidden; isolation: isolate;
  background: var(--photo-surface, #111111);
}
.gallery-stage-art { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.gallery-stage-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.gallery-stage-art > img[data-stage-src] { display: none; }
.gallery-stage-slide.is-photo-error .gallery-stage-art img { visibility: hidden; }
/* Local contrast carries the copy; no full-screen frosted panel or photo blur. */
.gallery-stage-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(4 13 13 / 64%), rgb(4 13 13 / 30%) 44%, rgb(4 13 13 / 8%) 78%),
    linear-gradient(0deg, rgb(4 13 13 / 30%), transparent 30%, transparent 80%, rgb(4 13 13 / 16%));
  background-color: rgb(0 0 0 / var(--stage-photo-shade, 0));
  transition: background-color 400ms ease;
}
html[data-theme="dark"] .gallery-stage { --stage-photo-shade: .08; }
html[data-theme] body#page-top.gallery-index-page .gallery-stage-content {
  position: relative; z-index: 1; display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh; width: 100%; max-width: 1600px;
  padding: calc(var(--site-header-height, 84px) + 28px) clamp(80px, 8.5vw, 152px)
    calc(var(--site-header-height, 84px) + 44px);
}
.gallery-stage-copy { width: min(100%, 680px); text-align: left; }
/* Button colour follows each photograph; the site's neutral palette and
   navigation accent are unchanged. Every fill pairs with the same dark ink. */
.gallery-stage-slide[data-collection="sikkim"] { --collection-accent: #B3C1C1; }
.gallery-stage-slide[data-collection="esplanade"] { --collection-accent: #C7BEA9; }
.gallery-stage-slide[data-collection="kumartuli"] { --collection-accent: #C9AB98; }
.gallery-stage-slide[data-collection="princep-ghat"] { --collection-accent: #C5B597; }
.gallery-stage-slide[data-collection="mullick-market"] { --collection-accent: #B8B89A; }
.gallery-stage-slide[data-collection="mullick-ghat"] { --collection-accent: #AFBEC0; }
.gallery-stage-slide[data-collection="delhi"] { --collection-accent: #C8AA9B; }
html[data-theme] body#page-top .gallery-stage-copy h2 {
  margin: 0; color: var(--on-photo, #F2F1EC); background: none;
  -webkit-text-fill-color: currentColor; font-family: var(--serif);
  font-size: clamp(64px, 7.3vw, 110px); font-weight: 300;
  line-height: 1.04; letter-spacing: -.035em; text-wrap: balance;
}
html[data-theme] body#page-top .gallery-stage-description {
  max-width: 43ch; margin: 24px 0 32px; color: var(--on-photo, #F2F1EC);
  font-family: var(--sans); font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.8; font-weight: 400; text-wrap: pretty;
}
html[data-theme] body#page-top .gallery-stage-action {
  display: inline-flex; align-items: center; justify-content: space-between;
  min-height: 54px; max-width: 100%; gap: 32px; padding: 14px 23px;
  border-radius: var(--radius-control, 999px); border: 1px solid var(--portfolio-photo-edge);
  background-color: var(--portfolio-photo-fill); color: var(--on-photo);
  font: 400 13px/1.5 var(--sans); letter-spacing: .02em; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--theme-colour-duration, 240ms) ease, border-color var(--theme-colour-duration, 240ms) ease;
}
.gallery-stage-action svg { width: 20px; height: 20px; flex: none; transition: transform 240ms var(--journal-ease); }
.gallery-stage-action:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 5px; }
.gallery-stage-action:active svg { transform: scale(.9); }
.gallery-stage-controls[hidden] { display: none; }
html[data-theme] body#page-top .gallery-stage-arrow[hidden] { display: none; }
.gallery-stage-controls { position: absolute; z-index: 12; inset: 0; pointer-events: none; }
html[data-theme] body#page-top .gallery-stage-arrow {
  position: absolute; top: 50%; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 11px; margin-top: -24px;
  border: 1px solid var(--portfolio-photo-edge); border-radius: 50%; background: transparent; box-shadow: none;
  color: var(--on-photo, #F2F1EC); pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transition: background-color var(--theme-colour-duration, 240ms) ease, border-color var(--theme-colour-duration, 240ms) ease;
}
.gallery-stage-arrow.is-prev { left: clamp(8px, 2vw, 32px); }
.gallery-stage-arrow.is-next { right: clamp(8px, 2vw, 32px); }
.gallery-stage-arrow svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 70%)); transition: transform 240ms var(--journal-ease); }
.gallery-stage-arrow:focus-visible { outline: 2px solid var(--on-photo); outline-offset: -4px; border-radius: 8px; }
.gallery-stage-arrow:active svg { transform: scale(.9); }
.gallery-stage-meta {
  position: absolute; z-index: 12; inset: auto 0 0; display: flex;
  align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px clamp(80px, 8.5vw, 152px) max(28px, env(safe-area-inset-bottom));
  color: var(--on-photo, #F2F1EC); font: 400 11px/1.5 var(--sans);
  letter-spacing: .06em; pointer-events: none;
}
.gallery-stage-hint { display: inline-flex; gap: 12px; }
/* No enhancement means ordinary, accessible vertical full-screen sections. */
html:not(.gallery-stage-enhanced) .gallery-stage-meta { display: none; }
html.gallery-stage-enhanced .gallery-stage { clip-path: inset(0); height: 200vh; height: 200svh; }
html.gallery-stage-enhanced .gallery-stage-viewport {
  position: fixed; inset: 0 0 auto; height: 100vh; height: 100svh;
  overflow: hidden; touch-action: pinch-zoom;
  -webkit-user-select: none; user-select: none;
}
html.gallery-stage-enhanced .gallery-stage-slide { position: absolute; inset: 0; min-height: 100%; background: transparent; pointer-events: none; }
html.gallery-stage-enhanced :is(.gallery-stage-intro,.gallery-stage-deck) { position: absolute; inset: 0; }
html.gallery-stage-enhanced .gallery-stage-deck { overflow: hidden; overflow: clip; transform: translate3d(0,100%,0); }
html.gallery-stage-enhanced.gallery-stage-zoomed .gallery-stage-viewport { touch-action: auto; }
.gallery-stage-scenes { display: contents; }
html.gallery-stage-enhanced .gallery-stage-scenes { display: block; position: absolute; inset: 0; transform: translate3d(0,-100%,0); }
.gallery-stage-reveal { display: contents; }
html.gallery-stage-enhanced .gallery-stage-reveal {
  display: block; position: absolute; inset: 0;
  overflow: hidden; overflow: clip; pointer-events: none;
}
html.gallery-stage-enhanced .gallery-stage-slide .gallery-stage-action { pointer-events: auto; }
html.gallery-stage-enhanced .gallery-stage-art { background: var(--photo-surface); }
html.gallery-stage-enhanced .gallery-stage-line { opacity: 1; transform: none; }
html.gallery-stage-enhanced .gallery-stage-line > * {
  opacity: 1; transform: none;
}
html.gallery-stage-enhanced .gallery-stage-slide:not(.is-photo-ready) .gallery-stage-art img { opacity: 0; }
html[data-theme] body#page-top.gallery-index-page .site-footer.editorial-footer {
  position: relative; z-index: 2; margin-top: 0;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-intro-action:hover svg { transform: translateY(3px); }
  .gallery-stage-action:hover svg { transform: translate(2px, -2px); }
  .gallery-stage-arrow.is-prev:not([aria-disabled="true"]):hover svg { transform: translateX(-4px); }
  .gallery-stage-arrow.is-next:not([aria-disabled="true"]):hover svg { transform: translateX(4px); }
}
@media (max-width: 700px) {
  .gallery-collage { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(3,minmax(0,1fr)); }
  .gallery-collage-panel:nth-child(n+4) { display: none; }
  .gallery-collage-panel img { transform: scale(1.05); }
  html[data-theme] body#page-top .gallery-journal-copy h1 { font-size: clamp(34px,10.7vw,62px); }
  html[data-theme] body#page-top .gallery-journal-copy p { max-width: 28ch; margin: 20px auto 28px; font-size: clamp(22px,5.6vw,28px); }
  html[data-theme] body#page-top.gallery-index-page .gallery-stage-content {
    padding: calc(var(--site-header-height, 84px) + 24px) 28px
      calc(var(--site-header-height, 84px) + 48px);
  }
  html[data-theme] body#page-top .gallery-stage-copy h2 { font-size: clamp(48px, 13.4vw, 80px); }
  html[data-theme] body#page-top .gallery-stage-description { max-width: 36ch; margin: 20px 0 28px; font-size: 14px; line-height: 1.8; }
  html[data-theme] body#page-top .gallery-stage-action { min-height: 52px; padding: 13px 21px; font-size: 13px; gap: 28px; }
  .gallery-stage-art::after { background-image: linear-gradient(90deg, rgb(4 13 13 / 57%), rgb(4 13 13 / 22%)), linear-gradient(0deg, rgb(4 13 13 / 35%), transparent 80%); }
  .gallery-stage-meta { padding: 20px 28px max(24px, env(safe-area-inset-bottom)); font-size: 10px; }
  html[data-theme] body#page-top .gallery-stage-arrow { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); margin-top: 0; }
  .gallery-stage-arrow.is-prev { left: 28px; }
  .gallery-stage-arrow.is-next { right: 28px; }
}
/* Small landscape windows and enlarged text use a readable ordinary sequence,
   instead of clipping controls inside a scene too short to contain them. */
@media (max-height: 520px) and (min-width: 701px) {
  html[data-theme] body#page-top.gallery-index-page .gallery-stage-content { padding-block: 104px 68px; }
  html[data-theme] body#page-top .gallery-stage-copy h2 { font-size: 52px; }
  html[data-theme] body#page-top .gallery-stage-description { margin-block: 14px 22px; line-height: 1.6; }
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-stage-intro.is-preparing :is(.gallery-intro-enter, .gallery-collage-panel.is-opening-ready) { will-change: opacity, transform; }
  /* Match the live scroll style's specificity: otherwise the copy paints at
     opacity 1 during decode, then jumps back to 0 when its entrance starts. */
  html[data-theme].gallery-stage-booting body#page-top .gallery-journal-copy > .gallery-intro-enter { opacity: 0; }
  /* Decoding must not start a first fade before the stagger. The whole panel
     has one entrance owner, keeping its opacity and movement in sync. */
  html.gallery-stage-booting .gallery-collage-panel { opacity: 0; transition: none; }
  html:is(.gallery-stage-booting,.gallery-stage-ready) .gallery-collage-panel:not(.is-ready) { opacity: 0; }
  html.gallery-stage-ready .gallery-stage-intro.is-opening .gallery-intro-enter {
    animation: gallery-stage-copy-in 1650ms cubic-bezier(.22,.61,.36,1) calc(var(--line) * 140ms) both;
  }
  html.gallery-stage-ready .gallery-stage-intro .gallery-collage-panel.is-opening-ready {
    transition: none;
    animation: gallery-collage-panel-in 1250ms cubic-bezier(.22,.61,.36,1) calc(var(--panel-order) * 85ms) both;
  }
  @keyframes gallery-collage-panel-in { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
  @media (max-width: 700px) {
    html.gallery-stage-ready .gallery-stage-intro .gallery-collage-panel.is-opening-ready { animation-name: gallery-collage-panel-phone-in; animation-delay: calc(var(--panel-order) * 110ms); }
    @keyframes gallery-collage-panel-phone-in { from { opacity: 0; transform: translate3d(-9px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
  }
  @keyframes gallery-stage-copy-in { from { opacity: 0; transform: translate3d(var(--intro-x,0px),6px,0); } to { opacity: var(--intro-opacity,1); transform: translate3d(var(--intro-x,0px),0,0); } }
  @keyframes gallery-stage-photo-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  /* A global tiny duration on transition:all otherwise makes inherited
     visibility propagate through caption ancestors over several frames. */
  .gallery-stage-scenes, .gallery-stage-reveal, .gallery-stage-slide,
  .gallery-stage-content, .gallery-stage-copy, .gallery-stage-line,
  .gallery-stage-enter { transition: none !important; }
  .gallery-stage-enter, .gallery-intro-enter, .gallery-stage-line > *, .gallery-stage-art img, .gallery-collage-panel img { animation: none !important; transform: none !important; opacity: 1 !important; }
  .gallery-stage-action svg, .gallery-stage-arrow svg, .gallery-collage-panel { transition: none !important; }
  .gallery-collage-shade::before, .gallery-collage-shade::after, .gallery-stage-art::after { transition: none !important; }
}
@media (forced-colors: active) {
  .gallery-stage-copy { padding: 16px; background: Canvas; }
  html[data-theme] body#page-top .gallery-stage-copy :is(h2,p) { color: CanvasText; }
  html[data-theme] body#page-top :is(.gallery-stage-action,.gallery-stage-arrow) { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
}

/* Source: floating-header.css */
/* Independent floating controls, with a gentle scroll-edge haze. Its fixed
   blur and static mask never animate; only opacity changes on scroll. */
html[data-theme] body#page-top .site-header {
  height: 84px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}
html[data-theme] body#page-top .site-header::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(100% + 52px);
  pointer-events: none;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0% 24%, rgb(0 0 0 / 82%) 44%, rgb(0 0 0 / 44%) 68%, rgb(0 0 0 / 13%) 86%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0% 24%, rgb(0 0 0 / 82%) 44%, rgb(0 0 0 / 44%) 68%, rgb(0 0 0 / 13%) 86%, transparent 100%) !important;
  opacity: 0;
  transition: opacity 300ms var(--apple-ease) !important;
}
html[data-theme].apple-scrolled body#page-top .site-header::before {
  opacity: 1;
}
/* Home and Gallery let the pinned photograph stay clear until its lower edge
   approaches the navigation, then materialise the untinted haze slowly. */
html[data-theme] body#page-top:is(.home-page, .gallery-index-page) .site-header.header-home-haze-ready::before {
  opacity: 0;
  transition: opacity 900ms var(--apple-ease) !important;
}
html[data-theme] body#page-top:is(.home-page, .gallery-index-page) .site-header.header-home-haze-ready.has-home-haze::before {
  opacity: 1;
}
html[data-theme] body#page-top .site-header::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme] body#page-top .site-header .header-inner {
  height: 84px;
  min-height: 84px;
  background: transparent !important;
  pointer-events: none;
}
html[data-theme] body#page-top .site-header .header-controls {
  background: transparent !important;
  pointer-events: none;
}
html[data-theme] body#page-top .site-header :is(.wordmark, .theme-toggle, .menu-toggle) {
  pointer-events: auto;
}

/* Keep the handwritten identity, with one calm optical alignment. A small
   local shadow protects its fine strokes when a photograph passes beneath. */
html[data-theme] body#page-top .site-header .wordmark {
  --wordmark-width: 88px;
  --signature-ink: var(--ink);
  --signature-note: var(--ink-soft);
  --signature-shadow: color-mix(in srgb, var(--paper) 88%, transparent);
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme] body#page-top .site-header .wordmark-signature {
  background-color: var(--signature-ink);
  filter: drop-shadow(0 1px 2px var(--signature-shadow));
  transition: background-color var(--theme-colour-duration, 200ms) ease !important;
}
html[data-theme] body#page-top .site-header .wordmark-note {
  margin-top: 5px;
  color: var(--signature-note);
  font-size: 7.5px;
  letter-spacing: .19em;
  text-shadow: 0 1px 2px var(--signature-shadow);
  transition: color var(--theme-colour-duration, 200ms) ease !important;
}
/* The opening photo keeps light ink while it actually reaches the brand.
   A local inverse shadow protects theme ink over later content without
   adding a tint to the blur. The home default avoids a first-frame flash. */
html[data-theme] body#page-top:is(.home-page, .gallery-index-page) .site-header:not(.header-context-ready) .wordmark,
html[data-theme] body#page-top .site-header.header-over-photo .wordmark {
  --signature-ink: var(--on-photo-ink, var(--ink));
  --signature-note: var(--on-photo-ink, var(--ink));
  --signature-shadow: var(--on-photo-shadow, color-mix(in srgb, var(--ink) 38%, transparent));
}
html[data-theme] body#page-top .site-header .wordmark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* The stationary desktop capsule retains its local frost. The selected
   pill stays a simple fill and never owns a moving backdrop filter. */
@media (min-width: 701px) {
  html[data-theme] body#page-top .site-header .primary-navigation {
    pointer-events: auto;
    -webkit-backdrop-filter: blur(10px) saturate(105%);
    backdrop-filter: blur(10px) saturate(105%);
  }
  html[data-theme] body#page-top .site-header .navigation-highlight {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 700px) {
  html[data-theme] body#page-top .site-header {
    height: 76px;
  }
  html[data-theme] body#page-top .site-header .header-inner {
    height: 76px;
    min-height: 76px;
  }
  html[data-theme] body#page-top .site-header::before {
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }
  html[data-theme] body#page-top .site-header .wordmark {
    --wordmark-width: 74px;
  }
  html[data-theme] body#page-top .site-header .wordmark-note {
    font-size: 7px;
    letter-spacing: .15em;
  }
  /* The menu lifecycle owns pointer events, opacity, staggering and scrim.
     Keep the hidden panel inert and never blur the moving panel itself. */
  html[data-theme] body#page-top .site-header .primary-navigation {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  html[data-theme] body#page-top .site-header::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--palette-canvas, var(--paper)) !important;
  }
  html[data-theme] body#page-top .site-header .primary-navigation,
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme].apple-scrolled body#page-top .site-header .wordmark {
    --signature-ink: var(--ink);
    --signature-note: var(--ink);
    --signature-shadow: color-mix(in srgb, var(--paper) 88%, transparent);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body#page-top .site-header::before {
    background: var(--palette-canvas, var(--paper)) !important;
  }
  html[data-theme] body#page-top .site-header .primary-navigation,
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
    background: var(--surface) !important;
  }
  html[data-theme].apple-scrolled body#page-top .site-header .wordmark {
    --signature-ink: var(--ink);
    --signature-note: var(--ink);
    --signature-shadow: color-mix(in srgb, var(--paper) 88%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body#page-top.home-page .site-header.header-home-haze-ready::before,
  html[data-theme] body#page-top .site-header::before,
  html[data-theme] body#page-top .site-header :is(.wordmark-signature, .wordmark-note) {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  html[data-theme] body#page-top .site-header::before {
    display: none !important;
  }
  html[data-theme] body#page-top .site-header .wordmark {
    --signature-ink: CanvasText;
    --signature-note: CanvasText;
    background: Canvas;
    forced-color-adjust: none;
  }
  html[data-theme] body#page-top .site-header .wordmark-signature {
    background: CanvasText;
    filter: none;
    forced-color-adjust: none;
  }
  html[data-theme] body#page-top .site-header .wordmark-note {
    color: CanvasText !important;
    text-shadow: none;
  }
}

/* Source: portfolio-glass.css */
/* Photography glass: a finish on existing chrome and editorial canvases.
   This is the final material layer. Keep palette, layout and motion owners. */
/* Root endpoints interpolate once. Keep final glass colours independent of
   already animated palette aliases so a material cannot chase its own tint. */
html[data-theme="light"] {
  --portfolio-canvas-tint: color-mix(in srgb, var(--palette-canvas) 76%, transparent);
  --portfolio-glass-fill: rgb(254 253 250 / 46%);
  --portfolio-glass-wash: rgb(254 253 250 / 4%);
  --portfolio-glass-rim: rgb(254 253 250 / 16%);
  --navigation-capsule-fill: rgb(254 253 250 / 50%);
  --portfolio-primary-opacity: 82%;
  --portfolio-query-fill: rgb(254 253 250 / 84%);
  --portfolio-form-fill: #FAF9F5;
}

html[data-theme="dark"] {
  --portfolio-canvas-tint: color-mix(in srgb, var(--palette-canvas) 50%, transparent);
  --portfolio-glass-fill: rgb(17 17 17 / 40%);
  --portfolio-glass-wash: rgb(234 233 227 / 4%);
  --portfolio-glass-rim: rgb(234 233 227 / 8%);
  --navigation-capsule-fill: rgb(17 17 17 / 38%);
  --portfolio-primary-opacity: 74%;
  --portfolio-query-fill: rgb(42 42 41 / 82%);
  --portfolio-form-fill: color-mix(in srgb, #2A2A29 78%, #111111);
}
html[data-theme] body#page-top {
  --portfolio-glass-fill: inherit;
  --portfolio-glass-wash: inherit;
  --navigation-capsule-fill: inherit;
  --navigation-mobile-fill: color-mix(in srgb, var(--palette-surface) 62%, transparent);
  --portfolio-primary-fill: color-mix(in srgb, var(--primary-fill) var(--portfolio-primary-opacity), transparent);
  --portfolio-primary-hover-fill: color-mix(in srgb, var(--primary-hover) var(--portfolio-primary-opacity), transparent);
  --navigation-capsule-selected: var(--portfolio-primary-fill);
  --frost-action: var(--portfolio-primary-fill);
  --frost-action-hover: var(--portfolio-primary-hover-fill);
  --frost-fill: var(--portfolio-glass-fill);
  --frost-hover: color-mix(in srgb, var(--portfolio-glass-fill) 88%, var(--palette-elevated));
  --portfolio-glass-edge: var(--palette-glass-rule);
  --portfolio-glass-rim: inherit;
  --portfolio-action-rim: color-mix(in srgb, var(--palette-action-rim) 35%, transparent);
  --frost-action-rim: var(--portfolio-action-rim);
  --frost-rim: var(--portfolio-glass-rim);
  --portfolio-glass-low: color-mix(in srgb, var(--palette-ink) 5%, transparent);
  --portfolio-glass-side: color-mix(in srgb, var(--palette-glass-edge) 40%, transparent);
  --portfolio-glass-sheen: linear-gradient(150deg, var(--portfolio-glass-wash), transparent 58%),
    linear-gradient(330deg, color-mix(in srgb, var(--portfolio-glass-wash) 55%, transparent), transparent 35%);
  --portfolio-glass-reflection: radial-gradient(ellipse at 9% 0%,
    color-mix(in srgb, var(--portfolio-glass-rim) 12%, transparent), transparent 44%);
  /* A static, shallow lens: curved edge light without an extra blur layer. */
  --portfolio-glass-lens: inset 0 4px 10px -8px var(--portfolio-glass-rim),
    inset 0 -4px 8px -7px var(--portfolio-glass-low);
  --portfolio-action-sheen: linear-gradient(165deg, var(--portfolio-action-rim), transparent 60%);
  --portfolio-panel-fill: color-mix(in srgb, var(--palette-surface) 96%, transparent);
  --portfolio-secondary-fill: var(--portfolio-glass-fill);
  --portfolio-control-shadow: 0 5px 18px var(--palette-glass-shadow);
  --portfolio-panel-shadow: 0 12px 32px var(--palette-glass-shadow);
  --portfolio-photo-fill: color-mix(in srgb, var(--photo-surface) 28%, transparent);
  --portfolio-photo-edge: color-mix(in srgb, var(--on-photo) 14%, transparent);
  --portfolio-photo-rim: color-mix(in srgb, var(--on-photo) 24%, transparent);
  --portfolio-photo-control-rim: color-mix(in srgb, var(--on-photo) 8%, transparent);
  --portfolio-photo-wash: color-mix(in srgb, var(--on-photo) 5%, transparent);
}

/* A document window owns the glass boundary. Its sticky pane stays within
   that window, so WebKit cannot paint fixed backdrop pixels outside it.
   overflow: clip preserves native sticky scrolling without a scroll layer. */
html[data-theme] body#page-top .editorial-frost-window {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  overflow: clip;
  pointer-events: none;
}
html[data-theme] body#page-top .editorial-frost-plane {
  display: none;
  position: sticky;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background: var(--portfolio-canvas-tint);
  -webkit-backdrop-filter: blur(48px) saturate(.8);
  backdrop-filter: blur(48px) saturate(.8);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned {
    isolation: isolate;
  }
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned .home-cover {
    isolation: auto;
    clip-path: none;
    overflow: visible;
    background: transparent;
  }
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned .home-cover-art {
    z-index: -1;
  }
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned .editorial-frost-plane,
  html[data-theme].gallery-stage-enhanced body#page-top.gallery-index-page.has-editorial-frost .editorial-frost-plane {
    display: block;
  }
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned :is(.home-selected, .home-explore, .home-quote, .site-footer.editorial-footer) {
    position: relative;
    z-index: 2;
  }
  html[data-theme] body#page-top.home-page.has-editorial-frost.home-cover-pinned :is(.home-paper, .home-explore, .contact-section, .site-footer.editorial-footer),
  html[data-theme].gallery-stage-enhanced body#page-top.gallery-index-page.has-editorial-frost .site-footer.editorial-footer {
    background: transparent;
  }
  /* Let the current card remain pinned behind the footer. Its controls fade
     and become inert through the existing gallery owner before being covered. */
  html[data-theme].gallery-stage-enhanced body#page-top.gallery-index-page.has-editorial-frost .gallery-stage {
    clip-path: none;
  }
  html[data-theme].gallery-stage-enhanced body#page-top.gallery-index-page.has-editorial-frost .gallery-stage-content {
    opacity: var(--gallery-footer-copy-opacity, 1);
  }
}
@media (max-width: 700px) {
  html[data-theme] body#page-top .editorial-frost-plane {
    -webkit-backdrop-filter: blur(32px) saturate(.8);
    backdrop-filter: blur(32px) saturate(.8);
  }
}

/* One stationary pane samples the scene. The selected accent remains a
   simple, contrast-tested fill; it never carries its own backdrop filter. */
html[data-theme] body#page-top .site-header .primary-navigation {
  border-color: var(--portfolio-glass-edge);
  background: var(--portfolio-glass-sheen), var(--navigation-capsule-fill);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
    inset 1px 0 0 var(--portfolio-glass-side), inset 0 -1px 0 var(--portfolio-glass-low),
    var(--portfolio-glass-lens), var(--portfolio-control-shadow);
}
@media (min-width: 701px) {
  /* The optical pane clips its lens to a capsule. Paint its soft drop shadow
     on a transparent sibling so that clip cannot cut the shadow away. A
     positioned parent does not create another backdrop-sampling boundary. */
  html[data-theme] body#page-top .site-header .header-controls {
    --portfolio-navigation-width: clamp(420px, 35vw, 492px);
    position: relative;
  }
  html[data-theme] body#page-top .site-header .header-controls::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--portfolio-navigation-width);
    border-radius: var(--radius-segment);
    box-shadow: var(--portfolio-control-shadow);
    pointer-events: none;
  }
  html[data-theme] body#page-top .site-header .primary-navigation {
    width: var(--portfolio-navigation-width);
    background-image: var(--portfolio-glass-reflection), var(--portfolio-glass-sheen);
    box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
      inset 1px 0 0 var(--portfolio-glass-side), inset 0 -1px 0 var(--portfolio-glass-low),
      var(--portfolio-glass-lens);
    -webkit-backdrop-filter: blur(20px) saturate(108%);
    backdrop-filter: blur(20px) saturate(108%);
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  html[data-theme] body#page-top .site-header .header-controls {
    --portfolio-navigation-width: clamp(376px, 46vw, 420px);
  }
}
/* SVG-backed optics must be clipped to the same capsule as the CSS frost.
   Keep keyboard outlines inside that mask rather than cutting them off. */
html[data-theme] body#page-top .site-header .primary-navigation.has-liquid-optics {
  clip-path: inset(0 round var(--radius-segment));
}
html[data-theme] body#page-top .site-header .primary-navigation.has-liquid-optics a:focus-visible {
  outline-offset: -3px;
}
html[data-theme] body#page-top .site-header .navigation-highlight,
html[data-theme] body#page-top .filter-button.is-active,
html[data-theme] body#page-top.collection-page .collection-tone[aria-pressed="true"],
html[data-theme] body#page-top .gallery-filter-option[data-tone][aria-pressed="true"] {
  background-color: var(--portfolio-primary-fill);
  box-shadow: inset 0 1px 0 var(--portfolio-action-rim),
    inset 0 0 0 1px var(--palette-action-edge),
    inset 0 4px 10px -8px var(--portfolio-action-rim);
  background-image: linear-gradient(155deg, color-mix(in srgb, var(--portfolio-action-rim) 55%, transparent), transparent 60%);
}
/* One short reflection marks selection. Keep the light inside the control;
   it travels with the existing capsule and never spills across photographs. */
html[data-theme] body#page-top :is(.filter-button.is-active,
  .collection-tone[aria-pressed="true"]) { position: relative; }
html[data-theme] body#page-top .site-header .navigation-highlight::after,
html[data-theme] body#page-top .filter-button.is-active::after,
html[data-theme] body#page-top.collection-page .collection-tone[aria-pressed="true"]::after {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: auto;
  bottom: auto;
  left: 22%;
  width: 56%;
  height: 1px;
  opacity: .28;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--portfolio-glass-rim), transparent);
  box-shadow: 0 1px 4px var(--portfolio-action-rim);
  transform: none;
  transition: none;
  pointer-events: none;
}

/* Grouped filters frost once. Individual labels stay crisp and unfiltered. */
html[data-theme] body#page-top :is(.filter-set, .collection-tone-options),
html[data-theme] body#page-top.work-page .gallery-filter-groups .filter-set {
  border-color: var(--portfolio-glass-edge);
  background: var(--portfolio-glass-reflection), var(--portfolio-glass-sheen), var(--portfolio-glass-fill);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
    inset 0 -1px 0 var(--portfolio-glass-low), var(--portfolio-glass-lens), var(--portfolio-control-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  backdrop-filter: blur(14px) saturate(108%);
}
/* Keep button highlight painting inside the actual capsule on every engine. */
html[data-theme] body#page-top.collection-page .collection-tone-options {
  overflow: hidden;
  overflow: clip;
  clip-path: inset(0 round 999px);
}
html[data-theme] body#page-top.collection-page .collection-tone:focus-visible { outline-offset: -3px; }
html[data-theme] body#page-top :is(.filter-button:not(.is-active), .collection-tone:not([aria-pressed="true"])) {
  color: var(--ink);
}

/* Pressable surfaces have static light and tint. Keeping live blur off these
   moving layers prevents rectangular sampling artefacts during presses. */
html[data-theme] body#page-top :is(.theme-toggle, .menu-toggle, .contact-float-button,
  .photo-dialog-close, .photo-dialog-nav, .gallery-filter-close),
html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle) {
  border-color: var(--portfolio-glass-edge);
  background: var(--portfolio-glass-sheen), var(--portfolio-glass-fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
    inset 0 0 0 1px var(--portfolio-glass-edge), var(--portfolio-glass-lens), var(--portfolio-control-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme] body#page-top :is(.gallery-view-link, .about-gallery-link,
  .about-intro-work, .contact-instagram-link, .gallery-filter > summary) {
  background: var(--portfolio-glass-sheen), var(--portfolio-secondary-fill);
  border-color: var(--portfolio-glass-edge);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
    inset 0 -1px 0 var(--portfolio-glass-low), var(--portfolio-glass-lens), var(--portfolio-control-shadow) !important;
}
html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
  .contact-submit, .contact-email-link, .contact-popover-email, .gallery-filter-done),
html[data-theme] body#page-top.home-page .home-cover-button {
  /* Keep the authored accent/label pair with a clearer glass tint. */
  background-color: var(--portfolio-primary-fill);
  background-image: var(--portfolio-action-sheen);
  box-shadow: inset 0 1px 0 var(--portfolio-action-rim),
    inset 0 4px 10px -8px var(--portfolio-action-rim),
    inset 0 -1px 0 var(--portfolio-glass-low), var(--portfolio-control-shadow) !important;
}
/* State rules in older layers use background shorthands. Keep the optical
   finish continuous while their existing fill, ink and press motion respond. */
html[data-theme] body#page-top :is(.home-cover-button, .work-intro-link,
  .contact-submit, .contact-email-link, .contact-popover-email, .gallery-filter-done):is(:hover, :focus-visible, :active):not(:disabled),
html[data-theme] body#page-top.home-page .home-cover-button:is(:hover, :focus-visible, :active) {
  background-color: var(--portfolio-primary-hover-fill);
  background-image: var(--portfolio-action-sheen);
}
html[data-theme] body#page-top :is(.gallery-view-link, .about-gallery-link,
  .about-intro-work, .contact-instagram-link, .gallery-filter > summary):is(:hover, :focus-visible, :active):not(:disabled) {
  background-image: var(--portfolio-glass-sheen);
}
/* Photo copy keeps its cyan accent in both modes. Its dark label needs at
   least this much tint even against the deepest part of the photograph. */
html[data-theme] body#page-top.home-page .home-cover-button {
  background-color: color-mix(in srgb, var(--on-photo-fill) 74%, transparent);
}
html[data-theme] body#page-top.home-page .home-cover-button:is(:hover, :focus-visible, :active) {
  background-color: color-mix(in srgb, var(--on-photo-fill-hover) 74%, transparent);
}
/* Material shadows never replace the keyboard focus indicator. */
html[data-theme] body#page-top :is(.work-intro-link, .contact-submit,
  .contact-email-link, .contact-popover-email, .gallery-filter-done,
  .gallery-view-link, .about-gallery-link, .about-intro-work,
  .contact-instagram-link, .gallery-filter > summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme] body#page-top :is(.contact-float-button, .photo-dialog-close,
  .photo-dialog-nav, .gallery-filter-close):focus-visible,
html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Long copy gets a stronger backing and one shallow edge. No nested blur on
   forms, moving popovers, menu rows or the opaque photograph viewer. */
html[data-theme] body#page-top :is(.contact-popover, .contact-inquiry-menu, .gallery-filter-panel) {
  background: var(--portfolio-glass-sheen), var(--portfolio-panel-fill);
  border-color: var(--portfolio-glass-edge);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim),
    inset 0 -1px 0 var(--portfolio-glass-low), var(--portfolio-panel-shadow);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme] body#page-top .contact-form-panel {
  background-color: var(--portfolio-form-fill);
  border-color: var(--portfolio-glass-edge);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim), 0 8px 26px var(--palette-glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The concise query list is a real frosted overlay. Fade the stationary pane
   instead of translating a live backdrop, so its rounded mask stays stable. */
html[data-theme] body#page-top .contact-inquiry-menu {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 31px;
  background: var(--portfolio-glass-sheen), var(--portfolio-query-fill);
  -webkit-backdrop-filter: blur(16px) saturate(105%) !important;
  backdrop-filter: blur(16px) saturate(105%) !important;
  transform: none;
  transition: opacity 220ms var(--apple-ease), visibility 0s linear 220ms,
    background-color var(--theme-colour-duration, 320ms) ease, border-color var(--theme-colour-duration, 320ms) ease;
}
html[data-theme] body#page-top .contact-select.opens-up .contact-inquiry-menu {
  transform: none;
}
html[data-theme] body#page-top .contact-inquiry-menu.is-open {
  transition-delay: 0s;
}
html[data-theme] body#page-top .contact-inquiry-option {
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink);
}
html[data-theme] body#page-top .contact-inquiry-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Only five small text layers cascade. The pane, row backgrounds, focus
   targets and fixed frost remain steady; quick reversals use live values. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body#page-top .contact-inquiry-option-label {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 120ms ease, transform 150ms var(--apple-ease);
    transition-delay: calc((4 - var(--inquiry-row, 0)) * 12ms);
  }
  html[data-theme] body#page-top .contact-inquiry-menu.is-open .contact-inquiry-option-label {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 240ms, 300ms;
    transition-delay: calc(25ms + var(--inquiry-row, 0) * 32ms);
  }
}
html[data-theme] body#page-top .photo-dialog.photo-fluid-enabled .photo-dialog-layout {
  border-color: var(--portfolio-glass-edge);
  box-shadow: inset 0 1px 0 var(--portfolio-glass-rim), var(--portfolio-panel-shadow);
}

/* The phone menu keeps its one stationary scrim. Its moving shell gets the
   same light treatment with a denser tint, without another sampling layer. */
@media (max-width: 700px) {
  html[data-theme] body#page-top .site-header .primary-navigation {
    background: var(--portfolio-glass-sheen), var(--navigation-mobile-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme] body#page-top :is(.filter-set, .collection-tone-options),
  html[data-theme] body#page-top.work-page .gallery-filter-groups .filter-set {
    -webkit-backdrop-filter: blur(12px) saturate(105%);
    backdrop-filter: blur(12px) saturate(105%);
  }
  /* Sticky mobile controls use a sampled-free smoked material. Sampling a
     moving photographic backdrop caused rectangular hover/compositor tiles. */
  html[data-theme] body#page-top.collection-page .collection-tone-options {
    background: var(--portfolio-glass-sheen), color-mix(in srgb, var(--palette-canvas) 92%, transparent);
    box-shadow: inset 0 1px 0 var(--portfolio-glass-rim), inset 0 -1px 0 var(--portfolio-glass-low);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    filter: none;
  }
  html[data-theme] body#page-top.collection-page .collection-tone:not([aria-pressed="true"]):hover {
    background: transparent;
    color: var(--ink);
  }
}

/* Photographs stay optically sharp. A fine inset edge gives their existing
   rounded frames a finish without adding a blurred card or changing layout. */
html[data-theme] body#page-top :is(.home-photo-frame, .work-art,
  .collection-cover-art, .collection-photo-grid .gallery-photo-open, .about-intro-frame) {
  position: relative;
}
html[data-theme] body#page-top :is(.home-photo-frame, .work-art,
  .collection-cover-art, .collection-photo-grid .gallery-photo-open, .about-intro-frame)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--portfolio-photo-rim),
    inset 0 0 0 1px var(--portfolio-photo-edge);
}
html[data-theme] body#page-top.collection-page .collection-photo-grid .gallery-photo-open::after {
  opacity: 0;
  transition: opacity 420ms ease-out;
}
html[data-theme] body#page-top.collection-page .collection-photo:is(.is-loaded, .is-error) .gallery-photo-open::after { opacity: 1; }
html[data-theme] body#page-top:is(.gallery-index-page, .collection-page) .collection-cover-art::after { transition: opacity 420ms ease-out; }
html[data-theme] body#page-top:is(.gallery-index-page, .collection-page) .collection-cover:not(.is-image-loaded) .collection-cover-art::after { opacity: 0; }

/* Small existing photo controls get smoke and a pale rim. Their symbols may
   move inside the pane; the frosted shell itself stays stationary. */
html[data-theme] body#page-top :is(.collection-cover-arrow, .collection-cover-cue, .collection-cover-action, .gallery-stage-arrow) {
  border-color: var(--portfolio-photo-edge);
  background: linear-gradient(150deg, var(--portfolio-photo-wash), transparent 64%), var(--portfolio-photo-fill);
  color: var(--on-photo);
  box-shadow: inset 0 1px 0 var(--portfolio-photo-control-rim),
    inset 0 4px 10px -8px var(--portfolio-photo-control-rim), 0 3px 12px rgb(0 0 0 / 12%);
}
html[data-theme] body#page-top :is(.gallery-stage-action, .gallery-stage-arrow) {
  -webkit-backdrop-filter: blur(16px) saturate(108%);
  backdrop-filter: blur(16px) saturate(108%);
}
html[data-theme] body#page-top .gallery-stage-action {
  background: linear-gradient(165deg,
    color-mix(in srgb, color-mix(in srgb, var(--collection-accent) 88%, white) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--collection-accent) 80%, transparent);
  color: var(--on-photo-fill-ink);
  border-color: color-mix(in srgb, var(--collection-accent) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb,
      color-mix(in srgb, var(--collection-accent) 88%, white) 24%, transparent),
    inset 0 4px 10px -8px var(--portfolio-photo-control-rim),
    inset 0 -1px 0 var(--portfolio-glass-low), var(--portfolio-control-shadow);
}
html[data-theme] body#page-top .gallery-stage-arrow {
  background-color: color-mix(in srgb, var(--photo-surface) 18%, transparent);
}
html[data-theme] body#page-top .gallery-intro-action {
  background-color: color-mix(in srgb,var(--photo-surface) 26%,transparent);
  border-color: var(--portfolio-photo-control-rim);
  box-shadow: inset 0 1px 0 var(--portfolio-photo-control-rim), 0 3px 12px rgb(0 0 0 / 12%);
}
html[data-theme="light"] body#page-top .gallery-intro-action { background-color: color-mix(in srgb,var(--photo-surface) 34%,transparent); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .gallery-stage-arrow:not([aria-disabled="true"]):hover {
    border-color: var(--portfolio-photo-control-rim);
    background-color: color-mix(in srgb, var(--photo-surface) 34%, transparent);
  }
  html[data-theme] body#page-top .gallery-stage-action:hover {
    background-color: color-mix(in srgb, var(--collection-accent) 88%, transparent);
    border-color: color-mix(in srgb, var(--collection-accent) 82%, white);
  }
}
html[data-theme] body#page-top .collection-cover-arrow {
  transform: none;
}
html[data-theme] body#page-top .collection-cover-arrow path {
  transition: transform 200ms var(--apple-ease);
}
html[data-theme] body#page-top.gallery-index-page .collection-cover-action {
  transition: border-color var(--theme-colour-duration, 200ms) ease, background-color var(--theme-colour-duration, 220ms) ease, box-shadow var(--theme-colour-duration, 240ms) ease;
}
html[data-theme] body#page-top.gallery-index-page .collection-cover:focus-visible .collection-cover-action {
  border-color: var(--portfolio-photo-control-rim);
  box-shadow: inset 0 1px 0 var(--portfolio-photo-control-rim), 0 0 0 2px var(--portfolio-photo-edge);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top.gallery-index-page .collection-cover:hover .collection-cover-action {
    border-color: var(--portfolio-photo-control-rim);
    background-color: color-mix(in srgb, var(--photo-surface) 38%, transparent);
    box-shadow: inset 0 1px 0 var(--portfolio-photo-control-rim), inset 0 0 0 1px var(--portfolio-photo-edge), 0 5px 18px rgb(0 0 0 / 15%);
  }
}
html[data-theme] body#page-top.gallery-index-page .collection-cover:active .collection-cover-action {
  background-color: color-mix(in srgb, var(--photo-surface) 42%, transparent);
}
@media (min-width: 701px) {
  html[data-theme] body#page-top :is(.collection-cover-arrow, .collection-cover-action) {
    -webkit-backdrop-filter: blur(16px) saturate(108%);
    backdrop-filter: blur(16px) saturate(108%);
  }
}
/* Preserve the label's layout: the small circular backing extends around
   the existing arrow without increasing the caption row's block size. */
html[data-theme] body#page-top :is(.home-destination-label, .contact-destination-label) > .arrow-icon {
  box-sizing: border-box;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-block: -8px;
  padding: 8px;
  border: 1px solid var(--portfolio-photo-edge);
  border-radius: 50%;
  color: var(--on-photo);
  background: linear-gradient(150deg, var(--portfolio-photo-wash), transparent 64%), var(--portfolio-photo-fill);
  box-shadow: inset 0 1px 0 var(--portfolio-photo-control-rim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .collection-cover:hover .collection-cover-arrow path {
    transform: translate(1px, -1px);
  }
  html[data-theme] body#page-top :is(.contact-float-button,
    .photo-dialog-close, .photo-dialog-nav, .gallery-filter-close):hover {
    background: var(--portfolio-glass-sheen), var(--frost-hover);
  }
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle):hover {
    background: var(--portfolio-glass-sheen), var(--frost-hover);
  }
}

/* Material fallbacks preserve all current colours and accent selections. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] { --portfolio-primary-opacity: 100%; }
  html[data-theme] body#page-top { --portfolio-secondary-fill: var(--surface); }
  html[data-theme] body#page-top.home-page .home-cover-button { background: var(--on-photo-fill) !important; }
  html[data-theme] body#page-top :is(.primary-navigation, .filter-set, .collection-tone-options,
    .theme-toggle, .menu-toggle, .contact-float-button, .photo-dialog-close, .photo-dialog-nav,
    .gallery-filter-close, .contact-popover, .contact-inquiry-menu, .gallery-filter-panel) {
    background: var(--surface) !important;
  }
  html[data-theme] body#page-top :is(.collection-cover-arrow, .collection-cover-cue, .collection-cover-action, .gallery-stage-arrow, .gallery-intro-action,
    .home-destination-label > .arrow-icon, .contact-destination-label > .arrow-icon) {
    background: var(--photo-surface) !important;
  }
  html[data-theme] body#page-top .gallery-stage-action { background: var(--collection-accent) !important; color: var(--on-photo-fill-ink); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (update: slow) {
  html[data-theme] { --portfolio-primary-opacity: 100%; }
  html[data-theme] body#page-top { --portfolio-secondary-fill: var(--surface); }
  html[data-theme] body#page-top.home-page .home-cover-button { background: var(--on-photo-fill) !important; }
  html[data-theme] body#page-top :is(.primary-navigation, .filter-set, .collection-tone-options,
    .theme-toggle, .menu-toggle, .contact-float-button, .photo-dialog-close, .photo-dialog-nav,
    .gallery-filter-close, .contact-popover, .contact-inquiry-menu, .gallery-filter-panel) {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme] body#page-top :is(.collection-cover-arrow, .collection-cover-cue, .collection-cover-action, .gallery-stage-arrow, .gallery-intro-action,
    .home-destination-label > .arrow-icon, .contact-destination-label > .arrow-icon) {
    background: var(--photo-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme] body#page-top .gallery-stage-action {
    background: var(--collection-accent) !important; color: var(--on-photo-fill-ink);
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  html[data-theme] body#page-top :is(.filter-set, .collection-tone-options,
    .gallery-filter > summary, .photo-dialog-nav, .photo-dialog-close,
    .theme-toggle, .menu-toggle, .contact-float-button),
  html[data-theme] body#page-top .site-header :is(.theme-toggle, .menu-toggle),
  html[data-theme] body#page-top.work-page .gallery-filter-groups .filter-set {
    border-color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--ink-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body#page-top:is(.gallery-index-page, .collection-page) :is(.collection-cover-art, .gallery-photo-open)::after { transition: none !important; }
  html[data-theme] body#page-top .collection-cover-arrow path {
    transform: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  html[data-theme] body#page-top .site-header .header-controls::before { content: none; }
  html[data-theme] body#page-top :is(.primary-navigation, .filter-set, .collection-tone-options,
    .theme-toggle, .menu-toggle, .contact-float-button, .photo-dialog-close, .photo-dialog-nav,
    .gallery-filter-close, .contact-popover, .contact-inquiry-menu, .gallery-filter-panel,
    .collection-cover-arrow, .collection-cover-cue, .collection-cover-action, .home-destination-label > .arrow-icon,
    .contact-destination-label > .arrow-icon) {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme] body#page-top :is(.home-photo-frame, .work-art, .collection-cover-art,
    .collection-photo-grid .gallery-photo-open, .about-intro-frame)::after {
    box-shadow: none;
  }
}