@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/nsd-latin.b5dab172.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/nsd-latin-ext.56ddb504.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+011E-011F, U+015E-015F;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/nsd-cyrillic.5699b368.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("fonts/ysabeau-latin.aeeaa4ae.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("fonts/ysabeau-latin-ext.0c98195a.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+011E-011F, U+015E-015F;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("fonts/ysabeau-cyrillic.01de299f.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
:root:lang(en) { --name-em: 8.796; }
:root:lang(ru) { --name-em: 7.337; }
:root:lang(uz) { --name-em: 7.444; }
/* kholmukhamedov.me · Guilloche
   A payments executive's card engraved like a banknote: deep green ground, ivory type,
   brass linework. One showpiece (the guilloche seal behind the portrait), everything else quiet.
   The build puts the @font-face rules and the per-language --name-em values in front of this file
   and replaces img/... with the hashed file names. */

:root {
  --ground: #0d1f1a;
  --panel: #112720;
  --ink: #f2ecdd;
  --soft: #cfd6c8;
  --muted: #9fb0a5;
  --brass: #d2b574;
  --line: rgb(210 181 116 / .24);
  --mint: #bfe9cf;
  --serif: "Noto Serif Display", "Times New Roman", Times, serif;
  --sans: "Ysabeau Office", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1.25rem, 4.4vw, 4rem);
  --gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 460 1.0625rem/1.56 var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before {                         /* paper grain over the whole page */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: url("grain.ae8f25b7.png");
  opacity: .055;
  mix-blend-mode: overlay;
  pointer-events: none;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .18s ease; }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brass); color: var(--ground); }

.wrap { width: min(100% - 2 * var(--pad), 82rem); margin-inline: auto; }
.skip { position: absolute; left: var(--pad); top: -4rem; z-index: 20; padding: .6rem 1rem; background: var(--ink); color: var(--ground); text-decoration: none; }
.skip:focus { top: .75rem; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  min-height: clamp(40rem, 100svh, 56rem);
}
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.7rem;
}
.langs ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.langs a { display: inline-block; padding-block: .3rem; font-size: .98rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--ink); border-bottom-color: var(--brass); }
.topbar__phone { font-weight: 600; font-size: 1.02rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }

.hero__text {
  grid-column: 1 / span 7;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3.25rem, 8vh, 5.75rem);
  container-type: inline-size;
}
.hero__role { color: var(--brass); font-weight: 560; font-size: 1.08rem; letter-spacing: .012em; }
.name {
  margin-top: 1.1rem;
  font: 300 min(8.25rem, calc(100cqi / var(--name-em, 7))) / .98 var(--serif);
  letter-spacing: -.014em;
}
.name span { display: block; white-space: nowrap; }
.hero__tagline { margin-top: 1.9rem; max-width: 33rem; color: var(--soft); font-size: 1.22rem; line-height: 1.45; text-wrap: pretty; }
.hero__cta { margin-top: 2.2rem; }
.btn {
  display: inline-block;
  padding: .98rem 1.7rem 1.02rem;
  background: var(--brass);
  color: var(--ground);
  font: 640 1rem/1 var(--sans);
  letter-spacing: .012em;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px rgb(210 181 116 / .7);
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--ink); color: var(--ground); }

/* The portrait file is 1672 x 2000: the studio frame (1500 wide) plus room on the left for the
   elbow that the frame cut off, and a sliver on the right. --w is the width of that file on the
   page; the person is drawn at the scale the 37.5rem-wide frame had (1 px of the photo = .025rem). */
.hero__figure {
  --w: min(100%, 41.8rem, 46vw, max(30rem, calc((100svh - 1.5rem) * .836)));   /* 46vw keeps the sleeve clear of the name; the last term, the figure inside the window */
  grid-column: 6 / -1;
  grid-row: 1 / 3;
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: var(--w);
  margin-right: -1.8rem;
}
.hero__figure picture { display: block; position: relative; }
.portrait { display: block; position: relative; width: 100%; height: auto; }
.hero__art {
  position: absolute;
  left: 54.43%;                        /* the middle of the face in the widened file */
  top: 46%;
  width: 64rem;
  aspect-ratio: 1;
  translate: -50% -50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.hero__glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgb(191 233 207 / .30), rgb(191 233 207 / .09) 58%, transparent); }
.seal { position: absolute; inset: 0; background: url("seal.4b3f8b24.svg") center / contain no-repeat; opacity: .6; }
.seal--veil { background-image: url("veil.75d1c304.svg"); opacity: .26; rotate: 4deg; }

@keyframes turn { to { rotate: 360deg; } }
@keyframes turn-back { from { rotate: 4deg; } to { rotate: -356deg; } }
@keyframes rise { from { opacity: 0; translate: 0 1.1rem; } }
@keyframes appear { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .seal { animation: turn 320s linear infinite; }
  .seal--veil { animation: turn-back 460s linear infinite; }
  .hero__text > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__text > :nth-child(2) { animation-delay: .08s; }
  .hero__text > :nth-child(3) { animation-delay: .18s; }
  .hero__text > :nth-child(4) { animation-delay: .28s; }
  .hero__figure { animation: appear 1.4s ease both; }
}

/* ------------------------------------------------------------ figures: the denomination panel */
.figs { position: relative; background: var(--panel); border-block: 1px solid var(--line); }
.figs::before, .figs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: .875rem;
  background: url("ribbon.de1e8d3a.svg") left center / 40rem 100% repeat-x;
  opacity: .75;
}
.figs::before { top: .5rem; }
.figs::after { bottom: .5rem; }
.figs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fig { padding: 3.5rem 1.75rem 3.4rem; border-left: 1px solid var(--line); }
.fig:first-child { padding-left: 0; border-left: 0; }
.fig__n { font: 300 clamp(3rem, 5.4vw, 4.9rem) / .9 var(--serif); color: var(--brass); letter-spacing: -.012em; white-space: nowrap; }
.fig__l { margin-top: 1.05rem; max-width: 15.5rem; color: var(--soft); font-size: 1rem; line-height: 1.42; text-wrap: pretty; }

/* ------------------------------------------------------------ sections */
.sec { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec__title { grid-column: 1 / span 3; align-self: start; position: sticky; top: 2rem; font: 300 clamp(1.9rem, 2.9vw, 2.6rem) / 1.08 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.sec__body { grid-column: 4 / -1; min-width: 0; }

.prose__lead { font: 300 clamp(1.4rem, 2.1vw, 1.9rem) / 1.34 var(--serif); letter-spacing: -.004em; text-wrap: pretty; }
.prose__rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.75rem; margin-top: 2.2rem; color: var(--soft); }
.prose__rest p { text-wrap: pretty; }

/* career */
.job { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); column-gap: var(--gap); padding-block: 2.2rem; border-top: 1px solid var(--line); }
.job:first-child { padding-top: 0; border-top: 0; }
.job:last-child { padding-bottom: 0; }
.job__when, .stage__when { font-family: var(--serif); font-weight: 400; white-space: nowrap; }
.job__when { padding-top: .5rem; color: var(--brass); font-size: 1.12rem; }
.job__org { font: 400 clamp(1.7rem, 2.4vw, 2.15rem) / 1.12 var(--serif); letter-spacing: -.006em; }
.job__role, .stage__title { font: 640 1.06rem/1.35 var(--sans); }
.job__role { margin-top: .55rem; }
.job__note { margin-top: .5rem; max-width: 42rem; color: var(--muted); font-size: 1rem; text-wrap: pretty; }
.job__body { grid-column: 2; }
.stages { grid-column: 1 / -1; }
.stage { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); column-gap: var(--gap); margin-top: 1.9rem; }
.stage__when { padding-top: .12rem; color: var(--muted); font-size: 1rem; }
.points { display: grid; row-gap: .5rem; max-width: 45rem; margin-top: .85rem; color: var(--soft); }
.points li { position: relative; padding-left: 1.35rem; text-wrap: pretty; }
.points li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: 1px; background: var(--brass); }

/* speaking, mentoring */
.sec--refs .sec__title { grid-column: 1 / -1; position: static; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.sec--refs .sec__body { grid-column: 1 / -1; }
.refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.75rem; }
.ref { display: flex; flex-direction: column; gap: .35rem; padding-block: 1.45rem 1.5rem; border-top: 1px solid var(--line); }
.ref__date { order: -1; min-height: 1.3em; color: var(--brass); font: 400 .98rem/1.3 var(--serif); letter-spacing: .01em; }
.ref__what { font-weight: 600; font-size: 1.08rem; line-height: 1.36; text-wrap: pretty; }
.ref__where { margin-top: .2rem; color: var(--muted); font-size: .98rem; line-height: 1.42; text-wrap: pretty; }
.ref__src { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: auto; padding-top: .55rem; font-size: .92rem; }
.ref__src a { color: var(--soft); }
.ref__src a:hover { color: var(--brass); }

/* memberships, education, languages */
.sec--more { border-top: 1px solid var(--line); }
.more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gap); }
.more .sec__title { position: static; margin-bottom: 1.6rem; font-size: clamp(1.55rem, 2.1vw, 1.9rem); }
.more__col--orgs { grid-column: 1 / span 5; }
.more__col--edu { grid-column: 6 / span 4; }
.more__col--lang { grid-column: 10 / -1; }
.org + .org { margin-top: 1.5rem; }
.org__kind, .edu__when { color: var(--brass); font: 400 .98rem/1.35 var(--serif); }
.org__names { margin-top: .4rem; }
.org__names li, .edu__org { font-weight: 600; line-height: 1.4; }
.org__names li + li { margin-top: .12rem; }
.edu li + li { margin-top: 1.5rem; }
.edu__org { margin-top: .35rem; font-size: 1.0625rem; }
.edu__role { color: var(--muted); font-size: .98rem; }
.langline { color: var(--soft); text-wrap: pretty; }

/* ------------------------------------------------------------ contact */
.contact { position: relative; background: var(--panel); border-top: 1px solid var(--line); padding-top: clamp(4rem, 8vw, 6.5rem); }
.contact::before { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: .875rem; background: url("ribbon.de1e8d3a.svg") left center / 40rem 100% repeat-x; opacity: .75; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.75rem var(--gap); align-items: start; }
.contact__intro { grid-column: 1 / span 3; }
.contact .sec__title { position: static; }
.contact__lead { margin-top: 1.1rem; max-width: 17rem; color: var(--soft); text-wrap: pretty; }
.contact__phone {
  grid-column: 4 / -1;
  justify-self: start;
  font: 300 clamp(2.6rem, 8.6vw, 7.75rem) / .95 var(--serif);
  letter-spacing: -.012em;
  color: var(--brass);
  text-decoration: none;
  white-space: nowrap;
}
.contact__phone:hover { color: var(--ink); }
.channels { grid-column: 4 / span 6; }
.channels > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; padding-block: .82rem; border-top: 1px solid var(--line); }
.channels > div:last-child { border-bottom: 1px solid var(--line); }
.channels dt { color: var(--muted); }
.channels dd { font-weight: 600; }
.qr { grid-column: 10 / -1; justify-self: end; width: 11.5rem; padding: .9rem .9rem .75rem; background: var(--ink); color: var(--ground); border-radius: 2px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px rgb(210 181 116 / .7); }
.qr img { display: block; width: 100%; height: auto; }
.qr figcaption { margin-top: .5rem; font-size: .86rem; font-weight: 600; text-align: center; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-block: 1.6rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------ page not found */
.lost { display: grid; place-content: center; justify-items: start; gap: 1.6rem; min-height: 100svh; padding-block: 4rem; }
.lost__code { font: 300 clamp(5rem, 22vw, 11rem) / .85 var(--serif); color: var(--brass); letter-spacing: -.02em; }
.lost ul { display: grid; row-gap: .6rem; color: var(--soft); }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 61.99rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .topbar { padding-block: 1.1rem; }
  /* The portrait stands whole on a brass line, the seal behind it stops at that line, and the text
     follows below. The studio frame is centred; the room for the elbow hangs out on the left. */
  .hero__figure {
    --w: min(105%, 26.25rem);
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin: -.6rem 0 0 calc(50% - .5443 * var(--w));
    clip-path: inset(-50rem -50rem 0 -50rem);
  }
  .hero__art { width: 40rem; top: 44%; }
  .hero__text { grid-column: 1; grid-row: 3; padding-block: 1.45rem 3.25rem; }
  .hero__text::before { content: ""; position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: 0; height: 1px; background: rgb(210 181 116 / .5); }
  .hero__tagline { font-size: 1.12rem; margin-top: 1.25rem; }
  .hero__cta { margin-top: 1.6rem; }
  .figs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { padding: 2.25rem 1.1rem 2rem; }
  .fig:nth-child(odd) { padding-left: 0; border-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .figs__list { padding-block: 1.25rem; }
  .sec__grid, .more, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .sec__title { grid-column: 1; position: static; margin-bottom: 1.75rem; }
  .sec__body, .more__col--orgs, .more__col--edu, .more__col--lang, .contact__intro, .contact__phone, .channels { grid-column: 1; }
  .prose__rest { grid-template-columns: minmax(0, 1fr); margin-top: 1.8rem; }
  .job, .stage { grid-template-columns: minmax(0, 1fr); }
  .job__when { padding-top: 0; margin-bottom: .5rem; }
  .job__body { grid-column: 1; }
  .stage__when { margin-bottom: .3rem; }
  .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .contact__lead { max-width: none; }
  .contact__phone { font-size: clamp(2rem, 11.5vw, 7.75rem); }
  .channels > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .qr { grid-column: 1; justify-self: start; }
}
@media (max-width: 44rem) {
  .refs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26rem) {
  .langs ul { gap: .3rem 1.1rem; }
  .langs a, .topbar__phone { font-size: .92rem; }
}
@media print {
  body::before, .hero__art { display: none; }
}