/* Site typography system: Poppins everywhere (Sept 2026).
   Loaded once per page from Google Fonts (css2, display=swap) with only
   300/400/500/600 upright and 300/400/500 italic.

   Principle: hierarchy comes from scale, spacing and placement; weight gets
   lighter as type gets larger. Weights used:
     300  hero words, huge display words and titles, secondary body copy
     400  large statements, large headings, body copy, overlay nav links
     500  small headings, labels, navigation, buttons, large numbers
     600  only for <b>/<strong> and tiny emphasis
   This file overrides the mirrored Lioré template stylesheet and the two
   scoped section stylesheets (Dario, Allex); the icon font (webflow-icons)
   is left untouched. */

/* ---------------------------------------------------------------- global */
:root,
body {
  --font--primary-font: "Poppins", sans-serif;
  --font--second-font: "Poppins", sans-serif;
  --font-weight--400: 400;
  --font-weight--500: 500;
  --font-weight--600: 500; /* the template used 600 as its heading weight */
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep Webflow's icon glyphs on their own font. */
[class^="w-icon-"],
[class*=" w-icon-"] {
  font-family: "webflow-icons" !important;
}

h1 { font-weight: 300; }
h2 { font-weight: 400; }
h3, h4, h5, h6 { font-weight: 500; }
p { font-weight: 400; line-height: 1.55; }
blockquote { font-weight: 300; font-style: italic; }
b, strong { font-weight: 600; }

/* ------------------------------------------------------------- hero words */
.hero .title-1 {
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.93;
}

/* The clipped line box in site.css assumed the template's 0.85 line-height;
   with 0.93 plus the 0.18em padding above and below it is 1.29 × font size. */
@media screen and (min-width: 992px) {
  .hero .heading-main {
    height: calc(var(--main-title) * 1.29);
  }
}

/* -------------------------------------------------- header and navigation */
.sub-logo-text {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.menu-text-wrapper,
.navigation-link,
.number-text,
.navlinks {
  font-weight: 500;
}

/* Overlay links are huge (h1 size): Regular. */
.navigation-text {
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------- hero metadata */
.top-text {
  font-weight: 400;
}

/* ----------------------------------------------- large display and titles */
/* .page-title is the template's giant title style (h1 size). */
.page-title {
  font-weight: 300;
  letter-spacing: -0.035em;
}

/* Point of View statement (h2 size). */
.page-title.flex.second {
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* Small context text that shares the .page-title class. */
.page-title.flex.third {
  font-weight: 400;
  letter-spacing: 0;
}

.display-1,
.display-2 {
  font-weight: 400;
  letter-spacing: -0.03em;
}

.display-1.second._1-7-rem,
.display-1.second._1-7-rem.smaller,
.display-2.second._1-4-rem {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.text-rotator-big {
  font-weight: 300;
  letter-spacing: -0.035em;
}

.subhead {
  font-weight: 400;
}

.subhead-main,
.blog-main-wrapper,
.licensing-title,
.project-small-title.biger {
  font-weight: 500;
}

/* Small uppercase labels: medium with a little positive tracking. */
.subhead-main.for-footer-title,
.project-small-title.lighter,
.caption,
.caption.margined,
.project-circle {
  font-weight: 500;
  letter-spacing: 0.06em;
}

.caption.margined._2 {
  letter-spacing: 0;
}

/* ------------------------------------------------------ buttons and CTAs */
.button,
.button-main,
.button-with-line,
.button-with-animation,
.button-first-line {
  font-weight: 500;
}

.button-with-animation {
  letter-spacing: 0.04em;
}

/* ------------------------------------------------- Point of View numbers */
.section.gray .pov-years .pov-years__number {
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.section.gray .pov-years .pov-years__label {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------ In Numbers (Allex) */
.allex-sections {
  font-family: "Poppins", sans-serif;
}

.allex-sections .section__title {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.allex-sections .counter__number,
.allex-sections .counter__number.counter {
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.allex-sections .counter__title,
.allex-sections .counter__suffix {
  font-weight: 500;
}

.allex-sections .section__description {
  font-weight: 400;
  line-height: 1.6;
}

/* Supporting copy under the metrics: light on larger screens, regular on phones. */
.allex-sections .text__dark:not(.counter__suffix) {
  font-weight: 300;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .allex-sections .text__dark:not(.counter__suffix) {
    font-weight: 400;
  }
}

/* ------------------------------------------------------- Dario sections */
.dario-sections {
  --font-family--font-family-text: "Poppins", sans-serif;
  --font-family--font-family-header: "Poppins", sans-serif;
  --_typhography---font-weight--300: 300;
  --_typhography---font-weight--400: 400;
  --_typhography---font-weight--600: 500;
  --_typhography---font-weight--700: 400;
  font-family: "Poppins", sans-serif;
}

.dario-sections h2 {
  font-weight: 400;
}

/* Huge titles ("Client Feedback", "Design Vision"). */
.dario-sections .text-xl,
.dario-sections .text-xl._700,
.dario-sections .wrapper-title-cta {
  font-weight: 300;
  letter-spacing: -0.03em;
}

/* Large section heading ("Growing Through Creative Challenges") and dates. */
.dario-sections .text-m,
.dario-sections .text-ms,
.dario-sections .year-career {
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Body-sized text: quotes, roles, descriptions. */
.dario-sections .text-s,
.dario-sections .text-s._400,
.dario-sections .text-xs._400,
.dario-sections .text-xxs {
  font-weight: 400;
  letter-spacing: 0;
}

/* Labels and small emphasis: names, company tags, social links, CTA. */
.dario-sections .block-designation .text-xs,
.dario-sections .tag-company-work .text-xxs,
.dario-sections .text-link-social .text-xs,
.dario-sections .cta-button .text-xs,
.dario-sections .cta-button .text-xs._400 {
  font-weight: 500;
}

/* ------------------------------------------- responsive audit adjustments */
/* Hero words on tablets and phones: the template jumps between fixed sizes
   (12rem / 10rem / 7rem) that let "Joyjeet" fill 90% of the line at 768px
   and overflow it below 500px. Fluid sizes keep it at roughly 70-85%. */
@media screen and (max-width: 991px) {
  .hero .title-1 {
    --main-title: clamp(9rem, 20vw, 12rem);
  }
}

@media screen and (max-width: 767px) {
  .hero .title-1 {
    --main-title: clamp(7rem, 22vw, 10rem);
  }
}

@media screen and (max-width: 479px) {
  .hero .title-1 {
    --main-title: clamp(5rem, 22vw, 7rem);
  }
}

/* Dario sections size text in vw; on tablets that falls below comfortable
   reading size. Floors for the small text sizes. */
.dario-sections .text-xxs {
  font-size: max(var(--_typhography---font-xxs--size-xxs), 12px);
  line-height: max(var(--_typhography---font-xxs--height-xxs), 1.6em);
}

.dario-sections .text-xs {
  font-size: max(var(--_typhography---font-xs--size-xs), 13px);
}

.dario-sections .text-s {
  font-size: max(var(--_typhography---font-s--size-s), 14px);
  line-height: max(var(--_typhography---font-s--height-s), 1.3em);
}