:root{
  --mustard:#D9B22C;
  --teal:#5FE3D6;
  --pink:#F03C93;
  --blue:#3E63E0;
  --green:#4FDE8E;
  --red:#F0402C;
  --ink:#141414;
  --paper:#FFFFFF;
  --paper-dim:#F7F6F3;
  --line: rgba(20,20,20,0.12);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Serif JP', serif;
  line-height:1.9;
  overflow-x:hidden;
}

.display{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  font-weight:900;
  letter-spacing:0.02em;
}

.label{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  letter-spacing:0.14em;
}

a{ color:inherit; }

/* ---------- topbar ---------- */
.topbar{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.6rem clamp(1.2rem,4vw,3rem);
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.06em;
}
.topbar .num{
  background:var(--ink);
  color:var(--paper);
  padding:0.35rem 0.9rem;
  border-radius:999px;
  margin-right:0.6rem;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  padding:2rem clamp(1.2rem,4vw,3rem) 4rem;
  overflow:hidden;
  isolation:isolate;
}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(46px);
  opacity:0.85;
  z-index:-1;
  animation:drift 16s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(1.2%, -1.8%) scale(1.04); }
}
.blob.b1{ width:34vw; height:34vw; max-width:420px; max-height:420px; top:-8%; left:-6%; background:var(--mustard); animation-delay:0s; }
.blob.b2{ width:40vw; height:40vw; max-width:520px; max-height:520px; top:-6%; right:-8%; background:var(--teal); animation-delay:2s; }
.blob.b3{ width:26vw; height:26vw; max-width:320px; max-height:320px; top:44%; left:16%; background:var(--pink); animation-delay:4s; }
.blob.b4{ width:30vw; height:30vw; max-width:380px; max-height:380px; top:52%; right:2%; background:var(--blue); animation-delay:1s; }
.blob.b5{ width:30vw; height:30vw; max-width:360px; max-height:360px; bottom:-10%; left:-6%; background:var(--green); animation-delay:3s; }

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none; }
}

.eyebrow-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:0.6rem;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.05em;
  margin-bottom:2.4rem;
}

.hero-title{
  font-size:clamp(2.8rem, 9.5vw, 7.4rem);
  line-height:1.42;
  margin:0;
}
.hero-title .accent{
  background:var(--pink);
  padding-inline:0.14em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  color:var(--ink);
}

.hero-meta{
  display:flex;
  justify-content:flex-end;
  margin-top:3.5rem;
}
.hero-meta-inner{
  text-align:right;
}
.hero-date{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:900;
  font-size:clamp(1.8rem,4.4vw,3.2rem);
  letter-spacing:0.02em;
}
.hero-venue{
  margin-top:0.4rem;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.95rem;
  font-weight:500;
}

.scroll-cue{
  position:absolute;
  left:clamp(1.2rem,4vw,3rem);
  bottom:1.6rem;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.2em;
  writing-mode:vertical-rl;
  opacity:0.6;
}

/* ---------- lede ---------- */
.lede{
  max-width:760px;
  margin:0 auto;
  padding:5rem clamp(1.2rem,4vw,3rem) 2rem;
  font-size:1.06rem;
}
.lede p + p{ margin-top:1.2rem; }

/* ---------- greeting ---------- */
.greeting{
  padding:5rem clamp(1.2rem,4vw,3rem);
  display:grid;
  grid-template-columns:1fr minmax(0,440px);
  gap:3rem;
  align-items:center;
}
.greeting-body h2{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  margin:0 0 1.4rem;
}
.greeting-body p{ margin:0 0 1.2rem; }
.greeting-body .greeting-sign{
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.9rem;
  text-align:right;
  margin:2rem 0 0;
}
.greeting-name{
  display:block;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.1em;
}
.greeting-photo{ margin:0; }
.greeting-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
}

/* ---------- section shell ---------- */
.part{
  position:relative;
  padding:5rem clamp(1.2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.part-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  margin-bottom:2.6rem;
}
.part-badge{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:900;
  font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:0.9;
  color:var(--paper);
  padding:0.3rem 0.7rem 0.5rem;
}
.part1 .part-badge{ background:var(--pink); }
.part2 .part-badge{ background:var(--red); }
.part3 .part-badge{ background:var(--teal); }

.part-title{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  margin:0.2rem 0 0;
}
.part-time{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  margin-top:0.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.6em 1.2em;
}
.part-time span.dot{
  display:inline-block;
  width:0.4em; height:0.4em;
  border-radius:50%;
  background:var(--ink);
  margin-right:0.5em;
  vertical-align:middle;
}

.roster{
  max-width:864px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.roster-row{
  display:grid;
  grid-template-columns:9em 1fr;
  gap:1rem;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
  font-size:0.98rem;
}
.roster-row:last-child{ border-bottom:1px solid var(--line); }
.roster-role{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.08em;
  color:var(--ink);
  opacity:0.7;
  padding-top:0.15rem;
}
.roster-name{ font-weight:600; }
.roster-link{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  padding-bottom:1px;
  transition:color 0.2s ease, background-size 0.2s ease;
}
.roster-link::after{
  content:"↗";
  display:inline-block;
  margin-left:0.25em;
  font-size:0.75em;
  font-weight:700;
  opacity:0.6;
  transition:transform 0.2s ease;
}
.roster-link:hover{ color:var(--pink); }
.roster-link:hover::after{ transform:translate(2px,-2px); opacity:1; }
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.roster-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.roster-list li + li{
  padding-top:1.1rem;
  border-top:1px dashed var(--line);
}
.roster-aff{
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.8rem;
  font-weight:500;
  opacity:0.7;
  margin-left:0.9em;
}
.roster-talk{
  margin:0.35rem 0 0;
  font-size:0.95rem;
  line-height:1.7;
  text-wrap:pretty;
}
.nobr{ display:inline-block; }
.roster-note{
  display:block;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.86rem;
  opacity:0.75;
  margin-top:0.25rem;
  font-weight:500;
}

.part2-body{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.98rem;
}

/* ---------- leaflet ---------- */
.leaflet{
  border-top:1px solid var(--line);
  padding:5rem clamp(1.2rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2rem;
}
.leaflet-thumb{
  display:block;
  width:100%;
  max-width:360px;
  transition:transform 0.2s ease;
}
.leaflet-body{ max-width:600px; }
.leaflet-thumb img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(20,20,20,0.15);
}
.leaflet-thumb:hover{ transform:translateY(-2px); }
.leaflet-body h2{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  margin:0 0 1rem;
}
.leaflet-body p{
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.98rem;
  margin:0 0 1.8rem;
}

/* ---------- venue ---------- */
.venue{
  border-top:1px solid var(--line);
  padding:5rem clamp(1.2rem,4vw,3rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.venue-card{
  padding:2.2rem;
  border-radius:20px;
  background:var(--paper-dim);
}
.venue-card h3{
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.1em;
  font-weight:700;
  margin:0 0 0.8rem;
  opacity:0.6;
}
.venue-card p{ margin:0; font-size:1.15rem; font-weight:600; font-family:'Noto Sans JP',sans-serif;}

/* ---------- cta ---------- */
.cta{
  border-top:1px solid var(--line);
  padding:6rem clamp(1.2rem,4vw,3rem);
  text-align:center;
}
.cta h2{
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin:0 0 1.6rem;
}
.cta-btn{
  display:inline-block;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.06em;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  padding:1.1rem 2.6rem;
  border-radius:999px;
  transition:transform 0.2s ease, background 0.2s ease;
}
.cta-btn:hover{ background:var(--pink); transform:translateY(-2px); }
.cta-btn:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.cta-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
  max-width:1080px;
  margin:0 auto;
}
.cta-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2.2rem 1.6rem;
  border-radius:20px;
  background:var(--paper-dim);
}
.cta-card .part-badge{
  font-size:2rem;
  margin-bottom:1.2rem;
}
.cta-card img{
  display:block;
  width:100%;
  max-width:180px;
  height:auto;
  margin-bottom:1.2rem;
}
.cta-label{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:0.98rem;
  line-height:1.6;
  margin:0;
}
.cta-deadline{
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.86rem;
  opacity:0.75;
  margin:0.4rem 0 1.4rem;
}
.cta-card .cta-btn{
  margin-top:auto;
  font-size:0.92rem;
  padding:0.9rem 1.8rem;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:3rem clamp(1.2rem,4vw,3rem) 3.5rem;
  font-family:'Noto Sans JP',sans-serif;
  font-size:0.85rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
}
footer .fline{ margin:0.2rem 0; opacity:0.8; }
footer .brand{
  font-weight:900;
  font-size:0.95rem;
}

a.cta-link, footer a{
  text-underline-offset:3px;
}
a:focus-visible, button:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}

@media (max-width:760px){
  .venue{ grid-template-columns:1fr; }
  .cta-grid{ grid-template-columns:1fr; }
  .greeting{ grid-template-columns:1fr; }
  .greeting-photo{ order:-1; }
  .roster-row{ grid-template-columns:1fr; }
  .roster-role{ padding-top:0; }
  .hero-meta{ justify-content:flex-start; }
  .hero-meta-inner{ text-align:left; }
}