*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:        #FAF8F3;
  --bg-warm:   #F2EBE0;
  --bg-header: #EDE4D6;
  --text:      #261A0F;
  --text-mid:  #4A3828;
  --text-light:#7A6858;
  --accent:    #8B5E3C;
  --accent2:   #C4935A;
  --rule:      rgba(139,94,60,0.18);
  --serif:     'Shippori Mincho','Hiragino Mincho ProN',serif;
  --sans:      'Noto Sans JP','Hiragino Sans',sans-serif;
  --en:        'NumericOverride','Cormorant Garamond',Georgia,serif;
}

/* Numeric override — Playfair Display for digits only */
@font-face{
  font-family:'NumericOverride';
  src:local('Playfair Display');
  unicode-range:U+0030-0039;
}
body{font-family:var(--sans);font-weight:400;background:var(--bg);color:var(--text);line-height:1.9;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── HEADER ── */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 52px;transition:background 0.4s,backdrop-filter 0.4s}
.hd.scrolled{background:rgba(250,248,243,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hd-logo{font-family:var(--en);font-size:13px;letter-spacing:0.45em;font-weight:600;color:var(--accent);text-decoration:none;text-transform:uppercase}
.hd-vol{font-family:var(--en);font-size:12px;letter-spacing:0.35em;color:var(--text-light);text-transform:uppercase}

/* ── HERO ── */
.hero{position:relative;height:92vh;min-height:580px;max-height:900px;overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;background:url('https://images.naturalquest.org/interview/vol09/deko_main.jpg') center 20%/cover no-repeat}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(240,230,215,0) 0%,rgba(240,230,215,0) 55%,rgba(38,26,15,0.35) 78%,rgba(38,26,15,0.6) 100%)}
.hero-body{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:0 68px 80px}
.hero-box{display:inline-block;background:rgba(250,248,243,0.82);backdrop-filter:blur(8px);padding:28px 36px 32px;border-left:3px solid var(--accent2);max-width:min(480px,55vw)}
.hero-series{font-family:var(--en);font-size:11px;letter-spacing:0.5em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:16px;animation:fadeUp 0.9s ease 0.5s both}
.hero-name{font-family:var(--serif);font-size:clamp(32px,4vw,56px);font-weight:600;letter-spacing:0.12em;line-height:1.1;color:var(--text);margin-bottom:10px;animation:fadeUp 0.9s ease 0.75s both}
.hero-role{font-size:clamp(13px,1.5vw,15px);font-weight:500;color:var(--text-mid);letter-spacing:0.18em;margin-bottom:18px;animation:fadeUp 0.9s ease 1.0s both}
.hero-desc{font-size:clamp(12px,1.3vw,13px);font-weight:400;color:var(--text-mid);line-height:1.95;letter-spacing:0.03em;margin-top:16px;padding-top:16px;border-top:1px solid rgba(139,94,60,0.2);animation:fadeUp 0.9s ease 1.15s both}

.hero-scroll{position:absolute;bottom:32px;right:68px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fadeIn 1s ease 2.2s both;cursor:pointer;text-decoration:none}
.hero-scroll span{font-family:var(--en);font-size:8px;letter-spacing:0.5em;color:rgba(210,185,150,0.65);text-transform:uppercase;writing-mode:vertical-rl}
.hero-scroll-bar{width:1px;height:48px;background:linear-gradient(to bottom,var(--accent2),transparent)}

/* ── INTRO ── */
.intro{max-width:640px;margin:0 auto;padding:80px 40px 68px;text-align:center;border-bottom:1px solid var(--rule)}
.intro-credits{font-family:var(--en);font-size:13px;letter-spacing:0.2em;color:var(--text-light);margin-bottom:36px;font-weight:700}
.intro-lead{font-size:clamp(14px,1.6vw,16px);line-height:2.3;color:var(--text-mid);text-align:justify;text-justify:inter-character;font-weight:400}

/* ── CHAPTER ── */
.chapter{background:var(--bg)}

/* Photo */
.photo-wrap{overflow:hidden;position:relative}
.photo-img{width:100%;height:clamp(280px,46vw,560px);background-size:cover;background-position:center}

/* Crossfade */
.photo-fade{position:relative;width:100%;height:clamp(280px,46vw,560px);overflow:hidden}
.photo-fade .fa,.photo-fade .fb{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 2.2s ease-in-out}
.photo-fade .fa{opacity:1}
.photo-fade .fb{opacity:0}
.photo-fade.show-b .fa{opacity:0}
.photo-fade.show-b .fb{opacity:1}

/* Chapter header */
/* Sub box overlaid on photo */
.ch-sub-box{
  position:absolute;bottom:24px;left:4%;z-index:10;
  display:inline-flex;align-items:center;gap:16px;
  background:rgba(250,246,240,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:11px 28px 11px 20px;
  box-shadow:0 2px 16px rgba(38,26,15,0.12);
  opacity:0;transform:translateX(-48px);
  transition:opacity 1.0s ease 0.8s,transform 1.1s cubic-bezier(0.25,0.46,0.45,0.94) 0.8s;
}
.photo-wrap.seen .ch-sub-box{opacity:1;transform:translateX(0)}
.photo-fade.seen .ch-sub-box{opacity:1;transform:translateX(0)}

.ch-num{font-family:var(--en);font-size:11px;letter-spacing:0.4em;color:var(--accent);text-transform:uppercase;font-weight:700;white-space:nowrap}
.ch-sub{font-family:var(--serif);font-size:13px;font-weight:500;color:var(--text-mid);letter-spacing:0.08em}

/* Body */
.ch-body{max-width:700px;margin:0 auto;padding:52px 40px 68px;border-bottom:1px solid var(--rule)}
.ch-title{font-family:var(--serif);font-size:clamp(19px,2.4vw,27px);font-weight:600;letter-spacing:0.04em;color:var(--text);line-height:1.6;margin-bottom:36px;opacity:0;transition:opacity 0.75s ease}
.ch-title.on{opacity:1}
.ch-body p{font-size:clamp(14px,1.5vw,16px);line-height:2.3;color:var(--text-mid);text-align:justify;text-justify:inter-character;font-weight:400;margin-bottom:28px}
.ch-body p:last-child{margin-bottom:0}

/* Pull quote */
.pull{margin:44px -40px;padding:44px 40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.pull p{font-family:var(--serif);font-size:clamp(16px,2vw,20px)!important;font-weight:500!important;color:var(--text)!important;line-height:2.1!important;letter-spacing:0.06em;margin-bottom:0!important}

/* Keyword */
.keyword{font-size:13px;font-weight:400;color:var(--text-light);background:var(--bg-warm);border:1px solid var(--rule);padding:16px 20px;margin:24px 0;line-height:1.9}
.keyword-label{font-family:var(--en);font-size:9px;letter-spacing:0.45em;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:6px;font-weight:600}

/* Reveal */
.rv{opacity:0;transition:opacity 0.8s ease}
.rv.d1{transition-delay:0.12s}
.rv.d2{transition-delay:0.24s}
.rv.on{opacity:1}

/* ── PROFILE ── */
.profile{background:var(--bg-warm);padding:0 0 100px}
.profile-in{max-width:860px;margin:0 auto;padding:64px 40px 0}
.profile-img{width:100%;height:clamp(300px,45vw,600px);background:url('https://images.naturalquest.org/interview/vol09/deko_profile.jpg') center 25%/cover no-repeat}
.profile-label{font-family:var(--en);font-size:11px;letter-spacing:0.55em;color:var(--accent);text-transform:uppercase;text-align:center;margin-bottom:12px;display:block;font-weight:600}
.profile-title{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:600;letter-spacing:0.1em;text-align:center;margin-bottom:52px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.tl{position:relative;padding-left:36px}
.tl::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--accent);opacity:0.3}
.tl-row{position:relative;margin-bottom:28px;display:grid;grid-template-columns:100px 1fr;gap:24px;align-items:start}
.tl-row::before{content:'';position:absolute;left:-32px;top:8px;width:7px;height:7px;border-radius:50%;border:1px solid var(--accent);background:var(--bg-warm)}
.tl-yr{font-family:var(--en);font-size:13px;letter-spacing:0.08em;color:var(--accent);font-weight:600;padding-top:2px}
.tl-txt{font-size:14px;line-height:2.0;color:var(--text-mid);font-weight:400}
.book{margin-top:44px;padding:18px 22px;border-left:3px solid var(--accent2);background:rgba(196,147,90,0.07)}
.book-label{font-family:var(--en);font-size:9px;letter-spacing:0.42em;color:var(--accent2);text-transform:uppercase;display:block;margin-bottom:8px;font-weight:600}
.book p{font-size:13px;color:var(--text-light);line-height:1.85}

/* ── FOOTER ── */
.footer{text-align:center;padding:60px 40px 72px;border-top:1px solid var(--rule);background:var(--bg)}
.footer-series{font-family:var(--en);font-size:11px;letter-spacing:0.5em;color:var(--text-light);text-transform:uppercase;margin-bottom:10px;font-weight:500}
.footer-copy{font-family:var(--en);font-size:14px;color:#888;letter-spacing:0.1em;font-weight:500}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── RESPONSIVE ── */
@media(max-width:767px){
  .pull{margin:32px 0;padding:28px 0;border-top:none;border-bottom:none}
  .ch-body p{font-size:15px}
  .hd{padding:14px 20px}
  .hd-vol{display:none}
  .hero{height:auto;min-height:0;max-height:none;display:block}
  .hero-img{position:relative;height:68vw;min-height:240px;transform:none!important}
  .hero-grad{background:linear-gradient(180deg,transparent 0%,rgba(38,26,15,0) 40%,rgba(38,26,15,0.8) 80%,rgba(38,26,15,0.97) 100%)}
  .hero-body{padding:24px 24px 48px;position:relative}
  .hero-box{max-width:100%;backdrop-filter:none;box-shadow:none}
  .hero-name{font-size:clamp(36px,10vw,52px)}
  .hero-scroll{display:none}
  .intro{padding:50px 24px 44px}
  .photo-img,.photo-fade{height:58vw;min-height:200px}
  .ch-header{padding:24px 24px 22px}
  .ch-title{font-size:clamp(16px,4.5vw,20px)}
  .ch-body{padding:36px 24px 44px}
  .profile{padding:52px 24px 64px}
  .tl{padding-left:24px}
  .tl-row{grid-template-columns:1fr;gap:4px}
  .tl-row::before{left:-20px}
  .footer{padding:44px 24px 52px}
}
@media(min-width:768px) and (max-width:1024px){
  .hero-body{padding:0 44px 72px}
  .ch-header{padding:26px 44px 28px}
  .ch-body{padding:52px 40px 64px}
}