:root {
  color-scheme: dark;
  --surface: #141816;
  --panel: #1d2420;
  --ink: #eeeae1;
  --muted: #b9c0b8;
  --accent: #a5bfaf;
  --line: #37413b;
  --heading: Unbounded, system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 76px);
}

@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/unbounded-0.woff2') format('woff2');
  unicode-range: U+0100-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/unbounded-1.woff2') format('woff2');
  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;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.6 system-ui, sans-serif;
}

a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--accent); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #d0efde; outline-offset: 4px; }

h1, h2, .wordmark {
  font-family: var(--heading);
  font-weight: 400;
}
h1, h2, p { margin-top: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--panel);
  padding: 12px;
}
.skip-link:focus { top: 12px; }

.site-header, .site-footer, .portfolio, .cv-page {
  width: min(calc(100% - 2 * var(--gutter)), 1350px);
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  min-height: 100px;
}

.wordmark {
  flex: 0 1 auto;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  letter-spacing: -.06em;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
}

.wordmark span, .eyebrow {
  display: block;
  color: var(--accent);
  font: 500 .69rem/1.5 system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wordmark span { margin-top: 7px; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 2.1vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .87rem;
  text-decoration: none;
}

.site-nav a::after {
  position: absolute;
  inset: auto 0 5px;
  height: 1px;
  background: currentColor;
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .16s ease;
}
.site-nav a[aria-current="page"]::after, .site-nav a:hover::after, .site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.menu-toggle, .contact-submit {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 16px;
  min-height: 44px;
}
.menu-toggle { display: none; }

main { animation: enter .26s ease-out both; }
@keyframes enter {
  from { opacity: .65; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding: 18px 0 26px;
  color: var(--muted);
  font-size: .82rem;
}
.site-footer a { padding: 8px 0; text-decoration: none; }

/* Home and Contact use the same split composition and soft portrait edges. */
.home-hero, .contact-page {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(0px, 3vw, 44px);
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline-start: var(--gutter);
}

.home-intro, .contact-intro { position: relative; z-index: 1; min-width: 0; }
.home-intro { padding-block: clamp(28px, 6vw, 92px); }
.home-intro .eyebrow, .contact-intro .eyebrow { margin-bottom: 22px; }

.home-hero h1, .contact-intro h1, .page-heading h1 {
  letter-spacing: -.085em;
  line-height: 1.05;
}

.home-hero h1 {
  font-size: clamp(3.4rem, 7.9vw, 8rem);
  margin-bottom: 22px;
}

.home-full-name {
  color: var(--ink);
  margin-bottom: 7px;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
}
.home-languages { color: var(--muted); font-size: .92rem; margin-bottom: 32px; }

.home-actions, .social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 23px;
}

.home-actions a, .social-links a, .download-cv {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: .89rem;
  text-decoration: none;
}

.primary-link, .download-cv {
  width: fit-content;
  border: 1px solid var(--accent);
  padding: 9px 15px;
  color: var(--ink);
}
.primary-link:hover, .download-cv:hover, .contact-submit:hover {
  background: var(--panel);
}

.hero-image {
  position: relative;
  align-self: start;
  height: clamp(480px, calc(100svh - 100px), 820px);
  overflow: hidden;
}
.hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-image::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, var(--surface), transparent 32%),
              linear-gradient(0deg, var(--surface), transparent 29%),
              linear-gradient(180deg, var(--surface), transparent 14%);
}
.home-portrait {
  object-position: 57% 17%;
  filter: saturate(.72) brightness(.86);
}

/* Reels and photographs retain the current ordering and filter controls. */
.portfolio { padding-block: clamp(28px, 5.5vw, 76px) clamp(32px, 7vw, 95px); }

.page-heading {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 24px;
}

.page-heading h1 { margin: 0; font-size: clamp(3rem, 6vw, 6.2rem); }

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 21px 0 25px;
}
.portfolio-filters button {
  min-height: 44px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 7px 0;
  font-size: .88rem;
}
.portfolio-filters button[aria-pressed="true"], .portfolio-filters button:hover {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px clamp(14px, 2vw, 28px);
}
.film-entry { min-width: 0; scroll-margin-top: 24px; }
.film-entry:target .film-card:not(:focus-visible) { outline: 1px solid var(--accent); outline-offset: 3px; }

@media (min-width: 960px) {
  .portfolio {
    display: grid;
    grid-template-columns: clamp(184px, 17vw, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
  }
  .portfolio-sidebar .page-heading { margin-bottom: 0; }
  .portfolio--gallery .page-heading h1 { font-size: clamp(2.75rem, 4vw, 4rem); }
  .portfolio-sidebar .portfolio-filters {
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 0;
    margin: 18px 0 0;
  }
}

@media (min-width: 960px) and (min-height: 520px) {
  .portfolio-sidebar { position: sticky; top: 24px; }
}

.portfolio-card {
  position: relative;
  min-width: 0;
  display: block;
  overflow: hidden;
  background: #0c100e;
  text-decoration: none;
}
.portfolio-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .2s ease, transform .25s ease;
}

.film-card { aspect-ratio: 16 / 9; }
.film-card img { filter: saturate(.45); }
.portfolio-card:hover img, .portfolio-card:focus-visible img { filter: none; transform: scale(1.025); }
.play-mark {
  position: absolute;
  inset: auto 14px 14px auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #eeeae1a8;
  background: #111714d9;
  color: var(--ink);
  font-size: .9rem;
}
.film-title { margin: 10px 0 0; font-size: .91rem; overflow-wrap: anywhere; }

.photo-grid { display: grid; gap: clamp(24px, 4vw, 44px); }
.photo-group, .portfolio--gallery[data-filtered] .photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.photo-group h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font: 500 .92rem/1.5 system-ui, sans-serif;
}
.portfolio--gallery[data-filtered] .photo-group { display: contents; }
.portfolio--gallery[data-filtered] .photo-group h2 { display: none; }
.photo-card { aspect-ratio: 3 / 2; }
.photo-card[data-category="portraits"] { aspect-ratio: 4 / 5; }
.photo-card[data-category="portraits"] img { object-position: center 37%; }
.photo-card img { filter: grayscale(1); }

.work-lead { max-width: 16rem; margin: 16px 0 24px; color: var(--muted); font-size: .9rem; }
.work-views { min-width: 0; }
.work-view { scroll-margin-top: 24px; }
.work-view:focus-visible { outline: none; }
.work-view h2 {
  margin: 8px 0 16px;
  font-size: clamp(1.6rem, 3.8vw, 3.3rem);
  letter-spacing: -.055em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Each hash names one panel, including when the page opens from a shared link. */
@supports selector(.work-views:has(> .work-view:target)) {
  .work-views:has(> .work-view:target) > .work-view:not(:target),
  .work-views:not(:has(> .work-view:target)) > .work-view:not(#work-categories) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .work-view:target { animation: work-view-enter .24s ease-out; }
  @keyframes work-view-enter {
    from { opacity: .35; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

.work-menu, .work-stills { margin: 0; padding: 0; list-style: none; }
.work-menu { border-top: 1px solid var(--line); }
.work-menu li { border-bottom: 1px solid var(--line); }
.work-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(15px, 2vw, 23px) 10px;
  text-decoration: none;
}
.work-menu-link:hover, .work-menu-link:focus-visible { background: var(--panel); }
.work-menu-title {
  display: block;
  font-family: var(--heading);
  font-size: clamp(1rem, 2vw, 1.65rem);
  letter-spacing: -.035em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.work-menu-note { display: block; margin-top: 5px; color: var(--muted); font-size: .86rem; }
.work-menu-arrow { color: var(--accent); font-size: 1.25rem; }
.work-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--accent);
  font-size: .9rem;
  text-decoration: none;
}
.work-back:hover { text-decoration: underline; }
.work-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  margin: 6px 0 18px;
}
.work-cover img, .work-cover::after, .work-cover h2 { grid-area: 1 / 1; }
.work-cover img { display: block; width: 100%; height: auto; }
.work-cover::after {
  content: "";
  align-self: stretch;
  background: linear-gradient(0deg, var(--surface), rgb(20 24 22 / .62) 23%, transparent 65%);
}
.work-cover h2 {
  z-index: 1;
  margin: 0;
  padding: 0 clamp(8px, 2vw, 26px) clamp(8px, 2vw, 24px);
  text-shadow: 0 2px 16px #000;
}
.work-credit { margin-bottom: 12px; color: var(--accent); font-size: .9rem; }
.work-description { max-width: 62ch; color: var(--muted); }
.work-clip { max-width: 820px; margin-block: 24px 32px; }
.work-stills-title { margin: 0 0 10px; font-size: 1rem; font-weight: 500; }
.work-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.work-stills a { display: block; aspect-ratio: 3 / 2; }
.work-stills img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-stills--small { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.work-stills--small:has(> li:only-child) { grid-template-columns: minmax(0, 34rem); }
.work-stills--small a { aspect-ratio: auto; }
.work-stills--small img { height: auto; }

.portfolio-dialog {
  border: 1px solid var(--line);
  padding: 16px;
  margin: auto;
  width: 96vw;
  max-width: 1600px;
  height: 94dvh;
  max-height: 94dvh;
  background: #101411;
  color: var(--ink);
  overflow: auto;
}
.portfolio-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.portfolio-dialog::backdrop { background: #000e; }

.lightbox-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lightbox-toolbar h2 { flex: 1 1 160px; margin: 0; font-size: .89rem; overflow-wrap: anywhere; }
.portfolio-dialog button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  min-height: 44px;
  padding: 8px 12px;
  font-size: .8rem;
}
.portfolio-dialog button:hover, .portfolio-dialog button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.lightbox-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  background: #080b09;
}
.lightbox-stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-stage iframe { width: 100%; height: 100%; min-height: 180px; border: 0; }
.photo-toolbar { justify-content: flex-end; }
.photo-viewer {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  background: #080b09;
}
.photo-viewer:focus-visible { outline: none; }
.photo-viewer .lightbox-stage { position: absolute; inset: 0; container-type: size; }
.lightbox-photo { display: block; flex: none; cursor: zoom-in; }
.lightbox-photo:focus-visible { outline-offset: -3px; }
.lightbox-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
}
.photo-viewer:fullscreen, .photo-viewer:fullscreen .lightbox-stage { background: #000; }
.portfolio-dialog .photo-arrow {
  position: absolute;
  background: #0c100ee6;
  color: var(--ink);
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  padding: 0;
  font-size: 1.3rem;
}
.photo-arrow[data-previous] { left: 10px; }
.photo-arrow[data-next] { right: 10px; }
.portfolio-dialog .photo-toolbar button, .portfolio-dialog .photo-exit-fullscreen {
  border: 0;
  background: transparent;
}
.portfolio-dialog .photo-exit-fullscreen {
  position: absolute;
  display: none;
  top: 12px;
  right: 12px;
  border-radius: 8px;
  background: #0c100ec9;
}
.photo-viewer:fullscreen .photo-exit-fullscreen { display: block; }
@media (hover: hover) and (pointer: fine) {
  .photo-arrow { opacity: .52; transition: opacity .16s ease; }
  .photo-viewer:fullscreen :is(.photo-arrow, .photo-exit-fullscreen) { opacity: 0; }
  .photo-viewer :is(.photo-arrow, .photo-exit-fullscreen):is(:hover, :focus-visible),
  .photo-viewer:fullscreen :is(.photo-arrow, .photo-exit-fullscreen):is(:hover, :focus-visible) { opacity: 1; }
}
.photo-viewer .lightbox-status:not(:empty) {
  position: absolute;
  bottom: 10px;
  inset-inline: 10px;
  padding: 6px 10px;
  background: #0c100ee6;
  text-align: center;
}
.lightbox-thumbnails {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4px, 1vw, 9px);
  width: min(100%, 620px);
  margin-inline: auto;
  flex: 0 0 60px;
  padding: 4px;
}
.portfolio-dialog .lightbox-thumbnails button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: opacity .16s ease;
}
.lightbox-thumbnails img { display: block; width: 100%; height: clamp(44px, 6vw, 52px); object-fit: cover; }
.lightbox-thumbnails [data-distance="1"] { opacity: .74; }
.lightbox-thumbnails [data-distance="2"] { opacity: .52; }
.lightbox-thumbnails [data-distance="3"] { opacity: .30; }
.lightbox-thumbnails [data-distance="4"] { opacity: .20; }
.lightbox-thumbnails button:is(:hover, :focus-visible) { opacity: 1; }
.lightbox-status, .lightbox-caption { margin: 0; font-size: .84rem; }
.lightbox-caption { max-width: 900px; align-self: center; text-align: center; overflow-wrap: anywhere; }
.lightbox-status:empty { position: absolute; }
.lightbox-caption:empty { display: none; }
.lightbox-original { align-self: center; font-size: .82rem; }

.cv-page { max-width: 1160px; padding-block: clamp(20px, 4vw, 58px) 50px; }
.cv-profile {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
  align-items: center;
  gap: clamp(25px, 6vw, 92px);
  padding-bottom: clamp(28px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}
.cv-portrait img { display: block; width: 100%; max-width: 315px; height: auto; }
.cv-bio { min-width: 0; color: var(--muted); }
.cv-bio h1 {
  margin-bottom: 13px;
  color: var(--ink);
  font-size: clamp(1.55rem, 3.6vw, 3.25rem);
  letter-spacing: -.06em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.professional-role { color: var(--accent); font-size: 1.16rem; margin-bottom: 17px; }
.cv-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 5vw, 70px);
  padding-block: 36px 15px;
}
.cv-section { min-width: 0; margin-bottom: 24px; }
.cv-section h2 { font-size: clamp(1.08rem, 2vw, 1.45rem); margin-bottom: 13px; }
.cv-section p { margin-bottom: 8px; color: var(--muted); font-size: .94rem; overflow-wrap: anywhere; }
.cv-section a { color: var(--accent); }
.cv-end { border-top: 1px solid var(--line); padding-top: 20px; }

.contact-page { align-items: start; }
.contact-intro { padding-block: clamp(38px, 7.5vw, 112px) 36px; max-width: 510px; }
.contact-intro h1 { font-size: clamp(2.8rem, 6.8vw, 6.25rem); margin-bottom: 28px; }
.contact-purpose { color: var(--muted); margin-bottom: 35px; }
.contact-email {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 15px;
  max-width: 100%;
  min-height: 44px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--muted);
  font-size: clamp(1.1rem, 2.2vw, 1.88rem);
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 10px 0 22px;
  color: var(--accent);
  font: normal .85rem/1.5 system-ui, sans-serif;
}
.contact-meta a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.contact-portrait img { object-position: 50% 26%; filter: grayscale(.75); }

.contact-enquiry {
  border-block: 1px solid var(--line);
  margin-block: 4px 17px;
}
.contact-enquiry summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 12px 2px;
  cursor: pointer;
  font-size: .92rem;
  list-style: none;
}
.contact-enquiry summary::-webkit-details-marker { display: none; }
.contact-enquiry summary::after { content: '+'; color: var(--accent); }
.contact-enquiry[open] summary::after { content: '−'; }

.contact-form { padding: 4px 0 20px; }
.contact-form fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 14px; }
.contact-form legend, .form-field > label { display: block; margin-bottom: 6px; font-size: .9rem; }
.name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-form input, .contact-form textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 1px solid #5d6a62;
  border-radius: 0;
  padding: 9px 12px;
  background: var(--panel);
  color: var(--ink);
}
.contact-form input::placeholder { color: var(--muted); }
.contact-form textarea { resize: vertical; }
.contact-form [aria-invalid="true"] { border-color: #f5aaa4; }
.field-caption { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.form-field { margin-bottom: 14px; }
.field-error { display: block; margin-top: 4px; color: #ffc1bb; font-size: .84rem; }
.field-error:empty { display: none; }
.contact-submit { border-color: var(--accent); }
.contact-submit:disabled { opacity: .6; }
.preview-notice, .form-status { color: var(--muted); font-size: .84rem; }
.form-status { margin: 10px 0 0; }
.form-status:empty { margin: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.not-found { padding: 90px var(--gutter); text-align: center; min-height: 60svh; }
.not-found h1 { font-size: clamp(1.8rem, 4.5vw, 3.5rem); }

@media (max-width: 900px) {
  .site-header { min-height: 82px; }
  .contact-break { display: none; }
}

@media (max-width: 660px) {
  .site-header {
    min-height: 68px;
    padding-block: 10px;
    flex-wrap: wrap;
  }
  .wordmark span { font-size: .59rem; letter-spacing: .09em; }
  .menu-toggle { display: inline-flex; align-items: center; font-size: .86rem; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { gap: 0 18px; }
  .has-js .site-nav:not(.is-open) { display: none; }
  .home-hero, .contact-page { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: var(--gutter); }
  .home-hero h1 { font-size: clamp(3.2rem, 13vw, 5.65rem); }
  .home-languages { margin-bottom: 20px; }
  .home-intro { padding-block: 26px 18px; }
  .hero-image { height: auto; aspect-ratio: 1 / 1.08; margin-inline: calc(-1 * var(--gutter)); }
  .hero-image::after {
    background: linear-gradient(180deg, var(--surface), transparent 16%),
                linear-gradient(0deg, var(--surface), transparent 22%),
                linear-gradient(90deg, var(--surface), transparent 10%, transparent 90%, var(--surface));
  }
  .home-portrait { object-position: 55% 13%; }
  .contact-intro { padding-block: 28px 10px; }
  .contact-intro h1 { margin-bottom: 16px; }
  .contact-purpose { margin-bottom: 20px; }
  .contact-portrait { max-height: 490px; }
  .contact-portrait img { object-position: 50% 22%; }
  .contact-meta { margin-bottom: 13px; }
  .film-grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-filters { gap: 0 16px; margin-block: 13px 17px; }
  .portfolio-filters button { font-size: .8rem; }
  .photo-group:not(.photo-group--opening), .portfolio--gallery[data-filtered] .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; padding: 10px; }
  .portfolio-dialog button { font-size: .75rem; padding: 7px; }
  .lightbox-toolbar h2 { flex-basis: calc(100% - 85px); order: -2; }
  .lightbox-toolbar:not(.photo-toolbar) [data-close] { order: -1; }
  .portfolio-dialog .photo-arrow { font-size: 1.3rem; }
  .cv-profile, .cv-columns { grid-template-columns: minmax(0, 1fr); }
  .cv-profile { gap: 22px; }
  .cv-portrait img { width: min(60%, 230px); }
  .cv-columns { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .site-nav a::after, .portfolio-card img, .photo-arrow, .portfolio-dialog .lightbox-thumbnails button { transition: none; }
  .portfolio-card:hover img, .portfolio-card:focus-visible img { transform: none; }
}