/* ============================================================
   我们的故事 · Love Memories — Design System
   ============================================================ */
:root{
  --font-serif:"Songti SC","Noto Serif SC","SimSun",Georgia,serif;
  --font-hand:"Kaiti SC","KaiTi","STKaiti",cursive;
  --font-mono:"SFMono-Regular","JetBrains Mono",Consolas,monospace;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 10px 30px rgba(0,0,0,.08);
  --shadow-lift:0 18px 44px rgba(0,0,0,.16);
  --nav-h:58px;
}
/* ---- Themes ---- */
[data-theme="starlight"]{
  --bg0:#070b1f; --bg1:#12163a; --bg2:#221243;
  --ink:#f2f4ff; --soft:rgba(242,244,255,.68);
  --accent:#ffd27d; --accent2:#7ea6ff; --accent3:#ff9ec7;
  --card:rgba(255,255,255,.055); --card-border:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.12); --glass:rgba(10,14,40,.55);
  --grad-hero:linear-gradient(180deg,#070b1f 0%,#10153a 55%,#221243 100%);
}
[data-theme="cream"]{
  --bg0:#fdf7ee; --bg1:#f8eedd; --bg2:#f2e3cb;
  --ink:#4a3b31; --soft:rgba(74,59,49,.68);
  --accent:#e58f9e; --accent2:#d9a86c; --accent3:#a8c7a2;
  --card:#fffdf9; --card-border:#eadfca;
  --line:rgba(122,96,66,.16); --glass:rgba(253,247,238,.88);
  --grad-hero:linear-gradient(180deg,#fdf7ee 0%,#f8eedd 60%,#f4e7d2 100%);
}
[data-theme="film"]{
  --bg0:#16100c; --bg1:#221811; --bg2:#2b1e14;
  --ink:#efe3cf; --soft:rgba(239,227,207,.62);
  --accent:#e0863a; --accent2:#c94f3d; --accent3:#e8c76a;
  --card:#221811; --card-border:#3c2f1f;
  --line:rgba(239,227,207,.14); --glass:rgba(24,17,12,.8);
  --grad-hero:linear-gradient(180deg,#16100c 0%,#221811 60%,#2b1e14 100%);
}
[data-theme="editorial"]{
  --bg0:#faf7f1; --bg1:#f3eee5; --bg2:#ece5d8;
  --ink:#1c1a17; --soft:rgba(28,26,23,.6);
  --accent:#b4552d; --accent2:#8d7a5f; --accent3:#6e8b6a;
  --card:#fffefb; --card-border:#e3dccd;
  --line:rgba(28,26,23,.16); --glass:rgba(250,247,241,.9);
  --grad-hero:linear-gradient(180deg,#faf7f1,#f3eee5);
}

/* ---- Base ---- */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg0); color:var(--ink);
  line-height:1.7; font-size:16px;
  transition:background .6s var(--ease), color .6s var(--ease);
  overflow-x:hidden;
}
body.admin-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--bg0)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* film grain */
body[data-theme="film"]::after, html[data-theme="film"] body::after{
  content:"";position:fixed;inset:-50%;z-index:2147483000;pointer-events:none;opacity:.08;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}

/* ---- Nav ---- */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--glass);border-bottom:1px solid transparent;transition:.4s var(--ease)}
#nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(0,0,0,.08)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-weight:700;font-size:17px;letter-spacing:1px}
.brand svg{fill:var(--accent2);transition:.5s var(--ease)}
.brand:hover svg{transform:scale(1.12) rotate(-8deg);fill:var(--accent3)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:99px;font-size:14px;color:var(--soft);transition:.25s}
.nav-links a:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-right{display:flex;align-items:center;gap:6px}
.gear{font-size:18px;padding:8px;border-radius:50%;opacity:.75;transition:.3s;line-height:1}
.gear:hover{opacity:1;transform:rotate(60deg)}
.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
@media(max-width:820px){
  .nav-links{position:fixed;top:calc(var(--nav-h) + 8px);right:16px;flex-direction:column;
    background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--card-border);border-radius:var(--r-md);padding:10px;gap:2px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease);
    box-shadow:var(--shadow-lift);min-width:150px}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:10px 14px;font-size:15px}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Hero / Cover base ---- */
.hero{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;
  background:var(--grad-hero);transition:background .6s var(--ease)}
#coverInner{width:100%;position:relative;z-index:2}
.cover-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--soft);font-size:12px;letter-spacing:2px}
.cover-scroll .mouse{width:22px;height:36px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.cover-scroll .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;
  border-radius:2px;background:currentColor;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.cover-inner{max-width:1080px;margin:0 auto;padding:calc(var(--nav-h) + 30px) 24px 90px;position:relative}
.cover-names{font-family:var(--font-serif);font-size:clamp(15px,2.4vw,19px);letter-spacing:6px;opacity:.9;margin-bottom:14px}
.cover-names .heart{display:inline-block;margin:0 10px;animation:beat 1.6s var(--ease) infinite;color:var(--accent3)}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}36%{transform:scale(1.18)}50%{transform:scale(1)}}
.cover-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(34px,7vw,68px);line-height:1.25;letter-spacing:2px}
.cover-days-card{margin-top:30px;display:inline-flex;align-items:baseline;gap:10px;padding:18px 26px;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--card-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-soft)}
.cover-days-num{font-family:var(--font-serif);font-size:clamp(38px,6.5vw,56px);font-weight:700;line-height:1;
  background:linear-gradient(120deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.cover-days-unit{font-size:15px;color:var(--soft)}
.cover-next{margin-top:14px;font-size:15px;color:var(--soft)}
.cover-next b{color:var(--ink);font-weight:600}
.cover-cta{margin-top:30px;display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:99px;
  background:linear-gradient(120deg,var(--accent),var(--accent3));color:#1a1206;font-weight:600;font-size:15px;
  box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 35%,transparent);transition:.3s var(--ease)}
.cover-cta:hover{transform:translateY(-3px) scale(1.02)}

/* ---- Cover: starlight ---- */
.cover--starlight{text-align:center}
.cover--starlight #starsCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cover--starlight .moon{position:absolute;right:9%;top:12%;width:110px;height:110px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 35% 35%,#fff8e1,#ffd98a 55%,#f0b95c);
  box-shadow:0 0 60px 18px rgba(255,217,138,.35),0 0 140px 60px rgba(255,217,138,.14)}
.cover--starlight .moon::after{content:"";position:absolute;left:-14%;top:8%;width:100%;height:100%;border-radius:50%;
  background:var(--bg0);opacity:.85;filter:blur(2px);transform:translate(10%,-6%)}
.cover--starlight .cover-title{text-shadow:0 0 30px rgba(126,166,255,.55)}
.cover--starlight .cover-names{color:#cfe0ff}
@media(max-width:640px){.cover--starlight .moon{width:70px;height:70px;right:6%;top:9%}}

/* ---- Cover: cream ---- */
.cover--cream{text-align:left}
.cover--cream .cover-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.cover--cream .bunting{position:absolute;top:calc(var(--nav-h) + 6px);left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:1}
.cover--cream .flag{width:34px;height:42px;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:2px}
.cover--cream .flag:nth-child(odd){transform:rotate(-3deg)}
.cover--cream .flag:nth-child(even){transform:rotate(3deg) translateY(2px)}
.cover--cream .polaroid-stack{position:relative;width:min(360px,80vw);height:430px;margin:0 auto}
.cover--cream .polaroid{position:absolute;background:#fff;padding:12px 12px 54px;box-shadow:0 14px 34px rgba(90,60,30,.22);
  transition:.45s var(--ease);border-radius:4px}
.cover--cream .polaroid .ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#e8d9c2}
.cover--cream .polaroid .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-family:var(--font-hand);color:#7a5c40;font-size:16px}
.cover--cream .polaroid.p1{transform:rotate(-9deg);left:0;top:26px;width:62%;z-index:1}
.cover--cream .polaroid.p2{transform:rotate(7deg);right:0;top:0;width:56%;z-index:3}
.cover--cream .polaroid.p3{transform:rotate(-3deg);right:8%;top:220px;width:50%;z-index:2}
.cover--cream .polaroid-stack:hover .p1{transform:rotate(-12deg) translate(-10px,-6px)}
.cover--cream .polaroid-stack:hover .p2{transform:rotate(10deg) translate(8px,-4px)}
.cover--cream .polaroid-stack:hover .p3{transform:rotate(-6deg) translate(-4px,8px)}
.cover--cream .washi{position:absolute;width:88px;height:26px;background:rgba(229,143,158,.55);z-index:4;
  box-shadow:0 2px 5px rgba(0,0,0,.08);backdrop-filter:saturate(1.2)}
.cover--cream .washi.w1{top:-12px;left:-22px;transform:rotate(-14deg)}
.cover--cream .washi.w2{bottom:-8px;right:-18px;transform:rotate(10deg);background:rgba(168,199,162,.6)}
.cover--cream .doodle{position:absolute;font-size:30px;opacity:.9;animation:float 5s ease-in-out infinite;z-index:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(5deg)}}
.cover--cream .cover-title{font-family:var(--font-hand);font-weight:700;font-size:clamp(32px,5.5vw,52px);color:#6b4a38}
.cover--cream .cover-title .squiggle{position:relative;white-space:nowrap}
.cover--cream .cover-title .squiggle::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10'><path d='M2 7 Q 15 1 30 6 T 60 6 T 90 6 T 118 6' fill='none' stroke='%23e58f9e' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center/contain}
.cover--cream .cover-names{font-family:var(--font-hand);font-size:19px;color:#8a6a50}
.cover--cream .cover-days-card{background:#fffdf9;border:2px dashed #e7cfae;box-shadow:none}
.cover--cream .cover-days-num{background:linear-gradient(120deg,#e58f9e,#d9a86c);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover--cream .cover-cta{background:#e58f9e;color:#fff;box-shadow:0 8px 24px rgba(229,143,158,.4)}
@media(max-width:820px){
  .cover--cream .cover-inner{grid-template-columns:1fr;text-align:center;gap:26px}
  .cover--cream .polaroid-stack{height:330px;width:min(300px,74vw)}
  .cover--cream .polaroid.p3{top:170px}
}

/* ---- Cover: film ---- */
.cover--film{text-align:center}
.cover--film .filmstrip{position:absolute;left:-20px;right:-20px;height:74px;z-index:3;
  background:#0d0a07;display:flex;align-items:center;padding:0 8px;gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cover--film .filmstrip.top{top:0}
.cover--film .filmstrip.bottom{bottom:0}
.cover--film .filmstrip .holes{display:flex;flex:1;justify-content:space-around}
.cover--film .filmstrip .holes i{width:16px;height:28px;background:#efe3cf;border-radius:4px;opacity:.9}
.cover--film .cover-inner{padding-top:calc(var(--nav-h) + 110px);padding-bottom:120px}
.cover--film .type-mark{font-family:var(--font-mono);font-size:12px;letter-spacing:5px;color:var(--accent);text-transform:uppercase}
.cover--film .cover-title{font-family:var(--font-serif);font-weight:900;font-size:clamp(40px,8vw,80px);
  letter-spacing:8px;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.cover--film .date-stamp{display:inline-block;margin-top:16px;padding:6px 14px;border:2px solid var(--accent2);
  font-family:var(--font-mono);font-size:14px;letter-spacing:3px;color:var(--accent2);
  transform:rotate(-2deg);border-radius:3px}
.cover--film .cover-days-card{background:rgba(20,13,9,.72);border-color:rgba(224,134,58,.4)}
.cover--film .cover-days-num{background:linear-gradient(120deg,#e8c76a,#e0863a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover--film .cover-cta{background:linear-gradient(120deg,#e0863a,#c94f3d);color:#fff}
.cover--film .marquee{position:absolute;bottom:100px;left:0;right:0;z-index:2;overflow:hidden;
  padding:10px 0;background:rgba(13,10,7,.45);border-top:1px solid rgba(239,227,207,.15);border-bottom:1px solid rgba(239,227,207,.15)}
.cover--film .marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 36s linear infinite}
.cover--film .marquee .mp{width:120px;height:84px;object-fit:cover;border:3px solid #efe3cf;border-radius:2px;box-shadow:0 6px 16px rgba(0,0,0,.5)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.cover--film .filmstrip{height:48px}.cover--film .cover-inner{padding-top:calc(var(--nav-h) + 84px)}.cover--film .marquee{bottom:88px}}

/* ---- Cover: editorial ---- */
.cover--editorial{background:var(--grad-hero)}
.cover--editorial .cover-inner{max-width:1160px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.cover--editorial .ed-left{position:relative}
.cover--editorial .ed-bignum{font-family:var(--font-serif);font-weight:700;font-size:clamp(90px,16vw,190px);line-height:.9;
  letter-spacing:-4px;color:var(--ink)}
.cover--editorial .ed-bignum small{display:block;font-size:.28em;letter-spacing:10px;color:var(--accent);font-weight:500;margin-top:10px}
.cover--editorial .ed-right{border-left:1px solid var(--line);padding-left:44px;display:flex;flex-direction:column;gap:22px}
.cover--editorial .ed-eyebrow{font-size:12px;letter-spacing:6px;color:var(--soft);text-transform:uppercase}
.cover--editorial .cover-title{font-size:clamp(28px,4vw,44px);letter-spacing:4px;font-weight:600}
.cover--editorial .ed-rule{width:56px;height:1px;background:var(--accent)}
.cover--editorial .cover-days-card{background:transparent;border:none;box-shadow:none;padding:0;backdrop-filter:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cover--editorial .cover-days-num{color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial;
  font-size:clamp(34px,4vw,46px);font-weight:700}
.cover--editorial .cover-days-unit{font-size:13px;letter-spacing:4px}
.cover--editorial .cover-cta{background:var(--ink);color:var(--bg0);box-shadow:none;border-radius:2px;padding:12px 26px;font-size:13px;letter-spacing:3px}
.cover--editorial .ed-vert{position:absolute;right:-40px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:12px;letter-spacing:10px;color:var(--soft)}
@media(max-width:820px){
  .cover--editorial .cover-inner{grid-template-columns:1fr;gap:34px;text-align:center}
  .cover--editorial .ed-right{border-left:none;border-top:1px solid var(--line);padding:30px 0 0;align-items:center}
  .cover--editorial .cover-days-card{align-items:center}
  .cover--editorial .ed-vert{display:none}
}

/* ---- Sections ---- */
.section{padding:88px 0;position:relative}
.section-alt{background:var(--bg1);transition:background .6s var(--ease)}
.sec-head{margin-bottom:44px}
.sec-eyebrow{font-size:12px;letter-spacing:6px;color:var(--accent);text-transform:uppercase;font-weight:600;margin-bottom:8px}
.sec-title{font-family:var(--font-serif);font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:1px}
.sec-sub{margin-top:10px;color:var(--soft);font-size:15px;max-width:560px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---- Countdown cards ---- */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.cd-card{position:relative;border-radius:var(--r-lg);padding:26px 22px;background:var(--card);
  border:1px solid var(--card-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;transition:.35s var(--ease)}
.cd-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--accent) 45%,var(--card-border))}
.cd-card .cd-label{font-size:12px;letter-spacing:3px;color:var(--soft);text-transform:uppercase}
.cd-card .cd-num{font-family:var(--font-serif);font-weight:700;font-size:clamp(34px,4.4vw,44px);line-height:1.15;margin:8px 0 4px}
.cd-card .cd-date{font-size:13px;color:var(--soft)}
.cd-card .cd-chip{position:absolute;top:18px;right:18px;font-size:11px;padding:4px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);letter-spacing:1px}
.cd-card .cd-bar{height:4px;border-radius:2px;background:var(--line);margin-top:16px;overflow:hidden}
.cd-card .cd-bar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width 1.2s var(--ease)}

/* ---- On this day ---- */
.otd-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  border:1px solid var(--card-border);display:grid;grid-template-columns:280px 1fr;min-height:230px}
.otd-card .otd-ph{object-fit:cover;width:100%;height:100%;background:var(--bg1)}
.otd-body{padding:34px 34px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.otd-date{font-size:12px;letter-spacing:4px;color:var(--accent);font-weight:600}
.otd-title{font-family:var(--font-serif);font-size:clamp(20px,2.6vw,26px);font-weight:700}
.otd-text{color:var(--soft);font-size:15px;max-width:560px}
.otd-badge{position:absolute;top:18px;left:18px;padding:6px 14px;border-radius:99px;font-size:12px;
  background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--card-border);letter-spacing:2px}
@media(max-width:700px){.otd-card{grid-template-columns:1fr}.otd-card .otd-ph{height:200px}}

/* ---- Timeline ---- */
.tl{position:relative;max-width:860px;margin:0 auto;padding:10px 0}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,transparent,var(--accent) 8%,var(--accent2) 92%,transparent)}
.tl-item{position:relative;width:50%;padding:0 46px 54px 0}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 54px 46px}
.tl-node{position:absolute;top:6px;right:-15px;width:30px;height:30px;border-radius:50%;
  background:var(--bg0);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;z-index:2;
  transition:.4s var(--ease)}
.tl-node svg{width:13px;height:13px;fill:var(--accent)}
.tl-item:nth-child(even) .tl-node{right:auto;left:-15px}
.tl-item:hover .tl-node{transform:scale(1.25);background:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 20%,transparent)}
.tl-item:hover .tl-node svg{fill:var(--bg0)}
.tl-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  border:1px solid var(--card-border);transition:.35s var(--ease);box-shadow:var(--shadow-soft)}
.tl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.tl-ph{display:grid;gap:2px}
.tl-ph img{width:100%;height:100%;object-fit:cover;background:var(--bg1)}
.tl-ph.ph1{aspect-ratio:16/9}.tl-ph.ph1 img{aspect-ratio:16/9}
.tl-ph.ph2{grid-template-columns:1fr 1fr;aspect-ratio:16/8}
.tl-ph.ph3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/9}
.tl-ph.ph3 img:first-child{grid-row:1/3}
.tl-body{padding:20px 22px}
.tl-date{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:var(--accent)}
.tl-title{font-family:var(--font-serif);font-weight:700;font-size:19px;margin:6px 0 6px}
.tl-text{font-size:14px;color:var(--soft)}
.tl-place{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:12px;color:var(--soft);
  border:1px solid var(--line);padding:4px 10px;border-radius:99px}
@media(max-width:700px){
  .tl::before{left:17px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 44px 52px}
  .tl-node,.tl-item:nth-child(even) .tl-node{left:3px;right:auto}
}

/* ---- Gallery ---- */
.gal{columns:3;column-gap:22px}
.gal .gal-item{break-inside:avoid;margin-bottom:22px}
.polaroid-card{background:#fff;color:#4a3b31;padding:12px 12px 40px;border-radius:4px;box-shadow:0 10px 28px rgba(0,0,0,.14);
  position:relative;transition:.35s var(--ease);cursor:zoom-in}
.polaroid-card:hover{transform:rotate(0) scale(1.03) !important;box-shadow:0 18px 44px rgba(0,0,0,.22);z-index:2}
.polaroid-card img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:2px;background:#efe7da}
.polaroid-card .cap{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-hand);font-size:14px;color:#6d5644}
.polaroid-card .cap time{font-family:var(--font-mono);font-size:10px;color:#a08a72;letter-spacing:1px}
.gal-item:nth-child(3n+1) .polaroid-card{transform:rotate(-2.2deg)}
.gal-item:nth-child(3n+2) .polaroid-card{transform:rotate(1.6deg)}
.gal-item:nth-child(3n+3) .polaroid-card{transform:rotate(-1deg)}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:560px){.gal{columns:1}}

/* ---- Letters ---- */
.env-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.env{position:relative;height:170px;border-radius:var(--r-md);cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent2) 26%,var(--card)),var(--card));
  border:1px solid var(--card-border);transition:.35s var(--ease);box-shadow:var(--shadow-soft)}
.env:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.env .env-in{position:absolute;inset:14px;border:1.5px dashed color-mix(in srgb,var(--accent2) 55%,transparent);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center}
.env .env-in .to{font-family:var(--font-hand);font-size:20px;color:var(--ink)}
.env .env-in .from{font-size:12px;color:var(--soft);letter-spacing:2px}
.env .seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#e86f7f,#b0394e);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(176,57,78,.4);color:#fff;font-size:20px;transition:.35s var(--ease)}
.env:hover .seal{transform:translate(-50%,-50%) scale(1.12)}
.env .env-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 52%);opacity:0;transition:.4s var(--ease);
  background:color-mix(in srgb,var(--accent2) 14%,transparent)}
.env:hover .env-flap{opacity:1}
.letter-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px}
.lm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.lm-paper{position:relative;width:min(620px,94vw);max-height:86vh;overflow:auto;background:#fffdf6;color:#4a3a2c;
  border-radius:6px;padding:44px 40px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:paperIn .45s var(--ease);
  background-image:repeating-linear-gradient(transparent,transparent 31px,rgba(180,150,110,.16) 32px)}
@keyframes paperIn{from{transform:translateY(30px) scale(.96);opacity:0}}
.lm-paper .lm-to{font-family:var(--font-hand);font-size:22px;text-align:center;margin-bottom:6px}
.lm-paper .lm-from{text-align:center;font-size:12px;letter-spacing:3px;color:#a08a72;margin-bottom:20px}
.lm-paper .lm-content{font-family:var(--font-hand);font-size:17px;line-height:32px;white-space:pre-wrap;color:#4a3a2c}
.lm-paper .lm-date{text-align:right;font-family:var(--font-mono);font-size:12px;color:#a08a72;margin-top:18px;letter-spacing:2px}
.lm-close{position:absolute;top:14px;right:16px;font-size:20px;color:#a08a72;padding:6px;transition:.3s}
.lm-close:hover{color:#b0394e;transform:rotate(90deg)}

/* ---- Map ---- */
.map-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
#mapBox{height:540px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--card-border);
  background:var(--bg1);filter:saturate(.92)}
.place-list{display:flex;flex-direction:column;gap:12px;max-height:540px;overflow:auto}
.place-item{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--r-md);cursor:pointer;
  background:var(--card);border:1px solid var(--card-border);transition:.3s var(--ease)}
.place-item:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--card-border))}
.place-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--bg1)}
.place-item .pi-name{font-weight:600;font-size:14px}
.place-item .pi-date{font-size:12px;color:var(--soft)}
.place-item .pi-pin{margin-left:auto;font-size:18px;opacity:.6}
@media(max-width:820px){.map-grid{grid-template-columns:1fr}#mapBox{height:46vh}}

/* ---- Footer ---- */
#footer{padding:70px 0 110px;text-align:center;border-top:1px solid var(--line);background:var(--bg1);
  transition:background .6s var(--ease)}
#footer .f-heart{display:inline-block;animation:beat 1.6s var(--ease) infinite;color:var(--accent3);font-size:22px}
#footer .f-names{font-family:var(--font-serif);font-size:19px;letter-spacing:3px;margin-top:8px}
#footer .f-sub{color:var(--soft);font-size:13px;margin-top:8px;letter-spacing:1px}
#footer .f-admin{display:inline-block;margin-top:18px;font-size:12px;color:var(--soft);border:1px solid var(--line);
  padding:6px 14px;border-radius:99px;transition:.3s}
#footer .f-admin:hover{color:var(--ink);border-color:var(--accent)}

/* ---- Theme dock ---- */
#themeDock{position:fixed;right:18px;bottom:18px;z-index:950}
.td-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--card-border);box-shadow:var(--shadow-soft);transition:.3s var(--ease)}
.td-btn:hover{transform:rotate(40deg) scale(1.08)}
.td-pop{position:absolute;bottom:60px;right:0;width:236px;background:var(--glass);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border:1px solid var(--card-border);border-radius:var(--r-md);
  padding:10px;box-shadow:var(--shadow-lift);transform-origin:bottom right;transition:.3s var(--ease);
  transform:scale(.85);opacity:0;pointer-events:none}
.td-pop.open{transform:none;opacity:1;pointer-events:auto}
.td-pop .td-t{font-size:12px;letter-spacing:2px;color:var(--soft);padding:4px 8px 8px}
.td-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.25s;width:100%;text-align:left}
.td-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.td-opt .sw{width:34px;height:34px;border-radius:9px;flex:none;border:1px solid rgba(255,255,255,.18)}
.td-opt .nm{font-size:13px;flex:1}
.td-opt.active .nm{font-weight:700;color:var(--accent)}
.td-opt.active::after{content:"✓";color:var(--accent);font-weight:700}
.sw-star{background:linear-gradient(135deg,#070b1f,#221243 70%,#ffd27d 170%)}
.sw-cream{background:linear-gradient(135deg,#fdf7ee,#f2e3cb 75%,#e58f9e 160%)}
.sw-film{background:linear-gradient(135deg,#16100c,#2b1e14 70%,#e0863a 160%)}
.sw-ed{background:linear-gradient(135deg,#faf7f1,#e7dfd0 75%,#b4552d 160%)}

/* ---- Music dock ---- */
#musicDock{position:fixed;left:18px;bottom:18px;z-index:950}
.mu-btn{width:56px;height:56px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--card-border);box-shadow:var(--shadow-soft);transition:.3s var(--ease)}
.mu-btn:hover{transform:scale(1.07)}
.mu-disc{width:34px;height:34px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,#2b2b2b,#121212,#333,#111,#2b2b2b);position:relative;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.mu-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#000 0 1px,transparent 1px 4px);opacity:.5}
.mu-disc i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.mu-disc.spin{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mu-btn.playing .mu-bars{position:absolute;top:-7px;right:-4px;display:flex;gap:2px;align-items:flex-end;height:16px}
.mu-bars span{width:3px;background:var(--accent);border-radius:2px;animation:eq 1s ease-in-out infinite}
.mu-bars span:nth-child(1){height:8px;animation-delay:0s}
.mu-bars span:nth-child(2){height:14px;animation-delay:.2s}
.mu-bars span:nth-child(3){height:10px;animation-delay:.4s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.mu-pop{position:absolute;bottom:68px;left:0;width:240px;background:var(--glass);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border:1px solid var(--card-border);border-radius:var(--r-md);
  padding:10px;box-shadow:var(--shadow-lift);transform-origin:bottom left;transition:.3s var(--ease);
  transform:scale(.85);opacity:0;pointer-events:none;max-height:300px;overflow:auto}
.mu-pop.open{transform:none;opacity:1;pointer-events:auto}
.mu-pop .mu-t{font-size:12px;letter-spacing:2px;color:var(--soft);padding:4px 8px 8px}
.mu-track{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer;transition:.25s}
.mu-track:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mu-track .ic{font-size:16px;width:22px;text-align:center}
.mu-track .nm{font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-track.active .nm{color:var(--accent);font-weight:600}

/* ---- Lightbox ---- */
#lightbox{position:fixed;inset:0;z-index:1300;background:rgba(5,7,16,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;animation:fadeIn .25s}
#lbImg{max-width:88vw;max-height:84vh;border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.6);object-fit:contain}
#lbCap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);
  font-size:14px;letter-spacing:1px;text-align:center;max-width:80vw}
.lb-close,.lb-prev,.lb-next{position:absolute;color:#fff;font-size:26px;opacity:.8;transition:.25s;padding:14px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1;transform:scale(1.15)}
.lb-close{top:14px;right:20px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}

/* ---- Toast ---- */
#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(20px);z-index:2000;
  background:var(--ink);color:var(--bg0);padding:11px 22px;border-radius:99px;font-size:14px;
  opacity:0;pointer-events:none;transition:.35s var(--ease);box-shadow:var(--shadow-lift);max-width:86vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Admin
   ============================================================ */
#adminView{position:fixed;inset:0;z-index:1000;background:var(--bg0);overflow:auto}
.admin-login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.al-card{width:min(380px,92vw);background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);
  padding:40px 34px;box-shadow:var(--shadow-lift);text-align:center}
.al-card .al-heart{font-size:34px;animation:beat 1.6s var(--ease) infinite}
.al-card h2{font-family:var(--font-serif);margin:14px 0 4px;font-size:22px}
.al-card .al-sub{color:var(--soft);font-size:13px;margin-bottom:26px}
.al-card input{width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1px solid var(--card-border);
  background:var(--bg0);color:var(--ink);font-size:15px;outline:none;transition:.25s}
.al-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.al-card .al-err{color:#ff7a8a;font-size:13px;margin-top:10px;min-height:18px}
.al-card .al-btn{margin-top:8px;width:100%;padding:13px;border-radius:99px;background:linear-gradient(120deg,var(--accent),var(--accent3));
  color:#1a1206;font-weight:700;font-size:15px;transition:.3s}
.al-card .al-btn:hover{transform:translateY(-2px)}
.al-back{position:absolute;top:20px;left:20px;font-size:13px;color:var(--soft);border:1px solid var(--line);padding:7px 14px;border-radius:99px}
.al-back:hover{color:var(--ink)}
.demo-hint{margin-top:16px;font-size:12px;color:var(--soft);border-top:1px dashed var(--line);padding-top:12px}

.admin-panel{max-width:1100px;margin:0 auto;padding:74px 20px 60px;display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start}
.ad-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:4px;background:var(--card);
  border:1px solid var(--card-border);border-radius:var(--r-md);padding:10px}
.ad-side button{text-align:left;padding:11px 14px;border-radius:10px;font-size:14px;color:var(--soft);transition:.25s;display:flex;gap:9px;align-items:center}
.ad-side button:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ad-side button.active{color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:600}
.ad-main{min-width:0}
.ad-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ad-head h1{font-family:var(--font-serif);font-size:24px;flex:1}
.ad-head .back{font-size:13px;color:var(--soft);border:1px solid var(--line);padding:8px 16px;border-radius:99px;transition:.25s}
.ad-head .back:hover{color:var(--ink)}
.ad-section{display:none}
.ad-section.active{display:block;animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
.ad-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:24px;margin-bottom:18px}
.ad-card h3{font-family:var(--font-serif);font-size:17px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ad-card h3 .hint{font-size:11px;font-weight:400;color:var(--soft);letter-spacing:1px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.one{grid-template-columns:1fr}
.field label{display:block;font-size:12px;letter-spacing:2px;color:var(--soft);margin-bottom:6px;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--card-border);
  background:var(--bg0);color:var(--ink);font-size:14px;outline:none;transition:.25s;font-family:inherit}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;font-size:14px;font-weight:600;
  background:linear-gradient(120deg,var(--accent),var(--accent3));color:#1a1206;transition:.3s var(--ease);border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.ghost{background:transparent;border:1px solid var(--card-border);color:var(--ink)}
.btn.danger{background:linear-gradient(120deg,#ff7a8a,#e0566b);color:#fff}
.btn.sm{padding:7px 14px;font-size:12px}
.ad-item{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--card-border);border-radius:var(--r-md);
  background:var(--bg0);margin-bottom:10px;transition:.25s}
.ad-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--card-border))}
.ad-item .th{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--bg1);flex:none}
.ad-item .th.ph{display:flex;align-items:center;justify-content:center;font-size:22px}
.ad-item .meta{flex:1;min-width:0}
.ad-item .meta .t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-item .meta .d{font-size:12px;color:var(--soft)}
.ad-item .ops{display:flex;gap:8px;flex:none}
.drop{border:2px dashed var(--card-border);border-radius:var(--r-md);padding:30px;text-align:center;color:var(--soft);
  font-size:14px;cursor:pointer;transition:.25s;margin-top:10px}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.thumbs .t{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--card-border)}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);
  color:#fff;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center}
.modal{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px}
.modal .m-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}
.modal .m-body{position:relative;width:min(640px,94vw);max-height:88vh;overflow:auto;background:var(--bg1);
  border:1px solid var(--card-border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-lift);animation:paperIn .35s var(--ease)}
.modal .m-body h3{font-family:var(--font-serif);font-size:19px;margin-bottom:18px}
.m-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media(max-width:820px){
  .admin-panel{grid-template-columns:1fr;padding:64px 14px 40px}
  .ad-side{position:static;flex-direction:row;overflow-x:auto}
  .ad-side button{white-space:nowrap}
  .form-row{grid-template-columns:1fr}
}

/* ---- misc ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}