/* ============================================================
   DESIGN TOKENS
   Palette: paper white / sumi ink / hanko red
   Type: Shippori Mincho (display, Japanese serif) +
         Sedgwick Ave Display (brush accent, used sparingly) +
         Inter (body / UI)
   ============================================================ */
:root{
  --white:   #FFFFFF;
  --paper:   #F7F4EE;
  --ink:     #111111;
  --ink-70:  rgba(17,17,17,.7);
  --ink-40:  rgba(17,17,17,.4);
  --ink-12:  rgba(17,17,17,.12);
  --red:     #C81034;
  --red-deep:#8C0A24;
  --gray:    #6E6B66;

  --display: 'Shippori Mincho', serif;
  --brush:   'Sedgwick Ave Display', cursive;  /* FIX #4 */
  --body:    'Inter', sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:4px;
}

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--full{ max-width:none; }

.eyebrow{
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--red);
}

/* ============================================================
   HANKO SEAL — signature mark, reused as logo + section markers
   ============================================================ */
.hanko{
  width:40px; height:40px;
  border:1.5px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--brush);
  color:var(--red);
  font-size:20px;
  flex-shrink:0;
  transition:transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.hanko.filled{ background:var(--red); color:var(--white); }

/* kanji numerals used as project index markers — tie the
   structure to the theme instead of decorating with 01/02/03 */
.kanji-num{ font-family:var(--brush); color:var(--red); font-size:15px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--ink-12); }

.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand span{ font-family:var(--display); font-size:15px; letter-spacing:.05em; }

.nav-links{ display:flex; align-items:center; gap:44px; }
.nav-links a{
  position:relative;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70);
  padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--red); transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-toggle{ display:none; }

/* progress bar — ink stroke that grows as you scroll */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--red); z-index:101;
  transition:width .1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  padding:140px var(--gutter) 80px;
  gap:40px;
  overflow:hidden;
}
.hero-copy{ position:relative; z-index:2; }
.hero-copy .eyebrow{ display:block; margin-bottom:28px; }
.hero-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(48px, 8vw, 108px);
  line-height:.98;
  letter-spacing:-.01em;
}
.hero-title em{
  font-style:normal;
  font-family:var(--brush);
  color:var(--red);
  display:block;
  font-size:1.05em;
}
.hero-sub{
  margin-top:28px;
  max-width:420px;
  color:var(--ink-70);
  font-size:17px;
}
.hero-scroll{
  margin-top:56px;
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray);
}
.hero-scroll .line{ width:52px; height:1px; background:var(--ink-40); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:''; position:absolute; inset:0; background:var(--red);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }

.hero-stage{
  position:relative; height:640px;
  display:flex; align-items:center; justify-content:center;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-stage-caption{
  position:absolute; bottom:0; right:0;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray);
}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ position:relative; padding:100px 0; } /* Fix #9: normalized from 140px */
section.alt{ background:var(--paper); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:72px; flex-wrap:wrap;
}
.section-title{
  font-family:var(--display);
  font-size:clamp(34px, 4.4vw, 56px);
  font-weight:700;
  line-height:1.05;
  margin-top:14px;
}
.section-note{ max-width:320px; color:var(--gray); font-size:14px; }

/* ink-slash divider — a katana-cut line between sections */
.slash-divider{
  width:100%; height:64px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.slash-divider svg{ width:60%; height:2px; }
.slash-divider path{ stroke:var(--ink-12); stroke-width:2; fill:none; }

/* ============================================================
   PROJECTS
   ============================================================ */
.project-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;
  background:var(--ink-12);
  border:1px solid var(--ink-12);
}
.project-card{
  position:relative;
  background:var(--white);
  padding:48px;
  min-height:360px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  cursor:pointer;
}
.project-card::before{
  content:''; position:absolute; inset:0;
  background:var(--ink); opacity:0;
  transition:opacity .5s var(--ease);
}
.project-card:hover::before{ opacity:.03; }
.project-card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.project-card-visual{
  margin-top:32px; height:180px; border-radius:2px;
  background-image:
    repeating-linear-gradient(135deg, var(--ink-12) 0 1px, transparent 1px 14px);
  background-color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border:1px dashed var(--ink-12);
  overflow:hidden;
}
.project-card-visual.has-img{
  border-style:solid; padding:0;
}
.project-card-visual.has-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.project-card:hover .project-card-visual.has-img img{ transform:scale(1.04); }
.project-card-title{
  font-family:var(--display); font-size:26px; margin-top:24px; font-weight:700;
}
.project-card-desc{ margin-top:10px; color:var(--gray); font-size:14px; max-width:38ch; }
.project-card-tags{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.project-card-tags span{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red); padding:5px 10px;
}
.project-card-arrow{
  position:absolute; bottom:32px; right:32px;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--ink-12);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.project-card:hover .project-card-arrow{ transform:translate(4px,-4px); background:var(--red); border-color:var(--red); }
.project-card:hover .project-card-arrow svg{ stroke:var(--white); }
.project-card-arrow svg{ stroke:var(--ink); transition:stroke .3s var(--ease); }

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

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start;
}
.about-portrait{
  aspect-ratio:3/4;
  background:var(--paper);
  border:1px dashed var(--ink-12);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  position:relative;
}
.about-portrait .hanko{ position:absolute; bottom:16px; right:16px; }
.about-lede{
  font-family:var(--display); font-size:clamp(22px,2.6vw,30px); line-height:1.5;
  margin-bottom:48px;
}
.about-lede .red{ color:var(--red); }

.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.about-block h4{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin-bottom:18px;
}
.timeline-item{ padding:14px 0; border-top:1px solid var(--ink-12); }
.timeline-item:last-child{ border-bottom:1px solid var(--ink-12); }
.timeline-item .role{ font-weight:600; font-size:14px; }
.timeline-item .meta{ font-size:12px; color:var(--gray); margin-top:3px; }

.about-photos{ margin-top:80px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.about-photos .ph{
  aspect-ratio:1; background:var(--paper); border:1px dashed var(--ink-12);
  display:flex; align-items:center; justify-content:center; color:var(--gray);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}

@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-cols{ grid-template-columns:1fr; }
  .about-photos{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   SKILLS / EXTRA
   ============================================================ */
.skills-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.skill-card{
  background:var(--white); border:1px solid var(--ink-12);
  aspect-ratio:4/3; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:22px;
}
.skill-card .bg{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, var(--ink-12) 0 1px, transparent 1px 16px);
  background-color:var(--paper);
}
.skill-card .label{
  position:relative; z-index:1;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:var(--white); padding:6px 10px; border:1px solid var(--ink-12);
}
.skill-card .tag{
  position:absolute; top:18px; left:18px; z-index:1;
  font-family:var(--brush); color:var(--red); font-size:22px;
}
@media (max-width:860px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .skills-grid{ grid-template-columns:1fr; } }

/* ============================================================
   RESUME
   ============================================================ */
.resume-panel{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:32px;
  border:1px solid var(--ink-12); padding:56px var(--gutter);
}
.resume-panel .section-title{ margin-top:6px; }
.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--white);
  padding:16px 30px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ background:var(--red); border-color:var(--red); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding:60px var(--gutter) 40px; border-top:1px solid var(--ink-12); }
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-row .foot-note{ font-size:12px; color:var(--gray); letter-spacing:.05em; }
.footer-links{ display:flex; gap:28px; }
.footer-links a{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70); }
.footer-links a:hover{ color:var(--red); }
.footer-social{ display:inline-flex; align-items:center; gap:7px; }
.footer-social svg{ flex-shrink:0; }

/* ============================================================
   PROJECT DETAIL PAGES
   ============================================================ */
.detail-hero{
  padding:160px var(--gutter) 60px;
  border-bottom:1px solid var(--ink-12);
}
.back-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray);
}
.back-link:hover{ color:var(--red); }

/* Floating back-link, mirrors the pill-nav's position on the opposite
   (left) side. Fixed/out-of-flow so it never crowds the eyebrow/title
   below it. Hides while actively scrolling, reappears once scroll
   settles (or at the very top) — see js/main.js. Only the top-of-page
   instance uses this; the one in .detail-next stays a normal inline
   link (.back-link alone). */
.back-link-float{
  position:fixed; top:20px; left:20px; z-index:100;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white);
  border:1px solid var(--ink-12);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border-radius:999px;
  padding:12px 18px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-70);
  transition:opacity .3s var(--ease), transform .3s var(--ease), color .25s var(--ease);
}
.back-link-float:hover{ color:var(--red); }
.back-link-float.is-hidden{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.detail-title{ font-family:var(--display); font-size:clamp(38px,6vw,72px); font-weight:700; max-width:16ch; }
.detail-meta{ display:flex; gap:48px; margin-top:44px; flex-wrap:wrap; }
.detail-meta div{ font-size:12px; }
.detail-meta .k{ letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:6px; }
.detail-meta .v{ color:var(--ink-70); }

/* Fix 1: detail-cover — full-bleed below the hero, no side margin */
.detail-cover{
  width:100%; margin:0; padding:0;
  background:var(--paper);
  display:block;
}
.detail-cover img{
  width:100%; height:auto; display:block;
}

/* Fix 1: detail-body — still used on cowboy.html text blocks */
.detail-body{ padding:100px var(--gutter); max-width:820px; margin-inline:auto; }
.detail-body h3{
  font-family:var(--display); font-size:26px; margin-top:64px; margin-bottom:18px;
}
.detail-body h3:first-child{ margin-top:0; }
.detail-body p{ color:var(--ink-70); font-size:16px; }

/* Fix 1: detail-shot — full-bleed, zero gap, continuous image scroll */
.detail-shot{
  display:block;
  width:100%; margin:0; padding:0;
  background:var(--paper);
  line-height:0;   /* collapses inline whitespace that would add a sliver gap */
}
.detail-shot img, .detail-shot video{
  width:100%; height:auto; display:block;
  margin:0; padding:0;
}
/* remove the old body+shot spacer rule */
.detail-body + .detail-shot{ margin-top:0; }

.detail-next{
  padding:80px var(--gutter) 120px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--ink-12); flex-wrap:wrap; gap:24px;
}

/* ============================================================
   REVEAL UTILITY (used by GSAP ScrollTrigger)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); }

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media (max-width: 780px){
  .about-portrait{ aspect-ratio:4/3; }
}

/* ============================================================
   LOADER — running-ninja intro + red stagger-wipe reveal
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:999;
  display:flex;
  --loader-color: var(--red); /* override per-page via inline <style> for
                                  project-colored stagger-wipes */
}

/* Fourteen full-height vertical strips filling the viewport. The wipe
   itself is now driven by GSAP (js/loader.js / js/page-wipe.js) via
   inline transform styles — no CSS transition needed here, GSAP
   animates scaleY directly every frame, which is far more reliable
   than a class-toggle + CSS transition for this kind of reveal. */
.curtain-strip{
  flex:1; height:100%;
  background:var(--loader-color);
  transform:scaleY(1);
  transform-origin:top;
}

/* subtle grid-line texture over the red strips, purely decorative */
.loader-grid{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 64px);
  transition:opacity .3s ease;
}
#loader.reveal .loader-grid{ opacity:0; }

/* Loader content (ninja, progress bar, label) sits above the strips,
   fades out just before the wipe fires */
.loader-content{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; pointer-events:none;
  transition:opacity .3s ease;
}
#loader.reveal .loader-content{ opacity:0; }

.loader-track{ width:180px; height:2px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.loader-track .fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--white); }
.loader-label{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.loader-runner{ width:92px; height:92px; }
.loader-runner canvas{ width:100%; height:100%; display:block; }
.run-leg-a, .run-leg-b, .run-arm-a, .run-arm-b{ transform-origin:50% 20%; }
@keyframes runA{ 0%,100%{ transform:rotate(28deg);} 50%{ transform:rotate(-30deg);} }
@keyframes runB{ 0%,100%{ transform:rotate(-30deg);} 50%{ transform:rotate(28deg);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.run-leg-a{ animation:runA .42s linear infinite; }
.run-leg-b{ animation:runB .42s linear infinite; }
.run-arm-a{ animation:runB .42s linear infinite; }
.run-arm-b{ animation:runA .42s linear infinite; }
body.loading{ overflow:hidden; height:100vh; }
@media (prefers-reduced-motion: reduce){
  .run-leg-a,.run-leg-b,.run-arm-a,.run-arm-b,.loader-runner{ animation:none; }
}
/* safety net: if JS never runs (blocked/offline), don't trap the visitor */
#loader{ animation: forceHideLoader 0s 6s forwards; }
@keyframes forceHideLoader{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* ============================================================
   HERO — cinematic pinned scroll stage
   ============================================================ */
.hero-pin-space{ height:340vh; position:relative; }
.hero{
  position:relative; height:100vh; min-height:100vh;
  padding-top:0;
}
.hero-copy{ transition:none; will-change:opacity; }
.hero-cine-caption{
  position:absolute; left:var(--gutter); bottom:96px; z-index:3;
  font-family:var(--display); font-size:clamp(20px,2.6vw,30px);
  max-width:440px; opacity:0; pointer-events:none;
}
.hero-cine-caption .tag{
  display:block; font-family:var(--body); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); margin-bottom:10px; font-weight:600;
}
.hero-progress{
  position:absolute; right:var(--gutter); bottom:96px; z-index:3;
  writing-mode:vertical-rl; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray); display:flex; align-items:center; gap:14px;
}
.hero-progress .bar{ width:2px; height:120px; background:var(--ink-12); position:relative; }
.hero-progress .bar i{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--red); }

/* ============================================================
   EXPERIENCE — horizontally-scrolling row of ninja-themed
   cards (education + roles), connected by dashed arrows, with
   a paper plane tracking progress across the row as the
   section pins and scrolls.
   ============================================================ */
.village-intro{ padding:80px var(--gutter) 60px; position:relative; z-index:3; } /* Fix #9 */

.exp-pin-space{ position:relative; }
.exp-viewport{
  position:relative;
  height:640px;
  overflow:hidden;
  display:flex; align-items:center;
}
.exp-track{
  display:flex; align-items:stretch; gap:0;
  padding-left:var(--gutter); padding-right:var(--gutter);
  will-change:transform;
}
.exp-card{
  flex:0 0 auto;
  width:420px; min-height:400px;
  background:var(--white);
  border:1px solid var(--ink-12);
  padding:40px 36px;
  display:flex; flex-direction:column;
  position:relative;
}
.exp-card::before{
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--red);
}
.exp-card-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px;
}
.exp-card-top .kanji-num{ font-size:22px; }
.exp-badge{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red); padding:5px 10px;
}
.exp-role{
  font-family:var(--display); font-size:24px; font-weight:700;
  line-height:1.25; margin-bottom:10px;
}
.exp-meta{
  font-size:12.5px; color:var(--gray); margin-bottom:24px;
  padding-bottom:20px; border-bottom:1px solid var(--ink-12);
}
.exp-bullets{ display:flex; flex-direction:column; gap:14px; }
.exp-bullets li{
  font-size:14px; line-height:1.6; color:var(--ink-70);
  padding-left:18px; position:relative;
}
.exp-bullets li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; background:var(--red);
}
.exp-arrow{
  flex:0 0 auto; align-self:center;
  display:flex; align-items:center; margin:0 -4px;
}

.exp-plane{
  position:absolute; top:60px; left:0; z-index:6;
  width:64px; height:32px;
  will-change:transform;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.exp-plane canvas{ width:100%; height:100%; display:block; }

.village-skills{
  position:relative; z-index:3;
  padding:20px var(--gutter) 120px;
  display:flex; flex-wrap:wrap; gap:12px;
}
.village-skills span{
  font-size:12px; letter-spacing:.06em; color:var(--ink-70);
  border:1px solid var(--ink-12); padding:9px 16px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.village-skills span:hover{
  border-color:var(--red); background:var(--paper);
}

@media (max-width: 860px){
  .exp-viewport{ height:auto; }
  .exp-card{ width:300px; min-height:360px; padding:28px 24px; }
  .exp-role{ font-size:20px; }
}

/* ============================================================
   LOCKED PROJECT CARD (in-progress project, not yet clickable)
   ============================================================ */
.project-card.locked{
  cursor:default;
  filter:grayscale(.55);
  opacity:.72;
}
.project-card.locked:hover::before{ opacity:0; }
.project-card.locked:hover .project-card-arrow{ transform:none; background:none; border-color:var(--ink-12); }
.locked-visual{
  color:var(--gray);
  position:relative;
}
.locked-visual img{ filter:grayscale(.3); opacity:.85; }
.locked-visual-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.35);
  color:var(--ink);
}
.project-card-lock-badge{
  position:absolute; top:32px; right:32px;
  display:flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--white);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px;
}
.tag-progress{
  background:var(--ink) !important; color:var(--white) !important;
  border-color:var(--ink) !important;
}

/* ============================================================
   PILL NAV — floating avatar pill, compact at page-top,
   expands into full nav links once the page is scrolled.
   FIX #1 — .pill-nav-inner is a <div> (no nested anchor).
   Avatar + name wrapped in .pill-home-link <a>.
   ============================================================ */
.pill-nav{
  /* Fix #1 (round 3): right:20px — independent of --gutter which is too large for a floating pill */
  position:fixed; top:20px; right:20px; left:auto; transform:none;
  z-index:100;
}
.pill-nav-inner{
  display:flex; align-items:center; gap:10px;
  background:var(--white);
  border:1px solid var(--ink-12);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border-radius:999px;
  padding:6px 14px 6px 6px;
  overflow:hidden;           /* CRITICAL: clips links inside the pill shape */
  white-space:nowrap;
  flex-wrap:nowrap;
  transition:padding .5s var(--ease), box-shadow .4s var(--ease);
}
/* Avatar + name link — clicking navigates home */
.pill-home-link{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; color:inherit;
  border-radius:999px;
  padding:0 4px 0 0;
}
.pill-avatar{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; flex-shrink:0; display:block;
  background:var(--paper);
}
.pill-name{
  font-weight:700; font-size:13px; letter-spacing:.03em;
  white-space:nowrap; color:var(--ink);
}
.pill-dots{
  color:var(--gray); font-size:13px; letter-spacing:1px;
  padding:0 4px; max-width:0; opacity:0; overflow:hidden;
  flex-shrink:0;
  transition:opacity .3s var(--ease), max-width .3s var(--ease), padding .3s var(--ease);
}
.pill-links{
  display:flex; align-items:center; gap:2px;
  max-width:320px; overflow:hidden; opacity:1;
  flex-shrink:0;
  transition:max-width .5s var(--ease), opacity .4s var(--ease);
  white-space:nowrap;
}
.pill-links a{
  font-size:12.5px; font-weight:600; color:var(--ink-70);
  padding:8px 12px; border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.pill-links a:hover{ background:var(--paper); color:var(--ink); }
.pill-links a.active{ color:var(--red); }

/* collapsed = scrolled past hero: shrink to avatar + name + dots */
/* Fix #3: padding-right increased so all three dots clear the rounded edge */
.pill-nav.collapsed .pill-nav-inner{ padding-right:14px; }
.pill-nav.collapsed .pill-dots{ opacity:1; max-width:40px; padding:0 6px; }
.pill-nav.collapsed .pill-links{ max-width:0; opacity:0; }

/* hovering (or focusing) a collapsed pill re-reveals the links */
.pill-nav.collapsed:hover .pill-dots,
.pill-nav.collapsed:focus-within .pill-dots{ opacity:0; max-width:0; padding:0; }
.pill-nav.collapsed:hover .pill-links,
.pill-nav.collapsed:focus-within .pill-links{ max-width:320px; opacity:1; }

@media (max-width:640px){
  .pill-name{ display:none; }
  .pill-links a{ padding:8px 9px; font-size:11.5px; }
}

/* ============================================================
   HERO — full-bleed, no-crop video with corner-positioned copy
   (rule-of-thirds), replacing the old two-column layout.
   ============================================================ */
.hero{ padding:0 !important; overflow:visible; }
.hero-stage{
  position:absolute; inset:0; z-index:1;
  height:auto;
}
/* Fix #1 — hero-tag-top-right removed from HTML; hide via CSS too */
.hero-tag-top-right{ display:none !important; }
.hero-tag-top-right .dot{ display:none; }

/* FIX #3 — hero text hierarchy: large two-line wordmark */
.hero-name-block{
  position:absolute; left:var(--gutter); top:40%; z-index:3;
  transform:translateY(-50%);
  max-width:480px;
}
.hero-greet{
  font-size:16px; font-weight:500; color:var(--ink-70);
  margin-bottom:10px; letter-spacing:.01em;
}
.hero-wordmark{
  display:flex; flex-direction:column; line-height:0.95;
}
.hero-wordmark-line1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(56px, 8vw, 100px);
  line-height:1;
  color:var(--ink);
  display:block;
  letter-spacing:-.02em;
}
.hero-wordmark-line2{
  font-family:var(--brush);
  font-size:clamp(52px, 7.5vw, 94px);
  line-height:1.05;
  color:var(--red);
  display:block;
}

.hero-cine-caption--early{ left:auto; right:var(--gutter); bottom:96px; text-align:right; }
/* Fix #4: pushed further down + max-width keeps clear of scroll indicator */
.hero-cine-caption--late{
  left:var(--gutter); right:calc(var(--gutter) + 80px); bottom:auto;
  top:66%; transform:translateY(-50%); text-align:left;
  max-width:380px;
}

@media (max-width:780px){
  .hero-tag-top-right{ top:96px; }
  .hero-name-block{ top:auto; bottom:220px; transform:none; left:var(--gutter); right:var(--gutter); max-width:none; }
  .hero-cine-caption--late{ top:auto; bottom:150px; transform:none; }
  .hero-progress{ display:none; }
}

/* ============================================================
   PROJECT CARD VISUAL — show full cover art, no awkward crop
   ============================================================ */
.project-card-visual.has-img{
  aspect-ratio:4/3; height:auto;
  background:var(--paper);
}
.project-card-visual.has-img img{
  object-fit:contain;
}

/* ============================================================
   ABOUT ME — storytelling intro, text left / polaroid right
   ============================================================ */
.about-me{ padding:70px 0 44px; }  /* Fix #9: reduced top + bottom */
.about-me-grid{
  display:grid; grid-template-columns:1fr 300px;
  align-items:start; gap:48px;
  padding-inline:var(--gutter);
}
.about-me-kicker{ margin-bottom:20px; }
.about-me-story{
  font-family:var(--display); font-size:clamp(16px, 1.85vw, 21px);
  line-height:1.55; color:var(--ink); max-width:600px;
}
/* accent spans: Sedgwick Ave Display, red — used in about-me story */
.story-accent{
  font-family:var(--brush); color:var(--red); font-style:normal;
}
/* italicised questions inside about-me-story */
.about-me-story em{
  font-style:italic; color:var(--ink-70);
}
/* brush-accent-html: inline HTML accent for word-reveal heading (fix #8) */
.brush-accent-html{
  font-family:var(--brush); color:var(--red);
}
.about-me-story p + p{ margin-top:18px; }

.polaroid{
  position:relative;
  justify-self:end;
  width:300px;
  transform:rotate(2.5deg);
}
.polaroid-frame{
  background:var(--white);
  padding:14px 14px 46px;
  box-shadow:0 20px 44px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
}
.polaroid-frame img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter:saturate(.94) contrast(1.02);
  transition:opacity .3s ease;
}
.polaroid-tape{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:90px; height:30px;
  background:rgba(247,244,238,.75);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  z-index:2;
}

@media (max-width:860px){
  .about-me-grid{ grid-template-columns:1fr; }
  .polaroid{ justify-self:center; margin-top:56px; }
}

/* FIX #6d — .katana-divider removed from HTML; old CSS kept for safety */
.katana-divider{ display:none; }

/* Fix 3 — ninja-themed decorative divider between About Me and What I Do.
   Gradient line fading to transparent at each end, with a small 忍 mark
   centred on the line in var(--red). */
.section-thin-divider{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:32px;           /* vertical room for the accent glyph */
  margin:0 auto;
  width:100%;
  max-width:600px;       /* keep it tastefully wide but not full-bleed */
  padding:0 var(--gutter);
}
.section-thin-divider::before{
  content:'';
  position:absolute; top:50%; left:var(--gutter); right:var(--gutter);
  height:1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-12) 20%,
    var(--ink-12) 80%,
    transparent 100%
  );
  transform:translateY(-50%);
}
.section-thin-divider::after{
  content:'忍';
  position:relative; z-index:1;
  font-family:var(--brush);
  font-size:13px;
  color:var(--red);
  background:var(--white);
  padding:0 8px;
  letter-spacing:0;
  line-height:1;
}

/* ============================================================
   WHAT I DO — scroll word-reveal statement
   ============================================================ */
.word-reveal{
  position:relative;
  min-height:200vh;
}
.word-reveal-stage{
  position:sticky; top:0;
  min-height:100vh;
  display:flex; align-items:center;
  padding:64px var(--gutter);
}
.word-reveal-layout{
  display:grid; grid-template-columns:1px minmax(0,1fr);
  align-items:start; gap:40px;
  max-width:820px;
}
.word-reveal-bar{
  position:relative; width:1px; height:96px;
  background:var(--ink-12); overflow:hidden; margin-top:8px;
}
.word-reveal-bar i{
  position:absolute; inset:0; width:100%; height:0%;
  background:var(--red); transform-origin:top;
}
.word-reveal-kicker{ margin-bottom:32px; }
.word-reveal-heading{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px, 4.2vw, 46px); line-height:1.28;
  letter-spacing:-.01em; max-width:24ch;
}
.word-reveal-heading span{ opacity:.15; transition:opacity .05s linear; }
.word-reveal-heading .accent{ color:var(--red); font-family:var(--brush); }
.word-reveal-heading .brush-accent{
  color:var(--red); font-family:var(--brush); font-size:1.15em;
}

@media (max-width:640px){
  .word-reveal-layout{ grid-template-columns:1fr; gap:0; }
  .word-reveal-bar{ display:none; }
}

/* ============================================================
   QUANTIFYING IMPACT — stat highlights
   FIX #9 — rounded corners on cards and grid container
   FIX #12 — normalized padding (was 0 0 150px)
   ============================================================ */
.impact{ padding:48px 0 64px; } /* Fix 4: reduced from 80px 0 100px */
.impact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--ink-12); border:1px solid var(--ink-12);
  border-radius:14px; overflow:hidden; /* FIX #9 */
}
.impact-card{
  background:var(--white); padding:44px 36px;
  border-radius:12px; /* FIX #9 */
}
.impact-num{
  font-family:var(--display); font-weight:800; color:var(--red);
  font-size:clamp(40px,4.8vw,58px); line-height:1;
}
.impact-label{
  margin-top:16px; font-size:14px; font-weight:700; color:var(--ink);
}
.impact-desc{
  margin-top:8px; font-size:13px; color:var(--gray); line-height:1.55;
}
@media (max-width:780px){
  .impact-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   EXPERIENCE CARD — theme-matched palette + a bit more polish:
   bigger radius, soft hover-lift shadow, and the kanji number
   restyled as a small hanko-style seal chip (reusing the site's
   own stamp motif instead of plain text).
   ============================================================ */
.exp-card{
  background:var(--white);
  border:1px solid var(--ink-12);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(17,17,17,.02);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.exp-card:hover{
  box-shadow:0 26px 48px rgba(17,17,17,.12);
  transform:translateY(-6px);
  border-color:rgba(200,16,52,.28);
}
.exp-card::before{
  display:block; content:''; position:absolute; top:0; left:0;
  width:4px; height:100%; background:var(--red);
}
.exp-card-top .kanji-num{
  width:34px; height:34px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--red); border-radius:9px;
  font-size:15px;
}
.exp-badge{
  border-radius:999px;
  background:rgba(200,16,52,.08); border-color:transparent;
}

/* (old duplicate HERO + CUSTOM CURSOR block removed — it was
   silently pinning .hero-char-stage to width:min(46vw,620px)
   on the LEFT, fighting the real hero rules below. See the
   REBUILT hero block further down for the live styles.) */

/* ============================================================
   CTA SECTION — "Ready for a fresh perspective?" + looping clip
   ============================================================ */
.cta-section{ padding:140px 0; background:var(--paper); }
.cta-grid{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:60px;
  padding-inline:var(--gutter);
}
.cta-heading{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,4.4vw,52px); line-height:1.15;
  color:var(--ink);
}
.cta-heading .accent{ color:var(--red); font-family:var(--brush); font-weight:400; }
.cta-sub{ margin-top:20px; color:var(--gray); font-size:15px; max-width:40ch; }
.cta-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }

.cta-video-frame{
  border:1px solid var(--ink-12);
  border-radius:1px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.08);
}
.cta-video-frame video{ width:100%; height:auto; display:block; }

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

/* ============================================================
   HERO — REBUILT as an interactive cursor-tracking character
   (replaces the old scroll-scrubbed video hero entirely).
   Red background with a faint golden-ratio grid, a Pixar-style
   ninja character centered whose sword/pose responds to cursor
   X position, and the existing name-block/scroll-indicator
   reused as-is.
   ============================================================ */
.hero.hero-interactive{
  position:relative;
  height:100vh; min-height:640px;
  padding:0 !important;
  overflow:hidden;
  display:block;
  background:var(--red);
  cursor:url('../assets/cursor/kunai-2.png') 2 2, auto; /* same kunai cursor as the rest of the site */
}

/* Golden-ratio grid — lines placed at the φ divisions of the viewport
   (1/φ ≈ 61.8%, 1/φ² ≈ 38.2%), both horizontally and vertically,
   plus the outer thirds for a fuller compositional grid. Faint gold
   on the red field. */
.hero-grid-bg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(90deg,  transparent 0, transparent calc(38.2% - .5px), rgba(255,214,140,.22) calc(38.2% - .5px), rgba(255,214,140,.22) calc(38.2% + .5px), transparent calc(38.2% + .5px)),
    linear-gradient(90deg,  transparent 0, transparent calc(61.8% - .5px), rgba(255,214,140,.22) calc(61.8% - .5px), rgba(255,214,140,.22) calc(61.8% + .5px), transparent calc(61.8% + .5px)),
    linear-gradient(0deg,   transparent 0, transparent calc(38.2% - .5px), rgba(255,214,140,.16) calc(38.2% - .5px), rgba(255,214,140,.16) calc(38.2% + .5px), transparent calc(38.2% + .5px)),
    linear-gradient(0deg,   transparent 0, transparent calc(61.8% - .5px), rgba(255,214,140,.16) calc(61.8% - .5px), rgba(255,214,140,.16) calc(61.8% + .5px), transparent calc(61.8% + .5px)),
    radial-gradient(circle at 61.8% 38.2%, rgba(255,214,140,.10), transparent 42%);
}
.hero-grid-bg::after{
  /* subtle vignette so the character reads clearly against the red */
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 55%, transparent 30%, rgba(0,0,0,.22) 100%);
}

.hero-char-stage{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:4vh;
}
#heroCharCanvas{
  height:min(90vh, 1040px);
  width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.28));
}

.hero-interactive .hero-name-block{
  position:absolute; left:var(--gutter); top:14%; z-index:3;
  transform:none; max-width:520px;
}
.hero-interactive .hero-greet{ font-size:19px; color:rgba(255,255,255,.85); }
.hero-interactive .hero-wordmark{ margin-top:26px; }
.hi-cycle{
  display:inline-block; min-width:1.6em;
  transition:opacity .22s ease, transform .22s ease;
}
.hi-cycle.is-swapping{ opacity:0; transform:translateY(5px); }
.hero-interactive .hero-wordmark-line1,
.hero-interactive .hero-wordmark-line2{ color:var(--white); }
.hero-interactive .hero-wordmark-line1{ font-size:clamp(64px, 9vw, 116px); }
.hero-interactive .hero-wordmark-line2{ font-size:clamp(60px, 8.6vw, 110px); color:#FFD68C; }

.hero-interactive .hero-progress{ color:rgba(255,255,255,.65); }
.hero-interactive .hero-progress .bar{ background:rgba(255,255,255,.25); }

@media (max-width:860px){
  .hero-interactive .hero-name-block{ top:8%; max-width:80%; }
  #heroCharCanvas{ height:62vh; }
}

/* ============================================================
   MEDIA PROTECTION — extra deterrent alongside js/protect-media.js
   ============================================================ */
img, video{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none; /* stops the iOS long-press save sheet */
}

html, body{
  cursor:url('../assets/cursor/kunai-2.png') 2 2, auto;
}
a, button, .polaroid, [role="button"]{
  cursor:url('../assets/cursor/kunai-2.png') 2 2, pointer;
}
/* defensive re-assert — footer content should never fall back to the
   plain OS arrow */
footer, footer *{ cursor:url('../assets/cursor/kunai-2.png') 2 2, auto; }
footer a{ cursor:url('../assets/cursor/kunai-2.png') 2 2, pointer; }

/* ============================================================
   CTA — "Ready for a fresh perspective?" with the kakkashi
   loop video on the right, framed with a hairline border.
   ============================================================ */
.cta-section{ padding:120px 0; }
.cta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  padding-inline:var(--gutter);
}
.cta-text{ max-width:480px; }
.cta-heading{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px, 4vw, 52px); line-height:1.15;
  color:var(--ink);
}
.cta-sub{ margin-top:20px; color:var(--gray); font-size:16px; max-width:38ch; }
.cta-actions{ margin-top:36px; }

.say-hello-wrap{ position:relative; display:inline-flex; }
.say-hello-pop{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translate(-50%, 6px);
  white-space:nowrap;
  background:var(--ink); color:var(--white);
  font-size:13px; font-weight:600;
  padding:6px 12px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.say-hello-pop::after{
  content:''; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink);
}
.say-hello-wrap:hover .say-hello-pop,
.say-hello-wrap:focus-within .say-hello-pop{
  opacity:1; transform:translate(-50%, 0);
}
.cta-video-frame{
  border:1px solid var(--ink-12);
  border-radius:1px;
  overflow:hidden;
  aspect-ratio:16/10;
}
.cta-video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:860px){
  .cta-grid{ grid-template-columns:1fr; }
}
.cta-copy{ max-width:480px; }