/* ============================================================
   梧棲長興宮
   Homepage Style
============================================================ */


/* ============================================================
   基本設定
============================================================ */

:root {

    --temple-red: #7e0c0c;

    --temple-dark-red: #430505;

    --temple-black: #160b08;

    --gold: #d8b15d;

    --gold-light: #f2d992;

    --gold-dark: #9c7228;

    --paper: #f6f0e5;

    --text: #3a2a22;
}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    color: var(--text);

    background: var(--paper);

    font-family:
        "Noto Serif TC",
        "Microsoft JhengHei",
        serif;

    overflow-x: hidden;

}


a {

    text-decoration: none;

}


img {

    max-width: 100%;

}



/* ============================================================
   金色粒子
============================================================ */

#particleCanvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 30;

}



/* ============================================================
   Navigation
============================================================ */

#mainNav {

    min-height: 82px;

    padding: 12px 0;

    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            rgba(24, 7, 3, .88),
            rgba(24, 7, 3, .35),
            transparent
        );

    transition: all .4s ease;

}


#mainNav.scrolled {

    min-height: 68px;

    padding: 7px 0;

    background:
        rgba(34, 7, 5, .96);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .3);

    backdrop-filter: blur(12px);

}


.navbar-brand {

    gap: 10px;

}


.logo-text {

    display: flex;

    flex-direction: column;

}


.logo-main {

    color: var(--gold-light);

    font-size: 27px;

    font-weight: 900;

    letter-spacing: 0.9rem;

    line-height: 1.1;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .8);

}


.logo-en {

    margin-top: 5px;

    color: rgba(255, 255, 255, .62);

    font-size: 8px;

    letter-spacing: 2px;

}


.logo-seal {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 27px;

    height: 45px;

    border-radius: 12px;

    color: #fff;

    background: #b31317;

    font-size: 11px;

    line-height: 14px;

    box-shadow:
        0 0 20px rgba(214, 29, 24, .4);

}
.logo-w{
    width:22rem;height:auto;
}

.navbar-nav {

    gap: 5px;

}


.navbar-nav .nav-link {

    position: relative;

    padding: 15px 10px !important;

    color: rgba(255, 255, 255, .88);

    font-size: 14px;

    letter-spacing: 1px;
}


.navbar-nav .nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: 6px;

    width: 0;

    height: 1px;

    background: var(--gold-light);

}


.navbar-nav .nav-link:hover {

    color: var(--gold-light);

}


.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {

    width: calc(100% - 20px);

}



/* ============================================================
   HERO
============================================================ */

.hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 820px;

    height: 100vh;

    max-height: 1100px;

    overflow: hidden;

    background: #190705;

}




/* ============================================================
   宮廟主圖
============================================================ */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        url("../images/temple-hero.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:center center;
}
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}
.hero-bg .box > * {
    position: relative;
    z-index: 1;
}
/* ============================================================
   Hero 遮罩
============================================================ */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            180deg,
            rgba(17, 4, 2, .0) 0%,
            rgba(20, 4, 2, .05) 28%,
            rgba(16, 4, 2, .1) 55%,
            rgba(20, 2, 2, .3) 100%
        );

}



/* ============================================================
   神光
============================================================ */

.divine-light {

    position: absolute;

    z-index: 3;

    top: -20%;

    left: 50%;

    width: 900px;

    height: 900px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255, 221, 117, .72) 0%,
            rgba(255, 190, 65, .35) 20%,
            rgba(255, 170, 45, .12) 42%,
            transparent 70%
        );

    filter: blur(15px);

    mix-blend-mode: screen;

    animation:
        divinePulse 5s ease-in-out infinite;

}


@keyframes divinePulse {

    0%,
    100% {

        opacity: .55;

        transform:
            translateX(-50%)
            scale(.9);

    }

    50% {

        opacity: 1;

        transform:
            translateX(-50%)
            scale(1.08);

    }

}



/* ============================================================
   放射神光
============================================================ */

.light-ray {

    position: absolute;

    z-index: 3;

    top: -100px;

    left: 50%;

    width: 170px;

    height: 850px;

    transform-origin: top center;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 224, 140, .35),
            rgba(255, 196, 80, .08),
            transparent
        );

    filter: blur(18px);

    mix-blend-mode: screen;

    opacity: .55;

}


.ray-1 {

    transform:
        translateX(-50%)
        rotate(-28deg);

}


.ray-2 {

    transform:
        translateX(-50%)
        rotate(-10deg);

}


.ray-3 {

    transform:
        translateX(-50%)
        rotate(12deg);

}


.ray-4 {

    transform:
        translateX(-50%)
        rotate(30deg);

}



/* ============================================================
   雲
============================================================ */

.cloud {

    position: absolute;

    z-index: 4;

    pointer-events: none;

}


.cloud img {

    display: block;

    width: 100%;

}


/* 遠景 */

.cloud-back {

    top: 18%;

    left: -20%;

    width: 140%;

    opacity: .30;

    filter: blur(3px);

    animation:
        cloudBack 50s linear infinite alternate;

}


/* 中景 */

.cloud-middle {

    bottom: 3%;

    left: -15%;

    width: 135%;

    opacity: .15;

    filter: blur(1px);

    animation:
        cloudMiddle 34s linear infinite alternate;

}


/* 前景 */

.cloud-front {

    bottom: -12%;

    left: -25%;

    width: 150%;

    opacity: .10;

    filter: blur(3px);

    animation:
        cloudFront 24s linear infinite alternate;

}


@keyframes cloudBack {

    from {

        transform: translateX(-5%);

    }

    to {

        transform: translateX(12%);

    }

}


@keyframes cloudMiddle {

    from {

        transform:
            translateX(8%)
            translateY(0);

    }

    to {

        transform:
            translateX(-8%)
            translateY(-20px);

    }

}


@keyframes cloudFront {

    from {

        transform:
            translateX(-3%)
            scale(1.05);

    }

    to {

        transform:
            translateX(10%)
            scale(1.12);

    }

}



/* ============================================================
   Hero 文字
============================================================ */

.hero-content {

    position: relative;

    z-index: 10;

    text-align: center;

}


.hero-copy {
    max-width: 900px;
    margin: 70px auto 0;
    color: white;
}


.hero-small-title {

    margin-bottom: 15px;

    color: var(--gold-light);

    font-size: 18px;

    letter-spacing: 10px;

    text-shadow:
        0 3px 15px #000;

}


.hero-title-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

}


.hero-seal {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 46px;

    height: 78px;

    border-radius: 20px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #c52120,
            #8c0b0c
        );

    font-size: 17px;

    line-height: 24px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .5);

}


.hero-title {

    margin: 0;

    color: #f7d988;

    font-size: clamp(56px, 7vw, 105px);

    font-weight: 900;

    letter-spacing: 10px;

    line-height: 1.2;

    text-shadow:

        0 3px 0 #9c6720,

        0 7px 12px rgba(0, 0, 0, .9),

        0 0 40px rgba(255, 187, 64, .25);

}


.hero-subtitle {

    margin-top: 15px;

    color: #f3d486;

    font-size: clamp(22px, 2.5vw, 34px);

    letter-spacing: 10px;

    text-shadow:
        0 3px 12px #000;

}


.hero-description {

    margin-top: 10px;

    color: rgba(255, 244, 215, .88);

    font-size: 16px;

    letter-spacing: 7px;

}



/* ============================================================
   Hero buttons
============================================================ */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 28px;

    margin-top: 40px;

}


.temple-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-width: 190px;

    padding: 14px 30px;

    border: 1px solid var(--gold);

    color: var(--gold-light);

    background:
        rgba(23, 5, 2, .58);

    letter-spacing: 2px;

    transition: .35s;

    backdrop-filter: blur(5px);

}


.temple-btn::before {

    content: "";

    position: absolute;

    inset: 4px;

    border: 1px solid rgba(216, 177, 93, .42);

}


.temple-btn:hover {

    color: #2b1005;

    background: var(--gold-light);

    box-shadow:
        0 0 30px rgba(236, 188, 80, .4);

    transform: translateY(-3px);

}



/* ============================================================
   Scroll
============================================================ */

.scroll-down {
    position: absolute;

    z-index: 12;

    bottom: 15px;

    left: 52.1%;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255, 255, 255, .7);

    transform: translateX(-50%);

}


.scroll-circle {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin:0 5rem 1rem 0;

border: 3px solid rgba(252, 211, 108, .8);

box-shadow:
    0 6px 20px rgba(0, 0, 0, .45),
    0 0 8px rgba(252, 211, 108, .35),
    inset 0 0 8px rgba(252, 211, 108, .15);

    border-radius: 50%;

    color: var(--gold-light);

    animation:scrollBounce 2s infinite;

}


.scroll-down small {
    font-size: 1rem;
    letter-spacing: 3px;
    margin:0 5rem 1rem 0;
    color: rgba(255, 244, 215, .88);
    text-shadow:
        0 2px 0px rgba(0, 0, 0, .25),
        0 0 40px rgba(252, 211, 108, .8);
}


@keyframes scrollBounce {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(8px);

    }

}



/* ============================================================
   六大功能
============================================================ */

.quick-menu {

    position: relative;

    z-index: 20;

    color: white;

    background:

        radial-gradient(
            circle at 50% 0%,
            #82130f,
            #5b0807 45%,
            #350302 100%
        );

    border-top: 1px solid #a65c2a;

    border-bottom: 2px solid #9d662b;

}


.quick-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 220px;

    padding: 30px 15px;

    color: #fff;

    text-align: center;

    border-right:
        1px solid rgba(216, 177, 93, .18);

    transition: .35s;

}


.quick-item:hover {

    color: var(--gold-light);

    background:
        rgba(255, 210, 110, .07);

    transform: translateY(-5px);

}


.quick-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 76px;

    height: 76px;

    margin-bottom: 18px;

    border: 2px solid var(--gold);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 31px;

}


.quick-item h3 {

    margin-bottom: 8px;

    font-size: 20px;

    letter-spacing: 2px;

}


.quick-item p {

    margin-bottom: 10px;

    color: rgba(255, 255, 255, .55);

    font-size: 12px;

}



/* ============================================================
   共用 Section
============================================================ */

.section-padding {

    padding: 2rem 0;

}


.section-en {

    color: var(--gold-dark);

    font-size: 11px;

    letter-spacing: 3px;

}


.gold-line {

    width: 60px;

    height: 2px;

    margin: 20px 0;

    background: var(--gold);

}


.center-gold-line {

    width: 60px;

    height: 2px;

    margin: 20px auto 30px;

    background: var(--gold);

}



/* ============================================================
   About
============================================================ */

.about-section {

    position: relative;

    background-image: url("../images/black.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.about-title-area {

    display: flex;

    align-items: center;

    gap: 45px;

}


.vertical-title {

    display: flex;

    align-items: flex-start;

    gap: 15px;

}


.mini-seal {

    padding: 10px 7px;

    border-radius: 12px;

    color: #fff;

    background: #a41415;

    font-size: 12px;

    writing-mode: vertical-rl;

    line-height: 14px;

}


.vertical-title h2 {

    margin: 0;

    color: #19100d;

    font-size: 62px;

    font-weight: 900;

    line-height: 1.1;

}


.vertical-subtitle {

    color: #4c392e;

    font-size: 18px;

    letter-spacing: 5px;

    line-height: 1.7;

    writing-mode: vertical-rl;

}


.about-content h3 {

    margin-top: 10px;

    color: #392017;

    font-size: 1.2rem;

    font-weight: 700;

    line-height: 1.5;

}


.about-content p {

    color: #2e1f16;

    font-size: 1.2rem;

    line-height: 2;

}


.outline-gold-btn {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 10px;

    padding: 12px 25px;

    border: 1px solid var(--gold-dark);

    color: #674719;

    transition: .3s;

}


.outline-gold-btn:hover {

    color: white;

    background: var(--temple-red);

    border-color: var(--temple-red);

}



/* ============================================================
   Feature cards
============================================================ */

.feature-cards {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.feature-card {

    position: relative;

    height: 420px;

    overflow: hidden;

    color: white;

    background: #111;

}


.feature-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;

}


.feature-card:hover img {

    transform: scale(1.08);

}


.feature-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 30%,
            rgba(10, 3, 0, .92)
        );

}


.feature-text {

    position: absolute;

    right: 0;

    bottom: 25px;

    left: 0;

    padding: 20px;

    text-align: center;

}


.feature-text h4 {

    color: var(--gold-light);

    font-size: 24px;

}


.feature-text p {

    color: rgba(255, 255, 255, .7);

    font-size: 12px;

}



/* ============================================================
   最新消息
============================================================ */

.news-gallery-section {

    background: #fff;

}


.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 25px;

}


.section-heading h2 {

    margin: 5px 0 0;

    color: #79120f;

    font-size: 30px;

}


.section-heading > a {

    color: #8d7b6b;

    font-size: 12px;

}


.news-item {

    display: grid;

    grid-template-columns:
        30px minmax(0, 1fr) 20px;

    gap: 15px;

    align-items: center;

    padding: 16px 5px;

    color: #493a32;

    border-bottom:
        1px solid #e4ddd4;

    transition: .3s;

}


.news-item:hover {

    padding-left: 12px;

    color: #971412;

    background: #faf6ef;

}


.news-date {

    display: flex;

    flex-direction: column;

}


.news-date strong {

    font-size: 23px;

}


.news-date span {

    color: #8f8176;

    font-size: 9px;

}


.news-tag {

    padding: 5px 8px;

    color: white;

    background: #94110f;

    border-radius: 5px;

    font-size: 0.8rem;

    text-align: center;

}


.news-title {
    padding: 2px;
    font-size: 1.1rem;

}



/* ============================================================
   Gallery
============================================================ */

.photo-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

}


.photo-grid a {

    display: block;

    height: 155px;

    overflow: hidden;

}


.photo-grid img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}


.photo-grid a:hover img {

    transform: scale(1.1);

}



/* ============================================================
   祈福 Banner
============================================================ */

.service-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    overflow: hidden;

    background-position: center;

    background-size: cover;

}


.prayer-box {

    background-image:
        url("images/incense.jpg");

}


.light-box {

    background-image:
        url("images/festival.jpg");

}


.service-dark {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(31, 7, 3, .88),
            rgba(90, 17, 8, .52)
        );

}


.service-content {

    position: relative;

    z-index: 2;

    color: white;

    text-align: center;

}


.service-content > span {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 5px;

}


.service-content h2 {

    margin: 7px 0;

    color: var(--gold-light);

    font-size: 40px;

}


.service-content p {

    color: rgba(255, 255, 255, .7);

    letter-spacing: 4px;

}


.service-btn {

    display: inline-flex;

    gap: 20px;

    margin-top: 10px;

    padding: 9px 25px;

    border: 1px solid var(--gold);

    color: var(--gold-light);

}



/* ============================================================
   Events
============================================================ */

.events-section {

    background:
        #f6f0e5;

}


.large-section-title {

    margin-top: 8px;

    color: #6e100e;

    font-size: 42px;

}


.section-description {

    max-width: 650px;

    margin: 0 auto 20px;

    color: #74645a;

    line-height: 2;

}



/* ============================================================
   Traffic
============================================================ */

.traffic-section {

    position: relative;

    padding: 2rem 0;

    color: white;

    background:

        linear-gradient(
            rgba(49, 7, 4, .8),
            rgba(28, 5, 3, .9)
        ),

        url("../images/temple-hero.webp")
        center / cover fixed;

}


.traffic-icon {

    display: block;

    margin-bottom: 10px;

    color: var(--gold);

    font-size: 40px;

}


.section-en.light {

    color: var(--gold-light);

}


.traffic-section h2 {

    margin: 10px 0 20px;

    color: var(--gold-light);

    font-size: 40px;

}


.traffic-section p {

    margin-bottom: 30px;

    color: rgba(255, 255, 255, .7);

}



/* ============================================================
   Footer
============================================================ */

.footer {

    position: relative;

    padding: 1rem 0 ;

    overflow: hidden;

    color: rgba(255, 255, 255, .72);

    background-color: #160a07;

    background-image: url("../images/footer.webp");

    background-position: center;

    background-size: 100% 205%;

    background-repeat: no-repeat;

    border-top:
        1px solid #795021;

}


.footer-logo {

  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-items: center;   

}


.footer-en {

    margin-top: 6px;

    color: #8d765c;

    font-size: 9px;

    letter-spacing: 3px;
  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-items: center;  
}


.footer-contact p {

    margin: 9px 0;

    font-size: 13px;

}


.footer-contact i {

    width: 25px;

    color: var(--gold);

}


.social-title {

    margin-bottom: 15px;

    color: var(--gold-light);

}


.social-icons {

    display: flex;

    gap: 12px;

}


.social-icons a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    color: #25120c;

    background: #eee;

    transition: .3s;

}


.social-icons a:hover {

    color: #fff;

    background: #a31312;

    transform: translateY(-3px);

}


.footer-bottom {

    margin-top: 0px;

    padding-top: 20px;

    color: #6e5d52;

    border-top:
        1px solid rgba(255, 255, 255, .07);

    font-size: 11px;

    text-align: center;

}



/* ============================================================
   Back top
============================================================ */

.back-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 900;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 65px;

    height: 65px;

    border: 1px solid #d19c49;

    border-radius: 50%;

    color: white;

    background: #8f1011;

    font-size: 1rem;

    cursor: pointer;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, .3);

}


.back-top span {

    font-size: 0.8rem;

}



/* ============================================================
   Tablet
============================================================ */

@media (max-width: 1199px) {
    .logo-w{
    width:15rem;height:auto;
    }

    #mainNav {

        background:
            rgba(28, 6, 4, .92);

    }


    .navbar-collapse {

        padding: 20px;

        background:
            rgba(35, 5, 3, .97);

    }


    .hero {
        min-height: 550px;
        height: 10svh;
    }
    .hero-bg {
    position: absolute;
    inset: 0;
    margin-top:4.53rem;
    z-index: 1;
    background-image:
        url("../images/temple-hero.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: calc(50% + 0rem) top;
    }
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}
.hero-bg .box > * {
    position: relative;
    z-index: 1;
}
.scroll-down {

    position: absolute;

    z-index: 12;

    bottom: 1.5rem;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255, 255, 255, .7);

    transform: translateX(-50%);

}
    .scroll-circle {  
        margin:0;
    } 

    .scroll-down small {
        
        font-size: 1.2rem;

        letter-spacing: 3px;

        margin:1rem 0 0 0;

        color: rgba(255, 244, 215, .88);

        text-shadow:
        0 3px 0px rgba(0, 0, 0, .25),
        0 0 40px rgba(252, 211, 108, .5);

    }
    .quick-item {

        min-height: 190px;

    }

}



/* ============================================================
   Mobile
============================================================ */

@media (max-width: 767px) {
    .logo-w{
    width:13rem;height:auto;
    }

    #mainNav {

        min-height: 65px;

    }


    .logo-main {

        font-size: 20px;

        letter-spacing: 2px;

    }


    .logo-en {

        display: none;

    }


    .logo-seal {

        width: 24px;

        height: 38px;

        font-size: 9px;

    }


    /* Hero */

    .hero {
        min-height: 750px;
        height: 100svh;
    }


    .hero::before {

    }

    .hero-bg {
    position: absolute;
    inset: 0;
    margin-top:4.53rem;
    z-index: 1;
    background-image:
        url("../images/temple-hero.png");
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: calc(50% + 0.5rem) top;
    }
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}
.hero-bg .box > * {
    position: relative;
    z-index: 1;
}

    .hero-copy {

        margin-top: 30px;

    }


    .hero-small-title {

        font-size: 12px;

        letter-spacing: 5px;

    }


    .hero-title-wrap {

        gap: 10px;

    }


    .hero-seal {

        width: 32px;

        height: 58px;

        font-size: 12px;

        line-height: 17px;

    }


    .hero-title {

        font-size: clamp(40px, 12vw, 58px);

        letter-spacing: 3px;

    }


    .hero-subtitle {

        margin-top: 18px;

        font-size: 19px;

        letter-spacing: 5px;

    }


    .hero-description {

        padding: 0 20px;

        font-size: 12px;

        line-height: 2;

        letter-spacing: 3px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

        gap: 13px;

        margin-top: 25px;

    }


    .temple-btn {

        width: 200px;

    }


    .scroll-down {
    position: absolute;

    z-index: 12;

    bottom: 50px;

    left: 52.1%;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255, 255, 255, .7);

    transform: translateX(-50%);

    }

    .scroll-circle {  
        margin:0;
    } 

    .scroll-down small {
        
        font-size: 1.2rem;

        letter-spacing: 3px;

        margin:2rem 0 0 0;

        color: rgba(255, 244, 215, .88);

        text-shadow:
        0 2px 0px rgba(0, 0, 0, .25),
        0 0 40px rgba(252, 211, 108, .5);

    }

    /* 手機降低神光 */

    .divine-light {

        width: 550px;

        height: 550px;

        opacity: .55;

    }


    .light-ray {

        opacity: .25;

    }


    /* 手機雲 */

    .cloud-back {

        width: 220%;

        left: -60%;

    }


    .cloud-middle {

        width: 230%;

        left: -65%;

    }


    .cloud-front {

        width: 250%;

        left: -70%;

    }


    /* 快捷 */

    .quick-item {

        min-height: 165px;

        padding: 20px 5px;

    }


    .quick-icon {

        width: 55px;

        height: 55px;

        margin-bottom: 10px;

        font-size: 23px;

    }


    .quick-item h3 {

        font-size: 16px;

    }


    .quick-item p {

        font-size: 10px;

    }


    /* About */

    .section-padding {

        padding: 2rem 0;

    }


    .about-title-area {
        display: flex;
        align-items: flex-start;
        gap: 15px; /* 調整兩者之間的間距 */
    }


    .vertical-title {
        margin-bottom: 0;
        flex-shrink: 0; /* 避免標題被壓縮 */
    }


    .vertical-title h2 {

        font-size: 45px;

    }


    .vertical-subtitle {

        font-size: 14px;

    }


    .feature-cards {

        grid-template-columns: 1fr;

    }


    .feature-card {

        height: 330px;

    }


    /* Gallery */

    .photo-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .photo-grid a {

        height: 130px;

    }


    /* News */

    .news-item {

        grid-template-columns:
            60px minmax(0, 1fr);

        gap: 8px;

    }


    .news-item > i {

        display: none;

    }


    .news-title {

        font-size: 1.1rem;

    }


    /* Traffic */

    .traffic-section {

        background-attachment: scroll;

    }


    .traffic-section h2 {

        font-size: 30px;

    }


    /* Footer */

    .footer {
    position: relative;

    padding: 1rem 0 ;

    overflow: hidden;

    color: rgba(255, 255, 255, .72);

    background-color: #160a07;

    border-top:1px solid #795021;
    }


    .social-icons {

        justify-content: center;

    }


    .back-top {

        right: 15px;

        bottom: 15px;

        width: 52px;

        height: 52px;

    }


    .back-top span {

        display: none;

    }

}



/* ============================================================
   使用者如果設定「減少動態效果」
============================================================ */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

    }

}

/* About page */
.about-page{background:#f5efe4}.about-page #mainNav{background:rgba(34,7,5,.96);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.page-hero{position:relative;display:flex;align-items:flex-end;min-height:300px;padding:100px 0 30px;overflow:hidden;color:#fff;background:#250805 url("../images/temple-hero.webp") center 15%/cover no-repeat}.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,4,2,.93),rgba(44,7,4,.72) 42%,rgba(17,3,2,.28)),linear-gradient(0deg,rgba(23,4,2,.82),transparent 55%)}.page-hero:after{content:"";position:absolute;right:-110px;bottom:-260px;width:650px;height:650px;border:1px solid rgba(242,217,146,.18);border-radius:50%;box-shadow:0 0 0 55px rgba(242,217,146,.04),0 0 0 110px rgba(242,217,146,.025)}
.page-hero-content{position:relative;z-index:2;max-width:760px}.page-kicker{display:block;margin-bottom:16px;color:var(--gold-light);font-size:12px;letter-spacing:5px}.page-hero h1{margin:0 0 20px;font-size:clamp(46px,7vw,49px);font-weight:900;letter-spacing:.14em;text-shadow:0 6px 22px #000}.page-hero p{max-width:610px;margin:0;color:rgba(255,255,255,.82);font-size:17px;line-height:2;letter-spacing:3px}.page-breadcrumb{margin-top:32px;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:2px}.page-breadcrumb a{color:var(--gold-light)}
.story-section{position:relative;padding:30px 30px;background-color:#f5efe4;background-image:url("../images/black.jpg");background-position:center top;background-size:160% auto;background-repeat:repeat-y}
.story-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}.story-section > * {
    position: relative;
    z-index: 1;
}.story-lead{padding-right:50px}.story-lead h2{margin:12px 0 24px;color:#391810;font-size:clamp(34px,4vw,52px);font-weight:900;line-height:1.35}.story-lead .lead-copy{color:#160902;font-size:1.1rem;line-height:2.2}.year-mark{display:flex;align-items:baseline;gap:15px;margin-top:38px;color:var(--temple-red)}.year-mark strong{font-size:clamp(62px,8vw,1rem);font-weight:900;line-height:1}.year-mark span{color:#92784f;font-size:13px;letter-spacing:3px}
.story-card{position:relative;min-height:733px;overflow:hidden;box-shadow:0 24px 60px rgba(57,26,13,.2)}.story-card img{width:100%;height:733px;object-fit:cover}.story-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(24,5,2,.9))}.story-card-caption{position:absolute;z-index:2;right:35px;bottom:35px;left:35px;color:#fff}.story-card-caption span{color:var(--gold-light);font-size:11px;letter-spacing:3px}.story-card-caption h3{margin:8px 0 0;font-size:27px;letter-spacing:3px}
.origin-section{padding:100px 0;color:#fff;background:radial-gradient(circle at 20% 20%,#8d1712,#500704 48%,#250202)}.origin-heading{text-align:center}.origin-heading h2{margin:10px 0;color:var(--gold-light);font-size:40px;font-weight:900;letter-spacing:5px}.origin-heading p{color:rgba(255,255,255,.58);letter-spacing:3px}.origin-steps{position:relative;margin-top:60px}.origin-steps:before{content:"";position:absolute;top:42px;right:15%;left:15%;height:1px;background:rgba(216,177,93,.38)}.origin-step{position:relative;z-index:1;padding:0 25px;text-align:center}.origin-icon{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;margin-bottom:24px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-light);background:#5b0906;font-size:30px;box-shadow:0 0 0 9px rgba(216,177,93,.08)}.origin-step h3{color:#f4daa0;font-size:21px;letter-spacing:3px}.origin-step p{color:rgba(255,255,255,.68);font-size:14px;line-height:2}
.faith-section{padding:100px 0;background:#f2ece5}.faith-image{position:relative;padding:18px;border:1px solid #d6b875}.faith-image:before,.faith-image:after{content:"";position:absolute;width:54px;height:54px;border-color:var(--temple-red)}.faith-image:before{top:-7px;left:-7px;border-top:3px solid;border-left:3px solid}.faith-image:after{right:-7px;bottom:-7px;border-right:3px solid;border-bottom:3px solid}.faith-image img{width:100%;height:686px;object-fit:cover}.faith-copy{padding-left:55px}.faith-copy h2{margin:12px 0 25px;color:#6f0d0a;font-size:39px;font-weight:900;letter-spacing:3px}.faith-copy p{color:#69574c;line-height:2.15;font-size:1.1rem}.faith-quote{margin:30px 0;padding:24px 28px;border-left:3px solid var(--gold);color:#623c1e;background:#faf6ee;font-size:18px;line-height:1.9}.temple-info{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}.temple-info div{padding:16px;border:1px solid #eadfce;background:#fcfaf6}.temple-info small{display:block;margin-bottom:5px;color:#a18460;font-size:10px;letter-spacing:2px}.temple-info strong{color:#4d2a1c;font-size:1.1rem}
.about-cta{padding:70px 0;text-align:center;color:#fff;background:linear-gradient(rgba(24,5,2,.77),rgba(24,5,2,.88)),url("../images/footer-background.webp") center/cover}.about-cta h2{color:var(--gold-light);font-weight:900;letter-spacing:5px}.about-cta p{margin:15px 0 25px;color:rgba(255,255,255,.7);letter-spacing:2px}.about-cta .outline-gold-btn{color:var(--gold-light);border-color:var(--gold)}
@media(max-width:991px){.page-hero{min-height:350px;padding:20px 0 30px;background-position:center  calc(50% + 4.5rem)}.story-section{background-position:center top}.story-lead,.faith-copy{padding:0}.origin-steps:before{display:none}.origin-step{margin-bottom:38px}}
@media(max-width:767px){.page-hero{min-height:350px;padding:20px 0 30px;background-position:center}.page-hero p{font-size:14px;letter-spacing:2px}.story-section,.origin-section,.faith-section{padding:30px 30px}.story-card,.story-card img{min-height:400px;height:400px}.faith-image img{height:390px}.temple-info{grid-template-columns:1fr}.faith-copy h2{font-size:32px}}

/* Traffic page */
.traffic-hero{background-position:center 46%}
.directions-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center/cover no-repeat}
.directions-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}.directions-section > * {
    position: relative;
    z-index: 1;
}
.traffic-intro{max-width:650px;margin:0 auto 0px}.traffic-intro h2{margin:10px 0;color:#6f0d0a;font-size:clamp(36px,4vw,50px);font-weight:900;letter-spacing:4px}.traffic-intro p{color:#705f55;line-height:2;letter-spacing:1px;font-size:1.2rem}
.route-group{margin-top:0px}.route-group-title{display:flex;align-items:center;gap:18px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid #dccaa8}.route-title-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;color:var(--gold-light);background:var(--temple-red);font-size:25px;box-shadow:0 8px 20px rgba(126,12,12,.2)}.route-group-title small{color:#a27d3d;font-size:10px;letter-spacing:3px}.route-group-title h3{margin:4px 0 0;color:#482116;font-size:29px;font-weight:900;letter-spacing:4px}
.route-card{position:relative;height:100%;min-height:430px;padding:42px 42px 34px;overflow:hidden;border:1px solid #e3d6c2;background:rgba(255,255,255,.88);box-shadow:0 15px 42px rgba(65,35,18,.08);transition:transform .35s,box-shadow .35s}.route-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(65,35,18,.14)}.route-number{position:absolute;right:22px;top:8px;color:rgba(126,12,12,.06);font-size:100px;font-weight:900;line-height:1}.route-card-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:20px;border:1px solid var(--gold);border-radius:50%;color:var(--temple-red);font-size:23px}.route-label{color:#a17e40;font-size:10px;letter-spacing:3px}.route-card h4{position:relative;margin:8px 0 23px;color:#68100d;font-size:27px;font-weight:900;letter-spacing:3px}.route-card ol{margin:0 0 24px;padding-left:1.35rem;color:#2e1f16;font-size:1.2rem}.route-card li{margin-bottom:12px;padding-left:5px;line-height:1.8}.route-card li::marker{color:#a16f22;font-weight:700}.map-link{display:inline-flex;align-items:center;gap:10px;color:#7a551e;font-size:13px;letter-spacing:2px;border-bottom:1px solid var(--gold);padding-bottom:5px}.map-link:hover{color:var(--temple-red)}.public-route-group{margin-top:85px}.route-note{display:flex;gap:10px;padding:13px 15px;color:#7c664c;background:#f6efe3;font-size:1rem;line-height:1.7}.route-note i{flex:none;color:var(--temple-red);font-size:16px}
.temple-map-section{padding:100px 0;background:#f2ece5}.map-panel{overflow:hidden;box-shadow:0 25px 65px rgba(45,18,10,.18)}.map-info{padding:55px 45px;color:#fff;background:linear-gradient(145deg,#77100c,#3c0503)}.map-info h2{margin:9px 0;color:var(--gold-light);font-size:34px;font-weight:900;letter-spacing:4px}.map-info p{display:flex;align-items:flex-start;gap:14px;margin:18px 0;color:rgba(255,255,255,.78);line-height:1.8}.map-info p i{margin-top:5px;color:var(--gold-light)}.map-info p a{color:rgba(255,255,255,.78)}.map-info .temple-btn{margin-top:15px;min-width:0;padding:12px 20px}.map-frame{min-height:490px}.map-frame iframe{display:block;min-height:490px}
@media(max-width:991px){.route-card{min-height:0}.map-info{padding:45px 30px}.map-frame,.map-frame iframe{min-height:420px}}
@media(max-width:767px){.temple-map-section{padding:30px 30px}.traffic-intro{margin-bottom:45px}.route-group{margin-top:40px}.public-route-group{margin-top:65px}.route-card{padding:32px 24px}.route-number{font-size:75px}.route-group-title h3{font-size:25px}.map-frame,.map-frame iframe{min-height:360px}}

/* News archive page */
.news-archive-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center/cover no-repeat}
.news-archive-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}.news-archive-section > * {
    position: relative;
    z-index: 1;
}
.news-archive-heading{max-width:760px;margin:0 auto 0px}
.news-archive-heading h2{margin:10px 0;color:#6f0d0a;font-size:clamp(36px,4vw,50px);font-weight:900;letter-spacing:4px}
.news-archive-heading p{margin:20px 0 0;color:#705f55;font-size:1rem;letter-spacing:1px}
.news-archive-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:0px;padding:0 4px;color:#806d5e;font-size:0.9rem;letter-spacing:1px}
.news-archive-meta i{margin-right:7px;color:var(--temple-red)}
.news-archive-meta strong{color:#6f0d0a}
.news-archive-list{border-top:2px solid #8f1011;background:rgba(255,255,255,.82);box-shadow:0 18px 48px rgba(65,35,18,.08)}
.news-archive-item{display:grid;grid-template-columns:90px minmax(0,1fr) 46px;align-items:center;gap:25px;min-height:2.5rem;padding:5px 5px;border-bottom:1px solid #e3d6c2;transition:background-color .3s,transform .3s}
.news-archive-item:hover{background:#fffaf1;transform:translateX(5px)}
.news-archive-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:20px;border-right:1px solid #d9c8aa;color:#8f1011;text-align:center}
.news-archive-date strong{font-size:1.1rem;font-weight:700;line-height:1}
.news-archive-date span{margin-top:8px;color:#2d120a;font-size:1rem;letter-spacing:1px;font-weight:600}
.news-archive-line{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.news-archive-category{display:inline-flex;padding:5px 11px;color:#fff;background:#8f1011;font-size:11px;letter-spacing:1px}
.news-archive-full-date{display:none;color:#9a8877;font-size:1rem}
.news-archive-body h3{margin:0;color:#3f2118;font-size:1.1rem;font-weight:600;letter-spacing:2px;line-height:1.2}
.news-archive-body p{margin:9px 0 0;color:#77665b;font-size:14px;line-height:1.8}
.news-archive-arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c7a45f;border-radius:50%;color:#8f1011;transition:.3s}
.news-archive-item:hover .news-archive-arrow{color:#fff;background:#8f1011;border-color:#8f1011}
.news-pagination-wrap{display:flex;justify-content:center;margin-top:1rem}
.news-pagination{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.news-page-button{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 13px;border:1px solid #d4c3a4;color:#674719;background:#fffdf8;font-size:14px;transition:.25s}
.news-page-button:hover:not(:disabled),.news-page-button.active{color:#fff;background:#8f1011;border-color:#8f1011;transform:translateY(-2px)}
.news-page-button:disabled{color:#b9ac9b;background:#eee9e0;cursor:not-allowed}
.news-empty{margin:0;padding:65px 25px;color:#806d5e;text-align:center}
@media(max-width:767px){.news-archive-section{padding:30px 20px}.news-archive-heading{margin-bottom:38px}.news-archive-heading h2{font-size:31px;letter-spacing:2px}.news-archive-meta{align-items:flex-start;gap:8px;font-size:12px}.news-archive-item{grid-template-columns:1fr 34px;gap:12px;min-height:0;padding:24px 20px}.news-archive-date{display:none}.news-archive-full-date{display:inline}.news-archive-body h3{font-size:19px;letter-spacing:1px}.news-archive-body p{font-size:13px}.news-archive-arrow{width:34px;height:34px}.news-pagination{gap:5px}.news-page-button{min-width:39px;height:39px;padding:0 10px}}
.news-archive-link{display:block;color:inherit;text-decoration:none}
.news-archive-link:hover{color:inherit}

/* News detail page */
.news-detail-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center/cover no-repeat}
.news-detail-section:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);pointer-events:none}
.news-detail-section>.container{position:relative;z-index:1}
.news-detail-article{max-width:1080px;margin:0 auto;padding:30px 30px;background:rgba(255,253,248,.96);border-top:3px solid #8f1011;box-shadow:0 24px 65px rgba(57,26,13,.16)}
.news-detail-header{padding-bottom:0px;}
.news-detail-meta{display:flex;align-items:center;gap:18px;margin-bottom:1rem;color:#8b7766;font-size:13px;letter-spacing:1px}
.news-detail-category{display:inline-flex;padding:6px 13px;color:#fff;background:#8f1011;font-size:11px;letter-spacing:2px}
.news-detail-header h2{margin:0;color:#3d1d14;font-size:clamp(32px,4vw,2rem);font-weight:600;line-height:1.45;letter-spacing:3px}
.news-detail-header .gold-line{margin-top:0.3rem;}
.news-detail-lead{margin:28px 0 0;color:#684f40;font-size:18px;font-weight:600;line-height:2}
.news-detail-content{padding:5px 0 0px}
.news-detail-content p{margin:0 0 5px;color:#5e4d43;font-size:1.1rem;font-weight:500;line-height:2;letter-spacing:1.5px}
.news-detail-subheading{margin:20px 0 24px}
.news-detail-subheading span{color:#a17e40;font-size:10px;letter-spacing:4px}
.news-detail-subheading h3{margin:6px 0 0;color:#65100d;font-size:28px;font-weight:900;letter-spacing:3px}
.news-detail-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-detail-gallery figure{position:relative;margin:0;overflow:hidden;background:#28100b}
.news-detail-gallery img{display:block;width:100%;height:260px;object-fit:cover;transition:transform .45s}
.news-detail-gallery figure:hover img{transform:scale(1.04)}
.news-detail-gallery figcaption{position:absolute;right:0;bottom:0;left:0;padding:28px 16px 13px;color:#fff;background:linear-gradient(transparent,rgba(20,5,2,.82));font-size:11px;letter-spacing:2px}
.news-detail-actions{display:flex;justify-content:center;margin-top:48px;padding-top:35px;border-top:1px solid #dfd1bb}
.news-detail-actions .outline-gold-btn{gap:12px}
.news-detail-not-found{max-width:760px;margin:0 auto;padding:75px 30px;background:rgba(255,253,248,.96);text-align:center;box-shadow:0 24px 65px rgba(57,26,13,.16)}
.news-detail-not-found>i{color:#8f1011;font-size:48px}
.news-detail-not-found h2{margin:18px 0 10px;color:#55100d;font-size:34px;font-weight:900}
.news-detail-not-found p{margin-bottom:28px;color:#77665b}
@media(max-width:991px){.news-detail-article{padding:45px 38px}.news-detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.news-detail-gallery figure:first-child{grid-column:1/-1}.news-detail-gallery figure:first-child img{height:360px}}
@media(max-width:767px){.news-detail-section{padding:45px 18px}.news-detail-article{padding:34px 22px}.news-detail-meta{align-items:flex-start;flex-direction:column;gap:10px}.news-detail-header h2{font-size:29px;letter-spacing:2px}.news-detail-lead{font-size:16px}.news-detail-content p{font-size:15px}.news-detail-gallery{grid-template-columns:1fr}.news-detail-gallery figure:first-child{grid-column:auto}.news-detail-gallery img,.news-detail-gallery figure:first-child img{height:240px}.news-detail-actions{margin-top:35px}}
/* Gods page */
.gods-page-hero{background-position:center 28%}
.deity-map-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center top/100% auto repeat-y}
.deity-map-section:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.68);pointer-events:none}
.deity-map-section>.container{z-index:1}
.deity-heading{max-width:780px;margin:0 auto 55px}
.deity-heading h2{margin:10px 0;color:#6f0d0a;font-size:clamp(36px,4vw,50px);font-weight:900;letter-spacing:5px}
.deity-heading p{margin:20px 0 0;color:#705f55;font-size:1.1rem;letter-spacing:2px}
.altar-stage{position:relative;padding:58px 40px 45px;overflow:hidden;border:1px solid #a77b36;background:radial-gradient(circle at 50% 16%,rgba(207,145,48,.28),transparent 28%),linear-gradient(145deg,#4b0906,#1f0503 58%,#100202);box-shadow:0 24px 65px rgba(57,26,13,.28)}
.altar-stage:before,.altar-stage:after{content:"";position:absolute;z-index:1;top:16px;width:110px;height:1px;background:linear-gradient(90deg,transparent,#d8b15d)}
.altar-stage:before{left:18px}.altar-stage:after{right:18px;transform:scaleX(-1)}
.altar-aura{position:absolute;top:-230px;left:50%;width:620px;height:620px;border:1px solid rgba(242,217,146,.13);border-radius:50%;box-shadow:0 0 0 55px rgba(242,217,146,.035),0 0 0 110px rgba(242,217,146,.02);transform:translateX(-50%);pointer-events:none}
.altar-upper{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:18px}
.deity-card{border-radius:0.3rem;position:relative;min-width:0;padding:30px 18px 26px;border:1px solid rgba(216,177,93,.45);color:#fff;background:linear-gradient(180deg,rgba(118,21,14,.93),rgba(47,7,4,.97));text-align:center;box-shadow:0 13px 32px rgba(0,0,0,.28);transition:transform .35s,border-color .35s,box-shadow .35s;animation:deityFade .8s ease both}
.deity-card:before{content:"";position:absolute;inset:6px;border:1px solid rgba(242,217,146,.14);pointer-events:none}
.deity-card:hover{z-index:4;transform:translateY(-8px);border-color:#f1d187;box-shadow:0 20px 42px rgba(0,0,0,.42),0 0 32px rgba(216,177,93,.18)}
.deity-card small{display:block;margin:14px 0 6px;color:#caa35b;font-size:8px;letter-spacing:2px}
.deity-card h3{margin:0;color:#f4d891;font-size:clamp(20px,1.8vw,1.1rem);font-weight:700;letter-spacing:1px}
.deity-card p{margin:10px 0 0;color:rgba(255,255,255,.64);font-size:1.1rem;letter-spacing:1px}
.deity-seal,.deity-icon{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border:1px solid #d8b15d;border-radius:50%;color:#f5d98e;background:#5b0906;font-size:29px;box-shadow:0 0 0 7px rgba(216,177,93,.07),0 0 28px rgba(255,196,80,.14)}
.lamp-card .deity-icon{animation:lampGlow 2.4s ease-in-out infinite}
.main-deity-card{padding:0 0 30px;border-color:#e4bd68;background:#350503;transform:translateY(-18px);box-shadow:0 25px 55px rgba(0,0,0,.5),0 0 42px rgba(216,177,93,.18)}
.main-deity-card:hover{transform:translateY(-26px)}
.main-deity-image{position:relative;height:245px;overflow:hidden}
.main-deity-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#350503)}
.main-deity-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.deity-map-section .main-deity-image{cursor:zoom-in}
.deity-map-section .main-deity-image:focus-visible{outline:3px solid #f4d891;outline-offset:4px}
.main-deity-card:hover img{transform:scale(1.05)}
.main-deity-badge{position:absolute;z-index:2;top:14px;left:50%;padding:6px 13px;color:#3a1307;background:#f0cf7c;font-size:11px;font-weight:700;letter-spacing:3px;transform:translateX(-50%)}
.main-deity-card small{margin-top:6px}
.main-deity-card h3{font-size:31px}
.altar-divider{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;margin:22px auto;color:#d8b15d}
.altar-divider span{width:min(190px,20%);height:1px;background:linear-gradient(90deg,transparent,rgba(216,177,93,.65))}
.altar-divider span:last-child{transform:scaleX(-1)}
.altar-divider i{font-size:20px}
.altar-lower{position:relative;z-index:2;display:grid;grid-template-columns:minmax(170px,1fr) minmax(300px,2fr) minmax(170px,1fr);align-items:stretch;gap:18px;max-width:960px;margin:0 auto}
.prince-card{z-index:2;width:100%;margin:0 auto;padding:25px 35px}
.prince-card h3{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;font-size:28px}
.prince-card h3 b{color:#ae7d35;font-weight:400}
.altar-side-card{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px 18px}
.altar-side-card .deity-seal{margin-bottom:18px;font-family:"Noto Serif TC",serif;font-size:25px;font-weight:800}
.altar-side-card h3{font-size:26px}
.incense-smoke{position:absolute;z-index:1;bottom:-80px;width:85px;height:330px;border-radius:50%;background:linear-gradient(to top,rgba(255,255,255,.13),rgba(255,255,255,.025),transparent);filter:blur(13px);opacity:.45;animation:smokeDrift 6s ease-in-out infinite alternate;pointer-events:none}
.smoke-one{left:27%;transform:rotate(-8deg)}.smoke-two{right:25%;animation-delay:-3s;transform:rotate(7deg)}
.deity-delay-1{animation-delay:.08s}.deity-delay-2{animation-delay:.16s}.deity-delay-3{animation-delay:.24s}.deity-delay-4{animation-delay:.32s}.deity-delay-5{animation-delay:.4s}
@keyframes deityFade{from{opacity:0}to{opacity:1}}
@keyframes lampGlow{0%,100%{box-shadow:0 0 0 7px rgba(216,177,93,.07),0 0 18px rgba(255,196,80,.12)}50%{box-shadow:0 0 0 9px rgba(216,177,93,.1),0 0 36px rgba(255,196,80,.38)}}
@keyframes smokeDrift{0%{opacity:.22;transform:translateX(-15px) rotate(-6deg)}100%{opacity:.48;transform:translateX(18px) rotate(7deg)}}
.principal-deity-section{padding:100px 0;background:#f2ece5}
.principal-deity-figure{position:relative;margin:0;padding:18px;border:1px solid #d6b875;background:#fff}
.principal-deity-figure:before,.principal-deity-figure:after{content:"";position:absolute;z-index:2;width:56px;height:56px;border-color:#8f1011}
.principal-deity-figure:before{top:-7px;left:-7px;border-top:3px solid;border-left:3px solid}.principal-deity-figure:after{right:-7px;bottom:-7px;border-right:3px solid;border-bottom:3px solid}
.principal-deity-figure img{display:block;width:100%;height:620px;object-fit:cover}
.principal-deity-figure figcaption{position:absolute;right:18px;bottom:18px;left:18px;padding:60px 28px 25px;color:#fff;background:linear-gradient(transparent,rgba(27,5,2,.9))}
.principal-deity-figure figcaption span{display:block;color:#e3be6b;font-size:10px;letter-spacing:4px}.principal-deity-figure figcaption strong{display:block;margin-top:8px;font-size:23px;letter-spacing:3px}
.principal-deity-copy{padding-left:45px}
.principal-deity-copy h2{margin:12px 0 24px;color:#68100d;font-size:clamp(38px,4vw,53px);font-weight:900;line-height:1.35;letter-spacing:5px}
.principal-deity-copy p{color:#69574c;font-size:1.1rem;line-height:2.15}
.principal-deity-copy blockquote{margin:28px 0;padding:22px 26px;border-left:3px solid #d8b15d;color:#623c1e;background:#faf6ee;font-size:18px;line-height:1.9}
.deity-blessings{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.deity-blessings span{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid #ddcbaa;color:#6d4d25;background:#fffaf2;font-size:1.1rem}
.deity-blessings i{color:#8f1011}
.deity-lightbox{position:fixed;z-index:1100;inset:0;display:flex;align-items:center;justify-content:center;padding:70px 24px 28px;background:rgba(8,2,1,.92);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.deity-lightbox.is-open{opacity:1;visibility:visible}
.deity-lightbox-content{display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:min(1100px,94vw);max-height:calc(100vh - 98px)}
.deity-lightbox-content img{display:block;max-width:100%;max-height:calc(100vh - 145px);border:1px solid rgba(244,216,145,.55);object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.7)}
.deity-lightbox-caption{margin:14px 0 0;color:#f4d891;font-size:18px;letter-spacing:2px;text-align:center}
.deity-lightbox-close{position:absolute;top:18px;right:22px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(244,216,145,.65);border-radius:50%;color:#fff;background:rgba(80,10,7,.75);font-size:22px;transition:background .2s,transform .2s}
.deity-lightbox-close:hover,.deity-lightbox-close:focus-visible{background:#8f1011;transform:rotate(5deg)}
body.deity-lightbox-open{overflow:hidden}
@media(max-width:1199px){.altar-stage{padding-right:25px;padding-left:25px}.altar-upper{gap:10px}.deity-card{padding-right:11px;padding-left:11px}.main-deity-image{height:215px}}
@media(max-width:991px){.altar-upper{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.altar-upper .main-deity-card{grid-column:2;grid-row:1}.altar-upper .deity-card:nth-child(2){grid-column:1;grid-row:1}.altar-upper .deity-card:nth-child(4){grid-column:3;grid-row:1}.altar-upper .deity-card:nth-child(1){grid-column:1;grid-row:2}.altar-upper .deity-card:nth-child(5){grid-column:3;grid-row:2}.main-deity-card{transform:none}.main-deity-card:hover{transform:translateY(-8px)}.altar-lower{grid-template-columns:1fr 2fr 1fr;gap:10px}.principal-deity-copy{padding-left:0}.principal-deity-figure img{height:520px}}
@media(max-width:767px){.deity-map-section{background-size:auto 100%;background-repeat:no-repeat}.deity-heading{margin-bottom:38px}.deity-heading h2{font-size:31px;letter-spacing:3px}.altar-stage{padding:35px 18px}.altar-upper{grid-template-columns:1fr}.altar-upper .deity-card{grid-column:auto!important;grid-row:auto!important}.altar-upper .main-deity-card{order:-5}.altar-upper .deity-card:nth-child(2){order:-4}.altar-upper .deity-card:nth-child(4){order:-3}.main-deity-image{height:300px}.altar-lower{grid-template-columns:1fr}.altar-lower .prince-card{grid-row:1}.prince-card{padding:25px 18px}.prince-card h3{font-size:24px}.altar-side-card{min-height:190px}.principal-deity-section{padding:60px 20px}.principal-deity-figure img{height:430px}.principal-deity-copy h2{font-size:36px}.principal-deity-copy p{font-size:1rem}.deity-blessings{flex-direction:column}.deity-blessings span{justify-content:center}}


/* Annual events page */
.events-page-hero{background-position:center 34%}
.annual-events-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center top/100% auto repeat-y;overflow:hidden}
.annual-events-section:before{content:"";position:absolute;inset:0;background:rgba(250,246,239,.84)}
.annual-events-section>.container{position:relative;z-index:1}
.annual-events-heading{max-width:760px;margin:0 auto 42px}
.annual-events-heading h2{margin:10px 0;color:#6f0d0a;font-size:clamp(36px,4vw,50px);font-weight:900;letter-spacing:4px}
.annual-events-heading p{margin:0;color:#725f52;font-size:1.1rem;line-height:1.9}
.events-overview{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:34px;border:1px solid rgba(172,132,63,.38);background:rgba(255,252,246,.92);box-shadow:0 14px 35px rgba(62,30,12,.08)}
.events-overview>div{padding:25px 22px;text-align:center}
.events-overview>div+div{border-left:1px solid rgba(172,132,63,.28)}
.events-overview small{display:block;margin-bottom:7px;color:#9b7b42;font-size:11px;letter-spacing:3px}
.events-overview strong{display:block;color:#68100d;font-size:22px;letter-spacing:2px}
.principal-event{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:410px;margin-bottom:40px;background:#3c0a08;box-shadow:0 20px 50px rgba(48,17,8,.22)}
.principal-event-image{position:relative;min-height:410px;overflow:hidden}
.principal-event-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,rgba(60,10,8,.95))}
.principal-event-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.principal-event:hover .principal-event-image img{transform:scale(1.035)}
.principal-event-copy{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:52px 55px;color:#f6e8c5}
.principal-event-label,.event-kind{color:#bd8c35;font-size:1.rem;font-weight:600;letter-spacing:3px}
.principal-event-copy h3{margin:15px 0 12px;color:#f5d181;font-size:clamp(34px,4vw,50px);font-weight:900;letter-spacing:5px}
.principal-event-copy p{margin:20px 0 0;color:#eadfc9;line-height:2}
.principal-event-date{display:flex;align-items:flex-end;gap:12px;margin-top:12px;color:#fff}
.principal-event-date small{padding-bottom:6px;font-size:14px;letter-spacing:2px}
.principal-event-date strong{font-size:32px;line-height:1}
.principal-event-en{display:block;margin-top:12px;color:#a88a63;font-size:10px;letter-spacing:2px}
.events-calendar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.annual-event-card{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:5rem;border:1px solid rgba(167,130,70,.35);background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(62,30,12,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.annual-event-card:hover{transform:translateY(-4px);border-color:#c49a50;box-shadow:0 14px 30px rgba(62,30,12,.13)}
.annual-event-date{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#f7e7bf;background:#761310}
.annual-event-date span{font-size:1.1rem;letter-spacing:2px}.annual-event-date strong{margin-top:5px;font-size:1.3rem;line-height:1}
.annual-event-content{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:1rem 1.2rem}
.annual-event-content h3{margin:7px 0 0;color:#4d3020;font-size:20px;font-weight:800;letter-spacing:1.5px}
.office-event .annual-event-date{background:#785625}.office-event .event-kind{color:#8a6225}
.principal-calendar-event{border-color:#bb852f;background:#fff9eb;box-shadow:inset 0 0 0 2px rgba(187,133,47,.15),0 8px 20px rgba(62,30,12,.08)}
.principal-calendar-event .annual-event-date{background:#a31613}
.events-note{display:flex;align-items:center;gap:18px;margin-top:32px;padding:24px 28px;border-left:4px solid #9a1713;background:rgba(255,251,242,.96);box-shadow:0 8px 24px rgba(62,30,12,.07)}
.events-note>i{color:#9a1713;font-size:28px}.events-note>div{flex:1}.events-note strong{color:#5e150f;font-size:18px;letter-spacing:2px}.events-note p{margin:5px 0 0;color:#6f5a4b;line-height:1.8}
.events-note>a{flex:0 0 auto;color:#7e1712;font-weight:700;text-decoration:none;letter-spacing:1px}.events-note>a i{margin-left:6px;transition:transform .2s}.events-note>a:hover i{transform:translateX(4px)}
@media(max-width:991px){.principal-event{grid-template-columns:1fr}.principal-event-image{min-height:340px}.principal-event-image:after{background:linear-gradient(transparent 62%,rgba(60,10,8,.94))}.principal-event-copy{padding:40px 45px}.events-calendar{gap:14px}.annual-event-card{grid-template-columns:88px}.annual-event-content{padding:18px}.annual-event-content h3{font-size:18px}}
@media(max-width:767px){.events-page-hero{background-position:center}.annual-events-section{background-size:auto 100%;background-repeat:no-repeat}.annual-events-heading{margin-bottom:30px}.annual-events-heading h2{font-size:34px;letter-spacing:3px}.annual-events-heading p{font-size:15px}.events-overview{grid-template-columns:1fr}.events-overview>div{padding:17px}.events-overview>div+div{border-top:1px solid rgba(172,132,63,.28);border-left:0}.events-overview strong{font-size:19px}.principal-event{min-height:0}.principal-event-image{min-height:250px}.principal-event-copy{padding:32px 25px}.principal-event-copy h3{font-size:35px}.events-calendar{grid-template-columns:1fr}.annual-event-card{grid-template-columns:82px minmax(0,1fr);min-height:98px}.annual-event-date strong{font-size:22px}.annual-event-content{padding:16px 18px}.annual-event-content h3{font-size:18px}.events-note{align-items:flex-start;flex-wrap:wrap;padding:22px 20px}.events-note>div{flex:1 1 calc(100% - 52px)}.events-note>a{margin-left:46px}}


/* Annual events grouped calendar refinement */
.events-overview{border-radius:3px;overflow:hidden}
.events-overview>div{display:flex;align-items:center;justify-content:center;gap:12px}
.events-overview strong,.events-overview i{color:#851713;font-size:30px;font-weight:900}
.events-overview span{color:#6b5140;font-size:15px;letter-spacing:1px}
.events-calendar{display:block}
.event-month-group{position:relative;margin-top:24px;padding:0 1rem 1rem;border:1px solid rgba(157,118,56,.3);background:rgba(255,253,248,.92);box-shadow:0 10px 28px rgba(58,27,9,.07)}
.event-month-group:first-child{margin-top:0}
.event-month-heading{display:flex;align-items:center;justify-content:space-between;min-height:3.5rem;border-bottom:1px solid rgba(157,118,56,.22)}
.event-month-heading>div{display:flex;align-items:center;gap:16px}
.event-month-heading span{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid #b58b47;border-radius:50%;color:#8c1713;font-family:Georgia,serif;font-size:0.9rem}
.event-month-heading h3{margin:0;color:#57120f;font-size:1.2rem;font-weight:900;letter-spacing:4px}
.event-month-heading small{color:#9b7b4a;font-size:1.1rem;letter-spacing:2px}
.event-month-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding-top:1rem}
.event-month-list .annual-event-card{min-height:3rem;box-shadow:none}
.event-month-list .annual-event-content h4{margin:7px 0 0;color:#4d3020;font-size:1.5rem;font-weight:800;letter-spacing:1.5px}
.event-month-list .annual-event-content em{margin-top:7px;color:#9b6e26;font-size:1.1rem;font-style:normal;letter-spacing:1px}
.principal-month-group{border-color:rgba(164,106,25,.62);background:linear-gradient(135deg,rgba(255,250,236,.97),rgba(255,255,255,.94))}
.principal-month-group:before{content:"主神聖誕月";position:absolute;top:-1px;right:24px;padding:7px 18px;color:#fff3cf;background:#8f1713;font-size:1.1rem;letter-spacing:3px}
.principal-month-group .event-month-heading{padding-right:118px}
@media(max-width:991px){.event-month-group{padding-right:1.1rem;padding-left:20px}.event-month-list{grid-template-columns:1fr}.principal-month-group:before{right:20px}}
@media(max-width:767px){.events-overview>div{justify-content:flex-start;padding-left:25px}.event-month-group{margin-top:1.1rem;padding:0 1rem 1rem}.event-month-heading{min-height:3rem}.event-month-heading>div{gap:11px}.event-month-heading span{width:38px;height:38px;font-size:13px}.event-month-heading h3{font-size:23px;letter-spacing:3px}.event-month-heading small{font-size:11px;letter-spacing:1px}.principal-month-group:before{display:none}.principal-month-group .event-month-heading{padding-right:0}.event-month-list{gap:10px;padding-top:14px}.event-month-list .annual-event-card{min-height:94px}.event-month-list .annual-event-content h4{font-size:17px;letter-spacing:1px}}


/* Gallery archive page */
.gallery-page-hero{background-position:center 38%}
.gallery-archive-section{position:relative;padding:30px 30px;background:url("../images/black.jpg") center top/100% auto repeat-y;overflow:hidden}
.gallery-archive-section:before{content:"";position:absolute;inset:0;background:rgba(250,246,239,.85)}
.gallery-archive-section>.container{position:relative;z-index:1}
.gallery-archive-section .news-archive-heading p{margin:18px 0 0;color:#725f52;font-size:16px;letter-spacing:1px}
.gallery-archive-meta{display:flex;align-items:center;justify-content:space-between;margin:0px 0 0px;padding:5px 18px;color:#765f4b;font-size:14px}
.gallery-archive-meta i{margin-right:8px;color:#8f1713}.gallery-archive-meta strong{color:#8f1713;font-size:18px}
.gallery-archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 20px}
.gallery-card{position:relative;background:#fff;box-shadow:0 10px 28px rgba(58,27,9,.1);transition:transform .3s ease,box-shadow .3s ease}
.gallery-card:hover{transform:translateY(-7px);box-shadow:0 18px 38px rgba(58,27,9,.18)}
.gallery-card-image{position:relative;display:block;width:100%;height:220px;padding:0;border:0;background:#2b0b08;overflow:hidden;cursor:zoom-in}
.gallery-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(31,6,4,.72));opacity:.45;transition:opacity .3s}
.gallery-card-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.gallery-card-image span{position:absolute;z-index:2;right:15px;bottom:13px;color:#fff;font-size:12px;letter-spacing:1px;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s}
.gallery-card-image:hover img{transform:scale(1.07)}.gallery-card-image:hover:after{opacity:1}.gallery-card-image:hover span{opacity:1;transform:none}
.gallery-card-body{min-height:120px;padding:20px 20px 22px;border-bottom:3px solid transparent;transition:border-color .3s}
.gallery-card:hover .gallery-card-body{border-bottom-color:#a71d18}
.gallery-card-body time{display:block;color:#a0783c;font-size:12px;letter-spacing:1.5px}.gallery-card-body time i{margin-right:5px}
.gallery-card-body h3{margin:10px 0 0;color:#4b2c1c;font-size:18px;font-weight:800;line-height:1.55;letter-spacing:1px}
.gallery-lightbox{position:fixed;z-index:1200;inset:0;display:flex;align-items:center;justify-content:center;padding:70px 25px 30px;background:rgba(10,3,2,.94);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.gallery-lightbox.is-open{opacity:1;visibility:visible}.gallery-lightbox figure{margin:0;text-align:center}.gallery-lightbox img{display:block;max-width:min(1100px,92vw);max-height:calc(100vh - 145px);border:1px solid rgba(225,189,112,.55);object-fit:contain;box-shadow:0 20px 65px #000}
.gallery-lightbox figcaption{margin-top:15px;color:#f2d998;font-size:16px;letter-spacing:2px}
.gallery-lightbox-close{position:absolute;top:18px;right:22px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(242,217,152,.65);border-radius:50%;color:#fff;background:#78130f;font-size:21px}
body.gallery-lightbox-open{overflow:hidden}
@media(max-width:1199px){.gallery-archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-card-image{height:230px}}
@media(max-width:991px){.gallery-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-card-image{height:250px}}
@media(max-width:575px){.gallery-archive-section{background-size:auto 100%;background-repeat:no-repeat}.gallery-archive-meta{align-items:flex-start;flex-direction:column;gap:7px;margin-top:28px}.gallery-archive-grid{grid-template-columns:1fr;gap:18px}.gallery-card-image{height:245px}.gallery-card-body{min-height:0;padding:17px 18px 20px}.gallery-card-body h3{font-size:17px}.gallery-lightbox{padding-right:15px;padding-left:15px}}


/* Gallery detail page */
.gallery-card-image{color:inherit;text-decoration:none}
.gallery-card-body h3 a{color:inherit;text-decoration:none}.gallery-card-body h3 a:hover{color:#8f1713}
.gallery-detail-section{padding-top:55px;padding-bottom:75px}
.gallery-detail-article{max-width:1180px}
.gallery-detail-article .news-detail-header{padding-bottom:18px}
.gallery-detail-article .news-detail-meta time i{margin-right:7px;color:#a17e40}
.gallery-detail-article .news-detail-subheading{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 16px;margin-top:18px}
.gallery-detail-article .news-detail-subheading span{width:100%}
.gallery-detail-article .news-detail-subheading p{margin:0 0 3px;color:#927b69;font-size:13px;letter-spacing:1px}
.gallery-detail-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-detail-photos figure:first-child{grid-column:span 2;grid-row:span 2}
.gallery-detail-photos figure:first-child .gallery-detail-photo,.gallery-detail-photos figure:first-child img{height:538px}
.gallery-detail-photo{position:relative;display:block;width:100%;height:260px;padding:0;border:0;background:#28100b;overflow:hidden;cursor:zoom-in}
.gallery-detail-photo:after{content:"";position:absolute;inset:0;background:rgba(35,5,3,.28);opacity:0;transition:opacity .3s}
.gallery-detail-photo img{height:100%}
.gallery-detail-photo span{position:absolute;z-index:2;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,232,178,.8);border-radius:50%;color:#fff;background:rgba(110,13,10,.82);font-size:18px;opacity:0;transform:translate(-50%,-42%);transition:opacity .3s,transform .3s}
.gallery-detail-photo:hover:after,.gallery-detail-photo:focus-visible:after{opacity:1}.gallery-detail-photo:hover span,.gallery-detail-photo:focus-visible span{opacity:1;transform:translate(-50%,-50%)}
@media(max-width:991px){.gallery-detail-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-detail-photos figure:first-child{grid-column:1/-1;grid-row:auto}.gallery-detail-photos figure:first-child .gallery-detail-photo,.gallery-detail-photos figure:first-child img{height:390px}}
@media(max-width:767px){.gallery-detail-section{padding-top:40px;padding-bottom:55px}.gallery-detail-photos{grid-template-columns:1fr}.gallery-detail-photos figure:first-child{grid-column:auto}.gallery-detail-photo,.gallery-detail-photos figure:first-child .gallery-detail-photo,.gallery-detail-photos figure:first-child img{height:245px}}


/* Events tablet layout correction */
@media (min-width:768px) and (max-width:1199px){
  .events-page .page-hero-content{padding-right:24px;padding-left:24px}
  .annual-events-section{background-size:auto 100%;background-repeat:no-repeat}
  .annual-events-section>.container{max-width:960px}
  .annual-events-heading{max-width:680px;margin-bottom:32px}
  .annual-events-heading h2{font-size:40px;letter-spacing:3px}
  .events-overview{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px}
  .events-overview>div{min-width:0;padding:19px 12px;gap:8px}
  .events-overview strong,.events-overview i{flex:0 0 auto;font-size:25px}
  .events-overview span{min-width:0;font-size:13px;line-height:1.45;letter-spacing:.5px;text-align:left}
  .event-month-group{margin-top:18px;padding:0 18px 18px}
  .event-month-heading{min-height:68px}
  .event-month-heading>div{gap:12px}
  .event-month-heading span{width:40px;height:40px;font-size:13px}
  .event-month-heading h3{font-size:23px;letter-spacing:3px}
  .event-month-heading small{font-size:11px;letter-spacing:1px;white-space:nowrap}
  .event-month-list{gap:12px;padding-top:16px}
  .annual-event-card{grid-template-columns:78px minmax(0,1fr);min-width:0;min-height:92px}
  .annual-event-date span{font-size:13px;letter-spacing:1px}
  .annual-event-date strong{font-size:19px}
  .annual-event-content{min-width:0;padding:14px 16px}
  .event-kind{font-size:10px;letter-spacing:2px}
  .event-month-list .annual-event-content h4{max-width:100%;margin-top:5px;font-size:17px;line-height:1.45;letter-spacing:.5px;overflow-wrap:anywhere}
  .events-note{gap:14px;margin-top:26px;padding:20px 22px}
  .events-note p{font-size:14px;line-height:1.7}
  .events-note>a{font-size:13px;white-space:nowrap}
}
@media (min-width:768px) and (max-width:991px){
  .event-month-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .events-note{align-items:flex-start;flex-wrap:wrap}
  .events-note>div{flex:1 1 calc(100% - 50px)}
  .events-note>a{margin-left:42px}
}
@media (min-width:992px) and (max-width:1199px){
  .event-month-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Server-rendered news pagination */
.news-pagination .news-page-button{display:flex;text-decoration:none}
.news-pagination .news-page-button.disabled{color:#b9ac9b;background:#eee9e0;cursor:not-allowed;pointer-events:none}
.news-archive-body p{margin:7px 0 0;color:#806e61;font-size:13px;line-height:1.7}


/* Server-rendered gallery */
.gallery-grid-message{grid-column:1/-1;margin:0;padding:55px 20px;background:rgba(255,253,248,.92);text-align:center}

.gallery-detail-empty{margin:0;padding:50px 20px;border:1px solid #e2d5c0;background:#fffaf1;text-align:center}

.home-gallery-message{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:260px;margin:0;background:#fffaf1;text-align:center}


/* Gallery event description */
.gallery-event-description{margin:8px 0 30px;padding:24px 26px;border-left:3px solid #a17e40;background:#fffaf1;color:#5e4d43;font-size:16px;line-height:2;letter-spacing:1px}
.gallery-event-description p{margin:0}
@media(max-width:767px){.gallery-event-description{margin-bottom:24px;padding:19px 18px;font-size:15px;line-height:1.9}}


/* News detail: show complete photos */
.news-detail-page .news-detail-gallery figure{display:flex;flex-direction:column;justify-content:center;background:#28100b}
.news-detail-page .news-detail-gallery img,
.news-detail-page .news-detail-gallery figure:first-child img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.news-detail-page .news-detail-gallery figure:hover img{transform:none}

/* Homepage news single-line excerpt */
.news-gallery-section .news-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}


/* News detail photo lightbox trigger */
.news-detail-photo{position:relative;display:block;width:100%;padding:0;border:0;background:#28100b;cursor:zoom-in;overflow:hidden}
.news-detail-photo img{display:block;width:100%;height:auto}
.news-detail-photo span{position:absolute;z-index:2;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,232,178,.8);border-radius:50%;color:#fff;background:rgba(110,13,10,.82);font-size:18px;opacity:0;transform:translate(-50%,-42%);transition:opacity .3s,transform .3s}
.news-detail-photo:after{content:"";position:absolute;inset:0;background:rgba(35,5,3,.25);opacity:0;transition:opacity .3s}
.news-detail-photo:hover:after,.news-detail-photo:focus-visible:after{opacity:1}
.news-detail-photo:hover span,.news-detail-photo:focus-visible span{opacity:1;transform:translate(-50%,-50%)}

/* News archive content-only rows */
.news-page .news-archive-line{display:none}
.news-page .news-archive-content{min-width:0;overflow:hidden;color:#4b3024;font-size:1.1rem;font-weight:500;line-height:1.55;letter-spacing:1px;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:767px){
  .news-page .news-archive-line{display:flex;margin-bottom:7px}
  .news-page .news-archive-content{font-size:1.1rem;letter-spacing:.5px}
}


/* Gallery detail: show complete photo proportions */
.gallery-detail-page .gallery-detail-photos figure{align-self:start}
.gallery-detail-page .gallery-detail-photos figure:first-child{grid-row:auto}
.gallery-detail-page .gallery-detail-photos .gallery-detail-photo,
.gallery-detail-page .gallery-detail-photos figure:first-child .gallery-detail-photo{height:auto;min-height:0}
.gallery-detail-page .gallery-detail-photos .gallery-detail-photo img,
.gallery-detail-page .gallery-detail-photos figure:first-child .gallery-detail-photo img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}


/* Gallery detail three-column layout */
.gallery-detail-page .gallery-detail-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-detail-page .gallery-detail-photos figure:first-child{grid-column:auto;grid-row:auto}
@media(max-width:991px){
  .gallery-detail-page .gallery-detail-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .gallery-detail-page .gallery-detail-photos{grid-template-columns:1fr}
}
