/* === Eric Meyer Reset === */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, .contact-page-text,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
/*  border: 0;*/
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
Color Palette (Hex)
black:   #0D0D0D
white:   #F2F2F2
yellow:  #F2EC9B
brown:   #D99F59
orange:  #D95032
blue:    #6A8FA6
mint:    #C5D9D2
*/ 


/* === base === */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {  
  font-family: "Josefin Sans", sans-serif;
  height: 100%;
}

video { 
  width: 100%; 
  height: auto; 
}

/* base: applies to all pages and screen sizes */
.scroll-container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  scroll-snap-type: none;
}

/* === header glass (base) === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; 
  backdrop-filter: blur(12px) brightness(1.15);
  -webkit-backdrop-filter: blur(12px) brightness(1.15);
  background: rgba(13, 13, 13, 0.10); 
  color: #F2F2F2;
  border-bottom: 1px solid rgba(242, 242, 242, 0.2);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    padding 0.3s ease;
}

.site-header-inner {
  margin: 0 auto;
  padding: 0.8rem 1rem;  /*mobile header height*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.site-logo {
  font-size: 1.125rem;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.12s ease;
}

.site-logo:hover {
  color: #D95032; 
}

.site-logo:active {
  transform: scale(0.96);
}

/* desktop nav */
.site-nav {
  display: none;           
  gap: 2rem;
}

.site-nav a {
  text-decoration: none;
  font-size: 1.125rem;  /*uxui, motion, graphic nav bar*/
  color: inherit;
  font-weight: 400;
  position: relative;
}

/* hover underline + color */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  background: #D95032; 
  transition: width 0.2s ease;
}

.site-nav a:hover::after {
  width: 100%;
}

.site-nav a.current {
  color: #D95032;
}

.menu-toggle {
  width: 34px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;               
  background: #F2F2F2;  
}

.menu-toggle::before,
.menu-toggle::after {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle::before {
  top: 8px;  
}

.menu-toggle span {    
  top: 18px; 
  width: 20px;           
  margin-left: auto;     
  right: 0;  
  transition: none;            
}

.menu-toggle::after {
  top: 28px; 
}

.nav-open .menu-toggle::before {
  transform: rotate(45deg);
  top: 16px;
}
.nav-open .menu-toggle span {
  opacity: 0;
}
.nav-open .menu-toggle::after {
  transform: rotate(-45deg);
  top: 16px;
}

.site-header.is-solid {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) brightness(1.2);
  -webkit-backdrop-filter: blur(12px) brightness(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

body.uxui-page .site-header,
body.motion-page .site-header,
body.graphic-page .site-header,
body.about-page .site-header,
body.contact-page .site-header {
  color: #0D0D0D; /* black */
}

body.uxui-page .menu-toggle span,
body.uxui-page .menu-toggle::before,
body.uxui-page .menu-toggle::after,
body.motion-page .menu-toggle span,
body.motion-page .menu-toggle::before,
body.motion-page .menu-toggle::after,
body.graphic-page .menu-toggle span,
body.graphic-page .menu-toggle::before,
body.graphic-page .menu-toggle::after,
body.about-page .menu-toggle span,
body.about-page .menu-toggle::before,
body.about-page .menu-toggle::after,
body.contact-page .menu-toggle span,
body.contact-page .menu-toggle::before,
body.contact-page .menu-toggle::after {
  background: #0D0D0D;
}

body.nav-open .site-header {
  color: #F2F2F2;
}

body.nav-open .menu-toggle span,
body.nav-open .menu-toggle::before,
body.nav-open .menu-toggle::after {
  background: #F2F2F2;
}

body.nav-open .site-logo {
  color: #F2F2F2;
}

/* === nav overlay (base) === */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.92);
  color: #F2F2F2;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-overlay-inner {
  flex: 1;
  display: flex;
  justify-content: center; 
  align-items: center;             
}

.nav-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; 
}

.nav-overlay-list a {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 400;
  text-decoration: none;
  color: inherit;
}

.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* === font size (base) === */
.hero-name-first,
.hero-name-last,
.contact-title,
.page-hero-title,
.page-contact-title {	
 	font-size: clamp(4.75rem, 3.9rem + 3.5vw, 11rem);
 	font-weight: 600;
  line-height: 1;
}

.btn,
.hero-text,
.contact-text,
.contact-page-email,
.about-text,
.hero-side-text {
	font-size: clamp(1.125rem, 1.03rem + 0.7vw, 1.75rem); 
	font-weight: 400;
  line-height: 1.4;
}

.hero-text {
  margin-bottom: clamp(0.5rem, 0.45rem + 0.25vw, 1rem);
}

.intro-text {
  font-size: clamp(1.125rem, 2.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.4;
}

.page-hero-text {
  font-size: clamp(1rem, 1.25vw, 1.375rem); 
  font-weight: 400;
  line-height: 1.25;  
}

.project-title {
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 2rem);
  font-weight: 500;
  line-height: clamp(1, 0.95 + 0.2vw, 1.25);
  margin: 0;  
}

/* ===
   UI action shared (base)
   .btn + .contact-page-email
   ui-action for (padding + hover + active)
   === */

:root {
  --action-bg: #D95032;
  --action-text: #0D0D0D;
  --action-hover-text: #F2F2F2;
  --action-pad-y: 0.625rem;    /*btn padding (mobile)*/
  --action-pad-x: 1.875rem;    /*btn padding (mobile)*/
  --header-height: clamp(56px, 6vw, 96px);   /*header height*/
}

.ui-action {
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--action-bg);
  color: var(--action-text);
  padding: var(--action-pad-y) var(--action-pad-x);
  transition: color 0.15s ease;
}

.ui-action:hover {
  color: var(--action-hover-text);
}

.ui-action:active {
  animation: pressBounceBtn 0.3s ease-out;
}

@keyframes pressBounceBtn {
  0%   { transform: scale(1); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes pressBounce {
  0% { transform: scale(1); }
  60% { transform: scale(0.96); }  
  100% { transform: scale(1); }
}

.cat-link {
  color: inherit;
  text-decoration: none;
}

/* === hero section (base) === */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;      
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  overflow: hidden;       
}

.hero-img {
  position: absolute;
  inset: 0;                
  width: 100%;
  height: 100%;
  object-fit: cover;        
  object-position: center;  
  z-index: 1;
}

/*overlay*/
.hero::before {
  content: "";  
  inset: 0;
  background: rgba(0,0,0,0.3); 
  backdrop-filter: blur(4px) brightness(0.92) contrast(0.85);
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  text-align: left;         
  max-width: 32rem;        
  padding: 0 2rem;        
}

.hero-content,
.scroll {
  color: #F2F2F2;
  position: relative;
  z-index: 3;  
}

.scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.hero-animate {
  opacity: 0;
  transform: translateY(8px);
  animation: heroFadeIn 0.6s ease forwards;
  animation-delay: 0.15s;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === highlight reel section carousel (base) === */
.reel-carousel {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding: 0 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.reel-carousel::-webkit-scrollbar {
  display: none;
}

.reel {
  width: 100%;
  height: 341px;
  object-fit: cover;
  scroll-snap-align: center;
}

.reel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #f2f2f2;
  border-radius: 50%;
  opacity: 0.25;
  transition: opacity 0.3s, background-color 0.3s;
}

.dot.active {
  background-color: #D95032; 
  opacity: 1;
}

.reel-section {
  display: block;
  background: #0D0D0D;          
  padding-block: clamp(3rem, 10vh, 5rem);  
}

.reel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: none;
}

.reel-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-overlay-inner {
  width: 100vw;           
  max-width: 100vw;
  height: auto;
  aspect-ratio: 16 / 9;
}

.reel-overlay iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

.reel-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  font-size: 2rem;
  background: none;
  border: none;
  color: #f2f2f2;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.reel-close:hover {
  opacity: 1;
}

/*reel label (base) 实验*/
.reel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

.reel-label {
  font-size: clamp(1rem, 1.25vw, 1.375rem);
  font-weight: 400;
  line-height: 1.4;
  color: #F2F2F2;
  margin-left: clamp(0.625rem, 2vw, 1rem);
  pointer-events: none;
  user-select: none;  
}

/* === category section (base) === */
.cat-title {
  font-size: clamp(3.5rem, 1.8rem + 5.5vw, 11rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0;
  word-break: break-word;
  white-space: normal;  
  width: fit-content; 
  display: flex;
  align-items: center; 
  gap: 0.5em;           
}

.cat-desc {  
  font-size: clamp(1rem, 1.25vw, 1.375rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: clamp(14rem, 26vw, 40rem);
}

.cat-video {
  display: none;  
}

.home-page .category-section {
  background: #0D0D0D;
  color: #F2F2F2;
}

/*category-row padding-line (base)*/
.category-row {
  display: flex;
  align-items: center;
  padding-inline: clamp(1rem, 0.125rem + 3.5vw, 8rem);
  margin-block: 4rem;
}

.category-row:nth-child(1) {
  justify-content: flex-start;
}

.category-row:nth-child(2) {
  justify-content: flex-end;
}

.category-row:nth-child(3) {
  justify-content: flex-start;
}

.category-row:nth-child(1) .cat-text {
  transform: translateX(clamp(0rem, -0.25rem + 2vw, 4rem));
}

.category-row:nth-child(2) .cat-text {
  transform: translateX(clamp(-20rem, 0.5rem - 7vw, 0rem));
}

.category-row:nth-child(3) .cat-text {
  transform: translateX(clamp(2rem, 0.5rem + 10vw, 30rem));
}

/*SVG arrow (base) 实验*/
.cat-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  color: currentColor;
  overflow: hidden; 
  position: relative;
}

.cat-arrow svg {
  display: block;
  width: auto;              
  height: 100%;
  transform: translateX(0);
  transition: transform 0.3s ease;
  will-change: transform;
  position: relative;
}

.cat-text:hover .cat-arrow svg {
  animation: flyMaskedTwice 0.5s ease forwards;
}

@keyframes flyMaskedTwice {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(1.25rem);     
  }
  26% {
    transform: translateX(-1.25rem);    
  }
  100% {
    transform: translateX(0);        
  }
}

.cat-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

.cat-link:hover {
  text-decoration: none;
}

.cat-text {
  display: inline-block;
  width: fit-content;
}

.cat-text.uxui:hover .cat-link {
  color: #C5D9D2;
}

.cat-text.motion:hover .cat-link {
  color: #6A8FA6;
}

.cat-text.graphic:hover .cat-link {
  color: #D99F59;
}


/* === about section (base) === */
.about-text {
  max-width: none;   
  margin-bottom: 1.5rem;
}

.about-text .about-highlight {
  color: #D95032;
}

.about-preview {
  position: relative;         /*no delete*/
  overflow: hidden;           /*no delete*/
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0D0D0D;
  color: #F2F2F2;  
  padding: clamp(6.5rem, 3vw + 2rem, 9rem) clamp(1.25rem, 2.5vw + 0.75rem, 7.25rem);
}

.about-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.about-inner {
  z-index: 2;
  padding: 0;
  max-width: 36rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-card {
  position: relative;
  background: #0D0D0D;     
  color: #F2F2F2;
  display: flex;
  flex-direction: column;  
  align-items: flex-end;
  max-width: 100%;
  padding: clamp(2rem, 4vw + 1rem, 4rem);
  gap: clamp(1.25rem, 1vw + 0.5rem, 2.25rem);
}

.about-card p,
.about-text {
  margin: 0;
}

.about-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn {
  --action-bg: #D95032;
  --action-text: #0D0D0D;
  --action-hover-text: #F2F2F2;
}

/* === contact section + footer (base) === */
.home-page .contact-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #D95032;
  color: #0D0D0D;
}

.home-page .contact-main {
  flex: 1;
  display: flex;
  align-items: center;  
  justify-content: center;  
}

.home-page .contact-preview {
  display: inline-flex;       
  flex-direction: column;
  align-items: flex-start;    
  margin: 0 auto;            
  padding: 0;
  width: auto;
  max-width: none;
}

.contact-title {
  white-space: nowrap; 
}

.contact-title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.home-page .contact-title {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.home-page .contact-text {
  display: inline-block; 
  margin: 1rem 0 0;
  padding: 0;
}

/* === footer === */
.site-footer {
  background: #F2F2F2;
  color: #0D0D0D;
  text-align: center; 
  font-size: clamp(1rem, 0.4vw + 0.6rem, 1.25rem);
  padding: clamp(3.5rem, 2vw + 2rem, 4.5rem) 0;
  margin-top: 0;
}

/* === category + about + contact page (base) === */
body.uxui-page,
body.motion-page,
body.graphic-page,
body.about-page,
body.contact-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.uxui-page .page-main,
body.motion-page .page-main,
body.graphic-page .page-main,
body.about-page .page-main,
body.contact-page .page-main {
  flex: 1;
}

body.uxui-page {
  background: #C5D9D2;   /* mint */
  color: #0D0D0D;
}

body.motion-page {
  background: #6A8FA6;   /* blue */
  color: #0D0D0D;
}

body.graphic-page {
  background: #D99F59;   /* brown */
  color: #0D0D0D;
}

.page-main {
  margin: 0;  
}

.page-main {
  padding-top: var(--header-height);      /*no delete, header height!*/
  padding-inline: clamp(0.25rem, 1vw, 0.75rem);
  --page-inline-padding: clamp(0.25rem, 1vw, 0.75rem);
}

/*contact link (base)*/
.contact-link {
  text-decoration: none;
  color: inherit;
}

.contact-link:hover {
  opacity: 0.85;
}

/*contact page only (base)*/
body.contact-page .page-main {
  padding-inline: 0;
  --page-inline-padding: 0;
}

.page-hero {  
  padding: 0;
  margin: 0;
}

/*category page (base)*/
.page-hero-title {
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
  text-align: center;
  display: block;
  width: 100%;
}

.page-hero-text {
  text-align: left;
  margin-inline: auto;
  margin-bottom: clamp(1rem, 4vw, 5rem);  
  max-width: clamp(16rem, 40vw, 40rem);
  opacity: 0.6;
}

.contact-page-email {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-hero-uxui {
  background: #C5D9D2;   /* mint */
  color: #0D0D0D;
}

.page-hero-motion {
  background: #6A8FA6;   /* blue */
  color: #0D0D0D;
}

.page-hero-graphic {
  background: #D99F59;   /* brown */
  color: #0D0D0D;
}

.project-section {
  padding-top: 3rem;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--page-inline-padding);
}

.project-card {
  background: transparent;
  overflow: hidden;
  border: none;
  transition:    
    transform 0.2s ease,
    box-shadow 0.2s ease;
  padding-bottom: 1.25rem;
  padding-top: 0.75rem;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
}

.project-card-body {
  padding-top: 0.5rem;
  padding-bottom: 3rem;
}

.project-type,
.project-tags {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
  font-weight: 400;
  opacity: 0.6;
  padding: 0;
  margin: 0;
}

.page-contact-title {
  text-align: center;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
}

.animate-on-scroll.visible {
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Category pages — Contact title spacing (base) */
.contact-preview-page {
  margin-top: clamp(5rem, 10vw, 12.5rem); 
  margin-bottom: 2.5rem;
}

/* === about page (base) === */
.about-mobile {
  display: block;
  margin-bottom: 4rem;
}

.about-desktop {
  display: none;
}

.about-tiles {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tile-header {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  font-weight: 400;
  text-align: center;
  justify-content: center;  
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
  display: flex;  
  align-items: center;  
  height: 80px;  
}

/* awards spacing */
.awards-list .award-item {
  margin-bottom: 2rem;
}

.about-modal-overlay {
  display: none;       
}

.about-page .tile-skills .tile-header {
  background: #6A8FA6;   
}

.about-page .tile-experience .tile-header {
  background: #C5D9D2;   
}

.about-page .tile-education .tile-header {
  background: #F2EC9B;  
}

.about-page .tile-awards .tile-header {
  background: #D99F59;   
}

.about-page .tile-resume .tile-header {
  background: #D95032;  
}

.about-page .tile-feedback .tile-header {
  background: #0D0D0D;   
  color: #F2F2F2;        
}

/* Skills */
.about-page .tile-skills .tile-content {
  background: #6A8FA6;   
  color: #0D0D0D;        
}

/* Experience */
.about-page .tile-experience .tile-content {
  background: #C5D9D2;  
  color: #0D0D0D;
}

/* Education */
.about-page .tile-education .tile-content {
  background: #F2EC9B;   
  color: #0D0D0D;
}

/* Awards / Exhibition */
.about-page .tile-awards .tile-content {
  background: #D99F59;   
  color: #0D0D0D;
}

/* Resume */
.about-page .tile-resume .tile-content {
  background: #D95032;   
  color: #F2F2F2;         
}

/* Testimonials (mobile / base) */
.about-page .tile-feedback .tile-content {
  background: #0D0D0D;
  color: #F2F2F2;
}

.tile-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  padding: 0 1.25rem;  
  line-height: 1.4;
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    padding 0.45s ease;   
}

/*about page - intro (base)*/
.about-page .about-intro-mobile {
  background: #0D0D0D;
  color: #F2F2F2;    
  padding: 3rem;  
}

.content-wrapper {  
  text-align: left;  
  margin: 0;
  padding-inline: 3rem;
  padding-bottom: 3rem;
}

.about-content .subtitle {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;  
  margin: 0;
}

.about-content p:not(.subtitle) {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

.tile-content.about-content {
  margin: 0;
  padding: 0;
}

.tile-content.open {
  max-height: 3000px;
  opacity: 1;
  transform: translateY(0);
}

.tile-resume .resume-trigger {
  color: #0D0D0D;
  background: transparent;
  text-decoration: none;
  transition: 
    color 0.15s ease,
    background 0.15s ease;
}

.tile-resume .resume-trigger.clicked {
  background: #0D0D0D;
  color: #F2F2F2;
}

/*Testimonials disabled (temporary)*/
.about-page .tile-d.feedback {
  pointer-events: none;   /* 待定 */
  cursor: default;          
}

/* === contact page (base) === */
.contact-page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
}

.page-hero-contact {
  background: #D95032;   /* orange */
}

.contact-page-email {
  --action-bg: #0D0D0D;
  --action-text: #F2F2F2;
  --action-hover-text: #D95032;
}

/*.page-hero.page-hero-contact 这里没有空格，请不要修改！*/
.page-hero.page-hero-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   
  gap: 1.5rem;   
  padding-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;   
  background: none;          
}

.page-hero.page-hero-contact::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-height));  
  left: 0;
  width: 100%;
  height: calc(100% + var(--header-height));  
  background: #D95032;
  z-index: -1; /* layer */
}

.contact-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(2.75rem, 10vw, 16rem); 
  padding-block: 0;
  margin: 0;   
  width: 100%;   
  box-sizing: border-box;
}

.contact-page-text {
  margin-top: 0;
  margin-bottom: auto;
  padding-top: clamp(2.5rem, 3vw, 4.5rem);
  max-width: clamp(18.875rem, 60vw, 55rem);
}

.contact-social {
  margin-top: auto;  
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.social-title {
  display: none;
}

/* Social Buttons */
.social-list a {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem); 
  font-weight: 400;
  line-height: 1.25;  
}

.social-list {
  list-style: none;
  padding: 0;
  margin: 0;  
  display: flex;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  margin-top: 1.25rem;
}

.contact-page .social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.5rem, 7vw, 7rem);
  height: clamp(4.5rem, 7vw, 7rem);
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #0d0d0d;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  opacity: 1; 
}

.contact-page-text {
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 2.25rem);
  font-weight: 400;
  line-height: 1.4;
}

/*homepage (base)*/
body.home-page {
  overflow: visible;
}

.scroll-hover-zone {
  display: none;
}

.snap {
  min-height: auto;
}

/*hide desktop homepage reel*/
.desktop-reel-section {
  display: none;
}

.reel-wrapper {
  flex: 0 0 98%;
  scroll-snap-align: center;
}

.home-page .contact-text {
  max-width: 355px;
}

.project-card,
.project-grid,
.project-section {
  overflow: visible;
}

body.about-page .about-mobile {
  width: 100vw;
  margin-left: calc(-1 * var(--page-inline-padding, 0.25rem));
}


/* === mobile === */
@media (max-width: 767px) {
  .project-image img {
    width: 100vw;
    margin-left: calc(-1 * var(--page-inline-padding, 0.25rem));
    display: block;
  }
} /*END*/


/* === tablet === */
@media (min-width: 768px) {
.home-page .scroll-container {
  scroll-snap-type: none;
  overflow-y: visible;
  height: auto;
}

.snap {
  min-height: auto;
}

body.home-page {
  overflow: visible;
}

.scroll-hover-zone {
  display: none;
}

:root {
  --action-pad-y: 0.75rem;
  --action-pad-x: 2.25rem;
}

/*reel section*/
.desktop-reel-section {
  display: none;
}

.reel-wrapper {
  flex: 0 0 98%;
}

.contact-section {
  flex-grow: 1;
}

.contact-main {
  min-height: 0;  
}

.home-page .contact-section {
  min-height: 100vh;
}

.home-page .contact-text {
 max-width: 480px; 
}

/* category pages (tablet) */
.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card-body {
  padding-bottom: 4rem;
}

/* about page (tablet) */
.about-page .about-intro-mobile {  
  padding: 5rem 7rem;
}

.content-wrapper {  
  padding-inline: 7.5rem;
}

/* contact page (tablet)*/
.contact-page-text {
  margin-right: auto;
} 

.contact-social {
  align-self: flex-end;
  text-align: right;
}
} /*END (tablet all)*/


/* === desktop shared (≥1024px）
   tablet-landscape + no hover 
   === */
@media (min-width: 1024px) {

body.home-page {
  overflow: hidden;     
}

.home-page .scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.home-page .scroll-container.snap-off {
  scroll-snap-type: none;
}

.home-page .snap {
  min-height: 100vh;
  scroll-snap-align: start;
}

.scroll-hover-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  top: 40%;
  z-index: 4;
  display: block;
}

.scroll-hint {
  position: absolute;
  bottom: clamp(2.75rem, 1.5vw + 1rem, 4rem);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  font-size: 0.875rem;
  font-weight: 300;
  text-transform: lowercase;
  color: rgba(242, 242, 242, 0.85);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out;
  transition-delay: 0.2s;
}

.scroll-hover-zone:hover .scroll-hint {
  opacity: 0.85;
  transform: translateX(-50%) translateY(0);
}

/*desktop nav appear + hamburger disappear (desktop shared)*/
.site-header-inner {
  padding: 1.5rem 2.5rem;  
}

.site-nav {
  display: flex;
  margin-left: auto;
  gap: 2rem;
}

.menu-toggle {
  display: none;
}

/*hero section (desktop shared)*/
.hero-content {
  width: fit-content;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.hero-name-row {
  display: grid;
  grid-template-columns: fit-content(12ch) 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: start;
}

.hero-name-first {
  grid-column: 1;
  grid-row: 1;
}

.hero-name-last {
  grid-column: 1;
  grid-row: 2;
}

.hero-side-text {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  opacity: 0.85;
  max-width: clamp(25rem, 32vw, 36rem);
  margin-left: clamp(-13ch, -11vw, -18ch);
}

/*reel section (desktop shared)*/
.reel-section,
.reel-carousel {
  display: none;
}

.desktop-reel-section {
  min-height: 100vh;
  display: flex;
  background: #0D0D0D;
}

.desktop-reel-grid {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.desktop-reel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.reel-wrapper {
  flex: none !important;   
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  max-width: 100vw;   
}

/* Reel video loop (desktop shared) */
.cat-reel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.reel-wrapper:hover .reel-play-icon {
  opacity: 1;
  transform: scale(1);
}

/*category section (desktop shared)*/
.category-section {
  min-height: 100vh;
  display: flex;
  background: #0D0D0D;
  color: #F2F2F2;
}

.category-grid {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.cat-title { 
  white-space: nowrap; 
}

:root {
  --action-pad-y: 1rem;
  --action-pad-x: 3rem;
}

/*about section (desktop shared)*/
.about-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

.about-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about-preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200vh;
  background: transparent;
  overflow: visible;
}

.about-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  height: 200vh;
}

.about-inner {
  width: fit-content;
  max-width: none;
  position: sticky;
  top: 0;
  height: 100vh;
}

.about-card {
  transform: translateY(64px);
  opacity: 0.92;
  transition:
    transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    opacity 0.8s ease-out 0.2s;
  will-change: transform, opacity;
}

.about-text {
  max-width: 31rem;
}

/*contact section (desktop shared)*/
.home-page .contact-section { 
  position: relative;
  z-index: 5;
}

/*category pages (desktop shared)*/
.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card-body {
  padding-bottom: 5rem;
}

.project-image {
  position: relative;
  overflow: hidden;
}

.project-image a {
  display: block;
  position: relative;
}

/*about page (desktop shared)*/
.about-mobile {
  display: none;
}

.about-desktop {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 4vw 4vw 6vw;   
  margin: 0;
  box-sizing: border-box;
}

.about-intro-desktop {
  background: #0D0D0D;
  color: #F2F2F2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  box-sizing: border-box;
  height: 100%;
  max-height: none;
  height: auto;
  overflow: visible;
  padding: clamp(4rem, 2.8vw, 4.25rem);
}

.about-grid-desktop {
  display: grid;
  grid-template-columns: 1.75fr 1fr 1fr 1fr; 
  grid-auto-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "intro skills  experience education"
    "intro awards  resume     feedback";   /* feedback tile (testimonials) */
  padding: 0;
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
  align-items: stretch; 
  height: auto;  
  max-height: none;
  height: auto;
}

.tile-d {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  font-weight: 400;
  line-height: clamp(1.3, 1.32 + 0.05vw, 1.4);  
  text-align: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
  display: flex;  
  align-items: center;
  flex-direction: column; 
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  min-width: 0;  
  padding: 1.5rem;
}

.tile-d.skills {
  grid-area: skills;
  background: #6A8FA6;    /* blue */
  color: #0D0D0D;
}

.tile-d.experience {
  grid-area: experience;
  background: #C5D9D2;    /* mint */
  color: #0D0D0D;
}

.tile-d.education {
  grid-area: education;
  background: #F2EC9B;    /* yellow */
  color: #0D0D0D;
}

.tile-d.awards {
  grid-area: awards;
  background: #D99F59;    /* brown */
  color: #0D0D0D;
}

.tile-d.resume {
  grid-area: resume;
  background: #D95032;    /* orange */
  color: #0d0d0d;
}

.tile-d.feedback {
  grid-area: feedback;
  background: #0D0D0D;    /* black */
  color: #d95032;
}

/* hide accordion content (used only as modal source) */
.tile-content {
  display: none !important;    
  padding: 0 !important;
  margin: 0 !important;
  max-height: 0 !important;  
}

/* modal overlay*/
.about-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px) brightness(1.15);
  -webkit-backdrop-filter: blur(12px) brightness(1.15);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.about-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.about-modal {
  background: #F2F2F2;
  color: #0D0D0D;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  padding: 3rem 3rem;   
  position: relative;
  overflow: hidden !important;
}

.modal-close-btn {
  display: none;
}

.content-wrapper {  
  text-align: left;    
  margin: 0;
  padding: 0;
}

.about-modal-content .subtitle {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
}

.about-modal-content p:not(.subtitle) {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.7;
  margin: 0;
}

.about-modal-content {
  max-height: 70vh;
  overflow: visible !important;
  padding: 0;
}

.about-modal-scroll-area {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: auto;
  padding-right: 0;
}

.about-modal-scroll-area::-webkit-scrollbar-button {
  display: none;
}

.about-modal-scroll-area::-webkit-scrollbar {
  width: 10px;
}

.about-modal-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.about-modal-scroll-area::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.about-modal.is-skills .about-modal-scroll-area::-webkit-scrollbar-thumb {
  background-color: rgba(13, 13, 13, 0.45);
}

.about-modal.is-awards .about-modal-scroll-area::-webkit-scrollbar-thumb {
  background-color: rgba(13, 13, 13, 0.5);
}

.about-modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(13, 13, 13, 0.65);
}

/* modal background according to the content type (desktop shared)*/
.about-modal.is-skills {
  background: #6A8FA6;
  color: #0D0D0D;
}

.about-modal.is-experience {
  background: #C5D9D2;
  color: #0D0D0D;
}

.about-modal.is-education {
  background: #F2EC9B;
  color: #0D0D0D;
}

.about-modal.is-awards {
  background: #D99F59;
  color: #0D0D0D;
}

.about-modal.is-resume {
  background: #D95032;
  color: #F2F2F2;
}

/*fine-tuning of specific content (skills / awards)*/
.about-modal-content .skill-group:not(:first-child) .subtitle {
  padding-top: 1rem;
}

.about-modal.is-skills .about-modal-content p,
.awards-list p {
  line-height: 1.25;
}

.about-modal-content.skills p:not(.subtitle),
.about-modal-content.awards p:not(.subtitle) {
  line-height: 1.4;
  margin: 0;
}

.about-modal-content.awards .award-item {
  margin-bottom: 2rem; 
}

.intro-inner {
  font-weight: 400;
  max-width: 36rem;
  max-height: 50vh;
  min-height: 16rem;
  overflow-y: auto;
  box-sizing: border-box;
  font-size: clamp(1.125rem, 1.15vw, 1.5rem);
  line-height: 1.4;
}

.intro-inner::-webkit-scrollbar {
  width: 4px;
}
.intro-inner::-webkit-scrollbar-thumb {
  background: rgba(13, 13, 13, 0.3);
  border-radius: 4px;
}
.intro-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 13, 13, 0.5);
}

body.about-page .about-end-spacer {
  height: 0;
}

/*contact page (desktop shared)*/
.contact-page-text { 
  margin-right: auto; 
}

.contact-social {
  align-self: flex-end;
  text-align: right;
}
} /*END (desktop shared)*/




/* === desktop (≥ 1280px) === */
@media (min-width: 1280px) {

  /* project card - hover */
  .project-card {
    position: relative;
  }

  .project-image {
    overflow: hidden;         
  }

  .project-image img {
    transform: scale(1);
    transition: transform 0.45s ease;
    will-change: transform;
  }

  .project-card:hover .project-image img {
    transform: scale(1.06);
  }

  .project-type,
  .project-tags {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;    
  }

  .project-card:hover .project-type,
  .project-card:hover .project-tags {
    opacity: 0.6;
    transform: translateY(0);
  }

  .project-meta {
    overflow: hidden;       /* no delete - hides slide motion */
  }

/* === about page - grid (desktop) === */
/*hover effect实验 (desktop)*/
.custom-cursor {
  position: fixed;
  width: clamp(4.5rem, 7vw, 7rem);
  height: clamp(4.5rem, 7vw, 7rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: contrast(150%) saturate(160%) brightness(1.1);
  -webkit-backdrop-filter: contrast(150%) saturate(160%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.15),
    0 0 30px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.05s linear;
}

.tile-d:hover {
  cursor: none;    
}

.tile-d:hover .jump-letter {
  animation: fade-rise 1s ease-out;
}

.jump-letter {
  display: inline;
  letter-spacing: normal;
  will-change: transform;
}

@keyframes fade-rise {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contact page */
.contact-page .social-list a:hover {
  background-color: #D95032;
  color: #f2f2f2;
}
} /*END (desktop)*/