:root{
  --ink:#14161A; --ink-soft:#3A4048; --line:#DEE2E6;
  --paper:#FAF9F7; --card:#FFFFFF;
  --accent:#1D6B4F; --accent-soft:#E7F0EC;
  --gold:#A5854E;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fu:'Jost',-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* 日本語の改行を単語（文節）単位にする */
:lang(ja),body{
  line-break:strict;
  overflow-wrap:break-word;
  word-break:auto-phrase;
}
.photo-lead,.photo-title,.h2,.say-ja,.point-body,.sl-name,.sl-tag,.backhome h2{
  word-break:auto-phrase;
  text-wrap:pretty;
}
.say-en{word-break:normal;text-wrap:pretty;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:var(--fu); background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#deck{
  height:100dvh; overflow-y:scroll; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
#deck::-webkit-scrollbar{display:none;}
.slide{
  height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  position:relative; overflow:hidden;
}

/* progress */
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(0,0,0,.06);z-index:60;}
.prog-bar{height:100%;width:0;background:var(--accent);transition:width .35s ease;}

/* topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:52px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px; background:rgba(250,249,247,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar.on-dark{background:rgba(20,22,26,.55);border-bottom-color:rgba(255,255,255,.14);}
.home-btn{
  display:flex;align-items:center;gap:6px;border:none;background:none;
  font-family:var(--fu);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);
  cursor:pointer;padding:8px 10px;border-radius:4px;text-decoration:none;
}
.topbar.on-dark .home-btn{color:rgba(255,255,255,.8);}
.pageno{font-family:var(--fu);font-size:11px;letter-spacing:.14em;color:#9AA0A6;}
.topbar.on-dark .pageno{color:rgba(255,255,255,.5);}

/* photo slide */
.photo{position:absolute;inset:0;background-size:cover;background-position:center;}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.45) 0%,rgba(10,12,15,.15) 40%,rgba(10,12,15,.82) 100%);}
.photo-body{
  position:absolute;inset:auto 0 0 0;padding:0 7vw 84px;color:#fff;z-index:2;
}
.photo-eye{font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.72);text-transform:uppercase;margin-bottom:12px;
  display:inline-flex;align-items:center;gap:8px;}
.photo-eye::before{content:'';width:22px;height:1px;background:rgba(255,255,255,.6);}
.photo-title{font-family:var(--fd);font-weight:600;font-size:clamp(30px,7vw,54px);line-height:1.1;letter-spacing:.02em;}
.photo-sub{font-family:var(--fu);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-top:9px;text-transform:uppercase;}
.photo-lead{font-family:var(--fd);font-size:clamp(17px,3.4vw,23px);line-height:1.7;color:rgba(255,255,255,.94);margin-top:18px;max-width:38ch;}

/* caption slide (image top / text bottom) */
.split{display:flex;flex-direction:column;height:100%;}
.split-img{flex:0 0 46%;background-size:cover;background-position:center;}
.split-body{flex:1;padding:26px 7vw 84px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:10px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;}
.h2{font-family:var(--fd);font-size:clamp(24px,5vw,36px);font-weight:600;line-height:1.22;margin-bottom:14px;}
.points{display:grid;gap:11px;}
.point{display:flex;gap:11px;align-items:flex-start;}
.point-mark{
  flex-shrink:0;width:19px;height:19px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.point-body{font-size:14px;line-height:1.7;color:var(--ink-soft);}
.point-body b{font-weight:500;color:var(--ink);}

/* script slide */
.script-slide{padding:66px 7vw 84px;display:flex;flex-direction:column;justify-content:center;height:100%;}
.say{background:transparent;border-left:2px solid #B99B66;padding:0 0 0 18px;border-radius:0;}
.say-label{font-size:9px;letter-spacing:.24em;color:#B99B66;text-transform:uppercase;margin-bottom:9px;font-weight:600;}
.say-ja{font-size:15px;line-height:1.95;color:#F5F3EF;}
.say-en{font-size:13px;line-height:1.85;color:#A8AEB6;margin-top:12px;font-style:italic;}
.meta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.chip{font-size:12px;letter-spacing:.04em;color:#B99B66;background:transparent;padding:0;border-radius:0;}
.chip::before{content:'#';opacity:.65;margin-right:1px;}

/* script slide on dark */
.split.is-dark{background:#0E0F11;}
.split.is-dark .split-body{background:#0E0F11;}
.split.is-dark .kicker{color:#B99B66;}

/* back home */
.backhome{background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 7vw;height:100%;}
.backhome h2{font-family:var(--fd);font-weight:300;font-size:clamp(24px,4.6vw,34px);letter-spacing:.08em;line-height:1.35;}
.backhome .rule{width:52px;height:1px;background:rgba(255,255,255,.3);margin:24px auto;}
.home-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  background:#fff;color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;
}
.home-cta:active{opacity:.75;}
.next-hint{font-size:11px;color:rgba(255,255,255,.45);margin-top:22px;letter-spacing:.06em;}

/* scroll hint */
.hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:9px;letter-spacing:.24em;color:#B4B9BE;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.hint.on-photo{color:rgba(255,255,255,.75);}
.hint svg{animation:bob 1.9s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media (min-width:820px){
  .photo-body{padding:0 12vw 90px;}
  .split-body{padding:30px 12vw 90px;}
  .script-slide{padding:80px 12vw 90px;}
  .split-img{flex-basis:52%;}
}