:root {
  --bg: #f6eeec;
  --surface: #fffaf8;
  --surface-2: #fffdfc;
  --text: #372d31;
  --muted: #6c5a60;
  --accent: #b56b7f;
  --accent-deep: #8b4e63;
  --line: rgba(181, 107, 127, 0.18);
  --shadow: 0 18px 40px rgba(84, 52, 63, 0.08);
  --radius: 24px;
  --max-width: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  background:
    radial-gradient(circle at top left, rgba(208, 157, 173, 0.22), transparent 28%),
    linear-gradient(180deg, #fff8f7 0%, var(--bg) 100%);
  color: var(--text);
  line-height: 1.8;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(12px);
  background: rgba(255, 248, 247, 0.86);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: var(--max-width); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.site-brand { color: var(--accent-deep); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.site-nav a.is-current, .site-nav a:hover { color: var(--accent-deep); }
.hero { width:100%; background:#140f17; }
.hero-image { width:100%; height:auto; }
.page { max-width: var(--max-width); margin:0 auto; padding:28px 20px 56px; }
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px; margin-top: 24px;
}
.section-heading { margin-bottom: 18px; }
.section-heading-inline { display:flex; align-items:flex-start; justify-content:space-between; }
.section-heading h1, .section-heading h2 { margin:0; color:var(--accent-deep); line-height:1.25; }
.section-heading h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.section-heading h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.tagline, .summary, .meta-row, .platform-note, .latest-message, .section-heading p { color: var(--muted); }
.tagline { margin-top:8px; font-size:1.05rem; }
.summary { font-size:1.02rem; margin:0; }
.content-grid {
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,0.95fr);
  gap:24px; align-items:stretch; margin-top:24px;
}
.content-grid .card { margin-top:0; }
.latest-image, .author-image {
  width:100%; border-radius:18px; border:1px solid var(--line); overflow:hidden;
}
.latest-message-below { margin:14px 0 0; color: var(--accent-deep); font-weight:700; }
.latest-summary-block { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.latest-summary-block h3, .author-bio h3, .episode-item h3 {
  margin:0 0 8px; color:var(--accent-deep);
}
.author-bio p, .latest-summary, .episode-summary, .video-meta p { margin:0; }
.author-link { margin-top:16px; }
.author-link a, .meta-row a, .video-meta a { color:var(--accent); text-decoration:none; font-weight:700; }
.author-link a:hover, .meta-row a:hover, .video-meta a:hover { text-decoration:underline; }
.platform-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px;
}
.platform-button {
  display:flex; flex-direction:column; gap:6px; justify-content:center; min-height:132px;
  padding:20px; text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, #fff7f6 0%, #fff1f0 100%);
  border:1px solid rgba(181,107,127,0.24); border-radius:20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.platform-button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(124,78,93,.12); border-color:rgba(181,107,127,.4); }
.platform-name { font-size:1.18rem; font-weight:700; color:var(--accent-deep); }
.platform-note { font-size:.95rem; }
.meta-row {
  display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); font-size:.96rem;
}
.video-wrapper {
  position:relative; width:100%; padding-top:56.25%; overflow:hidden;
  border-radius:18px; border:1px solid var(--line); background:#000;
}
.video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; }
.video-meta { margin-top:18px; }
.episode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.episode-item {
  background: linear-gradient(180deg, #fff9f8 0%, #fff3f1 100%);
  border:1px solid rgba(181,107,127,0.18); border-radius:18px; padding:12px;
  box-shadow:0 10px 24px rgba(84,52,63,0.05);
}
.episode-thumb {
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px;
  border:1px solid rgba(181,107,127,0.14); margin-bottom:10px;
}
.future-thumb {
  width:100%; aspect-ratio:16/9; border-radius:12px; border:1px dashed rgba(181,107,127,0.28);
  margin-bottom:10px; display:grid; place-items:center; color:var(--accent); background:#fffafa; font-weight:700;
}
.is-hidden { display:none; }
.site-footer { text-align:center; padding:10px 20px 40px; color:var(--muted); font-size:.92rem; }
@media (max-width:980px) {
  .content-grid { grid-template-columns:1fr; }
  .platform-grid { grid-template-columns:1fr; }
  .episode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { padding:22px; border-radius:20px; }
}
@media (max-width:760px) {
  .nav-wrap { padding:10px 14px; flex-direction:column; align-items:flex-start; }
  .site-nav { gap:12px; }
}
@media (max-width:640px) {
  .page { padding:18px 14px 44px; }
  .card { padding:18px; margin-top:18px; }
  .content-grid { gap:18px; margin-top:18px; }
  .section-heading h1 { font-size:1.8rem; }
  .section-heading h2 { font-size:1.35rem; }
  .summary, .tagline, .platform-note, .latest-summary, .author-bio p, .episode-summary, .latest-message-below { font-size:.96rem; }
  .episode-grid { grid-template-columns:1fr; }
}


/* Home hero slider */
.hero-slider {
  position: relative;
  width: 100%;
  min-height: min(56.25vw, 860px);
  background: #140f17;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(90deg, rgba(16,11,20,0.72) 0%, rgba(16,11,20,0.58) 28%, rgba(16,11,20,0.2) 48%, rgba(16,11,20,0) 62%);
}
.hero-copy {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 48px 20px;
  color: #fff7f5;
}
.hero-copy > * { max-width: 44%; }
.hero-kicker {
  margin: 0 0 8px;
  color: #f0b5c3;
  font-size: clamp(3rem, 8vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.hero-copy h1 {
  margin: 0;
  color: #ffd8e1;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.08;
}
.hero-divider {
  width: 180px;
  height: 1px;
  margin: 20px 0 22px;
  background: linear-gradient(90deg, rgba(240,181,195,0), rgba(240,181,195,0.95) 18%, rgba(240,181,195,0.95) 82%, rgba(240,181,195,0));
}
.hero-subtitle {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: #f8ebe8;
}
.hero-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: #f8ebe8;
  font-size: 1rem;
}
.hero-meta li { position: relative; padding-left: 0; }

/* making-of page */
.card-hero-image { padding: 18px; }
.page-banner {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.making-intro p.summary { font-size: 1.04rem; }
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: start;
}
.media-split-reverse {
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
}
.media-split-reverse .media-copy { order: 2; }
.media-split-reverse .media-figure { order: 1; }
.media-copy p { margin: 0 0 16px; color: var(--text); }
.media-figure, .wide-figure { margin: 0; }
.content-image {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(84, 52, 63, 0.08);
}
.media-figure figcaption, .wide-figure figcaption {
  margin-top: 10px;
  font-size: 0.94rem;
  color: var(--muted);
}
.wide-figure { margin-top: 20px; }
.quote-box {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: rgba(255, 241, 240, 0.85);
  border-radius: 0 14px 14px 0;
}
.quote-box p { margin: 0; color: var(--accent-deep); }
.callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.mini-callout {
  background: linear-gradient(180deg, #fff8f7 0%, #fff2f0 100%);
  border: 1px solid rgba(181, 107, 127, 0.2);
  border-radius: 18px;
  padding: 18px;
}
.mini-callout h3 { margin: 0 0 8px; color: var(--accent-deep); }
.mini-callout p { margin: 0; color: var(--muted); }

@media (max-width: 980px) {
  .hero-copy > * { max-width: 56%; }
  .media-split, .media-split-reverse {
    grid-template-columns: 1fr;
  }
  .media-split-reverse .media-copy, .media-split-reverse .media-figure { order: initial; }
  .callout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-slider { min-height: 540px; }
  .hero-slide { background-position: 78% center; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(16,11,20,0.65) 0%, rgba(16,11,20,0.58) 38%, rgba(16,11,20,0.18) 68%, rgba(16,11,20,0) 100%);
    align-items: flex-start;
  }
  .hero-copy { padding-top: 34px; }
  .hero-copy > * { max-width: 100%; }
}
@media (max-width: 640px) {
  .hero-slider { min-height: 500px; }
  .hero-slide { background-position: 82% center; }
  .hero-kicker { font-size: 2.6rem; }
  .hero-copy h1 { font-size: 2rem; }
  .hero-subtitle, .hero-meta { font-size: 0.95rem; }
  .card-hero-image { padding: 12px; }
}


/* mobile stacked hero refinement */
.hero-slider {
  position: relative;
  width: 100%;
  background: #140f17;
  overflow: hidden;
}
.hero-slider-visual {
  position: relative;
  min-height: min(56.25vw, 860px);
}
.hero-slider-visual .hero-slide {
  background-position: 72% center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: auto;
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(90deg, rgba(16,11,20,0.72) 0%, rgba(16,11,20,0.58) 28%, rgba(16,11,20,0.2) 48%, rgba(16,11,20,0) 62%);
}
@media (max-width: 760px) {
  .hero-slider {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #20141c 0%, #160f17 100%);
  }
  .hero-slider-visual {
    min-height: 360px;
    order: 1;
  }
  .hero-slider-visual .hero-slide {
    background-position: 78% center;
  }
  .hero-overlay {
    position: relative;
    inset: auto;
    order: 2;
    background: none;
    align-items: stretch;
  }
  .hero-copy {
    padding: 22px 14px 24px;
  }
  .hero-copy > * {
    max-width: 100%;
  }
  .hero-kicker {
    font-size: 2.4rem;
    margin-bottom: 6px;
  }
  .hero-copy h1 {
    font-size: 1.9rem;
  }
  .hero-divider {
    width: 120px;
    margin: 14px 0 16px;
  }
  .hero-subtitle,
  .hero-meta {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .hero-slider-visual {
    min-height: 320px;
  }
  .hero-slider-visual .hero-slide {
    background-position: 80% center;
  }
}


@media (max-width: 480px) {
  .hero-slider-visual { min-height: 300px; }
  .hero-slider-visual .hero-slide:nth-child(1) { background-position: 88% center; }
  .hero-slider-visual .hero-slide:nth-child(2) { background-position: 86% center; }
  .hero-slider-visual .hero-slide:nth-child(3) { background-position: 85% center; }
  .hero-slider-visual .hero-slide:nth-child(4) { background-position: 90% center; }
}

/* mobile hero right alignment */
@media (max-width: 760px) {
  .hero-slider-visual .hero-slide {
    background-position: right center !important;
  }
}
@media (max-width: 480px) {
  .hero-slider-visual .hero-slide {
    background-position: right center !important;
  }
}


/* mobile-specific hero images */
@media (max-width: 760px) {
  .hero-slider-visual .hero-slide:nth-child(1) { background-image: url('assets/hero-m-01.jpg') !important; }
  .hero-slider-visual .hero-slide:nth-child(2) { background-image: url('assets/hero-m-02.jpg') !important; }
  .hero-slider-visual .hero-slide:nth-child(3) { background-image: url('assets/hero-m-03.jpg') !important; }
  .hero-slider-visual .hero-slide:nth-child(4) { background-image: url('assets/hero-m-04.jpg') !important; }
  .hero-slider-visual .hero-slide { background-position: center top !important; background-size: cover; }
}


/* mobile hero portrait ratio fix */
@media (max-width: 760px) {
  .hero-slider-visual {
    min-height: 0 !important;
    height: auto;
    aspect-ratio: 1122 / 1402;
  }
  .hero-slider-visual .hero-slide {
    background-position: center top !important;
    background-size: cover;
  }
}
@media (max-width: 480px) {
  .hero-slider-visual {
    min-height: 0 !important;
    height: auto;
    aspect-ratio: 1122 / 1402;
  }
}


/* homepage preview feature */
.preview-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 24px;
  align-items: start;
}
.preview-feature-copy h3 {
  margin: 0 0 10px;
  color: var(--accent-deep);
  font-size: 1.28rem;
}
.preview-feature-copy p {
  margin: 0;
  color: var(--muted);
}
.feature-points {
  margin: 16px 0 0;
  padding-left: 20px;
}
.feature-points li + li {
  margin-top: 8px;
}
.action-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.primary-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(139, 78, 99, 0.18);
}
.primary-link-button:hover {
  transform: translateY(-1px);
}

/* preview characters */
.preview-characters {
  margin-top: 28px;
}
.character-rows {
  display: grid;
  gap: 20px;
}
.character-row {
  display: grid;
  gap: 20px;
}
.character-row.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character-row.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.character-card {
  background: linear-gradient(180deg, #fffdfd 0%, #fff7f8 100%);
  border: 1px solid rgba(196, 147, 160, 0.16);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(31, 16, 22, 0.08);
}
.character-photo {
  aspect-ratio: 4 / 5;
  background: #f4ecef;
}
.character-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.character-copy {
  padding: 18px 18px 20px;
}
.character-copy h3 {
  margin: 0;
  font-size: 1.34rem;
  color: var(--accent-deep);
}
.character-role {
  margin: 6px 0 10px;
  font-size: 0.95rem;
  color: #a7627b;
  font-weight: 700;
}
.character-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .preview-feature-grid {
    grid-template-columns: 1fr;
  }
  .character-row.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .character-row.cols-2,
  .character-row.cols-3 {
    grid-template-columns: 1fr;
  }
  .character-copy {
    padding: 16px 16px 18px;
  }
  .action-row {
    flex-direction: column;
  }
  .primary-link-button {
    width: 100%;
  }
}


/* homepage two-column platforms + latest */
.latest-platforms-grid {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.15fr);
  align-items: start;
}
.latest-platforms-grid .card {
  margin-top: 0;
}
.platform-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.platform-list-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, #fff7f6 0%, #fff1f0 100%);
  border: 1px solid rgba(181,107,127,0.24);
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.platform-list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(124,78,93,.10);
  border-color: rgba(181,107,127,.4);
}
.platform-list .platform-name {
  font-size: 1.12rem;
}
.platform-list .platform-note {
  font-size: 0.94rem;
}
.platform-grid {
  display: none;
}

@media (max-width: 980px) {
  .latest-platforms-grid {
    grid-template-columns: 1fr;
  }
}


.platform-intro {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.8;
}


/* homepage stacked platforms + latest */
.platforms-stacked,
.latest-stacked {
  margin-top: 24px;
}
.platform-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.platforms-stacked .platform-list {
  display: none;
}
.platform-row .platform-list-item {
  height: 100%;
}
.latest-stacked .latest-visual {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .platform-row {
    grid-template-columns: 1fr;
  }
}


/* making-of author block */
.author-inline-card {
  margin-top: 24px;
}
.author-inline-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: center;
}
.author-inline-image {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.author-inline-copy h3 {
  margin: 0 0 10px;
  color: var(--accent-deep);
  font-size: 1.4rem;
}
.author-inline-copy p {
  margin: 0;
  color: var(--muted);
}
.author-inline-copy .author-link {
  margin-top: 16px;
}

@media (max-width: 980px) {
  .latest-platforms-grid {
    grid-template-columns: 1fr;
  }
  .author-inline-grid {
    grid-template-columns: 1fr;
  }
}