/* Shared layout for the four sub-project pages. The tokens and header mirror the inline
   styles of main_index.html, which keeps its own copy; change both together. */
:root {
  --brown: #8a4a2b;
  --brown-hover: #a05a36;
  --brown-dark: #54301f;
  --accent: #c08a5e;
  --accent-deep: #a3764f;
  --pink: #fbe4e0;
  --tan: #f4e0cc;
  --cream: #f8f5ec;
  --ink: #44525f;
  --muted: #7a8893;
  --line: #ebe4d2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  background: var(--cream);
  color: #1a2733;
  line-height: 1.6;
}
img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 1000px; margin: 0 auto; padding-left: clamp(16px, 5vw, 48px); padding-right: clamp(16px, 5vw, 48px); }

/* ---------- header ----------
   Same box as the home page header (padding, 48px logo, type sizes) so the bar keeps
   one height when moving between pages. On phones the brand alone fills the row, so the
   nav is hidden there as on the home page; the logo, breadcrumb and pager still lead out. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px clamp(20px, 5vw, 44px);
  background: rgba(248, 245, 236, .92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { height: 48px; width: 48px; object-fit: contain; flex: none; }
.brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--brown); line-height: 1; }
.brand-name span { font-family: 'Noto Sans TC', sans-serif; color: var(--brown-dark); }
.brand-sub { color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .04em; }
.sp-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.sp-nav a { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink); width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; }
.sp-nav a:hover { background: var(--tan); color: var(--brown); }
.sp-nav a[aria-current="page"] { background: var(--brown); color: #fff; }
.sp-nav .home { width: auto; padding: 0 14px; font-family: 'Noto Sans TC', sans-serif; font-weight: 700; margin-right: 6px; }

/* ---------- hero ---------- */
.sp-hero { padding: 56px 0 40px; }
.crumb { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumb a { color: var(--brown); font-weight: 700; }
.crumb a:hover { color: var(--accent); }
.sp-hero-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.sp-no { width: 72px; height: 72px; border-radius: 999px; background: var(--tan); color: var(--brown); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 28px; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-kicker { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: .18em; font-size: 13px; color: var(--accent); }
.sp-hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 900; color: var(--brown-dark); line-height: 1.3; }
.sp-lead { font-size: 18px; line-height: 1.9; color: var(--ink); max-width: 760px; margin-bottom: 20px; }
.tag { display: inline-block; background: var(--pink); color: var(--brown); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- sections ---------- */
.sp-section { padding: 44px 0; }
.sp-section + .sp-section { border-top: 1px solid var(--line); }
.sp-section h2 { font-size: clamp(22px, 3.6vw, 28px); font-weight: 900; color: var(--brown-dark); margin-bottom: 8px; }
.sp-section .sub { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.sp-section p { font-size: 16px; line-height: 1.9; color: var(--ink); }
.sp-section p + p { margin-top: 14px; }
.note { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.7; }

.card { background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 6px 18px rgba(31, 58, 82, .08); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 4px 12px rgba(31, 58, 82, .06); }
.stat .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 32px; color: var(--brown); line-height: 1.1; }
.stat .num small { font-family: 'Noto Sans TC', sans-serif; font-size: 15px; font-weight: 700; margin-left: 4px; }
.stat .label { font-weight: 700; color: var(--brown-dark); font-size: 15px; margin-top: 6px; }
.stat .hint { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* highlight cards */
.hl-card h3 { display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 800; color: var(--brown-dark); margin-bottom: 14px; line-height: 1.45; }
.hl-card h3 .badge { flex: none; font-size: 13px; font-weight: 700; color: var(--brown); background: var(--pink); padding: 3px 10px; border-radius: 999px; }
.hl-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--cream); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.hl-figure .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px; color: var(--brown); }
.hl-figure .what { font-weight: 700; color: var(--brown-dark); }
.hl-figure .tag { margin-left: auto; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.75; color: var(--ink); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--brown); font-weight: 800; }
.ticks li strong { color: var(--brown-dark); }
.outcome { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--accent-deep); font-weight: 700; line-height: 1.7; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 999px; transition: all .18s; }
.btn-primary { background: var(--brown); color: #fff; border: 1.5px solid var(--brown); }
.btn-primary:hover { background: var(--brown-hover); border-color: var(--brown-hover); }
.btn-ghost { background: #fff; color: var(--brown); border: 1.5px solid var(--brown); }
.btn-ghost:hover { background: var(--tan); }

/* video */
.video-frame { position: relative; border-radius: 22px; overflow: hidden; background: #1a1410; box-shadow: 0 16px 36px rgba(31, 58, 82, .18); aspect-ratio: 16 / 9; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: none; cursor: pointer; background: linear-gradient(transparent 40%, rgba(26, 20, 16, .55)); color: #fff; font: inherit; }
.video-play .ring { width: 84px; height: 84px; border-radius: 999px; background: rgba(138, 74, 43, .92); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .2s, background .2s; }
.video-play .ring svg { width: 30px; height: 30px; margin-left: 5px; fill: #fff; }
.video-play:hover .ring, .video-play:focus-visible .ring { transform: scale(1.08); background: var(--brown-hover); }
.video-play .cap { font-weight: 700; font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.video-frame.playing .video-play { display: none; }

/* photo gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery figure { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(31, 58, 82, .06); }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .18s; }
.gallery a:hover img { opacity: .9; }
.gallery figcaption { padding: 12px 16px 14px; font-size: 14px; color: var(--ink); line-height: 1.6; }
.gallery figcaption b { color: var(--brown); margin-right: 6px; }

/* timeline / course cards */
.course { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(31, 58, 82, .06); display: flex; flex-direction: column; }
.course img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.course .body { padding: 16px 18px 18px; }
.course .date { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--accent-deep); font-size: 14px; }
.course h3 { font-size: 16px; font-weight: 800; color: var(--brown-dark); line-height: 1.5; margin: 4px 0 8px; }
.course .meta { font-size: 13px; color: var(--ink); line-height: 1.7; }

.pct-list { display: flex; flex-direction: column; }
.pct-row { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pct-row:last-child { border-bottom: none; }
.pct-row .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px; color: var(--brown); width: 120px; flex: none; }
.pct-row .text { font-size: 15px; color: var(--ink); line-height: 1.6; }

.event { display: flex; gap: 16px; align-items: flex-start; }
.event + .event { margin-top: 18px; }
.event img { width: 150px; border-radius: 10px; flex: none; }
.event .when { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--accent-deep); font-size: 14px; }
.event h3 { font-size: 16px; font-weight: 800; color: var(--brown-dark); margin: 2px 0 4px; line-height: 1.5; }
.event p { font-size: 14px; line-height: 1.7; }

.next-stage { background: var(--brown-dark); color: #f4e0cc; border-radius: 22px; padding: 26px 28px; display: flex; gap: 26px; align-items: center; }
.next-stage .yr { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 40px; color: #fff; line-height: 1; flex: none; }
.next-stage .yr small { display: block; font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--accent); margin-bottom: 6px; }
.next-stage ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.next-stage li { font-size: 15px; line-height: 1.6; }
.next-stage li b { color: #fff; margin-right: 8px; }

.hero-photo { border-radius: 22px; overflow: hidden; margin-top: 28px; box-shadow: 0 10px 28px rgba(31, 58, 82, .12); }
.hero-photo img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

.article h3 { font-size: 18px; font-weight: 800; color: var(--brown-dark); margin: 26px 0 10px; }
.stops { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.stop { display: flex; gap: 16px; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 4px 12px rgba(31, 58, 82, .06); }
.stop .n { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--pink); color: var(--brown); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stop h4 { font-size: 16px; font-weight: 800; color: var(--brown-dark); margin-bottom: 4px; }
.stop p { font-size: 15px; line-height: 1.8; }

.pending { text-align: center; padding: 40px 28px; }
.pending .icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: var(--pink); color: var(--brown); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.pending h2 { margin-bottom: 8px; }

/* ---------- prev / next ---------- */
.sp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 40px 0 64px; }
.sp-pager a { background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 4px 12px rgba(31, 58, 82, .06); transition: transform .2s, box-shadow .2s; }
.sp-pager a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31, 58, 82, .12); }
.sp-pager .dir { font-size: 13px; color: var(--muted); }
.sp-pager .ttl { font-weight: 800; color: var(--brown-dark); margin-top: 2px; }
.sp-pager .next { text-align: right; grid-column: 2; }

.copyright { background: var(--brown-dark); color: #ddc3a6; text-align: center; padding: 22px 16px; font-size: 13px; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sp-nav { display: none; }
  .sp-hero { padding-top: 36px; }
  .sp-no { width: 56px; height: 56px; font-size: 22px; }
  .sp-lead { font-size: 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 22px 20px; }
  .event img { width: 110px; }
  .next-stage { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pct-row .num { width: 96px; font-size: 26px; }
  .sp-pager { grid-template-columns: 1fr; }
  .sp-pager .next { grid-column: 1; }
  .hero-photo img { aspect-ratio: 2 / 1; }
  .video-play .ring { width: 66px; height: 66px; }
}