* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#ECE3CF; --body-bg:#D8CDB8; --ink:#3D2B1E; --dim:#5F4C3A; --line:#C8BAA0;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth; font-size:20px;}
body{
  position:relative;
  background:var(--body-bg); color:var(--ink); font-family:'Noto Serif TC',serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
/* subtle film-grain texture — reinforces the late-night, tactile mood without
   any image asset; static (not animated) so it costs one paint, not per-frame */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2000;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
@media(max-width:480px){ body::before{display:none;} }
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
img,video{max-width:100%; display:block;}

/* focus states — keyboard navigation gets the same care as pointer hover */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:4px;
}
.site-header a:focus-visible, .site-footer a:focus-visible{
  outline-color:var(--bg);
}

/* header */
.site-header{background:var(--ink); color:var(--bg); position:sticky; top:0; z-index:50; box-shadow:0 10px 28px -16px rgba(15,10,6,.55);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px; transition:opacity .2s var(--ease);}
.brand:hover{opacity:.82;}
.brand img{width:64px; height:64px; border-radius:50%;}
.site-nav{display:flex; flex-wrap:wrap; gap:2px; font-family:'Noto Sans TC',sans-serif; font-size:17px; letter-spacing:.5px;}
.site-nav a{position:relative; padding:9px 15px; border-radius:8px; color:rgba(236,227,207,.75); transition:color .2s var(--ease), background .2s var(--ease); font-weight:500;}
.site-nav a:hover{background:rgba(236,227,207,.14); color:var(--bg);}
.site-nav a.on{color:var(--bg);}
.site-nav a.on::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
  background:var(--bg); border-radius:1px;
}

/* hero */
.hero{padding:64px 24px 48px; text-align:center;}
.hero-banner{width:100vw; margin-left:calc(50% - 50vw); margin-bottom:40px; overflow:hidden; box-shadow:0 12px 40px rgba(61,43,30,.2);}
.hero-banner img{width:100%; display:block;}
.hero h1{font-size:clamp(40px,6vw,68px); font-weight:900; letter-spacing:4px; margin-bottom:14px;}
.hero .tagline{font-family:'Noto Sans TC',sans-serif; font-weight:500; letter-spacing:1.5px; color:var(--dim); font-size:22px; margin-bottom:24px;}
.hero p.about{max-width:680px; margin:0 auto 30px; font-size:21px; color:var(--ink); font-weight:400; letter-spacing:.3px; line-height:1.9;}
.btn{display:inline-block; padding:18px 38px; border:2px solid var(--ink); border-radius:50px; font-family:'Noto Sans TC',sans-serif; font-size:18px; letter-spacing:1px; font-weight:700; transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease), letter-spacing .35s var(--ease);}
.btn-solid{background:var(--ink); color:var(--bg); box-shadow:0 10px 26px -10px rgba(61,43,30,.55);}
.btn-solid:hover{opacity:.9; transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(61,43,30,.6); letter-spacing:1.4px;}
.btn-outline:hover{background:var(--ink); color:var(--bg); transform:translateY(-3px); box-shadow:0 14px 28px -12px rgba(61,43,30,.35); letter-spacing:1.4px;}
.btn:active{transform:translateY(-1px); transition-duration:.1s;}
.btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* section */
.section{padding:44px 24px;}
.section-title{position:relative; font-size:17px; font-family:'Noto Sans TC',sans-serif; font-weight:700; letter-spacing:5px; color:var(--dim); text-align:center; margin-bottom:40px; padding-bottom:18px;}
.section-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:36px; height:2px; background:var(--dim); opacity:.4; border-radius:1px;
}

/* spotlight */
.spotlight{display:block; background:var(--bg); border:1px solid var(--line); border-radius:24px; overflow:hidden; max-width:680px; margin:0 auto; box-shadow:0 12px 40px rgba(61,43,30,.12); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.spotlight:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(61,43,30,.22);}
.spotlight-media{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.spotlight-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.spotlight:hover .spotlight-media img{transform:scale(1.05);}
.spotlight-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.spotlight-play svg{width:64px; height:64px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.spotlight-body{padding:26px 30px;}
.spotlight-eyebrow{font-family:'Noto Sans TC',sans-serif; font-size:15px; letter-spacing:2px; color:var(--dim); margin-bottom:8px; font-weight:600;}
.spotlight-title{font-size:34px; font-weight:900; letter-spacing:1px; margin-bottom:14px;}
.spotlight-blurb{font-size:18px; font-weight:400; color:var(--ink); line-height:1.9; letter-spacing:.3px;}

/* chapter grid */
.chapter-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto;}
@media(max-width:760px){.chapter-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.chapter-grid{grid-template-columns:1fr;}}
.chapter-card{position:relative; background:var(--bg); border:1px solid var(--line); border-top:6px solid var(--card-color,var(--ink)); border-radius:20px; padding:28px 20px; text-align:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease); box-shadow:0 6px 18px rgba(61,43,30,.08);}
.chapter-card:hover{transform:translateY(-6px); box-shadow:0 18px 38px rgba(61,43,30,.2);}
.chapter-card .cc-chars{font-size:34px; font-weight:900; letter-spacing:4px; color:var(--card-color,var(--ink)); margin-bottom:12px; transition:letter-spacing .4s var(--ease);}
.chapter-card:hover .cc-chars{letter-spacing:6px;}
.chapter-card .cc-name{font-size:23px; font-weight:700; letter-spacing:2px; margin-bottom:8px;}
.chapter-card .cc-status{font-family:'Noto Sans TC',sans-serif; font-size:15px; color:var(--dim); letter-spacing:.5px; font-weight:500;}

/* status hierarchy: the one serialising chapter should read as "now",
   the rest as "later" — a quiet visual cue on top of the text label */
.chapter-card.is-soon{opacity:.72;}
.chapter-card.is-soon:hover{opacity:1;}
.chapter-card.is-live{box-shadow:0 10px 26px rgba(61,43,30,.14);}
.chapter-card.is-live .cc-status{color:var(--card-color,var(--ink)); font-weight:700;}
.chapter-card.is-live .cc-status::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px;
  border-radius:50%; background:currentColor; vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* accessibility: SEO-visible / screen-reader-only heading, not shown visually
   (banner artwork already carries the chapter name as a designed image) */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* socials */
.social-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.social-icon{display:flex; align-items:center; justify-content:center; flex-shrink:0; width:56px; height:56px; border:2px solid var(--ink); border-radius:50%; color:var(--ink); transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);}
.social-icon svg{width:24px; height:24px; fill:currentColor; display:block;}
.social-icon:hover{background:var(--ink); color:var(--bg); transform:translateY(-3px) scale(1.06); box-shadow:0 10px 24px rgba(61,43,30,.22);}
.site-footer .social-icon{border-color:rgba(236,227,207,.55); color:rgba(236,227,207,.85);}
.site-footer .social-icon:hover{background:var(--bg); color:var(--ink); border-color:var(--bg);}

/* footer */
.site-footer{position:relative; background:var(--ink); color:rgba(236,227,207,.7); padding:36px 24px; margin-top:24px;}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(236,227,207,.25), transparent);
}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.site-footer .f-tag{font-family:'Noto Sans TC',sans-serif; font-size:14px; letter-spacing:.5px;}
.site-footer .f-handle{font-weight:900; letter-spacing:2px; font-size:18px; color:var(--bg); margin-bottom:4px;}

/* chapter hero */
.chapter-hero{position:relative; min-height:clamp(360px,42vw,560px); display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; color:#fff; background-size:cover; background-position:center; isolation:isolate;}
.chapter-hero::before{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,10,.3), rgba(20,14,10,.68)); z-index:-1;}
.chapter-hero.no-caption::before{background:rgba(20,14,10,.06);}
.chapter-hero .wrap{width:100%;}
.chapter-hero .ch-eyebrow{font-family:'Noto Sans TC',sans-serif; font-size:14px; letter-spacing:4px; opacity:.85; margin-bottom:12px; font-weight:600;}
.chapter-hero h1{font-size:clamp(52px,9vw,88px); font-weight:900; letter-spacing:12px; margin-bottom:14px; text-shadow:0 4px 24px rgba(0,0,0,.35);}
.chapter-hero .ch-status{font-family:'Noto Sans TC',sans-serif; font-size:18px; letter-spacing:2px; opacity:.95; font-weight:600;}

/* stage block */
.stage{max-width:1040px; margin:0 auto 56px; padding:0 24px;}
.stage-head{display:flex; align-items:baseline; gap:16px; border-bottom:3px solid var(--stage-color,var(--ink)); padding-bottom:16px; margin-bottom:18px;}
.stage-head .st-char{font-size:48px; font-weight:900; color:var(--stage-color,var(--ink));}
.stage-head .st-period{font-family:'Noto Sans TC',sans-serif; font-size:15px; color:var(--dim); letter-spacing:2px; font-weight:500;}
.stage-line{font-size:19px; font-weight:400; color:var(--ink); letter-spacing:.3px; margin-bottom:24px; max-width:680px; line-height:1.85;}

.song-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:760px){.song-grid{grid-template-columns:1fr;}}
.song-card{display:block; background:var(--bg); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 6px 18px rgba(61,43,30,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.song-card:hover{transform:translateY(-5px); box-shadow:0 18px 34px rgba(61,43,30,.18);}
.song-card .sc-media{aspect-ratio:4/5; background:#000; position:relative; overflow:hidden;}
.song-card .sc-media img,.song-card .sc-media video{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.song-card:hover .sc-media img,.song-card:hover .sc-media video{transform:scale(1.06);}
.song-card .sc-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.15); pointer-events:none; transition:background .4s var(--ease);}
.song-card:hover .sc-play{background:rgba(0,0,0,.05);}
.song-card .sc-play svg{width:52px; height:52px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition:transform .4s var(--ease);}
.song-card:hover .sc-play svg{transform:scale(1.1);}
.song-card .sc-body{padding:20px 22px;}
.song-card .sc-num{font-family:'Noto Sans TC',sans-serif; font-size:13px; color:var(--stage-color,var(--dim)); letter-spacing:1px; margin-bottom:6px; font-weight:700;}
.song-card .sc-title{font-size:20px; font-weight:700; letter-spacing:.5px; margin-bottom:10px;}
.song-card .sc-blurb{font-size:14px; color:var(--dim); font-weight:400; line-height:1.8; letter-spacing:.2px;}

/* a stage that has more than one released song (song-card.multi) — each
   song gets its own link line instead of one shared blurb */
.song-card .sc-song-links{display:flex; flex-direction:column; gap:8px;}
.song-card .sc-song-link{display:block; font-family:'Noto Sans TC',sans-serif; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.2px; background:rgba(61,43,30,.05); border-radius:10px; padding:11px 14px; transition:background .25s var(--ease), transform .25s var(--ease), padding-left .25s var(--ease);}
.song-card .sc-song-link:hover{background:rgba(61,43,30,.1); padding-left:18px;}

/* idea chips (unreleased chapters) */
.idea-kicker{font-family:'Noto Sans TC',sans-serif; font-size:13px; font-weight:700; letter-spacing:1.5px; margin-bottom:12px; text-transform:uppercase;}
.idea-chips{display:flex; flex-direction:column; gap:10px;}
.idea-chip{font-family:'Noto Sans TC',sans-serif; font-size:18px; color:var(--ink); font-weight:500; letter-spacing:.3px; background:rgba(61,43,30,.05); border-radius:12px; padding:14px 18px;}
.idea-chip.chosen{color:#fff; font-weight:700;}

.back-cta{text-align:center; padding:24px 24px 60px;}

/* youtube video grid */
.yt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto;}
@media(max-width:760px){.yt-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.yt-grid{grid-template-columns:1fr;}}
.yt-card{background:var(--bg); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 6px 18px rgba(61,43,30,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.yt-card:hover{transform:translateY(-6px); box-shadow:0 18px 38px rgba(61,43,30,.2);}
.yt-thumb{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.yt-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.yt-card:hover .yt-thumb img{transform:scale(1.06);}
.yt-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease);}
.yt-card:hover .yt-play{background:rgba(0,0,0,.05);}
.yt-play svg{width:52px; height:52px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition:transform .4s var(--ease);}
.yt-card:hover .yt-play svg{transform:scale(1.1);}
.yt-body{padding:16px 18px;}
.yt-title{font-size:18px; font-weight:700; letter-spacing:.3px; line-height:1.55; margin-bottom:7px; transition:color .2s var(--ease);}
.yt-card:hover .yt-title{color:var(--dim);}
.yt-meta{font-family:'Noto Sans TC',sans-serif; font-size:15px; color:var(--dim); letter-spacing:.3px; font-weight:500;}

/* ------------------------------------------------------ mobile ---- */
@media(max-width:640px){
  /* banner: the fixed 360px min-height floor made background-size:cover
     crop a 16:9-ish image down to a near-square box, chopping the logo
     off one side and the tagline off the other. Sizing the box to the
     image's own aspect ratio (~vw/1.8) keeps the whole banner in frame. */
  .chapter-hero{min-height:54vw; padding:16px;}
  .chapter-hero .ch-status{font-size:15px;}

  /* header: 64px logo + 7 wrapped nav pills was eating 210px+ of a
     phone screen before any real content appeared — two rows of left-
     aligned chips reading like an unfinished layout. A single-row,
     horizontally-scrollable strip (edge-faded to hint more content)
     reads as an intentional app-style tab bar instead. */
  .site-header .wrap{padding:10px 0; gap:6px; flex-wrap:nowrap; align-items:center;}
  .brand{padding-left:16px; flex:0 0 auto;}
  .brand img{width:42px; height:42px;}
  .site-nav{
    flex:1 1 auto; min-width:0; flex-wrap:nowrap; gap:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 16px 2px 2px;
    mask-image:linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
  }
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav a{flex:0 0 auto; padding:6px 10px; font-size:14px; white-space:nowrap;}

  /* everything below was sized for desktop; scale down proportionally
     instead of keeping the same generous desktop paddings/type scale */
  .hero{padding:36px 20px 28px;}
  .hero p.about{font-size:17px;}
  .section{padding:32px 20px;}
  .section-title{letter-spacing:3px; font-size:15px;}
  .spotlight-title{font-size:26px;}
  .spotlight-blurb{font-size:16px;}
  .stage-line{font-size:17px;}
  .idea-chip{font-size:16px; padding:12px 16px;}
  .chapter-card{padding:22px 16px;}
  .btn{padding:15px 28px; font-size:16px;}
}

/* ---------------------------------------------------- scroll reveal ---- */
/* Progressive enhancement: assets/js/reveal.js adds .reveal-init to cards
   and section titles, then flips .reveal-in as each scrolls into view. If
   JS never runs, elements simply keep their normal visible state. */
.reveal-init{opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reveal-init.reveal-in{opacity:1; transform:none;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal-init{opacity:1; transform:none; transition:none;}
  .btn, .btn-solid:hover, .btn-outline:hover,
  .chapter-card, .chapter-card:hover, .chapter-card .cc-chars, .chapter-card:hover .cc-chars,
  .song-card, .song-card:hover, .sc-media img, .sc-play, .sc-play svg,
  .yt-card, .yt-card:hover, .yt-thumb img, .yt-play, .yt-play svg, .yt-title,
  .spotlight, .spotlight:hover, .spotlight-media img,
  .social-icon, .social-icon:hover, .brand, .site-nav a{
    transition:none !important; animation:none !important;
  }
}