/* EISKAL typography (pass 5): the typography system of the reference https://naya-studio-dubai.webflow.io/,
   taken from its live stylesheet (naya-studio-dubai.webflow.shared.c44151af9.css) and computed styles.
   Families: Helvetica Neue (100 / 400 / 500 used by the reference) + Carl Brown (accent letters and words).
   Both are commercial typefaces. They are NOT copied from the reference; they resolve from
   (1) licensed EISKAL files in site/fonts/ (an @font-face block is added by tools/build-site.ps1 only when the files exist),
   (2) a locally installed copy (Helvetica Neue ships with macOS / iOS),
   (3) the reference's own fallback: Arial, sans-serif.
   Sizes are the reference's vw tokens. Floors/caps (marked) are the only deviations, for legibility on narrow desktops and tablets. */
:root{
  --ff-helv:"EISKAL Helvetica Neue","Helvetica Neue",Arial,sans-serif;          /* reference: Helvetica Neue, Arial, sans-serif */
  --ff-carl:"EISKAL Carl Brown","Carl Brown";                                    /* reference: Carl Brown, Arial, sans-serif */
  /* Reduced, consistent scale (≈1.36 ratio). Values at 1440px: 11 / 15 / 20 / 28 / 56 / 72 px.
     Previous reference values (10.5 / 18 / 24.6 / 41.8 / 105 / 105) are in eiskal-type.before-sizes.css.bak */
  --t-small:clamp(10px,.76vw,12px);    /* nav, buttons, labels, metadata */
  --t-medium:clamp(13px,1.04vw,16px);  /* paragraphs */
  --t-large:clamp(16px,1.39vw,21px);   /* leads, card titles, process steps */
  --h-small:clamp(22px,1.94vw,30px);   /* service and space titles */
  --h-medium:clamp(36px,3.9vw,64px);   /* section titles, statement, contact title */
  --h1:clamp(44px,5vw,84px);           /* hero title */
  --lh-small:110.6%;--lh-text:115%;--lh-hs:86%;--lh-hm:80%;--lh-h1:79%;
}
@media (max-width:991px){       /* reference breakpoint 991px; caps (min) keep tablets from inheriting phone-scale vw sizes */
  :root{
    /* same ratio as desktop; values at 390px: 11 / 13 / 15 / 18 / 22 / 34 / 45 px */
    --t-small:clamp(10px,2.8vw,12px);
    --t-body:clamp(12px,3.4vw,15px);
    --t-medium:clamp(13px,3.8vw,16px);
    --t-large:clamp(15px,4.6vw,20px);
    --h-small:clamp(20px,5.6vw,28px);
    --h-medium:clamp(30px,8.6vw,48px);
    --h1:clamp(38px,11.5vw,64px);
  }
}

/* ---------- Base: the reference sets the whole body in Helvetica Neue 400, uppercase ---------- */
html body{font-family:var(--ff-helv);font-weight:400;text-transform:uppercase;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html body input,html body select,html body textarea,html body button{font-family:var(--ff-helv)}

/* ---------- Small text: navigation, buttons, labels, metadata (reference .text-small / .link-text) ---------- */
html body .nav-links a,html body .nav .btn,html body .btn,html body .menu-btn,html body .modal .close,html body .detail-close,
html body .eyebrow,html body #about .founder .founder-role,html body .hero-topline,html body .hero-topline span,html body .hero-eyebrow,html body .hero-cta,html body .hero-link,html body .hero-scroll-cue,
html body .marquee span,html body .about-note,html body .founder-role,html body .portfolio-controls .filter,html body .project-meta,html body .project-year,
html body .footer,html body .footer a,html body .footer span,html body .field label,html body .contact-item .label,
html body .project-detail .detail-hero-copy .eyebrow,html body .project-detail .detail-hero-copy .detail-loc,
html body .project-detail .detail-hero-copy .detail-overview h2,html body .project-detail .detail-spec dt,
html body .dg-index,html body .dg-index-nav a,html body .detail-navigation small,html body .brief-status,html body .plus{
  font-family:var(--ff-helv);font-size:var(--t-small);font-weight:400;line-height:var(--lh-small);letter-spacing:normal;text-transform:uppercase}
@media (max-width:991px){
  html body .nav-links a,html body .menu-btn,html body .modal .close,html body .detail-close,html body .footer a{font-size:var(--t-body)}
}

/* ---------- Paragraphs (reference .text-medium: 1.25vw / 115%, uppercase) ---------- */
html body .about-copy p.secondary,html body .service-desc,html body .statement-foot p,html body .portfolio-intro p,
html body .process-intro p,html body .step p,html body .contact-item address,html body .contact-item a,html body .modal .sub,
html body .brief-note,html body .brief-note a,html body .dg-head p,
html body .project-detail .detail-hero-copy .detail-overview p,html body .project-detail .detail-spec dd,
html body .field input,html body .field select,html body .field textarea{
  font-family:var(--ff-helv);font-size:var(--t-medium);font-weight:400;font-style:normal;line-height:var(--lh-text);letter-spacing:normal;text-transform:uppercase}
html body .project-detail .detail-hero-copy .detail-concept{font-style:normal;opacity:.72}

/* ---------- Lead text and card titles (reference .text-large: 1.71vw / 115%) ---------- */
html body .about-copy p:first-child,html body .contact-cta p,html body .project-card h3,html body .step h3,html body #about .founder .founder-name,html body .detail-navigation button{
  font-family:var(--ff-helv);font-size:var(--t-large);font-weight:400;line-height:var(--lh-text);letter-spacing:normal;text-transform:uppercase}

/* ---------- Headings ---------- */
/* Hero: reference h1.h1.has--weight-light: 7.3vw, weight 200, lh 79%, letter-spacing 0, uppercase */
html body .hero.hero-scroll h1.hero-title{font-family:var(--ff-helv);font-size:var(--h1);font-weight:300;line-height:var(--lh-h1);letter-spacing:0;text-transform:uppercase;white-space:normal}
html body .hero.hero-scroll h1.hero-title > span{display:block;font:inherit;letter-spacing:inherit}
html body .hero.hero-scroll h1.hero-title .ty-word{display:inline-block;font:inherit}
@media (min-width:992px){html body .hero.hero-scroll h1.hero-title > span:first-child{white-space:nowrap}}
html body .hero.hero-scroll h1.hero-title .ty-word .has--font-carl{display:inline;font-family:var(--ff-carl),var(--ff-helv);font-size:inherit;line-height:inherit}
/* Section headings: reference .heading-medium: 7.3vw, weight 100, lh 80%, uppercase */
html body .section-title,html body .contact-title,html body .statement blockquote,html body .modal h2{
  font-family:var(--ff-helv);font-size:var(--h-medium);font-weight:300;font-style:normal;line-height:var(--lh-hm);letter-spacing:normal;text-transform:uppercase}
html body .contact-title > .ty-word{font-style:normal;color:inherit}   /* original ".contact-title span" (italic, muted) must not catch the word spans */
/* Service and space titles: reference .heading-small: 2.9vw, weight 100, lh 86% */
html body #services .service h3,html body .service h3,html body .dg-head h3{font-family:var(--ff-helv);font-size:var(--h-small);font-weight:300;line-height:var(--lh-hs);letter-spacing:normal;text-transform:uppercase}
/* Project title on the detail page: heading-medium family/weight/leading at 62% size (adaptation: long names in a half-width column) */
html body .project-detail .detail-hero-copy h1{font-family:var(--ff-helv);font-size:calc(var(--h-medium)*.8);font-weight:300;line-height:var(--lh-hm);letter-spacing:normal;text-transform:uppercase;overflow-wrap:anywhere}
@media (max-width:991px){html body .project-detail .detail-hero-copy h1{font-size:var(--h-medium)}}

/* ---------- Accents: the reference sets single letters and words in Carl Brown inside Helvetica headings ---------- */
/* Accent words (EISKAL's existing <em> / serif spans). Until Carl Brown is licensed they keep EISKAL's serif italic. */
html body .section-title em,html body .hero.hero-scroll h1.hero-title .hero-title-serif,html body .contact-title > span:not(.ty-word),html body .statement blockquote > span{
  font-family:var(--ff-carl),var(--serif);font-size:inherit;line-height:inherit;font-weight:400;font-style:italic;text-transform:none;letter-spacing:normal}
html.has-carl body .section-title em,html.has-carl body .hero.hero-scroll h1.hero-title .hero-title-serif,html.has-carl body .contact-title > span:not(.ty-word),html.has-carl body .statement blockquote > span{font-style:normal}
/* Accent letters (reference span.has--font-carl): only visible when Carl Brown is present, otherwise identical to the heading. */
html body .has--font-carl{font:inherit}   /* identical to the word around it unless Carl Brown is actually loaded */
html.has-carl body .has--font-carl{font-family:var(--ff-carl),var(--ff-helv);font-weight:400;font-style:normal}

/* ---------- Reference text animations (letters-blur-in words / animate-p lines), reduced-motion safe ---------- */
.ty-word{display:inline-block;white-space:pre}
.ty-anim .ty-word{opacity:0;filter:blur(.8vw);transform:scale(.95);transition:opacity 1.8s cubic-bezier(.45,0,.55,1),filter 1.8s cubic-bezier(.45,0,.55,1),transform 1.8s cubic-bezier(.45,0,.55,1)}
.ty-anim.ty-in .ty-word{opacity:1;filter:none;transform:none}
.ty-lines .ty-line{opacity:0;transition:opacity .8s cubic-bezier(.55,0,1,.45)}
.ty-lines.ty-in .ty-line{opacity:1}
@media (prefers-reduced-motion:reduce){.ty-anim .ty-word,.ty-lines .ty-line{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}}