@font-face {
  font-family: "jf-jinxuan-fresh";
  src: url("assets/fonts/jf-jinxuan-fresh-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Source Han Sans TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-deco: "jf-jinxuan-fresh", "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
  --brown: #4e3b30;
  --brown-soft: #806f62;
  --green: #3d6e5a;
  --sage: #a9bdb3;
  --paper: #f9f6f2;
  --line: rgba(78, 59, 48, 0.16);
  --body-size: var(--diary-body);
  --body-line: var(--diary-body-line);
  --diary-heading: clamp(26px, 3vw, 38px);
  --diary-heading-line: 1.35;
  --diary-subtitle: clamp(18px, 2vw, 33px);
  --diary-subtitle-line: 1.48;
  --diary-body: clamp(15px, 1.25vw, 24px);
  --diary-body-line: clamp(28px, 2.6vw, 38px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: #3b3b3b;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; }

.page-shell { position: relative; min-height: 100vh; }
.page-shell > :not(.hero-bg) { position: relative; z-index: 1; }
.page-shell > .cases-hero,
.page-shell > .article-hero { z-index: 2; }
.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: auto;
  aspect-ratio: 1920 / 854;
  background: url("assets/hero-bg-pattern.svg") left top / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.61;
  pointer-events: none;
}

.cases-hero { min-height: clamp(420px, 43vw, 660px); padding: 104px clamp(18px, 7.3vw, 140px) 0; }
.cases-hero-frame {
  position: relative;
  width: 100%;
  max-width: 1640px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
}
.notes-hero-image { width: 100%; height: auto; aspect-ratio: 1640 / 662; object-fit: cover; object-position: center 48%; }
.cases-hero-label {
  position: absolute;
  left: clamp(24px, 4.6vw, 70px);
  bottom: clamp(28px, 3.8vw, 58px);
  width: clamp(420px, 42vw, 520px);
  min-height: clamp(128px, 10vw, 158px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 2.4vw, 44px) clamp(26px, 3.2vw, 58px);
  color: var(--brown);
  background: rgba(255, 255, 255, 0.33);
  outline: 1px solid rgba(255, 255, 255, 0.42);
  outline-offset: -1px;
  backdrop-filter: blur(9px) saturate(125%);
}
.cases-hero-label h1 { margin: 0; font-family: var(--font-deco); font-size: clamp(30px, 3vw, 46px); font-weight: 400; line-height: 1.2; letter-spacing: 0.1em; }
.cases-hero-label p { margin: 8px 0 0; font-size: var(--diary-subtitle); line-height: var(--diary-subtitle-line); }

.series-intro { max-width: 900px; margin: 0 auto; padding: 34px 24px 0; text-align: center; }
.series-intro h2 { margin: 0; color: var(--brown); font-family: var(--font-deco); font-size: var(--diary-heading); font-weight: 400; line-height: var(--diary-heading-line); }
.series-intro p { margin: 12px 0 0; color: #6b5a4d; font-size: var(--diary-body); line-height: var(--diary-body-line); }

.editorial-list { width: min(1440px, calc(100% - 96px)); margin: 0 auto; padding: 38px 0 clamp(104px, 10vw, 160px); }
.editorial-item { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; }
.editorial-item + .editorial-item { margin-top: clamp(72px, 8vw, 120px); }
.editorial-media { position: relative; z-index: 1; min-width: 0; min-height: 330px; overflow: hidden; background: #c6d2ca; }
.editorial-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.editorial-photo.tax-editorial-photo { object-position: 80% center; }
.editorial-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 3.6vw, 58px) clamp(34px, 3.6vw, 58px);
  background: rgba(249, 246, 242, 0.98);
  color: var(--brown);
}
.editorial-copy h2 { margin: 0 0 18px; font-family: var(--font-deco); font-size: var(--diary-heading); font-weight: 400; line-height: var(--diary-heading-line); letter-spacing: 0.06em; }
.editorial-author { margin: -2px 0 18px; color: rgb(138, 118, 96); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; letter-spacing: 0.08em; }
.editorial-summary { max-width: 36em; margin: 0; color: #4e4a45; font-size: var(--diary-body); line-height: var(--diary-body-line); letter-spacing: 0.025em; }
.editorial-more {
  width: fit-content;
  min-width: 198px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--brown);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.12em;
  gap: 14px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.editorial-more:hover, .editorial-more:focus-visible { background: #3f2f26; transform: translateY(-2px); }

@media (min-width: 901px) {
  .editorial-list { display: grid; grid-auto-rows: 1fr; row-gap: clamp(72px, 8vw, 120px); }
  .editorial-item + .editorial-item { margin-top: 0; }
  .editorial-media { align-self: stretch; aspect-ratio: auto; min-height: 330px; }
  .editorial-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  :root {
    --diary-heading: clamp(34px, 3.75vw, 45px);
    --diary-heading-line: 1.36;
    --diary-subtitle: clamp(24px, 2.65vw, 33px);
    --diary-body: clamp(19px, 1.72vw, 21px);
    --diary-body-line: 1.78;
  }
}

.article-hero { padding-top: 104px; }
.article-hero-frame { position: relative; width: 100%; height: 241px; background: var(--sage); }
.article-series-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.2vw, 34px); margin: 0; color: #fff; font-family: var(--font-deco); font-size: clamp(30px, 3vw, 46px); font-weight: 400; letter-spacing: 0.1em; }
.article-series-title::before, .article-series-title::after { content: ""; width: clamp(28px, 4vw, 64px); height: 1px; background: rgba(255, 255, 255, 0.7); }
.article-main { padding: clamp(70px, 7vw, 112px) 24px clamp(104px, 10vw, 156px); }
.article { width: min(100%, 860px); margin: 0 auto; color: var(--brown); }
.article-header { padding-bottom: clamp(42px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.article-header h1 { margin: 0; font-family: var(--font-deco); font-size: clamp(40px, 4vw, 52px); font-weight: 400; line-height: 1.35; letter-spacing: 0.015em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 24px 0 0; color: var(--brown-soft); font-size: var(--diary-subtitle); line-height: var(--diary-subtitle-line); letter-spacing: 0.05em; }
.article-lead { margin: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 76px); padding: clamp(28px, 4vw, 44px); background: #f6f1eb; color: #5f4c40; font-size: var(--body-size); line-height: var(--body-line); }
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.article-body { width: min(100%, 760px); margin: clamp(56px, 7vw, 86px) auto 0; }
.article-body > p { margin: 0 0 1.25em; color: #000; font-size: var(--body-size); line-height: var(--body-line); letter-spacing: 0.025em; }
.article-body h2 { margin: clamp(58px, 7vw, 86px) 0 24px; color: var(--brown); font-family: var(--font-deco); font-size: var(--diary-heading); font-weight: 400; line-height: var(--diary-heading-line); letter-spacing: 0.035em; }
.story-visual { margin: clamp(46px, 6vw, 72px) 0; }
.story-visual img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.story-visual figcaption { margin-top: 12px; color: var(--brown-soft); font-size: 14px; line-height: 1.75; letter-spacing: 0.035em; }
.story-quote { position: relative; overflow: hidden; margin: clamp(46px, 6vw, 72px) 0; padding: clamp(40px, 5vw, 50px) clamp(28px, 4vw, 44px) clamp(26px, 4vw, 36px); border-radius: 4px; background: #edf2f0; color: #29473e; }
.story-quote::before { position: absolute; top: 0; left: 0; width: 48px; height: 40px; background: #7e9c8d; content: ""; }
.story-quote::after { position: absolute; top: 0; right: 0; left: 47px; height: 2px; background: rgba(126, 156, 141, 0.45); content: ""; }
.quote-mark { position: absolute; top: 20px; left: 24px; z-index: 2; color: #fff; font-family: Georgia, serif; font-size: 47px; line-height: 1; transform: translate(-50%, -27%); }
.story-quote p { position: relative; z-index: 1; margin: 0; font-family: inherit; font-size: var(--body-size); line-height: var(--body-line); letter-spacing: 0.025em; }
.article-cta { margin-top: clamp(60px, 7vw, 90px); padding: clamp(32px, 5vw, 52px); border-radius: 20px; background: var(--sage); color: #263d34; }
.article-cta p { margin: 0; font-size: var(--body-size); line-height: var(--body-line); }
.article-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.btn-pill { min-width: 220px; max-width: calc(100% - 32px); height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; border: 0; border-radius: 25px; background: linear-gradient(180deg, #a3c1b8, #3d6e5a); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: 1px; transition: filter 0.25s ease, box-shadow 0.25s ease; }
.btn-pill:hover, .btn-pill:focus-visible { filter: brightness(1.1); box-shadow: 0 8px 24px rgba(61, 110, 90, 0.35); }
.btn-pill.secondary { background: linear-gradient(180deg, #9aaad2, #5e677e); }
.btn-pill.secondary:hover, .btn-pill.secondary:focus-visible { box-shadow: 0 8px 24px rgba(94, 103, 126, 0.35); }

@media (max-width: 980px) {
  .cases-hero { min-height: 0; padding: 82px 16px 0; }
  .cases-hero-frame { max-width: none; border-radius: 0; }
  .notes-hero-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .cases-hero-label { left: 24px; bottom: 24px; width: min(76%, 420px); min-height: 112px; padding: 22px 26px; }
  .editorial-list { width: min(100% - 32px, 680px); padding: 40px 0 96px; }
  .editorial-item { grid-template-columns: 1fr; }
  .editorial-media { min-height: 0; aspect-ratio: 1.7 / 1; }
  .editorial-copy { padding: 28px clamp(22px, 5vw, 36px) 32px; }
  .article-hero { padding-top: 72px; }
  .article-hero-frame { height: 220px; }
  .article-main { padding-top: 56px; }
}

@media (max-width: 620px) {
  .hero-bg { inset: 0; width: 100%; height: 100svh; min-height: 100vh; aspect-ratio: auto; background-position: center top; background-size: auto 100%; }
  .series-intro { padding: 40px 22px 0; }
  .series-intro p { margin-top: 12px; }
  .cases-hero-label { left: 16px; bottom: 16px; width: min(82%, 360px); min-height: 98px; padding: 17px 20px; }
  .cases-hero-label h1 { font-size: 30px; }
  .cases-hero-label p { margin-top: 6px; }
  .editorial-list { padding-top: 32px; }
  .editorial-media { aspect-ratio: 1.45 / 1; }
  .editorial-copy { padding: 24px 20px 26px; }
  .editorial-copy h2 { margin-bottom: 12px; }
  .editorial-more { width: 100%; min-height: 46px; margin-top: 19px; }
  .article-series-title { font-size: 32px; }
  .article-main { padding: 48px 20px 90px; }
  .article-header h1 { font-size: 34px; }
  .article-lead { padding: 26px 24px; }
  .article-cover, .story-visual img { border-radius: 12px; }
  .story-quote { padding: 38px 24px 26px; }
  .article-cta { padding: 28px 24px; border-radius: 14px; }
  .article-actions { flex-direction: column; }
  .btn-pill { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Match the live 陪跑日記 hero label treatment in the preview. */
.cases-hero-label {
  left: 0;
  bottom: 10.5%;
  width: clamp(300px, 28.4vw, 544px);
  min-height: clamp(110px, 8.9vw, 170px);
  box-sizing: border-box;
  padding: clamp(26px, 2.4vw, 44px) clamp(26px, 3.2vw, 58px);
  background: rgba(255, 255, 255, 0.08);
  outline-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), inset 0 -1px rgba(255, 255, 255, 0.08);
  color: #4e3b30;
}
.cases-hero-label::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: clamp(12px, 1.6vw, 30px);
  top: 50%;
  width: min(74%, 360px);
  height: 72%;
  transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at left center, rgba(255,255,255,.62), rgba(255,255,255,.38) 46%, rgba(255,255,255,.14) 74%, transparent);
  filter: blur(10px);
}
.cases-hero-label h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 2.35vw, 44px);
  line-height: 1.18;
  white-space: nowrap;
}
.cases-hero-label p {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: clamp(13px, 1.05vw, 20px);
  line-height: 1.45;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .cases-hero-label {
    position: static;
    width: 100%;
    min-height: 0;
    padding: 20px 22px 24px;
    background: #f9f6f2;
    outline: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cases-hero-label::before { display: none; }
}