:root{
  --paper:#f5efe3; --paper2:#ece3d2; --ink:#22201d; --ink-soft:#5a544c;
  --night:#0b1633; --night2:#1b2c5a; --wine:#6e1f33; --grape:#4a2a4f; --vine:#5d6b3a; --gold:#c9a96a;
  --serif:"Cormorant Garamond",Georgia,serif; --jp:"Noto Serif JP",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 1.15rem/1.6 var(--serif);
  background-color:var(--paper);
  /* washi-paper texture: SVG noise + soft fibres */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .33 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");}
a{color:var(--wine)}
h1,h2,h3{font-weight:400;line-height:1.2}
/* HERO */
.hero{position:relative;color:#f3ecdf;background:radial-gradient(ellipse at 50% 120%,var(--night2),var(--night) 65%);overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.sky{position:absolute;inset:0;pointer-events:none}
.stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff8,transparent),
  radial-gradient(1.5px 1.5px at 55% 15%,#fff,transparent),radial-gradient(1px 1px at 75% 40%,#fffa,transparent),
  radial-gradient(1px 1px at 90% 10%,#fff,transparent),radial-gradient(1px 1px at 20% 45%,#fff9,transparent),
  radial-gradient(1.2px 1.2px at 65% 80%,#fff8,transparent),radial-gradient(1px 1px at 45% 35%,#fff,transparent),
  radial-gradient(1px 1px at 85% 65%,#fff9,transparent),radial-gradient(1px 1px at 5% 85%,#fff7,transparent);
  background-size:320px 320px;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.meteor{position:absolute;width:140px;height:1.5px;background:linear-gradient(90deg,#fff,transparent);border-radius:2px;
  transform:rotate(-35deg);opacity:0;animation:meteor 9s linear infinite}
.m1{top:12%;left:70%;animation-delay:1s}.m2{top:28%;left:90%;animation-delay:4s;width:100px}
.m3{top:6%;left:45%;animation-delay:6.5s}.m4{top:35%;left:60%;animation-delay:8s;width:80px}
@keyframes meteor{0%{opacity:0;translate:0 0}2%{opacity:1}9%{opacity:0;translate:-320px 230px}100%{opacity:0;translate:-320px 230px}}
@media (prefers-reduced-motion:reduce){.meteor,.stars{animation:none}.meteor{display:none}}
.nav{position:relative;z-index:2;padding:1rem}
.nav-toggle{background:none;border:1px solid #f3ecdf55;color:inherit;font:inherit;padding:.3rem .9rem;border-radius:2px}
.nav ul{list-style:none;margin:.6rem 0 0;padding:0;display:none}
.nav ul.open{display:block}
.nav a{color:#f3ecdf;text-decoration:none;display:block;padding:.35rem 0;letter-spacing:.06em}
.hero-inner{position:relative;z-index:1;margin:auto;text-align:center;padding:2rem 1.2rem 5rem}
.hero-crane{width:70px;height:52px;color:var(--gold);opacity:.85}
.kicker{font-family:var(--jp);font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
h1{font-size:clamp(2.3rem,9vw,4.6rem);margin:.4rem 0;display:flex;flex-direction:column}
h1 em{font-style:italic;color:var(--gold);font-size:.7em}
.date{font-size:1.4rem;margin:.6rem 0 0}.place{opacity:.75;margin:.2rem 0 1.6rem}
.countdown{display:flex;gap:.6rem;justify-content:center}
.countdown div{min-width:4.2rem;padding:.5rem .3rem;border:1px solid #f3ecdf33;background:#ffffff08}
.countdown b{display:block;font:500 1.6rem var(--jp)}
.countdown small{font-size:.75rem;letter-spacing:.1em;opacity:.7}
.hero-edge{position:absolute;bottom:-1px;left:0;right:0;height:40px;background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q20 12 40 20 T90 18 T140 24 T200 16 T260 22 T320 14 T400 20 V40 H0Z'/%3E%3C/svg%3E") center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q20 12 40 20 T90 18 T140 24 T200 16 T260 22 T320 14 T400 20 V40 H0Z'/%3E%3C/svg%3E") center/100% 100%}
/* SECTIONS */
.section{max-width:960px;margin:0 auto;padding:3rem 1.2rem}
h2{font-size:2.2rem;margin:0 0 1rem;display:flex;align-items:baseline;gap:.8rem;position:relative}
h2::after{content:"";flex:1;height:3px;background:var(--ink);opacity:.6;border-radius:3px;filter:url(#brush);transform:skewX(-20deg)}
.jp{font:300 1.1rem var(--jp);color:var(--wine);writing-mode:vertical-rl}
.lead{color:var(--ink-soft)}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--vine);margin-left:.4rem}
.timeline li{position:relative;padding:0 0 1.6rem 1.4rem}
.timeline li::before{content:"";position:absolute;left:-8px;top:.45rem;width:14px;height:14px;border-radius:50%;background:var(--grape);box-shadow:0 0 0 4px var(--paper)}
.timeline h3{margin:.1rem 0;font-size:1.45rem}
.timeline p{margin:.2rem 0}
.time{font:500 .75rem var(--jp);letter-spacing:.15em;text-transform:uppercase;color:var(--wine)}
.addr{font-style:italic;color:var(--ink-soft)}
.dayafter{font-size:1.5rem;margin:1.5rem 0 1rem;color:var(--grape)}
.divider{display:flex;justify-content:center;align-items:center;gap:1.4rem;color:var(--vine);opacity:.75}
.divider svg{width:30px;height:30px}.divider svg:last-child{color:var(--grape)}
.divider .c{width:56px;height:42px;color:var(--ink)}
.cards{display:grid;gap:1.2rem}
.card{background:#fffaf0aa;border:1px solid #d8ccb5;padding:1.2rem;box-shadow:0 1px 0 #0000000d,0 8px 20px -14px #0005}
.card h3{margin:0 0 .3rem;font-size:1.4rem}
.card iframe{width:100%;height:240px;border:0;filter:sepia(.25) saturate(.8);margin:.5rem 0}
.note{border-left:3px solid var(--wine);padding:.4rem 1rem;margin:1.4rem 0;background:#6e1f330a}
.plain{padding-left:1.1rem}
.badge{display:inline-block;background:var(--wine);color:#f5efe3;padding:.25rem .8rem;font-size:1rem;letter-spacing:.05em}
.form{display:grid;gap:1rem;max-width:520px}
.form label{display:grid;gap:.25rem}
.form input:not([type=checkbox]){font:inherit;padding:.6rem .7rem;border:1px solid #bfb29a;background:#fffdf8;border-radius:2px}
.form .check{grid-template-columns:auto 1fr;align-items:start;gap:.6rem;font-size:1rem}
.form .check input{margin-top:.4rem;accent-color:var(--wine)}
.form button{justify-self:start;font:inherit;background:var(--night);color:#f3ecdf;border:0;padding:.6rem 1.6rem;cursor:pointer}
.form-msg{color:var(--wine);min-height:1.4em}
details{border-bottom:1px solid #d8ccb5;padding:.7rem 0}
summary{cursor:pointer;font-size:1.2rem}
.footer{background:var(--night);color:#f3ecdf;text-align:center;padding:2rem 1rem}
.foot-crane{width:48px;height:36px;color:var(--gold)}
@media (min-width:760px){
  .nav{display:flex;justify-content:center}.nav-toggle{display:none}
  .nav ul{display:flex!important;gap:2rem;margin:0}
  .cards{grid-template-columns:1fr 1fr}
  .section{padding:4.5rem 2rem}
}
/* TABS */
.tabbar{position:sticky;top:0;z-index:10;background:var(--night);border-bottom:1px solid #f3ecdf22}
.tabbar ul{list-style:none;margin:0 auto;padding:0 .5rem;display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:960px}
.tabbar ul::-webkit-scrollbar{display:none}
.tabbar a{display:block;white-space:nowrap;color:#f3ecdfcc;text-decoration:none;padding:.8rem .8rem;letter-spacing:.05em;border-bottom:2px solid transparent}
.tabbar a.active{color:#fff;border-bottom-color:var(--gold)}
@media (min-width:760px){.tabbar ul{justify-content:center;gap:1.2rem}}
.tab[hidden]{display:none}
.hero{min-height:calc(88svh - 48px)}
.welcome{max-width:640px;text-align:left}
.welcome p{font-size:1.2rem}
.center{text-align:center;justify-content:center}
.welcome h2.center::after{display:none}
.welcome-cranes{display:block;margin:0 auto 1rem;width:140px;height:48px;color:var(--ink)}
.welcome-cranes use+use{color:var(--wine)}
.sign{font-style:italic;font-size:1.3rem!important;margin-top:1.5rem}
.btn{display:inline-block;background:var(--night);color:#f3ecdf;padding:.6rem 1.6rem;text-decoration:none}
.hint{margin:-.4rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form button:disabled{opacity:.6}
.notfound{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center}