/* Scale composition to the available viewport height, not only its width.
   Content remains in normal flow: no fixed-height clipping or nested scroll. */
:root {
  --section-space: clamp(24px, 4svh, 44px);
  --layout-gap: clamp(24px, 4vw, 60px);
  --header-height: 68px;
}
html { scroll-padding-top: var(--header-height); }
.header-shell { position: sticky; top: 0; z-index: 30; }
.header { min-height: 68px; }
.hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  gap: var(--layout-gap);
  padding-block: clamp(20px, 3svh, 32px);
}
h1 {
  font-size: clamp(42px, 7.3svh, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-top: 16px;
}
.hero-intro { font-size: 19px; line-height: 1.45; margin-top: 18px; }
.hero-description { line-height: 1.5; margin-top: 12px; max-width: 530px; }
.hero-actions { gap: 20px; margin-top: 20px; }
.button { min-height: 46px; padding: 10px 18px; }
.portrait-block { padding: 0; width: 100%; max-width: 460px; justify-self: end; }
.portrait-frame img {
  height: clamp(280px, 53svh, 470px);
  aspect-ratio: auto;
  object-position: center 42%;
}
.portrait-caption { padding: 50px 22px 18px; }
.portrait-caption span { font-size: 26px; }
.portrait-block figcaption { padding-top: 10px; }
.metrics { padding-bottom: 20px; }
.metrics > div { padding-top: 14px; }
.metrics strong { font-size: 36px; }
.metrics span { margin-top: 5px; line-height: 1.4; }
.company-band { padding-block: 18px; }
.section, .expertise-section, .formats-section, .contact-section { padding-block: var(--section-space); }
.section-head { gap: var(--layout-gap); margin-bottom: 24px; }
.kicker { margin-bottom: 12px; }
h2, .expertise-intro h2, .contact-section h2 {
  font-size: clamp(32px, 4.8svh, 42px);
  letter-spacing: -.035em;
}
.section-lead { max-width: 380px; line-height: 1.5; }
.case-grid { align-items: stretch; }
.case { padding: 22px 24px 0; display: flex; flex-direction: column; }
.case-label { min-height: 44px; }
.case-metric { font-size: clamp(40px, 6svh, 54px); margin-block: 18px 12px; }
.case-metric small { font-size: 22px; }
.case-metric > span { font-size: 30px; vertical-align: 5px; }
.case > h3 { min-height: 0; font-size: 20px; }
.case > p { min-height: 0; margin-top: 10px; line-height: 1.5; }
.case-context, .bar-pair { min-height: 64px; margin-block: 18px; }
.case details { margin-top: auto; }
summary { padding-block: 14px; }
.case-detail { padding-bottom: 18px; }
.results-note { margin-top: 12px; }
.expertise-layout, .about-grid, .contact-grid { gap: var(--layout-gap); }
.expertise-layout { grid-template-columns: 1fr 1.5fr; }
.expertise-intro > p:not(.kicker) { margin-top: 18px; }
.expertise-list article { padding-block: 17px; }
.expertise-list p { line-height: 1.5; margin-top: 7px; }
.tagline { margin-top: 8px; }
.dark-link { margin-top: 20px; }
.about-grid { grid-template-columns: .9fr 1.6fr; }
.about-note { padding-top: 12px; }
.quote-mark { font-size: 48px; line-height: 1; }
.statement { font-size: 23px; line-height: 1.4; }
.about-note > p:not(.statement) { margin-top: 15px; line-height: 1.5; }
.education { margin-top: 18px; padding-top: 14px; gap: 15px; }
.education.second { margin-top: 12px; padding-top: 12px; }
.education strong { font-size: 23px; min-width: 54px; }
.timeline article, .timeline article:first-child {
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 18px;
  padding-block: 12px;
}
.timeline-date { font-size: 12px; }
.timeline h3 { font-size: 18px; }
.timeline article div > p { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.timeline article div > span { font-size: 14px; line-height: 1.4; margin-top: 5px; }
.timeline-footer { padding-top: 12px; }
.timeline-footer .text-link { margin-top: 7px; }
.small-link { display: inline-block; margin-left: 20px; margin-top: 7px; }
.formats-grid { gap: var(--layout-gap); }
.role-card { padding: 24px 28px; }
.role-card h3 { font-size: 29px; line-height: 1.15; margin-top: 14px; }
.role-card > p:not(.card-kicker) { line-height: 1.5; margin-top: 14px; }
.role-card ul { margin-block: 16px; gap: 5px; }
.role-card .role-location { padding-top: 12px; }
.role-card .button { margin-top: 18px; }
.advisory { padding-top: 0; }
.advisory > .card-kicker { margin-bottom: 6px; }
.advisory article { padding-block: 15px; gap: 18px; }
.advisory article h3 { font-size: 20px; }
.advisory article p { margin-top: 7px; line-height: 1.5; }
.advisory-note { margin-top: 12px; }
.contact-lead { margin-top: 18px; }
.email-link { margin-top: 24px; }
.recommendations { margin-top: 20px; }
.contact-box { padding: 24px; }
.topic-options { margin-block: 15px; }
#topic-description { min-height: 48px; margin-bottom: 16px; }
.footer > .wrap { padding-block: 16px; }
.career-entry { border-color: var(--line); }
.career-entry summary {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 18px;
  padding-block: 14px;
}
.career-entry summary > span { font-size: inherit; line-height: inherit; }
.career-entry summary .timeline-date { font-size: 12px; font-weight: 400; line-height: 1.5; }
.career-role { display: flex; flex-direction: column; gap: 5px; }
.career-role strong { font-size: 18px; line-height: 1.35; font-weight: 600; }
.career-role > span { font-size: 14px; line-height: 1.4; font-weight: 400; }
.career-entry summary > .career-toggle { font-size: 22px; line-height: 1; }
.career-entry[open] summary > .timeline-date,
.career-entry[open] summary > .career-role { transform: none; }
.career-description { margin: 0 36px 16px 143px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.role-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.role-card li { font-size: 14px; }
.statement { font-size: 21px; }

@media (min-width: 761px) and (max-height: 700px) {
  :root { --section-space: 20px; --header-height: 60px; }
  .header { min-height: 60px; }
  .hero { padding-block: 16px; }
  h1 { margin-top: 12px; font-size: clamp(40px, 7svh, 49px); }
  .hero-intro { margin-top: 14px; }
  .hero-actions { margin-top: 16px; }
  .metrics { padding-bottom: 14px; }
  .metrics > div { padding-top: 10px; }
  .metrics strong { font-size: 32px; }
  .section-head { margin-bottom: 18px; }
  .career-entry summary { padding-block: 11px; }
  .expertise-list article { padding-block: 12px; }
  .advisory article { padding-block: 11px; }
}

/* Narrow desktop windows still have two columns, without oversized type. */
@media (min-width: 761px) and (max-width: 1100px) {
  .wrap { width: calc(100% - 48px); }
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
  .hero-intro { font-size: 18px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { font-size: 14px; gap: 14px; }
  .hero-actions .text-link { font-size: 13px; gap: 8px; }
  .portrait-caption span { font-size: 23px; }
  .metrics > div { padding-inline: 12px; }
  .metrics p { font-size: 16px; }
  .metrics strong { font-size: 32px; }
  .metrics span { font-size: 13px; }
  .case { padding-inline: 18px; }
  .case h3 { font-size: 19px; }
  .case-metric { font-size: 40px; }
  .case-metric small { font-size: 19px; }
  .case-metric > span { font-size: 25px; }
  .section-head { gap: 24px; }
  .section-lead { max-width: 290px; }
  .timeline article, .timeline article:first-child { grid-template-columns: 1fr; gap: 3px; }
  .about-grid { grid-template-columns: .9fr 1.4fr; }
  .career-entry summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 12px; }
  .career-entry .timeline-date { grid-column: 1; }
  .career-entry .career-role { grid-column: 1; }
  .career-entry summary > .career-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .career-description { margin-left: 0; }
  .role-card { padding: 22px; }
  .contact-grid { gap: 30px; }
}

/* Phones keep natural document scrolling and readable content. */
@media (max-width: 760px) {
  :root { --section-space: 36px; --header-height: 64px; }
  .header { min-height: 64px; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 26px; }
  h1 { font-size: clamp(40px, 10.5vw, 58px); margin-top: 14px; }
  .hero-intro { font-size: 18px; margin-top: 16px; }
  .hero-description { line-height: 1.5; }
  .hero-actions { margin-top: 18px; gap: 12px; }
  .portrait-block { max-width: none; }
  .portrait-frame img { height: auto; aspect-ratio: 1.2; object-position: center 40%; }
  .portrait-caption span { font-size: 26px; }
  .metrics strong { font-size: 34px; }
  .metrics > div { padding-top: 14px; padding-bottom: 14px; }
  .company-band { padding-block: 20px; }
  h2, .expertise-intro h2, .contact-section h2 { font-size: 32px; }
  .section-head { margin-bottom: 22px; }
  .section-lead { margin-top: 16px; }
  .case { padding: 22px 22px 0; }
  .case-label { min-height: 0; }
  .case-metric { font-size: 48px; }
  .case h3 { font-size: 21px; }
  .expertise-layout, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .timeline article, .timeline article:first-child { grid-template-columns: 1fr; gap: 6px; padding-block: 16px; }
  .timeline h3 { font-size: 19px; }
  .timeline article div > span { font-size: 15px; }
  .career-entry summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 5px 12px; }
  .career-entry .timeline-date, .career-entry .career-role { grid-column: 1; }
  .career-entry summary > .career-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .career-description { margin-left: 0; }
  .small-link { display: block; margin-left: 0; }
  .role-card { padding: 24px; }
  .role-card h3 { font-size: 29px; }
  .contact-box { padding: 22px; }
  #topic-description { min-height: 0; }
}

@media print {
  .hero, .section, .expertise-section, .formats-section, .contact-section { padding-block: 20px; }
  .portrait-frame img { height: auto; }
}

/* Equal-height desktop chapters. Expanded details remain readable in flow. */
@media screen and (min-width: 1000px) {
  .header { height: var(--header-height); min-height: var(--header-height); }
  .dark-top {
    min-height: calc(100svh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero { flex: 1 0 auto; }
  .metrics { flex: 0 0 auto; }
  #results, #expertise, #about, #problems, #formats, #contact {
    min-height: calc(100svh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Reserve the persistent header even on shorter laptop displays. */
@media screen and (min-width: 1000px) and (max-height: 800px) {
  :root { --section-space: 12px; }
  .section-head { margin-bottom: 14px; }
  .section .case { padding-top: 16px; }
  .section .case.featured { padding-top: 14px; }
  .case-metric { margin-block: 12px 8px; }
  .case-context, .bar-pair { min-height: 56px; margin-block: 12px; }
  .case summary { padding-block: 10px; }
  .expertise-list article { padding-block: 9px; }
  .quote-mark { font-size: 36px; }
  .about-note > p:not(.statement) { margin-top: 12px; }
  .education { margin-top: 12px; padding-top: 12px; }
}

@media print { .header-shell { position: static; } }

.problem-column-labels { display: grid; grid-template-columns: 1fr 1.45fr; gap: 24px; padding: 0 0 10px 42px; color: var(--muted); font-size: 11px; letter-spacing: 1.2px; }
.problem-list article { display: grid; grid-template-columns: 24px 1fr 1.45fr; gap: 18px; align-items: center; border-top: 1px solid var(--line); padding-block: clamp(10px, 1.5svh, 16px); }
.problem-index { color: var(--accent); font-size: 12px; }
.problem-list h3 { font-size: 19px; line-height: 1.3; }
.problem-list p { color: var(--muted); font-size: 16px; line-height: 1.45; }
.problem-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.problem-actions p { font-size: 14px; color: var(--muted); }
.problem-actions .button { flex: none; }
@media screen and (min-width: 1000px) and (max-height: 650px) {
  #problems .section-head { margin-bottom: 12px; }
  #problems h2 { font-size: 30px; }
  .problem-list article { padding-block: 8px; }
  .problem-list h3 { font-size: 18px; }
  .problem-list p { font-size: 15px; }
  .problem-actions { padding-top: 12px; }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  .header #section-nav { gap: 14px; font-size: 13px; }
}
@media (max-width: 760px) {
  .problem-column-labels { display: none; }
  .problem-list article { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 14px; padding-block: 18px; }
  .problem-list h3 { font-size: 21px; }
  .problem-list h3 br { display: none; }
  .problem-list p { grid-column: 2; }
  .problem-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Keep the contact methods in one row, including Telegram. */
.messenger-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.messenger-actions .button { margin: 0; justify-content: space-between; gap: 8px; padding-inline: 14px; }
.contact-box { min-width: 0; }
.contact-box .copy-email { margin-top: 12px; }
.contact-box .copy-status { margin-top: 4px; }
#contact { padding-bottom: 0; }
#contact .footer { margin-top: 24px; }

@media screen and (min-width: 1000px) {
  #about .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  #about .career-entry summary { grid-template-columns: 100px minmax(0, 1fr) 18px; gap: 12px; }
  #about .career-entry .timeline-date { grid-column: 1; grid-row: 1; }
  #about .career-entry .career-role { grid-column: 2; grid-row: 1; }
  #about .career-entry summary > .career-toggle { grid-column: 3; grid-row: 1; }
  #about .timeline-footer .small-link { margin-left: 0; margin-right: 16px; }
  #about .timeline-footer { display: flex; flex-wrap: wrap; column-gap: 16px; }
  #about .timeline-footer p { width: 100%; }
  #contact .contact-grid { margin-block: auto; }
  #contact .footer { flex: none; width: 100%; margin-top: 12px; }
}

@media screen and (min-width: 1000px) and (max-height: 800px) {
  #about .about-note { padding-top: 8px; }
  #about .quote-mark { display: block; height: 26px; font-size: 36px; }
  #about .statement { font-size: 20px; line-height: 1.35; }
  #about .career-entry summary { padding-block: 9px; }
  #about .career-role { gap: 3px; }
  #about .career-role strong { font-size: 17px; }
  #about .education, #about .education.second { margin-top: 10px; padding-top: 10px; }
  #contact .contact-box { padding: 20px; }
  #contact .topic-options { margin-block: 12px; }
  #contact #topic-description { min-height: 48px; margin-bottom: 12px; line-height: 1.5; }
}

@media screen and (min-width: 1000px) and (max-height: 650px) {
  #about .section-head, #results .section-head, #formats .section-head { margin-bottom: 10px; }
  #about h2, #results h2, #formats h2 { font-size: 30px; }
  .section-head .section-lead { font-size: 15px; }
  #about .career-entry summary { padding-block: 8px; }
  #results .case-context, #results .bar-pair { min-height: 44px; margin-block: 8px; }
  #results .case-metric { margin-block: 8px; }
  #expertise .expertise-list p { font-size: 15px; margin-top: 5px; }
  #expertise .expertise-list article { padding-block: 7px; }
  #formats .advisory article p { margin-top: 5px; }
  #formats .role-card { padding-block: 16px; }
}

/* One proof on the opening screen, three complementary cases on the next. */
.hero-copy { min-width: 0; }
#hero-title { font-size: clamp(40px, 6.7svh, 70px); }
.hero .eyebrow { font-size: 12px; letter-spacing: 1px; flex-wrap: wrap; line-height: 1.4; }
.hero-intro { max-width: 580px; }
.hero-scope { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 16px; }
.hero-scope li { padding: 6px 10px; font-size: 14px; line-height: 1.3; color: var(--accent); background: var(--leaf-paper); border: 1px solid var(--line); border-radius: 4px; }
.hero-proof { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 14px; margin-top: 20px; }
.hero-proof-metric { font-size: 44px; line-height: 1.1; color: var(--accent); font-weight: 600; white-space: nowrap; letter-spacing: -1px; }
.hero-proof-metric > span { font-size: 30px; }
.hero-proof-metric small { font-size: 24px; }
.hero-proof-result { font-size: 16px; line-height: 1.4; }
.hero-proof-source { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.hero-proof > a { margin-left: auto; white-space: nowrap; }
.hero-background { display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--line); padding-block: 18px; flex: 0 0 auto; }
.hero-background > div { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.hero-background strong { font-size: 24px; line-height: 1.2; font-weight: 600; }
.hero-background span, .hero-background > p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.hero-background > a { margin-left: auto; white-space: nowrap; }
.hero-background .hero-tenure { min-width: 175px; }
.hero-companies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; gap: 14px; list-style: none; padding: 0; margin: 0; min-width: 0; }
.hero-companies li { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 1px solid var(--line); }
.hero-companies strong { font-size: 17px; line-height: 1.3; font-weight: 600; }
.hero-companies span { font-size: 13px; line-height: 1.4; }
@media (min-width: 1000px) and (max-width: 1190px) {
  .hero-background { gap: 16px; }
  .hero-background .hero-tenure { min-width: 155px; }
  .hero-background .hero-tenure span { font-size: 12px; }
  .hero-companies { gap: 10px; }
  .hero-companies li { padding-left: 10px; }
  .hero-companies strong { font-size: 16px; }
  .hero-companies span { font-size: 12px; }
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
  .portrait-block { max-width: 560px; }
  .portrait-frame img { height: clamp(330px, 58svh, 640px); }
}
@media (min-width: 1000px) and (max-height: 700px) {
  #hero-title { font-size: clamp(36px, 6.5svh, 45px); }
  .hero-intro { font-size: 18px; }
  .hero-scope { margin-top: 12px; gap: 6px; }
  .hero-scope li { padding-block: 5px; }
  .hero-proof { margin-top: 14px; }
  .hero-proof { padding-block: 12px; }
  .hero-proof-metric { font-size: 36px; }
  .hero-proof-result { font-size: 15px; }
  .hero-proof-source { font-size: 12px; }
  .hero-background { padding-block: 12px; gap: 20px; }
}
@media (max-width: 760px) {
  #hero-title { font-size: clamp(30px, 8vw, 48px); letter-spacing: -1.2px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .5px; }
  .hero-proof { flex-wrap: wrap; gap: 10px; padding-block: 16px; }
  .hero-proof-metric { font-size: 38px; }
  .hero-proof > div { flex-basis: 100%; }
  .hero-proof > a { margin-left: 0; }
  .hero-background { flex-wrap: wrap; gap: 12px; padding-block: 24px; }
  .hero-background > p { flex-basis: 100%; }
  .hero-background > a { margin-left: 0; }
  .hero-companies { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .hero-companies strong { font-size: 16px; }
}

/* Result first: the metric is visible before opening the full XYZ achievements. */
#about .career-entry summary { grid-template-columns: minmax(0, 1fr) 96px 18px; gap: 14px; align-items: center; }
#about .career-entry summary .career-role { grid-column: 1; grid-row: 1; gap: 4px; }
#about .career-entry summary .timeline-date { grid-column: 2; grid-row: 1; text-align: right; }
#about .career-entry summary .career-toggle { grid-column: 3; grid-row: 1; }
#about .career-role .career-result { font-size: 17px; line-height: 1.35; color: var(--ink); }
#about .career-role .career-meta { font-size: 12px; line-height: 1.4; color: var(--muted); }
#about .career-description { margin-left: 0; margin-right: 0; }
.achievement-list { padding-left: 20px; margin: 12px 0 0; }
.achievement-list li + li { margin-top: 12px; }
@media (min-width: 1000px) { #about .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.8fr); } }
@media (max-width: 760px) {
  #about .career-entry summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 6px 12px; padding-block: 16px; }
  #about .career-entry summary .career-role { grid-column: 1; grid-row: 1; }
  #about .career-entry summary .timeline-date { grid-column: 1; grid-row: 2; text-align: left; }
  #about .career-entry summary .career-toggle { grid-column: 2; grid-row: 1 / span 2; }
  #about .career-role .career-result { font-size: 18px; }
  #about .career-role .career-meta { font-size: 14px; }
}