/* ═══════════════════════════════════════
   1121chisa.pages.dev — Sakura Light
   ═══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#faf5f7;
  --fg:#2a1a2a;
  --mid:#6a5a6a;
  --dim:#b0a0b0;
  --faint:#e8e0e4;
  --accent:#e8a0b0;
  --accent2:#c4b0e0;
  --accent3:#d4a0c8;
  --font:'Noto Sans SC','Inter',system-ui,sans-serif;
  --mono:'SF Mono','Cascadia Code','Consolas',monospace;
}

html{background:var(--bg);scroll-behavior:auto}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  font-weight:300;
  overflow-x:hidden;
  cursor:none;
}

a{color:inherit;text-decoration:none}

/* ─── 3D Canvas ─── */
#scene{
  position:fixed;inset:0;z-index:0;display:block;
  opacity:.55;
}

/* ─── Custom cursor ─── */
.cursor{
  position:fixed;z-index:9999;
  width:24px;height:24px;
  border:1px solid var(--accent);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,border-color .25s;
}
.cursor::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:4px;height:4px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor.hover{width:48px;height:48px;border-color:var(--accent2)}

/* ─── Nav ─── */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
}
.nav-brand{
  font-family:var(--mono);
  font-size:.85rem;font-weight:400;
  letter-spacing:.1em;
  color:var(--fg);
}
.nav-links{display:flex;gap:24px}
.nav-links a{
  font-family:var(--mono);
  font-size:.65rem;letter-spacing:.1em;
  color:var(--mid);
  transition:color .3s;
  font-weight:400;
}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}

/* ─── Main ─── */
main{position:relative;z-index:3}

.viewport{
  min-height:100vh;
  display:flex;align-items:center;
  padding:0 40px;
}

/* ─── Hero ─── */
.hero-content{
  max-width:800px;margin:0 auto;text-align:center;width:100%;
}
.hero-glitch{
  font-size:clamp(3rem,10vw,7rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:20px;
  position:relative;
  color:var(--accent);
}
.hero-sub{
  font-size:clamp(.85rem,1.8vw,1rem);
  color:var(--mid);
  letter-spacing:.08em;margin-bottom:8px;
}
.hero-quote{
  font-size:clamp(.75rem,1.3vw,.9rem);
  color:var(--dim);font-style:italic;
}

/* ─── Panel ─── */
.panel{
  max-width:750px;margin:0 auto;width:100%;
}
.panel-num{
  font-family:var(--mono);
  font-size:.65rem;letter-spacing:.15em;
  color:var(--accent);
  display:block;margin-bottom:8px;
}
.panel h2{
  font-size:2rem;font-weight:300;letter-spacing:-.02em;
  margin-bottom:32px;color:var(--fg);
}
.panel p{
  font-size:1rem;line-height:2;
  color:var(--mid);margin-bottom:6px;
}
.panel-desc{
  font-size:.8rem !important;
  color:var(--dim) !important;
  margin-bottom:28px !important;
}

/* ─── Skill grid ─── */
.skill-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.skill-card{
  background:#fff;
  border:1px solid var(--faint);
  border-radius:8px;padding:20px;
  transition:all .35s;
  cursor:none;
}
.skill-card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(232,160,176,.12);
  transform:translateY(-2px);
}
a.skill-card{display:block;color:inherit;text-decoration:none}
.skill-card--link:hover{
  border-color:var(--accent2);
  box-shadow:0 8px 28px rgba(196,176,224,.22);
}
.skill-card--link .sk-desc{color:var(--accent)}

/* ─── Project list ─── */
.project-list{display:flex;flex-direction:column;gap:10px}
.project-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--faint);
  border-radius:8px;
  transition:all .35s;
  cursor:none;
  color:inherit;text-decoration:none;
}
.project-card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(232,160,176,.12);
  transform:translateY(-2px);
}
.proj-icon{font-size:1.4rem;color:var(--accent)}
.proj-info{flex:1;display:flex;flex-direction:column;gap:2px}
.proj-name{font-size:.95rem;font-weight:400;color:var(--fg)}
.proj-desc{font-size:.75rem;color:var(--dim);font-family:var(--mono)}
.proj-arrow{font-size:1.1rem;color:var(--accent);transition:transform .3s}
.project-card:hover .proj-arrow{transform:translate(2px,-2px)}

.sk-icon{display:block;font-size:1.2rem;color:var(--accent);margin-bottom:10px}
.sk-name{display:block;font-size:.9rem;font-weight:400;margin-bottom:4px;color:var(--fg)}
.sk-desc{display:block;font-size:.72rem;color:var(--dim);font-family:var(--mono)}

/* ─── Photo grid ─── */
.photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.photo-item{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:var(--faint);
}
.photo-item:nth-child(3),
.photo-item:nth-child(4),
.photo-item:nth-child(5){grid-column:span 2}

.photo-item img{
  width:100%;
  display:block;
  image-rendering:auto;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.photo-item:hover img{transform:scale(1.02)}
.photo-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 16px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.5));
  color:#fff;
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.03em;
  pointer-events:none;
}

/* ─── Timeline ─── */
.tl-list{display:flex;flex-direction:column}
.tl-item{
  display:flex;align-items:baseline;gap:24px;
  padding:20px 0;
  border-top:1px solid var(--faint);
  transition:all .3s;
}
.tl-item:hover{
  border-top-color:var(--accent);
  background:rgba(232,160,176,.04);
  margin:0 -16px;padding-left:16px;padding-right:16px;
}
.tl-yr{
  font-family:var(--mono);
  font-size:.7rem;color:var(--accent);
  white-space:nowrap;
}
.tl-t{font-size:.95rem;font-weight:400;display:block}
.tl-d{font-size:.78rem;color:var(--dim);display:block;margin-top:2px}

/* ─── Footer ─── */
footer{
  min-height:40vh;
  display:flex;align-items:center;justify-content:center;
  gap:32px;flex-wrap:wrap;
  padding:60px 40px;
  position:relative;z-index:3;
}
footer a{
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;
  color:var(--dim);
  transition:color .3s;
}
footer a:hover{color:var(--accent)}
.copy{font-family:var(--mono);font-size:.65rem;color:var(--dim)}

::selection{background:var(--accent);color:#fff}

/* ─── Responsive ─── */
@media(max-width:768px){
  nav{padding:14px 20px}
  .nav-links{gap:14px}
  .nav-links a{font-size:.6rem}
  .viewport{padding:0 20px}
  .hero-content{text-align:center}
  .skill-grid{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:1fr;gap:8px}
  .photo-item:nth-child(n){grid-column:1}
  .tl-item{flex-direction:column;gap:4px}
  .cursor{display:none}
  body{cursor:auto}
}
@media(max-width:480px){
  .skill-grid{grid-template-columns:1fr}
  .panel h2{font-size:1.5rem}
}