/* v59 — Saucer for 2D, Dreidee Sketches for 3D.
   If a font lacks accented lowercase, titles intentionally omit the accent.
   The name lockup is also made slightly larger and more dominant. */
@font-face {
  font-family: 'SaucerBB';
  src: url('assets/fonts/SaucerBb-B1YG.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DreideeSketches';
  src: url('assets/fonts/DreideeSketches.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Make the main name block stand out a bit more than the section titles. */
html body #home .index-name-block h1.index-name-lockup {
  --lockup-fit-width: 520;
  margin-bottom: 14px !important;
}
html body #home .index-name-lockup .name-line-primary {
  font-size: clamp(53px, 5.3vw, 79px) !important;
}
html body #home .index-name-lockup .name-line-secondary {
  margin-top: 14px !important;
  font-size: clamp(49px, 4.9vw, 73px) !important;
}
html body #home .index-name-block .index-alias {
  margin-top: 12px !important;
}

/* Replace the previous SVG-only rules with real font styling. */
html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer,
html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
  display: block !important;
  width: min(100%, 296px) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: .84 !important;
  text-transform: none !important;
  text-wrap: balance;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer {
  font-family: 'SaucerBB', 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(28px, 2.55vw, 40px) !important;
  letter-spacing: .005em !important;
  line-height: .82 !important;
  transform: rotate(-2deg) !important;
}
html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
  font-family: 'DreideeSketches', 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(26px, 2.32vw, 37px) !important;
  letter-spacing: .02em !important;
  line-height: .83 !important;
  transform: rotate(1.2deg) !important;
}
html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer br,
html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee br {
  display:block;
  content:'';
}
/* Keep the small technical label accurate, without tildes where needed. */
html body #home .cat-anim2d > h2.category-title::before {content:'01 / ANIMACION 2D' !important;}
html body #home .cat-anim3d > h2.category-title::before {content:'02 / ANIMACION 3D' !important;}

/* Improve legibility by giving these two cards slightly more title breathing room. */
html body #home .cat-anim2d > h2.category-title,
html body #home .cat-anim3d > h2.category-title {
  right: 12px !important;
}

@media (max-width: 1100px) {
  html body #home .index-name-block h1.index-name-lockup { --lockup-fit-width: 450; }
  html body #home .index-name-lockup .name-line-primary { font-size: clamp(46px, 5.5vw, 69px) !important; }
  html body #home .index-name-lockup .name-line-secondary { font-size: clamp(43px, 5vw, 63px) !important; }
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer { font-size: clamp(26px, 2.8vw, 35px) !important; }
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee { font-size: clamp(24px, 2.55vw, 33px) !important; }
}
@media (max-width: 700px) {
  html body #home .index-name-block h1.index-name-lockup { --lockup-fit-width: 392; margin-bottom: 12px !important; }
  html body #home .index-name-lockup .name-line-primary { font-size: clamp(39px, 10vw, 56px) !important; }
  html body #home .index-name-lockup .name-line-secondary { margin-top: 10px !important; font-size: clamp(35px, 8.9vw, 51px) !important; }
  html body #home .index-name-block .index-alias { margin-top: 9px !important; }
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer,
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    width: min(100%, 254px) !important;
  }
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer {
    font-size: clamp(23px, 6vw, 30px) !important;
  }
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    font-size: clamp(21px, 5.6vw, 28px) !important;
  }
}


/* v60 — larger 2D/3D display titles plus a readable fallback line beneath. */
html body #home .cat-anim2d > h2.category-title,
html body #home .cat-anim3d > h2.category-title {
  right: 10px !important;
}
html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer,
html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
  width: min(100%, 332px) !important;
}
html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer {
  font-size: clamp(34px, 3.1vw, 48px) !important;
  line-height: .8 !important;
}
html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
  font-size: clamp(31px, 2.85vw, 44px) !important;
  line-height: .81 !important;
}
html body #home .cat-anim2d .type-lettering-readable,
html body #home .cat-anim3d .type-lettering-readable {
  display: block !important;
  margin-top: 8px !important;
  font-family: 'IBM Plex Mono', 'Manrope', sans-serif !important;
  font-size: clamp(10px, .82vw, 12px) !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #dbe8ef !important;
  opacity: .92 !important;
  transform: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
html body #home .cat-anim2d .type-lettering-readable { color: #d9eff8 !important; }
html body #home .cat-anim3d .type-lettering-readable { color: #e8edf2 !important; }

@media (max-width: 1100px) {
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer,
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    width: min(100%, 300px) !important;
  }
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer {
    font-size: clamp(31px, 3.3vw, 42px) !important;
  }
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    font-size: clamp(28px, 3vw, 38px) !important;
  }
}

@media (max-width: 700px) {
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer,
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    width: min(100%, 276px) !important;
  }
  html body #home .category-menu > a.cat-anim2d > h2.category-title > .type-lettering.type-lettering-saucer {
    font-size: clamp(27px, 6.9vw, 35px) !important;
  }
  html body #home .category-menu > a.cat-anim3d > h2.category-title > .type-lettering.type-lettering-dreidee {
    font-size: clamp(24px, 6.2vw, 32px) !important;
  }
  html body #home .cat-anim2d .type-lettering-readable,
  html body #home .cat-anim3d .type-lettering-readable {
    margin-top: 6px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }
}


/* v61 — readable backup line for all category cards. */
html body #home .category-title .type-lettering-readable {
  display: block !important;
  margin-top: 7px !important;
  font-family: 'IBM Plex Mono', 'Manrope', sans-serif !important;
  font-size: clamp(10px, .78vw, 12px) !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #dbe8ef !important;
  opacity: .92 !important;
  transform: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
html body #home .cat-art2d .type-lettering-readable { color: #eef2e4 !important; }
html body #home .cat-story .type-lettering-readable { color: #ece6f1 !important; }
html body #home .cat-projects .type-lettering-readable { color: #f1ede5 !important; }

/* Section headings inherit the same type identities as the index titles. */
@font-face {
  font-family: 'SaucerBB';
  src: url('assets/fonts/SaucerBb-B1YG.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DreideeSketches';
  src: url('assets/fonts/DreideeSketches.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html body #workHeading {
  text-transform: none !important;
  text-shadow: none !important;
}
html body #work[data-cat="animation2d"] #workHeading {
  font-family: 'SaucerBB', 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: .9 !important;
  letter-spacing: .005em !important;
}
html body #work[data-cat="animation3d"] #workHeading {
  font-family: 'DreideeSketches', 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(26px, 2.7vw, 39px) !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
}
html body #work[data-cat="art2d"] #workHeading {
  font-family: 'UnifrakturCook', serif !important;
  font-size: clamp(31px, 3vw, 44px) !important;
  line-height: .95 !important;
}
html body #work[data-cat="storyboard"] #workHeading {
  font-family: 'Mea Culpa', cursive !important;
  font-size: clamp(34px, 3.4vw, 47px) !important;
  line-height: .86 !important;
}
html body #work[data-cat="projects"] #workHeading {
  font-family: 'Bangers', 'Black Ops One', sans-serif !important;
  font-size: clamp(29px, 3vw, 42px) !important;
  line-height: .92 !important;
  letter-spacing: .01em !important;
}

@media (max-width: 700px) {
  html body #home .category-title .type-lettering-readable {
    margin-top: 6px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }
  html body #work[data-cat="animation2d"] #workHeading { font-size: clamp(24px, 7vw, 34px) !important; }
  html body #work[data-cat="animation3d"] #workHeading { font-size: clamp(22px, 6.5vw, 31px) !important; }
  html body #work[data-cat="art2d"] #workHeading { font-size: clamp(25px, 7.1vw, 35px) !important; }
  html body #work[data-cat="storyboard"] #workHeading { font-size: clamp(27px, 7.4vw, 37px) !important; }
  html body #work[data-cat="projects"] #workHeading { font-size: clamp(24px, 6.8vw, 34px) !important; }
}