@import url("./media-constraints.css");
@import url("./contact-form.css");

:root {
  --type-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-track-brand: -.02em;
  --type-track-hero: -.04em;
  --type-track-section: -.035em;
  --type-track-title: -.025em;
  --type-track-body-lg: -.015em;
  --type-track-label: .1em;
  --type-leading-hero: .9;
  --type-leading-section: .96;
  --type-leading-title: 1.06;
  --type-leading-body-lg: 1.48;
  --type-leading-body: 1.6;
  --type-leading-label: 1.3;
}

html {
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--type-font-sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.brand {
  font-family: var(--type-font-sans);
  line-height: 1;
  letter-spacing: var(--type-track-brand);
}

/* One display voice across home, archives and case studies. */
body .hero h1,
body .project-hero h1,
body .hero-main h1 {
  font-family: var(--type-font-sans);
  font-weight: 400;
  line-height: var(--type-leading-hero);
  letter-spacing: var(--type-track-hero);
  text-wrap: balance;
}

body .work-heading h2,
body .selected-heading h2,
body .gallery-head h2,
body .taf-heading h2,
body .contact h2,
body .about-statement,
body .approach-statement,
body .archive-note p,
body .ai-note p,
body .project-copy-main > p,
body .statement,
body .section-head h2,
body .chapter h2,
body .credits-head h2,
body .finale-head h2,
body .chapter-title h2,
body .process-head h2,
body .intro-copy > p:first-child {
  font-family: var(--type-font-sans);
  font-weight: 400;
  line-height: var(--type-leading-section);
  letter-spacing: var(--type-track-section);
  text-wrap: balance;
}

body .showreel-head h2,
body .project-info h3,
body .archive-link-row .text-link,
body .work-copy h2,
body .preview-title,
body .project h2,
body .section-head p,
body .hero-lede,
body .motion-copy p,
body .feature-copy p,
body .sequence-title h3,
body .process-statement,
body .project-nav strong {
  font-family: var(--type-font-sans);
  font-weight: 400;
  line-height: var(--type-leading-title);
  letter-spacing: var(--type-track-title);
  text-wrap: balance;
}

body .project-end-link,
body .contact-link,
body .contact-email {
  font-family: var(--type-font-sans);
  font-weight: 400;
  line-height: .96;
  letter-spacing: var(--type-track-hero);
  overflow-wrap: anywhere;
}

body .hero-intro,
body .hero-main p,
body .hero-intro > p,
body .chapter-title p,
body .project-description,
body .approach-copy > p {
  line-height: var(--type-leading-body-lg);
  letter-spacing: var(--type-track-body-lg);
  text-wrap: pretty;
}

body .taf-copy,
body .about-copy p,
body .intro-body p,
body .intro-columns p,
body .copy-block p,
body .process-card p,
body .chapter-copy p,
body .credit dd,
body .disclaimer,
body .motion-note,
body .process-note {
  line-height: var(--type-leading-body);
  letter-spacing: 0;
  text-wrap: pretty;
}

body .header-role,
body .section-label,
body .availability,
body .mode-switch,
body .hero-kicker,
body .archive-heading,
body .projects-heading,
body .project-number,
body .project-index,
body .project-type,
body .project-discipline,
body .work-number,
body .work-copy p,
body .preview-caption,
body .note-label,
body .contact-label,
body .header-title,
body .fact span:first-child,
body .fact dt,
body .project-copy-label,
body .copy-block h2,
body .chapter-copy h3,
body .intro-columns h2,
body .process-card h3,
body .chapter-index,
body .media-caption,
body .media-block figcaption,
body .media figcaption,
body .motion-frame figcaption,
body .motion-card figcaption,
body .trailer-caption,
body .motion-copy span,
body .feature-copy span,
body .sequence-title span,
body .player-meta,
body .player-fallback,
body .credit dt,
body .project-nav span,
body .project-nav .all-work,
body .all-work,
body .project-end-label,
body .tool-list li,
body .capability span,
body .meta-row span:first-child,
body .project-link,
body .ai-note-label,
body .hero-tags span,
body .hero-top,
body .footer-row,
body .end-footer {
  font-family: var(--type-font-sans);
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 500;
  line-height: var(--type-leading-label);
  letter-spacing: var(--type-track-label);
}

body .hero-media::after,
body .hero-image::after {
  font-family: var(--type-font-sans);
  font-size: 10px;
  line-height: var(--type-leading-label);
  letter-spacing: var(--type-track-label);
}

h1, h2, h3, p, a, button, dt, dd, figcaption {
  hanging-punctuation: first last;
}

.type-nowrap { white-space: nowrap; }

/* Continuous responsive scale: layout can switch without type jumping. */
.brand { font-size: 17px; }
.nav a, .header-title, .header-back, .mode-switch { line-height: 1; }
.work-number, .preview-index, .project-number, .project-index, .chapter-number,
.fact, .credit, .meta-row { font-variant-numeric: tabular-nums; }
.hero-caption span + span, figcaption span + span { text-align: right; }
body .media-caption,
body .media-block figcaption,
body .motion-frame figcaption,
body .motion-card figcaption,
body .media figcaption,
body .trailer-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
body .media-caption span,
body .media-block figcaption span,
body .motion-frame figcaption span,
body .motion-card figcaption span,
body .media figcaption span,
body .trailer-caption span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-home #hero-title { font-size: clamp(72px, 10.4vw, 108px); }
.page-home .showreel-head h2 { font-size: clamp(52px, 5vw, 78px); }
.page-home #work-heading-title { font-size: clamp(108px, 11vw, 170px); }
.page-home .project-info h3 { font-size: clamp(31px, 2.4vw, 36px); }
.page-home .contact-email { font-size: clamp(50px, 6vw, 92px); }

.page-work-archive #page-title,
.page-ai-archive #page-title { font-size: clamp(110px, 15vw, 230px); }
.page-work-archive .work-copy h2 { font-size: clamp(39px, 3.05vw, 48px); }
.page-ai-archive .ai-note p { font-size: clamp(42px, 5.5vw, 86px); }
.page-work-archive .contact-link,
.page-ai-archive .contact-link { font-size: clamp(72px, 9vw, 145px); max-width: 100%; }

.page-ai-landing #page-title { font-size: clamp(62px, 5.95vw, 101px); }
.page-ai-landing #selected-heading-title { font-size: clamp(82px, 9.4vw, 150px); }
.page-ai-landing .contact-email { font-size: clamp(50px, 6vw, 94px); }

.page-showreel #project-title { font-size: clamp(72px, 14vw, 210px); }
.page-showreel #gallery-title { font-size: clamp(54px, 8vw, 124px); }
.page-showreel .project-end-link { font-size: clamp(58px, 10vw, 160px); }

.page-form-function-fun #project-title { font-size: clamp(84px, 9.2vw, 148px); }
.page-nachtstuck #project-title { font-size: clamp(64px, 8.8vw, 156px); }
.page-acetato #project-title { font-size: clamp(68px, 9.2vw, 164px); }
.page-symbiose #project-title { font-size: clamp(66px, 8.6vw, 156px); }
.page-chaser #project-title { font-size: clamp(78px, 10.2vw, 176px); }
.page-omega-speedmaster #project-title { font-size: clamp(64px, 7.6vw, 132px); }

.page-paladino #page-title { font-size: clamp(60px, 13vw, 210px); }
.page-hellmarch #page-title { font-size: clamp(56px, 12.8vw, 205px); }
.page-paladino .chapter-title h2,
.page-hellmarch .chapter-title h2 { font-size: clamp(54px, 7.6vw, 122px); }
.page-paladino .process-head h2,
.page-hellmarch .process-head h2 { font-size: clamp(52px, 7vw, 112px); }
.page-paladino .project-end-link,
.page-hellmarch .project-end-link { font-size: clamp(58px, 10vw, 160px); }
.page-paladino .intro-copy > p:first-child,
.page-hellmarch .intro-copy > p:first-child { font-size: clamp(30px, 5.2vw, 82px); line-height: 1.08; }
.page-paladino .process-statement,
.page-hellmarch .process-statement { font-size: clamp(30px, 4.3vw, 68px); line-height: 1.1; }

.page-dell-hub #project-title { font-size: clamp(96px, 9vw, 168px); }
.page-toki-no-sumi #project-title { font-size: clamp(88px, 8.7vw, 162px); }

@media (max-width: 700px) {
  .page-ai-landing #selected-heading-title { font-size: clamp(64px, 20vw, 82px); }
  .page-ai-landing .contact-email { font-size: clamp(34px, 10.2vw, 50px); }
  .page-dell-hub #project-title { font-size: clamp(74px, 23vw, 96px); }
  .page-toki-no-sumi #project-title { font-size: clamp(70px, 21vw, 88px); }
}

@media (max-width: 680px) {
  .page-home #hero-title { font-size: clamp(44px, 14vw, 72px); }
  .page-home .showreel-head h2 { font-size: 52px; }
  .page-home #work-heading-title { font-size: clamp(76px, 25vw, 108px); }
  .page-home .project-info h3 { font-size: 31px; }
  .page-home .contact-email { font-size: clamp(34px, 10.2vw, 50px); }
}

@media (max-width: 620px) {
  .page-work-archive #page-title,
  .page-ai-archive #page-title { font-size: clamp(76px, 27vw, 110px); }
  .page-work-archive .work-copy h2 { font-size: 39px; }
  .page-ai-archive .ai-note p { font-size: 42px; }
  .page-work-archive .contact-link,
  .page-ai-archive .contact-link { font-size: clamp(42px, 13.5vw, 72px); }
  .page-form-function-fun #project-title { font-size: clamp(68px, 21.5vw, 84px); }
  .page-nachtstuck #project-title { font-size: clamp(52px, 15.8vw, 72px); }
  .page-acetato #project-title { font-size: clamp(54px, 18vw, 76px); }
  .page-symbiose #project-title { font-size: clamp(52px, 16.3vw, 72px); }
  .page-chaser #project-title { font-size: clamp(58px, 19vw, 82px); }
  .page-omega-speedmaster #project-title { font-size: clamp(51px, 16.2vw, 72px); }
}

@media (min-width: 2200px) {
  .page-home .hero h1 {
    width: 100%;
    max-width: none;
    font-size: clamp(108px, calc(27.512px + 3.6585vw), 168px);
  }
  .page-home .showreel-head h2 { font-size: clamp(78px, calc(53.854px + 1.0976vw), 96px); }
  .page-home #work-heading-title { font-size: clamp(170px, calc(102.927px + 3.0488vw), 220px); }
  .page-home .project-info h3 { font-size: clamp(36px, calc(27.951px + .3659vw), 42px); }
  .page-home .taf-heading h2 { font-size: clamp(102px, calc(64.439px + 1.7073vw), 130px); }
  .page-home .about-statement { font-size: clamp(88px, calc(55.805px + 1.4634vw), 112px); }
  .page-home .contact h2 { font-size: clamp(140px, calc(86.341px + 2.439vw), 180px); }
  .page-home .contact-email { font-size: clamp(92px, calc(65.171px + 1.2195vw), 112px); }

  .page-ai-landing .hero h1 {
    width: 100%;
    max-width: none;
    font-size: clamp(101px, calc(13.805px + 3.9634vw), 166px);
  }
  .page-ai-landing #selected-heading-title { font-size: clamp(150px, calc(64.146px + 3.9024vw), 214px); }
  .page-ai-landing .project-info h3 { font-size: clamp(52px, calc(33.22px + .8537vw), 66px); }
  .page-ai-landing .hero-intro { font-size: clamp(25px, calc(12.927px + .5488vw), 34px); }
  .page-ai-landing .approach-statement { font-size: clamp(102px, calc(53.707px + 2.1951vw), 138px); }
  .page-ai-landing .approach-copy > p { font-size: clamp(25px, calc(15.61px + .4268vw), 32px); }
  .page-ai-landing .contact h2 { font-size: clamp(142px, calc(66.878px + 3.4146vw), 198px); }
  .page-ai-landing .contact-email { font-size: clamp(94px, calc(59.122px + 1.5854vw), 120px); }

  .page-nachtstuck #project-title { font-size: clamp(156px, calc(83.512px + 3.2927vw), 210px); }
  .page-nachtstuck .hero-lede { font-size: clamp(36px, calc(26.61px + .4268vw), 43px); }
  .page-nachtstuck .statement { font-size: clamp(112px, calc(93.22px + .8537vw), 126px); }
  .page-nachtstuck .chapter h2 { font-size: clamp(106px, calc(92.585px + .6098vw), 116px); }

  .page-acetato #project-title { font-size: clamp(164px, calc(86.195px + 3.5366vw), 222px); }
  .page-acetato .hero-lede { font-size: clamp(36px, calc(26.61px + .4268vw), 43px); }
  .page-acetato .statement { font-size: clamp(112px, calc(93.22px + .8537vw), 126px); }
  .page-acetato .chapter h2 { font-size: clamp(106px, calc(92.585px + .6098vw), 116px); }

  .page-symbiose #project-title { font-size: clamp(156px, calc(83.512px + 3.2927vw), 210px); }
  .page-symbiose .hero-lede { font-size: clamp(36px, calc(26.61px + .4268vw), 43px); }
  .page-symbiose .statement { font-size: clamp(112px, calc(93.22px + .8537vw), 126px); }
  .page-symbiose .chapter h2,
  .page-symbiose .finale-head h2 { font-size: clamp(106px, calc(92.585px + .6098vw), 116px); }

  .page-chaser #project-title { font-size: clamp(176px, calc(91.756px + 3.8293vw), 239px); }
  .page-chaser .hero-lede { font-size: clamp(36px, calc(26.61px + .4268vw), 43px); }
  .page-chaser .statement { font-size: clamp(112px, calc(93.22px + .8537vw), 126px); }
  .page-chaser .chapter h2 { font-size: clamp(106px, calc(92.585px + .6098vw), 116px); }

  .page-omega-speedmaster #project-title { font-size: clamp(132px, calc(57.561px + 3.3854vw), 188px); }
  .page-omega-speedmaster .hero-lede { font-size: clamp(34px, calc(24.61px + .4268vw), 41px); }
  .page-omega-speedmaster .statement { font-size: clamp(112px, calc(93.22px + .8537vw), 126px); }
  .page-omega-speedmaster .chapter h2 { font-size: clamp(106px, calc(92.585px + .6098vw), 116px); }

  .page-dell-hub #project-title { font-size: clamp(168px, calc(98.244px + 3.1707vw), 220px); }
  .page-dell-hub .hero-lede { font-size: clamp(36px, calc(25.268px + .4878vw), 44px); }
  .page-dell-hub .statement { font-size: clamp(110px, calc(88.537px + .9756vw), 126px); }
  .page-dell-hub .chapter h2 { font-size: clamp(104px, calc(87.902px + .7317vw), 116px); }
  .page-dell-hub .intro-body p { font-size: clamp(22px, calc(19.317px + .122vw), 24px); }

  .page-toki-no-sumi #project-title { font-size: clamp(162px, calc(86.878px + 3.4146vw), 218px); }
  .page-toki-no-sumi .hero-lede { font-size: clamp(36px, calc(26.61px + .4268vw), 43px); }
  .page-toki-no-sumi .statement { font-size: clamp(112px, calc(90.537px + .9756vw), 128px); }
  .page-toki-no-sumi .chapter h2 { font-size: clamp(106px, calc(89.902px + .7317vw), 118px); }
  .page-toki-no-sumi .intro-body p { font-size: clamp(22px, calc(19.317px + .122vw), 24px); }
}

@media (max-width: 720px) {
  :root {
    --type-track-hero: -.035em;
    --type-track-section: -.03em;
    --type-leading-hero: .94;
    --type-leading-section: 1;
    --header-h: 66px;
  }

  .brand { font-size: 15px; }
  .page-ai-landing #page-title { font-size: clamp(43px, 13.2vw, 58px); }

  body .project-end-link,
  body .contact-link,
  body .contact-email {
    line-height: 1;
    letter-spacing: -.03em;
  }
}

@media (max-width: 700px) {
  .page-dell-hub #overview-title {
    font-size: clamp(34px, calc(22.211px + 3.6842vw), 48px);
    text-wrap: pretty;
  }

  .page-toki-no-sumi #overview-title {
    font-size: clamp(38px, calc(20.444px + 4.5016vw), 52px);
  }

  .page-toki-no-sumi .chapter h2 {
    font-size: clamp(37px, calc(26.081px + 3.4121vw), 50px);
  }

  .page-toki-no-sumi #credits-title {
    font-size: clamp(34px, calc(20.562px + 4.1995vw), 50px);
  }
}

@media (max-width: 760px) {
  .page-hellmarch .chapter-title h2 {
    font-size: clamp(39px, calc(25.327px + 4.2727vw), 57.8px);
  }
}

@media (min-width: 391px) and (max-width: 760px) {
  .page-paladino .sequence-title h3 {
    font-size: clamp(36px, calc(33.881px + .542vw), 38px);
  }
}

@media (max-width: 620px) {
  .page-work-archive .contact-link,
  .page-ai-archive .contact-link {
    font-size: clamp(38px, calc(2.56px + 11.2vw), 72px);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .page-showreel #overview-title {
    font-size: clamp(29px, calc(-3px + 10vw), 36px);
    text-wrap: pretty;
  }

  .page-form-function-fun .chapter-head {
    grid-template-columns: 1fr;
  }

  .page-form-function-fun .chapter h2,
  .page-form-function-fun .chapter-copy {
    grid-column: 1;
  }

  .page-form-function-fun .chapter h2 {
    max-width: none;
    font-size: clamp(38px, calc(27.755px + 2.6201vw), 44px);
  }

  body .media-caption,
  body .media-block figcaption,
  body .motion-frame figcaption,
  body .motion-card figcaption,
  body .media figcaption,
  body .trailer-caption {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 390px) {
  .page-form-function-fun .chapter h2 {
    font-size: clamp(32px, calc(4.571px + 8.5714vw), 38px);
  }

  .page-paladino .sequence-title h3 {
    font-size: clamp(28px, calc(-8.571px + 11.4286vw), 36px);
  }
}

@media (min-width: 721px) {
  :root { --header-h: 76px; }
}

@media (max-width: 340px) {
  body .hero h1 span,
  body .project-hero h1 span,
  body .hero-main h1 span { white-space: normal; }
}

@media (max-width: 420px) {
  .page-dell-hub .chapter h2 { font-size: clamp(32px, 11vw, 46px); }
  .page-acetato .chapter h2 { font-size: clamp(36px, 12vw, 47px); }
  .page-omega-speedmaster #project-title { font-size: clamp(48px, 15.4vw, 64px); }
  .page-omega-speedmaster .chapter h2 { font-size: clamp(38px, 11.6vw, 47px); }
  .page-hellmarch #overview-title { font-size: clamp(29px, calc(24.429px + 1.4286vw), 30px); }
  .page-toki-no-sumi #overview-title {
    font-size: clamp(31px, calc(-1px + 10vw), 38px);
  }

  .page-toki-no-sumi #overview-title .type-nowrap { white-space: nowrap; }
  .page-toki-no-sumi .chapter-head { grid-template-columns: 1fr; }
  .page-toki-no-sumi .chapter h2,
  .page-toki-no-sumi .chapter-copy { grid-column: 1; }
  .page-toki-no-sumi .chapter h2 {
    max-width: none;
  }
}