/* ==========================================================================
   KIDE 2027 · English edition typography & layout (2026-11-08)
   Loaded only by /en/ pages, after all shared styles.
   - Inter / Inter Display (self-hosted, SIL OFL 1.1 — see ../fonts/Inter-LICENSE.txt)
   - Tighter tracking, sentence-length line measures, balanced headings
   - Hero, positioning band, stats and colour tiles re-proportioned for English
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800 900; font-style: normal; font-display: swap; }

html[lang="en"] {
  --font: "Inter", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Inter Display", "Inter", "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --font-num: "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}
html[lang="en"] body {
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "calt";
}
html[lang="en"] :is(h1, h2, h3, h4) { font-family: var(--font-display); text-wrap: balance; }
html[lang="en"] p, html[lang="en"] li, html[lang="en"] dd { text-wrap: pretty; }

/* ---------- Header ---------- */
html[lang="en"] .header-home { display: none; }
html[lang="en"] .nav { font-size: 14.5px; font-weight: 600; letter-spacing: 0; gap: clamp(14px, 1.4vw, 26px); }
html[lang="en"] .btn { font-weight: 600; letter-spacing: .005em; }
html[lang="en"] .mobile-menu a { letter-spacing: 0; }

/* ---------- Hero ---------- */
html[lang="en"] .hero-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
html[lang="en"] .hero-brandline {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.045em;
  gap: .22em;
}
html[lang="en"] .hero-year { padding-right: .04em; }
html[lang="en"] .hero-title {
  max-width: 880px;
  margin-top: 18px;
  font-family: var(--font);
  font-size: clamp(19px, 1.55vw, 26px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--deep);
}
html[lang="en"] .hero-theme { margin-top: 22px; }
html[lang="en"] .hero-theme strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.7vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  background: var(--grad-year);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: .06em;
}
html[lang="en"] .hero-when dt,
html[lang="en"] .hero-countdown__label { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
html[lang="en"] .hero-when dd { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
html[lang="en"] .hero-countdown__unit { letter-spacing: .02em; }

/* inner-page photo heroes */
html[lang="en"] .section-photo-band h1,
html[lang="en"] .page-hero h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
html[lang="en"] .section-photo-band__lead,
html[lang="en"] .page-hero p { max-width: 640px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; letter-spacing: 0; }

/* ---------- Positioning band ---------- */
html[lang="en"] .home-position h2 {
  max-width: 1080px;
  font-size: clamp(32px, 3.6vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}
html[lang="en"] .home-position__side { max-width: 760px; }
html[lang="en"] .home-position__lead { font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.65; }

/* ---------- Stats ---------- */
html[lang="en"] .facts__value { font-family: var(--font-num); font-weight: 800; letter-spacing: -.04em; }
html[lang="en"] .facts__label,
html[lang="en"] .fact-strip span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
html[lang="en"] .fact-strip strong { font-family: var(--font-num); font-weight: 800; letter-spacing: -.035em; }
html[lang="en"] .facts__lead p { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ---------- Section headings ---------- */
html[lang="en"] :is(.sec-head h2, .content-heading h2, .categories__copy h2, .exhibitor-show__copy h2) {
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}
html[lang="en"] :is(.split-block__copy h2, .venue-grid h2) {
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
}
/* give English titles the full row when there is no side paragraph */
html[lang="en"] .content-heading { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); }
html[lang="en"] .content-heading > div:only-child { grid-column: 1 / -1; }
html[lang="en"] .content-heading > p,
html[lang="en"] .sec-head__lead { font-size: 16.5px; line-height: 1.65; max-width: 520px; }

/* body copy */
html[lang="en"] :is(.split-block__copy, .venue-grid, .about-intro, .legal-page) p { font-size: 16.5px; line-height: 1.7; max-width: 68ch; }
html[lang="en"] .dot-list li, html[lang="en"] .check-list li { font-size: 16px; line-height: 1.55; }

/* ---------- Colour tiles ---------- */
html[lang="en"] :is(.pillar, .feature, .bullet-card, .category, .info-card) {
  padding: clamp(26px, 2.2vw, 36px) clamp(22px, 2vw, 32px) clamp(28px, 2.4vw, 38px);
}
html[lang="en"] :is(.pillar, .feature, .bullet-card, .category, .info-card) h3,
html[lang="en"] .page-visit .bullet-grid .bullet-card h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}
html[lang="en"] :is(.pillar, .feature, .bullet-card, .category, .info-card) p,
html[lang="en"] .page-visit .bullet-grid .bullet-card p {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}
/* equal title zones so the copy starts on one line across a row */
@media (min-width: 1061px) {
  html[lang="en"] :is(.pillars, .feature-grid, .category-grid) > * > h3,
  html[lang="en"] .bullet-grid > * > h3:not(:only-child) { min-height: 2.4em; }
}
html[lang="en"] .bullet-card > p:only-child { font-family: var(--font-display); font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
html[lang="en"] .info-card .status-pill,
html[lang="en"] .status-pill,
html[lang="en"] .tag { letter-spacing: .02em; }

/* ---------- Program / session cards ---------- */
html[lang="en"] [class*="__kicker"],
html[lang="en"] [class*="session"] [class*="label"] { letter-spacing: .1em; text-transform: uppercase; }
html[lang="en"] .timeline-step h3 { font-size: 17.5px; line-height: 1.3; letter-spacing: -.01em; }
html[lang="en"] .timeline-step p { font-size: 14.5px; line-height: 1.55; }

/* ---------- Closing CTA ---------- */
html[lang="en"] .closing-cta h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }

/* ---------- Footer ---------- */
html[lang="en"] .site-footer { letter-spacing: 0; }
html[lang="en"] .site-footer strong { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  html[lang="en"] .content-heading { grid-template-columns: minmax(0, 1fr); }
  html[lang="en"] .content-heading > p { justify-self: start; }
}
@media (max-width: 720px) {
  html[lang="en"] .hero-kicker { font-size: 11px; letter-spacing: .1em; }
  html[lang="en"] .hero-brandline { font-size: clamp(56px, 17vw, 80px); }
  html[lang="en"] .hero-title { font-size: 16.5px; line-height: 1.4; }
  html[lang="en"] .hero-theme strong { font-size: clamp(24px, 7vw, 30px); letter-spacing: -.02em; }
  html[lang="en"] .home-position h2 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.15; }
  html[lang="en"] :is(.sec-head h2, .content-heading h2, .categories__copy h2, .exhibitor-show__copy h2) { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.12; }
  html[lang="en"] :is(.split-block__copy h2, .venue-grid h2) { font-size: clamp(25px, 7vw, 30px); }
  html[lang="en"] :is(.pillar, .feature, .info-card) h3 { font-size: 19px; }
  html[lang="en"] :is(.bullet-card, .category) h3,
  html[lang="en"] .page-visit .bullet-grid .bullet-card h3 { font-size: 16.5px; line-height: 1.22; hyphens: auto; overflow-wrap: break-word; }
  html[lang="en"] :is(.bullet-card, .category) p { font-size: 13.5px; line-height: 1.5; hyphens: auto; }
  html[lang="en"] :is(.pillar, .feature, .info-card) p { font-size: 15px; }
  html[lang="en"] .bullet-card > p:only-child { font-size: 15px; }
  html[lang="en"] .facts__label, html[lang="en"] .fact-strip span { font-size: 11px; letter-spacing: .08em; }
}

/* refinements */
html[lang="en"] .facts__value small { font-family: var(--font-num); font-size: .62em; font-weight: 800; color: var(--blue); align-self: flex-start; margin-left: .04em; }
html[lang="en"] :is(.pillars, .feature-grid, .category-grid, .info-grid) > * > h3 { font-size: clamp(20px, 1.6vw, 26px); }

@media (max-width: 720px) {
  html[lang="en"] .hero-info { flex-direction: column; }
  html[lang="en"] .hero-kicker__sep { display: none; }
  html[lang="en"] .hero-countdown--inline { display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; min-height: 0; padding: 12px 16px; }
  html[lang="en"] .hero-countdown--inline .hero-countdown__label { margin: 0 auto 0 0; }
  html[lang="en"] .hero-countdown--inline .hero-countdown__num { font-size: 32px; }
  html[lang="en"] .hero-when { grid-template-columns: minmax(0, 1fr); }
  html[lang="en"] .exhibitor-show__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  html[lang="en"] :is(.bullet-card, .category) p { hyphens: manual; }
}