/* RE:CELL Lab v2 · โทเคนจาก design-playbook.html · พื้นมืดนำ มีชุดสว่างครบ */
:root{
  --void:#0A0912; --panel:#12111C; --panel-2:#1A1828;
  --edge:#2A2740; --edge-soft:#201E31;
  --ink:#EEEDF6; --ink-2:#9B98B8; --ink-3:#6C6889;
  --violet:#7A5CFF; --violet-deep:#4B2FD6; --dapi:#4C86FF; --ice:#8FB6FF;
  --signal:#FF5C93; --platinum:#C6C2E4; --on-violet:#0A0912;
  --nav-bg:rgba(10,9,18,.78);
  --chip-pub:rgba(76,134,255,.16); --chip-now:rgba(122,92,255,.18);
  --chip-build:rgba(198,194,228,.14); --chip-plan:transparent;
  --grain-op:.035;
  --display:"Anuphan","IBM Plex Sans Thai","Sukhumvit Set","Thonburi",system-ui,sans-serif;
  --sans:"IBM Plex Sans Thai","Anuphan","Sukhumvit Set","Thonburi",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --r-modal:18px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --void:#FAF9FF; --panel:#FFFFFF; --panel-2:#F0EEFA;
    --edge:#DFDCF0; --edge-soft:#EAE7F7;
    --ink:#14121F; --ink-2:#5C5878; --ink-3:#6E6A8C;
    --violet:#5333CC; --violet-deep:#4527B4; --dapi:#2C5FD4; --ice:#4534B8;
    --signal:#C42B60; --platinum:#7C77A8; --on-violet:#FFFFFF;
    --nav-bg:rgba(250,249,255,.8);
    --chip-pub:rgba(44,95,212,.12); --chip-now:rgba(83,51,204,.12);
    --chip-build:rgba(124,119,168,.14);
    --grain-op:.022; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --void:#FAF9FF; --panel:#FFFFFF; --panel-2:#F0EEFA;
  --edge:#DFDCF0; --edge-soft:#EAE7F7;
  --ink:#14121F; --ink-2:#5C5878; --ink-3:#6E6A8C;
  --violet:#5333CC; --violet-deep:#4527B4; --dapi:#2C5FD4; --ice:#4534B8;
  --signal:#C42B60; --platinum:#7C77A8; --on-violet:#FFFFFF;
  --nav-bg:rgba(250,249,255,.8);
  --chip-pub:rgba(44,95,212,.12); --chip-now:rgba(83,51,204,.12);
  --chip-build:rgba(124,119,168,.14);
  --grain-op:.022; color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.78;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--grain); opacity:var(--grain-op); mix-blend-mode:overlay;
}
a{color:var(--ice); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.005em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
svg.i{width:1em; height:1em; fill:currentColor; vertical-align:-.15em; flex:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--panel); padding:8px 12px; border:1px solid var(--edge); border-radius:999px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:6px}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,3vw,32px); padding-top:calc(14px + env(safe-area-inset-top));
  transition:background .18s ease-out, border-color .18s ease-out;
  border-bottom:1px solid transparent;
}
.nav.solid{background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--edge-soft)}
.logo{display:flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.01em}
.logo:hover{text-decoration:none}
.logo svg{width:26px; height:26px}
.links{display:flex; gap:clamp(14px,2.2vw,28px); align-items:center; margin:0; padding:0; list-style:none}
.links a{font-family:var(--mono); font-size:12px; color:var(--ink-2); line-height:1.2}
.links a:hover{color:var(--ink); text-decoration:none}
:lang(en) .links a{text-transform:uppercase; letter-spacing:.12em}
.acts{display:flex; gap:8px; align-items:center}
.ib{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; min-width:34px; padding:0 10px; border-radius:999px;
  border:1px solid var(--edge); color:var(--ink-2); font-family:var(--mono); font-size:12px; line-height:1;
  transition:color .15s ease-out, border-color .15s ease-out, background .15s ease-out;
}
.ib:hover{color:var(--ink); border-color:var(--platinum); text-decoration:none}
.ib svg.i{width:16px; height:16px}
.ib .lbl{display:none}
@media (min-width:560px){ .ib .lbl{display:inline} }
.menu-btn{display:none}
.sheet{display:none}
@media (max-width:420px){ .logo span{font-size:15px} .acts{gap:6px} .ib{padding:0 8px; min-width:32px} }
@media (max-width:899px){
  .links{display:none}
  .menu-btn{display:inline-flex}
  .sheet{
    display:none; position:fixed; inset:0; z-index:40; padding:calc(76px + env(safe-area-inset-top)) 24px 24px;
    background:var(--void); flex-direction:column; gap:4px;
  }
  .sheet.open{display:flex}
  .sheet a{font-family:var(--display); font-weight:600; font-size:28px; line-height:1.5; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--edge-soft)}
  .sheet a:hover{text-decoration:none; color:var(--violet)}
  .sheet .mail{margin-top:20px; font-family:var(--mono); font-size:14px; color:var(--ice); border:0}
}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; min-height:100vh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto; isolation:isolate; touch-action:pan-y;
}
.hero.grab, .hero.grab *:not(a):not(button){cursor:grab}
.hero.grabbing, .hero.grabbing *:not(a):not(button){cursor:grabbing}
@supports (min-height:100svh){ .hero{min-height:100svh} }
#field{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.hero-phase{
  position:absolute; left:clamp(16px,3vw,32px); top:calc(78px + env(safe-area-inset-top));
  z-index:2; font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.5;
  display:flex; align-items:center; gap:8px; transition:opacity .6s ease-out;
}
.hero-phase .dot{width:6px; height:6px; border-radius:50%; background:var(--dapi); box-shadow:0 0 10px var(--dapi)}
.hero-phase.b .dot{background:var(--violet); box-shadow:0 0 10px var(--violet)}
.hero-copy{
  position:relative; z-index:2; grid-row:2; align-self:end;
  padding:0 clamp(16px,3vw,32px) clamp(28px,5vh,56px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:end; min-width:0;
}
.hc-main{display:grid; gap:18px; max-width:1180px; min-width:0}
.hero h1{
  font-weight:700; line-height:1.18; letter-spacing:-.015em;
  font-size:clamp(34px, 7.6vw, 118px); color:var(--ink);
  display:grid; overflow-wrap:anywhere;
}
@media (max-width:899px){ .hero h1{font-size:clamp(34px, 9.4vw, 64px)} }
.hero h1 .hl{color:var(--violet)}
:lang(en) .hero h1{line-height:1.02; letter-spacing:-.025em}
.hero .lead{color:var(--ink-2); font-size:clamp(15px,1.25vw,18px); line-height:1.7}
.hero-cap{
  font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--ink-3); text-align:right; white-space:nowrap; margin:0;
}
:lang(en) .hero-cap{max-width:48ch}
.hero-still{position:absolute; left:clamp(16px,3vw,32px); top:calc(102px + env(safe-area-inset-top)); z-index:2; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
@media (max-width:899px){
  .hero-copy{grid-template-columns:1fr; gap:20px; padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .hero-cap{text-align:left; white-space:normal}
  .hero .lead{font-size:15px}
}

.btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:15px; line-height:1; white-space:nowrap;
  border:1px solid var(--edge); color:var(--ink); transition:border-color .15s ease-out, background .15s ease-out, transform .18s ease-out;
  width:fit-content;
}
.btn:hover{text-decoration:none; border-color:var(--platinum)}
.btn.primary{background:var(--violet); border-color:var(--violet); color:var(--on-violet)}
.btn.primary:hover{background:var(--violet-deep); border-color:var(--violet-deep)}
.btn svg.i{width:18px; height:18px}

/* ── sections ────────────────────────────────────────────────────── */
main{position:relative; z-index:1}
section{border-top:1px solid var(--edge-soft)}
.wrap{max-width:1120px; margin:0 auto; padding:clamp(64px,9vw,112px) clamp(16px,3vw,32px)}
.head{display:grid; grid-template-columns:1fr auto; gap:12px 24px; align-items:end; margin-bottom:32px}
.head .eyebrow{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em; margin-bottom:10px; display:block}
:lang(en) .head .eyebrow{text-transform:uppercase; letter-spacing:.14em}
.head h2{font-size:clamp(26px,3.2vw,38px); line-height:1.3; margin-bottom:10px}
.head p{color:var(--ink-2); max-width:62ch; font-size:17px}
.head .tools{grid-column:2; grid-row:1; align-self:start; padding-top:4px}
.tbtn{font-family:var(--mono); font-size:12px; color:var(--ink-2); border:1px solid var(--edge); border-radius:999px; height:32px; padding:0 12px; display:inline-flex; align-items:center; gap:6px}
.tbtn:hover{color:var(--ink); border-color:var(--platinum)}
@media (max-width:640px){
  .head{grid-template-columns:1fr}
  .head .tools{grid-column:1; grid-row:auto; justify-self:start}
}

/* status chip · สีคู่กับคำเสมอ */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px 0 8px; border-radius:999px;
  font-family:var(--mono); font-size:11px; line-height:1; white-space:nowrap; border:1px solid transparent;
}
.chip svg.i{width:13px; height:13px}
.chip.pub{background:var(--chip-pub); color:var(--dapi)}
.chip.now{background:var(--chip-now); color:var(--violet)}
.chip.build{background:var(--chip-build); color:var(--platinum)}
.chip.plan{background:var(--chip-plan); color:var(--ink-3); border-color:var(--edge)}
.chip.dir{background:transparent; color:var(--ink-3); border-color:var(--edge); border-style:dashed}
:lang(en) .chip{text-transform:uppercase; letter-spacing:.08em}

/* cards (details) */
.grid{display:grid; gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .g3{grid-template-columns:1fr} .g2{grid-template-columns:1fr} }
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  transition:border-color .15s ease-out;
}
.card:hover{border-color:var(--platinum)}
.card summary{list-style:none; cursor:pointer; padding:20px 20px 18px; display:grid; gap:10px; position:relative}
.card summary::-webkit-details-marker{display:none}
.card summary .top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.card summary .chev{color:var(--ink-3); transition:transform .22s ease-out; display:inline-flex}
.card[open] summary .chev{transform:rotate(180deg)}
.card summary h3{font-size:19px; line-height:1.45; padding-right:8px}
.card summary .sum{color:var(--ink-2); font-size:15px; line-height:1.7}
.card .body{padding:0 20px 22px; color:var(--ink-2); font-size:15px; line-height:1.75; display:grid; gap:12px; border-top:1px solid var(--edge-soft); padding-top:16px; margin:0 0 0 0}
.card[open] .body{animation:fade .22s ease-out}
@keyframes fade{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .card[open] .body{animation:none} .card summary .chev{transition:none} }
.card .body ul{margin:0; padding-left:18px; display:grid; gap:6px}
.card .body .refs{display:flex; flex-wrap:wrap; gap:8px}
.card .body .refs a{font-family:var(--mono); font-size:12px; border:1px solid var(--edge); border-radius:999px; padding:5px 10px; display:inline-flex; align-items:center; gap:6px; color:var(--ice)}
.card .body .refs a:hover{border-color:var(--platinum); text-decoration:none}
.card .body .sub{font-family:var(--mono); font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px}
.card .body strong{font-weight:600; color:var(--ink)}
.card .kicker{font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* timeline */
.tl{list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative}
.tl::before{content:""; position:absolute; left:11px; top:12px; bottom:12px; width:1px; background:var(--edge)}
.tl li{position:relative; padding:0 0 12px 40px}
.tl li::before{
  content:""; position:absolute; left:6px; top:26px; width:11px; height:11px; border-radius:50%;
  background:var(--void); border:1px solid var(--ink-3);
}
.tl li.pub::before{background:var(--dapi); border-color:var(--dapi); box-shadow:0 0 12px rgba(76,134,255,.5)}
.tl li.now::before{background:var(--violet); border-color:var(--violet); box-shadow:0 0 12px rgba(122,92,255,.5)}
.tl li.build::before{background:var(--platinum); border-color:var(--platinum)}
.tl li.dir::before{border-style:dashed}
.tl .card summary .top{align-items:flex-start}
.tl .year{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
@media (max-width:640px){ .tl li{padding-left:32px} .tl::before{left:9px} .tl li::before{left:4px} }

/* team */
.pi{display:grid; grid-template-columns:132px 1fr; gap:24px; align-items:start; padding:24px}
.pi img{width:132px; height:132px; border-radius:50%; object-fit:cover; border:1px solid var(--edge)}
.pi .name{font-size:22px; line-height:1.4}
.pi .role{color:var(--ink-2); font-size:15px}
.pi .stats{display:flex; gap:24px; flex-wrap:wrap; margin-top:10px}
.pi .stats div{display:grid; gap:2px}
.pi .stats b{font-family:var(--mono); font-weight:500; font-size:22px; color:var(--ink); line-height:1.2}
.pi .stats b.hi{color:var(--violet)}
.pi .stats span{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.pi .bio{color:var(--ink-2); font-size:15px; margin-top:12px}
.pi .lnks{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.pi .lnks a{font-family:var(--mono); font-size:12px; border:1px solid var(--edge); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px; color:var(--ice)}
.pi .lnks a:hover{border-color:var(--platinum); text-decoration:none}
.pi .since{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:12px}
@media (max-width:640px){ .pi{grid-template-columns:1fr} .pi img{width:96px; height:96px} }
.team{display:grid; gap:16px}
.students{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){ .students{grid-template-columns:repeat(2,1fr)} }
.stu{padding:22px 16px; display:grid; justify-items:center; text-align:center; gap:8px; align-content:start}
.stu img{width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--edge)}
.stu .ph{width:88px; height:88px; border-radius:50%; border:1px dashed var(--edge); display:grid; place-items:center; color:var(--ink-3)}
.stu .ph svg{width:26px; height:26px; opacity:.7}
.stu .nm{font-family:var(--display); font-weight:600; font-size:16px; line-height:1.45; margin-top:4px}
.stu .rl{font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.5}

/* publications */
.pubs{list-style:none; margin:0; padding:0; border-top:1px solid var(--edge)}
.pubs li{display:grid; grid-template-columns:88px 1fr auto; gap:8px 20px; padding:18px 4px; border-bottom:1px solid var(--edge-soft); align-items:start}
.pubs li[hidden]{display:none}
.pubs .y{font-family:var(--mono); font-size:13px; color:var(--ink-3); padding-top:3px}
.pubs .t{font-family:var(--display); font-weight:600; font-size:17px; line-height:1.45; color:var(--ink)}
.pubs .j{font-family:var(--mono); font-size:12px; color:var(--ink-2); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pubs .q{color:var(--dapi)}
.pubs .doi{font-family:var(--mono); font-size:12px; color:var(--ice); display:inline-flex; align-items:center; gap:6px; padding-top:4px; white-space:nowrap}
@media (max-width:640px){ .pubs li{grid-template-columns:1fr} .pubs .doi{padding-top:0} }
.pubfoot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
.pubfoot a{font-family:var(--mono); font-size:12px; display:inline-flex; align-items:center; gap:6px}

/* join */
.join-card{display:grid; gap:24px; background:var(--panel); border:1px solid var(--edge); border-radius:var(--r); padding:clamp(24px,4vw,40px)}
.join-card > p{font-size:17px; color:var(--ink-2); line-height:1.8; max-width:60ch}
.join-card > div{min-width:0}
.join-card .eyebrow{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin-bottom:10px}
:lang(en) .join-card .eyebrow{text-transform:uppercase; letter-spacing:.14em}
.join-card ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; color:var(--ink-2)}
.join-card li{display:flex; align-items:flex-start; gap:10px}
.join-card li svg{margin-top:.4em}
.join-card .btn{max-width:100%; height:auto; min-height:44px; padding:12px 20px; white-space:normal; line-height:1.4}
.join-email{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:12px; overflow-wrap:anywhere}
@media (min-width:821px){ .join-card{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px} }


.site-foot{border-top:1px solid var(--edge-soft); line-height:1.7}
.ft{padding-top:56px; padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.ft-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr); gap:32px 40px}
.ft-grid > div{min-width:0}
.ft-brand .logo{font-size:17px; margin-bottom:16px}
.ft-brand .logo span{font-size:17px}
.ft-brand p{font-size:14px; color:var(--ink-2); max-width:42ch}
.ft-brand .note{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:12px}
.ft-label{font-family:var(--mono); font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:14px}
.ft-links{list-style:none; margin:0; padding:0}
.ft-links a{font-size:14px; line-height:2; color:var(--ink-2); overflow-wrap:anywhere}
.ft-links a:hover,.ft-bar a:hover{color:var(--ink)}
.ft-links .ft-mail{font-family:var(--mono); font-size:13px}
.ft-address{font-size:14px; color:var(--ink-2)}
.ft-bar{margin-top:48px; padding-top:20px; border-top:1px solid var(--edge-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.ft-bar > div{display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px}
.ft-bar a{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.ft-bar svg{transform:rotate(180deg)}
.ft-consent{font-size:12px; color:var(--ink-3); max-width:80ch; margin-top:16px}
.ft-consent a{color:var(--ink-2)}
@media (max-width:820px){ .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .ft-brand{grid-column:1 / -1} }
@media (max-width:520px){ .ft-grid{grid-template-columns:minmax(0,1fr)} }

.fps{position:fixed; left:12px; bottom:12px; z-index:30; font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel); border:1px solid var(--edge); border-radius:8px; padding:6px 10px; line-height:1.5; pointer-events:none}

.tbtn[hidden]{display:none}