/* =========================================================
   S.-Y. Liu — personal site v3
   palette follows the reveal.js "black" deck theme (#191919)
   ========================================================= */

:root{
  --bg:      #191919;
  --bg-2:    #1f1f1f;
  --bg-3:    #232323;
  --line:    rgba(255,255,255,.13);
  --line-2:  rgba(255,255,255,.26);
  --txt:     #f2f2f2;
  --dim:     #b0b0b0;
  --faint:   #8a8a8a;

  --f-sans:  "Source Sans 3", "Source Sans Pro", "Noto Sans TC", Helvetica, Arial, sans-serif;
  --f-serif: "Times New Roman", Times, "Noto Serif TC", serif;

  --pad:  clamp(20px, 5vw, 56px);
  --maxw: 1080px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:400; line-height:1.18; margin:0; letter-spacing:-.012em; }
p{ margin:0 0 1em; }
::selection{ background:rgba(255,255,255,.85); color:#191919; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#191919; }
::-webkit-scrollbar-thumb{ background:#333; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#444; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.measure{ max-width:68ch; }

.label{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:400;
}

/* ---------------------------------------------------------
   hero field (index)
   --------------------------------------------------------- */
#field{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
main, .site-foot{ position:relative; z-index:1; }

/* ---------------------------------------------------------
   header
   --------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(25,25,25,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-head.solid{ border-bottom-color:var(--line); }
.head-in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:64px;
}
.brand{ font-size:1rem; letter-spacing:.01em; color:var(--txt); white-space:nowrap; }
.brand span{ color:var(--faint); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.6vw,30px); }
.nav a{
  font-size:.95rem; color:var(--dim); position:relative; padding-block:4px;
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--txt); }
.nav a:hover::after, .nav a.on::after{ transform:scaleX(1); }
.nav a.on{ color:var(--txt); }
@media (max-width:820px){
  .head-in{ flex-wrap:wrap; height:auto; padding-block:12px; row-gap:8px; }
  .nav{ width:100%; flex-wrap:wrap; gap:8px 22px; }
}
@media (max-width:480px){
  .nav{ justify-content:space-between; gap:6px 10px; }
  .nav a{ font-size:.82rem; }
}

/* ---------------------------------------------------------
   reveal on scroll  (same feel as the deck: 10px + .45s)
   --------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; }
}

/* ---------------------------------------------------------
   hero
   --------------------------------------------------------- */
.hero{
  padding-block:clamp(70px,12vh,130px) clamp(40px,8vh,90px);
  min-height:min(86svh, 860px);
  display:flex; align-items:center;
}
.hero > div{ width:100%; }
.hero h1{
  font-size:clamp(2.1rem,4.8vw,3.3rem); font-weight:300; letter-spacing:-.02em;
  margin:14px 0 0;
}
.hero .cn{ font-family:var(--f-serif); color:var(--faint); font-size:1.05rem; margin-top:10px; letter-spacing:.12em; }
.hero p{ color:var(--dim); margin-top:22px; font-size:1.06rem; }
.hero .links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:3px;
  padding:9px 16px; font-size:.92rem; color:var(--dim);
  transition:border-color .3s, color .3s, background .3s;
}
.btn:hover{ color:var(--txt); border-color:var(--line-2); background:var(--bg-2); }
.btn .a{ transition:transform .3s var(--ease); }
.btn:hover .a{ transform:translateX(3px); }

/* ---------------------------------------------------------
   sections
   --------------------------------------------------------- */
.section{ padding-block:clamp(44px,6.5vw,78px); }
.section + .section{ border-top:1px solid var(--line); }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(22px,3.4vw,36px); }
.sec-head h2{ font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:300; }
.more{ font-size:.92rem; color:var(--faint); display:inline-flex; gap:7px; align-items:center; transition:color .25s; }
.more:hover{ color:var(--txt); }
.more .a{ transition:transform .3s var(--ease); }
.more:hover .a{ transform:translateX(3px); }

/* ---------------------------------------------------------
   about
   --------------------------------------------------------- */
.about{ display:grid; gap:clamp(24px,4vw,52px); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .about{ grid-template-columns:260px 1fr; } }
.portrait{ border:1px solid var(--line); filter:grayscale(1) brightness(.95); }
.about p{ color:var(--dim); }
.about .lead{
  color:var(--txt); font-size:1.12rem; line-height:1.56; font-weight:200;
  letter-spacing:-.005em; max-width:52ch; margin-bottom:1.1em;
}
.about .lead + p{ padding-top:2px; }
@media (min-width:860px){
  .about{ grid-template-columns:minmax(200px,248px) minmax(0,1fr); }
  .portrait{ position:sticky; top:96px; }
}
.meta{ list-style:none; margin:26px 0 0; padding:0; }
.meta li{ display:flex; gap:18px; padding:11px 0; border-top:1px solid var(--line); font-size:.95rem; }
.meta li:last-child{ border-bottom:1px solid var(--line); }
.meta .k{ color:var(--faint); flex:0 0 clamp(88px,14vw,132px); }
.meta .v{ color:var(--dim); }

/* ---------------------------------------------------------
   entry lists (publications / talks)
   --------------------------------------------------------- */
.list{ display:flex; flex-direction:column; }
.entry{ padding:clamp(16px,2.4vw,24px) 0; border-top:1px solid var(--line); }
.entry:last-child{ border-bottom:1px solid var(--line); }
.entry-head{ display:flex; gap:clamp(12px,2.4vw,26px); align-items:baseline; }
.entry .yr{ color:var(--faint); font-size:.86rem; flex:0 0 clamp(52px,7vw,78px); font-variant-numeric:tabular-nums; }
.entry .bd{ flex:1; min-width:0; }
.entry h3{ font-size:clamp(1.02rem,1.7vw,1.22rem); font-weight:400; line-height:1.38; }
.entry h3 a{ transition:color .25s; }
.entry h3 a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.entry .venue{ color:var(--faint); font-size:.9rem; margin-top:5px; font-style:italic; }
.entry .who{ color:var(--dim); font-size:.9rem; margin-top:3px; }
.entry .note{ color:var(--dim); font-size:.94rem; margin-top:10px; max-width:70ch; }

.tools{ display:flex; flex-wrap:wrap; gap:8px 6px; margin-top:14px; align-items:center; }
.tool{
  font-size:.84rem; color:var(--faint); border:1px solid var(--line);
  border-radius:3px; padding:5px 11px; background:transparent; cursor:pointer;
  font-family:inherit; transition:color .25s, border-color .25s, background .25s;
}
.tool:hover{ color:var(--txt); border-color:var(--line-2); background:var(--bg-2); }

.bib{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s var(--ease), opacity .3s, margin .45s var(--ease); }
.bib.open{ max-height:560px; opacity:1; margin-top:14px; }
.bib-box{ position:relative; }
.bib-copy{
  position:absolute; top:8px; right:8px; z-index:1;
  font-size:.74rem; font-family:inherit; color:var(--faint);
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:3px 9px; cursor:pointer; transition:color .25s, border-color .25s, background .25s;
}
.bib-copy:hover{ color:var(--txt); border-color:var(--line-2); background:var(--bg-2); }
.bib-copy.done{ color:var(--txt); border-color:var(--line-2); }
.bib pre{
  margin:0; padding:15px 70px 15px 17px; overflow-x:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;
  line-height:1.7; color:var(--dim); white-space:pre-wrap; word-break:break-word;
}

/* ---------------------------------------------------------
   demo cards
   --------------------------------------------------------- */
.cards{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
  padding:clamp(18px,2.4vw,26px); width:100%;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--bg-3); transform:translateY(-2px); }
.card h3{ font-size:1.06rem; font-weight:400; margin:9px 0 8px; }
.card p{ color:var(--dim); font-size:.93rem; margin:0; }
.card .go{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--faint); font-size:.88rem; transition:color .3s, gap .3s var(--ease); }
.card:hover .go{ color:var(--txt); gap:11px; }

/* ---------------------------------------------------------
   visualization cards (thumbnail + what you can actually do)
   --------------------------------------------------------- */
.vlist{ display:grid; gap:14px; grid-template-columns:1fr; }
.vcard{
  display:grid; gap:clamp(16px,3vw,32px); grid-template-columns:1fr;
  background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
  padding:clamp(18px,2.6vw,26px);
  transition:border-color .3s, background .3s;
}
.vcard:hover{ border-color:var(--line-2); background:var(--bg-3); }
@media (min-width:720px){
  .vcard{ grid-template-columns:minmax(150px,210px) minmax(0,1fr); align-items:center; }
}
.vthumb{
  position:relative; margin:0; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(255,255,255,0) 68%);
  border-radius:4px; overflow:hidden;
}
.vthumb img{
  width:100%; height:100%; object-fit:contain;
  filter:saturate(.75) contrast(1.02);
  transition:transform .55s var(--ease);
}
.vcard:hover .vthumb img{ transform:scale(1.045); }
.vcard h3{ font-size:1.1rem; font-weight:400; margin:9px 0 9px; }
.vcard > div > p{ color:var(--dim); font-size:.93rem; margin:0; max-width:62ch; }
.vcard .tools{ margin-top:16px; }

/* modal */
.modal{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:clamp(10px,2.5vw,32px);
  background:rgba(10,10,10,.82); opacity:0; transition:opacity .3s ease;
}
.modal.show{ display:flex; }
.modal.on{ opacity:1; }
.modal-box{
  width:min(1180px,100%); height:min(86vh,880px);
  background:var(--bg); border:1px solid var(--line-2); border-radius:4px;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(10px); transition:transform .35s var(--ease);
}
.modal.on .modal-box{ transform:none; }
.modal-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.modal-bar h4{ margin-right:auto; }
.modal-bar h4{ font-size:.96rem; font-weight:400; color:var(--txt); }
.modal-box iframe{ flex:1; width:100%; border:0; background:var(--bg); }

/* ---------------------------------------------------------
   page title / contact / footer
   --------------------------------------------------------- */
.page-title{ padding-block:clamp(38px,6vw,64px) clamp(20px,3vw,32px); }
.page-title h1{ font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:300; margin-top:12px; }
.page-title p{ color:var(--dim); margin-top:14px; max-width:62ch; }

.contact{ display:grid; gap:clamp(22px,4vw,54px); grid-template-columns:1fr; }
@media (min-width:820px){ .contact{ grid-template-columns:1fr 1fr; } }

.site-foot{ border-top:1px solid var(--line); padding-block:26px 34px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; color:var(--faint); font-size:.86rem; }
.foot-in a:hover{ color:var(--txt); }


/* ---------------------------------------------------------
   animated paper figure
   --------------------------------------------------------- */
.fig{
  margin:18px 0 0; padding:clamp(14px,2vw,22px);
  border:1px solid var(--line); border-radius:4px; background:var(--bg-2);
  display:grid; gap:clamp(14px,2.6vw,30px); grid-template-columns:minmax(0,1fr);
}
@media (min-width:780px){ .fig{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; } }
.fig-stage{ position:relative; aspect-ratio:4/3; min-height:210px; }
.fig-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* loading indicator, until a figure's data file has arrived (fig-surface.js) */
.fig-load{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; pointer-events:none;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  transition:opacity .4s ease;
}
.fig-load i{
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--line); border-top-color:var(--dim);
  animation:fig-spin .9s linear infinite;
}
.fig-load.off{ opacity:0; }
.fig-load.err i{ display:none; }
@keyframes fig-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .fig-load i{ animation-duration:2.4s; } }
.fig-side{ margin:0; }
.fig-cap{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; min-height:112px; }
.fig-cap.on{ opacity:1; transform:none; }
.fig-step{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.fig-cap h4{ font-size:1.04rem; font-weight:400; margin:8px 0 7px; }
.fig-cap p{ color:var(--dim); font-size:.9rem; margin:0; }
.fig-read{ margin:14px 0 0; }
.fig-read div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  border-top:1px solid var(--line); padding:8px 0 0; margin:0 0 6px;
  font-size:.86rem;
}
.fig-read dt{ color:var(--faint); }
.fig-read dd{ margin:0; color:var(--txt); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fig-bar{ display:flex; align-items:center; gap:9px; margin-top:8px; font-size:.74rem; color:var(--faint); }
.fig-bar i{
  flex:1; height:6px; border-radius:3px;
  background:linear-gradient(to right, rgb(25,70,180), rgb(50,210,230), rgb(255,230,80), rgb(210,50,45));
}
.fig-src{ margin-top:14px; font-size:.76rem; line-height:1.55; color:var(--faint); }
.fig-src sup{ font-size:.72em; }
/* the two acts of the authalic-flow figure share one stage */
.fig-acts{ position:absolute; top:0; right:0; z-index:2; display:flex; gap:6px; }
.fig-acts button{
  font-family:inherit; font-size:.72rem; letter-spacing:.06em;
  color:var(--faint); background:rgba(25,25,25,.72); border:1px solid var(--line);
  border-radius:3px; padding:3px 8px; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.fig-acts button:hover{ color:var(--txt); border-color:var(--line-2); }
.fig-acts button.on{ color:var(--txt); border-color:var(--line-2); background:rgba(38,38,38,.9); }

/* ---------------------------------------------------------
   contact
   --------------------------------------------------------- */
.contact .label{ margin-bottom:14px; }
.mail{
  display:inline-block; font-size:clamp(1.2rem,2.5vw,1.72rem); font-weight:200;
  letter-spacing:-.015em; color:var(--txt);
  padding-bottom:4px; border-bottom:1px solid var(--line-2);
  transition:border-color .3s ease, color .3s ease;
}
.mail:hover{ color:#fff; border-color:var(--txt); }
.contact .tools{ margin-top:16px; }
.where{
  font-style:normal; color:var(--faint); font-size:.93rem; line-height:1.72;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
}

.profiles{ display:flex; flex-direction:column; }
.profile{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 12px 14px 0; border-top:1px solid var(--line);
  margin-inline:-12px; padding-left:12px; border-radius:3px;
  transition:background .3s ease, padding .35s var(--ease);
}
.profile:last-child{ border-bottom:1px solid var(--line); }
.profile:hover{ background:var(--bg-2); padding-left:18px; }
.p-k{ color:var(--txt); font-size:.97rem; flex:0 0 clamp(96px,13vw,136px); }
.p-v{
  color:var(--faint); font-size:.88rem; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.profile .a{ color:var(--faint); font-size:.85rem; transition:color .3s ease, transform .35s var(--ease); }
.profile:hover .a{ color:var(--txt); transform:translate(2px,-2px); }
@media (max-width:420px){
  .profile{ flex-wrap:wrap; gap:4px 16px; }
  .p-k{ flex:0 0 auto; }
}

/* Research overview */
.research{ border-top:1px solid var(--line); }
.research-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.research-item{ display:flex; flex-direction:column; border-top:1px solid var(--line); padding:22px 0 8px; }
.research-item h3{ font-size:1.22rem; margin:14px 0 12px; }
.research-item p{ color:var(--dim); font-size:.95rem; max-width:32ch; }
.research-item .more{ margin-top:auto; padding-top:16px; }
.research-item:hover{ border-color:var(--line-2); }
.research-item:hover .more{ color:var(--txt); }
a:focus-visible,button:focus-visible{ outline:2px solid var(--txt); outline-offset:5px; }
.page-title p a{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px){
  .research-grid{ grid-template-columns:1fr; gap:18px; }
  .research-item p{ max-width:60ch; }
  .research-item .more{ padding-top:4px; }
  .portrait{ max-width:248px; }
  .modal-bar{ flex-wrap:wrap; }
  .modal-bar h4{ flex-basis:100%; }
  html{ scroll-padding-top:112px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; }
}

.modal.show:not(.on){ pointer-events:none; }