/* Hallmark pre-emit self-critique: P4 H4 E4 S5 R4 V4. Local proposal, no benchmark certification. */
/* Hallmark · macrostructure: Photographic · tone: cinematic editorial · anchor hue: vermilion · theme: warm charcoal · nav: N6 · footer: Ft1 */
/*
Theme Name: Dario Baldi
Version: 0.2.0
Description: A bilingual cinematic portfolio built around selected work.
Requires PHP: 8.1
Text Domain: dario-baldi
*/
@font-face { font-family: "Anton"; src: url("assets/fonts/anton-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("assets/fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scrollbar-color: var(--color-muted) var(--color-paper); }
body { isolation: isolate; background: var(--ambient-base); color: var(--color-ink); font: 400 var(--text-base)/1.65 var(--font-body); }
::selection { background: var(--color-accent); color: var(--color-paper); }
a { color: inherit; text-decoration-thickness: var(--rule-thin); text-underline-offset: 5px; }
a:hover { color: var(--color-accent); }
button, input, textarea { font: inherit; color: inherit; caret-color: var(--color-accent); }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-style: normal; font-weight: 400; line-height: 1.12; letter-spacing: -.025em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-lg); max-width: 70ch; }
[hidden] { display: none !important; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.skip { position: absolute; left: var(--space-lg); top: var(--space-lg); transform: translateY(-200%); padding: var(--space-sm) var(--space-md); background: var(--color-paper); z-index: var(--layer-skip); }
.skip:focus { transform: none; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-md); border-bottom: var(--rule-thin) solid var(--color-line); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: var(--space-xl); }
.nav-links { display: flex; align-items: center; gap: var(--space-xl); }
.nav-link > svg { display: none; }
.main-nav a, .language a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: var(--text-sm); text-decoration: none; }
.main-nav a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--color-accent); }
.language { display: flex; gap: var(--space-md); margin-left: var(--space-xl); }
.language a[aria-current=true] { text-decoration: underline; }
.menu-toggle { display: none; border: 0; background: var(--color-transparent); min-width: 44px; min-height: 44px; padding: var(--space-sm); }
.menu-toggle-mark { position: relative; width: 24px; height: 16px; }
.menu-toggle-mark::before, .menu-toggle-mark::after { content: ""; position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform 300ms var(--ease-out); }
.menu-toggle-mark::before { top: 4px; }
.menu-toggle-mark::after { top: 12px; }
.home-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); padding-block: var(--space-3xl) var(--space-2xl); }
.home-title h1 { text-transform: uppercase; }
.profession { font-size: var(--text-lg); margin: var(--space-sm) 0 0; }
.location { font-size: var(--text-sm); color: var(--color-muted); }
.home-title .location { margin-bottom: var(--space-sm); text-align: right; }
.hero-image { height: clamp(280px, 48vw, 650px); background: var(--color-paper-2); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.missing-media { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: var(--space-lg); color: var(--color-muted); background: var(--color-paper-2); font-size: var(--text-sm); }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: var(--space-3xl); padding-block: var(--space-xl); }
.hero-bottom .intro { font-size: var(--text-lg); line-height: 1.45; max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-md) var(--space-xl); }
.text-link, .video-trigger { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; width: fit-content; white-space: nowrap; border: 0; background: var(--color-transparent); padding: 0; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 5px; }
.text-link svg, .video-trigger svg { width: 20px; height: 20px; flex: none; }
.text-link:hover, .video-trigger:hover { color: var(--color-ink); }
.text-link:active, .video-trigger:active { transform: translateY(1px); }
.section { padding-block: var(--space-4xl); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.section-head p { color: var(--color-muted); max-width: 40ch; margin: 0; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-xl); }
.projects.current { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-card { min-width: 0; }
.project-card a { display: block; text-decoration: none; }
.project-image { aspect-ratio: 16/10; overflow: clip; background: var(--color-paper-2); }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-medium) var(--ease-out); }
.project-card a:hover img { scale: 1.015; }
.project-card h3 { margin-top: var(--space-md); font-size: var(--text-lg); }
.project-card .role { font-size: var(--text-sm); margin: var(--space-xs) 0 0; }
.project-card .format { color: var(--color-muted); font-size: var(--text-xs); margin: var(--space-xs) 0 0; }
.section-action { margin-top: var(--space-2xl); }
.dark { background: var(--color-dark); color: var(--color-light); }
.dark p { color: var(--color-dark-muted); }
.dark a:hover { color: var(--color-light); }
.dark a:focus-visible { outline-color: var(--color-light); }
.community-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.community-feature h2 { margin-bottom: var(--space-xl); }
.community-feature .feature-image { aspect-ratio: 4/5; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; }
.about-short { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
.about-short p { font-size: var(--text-lg); line-height: 1.5; }
.page-heading { padding-block: var(--space-3xl) var(--space-2xl); }
.page-heading p { margin-top: var(--space-lg); color: var(--color-muted); max-width: 50ch; }
.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-sm); margin-block: var(--space-md) var(--space-2xl); }
.filter-bar.is-scrollable { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.filters { display: flex; flex-wrap: nowrap; min-width: 0; gap: var(--space-xl); padding: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex-shrink: 0; }
.filter-scroll { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: var(--color-transparent); color: var(--color-ink); cursor: pointer; }
.filter-scroll svg { width: 22px; height: 22px; }
.filter-scroll--previous svg { rotate: 180deg; }
.filter-scroll:hover { color: var(--color-accent); }
.filter-scroll:disabled { opacity: .25; cursor: default; color: var(--color-muted); }
.filters button { border: 0; border-bottom: var(--rule-thin) solid var(--color-transparent); background: var(--color-transparent); padding: var(--space-sm) 0; min-height: 44px; font-size: var(--text-sm); white-space: nowrap; }
.filters button[aria-pressed=true] { border-color: var(--color-ink); }
.filters button:hover { color: var(--color-accent); }
.result-count { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xl); }
.work-grid { padding-bottom: var(--space-4xl); }
.editorial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); padding-block: var(--space-xl) var(--space-3xl); }
.editorial .portrait { aspect-ratio: 4/5; }
.editorial .portrait img { height: 100%; object-fit: cover; }
.prose { min-width: 0; max-width: 70ch; }
.prose p:first-child { font-size: var(--text-lg); line-height: 1.5; }
.prose h2 { margin-block: var(--space-3xl) var(--space-xl); font-size: var(--text-xl); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.gallery img { aspect-ratio: 4/3; height: 100%; object-fit: cover; }
.gallery.gallery--single { display: block; max-width: 40rem; margin-inline: auto; }
.gallery--single img { aspect-ratio: var(--gallery-ratio, auto); height: auto; object-fit: contain; }
.development { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); margin-top: var(--space-3xl); }
.development h3 { margin-bottom: var(--space-md); }
.development .status { color: var(--color-accent); font-size: var(--text-sm); }
.project-top { padding-top: var(--space-3xl); }
.project-top h1 { max-width: 22ch; font-size: var(--text-section); }
.project-top .profession { margin-block: var(--space-lg) var(--space-xl); }
.project-hero { aspect-ratio: 16/9; margin-top: var(--space-xl); background: var(--color-paper-2); }
.project-hero img { height: 100%; object-fit: cover; }
.project-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3xl); padding-block: var(--space-3xl); }
.facts { margin: 0; }
.facts div { margin-bottom: var(--space-lg); }
.facts dt { font-size: var(--text-xs); color: var(--color-muted); }
.facts dd { margin: var(--space-xs) 0 0; }
.credits { white-space: pre-line; }
.project-body .credits { white-space: normal; overflow-wrap: anywhere; }
.project-body .prose p:first-child { font-size: inherit; line-height: inherit; }
.project-body .project-synopsis > p:first-child { font-size: var(--text-lg); line-height: 1.5; }
.project-body .credits p { margin-block: 0 var(--space-md); }
.project-body .credits strong { font-weight: 600; }
.gallery.project-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player { margin-bottom: var(--space-2xl); }
.player-frame { aspect-ratio: 16/9; background: var(--color-dark); }
.player-frame iframe, .player-frame video { width: 100%; height: 100%; border: 0; }
.player-note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.contact-body { padding-block: var(--space-xl) var(--space-4xl); }
.contact-body .contact-email { font: 400 var(--text-xl)/1.3 var(--font-display); display: inline-block; margin-block: var(--space-xl); overflow-wrap: anywhere; }
.contact-social { display: flex; gap: var(--space-xl); margin-top: var(--space-xl); }
.rights-body { max-width: 75ch; padding-bottom: var(--space-4xl); }
.rights-body p { margin-bottom: var(--space-xl); }
.footer { border-top: var(--rule-thin) solid var(--color-line); padding-block: var(--space-3xl) var(--space-xl); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-2xl); }
.footer-name { font-family: var(--font-display); font-size: var(--text-section); line-height: 1.1; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.footer .profession { font-size: var(--text-sm); }
.footer-notice { display: flex; justify-content: space-between; gap: var(--space-2xl); margin-top: var(--space-3xl); font-size: var(--text-xs); color: var(--color-muted); }
.footer-notice p { max-width: 70ch; margin: 0; }
.footer-notice a { white-space: nowrap; }
.empty { padding-block: var(--space-2xl); color: var(--color-muted); }
@media (max-width: 960px) {
  html.no-js .site-header--hero { position: relative; background: var(--color-paper); }
  .projects.current { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-title { align-items: start; }
  .home-title .location { text-align: left; }
  .home-title, .hero-bottom, .community-feature, .about-short, .editorial, .project-body { grid-template-columns: minmax(0, 1fr); }
  .home-title { display: grid; gap: var(--space-xl); }
  .hero-actions { justify-content: flex-start; }
  .community-feature .feature-image { aspect-ratio: 16/10; }
  .editorial .portrait { max-width: 540px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-nav { gap: var(--space-lg); }
  .language { margin-left: var(--space-sm); }
}
@media (max-width: 640px) {
  .masthead { gap: var(--space-md); position: relative; }
  .wordmark { font-size: var(--text-lg); }
  .section { padding-block: var(--space-3xl); }
  .section-head, .development { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .section-head p { margin: 0; }
  .home-title { padding-block: var(--space-2xl) var(--space-xl); }
  .hero-bottom { gap: var(--space-xl); }
  .projects, .projects.current { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .project-image { aspect-ratio: 16/10; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery.project-gallery { grid-template-columns: minmax(0, 1fr); }
  .footer-top, .footer-notice { flex-direction: column; }
  .footer-links { gap: var(--space-xl); }
  .project-body { gap: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .project-card a:hover img { scale: 1; }
}

/* Cinematic composition. Layer 10: navigation, layer 30: skip link. */
.site-header { width: 100%; }
.site-header--hero { position: absolute; inset: 0 0 auto; z-index: var(--layer-menu); max-width: none; background: linear-gradient(var(--nav-scrim), var(--hero-clear)); }
.site-header--hero .masthead { border: 0; max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin-inline: auto; }
.cinema-hero { position: relative; isolation: isolate; height: min(66.667vw, 100svh); min-height: min(640px, 100svh); max-height: 1060px; }
.cinema-hero-image { position: absolute; inset: 0; overflow: clip; }
.cinema-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cinema-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-scrim), var(--hero-clear) 48%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; padding-top: clamp(96px, 9.5vw, 146px); }
.hero-copy h1 { width: fit-content; font-size: clamp(112px, 12.4vw, 190px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; text-wrap: nowrap; }
.hero-copy h1 span { display: block; }
.hero-copy .profession { font-size: clamp(18px, 2vw, 28px); line-height: 1.4; margin: 12px 0 0; }
.hero-copy .text-link { color: var(--color-paper); background: var(--color-accent); font-size: clamp(18px, 1.8vw, 24px); margin: 0; padding: 0 10px; min-height: 44px; text-decoration: none; }
.hero-copy .text-link:hover { color: var(--color-paper); background: var(--color-focus); }
.hero-copy .text-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.hero-reel-links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); margin-top: var(--space-md); }
.text-link svg { transition: transform var(--dur-medium) var(--ease-out); }
.text-link:hover svg { transform: translateX(5px); }
.project-card h3 { font-size: clamp(1.5rem, 2.35vw, 2.25rem); line-height: 1.2; letter-spacing: -.015em; }
.project-card a:hover h3, .project-card a:focus-visible h3 { color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; }
.project-card a:active { transform: translateY(2px); }
.project-image { aspect-ratio: 16/9; }
.no-media .project-image { position: relative; }
.typographic-title { position: absolute; top: var(--space-lg); left: var(--space-lg); right: var(--space-lg); font: 400 clamp(2rem, 4vw, 4rem)/1.15 var(--font-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.no-media .missing-media { padding-top: 140px; }
.projects.current .no-media .typographic-title { display: none; }
.project-image img { transition: scale 800ms var(--ease-out); }
.project-card a:hover img { scale: 1.015; }
.current-section { padding-top: var(--space-2xl); }
.projects.current, .projects.selected { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); row-gap: var(--space-3xl); align-items: start; }
.projects.current .no-media .project-image { aspect-ratio: auto; min-height: 88px; border-top: var(--rule-thin) solid var(--color-line); background: var(--color-transparent); }
.projects.current .no-media .missing-media { min-height: 88px; padding: var(--space-lg) 0 0; background: var(--color-transparent); }
.selected-section { padding-top: var(--space-3xl); }
.selected-section .section-head p { max-width: none; font-size: var(--text-lg); color: var(--color-ink); }
.community-section { background: var(--color-transparent); }
.community-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 8vw, 128px); }
.community-feature .feature-image { aspect-ratio: 4/5; }
.community-feature h2 { max-width: none; }
.about-short { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: start; gap: clamp(32px, 7vw, 112px); }
.about-portrait { aspect-ratio: 1; max-width: 360px; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.about-short h2 { margin-bottom: var(--space-lg); }
.about-short p { font-size: var(--text-base); line-height: 1.65; max-width: 60ch; }
.reel-section { padding-top: var(--space-2xl); }
.reel-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-lg); }
.reel-heading h2 { font-size: var(--text-xl); }
.reel-heading p { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.video-trigger--poster { position: relative; display: block; width: 100%; white-space: normal; text-align: left; }
.video-trigger--poster img { aspect-ratio: 16/9; object-fit: cover; }
.video-trigger-label { position: absolute; left: var(--space-lg); bottom: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); color: var(--color-ink); background: var(--color-paper); }
.video-trigger--poster:hover .video-trigger-label { color: var(--color-focus); }
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { transform: translateY(40px); }
  .cinema-hero-image img { animation: frame-enter 2600ms var(--ease-cinema) both; }
  .hero-name-word { animation: name-enter var(--dur-cinema) var(--ease-cinema) both; }
  .hero-name-word:nth-child(2) { animation-delay: 100ms; }
  .hero-copy .profession, .hero-copy .text-link { animation: detail-enter 1000ms var(--ease-cinema) both; animation-delay: 600ms; }
  .hero-copy .text-link:focus-visible { animation: none; }
  @keyframes frame-enter { from { opacity: .55; scale: 1.065; } to { opacity: 1; scale: 1; } }
  @keyframes name-enter { from { opacity: .7; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes detail-enter { from { opacity: .7; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 767px) {
  .cinema-hero { height: 100svh; min-height: min(670px, 100svh); max-height: 920px; }
  .cinema-hero-image img { object-position: 58% 50%; }
  .cinema-hero::after { background: linear-gradient(180deg, var(--hero-scrim), var(--hero-clear) 70%); }
  .hero-copy { padding-top: 112px; }
  .hero-copy h1 { font-size: clamp(80px, 21vw, 142px); }
  .hero-copy .profession { font-size: 18px; }
  .hero-copy .text-link { font-size: 18px; padding-inline: 6px; }
  .hero-reel-links { column-gap: var(--space-lg); }
  .projects.current, .projects.selected, .community-feature, .about-short { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .projects.current .project-card:nth-child(2), .projects.selected .project-card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .projects.selected .project-card.no-media:nth-child(n) .project-image { aspect-ratio: 16/10; }
  .project-card.has-media .project-image, .projects.selected .project-card.has-media:nth-child(n) .project-image { aspect-ratio: 4/5; }
  .community-feature .feature-image { aspect-ratio: 16/10; }
  .about-portrait { width: 65%; max-width: 300px; }
  .current-section { padding-top: var(--space-2xl); }
  .project-card h3 { font-size: 1.65rem; }
  .hero-copy h1, .hero-copy .profession { max-width: 100%; }
}
@media (max-width: 767px) and (orientation: landscape) {
  .project-card.has-media .project-image, .projects.selected .project-card.has-media:nth-child(n) .project-image { aspect-ratio: 3/2; }
}
@media (max-height: 580px) and (min-width: 768px) {
  .hero-copy { padding-top: 82px; }
  .hero-copy h1 { font-size: clamp(76px, 17svh, 110px); }
  .hero-copy .profession { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-hero-image img, .project-card a:hover img { scale: 1 !important; }
  .text-link svg { transform: none !important; }
}
/* Framing uses transform; decorative scale composes with it instead of replacing it. */
img[data-dbs-focus]{transform:scale(var(--dbs-zoom,1));transform-origin:var(--dbs-x,50%) var(--dbs-y,50%);object-position:var(--dbs-x,50%) var(--dbs-y,50%)!important}
@media(max-width:767px){img[data-dbs-focus]{transform:scale(var(--dbs-mobile-zoom,var(--dbs-zoom,1)));transform-origin:var(--dbs-mobile-x,var(--dbs-x,50%)) var(--dbs-mobile-y,var(--dbs-y,50%));object-position:var(--dbs-mobile-x,var(--dbs-x,50%)) var(--dbs-mobile-y,var(--dbs-y,50%))!important}}
/* Clip only the verified source letterbox, preserving focal coordinates in the visible aperture. */
@media(max-width:767px){
  .project-image:has(>img[data-dbp-aperture]){position:relative}
  .project-image>img[data-dbp-aperture]{position:absolute;top:calc(-100% * var(--dbp-aperture) / (1 - 2 * var(--dbp-aperture)));height:calc(100% / (1 - 2 * var(--dbp-aperture)));transform-origin:var(--dbs-mobile-x,var(--dbs-x,50%)) calc(100% * var(--dbp-aperture) + var(--dbs-mobile-y,var(--dbs-y,50%)) * (1 - 2 * var(--dbp-aperture)))}
}

.selected-section .section-head .intro-copy{max-width:none;font-size:var(--text-lg);color:var(--color-ink)}.intro-copy>p:first-child{margin-top:0}.intro-copy>p:last-child{margin-bottom:0}

/* Three editorial sizes; each follows the typography of its containing block. */
.dbs-text-small{font-size:max(1rem,.85em)}.dbs-text-medium{font-size:1em}.dbs-text-large{font-size:1.25em}

/* Zoom remains inside the existing photograph slot. */
:where(figure,div,a):has(>img[data-dbs-focus]){overflow:hidden}

/* Project covers keep their layout and crop; activation expands the same player. */
.player-cover{position:relative;margin-top:var(--space-xl)}
.player-cover .project-hero{margin-top:0}
.player-cover>.player-frame{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.player-cover.is-playing .project-hero{visibility:hidden}
.video-trigger--cover{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-lg);border:0;background:var(--color-transparent);color:var(--color-ink)}
.cover-play{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgb(236 236 231 / .45);border-radius:50%;background:rgb(12 10 8 / .18);color:rgb(236 236 231 / .72);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.cover-play svg{width:19px;height:19px;margin-left:2px}
.video-trigger--cover:is(:hover,:focus-visible) .cover-play{background:rgb(12 10 8 / .48);border-color:var(--color-ink);color:var(--color-ink)}
.video-trigger--cover:focus-visible{outline-offset:-6px}

.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4xl);padding-bottom:var(--space-4xl)}
.contact-layout .contact-body{padding-top:0}
.contact-layout .contact-email{font-size:clamp(1.25rem,2.4vw,2.25rem)}
.contact-social{flex-wrap:wrap;gap:var(--space-md)}
.social-link{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;text-decoration:none}
.social-link svg{width:24px;height:24px;flex:none}
.social-link:hover span{text-decoration:underline}
.contact-form{border-top:var(--rule-thin) solid var(--color-line);padding-top:var(--space-xl);min-width:0}
.contact-form h2{font-size:var(--text-xl);margin-bottom:var(--space-md)}
.contact-required,.contact-privacy{font-size:var(--text-xs);color:var(--color-muted)}
.contact-form label{display:block;font-size:var(--text-sm);margin-bottom:var(--space-sm)}
.contact-form input:not([type=hidden]),.contact-form textarea{display:block;width:100%;min-height:48px;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-lg);border:var(--rule-thin) solid var(--color-muted);border-radius:0;background:var(--color-transparent);color:var(--color-ink)}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-form [aria-invalid=true]{border-color:var(--color-focus)}
.contact-form .contact-honey{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.contact-submit{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-xl);min-height:48px;padding:var(--space-sm) var(--space-lg);border:0;background:var(--color-accent);color:var(--color-paper)}
.contact-submit:hover{background:var(--color-focus)}
.contact-submit svg{width:22px;height:22px;flex:none}
.contact-submit span{white-space:nowrap}
.contact-status{margin-top:var(--space-lg);padding:var(--space-md);border:var(--rule-thin) solid var(--color-line);border-radius:8px;background:var(--color-light);color:var(--color-dark);font-size:var(--text-sm)}
@media(max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.contact-layout .contact-body{padding-bottom:0}.contact-form{max-width:680px}}

/* One continuous ground for every section. The browser drives the warm exposure. */
.cinema-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,var(--ambient-base),var(--ambient-shade));overflow:hidden}
/* Static, balanced low-amplitude colour dithering breaks 8-bit contour bands.
   It stays in viewport space, below content, without altering the saved light. */
.cinema-atmosphere[data-ambient-enabled="1"]::after{content:"";position:absolute;inset:0;background:url("assets/ambient-dither.png") repeat;mix-blend-mode:overlay;opacity:.025}
.cinema-atmosphere>span{display:block;position:absolute;inset:0;opacity:var(--ambient-static-exposure,.22);transform-origin:bottom right}
.cinema-drift{position:absolute;inset:-40px;opacity:var(--ambient-intensity,.95);transform:translate3d(var(--ambient-mouse-x,0px),var(--ambient-mouse-y,0px),0)}
.cinema-glow{position:absolute;inset:0}
.cinema-glow::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--ambient-width,60%)*2);height:calc(var(--ambient-height,58%)*2);opacity:var(--ambient-core,.85);background:radial-gradient(ellipse closest-side at 50% 50%,var(--ambient-glow),var(--ambient-warm) var(--ambient-shoulder,28%),var(--color-transparent) var(--ambient-edge,82%));transform:translate3d(calc(-50% + var(--ambient-follow,0)*var(--ambient-pointer-x,0px) + (1 - var(--ambient-follow,0))*var(--ambient-rest-x,41.666667%)),calc(-50% + var(--ambient-follow,0)*var(--ambient-pointer-y,0px) + (1 - var(--ambient-follow,0))*var(--ambient-rest-y,34.482759%)),0)}
.cinema-glow--left{opacity:0;transform:scaleX(-1)}
.cinema-glow--left::before{transform:translate3d(calc(-50% - var(--ambient-follow,0)*var(--ambient-pointer-x,0px) + (1 - var(--ambient-follow,0))*var(--ambient-rest-x,41.666667%)),calc(-50% + var(--ambient-follow,0)*var(--ambient-pointer-y,0px) + (1 - var(--ambient-follow,0))*var(--ambient-rest-y,34.482759%)),0)}
@keyframes cinema-exposure{0%{opacity:var(--ambient-exposure-min,0);transform:translate3d(var(--ambient-travel-x,12%),var(--ambient-travel-y,10%),0) scale(var(--ambient-scale,1.2))}35%{opacity:calc((var(--ambient-exposure-min,0) + var(--ambient-exposure-max,1)) / 2)}100%{opacity:var(--ambient-exposure-max,1);transform:translate3d(0,0,0) scale(1)}}
@keyframes cinema-pellicola{from{opacity:var(--ambient-exposure-min,0);transform:translate3d(var(--ambient-travel-x,12%),var(--ambient-travel-y,10%),0) scale(var(--ambient-scale,1.2))}to{opacity:var(--ambient-exposure-max,1);transform:translate3d(0,0,0) scale(1)}}
@keyframes cinema-right{0%,25%{opacity:1}50%,75%{opacity:0}100%{opacity:1}}
@keyframes cinema-left{0%,25%{opacity:0}50%,75%{opacity:1}100%{opacity:0}}
@supports(animation-timeline:scroll(root block)){
  @media(prefers-reduced-motion:no-preference){
    .cinema-atmosphere>span{animation:cinema-exposure 1s linear both;animation-timeline:scroll(root block);animation-range:0% var(--ambient-short-range,85%)}
    .cinema-atmosphere[data-ambient-long]>span{animation-name:cinema-pellicola;animation-timing-function:cubic-bezier(.333333,0,.666667,1);animation-iteration-count:var(--ambient-passes,3);animation-direction:alternate;animation-range:0% 100%}
    .cinema-atmosphere[data-ambient-long][data-ambient-alternate] .cinema-glow{animation:cinema-right 1s cubic-bezier(.333333,0,.666667,1) both;animation-iteration-count:calc(var(--ambient-passes,3)/4);animation-timeline:scroll(root block);animation-range:0% 100%}
    .cinema-atmosphere[data-ambient-long][data-ambient-alternate] .cinema-glow--left{animation-name:cinema-left}
  }
}
html.cinema-atmosphere-fallback body{position:relative}
.cinema-progress-markers{position:absolute;inset:0 auto 0 0;width:1px;pointer-events:none;opacity:0;contain:layout style}
.cinema-progress-markers>i{position:absolute;left:0;width:1px}
html.cinema-atmosphere-fallback .cinema-atmosphere>span{animation:none;opacity:var(--ambient-exposure,0);transform:translate3d(calc((1 - var(--ambient-phase,0))*var(--ambient-travel-x,12%)),calc((1 - var(--ambient-phase,0))*var(--ambient-travel-y,10%)),0) scale(calc(1 + (var(--ambient-scale,1.2) - 1)*(1 - var(--ambient-phase,0))));transition:opacity 160ms linear,transform 160ms linear}
html.cinema-atmosphere-fallback .cinema-glow{animation:none;opacity:var(--ambient-right,1);transition:opacity 160ms linear}
html.cinema-atmosphere-fallback .cinema-glow--left{opacity:calc(1 - var(--ambient-right,1))}
@media(prefers-reduced-motion:reduce){.cinema-atmosphere>span{animation:none;opacity:var(--ambient-static-exposure,.22);transform:none;transition:none}.cinema-glow{animation:none!important;transition:none!important}.cinema-glow--right{opacity:1}.cinema-glow--left{opacity:0}.cinema-drift{transform:none}}

 .cinema-atmosphere[data-ambient-enabled="0"]>span{display:none}

/* The same video frame expands into the viewport; its page slot stays in place. */
html.reel-cinema-open{overflow:hidden;padding-right:var(--reel-scrollbar-width,0px)}
.reel-cinema{position:fixed;inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--color-ink);overflow:hidden}
.reel-cinema::backdrop{background:rgb(12 10 8 / 0);transition:background 460ms var(--ease-out)}
.reel-cinema.is-open::backdrop{background:rgb(12 10 8 / 1);transition-duration:620ms}
.reel-cinema .player{position:absolute;inset:0;margin:auto;width:min(100%,calc(100dvh * 16 / 9));height:min(100%,calc(100dvw * 9 / 16));transform-origin:top left}
.reel-cinema .player-cover{width:100%;height:100%;margin:0}
.reel-cinema .player-cover .project-hero{height:100%;aspect-ratio:auto}
.reel-cinema .player-frame,.reel-cinema .video-trigger{width:100%;height:100%;aspect-ratio:auto}
.reel-cinema .player-frame video,.reel-cinema .video-trigger img{width:100%;height:100%;object-fit:contain}
.reel-cinema .player-note{position:absolute;bottom:16px;left:16px;right:16px;margin:0;padding:8px;text-align:center;background:rgb(12 10 8 / .85);pointer-events:none}
.reel-cinema .player:has(.player-frame[aria-busy=false]) .player-note{visibility:hidden}
.reel-cinema-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid rgb(236 236 231 / .35);border-radius:50%;background:rgb(12 10 8 / .65);color:var(--color-ink);cursor:pointer;opacity:0;transition:opacity 180ms var(--ease-out)}
.reel-cinema.is-open .reel-cinema-close{opacity:1}
.reel-cinema-close svg{width:22px;height:22px}
.reel-cinema-close:hover{background:var(--color-dark);border-color:var(--color-ink)}
.reel-cinema-close:focus-visible{outline:2px solid var(--color-ink);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.reel-cinema::backdrop,.reel-cinema-close{transition:none}}

/* Full-screen mobile navigation inherits the approved cinematic palette. */
@media (max-width: 960px) {
  .masthead { gap: var(--space-md); }
  html.has-js .masthead .menu-toggle { display: inline-flex; align-items: center; gap: var(--space-md); margin-left: auto; padding-inline: var(--space-sm); cursor: pointer; }
  .main-nav { width: 100%; flex-wrap: wrap; gap: var(--space-md); }
  .nav-links { flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
  .main-nav .language { margin: 0; }
  html.has-js .masthead .main-nav {
    position: fixed; inset: 0; z-index: 1; width: 100%; height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    padding: calc(104px + env(safe-area-inset-top, 0px)) var(--page-gutter) max(28px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(ellipse at 110% 100%, color-mix(in srgb, var(--ambient-glow) 34%, transparent), transparent 68%), var(--color-paper);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 240ms ease, visibility 0s 240ms;
  }
  html.has-js .masthead .main-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 360ms ease, visibility 0s; }
  html.has-js .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: clamp(4px, 1svh, 16px); margin-block: auto; flex-shrink: 0; }
  html.has-js .main-nav .nav-link {
    display: flex; justify-content: space-between; gap: var(--space-md); padding-block: 2px;
    font-family: var(--font-display); font-size: clamp(2.5rem, min(17vw, 9svh), 5.5rem);
    line-height: 1.12; letter-spacing: -.025em; text-transform: uppercase; white-space: normal;
    text-decoration: none; color: var(--color-ink); opacity: 0; transform: translateY(18px);
    transition: color 180ms ease, opacity 180ms ease, transform 180ms var(--ease-out);
  }
  .nav-link-label { min-width: 0; overflow-wrap: anywhere; }
  html.has-js .is-open .nav-link { opacity: 1; transform: none; transition: color 180ms ease, opacity 600ms ease calc(70ms + var(--menu-order) * 45ms), transform 700ms var(--ease-out) calc(70ms + var(--menu-order) * 45ms); }
  html.has-js .main-nav .nav-link[aria-current], html.has-js .main-nav .nav-link:hover, html.has-js .main-nav .nav-link:focus-visible { color: var(--color-accent); }
  html.has-js .nav-link > svg { display: block; width: clamp(28px, 7vw, 40px); height: auto; flex-shrink: 0; opacity: 0; transform: translateX(-8px); transition: opacity 240ms ease, transform 300ms var(--ease-out); }
  html.has-js .nav-link[aria-current] > svg, html.has-js .nav-link:hover > svg, html.has-js .nav-link:focus-visible > svg { opacity: 1; transform: none; }
  html.has-js .main-nav .language { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-thin) solid var(--color-line); gap: var(--space-xl); flex-shrink: 0; }
  html.has-js .language a { min-width: 44px; font-size: var(--text-base); color: var(--color-muted); text-underline-offset: 7px; }
  html.has-js .language a[aria-current] { color: var(--color-ink); text-decoration-color: var(--color-accent); }
  .menu-is-open { overflow: hidden; }
  .menu-is-open .site-header { position: relative; z-index: var(--layer-skip); }
  .menu-is-open .wordmark { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: var(--page-gutter); z-index: 2; }
  .menu-is-open .menu-toggle { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: var(--page-gutter); z-index: 2; }
  .menu-toggle[aria-expanded=true] .menu-toggle-mark::before { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] .menu-toggle-mark::after { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 960px) and (max-height: 540px) {
  html.has-js .masthead .main-nav { padding-top: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  html.has-js .nav-links { gap: 0; }
  html.has-js .main-nav .nav-link { font-size: clamp(30px, 9svh, 48px); }
  html.has-js .main-nav .language { margin-top: var(--space-sm); padding-top: var(--space-xs); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  html.has-js .masthead .main-nav, html.has-js .main-nav .nav-link, html.has-js .nav-link > svg, .menu-toggle-mark::before, .menu-toggle-mark::after { transition: none; transform: none; }
  .menu-toggle[aria-expanded=true] .menu-toggle-mark::before { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] .menu-toggle-mark::after { transform: translateY(-4px) rotate(-45deg); }
}