/* The pre-sleep visual reference used Times and Arial. Keep font experiments in their comparison page. */
:root {
  --serif: "Times New Roman", Times, serif;
  --body: Arial, Helvetica, sans-serif;
}
body { font-size: 17px; }
h1 { font-size: clamp(44px, 5.7vw, 82px); }
h2 { font-size: clamp(34px, 4vw, 60px); }
h3 { font-size: 30px; }
.contact-strip h2 { font-size: clamp(38px, 5vw, 72px); }
.font-comparison {
  --serif: Cormorant, Georgia, serif;
  --body: Manrope, Arial, sans-serif;
  font-size: 16px;
}
@media (max-width: 760px) {
  h1 { font-size: 42px; }
  h2 { font-size: 34px; }
  h3 { font-size: 26px; }
  .intro h2 { font-size: 30px; }
  .contact-strip h2 { font-size: 36px; }
  .statement { font-size: 34px; }
  .project-heading h1 { font-size: 40px; }
  .font-comparison h1 { font-size: 52px; }
}

.live-opening{grid-template-columns:3.35fr 1fr}.opening-scene,.opening-side{height:min(39vw,600px)}.opening-scene picture{display:block;width:100%;height:100%}.opening-scene picture img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}@media(max-width:760px){.live-opening{grid-template-columns:1fr 1fr}.opening-scene{height:440px}.opening-side{height:225px}.opening-scene picture img{object-position:50% 42%}}
@font-face{font-family:SixCaps;src:url(assets/sixcaps.ttf);font-display:swap}@media(min-width:761px){.opening-title h1{font-family:SixCaps,sans-serif;font-weight:400;font-size:clamp(160px,16vw,230px);letter-spacing:0;line-height:.95}.brand strong{font-family:SixCaps,sans-serif;font-weight:400;font-size:72px;line-height:.7}.footer-brand{font-family:SixCaps,sans-serif;font-weight:400;font-size:48px;line-height:.9}}

.archive-count{font-size:12px;margin-top:9px;padding-top:9px;border-top:1px solid var(--rule);color:var(--muted)}
.opening-title p{font-family:Arial,Helvetica,sans-serif;font-size:clamp(17px,1.4vw,21px);font-weight:400;line-height:1.45;letter-spacing:.01em;margin-top:18px;max-width:280px;text-shadow:0 1px 8px rgba(0,0,0,.25)}@media(max-width:760px){.opening-title p{font-size:18px;line-height:1.4;margin-top:14px}}

/* Section review: preserve the established direction and improve compact screens. */
.archive-label{align-items:flex-start}.archive-label h3{flex:1;min-width:0}.archive-label>span{flex:none;margin-top:15px}
figure[data-gallery]:focus-visible,header summary:focus-visible{outline:2px solid #887452;outline-offset:5px}
.portrait-film-pair video{height:auto;aspect-ratio:9/16}
.image-dialog-controls{padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:761px) and (max-width:1100px){
 header{gap:18px}.brand{gap:12px}.brand small{display:none}header nav{gap:16px;font-size:13px}.nav-cta{padding-left:16px}
 .intro{gap:40px}.studio-intro{gap:45px}.contact-strip{gap:40px}.steps{gap:28px}
 .tennis-grid{grid-template-columns:1fr 1fr;gap:28px}.tennis-copy{grid-column:1/-1;max-width:580px}.tennis-copy .shoe{display:none}
 .service-row{grid-template-columns:40px .8fr 1fr;gap:26px}.service-row h2{font-size:35px}
 .film-label h3{font-size:25px}
}
@media(max-width:760px){
 .portrait-grid .portrait{aspect-ratio:4/5}.portrait-grid .portrait img{object-position:center}
 .archive-label h3{font-size:clamp(22px,6vw,28px);line-height:1.08}.archive-label>span{font-size:18px}
 .archive-count{font-size:11px;line-height:1.6}
 .portrait-film-pair{flex-direction:column;align-items:center;gap:24px}.portrait-film-pair video{width:100%;max-width:364px;max-height:75svh}
 .image-dialog img{height:calc(100dvh - 90px - env(safe-area-inset-bottom,0px))}.image-dialog-controls{height:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){
 .next{align-items:flex-start;gap:12px}.next>a:first-child{flex:none}.next .link{text-align:right;justify-content:flex-end;font-size:12px;padding-top:0}
 .image-dialog-controls{gap:8px}.image-dialog button{padding:12px}.image-dialog .image-counter{min-width:40px;text-align:center}
}

.font-layout .font-display-sample{font-size:85px;margin:40px 0 28px}@media(max-width:760px){.font-layout .font-display-sample{font-size:52px}}

/* Detailed visual review: quiet labels, clear targets and a complete mobile film grid. */
.intro .eyebrow,.tennis-grid .eyebrow,.services-list .eyebrow,.steps .eyebrow{font-size:12px;line-height:1.5}
.project-image-link{display:block}.project-image-link:hover{text-decoration:none}
header nav a{display:inline-flex;align-items:center;min-height:44px}
header a[aria-current="page"],.mobile-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.socials{row-gap:4px}.socials a{display:inline-flex;align-items:center;min-height:44px}
.direct-email{font-size:14px;margin-top:28px}.direct-email a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.service-example{margin-top:4px}.page-top+.archive-grid{padding-top:24px}
.film-card:hover{text-decoration:none}.film-card:hover h3{text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){
 .intro .eyebrow,.tennis-grid .eyebrow,.services-list .eyebrow,.steps .eyebrow{font-size:11px}
 .film-page .film-library .film-card:first-child{grid-column:auto}.film-page .film-label{min-height:88px}
 .explorations .caption{display:block}.explorations .caption span{display:block;max-width:none}.explorations .caption span:last-child{text-align:left;margin-top:4px}
 .page-top+.archive-grid{padding-top:20px}
}

.not-found{min-height:65vh}.not-found h1{margin-bottom:28px}.not-found-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}

@media(max-width:760px){header details .mobile-menu{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}.image-dialog [hidden]{display:none}}
.case-gallery figcaption span:first-child{display:inline}

/* Locally hosted alternatives for devices without the preferred system typefaces. */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/arimo-400-latin.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;
}
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/arimo-700-latin.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;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/tinos-400-latin.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;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/tinos-700-latin.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;
}
:root{--serif:"Times New Roman",Times,Tinos,serif;--body:Arial,Helvetica,Arimo,sans-serif}
.opening-title p{font-family:var(--body)}