@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600&display=swap");

/* NATTAPON BUILDS — native scrolling, distinct worlds, restrained motion. */
:root {
  --bg: #07111f;
  --ink: #eef5ff;
  --muted: #9cb0c8;
  --active-accent: #9ad7ff;
  --focus-color: #badeff;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { position: relative; margin: 0; background: #05080e; color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
main { position: relative; }
a { color: inherit; text-decoration: none; text-underline-offset: .22em; }
button, summary { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 5px; }
main:focus, section:focus { outline: none; }
::selection { background: #c5e3f7; color: #07111f; }
.full-bleed { position: relative; min-height: 100svh; width: 100%; overflow: hidden; }
[data-scene] { --scene-offset: 0; --chapter-light: 0; --chapter-from: #07111f; --label-color: #a6bdd6; isolation: isolate; }
[data-scene]::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 90px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, var(--chapter-from), transparent);
  opacity: calc(.08 + var(--chapter-light) * .1);
}
.hero::after { display: none; }
.skip-link { position: fixed; left: 20px; top: 12px; z-index: 1000; padding: 14px 18px; background: #eaf5ff; color: #07111f; border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* Global orientation stays small and predictable. */
.page-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 999; background: rgba(255,255,255,.05); pointer-events: none; }
.page-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#7dd3fc,var(--active-accent),#fde68a); }
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
  align-items: center; padding: 16px 4vw; color: #dce9f8;
  background: rgba(4,8,14,.93);
  border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease;
}
body.js-ready:not(.scrolled) .site-header { background: linear-gradient(180deg,rgba(4,8,14,.88),rgba(4,8,14,.08)); }
body.scrolled .site-header { background: rgba(4,8,14,.93); border-bottom-color: rgba(255,255,255,.08); }
.brand { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-weight: 800; letter-spacing: .08em; font-size: .82rem; white-space: nowrap; }
.brand-mark { margin-right: .55rem; color: var(--active-accent); transition: color .45s ease; }
.nav { display: flex; gap: 2rem; font-size: .85rem; color: #bdccde; }
.nav a, .resume-link { display: inline-flex; align-items: center; min-height: 44px; transition: color .2s ease; }
.nav a[aria-current], .nav a:hover, .resume-link:hover { color: #fff; }
.nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--active-accent); }
.resume-link { justify-self: end; font-size: .84rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); white-space: nowrap; }
.mobile-nav { display: none; }
.scene-rail {
  position: fixed; right: 17px; top: 50%; transform: translateY(-50%); z-index: 90;
  display: grid; gap: 1px; padding: 9px 3px; border-radius: 999px;
  background: rgba(5,8,14,.72); border: 1px solid rgba(255,255,255,.12);
}
.scene-rail:empty { display: none; }
.scene-rail a { position: relative; width: 26px; height: 26px; border-radius: 50%; }
.scene-rail a::after { content: ""; position: absolute; width: 6px; height: 6px; left: 10px; top: 10px; border-radius: 50%; background: #8997a7; transition: transform .25s ease, background .25s ease; }
.scene-rail a::before {
  content: attr(aria-label); position: absolute; right: 35px; top: 50%; transform: translateY(-50%) translateX(5px);
  white-space: nowrap; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #eaf3ff;
  background: #08111e; border: 1px solid rgba(255,255,255,.16); padding: 9px 11px; border-radius: 5px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.scene-rail a:hover::before, .scene-rail a:focus-visible::before { opacity: 1; transform: translateY(-50%); }
.scene-rail a[aria-current="location"]::after { transform: scale(1.5); background: var(--active-accent); }
.now-viewing { position: fixed; right: 53px; bottom: 24px; z-index: 89; text-align: right; display: grid; gap: 4px; pointer-events: none; padding: 7px 9px; border-radius: 4px; background: rgba(5,8,14,.82); opacity: 0; transition: opacity .3s ease; }
body.js-ready .now-viewing { opacity: 1; }
.now-viewing span { font-size: .55rem; letter-spacing: .17em; color: #a0b2c6; }
.now-viewing strong { font-size: .68rem; letter-spacing: .14em; color: #e9f2fc; }
body.light-scene .now-viewing { background: rgba(249,246,234,.9); }
body.light-scene .now-viewing span { color: #525a60; }
body.light-scene .now-viewing strong { color: #243448; }
body[data-active-scene="closing"] .now-viewing { opacity: 0; }
.pointer-aura {
  position: fixed; left: -180px; top: -180px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: 75;
  background: radial-gradient(circle,color-mix(in srgb,var(--active-accent) 13%,transparent),transparent 67%);
  opacity: 0; mix-blend-mode: screen; transition: opacity .35s ease;
}
body.pointer-present .pointer-aura { opacity: .65; }

/* Text and controls share one rhythm. Content is visible without JavaScript. */
.eyebrow, .section-kicker, .project-label, .paper-type { font-size: .72rem; line-height: 1.6; letter-spacing: .21em; text-transform: uppercase; color: var(--label-color); }
.is-active .section-kicker, .is-active .project-label, .is-active .eyebrow { color: var(--label-active,var(--active-accent)); }
.reveal { --reveal-y: 0px; opacity: 1; transform: translate3d(0,var(--reveal-y),0); }
.motion-ready .reveal { --reveal-y: 26px; opacity: 0; filter: blur(3px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.motion-ready .reveal.in, .motion-ready .reveal:focus-within { --reveal-y: 0px; opacity: 1; filter: none; }
.motion-ready .delay-1 { transition-delay: .12s; }
.motion-ready .delay-2 { transition-delay: .24s; }
.hero-actions, .project-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; padding: 14px 20px; font-weight: 700; font-size: .9rem; border: 1px solid transparent; }
.btn, .text-btn, .fun-project a, .closing-actions a { transition: translate .18s ease-out, background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.btn.primary, .btn.light { background: #eaf5ff; color: #07111f; }
.btn.ghost { border-color: rgba(255,255,255,.35); }
.btn.dark { background: #24180c; color: #fff; }
.btn::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid currentColor; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.text-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; text-decoration: underline; font-size: .9rem; }
.section-title { position: relative; z-index: 4; min-width: 0; }
.section-title h2 { font-size: clamp(3.6rem,8vw,9rem); letter-spacing: -.06em; line-height: .95; margin: .14em 0; }
.section-title > p:last-child { max-width: 650px; color: #a9bbce; font-size: 1.08rem; line-height: 1.65; }

/* Intro: oversized type with clear space below the actions. */
.hero { --hero-x: 0px; --hero-y: 0px; display: flex; align-items: flex-end; min-height: max(100svh,700px); padding: max(130px,14svh) 5vw 170px; background: radial-gradient(circle at 75% 35%,#123b66 0,#0b203b 25%,#081423 48%,#05080e 76%); }
.hero-grid { position: absolute; inset: -64px; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,black,transparent 85%); animation: gridDrift 24s linear infinite; }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(50px); opacity: .28; translate: var(--hero-x) var(--hero-y); }
.hero-orb-a { width: 35vw; height: 35vw; background: #2563eb; right: -8vw; top: 12vh; }
.hero-orb-b { width: 24vw; height: 24vw; background: #7c3aed; left: 25vw; bottom: -9vw; }
.hero-copy { position: relative; z-index: 4; width: 100%; max-width: 1120px; }
.hero h1 { font-size: clamp(4rem,9vw,9.5rem); line-height: .94; margin: .2em 0 .22em; letter-spacing: -.065em; font-weight: 700; }
.hero h1 > * { display: block; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: .08s; }
.hero h1 em { font-weight: 400; color: #a6d9ff; transition-delay: .2s; }
.motion-ready .hero-copy:not(.in) h1 > * { opacity: 0; transform: translateY(16px); filter: blur(3px); }
.hero-lead { max-width: 735px; color: #b9c7d9; font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.75; }
.hero-meta { position: absolute; right: 5vw; bottom: 170px; z-index: 4; display: grid; grid-template-columns: auto auto; gap: 10px 20px; align-items: end; text-align: right; }
.hero-meta span { font-size: .63rem; letter-spacing: .14em; color: #9cacc0; }
.hero-meta strong { font-size: 1.05rem; }
.hero-marquee { position: absolute; inset: auto 0 0; height: 34px; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; background: rgba(3,7,13,.26); z-index: 4; }
.hero-marquee div { width: max-content; height: 100%; display: flex; align-items: center; gap: 6vw; animation: marquee 36s linear infinite; font-size: .58rem; letter-spacing: .2em; color: #8aa1bb; }
.hero-marquee span { white-space: nowrap; }
.scroll-hint { position: absolute; left: 5vw; bottom: 64px; z-index: 4; min-height: 44px; display: flex; gap: 14px; align-items: center; color: #a1b2c5; font-size: .62rem; letter-spacing: .18em; }
.scroll-hint i { display: block; width: 64px; height: 1px; background: currentColor; transition: width .25s ease; }
@keyframes gridDrift { to { transform: translate3d(64px,64px,0); } }
@keyframes marquee { to { transform: translateX(-33.333%); } }

/* Philosophy retains the warm editorial pause. */
.philosophy { --chapter-from: #05080e; --label-color: #5b526f; --label-active: #5b526f; --focus-color: #4a4267; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 7vw; align-items: center; padding: 12vh 6vw; background: #f2f0e8; color: #151515; }
.quote-wrap, .how-built { position: relative; z-index: 4; min-width: 0; }
.quote-mark { font-size: 6rem; margin: 0; color: #a79b80; line-height: .5; }
.quote-wrap blockquote { font-family: Georgia,serif; font-size: clamp(2.4rem,5.5vw,6.5rem); line-height: 1.06; letter-spacing: -.045em; margin: 30px 0; }
.quote-wrap em { font-weight: 400; color: #626e9d; }
.quote-by { letter-spacing: .17em; font-size: .72rem; line-height: 1.6; }
.how-built { max-width: 520px; }
.how-built p:nth-of-type(2) { font-size: 1.2rem; line-height: 1.75; color: #414141; }
.workflow-note { font-size: .91rem; line-height: 1.8; color: #59554d; }
.build-flow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 28px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.build-flow span { border: 1px solid #c0b8a8; border-radius: 999px; padding: 9px 11px; }
.build-flow b { color: #777063; }
.projects-intro { --chapter-from: #f2f0e8; min-height: 55svh; display: flex; align-items: end; padding: 9vh 5vw; background: #07111f; }

/* Big Projects keep their immersive two-column compositions. */
.project { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4vw; align-items: center; padding: max(110px,12vh) 5vw; }
.project-index { position: absolute; left: 5vw; top: 7vh; z-index: 4; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; opacity: .72; }
.project-copy { position: relative; z-index: 4; max-width: 680px; min-width: 0; }
.project h3 { font-size: clamp(3rem,6.3vw,7.5rem); line-height: .95; letter-spacing: -.065em; margin: .14em 0; }
.project-subtitle { font-size: clamp(1.25rem,1.85vw,1.85rem); font-weight: 600; line-height: 1.3; margin: .6rem 0; }
.project-description { font-size: 1.01rem; line-height: 1.8; max-width: 630px; color: inherit; opacity: .9; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.tags span { border: 1px solid currentColor; border-radius: 999px; padding: 7px 10px; font-size: .72rem; opacity: .82; }
.project-visual { --tilt-x: -5deg; --tilt-y: 2deg; position: relative; z-index: 4; justify-self: end; width: 100%; min-width: 0; max-width: 780px; transform: translate3d(0,var(--reveal-y,0px),0) perspective(1300px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y)); box-shadow: 0 45px 100px rgba(0,0,0,.3); }
.motion-ready .project-visual { transition: opacity .75s ease, filter .7s ease, transform .3s ease-out; }
.ambient-note { position: absolute; right: 5vw; top: 7vh; z-index: 4; font-size: .62rem; letter-spacing: .18em; opacity: .65; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* SKYCAST: rain, drifting storm banks, and a clear forecast preview. */
.project-skycast { --chapter-from: #07111f; background: linear-gradient(120deg,#08101c,#0b1b31 48%,#102642); color: #ecf6ff; }
.project-skycast::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 35%,rgba(135,206,250,.16),transparent 35%),linear-gradient(transparent,rgba(0,0,0,.24)); z-index: 0; pointer-events: none; }
.lightning { position: absolute; inset: 0; opacity: 0; z-index: 1; pointer-events: none; }
.cloud-layer { position: absolute; z-index: 1; pointer-events: none; width: 68vw; height: 30vw; min-width: 700px; min-height: 300px; filter: blur(22px); opacity: .3; background: radial-gradient(ellipse at 35% 55%,rgba(165,193,220,.32),transparent 42%),radial-gradient(ellipse at 60% 50%,rgba(92,117,149,.4),transparent 45%),radial-gradient(ellipse at 78% 58%,rgba(50,72,99,.42),transparent 36%); }
.cloud-a { top: -7%; left: -18%; animation: cloudDriftA 32s ease-in-out infinite alternate; }
.cloud-b { right: -25%; bottom: -2%; opacity: .18; transform: scale(.85); animation: cloudDriftB 38s ease-in-out infinite alternate; }
.sky-ui { background: #081323; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; padding: 18px; }
.browser-bar { display: flex; gap: 7px; align-items: center; color: #a9bdd4; font-size: .72rem; }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #657a94; }
.browser-bar b { margin-left: auto; margin-right: auto; letter-spacing: .12em; }
.sky-panel { padding: 34px 20px; }
.sky-main { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; }
.sky-main small, .sky-main span { color: #a7bdd5; }
.sky-main span { font-size: .9rem; line-height: 1.5; }
.sky-main strong { grid-row: 1 / 3; grid-column: 2; font-size: clamp(3rem,5.5vw,5rem); line-height: 1; }
.sky-chip { display: inline-block; margin: 26px 0 18px; padding: 12px 16px; border-radius: 16px; background: #102b4c; color: #cbe9ff; }
.sky-days { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.sky-days div { padding: 14px 10px; border-radius: 16px; background: rgba(255,255,255,.05); display: grid; gap: 9px; }
.sky-days span { font-size: .65rem; color: #acc0d6; }
.sky-days b { font-size: 1.3rem; }
@keyframes cloudDriftA { to { translate: 18vw 2vh; scale: 1.05; } }
@keyframes cloudDriftB { to { translate: -18vw -3vh; scale: 1.03; } }

/* POCKETFLOW: familiar gold and warm green, with restrained depth. */
.project-pocketflow { --chapter-from: #102642; --label-color: #4f3716; --label-active: #4f3716; --focus-color: #352312; background: radial-gradient(circle at 75% 20%,#fff7d6 0,#f3d67c 22%,#b48835 64%,#6b4b1f 100%); color: #24180c; }
.project-pocketflow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,rgba(255,255,255,.5),transparent 44%,rgba(255,255,255,.07)); z-index: 0; pointer-events: none; }
.finance-ui { background: #fdfbf5; color: #17231c; border-radius: 30px; padding: 28px; box-shadow: 0 45px 100px rgba(55,37,10,.25); }
.finance-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .68rem; letter-spacing: .1em; }
.finance-balance { padding: 32px 0 20px; }
.finance-balance small { display: block; color: #536256; }
.finance-balance strong { font-size: clamp(2.8rem,4.4vw,3.8rem); }
.finance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.finance-grid div { background: #eef2ec; padding: 18px; border-radius: 18px; }
.finance-grid small { display: block; color: #536256; }
.finance-grid b { font-size: 1.5rem; }
.bars { height: 170px; display: flex; gap: 12px; align-items: flex-end; padding-top: 30px; }
.bars i { display: block; flex: 1; height: var(--h); border-radius: 10px 10px 3px 3px; background: linear-gradient(#7fb997,#326f50); }
.money-stream { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.money-stream span { position: absolute; font-size: clamp(1rem,2.2vw,2.3rem); font-weight: 800; color: rgba(66,45,11,.12); letter-spacing: -.04em; animation: moneyFloat 19s linear infinite; }
.money-stream span:nth-child(1) { left: 7%; top: 20%; animation-duration: 23s; }
.money-stream span:nth-child(2) { left: 32%; top: 72%; animation-delay: -4s; }
.money-stream span:nth-child(3) { left: 58%; top: 15%; animation-delay: -7s; animation-duration: 17s; }
.money-stream span:nth-child(4) { left: 78%; top: 66%; animation-delay: -2s; animation-duration: 21s; }
.money-stream span:nth-child(5) { left: 90%; top: 34%; animation-delay: -9s; }
@keyframes moneyFloat { 0% { translate: 0 9vh; opacity: 0; } 18%,82% { opacity: 1; } 100% { translate: 0 -18vh; opacity: 0; } }

/* LocalGov: ordered signals and clear data. */
.project-localgov { --chapter-from: #b48835; background: linear-gradient(120deg,#051f2a,#0b3440 55%,#0e4750); color: #eaffff; }
.gov-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(150,255,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(150,255,240,.045) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right,black,transparent 75%); pointer-events: none; }
.gov-ui { background: #f4fbfb; color: #082b31; border-radius: 26px; padding: 28px; }
.gov-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; font-weight: 800; }
.gov-head b { font-size: .64rem; border: 1px solid #7ab1b5; padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.gov-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 30px 0; }
.gov-stats div { background: #e2f0f0; padding: 16px 12px; border-radius: 16px; }
.gov-stats small { display: block; color: #46686d; font-size: .7rem; line-height: 1.6; }
.gov-stats strong { font-size: 2rem; }
.gov-ui svg { display: block; width: 100%; height: auto; color: #1686a0; }
.rank-signal { position: absolute; left: 5vw; right: 5vw; bottom: 7vh; height: 2px; display: flex; justify-content: space-between; z-index: 1; opacity: .25; }
.rank-signal::before { content: ""; position: absolute; inset: 0; height: 1px; background: linear-gradient(90deg,transparent,#8bffee,transparent); }
.rank-signal i { width: 6px; height: 6px; border-radius: 50%; background: #8bffee; translate: 0 -3px; animation: signalPulse 4s ease-in-out infinite; }
.rank-signal i:nth-child(2) { animation-delay: -.8s; }
.rank-signal i:nth-child(3) { animation-delay: -1.6s; }
.rank-signal i:nth-child(4) { animation-delay: -2.4s; }
.rank-signal i:nth-child(5) { animation-delay: -3.2s; }
@keyframes signalPulse { 50% { scale: 1.45; opacity: .4; } }

/* Experiments stay playful without moving the entire reading surface. */
.fun { --chapter-from: #0e4750; padding: 11vh 5vw; background: #10081a; }
.fun-stage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 7vh; min-height: 60vh; }
.fun-project { position: relative; min-width: 0; padding: 4vw; overflow: hidden; }
.fun-project h3 { position: relative; font-size: clamp(2.25rem,4vw,4.8rem); line-height: 1; letter-spacing: -.055em; margin: .25em 0; }
.fun-project p { position: relative; max-width: 520px; line-height: 1.8; color: #d8d0e4; }
.fun-project a { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; text-decoration: underline; }
.unlucky { background: radial-gradient(circle at 60% 25%,#6d1aa0,#2a0c42 55%,#16081f); border-radius: 36px 0 0 36px; }
.procrastinate { background: radial-gradient(circle at 50% 10%,#183a46,#0c1d25 55%,#071116); border-radius: 0 36px 36px 0; }
.dice { position: absolute; font-size: 6rem; opacity: .18; animation: diceFloat 6s ease-in-out infinite; pointer-events: none; }
.d1 { right: 10%; top: 12%; }
.d2 { right: 32%; bottom: 10%; animation-delay: -2s; }
.clock-face { position: absolute; width: 220px; height: 220px; border: 2px solid rgba(255,255,255,.15); border-radius: 50%; right: 8%; top: 10%; opacity: .3; pointer-events: none; }
.clock-face::before, .clock-face::after { content: ""; position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; height: 2px; background: #c7f5ff; }
.clock-face::before { width: 72px; transform: rotate(-20deg); animation: clockMinute 45s linear infinite; }
.clock-face::after { width: 50px; transform: rotate(80deg); animation: clockHour 180s linear infinite; }
.status { position: relative; font-size: .67rem; letter-spacing: .18em; color: #9cccd4; }
@keyframes diceFloat { 50% { transform: translateY(-10px) rotate(7deg); } }
@keyframes clockMinute { to { transform: rotate(340deg); } }
@keyframes clockHour { to { transform: rotate(440deg); } }

/* Research is deliberately quieter than the main products. */
.research { --chapter-from: #10081a; --label-color: #665731; --label-active: #665731; --focus-color: #665020; padding: 12vh 5vw; background: #efece4; color: #171717; }
.research::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 47px,rgba(80,70,48,.04) 48px); opacity: .8; }
.research-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 8vw; align-items: start; }
.research .section-title h2 { font-size: clamp(2.7rem,5vw,5.8rem); line-height: 1; }
.research .section-title > p:last-child { color: #5f5d58; font-size: 1rem; }
.paper { position: relative; min-width: 0; border-top: 1px solid #bbb4a5; padding-top: 24px; }
.paper h3 { font-family: Georgia,serif; font-size: clamp(1.9rem,3.2vw,3.6rem); line-height: 1.12; font-weight: 400; margin: .35em 0; }
.paper > p { font-size: .96rem; line-height: 1.8; color: #52504b; }
.paper > .paper-type { font-size: .67rem; color: #665731; }
.paper-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.paper-meta span { border: 1px solid #bcb5a8; padding: 7px 10px; border-radius: 999px; font-size: .72rem; }
.paper > .doi { font-family: ui-monospace,monospace; font-size: .78rem; }
.doi a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; overflow-wrap: anywhere; }

/* Background and future retain the timeline and open editorial rows. */
.profile { --chapter-from: #efece4; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8vw; padding: 12vh 5vw; background: #0b0f14; }
.profile-left, .timeline { position: relative; z-index: 4; min-width: 0; }
.profile-left h2 { font-size: clamp(4rem,8vw,9rem); line-height: .91; letter-spacing: -.06em; margin: .2em 0; }
.profile-left > p:last-child { color: #a9b2be; max-width: 520px; font-size: 1.1rem; line-height: 1.75; }
.timeline { display: grid; align-content: start; }
.timeline div { position: relative; display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 10px 20px; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.timeline b { font-size: .72rem; line-height: 1.6; color: #9bafc4; letter-spacing: .06em; }
.timeline strong { font-size: 1.15rem; line-height: 1.4; }
.timeline span { grid-column: 2; color: #9aa6b5; line-height: 1.6; }
.timeline div::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#9cb0c8,transparent); transition: transform .9s ease; }
.profile.is-active .timeline div::before { transform: scaleX(1); }
.profile.is-active .timeline div:nth-child(2)::before { transition-delay: .1s; }
.profile.is-active .timeline div:nth-child(3)::before { transition-delay: .2s; }
.profile.is-active .timeline div:nth-child(4)::before { transition-delay: .3s; }
.future { --chapter-from: #0b0f14; --label-color: #365a87; --label-active: #365a87; --focus-color: #244a79; padding: 11vh 5vw; background: #dcecff; color: #0b1b31; }
.future .section-title > p:last-child { color: #52647a; }
.future-list { position: relative; z-index: 4; margin-top: 7vh; }
.future-row { display: grid; grid-template-columns: 55px minmax(0,1.2fr) minmax(0,1fr) 115px; gap: 20px; align-items: center; border-top: 1px solid rgba(11,27,49,.2); padding: 26px 0; }
.future-row span { font-size: .75rem; font-weight: 800; }
.future-row h3 { font-size: clamp(1.5rem,2.5vw,2.6rem); line-height: 1.2; margin: 0; letter-spacing: -.03em; }
.future-row p { color: #52647a; line-height: 1.7; }
.future-row b { font-size: .68rem; line-height: 1.6; letter-spacing: .13em; text-align: right; }
.future-holo { position: absolute; right: -9vw; top: 5vh; width: 42vw; height: 42vw; min-width: 420px; min-height: 420px; border-radius: 50%; opacity: .15; pointer-events: none; background: radial-gradient(circle,rgba(65,120,255,.24),transparent 58%); }
.future-holo i { position: absolute; inset: 12%; border: 1px solid rgba(18,70,150,.5); border-radius: 50%; animation: holoSpin 32s linear infinite; }
.future-holo i:nth-child(2) { inset: 27%; animation-direction: reverse; animation-duration: 25s; transform: scaleY(.42); }
.future-holo i:nth-child(3) { inset: 40%; animation-duration: 22s; border-style: dashed; }
@keyframes holoSpin { to { rotate: 360deg; } }

/* Contact: a calm finish with a static glow instead of a repainting shadow. */
.closing { --chapter-from: #dcecff; min-height: 86svh; display: flex; flex-direction: column; justify-content: center; padding: 12vh 5vw 4vh; background: radial-gradient(circle at 60% 40%,#1a2c4a,#07111f 60%,#03060b); text-align: center; }
.closing::before { content: ""; position: absolute; width: 70vw; height: 70vw; left: 50%; top: 45%; transform: translate(-50%,-50%); background: radial-gradient(circle,rgba(157,137,219,.1),transparent 65%); pointer-events: none; }
.closing-kicker, .closing blockquote, .closing-actions, footer { position: relative; z-index: 4; }
.closing-kicker { font-size: .7rem; letter-spacing: .2em; color: #a0b6d0; }
.closing blockquote { font-family: Georgia,serif; font-size: clamp(3rem,7vw,8rem); line-height: 1.04; margin: .35em auto; letter-spacing: -.045em; }
.closing blockquote em { font-weight: 400; color: #9ed8ff; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 25px; }
.closing-actions a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 4px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); overflow-wrap: anywhere; }
footer { display: flex; justify-content: space-between; margin-top: 90px; padding-top: 25px; gap: 24px; color: #95a9be; font-size: .62rem; line-height: 1.6; letter-spacing: .13em; }

/* Fine-pointer motion stays subtle; touch gets the stable composition. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: .4; }
  .btn:hover { box-shadow: 0 8px 28px rgba(0,0,0,.15); }
  .btn.ghost:hover { background: rgba(255,255,255,.07); }
  .scroll-hint:hover i { width: 80px; }
  .fun-project a:hover, .closing-actions a:hover, .doi a:hover { text-decoration-thickness: 2px; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .project-copy.in, .section-title.in, .quote-wrap.in, .how-built.in, .profile-left.in, .timeline.in, .paper.in { translate: 0 calc(var(--scene-offset) * -7px); }
  .project-visual.in { translate: 0 calc(var(--scene-offset) * 15px); }
}
@media (max-width: 1150px) {
  .hero-meta { display: none; }
  .scene-rail { right: 9px; }
  .now-viewing { right: 39px; }
  .project h3 { font-size: 6.3vw; }
  .timeline div { grid-template-columns: 110px minmax(0,1fr); gap: 10px 14px; }
}

/* Tablet: single-column project worlds and a compact chapter menu. */
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .site-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; padding: 12px 4vw; }
  .nav, .scene-rail, .now-viewing, .pointer-aura { display: none; }
  .resume-link { grid-column: 2; }
  .mobile-nav { display: block; position: relative; grid-column: 3; font-size: .75rem; }
  .mobile-nav summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; white-space: nowrap; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::marker { content: ""; }
  .mobile-nav summary span { display: inline-block; font-size: 1.1rem; transition: transform .2s ease; }
  .mobile-nav[open] summary span { transform: rotate(45deg); }
  .mobile-nav nav { position: absolute; top: calc(100% + 12px); right: 0; width: min(440px,calc(100vw - 40px)); max-height: calc(100svh - 90px); overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; padding: 12px; background: #081321; border: 1px solid #344458; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
  .mobile-nav nav a { display: flex; align-items: center; min-height: 44px; padding: 10px; line-height: 1.4; color: #c4d3e5; border-radius: 5px; }
  .mobile-nav nav a:hover, .mobile-nav nav a[aria-current] { color: #fff; background: #172940; }
  .hero { align-items: center; min-height: 100svh; padding-top: 125px; padding-bottom: 166px; }
  .hero h1 { font-size: clamp(4rem,12.2vw,7rem); }
  .hero-lead { max-width: 620px; }
  .hero-marquee { height: 30px; }
  .philosophy, .project, .research-grid, .profile { grid-template-columns: minmax(0,1fr); }
  .philosophy { gap: 42px; padding-top: 100px; padding-bottom: 100px; }
  .how-built { max-width: 660px; }
  .quote-wrap blockquote { font-size: clamp(2.7rem,7vw,4.8rem); }
  .project { padding-top: 108px; padding-bottom: 90px; gap: 46px; }
  .project-copy { max-width: 740px; }
  .project h3 { font-size: 10vw; }
  .project-index { top: 49px; }
  .project-visual { --tilt-x: 0deg; --tilt-y: 0deg; justify-self: stretch; max-width: 680px; }
  .ambient-note { display: none; }
  .cloud-layer { min-width: 540px; opacity: .19; }
  .money-stream span { font-size: 1.1rem; }
  .sky-main strong { font-size: 4.5rem; }
  .fun-stage { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .fun-project { padding: 7vw; min-height: 400px; }
  .fun-project h3 { font-size: 7vw; }
  .unlucky, .procrastinate { border-radius: 28px; }
  .research-grid { gap: 54px; }
  .research .section-title h2 { max-width: 600px; font-size: clamp(2.7rem,6.5vw,4rem); }
  .paper h3 { font-size: clamp(2rem,4.8vw,3rem); }
  .profile { gap: 42px; }
  .profile-left h2 { font-size: 12vw; }
  .timeline div { grid-template-columns: 145px minmax(0,1fr); }
  .future-row { grid-template-columns: 44px minmax(0,1fr) 105px; }
  .future-row p { grid-column: 2 / 4; grid-row: 2; margin: 0; }
  .future-row b { grid-column: 3; grid-row: 1; }
  .future-holo { right: -45vw; opacity: .1; }
  .closing-actions { flex-direction: column; align-items: center; }
  footer { margin-top: 70px; flex-direction: column; gap: 15px; }
}

/* Phone: reduce density while preserving every project's information. */
@media (max-width: 600px) {
  .site-header { padding: 10px 20px; gap: 10px; }
  .brand { font-size: .65rem; letter-spacing: .055em; }
  .brand-mark { margin-right: .35rem; }
  .resume-link, .mobile-nav { font-size: .69rem; }
  .mobile-nav summary { gap: 5px; }
  .hero, .philosophy, .projects-intro, .project, .fun, .research, .profile, .future, .closing { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 115px; }
  .hero h1 { font-size: 14.5vw; }
  .hero-lead { font-size: .96rem; line-height: 1.75; }
  .eyebrow, .section-kicker, .project-label { font-size: .66rem; letter-spacing: .17em; }
  .hero-actions { gap: 12px; margin-top: 26px; }
  .btn { padding: 13px 17px; font-size: .85rem; }
  .scroll-hint { left: 20px; }
  .hero-marquee div { font-size: .5rem; }
  .section-title h2 { font-size: 12.8vw; line-height: 1; }
  .section-title > p:last-child { font-size: .98rem; }
  .philosophy { gap: 35px; }
  .quote-wrap blockquote { font-size: 11.2vw; }
  .quote-mark { font-size: 5rem; }
  .quote-by { font-size: .67rem; letter-spacing: .12em; }
  .how-built p:nth-of-type(2) { font-size: 1.07rem; }
  .build-flow { gap: 7px; font-size: .66rem; }
  .build-flow b { display: none; }
  .build-flow span { padding: 8px 10px; }
  .projects-intro { min-height: 45svh; padding-top: 90px; padding-bottom: 65px; }
  .project { gap: 34px; }
  .project-index { left: 20px; }
  .project h3 { font-size: 12.8vw; }
  .project-subtitle { font-size: 1.28rem; }
  .project-description { font-size: .98rem; line-height: 1.8; }
  .project-actions { gap: 10px 18px; margin-top: 26px; }
  .tags { gap: 7px; }
  .tags span { font-size: .67rem; padding: 7px 9px; }
  .sky-ui { padding: 15px; border-radius: 22px; }
  .sky-panel { padding: 26px 7px 10px; }
  .sky-main strong { font-size: 3.6rem; }
  .sky-main span { font-size: .78rem; }
  .sky-chip { font-size: .87rem; margin-top: 22px; }
  .sky-days { gap: 7px; }
  .sky-days div { padding: 12px 8px; border-radius: 12px; }
  .sky-days span { font-size: .62rem; }
  .sky-days b { font-size: 1.1rem; }
  .finance-ui { padding: 21px; border-radius: 24px; }
  .finance-top { font-size: .58rem; letter-spacing: .07em; }
  .finance-balance { padding-top: 27px; }
  .finance-balance strong { font-size: 2.8rem; }
  .finance-balance small { font-size: .71rem; }
  .finance-grid { gap: 10px; }
  .finance-grid div { padding: 14px; border-radius: 14px; }
  .finance-grid b { font-size: 1.32rem; }
  .finance-grid small { font-size: .75rem; }
  .bars { height: 145px; gap: 10px; }
  .gov-ui { padding: 20px; border-radius: 22px; }
  .gov-head { font-size: .85rem; gap: 9px; }
  .gov-head b { font-size: .57rem; padding: 5px 7px; }
  .gov-stats { gap: 7px; margin: 24px 0; }
  .gov-stats div { padding: 13px 8px; border-radius: 12px; }
  .gov-stats small { font-size: .58rem; letter-spacing: -.01em; white-space: nowrap; }
  .gov-stats strong { font-size: 1.8rem; }
  .rank-signal { display: none; }
  .cloud-layer { opacity: .14; }
  .fun-project { padding: 38px 25px; min-height: 420px; }
  .fun-project h3 { font-size: 8.3vw; }
  .fun-project p { font-size: .96rem; }
  .dice { font-size: 5rem; }
  .clock-face { width: 180px; height: 180px; }
  .research, .profile { padding-top: 95px; padding-bottom: 95px; }
  .research .section-title h2 { font-size: 10.8vw; }
  .paper h3 { font-size: 7.6vw; }
  .paper > .paper-type { font-size: .62rem; letter-spacing: .12em; }
  .paper-meta span { font-size: .65rem; }
  .profile-left h2 { font-size: 16vw; }
  .timeline div { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .timeline span { grid-column: 1; }
  .timeline strong { font-size: 1.1rem; }
  .future-row { grid-template-columns: 28px minmax(0,1fr); gap: 11px 14px; padding: 25px 0; }
  .future-row h3 { font-size: 1.55rem; }
  .future-row b, .future-row p { grid-column: 2; text-align: left; }
  .future-row b { grid-row: 3; font-size: .62rem; }
  .future-row p { font-size: .95rem; }
  .future-holo { min-width: 340px; min-height: 340px; top: 15vh; }
  .closing { padding-top: 100px; padding-bottom: 32px; }
  .closing blockquote { font-size: 11.4vw; }
  .closing-actions { gap: 8px; font-size: .92rem; }
}
@media (max-width: 360px) {
  .site-header { gap: 7px; }
  .brand { font-size: .59rem; }
  .resume-link, .mobile-nav { font-size: .63rem; }
  .brand-mark { margin-right: .2rem; }
  .gov-stats small { font-size: .52rem; }
}

/* No offscreen decoration consumes an animation clock. */
[data-scene]:not(.is-visible),
[data-scene]:not(.is-visible)::before,
[data-scene]:not(.is-visible)::after,
[data-scene]:not(.is-visible) *,
[data-scene]:not(.is-visible) *::before,
[data-scene]:not(.is-visible) *::after,
body.page-hidden *, body.page-hidden *::before, body.page-hidden *::after { animation-play-state: paused !important; }

/* Reduced motion keeps every chapter and all content. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pointer-aura, .fx-canvas, .lightning, .cloud-layer, .rank-signal, .future-holo, .money-stream, .hero-marquee { display: none !important; }
  .reveal, .motion-ready .reveal, .hero h1 > *, .motion-ready .hero-copy:not(.in) h1 > * { --reveal-y: 0px; opacity: 1; transform: none; filter: none; translate: none !important; }
  .project-visual { transform: none !important; translate: none !important; }
  .hero-orb, .btn, .text-btn, .fun-project a, .closing-actions a { translate: none !important; }
  .timeline div::before { transform: none; }
}

/* v1.1 additions reuse the research and closing chapter surfaces. */
.hero-attribution { max-width: 42rem; color: #a9c9df; font-size: .85rem; line-height: 1.6; }
.research-support { position: relative; z-index: 4; max-width: 900px; margin-top: clamp(48px,8vh,96px); }
.research-support h3 { font-size: clamp(1.8rem,3.2vw,3rem); }
.build-support { position: relative; z-index: 4; width: 100%; max-width: 680px; margin: 40px auto 0; padding: 28px clamp(16px,4vw,36px); border: 1px solid rgba(158,216,255,.25); border-radius: 16px; background: rgba(7,17,31,.45); }
.build-support h2 { margin: .4em 0; font-size: clamp(1.6rem,4vw,2.6rem); line-height: 1.15; letter-spacing: -.03em; }
.build-support > p { color: #b5c8da; line-height: 1.7; }

/* Static QR support, using the research chapter's quiet cream surface. */
.support-open { font: inherit; cursor: pointer; }
.support-dialog { --focus-color: #665020; width: min(560px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #bbb4a5; border-radius: 16px; background: #efece4; color: #171717; overflow-y: auto; overscroll-behavior: contain; }
.support-dialog::backdrop { background: rgba(3,6,11,.78); }
.support-panel { padding: clamp(20px,5vw,36px); }
.support-close { display: block; margin: -8px -8px 12px auto; min-height: 44px; padding: 8px 12px; border: 1px solid #bbb4a5; border-radius: 8px; background: #efece4; color: #171717; font: inherit; cursor: pointer; position: sticky; top: 8px; z-index: 1001; }
.support-dialog .paper-type { color: #665731; font-size: .67rem; letter-spacing: .13em; }
.support-dialog h2 { margin: .4em 0; font-family: Georgia,serif; font-weight: 400; font-size: clamp(1.9rem,5vw,2.7rem); line-height: 1.12; }
.support-dialog p, .support-dialog li { line-height: 1.65; }
.support-dialog ul { padding-left: 20px; color: #52504b; }
.support-qr { margin: 24px 0; text-align: center; }
.support-qr img { display: block; width: min(100%,300px); height: auto; margin: 0 auto; background: white; }
.support-qr figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: #52504b; }
.support-thanks { border-top: 1px solid #bbb4a5; padding-top: 16px; margin-bottom: 0; }
@media (min-width: 901px) {
  .support-dialog { width: min(92vw,780px); }
  .support-panel { padding: 40px; }
  .support-qr { margin: 28px 0; }
  .support-qr img { width: min(100%,320px); }
}

/* Shared language controls; Thai needs natural spacing and taller line boxes. */
.site-header { grid-template-columns: 1fr auto auto auto; }
.language-switch { display: inline-flex; gap: 2px; align-items: center; justify-self: end; }
.language-switch button { min-width: 40px; min-height: 44px; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .75rem; cursor: pointer; }
.language-switch button[aria-pressed="true"] { border-color: currentColor; font-weight: 700; }
html[lang="th"] { overflow-anchor: none; }
html[lang="th"] :is(h1,h2,h3,blockquote,.section-kicker,.eyebrow,.project-label,.paper-type,.closing-kicker,.now-viewing,footer) { letter-spacing: normal; line-height: 1.4; }
html[lang="th"] :is(.hero h1,.section-title h2,.quote-wrap blockquote,.closing blockquote) { font-size: clamp(2.4rem,6vw,6rem); }
html[lang="th"] :is(p,a,button,span,strong) { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 4px 12px; }
  .site-header > .language-switch { grid-column: 2; grid-row: 1; }
  .site-header > .resume-link { grid-column: 1; grid-row: 2; justify-self: start; min-height: 32px; }
  .site-header > .mobile-nav { grid-column: 3; grid-row: 1; }
  .language-switch button { min-width: 34px; }
  html { scroll-padding-top: 120px; }
  .hero { padding-top: 145px; }
}
@media (max-width: 600px) {
  html[lang="th"] :is(.hero h1,.section-title h2,.quote-wrap blockquote,.closing blockquote) { font-size: clamp(2rem,9vw,3.4rem); }
  html[lang="th"] .research .section-title h2 { font-size: 9vw; }
}

/* Thai editorial typography; English keeps its existing display faces. */
:lang(th) { font-family: "Anuphan", "Noto Sans Thai", system-ui, sans-serif; }
html[lang="th"] body { font-weight: 400; line-height: 1.75; }
html[lang="th"] :is(h1,h2,h3,blockquote,.paper h3,.support-dialog h2) { font-family: "Anuphan", "Noto Sans Thai", system-ui, sans-serif; font-weight: 600; line-height: 1.45; letter-spacing: normal; text-wrap: balance; }
html[lang="th"] :is(p,li,.timeline span) { line-height: 1.75; }
html[lang="th"] :is(.nav,.mobile-nav,.btn,.section-kicker,.eyebrow,.project-label,.paper-type,.closing-kicker,.hero-meta,.build-flow,.now-viewing,footer,.future-row b) { font-weight: 500; letter-spacing: normal; text-transform: none; }
html[lang="th"] :is(.hero h1 em,blockquote em) { font-style: normal; }
html[lang="th"] :is(a,button,.paper-meta span,.tags span) { line-height: 1.65; letter-spacing: normal; }
html[lang="th"] :is(h1,h2,h3,p,a,button,span,strong) { word-break: normal; overflow-wrap: break-word; }
html[lang="th"] .language-switch button[aria-pressed="true"] { font-weight: 600; }

/* Use measured header clearance once, without stacking root scroll padding. */
html { scroll-padding-top: 0; }
main > section[id] { scroll-margin-top: calc(var(--sticky-header-height, 100px) + 20px); }
html[lang="th"] :is(.hero h1,.quote-wrap blockquote,.closing blockquote,.research .section-title h2,.future .section-title h2) { font-weight: 500; }
html[lang="th"] .research .section-title h2 { white-space: pre-line; }
html[lang="th"] .project h3 { word-break: normal; overflow-wrap: normal; }
html[lang="th"] #pocketflow h3 { white-space: nowrap; font-size: clamp(1.75rem,4.5vw,4.5rem); }
@media (max-width: 900px) {
  html[lang="th"] #pocketflow h3 { font-size: 9vw; }
}

/* Research Support uses the portfolio button system on its cream surface. */
.research-service-cta { background: #142235; color: #f8f5ed; }
@media (hover: hover) and (pointer: fine) {
  .research-service-cta:hover { background: #283d55; }
}

.research-service-cta { border-radius: 10px; transition: background-color .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .research-service-cta:hover { transform: translateY(-2px); }
}

/* Coffee corner: static tier-specific QR assets, optional quiet motion. */
.coffee-tiers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 28px 0; }
.coffee-tier { min-width: 0; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; background: #f7f3eb; border: 1px solid #bfb39a; border-radius: 10px; color: #223145; cursor: pointer; transition: background-color .25s ease,border-color .25s ease,box-shadow .25s ease; }
.coffee-tier[aria-pressed="true"] { background: #e9e1d0; border: 2px solid #76623c; padding: 13px 7px; box-shadow: 0 2px 8px rgba(70,50,20,.08); }
.coffee-tier svg { width: 56px; height: 56px; color: #79633a; overflow: visible; }
.coffee-tier-label { font-size: .72rem; font-weight: 500; letter-spacing: .05em; }
.coffee-tier strong { font-size: 1rem; font-weight: 600; }
.coffee-payment { border-top: 1px solid #bbb4a5; padding-top: 24px; text-align: center; transition: opacity .3s ease; }

.coffee-qr-frame { width: min(100%,320px); min-height: 320px; margin: auto; display: grid; place-items: center; background: #f9f6ef; border: 1px solid #ccc2af; border-radius: 8px; padding: 16px; }
.coffee-qr-frame img { width: 100%; height: auto; object-fit: contain; background: white; }
.coffee-qr-frame [hidden], .coffee-thanks [hidden] { display: none; }
#coffeePlaceholder { max-width: 230px; color: #665731; font-size: .95rem; line-height: 1.7; padding: 20px 8px; }
.coffee-scan { font-size: .85rem; margin: 16px 0 4px; }
.coffee-recurring { font-size: .78rem; color: #52504b; margin: 0; }
.coffee-finish { position: relative; text-align: center; margin-top: 24px; }
.coffee-supported { min-height: 44px; padding: 10px 20px; border: 1px solid #8f7b54; border-radius: 8px; background: transparent; color: #233247; cursor: pointer; }
.coffee-thanks { min-height: 100px; padding-top: 20px; color: #263447; }
.coffee-thanks strong { font-family: Georgia,serif; font-size: 1.6rem; font-weight: 400; }
.coffee-thanks p { margin: 8px 0 0; font-size: .9rem; }
html[lang="th"] .coffee-thanks strong { font-family: "Anuphan", "Noto Sans Thai", system-ui,sans-serif; font-weight: 500; }

@media (hover: hover) and (pointer: fine) {
 .coffee-tier:hover { border-color: #76623c; background-color: #eee6d8; }
 .coffee-supported:hover { background: #e9e1d0; }
}
@media (prefers-reduced-motion: no-preference) {
 .coffee-react .coffee-cup { animation: coffee-lift 350ms ease var(--cup-delay) both; }
 .coffee-react .coffee-steam { animation: coffee-steam 400ms ease var(--cup-delay) both; }
 .coffee-react .coffee-spark { animation: coffee-steam 450ms ease both; }
}
@keyframes coffee-lift { 50% { translate: 0 -2px; } }
@keyframes coffee-steam { 0% { opacity: .25; } 65% { opacity: .8; translate: 0 -3px; } 100% { opacity: 1; translate: 0 0; } }
@media (max-width: 600px) {
 .coffee-tiers { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
 .coffee-tier { min-height: 140px; }
 .coffee-qr-frame { min-height: 260px; padding: 12px; }
 .coffee-tier-label { letter-spacing: normal; }
}
@media (prefers-reduced-motion: reduce) {

 .coffee-cup,.coffee-steam,.coffee-spark { animation: none !important; translate: none !important; }
}

.coffee-qr-frame { height: 360px; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.coffee-qr-frame img { height: 100%; max-height: 100%; min-height: 0; }
@media (max-width: 600px) { .coffee-qr-frame { height: 300px; min-height: 0; } }
@media (max-width: 600px) { html[lang="th"] #support-title { font-size: clamp(1.5rem,6.5vw,2rem); text-wrap: balance; } }

/* The coffee intro shares the top row with its close control. */
.support-close { float: right; margin: -8px -8px 12px 16px; }
.support-panel > .paper-type { margin-top: 0; padding-top: 4px; }
#support-title { clear: both; }

/* Original bank cards stay fully opaque and retain their intrinsic aspect ratio. */
.coffee-amount { margin: 0 0 16px; font-weight: 600; color: #223145; }
.coffee-qr-frame { width: min(100%,352px); height: auto; min-height: 320px; grid-template-rows: auto; }
.coffee-qr-frame img { width: 100%; height: auto; max-height: none; opacity: 1; filter: none; object-fit: contain; }

/* Temporary coffee cascade lives in the dialog top layer, above its content. */
.coffee-celebration { position: fixed; inset: 0 auto auto 0; z-index: 1000; pointer-events: none; overflow: hidden; border-radius: 16px; }
.coffee-rain-cup { position: absolute; display: block; line-height: 1; opacity: 0; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; user-select: none; pointer-events: none; }
@media (max-width: 600px) { .coffee-thanks { min-height: 140px; } }