@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

:root{
  --ink:#0c0c0d;
  --paper:#f8f7f4;
  --crimson:#7d1128;
  --crimson-deep:#4a0a18;
  --gold:#a9812f;
  --gold-soft:#c9a45c;
  --line:rgba(12,12,13,.12);
  --line-on-dark:rgba(248,247,244,.16);
  --max:1180px;
  --serif:'Shippori Mincho', serif;
  --display:'Cormorant Garamond', serif;
  --sans:'Noto Sans JP', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:.04em; margin:0;}
p{margin:0 0 1em;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

.wrap{max-width:var(--max); margin:0 auto; padding:0 6vw;}
@media (min-width:900px){ .wrap{padding:0 4vw;} }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(12,12,13,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-on-dark);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:.65em; color:var(--paper); font-family:var(--serif); font-size:1.22rem; letter-spacing:.08em;}
.brand img{width:32px; height:32px; object-fit:contain;}
.nav-toggle{
  background:none; border:none; width:32px; height:22px; position:relative; cursor:pointer; z-index:110;
}
.nav-toggle span{position:absolute; left:0; right:0; height:1px; background:var(--paper); transition:transform .3s, opacity .3s;}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:10px;}
.nav-toggle span:nth-child(3){top:20px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

.site-nav{
  position:fixed; top:72px; left:0; right:0; height:calc(100vh - 72px); height:calc(100svh - 72px);
  background:var(--ink);
  transform:translateX(100%); transition:transform .45s cubic-bezier(.65,0,.35,1);
  display:flex; flex-direction:column; justify-content:center; padding:8vw 10vw;
  z-index:99; overflow-y:auto;
}
.site-nav.open{transform:translateX(0);}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1em;}
.site-nav a{
  color:var(--paper); font-family:var(--serif); font-size:clamp(1.3rem,5vw,2rem); letter-spacing:.06em;
  display:inline-flex; align-items:baseline; gap:.6em;
}
.site-nav a .en{font-family:var(--display); font-style:italic; color:var(--gold-soft); font-size:.55em;}
.site-nav a:hover{color:var(--gold-soft);}

@media (min-width:960px){
  .nav-toggle{display:none;}
  .site-nav{
    position:static; transform:none; background:none; flex-direction:row; padding:0; top:auto; left:auto; right:auto; height:auto; overflow:visible;
  }
  .site-nav ul{flex-direction:row; gap:2.1vw;}
  .site-nav a{color:var(--paper); font-size:.85rem; font-family:var(--sans); font-weight:400; letter-spacing:.12em; display:block;}
  .site-nav a .en{display:none;}
  .site-nav a:hover{color:var(--gold-soft);}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--paper); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; background:url('../img/profile.jpg') center 20%/cover no-repeat; opacity:.55;}
.hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,13,.15) 0%, rgba(12,12,13,.55) 55%, rgba(12,12,13,.96) 100%);}
.hero-crest{position:absolute; top:8vh; right:5vw; width:min(28vw,220px); opacity:.9;}
.hero-inner{position:relative; z-index:2; padding:10vh 0 8vh;}
.hero-eyebrow{font-family:var(--display); font-style:italic; color:var(--gold-soft); font-size:1.05rem; letter-spacing:.08em; margin-bottom:1.2em;}
.hero-title{font-size:clamp(2.4rem,7vw,4.8rem); line-height:1.25; margin-bottom:.5em;}
.hero-title small{display:block; font-family:var(--display); font-style:italic; font-weight:400; font-size:.4em; color:var(--gold-soft); letter-spacing:.06em; margin-top:.4em;}
.hero-sub{max-width:34em; font-weight:300; color:rgba(248,247,244,.82); font-size:1rem;}

/* ---------- Sections ---------- */
section{padding:9vh 0;}
.section-alt{background:#111112; color:var(--paper);}
.section-alt .kicker{color:var(--gold-soft);}.kicker{
  font-family:var(--display); font-style:italic; color:var(--crimson); font-size:1rem; letter-spacing:.05em; margin-bottom:.6em; display:block;
}
.section-title{font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:.9em;}
.rule{width:48px; height:1px; background:var(--gold); border:none; margin:1.8em 0;}
.rule-center{margin-left:auto; margin-right:auto;}

/* ---------- Live block (top page) ---------- */
.live-block{
  border:1px solid var(--line-on-dark); padding:2.4em clamp(1.2em,4vw,3em);
  display:grid; gap:1.6em; align-items:center;
}
@media (min-width:760px){ .live-block{grid-template-columns:1fr auto;} }
.live-block h3{font-size:1.5rem; margin-bottom:.5em;}
.live-block dl{display:grid; grid-template-columns:auto 1fr; gap:.4em 1.2em; font-size:.92rem; color:rgba(248,247,244,.8); margin:0;}
.live-block dt{color:var(--gold-soft); font-family:var(--serif); font-weight:500;}
.live-block dd{margin:0;}
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.9em 1.8em; border:1px solid var(--gold);
  color:var(--paper); font-size:.85rem; letter-spacing:.12em; white-space:nowrap; transition:background .3s,color .3s;
}
.btn:hover{background:var(--gold); color:var(--ink);}
.btn-crimson{border-color:var(--crimson); }
.btn-crimson:hover{background:var(--crimson); color:var(--paper);}
.btn-block{display:flex; justify-content:center;}
.section:not(.section-alt) .btn{color:var(--ink);}
.section:not(.section-alt) .btn:hover{color:var(--ink);}
.section:not(.section-alt) .btn-crimson:hover{color:var(--paper);}
section:not(.section-alt) .btn{color:var(--ink);}
section:not(.section-alt) .btn:hover{color:var(--ink);}
section:not(.section-alt) .btn-crimson:hover{color:var(--paper);}

/* YouTube embed placeholder */
.yt-frame{
  position:relative; aspect-ratio:16/9; background:#000 url('../img/crest-gold.png') center/120px no-repeat;
  border:1px solid var(--line-on-dark); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.yt-frame a{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8em; color:var(--paper); background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.75));}
.yt-play{width:56px; height:56px; border-radius:50%; border:1px solid var(--paper); display:flex; align-items:center; justify-content:center;}
.yt-frame small{font-size:.75rem; letter-spacing:.1em; color:rgba(248,247,244,.7);}

/* ---------- Card nav ---------- */
.card-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (min-width:640px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .card-grid{grid-template-columns:repeat(3,1fr);} }
.card{
  background:var(--paper); padding:2.6em 2em; position:relative; transition:background .3s;
}
.card:hover{background:#fff;}
.card .num{font-family:var(--display); font-style:italic; color:var(--gold); font-size:.9rem;}
.card h3{font-size:1.3rem; margin:.6em 0 .5em;}
.card p{font-size:.85rem; color:rgba(12,12,13,.6); margin-bottom:1.4em;}
.card .go{font-size:.75rem; letter-spacing:.14em; color:var(--crimson);}
.card::before{content:''; position:absolute; top:0; left:0; width:0; height:2px; background:var(--crimson); transition:width .35s;}
.card:hover::before{width:100%;}

/* ---------- SNS ---------- */
.sns-row{display:flex; flex-wrap:wrap; gap:.8em;}
.sns-row a{
  display:flex; align-items:center; gap:.6em; padding:.75em 1.1em; border:1px solid var(--line-on-dark);
  font-size:.82rem; letter-spacing:.06em; color:var(--paper); transition:border-color .3s, color .3s;
}
.sns-row a:hover{border-color:var(--gold); color:var(--gold-soft);}
.sns-row .ic{
  width:26px; height:26px; border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.sns-row .ic svg{width:15px; height:15px;}
.section:not(.section-alt) .sns-row a{color:var(--ink); border-color:var(--line);}
.section:not(.section-alt) .sns-row a:hover{border-color:var(--crimson); color:var(--crimson);}
section:not(.section-alt) .sns-row a{color:var(--ink); border-color:var(--line);}
section:not(.section-alt) .sns-row a:hover{border-color:var(--crimson); color:var(--crimson);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:rgba(248,247,244,.7); padding:6vh 0 4vh; font-size:.82rem;}
.footer-grid{display:grid; gap:2.4em; margin-bottom:3em;}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr;} }
.footer-brand{display:flex; align-items:center; gap:.7em; color:var(--paper); font-family:var(--serif); font-size:1.1rem; margin-bottom:.8em;}
.footer-brand img{width:24px;}
.footer-col h4{color:var(--gold-soft); font-family:var(--sans); font-size:.75rem; letter-spacing:.14em; font-weight:500; margin-bottom:1em;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6em;}
.footer-col a:hover{color:var(--gold-soft);}
.footer-bottom{border-top:1px solid var(--line-on-dark); padding-top:2em; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em; font-size:.72rem; letter-spacing:.04em; color:rgba(248,247,244,.45);}
.footer-crest{display:flex; align-items:center; gap:.6em;}
.footer-crest img{width:18px; height:18px; object-fit:contain; opacity:.85;}

/* ---------- Inner page hero ---------- */
.page-hero{background:var(--ink); color:var(--paper); padding:22vh 0 6vh; position:relative; overflow:hidden;}
.page-hero .crest-watermark{position:absolute; right:-4vw; top:-6vh; width:38vw; max-width:340px; opacity:.14;}
.page-hero .kicker{color:var(--gold-soft);}
.page-hero h1{font-size:clamp(2rem,5.4vw,3.4rem);}

/* ---------- Profile ---------- */
.profile-grid{display:grid; gap:3em;}
@media (min-width:860px){ .profile-grid{grid-template-columns:320px 1fr; align-items:start;} }
.profile-photo{border:1px solid var(--line);}
.profile-name{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.15em;}
.profile-name .yomi{display:block; font-family:var(--sans); font-weight:300; font-size:.42em; letter-spacing:.16em; color:rgba(12,12,13,.55); margin-bottom:.5em;}
.profile-en{font-family:var(--display); font-style:italic; color:var(--crimson); font-size:1.1rem; margin-bottom:1.4em;}
.profile-facts{display:grid; grid-template-columns:auto 1fr; gap:.5em 1.4em; font-size:.9rem; margin-bottom:1.6em;}
.profile-facts dt{color:var(--crimson); font-family:var(--serif);}
.profile-facts dd{margin:0; color:rgba(12,12,13,.75);}
.profile-note{font-size:.82rem; color:rgba(12,12,13,.5); border-left:2px solid var(--gold); padding-left:1em; margin:1.6em 0;}
.title-list{list-style:none; margin:0 0 1.8em; padding:0; display:flex; flex-wrap:wrap; gap:.6em;}
.title-list li{border:1px solid var(--line); padding:.5em 1em; font-size:.8rem; letter-spacing:.04em;}

/* ---------- Biography ---------- */
.timeline{border-left:1px solid var(--line); margin-left:.4em;}
.timeline-item{position:relative; padding:0 0 2.6em 2.2em;}
.timeline-item::before{content:''; position:absolute; left:-5px; top:.4em; width:9px; height:9px; background:var(--crimson); border-radius:50%;}
.timeline-year{font-family:var(--display); font-style:italic; color:var(--crimson); font-size:1.3rem; margin-bottom:.3em; display:block;}
.timeline-item p{font-size:.92rem; color:rgba(12,12,13,.78); margin:0 0 .5em;}
.timeline-item p:last-child{margin-bottom:0;}
.bio-link{color:var(--crimson); text-decoration:underline; text-underline-offset:2px; word-break:break-all;}
.bio-btn{
  display:inline-flex; align-items:center; gap:.4em; margin:.3em .4em .3em 0; padding:.5em 1em;
  border:1px solid var(--crimson); color:var(--crimson); font-size:.78rem; letter-spacing:.03em;
  border-radius:2px; transition:background .25s, color .25s; white-space:nowrap;
}
.bio-btn-yt:hover{background:var(--crimson); color:var(--paper);}
.bio-btn-am{border-color:var(--gold);}
.bio-btn-am:hover{background:var(--gold); color:var(--ink);}

.event-flex{display:grid; gap:2.2em;}
@media (min-width:760px){ .event-flex{grid-template-columns:1.1fr .9fr; align-items:start;} }
.event-flyer{display:block; border:1px solid var(--line); transition:opacity .3s;}
.event-flyer:hover{opacity:.85;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  padding:1.4em 0; cursor:pointer; font-family:var(--serif); font-size:1.02rem; list-style:none; position:relative; padding-right:2em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; position:absolute; right:0; top:1.3em; font-family:var(--display); font-size:1.3rem; color:var(--crimson); transition:transform .3s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .a{padding:0 0 1.6em; font-size:.88rem; color:rgba(12,12,13,.65);}

/* ---------- Plans ---------- */
.plan-grid{display:grid; gap:2px; background:var(--line-on-dark); border:1px solid var(--line-on-dark);}
@media (min-width:760px){ .plan-grid{grid-template-columns:1fr 1fr;} }
.plan{background:var(--ink); padding:2.6em clamp(1.4em,4vw,3em);}
.plan h3{color:var(--gold-soft); font-size:1.3rem; margin-bottom:.2em;}
.plan .price{font-family:var(--display); font-style:italic; font-size:2.2rem; color:var(--paper); margin:.3em 0 1.2em;}
.plan .price span{font-size:.4em; font-family:var(--sans); font-style:normal; color:rgba(248,247,244,.6);}
.plan ul{margin:0 0 2em; padding:0; list-style:none; font-size:.88rem; color:rgba(248,247,244,.8); display:flex; flex-direction:column; gap:.7em;}
.plan ul li::before{content:'—  ';color:var(--gold-soft);}
.plan.premium{background:#1a1013;}

/* ---------- Support tiers ---------- */
.tip-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (min-width:640px){ .tip-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:960px){ .tip-grid{grid-template-columns:repeat(4,1fr);} }
.tip{background:var(--paper); padding:2em 1.4em; text-align:center; transition:background .3s; color:var(--ink);}
.tip:hover{background:#fff;}
.tip .amount{font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--crimson); display:block; margin-bottom:.8em;}

/* ---------- Contact ---------- */
.contact-list{list-style:none; margin:0 0 2em; padding:0; display:flex; flex-direction:column; gap:.7em;}
.contact-list li{font-size:.95rem; padding-left:1.4em; position:relative;}
.contact-list li::before{content:'蝶'; position:absolute; left:0; top:0; font-size:.7rem; color:var(--crimson); font-family:var(--serif);}

/* ---------- Policy ---------- */
.policy h2{font-size:1.15rem; margin:1.8em 0 .6em;}
.policy p, .policy li{font-size:.9rem; color:rgba(12,12,13,.75);}