/**
 * 2025 新北南島文化節 WordPress theme v1.0.0.
 * Design: concise editorial landing page based on the archived festival materials.
 */
:root { --paper:#f4efe4; --cream:#fffaf0; --ink:#173942; --teal:#103c4a; --teal-2:#28616a; --terracotta:#c5542c; --gold:#f0c84d; --line:#d5c6ad; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { z-index:99999; top:8px; left:8px; width:auto; height:auto; clip:auto; padding:10px 14px; background:var(--cream); color:var(--ink); }
.content-wrap { width:min(1180px,calc(100% - clamp(44px,10vw,180px))); margin-inline:auto; }

.site-header { position:fixed; z-index:50; inset:0 0 auto; min-height:78px; color:var(--cream); transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.site-header.is-scrolled { color:var(--ink); background:rgba(244,239,228,.96); box-shadow:0 8px 24px rgba(17,54,61,.1); backdrop-filter:blur(16px); }
.site-header--solid { color:var(--ink); background:rgba(244,239,228,.98); box-shadow:0 8px 24px rgba(17,54,61,.1); backdrop-filter:blur(16px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; width:min(1500px,calc(100% - clamp(40px,8vw,120px))); min-height:78px; margin:auto; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { display:grid; grid-template-columns:repeat(2,9px); grid-template-rows:repeat(2,9px); gap:3px; width:25px; height:25px; transform:rotate(45deg); }
.brand-mark i { display:block; background:var(--terracotta); }
.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) { background:var(--gold); }
.brand-copy { display:grid; line-height:1.22; }
.brand-copy strong { font-family:"Noto Serif TC","PMingLiU",serif; font-size:17px; letter-spacing:.02em; }
.brand-copy small { margin-top:2px; font-size:9px; letter-spacing:.13em; opacity:.74; }
.site-navigation { display:flex; align-items:center; gap:clamp(16px,2vw,30px); font-size:13px; font-weight:600; }
.site-navigation ul { display:flex; gap:clamp(16px,2vw,30px); padding:0; margin:0; list-style:none; }
.site-navigation li a { position:relative; display:block; padding:7px 0; }
.site-navigation li a::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:currentColor; content:""; transform:scaleX(0); transform-origin:left; transition:transform .16s ease; }
.site-navigation li a:hover::after,.site-navigation li a:focus-visible::after { transform:scaleX(1); }
.facebook-link { display:grid; width:29px; height:29px; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:Arial,sans-serif; font-weight:700; transition:color .15s ease,background .15s ease; }
.facebook-link:hover { color:var(--cream); border-color:var(--terracotta); background:var(--terracotta); }
.menu-toggle { display:none; border:0; background:transparent; color:inherit; }

.hero { position:relative; isolation:isolate; display:flex; min-height:max(680px,100svh); align-items:end; overflow:hidden; color:var(--cream); background:var(--teal); }
.hero-image { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center; }
.hero-veil { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(10,34,45,.83) 0%,rgba(15,48,56,.47) 38%,rgba(12,32,39,.05) 73%),linear-gradient(0deg,rgba(10,34,45,.52),transparent 49%); }
.hero-thread { position:absolute; z-index:-1; inset:0; opacity:.25; background-image:repeating-linear-gradient(45deg,transparent 0 19px,rgba(255,250,240,.19) 20px 21px,transparent 22px 41px); mask-image:linear-gradient(90deg,#000,transparent 65%); }
.hero-content { padding:138px 0 clamp(91px,12vh,141px); }
.archive-label { display:flex; align-items:center; gap:12px; margin:0 0 28px; font-size:10px; letter-spacing:.15em; font-weight:700; }
.archive-label i { display:block; width:34px; height:1px; background:var(--gold); }
.hero-pretitle { margin:0 0 4px; font-family:"Noto Serif TC","PMingLiU",serif; font-size:15px; letter-spacing:.06em; }
h1,h2,h3 { font-family:"Noto Serif TC","PMingLiU",serif; font-weight:900; letter-spacing:-.065em; line-height:1.1; }
.hero h1 { margin:0 0 12px; font-size:clamp(60px,7.3vw,110px); }
em { color:var(--gold); font-style:normal; }
.hero-subtitle { margin:0 0 25px; color:var(--gold); font-family:"Noto Serif TC","PMingLiU",serif; font-size:clamp(21px,2.2vw,31px); letter-spacing:.08em; }
.hero-meta { display:flex; flex-wrap:wrap; gap:23px; font-size:14px; }
.scroll-link { display:inline-flex; gap:11px; align-items:center; margin-top:49px; font-size:13px; font-weight:600; transition:transform .16s ease; }
.scroll-link:hover { transform:translateY(3px); }
.hero-credit { position:absolute; right:24px; bottom:18px; margin:0; font-size:10px; letter-spacing:.13em; opacity:.65; writing-mode:vertical-rl; }

.section-tag { display:flex; align-items:center; gap:10px; color:var(--terracotta); font-size:11px; letter-spacing:.1em; font-weight:700; }
.section-tag span { font-family:"Noto Serif TC","PMingLiU",serif; }
.section-tag::after { width:34px; height:1px; background:currentColor; content:""; }
.section-tag-light { color:var(--gold); }
.story { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr) minmax(270px,.75fr); gap:clamp(26px,5vw,76px); align-items:start; padding:clamp(78px,10vw,140px) 0; }
.story-main h2,.section-heading h2,.access-heading h2,.closing h2 { margin:17px 0 20px; color:var(--ink); font-size:clamp(39px,4.3vw,65px); }
.story-main h2 em,.access-heading h2 em { color:var(--terracotta); }
.story-main p { max-width:590px; margin:0; color:#46626a; font-size:clamp(17px,1.6vw,21px); font-weight:500; }
.story-stats { display:grid; grid-template-columns:repeat(2,1fr); border-left:1px solid var(--line); }
.story-stats div { min-height:105px; padding:13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.story-stats strong { display:block; color:var(--terracotta); font-family:"Noto Serif TC","PMingLiU",serif; font-size:34px; line-height:1; }
.story-stats span { display:block; margin-top:8px; color:#587078; font-size:11px; }

.highlights { padding:clamp(78px,10vw,138px) 0; color:var(--cream); background:var(--ink); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:39px; }
.section-heading h2 { margin-bottom:0; color:var(--cream); text-align:right; }
.highlight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.highlight-card { position:relative; min-height:410px; overflow:hidden; background:var(--teal-2); }
.highlight-card::before { position:absolute; inset:0; opacity:.38; background-image:repeating-linear-gradient(45deg,transparent 0 19px,rgba(255,250,240,.20) 20px 21px,transparent 22px 41px); content:""; }
.card-culture { background:linear-gradient(160deg,#0b2f3b,#1d5e74); }
.card-heritage { background:linear-gradient(160deg,#653d2a,#bd6a3b); }
.card-sustainability { background:linear-gradient(160deg,#3a625c,#0f3d4a); }
.card-content { position:relative; display:flex; min-height:410px; flex-direction:column; padding:25px; }
.card-top { display:flex; align-items:center; justify-content:space-between; color:var(--gold); font-size:10px; letter-spacing:.1em; font-weight:700; }
.card-top b { font-size:22px; line-height:1; }
.card-visual { position:relative; display:flex; height:98px; align-items:center; margin:24px 0 17px; overflow:hidden; border-top:1px solid rgba(255,250,240,.26); border-bottom:1px solid rgba(255,250,240,.26); }
.card-visual::before,.card-visual::after { position:absolute; left:0; width:100%; height:1px; background:rgba(255,250,240,.21); content:""; }
.card-visual::before { top:29px; }
.card-visual::after { bottom:29px; }
.card-visual i { position:relative; display:block; flex:1; height:51px; border-right:1px solid rgba(255,250,240,.27); transform:skewX(-27deg); }
.card-visual i:first-child { border-left:1px solid rgba(255,250,240,.27); }
.card-visual span { position:absolute; z-index:1; right:8px; color:rgba(255,250,240,.8); font-family:"Noto Serif TC","PMingLiU",serif; font-size:47px; font-weight:900; line-height:1; }
.card-heritage .card-visual span { color:rgba(255,244,213,.92); }
.card-sustainability .card-visual span { color:rgba(240,200,77,.9); }
.card-content h3 { margin:auto 0 11px; font-size:clamp(25px,2.3vw,33px); line-height:1.22; }
.card-content p { margin:0 0 16px; color:#edf1ec; font-size:13px; line-height:1.72; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.card-tags span { padding:3px 7px; border:1px solid rgba(255,250,240,.35); color:#f7e3a2; font-size:9px; line-height:1.35; }
.card-content small { padding-top:12px; border-top:1px solid rgba(255,250,240,.32); color:var(--gold); font-size:10px; line-height:1.5; }

.culture-essay { padding:clamp(78px,10vw,140px) 0; background:var(--paper); }
.culture-essay-grid { display:grid; grid-template-columns:minmax(250px,.68fr) minmax(0,1.32fr); gap:clamp(35px,9vw,142px); align-items:center; }
.culture-essay-stamp { position:relative; display:grid; width:min(100%,310px); aspect-ratio:1; place-items:center; margin:auto; color:var(--cream); background:var(--terracotta); clip-path:polygon(0 10%,10% 10%,10% 0,90% 0,90% 10%,100% 10%,100% 90%,90% 90%,90% 100%,10% 100%,10% 90%,0 90%); }
.culture-essay-stamp::before,.culture-essay-stamp::after { position:absolute; inset:18px; border:1px solid rgba(255,250,240,.38); content:""; }
.culture-essay-stamp::after { inset:35px; border-color:rgba(255,250,240,.22); transform:rotate(45deg); }
.culture-essay-stamp span,.culture-essay-stamp b { position:relative; z-index:1; font-family:"Noto Serif TC","PMingLiU",serif; font-size:clamp(39px,4vw,58px); letter-spacing:.12em; line-height:1; }
.culture-essay-stamp b { color:var(--gold); }
.culture-essay-stamp i { position:relative; z-index:1; width:54px; height:1px; margin:14px 0; background:var(--gold); }
.culture-essay-copy h2 { margin:17px 0 25px; color:var(--ink); font-size:clamp(40px,4.5vw,67px); }
.culture-essay-copy h2 em { color:var(--terracotta); }
.culture-essay-copy p { max-width:735px; margin:0 0 17px; color:#46626a; font-size:clamp(16px,1.45vw,19px); }

.festival-paths { padding:clamp(78px,10vw,138px) 0; color:var(--cream); background:#28616a; }
.festival-paths-heading { margin-bottom:39px; }.festival-paths-heading h2 { color:var(--cream); }.festival-paths-heading h2 em { color:var(--gold); }
.festival-path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(255,250,240,.34); border-left:1px solid rgba(255,250,240,.34); }
.festival-path-grid article { min-height:228px; padding:23px; border-right:1px solid rgba(255,250,240,.34); border-bottom:1px solid rgba(255,250,240,.34); }
.festival-path-grid span { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.1em; }.festival-path-grid h3 { margin:38px 0 12px; color:var(--cream); font-size:27px; letter-spacing:-.04em; }.festival-path-grid p { margin:0; color:#d9e9e4; font-size:13px; line-height:1.8; }

.access { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(410px,1.2fr); gap:clamp(35px,7vw,100px); padding:clamp(78px,10vw,138px) 0; }
.access-heading p { max-width:420px; color:#536e74; font-size:16px; }
.shuttle-card { padding:clamp(25px,4vw,43px); background:#e7dbc4; }
.shuttle-title { margin:0; color:var(--terracotta); font-family:"Noto Serif TC","PMingLiU",serif; font-size:20px; font-weight:700; }
.route-line { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:42px 0 29px; }
.route-line div { position:relative; min-width:0; }
.route-line div:not(:last-child)::after { position:absolute; top:8px; left:21px; width:calc(100% - 2px); height:2px; background:var(--ink); content:""; }
.route-line i { position:relative; z-index:1; display:block; width:14px; height:14px; margin-bottom:10px; border:3px solid #e7dbc4; border-radius:50%; background:var(--terracotta); box-shadow:0 0 0 2px var(--ink); }
.route-line strong { display:block; color:var(--ink); font-family:"Noto Serif TC","PMingLiU",serif; font-size:14px; line-height:1.32; }
.route-line small { color:#617278; font-size:9px; }
.shuttle-times { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.shuttle-times div { padding:15px; background:var(--cream); }
.shuttle-times p { margin:0 0 4px; color:var(--terracotta); font-size:10px; letter-spacing:.1em; font-weight:700; }
.shuttle-times strong { display:block; color:var(--ink); font-family:"Noto Serif TC","PMingLiU",serif; font-size:21px; line-height:1.3; }
.shuttle-times span { display:block; margin-top:3px; color:#617278; font-size:10px; }
.shuttle-service-note { margin:25px 0 0; padding:15px; color:#3b595f; background:var(--cream); font-size:12px; }
.bus-note { grid-column:2; display:flex; gap:11px; align-items:flex-start; margin-top:-60px; padding:16px 18px; border-top:1px solid #d6c8b3; color:#3b595f; font-size:11px; }
.bus-note b { flex:none; color:var(--terracotta); font-size:12px; }
.bus-note p { margin:0; line-height:1.8; }

.closing { position:relative; isolation:isolate; display:flex; min-height:430px; align-items:center; overflow:hidden; color:var(--cream); }
.closing > img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:63% center; filter:saturate(.76); }
.closing-veil { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(10,34,45,.94),rgba(10,34,45,.72) 50%,rgba(10,34,45,.23)); }
.closing-content { width:min(1180px,calc(100% - clamp(44px,10vw,180px))); margin-inline:auto; }
.closing-icon { margin:0; color:var(--gold); font-size:22px; }
.closing h2 { color:var(--cream); }
.closing p { color:#d0ded9; font-size:14px; }
.closing a { display:inline-flex; align-items:center; gap:9px; margin-top:8px; padding:11px 15px; border:1px solid var(--gold); color:var(--gold); font-size:12px; font-weight:600; transition:color .16s ease,background .16s ease; }
.closing a:hover { color:var(--ink); background:var(--gold); }
.front-popular { padding:clamp(68px,9vw,118px) 0; background:var(--paper); }
.front-popular-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:30px; }
.front-popular-kicker { margin:0; color:var(--terracotta); font-size:10px; letter-spacing:.15em; font-weight:700; }.front-popular-heading h2 { margin:7px 0 0; color:var(--ink); font-size:clamp(39px,4vw,58px); }
.front-popular-heading > a { display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border:1px solid var(--terracotta); color:var(--terracotta); font-size:12px; font-weight:700; transition:color .16s ease,background .16s ease; }.front-popular-heading > a:hover { color:var(--cream); background:var(--terracotta); }
.front-popular-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.front-popular-card { min-width:0; background:var(--cream); border-top:4px solid var(--terracotta); box-shadow:0 9px 22px rgba(23,57,66,.06); transition:transform .18s ease,box-shadow .18s ease; }.front-popular-card:hover { box-shadow:0 17px 30px rgba(23,57,66,.12); transform:translateY(-5px); }.front-popular-card a { position:relative; display:flex; min-height:245px; flex-direction:column; padding:22px; overflow:hidden; }.front-popular-index { position:absolute; z-index:2; top:15px; left:15px; display:grid; width:30px; height:30px; place-items:center; color:var(--ink); background:var(--gold); font-family:"Noto Serif TC","PMingLiU",serif; font-size:13px; }.front-popular-image { height:96px; margin:-22px -22px 20px; overflow:hidden; background:var(--teal); }.front-popular-image img { width:100%; height:100%; object-fit:cover; }.front-popular-pattern { display:grid; height:96px; margin:-22px -22px 20px; place-items:center; color:var(--gold); background:repeating-linear-gradient(45deg,#173942 0 13px,#28616a 13px 26px); font-family:"Noto Serif TC","PMingLiU",serif; font-size:45px; }.front-popular-card h3 { margin:0 0 20px; color:var(--ink); font-size:24px; letter-spacing:-.04em; line-height:1.3; }.front-popular-read { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--terracotta); font-size:11px; font-weight:700; }.front-popular-read b { font-size:16px; }.front-popular-empty { display:grid; min-height:162px; place-items:center; align-content:center; border:1px solid var(--line); color:#617278; text-align:center; }.front-popular-empty span { color:var(--terracotta); font-family:"Noto Serif TC","PMingLiU",serif; font-size:34px; }.front-popular-empty p { margin:8px 0 0; font-size:14px; }
.site-footer { color:#dce5e0; background:var(--teal); font-size:10px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; width:min(1500px,calc(100% - clamp(40px,8vw,120px))); padding:19px 0; margin:auto; }
.footer-inner p { margin:0; }
.footer-inner a { display:inline-flex; gap:5px; align-items:center; color:var(--gold); }
.archive-main { min-height:58vh; padding:150px 0 80px; }
.archive-entry { padding:22px 0; border-bottom:1px solid var(--line); }
.archive-entry h2 { font-size:28px; }

@media (max-width:900px) {
  .site-navigation { position:fixed; z-index:49; top:68px; right:14px; left:14px; display:grid; gap:0; padding:18px; color:var(--ink); background:var(--cream); box-shadow:0 18px 36px rgba(23,57,66,.18); opacity:0; pointer-events:none; transform:translateY(-16px); transition:transform .18s ease,opacity .18s ease; }
  .site-navigation.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .site-navigation ul { display:grid; gap:0; }
  .site-navigation li a { padding:8px 0; border-bottom:1px solid #e5d9c5; font-family:"Noto Serif TC","PMingLiU",serif; }
  .facebook-link { display:flex; width:auto; height:auto; gap:8px; justify-content:center; margin-top:8px; padding:10px 12px; border:0; border-radius:0; color:var(--cream); background:var(--ink); }
  .facebook-link::after { content:"十三行博物館 Facebook"; font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; font-size:11px; }
  .menu-toggle { display:grid; gap:4px; width:35px; padding:8px; }
  .menu-toggle span:not(.screen-reader-text) { display:block; width:100%; height:2px; background:currentColor; }
  .story { grid-template-columns:.6fr 1.4fr; }
  .story-stats { grid-column:2; max-width:520px; }
  .highlight-grid { grid-template-columns:1fr; }
  .highlight-card,.card-content { min-height:330px; }
	.culture-essay-grid { grid-template-columns:1fr 1.6fr; gap:35px; }.culture-essay-stamp { max-width:230px; }.festival-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.front-popular-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .access { grid-template-columns:1fr; }
  .bus-note { grid-column:auto; margin-top:-20px; }
}
@media (max-width:620px) {
  .header-inner { min-height:65px; width:calc(100% - 30px); }
  .site-header { min-height:65px; }
  .site-navigation { top:62px; right:10px; left:10px; }
  .brand-mark { grid-template-columns:repeat(2,7px); grid-template-rows:repeat(2,7px); gap:2px; width:19px; height:19px; }
  .brand-copy strong { font-size:14px; }
  .brand-copy small { font-size:8px; }
  .content-wrap,.closing-content { width:calc(100% - 44px); }
  .hero { min-height:660px; }
  .hero-image { object-position:63% center; }
  .hero-veil { background:linear-gradient(0deg,rgba(10,34,45,.84),rgba(10,34,45,.1) 69%),linear-gradient(90deg,rgba(10,34,45,.35),transparent); }
  .hero-content { padding:110px 0 71px; }
  .archive-label { gap:8px; margin-bottom:21px; font-size:8px; }
  .archive-label i { width:20px; }
  .hero-pretitle { font-size:12px; }
  .hero h1 { font-size:58px; }
  .hero-subtitle { font-size:22px; }
  .hero-meta { display:grid; gap:5px; font-size:12px; }
  .scroll-link { margin-top:32px; }
  .hero-credit { right:10px; bottom:10px; font-size:8px; }
  .story { grid-template-columns:1fr; gap:25px; padding:65px 0; }
  .story-stats { grid-column:auto; width:100%; }
  .story-main h2,.section-heading h2,.access-heading h2,.closing h2 { font-size:39px; }
  .story-main p { font-size:16px; }
  .highlights,.access { padding:65px 0; }
	.culture-essay,.festival-paths,.front-popular { padding:65px 0; }.culture-essay-grid { grid-template-columns:1fr; gap:34px; }.culture-essay-stamp { width:180px; }.culture-essay-stamp span,.culture-essay-stamp b { font-size:32px; }.culture-essay-stamp i { width:38px; margin:9px 0; }.culture-essay-copy h2 { font-size:39px; }.culture-essay-copy p { font-size:16px; }.festival-path-grid { grid-template-columns:1fr; }.festival-path-grid article { min-height:0; }.festival-path-grid h3 { margin:23px 0 9px; }.front-popular-heading { display:grid; align-items:start; }.front-popular-grid { grid-template-columns:1fr; }
  .section-heading { display:block; margin-bottom:28px; }
  .section-heading h2 { margin-top:15px; text-align:left; }
  .highlight-card,.card-content { min-height:320px; }
  .card-content { padding:20px; }
  .card-visual { height:76px; margin:18px 0 13px; }
  .card-visual i { height:39px; }
  .access { gap:27px; }
  .route-line { gap:6px; margin:32px 0 24px; }
  .route-line div:not(:last-child)::after { top:6px; left:17px; }
  .route-line i { width:11px; height:11px; margin-bottom:7px; border-width:2px; }
  .route-line strong { font-size:11px; }
  .route-line small { font-size:8px; }
  .shuttle-times { grid-template-columns:1fr; }
  .bus-note { margin-top:-8px; padding:14px 0 0; border-top:0; }
  .closing { min-height:390px; }
  .footer-inner { display:grid; width:calc(100% - 40px); padding:18px 0; }
}
@media (prefers-reduced-motion:no-preference) { .hero-content,.story-main,.section-heading,.access-heading { animation:rise-in .57s cubic-bezier(.23,1,.32,1) both; } }
@keyframes rise-in { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }