/* Resume page, revision 2: one studio-grey stage for the hero (sampled from the portrait's own backdrop, so the photo
   needs no frame), a results strip that overlaps the stage, and a career story with a compact chapter rail.
   Site tokens only, plus the four backdrop greys below. Every animation is an enhancement: content is in place without it. */

/* ---------- Hero stage: light panel, cut-out portrait in front of a soft orb and a dashed "system" ring ---------- */
.rh { position: relative; }
.rh-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, #EEF2F6 0%, var(--tint) 100%); }
.rh-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(560px, 72vh, 680px); padding-top: clamp(36px, 5vw, 64px); padding-bottom: 124px; }
.rh-text { grid-column: 1; grid-row: 1; position: relative; z-index: 2; align-self: center; max-width: 620px; }
.rh-figure { position: absolute; z-index: 1; right: var(--gutter); top: clamp(20px, 3vw, 36px); bottom: 0; width: min(44%, 520px); margin: 0; display: flex; align-items: flex-end; justify-content: center; }
.rh-photo { position: relative; z-index: 1; display: block; height: 100%; }
.rh-photo img { display: block; height: 100%; width: auto; max-width: none; }
.rh-orb { position: absolute; left: 50%; top: 9%; width: 84%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, var(--accent-tint) 52%, #C9DCEF 100%); }
.rh-ring { position: absolute; left: 50%; top: 3%; width: 102%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); border: 1px dashed rgb(44 107 165 / .38); }
.rh-ring::after { content: ''; position: absolute; top: 15%; right: 10%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-tint); }
.rh-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rh-eyebrow::before { content: ''; width: 36px; height: 1px; background: currentColor; }
.rh-name { margin: 16px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.9rem, 1.5rem + 4.1vw, 5.4rem); line-height: .94; letter-spacing: -.045em; }
.rh-line { display: block; overflow: hidden; padding-bottom: .06em; }
.rh-line > span { display: block; }
.rh-line + .rh-line > span { font-weight: 300; color: var(--ink-2); }
.rh-position { margin-top: 22px; max-width: 26ch; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; }
.rh-intro { margin-top: 12px; max-width: 52ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.rh-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 22px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-small); }
.rh-now-meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 24px; }
.rh .r-link { color: var(--ink); text-decoration-color: var(--line-strong); }
.rh-place { grid-column: 2; grid-row: 1; position: relative; z-index: 2; align-self: end; justify-self: start; display: grid; gap: 2px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: rgb(32 36 42 / .82); color: var(--on-dark); font-size: var(--fs-micro); }
.rh-place span:last-child { color: #CFE0F1; font-weight: 700; letter-spacing: .14em; }

.now-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.now-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.r-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
.r-link:hover, .r-link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* Results strip: one card that overlaps the stage, so the hero hands over to the evidence. */
.rh-impact { position: relative; z-index: 2; list-style: none; margin: -84px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-2); }
.impact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 26px 28px 18px; }
.impact + .impact { border-left: 1px solid var(--line); }
.impact-fig { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.5vw, 2.9rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.impact-label { margin: 2px 0 0; font-weight: 600; }
.impact-line { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.impact-role { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--fs-small); color: var(--accent); text-decoration: none; }
.impact-role .icon { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.impact-role:hover .icon, .impact-role:focus-visible .icon { transform: translateX(3px); }

/* ---------- Section heads ---------- */
.r-sec-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; align-items: baseline; margin-bottom: clamp(28px, 4vw, 48px); }
.r-index { margin: 0; font-family: var(--display); font-size: var(--fs-small); font-weight: 700; letter-spacing: .1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.r-sec-head h2 { grid-column: 2; margin: 0; }
.r-sec-lead { grid-column: 2; margin-top: 10px; max-width: 60ch; color: var(--ink-2); }

/* ---------- Career: chapter rail + chapters ---------- */
.rc-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.rc-rail { position: sticky; top: 104px; align-self: start; }
.rc-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
.rc-rail a { position: relative; display: grid; gap: 1px; min-height: 44px; padding: 7px 0 7px 16px; color: var(--ink-2); text-decoration: none; transition: color .25s; }
.rc-rail a::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform .3s var(--ease-out); }
.rc-yr { font-size: var(--fs-micro); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rc-co { font-weight: 600; font-size: var(--fs-small); }
.rc-rail a:hover, .rc-rail a:focus-visible { color: var(--ink); }
.rc-rail a[aria-current] { color: var(--ink); }
.rc-rail a[aria-current]::before { transform: scaleY(1); }
.rc-rail a[aria-current] .rc-co { color: var(--accent); }

.tl { position: relative; list-style: none; margin: 0; padding: 0; }
.role { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
.role-rail { position: relative; }
.role-rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.role:first-child .role-rail::before { top: 36px; }
.role:last-child .role-rail::before { bottom: auto; height: 36px; }
.node { position: absolute; left: 50%; top: 30px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); transform: translateX(-50%); transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.role.is-current .node { width: 16px; height: 16px; top: 28px; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-tint); }
.tl.is-live .role.is-passed .node { background: var(--accent); }
.tl.is-live .role.is-active:not(.is-current) .node { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-tint); }
.tl.is-live::after { content: ''; position: absolute; left: var(--tl-x); top: var(--tl-top); height: var(--tl-h); width: 2px; margin-left: -1px; background: var(--accent); transform-origin: top; transform: scaleY(var(--tl-p, 0)); pointer-events: none; }

.role-body { min-width: 0; margin: 0 0 14px 16px; padding: 18px 0 26px; border-bottom: 1px solid var(--line); }
.role:last-child .role-body { border-bottom: 0; }
.role.is-current .role-body { margin-bottom: 28px; padding: 26px 30px 24px; border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); }
.role-head { display: flex; align-items: center; gap: 18px; }
.co-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 48px; padding: 8px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.co-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.co-logo--dark { background: var(--ink); box-shadow: none; }
.co-logo--night { background: #0A0A16; box-shadow: none; }   /* the background of Bitazza's supplied logo */
.co-logo--nimble { background: #1E1544; box-shadow: none; }  /* the background of Nimble's supplied logo */
/* Typographic fallback where no complete official logo is available: the name set as type, not a filled box. */
.co-logo--word { justify-content: flex-start; padding: 0 0 0 12px; background: none; box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; }
.co-logo--word span { font-family: var(--display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.035em; line-height: 1; }
.role.is-current .co-logo--word span { font-size: 1.5rem; }
.role.is-current .co-logo { width: 140px; height: 56px; }
.role-id { min-width: 0; }
.role-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.role-range { font-weight: 600; }
.role-dur { color: var(--ink-2); }
.role-head h3 { display: grid; gap: 2px; margin: 4px 0 0; font-size: 1.15rem; line-height: 1.3; }
.role.is-current .role-head h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.role-title { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }
.role-co { font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
.role-note { font-weight: 400; color: var(--ink-2); }
.role-lead { margin-top: 14px; max-width: 62ch; font-size: 1.06rem; line-height: 1.6; }
.role.is-current .role-lead { font-size: var(--fs-lead); }
.role-points { list-style: disc; margin: 10px 0 0; padding-left: 1.15em; display: grid; gap: 6px; max-width: 68ch; color: var(--ink-2); line-height: 1.55; }
.role-points li::marker { color: var(--accent); }
.tags { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px; background: var(--tint); color: var(--ink-2); font-size: var(--fs-micro); font-weight: 600; }
.role-more { margin-top: 6px; }
.role-more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: var(--fs-small); color: var(--accent); cursor: pointer; list-style: none; }
.role-more > summary::-webkit-details-marker { display: none; }
.role-more > summary::after { content: '+'; font-size: 1.15rem; line-height: 1; }
.role-more[open] > summary::after { content: '−'; }
.role-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.role-points--more { margin-top: 2px; }
.logo-note { margin: 18px 0 0 calc(200px + clamp(24px, 4vw, 56px)); max-width: 72ch; font-size: var(--fs-micro); color: var(--ink-2); }

/* ---------- Capabilities ---------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.cap { min-width: 0; padding: 24px 24px 8px 0; }
.cap + .cap { padding-left: 24px; border-left: 1px solid var(--line); }
.cap h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.25; }
.cap > p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-small); }
.cap-ev { list-style: none; margin: 14px 0 0; padding: 0; }
.cap-ev a { display: grid; gap: 2px; min-height: 44px; padding: 9px 0; border-top: 1px dashed var(--line-strong); color: var(--ink); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; transition: color .2s; }
.cap-ev a:hover, .cap-ev a:focus-visible { color: var(--accent); }
.cap-co { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.r-projects { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px 36px; padding: 24px 28px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); }
.r-projects h3 { grid-row: span 2; margin: 0; font-family: var(--display); font-size: 1.15rem; }
.r-projects p { color: var(--ink-2); font-size: var(--fs-small); }
.r-projects ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.r-projects a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: none; }
.r-projects .icon { width: 16px; height: 16px; }

/* ---------- Education ---------- */
.edu { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.edu > div { padding: 22px 24px 0 0; }
.edu > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.edu dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.edu dd { margin: 8px 0 0; display: grid; gap: 3px; }
.edu dd span { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Contact ---------- */
.r-contact { background: var(--ink); color: var(--on-dark); }
.r-contact .r-index { color: var(--accent-soft); }
.r-contact .lead { color: var(--on-dark-2); max-width: 46ch; margin-top: 14px; }
.r-contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.r-contact-text h2 { margin-top: 12px; max-width: 18ch; color: var(--on-dark); }
.r-contact-text .button { margin-top: 26px; }
.r-contact .r-seated { justify-self: end; max-width: 340px; }
.r-seated, .r-seated img { display: block; width: 100%; height: auto; }
.r-seated img { border-radius: var(--r-panel); }

/* Thai labels: no tracking or capitals. */
html[lang='th'] .now-pill, html[lang='th'] .edu dt, html[lang='th'] .rh-eyebrow { letter-spacing: 0; text-transform: none; }

/* ---------- Motion: one sequence (stage → name → statement → results → chapters) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rh-photo img { animation: rh-photo 1300ms var(--ease-out) both; }
  .rh-line > span { animation: rh-rise 900ms var(--ease-out) both; animation-delay: calc(140ms + var(--i, 0) * 110ms); }
  .rh-eyebrow, .rh-position, .rh-intro, .rh-now, .rh-actions, .rh-place { animation: rh-fade 800ms var(--ease-out) both; }
  .rh-eyebrow { animation-delay: 60ms; }
  .rh-position { animation-delay: 420ms; }
  .rh-intro { animation-delay: 500ms; }
  .rh-now { animation-delay: 580ms; }
  .rh-actions { animation-delay: 660ms; }
  .rh-place { animation-delay: 760ms; }
  .rh-impact .impact { animation: rh-fade 800ms var(--ease-out) both; animation-delay: calc(760ms + var(--i, 0) * 110ms); }
  .js .role.is-pending .co-logo { transform: translateY(6px); opacity: 0; }
  .js .role.is-in .co-logo { transform: none; opacity: 1; transition: transform 600ms var(--ease-out) 140ms, opacity 600ms var(--ease-out) 140ms; }
}
@keyframes rh-photo { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes rh-rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes rh-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cap:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .rh-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; padding-bottom: 104px; }
  .rh-figure { position: relative; grid-row: 1; right: auto; top: auto; bottom: auto; width: 100%; height: clamp(300px, 92vw, 420px); }
  .rh-photo img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%), linear-gradient(90deg, transparent 0, #000 16%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 70%, transparent 97%), linear-gradient(90deg, transparent 0, #000 16%); mask-composite: intersect; }
  .rh-text { grid-row: 2; }
  .rh-place { grid-row: 3; }
  .rh-text { align-self: start; margin-top: 8px; }
  .rh-place { grid-column: 1; justify-self: start; margin-top: 18px; }
  .rh-impact { grid-template-columns: 1fr; margin-top: -72px; }
  .impact + .impact { border-left: 0; border-top: 1px solid var(--line); }
  .impact { padding: 20px 20px 12px; }
  .r-sec-head { grid-template-columns: 1fr; }
  .r-sec-head h2, .r-sec-lead { grid-column: 1; }
  .r-sec-head .r-index { margin-bottom: 6px; }
  .rc-grid { grid-template-columns: 1fr; }
  .rc-rail { display: none; }
  .logo-note { margin-left: 0; }
  .role.is-current .role-body { padding: 20px 18px; margin-left: 10px; }
  .role-body { margin-left: 10px; }
  .r-projects { grid-template-columns: 1fr; padding: 20px; }
  .r-projects h3 { grid-row: auto; }
  .edu { grid-template-columns: 1fr; }
  .edu > div + div { padding-left: 0; border-left: 0; }
  .r-contact-grid { grid-template-columns: 1fr; }
  .r-contact .r-seated { justify-self: start; max-width: 280px; }
}
@media (max-width: 560px) {
  .caps { grid-template-columns: 1fr; }
  .cap { padding-left: 0 !important; border-left: 0 !important; }
  .cap + .cap { border-top: 1px solid var(--line); }
  .role-head { align-items: flex-start; gap: 12px; flex-direction: column; }
  .co-logo { width: 96px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .node, .impact-role .icon, .cap-ev a, .rc-rail a, .rc-rail a::before { transition: none; }
}