/* =========================
   CORE VARIABLES
   ========================= */
:root{
  --ink:#0a0a12;
  --ink-2:#151521;
  --paper:#fff8ee;
  --paper-2:#f2e9d6;
  --sumi:#1a1a28;
  --crimson:#e63946;
  --crimson-deep:#a71d2a;
  --sakura:#ffb3c1;
  --gold:#e0a82e;
  --neon:#00e5ff;
  --neon-pink:#ff3d7f;
  --matcha:#6a994e;
  --indigo:#1d3557;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Zen Kaku Gothic New',sans-serif;
  overflow-x:hidden;
  line-height:1.7;
}

/* paper grain overlay */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

a{color:inherit}

/* =========================
   NAV
   ========================= */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding:20px 40px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(10,10,18,.75);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(230,57,70,.2);
}
.logo{
  font-family:'Shippori Mincho',serif;
  font-weight:900;
  font-size:1.4rem;
  letter-spacing:.02em;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
  color:var(--paper);
}
.logo-mark{
  width:42px;height:42px;
  background:var(--crimson);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:'Shippori Mincho',serif;
  color:var(--paper);
  font-size:1.3rem;
  box-shadow:0 0 30px rgba(230,57,70,.6);
  position:relative;
  flex-shrink:0;
}
.logo-mark::before{
  content:"";
  position:absolute;inset:-4px;
  border:1px solid var(--crimson);
  border-radius:50%;
  opacity:.5;
}
.logo small{
  display:block;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:.65rem;
  font-weight:400;
  letter-spacing:.3em;
  opacity:.6;
  text-transform:uppercase;
}
.nav-links{
  display:flex;gap:32px;align-items:center;
  list-style:none;
}
.nav-links a{
  color:var(--paper);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  position:relative;
  padding:6px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  bottom:0;left:0;
  width:0;height:2px;
  background:var(--crimson);
  transition:width .3s;
}
.nav-links a:hover{color:var(--crimson)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--crimson)}
.nav-links a.active::after{width:100%}
.nav-cta{
  padding:10px 22px;
  background:var(--crimson);
  color:var(--paper)!important;
  border-radius:999px;
  font-weight:700!important;
  font-size:.85rem!important;
}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--crimson-deep)!important;color:var(--paper)!important}

.menu-toggle{display:none;background:none;border:none;color:var(--paper);font-size:1.5rem;cursor:pointer}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:transform .2s, box-shadow .3s, background .3s;
  font-family:inherit;
}
.btn-primary{
  background:var(--crimson);
  color:var(--paper);
  box-shadow:0 8px 30px rgba(230,57,70,.45);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(230,57,70,.7)}
.btn-ghost{
  background:transparent;
  color:var(--paper);
  border:1px solid rgba(255,248,238,.3);
}
.btn-ghost:hover{border-color:var(--paper);background:rgba(255,248,238,.06)}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* =========================
   SECTION COMMON
   ========================= */
section{padding:120px 40px;position:relative}
.section-inner{max-width:1280px;margin:0 auto}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:60px;flex-wrap:wrap;gap:24px;
}
.section-title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:900;
  line-height:1.1;
}
.section-title .num{
  display:block;
  font-size:.6rem;
  letter-spacing:.4em;
  color:var(--crimson);
  font-weight:500;
  margin-bottom:14px;
  font-family:'Zen Kaku Gothic New',sans-serif;
}
.section-title .en{
  display:block;
  font-size:.9rem;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.5;
  margin-top:10px;
}
.section-desc{max-width:420px;color:rgba(255,248,238,.7)}

/* =========================
   PAGE HERO (shared by sub-pages)
   ========================= */
.page-hero{
  padding:180px 40px 80px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(230,57,70,.2) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a12 0%, #181628 100%);
}
.page-hero-inner{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr;gap:60px;
  align-items:center;
}
.breadcrumb{
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,248,238,.5);
  margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.breadcrumb a{text-decoration:none;color:inherit;transition:color .3s}
.breadcrumb a:hover{color:var(--crimson)}
.breadcrumb .sep{opacity:.4}
.page-title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(3rem,6vw,5.5rem);
  font-weight:900;
  line-height:.95;
  margin-bottom:24px;
}
.page-title .accent{color:var(--crimson)}
.page-title-en{
  font-size:.9rem;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sakura);
  margin-top:20px;
  opacity:.75;
  display:block;
}
.page-lede{
  font-size:1.08rem;
  color:rgba(255,248,238,.75);
  max-width:540px;
  margin-bottom:30px;
}
.page-hero-kanji{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(14rem,24vw,22rem);
  font-weight:900;
  line-height:.85;
  color:var(--crimson);
  text-align:center;
  opacity:.9;
  justify-self:end;
  text-shadow:0 0 80px rgba(230,57,70,.4);
  position:relative;
}
.page-hero-kanji::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle, rgba(230,57,70,.2) 0%, transparent 60%);
  z-index:-1;
  filter:blur(40px);
}

/* =========================
   CARDS (generic)
   ========================= */
.card{
  padding:32px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  transition:all .3s;
}
.card:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--crimson);
  transform:translateY(-4px);
}

/* =========================
   FOOTER
   ========================= */
footer{
  background:var(--sumi);
  padding:80px 40px 30px;
  border-top:1px solid rgba(230,57,70,.2);
}
.foot-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:50px;
}
.foot-brand p{
  color:rgba(255,248,238,.6);
  margin-top:20px;
  font-size:.9rem;
  max-width:340px;
}
.foot h4{
  font-family:'Shippori Mincho',serif;
  font-size:1rem;
  font-weight:900;
  margin-bottom:18px;
}
.foot ul{list-style:none}
.foot li{margin-bottom:10px}
.foot a{
  color:rgba(255,248,238,.6);
  text-decoration:none;
  font-size:.88rem;
  transition:color .2s;
}
.foot a:hover{color:var(--crimson)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:30px;
  display:flex;justify-content:space-between;
  font-size:.78rem;
  color:rgba(255,248,238,.4);
  flex-wrap:wrap;gap:16px;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width:900px){
  .nav{padding:16px 20px}
  .nav-links{display:none}
  .menu-toggle{display:block}
  section{padding:80px 20px}
  .page-hero{padding:130px 20px 60px}
  .page-hero-inner{grid-template-columns:1fr;gap:30px}
  .page-hero-kanji{justify-self:start;font-size:10rem}
  .foot-inner{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:500px){
  .foot-inner{grid-template-columns:1fr}
}