/* Content-driven responsive refinement. Inherits the approved black/gold world. */
:root {
  --space: clamp(18px, 4.5vw, 80px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.wrap {
  padding-left: max(var(--space), env(safe-area-inset-left));
  padding-right: max(var(--space), env(safe-area-inset-right));
}
.header { min-height: 88px; height: auto; padding-block: 22px; }
.header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.button { line-height: 1.4; text-align: left; }
.button svg, .close-button { flex-shrink: 0; }
.hero-line, .hero-bottom > *, .closing-content > * { min-width: 0; }
.hero h1 { font-size: clamp(46px, 7.1vw, 102px); }
.people .portrait { width: clamp(60px, 7.1vw, 102px); height: clamp(60px, 7.1vw, 102px); }
.card-number { font-size: clamp(36px, 3.9vw, 56px); }
.number-long { font-size: clamp(32px, 3.3vw, 47px); }
.result-card { min-height: 292px; }
.role, .number-context, .source-note { line-height: 1.65; }
.filter { font-size: 14px; min-height: 46px; padding: 12px 17px; }
.filter span { font-size: 12px; }
.card-bottom { font-size: 14px; }
.impact-context { color: var(--muted); font-size: 13px; line-height: 1.7; }
.impact-context summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 10px; }
.impact-context summary::-webkit-details-marker { display: none; }
.impact-context summary svg { width: 17px; height: 17px; transition: transform .2s var(--ease-out); }
.impact-context[open] summary svg { transform: rotate(180deg); }
.impact-context p { max-width: 76ch; margin: 0 0 14px; font-size: 13px; }
.closing h2 { text-wrap: balance; }
.footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
dialog { overscroll-behavior: contain; scrollbar-gutter: stable; }
.detail-content { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.detail-result strong { overflow-wrap: normal; word-break: normal; }
fieldset label { padding: 0 8px 0 0; min-height: 48px; }
input:not([type=radio]) { min-height: 56px; }
@media (hover: none), (pointer: coarse) {
  .button:hover { transform: none; background: var(--gold); }
  .result-card:hover { transform: none; background: var(--panel); border-color: var(--edge); }
  .button:active:not(:disabled) { transform: scale(.98); }
  .result-card:active { background: #292b22; border-color: var(--gold); }
}

/* Phones: readable title, compact rows, no interaction dependent on hover. */
@media (max-width: 599px) {
  .header { min-height: 80px; padding-top: max(17px, env(safe-area-inset-top)); padding-bottom: 17px; gap: 12px; }
  .brand-name { font-size: 24px; }
  .header nav, .brand-sub { display: none; }
  .button-small { font-size: 13px; min-height: 46px; padding: 12px 15px; gap: 12px; }
  .hero { padding-top: 27px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(30px, 9.8vw, 53px); line-height: 1.12; letter-spacing: -.035em; }
  .hero-line { gap: 10px; margin-top: 12px; }
  .people .portrait { width: clamp(39px, 12vw, 66px); height: clamp(39px, 12vw, 66px); border-width: 3px; margin-left: -16px; }
  .people .portrait:first-child { margin-left: 0; }
  .hero-bottom { display: block; margin-top: 24px; }
  .hero-bottom p { font-size: 16px; line-height: 1.7; }
  .text-link { font-size: 15px; margin-top: 16px; min-height: 52px; }
  .round-arrow { width: 46px; height: 46px; }
  .impact { padding-bottom: 24px; }
  .impact-heading { margin-bottom: 14px; align-items: center; }
  .impact-heading h2 { font-size: 17px; max-width: 170px; }
  .impact-heading > span { font-size: 12px; line-height: 1.5; max-width: 122px; }
  .impact-grid { grid-template-columns: 1fr; }
  .metric { min-height: 104px; padding: 21px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
  .metric-value { font-size: clamp(32px, 9vw, 45px); }
  .metric-value-long { font-size: clamp(23px, 7.3vw, 36px); }
  .metric h3 { font-size: 14px; line-height: 1.5; }
  .metric-foot { display: none; }
  .impact-context { font-size: 13px; }
  .impact-context summary { min-height: 46px; }
  .results { padding-top: 30px; padding-bottom: 30px; }
  .section-top { align-items: flex-start; gap: 16px; }
  .section-top h2 { font-size: clamp(23px, 6.5vw, 30px); max-width: 260px; }
  .section-top p { font-size: 15px; line-height: 1.65; margin-top: 12px; }
  .sample-label { font-size: 12px; line-height: 1.5; margin-top: 5px; }
  .filters { gap: 8px; margin: 22px 0 18px; }
  .filter { padding: 11px 14px; gap: 9px; font-size: 14px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .result-card { min-height: 258px; padding: 22px 21px 0; }
  .card-person { gap: 13px; }
  .card-person .portrait { width: 56px; height: 56px; }
  .card-person strong { font-size: 19px; }
  .role { font-size: 14px; margin-top: 4px; }
  .card-number { font-size: clamp(40px, 11.8vw, 56px); margin-top: 24px; }
  .number-long { font-size: clamp(31px, 10.4vw, 49px); }
  .number-context { font-size: 13px; margin: 10px 0 18px; }
  .card-bottom { min-height: 54px; padding-block: 13px; font-size: 14px; }
  .per-month { font-size: 14px; }
  .source-note { font-size: 12px; line-height: 1.75; margin-top: 20px; }
  .closing { padding-top: 36px; padding-bottom: 36px; }
  .closing-content { display: block; margin-top: 24px; }
  .closing h2 { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.18; }
  .closing-content p { font-size: 16px; line-height: 1.7; margin-top: 20px; }
  .closing-content .button { min-height: 58px; width: 100%; }
  .footer { padding-top: 18px; row-gap: 8px; }
  .footer > span:nth-child(2) { font-size: 12px; line-height: 1.6; }
  dialog { width: 100%; height: 100dvh; max-height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; }
  .dialog-top { padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); font-size: 14px; }
  .detail-content { padding: 26px max(20px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .detail-person .portrait { width: 72px; height: 72px; }
  .detail-person h2 { font-size: 28px; }
  .detail-person p { font-size: 16px; }
  .detail-result { margin-top: 30px; }
  .detail-result strong { font-size: clamp(30px, 9vw, 48px); line-height: 1.2; }
  .detail-context, .material-note p, .apply-intro { font-size: 16px; line-height: 1.7; }
  .material-note { gap: 13px; }
  .material-note h3 { font-size: 17px; }
  .detail-content > .button { font-size: 15px; gap: 12px; }
  .dialog-note { font-size: 13px; }
}

/* Tablets and small laptops: two comfortable result columns. */
@media (min-width: 600px) and (max-width: 1099px) {
  .header { min-height: 92px; gap: 18px; }
  .brand-sub { display: none; }
  .header nav { display: flex; gap: 18px; font-size: 14px; }
  .brand-name { font-size: 26px; }
  .button-small { font-size: 13px; gap: 18px; }
  .hero { padding-top: 42px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(48px, 8.2vw, 84px); line-height: 1.08; }
  .hero-line { gap: 20px; }
  .people .portrait { width: clamp(54px, 8vw, 82px); height: clamp(54px, 8vw, 82px); border-width: 4px; margin-left: -17px; }
  .hero-bottom { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
  .hero-bottom p { font-size: 16px; max-width: 60%; }
  .text-link { font-size: 14px; gap: 14px; margin-top: 0; }
  .impact { padding-bottom: 34px; }
  .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric { display: block; min-height: 230px; padding: 25px 20px 22px; }
  .metric + .metric { border-top: 0; border-left: 1px solid #56564a; }
  .metric-value { font-size: clamp(34px, 5vw, 54px); margin: 0 0 18px; min-height: 60px; display: flex; align-items: center; }
  .metric-value-long { font-size: clamp(27px, 4.5vw, 46px); }
  .metric h3 { font-size: 15px; }
  .metric-foot { display: none; }
  .metric-icon { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .result-card { min-height: 274px; padding: 24px 22px 0; }
  .card-person .portrait { width: 58px; height: 58px; }
  .card-person strong { font-size: 19px; }
  .role { font-size: 14px; }
  .card-number { font-size: clamp(38px, 5vw, 54px); margin-top: 28px; }
  .number-long { font-size: clamp(30px, 4.4vw, 46px); }
  .number-context { font-size: 13px; }
  .section-top h2 { font-size: 28px; max-width: none; }
  .closing-content { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
  .closing h2 { font-size: clamp(29px, 3.7vw, 40px); }
  .closing-content p { font-size: 16px; margin-top: 0; }
  .closing-content .button { width: 100%; gap: 20px; }
  .footer { flex-wrap: wrap; }
  dialog { width: min(620px, calc(100% - 48px)); height: auto; max-height: calc(100dvh - 48px); max-width: 620px; margin: auto; border: 1px solid var(--edge); border-radius: 20px; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { padding-top: 60px; padding-bottom: 52px; }
  .hero-bottom { margin-top: 34px; }
}
/* Short landscape windows retain reachable close and application controls. */
@media (max-height: 500px) and (min-width: 600px) {
  .header { min-height: 72px; padding-block: 12px; }
  .hero { padding-top: 24px; }
  dialog { max-height: calc(100dvh - 24px); }
  .dialog-top { padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-context summary svg { transition: none; }
}
.brand { min-height: 44px; }
/* Let exceptionally enlarged labels reflow instead of clipping controls. */
.button { white-space: normal; }
.hero h1, .closing h2 { overflow-wrap: anywhere; }
.hero-line { flex-wrap: wrap; }
/* User-supplied original mentor portrait. */
.mentor-photo {
  background-image: url('assets/jasurbek-portrait.jpg');
  background-size: 185% auto;
  background-position: 50% 18%;
}