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

/* Source: fonts.css */
/* Locally hosted editorial typography. */
@font-face {
  font-family: "Anthropic Serif";
  src: url("fonts/anthropic-serif-display-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("fonts/anthropic-serif-display-regularitalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("fonts/anthropic-serif-display-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("fonts/anthropic-serif-display-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Genuine light cuts retain delicate strokes without synthetic thinning. */
@font-face { font-family: "Anthropic Serif"; src: url("fonts/anthropic-serif-display-light.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Anthropic Serif"; src: url("fonts/anthropic-serif-display-lightitalic.woff2") format("woff2"); font-style: italic; font-weight: 300; font-display: swap; }


/* Source: styles.css */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090909;
  --surface: #101010;
  --surface-2: #151515;
  --surface-3: #191919;

  --text: #e9e6de;
  --text-strong: #f1eee7;
  --text-soft: #aaa79f;
  --muted: #77766f;

  --line: #2b2b2b;
  --line-strong: #383838;

  --accent: #b89a72;
  --accent-soft: #8f795b;

  --shadow: rgba(0, 0, 0, .34);
}

:root {
  color-scheme: light;
  --bg: #F5F2EC;
  --surface: #FCFAF6;
  --surface-2: #EEEAE2;
  --surface-3: #E8E3D9;
  --paper: #F5F2EC;
  --paper-deep: #EEEAE2;
  --paper-work: #F5F2EC;
  --paper-contact: #F5F2EC;
  --paper-card: #f2efe8;
  --paper-card-mono: #ebeae4;
  --ink: #242824;
  --ink-soft: #62675F;
  --muted: #62675F;
  --rule: #D6D1C7;
  --rule-soft: #C2BAAD;
  --rule-contact: #D6D1C7;
  --accent: #8B6845;
  --heading-muted: #62675F;
  --control-hover: #eeebe4;
  --card-hover: #e2ded4;
  --card-mono-hover: #dcdcd6;
  --ribbon-bg: rgba(243, 240, 233, .89);
  --ribbon-ink: #454843;
  --selection-text: #f3f0e9;
  --selection-bg: #626d64;
  --section-mark: #b0a99d;
  --hero-detail-surface: #262925;
  --hero-detail-ink: #f3f0e9;
  --hero-detail-muted: #b6b7ae;
  --hero-detail-rule: rgba(243, 240, 233, .19);
  --photo-matte: #e7e4dc;
  --footer-surface: #292c27;
  --footer-ink: #f3f0e9;
  --footer-muted: #c6c4ba;
  --footer-rule: rgba(243, 240, 233, .2);
  --footer-accent: #c09a73;
  --serif: "Anthropic Serif", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --motion-fast: 200ms;
  --motion-ui: 340ms;
  --motion-panel: 460ms;
  --motion-dialog: 540ms;
  --motion-reveal: 1180ms;
  --motion-image: 900ms;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-dialog: cubic-bezier(.22, 1, .36, 1);
  --shell: min(1320px, calc(100% - 112px));
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #090909;
  --paper-deep: #171717;
  --paper-work: #090909;
  --paper-contact: #090909;
  --paper-card: #181818;
  --paper-card-mono: #1b1b1b;
  --ink: #eeeae1;
  --ink-soft: #c7c4bd;
  --muted: #aaa7a1;
  --rule: #333333;
  --rule-soft: #454545;
  --rule-contact: #333333;
  --accent: #c09a73;
  --heading-muted: #b1aea8;
  --control-hover: #202020;
  --card-hover: #242424;
  --card-mono-hover: #222222;
  --ribbon-bg: rgba(16, 16, 16, .92);
  --ribbon-ink: #e6e1d7;
  --selection-text: #090909;
  --selection-bg: #b4aea4;
  --section-mark: #aaa7a1;
  --hero-detail-surface: #171717;
  --hero-detail-ink: #eeeae1;
  --hero-detail-muted: #bbb8b2;
  --hero-detail-rule: rgba(238, 234, 225, .2);
  --photo-matte: #101010;
  --footer-surface: #090909;
  --footer-ink: #eeeae1;
  --footer-muted: #c6c4ba;
  --footer-rule: rgba(238, 234, 225, .2);
  --footer-accent: #c09a73;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.68; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { color: var(--selection-text); background: var(--selection-bg); }
.page-shell { width: var(--shell); margin-inline: auto; }
.section-shell { padding-block: 132px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 16px; transform: translateY(-160%); opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); }
.skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 82%, transparent); background: var(--paper); }
.header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; }
.header-controls { display: flex; align-items: center; gap: 30px; }
.wordmark { --wordmark-width: 78px; display: inline-flex; align-items: center; flex-direction: column; gap: 0; line-height: 1; user-select: none; -webkit-user-drag: none; }
.wordmark-signature { display: block; width: calc(var(--wordmark-width) + 10px); aspect-ratio: 1768 / 889; flex: none; background-color: var(--ink); opacity: .84; -webkit-mask-image: url("images/abhimanyu-sharma-signature.png"); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: url("images/abhimanyu-sharma-signature.png"); mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.wordmark-note { width: var(--wordmark-width); margin-top: 8px; color: var(--muted); font-size: 8px; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.primary-navigation { display: flex; align-items: center; gap: 42px; }
.primary-navigation a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: color var(--motion-ui) var(--ease-standard); }
.primary-navigation a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--ease-standard); }
.primary-navigation a:hover, .primary-navigation a[aria-current="page"] { color: var(--ink); }
.primary-navigation a[aria-current="page"]::after,
.primary-navigation a:focus-visible::after { transform: scaleX(1); }
.theme-toggle { display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; transition: color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard); }
.theme-toggle:hover { background: var(--paper-deep); color: var(--ink); }
.theme-toggle-icon { display: block; width: 19px; height: 19px; overflow: visible; transition: transform var(--motion-ui) var(--ease-standard); }
.menu-toggle { display: none; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 132px; padding-block: 124px 108px; }
.hero-copy { position: relative; display: flex; width: 100%; align-items: center; flex-direction: column; padding-block: 20px 0; text-align: center; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
h1, h2, h3, p, figure, blockquote { margin-top: 0; }
.hero h1 { max-width: 100%; margin: 28px 0 12px; font-family: var(--serif); font-size: clamp(48px, 7.4vw, 88px); font-weight: 400; letter-spacing: -.055em; line-height: 1.06; text-wrap: balance; }
.hero h1 em, h2 em { color: var(--heading-muted); font-weight: 400; }
.hero-tagline { margin-bottom: 19px; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(22px, 2.7vw, 32px); line-height: 1.3; }
.hero-tagline em { color: var(--accent); }
.hero-intro { max-width: 480px; margin-bottom: 27px; color: var(--ink-soft); font-size: 15px; line-height: 1.95; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 26px; }
.text-link, .contact-link { display: inline-flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--rule-soft); padding-bottom: 5px; font-size: 12px; font-weight: 500; letter-spacing: .025em; transition: border-color var(--motion-ui) var(--ease-standard); }
.contact-email-link { overflow-wrap: anywhere; }
.text-link:hover, .contact-link:hover { border-color: var(--accent); }
.arrow-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-ui) var(--ease-standard); }
.text-link .arrow-icon, .contact-link .arrow-icon, .footer-links .arrow-icon { color: var(--accent); }
.arrow-icon-down { transform: translateY(1px); }
.text-link:hover .arrow-icon:not(.arrow-icon-down), .contact-link:hover .arrow-icon, .footer-links a:hover .arrow-icon { transform: translate(2px, -2px); }
.text-link:hover .arrow-icon-down { transform: translate(2px, 3px); }
.hero-actions .text-link { min-height: 52px; align-items: center; gap: 19px; padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 13px; letter-spacing: .015em; transition: border-color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard); }
.hero-actions .text-link .arrow-icon { width: 18px; height: 18px; }
.hero-actions .text-link:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.hero-actions .text-link:hover .arrow-icon { color: #fff; }
.hero-location { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hero-figure { width: 100%; max-width: 860px; margin: 0 auto; }
.hero-art { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-deep); box-shadow: 0 22px 64px color-mix(in srgb, var(--ink) 10%, transparent); }
.hero-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.hero-photo-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-caption { display: flex; justify-content: space-between; padding: 15px 2px 0; color: var(--muted); font-size: 10px; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.work-section { padding-top: 124px; padding-bottom: 108px; border-top: 1px solid var(--rule); background: var(--paper-work); }
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 21px; text-align: center; }
.section-number { padding-top: 13px; }
.work-section .section-number { justify-content: center; padding-top: 0; }
.section-number span { margin-inline: 3px; color: var(--section-mark); }
.section-heading-main { display: flex; width: min(100%, 700px); flex-direction: column; align-items: center; gap: 18px; }
.section-heading h2, .about-heading :is(h1, h2) { margin: 0; font-family: var(--serif); font-size: clamp(50px, 6vw, 76px); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.section-heading h2 { text-align: center; }
.work-section .section-heading h2 { font-size: clamp(56px, 6.8vw, 84px); }
.section-lede { max-width: 440px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.85; text-align: center; }
.gallery-tools { display: flex; justify-content: space-between; align-items: center; gap: 38px; margin-top: clamp(76px, 7vw, 92px); margin-bottom: 43px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.gallery-note { margin: 0 0 12px; color: var(--muted); font-family: var(--serif); font-size: 19px; font-style: italic; }
.gallery-filter-groups { display: flex; align-items: center; gap: 28px; }
.filter-set { display: flex; align-items: center; gap: clamp(15px, 1.8vw, 25px); }
.treatment-filters { padding-left: 20px; border-left: 1px solid var(--rule); }
.filter-button { position: relative; display: inline-flex; min-height: 50px; align-items: center; gap: 8px; padding: 0 0 1px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 10px; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.filter-button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: var(--ink); content: ""; transform: scaleX(0); transition: transform var(--motion-ui) var(--ease-standard); }
.filter-button:hover, .filter-button.is-active { color: var(--ink); }
.filter-button.is-active::after { transform: scaleX(1); }
.filter-button span { color: var(--accent); font-size: 9px; }
.gallery { display: flex; flex-direction: column; gap: clamp(72px, 8vw, 104px); }
.gallery-collection { min-width: 0; }
.gallery-collection-heading { display: grid; grid-template-columns: minmax(110px, .55fr) minmax(0, 1.5fr) minmax(110px, .55fr); gap: 22px; align-items: center; min-height: 112px; margin-bottom: 38px; padding-block: 16px 21px; border-bottom: 1px solid var(--rule); }
.collection-index { margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.gallery-collection-title { margin: 0; font-family: var(--serif); font-size: clamp(32px, 3.7vw, 47px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
.collection-count { justify-self: end; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(60px, 6vw, 86px) clamp(28px, 5vw, 68px); align-items: stretch; }
.work-card { display: flex; min-width: 0; flex-direction: column; }
.work-art { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-deep); }
.photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.work-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot-ribbon { position: absolute; top: 13px; left: 13px; padding: 5px 9px; background: var(--ribbon-bg); color: var(--ribbon-ink); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.work-caption { display: block; flex: 1; padding-top: 18px; text-align: left; }
.caption-kicker { margin: 0 0 7px; color: var(--muted); font-size: 10px; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.work-caption h3 { margin: 0; font-family: var(--serif); font-size: clamp(27px, 2.55vw, 34px); font-weight: 500; letter-spacing: -.015em; line-height: 1.18; text-align: left; }
.gallery-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; margin-top: 67px; padding-top: 30px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.gallery-foot #gallery-total { justify-self: start; }
.gallery-foot .text-link { color: var(--ink); font-size: 10px; }
.gallery-foot .gallery-view-link { grid-column: 2; justify-self: center; min-height: 48px; align-items: center; gap: 17px; padding: 0 16px; border: 1px solid var(--rule-soft); background: transparent; font-size: 12px; letter-spacing: .025em; text-transform: none; }
.gallery-foot .gallery-view-link .arrow-icon { width: 17px; height: 17px; }
.gallery-foot .gallery-view-link:hover { border-color: var(--accent); background: var(--control-hover); }
.work-card[hidden] { display: none !important; }
.about-section { --about-muted: #6d7069; padding: 112px 0 28px; }
html[data-theme="dark"] .about-section { --about-muted: #b7b6aa; }
.about-grid { display: grid; width: var(--shell); grid-template-columns: minmax(245px, .88fr) minmax(280px, .94fr) minmax(240px, 1.18fr); gap: clamp(24px, 2.5vw, 36px); align-items: start; }
.about-heading { grid-column: 1; }
.about-profile { display: contents; }
.about-bio { grid-column: 3; min-width: 0; padding-top: clamp(6px, .7vw, 10px); }
.about-portrait { display: flex; grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; width: 100%; max-width: 430px; margin: 0; }
.portrait-frame { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.about-portrait figcaption { display: flex; justify-content: space-between; gap: clamp(12px, 1.2vw, 18px); padding-top: 18px; color: var(--about-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.about-portrait figcaption span { white-space: nowrap; }
.about-heading :is(h1, h2) { max-width: 8ch; margin-top: clamp(26px, 2.4vw, 34px); font-size: clamp(60px, 6.2vw, 84px); text-wrap: balance; }
.about-heading :is(h1, h2) br { display: initial; }
#about-title:focus { outline: none; box-shadow: none; }
.about-aside { margin: 28px 0 0; padding-left: 15px; border-left: 1px solid var(--accent); color: var(--about-muted); font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.4; }
.about-label { margin: 0; color: var(--about-muted); font-size: 10px; font-weight: 500; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.about-lead { max-width: 32ch; margin: 0 0 clamp(24px, 1.8vw, 28px); color: var(--ink); font-family: var(--serif); font-size: clamp(25px, 1.9vw, 29px); line-height: 1.3; text-wrap: pretty; }
.about-copy { min-width: 0; padding-top: 0; }
.about-copy p { max-width: 65ch; margin: 0 0 20px; color: var(--ink-soft); font-size: clamp(14px, .98vw, 15px); line-height: 1.88; text-align: justify; text-align-last: left; text-wrap: pretty; }
.about-bio .about-copy p:nth-child(2), .about-journey-copy p:nth-child(2), .about-experience-copy p, .about-approach-text p, .about-now-copy p { text-align: left; text-align-last: left; }
.about-copy p:last-child { margin-bottom: 0; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 1.2vw, 22px); row-gap: 18px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); }
.about-facts div { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.about-facts span { display: block; min-height: 1.5em; color: var(--about-muted); font-size: 10px; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.about-facts strong { color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.about-note { display: grid; width: var(--shell); grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin: clamp(72px, 5vw, 92px) auto 0; }
.about-note blockquote { display: flex; align-items: center; gap: 21px; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(30px, 2.6vw, 42px); font-style: italic; line-height: 1.14; text-wrap: pretty; }
.about-note blockquote::before { width: 38px; height: 1px; flex: none; background: var(--accent); content: ""; }
.about-note p { margin: 0 0 4px; color: var(--about-muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.about-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(32px, 5vw, 68px); margin-top: clamp(64px, 5.4vw, 84px); padding-top: clamp(30px, 2vw, 34px); border-top: 1px solid var(--rule); align-items: start; }
.about-story-heading { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 68px); align-items: start; margin-bottom: 28px; }
.about-story-heading h2 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(40px, 4.5vw, 60px); font-weight: 400; letter-spacing: -.04em; line-height: 1.03; text-wrap: balance; }
.about-image { min-width: 0; margin: 0; overflow: hidden; background: var(--paper-deep); }
.about-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.about-journey { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "heading image" "copy image"; row-gap: 20px; }
.about-journey-heading { grid-area: heading; display: block; margin: 0; }
.about-journey-heading .about-label { margin-bottom: 10px; }
.about-journey-copy { grid-area: copy; max-width: 58ch; }
.about-journey-image { grid-area: image; align-self: end; }
.about-journey-copy p { font-size: 15px; line-height: 1.8; }
.about-experience { grid-template-columns: minmax(0, 1fr); }
.about-experience-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.5vw, 32px); margin-bottom: 28px; }
.about-experience-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.about-experience-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); }
.about-experience-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 52px); }
.about-experience-copy p { max-width: none; }
.about-experience-copy p:first-child { grid-column: 1 / -1; max-width: 65ch; }
.about-experience-copy p:nth-child(2), .about-experience-copy p:nth-child(3) { max-width: none; }
.about-approach { grid-template-columns: minmax(0, 1fr); }
.about-approach-heading { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(32px, 5vw, 68px); margin-bottom: 28px; }
.about-approach-image { grid-column: 1; }
.about-approach-copy { grid-column: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0 clamp(32px, 5vw, 68px); padding-top: 28px; }
.about-approach-statement { grid-column: 1; grid-row: 1; max-width: 18ch; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(29px, 3vw, 41px); line-height: 1.16; text-wrap: balance; }
.about-approach-text { grid-column: 2; }
.about-work { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.about-work-heading { margin-bottom: 25px; }
.about-categories { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.about-category { display: flex; min-width: 0; flex-direction: column; }
.about-category h3 { margin: 15px 0 9px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.about-category p { max-width: none; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; text-align: left; text-wrap: pretty; }
.about-work-footer { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 40px); padding-top: 0; }
.about-work-footer .about-gallery-link { min-height: 48px; gap: 17px; padding: 0 16px; border: 1px solid var(--rule-soft); background: transparent; font-size: 12px; letter-spacing: .025em; text-transform: none; transition: border-color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard); }
.about-work-footer .about-gallery-link .arrow-icon { width: 17px; height: 17px; }
.about-work-footer .about-gallery-link:hover { border-color: var(--accent); background: var(--control-hover); }
.about-gallery-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.about-gallery-link span { font-size: 15px; transition: transform var(--motion-ui) var(--ease-standard); }
.about-gallery-link:hover span { transform: translateX(4px); }
.about-now { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: clamp(60px, 5vw, 76px); }
.about-work + .about-now { margin-top: clamp(32px, 2.5vw, 40px); }
.about-now-heading { grid-column: 1; display: block; margin: 0; }
.about-now-heading .about-label { margin-bottom: 12px; }
.about-now-copy { grid-column: 2; max-width: 68ch; }
.about-now-copy .about-now-signoff { margin-top: 18px; color: var(--ink); font-family: var(--serif); font-size: 21px; font-style: italic; text-align: left; }
.about-final { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 68px); align-items: center; margin-top: clamp(56px, 4.5vw, 76px); padding-top: clamp(30px, 2.2vw, 34px); border-top: 1px solid var(--rule); }
.about-final-copy { min-width: 0; }
.about-final-copy .about-label { margin-bottom: 15px; }
.about-final-copy h2 { max-width: 21ch; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(43px, 4.7vw, 61px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.about-final-copy h2 > span { display: block; text-wrap: balance; }
.about-final-copy h2 em { color: var(--heading-muted); font-weight: 400; }
.about-final-credit { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 11px; letter-spacing: .06em; line-height: 1.8; }
.contact-section { padding-block: 82px 52px; background: var(--paper-contact); }
.contact-inner > .eyebrow { color: var(--ink-soft); }
.contact-content { display: grid; grid-template-columns: 1.1fr .8fr; gap: 10%; align-items: end; padding-block: 48px 88px; }
.contact-content h2 { margin: 0; font-family: var(--serif); font-size: clamp(66px, 8vw, 108px); font-weight: 400; letter-spacing: -.055em; line-height: .82; }
.contact-content h2 em { color: var(--heading-muted); }
.contact-aside { max-width: 380px; padding-bottom: 5px; }
.contact-aside p { margin-bottom: 29px; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
.contact-bottom { position: relative; display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--rule-contact); color: var(--muted); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.site-footer::before { position: absolute; z-index: 1; top: 0; left: 50%; width: 100vw; height: 1px; background: var(--footer-rule); content: ""; transform: translateX(-50%); }
.site-footer::after { position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; background: var(--footer-surface); content: ""; transform: translateX(-50%); }
.site-footer { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 170px; grid-template-rows: auto auto; gap: 18px clamp(18px, 3vw, 36px); align-items: center; min-height: 170px; padding: 28px clamp(72px, 7vw, 96px) 30px 0; color: var(--footer-ink); }
.footer-name { grid-column: 1; grid-row: 1; align-self: end; color: var(--footer-ink); font-family: var(--serif); font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; }
.site-footer p { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; margin: 0; color: var(--footer-muted); font-family: var(--serif); font-size: clamp(15px, 1.2vw, 17px); font-style: italic; }
.footer-links { grid-column: 1 / 3; grid-row: 2; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 22px; }
.footer-links a, .copyright { color: var(--footer-muted); font-size: 12px; letter-spacing: .045em; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; color: var(--footer-muted); transition: color var(--motion-fast) var(--ease-standard); }
.footer-links .arrow-icon { width: 14px; height: 14px; }
.footer-links a:hover { color: var(--footer-ink); }
.site-footer .arrow-icon { color: var(--footer-accent); }
.copyright { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; justify-self: center; gap: 10px; white-space: nowrap; }
.copyright-signature { display: block; width: 132px; height: 66px; object-fit: contain; opacity: .76; filter: brightness(0) invert(1); }
.contact-float { --contact-float-inset: max(clamp(30px, 3vw, 44px), env(safe-area-inset-bottom), env(safe-area-inset-right)); position: fixed; z-index: 20; right: var(--contact-float-inset); bottom: var(--contact-float-inset); }
.contact-float-button { position: relative; display: grid; width: 54px; height: 54px; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--rule-soft) 78%, transparent); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 6px 20px rgba(23, 25, 22, .12); cursor: pointer; transition: transform var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard); }
.contact-float-button:hover { transform: translateY(-2px); background: var(--paper-deep); }
.contact-float-button:focus-visible, .contact-popover :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-float-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.contact-popover { position: absolute; right: 0; bottom: calc(100% + 14px); width: min(350px, calc(100vw - 36px)); padding: 28px 26px 22px; border: 1px solid color-mix(in srgb, var(--rule-soft) 74%, transparent); background: var(--paper); color: var(--ink); box-shadow: 0 20px 65px rgba(23, 25, 22, .17); }
.contact-popover[hidden] { display: none; }
.contact-popover-close { position: absolute; top: 13px; right: 13px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.contact-popover-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.contact-popover-kicker { margin: 0 34px 12px 0; color: var(--muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.contact-popover h2 { max-width: 270px; margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.contact-popover-copy { margin: 14px 0 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.contact-popover-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.contact-popover-actions a { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; padding: 7px 4px; border: 1px solid var(--rule-soft); color: var(--ink); font-size: 9px; letter-spacing: .015em; line-height: 1.2; text-align: center; white-space: nowrap; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.contact-popover-actions a:hover { transform: translateY(-1px); border-color: var(--ink); background: var(--ink); color: var(--paper); }
.contact-popover-actions .contact-popover-email { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.contact-popover-actions .contact-popover-email:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.contact-popover-location { margin: 14px 0 0; color: var(--muted); font-size: 9px; letter-spacing: .08em; line-height: 1.7; text-transform: uppercase; }
.contact-popover-location span { padding-inline: 4px; color: var(--accent); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-actions .contact-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 10px 15px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.contact-email-link { width: max-content; max-width: 100%; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.contact-actions .contact-email-link svg, .contact-instagram-link svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.contact-instagram-link { border: 1px solid var(--rule-soft); background: var(--paper); color: var(--ink); }
.contact-instagram-link .instagram-flash { fill: currentColor; stroke: none; }
.contact-actions .contact-email-link:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.contact-instagram-link:hover { border-color: var(--accent); background: var(--control-hover); }
html.photo-dialog-active, html.photo-dialog-active body { overflow: hidden; overflow: clip; overscroll-behavior: none; }
.photo-dialog { position: fixed; box-sizing: border-box; width: min(1120px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; outline: 0; background: var(--paper); color: var(--ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .24); }
.photo-dialog::backdrop { background: rgba(16, 18, 16, .58); opacity: 0; transition: opacity var(--motion-dialog) var(--ease-dialog); }
.photo-dialog.is-open::backdrop { opacity: 1; }
.photo-dialog-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); min-height: min(66vh, 720px); }
.photo-dialog-art { display: grid; min-width: 0; min-height: 0; place-items: center; background: var(--photo-matte); }
.photo-dialog:not(.is-hero) .photo-dialog-art { width: min(100%, calc(150dvh - 72px)); aspect-ratio: 3 / 2; align-self: center; justify-self: center; }
.photo-dialog-art img { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 50px); object-fit: contain; }
.photo-dialog-info { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(34px, 4.4vw, 58px); }
.photo-dialog-info .caption-kicker { margin-bottom: 11px; }
.photo-dialog-info h2 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.photo-meta-grid { display: grid; grid-template-columns: 1fr; margin: 40px 0 0; }
.photo-dialog-description { margin: 25px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.85; }
.photo-dialog-description[hidden] { display: none; }
.photo-meta-grid > div { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); }
.photo-meta-grid dt { color: var(--muted); font-size: 9px; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; }
.photo-meta-grid dd { min-width: 0; margin: 0; color: var(--ink); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.photo-detail-note { margin: 22px 0 0; padding: 10px 0 10px 13px; border-left: 1px solid var(--accent); color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.photo-dialog-navigation { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 31px; padding-top: 12px; border-top: 1px solid var(--rule); }
.photo-dialog-navigation[hidden] { display: none; }
.photo-dialog-nav { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 4px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; transition: color var(--motion-fast) var(--ease-standard); }
.photo-dialog-nav:hover { color: var(--ink); }
.photo-dialog-nav svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-ui) var(--ease-standard); }
.photo-dialog-nav:first-child:hover svg { transform: translateX(-2px); }
.photo-dialog-nav:last-child:hover svg { transform: translateX(2px); }
.photo-dialog-position { margin: 0; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.photo-dialog-close { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--rule-soft); background: var(--paper); color: var(--ink); cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.photo-dialog-close:focus-visible, .photo-dialog.is-hero .photo-dialog-close:focus-visible { outline: none; border-color: var(--accent); }
.photo-dialog-close:hover { border-color: var(--accent); background: var(--paper-deep); }
.photo-dialog-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.photo-dialog-art, .photo-dialog-info { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-panel) var(--ease-dialog), transform var(--motion-panel) var(--ease-standard); }
.photo-dialog.is-open .photo-dialog-art, .photo-dialog.is-open .photo-dialog-info { opacity: 1; transform: translateY(0); }
.photo-dialog.is-open .photo-dialog-info { transition-delay: 30ms; }
.photo-dialog-art img { transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.photo-dialog.is-hero { width: min(1380px, calc(100vw - 48px)); }
.photo-dialog.is-hero .photo-dialog-layout { grid-template-columns: minmax(0, 1.55fr) minmax(340px, .72fr); min-height: min(80dvh, 820px); }
.photo-dialog.is-hero .photo-dialog-art { background: var(--photo-matte); }
.photo-dialog.is-hero .photo-dialog-art img { max-height: calc(100dvh - 48px); }
.photo-dialog.is-hero .photo-dialog-info { padding: clamp(42px, 5vw, 76px); background: var(--hero-detail-surface); color: var(--hero-detail-ink); }
.photo-dialog.is-hero .photo-dialog-info .caption-kicker { color: var(--hero-detail-muted); }
.photo-dialog.is-hero .photo-dialog-info h2 { max-width: 390px; color: var(--hero-detail-ink); font-size: clamp(44px, 5vw, 68px); }
.photo-dialog.is-hero .photo-meta-grid > div { border-color: var(--hero-detail-rule); }
.photo-dialog.is-hero .photo-meta-grid dt, .photo-dialog.is-hero .photo-detail-note { color: var(--hero-detail-muted); }
.photo-dialog.is-hero .photo-meta-grid dd { color: var(--hero-detail-ink); }
.photo-dialog.is-hero .photo-dialog-description { color: var(--hero-detail-muted); }
.photo-dialog.is-hero .photo-dialog-navigation { border-color: var(--hero-detail-rule); }
.photo-dialog.is-hero .photo-dialog-nav { color: var(--hero-detail-muted); }
.photo-dialog.is-hero .photo-dialog-nav:hover { color: var(--hero-detail-ink); }
.photo-dialog.is-hero .photo-dialog-position { color: var(--hero-detail-muted); }
.photo-dialog.is-hero .photo-dialog-close { border-color: var(--hero-detail-rule); background: var(--hero-detail-surface); color: var(--hero-detail-ink); }
@media (max-width: 1000px) {
  :root { --shell: min(100% - 72px, 900px); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(38px, 8vw, 72px); }
  .section-lede { max-width: 430px; }
  .collection-grid { gap: 52px 32px; }
  .gallery-tools { align-items: stretch; flex-direction: column; gap: 16px; margin-top: 70px; margin-bottom: 39px; padding-bottom: 15px; }
  .gallery-note { margin-bottom: 0; }
  .gallery-filter-groups { width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .filter-set { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 8px 12px; }
  .filter-button { justify-self: start; }
  .treatment-filters { margin-top: 2px; padding: 5px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; gap: 16px 18px; min-height: 154px; padding: 24px 72px 24px 0; }
  .footer-name { font-size: 20px; }
  .site-footer p { font-size: 15px; }
  .footer-links { gap: 8px; }
  .copyright-signature { width: 112px; height: 56px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .hero-copy { min-height: max(0px, calc(100svh - 440px)); justify-content: center; padding-block: 0; }
  .hero-intro { margin-bottom: 35px; }
}
@media (max-width: 850px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 16px 18px; min-height: 0; padding: 22px 70px 22px 0; }
  .footer-name { grid-column: 1; grid-row: 1; font-size: 19px; }
  .site-footer p { grid-column: 2; grid-row: 1; justify-self: end; font-size: 15px; }
  .footer-links { grid-column: 1; grid-row: 2; flex-direction: row; gap: 8px; }
  .copyright { grid-column: 2; grid-row: 2; justify-self: end; }
  .copyright-signature { width: 104px; height: 52px; }
  .photo-dialog { width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
  .photo-dialog-layout { grid-template-columns: 1fr; min-height: 0; }
  .photo-dialog.is-hero .photo-dialog-layout { grid-template-columns: 1fr; min-height: 0; }
  .photo-dialog-art { height: min(46dvh, 520px); }
  .photo-dialog:not(.is-hero) .photo-dialog-art { width: min(100%, 69dvh, 780px); height: auto; }
  .photo-dialog-art img { max-height: min(46dvh, 520px); }
  .photo-dialog-info { padding: 30px; }
  .photo-dialog.is-hero { width: min(880px, calc(100vw - 32px)); }
  .photo-dialog.is-hero .photo-dialog-art { height: min(46dvh, 420px); }
  .photo-dialog.is-hero .photo-dialog-art img { max-height: min(46dvh, 420px); }
  .contact-popover { width: min(335px, calc(100vw - 36px)); }
}
@media (max-width: 700px) {
  :root { --shell: calc(100% - 40px); }
  html { scroll-padding-top: 82px; }
  .navigation-scrim { position: fixed; z-index: 29; inset: 0; visibility: hidden; background: color-mix(in srgb, var(--paper) 18%, transparent); pointer-events: none; }
  html.navigation-open .navigation-scrim { visibility: visible; pointer-events: auto; }
  body { font-size: 14px; }
  .section-shell { padding-block: 88px; }
  .header-inner { min-height: 82px; }
  .wordmark { --wordmark-width: 68px; }
  .wordmark-note { margin-top: 7px; font-size: 8px; letter-spacing: .11em; }
  .header-controls { gap: 8px; }
  .menu-toggle { display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
  @media (hover: hover) and (pointer: fine) {
    .menu-toggle:hover { background: var(--paper-deep); }
  }
  .menu-toggle:active { background: var(--paper-card); }
  .menu-toggle:focus-visible { outline-offset: 2px; }
  .menu-toggle span { width: 15px; height: 1px; background: currentColor; transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-ui) var(--ease-standard); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
  .primary-navigation { position: absolute; top: 81px; right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 9px 20px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); box-shadow: 0 24px 48px rgba(23, 24, 21, .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px); transform-origin: top; transition: opacity var(--motion-panel) var(--ease-standard), transform var(--motion-panel) var(--ease-standard), visibility 0s linear var(--motion-panel); }
  .primary-navigation.is-open, .primary-navigation.is-closing { visibility: visible; }
  .primary-navigation.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .primary-navigation.is-closing { pointer-events: none; }
  .primary-navigation a { padding-block: 12px; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(-4px); transition: color var(--motion-fast) var(--ease-standard), opacity var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard); }
  .primary-navigation.is-open a { opacity: 1; transform: translateY(0); }
  .primary-navigation.is-open a:nth-child(2) { transition-delay: 25ms; }
  .primary-navigation.is-open a:nth-child(3) { transition-delay: 50ms; }
  .primary-navigation.is-open a:nth-child(4) { transition-delay: 75ms; }
  .primary-navigation a:last-child { border-bottom: 0; }
  .primary-navigation a::after { display: none; }
  .primary-navigation a[aria-current="page"] { color: var(--accent); font-weight: 500; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding-block: 54px 86px; }
  .hero-copy { min-height: 0; justify-content: center; padding-block: max(0px, calc(50svh - 296px)) 0; }
  .hero h1 { margin-block: 32px 8px; font-size: clamp(39px, 11.5vw, 72px); }
  .hero-tagline { margin-bottom: 24px; font-size: clamp(23px, 6vw, 30px); }
  .hero-intro { max-width: 440px; margin-bottom: 34px; font-size: 14px; }
  .hero-figure { max-width: 860px; margin-inline: auto; }
  .hero-caption { color: var(--ink-soft); font-size: 9px; }
  .collection-index, .collection-count, .gallery-foot, .contact-popover-kicker { color: var(--ink-soft); font-size: 10px; }
  .slot-ribbon { font-size: 9px; }
  .work-section { padding-block: 87px 90px; }
  .section-heading { gap: 28px; }
  .section-number { padding-top: 0; }
  .section-heading-main { gap: 18px; }
  .section-heading h2 { font-size: clamp(54px, 14vw, 75px); }
  .section-lede { max-width: 410px; }
  .gallery-tools { align-items: stretch; flex-direction: column; gap: 15px; margin-top: 54px; margin-bottom: 32px; padding-bottom: 15px; }
  .gallery-note { margin-bottom: 0; font-size: 17px; }
  .gallery-filter-groups { flex-direction: column; align-items: stretch; gap: 2px; }
  .filter-set { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .treatment-filters { margin-top: 2px; padding: 5px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  .filter-button { min-height: 44px; font-size: 10px; }
  .filter-button span { font-size: 10px; }
  .gallery { gap: 67px; }
  .gallery-collection-heading { grid-template-columns: 1fr; gap: 9px; align-items: start; min-height: unset; margin-bottom: 30px; padding-block: 9px 17px; }
  .collection-index { grid-column: auto; }
  .gallery-collection-title { font-size: 34px; }
  .collection-count { grid-column: auto; grid-row: auto; justify-self: start; }
  .collection-grid { grid-template-columns: 1fr; gap: 39px; }
  .work-caption { padding-top: 14px; }
  .work-caption h3 { font-size: 29px; }
  .gallery-foot { grid-template-columns: 1fr; justify-items: center; gap: 12px; margin-top: 53px; padding-top: 24px; text-align: center; }
  .gallery-foot .gallery-view-link { grid-column: 1; grid-row: 1; }
  .gallery-foot #gallery-total { grid-column: 1; grid-row: 2; justify-self: center; }
  .photo-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .photo-dialog.is-hero { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .photo-dialog-layout { grid-template-columns: 1fr; min-height: 0; }
  .photo-dialog-art { height: min(42dvh, 360px); }
  .photo-dialog:not(.is-hero) .photo-dialog-art { width: min(100%, 63dvh, 540px); height: auto; }
  .photo-dialog-art img { max-height: min(42dvh, 360px); }
  .photo-dialog-info { padding: 28px 22px 30px; }
  .photo-dialog.is-hero .photo-dialog-art { height: min(38dvh, 330px); }
  .photo-dialog.is-hero .photo-dialog-art img { max-height: min(38dvh, 330px); }
  .photo-dialog.is-hero .photo-dialog-info { padding: 24px 20px 26px; }
  .photo-dialog.is-hero .photo-dialog-info h2 { font-size: clamp(36px, 10vw, 48px); }
  .photo-dialog-info h2 { font-size: clamp(31px, 8vw, 39px); }
  .photo-meta-grid { margin-top: 25px; }
  .photo-meta-grid > div { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding-block: 10px; }
  .photo-meta-grid dt, .photo-dialog-nav, .photo-dialog-position { font-size: 10px; }
  .photo-dialog-close { top: 10px; right: 10px; width: 44px; height: 44px; }
  .contact-float { --contact-float-inset: max(30px, env(safe-area-inset-bottom), env(safe-area-inset-right)); }
  .contact-float-button { width: 50px; height: 50px; }
  .contact-popover { right: -4px; width: min(326px, calc(100vw - 28px)); padding: 25px 22px 19px; }
  .contact-section { padding-block: 52px 28px; }
  .contact-content { grid-template-columns: 1fr; gap: 31px; padding-block: 35px 58px; }
  .contact-content h2 { font-size: clamp(49px, 15vw, 76px); }
  .contact-aside { max-width: 450px; }
  .contact-bottom { gap: 20px; color: var(--ink-soft); font-size: 10px; }
  .contact-popover-location, .contact-popover-actions a { font-size: 10px; }
  .site-footer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 9px; min-height: 0; padding: 24px 68px 34px 0; }
  .footer-name { grid-column: 1; grid-row: auto; font-size: 22px; }
  .site-footer p { grid-column: 1; grid-row: auto; justify-self: start; font-size: 16px; }
  .footer-links { grid-column: 1; grid-row: auto; flex-direction: row; gap: 22px; }
  .footer-links a { min-height: 44px; padding-inline: 0; font-size: 14px; }
  .copyright { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0; }
  .copyright-signature { width: 128px; height: 64px; }
}
@media (max-width: 380px) {
  :root { --shell: calc(100% - 32px); }
  .hero-actions { align-items: center; flex-direction: column; gap: 17px; }
  .section-heading h2 { font-size: clamp(44px, 15vw, 50px); }
  .filter-set { gap: 8px; }
  .filter-button { gap: 5px; font-size: 9px; }
  .filter-button span { font-size: 9px; }
  .footer-links { gap: 14px; }
  .contact-bottom { flex-direction: column; gap: 6px; }
}
@media (min-width: 381px) and (max-width: 700px) {
  .hero-actions { align-items: center; flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
  .primary-navigation a:hover:not([aria-current="page"]) {
    color: var(--ink-soft);
    background: transparent;
    border-color: var(--rule);
  }

  .primary-navigation a:active {
    color: var(--accent);
    background: transparent;
  }
}
@media (min-width: 1101px) {
  .about-facts { margin-top: 82px; }
}
@media (max-width: 1100px) {
  .about-bio .about-copy p { text-align: left; text-align-last: left; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .about-facts div:last-child { grid-column: 1 / -1; }
  .about-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .about-category:last-child { grid-column: 1 / -1; width: calc((100% - 24px) / 2); justify-self: center; }
}
@media (max-width: 1000px) {
  .about-section { padding-top: 88px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .about-heading, .about-profile, .about-bio { grid-column: 1; }
  .about-bio { padding-top: 0; }
  .about-profile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(26px, 4vw, 42px); align-items: start; }
  .about-portrait { display: flex; }
  .about-heading :is(h1, h2) { margin-top: 26px; font-size: clamp(60px, 7vw, 82px); }
}
@media (max-width: 1000px) {
  .about-story { column-gap: 34px; }
  .about-story-heading { column-gap: 34px; }
  .about-category p { font-size: 14px; }
  .about-final { gap: 34px; }
}
@media (max-width: 850px) {
  .about-note { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 56px; }
  .about-note p { justify-self: end; }
  .about-story { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 62px; }
  .about-story-heading { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
  .about-journey { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "image" "copy"; row-gap: 20px; }
  .about-journey-image { align-self: start; }
  .about-journey-copy { max-width: 70ch; }
  .about-approach-copy { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0 30px; }
  .about-now { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: 32px; }
  .about-now-heading { grid-column: 1; }
  .about-now-copy { grid-column: 2; }
  .about-final { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; }
  .about-final-copy h2 { font-size: clamp(40px, 6vw, 52px); }
}
@media (max-width: 700px) {
  .about-section { padding: 72px 0 16px; }
  .about-grid { gap: 23px; }
  .about-profile { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-portrait, .about-bio { grid-column: 1; }
  .about-portrait { grid-row: auto; width: min(100%, 440px); }
  .about-portrait figcaption { gap: 8px; color: var(--ink-soft); font-size: 9px; letter-spacing: .06em; }
  .about-portrait figcaption span { white-space: normal; }
  .about-heading :is(h1, h2) { margin-top: 25px; font-size: clamp(58px, 14vw, 78px); }
  .about-aside { margin-top: 22px; font-size: 16px; }
  .about-lead { max-width: 34ch; margin-bottom: 20px; font-size: clamp(23px, 5.8vw, 27px); line-height: 1.3; }
  .about-note { gap: 14px; margin-top: 52px; }
  .about-note blockquote { gap: 14px; font-size: clamp(25px, 7vw, 30px); }
  .about-note blockquote::before { width: 24px; }
  .about-copy p, .about-category p { font-size: 14px; line-height: 1.85; }
  .about-copy p, .about-category p { text-align: left; text-align-last: left; }
  .about-facts { gap: 18px 14px; margin-top: 30px; }
  .about-story { margin-top: 58px; padding-top: 26px; }
  .about-story-heading { margin-bottom: 19px; }
  .about-story-heading h2 { font-size: clamp(38px, 10vw, 49px); }
  .about-journey { grid-template-areas: "heading" "image" "copy"; row-gap: 19px; }
  .about-journey-heading { margin: 0; }
  .about-experience-heading { margin-bottom: 21px; }
  .about-experience-body { gap: 22px; }
  .about-experience-images { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .about-experience-copy { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .about-experience-copy p:first-child { grid-column: 1; }
  .about-approach-copy { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .about-approach-statement { grid-column: 1; grid-row: auto; max-width: 21ch; margin-bottom: 14px; font-size: clamp(27px, 7vw, 32px); }
  .about-approach-text { grid-column: 1; }
  .about-work { grid-template-columns: minmax(0, 1fr); }
  .about-work-heading { margin-bottom: 18px; }
  .about-categories { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .about-category:last-child { grid-column: auto; width: 100%; }
  .about-category h3 { margin-top: 12px; padding-top: 11px; }
  .about-work-footer { justify-content: center; margin-top: 24px; padding-top: 0; }
  .about-now { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 52px; }
  .about-now-heading { grid-column: 1; margin-bottom: 15px; }
  .about-now-heading .about-label { margin-bottom: 12px; }
  .about-now-copy { grid-column: 1; }
  .about-now-signoff { margin-top: 15px; }
  .about-final { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 44px; padding-top: 26px; }
  .about-final-copy .about-label { margin-bottom: 12px; }
  .about-final-copy h2 { max-width: 22ch; font-size: clamp(38px, 9.5vw, 48px); line-height: 1.04; }
  .about-final-credit { margin-top: 18px; }
}
@media (max-width: 320px) {
  .about-heading :is(h1, h2) { font-size: clamp(34px, 17.5vw, 56px); }
  .about-story-heading h2 { font-size: clamp(32px, 11.8vw, 38px); }
  .about-final-copy h2 { font-size: clamp(34px, 12vw, 38px); }
}
/* World-class minimal motion system */
.has-reveal .reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.has-reveal .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll:is(h1, h2, h3, h4, .gallery-note, .about-lead, .about-approach-statement) {
  transform: translate3d(-20px, 8px, 0);
}
.has-reveal .reveal-on-scroll:is(h1, h2, h3, h4, .gallery-note, .about-lead, .about-approach-statement).is-visible {
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll:is(p, .about-label, .caption-kicker, .eyebrow) {
  transform: translate3d(0, 20px, 0);
}
.has-reveal .reveal-on-scroll:is(p, .about-label, .caption-kicker, .eyebrow).is-visible {
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll:is(blockquote, .about-aside, .about-note) {
  transform: translate3d(0, 24px, 0);
}
.has-reveal .reveal-on-scroll:is(blockquote, .about-aside, .about-note).is-visible {
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll.reveal-left {
  transform: translate3d(-22px, 0, 0);
}
.has-reveal .reveal-on-scroll.reveal-left.is-visible {
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll.reveal-soft-up {
  transform: translate3d(0, 24px, 0);
}
.has-reveal .reveal-on-scroll.reveal-soft-up.is-visible {
  transform: translate3d(0, 0, 0);
}
.has-reveal .reveal-on-scroll.reveal-delay-1 {
  --reveal-delay: 90ms;
}
.has-reveal .reveal-on-scroll.reveal-delay-2 {
  --reveal-delay: 180ms;
}
.has-reveal .reveal-on-scroll.reveal-delay-3 {
  --reveal-delay: 270ms;
}
@media (hover: hover) and (pointer: fine) {
  .wordmark {
    transition: opacity var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .wordmark:hover {
    opacity: .9;
    transform: translateY(-1px);
  }
  .primary-navigation a {
    transition: color var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .primary-navigation a:hover {
    transform: translateY(-1px);
  }
  .theme-toggle {
    transition: color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .hero-photo-open {
    overflow: hidden;
  }
  .hero-photo {
    transition: transform var(--motion-image) var(--ease-standard);
  }
  .hero-photo-open:hover .hero-photo {
    transform: scale(1.012);
  }
  .text-link,
  .contact-link,
  .gallery-view-link,
  .about-gallery-link,
  .contact-actions a {
    transition: border-color var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .text-link:hover,
  .contact-link:hover,
  .gallery-view-link:hover,
  .about-gallery-link:hover {
    transform: translateY(-1px);
  }
  .hero-actions .text-link:hover,
  .contact-actions .contact-email-link:hover {
    transform: translateY(-2px);
  }
  .hero-actions .text-link:active,
  .contact-actions a:active,
  .gallery-view-link:active,
  .about-gallery-link:active {
    transform: translateY(0) scale(.985);
  }
  .work-card {
    transition: transform var(--motion-image) var(--ease-standard);
  }
  .work-card:hover {
    transform: translateY(-2px);
  }
  .work-art img {
    transition: transform var(--motion-image) var(--ease-standard);
  }
  .work-card:hover .work-art img {
    transform: scale(1.018);
  }
  .work-caption h3 {
    transition: color var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .work-card:hover .work-caption h3 {
    color: var(--accent);
    transform: translateX(2px);
  }
  .about-image,
  .portrait-frame {
    overflow: hidden;
  }
  .about-image img,
  .portrait-frame img {
    transition: transform var(--motion-image) var(--ease-standard);
  }
  .about-image:hover img,
  .portrait-frame:hover img {
    transform: scale(1.012);
  }
  .filter-button {
    transition: color var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .filter-button:hover {
    transform: translateY(-1px);
  }
  .filter-button:active {
    transform: translateY(0);
  }
  .contact-float-button {
    transition: transform var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard), border-color var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui) var(--ease-standard);
  }
  .contact-float-button:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 10px 28px rgba(23, 25, 22, .14);
  }
  .contact-float-button:active {
    transform: translateY(-1px) scale(.98);
  }
  .contact-popover-actions a:hover {
    transform: translateY(-2px);
  }
  .photo-dialog-close {
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
  }
  .photo-dialog-close:hover {
    transform: rotate(4deg);
  }
}
.menu-toggle {
  transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-ui) var(--ease-standard);
}
.photo-dialog-art,
.photo-dialog-info {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--motion-panel) var(--ease-dialog), transform var(--motion-panel) var(--ease-standard);
}
.photo-dialog.is-open .photo-dialog-art,
.photo-dialog.is-open .photo-dialog-info {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.photo-dialog.is-open .photo-dialog-info {
  transition-delay: 70ms;
}
.photo-dialog-art img {
  transition: opacity var(--motion-ui) var(--ease-standard), transform var(--motion-image) var(--ease-standard);
}
@media (max-width: 700px) {
  .has-reveal .reveal-on-scroll {
    will-change: auto;
  }
  .work-card {
    transition: transform var(--motion-ui) var(--ease-standard);
  }
  .work-card:active {
    transform: scale(.995);
  }
  .work-art img,
  .about-image img,
  .portrait-frame img,
  .hero-photo {
    transition-duration: 520ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .has-reveal .reveal-on-scroll,
  .has-reveal .reveal-on-scroll.reveal-left,
  .has-reveal .reveal-on-scroll.reveal-soft-up,
  .photo-dialog-art,
  .photo-dialog-info {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .photo-dialog::backdrop {
    transition-duration: .01ms !important;
  }
}
/* Final interaction polish */
:root {
  --motion-micro: 180ms;
  --motion-hover: 420ms;
  --motion-interaction: 520ms;
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-press: cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .site-header {
    transition: background-color var(--motion-hover) var(--ease-soft), border-color var(--motion-hover) var(--ease-soft);
  }
  .wordmark {
    transition: opacity var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .wordmark:hover {
    opacity: .88;
    transform: translateY(-1px);
  }
  .primary-navigation a {
    transition: color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .primary-navigation a:hover {
    transform: translateY(-1px);
  }
  .primary-navigation a::after {
    transition: transform var(--motion-hover) var(--ease-soft);
  }
  .theme-toggle {
    transition: color var(--motion-hover) var(--ease-soft), background-color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .hero-photo-open {
    overflow: hidden;
  }
  .hero-photo {
    transition: transform 900ms var(--ease-soft), opacity var(--motion-hover) var(--ease-soft);
  }
  .hero-photo-open:hover .hero-photo {
    transform: scale(1.014);
  }
  .hero-caption {
    transition: color var(--motion-hover) var(--ease-soft);
  }
  .hero-figure:hover .hero-caption {
    color: var(--ink-soft);
  }
  .text-link,
  .contact-link {
    transition: color var(--motion-hover) var(--ease-soft), border-color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .text-link:hover,
  .contact-link:hover {
    transform: translateY(-1px);
  }
  .hero-actions .text-link {
    transition: border-color var(--motion-hover) var(--ease-soft), background-color var(--motion-hover) var(--ease-soft), color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft), box-shadow var(--motion-hover) var(--ease-soft);
  }
  .hero-actions .text-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .hero-actions .text-link:active,
  .contact-actions a:active,
  .gallery-view-link:active,
  .about-gallery-link:active {
    transform: translateY(0) scale(.985);
  }
  .arrow-icon {
    transition: transform var(--motion-hover) var(--ease-soft), color var(--motion-hover) var(--ease-soft);
  }
  .text-link:hover .arrow-icon:not(.arrow-icon-down),
  .contact-link:hover .arrow-icon,
  .footer-links a:hover .arrow-icon {
    transform: translate(3px, -3px);
  }
  .text-link:hover .arrow-icon-down {
    transform: translate(3px, 4px);
  }
  .gallery-filter-groups {
    transition: opacity var(--motion-hover) var(--ease-soft);
  }
  .filter-button {
    transition: color var(--motion-hover) var(--ease-soft), transform var(--motion-micro) var(--ease-press);
  }
  .filter-button:hover {
    transform: translateY(-1px);
  }
  .filter-button:active {
    transform: translateY(0) scale(.98);
  }
  .filter-button::after {
    transition: transform var(--motion-hover) var(--ease-soft);
  }
  .work-card {
    transition: transform var(--motion-hover) var(--ease-soft);
  }
  .work-card:hover {
    transform: translateY(-2px);
  }
  .work-art {
    transition: box-shadow var(--motion-hover) var(--ease-soft);
  }
  .work-card:hover .work-art {
    box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 9%, transparent);
  }
  .work-art img {
    transition: transform 800ms var(--ease-soft);
  }
  .work-card:hover .work-art img {
    transform: scale(1.016);
  }
  .work-caption h3 {
    transition: color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .work-card:hover .work-caption h3 {
    color: var(--accent);
    transform: translateX(2px);
  }
  .about-image,
  .portrait-frame {
    transition: box-shadow var(--motion-hover) var(--ease-soft);
  }
  .about-image img,
  .portrait-frame img {
    transition: transform 800ms var(--ease-soft);
  }
  .about-image:hover img,
  .portrait-frame:hover img {
    transform: scale(1.012);
  }
  .about-image:hover,
  .portrait-frame:hover {
    box-shadow: 0 16px 44px color-mix(in srgb, var(--ink) 8%, transparent);
  }
  .about-gallery-link {
    transition: color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .about-gallery-link:hover {
    transform: translateY(-1px);
  }
  .about-gallery-link span {
    transition: transform var(--motion-hover) var(--ease-soft);
  }
  .about-gallery-link:hover span {
    transform: translateX(5px);
  }
  .contact-float-button {
    transition: transform var(--motion-hover) var(--ease-soft), background-color var(--motion-hover) var(--ease-soft), border-color var(--motion-hover) var(--ease-soft), box-shadow var(--motion-hover) var(--ease-soft);
  }
  .contact-float-button:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 12px 32px rgba(23, 25, 22, .14);
  }
  .contact-float-button:active {
    transform: scale(.97);
  }
  .contact-popover-actions a {
    transition: border-color var(--motion-hover) var(--ease-soft), background-color var(--motion-hover) var(--ease-soft), color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .contact-popover-actions a:hover {
    transform: translateY(-2px);
  }
  .contact-popover-close {
    transition: color var(--motion-micro) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .contact-popover-close:hover {
    transform: rotate(4deg);
  }
  .photo-dialog-close {
    transition: color var(--motion-micro) var(--ease-soft), background-color var(--motion-micro) var(--ease-soft), border-color var(--motion-micro) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .photo-dialog-close:hover {
    transform: rotate(4deg);
  }
  .photo-dialog-nav {
    transition: color var(--motion-hover) var(--ease-soft), transform var(--motion-hover) var(--ease-soft);
  }
  .photo-dialog-nav:hover {
    transform: translateY(-1px);
  }
}
.menu-toggle {
  transition: color var(--motion-micro) var(--ease-press), background-color var(--motion-micro) var(--ease-press), border-color var(--motion-micro) var(--ease-press), transform var(--motion-micro) var(--ease-press);
}
.menu-toggle span {
  transition: opacity var(--motion-interaction) var(--ease-soft), transform var(--motion-interaction) var(--ease-soft);
}
.photo-dialog {
  will-change: transform, opacity;
}
.photo-dialog-art,
.photo-dialog-info {
  will-change: opacity, transform;
}
.photo-dialog-art img {
  transition: opacity var(--motion-interaction) var(--ease-soft), transform 800ms var(--ease-soft);
}
@media (max-width: 700px) {
  .hero-photo {
    transition-duration: 600ms;
  }
  .work-art img,
  .about-image img,
  .portrait-frame img {
    transition-duration: 560ms;
  }
  .work-card:active {
    transform: scale(.997);
  }
  .contact-float-button {
    transition-duration: 260ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 1ms;
    --motion-hover: 1ms;
    --motion-interaction: 1ms;
    --motion-reveal: 1ms;
    --motion-image: 1ms;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .has-reveal .reveal-on-scroll,
  .has-reveal .reveal-on-scroll.reveal-left,
  .has-reveal .reveal-on-scroll.reveal-soft-up,
  .photo-dialog-art,
  .photo-dialog-info {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .photo-dialog::backdrop {
    transition-duration: .01ms !important;
  }
}
/* About section cinematic scroll choreography */
@media (prefers-reduced-motion: no-preference) {
  .about-section .about-grid > *,
  .about-section .about-note > *,
  .about-section .about-story > *,
  .about-section .about-story-heading > *,
  .about-section .about-journey > *,
  .about-section .about-experience-heading > *,
  .about-section .about-experience-body > *,
  .about-section .about-approach-heading > *,
  .about-section .about-approach-copy > *,
  .about-section .about-work-heading > *,
  .about-section .about-category,
  .about-section .about-work-footer,
  .about-section .about-now > *,
  .about-section .about-final > * {
    transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
  }
  .about-section .about-grid > * {
    animation: aboutFloatIn 900ms var(--ease-soft) both;
  }
  .about-section .about-grid > :nth-child(2) {
    animation-delay: 70ms;
  }
  .about-section .about-grid > :nth-child(3) {
    animation-delay: 140ms;
  }
  .about-section .about-note > * {
    animation: aboutFloatIn 1000ms var(--ease-soft) both;
  }
  .about-section .about-note > :nth-child(2) {
    animation-delay: 270ms;
  }
  .about-section .about-story-heading > * {
    animation: aboutSlideIn 900ms var(--ease-soft) both;
  }
  .about-section .about-story-heading > :nth-child(2) {
    animation-delay: 90ms;
  }
  .about-section .about-journey > * {
    animation: aboutFloatIn 950ms var(--ease-soft) both;
  }
  .about-section .about-journey > :nth-child(2) {
    animation-delay: 90ms;
  }
  .about-section .about-experience-heading > * {
    animation: aboutSlideIn 900ms var(--ease-soft) both;
  }
  .about-section .about-experience-heading > :nth-child(2) {
    animation-delay: 90ms;
  }
  .about-section .about-experience-body > * {
    animation: aboutFloatIn 950ms var(--ease-soft) both;
  }
  .about-section .about-experience-body > :nth-child(2) {
    animation-delay: 270ms;
  }
  .about-section .about-approach-heading > * {
    animation: aboutSlideIn 900ms var(--ease-soft) both;
  }
  .about-section .about-approach-heading > :nth-child(2) {
    animation-delay: 100ms;
  }
  .about-section .about-approach-copy > * {
    animation: aboutFloatIn 950ms var(--ease-soft) both;
  }
  .about-section .about-approach-copy > :nth-child(2) {
    animation-delay: 120ms;
  }
  .about-section .about-work-heading > * {
    animation: aboutSlideIn 900ms var(--ease-soft) both;
  }
  .about-section .about-work-heading > :nth-child(2) {
    animation-delay: 90ms;
  }
  .about-section .about-category {
    animation: aboutCategoryIn 850ms var(--ease-soft) both;
  }
  .about-section .about-category:nth-child(2) {
    animation-delay: 80ms;
  }
  .about-section .about-category:nth-child(3) {
    animation-delay: 160ms;
  }
  .about-section .about-work-footer {
    animation: aboutFloatIn 850ms var(--ease-soft) both;
    animation-delay: 270ms;
  }
  .about-section .about-now > * {
    animation: aboutSlideIn 900ms var(--ease-soft) both;
  }
  .about-section .about-now > :nth-child(2) {
    animation-delay: 100ms;
  }
  .about-section .about-final > * {
    animation: aboutFloatIn 1000ms var(--ease-soft) both;
  }
  .about-section .about-final > :nth-child(2) {
    animation-delay: 120ms;
  }
  .about-section .about-label,
  .about-section .about-facts span,
  .about-section .caption-kicker {
    transition: color 420ms var(--ease-soft), opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  }
  .about-section .about-facts div {
    transition: transform 520ms var(--ease-soft);
  }
  .about-section .about-facts div:hover {
    transform: translateY(-2px);
  }
}
@keyframes aboutFloatIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutSlideIn {
  from {
    opacity: 0;
    transform: translate3d(-24px, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutCategoryIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .about-section .about-grid > *,
  .about-section .about-note > *,
  .about-section .about-story > *,
  .about-section .about-story-heading > *,
  .about-section .about-journey > *,
  .about-section .about-experience-heading > *,
  .about-section .about-experience-body > *,
  .about-section .about-approach-heading > *,
  .about-section .about-approach-copy > *,
  .about-section .about-work-heading > *,
  .about-section .about-category,
  .about-section .about-work-footer,
  .about-section .about-now > *,
  .about-section .about-final > * {
    animation-duration: 720ms;
  }
  .about-section .about-grid > :nth-child(n),
  .about-section .about-note > :nth-child(n),
  .about-section .about-story > :nth-child(n),
  .about-section .about-story-heading > :nth-child(n),
  .about-section .about-journey > :nth-child(n),
  .about-section .about-experience-heading > :nth-child(n),
  .about-section .about-experience-body > :nth-child(n),
  .about-section .about-approach-heading > :nth-child(n),
  .about-section .about-approach-copy > :nth-child(n),
  .about-section .about-work-heading > :nth-child(n),
  .about-section .about-now > :nth-child(n),
  .about-section .about-final > :nth-child(n) {
    animation-delay: 0ms;
  }
  .about-section .about-grid > :nth-child(2),
  .about-section .about-story-heading > :nth-child(2),
  .about-section .about-experience-heading > :nth-child(2),
  .about-section .about-approach-heading > :nth-child(2),
  .about-section .about-work-heading > :nth-child(2),
  .about-section .about-now > :nth-child(2),
  .about-section .about-final > :nth-child(2) {
    animation-delay: 70ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-section .about-grid > *,
  .about-section .about-note > *,
  .about-section .about-story > *,
  .about-section .about-story-heading > *,
  .about-section .about-journey > *,
  .about-section .about-experience-heading > *,
  .about-section .about-experience-body > *,
  .about-section .about-approach-heading > *,
  .about-section .about-approach-copy > *,
  .about-section .about-work-heading > *,
  .about-section .about-category,
  .about-section .about-work-footer,
  .about-section .about-now > *,
  .about-section .about-final > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* FINAL INDEX-SPECIFIC MOTION */
:root {
  --motion-hero: 1180ms;
  --motion-section: 980ms;
  --motion-stagger: 90ms;
  --motion-micro: 180ms;
  --motion-hover: 420ms;
  --motion-dialog: 520ms;
  --ease-editorial: cubic-bezier(.16, 1, .3, 1);
  --ease-silk: cubic-bezier(.22, 1, .36, 1);
}
html {
  scroll-behavior: smooth;
}
body {
  text-rendering: optimizeLegibility;
}
.skip-link {
  transition: transform var(--motion-micro) var(--ease-editorial), opacity var(--motion-micro) var(--ease-editorial);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    opacity: 0;
    animation: heroTextIn var(--motion-hero) var(--ease-editorial) both;
  }
  .hero-copy > :nth-child(1) {
    animation-delay: 90ms;
  }
  .hero-copy > :nth-child(2) {
    animation-delay: 180ms;
  }
  .hero-copy > :nth-child(3) {
    animation-delay: 270ms;
  }
  .hero-copy > :nth-child(4) {
    animation-delay: 360ms;
  }
  .hero-copy > :nth-child(5) {
    animation-delay: 450ms;
  }
  .hero-figure {
    opacity: 0;
    animation: heroImageIn 1450ms var(--ease-editorial) 760ms both;
  }
  .hero-caption {
    opacity: 0;
    animation: heroCaptionIn 950ms var(--ease-editorial) 1320ms both;
  }
  .work-section .section-heading > *,
  .work-section .gallery-tools > *,
  .work-section .gallery-foot > *,
  .contact-section .contact-inner > *,
  .site-footer:not(.editorial-footer) > * {
    opacity: 0;
    animation: sectionItemIn 850ms var(--ease-editorial) both;
  }
  .work-section .section-heading > :nth-child(1),
  .work-section .gallery-tools > :nth-child(1),
  .work-section .gallery-foot > :nth-child(1),
  .contact-section .contact-inner > :nth-child(1),
  .site-footer:not(.editorial-footer) > :nth-child(1) {
    animation-delay: 90ms;
  }
  .work-section .section-heading > :nth-child(2),
  .work-section .gallery-tools > :nth-child(2),
  .work-section .gallery-foot > :nth-child(2),
  .contact-section .contact-inner > :nth-child(2),
  .site-footer:not(.editorial-footer) > :nth-child(2) {
    animation-delay: 130ms;
  }
  .about-section .about-grid > * {
    opacity: 0;
    animation: aboutPrimaryIn 950ms var(--ease-editorial) both;
  }
  .about-section .about-grid > :nth-child(1) {
    animation-delay: 30ms;
  }
  .about-section .about-grid > :nth-child(2) {
    animation-delay: 120ms;
  }
  .about-section .about-note {
    opacity: 0;
    animation: aboutQuoteIn 1050ms var(--ease-editorial) 120ms both;
  }
  .about-section .about-story-heading {
    opacity: 0;
    animation: aboutHeadingIn 900ms var(--ease-editorial) both;
  }
  .about-section .about-journey-image,
  .about-section .about-journey-copy,
  .about-section .about-experience-body,
  .about-section .about-approach-image,
  .about-section .about-approach-copy,
  .about-section .about-categories,
  .about-section .about-work-footer,
  .about-section .about-now-copy,
  .about-section .about-final-image,
  .about-section .about-final-copy {
    opacity: 0;
    animation: aboutContentIn 1000ms var(--ease-editorial) both;
  }
  .about-section .about-journey-copy,
  .about-section .about-approach-copy,
  .about-section .about-final-copy {
    animation-delay: 100ms;
  }
  .about-section .about-experience-body {
    animation-delay: 80ms;
  }
  .about-section .about-approach-image {
    animation-delay: 90ms;
  }
  .about-section .about-categories {
    animation-delay: 70ms;
  }
  .about-section .about-work-footer {
    animation-delay: 270ms;
  }
  .about-section .about-now-copy {
    animation-delay: 80ms;
  }
  .about-section .about-final-image {
    animation-delay: 90ms;
  }
  .about-section .about-final-copy {
    animation-delay: 140ms;
  }
  .about-section .about-journey-image img,
  .about-section .about-experience-images img,
  .about-section .about-approach-image img,
  .about-section .about-category img,
  .about-section .about-final-image img {
    transition: transform 1000ms var(--ease-silk), filter 700ms var(--ease-silk);
  }
  .about-section .about-image {
    overflow: hidden;
  }
  .about-section .about-image:hover img {
    transform: scale(1.014);
  }
  .about-section .about-category {
    transition: transform 600ms var(--ease-editorial), opacity 600ms var(--ease-editorial);
  }
  .about-section .about-category:nth-child(1) {
    transition-delay: 0ms;
  }
  .about-section .about-category:nth-child(2) {
    transition-delay: 70ms;
  }
  .about-section .about-category:nth-child(3) {
    transition-delay: 140ms;
  }
  .about-section .about-category:hover {
    transform: translateY(-3px);
  }
  .about-section .about-category h3 {
    transition: color 420ms var(--ease-editorial), transform 420ms var(--ease-editorial);
  }
  .about-section .about-category:hover h4 {
    color: var(--accent);
    transform: translateX(2px);
  }
  .about-section .about-facts > div {
    transition: transform 450ms var(--ease-editorial), color 450ms var(--ease-editorial);
  }
  .about-section .about-facts > div:hover {
    transform: translateX(3px);
  }
  .about-section .about-final h3 span {
    display: inline-block;
    transition: transform 800ms var(--ease-editorial);
  }
  .about-section .about-final:hover h3 span:first-child {
    transform: translateX(2px);
  }
  .about-section .about-final:hover h3 span:last-child {
    transform: translateX(5px);
  }
  .contact-section .contact-content h2 {
    transition: transform 900ms var(--ease-editorial);
  }
  .contact-section:hover .contact-content h2 {
    transform: translateX(2px);
  }
  .contact-actions a svg {
    transition: transform 420ms var(--ease-editorial);
  }
  .contact-actions a:hover svg {
    transform: translateY(-2px);
  }
  .footer-name {
    transition: transform 420ms var(--ease-editorial), opacity 420ms var(--ease-editorial);
  }
  .footer-name:hover {
    transform: translateX(3px);
    opacity: .82;
  }
  .copyright-signature {
    transition: opacity 500ms var(--ease-editorial), transform 500ms var(--ease-editorial);
  }
  .site-footer:hover .copyright-signature {
    opacity: .78;
    transform: translateY(-1px);
  }
  .contact-popover {
    transform-origin: bottom right;
  }
  .contact-popover[hidden] {
    display: none;
  }
  .contact-popover:not([hidden]) {
    animation: popoverIn 520ms var(--ease-editorial) both;
  }
  .contact-popover-actions a {
    transition: transform 420ms var(--ease-editorial), background-color 420ms var(--ease-editorial), color 420ms var(--ease-editorial), border-color 420ms var(--ease-editorial);
  }
  .contact-popover-actions a:hover {
    transform: translateY(-2px);
  }
  .photo-dialog[open] .photo-dialog-art {
    animation: dialogImageIn 650ms var(--ease-editorial) both;
  }
  .photo-dialog[open] .photo-dialog-info {
    animation: dialogInfoIn 650ms var(--ease-editorial) 70ms both;
  }
  .photo-dialog[open] .photo-dialog-close {
    animation: dialogCloseIn 500ms var(--ease-editorial) 120ms both;
  }
  .photo-dialog-nav svg {
    transition: transform 420ms var(--ease-editorial);
  }
  #photo-dialog-previous:hover svg {
    transform: translateX(-3px);
  }
  #photo-dialog-next:hover svg {
    transform: translateX(3px);
  }
  .theme-toggle-icon {
    transition: transform 550ms var(--ease-editorial);
  }
}
@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translate3d(-10px, 5px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(1.006);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes heroCaptionIn {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes sectionItemIn {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutPrimaryIn {
  from {
    opacity: 0;
    transform: translate3d(-10px, 5px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutQuoteIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutHeadingIn {
  from {
    opacity: 0;
    transform: translate3d(-9px, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes aboutContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes dialogImageIn {
  from {
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(.996);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes dialogInfoIn {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes dialogCloseIn {
  from {
    opacity: 0;
    transform: scale(.9) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation-duration: 860ms;
  }
  .hero-figure {
    animation-duration: 1100ms;
    animation-delay: 620ms;
  }
  .about-section .about-grid > *,
  .about-section .about-note,
  .about-section .about-story-heading,
  .about-section .about-journey-image,
  .about-section .about-journey-copy,
  .about-section .about-experience-body,
  .about-section .about-approach-image,
  .about-section .about-approach-copy,
  .about-section .about-categories,
  .about-section .about-work-footer,
  .about-section .about-now-copy,
  .about-section .about-final-image,
  .about-section .about-final-copy {
    animation-duration: 720ms;
  }
  .about-section .about-category:hover {
    transform: none;
  }
  .about-section .about-image:hover img {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-copy > *,
  .hero-figure,
  .hero-caption,
  .work-section .section-heading > *,
  .work-section .gallery-tools > *,
  .work-section .gallery-foot > *,
  .contact-section .contact-inner > *,
  .site-footer:not(.editorial-footer) > *,
  .about-section .about-grid > *,
  .about-section .about-note,
  .about-section .about-story-heading,
  .about-section .about-journey-image,
  .about-section .about-journey-copy,
  .about-section .about-experience-body,
  .about-section .about-approach-image,
  .about-section .about-approach-copy,
  .about-section .about-categories,
  .about-section .about-work-footer,
  .about-section .about-now-copy,
  .about-section .about-final-image,
  .about-section .about-final-copy,
  .contact-popover:not([hidden]),
  .photo-dialog[open] .photo-dialog-art,
  .photo-dialog[open] .photo-dialog-info,
  .photo-dialog[open] .photo-dialog-close {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   PEAK POLISH — DIALOG SEAM + RENDERING OPTIMIZATION
   ================================================================ */
.photo-dialog {
  isolation: isolate;
  contain: layout paint style;
  will-change: auto;
}
.photo-dialog-layout {
  overflow: clip;
  gap: 0;
  border: 0;
}
.photo-dialog-art,
.photo-dialog-info {
  min-width: 0;
  border: 0;
}
.photo-dialog-info {
  position: relative;
  z-index: 1;
  box-shadow: -1px 0 0 var(--paper);
  will-change: auto;
}
.photo-dialog.is-hero .photo-dialog-info {
  box-shadow: -1px 0 0 var(--hero-detail-surface);
}
.photo-dialog[open] {
  will-change: auto;
}
.photo-dialog[open] .photo-dialog-art,
.photo-dialog[open] .photo-dialog-info {
  will-change: opacity, transform;
}
.photo-dialog-art img {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.work-art,
.hero-art,
.about-image,
.portrait-frame {
  contain: layout paint;
}
.work-art img,
.hero-photo,
.about-image img,
.portrait-frame img {
  backface-visibility: hidden;
}
@media (max-width: 850px) {
  .photo-dialog-layout {
    overflow: visible;
  }
  .photo-dialog-info,
  .photo-dialog.is-hero .photo-dialog-info {
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-dialog,
  .photo-dialog[open] .photo-dialog-art,
  .photo-dialog[open] .photo-dialog-info,
  .work-art,
  .hero-art,
  .about-image,
  .portrait-frame,
  .photo-dialog-art img,
  .work-art img,
  .hero-photo,
  .about-image img,
  .portrait-frame img {
    will-change: auto;
    transform: none;
  }
}

/* FINAL BRAND MARK LOCK — functional, visually static */
.wordmark,
.wordmark-signature,
.wordmark-note {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover {
  transform: none !important;
  opacity: inherit;
}
/* FINAL CINEMATIC HERO TIMING */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation-name: heroTextMinimal !important;
    animation-duration: 1050ms !important;
    animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
  }
  .hero-copy > :nth-child(1) { animation-delay: 80ms !important; }
  .hero-copy > :nth-child(2) { animation-delay: 190ms !important; }
  .hero-copy > :nth-child(3) { animation-delay: 310ms !important; }
  .hero-copy > :nth-child(4) { animation-delay: 430ms !important; }
  .hero-copy > :nth-child(5) { animation-delay: 540ms !important; }
  .hero-figure {
    animation: heroImageMinimal 1300ms cubic-bezier(.16,1,.3,1) 820ms both !important;
  }
  .hero-caption {
    animation: heroCaptionMinimal 900ms cubic-bezier(.22,1,.36,1) 1180ms both !important;
  }
}
@keyframes heroTextMinimal {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroImageMinimal {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(1.004); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroCaptionMinimal {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Keep the hero photograph present in layout while making its entrance quieter. */
.hero-figure,
.hero-photo-open,
.hero-photo {
  will-change: auto;
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation-duration: 850ms !important; }
  .hero-figure { animation-duration: 1050ms !important; animation-delay: 620ms !important; }
  .hero-caption { animation-delay: 930ms !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .wordmark-signature,
  .wordmark-note {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* FINAL EDITORIAL REVEAL SYSTEM — quieter, cinematic, scroll-led */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition: opacity 1100ms cubic-bezier(.22,1,.36,1), transform 1100ms cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .has-reveal .reveal-on-scroll:is(h1,h2,h3,h4,.gallery-note,.about-lead,.about-approach-statement) {
    transform: translate3d(-7px, 3px, 0);
  }
  .has-reveal .reveal-on-scroll:is(p,.about-label,.caption-kicker,.eyebrow) {
    transform: translate3d(0, 8px, 0);
  }
  .has-reveal .reveal-on-scroll:is(blockquote,.about-aside,.about-note) {
    transform: translate3d(0, 10px, 0);
  }
  .has-reveal .reveal-on-scroll.reveal-left {
    transform: translate3d(-9px, 0, 0);
  }
  .has-reveal .reveal-on-scroll.reveal-soft-up {
    transform: translate3d(0, 10px, 0);
  }
  .has-reveal .reveal-on-scroll.is-visible,
  .has-reveal .reveal-on-scroll:is(h1,h2,h3,h4,.gallery-note,.about-lead,.about-approach-statement).is-visible,
  .has-reveal .reveal-on-scroll:is(p,.about-label,.caption-kicker,.eyebrow).is-visible,
  .has-reveal .reveal-on-scroll:is(blockquote,.about-aside,.about-note).is-visible,
  .has-reveal .reveal-on-scroll.reveal-left.is-visible,
  .has-reveal .reveal-on-scroll.reveal-soft-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  /* Hero photograph waits for the viewer to actually reach it. */
  .hero-figure {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    animation: heroImageMinimal 1200ms cubic-bezier(.16,1,.3,1) both;
    animation-delay: 820ms;
  }
  @supports (animation-timeline: view()) {
    .hero-figure {
      animation-name: heroImageScroll;
      animation-duration: 1ms;
      animation-delay: 0s;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 16% cover 34%;
    }
  }
  .hero-caption {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  @supports (animation-timeline: view()) {
    .hero-caption {
      animation: heroCaptionScroll 1ms linear both;
      animation-timeline: view();
      animation-range: entry 28% cover 42%;
    }
  }
}
@keyframes heroImageScroll {
  from { opacity: 0; transform: translate3d(0, 9px, 0) scale(1.004); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroCaptionScroll {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Brand signature is a static identity mark: clickable, but never animated or transformed. */
.wordmark,
.wordmark-signature,
.wordmark-note,
.copyright-signature {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover,
.site-footer:hover .copyright-signature {
  animation: none !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-figure,
  .hero-caption {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .wordmark,
  .wordmark-signature,
  .wordmark-note,
  .copyright-signature {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ========================================================================
   FINAL HERO SCROLL REVEAL — VIEWPORT-INDEPENDENT / RESPONSIVE
   The hero photograph is intentionally absent on first paint and enters
   only when the user physically scrolls toward it. No page-load delay.
   ======================================================================== */

/* Cancel every previous page-load hero animation. */
.hero-figure,
.hero-caption {
  animation: none !important;
  animation-delay: 0s !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* Initial state: text remains visible, photograph waits for scroll. */
  .hero-figure {
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) scale(1.004) !important;
    will-change: opacity, transform;
  }

  .hero-caption {
    opacity: 0 !important;
    transform: translate3d(0, 8px, 0) !important;
    will-change: opacity, transform;
  }

  /*
     View-timeline is tied to the element entering the viewport, not to
     elapsed time after page load. This keeps the behavior consistent on
     phones, tablets, laptops and large displays regardless of viewport
     height or initial page-load speed.
  */
  @supports (animation-timeline: view()) {
    .hero-figure {
      animation: heroFigureScrollReveal 1ms linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% cover 32% !important;
    }

    .hero-caption {
      animation: heroCaptionScrollReveal 1ms linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 14% cover 42% !important;
    }
  }
}

@keyframes heroFigureScrollReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(1.004);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes heroCaptionScrollReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* The photograph itself keeps its existing subtle hover behavior only on
   pointer devices; touch devices get no artificial hover state. */
@media (hover: none), (pointer: coarse) {
  .hero-photo-open:hover .hero-photo {
    transform: none !important;
  }
}

/* Static brand identity — clickable/functional, never animated. */
.wordmark,
.wordmark-signature,
.wordmark-note,
.copyright-signature,
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover,
.site-footer:hover .copyright-signature {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* Accessibility: users requesting reduced motion see the hero immediately. */
@media (prefers-reduced-motion: reduce) {
  .hero-figure,
  .hero-caption {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: auto !important;
    animation-range: normal !important;
    will-change: auto !important;
  }
}

/* ========================================================================
   RESPONSIVE HERO RHYTHM — same choreography, tuned spatially
   ======================================================================== */
@media (max-width: 1100px) {
  .hero-figure {
    max-width: min(860px, 100%);
  }
}

@media (max-width: 700px) {
  .hero-figure {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-figure {
    transform-origin: center center;
  }
}

@media (max-width: 360px) {
  .hero-figure {
    transform-origin: center center;
  }
}/* ========================================================================
   FINAL HERO + BRAND SYSTEM
   ------------------------------------------------------------------------
   Hero text is present on first paint.
   Hero photograph is hidden until the visitor physically scrolls.
   JavaScript only toggles .is-scroll-revealed; CSS owns the animation.
   No animation-timeline dependency.
   ======================================================================== */

.hero-figure,
.hero-caption {
  animation: none !important;
  animation-delay: 0s !important;
  animation-timeline: none !important;
  animation-range: normal !important;
}

.hero-figure {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 16px, 0) scale(1.008) !important;
  transition:
    opacity 1200ms cubic-bezier(.16, 1, .3, 1),
    transform 1400ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 1200ms !important;
  will-change: opacity, transform;
}

.hero-figure.is-scroll-revealed {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition-delay: 0s !important;
}

.hero-caption {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 7px, 0) !important;
  transition:
    opacity 900ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 900ms !important;
  transition-delay: 110ms !important;
}

.hero-figure.is-scroll-revealed .hero-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 110ms !important;
}

@media (hover: hover) and (pointer: fine) {
  .hero-figure.is-scroll-revealed .hero-photo {
    transition: transform 1200ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  .hero-figure.is-scroll-revealed .hero-photo-open:hover .hero-photo {
    transform: scale(1.012) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-photo-open:hover .hero-photo {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure,
  .hero-figure.is-scroll-revealed,
  .hero-caption,
  .hero-figure.is-scroll-revealed .hero-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
    animation-range: normal !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Static brand identity: clickable/functional, but never animated. */
.wordmark,
.wordmark-signature,
.wordmark-note,
.copyright-signature,
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover,
.site-footer:hover .copyright-signature {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* Responsive hero spacing remains proportional across devices. */
@media (max-width: 1100px) {
  .hero {
    gap: clamp(88px, 10vw, 120px);
  }

  .hero-figure {
    max-width: min(860px, 100%);
  }
}

@media (max-width: 700px) {
  .hero {
    gap: 52px;
  }

  .hero-figure {
    max-width: 100%;
  }

  .hero-caption {
    padding-top: 13px;
  }
}

@media (max-width: 480px) {
  .hero {
    gap: 46px;
  }

  .hero-figure {
    transform-origin: center center;
  }
}

@media (max-width: 360px) {
  .hero {
    gap: 42px;
  }

  .hero-figure {
    transform-origin: center center;
  }
}
/* ==========================================================================
   FINAL CINEMATIC MOTION PASS
   --------------------------------------------------------------------------
   - Hero copy is visible on first paint.
   - Hero photograph enters only after real user scroll.
   - Motion is deliberately slow, soft and editorial.
   - No brand/wordmark animation.
   - No animation-timeline dependency.
   - Reduced-motion users receive a completely static presentation.
   ========================================================================== */

:root {
  --cinematic-ease: cubic-bezier(.22, 1, .36, 1);
  --cinematic-ease-soft: cubic-bezier(.19, 1, .22, 1);
  --cinematic-reveal: 1240ms;
  --cinematic-hero: 1650ms;
  --cinematic-caption: 1120ms;
}

/* Keep normal scroll reveals smooth without making the page feel sluggish. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 11px, 0);
    transition:
      opacity var(--cinematic-reveal) var(--cinematic-ease),
      transform var(--cinematic-reveal) var(--cinematic-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: auto;
  }

  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ) {
    transform: translate3d(-8px, 3px, 0);
  }

  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ) {
    transform: translate3d(0, 9px, 0);
  }

  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ) {
    transform: translate3d(0, 11px, 0);
  }

  .has-reveal .reveal-on-scroll.reveal-left {
    transform: translate3d(-10px, 0, 0);
  }

  .has-reveal .reveal-on-scroll.reveal-soft-up {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .reveal-on-scroll.is-visible,
  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ).is-visible,
  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ).is-visible,
  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ).is-visible,
  .has-reveal .reveal-on-scroll.reveal-left.is-visible,
  .has-reveal .reveal-on-scroll.reveal-soft-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   HERO: scroll-led reveal
   -------------------------------------------------------------------------- */

.hero-figure,
.hero-caption {
  animation: none !important;
  animation-delay: 0s !important;
  animation-timeline: none !important;
  animation-range: normal !important;
}

.hero-figure {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 18px, 0) scale(1.009) !important;
  transform-origin: center center;
  transition:
    opacity var(--cinematic-hero) var(--cinematic-ease-soft),
    transform var(--cinematic-hero) var(--cinematic-ease-soft),
    visibility 0s linear var(--cinematic-hero) !important;
  will-change: auto;
}

.hero-figure.is-scroll-revealed {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition-delay: 0s !important;
}

.hero-caption {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity var(--cinematic-caption) var(--cinematic-ease),
    transform var(--cinematic-caption) var(--cinematic-ease),
    visibility 0s linear var(--cinematic-caption) !important;
  transition-delay: 120ms !important;
  will-change: auto;
}

.hero-figure.is-scroll-revealed .hero-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 150ms !important;
}

/* Restrained image interaction: barely perceptible, never "zoom-y". */
@media (hover: hover) and (pointer: fine) {
  .hero-figure.is-scroll-revealed .hero-photo {
    transition:
      transform 1500ms var(--cinematic-ease-soft) !important;
  }

  .hero-figure.is-scroll-revealed .hero-photo-open:hover .hero-photo {
    transform: scale(1.01) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-photo-open:hover .hero-photo {
    transform: none !important;
  }
}

/* Static identity: clickable and functional, never animated. */
.wordmark,
.wordmark-signature,
.wordmark-note,
.copyright-signature,
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover,
.site-footer:hover .copyright-signature {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   Responsive tuning — preserve the same choreography at every width.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero {
    gap: clamp(88px, 10vw, 120px);
  }

  .hero-figure {
    max-width: min(860px, 100%);
  }
}

@media (max-width: 700px) {
  .hero {
    gap: 52px;
  }

  .hero-figure {
    max-width: 100%;
  }

  .hero-caption {
    padding-top: 13px;
  }
}

@media (max-width: 480px) {
  .hero {
    gap: 46px;
  }

  .hero-figure {
    transform-origin: center center;
  }
}

@media (max-width: 360px) {
  .hero {
    gap: 42px;
  }
}

/* Reduced motion: no entrance choreography, no hover zoom, no delayed state. */
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal-on-scroll,
  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ),
  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ),
  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ),
  .has-reveal .reveal-on-scroll.reveal-left,
  .has-reveal .reveal-on-scroll.reveal-soft-up,
  .has-reveal .reveal-on-scroll.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
    animation-range: normal !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-figure,
  .hero-figure.is-scroll-revealed,
  .hero-caption,
  .hero-figure.is-scroll-revealed .hero-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
    animation-range: normal !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-figure .hero-photo,
  .hero-figure.is-scroll-revealed .hero-photo,
  .hero-figure.is-scroll-revealed .hero-photo-open:hover .hero-photo {
    transform: none !important;
    transition: none !important;
  }
}
/* ==========================================================================
   FINAL SLOW CINEMATIC PASS
   --------------------------------------------------------------------------
   Minimal editorial motion: slow, quiet, deliberate.
   The page should feel photographed, not animated.
   ========================================================================== */

:root {
  --cinematic-ease: cubic-bezier(.19, 1, .22, 1);
  --cinematic-ease-soft: cubic-bezier(.16, 1, .3, 1);
  --cinematic-reveal: 1800ms;
  --cinematic-hero: 2400ms;
  --cinematic-caption: 1700ms;
  --cinematic-hover: 2200ms;
}

@media (prefers-reduced-motion: no-preference) {
  .has-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 13px, 0);
    transition:
      opacity var(--cinematic-reveal) var(--cinematic-ease),
      transform var(--cinematic-reveal) var(--cinematic-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: auto;
  }

  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ) {
    transform: translate3d(-7px, 4px, 0);
  }

  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ) {
    transform: translate3d(0, 11px, 0);
  }

  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ) {
    transform: translate3d(0, 13px, 0);
  }

  .has-reveal .reveal-on-scroll.reveal-left {
    transform: translate3d(-9px, 0, 0);
  }

  .has-reveal .reveal-on-scroll.reveal-soft-up {
    transform: translate3d(0, 14px, 0);
  }

  .has-reveal .reveal-on-scroll.is-visible,
  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ).is-visible,
  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ).is-visible,
  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ).is-visible,
  .has-reveal .reveal-on-scroll.reveal-left.is-visible,
  .has-reveal .reveal-on-scroll.reveal-soft-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
}

/* HERO — the signature cinematic moment */
.hero-figure,
.hero-caption {
  animation: none !important;
  animation-delay: 0s !important;
  animation-timeline: none !important;
  animation-range: normal !important;
}

.hero-figure {
  opacity: 0 !important;
  visibility: hidden !important;
  transform:
    translate3d(0, 24px, 0)
    scale(1.015) !important;
  transform-origin: center center;
  transition:
    opacity var(--cinematic-hero) var(--cinematic-ease-soft),
    transform var(--cinematic-hero) var(--cinematic-ease-soft),
    visibility 0s linear var(--cinematic-hero) !important;
  will-change: auto;
}

.hero-figure.is-scroll-revealed {
  opacity: 1 !important;
  visibility: visible !important;
  transform:
    translate3d(0, 0, 0)
    scale(1) !important;
  transition-delay: 0s !important;
}

.hero-caption {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 9px, 0) !important;
  transition:
    opacity var(--cinematic-caption) var(--cinematic-ease),
    transform var(--cinematic-caption) var(--cinematic-ease),
    visibility 0s linear var(--cinematic-caption) !important;
  transition-delay: 300ms !important;
  will-change: auto;
}

.hero-figure.is-scroll-revealed .hero-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 300ms !important;
}

/* Almost invisible hover movement — calm, photographic, never gimmicky. */
@media (hover: hover) and (pointer: fine) {
  .hero-figure.is-scroll-revealed .hero-photo {
    transition:
      transform var(--cinematic-hover) var(--cinematic-ease-soft) !important;
  }

  .hero-figure.is-scroll-revealed .hero-photo-open:hover .hero-photo {
    transform: scale(1.008) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-photo-open:hover .hero-photo {
    transform: none !important;
  }
}

/* Brand identity is intentionally static. */
.wordmark,
.wordmark-signature,
.wordmark-note,
.copyright-signature,
.wordmark:hover,
.wordmark:focus,
.wordmark:focus-visible,
.wordmark-signature:hover,
.wordmark-note:hover,
.site-footer:hover .copyright-signature {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* Preserve the same cinematic rhythm on smaller screens. */
@media (max-width: 1100px) {
  .hero {
    gap: clamp(88px, 10vw, 120px);
  }

  .hero-figure {
    max-width: min(860px, 100%);
  }
}

@media (max-width: 700px) {
  .hero {
    gap: 52px;
  }

  .hero-figure {
    max-width: 100%;
  }

  .hero-caption {
    padding-top: 13px;
  }
}

@media (max-width: 480px) {
  .hero {
    gap: 46px;
  }
}

@media (max-width: 360px) {
  .hero {
    gap: 42px;
  }
}

/* Accessibility: motion disappears completely when requested. */
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal-on-scroll,
  .has-reveal .reveal-on-scroll:is(
    h1, h2, h3, h4,
    .gallery-note,
    .about-lead,
    .about-approach-statement
  ),
  .has-reveal .reveal-on-scroll:is(
    p, .about-label, .caption-kicker, .eyebrow
  ),
  .has-reveal .reveal-on-scroll:is(
    blockquote, .about-aside, .about-note
  ),
  .has-reveal .reveal-on-scroll.reveal-left,
  .has-reveal .reveal-on-scroll.reveal-soft-up,
  .has-reveal .reveal-on-scroll.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
    animation-range: normal !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-figure,
  .hero-figure.is-scroll-revealed,
  .hero-caption,
  .hero-figure.is-scroll-revealed .hero-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
    animation-range: normal !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-figure .hero-photo,
  .hero-figure.is-scroll-revealed .hero-photo,
  .hero-figure.is-scroll-revealed .hero-photo-open:hover .hero-photo {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   FINAL ABOUT + EDITORIAL MOTION ENHANCEMENT
   --------------------------------------------------------------------------
   CSS-only enhancement for the existing HTML/JS state system.
   JS already supplies:
     .has-reveal
     .is-visible
     .is-scroll-revealed
     .is-image-loaded
     .is-image-error

   Design goal:
     MORE MOTION, but still minimal, editorial and photographic.
     No bounce. No aggressive zoom. No animation-timeline dependency.
   ========================================================================== */

:root {
  --motion-about: 1050ms;
  --motion-about-slow: 1280ms;
  --motion-about-fast: 720ms;
  --motion-about-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-about-soft: cubic-bezier(.19, 1, .22, 1);
  --motion-about-stagger: 90ms;
}

/* --------------------------------------------------------------------------
   ABOUT: the section itself enters as a composed editorial sequence.
   The outer reveal state comes from the existing IntersectionObserver.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* Top three-column composition */
  .has-reveal .about-heading,
  .has-reveal .about-profile {
    opacity: 0;
    transition:
      opacity var(--motion-about) var(--motion-about-ease);
  }

  .has-reveal .about-heading.is-visible,
  .has-reveal .about-profile.is-visible {
    opacity: 1;
  }

  /* Left editorial heading */
  .has-reveal .about-heading .about-label {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity 700ms var(--motion-about-ease),
      transform 820ms var(--motion-about-ease);
    transition-delay: 60ms;
  }

  .has-reveal .about-heading.is-visible .about-label {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-heading :is(h1, h2) {
    opacity: 0;
    transform: translate3d(-18px, 16px, 0);
    transition:
      opacity 1100ms var(--motion-about-soft),
      transform 1250ms var(--motion-about-soft);
    transition-delay: 150ms;
    will-change: opacity, transform;
  }

  .has-reveal .about-heading.is-visible :is(h1, h2) {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .has-reveal .about-heading .about-aside {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
      opacity 850ms var(--motion-about-ease),
      transform 900ms var(--motion-about-ease);
    transition-delay: 360ms;
  }

  .has-reveal .about-heading.is-visible .about-aside {
    opacity: 1;
    transform: none;
  }

  /* Portrait: frame first, caption second */
  .has-reveal .about-profile .about-portrait,
  .has-reveal .about-profile .about-bio {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity var(--motion-about-slow) var(--motion-about-soft),
      transform var(--motion-about-slow) var(--motion-about-soft);
    will-change: opacity, transform;
  }

  .has-reveal .about-profile.is-visible .about-portrait {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }

  .has-reveal .about-profile.is-visible .about-bio {
    opacity: 1;
    transform: none;
    transition-delay: 250ms;
  }

  .has-reveal .about-portrait .portrait-frame {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.988);
    transition:
      opacity 1100ms var(--motion-about-soft),
      transform 1350ms var(--motion-about-soft),
      box-shadow 900ms var(--motion-about-soft);
    transition-delay: 170ms;
    contain: paint;
    isolation: isolate;
    will-change: opacity, transform;
  }

  .has-reveal .about-profile.is-visible .portrait-frame {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
  }

  .has-reveal .about-portrait figcaption {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 700ms var(--motion-about-ease),
      transform 760ms var(--motion-about-ease);
    transition-delay: 460ms;
  }

  .has-reveal .about-profile.is-visible .about-portrait figcaption {
    opacity: 1;
    transform: none;
  }

  /* Image itself: very restrained photographic settle */
  .has-reveal .about-portrait .portrait-frame img {
    opacity: .001;
    transform: scale(1.018);
    transition:
      opacity 1000ms var(--motion-about-soft),
      transform 1500ms var(--motion-about-soft);
    will-change: opacity, transform;
  }

  .has-reveal .about-profile.is-visible .about-portrait .portrait-frame img {
    opacity: 1;
    transform: scale(1);
    transition-delay: 220ms;
    will-change: auto;
  }

  /* Right-side bio */
  .has-reveal .about-bio .about-lead {
    opacity: 0;
    transform: translate3d(10px, 14px, 0);
    transition:
      opacity 1050ms var(--motion-about-soft),
      transform 1100ms var(--motion-about-soft);
    transition-delay: 320ms;
  }

  .has-reveal .about-profile.is-visible .about-bio .about-lead {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-bio .about-copy p {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity 780ms var(--motion-about-ease),
      transform 820ms var(--motion-about-ease);
  }

  .has-reveal .about-profile.is-visible .about-bio .about-copy p:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 500ms;
  }

  .has-reveal .about-profile.is-visible .about-bio .about-copy p:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 610ms;
  }

  .has-reveal .about-profile.is-visible .about-bio .about-copy p:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 720ms;
  }

  /* Facts: quiet line + staggered values */
  .has-reveal .about-profile .about-facts {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 850ms var(--motion-about-ease),
      transform 900ms var(--motion-about-ease);
  }

  .has-reveal .about-profile.is-visible .about-facts {
    opacity: 1;
    transform: none;
    transition-delay: 780ms;
  }

  .has-reveal .about-facts div {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 620ms var(--motion-about-ease),
      transform 700ms var(--motion-about-ease);
  }

  .has-reveal .about-profile.is-visible .about-facts div:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 830ms;
  }

  .has-reveal .about-profile.is-visible .about-facts div:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 900ms;
  }

  .has-reveal .about-profile.is-visible .about-facts div:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 970ms;
  }

  /* ------------------------------------------------------------------------
     Quote / story / later About blocks
     ------------------------------------------------------------------------ */

  .has-reveal .about-note,
  .has-reveal .about-story,
  .has-reveal .about-final {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 1100ms var(--motion-about-soft),
      transform 1150ms var(--motion-about-soft);
  }

  .has-reveal .about-note.is-visible,
  .has-reveal .about-story.is-visible,
  .has-reveal .about-final.is-visible {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-note blockquote {
    opacity: 0;
    transform: translate3d(-12px, 9px, 0);
    transition:
      opacity 1000ms var(--motion-about-soft),
      transform 1100ms var(--motion-about-soft);
    transition-delay: 130ms;
  }

  .has-reveal .about-note.is-visible blockquote {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-note p {
    opacity: 0;
    transform: translate3d(8px, 6px, 0);
    transition:
      opacity 720ms var(--motion-about-ease),
      transform 760ms var(--motion-about-ease);
    transition-delay: 330ms;
  }

  .has-reveal .about-note.is-visible p {
    opacity: 1;
    transform: none;
  }

  /* Story heading */
  .has-reveal .about-story-heading > * {
    opacity: 0;
    transform: translate3d(0, 13px, 0);
    transition:
      opacity 900ms var(--motion-about-soft),
      transform 1000ms var(--motion-about-soft);
  }

  .has-reveal .about-story.is-visible .about-story-heading > :first-child {
    opacity: 1;
    transform: none;
    transition-delay: 100ms;
  }

  .has-reveal .about-story.is-visible .about-story-heading > :nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 190ms;
  }

  /* Journey / experience / approach / now */
  .has-reveal .about-story.is-visible .about-journey > *,
  .has-reveal .about-story.is-visible .about-experience-heading > *,
  .has-reveal .about-story.is-visible .about-experience-body > *,
  .has-reveal .about-story.is-visible .about-approach-heading > *,
  .has-reveal .about-story.is-visible .about-approach-copy > *,
  .has-reveal .about-story.is-visible .about-work-heading > *,
  .has-reveal .about-story.is-visible .about-category,
  .has-reveal .about-story.is-visible .about-work-footer,
  .has-reveal .about-story.is-visible .about-now > * {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
      opacity 850ms var(--motion-about-ease),
      transform 900ms var(--motion-about-ease);
  }

  .has-reveal .about-story.is-visible .about-journey > *,
  .has-reveal .about-story.is-visible .about-experience-heading > *,
  .has-reveal .about-story.is-visible .about-experience-body > *,
  .has-reveal .about-story.is-visible .about-approach-heading > *,
  .has-reveal .about-story.is-visible .about-approach-copy > *,
  .has-reveal .about-story.is-visible .about-work-heading > *,
  .has-reveal .about-story.is-visible .about-category,
  .has-reveal .about-story.is-visible .about-work-footer,
  .has-reveal .about-story.is-visible .about-now > * {
    animation: none;
  }

  .has-reveal .about-story.is-visible .about-journey > *,
  .has-reveal .about-story.is-visible .about-experience-heading > *,
  .has-reveal .about-story.is-visible .about-experience-body > *,
  .has-reveal .about-story.is-visible .about-approach-heading > *,
  .has-reveal .about-story.is-visible .about-approach-copy > *,
  .has-reveal .about-story.is-visible .about-work-heading > *,
  .has-reveal .about-story.is-visible .about-category,
  .has-reveal .about-story.is-visible .about-work-footer,
  .has-reveal .about-story.is-visible .about-now > * {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-story.is-visible .about-journey > :nth-child(2),
  .has-reveal .about-story.is-visible .about-experience-body > :nth-child(2),
  .has-reveal .about-story.is-visible .about-approach-copy > :nth-child(2) {
    transition-delay: 150ms;
  }

  .has-reveal .about-story.is-visible .about-category:nth-child(2) {
    transition-delay: 100ms;
  }

  .has-reveal .about-story.is-visible .about-category:nth-child(3) {
    transition-delay: 200ms;
  }

  /* Final About block */
  .has-reveal .about-final > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 1050ms var(--motion-about-soft),
      transform 1100ms var(--motion-about-soft);
  }

  .has-reveal .about-final.is-visible > :first-child {
    opacity: 1;
    transform: none;
    transition-delay: 100ms;
  }

  .has-reveal .about-final.is-visible > :nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 230ms;
  }

  /* Image blocks throughout About: reveal the frame before the image settles. */
  .has-reveal .about-image {
    contain: paint;
    isolation: isolate;
  }

  .has-reveal .about-image img,
  .has-reveal .about-final-image img,
  .has-reveal .about-approach-image img,
  .has-reveal .about-experience-images img {
    opacity: .001;
    transform: scale(1.014);
    transition:
      opacity 950ms var(--motion-about-soft),
      transform 1350ms var(--motion-about-soft);
    will-change: opacity, transform;
  }

  .has-reveal .about-story.is-visible .about-image img,
  .has-reveal .about-story.is-visible .about-final-image img,
  .has-reveal .about-story.is-visible .about-approach-image img,
  .has-reveal .about-story.is-visible .about-experience-images img,
  .has-reveal .about-final.is-visible .about-final-image img {
    opacity: 1;
    transform: scale(1);
    transition-delay: 180ms;
    will-change: auto;
  }

  /* Thin rules can participate in the loading sequence without becoming
     visually loud. */
  .has-reveal .about-story,
  .has-reveal .about-final {
    position: relative;
  }

  .has-reveal .about-story::before,
  .has-reveal .about-final::before {
    opacity: .001;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
      opacity 700ms var(--motion-about-ease),
      transform 1000ms var(--motion-about-soft);
  }

  .has-reveal .about-story.is-visible::before,
  .has-reveal .about-final.is-visible::before {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Keep all motion GPU-friendly only while transitioning. */
  .has-reveal .about-heading,
  .has-reveal .about-profile,
  .has-reveal .about-note,
  .has-reveal .about-story,
  .has-reveal .about-final {
    backface-visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   SELECTED WORK: more visual loading without changing the JS.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .has-reveal .work-card {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 1050ms var(--motion-about-soft),
      transform 1150ms var(--motion-about-soft);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .has-reveal .work-card.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .has-reveal .work-card .work-art {
    overflow: hidden;
    contain: paint;
    isolation: isolate;
  }

  .has-reveal .work-card .work-art img {
    opacity: .001;
    transform: scale(1.025);
    transition:
      opacity 1050ms var(--motion-about-soft),
      transform 1500ms var(--motion-about-soft);
  }

  .has-reveal .work-card.is-visible .work-art img {
    opacity: 1;
    transform: scale(1);
    transition-delay: 100ms;
  }

  .has-reveal .work-card .work-caption {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 720ms var(--motion-about-ease),
      transform 780ms var(--motion-about-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 360ms);
  }

  .has-reveal .work-card.is-visible .work-caption {
    opacity: 1;
    transform: none;
  }

  .has-reveal .work-card .caption-kicker {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition:
      opacity 620ms var(--motion-about-ease),
      transform 680ms var(--motion-about-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 420ms);
  }

  .has-reveal .work-card .work-caption h3 {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity 760ms var(--motion-about-soft),
      transform 820ms var(--motion-about-soft);
    transition-delay: calc(var(--reveal-delay, 0ms) + 500ms);
  }

  .has-reveal .work-card.is-visible .caption-kicker,
  .has-reveal .work-card.is-visible .work-caption h3 {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   IMAGE LOADING: preserve layout, fade pixels in instead of flashing.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .work-card .work-art,
  .about-image,
  .portrait-frame,
  .hero-art {
    contain: paint;
  }

  .work-card.is-image-loaded .work-art img,
  .work-card.is-image-error .work-art img {
    opacity: 1;
  }

  .has-reveal .work-card:not(.is-image-loaded):not(.is-image-error) .work-art img {
    opacity: .001;
  }

  .has-reveal .work-card.is-image-loaded .work-art img {
    transition:
      opacity 900ms var(--motion-about-soft),
      transform 1400ms var(--motion-about-soft);
  }

  .work-card.is-image-error .work-art img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   SMALL SCREEN: same choreography, shorter distances and fewer expensive
   visual effects. The motion remains noticeable but never busy.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .has-reveal .about-heading :is(h1, h2) {
    transform: translate3d(-10px, 12px, 0);
  }

  .has-reveal .about-profile .about-portrait,
  .has-reveal .about-profile .about-bio {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .about-portrait .portrait-frame {
    transform: translate3d(0, 12px, 0) scale(.992);
  }

  .has-reveal .about-portrait .portrait-frame img {
    transform: scale(1.012);
  }

  .has-reveal .work-card {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .about-story,
  .has-reveal .about-final,
  .has-reveal .about-note {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .about-image img,
  .has-reveal .about-final-image img,
  .has-reveal .about-approach-image img,
  .has-reveal .about-experience-images img {
    transform: scale(1.01);
  }

  .has-reveal .about-facts div {
    transform: translate3d(0, 5px, 0);
  }

  .has-reveal .work-card .work-art img {
    transform: scale(1.016);
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION: no hidden content and no delayed presentation.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .about-section .about-heading,
  .about-section .about-profile,
  .about-section .about-note,
  .about-section .about-story,
  .about-section .about-final,
  .about-section .about-heading *,
  .about-section .about-profile *,
  .about-section .about-note *,
  .about-section .about-story *,
  .about-section .about-final *,
  .has-reveal .work-card,
  .has-reveal .work-card *,
  .has-reveal .about-image img,
  .has-reveal .portrait-frame img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
/* ==========================================================================
   ABOUT DESKTOP REVEAL FIX
   --------------------------------------------------------------------------
   The desktop About layout intentionally uses:
       .about-profile { display: contents; }

   Because display: contents has no physical box, IntersectionObserver cannot
   reliably give that wrapper its own visible intersection state. The previous
   animation rules therefore left the portrait + bio at opacity: 0 on desktop.

   Keep the layout exactly as-is and use the already-visible About heading as
   the trigger for the two visual columns. No JS or HTML change required.
   ========================================================================== */

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {

  /* The wrapper itself is layout-only on desktop. */
  .has-reveal .about-profile {
    opacity: 1;
  }

  /* Portrait column */
  .has-reveal .about-heading.is-visible ~ .about-profile .about-portrait {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .portrait-frame {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 170ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-portrait figcaption {
    opacity: 1;
    transform: none;
    transition-delay: 460ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-portrait .portrait-frame img {
    opacity: 1;
    transform: scale(1);
    transition-delay: 220ms;
    will-change: auto;
  }

  /* Right-side biography */
  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio {
    opacity: 1;
    transform: none;
    transition-delay: 250ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-lead {
    opacity: 1;
    transform: none;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 500ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 610ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 720ms;
  }

  /* Facts row */
  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts {
    opacity: 1;
    transform: none;
    transition-delay: 780ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 830ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 900ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 970ms;
  }
}

/* On tablet/mobile .about-profile becomes a real grid, so its original
   IntersectionObserver-based reveal remains valid. */

@media (prefers-reduced-motion: reduce) {
  .about-profile,
  .about-profile *,
  .about-portrait,
  .about-bio,
  .portrait-frame,
  .portrait-frame img,
  .about-portrait figcaption,
  .about-facts,
  .about-facts div {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
/* ==========================================================================
   FINAL CINEMATIC MOTION SYSTEM
   --------------------------------------------------------------------------
   Final pass:
   - one consistent editorial easing family
   - smoother, slightly slower reveals
   - no layout-triggering animation properties
   - limited will-change usage
   - softer hover movement
   - stable About desktop choreography
   - mobile-friendly motion
   - reduced-motion remains fully respected

   This block intentionally comes last so it safely overrides older iterative
   motion rules without changing the site's layout or HTML/JS.
   ========================================================================== */

:root {
  --motion-micro: 180ms;
  --motion-hover: 460ms;
  --motion-ui: 360ms;
  --motion-panel: 560ms;
  --motion-dialog: 620ms;
  --motion-reveal: 1040ms;
  --motion-image: 900ms;
  --motion-hero: 1380ms;
  --motion-section: 1040ms;
  --motion-stagger: 90ms;

  --ease-cinematic: cubic-bezier(.19, 1, .22, 1);
  --ease-editorial: cubic-bezier(.16, 1, .3, 1);
  --ease-quiet: cubic-bezier(.22, 1, .36, 1);
  --ease-press: cubic-bezier(.2, .8, .2, 1);
}

/* Keep rendering focused on cheap compositor-friendly properties. */
.has-reveal .reveal-on-scroll {
  transition:
    opacity var(--motion-reveal) var(--ease-cinematic),
    transform var(--motion-reveal) var(--ease-cinematic) !important;
  will-change: auto;
}

.has-reveal .reveal-on-scroll.is-visible {
  will-change: auto;
}

/* Gentle, consistent reveal distances. */
.has-reveal .reveal-on-scroll {
  transform: translate3d(0, 18px, 0);
}

.has-reveal .reveal-on-scroll:is(h1, h2, h3, h4, .gallery-note, .about-lead, .about-approach-statement) {
  transform: translate3d(-14px, 7px, 0);
}

.has-reveal .reveal-on-scroll:is(p, .about-label, .caption-kicker, .eyebrow) {
  transform: translate3d(0, 16px, 0);
}

.has-reveal .reveal-on-scroll:is(blockquote, .about-aside, .about-note) {
  transform: translate3d(0, 20px, 0);
}

.has-reveal .reveal-on-scroll.reveal-left {
  transform: translate3d(-18px, 0, 0);
}

.has-reveal .reveal-on-scroll.reveal-soft-up {
  transform: translate3d(0, 20px, 0);
}

/* --------------------------------------------------------------------------
   ABOUT — DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {

  .has-reveal .about-profile .about-portrait,
  .has-reveal .about-profile .about-bio {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    animation: none !important;
    transition:
      opacity 980ms var(--ease-cinematic),
      transform 1100ms var(--ease-cinematic);
    will-change: auto;
  }

  .has-reveal .about-profile .portrait-frame {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.992);
    transition:
      opacity 1050ms var(--ease-cinematic),
      transform 1250ms var(--ease-cinematic);
    will-change: auto;
  }

  .has-reveal .about-profile .portrait-frame img {
    transform: scale(1.012);
    transition:
      transform 1300ms var(--ease-quiet);
    will-change: auto;
  }

  .has-reveal .about-profile .about-portrait figcaption {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 760ms var(--ease-quiet),
      transform 760ms var(--ease-quiet);
  }

  .has-reveal .about-profile .about-bio .about-lead,
  .has-reveal .about-profile .about-bio .about-copy p,
  .has-reveal .about-profile .about-facts {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    animation: none !important;
    transition:
      opacity 820ms var(--ease-cinematic),
      transform 900ms var(--ease-cinematic);
  }

  .has-reveal .about-profile .about-facts div {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    animation: none !important;
    transition:
      opacity 700ms var(--ease-quiet),
      transform 760ms var(--ease-quiet);
  }

  /* The already-observed About heading becomes the single trigger. */
  .has-reveal .about-heading.is-visible ~ .about-profile .about-portrait,
  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .portrait-frame {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 110ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .portrait-frame img {
    transform: scale(1);
    transition-delay: 180ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-portrait figcaption {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 390ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio {
    transition-delay: 150ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-lead {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 220ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 410ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 530ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-bio .about-copy p:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 650ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 720ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 790ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 860ms;
  }

  .has-reveal .about-heading.is-visible ~ .about-profile .about-facts div:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 930ms;
  }
}

/* --------------------------------------------------------------------------
   HERO / IMAGE MOTION
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .hero-photo-open,
  .work-art,
  .about-image,
  .portrait-frame {
    overflow: hidden;
  }

  .hero-photo {
    transition:
      transform 1200ms var(--ease-cinematic),
      opacity var(--motion-hover) var(--ease-quiet) !important;
  }

  .hero-photo-open:hover .hero-photo {
    transform: scale(1.01);
  }

  .work-art img,
  .about-image img,
  .portrait-frame img {
    transition:
      transform 1000ms var(--ease-cinematic) !important;
  }

  .work-card:hover .work-art img {
    transform: scale(1.014);
  }

  .about-image:hover img,
  .portrait-frame:hover img {
    transform: scale(1.01);
  }

  .work-card,
  .work-art,
  .about-image,
  .portrait-frame {
    transition:
      transform var(--motion-hover) var(--ease-quiet),
      box-shadow var(--motion-hover) var(--ease-quiet);
  }

  .work-card:hover {
    transform: translate3d(0, -1px, 0);
  }
}

/* --------------------------------------------------------------------------
   UI / NAV / CONTROLS
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .wordmark,
  .primary-navigation a,
  .theme-toggle,
  .text-link,
  .contact-link,
  .gallery-view-link,
  .about-gallery-link,
  .contact-actions a,
  .filter-button,
  .contact-float-button,
  .photo-dialog-close {
    transition:
      color var(--motion-hover) var(--ease-quiet),
      background-color var(--motion-hover) var(--ease-quiet),
      border-color var(--motion-hover) var(--ease-quiet),
      transform var(--motion-hover) var(--ease-quiet),
      box-shadow var(--motion-hover) var(--ease-quiet);
  }

  .primary-navigation a::after,
  .filter-button::after {
    transition:
      transform var(--motion-hover) var(--ease-quiet);
  }

  .primary-navigation a:hover,
  .wordmark:hover,
  .filter-button:hover {
    transform: translate3d(0, -1px, 0);
  }



  .hero-actions .text-link:hover {
    transform: translate3d(0, -1px, 0);
  }

  .contact-float-button:hover {
    transform: translate3d(0, -2px, 0) scale(1.01);
    box-shadow: 0 10px 28px rgba(23, 25, 22, .11);
  }

  .photo-dialog-close:hover {
    transform: rotate(3deg);
  }
}

/* --------------------------------------------------------------------------
   LIGHTBOX — SOFT, STABLE, NO JUMP
   -------------------------------------------------------------------------- */

.photo-dialog-art,
.photo-dialog-info {
  will-change: auto;
  transition:
    opacity 620ms var(--ease-cinematic),
    transform 620ms var(--ease-cinematic) !important;
}

.photo-dialog-art {
  transform: translate3d(0, 8px, 0);
}

.photo-dialog-info {
  transform: translate3d(0, 10px, 0);
}

.photo-dialog.is-open .photo-dialog-art,
.photo-dialog.is-open .photo-dialog-info {
  transform: translate3d(0, 0, 0);
}

.photo-dialog.is-open .photo-dialog-info {
  transition-delay: 90ms !important;
}

.photo-dialog-art img {
  transition:
    opacity 420ms var(--ease-quiet),
    transform 900ms var(--ease-cinematic) !important;
}

/* --------------------------------------------------------------------------
   MOBILE — LESS DISTANCE, SAME FEEL
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .has-reveal .reveal-on-scroll {
    will-change: auto;
  }

  .has-reveal .reveal-on-scroll {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .reveal-on-scroll:is(h1, h2, h3, h4, .gallery-note, .about-lead, .about-approach-statement) {
    transform: translate3d(-9px, 4px, 0);
  }

  .has-reveal .reveal-on-scroll:is(p, .about-label, .caption-kicker, .eyebrow) {
    transform: translate3d(0, 10px, 0);
  }

  .has-reveal .reveal-on-scroll:is(blockquote, .about-aside, .about-note) {
    transform: translate3d(0, 13px, 0);
  }

  .hero-photo,
  .work-art img,
  .about-image img,
  .portrait-frame img {
    transition-duration: 720ms !important;
  }

  .work-card:active {
    transform: scale(.998);
  }
}

/* Never leave compositor hints attached to the whole page. */
.work-card,
.hero-photo,
.work-art img,
.about-image img,
.portrait-frame img,
.photo-dialog-art,
.photo-dialog-info {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .has-reveal .reveal-on-scroll,
  .has-reveal .reveal-on-scroll.reveal-left,
  .has-reveal .reveal-on-scroll.reveal-soft-up,
  .about-profile .about-portrait,
  .about-profile .about-bio,
  .about-profile .portrait-frame,
  .about-profile .portrait-frame img,
  .about-profile .about-portrait figcaption,
  .about-profile .about-bio .about-lead,
  .about-profile .about-bio .about-copy p,
  .about-profile .about-facts,
  .about-profile .about-facts div,
  .photo-dialog-art,
  .photo-dialog-info {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
/* ==========================================================================
   FINAL HERO CINEMATIC PASS — V2
   --------------------------------------------------------------------------
   Purpose:
   - slower, more deliberate editorial entrance
   - minimal movement, never theatrical
   - opacity + transform only for smooth compositor-friendly animation
   - stable timing between eyebrow → title → tagline → intro → CTA
   - preserves the scroll-triggered hero photograph behavior
   ========================================================================== */

:root {
  --hero-cine-duration: 1450ms;
  --hero-cine-ease: cubic-bezier(.19, 1, .22, 1);
}

/* --------------------------------------------------------------------------
   HERO TEXT — SLOW, QUIET, CINEMATIC
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .hero-copy > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation-name: heroCinematicIn;
    animation-duration: var(--hero-cine-duration);
    animation-timing-function: var(--hero-cine-ease);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    will-change: opacity, transform;
  }

  .hero-copy > :nth-child(1) {
    animation-delay: 120ms;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 240ms;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 370ms;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 520ms;
  }

  .hero-copy > :nth-child(5) {
    animation-delay: 680ms;
  }

  .hero-copy > :nth-child(n + 6) {
    animation-delay: 800ms;
  }

  .hero h1 {
    transform: translate3d(0, 18px, 0);
  }

  .hero-tagline {
    transform: translate3d(0, 15px, 0);
  }

  .hero-intro {
    transform: translate3d(0, 13px, 0);
  }

  .hero-actions {
    transform: translate3d(0, 11px, 0);
  }

  .hero-location {
    transform: translate3d(0, 9px, 0);
  }

  .hero-copy > * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  @keyframes heroCinematicIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }

    68% {
      opacity: .92;
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

/* --------------------------------------------------------------------------
   HERO PHOTO — NEVER FLASH BEFORE PHYSICAL SCROLL
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  html.has-reveal .hero-figure {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 16px, 0) scale(1.006) !important;
    animation: none !important;
    animation-delay: 0s !important;
    will-change: auto;
    transition:
      opacity 1500ms var(--hero-cine-ease),
      transform 1650ms var(--hero-cine-ease),
      visibility 0s linear 1500ms !important;
  }

  html.has-reveal .hero-figure.is-visible:not(.is-scroll-revealed) {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.has-reveal .hero-figure.is-scroll-revealed {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    animation: none !important;
    transition:
      opacity 1500ms var(--hero-cine-ease),
      transform 1650ms var(--hero-cine-ease) !important;
  }

  html.has-reveal .hero-caption {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 7px, 0) !important;
    animation: none !important;
    transition:
      opacity 950ms var(--hero-cine-ease),
      transform 950ms var(--hero-cine-ease),
      visibility 0s linear 950ms !important;
  }

  html.has-reveal
  .hero-figure.is-scroll-revealed
  .hero-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 190ms !important;
  }
}

/* --------------------------------------------------------------------------
   HERO PHOTO HOVER — MICRO MOVEMENT ONLY
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  html.has-reveal
  .hero-figure.is-scroll-revealed
  .hero-photo {
    transition:
      transform 1400ms var(--hero-cine-ease) !important;
  }

  html.has-reveal
  .hero-figure.is-scroll-revealed
  .hero-photo-open:hover
  .hero-photo {
    transform: scale(1.008) !important;
  }
}

/* --------------------------------------------------------------------------
   CTA — QUIET ARRIVAL, NOT A POP
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .hero-actions .text-link {
    transition:
      background-color 520ms var(--ease-quiet),
      border-color 520ms var(--ease-quiet),
      color 520ms var(--ease-quiet),
      transform 520ms var(--ease-quiet),
      box-shadow 520ms var(--ease-quiet) !important;
  }

  .hero-actions .text-link .arrow-icon {
    transition:
      transform 620ms var(--ease-quiet),
      color 520ms var(--ease-quiet) !important;
  }

  .hero-actions .text-link:hover {
    transform: translate3d(0, -1px, 0) !important;
  }

  .hero-actions .text-link:hover .arrow-icon {
    transform: translate3d(2px, -2px, 0) !important;
  }
}

/* --------------------------------------------------------------------------
   PERFORMANCE
   -------------------------------------------------------------------------- */

/* Do not keep compositor promotion active after the entrance animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero-copy > *,
  .hero-copy > :nth-child(n) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hero-figure,
  .hero-figure.is-visible,
  .hero-figure.is-scroll-revealed,
  .hero-caption,
  .hero-figure.is-scroll-revealed .hero-caption,
  .hero-photo {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
/* ==========================================================================
   SELECTED WORK — CINEMATIC SECTION REVEAL
   --------------------------------------------------------------------------
   Slow editorial entrance:
   section marker → title → italic title → lede
   → controls → divider → collection heading.

   Only opacity + transform are animated.
   No layout properties are animated.
   ========================================================================== */

:root {
  --work-cine-duration: 1250ms;
  --work-cine-ease: cubic-bezier(.19, 1, .22, 1);
  --work-cine-stagger: 90ms;
}

@media (prefers-reduced-motion: no-preference) {

  /* Section heading enters as one quiet composition. */
  .has-reveal .work-section .section-heading {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
      opacity var(--work-cine-duration) var(--work-cine-ease),
      transform var(--work-cine-duration) var(--work-cine-ease);
    will-change: opacity, transform;
  }

  .has-reveal .work-section .section-heading.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Internal elements receive a very restrained sequential drift. */
  .has-reveal .work-section .section-number,
  .has-reveal .work-section .section-heading-main > *,
  .has-reveal .work-section .section-lede {
    opacity: 0;
    transform: translate3d(0, 13px, 0);
    transition:
      opacity 1100ms var(--work-cine-ease),
      transform 1250ms var(--work-cine-ease);
    transition-delay: 0ms;
    will-change: opacity, transform;
  }

  .has-reveal .work-section .section-heading.is-visible .section-number {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 70ms;
  }

  .has-reveal .work-section .section-heading.is-visible .section-heading-main > :nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 170ms;
  }

  .has-reveal .work-section .section-heading.is-visible .section-heading-main > :nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 280ms;
  }

  .has-reveal .work-section .section-heading.is-visible .section-lede {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 410ms;
  }

  /* The filter row arrives after the title composition settles. */
  .has-reveal .gallery-tools {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 1200ms var(--work-cine-ease),
      transform 1350ms var(--work-cine-ease);
    will-change: opacity, transform;
  }

  .has-reveal .gallery-tools.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .has-reveal .gallery-note {
    opacity: 0;
    transform: translate3d(-12px, 5px, 0);
    transition:
      opacity 1100ms var(--work-cine-ease),
      transform 1200ms var(--work-cine-ease);
    transition-delay: 100ms;
  }

  .has-reveal .gallery-tools.is-visible .gallery-note {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .has-reveal .gallery-filter-groups {
    opacity: 0;
    transform: translate3d(10px, 4px, 0);
    transition:
      opacity 1050ms var(--work-cine-ease),
      transform 1150ms var(--work-cine-ease);
    transition-delay: 180ms;
  }

  .has-reveal .gallery-tools.is-visible .gallery-filter-groups {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Controls breathe into place instead of popping. */
  .has-reveal .gallery-filter-groups .filter-set {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 850ms var(--work-cine-ease),
      transform 900ms var(--work-cine-ease);
  }

  .has-reveal .gallery-tools.is-visible .filter-set:first-child {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 300ms;
  }

  .has-reveal .gallery-tools.is-visible .filter-set:last-child {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 390ms;
  }

  /* Divider grows subtly from the left, without changing layout. */
  .has-reveal .gallery-tools::after {
    opacity: 0;
    transform: scaleX(.92);
    transform-origin: left center;
    transition:
      opacity 900ms var(--work-cine-ease),
      transform 1100ms var(--work-cine-ease);
  }

  .has-reveal .gallery-tools.is-visible::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Collection heading: slow, premium editorial arrival. */
  .has-reveal .gallery-collection-heading {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 1250ms var(--work-cine-ease),
      transform 1350ms var(--work-cine-ease);
    will-change: opacity, transform;
  }

  .has-reveal .gallery-collection-heading.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .has-reveal .gallery-collection-heading > * {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity 900ms var(--work-cine-ease),
      transform 1000ms var(--work-cine-ease);
  }

  .has-reveal .gallery-collection-heading.is-visible > :nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 90ms;
  }

  .has-reveal .gallery-collection-heading.is-visible > :nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 180ms;
  }

  .has-reveal .gallery-collection-heading.is-visible > :nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 260ms;
  }

  /* Work images: gentle reveal + tiny scale settling. */
  .has-reveal .work-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity 1250ms var(--work-cine-ease),
      transform 1450ms var(--work-cine-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .has-reveal .work-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .has-reveal .work-art {
    overflow: hidden;
  }

  .has-reveal .work-card .work-art img {
    opacity: .001;
    transform: scale(1.018);
    transition:
      opacity 1150ms var(--work-cine-ease),
      transform 1550ms var(--work-cine-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 90ms);
  }

  .has-reveal .work-card.is-visible .work-art img {
    opacity: 1;
    transform: scale(1);
  }

  /* Caption follows the photograph instead of arriving simultaneously. */
  .has-reveal .work-card .work-caption {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity 900ms var(--work-cine-ease),
      transform 950ms var(--work-cine-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 260ms);
  }

  .has-reveal .work-card.is-visible .work-caption {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Keep repeated gallery elements compositor-friendly. */
  .has-reveal .gallery-tools,
  .has-reveal .gallery-collection-heading,
  .has-reveal .work-card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — SAME CINEMATIC CHARACTER, LESS DISTANCE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {

  .has-reveal .work-section .section-heading {
    transform: translate3d(0, 14px, 0);
  }

  .has-reveal .gallery-tools {
    transform: translate3d(0, 12px, 0);
  }

  .has-reveal .gallery-collection-heading {
    transform: translate3d(0, 14px, 0);
  }

  .has-reveal .work-card {
    transform: translate3d(0, 18px, 0);
  }

  .has-reveal .work-card .work-art img {
    transform: scale(1.012);
  }

  .has-reveal .work-card.is-visible .work-art img {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .has-reveal .work-section .section-heading,
  .has-reveal .work-section .section-number,
  .has-reveal .work-section .section-heading-main > *,
  .has-reveal .work-section .section-lede,
  .has-reveal .gallery-tools,
  .has-reveal .gallery-note,
  .has-reveal .gallery-filter-groups,
  .has-reveal .gallery-filter-groups .filter-set,
  .has-reveal .gallery-collection-heading,
  .has-reveal .gallery-collection-heading > *,
  .has-reveal .work-card,
  .has-reveal .work-card .work-art img,
  .has-reveal .work-card .work-caption {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}
/* ==========================================================================
   FINAL DARK MODE PALETTE
   --------------------------------------------------------------------------
   Deeper blacks, softer off-white text, restrained warm accent.
   No pure black/pure white extremes and no blue cast.
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] {
    color-scheme: dark;
  }
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .contact-section {
  background: var(--bg);
}

html[data-theme="dark"] .work-section,
html[data-theme="dark"] .about-section {
  background: var(--surface);
}

html[data-theme="dark"] .gallery-tools,
html[data-theme="dark"] .about-note {
  border-color: var(--line);
}

html[data-theme="dark"] .gallery-tools::after,
html[data-theme="dark"] .about-note::after,
html[data-theme="dark"] .about-facts {
  border-color: var(--line);
}

html[data-theme="dark"] .filter-button,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-number,
html[data-theme="dark"] .gallery-note,
html[data-theme="dark"] .about-label,
html[data-theme="dark"] .contact-bottom,
html[data-theme="dark"] .site-footer {
  color: var(--text-soft);
}

html[data-theme="dark"] .filter-button.is-active,
html[data-theme="dark"] .text-link:hover,
html[data-theme="dark"] .contact-link:hover {
  color: var(--text-strong);
}

html[data-theme="dark"] .filter-button.is-active::after {
  background: var(--accent);
}

html[data-theme="dark"] .hero-tagline em,
html[data-theme="dark"] .about-heading em,
html[data-theme="dark"] .section-heading em,
html[data-theme="dark"] .contact-content em {
  color: var(--accent);
}

html[data-theme="dark"] .text-link,
html[data-theme="dark"] .contact-link {
  color: var(--text);
}

html[data-theme="dark"] .text-link .arrow-icon,
html[data-theme="dark"] .contact-link svg {
  color: var(--accent);
  stroke: currentColor;
}

html[data-theme="dark"] .hero-actions .text-link {
  border-color: var(--line-strong);
}

html[data-theme="dark"] .hero-actions .text-link:hover {
  background: var(--surface-2);
  border-color: var(--accent-soft);
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .menu-toggle {
  color: var(--text-soft);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .menu-toggle:hover {
  color: var(--text-strong);
}

html[data-theme="dark"] .photo-dialog,
html[data-theme="dark"] .contact-popover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: 0 28px 80px var(--shadow);
}

html[data-theme="dark"] .photo-dialog-info,
html[data-theme="dark"] .photo-meta-grid > div,
html[data-theme="dark"] .contact-popover-actions {
  border-color: var(--line);
}

html[data-theme="dark"] .photo-dialog-close,
html[data-theme="dark"] .contact-popover-close {
  color: var(--text-soft);
}

html[data-theme="dark"] .photo-dialog-close:hover,
html[data-theme="dark"] .contact-popover-close:hover {
  color: var(--text-strong);
}

html[data-theme="dark"] ::selection {
  background: #c0a47b;
  color: #0b0c0b;
}
/* ==========================================================================
   DARK MODE — BUTTON CONTRAST FIX
   --------------------------------------------------------------------------
   Keeps interactive controls readable against the darker palette.
   Hero / Email = light editorial button with dark text.
   Instagram = dark editorial button with warm light text.
   ========================================================================== */

html[data-theme="dark"] .hero-actions .text-link,
html[data-theme="dark"] .contact-actions .contact-email-link {
  background: #eeeae1;
  border-color: #eeeae1;
  color: #151615;
  box-shadow: none;
}

html[data-theme="dark"] .hero-actions .text-link .arrow-icon,
html[data-theme="dark"] .contact-actions .contact-email-link svg {
  color: #b89468;
  stroke: currentColor;
}

html[data-theme="dark"] .hero-actions .text-link:hover,
html[data-theme="dark"] .contact-actions .contact-email-link:hover {
  background: #f4f1e9;
  border-color: #f4f1e9;
  color: #111210;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .hero-actions .text-link:hover .arrow-icon {
  color: #a98258;
}

html[data-theme="dark"] .contact-instagram-link {
  background: #151715;
  border-color: #4a4b44;
  color: #eeeae1;
}

html[data-theme="dark"] .contact-instagram-link svg {
  color: #c09a73;
  stroke: currentColor;
}

html[data-theme="dark"] .contact-instagram-link:hover {
  background: #1d1f1c;
  border-color: #b89468;
  color: #f2eee6;
}

html[data-theme="dark"] .contact-instagram-link:hover svg {
  color: #c8a477;
}

html[data-theme="dark"] .contact-popover-actions a {
  color: #eeeae1;
}

html[data-theme="dark"] .contact-popover-actions .contact-popover-email {
  background: #eeeae1;
  border-color: #eeeae1;
  color: #151615;
}

html[data-theme="dark"] .contact-popover-actions .contact-popover-email:hover {
  background: #f4f1e9;
  border-color: #f4f1e9;
  color: #111210;
}

html[data-theme="dark"] .contact-popover-actions a:hover:not(.contact-popover-email) {
  background: #eeeae1;
  border-color: #eeeae1;
  color: #151615;
}
/* ==========================================================================
   FINAL DARK MOBILE NAV + BUTTON PALETTE
   --------------------------------------------------------------------------
   Mobile navigation uses the same deep editorial black as the dark theme.
   No grey/green cast. Controls retain clear contrast and warm accent.
   ========================================================================== */

@media (max-width: 800px) {

  html[data-theme="dark"] .site-header {
    background: #090a09;
    border-color: #1f211f;
  }

  html[data-theme="dark"] .header-inner {
    background: transparent;
  }

  html[data-theme="dark"] .header-controls {
    color: #e9e6de;
  }

  html[data-theme="dark"] .menu-toggle {
    color: #e9e6de;
    background: #151715;
    border-color: #3a3c37;
  }

  html[data-theme="dark"] .menu-toggle:focus-visible {
    color: #f2efe7;
    background: #1b1d1b;
    border-color: #b89468;
  }

  @media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .menu-toggle:hover {
      color: #f2efe7;
      background: #1b1d1b;
      border-color: #b89468;
    }
  }

  /*
     The mobile navigation panel itself.
     Keep it visibly darker than the page surface while retaining enough
     separation from the header.
  */
  html[data-theme="dark"] .primary-navigation {
    background: #0d0f0e;
    border-color: #242724;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .24);
  }

  html[data-theme="dark"] .primary-navigation a {
    color: #dedbd3;
    border-color: #2b2e2a;
    background: transparent;
  }

  html[data-theme="dark"] .primary-navigation a[aria-current="page"] {
    color: var(--accent);
    background: transparent;
  }

  html[data-theme="dark"] .primary-navigation a:focus-visible {
    color: #f2efe7;
    background: transparent;
  }

  html[data-theme="dark"] .primary-navigation a:hover:not([aria-current="page"]) {
    color: #dedbd3;
    background: transparent;
    border-color: #2b2e2a;
  }

  html[data-theme="dark"] .primary-navigation a:active {
    color: #b89468;
    background: transparent;
  }

  html[data-theme="dark"] .primary-navigation a::after {
    background: #b89468;
  }

  /*
     Open-menu overlay, where supported by the existing CSS.
     Keep it near-black rather than the lighter section surface.
  */
  html[data-theme="dark"] .primary-navigation::before {
    background: transparent;
  }

  /* Mobile menu dividers stay subtle and warm-neutral. */
  html[data-theme="dark"] .primary-navigation a + a {
    border-top-color: #2a2d29;
  }

  /* ----------------------------------------------------------------------
     MOBILE BUTTONS
     ---------------------------------------------------------------------- */

  html[data-theme="dark"] .hero-actions .text-link,
  html[data-theme="dark"] .contact-actions .contact-email-link {
    background: #eeeae1;
    border-color: #eeeae1;
    color: #151615;
  }

  html[data-theme="dark"] .hero-actions .text-link .arrow-icon,
  html[data-theme="dark"] .contact-actions .contact-email-link svg {
    color: #b89468;
    stroke: currentColor;
  }

  html[data-theme="dark"] .contact-actions .contact-instagram-link {
    background: #111311;
    border-color: #454741;
    color: #eeeae1;
  }

  html[data-theme="dark"] .contact-actions .contact-instagram-link svg {
    color: #c09a73;
    stroke: currentColor;
  }

  html[data-theme="dark"] .hero-actions .text-link:hover,
  html[data-theme="dark"] .contact-actions .contact-email-link:hover {
    background: #f4f1e9;
    border-color: #f4f1e9;
    color: #111210;
  }

  html[data-theme="dark"] .contact-actions .contact-instagram-link:hover {
    background: #1a1c1a;
    border-color: #b89468;
    color: #f2efe7;
  }
}

/* --------------------------------------------------------------------------
   VERY SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

  html[data-theme="dark"] .primary-navigation {
    background: #0d0f0e;
  }

  html[data-theme="dark"] .primary-navigation a {
    color: #d8d5cd;
  }

  html[data-theme="dark"] .menu-toggle {
    background: #121411;
    border-color: #353832;
  }
}

/* --------------------------------------------------------------------------
   DARK MODE FORM/CONTROL FALLBACK
   -------------------------------------------------------------------------- */

html[data-theme="dark"] button,
html[data-theme="dark"] a {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   FINAL DARK-MODE CTA + EMAIL BUTTON INTERACTION FIX
   --------------------------------------------------------------------------
   Restores the original dark-mode interaction behavior:
   - CTA text changes on hover/focus
   - CTA background changes on hover/focus
   - CTA arrow follows the text/accent treatment
   - Email button gets the same interaction treatment
   - Touch devices remain stable
   ========================================================================== */

html[data-theme="dark"] .hero-actions .text-link,
html[data-theme="dark"] .contact-actions .contact-email-link {
  background: #eeeae1;
  color: #151615;
  border-color: #eeeae1;
  transition:
    background-color 420ms cubic-bezier(.22, 1, .36, 1),
    color 420ms cubic-bezier(.22, 1, .36, 1),
    border-color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="dark"] .hero-actions .text-link .arrow-icon,
html[data-theme="dark"] .contact-actions .contact-email-link svg {
  color: #b89468;
  stroke: currentColor;
  transition:
    color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .hero-actions .text-link:hover,
  html[data-theme="dark"] .hero-actions .text-link:focus-visible,
  html[data-theme="dark"] .contact-actions .contact-email-link:hover,
  html[data-theme="dark"] .contact-actions .contact-email-link:focus-visible {
    background: #b89468;
    color: #111210;
    border-color: #b89468;
    transform: translateY(-2px);
  }

  html[data-theme="dark"] .hero-actions .text-link:hover .arrow-icon,
  html[data-theme="dark"] .hero-actions .text-link:focus-visible .arrow-icon,
  html[data-theme="dark"] .contact-actions .contact-email-link:hover svg,
  html[data-theme="dark"] .contact-actions .contact-email-link:focus-visible svg {
    color: #111210;
    transform: translate3d(2px, 2px, 0);
  }

  html[data-theme="dark"] .hero-actions .text-link:active,
  html[data-theme="dark"] .contact-actions .contact-email-link:active {
    transform: translateY(0);
    background: #a9845c;
    border-color: #a9845c;
    color: #111210;
  }
}

@media (hover: none), (pointer: coarse) {
  html[data-theme="dark"] .hero-actions .text-link:active,
  html[data-theme="dark"] .contact-actions .contact-email-link:active {
    background: #b89468;
    border-color: #b89468;
    color: #111210;
  }

  html[data-theme="dark"] .hero-actions .text-link:active .arrow-icon,
  html[data-theme="dark"] .contact-actions .contact-email-link:active svg {
    color: #111210;
  }
}

/* Keep the Instagram button consistent with the same dark-mode system. */
html[data-theme="dark"] .contact-actions .contact-instagram-link {
  background: #111311;
  color: #eeeae1;
  border-color: #454741;
  transition:
    background-color 420ms cubic-bezier(.22, 1, .36, 1),
    color 420ms cubic-bezier(.22, 1, .36, 1),
    border-color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="dark"] .contact-actions .contact-instagram-link svg {
  color: #c09a73;
  stroke: currentColor;
  transition:
    color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .contact-actions .contact-instagram-link:hover,
  html[data-theme="dark"] .contact-actions .contact-instagram-link:focus-visible {
    background: #b89468;
    border-color: #b89468;
    color: #111210;
    transform: translateY(-2px);
  }

  html[data-theme="dark"] .contact-actions .contact-instagram-link:hover svg,
  html[data-theme="dark"] .contact-actions .contact-instagram-link:focus-visible svg {
    color: #111210;
  }

  html[data-theme="dark"] .contact-actions .contact-instagram-link:active {
    transform: translateY(0);
    background: #a9845c;
    border-color: #a9845c;
  }
}
/* ==========================================================================\n   FINAL STABILITY + ACCESSIBILITY OVERRIDES\n   --------------------------------------------------------------------------\n   This block is intentionally last so it is the single source of truth for\n   the final Contact anchor, dark-mode footer, responsive text contrast, and\n   motion safety.\n   ========================================================================== */

/* Contact navigation: the #contact anchor sits inside the section's 82px
   top padding. Compensate for that padding while keeping the global 96px
   sticky-header offset intact. */
#contact {
  scroll-margin-top: -82px;
}

#work {
  scroll-margin-top: 104px;
}

/* Keep the section itself stable when the browser resolves nearby anchors. */
.contact-section {
  scroll-margin-top: 0;
}

/* Keep the Home → Work action unmistakably button-like at every breakpoint. */
.hero-actions .hero-work-link {
  min-height: 58px;
  gap: 22px;
  padding-inline: 24px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.hero-actions .hero-work-link .arrow-icon {
  width: 19px;
  height: 19px;
}

.hero-actions .hero-work-link:hover,
.hero-actions .hero-work-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.hero-actions .hero-work-link:hover .arrow-icon,
.hero-actions .hero-work-link:focus-visible .arrow-icon {
  color: #fff;
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Footer — light theme
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-surface);
  color: var(--footer-ink);
}

.site-footer::after {
  background: var(--footer-surface);
}

.site-footer::before {
  background: var(--footer-rule);
}

.site-footer .footer-name,
.site-footer .footer-name a {
  color: var(--footer-ink);
}

.site-footer p,
.site-footer .footer-tagline,
.site-footer .footer-note {
  color: var(--footer-muted);
}

.site-footer .footer-links a,
.site-footer .copyright,
.site-footer .copyright a {
  color: var(--footer-muted);
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible,
.site-footer .copyright a:hover,
.site-footer .copyright a:focus-visible {
  color: var(--footer-ink);
}

.site-footer .footer-links .arrow-icon,
.site-footer .arrow-icon {
  color: var(--footer-accent);
}

.site-footer a:focus-visible {
  outline-color: var(--footer-accent);
}

/* --------------------------------------------------------------------------
   Footer — dark theme
   A genuinely darker panel than the rest of the dark page, with readable
   warm-white primary text and sufficiently bright secondary text.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --footer-surface: #0d0f0e;
  --footer-ink: #f1eee6;
  --footer-muted: #b7b5ac;
  --footer-rule: rgba(241, 238, 230, .18);
  --footer-accent: #c7a277;
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer::after {
  background: var(--footer-surface);
}

html[data-theme="dark"] .site-footer {
  color: var(--footer-ink);
  border-color: var(--footer-rule);
}

html[data-theme="dark"] .site-footer::before {
  background: var(--footer-rule);
}

html[data-theme="dark"] .site-footer .footer-name,
html[data-theme="dark"] .site-footer .footer-name a,
html[data-theme="dark"] .site-footer .footer-name strong {
  color: var(--footer-ink);
}

html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer .footer-tagline,
html[data-theme="dark"] .site-footer .footer-note {
  color: var(--footer-muted);
}

html[data-theme="dark"] .site-footer .footer-links a,
html[data-theme="dark"] .site-footer .copyright,
html[data-theme="dark"] .site-footer .copyright a {
  color: var(--footer-muted);
}

html[data-theme="dark"] .site-footer .footer-links a:hover,
html[data-theme="dark"] .site-footer .footer-links a:focus-visible,
html[data-theme="dark"] .site-footer .copyright a:hover,
html[data-theme="dark"] .site-footer .copyright a:focus-visible {
  color: var(--footer-ink);
}

html[data-theme="dark"] .site-footer .footer-links .arrow-icon,
html[data-theme="dark"] .site-footer .arrow-icon {
  color: var(--footer-accent);
}

html[data-theme="dark"] .site-footer .copyright-signature {
  opacity: .84;
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .site-footer a:focus-visible {
  outline-color: var(--footer-accent);
}

/* Do not let the broad dark-mode rule turn footer copy into low-contrast
   --text-soft. Footer has its own dedicated contrast system. */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer .footer-links a,
html[data-theme="dark"] .site-footer .copyright {
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Dark-mode footer responsive contrast
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  html[data-theme="dark"] .site-footer {
    padding-bottom: max(34px, env(safe-area-inset-bottom));
  }

  html[data-theme="dark"] .site-footer .footer-name {
    color: var(--footer-ink);
  }

  html[data-theme="dark"] .site-footer p,
  html[data-theme="dark"] .site-footer .footer-links a,
  html[data-theme="dark"] .site-footer .copyright {
    color: var(--footer-muted);
  }

  html[data-theme="dark"] .site-footer .footer-links a:hover,
  html[data-theme="dark"] .site-footer .footer-links a:focus-visible {
    color: var(--footer-ink);
  }
}

/* --------------------------------------------------------------------------
   Motion safety and rendering stability
   -------------------------------------------------------------------------- */
img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

button,
a,
input,
textarea,
select {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  #contact {
    scroll-margin-top: -82px;
  }

  .site-footer,
  .site-footer * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   GALLERY — FINAL CINEMATIC EDITORIAL ENTRANCE
   --------------------------------------------------------------------------
   Individual elements enter with the same restrained motion language as
   the main page, while the complete composition settles quickly.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  :root {
    --gallery-editorial-ease: cubic-bezier(.19, 1, .22, 1);
  }


  /* ========================================================================
     RESET PREVIOUS GALLERY ENTRANCE STATES
     ======================================================================== */

  .gallery-page .gallery-intro,
  .gallery-page .gallery-intro-copy,
  .gallery-page .gallery-intro-aside,
  .gallery-page .gallery-intro-note,
  .gallery-page .gallery-tools,
  .gallery-page .gallery-collection-heading {

    animation: none !important;
  }


  /* ========================================================================
     01 — EYEBROW
     ======================================================================== */

  .gallery-page .gallery-intro > .eyebrow {

    opacity: 0;

    transform:
      translate3d(0, 14px, 0);

    animation:
      gallery-editorial-in
      850ms
      var(--gallery-editorial-ease)
      40ms
      both !important;
  }


  /* ========================================================================
     02 — MAIN TITLE
     ======================================================================== */

  .gallery-page .gallery-intro-copy {

    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }


  .gallery-page .gallery-intro-copy h1 {

    opacity: 0;

    transform:
      translate3d(0, 20px, 0);

    animation:
      gallery-editorial-title
      1050ms
      var(--gallery-editorial-ease)
      90ms
      both !important;

    will-change: opacity, transform;
  }


  /* Second line / italic portion */

  .gallery-page .gallery-intro-copy h1 em {

    opacity: 0;

    transform:
      translate3d(0, 12px, 0);

    animation:
      gallery-editorial-accent
      900ms
      var(--gallery-editorial-ease)
      170ms
      both !important;
  }


  /* ========================================================================
     03 — RIGHT DESCRIPTION
     ======================================================================== */

  .gallery-page .gallery-intro-aside {

    opacity: 0;

    transform:
      translate3d(0, 14px, 0);

    animation:
      gallery-editorial-in
      900ms
      var(--gallery-editorial-ease)
      150ms
      both !important;

    will-change: opacity, transform;
  }


  /* ========================================================================
     04 — "MORE FRAMES TO COME"
     ======================================================================== */

  .gallery-page .gallery-intro-note {

    opacity: 0;

    transform:
      translate3d(0, 9px, 0);

    animation:
      gallery-editorial-in
      800ms
      var(--gallery-editorial-ease)
      230ms
      both !important;
  }


  /* ========================================================================
     05 — DIVIDER + BROWSE / FILTER / COUNT
     ======================================================================== */

  .gallery-page .gallery-tools {

    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }


  /* Browse Categories */

  .gallery-page .gallery-filter {

    opacity: 0;

    transform:
      translate3d(0, 11px, 0);

    animation:
      gallery-editorial-control
      800ms
      var(--gallery-editorial-ease)
      260ms
      both !important;
  }


  /* All Collections · All Tones */

  .gallery-page .gallery-filter-state {

    opacity: 0;

    transform:
      translate3d(0, 8px, 0);

    animation:
      gallery-editorial-control
      750ms
      var(--gallery-editorial-ease)
      300ms
      both !important;
  }


  /* 276 PHOTOGRAPHS */

  .gallery-page .gallery-photo-count {

    opacity: 0;

    transform:
      translate3d(0, 8px, 0);

    animation:
      gallery-editorial-control
      750ms
      var(--gallery-editorial-ease)
      340ms
      both !important;
  }


  /* ========================================================================
     06 — COLLECTION HEADING
     ======================================================================== */

  .gallery-page .gallery-collection-heading {

    opacity: 0;

    transform:
      translate3d(0, 12px, 0);

    animation:
      gallery-editorial-collection
      900ms
      var(--gallery-editorial-ease)
      400ms
      both !important;
  }


  /* Do not separately animate its children */

  .gallery-page .gallery-collection-heading > * {

    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }


  /* ========================================================================
     07 — PHOTOGRAPHS
     ======================================================================== */

  .gallery-page .gallery-grid .gallery-tile {

    opacity: 0;

    transform:
      translate3d(0, 16px, 0);

    animation:
      gallery-editorial-photo
      1050ms
      var(--gallery-editorial-ease)
      calc(
        500ms + var(--gallery-photo-delay, 0ms)
      )
      both !important;
  }


  .gallery-page .gallery-grid .gallery-tile:nth-child(4n + 1) {
    --gallery-photo-delay: 0ms;
  }

  .gallery-page .gallery-grid .gallery-tile:nth-child(4n + 2) {
    --gallery-photo-delay: 55ms;
  }

  .gallery-page .gallery-grid .gallery-tile:nth-child(4n + 3) {
    --gallery-photo-delay: 110ms;
  }

  .gallery-page .gallery-grid .gallery-tile:nth-child(4n + 4) {
    --gallery-photo-delay: 165ms;
  }


  /* ========================================================================
     KEYFRAMES
     ======================================================================== */

  @keyframes gallery-editorial-in {

    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


  @keyframes gallery-editorial-title {

    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


  @keyframes gallery-editorial-accent {

    from {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


  @keyframes gallery-editorial-control {

    from {
      opacity: 0;
      transform: translate3d(0, 11px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


  @keyframes gallery-editorial-collection {

    from {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


  @keyframes gallery-editorial-photo {

    from {
      opacity: 0;
      transform: translate3d(0, 16px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {

  .gallery-page .gallery-intro-copy h1 {
    transform: translate3d(0, 13px, 0);
  }

  .gallery-page .gallery-intro-aside {
    transform: translate3d(0, 9px, 0);
  }

  .gallery-page .gallery-filter {
    transform: translate3d(0, 8px, 0);
  }

  .gallery-page .gallery-grid .gallery-tile {
    transform: translate3d(0, 12px, 0);
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .gallery-page .gallery-intro > .eyebrow,
  .gallery-page .gallery-intro-copy,
  .gallery-page .gallery-intro-copy h1,
  .gallery-page .gallery-intro-copy h1 em,
  .gallery-page .gallery-intro-aside,
  .gallery-page .gallery-intro-note,
  .gallery-page .gallery-filter,
  .gallery-page .gallery-filter-state,
  .gallery-page .gallery-photo-count,
  .gallery-page .gallery-collection-heading,
  .gallery-page .gallery-grid .gallery-tile {

    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   BROWSE CATEGORIES — FINAL LIVE-SITE CINEMATIC INTERACTION
   --------------------------------------------------------------------------
   Restrained editorial motion.
   No layout changes.
   No new UI elements.
   No child-animation fighting.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  :root {
    --browse-cine: cubic-bezier(.19, 1, .22, 1);
    --browse-soft: cubic-bezier(.22, 1, .36, 1);
  }


  /* ========================================================================
     BROWSE BUTTON
     ======================================================================== */

  .gallery-page .gallery-filter > summary {

    transform: translate3d(0, 0, 0);
    transform-origin: center center;

    transition:
      background-color 480ms var(--browse-soft),
      color 480ms var(--browse-soft),
      border-color 480ms var(--browse-soft),
      transform 480ms var(--browse-cine) !important;

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
  }


  /* Quiet lift — deliberately tiny */

  .gallery-page .gallery-filter > summary:hover {

    transform:
      translate3d(0, -1px, 0) !important;
  }


  /* Press */

  .gallery-page .gallery-filter > summary:active {

    transform:
      translate3d(0, 0, 0)
      scale(.997) !important;

    transition-duration: 140ms !important;
  }


  /* ========================================================================
     CHEVRON
     ======================================================================== */

  .gallery-page .gallery-filter-chevron {

    transform:
      rotate(0deg)
      translate3d(0, 0, 0);

    transform-origin: center center;

    transition:
      color 360ms var(--browse-soft),
      transform 560ms var(--browse-cine) !important;

    will-change: transform;
    backface-visibility: hidden;
  }


  .gallery-page .gallery-filter[open] .gallery-filter-chevron {

    transform:
      rotate(180deg)
      translate3d(0, 0, 0);
  }


  /* ========================================================================
     MAIN DROPDOWN PANEL
     ======================================================================== */

  .gallery-page .gallery-filter-panel {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
      translate3d(0, -9px, 0)
      scale(.992);

    transform-origin: top left;

    transition:
      opacity 480ms var(--browse-cine),
      transform 620ms var(--browse-cine),
      visibility 0s linear 620ms !important;

    will-change: opacity, transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }


  /* OPEN */

  .gallery-page .gallery-filter-panel.is-open {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translate3d(0, 0, 0)
      scale(1);

    transition-delay: 0s !important;
  }


  /* ========================================================================
     PANEL CONTENT
     ------------------------------------------------------------------------
     The panel moves as one object.
     Its contents receive only a very small settling motion.
     ======================================================================== */

  .gallery-page .gallery-filter-panel > .gallery-filter-group {

    opacity: .94;

    transform:
      translate3d(0, 4px, 0);

    transition:
      opacity 380ms var(--browse-cine),
      transform 440ms var(--browse-cine) !important;

    will-change: opacity, transform;
  }


  .gallery-page .gallery-filter-panel.is-open
  > .gallery-filter-group {

    opacity: 1;

    transform:
      translate3d(0, 0, 0);

    transition-delay: 55ms !important;
  }


  /* ========================================================================
     REMOVE COMPETING ANIMATIONS
     ======================================================================== */

  .gallery-page .gallery-filter-panel *,
  .gallery-page .gallery-more-options * {

    animation: none !important;
  }


  /* ========================================================================
     CATEGORY BUTTONS
     ======================================================================== */

  .gallery-page .gallery-filter-option {

    transform:
      translate3d(0, 0, 0);

    transition:
      color 300ms var(--browse-soft),
      background-color 300ms var(--browse-soft),
      border-color 300ms var(--browse-soft),
      transform 300ms var(--browse-cine) !important;

    will-change: transform;
  }


  /* Subtle editorial hover */

  .gallery-page .gallery-filter-option:hover {

    transform:
      translate3d(0, -1px, 0) !important;
  }


  /* Active category stays stable */

  .gallery-page .gallery-filter-option.is-active {

    transform:
      translate3d(0, 0, 0) !important;
  }


  /* ========================================================================
     MORE COLLECTIONS
     ======================================================================== */

  .gallery-page .gallery-more-collections > summary {

    transform:
      translate3d(0, 0, 0);

    transition:
      color 300ms var(--browse-soft),
      background-color 300ms var(--browse-soft),
      border-color 300ms var(--browse-soft),
      transform 300ms var(--browse-cine) !important;
  }


  .gallery-page .gallery-more-collections > summary:hover {

    transform:
      translate3d(0, -1px, 0) !important;
  }


  /* ========================================================================
     MORE COLLECTIONS PANEL
     ======================================================================== */

  .gallery-page .gallery-more-options {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
      translate3d(0, -6px, 0)
      scale(.994);

    transform-origin: top left;

    transition:
      opacity 400ms var(--browse-cine),
      transform 500ms var(--browse-cine),
      visibility 0s linear 500ms !important;

    will-change: opacity, transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }


  .gallery-page .gallery-more-collections[open]
  .gallery-more-options {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translate3d(0, 0, 0)
      scale(1);

    transition-delay: 0s !important;
  }


  /* ========================================================================
     MORE COLLECTION OPTIONS
     ======================================================================== */

  .gallery-page .gallery-more-options
  .gallery-filter-option {

    transform:
      translate3d(0, 0, 0) !important;

    transition:
      color 280ms var(--browse-soft),
      background-color 280ms var(--browse-soft),
      border-color 280ms var(--browse-soft),
      transform 280ms var(--browse-cine) !important;
  }


  .gallery-page .gallery-more-options
  .gallery-filter-option:hover {

    transform:
      translate3d(0, -1px, 0) !important;
  }


  /* ========================================================================
     FOCUS
     ======================================================================== */

  .gallery-page .gallery-filter > summary:focus-visible,
  .gallery-page .gallery-more-collections > summary:focus-visible {

    outline-offset: 4px;
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {

  .gallery-page .gallery-filter > summary:hover {

    transform: none !important;
  }


  .gallery-page .gallery-filter-panel {

    transform:
      translate3d(0, -7px, 0)
      scale(.995);

    transition:
      opacity 430ms var(--browse-cine),
      transform 540ms var(--browse-cine),
      visibility 0s linear 540ms !important;
  }


  .gallery-page .gallery-filter-panel.is-open {

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }


  .gallery-page .gallery-filter-option:hover,
  .gallery-page .gallery-more-collections > summary:hover {

    transform: none !important;
  }


  .gallery-page .gallery-more-options {

    transform:
      translate3d(0, -5px, 0)
      scale(.997);

    transition:
      opacity 360ms var(--browse-cine),
      transform 460ms var(--browse-cine),
      visibility 0s linear 460ms !important;
  }


  .gallery-page .gallery-more-collections[open]
  .gallery-more-options {

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .gallery-page .gallery-filter > summary,
  .gallery-page .gallery-filter-chevron,
  .gallery-page .gallery-filter-panel,
  .gallery-page .gallery-filter-panel > .gallery-filter-group,
  .gallery-page .gallery-filter-option,
  .gallery-page .gallery-more-collections > summary,
  .gallery-page .gallery-more-options {

    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ==========================================================================
   GALLERY FILTER — FINAL CINEMATIC OVERLAY SYSTEM
   The menu floats above the page.
   Opening it NEVER moves the content underneath.
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE / DESKTOP
   -------------------------------------------------------------------------- */

.gallery-page .gallery-toolbar {
  position: relative;
  z-index: 5;
  overflow: visible;
}

.gallery-page .gallery-filter {
  position: relative;
  z-index: 100;
}


/*
   The panel is an overlay.
   It is deliberately NOT part of document flow.
*/

.gallery-page .gallery-filter-panel {
  position: absolute !important;
  z-index: 9999 !important;

  top: calc(100% + 9px);
  left: 0;

  width: min(600px, calc(100vw - 48px));

  margin: 0 !important;

  background: var(--paper);

  isolation: isolate;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate3d(0, -9px, 0)
    scale(.985);

  transform-origin: top left;

  box-shadow:
    0 22px 70px rgba(0, 0, 0, .24);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    opacity 520ms cubic-bezier(.19, 1, .22, 1),
    transform 620ms cubic-bezier(.19, 1, .22, 1),
    visibility 0s linear 620ms;

  will-change: opacity, transform;
}


/* --------------------------------------------------------------------------
   OPEN STATE
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter-panel.is-open {
  z-index: 9999 !important;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition-delay: 0s;
}


/* --------------------------------------------------------------------------
   IMPORTANT:
   REMOVE THE LONG TOOLBAR LINE WHILE THE OVERLAY IS OPEN.
   
   This does NOT change layout.
   It only prevents the underlying divider from visually crossing the menu.
   -------------------------------------------------------------------------- */

.gallery-page .gallery-toolbar:has(.gallery-filter[open]) {
  border-bottom-color: transparent;
}


/* --------------------------------------------------------------------------
   THE CONTENT BELOW STAYS COMPLETELY STATIONARY
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter-state,
.gallery-page .gallery-photo-count {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   CINEMATIC PANEL CONTENT
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter-panel > .gallery-filter-group {
  opacity: 0;
  transform: translate3d(0, 7px, 0);

  transition:
    opacity 430ms cubic-bezier(.19, 1, .22, 1),
    transform 520ms cubic-bezier(.19, 1, .22, 1);
}


.gallery-page .gallery-filter-panel.is-open
> .gallery-filter-group {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* Slight sequential rhythm */

.gallery-page .gallery-filter-panel.is-open
> .gallery-filter-group:nth-child(1) {
  transition-delay: 80ms;
}

.gallery-page .gallery-filter-panel.is-open
> .gallery-filter-group:nth-child(2) {
  transition-delay: 150ms;
}


/* --------------------------------------------------------------------------
   BROWSE BUTTON — SLOW, PREMIUM INTERACTION
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter > summary {
  transition:
    background-color 520ms cubic-bezier(.19, 1, .22, 1),
    border-color 520ms cubic-bezier(.19, 1, .22, 1),
    color 520ms cubic-bezier(.19, 1, .22, 1),
    transform 520ms cubic-bezier(.19, 1, .22, 1),
    box-shadow 520ms cubic-bezier(.19, 1, .22, 1);
}


/* Hover — extremely subtle */

@media (hover: hover) and (pointer: fine) {

  .gallery-page .gallery-filter > summary:hover {
    transform: translate3d(0, -1px, 0);

    box-shadow:
      0 10px 30px rgba(0, 0, 0, .12);
  }

}


/* Open — no jump */

.gallery-page .gallery-filter[open] > summary {
  transform: translate3d(0, 0, 0);
}


/* --------------------------------------------------------------------------
   CHEVRON — SLOW CINEMATIC ROTATION
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter-chevron {
  transition:
    transform 620ms cubic-bezier(.19, 1, .22, 1),
    color 420ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-page .gallery-filter[open]
.gallery-filter-chevron {
  transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   FILTER OPTIONS — QUIET INTERACTION
   -------------------------------------------------------------------------- */

.gallery-page .gallery-filter-option,
.gallery-page .gallery-more-collections > summary {
  transition:
    color 320ms cubic-bezier(.22, 1, .36, 1),
    background-color 320ms cubic-bezier(.22, 1, .36, 1),
    border-color 320ms cubic-bezier(.22, 1, .36, 1),
    transform 320ms cubic-bezier(.19, 1, .22, 1);
}


@media (hover: hover) and (pointer: fine) {

  .gallery-page .gallery-filter-option:hover,
  .gallery-page .gallery-more-collections > summary:hover {
    transform: translate3d(0, -1px, 0);
  }

}


/* --------------------------------------------------------------------------
   MORE COLLECTIONS SUBMENU
   -------------------------------------------------------------------------- */

.gallery-page .gallery-more-collections {
  position: relative;
  z-index: 20;
}

.gallery-page .gallery-more-options {
  position: absolute !important;
  z-index: 10000 !important;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

  .gallery-page .gallery-toolbar {
    position: relative;
    z-index: 5;
    overflow: visible;
  }

  .gallery-page .gallery-filter {
    position: relative;
    z-index: 100;
  }


  /*
     FULL-WIDTH OVERLAY.

     It floats above the photograph/status area.
     It does NOT push anything downward.
  */

  .gallery-page .gallery-filter-panel {
    position: absolute !important;
    z-index: 9999 !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    max-height: min(62vh, 460px);

    overflow-x: hidden;
    overflow-y: auto;

    transform:
      translate3d(0, -8px, 0)
      scale(.99);

    transform-origin: top center;

    box-shadow:
      0 22px 65px rgba(0, 0, 0, .28);

    transition:
      opacity 500ms cubic-bezier(.19, 1, .22, 1),
      transform 620ms cubic-bezier(.19, 1, .22, 1),
      visibility 0s linear 620ms;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  .gallery-page .gallery-filter-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translate3d(0, 0, 0)
      scale(1);

    transition-delay: 0s;
  }


  /*
     Hide the underlying toolbar divider while open.
     The page geometry remains unchanged.
  */

  .gallery-page .gallery-toolbar:has(.gallery-filter[open]) {
    border-bottom-color: transparent;
  }


  /*
     Keep the status/count underneath completely stationary.
  */

  .gallery-page .gallery-filter-state,
  .gallery-page .gallery-photo-count {
    position: relative;
    z-index: 1;
  }


  /* Mobile panel content */

  .gallery-page .gallery-filter-panel > .gallery-filter-group {
    opacity: 0;
    transform: translate3d(0, 5px, 0);

    transition:
      opacity 400ms cubic-bezier(.19, 1, .22, 1),
      transform 480ms cubic-bezier(.19, 1, .22, 1);
  }

  .gallery-page .gallery-filter-panel.is-open
  > .gallery-filter-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }


  .gallery-page .gallery-filter-panel.is-open
  > .gallery-filter-group:nth-child(1) {
    transition-delay: 70ms;
  }

  .gallery-page .gallery-filter-panel.is-open
  > .gallery-filter-group:nth-child(2) {
    transition-delay: 130ms;
  }


  /* No hover jump on touch devices */

  .gallery-page .gallery-filter-option:hover {
    transform: none;
  }

}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .gallery-page .gallery-filter > summary,
  .gallery-page .gallery-filter-chevron,
  .gallery-page .gallery-filter-panel,
  .gallery-page .gallery-filter-panel > .gallery-filter-group,
  .gallery-page .gallery-filter-option,
  .gallery-page .gallery-more-collections > summary,
  .gallery-page .gallery-more-options {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

}

/* One photo-viewer surface: fade a fixed blur layer rather than animating its
   blur radius every frame. Native dialog keeps focus and hit testing intact. */
body .photo-dialog {
  --motion-dialog: 620ms;
  overflow-x: hidden;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.994);
  transition: opacity var(--motion-dialog) var(--ease-dialog),
    transform var(--motion-dialog) var(--ease-dialog);
}
body .photo-dialog.is-open { opacity: 1; transform: none; }
body .photo-dialog::backdrop {
  background: rgba(10, 12, 10, .46);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--motion-dialog) var(--ease-dialog);
}
body .photo-dialog.is-open::backdrop { opacity: 1; }
/* Parent panel owns the entrance; avoid multiplying three separate fades. */
body .photo-dialog .photo-dialog-art,
body .photo-dialog .photo-dialog-info {
  opacity: 1; transform: none; transition: none;
}
.photo-dialog-art { touch-action: pan-y pinch-zoom; }
@media (max-width: 700px) {
  body .photo-dialog { --motion-dialog: 520ms; }
  body .photo-dialog::backdrop {
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body .photo-dialog { transform: none; transition: none; }
  body .photo-dialog::backdrop { transition: none; }
}

/* At tablet widths the navigation is still a horizontal header row. Keep the
   dark mobile-menu surface off that row so it blends into the header. */
@media (min-width: 701px) and (max-width: 800px) {
  html[data-theme="dark"] .primary-navigation {
    background: transparent;
    box-shadow: none;
  }
}

/* About shares the same dark canvas as Work and Gallery. */
html[data-theme="dark"] body.about-page .about-section { background: var(--bg); }