:root{
  --bg:#10100f;
  --surface:#171614;
  --text:#f4efe8;
  --muted:#c4b9ab;
  --soft:#93887a;
  --accent:#c2a06d;
  --paper:#eee6d9;
  --paper-text:#252019;
  --paper-muted:#5a5046;
  --line:rgba(255,255,255,.13);
  --page:clamp(18px,6vw,72px);
  --nav-h:42px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;
  line-height:1.78;
  overflow-x:hidden;
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
body,input,button{font:inherit}
button,input{color:inherit}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
body.access-locked{min-height:100svh;overflow:hidden;padding-bottom:0}
body.access-locked > header,
body.access-locked > nav,
body.access-locked > main,
body.access-locked > aside,
body.access-locked > footer{display:none!important}
.access-gate{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(44px + env(safe-area-inset-top)) var(--page) calc(44px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(16,16,15,.92)),
    url("assets/photos/40_beach.jpg") center 44%/cover no-repeat;
  text-align:center;
}
.access-gate__inner{width:min(420px,100%)}
.access-gate__eyebrow{margin:0 0 16px;color:var(--accent);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.access-gate h1{margin:0 0 12px;font-size:clamp(48px,16vw,76px);line-height:1.08;font-weight:500}
.access-gate p:not(.access-gate__eyebrow):not(.access-error){margin:0;color:#ddd4ca;font-size:16px;line-height:1.8}
.access-form{width:min(300px,100%);margin:42px auto 0}
.access-field{display:block;text-align:left}
.access-field span{display:block;margin:0 0 8px;color:#b9afa3;font-size:12px;letter-spacing:.12em}
.access-field input{
  width:100%;
  min-height:46px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  padding:10px 12px;
  background:rgba(0,0,0,.34);
  color:#fff6eb;
  outline:none;
}
.access-field input:focus{border-color:rgba(194,160,109,.76);box-shadow:0 0 0 3px rgba(194,160,109,.14)}
.access-submit{
  width:100%;
  min-height:46px;
  margin-top:14px;
  border:0;
  border-radius:999px;
  background:#eee5d8;
  color:#17130f;
  cursor:pointer;
}
.access-submit:disabled{opacity:.72;cursor:default}
.access-error{margin:12px 0 0!important;color:#e8b8a5!important;font-size:13px!important;line-height:1.6!important}

.hero{
  min-height:92svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden;
}
.hero__image,.final__image{
  position:absolute;
  inset:0;
  background:url("assets/photos/36_snow_mountain.jpg") center 42%/cover no-repeat;
  z-index:-2;
}
.hero::after,.final::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(16,16,15,.88) 72%,var(--bg));
}
.hero__content{
  width:min(960px,calc(100vw - var(--page)*2));
  margin:0 auto;
  padding:calc(78px + env(safe-area-inset-top)) 0 8svh;
}
.eyebrow,.chapter-kicker{
  margin:0 0 12px;
  color:var(--accent);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1,h2,h3,p,figure{margin-top:0}
h1{
  margin:.2em 0 .34em;
  font-size:clamp(44px,14vw,104px);
  line-height:1.06;
  font-weight:500;
}
.hero p:not(.eyebrow){max-width:650px;color:#ded5ca;font-size:clamp(15px,2.2vw,20px)}
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin-top:24px}
.counters div{border:1px solid var(--line);background:rgba(0,0,0,.28);border-radius:8px;padding:13px 15px;backdrop-filter:blur(12px)}
.counters strong{display:block;font-size:30px;line-height:1.15;font-weight:500}
.counters span{display:block;margin-top:4px;color:#b9afa3;font-size:11px;letter-spacing:.08em}

.chapter-nav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  gap:8px;
  overflow-x:auto;
  min-height:var(--nav-h);
  padding:calc(6px + env(safe-area-inset-top)) var(--page) 7px;
  background:rgba(16,16,15,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  scrollbar-width:none;
  scroll-padding-left:var(--page);
}
.chapter-nav::-webkit-scrollbar,.gallery--scroll::-webkit-scrollbar{display:none}
.chapter-nav a{
  flex:0 0 auto;
  text-decoration:none;
  color:#d5ccc0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:5px 11px;
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
}

.chapter{padding:72px 0 82px}
.section-head,.story-text,.timeline{width:min(760px,calc(100vw - var(--page)*2));margin-left:auto;margin-right:auto}
.section-head{margin-bottom:26px}
h2{margin-bottom:14px;font-size:clamp(31px,8vw,62px);line-height:1.18;font-weight:500}
.lead{max-width:720px;color:#d0c7bb;font-size:clamp(16px,2.4vw,20px)}
.story-text{
  margin-top:26px;
  margin-bottom:30px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#cdc3b7;
  font-size:16px;
}
.story-text p{margin-bottom:1em}
.story-text p:last-child{margin-bottom:0}
.big-line{
  width:min(760px,calc(100vw - var(--page)*2));
  margin:26px auto 72px;
  text-align:center;
  font-size:clamp(24px,6vw,42px);
  line-height:1.55;
}
.big-line small{display:block;margin-top:16px;color:var(--accent);font-size:11px;letter-spacing:.14em}

.photo-card{
  margin:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
  color:#ece4da;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
.photo-media{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#111;
}
.photo-media img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:72svh;
  object-fit:contain;
  object-position:center;
}
.photo-card figcaption{
  padding:10px 12px 12px;
  background:var(--surface);
  color:#d8cfc3;
  font-size:12px;
  line-height:1.6;
}
.photo-card--large{
  width:min(900px,calc(100vw - var(--page)*2));
  margin:30px auto;
}
.photo-card--large .photo-media{background:#10100f}
.photo-card--large .photo-media img{max-height:82svh}
.photo-card[data-emphasis="memory"]{box-shadow:0 22px 58px rgba(0,0,0,.24)}
.photo-card--large[data-emphasis="memory"]{margin-top:38px;margin-bottom:44px}
.photo-card--large[data-emphasis="screen"]{width:min(360px,calc(100vw - var(--page)*2));margin-top:34px;margin-bottom:40px}
.gallery--scroll .photo-card[data-emphasis="memory"]{flex-basis:min(78vw,390px)}
.gallery--scroll .photo-card[data-emphasis="screen"]{flex-basis:min(48vw,260px)}
.gallery--scroll .photo-card[data-emphasis="quiet"]{flex-basis:min(52vw,280px)}
.gallery--scroll + .story-text,.gallery--scroll + .photo-card--large{margin-top:42px}
.photo-card[data-framed="true"] .photo-media{
  aspect-ratio:var(--ratio,4/3);
  align-items:stretch;
  overflow:hidden;
}
.photo-card[data-framed="true"] .photo-media img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:var(--fit,cover);
  object-position:var(--position,center);
}

.swipe-hint{
  width:min(760px,calc(100vw - var(--page)*2));
  margin:12px auto 8px;
  color:var(--soft);
  font-size:12px;
  letter-spacing:.08em;
}
.swipe-hint::after{content:"  >";color:var(--accent)}
.gallery--scroll{
  width:100vw;
  margin:0 0 24px calc(50% - 50vw);
  display:flex;
  gap:12px;
  align-items:flex-start;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--page);
  padding:4px calc(var(--page) + 18vw) 18px var(--page);
  scrollbar-width:none;
}
.gallery--scroll .photo-card{flex:0 0 min(72vw,360px);scroll-snap-align:start}
.gallery--pair .photo-card{flex-basis:min(68vw,420px)}
.gallery--small .photo-card{flex-basis:min(56vw,310px)}
.gallery--portrait .photo-card{flex-basis:min(64vw,330px)}

.chapter--paper{background:var(--paper);color:var(--paper-text)}
.chapter--paper .lead,.chapter--paper .story-text{color:var(--paper-muted)}
.chapter--paper .story-text{border-color:rgba(37,32,25,.16)}
.chapter--paper .chapter-kicker{color:#8b704a}
.chapter--paper .photo-card{box-shadow:0 16px 42px rgba(78,54,24,.12)}
.ticket{
  width:min(860px,calc(100vw - var(--page)*2));
  margin:30px auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:22px;
  border-radius:8px;
  background:#fbf4e9;
  box-shadow:0 18px 44px rgba(72,50,22,.12);
}
.ticket div{text-align:center}
.ticket strong{display:block;font-size:30px;font-weight:500;line-height:1.25}
.ticket span,.ticket p{color:#756858;font-size:11px;letter-spacing:.12em}
.ticket p{margin:0;text-align:center;white-space:nowrap}
.ticket p::before{content:"";display:block;width:108px;margin:0 auto 8px;border-top:1px dashed #a9957b}
.timeline{border-left:1px solid var(--line);padding-left:24px;margin-top:28px;margin-bottom:30px}
.timeline article{position:relative;padding-bottom:28px}
.timeline article::before{content:"";position:absolute;left:-30px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--bg)}
.timeline time{color:var(--accent);font-size:12px;letter-spacing:.14em}
.timeline h3{margin:4px 0 6px;font-size:21px;font-weight:500}
.timeline p{margin:0;color:#c3b9ad;font-size:15px}

.audio-dock{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:50;
  display:flex;
  align-items:center;
  gap:9px;
  max-width:min(330px,calc(100vw - 24px));
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(20,19,17,.9);
  box-shadow:0 14px 38px rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
}
.audio-button,.voice-button{
  border:0;
  cursor:pointer;
  background:#eee5d8;
  color:#17130f;
}
.audio-button{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:19px;
  line-height:1;
}
.audio-button.is-playing{background:#d8bd8a}
.audio-panel{min-width:0;padding-right:8px}
.audio-state{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#efe7de;font-size:12px;line-height:1.3}
.volume-control{display:flex;align-items:center;gap:8px;margin-top:4px;color:#aaa096;font-size:11px}
.volume-control input{width:118px;accent-color:var(--accent)}

.final{
  min-height:112svh;
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:end center;
  padding:calc(88px + env(safe-area-inset-top)) var(--page) calc(132px + env(safe-area-inset-bottom));
  text-align:center;
  overflow:hidden;
}
.final::after{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.62) 42%,rgba(16,16,15,.92))}
.final__content{width:min(680px,100%)}
.final h2{font-size:clamp(36px,8vw,68px);font-weight:500;line-height:1.18;margin-bottom:22px}
.final p:not(.eyebrow){color:#ddd4ca;font-size:16px}
.final-copy{max-width:620px;margin:0 auto;color:#ddd4ca}
.final-copy p{margin-bottom:12px;line-height:1.86}
.final-copy p:last-child{margin-bottom:0}
.final-spacer{height:clamp(38px,8svh,88px)}
.voice-box{
  width:min(480px,100%);
  margin:0 auto;
  padding:20px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background:rgba(0,0,0,.38);
  text-align:center;
}
.voice-box__label{margin:0 0 10px!important;color:var(--accent)!important;font-size:11px!important;letter-spacing:.14em}
.voice-button{min-height:44px;border-radius:999px;padding:10px 20px;font-size:14px;transition:background .2s ease,color .2s ease,opacity .2s ease}
.voice-button:disabled{cursor:default;opacity:.9}
.voice-box[data-voice-state="playing"] .voice-button{background:#d8bd8a}
.voice-box[data-voice-state="done"] .voice-button{background:#f4ead8}
.voice-status{margin:12px 0 0!important;color:#c8beb4!important;font-size:12px!important;line-height:1.7!important}
.voice-reveal{max-width:520px;margin:22px auto 0!important;color:#fff6eb!important;font-size:23px!important;line-height:1.56!important}

@media (min-width: 860px){
  .gallery--scroll{padding-right:var(--page)}
  .gallery--scroll .photo-card{flex-basis:min(30vw,360px)}
  .gallery--pair .photo-card{flex-basis:min(38vw,430px)}
  .gallery--small .photo-card{flex-basis:min(24vw,300px)}
  .gallery--portrait .photo-card{flex-basis:min(28vw,330px)}
  .photo-media img{max-height:70vh}
}

@media (max-width: 520px){
  :root{--page:20px;--nav-h:39px}
  body{line-height:1.82;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .hero{min-height:88svh}
  .hero__content{padding-bottom:6svh}
  h1{font-size:46px}
  .counters{grid-template-columns:1fr;gap:8px;max-width:330px}
  .counters div{padding:11px 13px}
  .counters strong{font-size:28px}
  .chapter-nav{gap:7px;padding-bottom:6px}
  .chapter-nav a{font-size:12px;padding:5px 10px}
  .chapter{padding:64px 0 76px}
  .section-head{margin-bottom:26px}
  h2{font-size:31px;line-height:1.22}
  .lead{font-size:16px;line-height:1.82}
  .story-text{font-size:15px;line-height:1.92;margin-top:28px;margin-bottom:32px;padding:20px 0}
  .photo-card--large{margin-top:32px;margin-bottom:38px}
  .photo-media img{max-height:70svh}
  .photo-card--large .photo-media img{max-height:76svh}
  .photo-card--large[data-emphasis="memory"]{width:min(360px,calc(100vw - var(--page)*2));margin-top:36px;margin-bottom:46px}
  .photo-card--large[data-emphasis="screen"]{width:min(316px,calc(100vw - var(--page)*2));margin-top:34px;margin-bottom:44px}
  .gallery--scroll{gap:12px;margin-bottom:34px;padding:6px calc(var(--page) + 18vw) 24px var(--page)}
  .gallery--scroll .photo-card{flex-basis:66vw}
  .gallery--pair .photo-card{flex-basis:64vw}
  .gallery--small .photo-card{flex-basis:52vw}
  .gallery--portrait .photo-card{flex-basis:60vw}
  .gallery--scroll .photo-card[data-emphasis="memory"]{flex-basis:76vw}
  .gallery--scroll .photo-card[data-emphasis="screen"]{flex-basis:48vw}
  .gallery--scroll .photo-card[data-emphasis="quiet"]{flex-basis:50vw}
  .ticket{grid-template-columns:1fr;padding:20px 16px;gap:12px}
  .ticket p{white-space:normal}
  .ticket p::before{width:86px}
  .audio-dock{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));border-radius:14px;justify-content:flex-start}
  .audio-panel{flex:1}
  .audio-state{max-width:none}
  .volume-control input{width:100%}
  .final{min-height:114svh;text-align:left;place-items:end start;padding-top:calc(82px + env(safe-area-inset-top));padding-bottom:calc(136px + env(safe-area-inset-bottom))}
  .final h2{font-size:34px;line-height:1.22}
  .final-copy p{font-size:15px;line-height:1.9}
  .final-spacer{height:48px}
  .voice-box{text-align:left}
  .voice-reveal{margin-left:0!important;font-size:21px!important;line-height:1.62!important}
}

@media (max-width: 374px){
  :root{--page:17px}
  h1{font-size:42px}
  h2{font-size:30px}
  .gallery--pair .photo-card{flex-basis:68vw}
  .gallery--small .photo-card{flex-basis:56vw}
  .gallery--portrait .photo-card{flex-basis:64vw}
  .audio-button{width:40px;height:40px;flex-basis:40px}
  .final h2{font-size:31px}
  .voice-button{width:100%;padding-left:14px;padding-right:14px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}