:root{
  --ink:#231c18;
  --ink-soft:#5a4d44;
  --paper:#f5efe3;
  --paper-2:#ece3d1;
  --paper-3:#fbf8f1;
  --zhu:#7b1e23;
  --zhu-deep:#3a1014;
  --gold:#b08a4c;
  --gold-soft:#d9c39a;
  --line:rgba(176,138,76,.45);
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17.5px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--zhu)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.35;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== header ===== */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s,box-shadow .35s}
.hd.solid{background:rgba(58,16,20,.96);box-shadow:0 1px 0 rgba(217,195,154,.25)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.35em;color:#f3e6c8;text-decoration:none}
.nav{display:flex;gap:4px}
.nav a{color:#efe2c4;text-decoration:none;font-size:.95rem;padding:8px 12px;letter-spacing:.12em;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--gold-soft)}
.burger{display:none;background:none;border:1px solid rgba(239,226,196,.6);color:#efe2c4;font:inherit;font-size:.9rem;padding:4px 12px;letter-spacing:.2em}
@media (max-width:860px){
  .burger{display:block}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--zhu-deep);padding:8px 20px 20px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid rgba(217,195,154,.18);font-size:1.05rem}
}

/* ===== hero ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#f6ecd6;background:#1b0b0c;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,8,10,.55) 0%,rgba(27,8,10,.1) 35%,rgba(27,8,10,.55) 65%,rgba(27,8,10,.95) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:64px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end}
.hero-title{writing-mode:vertical-rl;font-family:var(--serif);font-weight:900;font-size:clamp(3.6rem,9vw,6.4rem);letter-spacing:.28em;line-height:1;color:#f8eed6;text-shadow:0 2px 24px rgba(0,0,0,.5);border-left:1px solid var(--gold-soft);padding-left:18px}
.hero-body{max-width:560px;padding-bottom:6px}
.hero-sub{font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.75rem);letter-spacing:.3em;color:var(--gold-soft);margin-bottom:10px}
.hero-vow{font-family:var(--serif);font-size:1.05rem;letter-spacing:.5em;color:#e8d9b8;opacity:.9;margin-bottom:28px}
.hero-info{font-size:1rem;line-height:1.9;color:#eadfc6;border-top:1px solid rgba(217,195,154,.35);padding-top:18px;margin-bottom:26px}
.hero-info a{color:#f6ecd6}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 26px;font-size:1rem;letter-spacing:.2em;text-decoration:none;border:1px solid var(--gold-soft);color:#f6ecd6;transition:background .25s}
.btn.fill{background:var(--gold);border-color:var(--gold);color:#2a1508}
.btn:hover{background:rgba(217,195,154,.18)}
.btn.fill:hover{background:#c39d5d}
@media (max-width:640px){
  .hero .wrap{grid-template-columns:1fr;gap:22px}
  .hero-title{writing-mode:horizontal-tb;border-left:0;padding-left:0;font-size:3.4rem;letter-spacing:.3em}
}

/* ===== quick info ===== */
.quick{background:var(--zhu-deep);color:#efe2c4}
.quick .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.quick .cell{padding:22px 18px;border-left:1px solid rgba(217,195,154,.2)}
.quick .cell:first-child{border-left:0}
.quick .k{font-family:var(--serif);color:var(--gold-soft);font-size:.9rem;letter-spacing:.3em;margin-bottom:4px}
.quick .v{font-size:1rem;line-height:1.7}
.quick a{color:#f6ecd6}
@media (max-width:860px){.quick .wrap{grid-template-columns:1fr 1fr}.quick .cell:nth-child(3){border-left:0}.quick .cell{border-top:1px solid rgba(217,195,154,.15)}}
@media (max-width:480px){.quick .wrap{grid-template-columns:1fr}.quick .cell{border-left:0}}


/* ===== sections ===== */
section{padding:96px 0}
.alt{background:var(--paper-2)}
.sh{text-align:center;margin-bottom:56px}
.sh .no{font-family:var(--serif);color:var(--gold);letter-spacing:.5em;font-size:.95rem;margin-bottom:12px}
.sh h2{font-size:clamp(1.85rem,4vw,2.5rem);letter-spacing:.3em;color:var(--zhu-deep);padding-left:.3em}
.sh .orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 0;color:var(--gold)}
.sh .orn::before,.sh .orn::after{content:"";width:72px;height:1px;background:var(--line)}
.sh .orn span{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold)}
.sh p.lead{max-width:640px;margin:22px auto 0;color:var(--ink-soft)}
h3.t{font-size:1.45rem;letter-spacing:.15em;color:var(--zhu-deep);margin-bottom:14px}
.kicker{font-family:var(--serif);color:var(--gold);letter-spacing:.3em;font-size:.95rem;margin-bottom:6px}

figure{margin:0}
figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:8px;letter-spacing:.06em}
.frame{background:var(--paper-3);padding:8px;border:1px solid var(--line)}
.zoom{cursor:zoom-in}

/* deity */
.deity{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.deity .pic{position:relative}
.deity .pic img{aspect-ratio:4/5;object-fit:cover;width:100%}
.deity .name{font-family:var(--serif);font-size:clamp(2rem,4.5vw,2.8rem);letter-spacing:.25em;color:var(--zhu-deep);margin:4px 0 18px}
.vow{font-family:var(--serif);font-size:1.25rem;letter-spacing:.35em;color:var(--zhu);border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 24px}
.attend{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.attend img{aspect-ratio:3/4;object-fit:cover;width:100%}
.attend figcaption{text-align:center;font-family:var(--serif);font-size:1rem;color:var(--ink);letter-spacing:.2em}
.b1{margin-top:56px;display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;border-top:1px solid var(--line);padding-top:48px}
@media (max-width:860px){.deity,.b1{grid-template-columns:1fr;gap:28px}.attend{grid-template-columns:1fr 1fr}}

/* history */
.hist{max-width:820px;margin:0 auto;position:relative}
.hist::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:1px;background:var(--line)}
.step{display:grid;grid-template-columns:56px 1fr;gap:24px;margin-bottom:52px;position:relative}
.step .n{width:56px;height:56px;border:1px solid var(--gold);background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.4rem;color:var(--zhu);position:relative;z-index:1}
.step h3{font-size:1.35rem;letter-spacing:.15em;color:var(--zhu-deep);margin:10px 0 14px}
.step figure{margin-top:20px}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* worship order */
.order{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.floor{background:var(--paper-3);border:1px solid var(--line);padding:28px}
.floor h3{text-align:center;font-size:1.2rem;letter-spacing:.4em;color:var(--zhu-deep);margin-bottom:22px}
.olist{list-style:none;margin:0;padding:0}
.olist li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.olist li:last-child{border-bottom:0}
.olist .c{flex:none;width:40px;height:40px;border-radius:50%;background:var(--zhu);color:#f6ecd6;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.1rem}
.olist b{font-family:var(--serif);font-size:1.15rem;letter-spacing:.12em}
.olist small{display:block;color:var(--ink-soft);font-size:.85rem}
.order-note{text-align:center;margin-top:28px;color:var(--ink-soft);font-size:.95rem}
@media (max-width:760px){.order{grid-template-columns:1fr}}

/* services */
.lantern-head{text-align:center;margin-bottom:40px}
.lantern-head .yr{font-family:var(--serif);font-size:1.5rem;letter-spacing:.2em;color:var(--zhu-deep)}
.lantern-head .slogan{color:var(--gold);font-family:var(--serif);letter-spacing:.4em;margin-top:6px}
.lanterns{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lamp{background:var(--paper-3);border:1px solid var(--line);border-top:3px solid var(--zhu);padding:30px 26px;text-align:center;display:flex;flex-direction:column}
.lamp h4{font-size:1.4rem;letter-spacing:.25em;color:var(--zhu-deep)}
.lamp .price{font-family:var(--serif);font-size:1.15rem;color:var(--zhu);margin:14px 0 4px;white-space:nowrap}
.lamp .price strong{font-size:2rem;font-weight:700}
.lamp .meta{font-size:.9rem;color:var(--ink-soft);min-height:1.6em}
.lamp .pray{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-family:var(--serif);letter-spacing:.12em;line-height:2;color:var(--ink)}
.gifts{margin-top:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gift-grid img{aspect-ratio:1;object-fit:cover;width:100%}
.note{font-size:.92rem;color:var(--ink-soft);text-align:center;margin-top:32px}
@media (max-width:860px){.lanterns{grid-template-columns:1fr}.gifts{grid-template-columns:1fr}}

.paper-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch;margin-top:20px}
.paper-item{background:var(--paper-3);border:1px solid var(--line);padding:26px}
.paper-item h4{font-size:1.2rem;letter-spacing:.1em;color:var(--zhu-deep);margin-bottom:6px}
.paper-item .p{font-family:var(--serif);color:var(--zhu);font-size:1.4rem;margin-bottom:10px}
.paper-item img{height:100%;object-fit:cover}
@media (max-width:860px){.paper-grid{grid-template-columns:1fr}}

.sub-block{margin-top:88px}
.rules{max-width:820px;margin:0 auto;background:var(--paper-3);border:1px solid var(--line);padding:44px 48px;position:relative}
.rules::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.rules h3{text-align:center;font-size:1.5rem;letter-spacing:.3em;color:var(--zhu-deep);margin-bottom:8px}
.rules .intro{text-align:center;color:var(--ink-soft);font-size:.95rem;margin-bottom:28px}
.rules ol{list-style:none;padding:0;margin:0;counter-reset:r}
.rules li{counter-increment:r;display:grid;grid-template-columns:48px 1fr;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line)}
.rules li:last-child{border-bottom:0}
.rules li::before{content:counter(r,cjk-ideographic);font-family:var(--serif);font-size:1.3rem;color:var(--zhu);text-align:center;padding-top:2px}
.rules b{font-family:var(--serif);font-size:1.12rem;letter-spacing:.1em;display:block;margin-bottom:2px}
.rules .sign{text-align:right;font-family:var(--serif);margin-top:20px;letter-spacing:.15em}
@media (max-width:640px){.rules{padding:34px 22px}}

/* poems */
.poems{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.poem{background:var(--paper-3);border:1px solid var(--line);padding:32px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.poem .verse{writing-mode:vertical-rl;font-family:var(--serif);font-size:1.4rem;line-height:2.1;letter-spacing:.3em;color:var(--ink);height:12.5em}
.poem .verse span{color:var(--zhu);font-weight:900}
.poem h3{font-size:1.15rem;letter-spacing:.2em;color:var(--zhu-deep);margin-bottom:12px}
.poem .sig{font-family:var(--serif);font-size:.9rem;color:var(--ink-soft);margin-top:12px;letter-spacing:.1em}
@media (max-width:860px){.poems{grid-template-columns:1fr}}
@media (max-width:520px){.poem{grid-template-columns:1fr}.poem .verse{margin:0 auto}}

/* festivals */
.fest{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fest + .fest{margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.fest .date{display:inline-block;font-family:var(--serif);color:var(--zhu);border:1px solid var(--zhu);padding:2px 12px;letter-spacing:.2em;font-size:.95rem;margin-bottom:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair img{aspect-ratio:4/3;object-fit:cover;width:100%}
video{width:100%;background:#000;display:block}
@media (max-width:860px){.fest{grid-template-columns:1fr;gap:28px}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:opacity .2s}
.gallery img:hover{opacity:.85}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.3fr;gap:40px}
.vinfo dl{margin:0}
.vinfo dt{font-family:var(--serif);color:var(--gold);letter-spacing:.3em;font-size:.95rem;margin-top:22px}
.vinfo dt:first-child{margin-top:0}
.vinfo dd{margin:4px 0 0;font-size:1.05rem}
.map{border:1px solid var(--line);background:var(--paper-3);padding:8px;min-height:380px}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:sepia(.15)}
@media (max-width:860px){.visit{grid-template-columns:1fr}}

/* footer */
footer{background:var(--zhu-deep);color:#e6d7b6;padding:64px 0 120px;text-align:center}
footer .fname{font-family:var(--serif);font-size:2rem;letter-spacing:.5em;color:#f6ecd6;padding-left:.5em}
footer .fsub{font-family:var(--serif);color:var(--gold-soft);letter-spacing:.4em;margin:8px 0 26px}
footer p{font-size:.95rem;margin:4px 0}
footer a{color:#f6ecd6}
footer .links{margin:22px 0;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
footer .fine{font-size:.82rem;color:#bfa985;margin-top:24px}

/* mobile action bar */
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;background:var(--zhu-deep);border-top:1px solid rgba(217,195,154,.35)}
.actbar a{flex:1;text-align:center;color:#f6ecd6;text-decoration:none;padding:14px 0;font-size:1rem;letter-spacing:.3em}
.actbar a + a{border-left:1px solid rgba(217,195,154,.25)}
.actbar{padding-bottom:env(safe-area-inset-bottom)}
html{background:#3a1014}
@media (max-width:760px){.actbar{display:flex}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,8,9,.94);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-height:88vh;max-width:100%;object-fit:contain;box-shadow:0 0 0 1px rgba(217,195,154,.3)}
.lb p{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#e6d7b6;font-size:.95rem}
.nw{display:inline-block;white-space:nowrap}
p,li,dd,figcaption{text-wrap:pretty}
.sh h2,.sh p.lead,.lantern-head .yr,.lantern-head .slogan,h3,h4{text-wrap:balance}
@media (max-width:480px){
  .lantern-head .slogan{letter-spacing:.2em}
  .lantern-head .yr{letter-spacing:.1em;font-size:1.35rem}
  .hero-vow{letter-spacing:.3em}
  .vow{letter-spacing:.2em}
  footer .fsub{letter-spacing:.25em}
  .sh h2{letter-spacing:.2em}
  .lamp .pray{letter-spacing:.06em}
}

/* ===== language switcher ===== */
.hd .right{display:flex;align-items:center;gap:10px}
.langs{display:flex;align-items:center;gap:2px;font-size:.85rem}
.langs a{color:#d9c39a;text-decoration:none;padding:4px 7px;line-height:1.2;border:1px solid transparent;font-family:var(--sans)}
.langs a[aria-current]{color:#f6ecd6;border-color:rgba(217,195,154,.55)}
.langs a:hover{color:#f6ecd6}
.brand-sub{display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:.12em;color:#eadfc6;margin-bottom:6px}
.addr-zh{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.hero .addr-zh{color:#d9c39a}
@media (max-width:480px){.langs{font-size:.8rem}.langs a{padding:3px 5px}.brand{letter-spacing:.2em}}

/* ===== per-language type ===== */
html[lang="ja"]{--serif:"Noto Serif JP","Noto Serif TC","Hiragino Mincho ProN",serif;--sans:"Noto Sans JP","Noto Sans TC","Hiragino Sans",sans-serif}
html[lang="ko"]{--serif:"Noto Serif KR","Noto Serif TC",serif;--sans:"Noto Sans KR","Noto Sans TC","Apple SD Gothic Neo",sans-serif}
html[lang="en"]{--serif:"Noto Serif","Noto Serif TC",Georgia,serif;--sans:"Noto Sans","Noto Sans TC",Arial,sans-serif}
html[lang="ko"] body{word-break:keep-all}
html[lang="en"] body{letter-spacing:0;line-height:1.7}
html[lang="ko"] body{line-height:1.8}

/* English: CJK-style wide tracking looks wrong on Latin text */
html[lang="en"] .sh h2{letter-spacing:.04em;padding-left:0}
html[lang="en"] .sh .no,html[lang="en"] .kicker{letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
html[lang="en"] .hero-sub{letter-spacing:.04em}
html[lang="en"] .hero-vow{letter-spacing:.02em;font-style:italic;font-size:1.05rem}
html[lang="en"] .vow{letter-spacing:.02em;font-style:italic;font-size:1.15rem}
html[lang="en"] .deity .name{letter-spacing:.02em}
html[lang="en"] h3.t,html[lang="en"] .step h3,html[lang="en"] .floor h3,html[lang="en"] .rules h3,html[lang="en"] .poem h3{letter-spacing:.03em}
html[lang="en"] .lamp h4,html[lang="en"] .paper-item h4,html[lang="en"] .olist b,html[lang="en"] .rules b{letter-spacing:.02em}
html[lang="en"] .lantern-head .yr{letter-spacing:.03em}
html[lang="en"] .lantern-head .slogan{letter-spacing:.06em;font-style:italic}
html[lang="en"] .lamp .pray{letter-spacing:0;font-style:italic;line-height:1.75}
html[lang="en"] .attend figcaption,html[lang="en"] .fest .date,html[lang="en"] .quick .k,html[lang="en"] .vinfo dt{letter-spacing:.06em}
html[lang="en"] .btn,html[lang="en"] .actbar a,html[lang="en"] .nav a{letter-spacing:.06em}
html[lang="en"] footer .fsub{letter-spacing:.06em;font-style:italic}
html[lang="en"] .rules .sign{letter-spacing:.02em}

/* Korean: moderate tracking */
html[lang="ko"] .sh h2{letter-spacing:.12em}
html[lang="ko"] .hero-sub,html[lang="ko"] .deity .name{letter-spacing:.1em}
html[lang="ko"] .hero-vow,html[lang="ko"] .vow{letter-spacing:.06em}
html[lang="ko"] .lantern-head .slogan{letter-spacing:.06em}
html[lang="ko"] .lamp .pray{letter-spacing:0;line-height:1.85}
html[lang="ko"] footer .fsub{letter-spacing:.08em}
html[lang="ko"] .lamp h4,html[lang="ko"] .floor h3,html[lang="ko"] .rules h3{letter-spacing:.1em}

/* Japanese */
html[lang="ja"] .hero-vow,html[lang="ja"] .vow{letter-spacing:.12em}
html[lang="ja"] .lantern-head .slogan{letter-spacing:.12em}
html[lang="ja"] footer .fsub{letter-spacing:.2em}
html[lang="ja"] .lamp .price,html[lang="en"] .lamp .price,html[lang="ko"] .lamp .price{white-space:normal}
html[lang="en"] .rules li::before{content:counter(r)}
.poem .verse,.hero-title,.brand,footer .fname{font-family:"Noto Serif TC",var(--serif)}
@media (max-width:480px){
  .burger{letter-spacing:.06em;padding:4px 9px}
  .hd .right{gap:6px}
  .langs a{padding:3px 4px}
  .brand{font-size:1.15rem}
}
.gifts>*,.lanterns>*,.paper-grid>*,.fest>*,.deity>*,.b1>*,.visit>*{min-width:0}
.nw{max-width:100%}
a[href^="tel:"]{white-space:nowrap}
.olist b,.poem .sig,figcaption,.lamp .pray,.lamp .meta{text-wrap:balance}
