/* ====================================================================
   THEME TOKENS
   ==================================================================== */
:root{
  --color-bg: #0b0b0e;
  --color-surface: #2d261f;
  --color-text: #e4d9c7;
  --color-title: #f4e3c1;
  --color-accent: #c9a86a;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 26px rgba(201, 168, 106, .55);

  --container-w: clamp(960px, 92vw, 1200px);
  --space-1: clamp(8px, 1.2vw, 12px);
  --space-2: clamp(12px, 1.8vw, 20px);
  --space-3: clamp(16px, 2.4vw, 28px);
  --space-4: clamp(20px, 3vw, 36px);
}

/* ====================================================================
   RESET / BASE
   ==================================================================== */
*{ box-sizing: border-box; }
html{ font-size: 100%; }
body{
  margin:0;
  font-family:'Cinzel',serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.75;
  font-size:clamp(15px,1.1vw,18px);
  overflow-x:hidden;
}
h1,h2,h3,h4{ color:var(--color-title); margin:0 0 .75rem; }
h1{ font-size:clamp(28px,3.2vw,44px); line-height:1.2; }
h2{ font-size:clamp(22px,2.2vw,32px); line-height:1.25; }
h3{ font-size:clamp(18px,1.6vw,24px); line-height:1.3; }
p, li, td, th{ font-size:clamp(14px,1.05vw,18px); }

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(12px,2vw,24px) clamp(12px,2vw,24px);
}
.center{ display:block; margin-left:auto; margin-right:auto; }

/* media fit */
img, video, canvas, iframe{ max-width:100%; height:auto; }
img[height], video[height]{ height:auto !important; }

/* ====================================================================
   STAR CANVAS
   ==================================================================== */
#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; }

/* ====================================================================
   NAVBAR
   ==================================================================== */
.navbar{
  background: rgba(45,38,31,.92);
  backdrop-filter: blur(2px);
  padding:.75rem 0;
  box-shadow:0 4px 10px rgba(0,0,0,.55);
  position:sticky; top:0; z-index:20;
  animation: slideDown .6s ease both;
}
.nav-container{ display:flex; align-items:center; justify-content:space-between; }
.logo{
  font-size:clamp(18px,2.2vw,24px);
  font-weight:900; color:var(--color-title); letter-spacing:.5px;
  transition:transform .25s ease;
}
.logo:hover{ transform:scale(1.05); }
.menu-toggle{
  display:none; font-size:1.6rem; background:none; border:none;
  color:var(--color-title); cursor:pointer;
}
.nav-links{
  list-style:none; display:flex; gap:clamp(8px,1.4vw,20px);
  margin:0; padding:0;
}
.nav-links li{ cursor:pointer; transition:color .25s ease, transform .25s ease; }
.nav-links li:hover{ color:var(--color-accent); transform:translateY(-1px); }

@media (max-width: 768px){
  .menu-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; right:16px; top:58px; flex-direction:column;
    background: rgba(45,38,31,.97); padding:.75rem; border-radius:10px;
    box-shadow:0 10px 22px rgba(0,0,0,.5); min-width:180px;
  }
  .nav-links.show{ display:flex; animation:fadeIn .3s ease both; }
}

/* ====================================================================
   PAGE TRANSITION
   ==================================================================== */
.page{ opacity:0; transform:translateY(12px); transition: all .45s ease; }
.page.active{ opacity:1; transform:translateY(0); }
.hidden{ display:none; }

@keyframes slideDown{
  from{ transform:translateY(-100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* ====================================================================
   HOME
   ==================================================================== */
#home h1{ 
   text-align:center; margin-bottom:50px;
}
.home-hero{
  width:min(100%,1200px);
  height:auto !important;
  margin-top:clamp(10px,3vw,50px);
}

/* ====================================================================
   RESEARCH
   ==================================================================== */
.research-title{ font-size:22px; font-weight:bold; }
#research ul{ list-style:none; padding:0; margin:0; }
#research li{ margin-bottom:clamp(24px,4vw,50px); }
#research h2{ font-size: clamp(20px, 2.4vw, 32px); 
              margin-bottom: var(--space-3);
            }
#research h3{ color:var(--color-accent); }
#research p{ font-size: clamp(16px, 1.3vw, 19px); line-height:1.8; margin-bottom:clamp(12px,2.4vw,16px); }

/* 圖片自適應（等比） */
.research-img{
  width: 70%;
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: var(--space-2) auto 0;
}

/* ====================================================================
   PEOPLE
   ==================================================================== */
.profile{
  display:grid; grid-template-columns:140px 1fr; gap:1rem; align-items:start;
  background:var(--color-surface); border-radius:var(--radius-lg);
  padding:1rem; box-shadow:var(--shadow-md); margin-bottom:1rem;
}
.avatar{
  width: clamp(100px,12vw,140px);
  height: clamp(100px,12vw,140px);
  border-radius: clamp(10px, 1.2vw, 16px);
  object-fit:cover; background:rgba(255,255,255,.06);
  border:1px solid rgba(201,168,106,.35);
}
.profile-body .prof-name{ margin:0; font-size:1.6rem; }
.profile-body .prof-title{ margin:.1rem 0 .6rem; color:var(--color-accent); font-size:clamp(14px,1.2vw,16px); }
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.4rem .8rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.chip{
  background:rgba(201,168,106,.12); border:1px solid rgba(201,168,106,.35);
  padding:.22rem .6rem; border-radius:999px; font-size:clamp(14px,1.2vw,16px);
}

.sections details{
  background:rgba(255,255,255,.03); border:1px solid rgba(201,168,106,.3);
  border-radius:12px; padding:.6rem .9rem; margin-bottom:.7rem;
}
.sections summary{ cursor:pointer; font-weight:700; color:var(--color-title); }
.clean-list{ list-style:none; margin:.4rem 0 0; padding:0; }
.clean-list li{ padding:.25rem 0; }
.pub-list{ margin:.4rem 0 0 1.2rem; }

.students h3{ margin-top:1rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.grid.two-col{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.bullets{ list-style:disc; margin-left:1.2rem; }

#people a{ color:var(--color-accent); text-decoration:none; }
#people a:hover{ color:var(--color-title); text-decoration:underline; }

@media (max-width:640px){
  .profile{ grid-template-columns:1fr; }
}

#people h2{ 
   margin-bottom:20px;
}

/* ====================================================================
   CARDS
   ==================================================================== */
.card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:clamp(14px,2vw,22px);
  box-shadow:var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hover-glow:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
}
.list{ padding:0; margin:0; display:grid; gap:.75rem; }

/* ====================================================================
   EVENTS
   ==================================================================== */
#events .list{
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:clamp(12px,2vw,20px);
  justify-items:center;
  margin-top:1rem;
}
#events .list li{ text-align:center; }
#events .list img{
  width:100%; height:auto; border-radius: clamp(6px, 1vw, 10px);
}

@media (max-width:768px){
  #events .list{ grid-template-columns:1fr; }
}

#event h2{ 
   margin-bottom:20px;
}

/* ====================================================================
   CALENDAR
   ==================================================================== */
.calendar-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.calendar-table{
  width:100%; min-width:680px; border-collapse:collapse; margin-top:.75rem;margin-bottom:.95rem;
  font-size:clamp(13px,1vw,16px);
}
.calendar-table th, .calendar-table td{
  border:1px solid var(--color-accent);
  padding:clamp(5px,1.2vw,10px);
  text-align:center; vertical-align:middle;
  white-space:nowrap;
}
.calendar-table th{
  background:var(--color-surface); color:var(--color-title); font-weight:700;
}
.calendar-table tr:nth-child(even){ background:rgba(255,255,255,.04); }
.calendar-table tr:hover{ background:rgba(201,168,106,.18); transition:background .25s ease; }

/* ====================================================================
   CONTACT / MAP
   ==================================================================== */
#contact .map{
  width:100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border: 0;
  display: block;
  margin: 0 auto;
}
/* 舊瀏覽器 fallback：改用視窗高推估 */
@supports not (aspect-ratio: 1 / 1){
  #contact .map{
    height: clamp(300px, 60vh, 800px) !important;
  }
}

/* ====================================================================
   LARGE / SMALL SCREENS TWEAKS
   ==================================================================== */
@media (max-width:768px){
  .profile{ gap:clamp(10px,3vw,16px); }
  .calendar-table{ font-size:clamp(12px,1.6vw,14px); }
  .calendar-table th, .calendar-table td{ padding:clamp(6px,1.6vw,10px); }
}
@media (min-width:1600px){
  .container{ max-width:1280px; }
  body{ font-size: clamp(16px, 1vw, 19px); }
}