/* ============================================================
   RITUN JAIN — 侍 SAMURAI × SAKURA PORTFOLIO
   Dark ink wash · cherry blossom · brushstroke aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500;700&family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── WALLPAPER PALETTE — Blood Katana Night ──
     Samurai girl · crimson sky · ember stars · obsidian black
     Source: deep crimson-black bg, blood red accent, amber katana gold, cream stars */

  /* Ink & Paper — near-black with deep red undertone */
  --ink:        #080205;
  --ink2:       #100308;
  --ink3:       #1a060c;
  --paper:      #f0e8e2;
  --paper-dim:  #b89a90;

  /* Blood red — the dominant wallpaper accent (replaces sakura pink entirely) */
  --sakura:     #c0263c;        /* primary red — used everywhere sakura was */
  --sakura-deep:#8b0a1a;        /* deeper crimson */
  --sakura-pale:#e84060;        /* brighter ember red for highlights */
  --sakura-glow:rgba(192,38,60,0.18);
  --sakura-dim: rgba(192,38,60,0.07);

  /* Ember gold — katana tsuba, the warm amber from the blade */
  --gold:       #c8780a;
  --gold-pale:  #e8a030;
  --gold-glow:  rgba(200,120,10,0.18);

  /* Deeper bloods for borders / accents */
  --blood:      #6b0a18;
  --crimson:    #c0263c;

  /* Dark fog with red undertone */
  --fog:        rgba(240,220,215,0.03);
  --fog2:       rgba(240,220,215,0.07);
  --border:     rgba(192,38,60,0.15);
  --border-gold:rgba(200,120,10,0.22);

  /* Fonts — unchanged */
  --f-display:  "Shippori Mincho", "Noto Serif JP", serif;
  --f-body:     "Space Grotesk", "Noto Sans JP", sans-serif;
  --f-mono:     "JetBrains Mono", monospace;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
::selection { background:var(--sakura-deep); color:#fff; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(232,160,180,0.25); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--sakura); }

body {
  /* Deep crimson-black gradient sky — mirrors wallpaper atmosphere */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   #2a0410 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,  #1a0308 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, #200508 0%, transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  overflow-x: hidden;
  min-height: 100vh;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* Explicitly target every element that renders kanji */
[lang="ja"],
.nav-link-kanji, .nav-title, .nav-subtitle, .nav-restricted-jp,
.boot-subtitle-jp, .identity-name-jp, .tech-label, .section-heading-kanji,
.archive-subsection-label, .protocol-label, .protocol-section::after,
.cert-number, .project-watermark {
  font-language-override: "JAN";
  /* Also use the jp-specific unicode range via Noto Serif JP */
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}

/* ── CURSOR ── */
#cursor-dot {
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  width:10px; height:10px; border-radius:50%;
  background: var(--sakura);
  box-shadow: 0 0 14px var(--sakura), 0 0 28px rgba(232,160,180,0.3);
  transition: width .12s, height .12s, background .12s;
}
body.cursor-hover #cursor-dot {
  width:22px; height:22px;
  background: transparent;
  border: 1.5px solid var(--sakura);
  box-shadow: 0 0 18px var(--sakura-glow);
}

/* ── BACKGROUND LAYERS ── */
/* Deep ink canvas */
.bg-ink {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 85% 5%,  rgba(200,150,74,0.055) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 5%  90%, rgba(232,160,180,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(139,10,24,0.12) 0%, transparent 70%),
    linear-gradient(175deg, #0f0609 0%, #0a0608 50%, #0c0508 100%);
  animation: bgBreath 18s ease-in-out infinite alternate;
}
@keyframes bgBreath {
  from { opacity:1; }
  to   { opacity:0.88; }
}

/* Ink wash brushstroke texture via SVG noise */
.bg-noise {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* Seigaiha (overlapping waves) dot grid */
.bg-grid {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.022;
  background-image:
    radial-gradient(circle, rgba(232,160,180,1) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Thin horizontal "torii gate" accent line */
.bg-horizon {
  position:fixed; top:38%; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,150,74,0.08) 25%, rgba(200,150,74,0.14) 50%, rgba(200,150,74,0.08) 75%, transparent 100%);
  z-index:1; pointer-events:none;
}

/* ── BOOT SCREEN ── */
.boot-screen {
  position:fixed; inset:0; z-index:100;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.boot-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.star {
  position:absolute; border-radius:50%;
  animation: twinkle var(--d,3s) ease-in-out infinite alternate;
  animation-delay: var(--del,0s);
}
@keyframes twinkle {
  0%   { opacity:.08; transform:scale(.8); }
  100% { opacity:.7;  transform:scale(1.1); }
}

/* Sakura petals on boot */
.boot-petal {
  position:absolute; pointer-events:none;
  width:8px; height:6px;
  background: var(--sakura-pale);
  border-radius: 50% 0 50% 0;
  opacity:0;
  animation: petalFall var(--pd,6s) ease-in var(--pdel,0s) infinite;
  filter: blur(0.5px);
}
@keyframes petalFall {
  0%   { opacity:0;   transform:translateY(-20px) rotate(0deg) scale(.6); }
  10%  { opacity:.55; }
  90%  { opacity:.3; }
  100% { opacity:0;   transform:translateY(105vh) rotate(720deg) translateX(40px) scale(.4); }
}

.boot-idle {
  display:flex; flex-direction:column; align-items:center; gap:2.4rem;
  cursor:none; z-index:1; text-align:center;
}

/* Torii gate SVG icon for boot */
.boot-torii {
  position:relative; width:110px; height:90px;
  display:flex; align-items:center; justify-content:center;
}
.boot-torii svg { transition: filter .5s, transform .5s; }
.boot-idle:hover .boot-torii svg {
  filter: drop-shadow(0 0 18px rgba(232,160,180,.6)) drop-shadow(0 0 6px rgba(200,150,74,.4));
  transform: scale(1.06);
}

.boot-torii::before {
  content:''; position:absolute; inset:-16px; border-radius:50%;
  border:1px dashed rgba(200,150,74,.14);
  animation:spin 20s linear infinite;
}
.boot-torii::after {
  content:''; position:absolute; inset:-28px; border-radius:50%;
  border:1px dashed rgba(232,160,180,.07);
  animation:spin 32s linear infinite reverse;
}
@keyframes spin { to{ transform:rotate(360deg); } }

.boot-text-container { display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.boot-title {
  font-size:.72rem; letter-spacing:.5em; color:#d09090;
  text-transform:uppercase; font-family:var(--f-mono);
  transition:color .4s;
}
.boot-idle:hover .boot-title { color:var(--paper-dim); }
.boot-subtitle-jp {
  font-size:1.4rem; letter-spacing:.18em; color:#a8808e;
  font-family:var(--f-display); transition:color .4s;
  font-weight:400;
}
.boot-idle:hover .boot-subtitle-jp { color:var(--sakura); }
.boot-click-hint {
  font-size:.65rem; font-family:var(--f-mono);
  color:#a8808e; letter-spacing:.22em; text-transform:uppercase;
  animation:blinkHint 1.3s step-end infinite;
}
@keyframes blinkHint { 0%,100%{opacity:1} 50%{opacity:0} }

/* Boot loading */
.boot-loading-content {
  width:28rem; z-index:1;
  display:flex; flex-direction:column; gap:.7rem;
}
.boot-loading-header { display:flex; justify-content:space-between; align-items:flex-end; }
.boot-loading-text {
  font-size:.7rem; font-family:"Shippori Mincho","Noto Serif JP","JetBrains Mono",monospace; color:var(--sakura);
  font-language-override:"JAN";
  animation:pulse 1.8s ease-in-out infinite;
}
.boot-progress-text { font-size:.7rem; font-family:var(--f-mono); color:#d09090; }
.boot-progress-bar {
  height:1px; background:#1e0d10; position:relative; overflow:visible;
}
.boot-progress-fill {
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--blood), var(--sakura), var(--gold));
  transition: width .1s linear;
  box-shadow: 0 0 12px var(--sakura), 0 0 24px rgba(232,160,180,.25);
}
.boot-log { display:flex; flex-direction:column; gap:.28rem; min-height:5rem; margin-top:.2rem; }
.boot-log-line {
  font-size:.63rem; font-family:"Shippori Mincho","Noto Serif JP","JetBrains Mono",monospace;
  font-language-override:"JAN"; color:#a8808e;
  opacity:0; animation:logIn .3s ease forwards;
  display:flex; align-items:center; gap:.5rem;
}
.boot-log-line.done { color:#e0a8a8; }
.boot-log-line.done::after { content:'[ 完了 ]'; color:var(--sakura); margin-left:auto; font-size:.6rem; font-family:"Shippori Mincho","Noto Serif JP",serif; font-language-override:"JAN"; }
.boot-log-line.active { color:var(--sakura-pale); }
.boot-dots { display:flex; gap:.5rem; margin-top:.2rem; }
.boot-dot {
  width:4px; height:4px; border-radius:50%; background:#1a0608;
  animation:bdot 1.5s ease-in-out infinite;
}
.boot-dot:nth-child(1){animation-delay:0s}
.boot-dot:nth-child(2){animation-delay:.15s}
.boot-dot:nth-child(3){animation-delay:.3s}
.boot-dot:nth-child(4){animation-delay:.45s}
.boot-dot:nth-child(5){animation-delay:.6s}
@keyframes bdot {
  0%,100%{background:#1a0608}
  50%{background:var(--sakura);box-shadow:0 0 8px var(--sakura)}
}
@keyframes logIn {
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── MAIN APP ── */
.main-app { min-height:100vh; position:relative; animation:fadeIn .7s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.hidden { display:none !important; }

.container {
  position:relative; z-index:2;
  display:flex; min-height:100vh;
  max-width:1380px; margin:0 auto; width:100%;
}

/* ── NAV RAIL ── */
.nav-rail {
  width:300px; min-height:100vh; flex-shrink:0;
  border-right:1px solid var(--border);
  padding:2.5rem 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:sticky; top:0; height:100vh;
  background: linear-gradient(180deg, rgba(12,2,6,0.92) 0%, rgba(8,2,4,0.96) 100%);
  backdrop-filter:blur(28px);
  box-shadow: 4px 0 40px rgba(139,10,24,0.12);
}

.nav-header { display:flex; align-items:center; gap:1rem; margin-bottom:3rem; }

/* Mon (family crest) badge */
.nav-mon {
  width:2.6rem; height:2.6rem;
  border:1px solid var(--border-gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(200,150,74,.08), transparent);
  position:relative;
  flex-shrink:0;
}
.nav-mon::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px dashed rgba(200,150,74,.12);
  animation:spin 25s linear infinite;
}
.nav-mon-inner {
  width:14px; height:14px;
  background:linear-gradient(135deg, var(--gold), var(--blood));
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:pulse 4s ease-in-out infinite;
}

.nav-title-container {}
.nav-title {
  font-size:.72rem; letter-spacing:.38em; color:#c098a8;
  text-transform:uppercase; font-family:var(--f-mono);
}
.nav-subtitle {
  font-size:.78rem; color:#a8808e; margin-top:.2rem;
  font-family:var(--f-display); letter-spacing:.1em;
}

.nav-links { display:flex; flex-direction:column; gap:.18rem; }

.nav-link {
  display:flex; align-items:center; gap:.85rem;
  background:none; border:none; color:#a8808e;
  font-size:1rem; font-family:var(--f-body); font-weight:500;
  padding:.82rem .5rem; cursor:none;
  transition:color .2s; text-align:left; width:100%;
  letter-spacing:.02em; position:relative; border-radius:4px;
}
.nav-index {
  font-family:var(--f-mono); font-size:.58rem; color:#b05060;
  transition:color .2s; flex-shrink:0; width:1rem;
  font-weight:400; letter-spacing:.04em;
}
.nav-link-kanji {
  font-family:var(--f-display); font-size:.82rem; color:#b05060;
  transition:color .2s; letter-spacing:.06em; margin-left:auto;
}
.nav-link:hover { color:var(--paper); }
.nav-link:hover .nav-index { color:var(--sakura); }
.nav-link:hover .nav-link-kanji { color:rgba(232,160,180,.45); }
.nav-link.active { color:var(--paper); }
.nav-link.active .nav-index { color:var(--sakura); }
.nav-link.active .nav-link-kanji { color:rgba(232,160,180,.6); }

/* Brush stroke active indicator */
.nav-link-stroke {
  width:16px; height:2px;
  background:linear-gradient(90deg,#1a0608,transparent);
  border-radius:1px;
  transition:all .4s cubic-bezier(.16,1,.3,1); flex-shrink:0;
}
.nav-link.active .nav-link-stroke {
  width:30px;
  background:linear-gradient(90deg,var(--sakura),var(--sakura-pale));
  box-shadow:0 0 10px var(--sakura);
}
.nav-link:hover .nav-link-stroke { background:linear-gradient(90deg,#5a2838,transparent); }

.nav-footer-divider {
  height:1px; margin:.8rem 0;
  background:linear-gradient(90deg,transparent,rgba(232,160,180,.12),transparent);
}
.nav-restricted {
  font-size:.6rem; color:#a8808e; line-height:2;
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
}
.nav-restricted-jp {
  font-size:.72rem; color:#c87080; font-family:"Shippori Mincho","Noto Serif JP",serif;
  font-language-override:"JAN";
  letter-spacing:.18em; margin-top:.3rem; display:block;
}
.nav-build-info {
  font-size:.58rem; font-family:"Shippori Mincho","Noto Serif JP","JetBrains Mono",monospace;
  font-language-override:"JAN"; color:#c87888; letter-spacing:.04em; margin-top:.6rem;
}
.nav-build-info span { color:var(--sakura); }
.nav-shortcuts {
  font-size:.54rem; font-family:var(--f-mono); color:#c87888;
  margin-top:.5rem; letter-spacing:.04em;
}
.nav-shortcuts kbd {
  background:#100408; border:1px solid #1a0608; border-radius:2px;
  padding:0 3px; font-family:var(--f-mono); font-size:.52rem; color:#a8808e;
}

/* ── MAIN CONTENT ── */
.main-content { flex:1; padding:3.5rem 4rem; overflow-y:auto; }

.view { display:none; }
.view.active {
  display:block;
  animation:viewIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes viewIn {
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.view.active > * {
  animation:childIn .55s cubic-bezier(.16,1,.3,1) both;
}
.view.active > *:nth-child(1){animation-delay:.04s}
.view.active > *:nth-child(2){animation-delay:.11s}
.view.active > *:nth-child(3){animation-delay:.18s}
.view.active > *:nth-child(4){animation-delay:.25s}
@keyframes childIn {
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── SECTION HEADING ── */
.section-heading { margin-bottom:2.5rem; }
.section-heading-line {
  display:flex; align-items:center; gap:.9rem; margin-bottom:.6rem;
}
/* Brush-stroke horizontal rule */
.heading-line {
  width:28px; height:2px;
  background:linear-gradient(90deg,var(--blood),var(--sakura));
  border-radius:1px;
  box-shadow:0 0 8px rgba(192,38,60,.4);
}
.section-heading-line p {
  font-size:.63rem; color:#d09090;
  font-family:var(--f-mono); letter-spacing:.24em; text-transform:uppercase;
}
.section-heading-kanji {
  font-family:var(--f-display); font-size:.9rem;
  color:rgba(232,160,180,.18); letter-spacing:.3em; margin-left:auto;
}
.section-heading h2 {
  font-family:var(--f-display);
  font-size:3.2rem; font-weight:400; color:var(--paper);
  letter-spacing:-.01em; line-height:1;
}

/* ── IDENTITY VIEW ── */
.identity-hero {
  display:flex; gap:2.5rem; align-items:flex-start;
  margin-bottom:3rem; padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}

.identity-avatar-container {
  display:flex; flex-direction:column; align-items:center; gap:1rem; flex-shrink:0;
}

.identity-avatar {
  width:140px; height:140px;
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  /* Octagonal clip — katamon (crest shape) */
  clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  background:rgba(232,160,180,.04);
}
.identity-avatar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,6,8,.7));
  z-index:2; pointer-events:none;
}
.avatar-img { width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.05) sepia(.08); }
.avatar-scan {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(232,160,180,.07) 50%, transparent);
  animation:scan 5s ease-in-out infinite;
}
@keyframes scan { 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }

.identity-status {
  display:flex; align-items:center; gap:.5rem;
  font-size:.63rem; color:#e0a8a8; font-family:var(--f-mono);
  letter-spacing:.08em; white-space:nowrap;
}
.status-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--sakura); box-shadow:0 0 8px var(--sakura);
  animation:pulse 2s ease-in-out infinite;
}

.identity-info { flex:1; }

.identity-name {
  font-family:var(--f-display);
  font-size:4.4rem; font-weight:400;
  color:var(--paper); letter-spacing:.02em; line-height:1;
  margin-bottom:.4rem; display:inline-block;
  position:relative;
}
/* Glitch in sakura/gold */
.identity-name::before, .identity-name::after {
  content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;
}
.identity-name::before {
  color: #ff2040; opacity:0; /* bright RGB-red channel */
  clip-path:polygon(0 15%,100% 15%,100% 45%,0 45%);
  animation:glitch1 7s infinite;
}
.identity-name::after {
  color: #e8a030; opacity:0; /* amber gold channel */
  clip-path:polygon(0 55%,100% 55%,100% 85%,0 85%);
  animation:glitch2 7s infinite;
}
@keyframes glitch1 {
  0%,82%,100%{opacity:0;transform:translateX(0)}
  84%{opacity:.7;transform:translateX(-6px)}
  86%{opacity:0;transform:translateX(0)}
  88%{opacity:.45;transform:translateX(5px)}
  90%{opacity:0}
}
@keyframes glitch2 {
  0%,79%,100%{opacity:0;transform:translateX(0)}
  81%{opacity:.6;transform:translateX(6px)}
  83%{opacity:0}
  85%{opacity:.4;transform:translateX(-4px)}
  87%{opacity:0}
}

.identity-name-jp {
  display:block; font-family:var(--f-display);
  font-size:1.1rem; font-weight:400; color:rgba(192,38,60,.45);
  letter-spacing:.4em; margin-bottom:1.2rem;
}

.identity-description {
  color:#c8a0b0; font-size:.98rem; line-height:1.9; margin-bottom:2rem;
  max-width:500px; padding-left:1.5rem; position:relative;
}
.identity-description::before {
  content:''; position:absolute; left:0; top:.3rem; bottom:.3rem;
  width:2px;
  background:linear-gradient(to bottom, var(--blood), transparent);
  border-radius:1px;
}

/* Skill cards */
.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.skill-card {
  border:1px solid var(--border); padding:1.2rem; border-radius:2px;
  background:rgba(10,6,8,.7); backdrop-filter:blur(8px);
  transition:all .35s ease; position:relative; overflow:hidden;
}
/* Gold corner accent */
.skill-card::before {
  content:''; position:absolute; top:0; left:0;
  width:18px; height:18px;
  border-top:1.5px solid rgba(200,150,74,.3);
  border-left:1.5px solid rgba(200,150,74,.3);
}
.skill-card::after {
  content:''; position:absolute; bottom:0; right:0;
  width:18px; height:18px;
  border-bottom:1.5px solid rgba(200,150,74,.3);
  border-right:1.5px solid rgba(200,150,74,.3);
}
.skill-card:hover {
  border-color:rgba(232,160,180,.3);
  transform:translateY(-3px) translateX(2px);
  box-shadow:0 14px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(232,160,180,.06);
  background:rgba(15,8,11,.85);
}
.skill-icon { color:var(--sakura); margin-bottom:.7rem; opacity:.75; display:block; }
.skill-label { font-size:.92rem; font-weight:600; color:var(--paper); margin-bottom:.3rem; }
.skill-sub { font-size:.7rem; color:#d09090; font-family:var(--f-mono); }

/* Tech stack */
.tech-stack { margin-bottom:2.5rem; }
.tech-label {
  font-size:.63rem; letter-spacing:.28em; text-transform:uppercase;
  color:#d09090; margin-bottom:.9rem;
  /* Kanji renders via Shippori Mincho (Japanese), latin via JetBrains Mono */
  font-family: "Shippori Mincho", "Noto Serif JP", "JetBrains Mono", monospace;
  font-language-override: "JAN";
  display:flex; align-items:center; gap:.65rem;
}
.tech-label::before { content:'刀'; color:var(--blood); font-size:.8rem; font-family:"Shippori Mincho","Noto Serif JP",serif; font-language-override:"JAN"; }

.tech-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.tech-list span {
  font-size:.7rem; font-family:var(--f-mono);
  border:1px solid #1a0608; border-radius:2px;
  padding:.3rem .72rem; color:#e0a8a8;
  background:rgba(0,0,0,.4); transition:all .22s; cursor:none;
}
.tech-list span:hover {
  border-color:var(--sakura); color:var(--sakura);
  background:rgba(232,160,180,.06);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(232,160,180,.08);
}

/* Education */
.edu-card {
  border:1px solid var(--border); border-radius:2px;
  padding:1.3rem 1.6rem; background:rgba(10,6,8,.7);
  backdrop-filter:blur(8px); display:flex; justify-content:space-between;
  align-items:center; position:relative; overflow:hidden; transition:all .3s;
}
.edu-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--blood), var(--sakura));
  box-shadow:0 0 10px rgba(192,38,60,.3);
}
.edu-card:hover { border-color:rgba(232,160,180,.25); }
.edu-degree { font-size:1rem; font-weight:600; color:var(--paper); margin-bottom:.3rem; }
.edu-school { font-size:.74rem; color:#d09090; font-family:var(--f-mono); }
.edu-right { text-align:right; }
.edu-year {
  font-size:1.9rem; font-weight:400; color:var(--sakura);
  font-family:var(--f-display); line-height:1;
  text-shadow:0 0 24px rgba(232,160,180,.2);
}

/* ── PROJECT CARDS ── */
.projects-list { display:flex; flex-direction:column; gap:1.4rem; margin-bottom:2.5rem; }

.project-card {
  border:1px solid var(--border); border-radius:2px; padding:1.7rem;
  background:rgba(10,6,8,.75); backdrop-filter:blur(8px);
  position:relative; overflow:hidden; transition:all .38s ease;
}
/* Vertical brush-stroke left border on hover */
.project-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--blood), var(--sakura), transparent);
  opacity:0; transition:opacity .35s;
}
/* Faint background mon watermark */
.project-watermark {
  position:absolute; top:.8rem; right:1.4rem;
  font-family:var(--f-display); font-size:5rem; font-weight:400;
  color:rgba(232,160,180,.025); line-height:1;
  pointer-events:none; user-select:none;
}
.project-card:hover {
  border-color:rgba(232,160,180,.22); transform:translateY(-4px);
  box-shadow:0 18px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(232,160,180,.05);
}
.project-card:hover::before { opacity:1; }

.project-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:.9rem;
}
.project-title { font-size:1.1rem; font-weight:600; color:var(--paper); }
.project-date { font-size:.68rem; color:#d09090; font-family:var(--f-mono); margin-top:.25rem; }
.project-status {
  font-size:.63rem; font-family:var(--f-mono);
  border:1px solid rgba(232,160,180,.25); color:var(--sakura);
  padding:.22rem .62rem; border-radius:2px; letter-spacing:.12em;
  background:rgba(232,160,180,.05); white-space:nowrap;
}
.project-status.s-deployed { border-color:rgba(200,150,74,.3); color:var(--gold); background:rgba(200,150,74,.05); }
.project-status.s-winner {
  border-color:rgba(192,38,60,.4); color:var(--crimson);
  background:rgba(139,26,42,.08);
  box-shadow:0 0 14px rgba(192,38,60,.12);
}
.project-desc { font-size:.91rem; color:#c8a0b0; line-height:1.78; margin-bottom:1rem; }
.project-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.project-tag {
  font-size:.67rem; font-family:var(--f-mono);
  background:rgba(0,0,0,.4); border:1px solid #1a0608;
  color:#d09090; padding:.18rem .6rem; border-radius:2px; transition:all .2s;
}
.project-card:hover .project-tag { border-color:#3a1a20; color:#c06070; }

/* Project footer */
.project-footer {
  display:flex; flex-direction:column; gap:.8rem;
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid #1a0c10;
}
.project-footer-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
}
.project-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.project-link-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.67rem; font-family:var(--f-mono);
  padding:.36rem .82rem; border-radius:2px;
  text-decoration:none; letter-spacing:.07em;
  transition:all .22s; border:1px solid; cursor:none;
}
.project-link-github { color:#c06070; border-color:#b05060; background:rgba(0,0,0,.3); }
.project-link-github:hover {
  color:var(--sakura); border-color:rgba(232,160,180,.35);
  background:rgba(232,160,180,.06); transform:translateY(-2px);
}
.project-link-demo { color:#c06070; border-color:#b05060; background:rgba(0,0,0,.3); }
.project-link-demo:hover {
  color:var(--gold); border-color:rgba(200,150,74,.35);
  background:rgba(200,150,74,.06); transform:translateY(-2px);
}

/* Gallery */
.gallery-toggle {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.67rem; font-family:var(--f-mono);
  color:#d09090; background:none;
  border:1px solid #1a0608; border-radius:2px;
  padding:.36rem .82rem; cursor:none;
  transition:all .22s; letter-spacing:.07em; white-space:nowrap;
}
.gallery-toggle:hover { color:#c8a0b0; border-color:#3a1a20; }
.gallery-toggle.active { color:var(--sakura); border-color:rgba(232,160,180,.28); background:rgba(232,160,180,.04); }
.gallery-toggle-chevron { transition:transform .25s ease; flex-shrink:0; }
.gallery-toggle.active .gallery-toggle-chevron { transform:rotate(180deg); }

.gallery-panel { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.gallery-panel.open { max-height:600px; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; padding-top:1rem; }
.gallery-item {
  border:1px solid #1a0608; border-radius:2px; overflow:hidden;
  cursor:none; transition:all .28s; position:relative; aspect-ratio:16/10;
  background:rgba(0,0,0,.4);
}
.gallery-item:hover { border-color:rgba(232,160,180,.28); transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.55); }
.gallery-item img { width:100%; height:100%; object-fit:cover; filter:brightness(.88) sepia(.06); transition:filter .3s; }
.gallery-item:hover img { filter:brightness(1) sepia(0); }
.gallery-caption {
  position:absolute; bottom:0; left:0; right:0; padding:.4rem .6rem;
  background:linear-gradient(to top, rgba(10,6,8,.92), transparent);
  font-size:.6rem; font-family:var(--f-mono); color:#c8a0b0; letter-spacing:.06em;
  opacity:0; transform:translateY(4px); transition:all .2s;
}
.gallery-item:hover .gallery-caption { opacity:1; transform:translateY(0); }
.gallery-empty { display:flex; align-items:center; justify-content:center; padding:2rem; color:#a8808e; }
.gallery-empty p { font-size:.82rem; font-family:var(--f-mono); }

/* ── ARCHIVE ── */
.archive-subsection { margin-bottom:2.8rem; }
.archive-subsection-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.3rem; }
.archive-subsection-label {
  font-family:"Shippori Mincho","Noto Serif JP","JetBrains Mono",monospace;
  font-language-override:"JAN"; font-size:.63rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sakura);
  padding:.2rem .65rem; border:1px solid rgba(232,160,180,.22);
  border-radius:2px; background:rgba(232,160,180,.04);
}

/* Achievement cards */
.achievements-list { display:flex; flex-direction:column; gap:1rem; }
.achievement-card {
  display:flex; gap:1.3rem; align-items:flex-start;
  background:rgba(139,26,42,.06); border:1px solid rgba(192,38,60,.2);
  border-radius:2px; padding:1.4rem 1.6rem;
  position:relative; overflow:hidden; transition:all .3s;
}
.achievement-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--crimson), var(--sakura));
  box-shadow:0 0 10px rgba(192,38,60,.3);
}
.achievement-card:hover { border-color:rgba(192,38,60,.35); transform:translateY(-2px); }
.achievement-badge { font-size:2.2rem; line-height:1; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(200,150,74,.4)); }
.achievement-content { flex:1; }
.achievement-header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.3rem; }
.achievement-title { font-size:1.05rem; font-weight:700; color:#fde68a; letter-spacing:.01em; }
.achievement-date { font-family:var(--f-mono); font-size:.63rem; color:var(--paper-dim); white-space:nowrap; }
.achievement-meta { font-family:var(--f-mono); font-size:.64rem; color:#e0a8a8; margin-bottom:.6rem; letter-spacing:.05em; }
.achievement-team { color:var(--sakura); }
.achievement-desc { font-size:.84rem; color:#c8a0b0; line-height:1.65; }

/* Cert cards */
.certs-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cert-card {
  border:1px solid var(--border); border-radius:2px; padding:1.5rem;
  background:rgba(10,6,8,.7); backdrop-filter:blur(8px);
  position:relative; overflow:hidden; transition:all .35s;
}
.cert-card::before, .cert-card::after {
  content:''; position:absolute;
  width:14px; height:14px;
  transition:border-color .3s;
}
.cert-card::before { top:-1px; right:-1px; border-top:1.5px solid transparent; border-right:1.5px solid transparent; }
.cert-card::after  { bottom:-1px; left:-1px; border-bottom:1.5px solid transparent; border-left:1.5px solid transparent; }
.cert-card:hover { border-color:rgba(200,150,74,.3); transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.55); }
.cert-card:hover::before, .cert-card:hover::after { border-color:var(--gold); }
.cert-issuer { font-size:.63rem; font-family:var(--f-mono); color:var(--sakura); letter-spacing:.14em; margin-bottom:.65rem; opacity:.75; }
.cert-name { font-size:.98rem; font-weight:600; color:var(--paper); line-height:1.4; }
.cert-number {
  position:absolute; bottom:1rem; right:1.2rem;
  font-family:var(--f-display); font-size:2.4rem; font-weight:400;
  color:rgba(232,160,180,.04); line-height:1; pointer-events:none;
  letter-spacing:.1em;
}

/* ── EXPERIENCE ── */
.exp-list { display:flex; flex-direction:column; gap:1.1rem; }
.exp-card {
  border:1px solid var(--border); border-radius:2px; padding:1.5rem 1.7rem;
  background:rgba(10,6,8,.7); backdrop-filter:blur(8px);
  position:relative; overflow:hidden; transition:all .3s;
}
.exp-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--sakura), transparent);
  opacity:0; transition:opacity .3s;
}
.exp-card:hover { border-color:rgba(232,160,180,.22); transform:translateX(4px); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.exp-card:hover::before { opacity:1; }
.exp-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; }
.exp-role { font-size:1rem; font-weight:600; color:var(--paper); margin-bottom:.28rem; }
.exp-org { font-size:.73rem; color:#d09090; font-family:var(--f-mono); }
.exp-period { font-size:.68rem; color:#d09090; font-family:var(--f-mono); text-align:right; white-space:nowrap; flex-shrink:0; margin-left:1rem; padding-top:.1rem; }
.exp-skills { font-size:.9rem; color:#c8a0b0; line-height:1.7; border-top:1px solid #1a0c10; padding-top:.75rem; }

/* ── NETWORK VIEW ── */
.social-links { display:flex; flex-direction:column; gap:.65rem; margin-bottom:2.5rem; }
.social-link {
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--border); border-radius:2px; padding:1.2rem 1.5rem;
  text-decoration:none; color:var(--paper); background:rgba(10,6,8,.7);
  backdrop-filter:blur(8px); position:relative; overflow:hidden;
  transition:all .3s; cursor:none;
}
.social-link::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--sakura-deep), var(--sakura));
  opacity:0; transition:opacity .3s;
}
.social-link:hover { border-color:rgba(232,160,180,.28); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.45); }
.social-link:hover::before { opacity:1; }
.social-link-left { display:flex; align-items:center; gap:.9rem; }
.social-icon { color:#d09090; transition:color .3s; }
.social-link:hover .social-icon { color:var(--sakura); }
.social-label { font-size:.96rem; font-weight:600; }
.social-link-right { display:flex; align-items:center; gap:.6rem; }
.social-value { font-size:.74rem; color:#d09090; font-family:var(--f-mono); }
.social-status-dot { width:5px; height:5px; border-radius:50%; background:var(--sakura); box-shadow:0 0 6px var(--sakura); }
.social-arrow { color:#c87888; transition:color .3s; }
.social-link:hover .social-arrow { color:var(--sakura); }

.social-link-wrapper { display:flex; align-items:stretch; gap:.5rem; }
.social-link-wrapper .social-link { flex:1; }
.copy-email-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.67rem; font-family:var(--f-mono);
  padding:0 1rem; border-radius:2px;
  background:rgba(10,6,8,.7); border:1px solid var(--border);
  color:#e0a8a8; cursor:none; white-space:nowrap;
  transition:all .22s; letter-spacing:.06em; backdrop-filter:blur(8px); flex-shrink:0;
}
.copy-email-btn:hover { color:var(--sakura); border-color:rgba(232,160,180,.3); background:rgba(232,160,180,.05); transform:translateY(-2px); }

/* Scroll section */
.protocol-section {
  border:1px solid var(--border); border-radius:2px; padding:1.8rem;
  background:rgba(10,6,8,.5); position:relative; overflow:hidden;
}
/* Decorative kanji watermark */
.protocol-section::after {
  content:'武士道'; position:absolute; bottom:-.6rem; right:1.5rem;
  font-family:var(--f-display); font-size:5rem; font-weight:400;
  color:rgba(232,160,180,.025); pointer-events:none; letter-spacing:.3em; line-height:1;
}
.protocol-label {
  font-size:.63rem; letter-spacing:.28em; text-transform:uppercase;
  color:#d09090; font-family:"Shippori Mincho","Noto Serif JP","JetBrains Mono",monospace;
  font-language-override:"JAN"; margin-bottom:1rem;
  display:flex; align-items:center; gap:.65rem;
}
.protocol-label::before { content:'桜'; color:var(--sakura); font-family:"Shippori Mincho","Noto Serif JP",serif; font-language-override:"JAN"; font-size:.9rem; }
.protocol-text { font-size:.95rem; color:#c8a0b0; line-height:1.88; }
.protocol-status {
  font-size:.7rem; font-family:var(--f-mono); color:var(--sakura);
  display:inline-flex; align-items:center; gap:.5rem;
}
.protocol-status::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--sakura); box-shadow:0 0 6px var(--sakura);
  animation:pulse 2s ease-in-out infinite; display:inline-block;
}

/* ── LIGHTBOX ── */
#lightbox-overlay {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
#lightbox-overlay.visible { opacity:1; pointer-events:all; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(10,6,8,.93); backdrop-filter:blur(12px); cursor:none; }
.lightbox-box {
  position:relative; z-index:1;
  max-width:min(90vw,960px); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  animation:lightboxIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes lightboxIn { from{transform:scale(.93);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-close {
  position:absolute; top:-2.5rem; right:0;
  background:none; border:1px solid #1a0608; border-radius:2px;
  color:#e0a8a8; padding:.3rem .4rem; cursor:none;
  transition:all .2s; display:flex; align-items:center;
}
.lightbox-close:hover { color:var(--sakura); border-color:rgba(232,160,180,.35); }
.lightbox-img { max-width:100%; max-height:80vh; object-fit:contain; border-radius:2px; border:1px solid #1a0608; box-shadow:0 32px 80px rgba(0,0,0,.8); }
.lightbox-caption { font-size:.68rem; font-family:var(--f-mono); color:#d09090; letter-spacing:.12em; }

/* ── NAME CURSOR ── */
.name-cursor {
  display:inline-block; color:var(--sakura); font-weight:300;
  animation:blinkHint .9s step-end infinite;
  font-family:var(--f-mono); font-style:normal; margin-left:2px;
}

/* ── SCROLL REVEAL ── */
.reveal-target { opacity:0; transform:translateY(16px); transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1); }
.reveal-target.revealed { opacity:1; transform:translateY(0); }

/* ── BACK TO TOP ── */
#back-to-top {
  position:fixed; bottom:2rem; right:2rem;
  width:40px; height:40px;
  background:rgba(10,6,8,.9); border:1px solid var(--border);
  border-radius:2px; color:#e0a8a8;
  display:flex; align-items:center; justify-content:center;
  cursor:none; z-index:500;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s,transform .3s,border-color .2s,color .2s;
  backdrop-filter:blur(12px);
}
#back-to-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
#back-to-top:hover { color:var(--sakura); border-color:rgba(232,160,180,.35); }

/* ── MOBILE ── */
#mobile-topbar {
  display:none; position:fixed; top:0; left:0; right:0; height:52px;
  background:rgba(10,6,8,.95); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border); padding:0 1.25rem;
  align-items:center; justify-content:space-between; z-index:200;
}
.mobile-topbar-title {
  font-size:.68rem; font-family:var(--f-mono);
  letter-spacing:.3em; color:#d09090; text-transform:uppercase;
}
.mobile-topbar-title span { color:var(--sakura); }
#mobile-menu-btn {
  background:none; border:1px solid var(--border); color:#d09090;
  padding:.35rem .4rem; border-radius:2px; cursor:auto;
  display:flex; align-items:center; transition:all .2s;
}
#mobile-menu-btn:hover { color:var(--sakura); border-color:rgba(232,160,180,.3); }

@media (max-width:768px) {
  #mobile-topbar { display:flex; }
  body { cursor:auto; padding-top:52px; }
  #cursor-dot { display:none; }
  a,button,.nav-link,.project-link-btn,.gallery-toggle,
  .social-link,.cert-card,.exp-card,.skill-card,
  .gallery-item,.lightbox-close,.copy-email-btn,#back-to-top { cursor:auto; }
  .container { flex-direction:column; }
  .nav-rail {
    width:100%; min-height:auto; height:auto;
    position:fixed; top:52px; left:0; right:0;
    border-right:none; border-bottom:1px solid var(--border);
    padding:1rem 1.25rem 1.25rem; z-index:150;
    transform:translateY(-110%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    max-height:calc(100vh - 52px); overflow-y:auto;
  }
  .nav-rail.mobile-open { transform:translateY(0); }
  .nav-header { margin-bottom:1rem; }
  .nav-links { flex-direction:column; gap:0; }
  .nav-link { font-size:1rem; padding:.7rem .5rem; }
  .nav-link-kanji { display:none; }
  .nav-footer { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
  .nav-shortcuts { display:none; }
  .main-content { padding:1.75rem 1.25rem; }
  .identity-hero { flex-direction:column; gap:1.5rem; }
  .identity-avatar { width:110px; height:110px; }
  .identity-name { font-size:3rem; }
  .skills-grid,.certs-grid { grid-template-columns:1fr; }
  .exp-header { flex-direction:column; gap:.4rem; }
  .exp-period { text-align:left; margin-left:0; }
  .edu-card { flex-direction:column; gap:.5rem; }
  .edu-right { text-align:left; }
  .social-link-wrapper { flex-direction:column; }
  .copy-email-btn { padding:.7rem 1rem; justify-content:center; }
  #back-to-top { cursor:auto; }
}


/* ================================================================
   PROJECTS — SCROLL GALLERY  (on-brand with Samurai × Sakura)
   ================================================================ */

/* ── SCROLL GALLERY WRAPPER ── */
.proj-gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── SINGLE PROJECT ROW ── */
.proj-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1.6rem;
  transition: border-color .4s, box-shadow .4s;
  background: rgba(10,6,8,.75);
  backdrop-filter: blur(10px);
}
.proj-row:hover {
  border-color: rgba(232,160,180,.22);
  box-shadow: 0 20px 56px rgba(0,0,0,.65), 0 0 0 1px rgba(232,160,180,.05);
}

/* Flip layout on even rows for visual rhythm */
.proj-row.flip {
  grid-template-columns: 1fr 1fr;
}
.proj-row.flip .proj-row-visual { order: 2; }
.proj-row.flip .proj-row-body   { order: 1; }

/* ── Left/Right split — VISUAL side ── */
.proj-row-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: rgba(0,0,0,.5);
}

/* Image displayed as background */
.proj-row-visual-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.65) sepia(.12);
  transition: filter .6s ease, transform .6s ease;
}
.proj-row:hover .proj-row-visual-img {
  filter: brightness(.82) sepia(.04);
  transform: scale(1.04);
}

/* Ink-wash gradient overlay on visual */
.proj-row-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 50%, rgba(10,6,8,.88)),
    linear-gradient(to top, rgba(10,6,8,.5) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
  transition: opacity .4s;
}
.proj-row.flip .proj-row-visual::after {
  background:
    linear-gradient(to left, transparent 50%, rgba(10,6,8,.88)),
    linear-gradient(to top, rgba(10,6,8,.5) 0%, transparent 50%);
}

/* No-image fallback: ink canvas with kanji watermark */
.proj-row-visual-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(139,10,24,.14) 0%, transparent 70%),
    linear-gradient(135deg, rgba(10,6,8,1) 0%, rgba(18,10,13,1) 100%);
  z-index: 0;
}
.proj-row-visual-kanji {
  font-family: var(--f-display);
  font-size: 7rem;
  font-weight: 400;
  color: rgba(232,160,180,.04);
  letter-spacing: .2em;
  user-select: none;
  line-height: 1;
  transition: color .5s;
}
.proj-row:hover .proj-row-visual-kanji {
  color: rgba(232,160,180,.07);
}

/* Screenshot mini-grid overlay (bottom of visual) */
.proj-row-thumbs {
  position: absolute;
  bottom: .9rem;
  left: .9rem;
  right: .9rem;
  display: flex;
  gap: .45rem;
  z-index: 2;
}
.proj-row-thumb {
  flex: 1;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid rgba(232,160,180,.15);
  border-radius: 2px;
  background: rgba(0,0,0,.4);
  cursor: none;
  max-width: 90px;
  transition: border-color .2s, transform .2s;
  padding: 0;
}
.proj-row-thumb:hover {
  border-color: rgba(232,160,180,.5);
  transform: translateY(-2px) scale(1.04);
}
.proj-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.75);
  transition: filter .2s;
}
.proj-row-thumb:hover img { filter: brightness(1); }

/* Count badge when more than visible thumbs */
.proj-thumb-more {
  flex-shrink: 0;
  width: 48px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232,160,180,.15);
  border-radius: 2px;
  background: rgba(10,6,8,.8);
  font-family: var(--f-mono);
  font-size: .52rem;
  color: rgba(232,160,180,.45);
  letter-spacing: .08em;
  cursor: none;
  transition: all .2s;
}
.proj-thumb-more:hover {
  border-color: rgba(232,160,180,.4);
  color: var(--sakura);
}

/* ── Right/Left split — BODY side ── */
.proj-row-body {
  padding: 2rem 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* Gold corner accent on body */
.proj-row-body::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  border-top: 1.5px solid rgba(200,150,74,.25);
  border-right: 1.5px solid rgba(200,150,74,.25);
  transition: border-color .4s;
}
.proj-row:hover .proj-row-body::before {
  border-color: rgba(200,150,74,.55);
}
.proj-row.flip .proj-row-body::before {
  top: 0; left: 0; right: auto;
  border-left: 1.5px solid rgba(200,150,74,.25);
  border-right: none;
}
.proj-row.flip:hover .proj-row-body::before {
  border-left-color: rgba(200,150,74,.55);
}

/* Eyebrow */
.proj-row-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  color: rgba(232,160,180,.3);
}
.proj-row-idx {
  font-size: .62rem;
  color: rgba(232,160,180,.5);
}
.proj-row-sep { opacity: .35; font-size: .7rem; }
.proj-row-badge {
  padding: .12rem .45rem;
  border: 1px solid rgba(232,160,180,.22);
  border-radius: 2px;
  color: var(--sakura);
  background: rgba(232,160,180,.04);
  letter-spacing: .1em;
  font-size: .54rem;
}
.proj-row-badge.s-winner {
  border-color: rgba(192,38,60,.4);
  color: var(--crimson);
  background: rgba(139,26,42,.1);
  box-shadow: 0 0 10px rgba(192,38,60,.15);
}
.proj-row-badge.s-deployed {
  border-color: rgba(200,150,74,.35);
  color: var(--gold);
  background: rgba(200,150,74,.06);
}
.proj-row-date {
  color: rgba(200,150,74,.45);
  margin-left: auto;
}

/* Title */
.proj-row-title {
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.15;
  margin-bottom: .3rem;
  letter-spacing: .01em;
  transition: color .3s;
}
.proj-row:hover .proj-row-title {
  color: #fff;
}

/* Subtitle */
.proj-row-subtitle {
  font-family: var(--f-mono);
  font-size: .64rem;
  color: rgba(200,150,74,.6);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* Description */
.proj-row-desc {
  font-size: .88rem;
  color: #c0a0ae;
  line-height: 1.82;
  margin-bottom: 1.2rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(232,160,180,.18);
  position: relative;
}
.proj-row-desc::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 1.8rem;
  background: var(--crimson);
  box-shadow: 0 0 8px rgba(192,38,60,.4);
}

/* Tags */
.proj-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.4rem;
}
.proj-row-tag {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  padding: .22rem .6rem;
  border: 1px solid rgba(232,160,180,.1);
  border-radius: 2px;
  color: rgba(232,160,180,.4);
  background: rgba(232,160,180,.022);
  transition: all .2s;
}
.proj-row:hover .proj-row-tag {
  border-color: rgba(232,160,180,.18);
  color: rgba(232,160,180,.6);
}

/* Action buttons */
.proj-row-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.proj-row-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  padding: .46rem 1.05rem;
  border: 1px solid;
  border-radius: 2px;
  text-decoration: none;
  cursor: none;
  transition: all .25s;
  background: none;
  position: relative;
  overflow: hidden;
}
.proj-row-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s;
}
.proj-row-btn:hover::before { opacity: .06; }
.proj-row-btn-gh {
  color: var(--sakura);
  border-color: rgba(232,160,180,.28);
}
.proj-row-btn-gh:hover {
  border-color: rgba(232,160,180,.6);
  box-shadow: 0 0 16px rgba(232,160,180,.12), 0 4px 14px rgba(0,0,0,.4);
  transform: translateY(-2px);
}
.proj-row-btn-demo {
  color: var(--gold);
  border-color: rgba(200,150,74,.3);
}
.proj-row-btn-demo:hover {
  border-color: rgba(200,150,74,.6);
  box-shadow: 0 0 16px rgba(200,150,74,.14), 0 4px 14px rgba(0,0,0,.4);
  transform: translateY(-2px);
}

/* Decorative brush-stroke left border on hover (full row height) */
.proj-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--blood), var(--sakura), transparent);
  opacity: 0;
  transition: opacity .4s;
  z-index: 3;
}
.proj-row:hover::before { opacity: 1; }

/* ── PROJECT COUNT STRIP ── */
.proj-count-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: rgba(232,160,180,.25);
}
.proj-count-strip-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(232,160,180,.1), transparent);
}
.proj-count-num {
  color: rgba(200,150,74,.4);
  font-size: .7rem;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .proj-row,
  .proj-row.flip {
    grid-template-columns: 1fr;
  }
  .proj-row.flip .proj-row-visual { order: 1; }
  .proj-row.flip .proj-row-body   { order: 2; }
  .proj-row-visual { min-height: 200px; }
  .proj-row-visual::after {
    background: linear-gradient(to top, rgba(10,6,8,.9) 0%, transparent 60%) !important;
  }
  .proj-row-body { padding: 1.5rem 1.2rem; }
  .proj-row-title { font-size: 1.3rem; }
  .proj-row-desc { font-size: .84rem; }
  .proj-row-thumbs { display: none; }
  .proj-row-btn { cursor: auto; }
  .proj-row-thumb { cursor: auto; }
}