/* V3: shared reading scale for the original Inna Fisun design. */
@font-face {
  font-family: Manrope;
  src: url('/v2/history/before-v8/work-history/assets/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --type-body: 1rem;
  --type-ui: .875rem;
  --type-meta: .8125rem;
  --type-section: clamp(2.0625rem, 3.4vw, 3rem);
  --type-card: clamp(1.625rem, 2.1vw, 1.875rem);
  --leading-copy: 1.6;
  --leading-meta: 1.5;
  --leading-heading: 1.13;
  --header-offset: 132px;
}

html { scroll-padding-top: var(--header-offset); }
body { font-family: Manrope, Arial, sans-serif; font-weight: 500; }
section[id] { scroll-margin-top: 12px; }
button { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 5px;
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--ink);
  color: white;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { top: 12px; }

/* One masthead component on both pages; disclosure is enhanced by JS. */
.masthead, .mast {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 112px;
  padding-block: 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.masthead::before, .mast::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  pointer-events: none;
}
.masthead .logo, .mast .logo {
  display: block;
  position: relative;
  flex-shrink: 0;
  font-size: 28px;
  line-height: .95;
  letter-spacing: -1.7px;
  padding-right: 18px;
  border: 0;
}
.masthead .logo::after, .mast .logo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--blue);
}
.logo-line { display: none; }
.masthead-purpose, .mast > span {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--muted);
}
.masthead nav, .mast nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: var(--type-ui);
  line-height: 1.4;
}
.masthead nav a, .mast nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
}
.nav-toggle { display: none; }

/* Body copy and labels remain distinct, but no essential text is 10–12px. */
.profile-intro > p:last-child,
.section-head > p,
.work-description,
.video-subhead p,
.format-row p,
.representation-note,
.contact-info > p:not(.contact-person),
.refinement-history .hero-note,
.refinement-history .visual-archive p,
.refinement-history .self-intro,
.refinement-history .self-row p,
.refinement-history .press p:not(.press-lead) {
  font-size: var(--type-body);
  line-height: var(--leading-copy);
}
.section-head > p { max-width: 40ch; }
.profile-intro > p:last-child { max-width: 42ch; }
.section-head h2 {
  font-size: var(--type-section);
  line-height: var(--leading-heading);
  letter-spacing: -.05em;
}
.section-index, .overline, .eyebrow,
.refinement-history .section-head > span,
.credit-group h3,
.format-platform,
.hero-links,
.portfolio-links,
.history-link,
.refinement-history .chapter-nav {
  font-size: var(--type-ui);
  line-height: var(--leading-meta);
}
.hero-photo figcaption,
.photo-duet figcaption,
.extra-photos figcaption,
.refinement-history .hero figcaption,
.refinement-history .visual-archive figcaption > span,
.metric-date,
.metrics .metric-date,
.geo-highlight small,
.audience-secondary span,
.audience-period,
.window-note,
.work-title > span,
.format-note,
.contact-footnote,
.refinement-history .source,
.refinement-history .role small,
.refinement-history .press small,
.refinement-history .credits-note,
.footer > div,
.refinement-history .footer-row {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
}
.metric-label, .metrics .metric-label,
.geo-highlight span,
.audience-secondary p,
.notes-grid p,
.past-work-meta,
.credit-list .past-work-meta,
.video-metrics dt,
.style-insight span,
.style-insight a,
.relationship-history > p,
.note,
.refinement-history .role,
.refinement-history .self-row > span,
.refinement-history .visual-archive a:not(:has(img)),
.refinement-history .press a {
  font-size: var(--type-ui);
  line-height: var(--leading-copy);
}
.work-title h3, .video-subhead h3 {
  font-size: var(--type-card);
  line-height: 1.25;
}
.archive > summary, .audience-notes > summary,
.refinement-history .more summary {
  font-size: var(--type-body);
  line-height: 1.5;
  min-height: 48px;
  padding-block: 14px;
}
.refinement-history .more summary span,
.refinement-history .self-reports summary > span {
  font-size: var(--type-ui);
}
.watch { font-size: var(--type-ui); line-height: 1.4; padding: 8px 12px; }
.hero-links a, .portfolio-links a, .style-insight a, .history-link,
.photo-duet figcaption a, .extra-photos figcaption a,
.refinement-history .visual-archive figcaption a,
.refinement-history .chapter-nav a, .refinement-history .press a,
.footer > div > a, .refinement-history .footer-row > a {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
}
.hero-photo figcaption { align-items: flex-start; }
.hero-photo figcaption > span { text-align: right; }
.work-title { align-items: start; }
.work-title > span { padding-top: 7px; }
.audience .metric-date, .audience .geo-highlight small,
.audience .audience-secondary span { color: #e8edff; }
.refinement-history .press a:focus-visible,
.refinement-history .press button:focus-visible { outline-color: white; }
.refinement-history .press small { opacity: 1; color: #e8edff; }
.refinement-history .self-reports .expand {
  font-size: var(--type-ui);
  min-width: 64px;
  text-align: right;
}

@media (max-width: 1100px) {
  .masthead-purpose, .mast > span { display: none; }
  .masthead, .mast { gap: 24px; }
  .section-head > p { max-width: 52ch; }
}

@media (max-width: 800px) {
  :root { --header-offset: 104px; }
  .masthead, .mast {
    min-height: 84px;
    padding-block: 18px;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .masthead .logo, .mast .logo {
    font-size: 23px;
    line-height: .95;
    letter-spacing: -1.4px;
  }
  .masthead nav, .mast nav {
    flex: 0 0 100%;
    margin: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: var(--type-ui);
  }
  .masthead nav a:first-child, .mast nav a:first-child { display: inline-flex; }
  .nav-enhanced .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-left: auto;
    padding: 10px 0 10px 16px;
    min-width: 88px;
    min-height: 44px;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--type-ui);
    line-height: 1;
  }
  .nav-toggle-mark {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 14px;
  }
  .nav-toggle-mark::before, .nav-toggle-mark::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform .16s ease;
  }
  .nav-toggle-mark::before { top: 3px; }
  .nav-toggle-mark::after { bottom: 3px; }
  .nav-toggle[aria-expanded='true'] .nav-toggle-mark::before { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .nav-toggle-mark::after { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-enhanced nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .nav-enhanced nav a { font-size: var(--type-body); min-height: 48px; }
  .nav-enhanced nav[hidden] { display: none !important; }
}

@media (max-width: 700px) {
  .section-head h2 { margin-top: 15px; }
  .section-head > p { max-width: 42ch; }
  .metrics > div { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .metrics .metric-date { max-width: 180px; }
  .audience-secondary { grid-template-columns: 1fr; gap: 0; padding-top: 4px; }
  .audience-secondary p { position: relative; padding: 17px 0 17px 110px; min-height: 78px; border-bottom: 1px solid #8297e5; }
  .audience-secondary p:last-child { border-bottom: 0; }
  .audience-secondary strong { position: absolute; top: 17px; left: 0; font-size: 28px; line-height: 1.3; }
  .audience-secondary span { margin-top: 4px; }
  .geo-highlight { grid-template-columns: auto 1fr; }
  .geo-highlight small { grid-column: 1/-1; }
  .hero-links { gap: 4px 24px; }
  .photo-offset { gap: 14px 20px; }
  .style-insight span { overflow-wrap: normal; }
  .work-title { display: block; }
  .work-title > span { display: block; padding-top: 8px; }
  .work-item .video-metrics { gap: 20px; }
  .representation-note { font-size: var(--type-body); }
  .footer > div { align-items: center; }
  .refinement-history .chapter-nav { gap: 4px 16px; }
  .refinement-history .section-head { grid-template-columns: 1fr; gap: 12px; }
  .refinement-history .section-head h2 { margin-top: 0; }
  .refinement-history .section-head > p { grid-column: auto; max-width: none; }
}

@media (max-width: 420px) {
  .photo-offset { grid-template-columns: 1fr; }
  .photo-offset > a, .photo-offset > button { grid-column: 1; grid-row: auto; }
  .photo-offset figcaption { grid-column: 1; grid-row: auto; display: flex; align-items: center; flex-wrap: wrap; }
  .photo-offset .style-insight { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .style-insight span { max-width: 100%; }
  .refinement-history .self-reports summary { gap: 12px 16px; }
  .refinement-history .self-reports h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-toggle-mark::before, .nav-toggle-mark::after { transition: none; }
}