/*
 * Portfolio type system
 * Loaded after each page's local styles so identical content roles keep the
 * same scale, rhythm and minimum readable size across every case study.
 */
:root {
  --type-display: clamp(44px, 7.2vw, 104px);
  --type-page-title: clamp(42px, 5.8vw, 84px);
  --type-section: clamp(34px, 4.2vw, 56px);
  --type-subsection: clamp(26px, 2.8vw, 38px);
  --type-block: clamp(21px, 2vw, 28px);
  --type-card: 18px;
  --type-lead: clamp(17px, 1.45vw, 20px);
  --type-body: 16px;
  --type-secondary: 14px;
  --type-caption: 13px;
  --type-meta: 12px;
  --leading-display: 1.08;
  --leading-heading: 1.25;
  --leading-body: 1.75;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 01 — Navigation and compact controls */
.logo-name,
.mm-link {
  font-size: 16px;
  line-height: 1.4;
}

.nl {
  font-size: 15px;
  line-height: 1.4;
}

.nav-cta,
.back-link {
  font-size: 14px;
  line-height: 1.4;
}

.htag,
.filter-tag,
.scope-chip,
.work-type,
.feature-story-no,
.chain-meta em,
.fb-tag,
.fm-badge,
.delivered-tag {
  font-size: var(--type-meta);
  line-height: 1.35;
}

/* 02 — Hero and section hierarchy */
.hero-h {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: -.035em;
}

.hero h1,
.hero-name {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: -.035em;
}

.wh-title,
.ph-title,
.ab-title,
.contact-title {
  font-size: var(--type-page-title);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.hero-sub {
  font-size: var(--type-lead);
  line-height: 1.65;
}

.hero-bio,
.hero-tagline,
.wh-sub,
.ph-sub,
.ab-intro-text,
.contact-sub,
.sec-lead {
  font-size: var(--type-body);
  line-height: 1.75;
}

.sec-num,
.stmt-label,
.showcase-label,
.next-label,
.ov-k,
.info-k,
.foot-contact-key,
.contribution-no,
.depth-no,
.change-no,
.panel-eyebrow,
.feature-flow-card > span,
.system-card small,
.role-card > span,
.state-group-head > span,
.artifact-type,
.ph-label,
.process-step b,
.logic-card > span,
.screen-state-label,
.motion-loop,
.inline-motion-copy > span {
  font-size: var(--type-meta);
  line-height: 1.5;
  letter-spacing: .1em;
}

.sec-label,
.sec-label-dark,
.pg-eyebrow,
.exp-eyebrow,
.db-eyebrow,
.about-block-en,
.meta-k,
.page-kicker,
.challenge > span,
.ia-node small,
.story-cap > span,
.contacts small,
.contact-badge,
.cm-label {
  font-size: var(--type-meta);
  line-height: 1.5;
  letter-spacing: .1em;
}

.sec-h,
.sec-title,
.case-title,
.foot-cta-h {
  font-size: var(--type-section);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.pg-title,
.exp-title,
.skills-h,
.about-headline,
.sec-h-dark,
.detail-banner .db-title {
  font-size: var(--type-subsection);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.stmt-big,
.section-subtitle,
.showcase-h,
.quote-big {
  font-size: var(--type-subsection);
  line-height: 1.5;
  letter-spacing: -.018em;
}

.stmt-big[style*="font-size:13px"] {
  font-size: var(--type-secondary) !important;
  line-height: 1.7 !important;
}

.section-copy,
.section-lead,
.context-copy > p,
.role-note,
.case-lead,
.panel-lead,
.feature-story-head p,
.depth-copy > p,
.final-copy p,
.overview-intro .section-copy {
  font-size: var(--type-body);
  line-height: 1.8;
}

.meta-v,
.cm-value,
.cf-status,
.live-cta p {
  font-size: var(--type-body);
  line-height: 1.65;
}

/* 03 — Subsections and editorial copy */
.dw-title,
.fb-title,
.feature-story h3,
.depth-copy h3,
.panel-copy h3,
.final-copy h3,
.panel-detail-head h4,
.panel-subtitle,
.page-copy h3,
.next-name {
  line-height: var(--leading-heading);
  letter-spacing: -.025em;
}

.dw-title,
.fb-title,
.panel-detail-head h4,
.panel-subtitle,
.page-copy h3 {
  font-size: var(--type-block);
}

.dw-desc,
.fb-desc,
.opt-desc2,
.page-copy p,
.page-points,
.context-copy p,
.tl-desc,
.proj-desc,
.exp-desc,
.flow-desc {
  font-size: var(--type-body);
  line-height: 1.8;
}

/* 04 — Card titles */
.loop-name,
.product-name,
.contribution-title,
.role-card b,
.state-principle b,
.state-group-head b,
.monitor-copy b,
.app-screen-caption b,
.system-card b,
.feature-flow-card b,
.change-card h5,
.motion-info h3,
.real-section-head h5,
.deep-meta h5,
.screen-state h5,
.inline-motion-copy h5,
.artifact-meta h4,
.artifact-placeholder strong,
.logic-card h4,
.delivered-info h3,
.system-info h3,
.challenge h4,
.process-step span,
.tab-info h3,
.tl-title,
.exp-role {
  font-size: var(--type-card);
  line-height: 1.45;
}

.tl-company {
  font-size: var(--type-block);
  line-height: 1.4;
}

.proj-name {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -.025em;
}


.service-name,
.about-name,
.about-block-title,
.web-name,
.ai-back-title,
.flow-name,
.challenge b,
.ia-node b,
.story-cap b {
  font-size: var(--type-card);
  line-height: 1.45;
}

.work-title {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* 05 — Body and explanatory text */
.loop-desc,
.product-desc,
.contribution-desc,
.role-card p,
.ai-workflow p,
.state-principle p,
.monitor-copy p,
.app-screen-caption span,
.system-card p,
.feature-flow-card p,
.change-card p,
.motion-info p,
.panel-point span,
.panel-detail-head p,
.real-section-head p,
.real-shot-info span,
.deep-meta p,
.screen-state p,
.inline-motion-copy p,
.artifact-meta p,
.artifact-placeholder small,
.logic-card p,
.delivered-info p,
.system-info p,
.challenge p,
.decision,
.state-placeholder p,
.depth-point span,
.chain-node p,
.prob-note {
  font-size: var(--type-secondary);
  line-height: 1.7;
}

.work-tags,
.about-block-text,
.photo-sub,
.tl-role,
.cm-action,
.detail-banner .db-note,
.ia-node p,
.story-cap p,
.page-points li {
  font-size: var(--type-secondary);
  line-height: 1.7;
}

.tl-desc,
.proj-desc,
.flow-desc,
.page-copy p {
  font-size: var(--type-body);
  line-height: 1.8;
}

.panel-point b,
.depth-point b,
.real-shot-info b,
.evidence-placeholder b,
.state-placeholder h4,
.device-state b {
  font-size: 15px;
  line-height: 1.5;
}

.ov-v,
.info-v,
.chain-node b,
.fm-name,
.opt-name2 {
  line-height: 1.45;
}

.ov-v span,
.info-v span,
.quote-by,
.gallery-progress-count,
.ev-lv,
.fm-status,
.lg-item,
.evidence-placeholder span,
.artifact-placeholder .ph-icon,
.state-top {
  font-size: var(--type-caption);
  line-height: 1.6;
}

/* Keep microcopy compact, but never use it for explanatory paragraphs. */
.product-shot::after,
.actual-phone::after,
.panel-phone::after,
.model-board::after,
.state-model::after,
.real-shot-button::after,
.compare-frame::after,
.function-tab::after {
  font-size: 11px;
  line-height: 1.35;
}

/* 06 — Footer */
.foot-cta-en,
.foot-contact-val {
  font-size: var(--type-body);
  line-height: 1.5;
}

.footer-inner span {
  font-size: var(--type-meta);
  line-height: 1.55;
}

/* 07 — Responsive rhythm */
@media (max-width: 900px) {
  :root {
    --type-display: clamp(42px, 10vw, 72px);
    --type-page-title: clamp(40px, 8.8vw, 60px);
    --type-section: clamp(32px, 7vw, 48px);
    --type-subsection: clamp(24px, 4.8vw, 34px);
    --type-block: clamp(21px, 3.2vw, 26px);
  }

  .hero-sub,
  .section-copy,
  .section-lead,
  .context-copy > p,
  .role-note,
  .case-lead,
  .panel-lead,
  .feature-story-head p,
  .depth-copy > p,
  .final-copy p,
  .dw-desc,
  .fb-desc,
  .page-copy p,
  .page-points {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  :root {
    --type-display: clamp(40px, 13vw, 60px);
    --type-page-title: clamp(40px, 11.5vw, 48px);
    --type-section: clamp(31px, 9.5vw, 44px);
    --type-subsection: clamp(23px, 6vw, 31px);
    --type-block: clamp(20px, 5vw, 25px);
    --type-card: 17px;
    --type-body: 16px;
    --type-secondary: 14px;
  }

  .hero-h {
    line-height: 1.1;
    letter-spacing: -.03em;
  }

  .sec-h,
  .case-title,
  .foot-cta-h {
    line-height: 1.18;
  }

  .stmt-big,
  .section-subtitle,
  .showcase-h {
    line-height: 1.45;
  }

  .hero-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .hero-overview .ov-item {
    min-width: 0;
  }

  .sec-num,
  .stmt-label,
  .showcase-label {
    margin-bottom: 12px;
  }

  .section-copy,
  .section-lead,
  .context-copy > p,
  .role-note,
  .case-lead,
  .panel-lead,
  .feature-story-head p,
  .depth-copy > p,
  .final-copy p,
  .dw-desc,
  .fb-desc,
  .page-copy p,
  .page-points {
    line-height: 1.75;
  }
}