/* About section — shared by about (Figma 229:15659), team (229:15957), customers (229:16027)
   and dr-siwaphon (229:18082). One file because the four pages share the person card, the
   breadcrumb and the section headings. Figma frames are 1440 wide; container = 1248. */

/* ---------- shared bits ---------- */
.ab-line { width: 78px; height: 3px; border: 0; background: var(--red-dark); margin: 0 auto 8px; }
.ab-line--left { margin-left: 0; }
.ab-h2 { font: 600 clamp(32px, 3.5vw, 50px)/1.25 var(--font-en); text-transform: uppercase; color: #000; }
.ab-h2 span { color: var(--red); }
.ab-h2--xl { font-size: clamp(38px, 4.2vw, 60px); }

.crumbs { padding-top: 22px; font: 400 15px/1.35 var(--font-en); color: #000; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 18px; height: 12px; background: url("../../img/common/chevron.svg") center/5px auto no-repeat; filter: brightness(0); }
.crumbs a { text-decoration: none; display: inline-block; padding: 4px 0; }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--red); font-weight: 600; }
.crumbs--dark [aria-current] { color: var(--red-dark); font-weight: 500; }

/* person card (about, team, dr-siwaphon) */
.person-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 33px; }
.person-card { position: relative; flex: 0 1 342px; display: flex; flex-direction: column; background: #fff; border-radius: 30px; overflow: hidden; color: #000; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.person-card__img { width: 100%; aspect-ratio: 1000/1200; object-fit: cover; border-bottom: 5px solid var(--red-dark); }
.person-card__body { flex: 1; min-height: 113px; padding: 9px 46px 22px 17px; }
.person-card__name { font: 700 25px/1.069 var(--font-en); text-transform: uppercase; }
.person-card__role { font: 500 15px/1.069 var(--font-en); color: var(--red); margin-top: 6px; }
a.person-card::after { content: ""; position: absolute; right: 13px; bottom: 15px; width: 26px; height: 26px; background: url("../../img/about/arrow-circle.svg") center/contain no-repeat; transition: filter .2s; }
a.person-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
a.person-card:hover::after { filter: brightness(.6); }

/* ================= ABOUT ================= */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: clamp(420px, 44.3vw, 638px); display: flex; align-items: center;
  background: linear-gradient(160deg, #a6272f 0%, #7d1b22 32%, #3e0d12 66%, #2c0b10 100%); }
.ab-hero::after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 51.6%;
  background: url("../../img/about/hero-plasma.webp") left center/cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.ab-hero__inner { padding-top: 40px; padding-bottom: 40px; }
.ab-hero__logo { width: clamp(200px, 22.4vw, 322px); filter: brightness(0) invert(1); margin: 0 0 34px -16px; }
.ab-hero__eyebrow { position: relative; font: 500 clamp(15px, 1.25vw, 18px)/1.3 var(--font-th); text-transform: uppercase; margin: 0 0 14px; padding-top: 22px; }
.ab-hero__eyebrow::before, .ab-hero__line { content: ""; display: block; width: min(564px, 100%); height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 564 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23b02a31' stop-opacity='.15'/%3E%3Cstop offset='.5' stop-color='%23d8343c'/%3E%3Cstop offset='1' stop-color='%23b02a31' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 1.5H282L326 28.5H564' fill='none' stroke='url(%23g)' stroke-width='2.5'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.ab-hero__eyebrow::before { position: absolute; left: -2px; top: -18px; }
.ab-hero__title { font: 700 clamp(36px, 4.2vw, 60px)/1.02 var(--font-en); text-transform: uppercase; }
.ab-hero__text { font: 400 clamp(16px, 1.45vw, 21px)/1.36 var(--font-th); margin: 10px 0 0; }
.ab-hero__line { transform: scaleY(-1); margin-top: 10px; }

.ab-intro__band { background: #000; color: #fff; padding: 41px 0 220px; }
.ab-intro__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 24px 48px; padding-left: calc(var(--gutter) + 30px); margin-right: max(0px, calc((100vw - 1440px) / 2 - 41px)); }
.ab-intro__title { font: 700 clamp(32px, 3.5vw, 50px)/.998 var(--font-en); text-transform: uppercase; color: var(--red); }
.ab-intro__title span { color: #fff; display: block; }
.ab-intro__sub { font: 600 clamp(19px, 1.75vw, 25px)/1.35 var(--font-th); margin: 6px 0 0; }
.ab-intro__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.ab-intro__media { margin: -180px 3px 0; padding: 32px 29px 0; background: var(--bg); }
.ab-intro__media img { width: 100%; aspect-ratio: 1182/665; object-fit: cover; }
.ab-intro__body { padding: 25px 30px 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.ab-intro__body p { margin-bottom: 11px; }
.ab-intro__body strong { font-weight: 500; color: var(--red); }

.ab-vm { position: relative; padding: 92px 0 88px;
  background: radial-gradient(circle 461px at -31px 305px, #c69bff, rgba(198,155,255,0) 100%),
              radial-gradient(circle 393px at calc(100% + 58px) 680px, #ff898f, rgba(255,137,143,0) 100%); }
.ab-vm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 524px); gap: 40px 64px; align-items: center; padding-left: calc(var(--gutter) + 30px); padding-right: calc(var(--gutter) + 36px); }
.ab-vm__icon { width: 41px; height: 41px; object-fit: contain; margin-bottom: -4px; }
.ab-vm__title { font: 600 clamp(42px, 4.2vw, 60px)/1.3 var(--font-en); text-transform: uppercase; }
.ab-vm__item p, .ab-vm__list { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.ab-vm__item--vision p { max-width: 514px; margin-top: 2px; }
.ab-vm__list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 2px; }
.ab-vm__list b { font-weight: 300; color: var(--red); }

.ab-values { position: relative; padding: 0 0 65px; overflow: hidden;
  background: radial-gradient(circle 393px at calc(100% + 58px) -1px, #ff898f, rgba(255,137,143,0) 100%); }
.ab-values .ab-h2 { line-height: 1.3; }
.ab-values__intro { max-width: 715px; margin: 4px auto 35px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.ab-values__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1188px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 19px; }
.ab-values__grid li { background: #fff; border: 1px solid var(--line); min-height: 283px; padding: 21px 12px 18px; display: flex; flex-direction: column; align-items: center; }
.ab-values__grid img { width: auto; height: 68px; max-width: 72px; object-fit: contain; margin-bottom: 10px; }
.ab-values__grid h3 { font: 600 clamp(24px, 2.1vw, 30px)/.95 var(--font-en); color: var(--red); min-height: 1.3em; display: flex; align-items: center; }
.ab-values__grid p { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; margin-top: 6px; }
.ab-values__grid .ab-values__sm { font-size: clamp(15px, 1.25vw, 18px); }

.ab-collab { background: #efefec; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 88px 0 65px; }
.ab-collab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 499px); gap: 40px 62px; padding-left: calc(var(--gutter) + 15px); padding-right: calc(var(--gutter) + 29px); }
.ab-collab .ab-line { margin-bottom: 6px; }
.ab-collab__title { line-height: 1.168; }
.ab-collab__sub { font: 600 clamp(19px, 1.75vw, 25px)/1.3 var(--font-th); margin: 6px 0 6px; }
.ab-collab__text p:not(.ab-collab__sub) { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; margin-bottom: 14px; max-width: 650px; }
.ab-gallery__main { margin: 0; }
.ab-gallery__main img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 82% 50%; }
.ab-gallery__thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ab-gallery__thumbs button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.ab-gallery__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.ab-gallery__thumbs button:hover img { opacity: .8; }
.ab-gallery__nav { display: flex; justify-content: space-between; margin-top: 2px; }
.ab-gallery__arrow { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; background: url("../../img/about/chevron-circle.svg") center/24px no-repeat; }
.ab-gallery__arrow--prev { transform: scaleX(-1); }
.ab-gallery__arrow:hover { filter: brightness(.6); }

.ab-teams { padding: 71px 0 86px; }
.ab-teams__head { position: relative; text-align: center; margin-bottom: 36px; }
.ab-teams__more { position: absolute; right: 38px; top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 500 20px/1.5 var(--font-th); color: var(--muted); text-transform: uppercase; text-decoration: none; }
.ab-teams__more::after { content: "→"; font-size: 24px; line-height: 1; }
.ab-teams__more:hover { color: var(--red); }

.ab-journey { color: #fff; padding: 65px 0 99px;
  background: radial-gradient(ellipse 52% 42% at 63% 103%, #f2373e 0%, rgba(214,46,52,.75) 35%, rgba(120,18,24,0) 100%),
              radial-gradient(ellipse 30% 40% at -4% 104%, #d5615a 0%, rgba(160,40,40,.5) 45%, rgba(0,0,0,0) 100%),
              radial-gradient(ellipse 60% 30% at 30% 82%, rgba(150,25,30,.55), rgba(0,0,0,0) 100%), #000; }
.ab-journey__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; padding: 0 calc(var(--gutter) + 103px) 0 calc(var(--gutter) + 111px); margin: 0 calc(-1 * var(--gutter)); }
.ab-journey__title { font: 600 clamp(42px, 4.2vw, 60px)/.8986 var(--font-en); text-transform: uppercase; }
.ab-journey__title span { color: var(--red); }
.ab-journey__intro { max-width: 506px; text-align: right; margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }

.timeline { list-style: none; margin: 62px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: -272px; width: 1px; margin-left: 1px; background: rgba(255,255,255,.75); }
.timeline__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); min-height: 282px; align-items: start; }
.timeline__item::after, .timeline__start::before { content: ""; position: absolute; left: 50%; top: 0; width: 20px; height: 20px; margin-left: -9px; background: url("../../img/about/timeline-dot.svg") center/contain no-repeat; }
.timeline__card { width: 100%; max-width: 485px; min-height: 185px; padding: 9px 21px 18px; background: rgba(45,45,45,.8); border: 1px solid #fff; }
.timeline__card h3 { font: 600 20px/1.5 var(--font-th); color: var(--bg); }
.timeline__card p { font-size: 20px; line-height: 1.5; color: var(--bg); margin-top: 8px; }
.timeline__year { position: relative; font: 600 clamp(38px, 3.5vw, 50px)/1 var(--font-en); margin: -14px 0 0; }
.timeline__item--right .timeline__year { grid-column: 1; grid-row: 1; justify-self: end; margin-right: -6px; }
.timeline__item--right .timeline__card { grid-column: 3; grid-row: 1; }
.timeline__item--left .timeline__year { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 1px; }
.timeline__item--left .timeline__card { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 8px; }
.timeline__now { position: absolute; right: -66px; top: -30px; font: 300 20px/1.5 var(--font-th); color: var(--red); white-space: nowrap; }
.timeline__start { position: relative; text-align: center; padding-top: 32px; margin: 0; font-size: 20px; line-height: 1.5; color: var(--bg); }
.timeline__start::before { top: 0; margin-left: -9px; }

.ab-partners { padding: 70px 0 85px; }
.ab-partners .ab-h2 { line-height: 1.3; }
.ab-partners__sub { font: 500 clamp(22px, 2.1vw, 30px)/1.3 var(--font-th); color: var(--ink); margin: 0 0 20px; }
.logo-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1245px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.logo-grid li { aspect-ratio: 1; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 12%; }
.logo-grid img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-grid li:nth-child(1) img, .logo-grid li:nth-child(3) img { width: 75%; }
.logo-grid li:nth-child(2) img { width: 68%; }
.logo-grid li:nth-child(4) img { width: 92%; }
.logo-grid li:nth-child(5) img { width: 85%; }
.logo-grid li:nth-child(6) img { width: 57%; }

/* ---------- about: responsive ---------- */
@media (max-width: 1100px) {
  .ab-intro__head, .ab-vm__grid, .ab-collab__grid { padding-left: var(--gutter); padding-right: var(--gutter); margin: 0 auto; }
  .ab-journey__head { padding: 0 var(--gutter); }
  .ab-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-values__grid li:nth-child(4) { grid-column: 1 / 2; }
  .ab-values__grid { justify-content: center; }
}
@media (max-width: 900px) {
  .ab-hero::after { width: 100%; opacity: .45; -webkit-mask-image: none; mask-image: none; background-position: 35% center; }
  .ab-intro__head, .ab-vm__grid, .ab-collab__grid { grid-template-columns: 1fr; }
  .ab-intro__band { padding-bottom: 150px; }
  .ab-intro__media { margin: -110px 0 0; padding: 14px 14px 0; }
  .ab-intro__body { padding: 20px 0 0; }
  .ab-vm { padding: 64px 0; background: radial-gradient(circle 300px at -60px 160px, #c69bff, rgba(198,155,255,0) 100%), radial-gradient(circle 300px at calc(100% + 80px) 100%, #ff898f, rgba(255,137,143,0) 100%); }
  .ab-values { background: none; }
  .ab-collab { padding: 56px 0; }
  .ab-gallery { max-width: 499px; width: 100%; margin: 0 auto; }
  .ab-journey__head { flex-direction: column; }
  .ab-journey__intro { text-align: left; margin: 0; }
  .ab-teams__more { position: static; margin-top: 4px; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* timeline: line on the left, year above each card */
  .timeline { margin-top: 40px; padding-left: 36px; }
  .timeline::before { left: 10px; bottom: -60px; margin-left: 0; }
  .timeline__item { display: block; min-height: 0; padding-bottom: 32px; }
  .timeline__item::after, .timeline__start::before { left: -36px; margin-left: 1px; }
  .timeline__item .timeline__year, .timeline__item--left .timeline__year, .timeline__item--right .timeline__year { margin: -4px 0 12px; font-size: 34px; justify-self: start; }
  .timeline__item .timeline__card, .timeline__item--left .timeline__card { max-width: none; min-height: 0; margin: 0; justify-self: stretch; }
  .timeline__now { position: static; display: block; font-size: 17px; margin-bottom: 2px; }
  .timeline__card h3, .timeline__card p { font-size: 17px; }
  .timeline__start { text-align: left; padding: 0 0 0 36px; margin-top: 4px; }
  .timeline__start::before { left: 0; top: 2px; }
}
@media (max-width: 600px) {
  .ab-hero { min-height: 0; }
  .ab-hero__inner { padding-top: 32px; padding-bottom: 32px; }
  .ab-hero__logo { margin: 0 0 20px -10px; }
  .ab-hero__text br, .cus__intro br { display: none; }
  .ab-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ab-values__grid li { min-height: 0; padding: 18px 8px 16px; }
  .ab-values__grid li:nth-child(4) { grid-column: auto; }
  .ab-values__grid li:nth-child(5) { grid-column: 1 / -1; }
  .ab-values__grid img { height: 52px; }
  .ab-values__grid h3 { font-size: 21px; }
  .logo-grid { gap: 8px; }
  .person-card { flex-basis: 100%; max-width: 342px; }
  .person-card__name { font-size: 23px; }
}

/* ================= TEAM ================= */
.team-sec { padding: 56px 0 80px; text-align: center; }
.team-sec + .team-sec { padding-top: 32px; padding-bottom: 130px; }
.team-sec__intro { max-width: 1182px; margin: 6px auto 36px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.team-sec .person-card { text-align: left; }
.team-sec .ab-h2--purple span { color: var(--purple-2); }
.person-grid--3 { gap: 32px 39px; }
.person-card__body:has(.person-card__name--th) { padding-top: 13px; }
.person-card__name--th { font-family: var(--font-th); font-weight: 600; line-height: 1.12; text-transform: none; }

/* ================= CUSTOMERS ================= */
.cus { padding-bottom: 88px; background: linear-gradient(180deg, rgba(249,249,246,0) 0, rgba(249,249,246,0) 300px, var(--bg) 720px),
  linear-gradient(90deg, #fbb3e5 0%, #f472d6 20%, #e36fd9 38%, #d083e2 58%, #c19ced 80%, #c7b3f1 100%); }
.cus .crumbs { color: #000; }
.cus__head { text-align: center; padding-top: 56px; }
.cus__title { font: 600 clamp(38px, 4.2vw, 60px)/1.3 var(--font-en); color: #fff; text-transform: uppercase; }
.cus__intro { max-width: 1182px; margin: 6px auto 27px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.cus__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1245px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 9px; }
.cus__grid li { aspect-ratio: 1; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 16px 25%; font: 300 20px/1.5 var(--font-th); color: var(--line); }
@media (max-width: 900px) { .cus__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cus__grid li { font-size: 15px; padding: 8px; } .cus__grid { gap: 8px; } }

/* ================= DR. SIWAPHON (CV) ================= */
.cv-hero { padding: 0 0 48px; }
.cv-hero__grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 32px 43px; align-items: start; padding: 20px calc(var(--gutter) + 15px) 0 calc(var(--gutter) + 26px); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.cv-hero__photo { width: 100%; aspect-ratio: 5/6; object-fit: cover; border-radius: 30px; }
.cv-hero__name { font: 700 clamp(40px, 4.2vw, 60px)/.95 var(--font-en); text-transform: uppercase; margin-top: 30px; }
.cv-hero__role { font: 500 clamp(19px, 1.75vw, 25px)/1.5 var(--font-th); color: var(--red); margin: 8px 0 0; }
.cv-hero__role::after { content: ""; display: block; width: 50px; height: 3px; background: var(--red-dark); margin: 12px 0 14px; }
.cv-hero__text { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.cv-hero .btn-row { margin-top: 20px; gap: 14px; }
.btn--ghost { background: var(--bg); border: 1px solid var(--ink); color: #000; box-shadow: none; }
.btn.is-disabled { cursor: not-allowed; opacity: .55; }
.btn.is-disabled:hover { filter: none; transform: none; }

.cv-sec { padding: 46px 0 46px; }
.cv-sec__inner { padding: 0 calc(var(--gutter) + 35px) 0 calc(var(--gutter) + 29px); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.cv-sec__title { font: 700 clamp(24px, 2.1vw, 30px)/1.3 var(--font-en); text-transform: uppercase; }
.cv-sec__title::before { content: ""; display: block; width: 50px; height: 3px; background: var(--red-dark); margin-bottom: 10px; }
.cv-sec--profile .cv-sec__title::before { width: 87px; }
.cv-sec--profile { padding-top: 0; padding-bottom: 54px; }
.cv-sec--profile p { margin-top: 10px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.cv-sec--edu { background: #ededed; padding-bottom: 50px; }
.cv-sec--award { padding-top: 34px; padding-bottom: 48px; }
.cv-sec--pubs { background: var(--ink); color: #fff; padding: 82px 0 100px; }

.edu-list { list-style: none; margin: 18px 0 0; padding: 0; }
.edu-list li { position: relative; padding: 0 0 10px 52px; }
.edu-list li + li { border-top: 1px solid var(--line); padding-top: 6px; margin-left: 9px; padding-left: 43px; }
.edu-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 33px; height: 33px; background: url("../../img/dr-siwaphon/icon-education.svg") center/contain no-repeat; }
.edu-list li + li::before { left: -9px; top: 10px; }
.edu-list h3 { font: 500 clamp(19px, 1.75vw, 25px)/1.4 var(--font-th); }
.edu-list p { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; margin: 2px 0 0; }
.edu-list time { display: block; font: italic 200 clamp(16px, 1.4vw, 20px)/1.5 var(--font-th); color: var(--muted); }

.award-list { list-style: none; margin: 14px 0 0; padding: 0; }
.award-list li { position: relative; padding-left: 60px; max-width: 1080px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.award-list li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 40px; height: 40px; background: url("../../img/dr-siwaphon/icon-trophy.svg") center/contain no-repeat; }

.pub-list { list-style: none; margin: 32px 0 0; padding: 0; }
.pub-list li { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 24px; align-items: center; padding: 10px 0 13px 33px; border-bottom: 1px solid #d4d4d4; position: relative; margin-left: 8px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.pub-list li::before { content: ""; position: absolute; left: 10px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pub-list li:first-child { padding-top: 0; }
.pub-list li:first-child::before { top: 11px; }
.pub-list a { display: grid; place-items: center; width: 46px; height: 46px; }
.pub-list a img { width: 45px; height: 45px; transition: filter .15s; }
.pub-list a:hover img { filter: brightness(1.6); }

.cv-more { padding: 56px 0 100px; text-align: center; }
.cv-more__title { font: 700 clamp(24px, 2.1vw, 30px)/1.3 var(--font-en); margin-bottom: 42px; }
.cv-more .person-card { text-align: left; }

@media (max-width: 900px) {
  .cv-hero__grid { grid-template-columns: 1fr; padding-left: var(--gutter); padding-right: var(--gutter); }
  .cv-hero__photo { max-width: 420px; }
  .cv-hero__name { margin-top: 0; }
  .cv-sec__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .cv-sec--pubs { padding: 56px 0 64px; }
}
@media (max-width: 600px) {
  .pub-list li { grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; padding-left: 22px; margin-left: 0; }
  .pub-list li::before { left: 4px; }
  .pub-list a { width: 40px; height: 40px; }
  .pub-list a img { width: 32px; height: 32px; }
  .award-list li { padding-left: 46px; }
  .award-list li::before { width: 32px; height: 32px; left: 0; }
  .edu-list li, .edu-list li + li { padding-left: 42px; margin-left: 0; }
  .edu-list li::before, .edu-list li + li::before { left: 0; width: 28px; height: 28px; }
  .cv-hero .btn { font-size: 17px; }
}