/* FRAME / v6 typography proposal.
 * Load after style.css, vfx.css, film-travel.css and hover-motion.css.
 * Copy this file to dist/type.css and the adjacent assets/fonts/ to dist/assets/fonts/.
 * Typography only: no reel sticky, transform, scroll, width, height or motion rules.
 * Keep the existing semantic text; the Aino reference informs mass and hierarchy.
 */
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/InterTight-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/InterTight-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --type-ui: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --type-display: "Inter Tight", "Arial Black", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --type-meta: Consolas, "SFMono-Regular", "Courier New", "Microsoft YaHei", monospace;
  --type-white: #edf0f3;
  --type-secondary: #93a6b4;
}
body { font-family: var(--type-ui); }

/* Wordmark and navigation: compact identity, legible Chinese labels. */
.wordmark {
  font-family: var(--type-display);
  font-weight: 900;
  font-size: 31px;
  letter-spacing: -.035em;
  line-height: 1;
}
.wordmark span {
  font-family: var(--type-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1.35;
  vertical-align: baseline;
  padding-top: 0;
}
.header-role { font-family: var(--type-meta); font-size: 10px; line-height: 1.55; letter-spacing: .035em; }
nav a { font-family: var(--type-ui); font-size: 13px; font-weight: 600; letter-spacing: .005em; }
nav a span { font-weight: 400; }

/* English hero: actual 900 outlines, tightly set without CSS distortion. */
.hero-copy h1 {
  font-family: var(--type-display);
  font-weight: 900;
  font-synthesis: none;
  font-size: clamp(116px, 12.8vw, 228px);
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--type-white);
  text-wrap: nowrap;
}
.hero-copy h1 .second-line { margin-left: 0; margin-top: .055em; }
.hero-copy h1 em {
  font-style: normal;
  background: none;
  color: #b8ccd5;
  -webkit-text-fill-color: currentColor;
}
.hero-copy .eyebrow {
  font-family: var(--type-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.5;
  margin-bottom: 30px;
}
.hero-statement {
  margin-left: 0;
  font-family: var(--type-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .015em;
}
.hero-topline, .hero-coordinate, .chapter-strip { font-family: var(--type-meta); letter-spacing: .035em; }
.hero-reel-link, .round-link { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.hero-reel-link small, .round-link small { font-family: var(--type-meta); font-weight: 400; letter-spacing: .035em; }

/* Chinese section headings retain open counters and their own rhythm. */
.section-heading h2, .lab-intro h2, .about h2, .reel-heading h2 {
  font-family: var(--type-ui);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.13;
}
.section-heading h2 { font-size: clamp(46px, 4.8vw, 80px); }
.lab-intro h2 { font-size: clamp(54px, 5.8vw, 96px); }
.about h2 { font-size: clamp(58px, 6.4vw, 108px); }
.reel-heading h2 { font-size: clamp(34px, 3.7vw, 62px); }
.section-heading h2 span, .lab-intro h2 em, .about h2 em { color: var(--type-secondary); font-style: normal; }
.eyebrow, .dialog-kicker, .lab-label {
  font-family: var(--type-meta);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .055em;
}
.section-note, .lab-intro p, .about-body {
  font-family: var(--type-ui);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.85;
}

/* Reel typography works inside either the current card or the incoming sticky viewport. */
.reel-bottom > strong {
  font-family: var(--type-display);
  font-weight: 900;
  font-synthesis: none;
  font-size: clamp(64px, 8.1vw, 138px);
  letter-spacing: -.04em;
  line-height: .85;
}
.reel-bottom > strong > span {
  font-family: var(--type-meta);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .06em;
}
.reel-duration { font-family: var(--type-display); font-weight: 800; font-size: 30px; letter-spacing: -.025em; }
.reel-duration small { font-family: var(--type-meta); font-size: 10px; font-weight: 400; letter-spacing: .03em; }
.reel-caption { font-family: var(--type-ui); font-size: 13px; letter-spacing: 0; line-height: 1.7; }
.reel-top, .reel-play > small { font-family: var(--type-meta); font-size: 10px; letter-spacing: .045em; }

/* Real project names carry weight; utility metadata stays subordinate. */
.project-caption h3,
.featured .project-caption h3,
.travel-ready .project-caption h3,
.travel-ready .featured .project-caption h3 {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 46px);
  letter-spacing: -.025em;
  line-height: 1.08;
}
.project-caption p { font-family: var(--type-ui); font-size: 14px; letter-spacing: 0; line-height: 1.5; }
.project-type, .project-image-top, .image-bottom { font-family: var(--type-meta); font-size: 10px; line-height: 1.6; letter-spacing: .025em; }
.film-rail, .film-position, #film-index button { font-family: var(--type-meta); font-size: 10px; letter-spacing: .025em; }
.lab-info h3, .lab-card:first-child .lab-info h3 {
  font-family: var(--type-ui);
  font-size: clamp(27px, 2.35vw, 38px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.lab-info > p { font-family: var(--type-ui); font-size: 14px; line-height: 1.8; letter-spacing: 0; }
.lab-tags { font-family: var(--type-ui); font-size: 11px; letter-spacing: .015em; }
.lab-info .eyebrow { font-size: 10px; letter-spacing: .04em; }

/* Closing statement echoes the opening display mass. */
.contact h2 {
  font-family: var(--type-display);
  font-weight: 900;
  font-synthesis: none;
  font-size: clamp(84px, 11.3vw, 190px);
  line-height: .84;
  letter-spacing: -.04em;
}
.contact h2 em { color: #b8ccd5; }
.contact-bottom > p { font-family: var(--type-ui); font-size: 18px; line-height: 1.6; letter-spacing: 0; }
.dialog-story h2, .reel-dialog-caption h2 { font-family: var(--type-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.dialog-description, .dialog-subtitle { font-family: var(--type-ui); letter-spacing: 0; }
.story-marker-copy { font-family: var(--type-ui); font-size: 12px; line-height: 1.5; letter-spacing: .01em; }