/* One font family; three sizes shared across every page. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/montserrat-400.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/montserrat-500.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/montserrat-600.ttf') format('truetype')}
:root {
  --paper:#f6f6f2; --ink:#20221f; --line:#d6d8cf; --muted:#666c61; --accent:#ff7a1a; --on-accent:var(--ink); --brand-color:#3E84B8; --accent-text:#EB670D;
  --radius:12px; --grid-gap:12px; --header-height:98px;
  --type-scale:1.15;
  --text-small:calc(.8125rem * var(--type-scale)); --text-body:calc(.9375rem * var(--type-scale)); --text-heading:calc(1.375rem * var(--type-scale));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Montserrat',Arial,sans-serif; font-size:var(--text-body); line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
h1,h2 { font-size:var(--text-heading); font-weight:600; line-height:1.3; letter-spacing:-.025em; }

/* Fixed header. Display the configured wordmark at its natural aspect ratio. */
header { height:var(--header-height); position:fixed; inset:0 0 auto; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:0 4.2%; background:rgba(246,246,242,.96); backdrop-filter:blur(15px); border-bottom:1px solid var(--line); }
.brand { display:block; flex:0 0 auto; width:150px; }
.logo-mark { position:relative; display:block; width:100%; aspect-ratio:var(--logo-aspect); overflow:hidden; }
.logo-mark img { position:absolute; width:var(--logo-image-width); height:auto; max-width:none; left:var(--logo-left); top:var(--logo-top); }
.brand .logo-mark.logo-native img { opacity:1; }
.brand .logo-mark.logo-native::after { display:none; }
@supports ((mask-image:url('')) or (-webkit-mask-image:url(''))) {
  .brand .logo-mark img { opacity:0; }
  .brand .logo-mark::after { content:''; position:absolute; width:var(--logo-image-width); aspect-ratio:var(--logo-file-aspect); left:var(--logo-left); top:var(--logo-top); background:var(--brand-color); mask-image:var(--logo-mask); -webkit-mask-image:var(--logo-mask); mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-mode:var(--logo-mask-mode,alpha); pointer-events:none; }
}
nav { display:flex; align-items:center; gap:26px; }
nav>a { font-size:var(--text-body); position:relative; padding:8px 0; transition:color .18s; }
nav>a:not(.social-link)::after { content:''; position:absolute; bottom:1px; left:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .18s; }
nav>a:hover,nav>a:focus-visible { color:var(--accent); }
nav>a:hover::after,nav>a:focus-visible::after,nav>a[aria-current]::after { transform:scaleX(1); }
nav svg { display:block; }
.social-link { display:inline-flex; align-items:center; justify-content:center; min-width:24px; }
.menu-toggle { display:none; }
main { padding:var(--header-height) 4.2% 64px; min-height:65vh; max-width:1800px; margin:auto; }
main.home { max-width:none; padding-left:0; padding-right:0; }
main.home>section { width:calc(100% - 8.4vw); max-width:calc(1800px - 8.4vw); margin-inline:auto; }
.intro { padding:16px 0; }
.intro p { max-width:58ch; margin:0 auto; text-align:center; font-size:calc(1rem * var(--type-scale)); font-weight:400; line-height:1.5; color:var(--ink); }
.intro strong { font-weight:600; color:var(--accent-text); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Reel preview and player */
.reel-frame { overflow:hidden; position:relative; background:var(--ink); aspect-ratio:2 / 1; }
.reel-frame video,.reel-frame>img { width:100%; height:100%; object-fit:cover; display:block; }
.reel-open { position:absolute; inset:0; display:grid; place-items:center; background:transparent; transition:background .24s ease; }
.reel-cta { grid-area:1 / 1; pointer-events:none; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:12px 20px; border-radius:50px; background:var(--accent); color:#FFFFFF; font-size:var(--text-body); font-weight:600; line-height:1; letter-spacing:normal; opacity:0; transition:opacity .24s ease; }
.reel-cta svg { width:13px; height:14px; }
.reel-open:hover,.reel-open:focus-visible { background:rgba(0,0,0,.18); }
.reel-open:hover .reel-cta,.reel-open:focus-visible .reel-cta { opacity:1; }
.reel-open:focus-visible { outline-offset:-5px; }
.motion-toggle { position:absolute; right:18px; bottom:16px; background:var(--paper); color:var(--ink); border-radius:50px; padding:8px 16px; font-size:var(--text-small); z-index:2; }
.player { width:100%; aspect-ratio:16 / 9; border-radius:var(--radius); background:var(--ink); }

/* Three-column project grid, with tighter spacing */
.section-top { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:36px 0 18px; }
.section-top h2 { margin:0; }
.section-top span { font-size:var(--text-small); color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); }
.project-card { position:relative; display:block; min-width:0; min-height:0; aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden; background:var(--accent); isolation:isolate; transform:translateZ(0); }
.project-card::after { content:''; position:absolute; inset:-1px; z-index:1; background:#fff; opacity:0; pointer-events:none; transition:opacity .24s; }
.project-card img,.project-card video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s; }
.project-card video { position:absolute; inset:0; }
.card-title { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--on-accent); text-shadow:0 1px 6px rgba(255,255,255,.25); opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; }
.card-title strong { font-size:var(--text-heading); font-weight:600; line-height:1.3; letter-spacing:-.025em; }
.card-title small { margin-top:8px; font-size:var(--text-small); }
@media (hover:hover) { .project-card:hover img,.project-card:hover video,.project-card:focus-visible img,.project-card:focus-visible video { transform:scale(1.04); } }
@media (hover:hover) { .project-card:hover::after,.project-card:focus-visible::after { opacity:.91; } }
@media (hover:hover) { .project-card:hover .card-title,.project-card:focus-visible .card-title { opacity:1; transform:none; } }

/* Interior pages share heading, body and caption sizes */
.page-heading { padding:36px 0 28px; max-width:940px; }
.page-heading h1 { margin:0; }
.page-heading>p { font-size:var(--text-body); max-width:60ch; margin:16px 0 0; }
.page-heading>.page-subtitle { font-size:var(--text-small); color:var(--muted); margin-top:8px; line-height:1.4; }
.note { font-size:var(--text-small); color:var(--muted); }
.about-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4%; align-items:stretch; }
.about-photo { position:relative; min-height:0; }
.about-photo::before { content:''; display:block; aspect-ratio:4 / 3; }
.about-art { position:absolute; inset:0; display:block; border-radius:var(--radius); width:100%; height:100%; object-fit:cover; object-position:var(--about-photo-position,50% 50%); }
.about-layout .prose { display:flex; flex-direction:column; justify-content:space-between; gap:12px; max-width:none; font-size:clamp(calc(.8125rem * var(--type-scale)),calc(.9375vw * var(--type-scale)),calc(.9375rem * var(--type-scale))); line-height:1.5; }
.about-layout .prose p { margin:0; }
.about-layout .prose strong { font-weight:600; }
.about-layout .prose .pill { align-self:flex-start; }
.prose { font-size:var(--text-body); max-width:64ch; }
.prose p:first-child { margin-top:0; }
.about-layout .prose p:first-child { font-size:1.125em; font-weight:600; line-height:1.45; letter-spacing:-.02em; color:var(--accent-text); }
.prose p { margin-bottom:20px; }
.about-layout .prose p a { text-decoration:underline; text-underline-offset:4px; }
.prose h2 { margin:24px 0 16px; }
.pill { display:inline-flex; align-items:center; justify-content:center; font-size:var(--text-body); border:1px solid var(--ink); border-radius:50px; padding:10px 22px; transition:background .18s,transform .18s; }
.pill:hover { background:var(--accent); color:var(--on-accent); transform:translateY(-2px); }
.project-details { display:grid; grid-template-columns:1fr 2fr; gap:6%; padding:36px 0; }
.facts { margin:0; }
.facts dt { font-size:var(--text-small); color:var(--muted); margin-bottom:6px; }
.facts dd { margin:0 0 22px; font-size:var(--text-body); }
.project-hero { width:100%; height:auto; align-self:start; border-radius:0; display:block; }
main:has(.project-details) .player { border-radius:0; }
.project-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--grid-gap); }
.credits { border-top:1px solid var(--line); padding:20px 0; margin-top:24px; }
.credits summary { cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.contact-email { display:inline-block; font-size:var(--text-heading); font-weight:500; letter-spacing:-.025em; border-bottom:1px solid var(--ink); line-height:1.4; margin:0 0 28px; overflow-wrap:anywhere; }
.contact-layout { min-height:50vh; padding-bottom:32px; }
.contact-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.play-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); align-items:start; padding:12px 0 32px; }
.play-card { margin:0; }
.play-thumbnail { position:relative; display:block; overflow:hidden; border-radius:var(--radius); isolation:isolate; transform:translateZ(0); }
.play-thumbnail::after { content:''; position:absolute; inset:-1px; z-index:1; background:#fff; opacity:0; pointer-events:none; transition:opacity .24s; }
.play-thumbnail img { width:100%; height:auto; display:block; transition:transform .45s; }
.play-thumbnail .card-title { inset:0; padding:16px; opacity:0; transform:translateY(8px); background:transparent; border-radius:0; align-items:center; text-align:center; text-shadow:none; }
.play-thumbnail .card-title strong { font-size:var(--text-body); }
@media (hover:hover) { .play-thumbnail:hover img,.play-thumbnail:focus-visible img { transform:scale(1.04); } }
@media (hover:hover) { .play-thumbnail:hover::after,.play-thumbnail:focus-visible::after { opacity:.91; } }
@media (hover:hover) { .play-thumbnail:hover .card-title,.play-thumbnail:focus-visible .card-title { opacity:1; transform:none; } }
.play-detail-image { display:block; width:auto; height:auto; max-width:min(100%,900px); max-height:min(97.5vh,840px); margin:0 auto; border-radius:0; }
.play-detail-column { width:min(100%,900px,var(--play-image-width,900px),calc(97.5vh * var(--play-image-ratio,1)),calc(840px * var(--play-image-ratio,1))); margin-inline:auto; }
.play-detail-column .play-detail-image { width:100%; }
.play-description { max-width:none; margin:28px 0; }
.play-credit-links { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:var(--text-small); }
.play-credit-links a { text-decoration:underline; text-underline-offset:4px; }
.play-credit-links a:hover { color:var(--accent); }
.play-backstage { margin:36px 0; }
.play-backstage h2 { text-align:center; }
.play-backstage .project-gallery { grid-template-columns:minmax(0,1fr); gap:28px; }
.play-backstage figure { margin:0; }
.play-backstage img { display:block; width:auto; height:auto; max-width:100%; max-height:621px; margin-inline:auto; border-radius:0; }
.play-backstage figcaption { margin-top:8px; font-size:var(--text-small); color:var(--muted); text-align:center; }
.empty-art { aspect-ratio:4 / 5; background:var(--accent); color:var(--on-accent); border-radius:var(--radius); display:grid; place-items:center; }
.empty-art span { font-size:var(--text-heading); font-weight:500; }

/* Compact contact footer */
footer { background:var(--accent); color:var(--on-accent); padding:28px 4.2% 22px; }
.footer-hello { display:inline-flex; align-items:center; gap:16px; font-size:var(--text-heading); font-weight:500; letter-spacing:-.025em; line-height:1.3; padding-bottom:24px; }
.footer-bottom { border-top:1px solid rgba(32,34,31,.25); padding-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"rights location email" "copyright . ."; gap:12px 20px; align-items:start; font-size:var(--text-small); }
.footer-rights { grid-area:rights; margin:0; font-size:var(--text-small); line-height:1.5; }
.footer-location { grid-area:location; text-align:center; }
#footer-email { grid-area:email; text-align:right; overflow-wrap:anywhere; }
.footer-copyright { grid-area:copyright; }
footer a:focus-visible { outline-color:var(--on-accent); }
.skip { position:fixed; top:-100px; left:20px; padding:10px; background:var(--accent); color:var(--on-accent); z-index:100; }
.skip:focus { top:8px; }
.page-enter { animation:enter .2s ease both; }
@keyframes enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

@media (hover:none) {
  .card-title small { margin-top:4px; }
}
@media (min-width:1600px) {
  header,footer { padding-left:max(4.2%,calc((100vw - 1649px) / 2)); padding-right:max(4.2%,calc((100vw - 1649px) / 2)); }
}
@media (max-width:1000px) {
  .play-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  .about-layout { grid-template-columns:1fr; gap:24px; }
  .about-photo::before { aspect-ratio:var(--about-photo-aspect,3203 / 1716); }
  .about-layout .prose { font-size:var(--text-body); gap:20px; }
}
@media (max-width:760px) {
  :root { --header-height:88px; }
  header { padding:0 6%; }
  .brand { width:130px; }
  .menu-toggle { display:block; background:transparent; padding:12px 0 12px 15px; font-size:var(--text-body); }
  nav { display:none; position:absolute; top:var(--header-height); left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 6%; flex-wrap:wrap; gap:16px 26px; }
  nav.open { display:flex; }
  main { padding-left:6%; padding-right:6%; padding-bottom:48px; }
  main.home>section { width:88%; max-width:none; }
  .intro { padding:12px 0; }
  .reel-frame { aspect-ratio:16 / 9; }
  .motion-toggle { right:12px; bottom:12px; padding:8px 12px; }
  .section-top { margin:28px 0 16px; flex-wrap:wrap; gap:8px; }
  .page-heading { padding:28px 0 24px; }
  .about-layout,.project-details { grid-template-columns:1fr; gap:24px; }
  .project-details { padding:28px 0; }
  .facts { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  .facts dd { grid-column:2; }
  .play-grid { grid-template-columns:minmax(0,1fr); gap:28px 20px; padding-top:0; }
  footer { padding:24px 6% 20px; }
}
@media (max-width:540px) {
  .footer-bottom { grid-template-columns:minmax(0,1fr); grid-template-areas:"rights" "copyright" "location" "email"; gap:12px; }
  .footer-location,#footer-email { text-align:left; }
  :root { --grid-gap:10px; }
  .grid { grid-template-columns:1fr; grid-auto-rows:auto; }
  .project-card:nth-child(n) { grid-column:auto; grid-row:auto; aspect-ratio:4 / 3; }
  .project-gallery { grid-template-columns:1fr; }
  .card-title { padding:12px; }
  .card-title strong { font-size:calc(1rem * var(--type-scale)); }
  .play-thumbnail .card-title { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Venecia header trial: keep the wordmark size and the approved rectangular crop. */
.brand{display:flex;align-items:center;gap:14px;width:auto}
.brand>.logo-mark{flex:0 0 150px;width:150px}
.header-venecia{position:relative;display:block;flex:0 0 115.764px;width:115.764px;height:81.6px;overflow:hidden;border-radius:calc(var(--radius)*.41);background:#ffce76}
.header-venecia>img,.header-venecia>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;transform-origin:0 0;transform:scale(1.078947368) translate(-1.146131805%,-7.317073171%)}
.header-venecia>canvas{visibility:hidden}
.header-venecia[data-ready="true"]>canvas{visibility:visible}
.header-venecia[data-ready="true"]>img{visibility:hidden}
@media(min-width:761px) and (max-width:920px){header .menu-toggle{display:block;background:transparent;padding:12px 0 12px 15px;font-size:var(--text-body)}header nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 4.2%;flex-wrap:wrap;gap:16px 26px}header nav.open{display:flex}}
@media(max-width:760px){.brand{gap:10px}.brand>.logo-mark{flex-basis:130px;width:130px}.header-venecia{flex-basis:95.34px;width:95.34px;height:67.2px;border-radius:calc(var(--radius)*.338)}}
@media(max-width:360px){header{padding-inline:3%}}

/* Authorized optimization trial: local and reversible. */
.piece-navigation { position:static; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin:36px 0 18px; padding:0; border:0; background:transparent; }
.piece-navigation>.pill { padding:10px 22px; min-height:44px; }
.piece-navigation>a::after { display:none; }
@media (hover:none), (max-width:760px) {
 .reel-cta { opacity:1; }
 .play-thumbnail .card-title strong { font-size:var(--text-small); overflow-wrap:anywhere; }
 .piece-navigation { margin:28px 0 16px; }
 header nav>.social-link { min-width:44px; min-height:44px; }
}
@media(max-width:760px) {
 .reel-cta { padding:10px 16px; }
 .play-grid { column-gap:12px; }
 .project-details,.prose,.play-description { min-width:0; overflow-wrap:break-word; }
}

/* Native Jost Bold 700 logo trial, single line and natural font proportions. */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/jost-variable.ttf') format('truetype')}
.brand>.logo-type{aspect-ratio:auto;flex-basis:172.5px;width:172.5px;font-family:'Cal Sans',sans-serif;font-weight:400;font-synthesis:none;font-size:31.05px;line-height:1;letter-spacing:normal;white-space:nowrap;color:#000000;overflow:visible;transition:color .24s ease}
.logo-type:hover,.brand:focus-visible>.logo-type{color:#5492C3}
.brand .logo-type::after{display:none}
@media(max-width:760px){.brand>.logo-type{flex-basis:130px;width:130px;font-size:23.575px}}
@media(max-width:360px){.brand>.logo-type{font-size:20.7px}}

@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/red-hat-display-variable.ttf') format('truetype')}

@font-face{font-family:'Righteous';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/righteous-regular.ttf') format('truetype')}

@font-face{font-family:'Paytone One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/paytone-one-regular.ttf') format('truetype')}

@font-face{font-family:'Gabarito';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/gabarito-variable.ttf') format('truetype')}

@font-face{font-family:'Cal Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cal-sans-regular.ttf') format('truetype')}

.vimeo-player { display:block; width:100%; height:auto; aspect-ratio:16 / 9; border:0; }
/* Touch holds share the desktop title reveal. */
.project-card,.play-thumbnail { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.project-card img,.play-thumbnail img { -webkit-user-drag:none; }
.project-card:is(.is-held,:focus-visible)::after,.play-thumbnail:is(.is-held,:focus-visible)::after { opacity:.91; }
.project-card:is(.is-held,:focus-visible) .card-title,.play-thumbnail:is(.is-held,:focus-visible) .card-title { opacity:1; transform:none; }
.project-card:is(.is-held,:focus-visible) img,.project-card:is(.is-held,:focus-visible) video,.play-thumbnail:is(.is-held,:focus-visible) img { transform:scale(1.04); }