/* Dalessandri Reference: regular lettering traced from the supplied specimens. */
@font-face {
  font-family: "Dalessandri Reference";
  src: url('/assets/fonts/dalessandri-reference-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --site-font: "Dalessandri Reference", Arial, sans-serif;
  --display-font: var(--site-font);
  --type-regular: 400;
  --type-tracking: 0;
  --film-title-size: 1rem;
  font-family: var(--site-font);
  font-weight: var(--type-regular);
  font-kerning: auto;
  font-feature-settings: normal;
  font-synthesis: none;
  letter-spacing: var(--type-tracking);
}

/* One real regular cut throughout; retain its measured spacing at every size. */
body, body * {
  font-family: var(--site-font) !important;
  font-weight: var(--type-regular) !important;
  font-style: normal;
  letter-spacing: var(--type-tracking) !important;
}

body, button, input, select, textarea, dialog,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font);
  letter-spacing: var(--type-tracking);
  font-feature-settings: normal;
}

/* The name uses the same upright outlines as the rest of the site. */
html .site-header .wordmark {
  font-family: var(--display-font);
  font-size: clamp(22px, 2.05vw, 30px);
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  line-height: 1.16;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark-dot { padding-left: 0; }
.site-nav { gap: clamp(20px, 2.4vw, 38px); }
.site-nav > a {
  font-size: 16px;
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Capital lettering is the directly sampled portion of the family. */
.film-title, .showcase-title,
.film-dialog .dialog-footer h2,
.watch-main h1 {
  font-family: var(--display-font);
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  font-feature-settings: normal;
}
.film-title, .showcase-title {
  text-transform: uppercase;
  font-size: var(--film-title-size);
  line-height: 1.55;
}
.showcase-title {
  height: 1.55em;
  /* Film cards use flexible labels; carousel captions need their own row. */
  flex: 0 0 auto;
}
.title-marquee-track, .title-marquee-copy {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

#work .section-heading-row {
  align-items: flex-end;
  column-gap: 40px;
  row-gap: 26px;
}
#work .work-intro { min-width: 0; max-width: 100%; }
#work #work-title {
  font-family: var(--display-font);
  font-size: clamp(34px, 4.35vw, 68px);
  line-height: 1.08;
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  text-wrap: nowrap;
  max-width: 100%;
  margin: 0;
}
.collection-heading { align-items: baseline; gap: 22px; }
.collection-heading h3 {
  font-family: var(--display-font);
  min-width: 0;
  font-size: clamp(24px, 2.55vw, 36px);
  line-height: 1.15;
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  text-transform: uppercase;
}
#work .filter {
  font-family: var(--site-font);
  font-size: 14px;
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  text-transform: uppercase;
}
.footer-bottom, .watch-credit,
.watch-details, .watch-kind, .watch-back,
.viewer-hint, .dialog-footer p, .dialog-footer a {
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
}

/* The contact entrance keeps its existing scroll-driven scale and opacity. */
html .contact-main #contact-title {
  font-family: var(--display-font);
  font-size: clamp(64px, 10.5vw, 144px);
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0;
}
.contact-email {
  font-size: clamp(17px, 2vw, 28px);
  font-weight: var(--type-regular);
  letter-spacing: var(--type-tracking);
  line-height: 1.4;
}
.film-dialog .dialog-footer h2 {
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.2;
}
.watch-main h1 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.12;
  max-width: 30ch;
}
.watch-description { line-height: 1.65; }

@media (max-width: 900px) {
  #work .section-heading-row { flex-wrap: wrap; }
  #work #work-title { font-size: clamp(32px, 5.5vw, 48px); }
}

@media (max-width: 600px) {
  :root { --film-title-size: .875rem; }
  .site-header { gap: 10px; }
  html .site-header .wordmark {
    font-size: clamp(13.5px, 4.25vw, 23px);
    line-height: 1.15;
  }
  .site-nav { gap: 12px; }
  .site-nav > a { font-size: 12px; }
  #work .section-heading-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 36px;
  }
  #work .work-intro { max-width: 100%; }
  #work #work-title {
    font-size: clamp(24px, 7.4vw, 36px);
    line-height: 1.12;
    max-width: 100%;
    margin-inline: auto;
  }
  html:not([lang=en]) #work #work-title {
    font-size: clamp(20px, 6.35vw, 36px);
  }
  #work .filters {
    width: min(260px, 100%);
    max-width: 100%;
    margin: 22px auto 0;
  }
  #work .filter { font-size: 14px; padding: 7px 8px; gap: 4px; }
  .collection-heading { gap: 14px; }
  .collection-heading h3 {
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.16;
  }
  html .contact-main #contact-title { font-size: clamp(43px, 13vw, 72px); }
  html:not([lang=en]) .contact-main #contact-title {
    font-size: clamp(34px, 10vw, 58px);
    overflow-wrap: anywhere;
  }
  .contact-email { font-size: clamp(15px, 4.05vw, 19px); }
  .watch-main h1 { font-size: clamp(27px, 7.2vw, 34px); }
  .footer-bottom { font-size: 12px; }
}

/* Long translated navigation still fits the smallest phones in one row. */
@media (max-width: 390px) {
  html[lang=es] .site-header .wordmark { font-size: clamp(12px, 3.8vw, 15px); }
  html[lang=es] .site-nav { gap: 10px; }
  html[lang=es] .site-nav > a { font-size: 11.5px; }
}

/* Native shaping and system glyph fallbacks remain available in all locales. */
html[dir=rtl] *, html[lang=ja] *, html[lang=zh] * {
  letter-spacing: normal !important;
}
html[dir=rtl] #work #work-title,
html[lang=ja] #work #work-title,
html[lang=zh] #work #work-title { max-width: 100%; }