:root { --ink:#371b23; --muted:#775d65; --paper:#fffaf8; --rose-deep:#d62227; --line:rgba(90,37,53,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; background:radial-gradient(circle at 10% 10%,rgba(255,220,226,.5),transparent 28rem),var(--paper); color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; align-items:center; padding:84px max(24px,calc((100vw - 1120px)/2)); color:#fff; background:linear-gradient(115deg,rgba(126,14,39,.94),rgba(202,45,67,.82)),url("/slides/slide-01.webp") center/cover; }
.hero::before { content:""; position:absolute; inset:24px; border:1px solid rgba(255,255,255,.35); pointer-events:none; }
.hero-glow { position:absolute; border-radius:999px; filter:blur(14px); background:rgba(255,219,222,.2); }
.hero-glow-one { width:500px; height:500px; right:-120px; top:-150px; }
.hero-glow-two { width:360px; height:360px; left:-160px; bottom:-120px; }
.hero-inner { position:relative; z-index:1; max-width:760px; }
.eyebrow { margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.3em; }
.hero h1 { margin:0; font-family:"Times New Roman","Yu Mincho",serif; font-size:clamp(54px,9vw,112px); font-weight:400; line-height:.82; letter-spacing:-.055em; }
.hero h1 span { display:block; margin-top:24px; font-family:"Hiragino Sans","Yu Gothic",sans-serif; font-size:clamp(17px,2.2vw,28px); font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.hero-copy { margin:40px 0 0; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(17px,2vw,24px); line-height:1.9; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.hero-actions a,.support>a { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:0 26px; border-radius:999px; font-size:14px; font-weight:700; transition:transform 180ms ease,background 180ms ease; }
.hero-actions a:hover,.support>a:hover { transform:translateY(-2px); }
.primary-button { background:#fff; color:var(--rose-deep); }
.secondary-button { border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.1); }
.hero-meta { display:flex; gap:22px; margin-top:28px; color:rgba(255,255,255,.7); font-size:12px; }
.scroll-cue { position:absolute; right:42px; bottom:44px; z-index:1; display:flex; align-items:center; gap:12px; font-size:9px; letter-spacing:.24em; writing-mode:vertical-rl; }
.scroll-cue i { width:1px; height:54px; background:rgba(255,255,255,.7); }
.page-nav { position:sticky; top:0; z-index:20; background:rgba(255,250,248,.92); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.page-nav-inner { display:flex; gap:10px; overflow-x:auto; max-width:1200px; margin:auto; padding:12px 22px; scrollbar-width:none; }
.page-nav-inner::-webkit-scrollbar { display:none; }
.page-nav a { flex:0 0 74px; position:relative; overflow:hidden; border-radius:8px; background:#fff; border:1px solid var(--line); }
.page-nav img { width:100%; height:55px; display:block; object-fit:cover; }
.page-nav span { position:absolute; right:4px; bottom:4px; min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; color:#fff; background:rgba(45,13,22,.8); font-size:9px; font-weight:700; }
.materials { max-width:1120px; margin:0 auto; padding:100px 22px 120px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:50px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.section-heading .eyebrow,.support .eyebrow { color:var(--rose-deep); margin-bottom:12px; }
.section-heading h2,.support h2 { margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(32px,5vw,56px); font-weight:500; }
.section-heading>p,.support>p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.slide-stack { display:grid; gap:72px; }
.slide-card { position:relative; scroll-margin-top:104px; }
.slide-card>a { display:block; overflow:hidden; border-radius:3px; background:#f2dedf; box-shadow:0 24px 70px rgba(91,35,50,.14); }
.slide-card img { width:100%; height:auto; display:block; transition:transform 240ms ease; }
.slide-card>a:hover img { transform:scale(1.006); }
.slide-label { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; color:var(--rose-deep); }
.slide-label span { font-size:9px; letter-spacing:.22em; font-weight:700; }
.slide-label strong { font-family:"Times New Roman",serif; font-size:28px; font-weight:400; }
.support { max-width:1076px; margin:0 auto 120px; padding:64px; text-align:center; border-radius:24px; background:#f9e8e8; }
.support>p:not(.eyebrow) { margin:18px auto 28px; max-width:560px; }
.support>a { color:#fff; background:var(--rose-deep); }
footer { display:flex; justify-content:space-between; padding:30px max(22px,calc((100vw - 1120px)/2)); color:var(--muted); border-top:1px solid var(--line); font-size:11px; }
footer p { margin:0; font-family:"Times New Roman",serif; letter-spacing:.08em; }
.noscript { text-align:center; padding:40px; }
@media (max-width:680px) {
  .hero { min-height:760px; align-items:end; padding:110px 28px 88px; background-position:43% center; }
  .hero::before { inset:14px; }
  .hero h1 { font-size:clamp(54px,17vw,76px); }
  .hero h1 span { margin-top:18px; font-size:15px; }
  .hero-copy { margin-top:28px; font-size:16px; }
  .hero-actions { margin-top:30px; }
  .hero-actions a { flex:1 1 140px; min-height:50px; padding:0 16px; }
  .scroll-cue { display:none; }
  .page-nav a { flex-basis:66px; }
  .page-nav img { height:49px; }
  .materials { padding:66px 14px 88px; }
  .section-heading { align-items:start; flex-direction:column; gap:16px; margin:0 8px 36px; }
  .slide-stack { gap:44px; }
  .slide-label { margin-left:8px; }
  .slide-card>a { border-radius:2px; box-shadow:0 13px 36px rgba(91,35,50,.12); }
  .support { margin:0 14px 80px; padding:46px 22px; border-radius:18px; }
  footer { padding:24px 20px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
