@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');

/*------------------------------------------------------------
# Global classes
------------------------------------------------------------*/
html, body {
    margin: 0;
    padding: 0;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge legacy */
}

/* overflow-x on body only — putting it on html turns html into the scroll
   container which breaks position:sticky across the entire site */
body {
    overflow-x: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;               /* Chrome / Safari / Opera */
}

body {
    position: relative;
}

.flex {
    display: flex;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #5A7A8C;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    line-height: 1.3;
    color: #2c5f7a;
}

p {
    line-height: 1.8;
}

a {
    transition: color 0.3s ease;
}

a:hover {
    color: #e12454;
    text-decoration: none;
}

@font-face {
    font-family: "mountains";
    src: url(fonts/beyond_the_mountains.ttf);
    src: url(fonts/beyond_the_mountains.otf);
    font-weight: 400;
}

.d-col-n {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

/*------------------------------------------------------------
# site-header
------------------------------------------------------------*/
.home-page {
    background: url(images/middle-cover.jpg) no-repeat;
}

/* ── Navbar ──────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}

.site-header.scrolled {
    background: rgba(8, 4, 18, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(232,213,163,0.15), 0 4px 30px rgba(0,0,0,0.4);
}

.site-header .header-bar {
    position: static;
    padding: 22px 0;
    transition: padding 0.3s ease;
}

.site-header.scrolled .header-bar {
    padding: 14px 0;
}

/* Logo */
.header-bar .site-branding {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0;
}

.header-bar .site-branding a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.logo-kanji {
    font-size: 20px;
    color: #e12454;
    display: inline-block;
    transition: transform 0.4s ease;
}

.header-bar .site-branding a:hover {
    color: #fff;
}

.header-bar .site-branding a:hover .logo-kanji {
    transform: rotate(20deg);
}

/* Desktop navigation */
.site-navigation {
    display: flex;
    align-items: center;
}

.site-navigation ul {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-navigation ul li a {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding-bottom: 4px;
    background-image: linear-gradient(90deg, #e12454 0%, #223a66 60%, transparent 100%);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: color 0.25s ease, background-size 0.3s ease;
}

.site-navigation ul li a:hover,
.site-navigation ul li a.active {
    color: #fff;
    background-size: 100% 2px;
}

/* Tickets CTA */
.site-navigation ul li.nav-cta a {
    background-image: none;
    border: 1.5px solid rgba(210,100,144,0.65);
    padding: 7px 18px;
    border-radius: 4px;
    color: rgba(220,160,180,1);
    transition: border-color 0.25s ease, color 0.25s ease,
                background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-navigation ul li.nav-cta a:hover,
.site-navigation ul li.nav-cta a.active {
    border-color: rgba(210,100,144,1);
    color: #fff;
    background-color: rgba(210,100,144,0.18);
    box-shadow: 0 0 16px rgba(225,36,84,0.25);
    background-size: 0;
}

/* Hamburger button */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.hamburger-menu span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
}

.hamburger-menu.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-menu.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger-menu.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0,0,0,0);
    pointer-events: none;
    overflow: hidden;
    transition: background 0.35s ease;
}

.mobile-drawer.open {
    background: rgba(0,0,0,0.55);
    pointer-events: all;
}

.mobile-nav {
    position: absolute;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: rgba(8,4,18,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(232,213,163,0.12);
    padding: 80px 32px 40px;
    transition: right 0.35s cubic-bezier(.25,.46,.45,.94);
}

.mobile-drawer.open .mobile-nav {
    right: 0;
}

.mobile-close {
    position: absolute;
    top: 22px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-close:hover { color: #fff; }

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav ul li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav ul li a {
    display: block;
    padding: 18px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li a.active {
    color: #e12454;
    padding-left: 8px;
}

/*------------------------------------------------------------
# hero
-----------------------------------------------------------*/
.hero-content {
    padding: 60px 0;
    padding-top: 120px;
    min-height: 88vh;
    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.9s ease;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5,2,15,0.55) 0%,
        rgba(5,2,15,0.2)  45%,
        rgba(5,2,15,0.65) 100%
    );
    z-index: 1;
}

.hero-content .container {
    position: relative;
    z-index: 2;
}

.hero-content .entry-header {
    position: relative;
    text-align: center;
}

.hero-content .entry-header h2 {
    padding: 16px 0 24px;
    margin: 0;
    font-family: 'Playfair Display', 'Shippori Mincho', serif;
    font-size: 62px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1.15;
    background: linear-gradient(
        105deg,
        #fff0d0 0%,
        #ffffff 20%,
        #fff0d0 35%,
        #ffe566 48%,
        #fff0d0 60%,
        #ffffff 75%,
        #ffd6e8 88%,
        #ffffff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: heroShimmer 5s linear infinite;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
    filter:
        drop-shadow(0 0 30px rgba(255, 220, 120, 0.7))
        drop-shadow(0 0 60px rgba(255, 157, 196, 0.35));
}

@keyframes heroShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -100% center; }
}

.hero-content .entry-header .entry-meta-date {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(232,213,163,0.9);
    text-align: center;
    margin-bottom: 12px;
}

@media screen and (min-width: 992px) {
    .hero-content .entry-header h2 {
        font-size: 92px;
        letter-spacing: 12px;
    }

    .hero-content .entry-header .entry-meta-date {
        font-size: 14px;
    }
}

/*------------------------------------------------------------
## countdown
------------------------------------------------------------*/
.countdown {
    margin-top: 40px;
}

.countdown-holder {
    min-width: 150px;
    margin-bottom: 30px;
}

.countdown-holder .dday,
.countdown-holder .dhour,
.countdown-holder .dmin,
.countdown-holder .dsec {
    display: block;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    color: hsl(0, 0%, 100%);
}

.countdown-holder label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
}

/*------------------------------------------------------------
## hero-content entry-footer
------------------------------------------------------------*/
.hero-content .entry-footer {
    margin-top: 48px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-content .entry-footer .btn {
    padding: 14px 36px;
    border-radius: 5px;
    margin-right: 0;
    font-weight: 600;
}

.hero-content .entry-footer .btn-img-base {
    background-color: rgba(255, 242, 246, 0.28);
    background-image: url('images/button-up-pattern.png'), url('images/button-down-pattern.png');
    background-size: 46px 46px, 46px 46px;
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    border: 1.5px solid rgba(255, 235, 180, 0.85);
    backdrop-filter: blur(10px) saturate(1.4);
    box-shadow:
        0 0 0 3px rgba(255, 220, 140, 0.18),
        0 0 24px rgba(255, 220, 100, 0.45),
        0 0 48px rgba(255, 200, 80, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.28);
}

.hero-content .entry-footer a:hover, .hero-content .entry-footer .current {
    background: rgba(225,36,84,0.15);
    border-color: rgba(225,36,84,0.8);
    color: #fff;
}

.btn-outline-hero {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.55);
    color: rgba(255,255,255,0.88) !important;
    padding: 16px 40px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.btn-outline-hero:hover {
    border-color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    text-decoration: none;
}

/*------------------------------------------------------------
# sep-sakura — decorative section divider
------------------------------------------------------------*/
.sep-sakura {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 52px 40px;
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

.sep-sakura::before,
.sep-sakura::after {
    content: '';
    flex: 1;
    max-width: 260px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(225,36,84,0.55) 40%,
        rgba(34,58,102,0.4) 70%,
        transparent 100%
    );
}

.sep-sakura-petal {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
}

.sep-petal {
    display: flex;
    will-change: transform, opacity;
    filter: drop-shadow(0 1px 4px rgba(225,36,84,0.2));
}

.sep-petal-a {
    color: rgba(225,36,84,0.72);
    animation: petal-sway-a 5s ease-in-out infinite;
}
.sep-petal-b {
    color: rgba(225,36,84,0.62);
    animation: petal-sway-b 6.5s ease-in-out infinite 1.1s;
}
.sep-petal-c {
    color: rgba(225,36,84,0.68);
    animation: petal-sway-c 4.8s ease-in-out infinite 2.3s;
}

@keyframes petal-sway-a {
    0%   { transform: translate(-4px,  2px) rotate(-30deg) scale(0.93); opacity: 0.52; }
    50%  { transform: translate( 5px, -4px) rotate(  5deg) scale(1.07); opacity: 0.90; }
    100% { transform: translate(-4px,  2px) rotate(-30deg) scale(0.93); opacity: 0.52; }
}
@keyframes petal-sway-b {
    0%   { transform: translate( 0,   -2px) rotate( 10deg) scale(1.00); opacity: 0.58; }
    50%  { transform: translate( 0,    5px) rotate(-10deg) scale(1.09); opacity: 0.94; }
    100% { transform: translate( 0,   -2px) rotate( 10deg) scale(1.00); opacity: 0.58; }
}
@keyframes petal-sway-c {
    0%   { transform: translate( 5px,  1px) rotate( 25deg) scale(0.91); opacity: 0.50; }
    50%  { transform: translate(-4px, -5px) rotate( -8deg) scale(1.06); opacity: 0.88; }
    100% { transform: translate( 5px,  1px) rotate( 25deg) scale(0.91); opacity: 0.50; }
}

/*------------------------------------------------------------
# homepage-news-block
------------------------------------------------------------*/
.homepage-news-block {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
    padding: 0;
    border-top: 1px solid rgba(34,58,102,0.08);
}

.hnb-header {
    margin-bottom: 48px;
}

/* ── Featured news ─────────────────────────────────────── */
.news-featured {
    margin-bottom: 48px;
}

.news-featured-image {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(34,58,102,0.12);
}

.news-featured-image img {
    width: 100%;
    display: block;
    transition: transform 0.45s ease;
}

.news-featured-image:hover img {
    transform: scale(1.04);
}

.news-featured-body {
    padding: 32px 0 0 0;
}

@media screen and (min-width: 768px) {
    .news-featured-body {
        padding: 0 0 0 40px;
    }
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.news-date {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5A7A8C;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-category {
    display: inline-block;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e12454;
    border: 1.5px solid rgba(225,36,84,0.45);
    border-radius: 3px;
    background: rgba(225,36,84,0.04);
}

.news-featured-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 20px;
    color: #223a66;
}

@media screen and (min-width: 992px) {
    .news-featured-title {
        font-size: 32px;
    }
}

.news-featured-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.news-featured-title a:hover {
    color: #e12454;
}

.news-featured-excerpt {
    font-size: 15px;
    color: #6F8BA4;
    line-height: 1.9;
    margin-bottom: 28px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e12454;
    text-decoration: none;
    border-bottom: 2px solid rgba(225,36,84,0.3);
    padding-bottom: 3px;
    transition: border-color 0.25s ease, gap 0.25s ease;
}

.news-read-more:hover {
    color: #e12454;
    border-color: #e12454;
    gap: 10px;
    text-decoration: none;
}

/* ── News list ──────────────────────────────────────────── */
.news-list {
    border-top: 1.5px solid rgba(34,58,102,0.1);
    margin-bottom: 40px;
}

.news-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(34,58,102,0.07);
    flex-wrap: wrap;
}

.nli-date {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5A7A8C;
    font-family: 'Noto Sans JP', sans-serif;
    min-width: 92px;
}

.nli-category {
    flex-shrink: 0;
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #223a66;
    border: 1.5px solid rgba(34,58,102,0.3);
    border-radius: 3px;
    min-width: 88px;
    text-align: center;
}

.nli-title {
    font-size: 15px;
    font-weight: 500;
    color: #223a66;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.nli-title:hover {
    color: #e12454;
    padding-left: 4px;
    text-decoration: none;
}

/* ── View all button ────────────────────────────────────── */
.news-view-all {
    margin-top: 32px;
    text-align: center;
}

.news-view-all .btn-img-base {
    padding: 14px 40px;
    color: #223a66;
    font-weight: 700;
    border-radius: 5px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.news-view-all .btn-img-base:hover {
    color: #e12454;
    border-color: rgba(210,100,144,1);
}

.btn-news-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #223a66;
    text-decoration: none;
    border-bottom: 2px solid rgba(34,58,102,0.25);
    padding-bottom: 3px;
    transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.btn-news-all:hover {
    color: #e12454;
    border-color: rgba(225,36,84,0.5);
    gap: 14px;
    text-decoration: none;
}

/*------------------------------------------------------------
# The Lineup Artists - Headliners
------------------------------------------------------------*/
.content-section {
    width: 100%;
    padding-bottom: 120px;
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

.content-section .middle-cover {
    margin: 0;
    padding: 0;
    position: relative;
}

.content-section .middle-cover img {
    max-width: 100%;
}

/* ── Global: gradient underline on all section lead labels ─ */
.entry-title p {
    display: inline-block;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #e12454 0%, #223a66 60%, transparent 100%) 1;
    padding-bottom: 4px;
    margin-bottom: 8px;

    color: #e12454;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}

/* ── Global: h2 inside any .entry-title section heading ──── */
.entry-title h2 {
    font-family: 'Shippori Mincho', serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #223a66;
    line-height: 1.35;
    margin: 0;
    padding-bottom: 16px;
    position: relative;
}

/* .entry-title h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #e12454 0%, #c9932a 100%);
    border-radius: 2px;
} */

/*------------------------------------------------------------
## lineup-artists-headline
------------------------------------------------------------*/
.lineup-artists-headline {
    margin-top: 0;
}

.lineup-artists-headline .entry-title p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e12454;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lineup-artists-headline .entry-title h2 {
    width: 100%;
}

/*------------------------------------------------------------
## lineup-artists
------------------------------------------------------------*/
.lineup-artists {
    margin-top: 40px;
    row-gap: 20px;
}

.headliner-col {
    padding: 8px;
}

.headliner-card {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(34, 58, 102, 0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.headliner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(225, 36, 84, 0.3);
}

.headliner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.headliner-card:hover img {
    transform: scale(1.08);
}

.headliner-num {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #e12454;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 9px;
    border-radius: 6px;
    line-height: 1.4;
}

.headliner-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 18px 22px;
    background: linear-gradient(to top, rgba(34, 58, 102, 0.96) 0%, rgba(34, 58, 102, 0.7) 55%, transparent 100%);
}

.headliner-quote-mark {
    display: block;
    font-size: 40px;
    line-height: 1;
    color: #e12454;
    font-family: Georgia, serif;
    margin-bottom: 4px;
}

.headliner-quote {
    margin: 0 0 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
    font-style: italic;
}

.headliner-info h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(225, 36, 84, 0.5);
    padding-top: 10px;
}

/*------------------------------------------------------------
# the-complete-lineup
------------------------------------------------------------*/
.the-complete-lineup {
    margin-top: 0;
}

.the-complete-lineup .entry-title p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e12454;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.the-complete-lineup .entry-title h2 {
    width: 100%;
}

/*------------------------------------------------------------
## the-complete-lineup-artists
------------------------------------------------------------*/
.the-complete-lineup-artists {
    margin-top: 40px;
    row-gap: 12px;
}

.the-complete-lineup-artists .artist-single {
    padding: 5px;
}

.artist-card {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(34, 58, 102, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.artist-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 28px rgba(225, 36, 84, 0.28);
}

.artist-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

.artist-card:hover img {
    transform: scale(1.1);
}

.artist-card figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 8px 10px;
    background: linear-gradient(to top, rgba(34, 58, 102, 0.88) 0%, transparent 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    transition: padding 0.3s ease;
}

.artist-card:hover figcaption {
    padding-bottom: 14px;
}

.artist-card-dot {
    display: block;
    color: #e12454;
    font-size: 8px;
    margin-bottom: 3px;
    letter-spacing: 0;
}

/*------------------------------------------------------------
# see the-complete-lineup button
------------------------------------------------------------*/
.see-complete-lineup {
    margin-top: 40px;
}

.see-complete-lineup .entry-footer .btn {
    padding: 15px 35px;
    border-radius: 0;
    margin-right: 20px;
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
    font-weight: 500;
}

/* pattern button overrides the gradient when used here */
.see-complete-lineup .entry-footer .btn-img-base {
    background: none;
    background-image: url('images/button-up-pattern.png'), url('images/button-down-pattern.png');
    background-size: 46px 46px, 46px 46px;
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    border: 2px solid rgba(210,100,144,0.65);
    font-weight: 700;
    border-radius: 5px;
}

.see-complete-lineup .entry-footer a {
    font-size: 14px;
    font-weight: 600;
    color: #223a66;
    transition: color 0.25s ease;
}

.see-complete-lineup .entry-footer a:hover {
    color: #e12454;
}

/*------------------------------------------------------------
# homepage-next-events
------------------------------------------------------------*/
.homepage-next-events {
    margin-top: 0;
}

.homepage-next-events .entry-title p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e12454;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.homepage-next-events .entry-title h2 {
    width: 100%;
}

/*------------------------------------------------------------
## .next-event-slider
------------------------------------------------------------*/
.next-event-slider-wrap {
    position: relative;
}

.next-event-slider {
    margin-top: 110px;
}

.next-event-slider .featured-image {
    display: block;
    margin: 0;
    position: relative;
}

.next-event-slider .featured-image img {
    display: block;
    width: 100%;
}

.next-event-slider .entry-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    padding: 30px;
    text-align: center;
    background: rgba(0,0,0,.75);
    text-decoration: none;
    transition: all .5s;
    opacity: 0;
    visibility: hidden;
}

.next-event-slider .featured-image:hover .entry-content {
    opacity: 1;
    visibility: visible;
}

.next-event-slider .entry-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: hsl(0, 0%, 100%);
}

.next-event-slider .entry-content p {
    font-size: 14px;
    color: hsl(0, 0%, 100%);
}

.next-event-slider-wrap .swiper-button-next {
    top: auto;
    bottom: -36px;
    right: auto;
    left: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    background: transparent;
    cursor: pointer;
}

/* hide Swiper's built-in ::after arrow */
.next-event-slider-wrap .swiper-button-next::after {
    display: none !important;
}

.slider-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(210,100,144,0.65);
    background: rgba(210,100,144,0.2);
    backdrop-filter: blur(6px);
    color: rgba(220,120,160,1);
    transition: border-color 0.28s ease, background 0.28s ease,
                transform 0.28s ease, box-shadow 0.28s ease;
    animation: nav-sakura-pulse 2.8s ease-in-out infinite;
}

@keyframes nav-sakura-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(225,36,84,0.55), 0 4px 16px rgba(0,0,0,0.35); }
    55%  { box-shadow: 0 0 0 14px rgba(225,36,84,0),    0 4px 16px rgba(0,0,0,0.35); }
    100% { box-shadow: 0 0 0 0    rgba(225,36,84,0),    0 4px 16px rgba(0,0,0,0.35); }
}

.slider-nav-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.22s ease, filter 0.22s ease;
    filter: drop-shadow(0 0 4px rgba(225,36,84,0.45));
}

.next-event-slider-wrap .swiper-button-next:hover .slider-nav-btn {
    border-color: rgba(210,100,144,1);
    background: rgba(225,36,84,0.18);
    transform: scale(1.14) translateY(-3px);
    box-shadow: 0 10px 30px rgba(225,36,84,0.38), 0 0 0 5px rgba(210,100,144,0.12);
    animation: none;
}

.next-event-slider-wrap .swiper-button-next:hover .slider-nav-btn svg {
    transform: translateX(4px);
    filter: drop-shadow(0 0 7px rgba(225,36,84,0.85));
}

@media screen and (min-width: 768px) {
    .next-event-slider-wrap .swiper-button-next {
        bottom: -48px;
        width: 72px;
        height: 72px;
        margin-left: -36px;
    }

    .slider-nav-btn {
        width: 72px;
        height: 72px;
    }

    .slider-nav-btn svg {
        width: 28px;
        height: 28px;
    }
}

/*------------------------------------------------------------
# homepage-products
------------------------------------------------------------*/
.homepage-products {
    margin-top: 0;
    padding: 0 0 40px;
}

.homepage-products .entry-title {
    margin-bottom: 0;
}

/* ── Product grid ───────────────────────────────────────── */
/* ── Homepage product grid ──────────────────────────────── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
@media (max-width: 767px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* tighten card internals for half-width columns */
    .product-image { height: 140px; }
    .product-body  { padding: 10px 11px 12px; gap: 3px; }
    .product-name  { font-size: 12px; }
    .product-price { font-size: 13px; }
    .btn-buy       { padding: 6px 12px; font-size: 9px; letter-spacing: 1px; margin-top: 6px; }
    .product-tag, .product-hot { font-size: 8px; padding: 2px 7px; top: 8px; }
    .product-tag   { left: 8px; }
    .product-hot   { right: 8px; }
}

/* ── Card shell ─────────────────────────────────────────── */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 4px 18px rgba(34,58,102,0.10);
    border: 1.5px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 46px rgba(34,58,102,0.18);
    border-color: #e12454;
}

/* ── Image — fixed height block ─────────────────────────── */
.product-image {
    position: relative;
    height: 190px;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.product-card:hover .product-image img {
    transform: scale(1.07);
}
.product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(12,6,26,0.18) 100%);
}
.product-card:hover .product-image::after { background: none; }

/* ── Chips ──────────────────────────────────────────────── */
.product-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(34,58,102,0.65);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.product-hot {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e12454 0%, #c9932a 100%);
    border-radius: 20px;
}

/* ── Info panel ─────────────────────────────────────────── */
.product-body {
    position: static;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.product-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
    line-height: 1.4;
    text-shadow: none;
}

.product-price {
    font-size: 16px;
    font-weight: 700;
    color: #e12454;
    letter-spacing: 0.3px;
}

/* ── Buy button ─────────────────────────────────────────── */
.btn-buy {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e12454 0%, #c9932a 100%);
    border-radius: 5px;
    text-decoration: none;
    opacity: 1;
    transform: none;
    transition: box-shadow 0.2s;
}
.product-card:hover .btn-buy {
    opacity: 1;
    transform: none;
}
.btn-buy:hover {
    box-shadow: 0 4px 18px rgba(225,36,84,0.55);
    text-decoration: none;
    color: #fff;
}

/* ── View all ───────────────────────────────────────────── */
.products-view-all {
    margin-top: 48px;
    text-align: center;
}

.products-view-all .btn-img-base {
    background: none;
    background-image: url('images/button-up-pattern.png'), url('images/button-down-pattern.png');
    background-size: 46px 46px, 46px 46px;
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    border: 2px solid rgba(210,100,144,0.65);
    color: #223a66;
    font-weight: 700;
    border-radius: 5px;
    padding: 14px 40px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.products-view-all .btn-img-base:hover {
    color: #e12454;
    border-color: rgba(210,100,144,1);
}

/*------------------------------------------------------------
# festival-page
------------------------------------------------------------*/
.festival-page {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

.festival-page-header {
    background: url("images/bg/bg-8.jpg") center center/cover no-repeat;
}

.team-page-header {
    background: url("images/bg/bg-1.jpg") center center/cover no-repeat;
} 

.about-pg-header {
    background: url("images/bg/bg-2.jpg") center center/cover no-repeat;
}

.news-page-header {
    background: url("images/bg/bg-5.jpg") center center/cover no-repeat;
}

.products-page-header {
    background: url("images/bg/bg-6.jpg") center center/cover no-repeat;
}

.gallery-pg {
    background: url('images/jula_background.png') repeat;
    background-size: 500px auto;
}

.gallery-pg-header {
    background: url("images/bg/bg-3.jpg") center center/cover no-repeat;
}

.contact-pg-header {
    background: url("images/bg/bg-contact.jpg") center center/cover no-repeat;
}



/* ── Festival list ────────────────────────────────────── */
.festival-list {
    padding: 80px 0 120px;
}

.festival-list .entry-title {
    margin-bottom: 56px;
}

.festival-cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Festival card ────────────────────────────────────── */
.festival-card {
    display: flex;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(34,58,102,0.09);
    border-left: 4px solid #e12454;
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    cursor: pointer;
}

.festival-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 56px rgba(34,58,102,0.16);
}

/* ── Image column ─────────────────────────────────────── */
.festival-img {
    position: relative;
    width: 300px;
    flex-shrink: 0;
    overflow: hidden;
}

.festival-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.48s ease;
}

.festival-card:hover .festival-img img {
    transform: scale(1.07);
}

.festival-status-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
    border-radius: 20px;
    pointer-events: none;
}

.festival-date-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    min-width: 72px;
    padding: 10px 16px;
    text-align: center;
    background: rgba(5,2,15,0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(225,36,84,0.45);
    border-radius: 6px;
}

.fdb-month {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #e12454;
    line-height: 1;
}

.fdb-day {
    font-family: 'Shippori Mincho', serif;
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.fdb-year {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 1px;
    line-height: 1;
}

/* ── Body column ──────────────────────────────────────── */
.festival-body {
    flex: 1;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.festival-category {
    align-self: flex-start;
    padding: 3px 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e12454;
    border: 1.5px solid rgba(225,36,84,0.4);
    border-radius: 20px;
    background: rgba(225,36,84,0.05);
}

.festival-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.festival-card:hover .festival-name {
    color: #e12454;
}

/* meta rows: icon + text */
.festival-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fmeta-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #5A7A8C;
    font-weight: 500;
}

.fmeta-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: rgba(225,36,84,0.7);
}

.festival-summary {
    font-size: 14px;
    color: #6F8BA4;
    line-height: 1.9;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.festival-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #223a66;
    border: 2px solid rgba(34,58,102,0.28);
    border-radius: 4px;
    pointer-events: none;
    transition: color 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, gap 0.25s ease;
    margin-top: 4px;
}

.festival-card:hover .festival-cta {
    color: #fff;
    background: #e12454;
    border-color: #e12454;
    gap: 14px;
}

/* ── Responsive ───────────────────────────────────────── */
@media screen and (max-width: 767px) {
    .festival-card {
        flex-direction: column;
        border-left: none;
        border-top: 4px solid #e12454;
    }

    .festival-img {
        width: 100%;
        height: 220px;
    }

    .festival-body {
        padding: 28px 24px;
    }

    .festival-name { font-size: 20px; }
}

@media screen and (min-width: 768px) {
    .festival-img { width: 320px; }
}

@media screen and (min-width: 1200px) {
    .festival-img { width: 380px; }
    .festival-name { font-size: 28px; }
    .festival-body { padding: 40px 48px; }
}

/* ── Festival layout (main + sidebar) ────────────────── */
.festival-layout {
    display: flex;
    gap: 40px;
}

.festival-main {
    flex: 1;
    min-width: 0;
}

.festival-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.festival-sidebar-sticky {
    position: sticky;
    top: 100px;
}

/* ── Calendar widget ──────────────────────────────────── */
.cal-widget {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(34,58,102,0.12);
    border-top: 3px solid #e12454;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, #223a66 0%, #2c5f7a 100%);
}

.cal-month-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.cal-nav {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cal-nav:hover {
    background: rgba(225,36,84,0.45);
    border-color: rgba(225,36,84,0.7);
}

.cal-body {
    padding: 16px 14px 12px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.cal-day-name {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6F8BA4;
    padding: 4px 0 8px;
}

.cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    color: #223a66;
    position: relative;
    gap: 2px;
    transition: background 0.2s ease, color 0.2s ease;
}

.cal-empty {
    background: transparent;
}

.cal-today {
    outline: 2px solid #223a66;
    outline-offset: -2px;
    font-weight: 700;
}

.cal-festival {
    background: rgba(225,36,84,0.12);
    color: #e12454;
    font-weight: 700;
    cursor: pointer;
    animation: cal-pulse 2.6s ease-in-out infinite;
}

.cal-festival:hover {
    background: rgba(225,36,84,0.22);
}

@keyframes cal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225,36,84,0.0); }
    50%       { box-shadow: 0 0 0 5px rgba(225,36,84,0.15); }
}

.cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e12454;
    flex-shrink: 0;
}

/* ── Hover info bar ───────────────────────────────────── */
.cal-hint {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(34,58,102,0.05);
    border: 1px solid rgba(34,58,102,0.1);
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.cal-hint-active {
    background: rgba(225,36,84,0.07);
    border-color: rgba(225,36,84,0.25);
}

.cal-hint-icon {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    color: #e12454;
    flex-shrink: 0;
    line-height: 1;
}

.cal-hint-text {
    font-size: 12px;
    font-weight: 600;
    color: #223a66;
    line-height: 1.4;
}

.cal-hint-idle {
    font-size: 11px;
    color: #6F8BA4;
    font-style: italic;
}

/* ── Legend ───────────────────────────────────────────── */
.cal-legend {
    border-top: 1px solid rgba(34,58,102,0.08);
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cal-legend-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cal-legend-date {
    font-size: 11px;
    font-weight: 800;
    color: #e12454;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 34px;
}

.cal-legend-date--ended { color: #b0b8cc; }

.cal-legend-name {
    font-size: 12px;
    color: #5A7A8C;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Festival page responsive ─────────────────────────── */
@media screen and (max-width: 959px) {
    .festival-layout {
        flex-direction: column-reverse;
    }

    .festival-sidebar {
        width: 100%;
    }

    .festival-sidebar-sticky {
        position: static;
    }

    .cal-widget {
        max-width: 400px;
        margin: 0 auto;
    }
}

/*------------------------------------------------------------
# teams-page
------------------------------------------------------------*/
.teams-page {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

.teams-page-header {
    background-image: url("images/hihi.jpg");
}

.teams-section {
    padding: 80px 0 0px;
}

.teams-section-oversea {
    padding-top: 0px;
}

/* flag emoji avatar */
.team-avatar-flag {
    font-size: 32px;
    line-height: 1;
}
.team-avatar-flag-lg {
    font-size: 44px;
}

/* ── Grid ─────────────────────────────────────────────────── */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}

@media screen and (min-width: 480px) {
    .teams-grid { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (min-width: 640px) {
    .teams-grid { grid-template-columns: repeat(5, 1fr); }
}

@media screen and (min-width: 860px) {
    .teams-grid { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (min-width: 1100px) {
    .teams-grid { grid-template-columns: repeat(7, 1fr); }
}

@media screen and (min-width: 1400px) {
    .teams-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ── Team card ─────────────────────────────────────────────── */
.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
    outline: none;
}

.team-card:hover {
    transform: translateY(-6px);
    background: rgba(34,58,102,0.06);
}

.team-card-selected {
    background: rgba(225,36,84,0.07);
    transform: translateY(-6px);
}

.team-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team-card:hover .team-avatar,
.team-card-selected .team-avatar {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

.team-selected-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2.5px solid #e12454;
    animation: ring-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ring-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.1); }
}

.team-card-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    font-weight: 700;
    color: #223a66;
    text-align: center;
    line-height: 1.35;
    letter-spacing: 0.02em;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.22s ease;
}
.team-card-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 75%;
    height: 1.5px;
    background: #e12454;
    border-radius: 2px;
    transition: transform 0.25s ease;
}
.team-card:hover .team-card-name,
.team-card-selected .team-card-name {
    color: #e12454;
}
.team-card:hover .team-card-name::after,
.team-card-selected .team-card-name::after {
    transform: translateX(-50%) scaleX(1);
}

.team-avatar-img {
    overflow: hidden;
    padding: 0;
}

.team-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-skeleton {
    pointer-events: none;
    min-height: 120px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 12px;
}

.teams-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #5A7A8C;
    padding: 40px 0;
}

.team-card-city {
    font-size: 11px;
    color: #6F8BA4;
    text-align: center;
}
.team-card-kana {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c9932a;
    background: rgba(201, 147, 42, 0.08);
    border: 1px solid rgba(201, 147, 42, 0.28);
    border-radius: 20px;
    padding: 1px 8px;
    margin-top: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Inline row-expander slot ─────────────────────────────── */
.team-detail-slot {
    grid-column: 1 / -1;
    max-height: 0;
/*     overflow: hidden; */
    transition: max-height 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-detail-slot.team-detail-open {
    max-height: 540px;
}

/* ── Per-team expansion card ──────────────────────────────── */
/* background-image, background-size, background-position and box-shadow set via inline style per team */
.team-detail-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 14px 0 18px;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.32s ease 0.12s, transform 0.32s ease 0.12s;
}

/* Dark readability overlay — heavier left where text sits, fades right */
.team-detail-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.65) 55%,
        rgba(0, 0, 0, 0.28) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Element kanji watermark (bottom-right, faint) */
.team-detail-inner::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -18px;
    font-family: 'Shippori Mincho', serif;
    font-size: 120px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.07);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    user-select: none;
}
.team-detail-inner[data-element="kim"]::after { content: '金'; color: rgba(255,255,220,0.10); }
.team-detail-inner[data-element="moc"]::after { content: '木'; }
.team-detail-inner[data-element="thuy"]::after { content: '水'; font-size: 130px; }
.team-detail-inner[data-element="hoa"]::after { content: '火'; font-size: 138px; bottom: -26px; }
.team-detail-inner[data-element="tho"]::after { content: '土'; color: rgba(255,255,255,0.09); }

.team-detail-slot.team-detail-open .team-detail-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Left frosted accent strip */
.team-detail-accent {
    width: 7px;
    align-self: stretch;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.20);
    position: relative;
    z-index: 1;
}

.team-detail-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
    box-shadow: 0 6px 24px rgba(0,0,0,0.30), 0 0 0 3px rgba(255,255,255,0.25);
    border: none;
    flex-shrink: 0;
    margin: 0 28px 0 24px;
    position: relative;
    z-index: 1;
}

.team-detail-body {
    flex: 1;
    min-width: 0;
    padding: 28px 48px 28px 0;
    position: relative;
    z-index: 1;
}

.team-detail-badge {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.team-detail-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.9);
}

.team-detail-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.85;
    margin: 0 0 18px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.team-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-bottom: 20px;
}

.tdm-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tdm-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    flex-shrink: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.tdm-value {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.tdm-value a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
}
.tdm-value a:hover {
    text-decoration-color: #fff;
}

/* ── "Album & Ảnh" button ───────────────────────────────────── */
.team-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #e12454 0%, #c9932a 100%);
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(225,36,84,0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-album-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(225,36,84,0.42);
}

.team-album-btn svg {
    width: 16px;
    height: 16px;
}

/* ── Close button (glass, for colored card bg) ──────────────── */
.team-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(255,255,255,0.28);
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: none;
    z-index: 2;
}

.team-detail-close:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}

/* ── Slot responsive ───────────────────────────────────────── */
@media screen and (max-width: 639px) {
    .team-detail-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .team-detail-accent {
        width: 100%;
        height: 6px;
        align-self: auto;
        background: rgba(255,255,255,0.20);
    }

    .team-detail-avatar {
        margin: 20px 0 0 16px;
        width: 80px;
        height: 80px;
        font-size: 24px;
        z-index: 1;
        position: relative;
    }

    .team-detail-body {
        padding: 16px 16px 24px;
    }

    .team-detail-slot.team-detail-open { max-height: 760px; }
    .team-detail-name  { font-size: 20px; }
    .team-detail-meta  { flex-direction: column; gap: 8px; }
}

/* ──────────────────────────────────────────────────────────────
   Team Album Modal
────────────────────────────────────────────────────────────── */
.team-album-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-album-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 28, 0.82);
    backdrop-filter: blur(6px);
    cursor: zoom-out;
}

.team-album-panel {
    position: relative;
    z-index: 1;
    width: 92vw;
    max-width: 860px;
    max-height: 88vh;
    background: #f8fafc;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,0.4);
    animation: albumPanelIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

@keyframes albumPanelIn {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.team-album-hdr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    flex-shrink: 0;
}

.team-album-hdr-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.team-album-hdr-info {
    flex: 1;
    min-width: 0;
}

.team-album-hdr-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.team-album-hdr-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.72);
    letter-spacing: 1px;
    margin-top: 2px;
}

.team-album-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.team-album-panel-close:hover {
    background: rgba(255,255,255,0.32);
}

.team-album-body {
    overflow-y: auto;
    padding: 28px 28px 36px;
    flex: 1;
}

.team-album-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    color: #223a66;
    margin-bottom: 18px;
}

.team-album-section-title + .gallery-video-wrap {
    margin-bottom: 36px;
}

.tas-icon {
    font-size: 18px;
    line-height: 1;
}

.tas-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #6F8BA4;
    letter-spacing: 1px;
}

.team-album-section-title + .gallery-grid {
    margin-bottom: 8px;
}

/* ──────────────────────────────────────────────────────────────
   Gallery Components (video slideshow + photo grid + lightbox)
────────────────────────────────────────────────────────────── */
.gallery-video-wrap {
    text-align: center;
    margin-bottom: 36px;
}

.gallery-video-slideshow {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
}

.gallery-video-frame {
    position: relative;
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(210,100,140,0.3);
    box-shadow: 0 0 0 4px rgba(210,100,140,0.08), 0 12px 36px rgba(0,0,0,0.22);
    aspect-ratio: 16 / 9;
    background: #0c1220;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.gallery-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.gallery-vid-nav {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(225,36,84,0.10);
    border: 2px solid rgba(225,36,84,0.28);
    color: #e12454;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 9px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.gallery-vid-nav:hover {
    background: #e12454;
    border-color: #e12454;
    color: #fff;
    transform: scale(1.1);
}

.gallery-video-info {
    max-width: 100%;
    margin: 14px auto 0;
    text-align: center;
}

.gallery-video-info h4 {
    font-size: 1rem;
    color: #223a66;
    margin-bottom: 4px;
    font-family: 'Shippori Mincho', serif;
}

.gallery-video-info p {
    font-size: 13px;
    color: #6F8BA4;
    margin: 0;
}

.gallery-vid-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.gallery-vid-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(34,58,102,0.2);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}

.gallery-vid-dot.active {
    background: #e12454;
    transform: scale(1.4);
}

.gallery-vid-dot:hover:not(.active) {
    background: rgba(225,36,84,0.4);
}

/* Photo thumbnail grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    aspect-ratio: 1;
    border: 2px solid rgba(210,100,140,0.18);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}

.gallery-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(225,36,84,0.7) 0%, rgba(34,58,102,0.7) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    color: #fff;
}

.gallery-thumb-overlay span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.88;
}

.gallery-thumb:hover {
    border-color: rgba(210,80,120,0.65);
    box-shadow: 0 6px 20px rgba(210,80,120,0.28);
    transform: translateY(-3px);
}

.gallery-thumb:hover img { transform: scale(1.1); }
.gallery-thumb:hover .gallery-thumb-overlay { opacity: 1; }

/* Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox.active { display: flex; }

.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6,8,20,0.95);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
}

.gallery-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 88vw;
    text-align: center;
    animation: lbIn 0.26s cubic-bezier(.25,.46,.45,.94);
}

@keyframes lbIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1);    }
}

.gallery-lightbox-content img {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid rgba(210,100,140,0.35);
    box-shadow: 0 24px 70px rgba(0,0,0,0.6);
    display: block;
    margin: 0 auto;
}

.gallery-lb-caption {
    margin-top: 14px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
}

.gallery-lb-counter {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 2px;
}

.gallery-lb-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(225,36,84,0.85);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.25s;
    box-shadow: 0 4px 16px rgba(225,36,84,0.4);
}

.gallery-lb-close:hover {
    background: #e12454;
    transform: scale(1.1) rotate(90deg);
}

.gallery-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.gallery-lb-nav:hover {
    background: rgba(225,36,84,0.72);
    border-color: rgba(225,36,84,0.8);
    transform: translateY(-50%) scale(1.1);
}

.gallery-lb-nav.prev { left: 18px; }
.gallery-lb-nav.next { right: 18px; }

@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .team-album-body { padding: 20px 16px 28px; }
    .gallery-vid-nav { width: 34px; height: 34px; font-size: 22px; }
}

/*------------------------------------------------------------
# contact-page
------------------------------------------------------------*/
.contact-pg {
    background: #fff;
}



/* ── Info cards ───────────────────────────────────────────── */
.ctc-info-section {
    padding: 56px 0 48px;
}

.ctc-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ctc-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 12px 40px rgba(34,58,102,0.13);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #e12454 0%, #223a66 100%) 1;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ctc-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 56px rgba(34,58,102,0.18);
}

.ctc-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ctc-icon-circle svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.ctc-info-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e12454;
    margin-bottom: 6px;
}

.ctc-info-val {
    font-size: 14px;
    color: #223a66;
    font-weight: 500;
    line-height: 1.6;
}

/* ── Background section ───────────────────────────────────── */
.ctc-bg-section {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
    padding-top: 0;
}

/* ── Main layout ──────────────────────────────────────────── */
.ctc-main-section {
    padding-top: 48px;
    padding-bottom: 80px;
}

.ctc-main-layout {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.ctc-form-side {
    flex: 1;
    min-width: 0;
}

.ctc-sidebar {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Lead text ────────────────────────────────────────────── */
.ctc-lead {
    font-size: 15px;
    color: #6F8BA4;
    line-height: 1.85;
    margin: 0 0 36px;
}

/* ── Contact form ─────────────────────────────────────────── */
.ctc-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ctc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ctc-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ctc-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #5A7A8C;
    text-transform: uppercase;
}

.ctc-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid rgba(34,58,102,0.16);
    border-radius: 8px;
    font-size: 14px;
    color: #223a66;
    background: #fff;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    box-sizing: border-box;
}

.ctc-input:focus {
    border-color: #e12454;
    box-shadow: 0 0 0 3px rgba(225,36,84,0.1);
}

.ctc-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.7;
}

.ctc-error {
    font-size: 13px;
    color: #e12454;
    font-weight: 600;
    margin: 0;
}

.ctc-form .btn-img-base {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}
.ctc-form .btn-img-base svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Success state ────────────────────────────────────────── */
.ctc-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 48px 40px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid #e12454;
    box-shadow: 0 4px 24px rgba(34,58,102,0.08);
}

.ctc-success-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 48px;
    color: #e12454;
    animation: sep-float 3s ease-in-out infinite;
    line-height: 1;
}

.ctc-success h3 {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
}

.ctc-success p {
    font-size: 14px;
    color: #6F8BA4;
    line-height: 1.85;
    margin: 0;
    max-width: 420px;
}

.ctc-reset-btn {
    margin-top: 4px;
    padding: 11px 28px;
    border: 2px solid rgba(34,58,102,0.25);
    border-radius: 6px;
    background: transparent;
    color: #223a66;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.22s, color 0.22s;
}

.ctc-reset-btn:hover { background: #223a66; color: #fff; border-color: #223a66; }

/* ── Sidebar cards ────────────────────────────────────────── */
.ctc-card {
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px;
    box-shadow: 0 4px 20px rgba(34,58,102,0.08);
}

.ctc-card-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #223a66;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(34,58,102,0.08);
}

.ctc-card-kanji {
    font-size: 18px;
    color: #e12454;
}

.ctc-card-icon-wrap {
    width: 20px;
    height: 20px;
    color: #e12454;
    flex-shrink: 0;
}

.ctc-card-icon-wrap svg { width: 100%; height: 100%; }

/* ── Social grid ──────────────────────────────────────────── */
.ctc-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ctc-social-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ctc-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    text-decoration: none;
    color: #fff;
}

.ctc-social-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ctc-social-icon svg { width: 18px; height: 18px; }

.ctc-social-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Hours ────────────────────────────────────────────────── */
.ctc-hours {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ctc-hour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(34,58,102,0.08);
    font-size: 13px;
}

.ctc-hour-day { color: #5A7A8C; font-weight: 500; }

.ctc-hour-time { color: #223a66; font-weight: 700; }

.ctc-closed { color: rgba(225,36,84,0.7); }

/* ── FAQ accordion ────────────────────────────────────────── */
.ctc-faqs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ctc-faq-item {
    border-bottom: 1px solid rgba(34,58,102,0.08);
}

.ctc-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #223a66;
    cursor: pointer;
    line-height: 1.5;
    transition: color 0.2s;
}

.ctc-faq-q:hover { color: #e12454; }
.ctc-faq-open .ctc-faq-q { color: #e12454; }

.ctc-faq-arrow {
    font-size: 18px;
    font-weight: 300;
    color: #e12454;
    flex-shrink: 0;
    line-height: 1.2;
}

.ctc-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ctc-faq-open .ctc-faq-a {
    max-height: 180px;
}

.ctc-faq-a p {
    font-size: 12px;
    color: #6F8BA4;
    line-height: 1.8;
    padding: 0 0 14px;
    margin: 0;
}

/* ── Map ──────────────────────────────────────────────────── */
.ctc-map-section {
    padding-bottom: 0;
}

.ctc-map-section .entry-title {
    margin-bottom: 48px;
}

.ctc-map-wrap {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.ctc-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: grayscale(15%) contrast(1.05);
}

.ctc-map-overlay-card {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5,2,15,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(225,36,84,0.4);
    border-radius: 10px;
    padding: 18px 28px;
    text-align: center;
    pointer-events: none;
}

.ctc-map-card-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ctc-map-card-addr {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 6px;
}

.ctc-map-card-date {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e12454;
}

/* ── Responsive ───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
    .ctc-info-cards {
        grid-template-columns: 1fr;
    }

    .ctc-info-section {
        margin-top: -40px;
    }

    .ctc-main-layout {
        flex-direction: column;
    }

    .ctc-sidebar {
        width: 100%;
    }

    .ctc-row {
        grid-template-columns: 1fr;
    }

    .ctc-submit-btn {
        align-self: stretch;
        justify-content: center;
    }

    .ctc-map-wrap { height: 300px; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .ctc-info-cards {
        grid-template-columns: 1fr;
    }

    .ctc-main-layout {
        flex-direction: column;
    }

    .ctc-sidebar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/*------------------------------------------------------------
# products-page
------------------------------------------------------------*/
.products-page {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}



.products-section {
    padding: 80px 0 20px;
}

/* ── Product grid ─────────────────────────────────────────── */
.ppg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 60px;
}

@media screen and (min-width: 640px)  { .ppg-grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (min-width: 992px)  { .ppg-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Product card ─────────────────────────────────────────── */
.ppg-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(34,58,102,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ppg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(34,58,102,0.14);
}

.ppg-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.ppg-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.85);
    transition: transform 0.42s ease;
}

.ppg-card:hover .ppg-img-wrap img {
    transform: scale(1.06);
}

.ppg-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(34,58,102,0.45) 100%);
    pointer-events: none;
}

.ppg-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
    border-radius: 20px;
}

/* ── Card body ────────────────────────────────────────────── */
.ppg-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ppg-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e12454;
}

.ppg-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
    line-height: 1.4;
}

.ppg-desc {
    font-size: 12px;
    color: #6F8BA4;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.ppg-price {
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    font-weight: 700;
    color: #e12454;
    letter-spacing: -0.5px;
}

/* ── Quantity + add row ───────────────────────────────────── */
.ppg-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.ppg-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(34,58,102,0.18);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.ppg-qty-btn {
    width: 32px;
    height: 34px;
    background: rgba(34,58,102,0.04);
    border: none;
    color: #223a66;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease;
}

.ppg-qty-btn:hover { background: rgba(225,36,84,0.08); color: #e12454; }

.ppg-qty-input {
    width: 38px;
    height: 34px;
    border: none;
    border-left: 1.5px solid rgba(34,58,102,0.12);
    border-right: 1.5px solid rgba(34,58,102,0.12);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #223a66;
    outline: none;
    -moz-appearance: textfield;
}

.ppg-qty-input::-webkit-inner-spin-button,
.ppg-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.ppg-add-btn {
    flex: 1;
    height: 34px;
    border: 2px solid rgba(34,58,102,0.22);
    border-radius: 6px;
    background: transparent;
    color: #223a66;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    white-space: nowrap;
}

.ppg-add-btn:hover {
    background: #223a66;
    color: #fff;
    border-color: #223a66;
}

.ppg-add-btn.ppg-added {
    background: #1a7a6b;
    color: #fff;
    border-color: #1a7a6b;
}

/* ── Floating cart button ─────────────────────────────────── */
.cart-fab {
    position: fixed;
    bottom: 36px;
    right: 36px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #223a66 0%, #2c5f7a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 24px rgba(34,58,102,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cart-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 36px rgba(34,58,102,0.4);
}

.cart-fab.cart-fab-active {
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
}

.cart-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e12454;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes cart-fab-jolt {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.32); }
    50%  { transform: scale(0.88); }
    75%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}
.cart-fab.cart-fab-jolt {
    animation: cart-fab-jolt 0.48s cubic-bezier(.36,.07,.19,.97) both;
}

.cart-fab-toast {
    position: fixed;
    bottom: 46px;
    right: 106px;
    background: linear-gradient(135deg, #223a66 0%, #2c5f7a 100%);
    color: #fff;
    padding: 11px 18px;
    border-radius: 28px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(34,58,102,0.28);
    cursor: pointer;
    z-index: 901;
    animation: cart-toast-in 0.28s ease forwards;
    letter-spacing: 0.01em;
}
.cart-fab-toast-cta {
    color: #f7a8bc;
    font-weight: 700;
}
@keyframes cart-toast-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Cart overlay ─────────────────────────────────────────── */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,2,15,0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.cart-overlay.cart-overlay-show {
    opacity: 1;
    pointer-events: auto;
}

/* ── Cart drawer ──────────────────────────────────────────── */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 400px;
    max-width: 100vw;
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 48px rgba(34,58,102,0.18);
}

.cart-drawer-open {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(34,58,102,0.1);
    flex-shrink: 0;
}

.cart-drawer-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #e12454;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.cart-close-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgba(34,58,102,0.2);
    border-radius: 50%;
    background: transparent;
    color: #6F8BA4;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.cart-close-btn:hover { background: rgba(225,36,84,0.1); color: #e12454; border-color: rgba(225,36,84,0.4); }

.cart-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #5A7A8C;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
}

.cart-back-btn:hover { color: #e12454; }

/* ── Cart items ───────────────────────────────────────────── */
.cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(34,58,102,0.07);
}

.cart-item-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.cart-item-body {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #223a66;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-unit {
    font-size: 12px;
    color: #6F8BA4;
    margin-bottom: 8px;
}

.cart-item-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid rgba(34,58,102,0.15);
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}

.cart-item-qty-ctrl button {
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(34,58,102,0.04);
    color: #223a66;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.cart-item-qty-ctrl button:hover { background: rgba(225,36,84,0.1); color: #e12454; }

.cart-item-qty-ctrl span {
    width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #223a66;
    border-left: 1.5px solid rgba(34,58,102,0.12);
    border-right: 1.5px solid rgba(34,58,102,0.12);
    line-height: 26px;
}

.cart-item-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.cart-item-del {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #aac;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.cart-item-del:hover { color: #e12454; }

.cart-item-subtotal {
    font-size: 14px;
    font-weight: 700;
    color: #223a66;
}

/* ── Cart footer ──────────────────────────────────────────── */
.cart-footer {
    padding: 18px 24px 28px;
    border-top: 1px solid rgba(34,58,102,0.1);
    flex-shrink: 0;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #223a66;
}

.cart-grand-total {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    font-weight: 700;
    color: #e12454;
}

.cart-ship-note {
    font-size: 11px;
    color: #6F8BA4;
    margin: 0 0 14px;
    font-style: italic;
}

.btn-to-checkout {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.btn-to-checkout:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Cart empty ───────────────────────────────────────────── */
.cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
}

.cart-empty-icon { font-size: 48px; }

.cart-empty p {
    color: #6F8BA4;
    font-size: 15px;
}

.btn-drawer-continue {
    padding: 11px 28px;
    border: 2px solid rgba(34,58,102,0.25);
    border-radius: 6px;
    background: transparent;
    color: #223a66;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.22s, color 0.22s;
}

.btn-drawer-continue:hover { background: #223a66; color: #fff; border-color: #223a66; }

/* ── Checkout view ────────────────────────────────────────── */
.co-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 32px;
}

.co-summary {
    background: rgba(34,58,102,0.04);
    border: 1px solid rgba(34,58,102,0.1);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 24px;
}

.co-summary-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5A7A8C;
    margin-bottom: 12px;
}

.co-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(34,58,102,0.1);
}

.co-s-name {
    font-size: 12px;
    color: #223a66;
    font-weight: 500;
}

.co-s-qty { color: #6F8BA4; font-weight: 400; }

.co-s-sub {
    font-size: 12px;
    color: #223a66;
    font-weight: 700;
    flex-shrink: 0;
}

.co-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #223a66;
}

.co-total-price {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    color: #e12454;
}

/* ── Contact form ─────────────────────────────────────────── */
.co-form-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    color: #223a66;
    margin-bottom: 18px;
}

.co-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.co-label {
    font-size: 11px;
    font-weight: 700;
    color: #5A7A8C;
    letter-spacing: 0.5px;
}

.co-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid rgba(34,58,102,0.18);
    border-radius: 6px;
    font-size: 13px;
    color: #223a66;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.co-input:focus { border-color: #e12454; }

.co-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.6;
}

.co-error {
    font-size: 12px;
    color: #e12454;
    font-weight: 600;
    margin: 4px 0 10px;
}

.btn-place-order {
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.btn-place-order:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Order success ────────────────────────────────────────── */
.cart-success {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 32px;
    text-align: center;
}

.cart-success-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 56px;
    color: #e12454;
    animation: sep-float 3s ease-in-out infinite;
}

.cart-success h3 {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
}

.cart-success p {
    font-size: 14px;
    color: #6F8BA4;
    line-height: 1.8;
    max-width: 300px;
    margin: 0;
}

/*------------------------------------------------------------
# site-footer
------------------------------------------------------------*/
.site-footer {
    position: relative;
    padding: 40px 0 30px;
    background: url(images/bottom-cover.jpg) no-repeat;
    background-size: cover;
}

.site-footer::before {
    position: absolute;
    content: " ";
    height: 100%;
    width: 100%;
    z-index: 3;
    background: hsla(0, 0%, 5%, 0.7);
    top: 0;
    left: 0;
}

.site-footer .footer-cover-title {
    min-height: 480px;
    width: 100%;
}

.site-footer .footer-cover-title h2 {
    font-size: 20vw;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    text-align: center;
    color: hsl(0, 0%, 100%);
    mix-blend-mode: overlay;
    z-index: 2;
}

/*------------------------------------------------------------
## .site-footer footer-content-wrapper
------------------------------------------------------------*/
.footer-content-wrapper {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 4;
    top: 130px;
    left: 0;
    padding: 6px 0;
    text-align: center;
}

.footer-content-wrapper .flex {
    flex-direction: column;
}

.footer-content-wrapper .entry-title {
    text-align: center;
    margin-top: 25px;
}

.footer-content-wrapper .entry-title a {
    font-size: 52px;
    font-weight: 700;
    color: hsl(0, 0%, 100%);
    line-height: 1;
    text-decoration: none;
}

@media screen and (min-width: 576px) {
    .footer-content-wrapper .entry-title a {
        font-size: 100px;
    }
}

.footer-content-wrapper .entry-mail {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    color: hsl(0, 0%, 100%);
}

.footer-content-wrapper .entry-mail a {
    text-decoration: none;
    color: hsl(0, 0%, 100%);
}

.footer-content-wrapper .copyright-info {
    margin-top: 20px;
    font-size: 12px;
    color: hsl(0, 0%, 100%);
}

.footer-content-wrapper .footer-social {
    margin-top: 32px;
}

/* ── Hold-to-unlock julanove link ── */
.jula-hold {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* "hold me 🫳" tooltip on hover */
.jula-hold::before {
    content: '🫳';
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(12, 5, 22, 0.93);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(225,36,84,0.4);
    z-index: 10;
}
.jula-hold::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(225,36,84,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}
.jula-hold:hover:not(.jula-hold--active):not(.jula-hold--done)::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.jula-hold:hover:not(.jula-hold--active):not(.jula-hold--done)::after {
    opacity: 1;
}

.jula-ring {
    position: absolute;
    width: 34px;
    height: 34px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.jula-hold--active .jula-ring,
.jula-hold--done .jula-ring {
    opacity: 1;
}

.jula-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 2.5;
}

.jula-ring-fill {
    fill: none;
    stroke: #e12454;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.jula-hold--active .jula-ring-fill {
    filter: drop-shadow(0 0 3px rgba(225,36,84,0.8));
}

.jula-hold-text {
    color: #e12454;
    transition: color 0.15s ease, letter-spacing 0.15s ease, transform 0.2s ease;
}

.jula-hold:hover:not(.jula-hold--active) .jula-hold-text {
    color: #ff6b8a;
}

.jula-hold--active .jula-hold-text {
    color: #e12454;
    letter-spacing: 1px;
}

.jula-hold--done .jula-hold-text {
    animation: jula-pop 0.5s cubic-bezier(.17,.89,.32,1.27) forwards;
}

@keyframes jula-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5); filter: brightness(1.8); }
    100% { transform: scale(1); }
}

/* Percentage counter */
.jula-pct {
    font-size: 10px;
    font-family: monospace;
    font-weight: 700;
    color: #e12454;
    letter-spacing: 0.5px;
    min-width: 26px;
    opacity: 0.9;
    animation: jula-pct-in 0.12s ease;
}

@keyframes jula-pct-in {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 0.9; transform: translateX(0); }
}

.footer-content-wrapper .footer-social .flex {
    flex-direction: row !important;
}

.footer-content-wrapper .footer-social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-content-wrapper .footer-social ul a {
    padding: 5px 16px;
    font-size: 12px;
    color: hsl(0, 0%, 100%);
}

/*------------------------------------------------------------
# about-us
------------------------------------------------------------*/
.about-us {
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

/*------------------------------------------------------------
## Page Header
------------------------------------------------------------*/
.page-header {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    /* background: url("images/bg/bg-2.jpg") center 40%/cover no-repeat fixed; */
}
@media (max-width: 767px) {
    .page-header { background-attachment: scroll; }
}

.page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5,2,15,0.5)  0%,
        rgba(5,2,15,0.15) 40%,
        rgba(5,2,15,0.72) 100%
    );
    z-index: 0;
}

.page-header-body {
    position: relative;
    z-index: 1;
    padding-bottom: 56px;
    padding-top: 140px;
}

.page-header .entry-meta-date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(232,213,163,0.9);
    margin-bottom: 12px;
}

.page-header-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 5px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.5);
    margin: 0 0 20px;
    line-height: 1.2;
}

@media screen and (min-width: 992px) {
    .page-header-title { font-size: 80px; }
}

.page-header .breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.page-header .breadcrumbs li {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    padding-right: 18px;
    position: relative;
}

.page-header .breadcrumbs li::after {
    content: '/';
    position: absolute;
    right: 6px;
    color: rgba(255,255,255,0.3);
    font-size: 11px;
}

.page-header .breadcrumbs li:last-child::after { display: none; }

.page-header .breadcrumbs li a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-header .breadcrumbs li a:hover { color: #fff; }

/*------------------------------------------------------------
## About main content
------------------------------------------------------------*/
.about-main-content {
    padding: 80px 0 72px;
}

.about-text-cols {
    margin-top: 56px;
}

.about-text-cols h3 {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: #223a66;
    margin: 0 0 20px;
}

.about-text-cols p {
    font-size: 15px;
    color: #6F8BA4;
    line-height: 2;
    margin: 0;
}

@media screen and (min-width: 992px) {
    .about-text-cols .col-lg-6:last-child { padding-left: 48px; }
}

.about-cover-image {
    margin: 64px 0 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(34,58,102,0.14);
}

.about-cover-image img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.about-cover-image:hover img { transform: scale(1.02); }

/*------------------------------------------------------------
## Milestones
------------------------------------------------------------*/
.about-milestones {
    padding: 80px 0;
}

.about-milestones .entry-title {
    margin-bottom: 56px;
}

.milestones-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.milestone-item {
    flex: 1 1 160px;
    max-width: 220px;
    text-align: center;
    padding: 32px 16px;
    position: relative;
}

.milestone-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(225,36,84,0.3), transparent);
}

.milestone-item:last-child::after { display: none; }

.milestone-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.milestone-number .start-counter,
.milestone-suffix {
    font-family: 'Shippori Mincho', serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #e12454;
}

.milestone-label {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5A7A8C;
}

@media screen and (max-width: 767px) {
    .milestone-item { flex-basis: 45%; }
    .milestone-item::after { display: none; }
    .milestone-number .start-counter,
    .milestone-suffix { font-size: 48px; }
}

/*------------------------------------------------------------
## Testimonials
------------------------------------------------------------*/
.testimonial-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #080412 0%, #1a2a50 55%, #2c1525 100%);
}

.testimonials-container,
.testimonial-featured-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonials-container {
    padding-bottom: 80px;
}

.testimonial-content-wrap {
    padding: 80px 40px 60px;
}

.testimonial-content-wrap .user-avatar {
    width: 56px;
    height: 56px;
    margin-right: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(225,36,84,0.5);
    flex-shrink: 0;
}

.testimonial-content-wrap .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-content {
    width: calc(100% - 80px);
}

.testimonial-content-wrap .entry-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 32px;
}

.testimonial-content-wrap .entry-content p {
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,0.82);
    line-height: 2;
}

.testimonial-content-wrap .entry-footer {
    margin-top: 32px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.testimonial-content-wrap .entry-footer a {
    color: rgba(232,213,163,0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.testimonial-content-wrap .entry-footer a:hover { color: #fff; }

/* Swiper nav — reuse slider-nav-btn from homepage */
.testimonials-container .swiper-button-next {
    top: auto;
    bottom: 24px;
    right: 40px;
    width: 56px;
    height: 56px;
    background: transparent;
}

.testimonials-container .swiper-button-next::after { display: none !important; }

.testimonials-container .swiper-pagination-bullets {
    bottom: 32px;
    left: 40px;
    right: auto;
    width: auto;
    text-align: left;
}

.testimonials-container .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    opacity: 1;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.testimonials-container .swiper-pagination-bullet-active {
    background: #e12454;
    border-color: #e12454;
}

.testimonial-featured-image {
    display: none;
}

.testimonial-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (min-width: 992px) {
    .testimonials-container,
    .testimonial-featured-image { width: 50%; }

    .testimonial-featured-image { display: block; }

    .testimonial-content-wrap { padding: 100px 60px 100px 60px; }

    .testimonials-container .swiper-button-next {
        bottom: 40px;
        right: 40px;
    }
}

@media screen and (min-width: 1200px) {
    .testimonial-content-wrap { padding: 120px 80px 120px 80px; }

    .testimonial-content-wrap .entry-title { font-size: 36px; }
}

/*------------------------------------------------------------
# tickets-page
------------------------------------------------------------*/
.tickets-page {
    background: url("images/elements-total-background.jpg") no-repeat;
    width: 100%;
    height: 100%;
}

/*------------------------------------------------------------
# Page Header
------------------------------------------------------------*/
.tickets-page .page-header {
    background: url("images/tickets-page-header-background.jpg") no-repeat;
}

.tickets-page .tabs {
    margin-top: 80px;
}

.tickets-page .tabs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tickets-page .tabs .active {
    background: -webkit-linear-gradient(#00d0ff, #25ffbf) !important;
}

.tabs .tab-nav {
    padding: 10px 10px;
    margin-right: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: #040608;
    cursor: pointer;
}

.tabs .tab-nav:hover {
    background: -webkit-linear-gradient(#00d0ff, #25ffbf) !important;
}

.tickets-page .tabs .tabs-container {
    margin-top: 5px;
    box-shadow: 13px 26px 139px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.tickets-page .tabs .tab-content {
    padding: 48px 15px;
    color: #989898;
    font-size: 15px;
    line-height: 1.8;
}

@media screen and (min-width: 576px){
    .tabs .tab-nav {
        padding: 20px;
    }
}

@media screen and (min-width: 992px){
    .tabs .tab-content {
        padding: 48px;
    }

    .tabs .tab-nav {
        padding: 20px 60px;
        margin-right: 10px;
        font-size: 15px;
    }
}

.tickets-page .single-event-details-row {
    margin-bottom: 30px;
}

.tickets-page .single-event-details-row:nth-last-of-type(1) {
    margin-bottom: 0;
}

.single-event-details,
.single-event-details a,
.single-event-details label {
    font-size: 18px;
    font-weight: 500;
    color: #040608;
}

.single-event-details label {
    display: block;
    margin-bottom: 0;
    color: #232127;
}

.single-event-details p,
.single-event-details a {
    color: #989898;
}

.single-event-details-row p.sold-out {
    color: #040608;
}

.single-event-details-row p.sold-out span{
    color: #ff0000;
}

.single-event-map {
    width: 100%;
    margin-top: 30px;
}

.single-event-map iframe {
    width: 100%;
    height: 460px;
}

@media screen and (min-width: 768px) {
    .tickets-page .single-event-heading {
        width: auto;
    }

    .single-event-details {
        width: 220px;
    }

    .single-event-map {
        width: calc(100% - 220px);
        margin: 0;
    }

    .event-tickets {
        padding: 40px;
    }
}

@media screen and (min-width: 992px) {
    .single-event-details {
        width: 340px;
    }

    .single-event-map {
        width: calc(100% - 340px);
        margin: 0;
    }

    .event-tickets .ticket-row {
        margin-bottom: 15px;
    }

    .ticket-type {
        width: calc(100% - 400px);
        margin-bottom: 0;
    }

    .event-tickets .number-of-ticket {
        margin-bottom: 0;
    }
}

.tickets-page .event-tickets {
    padding: 72px 48px;
    background: #fff;
    box-shadow: 13px 26px 139px rgba(0, 0, 0, 0.1);
}

.tickets-page .event-tickets .ticket-row {
    background: #f4f6f7;
    margin-bottom: 15px;
}

.tickets-page .event-tickets .ticket-row .ticket-type {
    padding: 15px 24px;
    margin-right: 15px;
}

.tickets-page .event-tickets .ticket-row .entry-title {
    font-size: 18px;
    font-weight: 500;
    color: #03070c;
    width: 235px;
    margin: 0;
    padding: 0;
}

.tickets-page .main-content .event-tickets .ticket-type span {
    font-size: 16px;
    font-weight: 500;
    color: #989898;
    margin: 0;
    padding: 0;
    width: 300px;
}

.tickets-page .main-content .event-tickets .ticket-price {
    font-size: 18px;
    font-weight: 500;
    color: #03070c;
    width: 50px;
}

.tickets-page .event-tickets .number-of-tickets {
    width: 120px;
    padding: 15px 24px;
    margin-right: 25px;
}

.tickets-page .number-of-tickets .increase-ticket,
.tickets-page .number-of-tickets .decrease-ticket {
    font-size: 18px;
    font-weight: 500;
    color: #03070c;
    cursor: pointer;
}

.tickets-page .number-of-tickets .ticket-count {
    font-size: 18px;
    font-weight: 400;
    color: #03070c;
    width: 32px;
    border: 0;
    text-align: center;
    background: #f3f8f9;
}

.tickets-page .clear-ticket-count {
    font-size: 16px;
    font-weight: 500;
    color: #989898;
    margin-right: 60px;
    cursor: pointer;
}

.tickets-page .ticket-row .btn {
    background: #f3f8f9;
    width: 100px;
    font-size: 16px;
    font-weight: 500;
    color: #ff2630;
}

/*------------------------------------------------------------
# Blog
------------------------------------------------------------*/
.blog-page {
    width: 100%;
    height: 100%;
    background: url("images/blog-page-background.jpg") no-repeat;
}

/*------------------------------------------------------------
# site-header
------------------------------------------------------------*/
.blog-page .page-header {
    background: url("images/blog-header-background.jpg") no-repeat;
}



.blog-list-page .single-blog-content {
    display: none;
}

.blog-list-page .single-blog-content.visible {
    display: block;
}

.blog-page .blog-list-page .blog-content {
    margin-top: 100px;
    box-shadow: 15px 18px 100px rgba(0, 0, 0, 0.1);
    transition: .35s;
}

.blog-page .blog-list-page .blog-content:hover {
    box-shadow: 15px 18px 100px rgba(0, 0, 0, 0.3);
    transition: .35s;
}

.blog-page .blog-list-page .blog-content .featured-image {
    margin: 0;
    padding: 0;
}

.blog-page .blog-list-page .blog-content .featured-image img {
    max-width: 100%;
    position: relative;
}

.blog-page .blog-list-page .blog-content .box-link-date {
    position: absolute;
    top: 135px;
    left: 0;
    padding: 10px 25px;
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
    cursor: pointer;
}

.blog-page .blog-list-page .blog-content .box-link-date a {
    font-weight: 400;
    color: white;
    text-decoration: none;
}

.blog-page .blog-list-page .blog-content .entry-content {
    padding: 40px 45px;
    background: white;
}

.blog-page .blog-list-page .blog-content .entry-content .entry-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #050505;
}

.blog-page .blog-list-page .blog-content .entry-content .entry-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #050505;
}

.blog-page .blog-list-page .blog-content .entry-content .entry-meta span {
    margin-right: 10px;
}

.blog-page .blog-list-page .blog-content .entry-content .entry-meta span a {
    color: #050505;
}

.blog-page .blog-list-page .blog-content .entry-content .entry-description {
    margin-top: 25px;
    font-size: 15px;
    color: #989898;
    line-height: 2;
}

.blog-page .blog-list-page .load-more {
    margin-top: 115px;
}

.blog-page .blog-list-page .load-more .btn {
    padding: 15px 35px;
    border-radius: 0;
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
    font-weight: 500;
    outline: none;
}

/*------------------------------------------------------------
# contact-page
------------------------------------------------------------*/
.contact-page {
    background: url("images/contact-background-image.jpg") no-repeat;
}

/*------------------------------------------------------------
# site-header
------------------------------------------------------------*/
.contact-page .page-header {
    background: url("images/contact-header-background.jpg") no-repeat;
}

.contact-page .main-content {
    background: #fff;
    box-shadow: 13px 14px 68px rgba(0, 0, 0, 0.1);
}

.contact-page-map {
    width: 100%;
}

.contact-page-map iframe {
    width: 100%;
    height: 660px;
}

.contact-page .contact-details {
    margin-top: 70px;
}

.contact-page .contact-details .contact-medium {
    padding: 0 20px;
}

.contact-page .contact-details .contact-medium .contact-icon {
    padding: 0;
    margin-right: 20px;
}

.contact-page .contact-details .contact-medium .contact-icon img {
    max-width: 100%;
    height: auto;
}

.contact-page .contact-details .contact-medium .entry-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #040608;
}

.contact-page .contact-details .contact-medium .entry-content {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #989898;
}

.contact-page .get-in-touch {
    margin-top: 115px;
    padding: 0 15px;
}


@media screen and (min-width: 992px) {
    .contact-page .get-in-touch {
        padding: 0 100px;
    }
}

.contact-page .get-in-touch .entry-header {
    text-align: center;
}

.contact-page .get-in-touch .entry-title p {
    font-size: 14px;
    font-weight: 500;
    color: #989898;
    margin: 0;
}

.contact-page .get-in-touch .entry-title h2 {
    font-size: 48px;
    font-weight: 600;
    color: #050505;
    margin: 5px 0 0;
}

.contact-page .get-in-touch .entry-content {
    margin-top: 45px;
}

.contact-page .get-in-touch .entry-content p {
    font-size: 15px;
    color: #989898;
    line-height: 2;
    text-align: center;
}

.contact-page .main-content .get-in-touch .contact-form {
    margin-top: 120px;
}

.contact-page .contact-form input[type="text"],
.contact-page .contact-form input[type="email"],
.contact-page .contact-form textarea {
    width: 100%;
    padding: 14px 22px;
    margin-bottom: 30px;
    border: 0;
    background: #f4f6f7;
    color: #050505;
    outline: none;
}

.contact-page .contact-form input[type="text"]::placeholder,
.contact-page .contact-form input[type="email"]::placeholder,
.contact-page .contact-form textarea::placeholder {
    color: #7f7f7f;
    font-style: italic;
}

.contact-page .contact-form .submit {
    margin-top: 15px;
    margin-bottom: 120px;
}

.contact-page .contact-form .submit .btn {
    padding: 15px 30px;
    margin-right: 20px;
    border-radius: 0;
    font-weight: 600;
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
}

/*------------------------------------------------------------
# elements-page
------------------------------------------------------------*/
.elements-page {
    background: url("images/elements-total-background.jpg") no-repeat;
}

.elements-page .page-header {
    background: url("images/elements-header-background.jpg") no-repeat;
}

.elements-page .elements-wrap {
    margin-bottom: 110px;
}

.elements-page .elements-wrap .entry-header h2.entry-title {
    color: #040608;
    font-size: 48px;
    font-weight: 600;
}

.elements-page .elements-wrap h2.entry-title {
    margin-bottom: 90px;
}

.elements-page .elements-wrap .entry-content .btn {
    height: 55px;
    width: 165px;
    padding: 10px 20px;
    margin-right: 20px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: #040608;
}

.elements-page .elements-wrap .entry-content .gradient {
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
}

.elements-page .elements-wrap .entry-content .white {
    background: white;
    box-shadow: 0 13px 50px 9px rgba(0, 0, 0, 0.1);
}

.elements-page .elements-wrap .entry-content .border-blu {
    border: 2px solid #0de7e4;
}

.elements-page .elements-wrap .entry-content .color-border {
    border: 2px solid #0de7e4;
    padding: 6px;
    background: #0de7e4;
    background-clip: content-box;
}

.counter-box {
    text-align: center;
}

.counter-box .start-counter {
    font-size: 60px;
    font-weight: 500;
    color: #040608;
}

.counter-box .start-counter,
.counter-box .counter-k {
    font-size: 60px;
    font-weight: 600;
    color: #040608;
    text-align: center;
}

.counter-box .entry-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #989898;
}


.tabs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabs ul .active {
    background: -webkit-linear-gradient(#00d0ff, #25ffbf) !important;
}

.tabs ul .tab-nav {
    padding: 15px 40px;
    line-height: 1;
    color: #040608;
    font-weight: 600;
    cursor: pointer;
}

.tabs-container {
    background: #f3f8f9;
    box-shadow: 5px 14px 100px rgba(0, 0, 0, 0.1);
}

.tabs-container .tab-content {
    display: block;
    padding: 48px;
    background: #fff;
}

.tabs-container .tab-content .entry-header {
    margin-top: 0;
    font-size: 24px;
    font-weight: 500;
    color: #040608;
}

.tabs-container .tab-content p {
    margin-top: 35px;
    color: #989898;
    font-size: 15px;
    font-weight: 300;
    line-height: 2;
}

.accordion-and-tabs-wrap .accordion-wrap {
    position: relative;
}

.accordion-and-tabs-wrap .accordion-wrap .entry-title {
    width: 445px;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 16px;
    color: #040608;
    cursor: pointer;
}

.accordion-and-tabs-wrap .accordion-wrap .entry-title .arrow-d::before {
    content: "-";
}

/* === Featured Image Hover Effect === */
.featured-image {
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    border: 2.5px solid rgba(210, 100, 140, 0.35);
    box-shadow:
        0 0 0 5px rgba(210, 100, 140, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.12);
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.featured-image:hover {
    border-color: rgba(210, 80, 120, 0.75);
    box-shadow:
        0 0 0 5px rgba(210, 80, 120, 0.2),
        0 10px 30px rgba(210, 80, 120, 0.3);
}

.featured-image img {
    display: block;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.45s ease;
}

.featured-image:hover img {
    transform: scale(1.07);
    filter: brightness(1.06) saturate(1.15);
}

.featured-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(210, 80, 120, 0.22) 0%,
        rgba(255, 170, 80, 0.12) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 1;
}

.featured-image:hover::after {
    opacity: 1;
}

/* keep next-event-slider's text overlay above the pink tint */
.next-event-slider .featured-image .entry-content {
    z-index: 2;
}

.accordion-and-tabs-wrap .accordion-wrap .entry-title .arrow-r::before {
    content: "+";
}

.accordion-and-tabs-wrap .accordion-wrap .active {
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
}

.accordion-and-tabs-wrap .accordion-wrap .entry-content {
    display: none;
    width: 100%;
    height: auto;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 300;
    color: #989898;
    line-height: 2;
}

.accordion-and-tabs-wrap .accordion-wrap .accordion-active {
    display: block;
    margin-top: 0;
}

.circular-progress-bar {
    margin-bottom: 60px;
    text-align: center;
}

.circular-progress-bar .circle {
    position: relative;
    width: 210px;
    height: 210px;
}

.circular-progress-bar .circle strong {
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    font-size: 60px;
    color: #050505;
}

.circular-progress-bar .entry-title {
    position: absolute;
    top: 145px;
    left: 0;
    font-size: 16px;
    font-weight: 600;
    color: #989898;
    text-align: center;
    width: 100%;
}

/*------------------------------------------------------------
# Pattern image button utilities
------------------------------------------------------------*/

.btn-img-base {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: 46px 46px, 46px 46px;
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85),
         0    0   8px rgba(0,0,0,0.6);
    transition: transform 0.25s cubic-bezier(.25,.46,.45,.94),
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.btn-img-base::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 46px 46px, 46px 46px;
    background-position: top right, bottom left;
    background-repeat: no-repeat, no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-img-down {
    background-image: url('images/button-up-pattern.png'), url('images/button-down-pattern.png');
    border: 2px solid rgba(210,100,144,0.65);
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
.btn-img-down:hover::before,
.btn-img-down:focus::before { opacity: 0; }
.btn-img-down:hover,
.btn-img-down:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(210,100,144,0.38);
    border-color: rgba(210,100,144,1);
    color: #fff !important;
    text-decoration: none;
}
.btn-img-down:active { transform: translateY(1px); }

/*------------------------------------------------------------
# Image effect & border utilities
------------------------------------------------------------*/

/* ── img-fx base: position context for all pseudo-element effects ── */
.img-fx {
    position: relative;
    overflow: hidden;
    display: block;
}

/* ── fx-reveal: dark greyscale → full colour on hover ────── */
.img-fx.fx-reveal img {
    filter: grayscale(0.6) brightness(0.6);
    transform: scale(1.06);
    transition: transform 0.5s ease, filter 0.5s ease;
}
.img-fx.fx-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(8,12,30,0.72) 100%);
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.img-fx.fx-reveal:hover img { filter: grayscale(0) brightness(1.08) saturate(1.1); transform: scale(1); }
.img-fx.fx-reveal:hover::after { opacity: 0; }

/* ── bdr-inset-sakura: sakura pink inset glow ─────────────── */
.img-fx.bdr-inset-sakura {
    border: 2px solid rgba(210,100,144,0.4) !important;
    box-shadow: inset 0 0 20px rgba(225,36,84,0.18), 0 8px 28px rgba(210,100,144,0.2) !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.img-fx.bdr-inset-sakura:hover {
    border-color: rgba(210,100,144,0.9) !important;
    box-shadow: inset 0 0 32px rgba(225,36,84,0.32), 0 14px 40px rgba(210,100,144,0.42) !important;
}

/* ── fx-gold: diagonal gold shimmer + warm tint ─────────── */
.img-fx.fx-gold::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 25%, rgba(240,210,140,0.72) 50%, transparent 75%);
    transform: translateX(-140%);
    transition: transform 0.65s ease;
    z-index: 2;
    pointer-events: none;
}

.img-fx.fx-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(210,175,90,0.18);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.img-fx.fx-gold:hover img {
    transform: scale(1.05);
    filter: sepia(0.25) saturate(1.25) brightness(1.06);
}

.img-fx.fx-gold:hover::before { transform: translateX(140%); }
.img-fx.fx-gold:hover::after  { opacity: 1; }

/* ── bdr-sharp: square corners + gold border + navy offset ─ */
.img-fx.bdr-sharp {
    border-radius: 0 !important;
    border: 2px solid rgba(232,213,163,0.7) !important;
    box-shadow: 6px 6px 0 rgba(20,35,90,0.65) !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.img-fx.bdr-sharp img {
    border-radius: 0 !important;
}

.img-fx.bdr-sharp:hover {
    border-color: rgba(232,213,163,1) !important;
    box-shadow: 9px 9px 0 rgba(20,35,90,0.9) !important;
}

/* ── bdr-sharp-sakura: sakura pink border + red offset shadow ─ */
.img-fx.bdr-sharp-sakura {
    border-radius: 0 !important;
    border: 2px solid rgba(210,100,144,0.72) !important;
    box-shadow: 6px 6px 0 rgba(225,36,84,0.6) !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.img-fx.bdr-sharp-sakura img {
    border-radius: 0 !important;
}

.img-fx.bdr-sharp-sakura:hover {
    border-color: rgba(210,100,144,1) !important;
    box-shadow: 9px 9px 0 rgba(225,36,84,0.9) !important;
}

/* keep the hover text overlay above the gold shimmer */
.next-event-slider .featured-image.img-fx .entry-content {
    z-index: 10;
}

.icon-box .entry-header {
    position: relative;
    margin: 0;
}

.icon-box .entry-header::before {
    position: absolute;
    content: "01.";
    top: -18px;
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    background: -webkit-linear-gradient(#00d0ff, #25ffbf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-box .entry-header .entry-title {
    padding-left: 84px;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #050505;
}

.icon-box .entry-content {
    margin-top: 30px;
    color: #989898;
    font-size: 15px;
    line-height: 2;
    word-break: break-all;
}

.icon-box-1 .entry-header::before {
    content: "01.";
}

.icon-box-2 .entry-header::before {
    content: "02.";
}

.icon-box-3 .entry-header::before {
    content: "03.";
}


/*------------------------------------------------------------
# Gallery Page
------------------------------------------------------------*/


.gallery-pg-body {
    background: url('images/jula_background.png') repeat;
    padding: 0 0 60px;
}

.gallery-section {
    padding: 72px 0 56px;
}

.gallery-section-last {
    padding-bottom: 80px;
}

/* ── Sep sakura (reused from global, no extra needed) ─── */

/* ── Section 1: Photographers ───────────────────────────── */
.gal-photog-marquee-wrap {
    overflow: hidden;
    margin-top: 40px;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.gal-photog-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: 20px;
    padding: 10px 0 10px;
    animation: pgMarquee 36s linear infinite;
}

.gal-photog-track:hover { animation-play-state: paused; }

.gal-photog-track--rev {
    animation-name: pgMarqueeRev;
    animation-duration: 44s;
    padding-top: 0;
    padding-bottom: 20px;
}

.gal-photog-item {
    width: 240px;
    flex-shrink: 0;
}

@keyframes pgMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes pgMarqueeRev {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.gal-photog-card {
    background-color: #fff;
    background-image:
        repeating-radial-gradient(circle at 50% 36%, transparent 0px, transparent 20px, rgba(108,63,140,0.05) 20px, rgba(108,63,140,0.05) 21px),
        repeating-radial-gradient(circle at 50% 36%, transparent 0px, transparent 36px, rgba(225,36,84,0.04) 36px, rgba(225,36,84,0.04) 37px),
        linear-gradient(160deg, #ffffff 0%, #f8f4ff 55%, #fff5f8 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0;
    border-radius: 20px;
    padding: 0 0 20px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(34,58,102,0.08), inset 0 -1px 0 rgba(225,36,84,0.05);
    border: 1px solid rgba(225,36,84,0.08);
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.gal-photog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(34,58,102,0.13), inset 0 -1px 0 rgba(225,36,84,0.08);
    background-image:
        radial-gradient(circle, rgba(108,63,140,0.10) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(225,36,84,0.06) 1.5px, transparent 1.5px),
        linear-gradient(160deg, #ffffff 0%, #f3edff 55%, #fff0f5 100%);
    background-size: 22px 22px, 22px 22px, 100% 100%;
    background-position: 0 0, 11px 11px, 0 0;
}

.gal-photog-top {
    height: 76px;
    width: 100%;
    flex-shrink: 0;
}

.gal-photog-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* pull avatar up so it straddles the banner */
    margin: -48px auto 14px;
    /* white ring + gradient outer glow ring */
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 7px rgba(225,36,84,0.25),
        0 8px 24px rgba(0,0,0,0.20);
    position: relative;
    z-index: 1;
    transition: box-shadow 0.28s, transform 0.28s;
}

.gal-photog-card:hover .gal-photog-avatar {
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 8px rgba(225,36,84,0.5),
        0 12px 32px rgba(0,0,0,0.22);
    transform: scale(1.06);
}

.gal-photog-avatar span {
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gal-photog-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.gal-photog-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #223a66;
    margin-bottom: 4px;
    padding: 0 12px;
}

.gal-photog-title {
    font-size: 10px;
    color: #6F8BA4;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 12px;
}

.gal-photog-divider {
    height: 1px;
    background: #f0ecfa;
    margin: 0 0 16px;
}

.gal-photog-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
}

.gal-pg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.gal-pg-icon svg { width: 15px; height: 15px; }

.gal-pg-icon--off  { background: #f5f3fb; color: #d0cde0; cursor: default; }

.gal-pg-icon--ig    { background: #fce8f3; color: #c13584; }
.gal-pg-icon--mail  { background: #fde8ee; color: #e12454; }
.gal-pg-icon--phone { background: #e6f6f2; color: #1a7a6b; }
.gal-pg-icon--fb    { background: #e8f0fd; color: #1877f2; }

.gal-pg-icon--ig:hover    { background: #c13584; color: #fff; transform: scale(1.15); }
.gal-pg-icon--mail:hover  { background: #e12454; color: #fff; transform: scale(1.15); }
.gal-pg-icon--phone:hover { background: #1a7a6b; color: #fff; transform: scale(1.15); }
.gal-pg-icon--fb:hover    { background: #1877f2; color: #fff; transform: scale(1.15); }


/* ── Album filter bar ────────────────────────────────────── */
.gal-filter-bar {
    background: #fff;
    border-radius: 16px;
    padding: 20px 26px;
    margin: 32px 0 0;
    box-shadow: 0 2px 14px rgba(34,58,102,0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}

.gal-filter-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gal-filter-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    font-weight: 700;
    color: #6F8BA4;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.gal-select-box {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gal-select-box select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid rgba(34,58,102,0.18);
    border-radius: 10px;
    padding: 9px 38px 9px 14px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #223a66;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-width: 180px;
}

.gal-select-box select:hover {
    border-color: #2c5f7a;
    background: #fff;
}

.gal-select-box select:focus {
    border-color: #e12454;
    box-shadow: 0 0 0 3px rgba(225,36,84,0.12);
    background: #fff;
}

.gal-select-arrow {
    position: absolute;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6F8BA4;
    border-bottom: 2px solid #6F8BA4;
    transform: rotate(45deg) translateY(-2px);
    pointer-events: none;
    transition: border-color 0.2s;
}

.gal-select-box select:focus ~ .gal-select-arrow {
    border-color: #e12454;
}

.gal-filter-reset {
    border: none;
    background: rgba(225,36,84,0.08);
    color: #e12454;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    align-self: flex-end;
}

.gal-filter-reset:hover {
    background: rgba(225,36,84,0.16);
}

.gal-filter-count {
    font-size: 13px;
    color: #6F8BA4;
    margin: 14px 0 0;
    text-align: right;
}

.gal-filter-count strong {
    color: #223a66;
}

/* ── Searchable select ───────────────────────────────────── */
.gal-ss {
    position: relative;
    min-width: 180px;
}

.gal-ss-trigger {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.gal-ss-input {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid rgba(34,58,102,0.18);
    border-radius: 10px;
    padding: 9px 38px 9px 14px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #223a66;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
}

.gal-ss-input::placeholder { color: #223a66; }

.gal-ss-trigger.open .gal-ss-input {
    border-color: #e12454;
    box-shadow: 0 0 0 3px rgba(225,36,84,0.12);
    background: #fff;
    cursor: text;
}

.gal-ss-trigger.open .gal-ss-input::placeholder { color: #b0b8cc; }

.gal-ss-trigger .gal-select-arrow { transition: transform 0.2s, border-color 0.2s; }

.gal-ss-trigger.open .gal-select-arrow {
    transform: rotate(225deg) translateY(2px);
    border-color: #e12454;
}

.gal-ss-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid rgba(34,58,102,0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(34,58,102,0.14);
    max-height: 240px;
    overflow-y: auto;
    z-index: 200;
    padding: 6px;
}

.gal-ss-option {
    padding: 9px 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #223a66;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.gal-ss-option:hover { background: #f3edff; }

.gal-ss-option.active {
    background: rgba(225,36,84,0.08);
    color: #e12454;
    font-weight: 600;
}

.gal-ss-empty {
    padding: 12px;
    text-align: center;
    color: #b0b8cc;
    font-size: 13px;
}

.gal-no-results {
    text-align: center;
    padding: 64px 0 40px;
    color: #6F8BA4;
}

.gal-no-results-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 56px;
    color: rgba(225,36,84,0.18);
    line-height: 1;
    margin-bottom: 16px;
}

.gal-no-results p {
    font-size: 15px;
    margin-bottom: 18px;
}

/* ── Section 2: Albums ───────────────────────────────────── */
.gal-albums-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.gal-album-card {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(34,58,102,0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.gal-album-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(34,58,102,0.15);
}

.gal-album-img-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.gal-album-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gal-album-card:hover .gal-album-img-wrap img {
    transform: scale(1.06);
}

.gal-album-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34,58,102,0.10) 0%, rgba(34,58,102,0.55) 100%);
}

.gal-album-top-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.92);
    border-radius: 20px;
    padding: 4px 11px 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #223a66;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.gal-album-top-badge svg {
    width: 13px;
    height: 13px;
    color: #e12454;
}

.gal-album-pic-count {
    position: absolute;
    top: 10px; right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(5, 2, 15, 0.62);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 9px 4px 7px;
    border-radius: 20px;
    pointer-events: none;
}
.gal-album-pic-count svg {
    width: 13px;
    height: 13px;
    color: #e12454;
}

.gal-album-body {
    padding: 20px 22px 22px;
}

.gal-album-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    color: #223a66;
    margin: 0 0 14px;
    line-height: 1.35;
}

.gal-album-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gal-album-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid rgba(34,58,102,0.06);
    padding-bottom: 6px;
}

.gal-album-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gal-album-key {
    color: #6F8BA4;
    flex-shrink: 0;
}

.gal-album-val {
    color: #223a66;
    font-weight: 600;
    text-align: right;
}

.gal-album-phot {
    color: #e12454;
}

/* ── Section 3: Dancer leaderboard ──────────────────────── */
.gal-dancer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.gal-dancer-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 22px;
    box-shadow: 0 2px 12px rgba(34,58,102,0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.gal-dancer-row:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 24px rgba(34,58,102,0.13);
}

.gal-dancer-top {
    border-left: 4px solid #e12454;
}

.gal-rank-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(34,58,102,0.08);
    color: #223a66;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.gal-dancer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.gal-dancer-avatar span {
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 700;
}

.gal-dancer-info {
    flex: 1;
    min-width: 0;
}

.gal-dancer-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #223a66;
    line-height: 1.3;
}

.gal-dancer-team {
    font-size: 12px;
    color: #6F8BA4;
    margin-top: 2px;
}

.gal-dancer-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 120px;
}

.gal-dancer-count {
    font-family: 'Shippori Mincho', serif;
    font-size: 17px;
    font-weight: 700;
    color: #223a66;
    line-height: 1;
}

.gal-dancer-unit {
    font-size: 12px;
    font-weight: 400;
    color: #6F8BA4;
}

.gal-bar-track {
    width: 120px;
    height: 5px;
    background: rgba(34,58,102,0.10);
    border-radius: 10px;
    overflow: hidden;
}

.gal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e12454 0%, #c9932a 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199px) {
    .gal-albums-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .gal-filter-bar {
        padding: 16px;
        gap: 12px;
    }
    .gal-select-box select {
        min-width: 0;
        width: 100%;
    }
    .gal-filter-select-wrap {
        flex: 1 1 140px;
    }
    .gal-albums-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .gal-dancer-row {
        padding: 12px 14px;
        gap: 10px;
    }
    .gal-dancer-stats {
        min-width: 90px;
    }
    .gal-bar-track {
        width: 80px;
    }
    .gallery-section {
        padding: 48px 0 40px;
    }
}

@media (max-width: 480px) {
    .gal-photog-item { width: 190px; }
    .gal-photog-card { padding: 0 0 16px; }
    .gal-photog-avatar { width: 90px; height: 90px; margin-top: -38px; }
    .gal-photog-avatar span { font-size: 24px; }
}

/* ── gallery-video-meta row (used on full page) ──────────── */
.gallery-video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 860px;
    margin: 0 auto 12px;
}

.gallery-video-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #e12454;
}

.gallery-video-count {
    font-size: 12px;
    color: #6F8BA4;
    letter-spacing: 1px;
}

/*------------------------------------------------------------
# TeamsDetails page  (/team-media)
------------------------------------------------------------*/
.tmd-page {
    background: url('images/jula_background.png') repeat;
    background-size: 500px;
    min-height: 100vh;
}

.tmd-page-header {
    background: #223a66;
}

.tmd-overlay {
    opacity: 0.9 !important;
}

.tmd-body {
    padding: 60px 0 80px;
}

/* ── Identity strip ─────────────────────────────────────── */
.tmd-identity {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: #fff;
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 0 4px 24px rgba(34,58,102,0.10);
    margin-bottom: 0;
}

.tmd-identity-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border: 3px solid rgba(255,255,255,0.4);
}

.tmd-identity-info {
    flex: 1;
    min-width: 0;
}

.tmd-identity-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    font-weight: 700;
    color: #223a66;
    margin: 0 0 8px;
}

.tmd-identity-desc {
    font-size: 14px;
    color: #5A7A8C;
    line-height: 1.8;
    margin: 0 0 12px;
}

.tmd-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: 13px;
    color: #6F8BA4;
}

.tmd-identity-meta strong {
    color: #223a66;
}

/* ── Back button ────────────────────────────────────────── */
.tmd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 24px;
    background: rgba(34,58,102,0.07);
    color: #223a66;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    transition: background 0.2s, color 0.2s;
    border: 1.5px solid rgba(34,58,102,0.14);
}

.tmd-back-btn:hover {
    background: #223a66;
    color: #fff;
}

/* ── Section spacing ────────────────────────────────────── */
.tmd-section {
    padding: 64px 0 0;
}

/* ── Photo grid (5 columns on full page) ────────────────── */
.tmd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 32px;
}

.tmd-gallery-grid .gallery-thumb {
    aspect-ratio: 1;
}

/* ── Not-found state ────────────────────────────────────── */
.tmd-not-found {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

.tmd-not-found-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 72px;
    color: rgba(225,36,84,0.15);
    line-height: 1;
    margin-bottom: 20px;
}

.tmd-not-found h2 {
    color: #223a66;
    margin-bottom: 12px;
}

.tmd-not-found p {
    color: #6F8BA4;
    margin-bottom: 24px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .tmd-gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .tmd-identity {
        flex-wrap: wrap;
        padding: 22px 20px;
        gap: 14px;
    }

    /* back button occupies its own row below avatar+info */
    .tmd-back-btn {
        order: 3;
        width: 100%;
        justify-content: center;
        align-self: auto;
    }

    /* avatar + info share the full row without the back-btn stealing space */
    .tmd-identity-avatar {
        width: 72px;
        height: 72px;
        font-size: 22px;
        flex-shrink: 0;
    }

    .tmd-identity-info {
        flex: 1;
        min-width: 0;
    }

    .tmd-identity-name { font-size: 18px; margin-bottom: 6px; }
    .tmd-identity-desc { font-size: 13px; line-height: 1.7; }
    .tmd-identity-meta { font-size: 12px; gap: 4px 16px; }

    .tmd-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .tmd-section { padding: 44px 0 0; }
}

@media (max-width: 480px) {
    .tmd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Two-column main grid: video (left) + members (right) ── */
.tmd-video-col {
    min-width: 0;
}

@media (max-width: 480px) {
    .tmd-members-list {
        grid-template-columns: 1fr;
    }
}

/*------------------------------------------------------------
# Sponsor section
------------------------------------------------------------*/
.spn-section {
    /* background: url('images/jula_background.png') repeat fixed;
    background-size: 500px auto; */
    padding: 40px 0;
    /* overflow: hidden; */
}

.spn-marquee-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.spn-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: spnMarquee 36s linear infinite;
}

.spn-marquee-track:hover {
    animation-play-state: paused;
}

.spn-marquee-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    margin: 0 10px;
    height: 80px;
    border-radius: 12px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(34,58,102,0.09);
    box-shadow: 0 2px 8px rgba(34,58,102,0.06);
    transition: background 0.22s, box-shadow 0.22s;
}

.spn-marquee-item:hover {
    background: #fff;
    box-shadow: 0 4px 18px rgba(34,58,102,0.13);
}

.spn-logo-img {
    height: 44px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
    filter: grayscale(30%);
    opacity: 0.82;
    transition: filter 0.22s, opacity 0.22s;
}

.spn-marquee-item:hover .spn-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes spnMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/*------------------------------------------------------------
# lineup-orbit — dual-ring circular spinning team arrangement
------------------------------------------------------------*/
.lineup-orbit-wrap {
    position: relative;
    height: 760px;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ---------- centre decoration ---------- */
.lineup-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    text-align: center;
}

.lineup-orbit-core {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225,36,84,0.12) 0%, rgba(34,58,102,0.07) 70%);
    border: 1.5px solid rgba(225,36,84,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lineup-orbit-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    color: rgba(225,36,84,0.72);
    line-height: 1;
}

.lineup-orbit-count {
    margin: 5px 0 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(44,95,122,0.65);
    text-transform: uppercase;
}

/* ---------- shared orbit ring styles ---------- */
.lineup-orbit-inner,
.lineup-orbit-outer {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* default stacking: outer ring on top (later in DOM) */
.lineup-orbit-inner { z-index: 1; }
.lineup-orbit-outer { z-index: 2; }

/* when an inner item is hovered, lift entire inner ring above outer ring */
.lineup-orbit-inner:has(.artist-scale-wrap:hover) { z-index: 4; }

/* lift the specific hovered orbit-item above its siblings in the same ring */
.orbit-item:has(.artist-scale-wrap:hover) { z-index: 10; }

/* dashed orbit path ring — a circle stays a circle when rotated */
.lineup-orbit-inner::after,
.lineup-orbit-outer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(225,36,84,0.18);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* ---------- inner ring: 8 teams, CW, radius 175px ---------- */
.lineup-orbit-inner {
    width:  450px;
    height: 450px;
    margin-top:  -225px;
    margin-left: -225px;
    animation: orbit-cw 36s linear infinite;
    --r: 175px;
}

.lineup-orbit-inner::after {
    width:  350px;
    height: 350px;
}

.lineup-orbit-inner .orbit-item .artist-card {
    animation: orbit-ccw 36s linear infinite;
}

/* ---------- outer ring: 8 teams, CCW, radius 305px ---------- */
.lineup-orbit-outer {
    width:  710px;
    height: 710px;
    margin-top:  -355px;
    margin-left: -355px;
    animation: orbit-ccw 52s linear infinite;
    --r: 305px;
}

.lineup-orbit-outer::after {
    width:  610px;
    height: 610px;
}

.lineup-orbit-outer .orbit-item .artist-card {
    animation: orbit-cw 52s linear infinite;
}

/* ---------- orbit items ---------- */
.orbit-item {
    position: absolute;
    width: 110px;
    height: 110px;
    top: 50%;
    left: 50%;
    margin-top:  -55px;
    margin-left: -55px;
}

/* 8 items × 45° — radius from CSS variable */
.orbit-item-1 { transform: rotate(  0deg) translateX(var(--r)) rotate(   0deg); }
.orbit-item-2 { transform: rotate( 45deg) translateX(var(--r)) rotate( -45deg); }
.orbit-item-3 { transform: rotate( 90deg) translateX(var(--r)) rotate( -90deg); }
.orbit-item-4 { transform: rotate(135deg) translateX(var(--r)) rotate(-135deg); }
.orbit-item-5 { transform: rotate(180deg) translateX(var(--r)) rotate(-180deg); }
.orbit-item-6 { transform: rotate(225deg) translateX(var(--r)) rotate(-225deg); }
.orbit-item-7 { transform: rotate(270deg) translateX(var(--r)) rotate(-270deg); }
.orbit-item-8 { transform: rotate(315deg) translateX(var(--r)) rotate(-315deg); }

/* ---------- let outer ring div pass mouse events through to inner orbit ---------- */
.lineup-orbit-outer {
    pointer-events: none;
}
.lineup-orbit-outer .orbit-item {
    pointer-events: auto;
}

/* ---------- cards ---------- */
.orbit-item .artist-card {
    width:  110px;
    height: 110px;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* scale-wrap: this is the element that scales + glows on hover */
.orbit-item .artist-card .artist-scale-wrap {
    width:  110px;
    height: 110px;
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

/* clip only the photo to circle, not the figcaption */
.orbit-item .artist-card .artist-scale-wrap img {
    border-radius: 50%;
    clip-path: circle(50%);
}

/* name label — always at 6 o'clock below the circle */
.orbit-item .artist-card figcaption {
    position: absolute;
    /* anchor to card center-bottom: card is 110px, center = 55px */
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    /* push down: 55px to reach bottom edge + 10px gap, then counter the card hover scale */
    transform: translateX(-50%) translateY(65px) scale(1);
    transform-origin: top center;
    width: max-content;
    padding: 5px 14px;
    background: rgba(18, 10, 34, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(225, 36, 84, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(225, 36, 84, 0.8);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.orbit-item .artist-card .artist-card-dot { display: none; }

/* show label when the scale-wrap inside is hovered */
.orbit-item .artist-card:has(.artist-scale-wrap:hover) figcaption {
    opacity: 1;
    /* push below the scaled image (1.5 × 55px radius ≈ 82px + gap) */
    transform: translateX(-50%) translateY(90px);
}

/* fixed tooltip — rendered outside the transform chain, always at 6 o'clock */
.orbit-label-fixed {
    position: fixed;
    z-index: 9999;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: rgba(18, 10, 34, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(225, 36, 84, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(225, 36, 84, 0.8);
    white-space: nowrap;
    pointer-events: none;
}

/* scale + glow live on the wrap so artist-card's orbit-ccw animation is never overridden */
.orbit-item .artist-card .artist-scale-wrap:hover {
    transform: scale(1.5);
    box-shadow:
        0 0 0 3px rgba(225, 36, 84, 0.85),
        0 0 16px  6px rgba(225, 36, 84, 0.50),
        0 0 36px 12px rgba(201, 147, 42, 0.35),
        0 0 60px 20px rgba(96, 165, 250, 0.15);
    animation: orbit-glow-pulse 1.4s ease-in-out infinite;
}

@keyframes orbit-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(225, 36, 84, 0.85),
            0 0 16px  6px rgba(225, 36, 84, 0.50),
            0 0 36px 12px rgba(201, 147, 42, 0.35),
            0 0 60px 20px rgba(96, 165, 250, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(225, 36, 84, 1),
            0 0 24px 10px rgba(225, 36, 84, 0.70),
            0 0 52px 18px rgba(201, 147, 42, 0.50),
            0 0 80px 28px rgba(96, 165, 250, 0.25);
    }
}

/* pause rings + card counter-animations on wrap hover (keeps cards upright) */
.lineup-orbit-wrap:hover .lineup-orbit-inner,
.lineup-orbit-wrap:hover .lineup-orbit-outer,
.lineup-orbit-wrap:hover .orbit-item .artist-card {
    animation-play-state: paused;
}
/* override pause when fortune spin is active */
.lineup-orbit-wrap:hover .orbit-ring-fast,
.lineup-orbit-wrap:hover .orbit-ring-fast .orbit-item .artist-card {
    animation-play-state: running !important;
}

/* ---------- keyframes ---------- */
@keyframes orbit-cw  { to { transform: rotate( 360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }

/* ---------- tablet ---------- */
@media (max-width: 767px) {
    .lineup-orbit-wrap { height: 440px; }
    .lineup-orbit-inner {
        width: 260px; height: 260px;
        margin-top: -130px; margin-left: -130px;
        --r: 96px;
    }
    .lineup-orbit-inner::after { width: 192px; height: 192px; }
    .lineup-orbit-outer {
        width: 420px; height: 420px;
        margin-top: -210px; margin-left: -210px;
        --r: 156px;
    }
    .lineup-orbit-outer::after { width: 312px; height: 312px; }
    .orbit-item { width: 56px; height: 56px; margin-top: -28px; margin-left: -28px; }
    .orbit-item .artist-card { width: 56px; height: 56px; }
    .orbit-item .artist-card .artist-scale-wrap { width: 56px; height: 56px; }
    .orbit-item .artist-card figcaption { transform: translateX(-50%) translateY(38px); padding-top: 0; }
    .orbit-item .artist-card:has(.artist-scale-wrap:hover) figcaption { transform: translateX(-50%) translateY(50px); }
    .lineup-orbit-core { width: 70px; height: 70px; }
    .lineup-orbit-kanji { font-size: 20px; }
    .lineup-orbit-count { font-size: 7px; }
    .lineup-orbit-count.fortune-hint {
        font-size: 6px !important;
        letter-spacing: 0.08em;
    }
}

/* ---------- phone ---------- */
@media (max-width: 480px) {
    /* icons: 44 → 56px; inner r: 72 → 76; outer r: 118 → 143 (gap 46 → 67px) */
    .lineup-orbit-wrap { height: 390px; }
    .lineup-orbit-inner {
        width: 210px; height: 210px;
        margin-top: -105px; margin-left: -105px;
        --r: 76px;
    }
    .lineup-orbit-inner::after { width: 152px; height: 152px; }
    .lineup-orbit-outer {
        width: 356px; height: 356px;
        margin-top: -178px; margin-left: -178px;
        --r: 150px;
    }
    .lineup-orbit-outer::after { width: 300px; height: 300px; }
    .orbit-item { width: 56px; height: 56px; margin-top: -28px; margin-left: -28px; }
    .orbit-item .artist-card { width: 56px; height: 56px; }
    .orbit-item .artist-card .artist-scale-wrap { width: 56px; height: 56px; }
    .orbit-item .artist-card figcaption { transform: translateX(-50%) translateY(38px); }
    .orbit-item .artist-card:has(.artist-scale-wrap:hover) figcaption { transform: translateX(-50%) translateY(50px); }
    .lineup-orbit-core { width: 56px; height: 56px; }
    .lineup-orbit-kanji { font-size: 16px; }
    .lineup-orbit-count { font-size: 6px; }
    .lineup-orbit-count.fortune-hint {
        font-size: 5px !important;
        letter-spacing: 0.05em;
        margin-top: 2px;
    }
}

/*------------------------------------------------------------
# next-event-slider — physical album card effect
------------------------------------------------------------*/

/* strip the generic pink border — album frame takes over */
.next-event-slider .featured-image.img-fx.bdr-sharp-sakura {
    border:      none !important;
    box-shadow:  none !important;
    border-radius: 2px !important;
}

/*
  White photo mat + stacked-pages shadows.
  The two zero-blur box-shadows are solid color offsets that
  look like the pages/cover of a physical album peeking out.
*/
.next-event-content {
    position:      relative;
    background:    #fafafa;
    padding:       7px 7px 26px;   /* extra bottom = classic photo border */
    border-radius: 3px;
    transform:     rotate(-2.2deg);
    transition:    transform 0.45s cubic-bezier(.22,.68,0,1.2),
                   box-shadow 0.45s ease;
    box-shadow:
         5px  9px 0   0   #ede7f6,          /* page 2 */
        10px 17px 0   0   #ddd5ea,          /* page 3 */
         6px 26px 36px 0  rgba(34,58,102,0.28); /* ambient drop */
    will-change: transform, box-shadow;
}

/* even slides tilt opposite way */
.next-event-slider .swiper-slide:nth-child(even) .next-event-content {
    transform: rotate(1.8deg);
    box-shadow:
        -5px  9px 0   0   #ede7f6,
        -10px 17px 0  0   #ddd5ea,
        -4px  26px 36px 0 rgba(34,58,102,0.28);
}

/* every 3rd sits almost straight — variety */
.next-event-slider .swiper-slide:nth-child(3n) .next-event-content {
    transform: rotate(-0.6deg);
}

/* hover: album lifts off the table, pages tuck in, shadow deepens */
.next-event-slider .next-event-content:hover {
    transform: rotate(0deg) translateY(-16px) scale(1.02) !important;
    box-shadow:
         2px  4px 0   0   #ede7f6,
         4px  7px 0   0   #ddd5ea,
         0   44px 70px 0  rgba(34,58,102,0.40) !important;
}

/* subtle top-edge gloss — light catching the glossy cover */
.next-event-content::after {
    content: '';
    display: block;
    position: absolute;
    top:   7px;
    left:  7px;
    right: 7px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.85) 35%,
        rgba(210,190,230,0.45) 65%,
        transparent 100%
    );
    pointer-events: none;
    border-radius: 1px;
}

/*------------------------------------------------------------
# 404 Not Found page
------------------------------------------------------------*/
.nf-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
    overflow: hidden;
    padding: 60px 20px;
}

/* ---------- falling petals ---------- */
.nf-petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.nf-falling-petal {
    position: absolute;
    top: -30px;
    animation: nf-petal-fall linear infinite;
    will-change: transform, opacity;
}

@keyframes nf-petal-fall {
    0%   { transform: translateY(0)     translateX(0)    rotate(0deg);   opacity: 0.9; }
    50%  { transform: translateY(50vh)  translateX(40px) rotate(360deg); opacity: 0.7; }
    100% { transform: translateY(110vh) translateX(-20px) rotate(720deg); opacity: 0; }
}

/* ---------- content ---------- */
.nf-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* ---------- stamp ---------- */
.nf-stamp {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 5px solid rgba(225,36,84,0.75);
    outline: 2px solid rgba(225,36,84,0.25);
    outline-offset: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 8px rgba(225,36,84,0.07),
        0 12px 40px rgba(225,36,84,0.18);
    animation: nf-wobble 3.5s ease-in-out infinite;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
}

.nf-stamp-num {
    font-family: 'Shippori Mincho', serif;
    font-size: 66px;
    font-weight: 900;
    line-height: 1;
    color: #e12454;
    opacity: 0.88;
}

.nf-stamp-jp {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    color: #e12454;
    opacity: 0.65;
    letter-spacing: 8px;
    padding-left: 8px;
    margin-top: 4px;
}

@keyframes nf-wobble {
    0%, 100% { transform: rotate(-4deg) scale(1);    }
    50%       { transform: rotate( 4deg) scale(1.04); }
}

/* ---------- text ---------- */
.nf-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 32px;
    font-weight: 700;
    color: #223a66;
    margin: 0;
}

.nf-desc {
    font-size: 15px;
    color: #5A7A8C;
    line-height: 1.8;
    margin: 0;
}

/* ---------- buttons ---------- */
.nf-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.nf-btn-home {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #e12454, #223a66);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(225,36,84,0.35);
    transition: opacity 0.2s, transform 0.2s;
}
.nf-btn-home:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}

.nf-btn-back {
    display: inline-block;
    padding: 12px 28px;
    background: transparent;
    color: #223a66;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 6px;
    border: 2px solid rgba(34,58,102,0.35);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}
.nf-btn-back:hover {
    border-color: #e12454;
    color: #e12454;
    background: rgba(225,36,84,0.05);
}

/* ---------- haiku ---------- */
.nf-haiku {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    color: rgba(34,58,102,0.75);
    letter-spacing: 2px;
}
.nf-haiku span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/*--- # news-page ---*/
.nws-page {
    padding: 80px 0 120px;
    background: url('images/jula_background.png') repeat;
    background-size: 500px auto;
}

.nws-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 991px) { .nws-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .nws-grid { grid-template-columns: 1fr; } }

/* ── Card ─────────────────────────────────────────────── */
.nws-card {
    background: #fffbf8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 2px 12px rgba(34,58,102,0.07),
        0 0 0 1px rgba(225,36,84,0.06);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* gradient accent stripe slides in from left on hover */
.nws-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e12454 0%, #c9932a 55%, #2c5f7a 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
    z-index: 2;
}
.nws-card:hover::after { transform: scaleX(1); }

.nws-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 24px 56px rgba(225,36,84,0.16),
        0 8px 20px rgba(34,58,102,0.10),
        0 0 0 1px rgba(225,36,84,0.18);
}

.nws-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    height: 220px;
    flex-shrink: 0;
}

/* dim overlay on image for text legibility, deepens on hover */
.nws-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(34,58,102,0.45) 0%,
        rgba(34,58,102,0.10) 45%,
        transparent 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.nws-card:hover .nws-card-img-wrap::after { opacity: 0.7; }

.nws-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
}
.nws-card:hover .nws-card-img { transform: scale(1.09); }

.nws-hot-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 13px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e12454, #c9932a);
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(225,36,84,0.50);
    z-index: 2;
}

.nws-card-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* subtle 桜 watermark */
.nws-card-body::before {
    content: '桜';
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-family: 'Shippori Mincho', serif;
    font-size: 58px;
    line-height: 1;
    color: rgba(225,36,84,0.045);
    pointer-events: none;
    user-select: none;
}

.nws-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.nws-date {
    font-size: 11px;
    font-weight: 500;
    color: #8a9dab;
    letter-spacing: 0.8px;
}

.nws-category {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e12454;
    background: rgba(225,36,84,0.08);
    border: 1px solid rgba(225,36,84,0.18);
    padding: 3px 10px;
    border-radius: 20px;
}

.nws-card-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 10px;
}
.nws-card-title a { color: #223a66; text-decoration: none; transition: color 0.2s; }
.nws-card-title a:hover { color: #e12454; }

.nws-card-excerpt {
    font-size: 13px;
    color: #6b85a0;
    line-height: 1.75;
    margin: 0 0 18px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nws-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e12454;
    text-decoration: none;
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(225,36,84,0.30);
    transition: color 0.2s, gap 0.2s ease, border-color 0.2s;
}
.nws-read-more span { display: inline-block; transition: transform 0.2s ease; }
.nws-read-more:hover {
    color: #c9932a;
    text-decoration: none;
    gap: 11px;
    border-bottom-color: rgba(201,147,42,0.45);
}
.nws-read-more:hover span { transform: translateX(4px); }

/* ── Load more ───────────────────────────────────────── */
.nws-load-more {
    margin-top: 56px;
    text-align: center;
}

/* ── Skeleton loader ─────────────────────────────────── */
.nws-skeleton {
    height: 360px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: nws-shimmer 1.4s infinite;
}
@keyframes nws-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.nws-empty {
    text-align: center;
    padding: 80px 0;
    color: #5A7A8C;
    font-size: 16px;
}

/*--- # orbit-skeleton ---*/
.artist-card-skeleton {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(225,36,84,0.10) 25%, rgba(225,36,84,0.22) 50%, rgba(225,36,84,0.10) 75%);
    background-size: 200% 100%;
    animation: orbit-skeleton-shimmer 1.4s infinite;
}

@keyframes orbit-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/*------------------------------------------------------------
# tmd-media-panel — unified filter + video + photo card
------------------------------------------------------------*/
.tmd-media-panel {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(34,58,102,0.10);
    margin-top: 40px;
    overflow: hidden;
    border-top: 3px solid #e12454;
}

/* Filter strip — flat, no card of its own */
.tmd-media-panel .gal-filter-bar {
    background: linear-gradient(135deg, rgba(225,36,84,0.04) 0%, rgba(34,58,102,0.04) 100%);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    border-bottom: 1px solid rgba(34,58,102,0.08);
    padding: 18px 36px;
}

.tmd-filter-summary {
    margin-left: auto;
    font-size: 13px;
    color: #6F8BA4;
    font-family: 'Shippori Mincho', serif;
    white-space: nowrap;
}

/* Video section inside panel */
.tmd-media-panel .tmd-video-col {
    padding: 44px 40px 40px;
}

/* Photo section inside panel */
.tmd-media-panel .tmd-section {
    padding: 44px 40px 48px;
    border-top: 1px solid rgba(34,58,102,0.08);
}

@media (max-width: 767px) {
    .tmd-media-panel .gal-filter-bar { padding: 14px 20px; }
    .tmd-media-panel .tmd-video-col  { padding: 32px 20px 28px; }
    .tmd-media-panel .tmd-section    { padding: 32px 20px 36px; }
}

/*------------------------------------------------------------
# tpl-wave-divider — section transition wave
------------------------------------------------------------*/
.tpl-wave-divider {
    display: block;
    line-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-top: -2px; /* overlap 2px to kill any hairline gap */
}
.tpl-wave-divider svg {
    display: block;
    width: 100%;
    height: 80px;
}

/*------------------------------------------------------------
# hm-album-card — Homepage newest-albums slider cards
------------------------------------------------------------*/

.alb-marquee-wrap {
    overflow: hidden;
    margin-top: 40px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.alb-marquee-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: 24px;
    padding: 10px 0 20px;
    animation: albMarquee 40s linear infinite;
}

.alb-marquee-track:hover {
    animation-play-state: paused;
}

.alb-marquee-item {
    width: 280px;
    flex-shrink: 0;
}

@keyframes albMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hm-album-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(34,58,102,0.10);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border-top: 3px solid #e12454;
}

.hm-album-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(34,58,102,0.18);
}

.hm-album-img-wrap {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.hm-album-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hm-album-card:hover .hm-album-img-wrap img {
    transform: scale(1.07);
}

.hm-album-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34,58,102,0.06) 0%, rgba(34,58,102,0.50) 100%);
    pointer-events: none;
}

.hm-album-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.92);
    border-radius: 20px;
    padding: 4px 11px 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #223a66;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);
}

.hm-album-badge svg {
    width: 13px;
    height: 13px;
    color: #e12454;
    flex-shrink: 0;
}

.hm-album-body {
    padding: 18px 20px 20px;
}

.hm-album-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #223a66;
    margin: 0 0 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-album-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.hm-album-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px solid rgba(34,58,102,0.07);
    padding-bottom: 5px;
}

.hm-album-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hm-album-key {
    color: #6F8BA4;
    flex-shrink: 0;
}

.hm-album-val {
    color: #223a66;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.hm-album-phot {
    color: #e12454;
}

.hm-album-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #e12454;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.hm-album-view:hover {
    gap: 10px;
    color: #c8507a;
    text-decoration: none;
}

/*--- # headliner-skeleton ---*/
.headliner-card-skeleton {
    background: linear-gradient(90deg, rgba(34,58,102,0.08) 25%, rgba(34,58,102,0.18) 50%, rgba(34,58,102,0.08) 75%);
    background-size: 200% 100%;
    animation: orbit-skeleton-shimmer 1.4s infinite;
}

/*--- # product-skeleton ---*/
.product-card-skeleton {
    min-height: 320px;
    background: linear-gradient(90deg, rgba(34,58,102,0.07) 25%, rgba(34,58,102,0.15) 50%, rgba(34,58,102,0.07) 75%);
    background-size: 200% 100%;
    animation: orbit-skeleton-shimmer 1.4s infinite;
    pointer-events: none;
}

/*--- # orbit-side-deco ---*/
.orbit-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    pointer-events: none;
}
.orbit-side-left  { left:  2%; }
.orbit-side-right { right: 2%; }

.orbit-float-bubble {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1.5px dashed rgba(225, 36, 84, 0.35);
    background: radial-gradient(circle at 40% 40%, rgba(225,36,84,0.07) 0%, rgba(34,58,102,0.04) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
a.orbit-float-bubble {
    pointer-events: all;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
a.orbit-float-bubble:hover {
    border-color: rgba(225, 36, 84, 0.75);
    background: radial-gradient(circle at 40% 40%, rgba(225,36,84,0.16) 0%, rgba(34,58,102,0.10) 100%);
}
.orbit-float-bubble .ofl-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    color: rgba(225, 36, 84, 0.65);
    line-height: 1;
}
.orbit-float-bubble .ofl-num {
    font-size: 17px;
    font-weight: 800;
    color: rgba(225, 36, 84, 0.75);
    line-height: 1.1;
    font-family: 'Shippori Mincho', serif;
}
.orbit-float-bubble .ofl-label {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(44, 95, 122, 0.65);
    text-transform: uppercase;
    margin-top: 3px;
}

/* Each bubble orbits in a tiny circle — CW or CCW, matching the ring theme */
.ofl-a { animation: ofl-cw  20s linear infinite; }
.ofl-b { animation: ofl-ccw 28s linear infinite; animation-delay: -10s; }
.ofl-c { animation: ofl-cw  36s linear infinite; animation-delay: -20s; }

@keyframes ofl-cw {
    from { transform: rotate(0deg)   translateX(20px) rotate(0deg);    }
    to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@keyframes ofl-ccw {
    from { transform: rotate(0deg)    translateX(20px) rotate(0deg);   }
    to   { transform: rotate(-360deg) translateX(20px) rotate(360deg); }
}

/*--- # sep-gold-rule ---*/
.sep-gold-rule {
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e12454 10%, #c8a050 50%, #e12454 90%, transparent);
    margin: 52px 0;
    border: none;
}

@media (max-width: 1080px) { .orbit-side { display: none; } }

/*--- # headliner-dynamic ---*/

/* Each card column floats at its own pace — creates a gentle "breathing" ensemble */
@keyframes hd-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-9px); }
}

.headliner-col { animation: hd-float 5s ease-in-out infinite; }
.headliner-col:nth-child(1) { animation-delay: 0s;   animation-duration: 5.2s; }
.headliner-col:nth-child(2) { animation-delay: 1.1s; animation-duration: 4.7s; }
.headliner-col:nth-child(3) { animation-delay: 0.5s; animation-duration: 5.6s; }
.headliner-col:nth-child(4) { animation-delay: 1.8s; animation-duration: 4.9s; }

/* Pause the float while hovering so it hands off cleanly to the card hover */
.headliner-col:hover { animation-play-state: paused; }

/* Hover: add a subtle 3D tilt — alternates direction so the row feels balanced */
.headliner-col:nth-child(odd)  .headliner-card:hover {
    transform: translateY(-8px) perspective(700px) rotateY(4deg);
    box-shadow: 0 20px 48px rgba(225, 36, 84, 0.32);
}
.headliner-col:nth-child(even) .headliner-card:hover {
    transform: translateY(-8px) perspective(700px) rotateY(-4deg);
    box-shadow: 0 20px 48px rgba(225, 36, 84, 0.32);
}

/* Photo drifts up a touch faster than the card — creates a parallax depth layer */
.headliner-card:hover img {
    transform: scale(1.1) translateY(-8px);
}

/* Number badge: slow pulsing glow so it draws the eye gently */
@keyframes hd-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225, 36, 84, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(225, 36, 84, 0.22); }
}
.headliner-num { animation: hd-badge-glow 3s ease-in-out infinite; }


/* ============================================================
   Album Detail Page  (.alb-detail-pg)
   ============================================================ */
.alb-detail-pg {
    min-height: 100vh;
    background: url("images/jula_background.png") repeat;
    background-size: 500px auto;
}

.alb-detail-header {
    background: url("images/bg/bg-7.jpg") center center/cover no-repeat;
}

.alb-detail-loading {
    text-align: center;
    padding: 80px 20px;
    color: #6F8BA4;
    font-size: 16px;
}

.alb-detail-body { padding: 60px 0 80px; }

/* ── Meta bar ── */
.alb-meta-bar {
    display: flex;
    gap: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(34,58,102,0.08);
    padding: 24px 28px;
    margin-bottom: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Cameraman card */
.alb-cam-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-width: 220px;
    flex: 0 0 auto;
    padding-right: 24px;
    border-right: 1px solid #ede8f5;
}
.alb-cam-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; background: linear-gradient(135deg,#e12454,#223a66);
    display: flex; align-items: center; justify-content: center;
}
.alb-cam-avatar img { width: 100%; height: 100%; object-fit: cover; }
.alb-cam-avatar span { color: #fff; font-size: 22px; font-weight: 700; font-family: 'Shippori Mincho', serif; }
.alb-cam-info { flex: 1; min-width: 0; }
.alb-cam-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e12454; margin-bottom: 2px; }
.alb-cam-name { font-size: 16px; font-weight: 700; color: #223a66; margin-bottom: 2px; }
.alb-cam-style { font-size: 12px; color: #6F8BA4; margin-bottom: 6px; }
.alb-cam-intro { font-size: 13px; color: #5A7A8C; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
.alb-cam-links { display: flex; gap: 8px; flex-wrap: wrap; }
.alb-cam-link { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; text-decoration: none; }
.alb-cam-link--fb { background: #e8f0fe; color: #1877f2; }
.alb-cam-link--ig { background: #fce4ec; color: #e1306c; }
.alb-cam-link:not(.alb-cam-link--fb):not(.alb-cam-link--ig) { background: #f0f4f8; color: #223a66; }

/* Album info grid */
.alb-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    flex: 1;
    align-content: flex-start;
}
.alb-info-grid-title {
    flex: 1 1 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #223a66;
    border-bottom: 1px solid #ede8f5;
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.alb-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alb-meta-item.alb-meta-desc {
    flex: 1 1 100%;
    border-top: 1px solid #ede8f5;
    padding-top: 12px;
    margin-top: 4px;
}
.alb-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e12454;
}
.alb-meta-val {
    font-size: 14px;
    color: #223a66;
    font-weight: 500;
}

/* ── Pictures grid ── */
.alb-pics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
}
.alb-pic-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: #eae5f0;
}
.alb-pic-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.alb-pic-item:hover img { transform: scale(1.06); }

.alb-pic-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(225, 36, 84, 0.0);
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s, background 0.25s;
}
.alb-pic-item:hover .alb-pic-overlay {
    opacity: 1;
    background: rgba(225, 36, 84, 0.42);
}

.alb-pic-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 6px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.62));
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    transform: translateY(100%);
    transition: transform 0.25s;
}
.alb-pic-item:hover .alb-pic-caption { transform: translateY(0); }

.alb-no-pics {
    text-align: center;
    padding: 60px 20px;
    color: #6F8BA4;
    font-size: 15px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .alb-pics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .alb-pics-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .alb-meta-bar { padding: 16px; flex-direction: column; }
    .alb-cam-card { border-right: none; border-bottom: 1px solid #ede8f5; padding-right: 0; padding-bottom: 16px; width: 100%; }
    .alb-info-grid { width: 100%; }
    .alb-detail-body { padding: 40px 0 60px; }
}
@media (max-width: 480px) {
    .alb-pics-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ── Infinite scroll sentinel & count pill ── */
.alb-sentinel {
    padding: 32px 0 16px;
    text-align: center;
}

.alb-load-more-spinner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6F8BA4;
    font-size: 14px;
}

.alb-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid #e8e3f0;
    border-top-color: #e12454;
    border-radius: 50%;
    animation: alb-spin 0.7s linear infinite;
}

@keyframes alb-spin {
    to { transform: rotate(360deg); }
}

.alb-all-loaded {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    background: #f0f7f0;
    color: #2e7d52;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
}

.alb-count-pill {
    display: inline-block;
    margin-left: 12px;
    padding: 2px 12px;
    background: rgba(225, 36, 84, 0.1);
    color: #e12454;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
}

/* ============================================================
   Scroll tracker + Tag widget
   ============================================================ */
.alb-scroll-track {
    position: fixed;
    right: 20px;
    top: 0; bottom: 0;
    pointer-events: none;
    z-index: 200;
}

.alb-scroll-thumb {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 190px;
    background: rgba(22, 18, 40, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(225, 36, 84, 0.28);
    border-radius: 14px;
    padding: 10px 14px 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    transition: top 0.12s linear;
}

/* ── Counter row ── */
.alb-thumb-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.alb-thumb-cur  { color: #e12454; font-size: 15px; }
.alb-thumb-sep  { color: rgba(255,255,255,.35); font-size: 11px; }
.alb-thumb-tot  { color: rgba(255,255,255,.7); }

/* ── Tag panel ── */
.alb-tag-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 0;
}

.alb-tag-select {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    color: #fff;
    font-size: 11.5px;
    padding: 5px 7px;
    cursor: pointer;
    outline: none;
    margin-bottom: 6px;
}
.alb-tag-select option { background: #1e1833; color: #fff; }

.alb-tag-mode-btn {
    width: 100%;
    background: rgba(225, 36, 84, 0.12);
    border: 1px solid rgba(225, 36, 84, 0.35);
    border-radius: 7px;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 8px;
    cursor: pointer;
    transition: background .2s, color .2s;
    text-align: center;
}
.alb-tag-mode-btn:hover:not(:disabled) { background: rgba(225, 36, 84, 0.22); color: #fff; }
.alb-tag-mode-btn.active  { background: #e12454; color: #fff; border-color: #e12454; }
.alb-tag-mode-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Tag actions (visible in tag mode) ── */
.alb-tag-actions { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }

.alb-tag-hint {
    font-size: 10.5px;
    color: rgba(255,255,255,.55);
    line-height: 1.4;
}
.alb-tag-hint em { color: #f7a; font-style: normal; font-weight: 600; }

.alb-tag-count {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
}

.alb-tag-btn-row { display: flex; gap: 5px; }

.alb-tag-btn {
    flex: 1;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity .15s;
}
.alb-tag-btn:disabled { opacity: .35; cursor: not-allowed; }
.alb-tag-btn--all   { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: #fff; }
.alb-tag-btn--clear { background: transparent; border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
.alb-tag-btn--submit {
    width: 100%;
    background: #e12454;
    color: #fff;
    border-color: #e12454;
    padding: 6px 8px;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
}
.alb-tag-btn--submit.loading { opacity: .7; cursor: wait; }
.alb-tag-btn--submit:hover:not(:disabled) { background: #c41040; }

.alb-tag-success {
    font-size: 10.5px;
    color: #6ee09b;
    font-weight: 600;
    text-align: center;
}

.alb-spinner--sm {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: alb-spin 0.7s linear infinite;
}

/* ============================================================
   Picture grid — tag mode states
   ============================================================ */
.alb-pics-grid.alb-tag-mode-on .alb-pic-item { cursor: pointer; }

.alb-pic-item.alb-pic-selected .alb-pic-overlay {
    opacity: 1;
    background: rgba(225, 36, 84, 0.52);
}

.alb-pic-check {
    font-size: 28px;
    color: rgba(255,255,255,.5);
    font-weight: 700;
    line-height: 1;
    transition: color .15s;
}
.alb-pic-check--on { color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.5); }

/* Team avatar badge stack (top-right of picture) */
.alb-pic-team-badges {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    flex-direction: row-reverse;
    pointer-events: none;
    z-index: 2;
}
.alb-pic-team-badge {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    overflow: hidden;
    background: #223a66;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #fff;
    margin-left: -6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.alb-pic-team-badge:last-child { margin-left: 0; }
.alb-pic-team-badge img { width: 100%; height: 100%; object-fit: cover; }
.alb-pic-team-badge--more {
    background: rgba(22,18,40,0.82);
    font-size: 8px;
    letter-spacing: -.5px;
}

/* Locked: picture already tagged with the currently selected team */
.alb-pic-item.alb-pic-locked { cursor: not-allowed; }
.alb-pic-item.alb-pic-locked .alb-pic-overlay {
    opacity: 1;
    background: rgba(30, 100, 55, 0.5);
}
.alb-pic-check--locked {
    color: #6ee09b;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* Responsive: hide widget on small screens */
@media (max-width: 991px) {
    .alb-scroll-track { display: none; }
}

/*--- # fortune-spin ---*/

/* Center button — pointer + pulse hint */
.lineup-orbit-center {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.lineup-orbit-center:hover {
    transform: translate(-50%, -50%) scale(1.08);
}
.fortune-hint {
    font-size: 10px !important;
    letter-spacing: 0.15em;
    color: #c9932a !important;
    animation: fortune-hint-pulse 2s ease-in-out infinite;
}
@keyframes fortune-hint-pulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

/* Kanji swap during spin */
.fortune-spin-kanji {
    animation: fortune-kanji-spin 0.4s linear infinite !important;
    display: inline-block;
}
.fortune-cooldown-kanji {
    color: #8b7aaa !important;
    animation: fortune-cooldown-fade 0.6s ease-in-out both;
}
@keyframes fortune-cooldown-fade {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fortune-kanji-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Center pulsing ring while spinning */
.orbit-center-spinning .lineup-orbit-core {
    animation: fortune-core-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes fortune-core-pulse {
    from { box-shadow: 0 0 0 0 rgba(225, 36, 84, 0.4), inset 0 0 30px rgba(225,36,84,0.1); }
    to   { box-shadow: 0 0 0 18px rgba(225, 36, 84, 0), inset 0 0 30px rgba(225,36,84,0.25); }
}

/* Fast orbit — override animation-duration on both rings and their counter-rotate cards */
.orbit-ring-fast {
    animation-duration: 1.4s !important;
}
.orbit-ring-fast .orbit-item .artist-card {
    animation-duration: 1.4s !important;
}

/*--- # fortune-modal ---*/
.fortune-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 4, 24, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fortune-overlay-in 0.3s ease;
}
@keyframes fortune-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fortune-card {
    position: relative;
    background: linear-gradient(160deg, #fff 0%, #fdf5fc 100%);
    border-radius: 24px;
    padding: 36px 32px 28px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 32px 80px rgba(10,4,24,0.45), 0 0 0 1px rgba(225,36,84,0.12);
    animation: fortune-card-in 0.38s cubic-bezier(0.34,1.56,0.64,1);
    text-align: center;
}
@keyframes fortune-card-in {
    from { opacity: 0; transform: scale(0.7) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fortune-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.fortune-close:hover { color: #e12454; background: #ffeef4; }

.fortune-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.fortune-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #e12454;
    box-shadow: 0 4px 16px rgba(225,36,84,0.25);
}
.fortune-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fortune-team-info { text-align: left; }
.fortune-team-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #c9932a;
    font-weight: 700;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.fortune-team-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    font-weight: 700;
    color: #223a66;
    margin: 0 0 6px;
    line-height: 1.2;
}
.fortune-el-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: 2px;
    border: 1px solid currentColor;
    opacity: 0.85;
}

.fortune-interaction-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin: 10px 0 14px;
    padding: 8px 12px;
    background: rgba(201,147,42,0.05);
    border-radius: 10px;
    border: 1px solid rgba(201,147,42,0.15);
}
.fortune-day-el {
    font-size: 10.5px;
    color: #8b7aaa;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.fortune-interaction-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fortune-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2d9f3, transparent);
    margin-bottom: 22px;
}

.fortune-body { margin-bottom: 24px; }
.fortune-icon {
    font-size: 42px;
    display: block;
    margin-bottom: 8px;
    animation: fortune-icon-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
@keyframes fortune-icon-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.fortune-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #e12454;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.fortune-msg {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    line-height: 1.75;
    color: #3a3060;
    margin: 0;
}

.fortune-retry {
    background: linear-gradient(135deg, #e12454, #c9932a);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.fortune-retry:hover { opacity: 0.88; transform: scale(1.04); }

@media (max-width: 480px) {
    .fortune-card { padding: 28px 20px 22px; }
    .fortune-team-name { font-size: 17px; }
    .fortune-msg { font-size: 14px; }
}

/*--- # lineup-artists mobile 2x2 grid ---*/
@media (max-width: 767px) {
    /* 2 columns instead of 1 full-width stack */
    .headliner-col {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 5px;
        /* kill the float animation — saves battery and prevents jank */
        animation: none !important;
    }

    /* Shorter aspect ratio so 2 cards side-by-side aren't too tall */
    .headliner-card {
        aspect-ratio: 2 / 3;
        border-radius: 14px;
    }

    /* Tighten the overlay text to fit smaller cards */
    .headliner-info {
        padding: 48px 12px 14px;
    }

    .headliner-quote-mark { font-size: 28px; margin-bottom: 2px; }
    .headliner-quote      { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
    .headliner-info h3    { font-size: 13px; padding-top: 8px; }
    .headliner-num        { font-size: 10px; padding: 3px 7px; top: 10px; left: 10px; }
}

/*--- # team element hover effects ---*/

/* shared: the wrap needs to contain the pseudo-element ring */
.team-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.team-card:hover .team-avatar-wrap::before { opacity: 1; }

/* ── Kim 金 Metal — spinning chrome ring ───────────────────── */
@keyframes kim-spin {
    to { transform: rotate(360deg); }
}
.team-card:hover .team-avatar-wrap[data-element="kim"]::before {
    background: conic-gradient(from 0deg,
        #888 0%, #e0e0e0 20%, #fff 40%, #c8c8c8 55%, #fff 70%, #e0e0e0 85%, #888 100%);
    animation: kim-spin 1.3s linear infinite;
}
.team-card:hover .team-avatar-wrap[data-element="kim"] .team-avatar,
.team-card:hover .team-avatar-wrap[data-element="kim"] .team-avatar-img {
    box-shadow: 0 0 0 3px #fff, 0 4px 20px rgba(180,180,180,0.7);
}

/* ── Mộc 木 Wood — expanding green rings ───────────────────── */
@keyframes moc-rings {
    0%   { box-shadow: 0 0 0 0   rgba(34,139,34,0.75),
                       0 0 0 0   rgba(34,139,34,0.35); }
    100% { box-shadow: 0 0 0 12px rgba(34,139,34,0),
                       0 0 0 22px rgba(34,139,34,0); }
}
.team-card:hover .team-avatar-wrap[data-element="moc"] .team-avatar,
.team-card:hover .team-avatar-wrap[data-element="moc"] .team-avatar-img {
    animation: moc-rings 1.2s ease-out infinite;
    transform: scale(1.1);
}

/* ── Thủy 水 Water — ripple waves ──────────────────────────── */
@keyframes thuy-ripple {
    0%   { box-shadow: 0 0 0 0   rgba(14,116,189,0.8),
                       0 0 0 0   rgba(14,116,189,0.4),
                       0 0 0 0   rgba(14,116,189,0.15); }
    100% { box-shadow: 0 0 0 8px  rgba(14,116,189,0),
                       0 0 0 16px rgba(14,116,189,0),
                       0 0 0 26px rgba(14,116,189,0); }
}
@keyframes thuy-bob {
    0%, 100% { transform: scale(1.08) translateY(0); }
    50%       { transform: scale(1.08) translateY(-4px); }
}
.team-card:hover .team-avatar-wrap[data-element="thuy"] .team-avatar,
.team-card:hover .team-avatar-wrap[data-element="thuy"] .team-avatar-img {
    animation: thuy-ripple 1.1s ease-out infinite, thuy-bob 2s ease-in-out infinite;
}

/* ── Hỏa 火 Fire — flickering orange-red blaze ─────────────── */
@keyframes hoa-flicker {
    0%,100% { box-shadow: 0 0 6px  3px rgba(255,87,34,0.8),
                          0 0 18px 6px rgba(255,152,0,0.5),
                          0 -4px 14px 2px rgba(255,87,34,0.3); }
    25%     { box-shadow: 0 0 10px 5px rgba(255,152,0,0.9),
                          0 0 26px 9px rgba(255,87,34,0.4),
                          0 -6px 20px 4px rgba(255,193,7,0.35); }
    50%     { box-shadow: 0 0 4px  2px rgba(255,87,34,0.7),
                          0 0 14px 4px rgba(255,193,7,0.55),
                          0 -3px 10px 1px rgba(255,87,34,0.25); }
    75%     { box-shadow: 0 0 12px 6px rgba(255,87,34,0.85),
                          0 0 22px 7px rgba(255,152,0,0.45),
                          0 -5px 18px 3px rgba(255,87,34,0.3); }
}
@keyframes hoa-lift {
    0%, 100% { transform: scale(1.1) translateY(0); }
    50%       { transform: scale(1.12) translateY(-3px); }
}
.team-card:hover .team-avatar-wrap[data-element="hoa"] .team-avatar,
.team-card:hover .team-avatar-wrap[data-element="hoa"] .team-avatar-img {
    animation: hoa-flicker 0.55s ease-in-out infinite, hoa-lift 1.4s ease-in-out infinite;
}

/* ── Thổ 土 Earth — breathing amber warmth ─────────────────── */
@keyframes tho-breathe {
    0%, 100% { box-shadow: 0 0 8px  3px rgba(180,110,40,0.65),
                            0 0 22px 7px rgba(140,90,30,0.3),
                            inset 0 0 8px rgba(200,140,60,0.15); }
    50%       { box-shadow: 0 0 16px 7px rgba(200,140,50,0.75),
                            0 0 36px 12px rgba(160,110,40,0.35),
                            inset 0 0 12px rgba(220,160,70,0.2); }
}
@keyframes tho-rotate {
    0%   { transform: scale(1.08) rotate(0deg); }
    100% { transform: scale(1.08) rotate(360deg); }
}
.team-card:hover .team-avatar-wrap[data-element="tho"] .team-avatar,
.team-card:hover .team-avatar-wrap[data-element="tho"] .team-avatar-img {
    animation: tho-breathe 2.2s ease-in-out infinite;
    transform: scale(1.1);
}
.team-card:hover .team-avatar-wrap[data-element="tho"]::before {
    background: conic-gradient(from 0deg,
        rgba(180,110,40,0.6), rgba(220,160,70,0.3), rgba(180,110,40,0.6));
    animation: tho-rotate 8s linear infinite;
    opacity: 0.6;
}

/*--- # news-detail ---*/

/* Loading skeleton */
.nwd-loading {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 24px;
    background: #fff;
}
.nwd-loading-inner {
    width: 100%;
    max-width: 680px;
}
.nwd-skeleton-header {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0edf8 25%, #e5e0f5 50%, #f0edf8 75%);
    background-size: 400% 100%;
    animation: nws-shimmer 1.4s infinite;
    margin-bottom: 20px;
}
.nwd-skeleton-line {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0edf8 25%, #e5e0f5 50%, #f0edf8 75%);
    background-size: 400% 100%;
    animation: nws-shimmer 1.4s infinite;
    margin-bottom: 12px;
}
.nwd-skeleton-line--short { width: 60%; }
.nwd-skeleton-block {
    height: 280px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f0edf8 25%, #e5e0f5 50%, #f0edf8 75%);
    background-size: 400% 100%;
    animation: nws-shimmer 1.4s infinite;
    margin-top: 28px;
}

/* Not found */
.nwd-not-found {
    text-align: center;
    padding: 100px 24px;
    background: #fff;
}
.nwd-not-found-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 72px;
    color: #e12454;
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 24px;
}
.nwd-not-found h2 {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    color: #223a66;
    margin-bottom: 12px;
}
.nwd-not-found p {
    color: #5A7A8C;
    margin-bottom: 28px;
}

/* Page header */
.nwd-overlay {
    background: linear-gradient(135deg, rgba(10,10,22,0.82) 0%, rgba(34,58,102,0.70) 100%);
}
.nwd-header-title {
    font-size: clamp(20px, 3.5vw, 36px);
    line-height: 1.35;
}
.nwd-header-cat {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 11px;
    border-radius: 12px;
    background: rgba(225,36,84,0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    vertical-align: middle;
}
.nwd-header-cat--hot {
    background: rgba(201,147,42,0.90);
}

/* Body */
.nwd-body {
    padding: 56px 0 72px;
    background: #f5f3ff url('images/jula_background.png') repeat;
    background-size: 500px auto;
}

/* Article card */
.nwd-article {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 36px rgba(34,58,102,0.09), 0 1px 6px rgba(34,58,102,0.05);
    overflow: hidden;
    margin-bottom: 28px;
}
.nwd-featured-img {
    width: 100%;
    max-height: 440px;
    overflow: hidden;
}
.nwd-featured-img img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}
.nwd-article-inner {
    padding: 36px 40px 40px;
}

/* Excerpt pull-quote */
.nwd-excerpt {
    font-family: 'Shippori Mincho', serif;
    font-size: 15.5px;
    color: #2c5f7a;
    line-height: 1.85;
    border-left: 4px solid #e12454;
    padding: 14px 20px;
    background: #fdf5f8;
    border-radius: 0 8px 8px 0;
    margin: 0 0 28px;
}

/* Rich text content */
.nwd-content {
    color: #3a4a5a;
    font-size: 15px;
    line-height: 1.95;
}
.nwd-content h1,
.nwd-content h2,
.nwd-content h3,
.nwd-content h4,
.nwd-content h5 {
    font-family: 'Shippori Mincho', serif;
    color: #223a66;
    margin: 32px 0 12px;
    line-height: 1.4;
}
.nwd-content h1 { font-size: 26px; }
.nwd-content h2 { font-size: 22px; border-bottom: 1px solid #ede9f6; padding-bottom: 8px; }
.nwd-content h3 { font-size: 18px; }
.nwd-content h4 { font-size: 15px; }
.nwd-content p  { margin: 0 0 18px; }
.nwd-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 20px rgba(34,58,102,0.10);
}
.nwd-content a {
    color: #e12454;
    text-decoration: underline;
    text-decoration-color: rgba(225,36,84,0.3);
    transition: text-decoration-color 0.15s;
}
.nwd-content a:hover { text-decoration-color: #e12454; }
.nwd-content ul,
.nwd-content ol  { padding-left: 26px; margin: 0 0 18px; }
.nwd-content li  { margin-bottom: 8px; }
.nwd-content strong { color: #223a66; font-weight: 700; }
.nwd-content em { color: #2c5f7a; }
.nwd-content blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 4px solid #c9932a;
    background: #fdf9f0;
    border-radius: 0 8px 8px 0;
    color: #5A7A8C;
    font-style: italic;
    font-size: 15px;
}
.nwd-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
}
.nwd-content th,
.nwd-content td {
    border: 1px solid #ede9f6;
    padding: 10px 16px;
    text-align: left;
}
.nwd-content th {
    background: #f3f0fa;
    color: #223a66;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.nwd-content tr:nth-child(even) td { background: #fafaff; }

/* Footer */
.nwd-footer { padding: 4px 0 8px; }
.nwd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 28px;
    background: linear-gradient(135deg, #e12454 0%, #223a66 100%);
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(225,36,84,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nwd-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(225,36,84,0.40);
    color: #fff;
    text-decoration: none;
}

/* Mobile */
@media (max-width: 767px) {
    .nwd-body { padding: 32px 0 48px; }
    .nwd-article-inner { padding: 24px 20px 28px; }
    .nwd-featured-img img { height: 220px; }
    .nwd-content h1 { font-size: 22px; }
    .nwd-content h2 { font-size: 19px; }
    .nwd-content { font-size: 14.5px; }
    .nwd-content table { font-size: 13px; }
    .nwd-content th,
    .nwd-content td { padding: 8px 10px; }
}

/*--- # ema-wall ---*/

.ema-page-header { }
.ema-header-overlay {
    background: linear-gradient(135deg, rgba(10,5,20,0.85) 0%, rgba(120,20,30,0.72) 100%);
}

.ema-page {
    padding: 48px 0 72px;
    background: #1a0a0f url('images/jula_background.png') repeat;
    background-size: 500px auto;
    min-height: 60vh;
}

/* Intro blurb */
.ema-intro {
    max-width: 720px;
    margin: -8px auto 36px;
    text-align: center;
    padding: 20px 28px;
    background: rgba(225,36,84,0.04);
    border: 1px dashed rgba(225,36,84,0.22);
    border-radius: 12px;
}
.ema-intro-main {
    font-size: 0.97rem;
    color: #5A7A8C;
    line-height: 1.75;
    margin: 0 0 10px;
}
.ema-intro-sub {
    font-size: 0.88rem;
    color: #8AABB8;
    line-height: 1.65;
    margin: 0;
    font-style: italic;
}

/* CTA area */
.ema-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.ema-write-btn {
    padding: 14px 36px;
    border-radius: 32px;
    border: 2px solid #c9932a;
    background: linear-gradient(135deg, #8d2020 0%, #5a0e0e 100%);
    color: #f5d98a;
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    box-shadow: 0 6px 28px rgba(120,20,20,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ema-write-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(120,20,20,0.60);
}
.ema-success-msg {
    margin-bottom: 16px;
    padding: 10px 24px;
    border-radius: 24px;
    background: rgba(201,147,42,0.15);
    border: 1px solid rgba(201,147,42,0.4);
    color: #f5d98a;
    font-size: 14px;
}

/* Form */
.ema-form {
    width: 100%;
    max-width: 540px;
    background: linear-gradient(155deg, #2a0d0d 0%, #1a0808 100%);
    border: 1px solid rgba(201,147,42,0.35);
    border-radius: 16px;
    padding: 32px 32px 24px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5);
    position: relative;
    text-align: center;
}
.ema-form-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 52px;
    color: rgba(201,147,42,0.35);
    line-height: 1;
    margin-bottom: 8px;
}
.ema-form-title {
    font-family: 'Shippori Mincho', serif;
    color: #f5d98a;
    font-size: 18px;
    margin: 0 0 20px;
}
.ema-input, .ema-textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,147,42,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: #f5e8c8;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 12px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.ema-input:focus, .ema-textarea:focus {
    outline: none;
    border-color: rgba(201,147,42,0.7);
    background: rgba(255,255,255,0.09);
}
.ema-input::placeholder, .ema-textarea::placeholder { color: rgba(245,232,200,0.35); }
.ema-textarea { resize: vertical; min-height: 100px; }
.ema-char-count {
    text-align: right;
    font-size: 11px;
    color: rgba(245,232,200,0.4);
    margin: -8px 0 12px;
}
.ema-form-error {
    background: rgba(225,36,84,0.15);
    border: 1px solid rgba(225,36,84,0.35);
    color: #ff9aaa;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    margin-bottom: 12px;
    text-align: left;
}
.ema-form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.ema-cancel-btn {
    padding: 10px 22px;
    border-radius: 24px;
    border: 1px solid rgba(245,232,200,0.2);
    background: transparent;
    color: rgba(245,232,200,0.6);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.ema-cancel-btn:hover { border-color: rgba(245,232,200,0.5); color: #f5e8c8; }
.ema-submit-btn {
    padding: 10px 26px;
    border-radius: 24px;
    border: none;
    background: linear-gradient(135deg, #c9932a 0%, #8d5c0e 100%);
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(201,147,42,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ema-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,147,42,0.5); }
.ema-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Grid */
.ema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px 16px;
    margin-bottom: 40px;
    padding-top: 32px;
}

/* Plaque card */
@keyframes ema-sway {
    0%   { transform: rotate(-1.8deg); }
    50%  { transform: rotate(1.8deg);  }
    100% { transform: rotate(-1.8deg); }
}
.ema-card {
    position: relative;
    background: linear-gradient(160deg, #c47a2e 0%, #9a5a1a 55%, #7a4010 100%);
    border-radius: 6px 6px 14px 14px;
    padding: 40px 18px 20px;
    color: #fff5e0;
    box-shadow: 0 6px 24px rgba(40,15,5,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    animation: ema-sway var(--ema-duration, 4s) ease-in-out infinite;
    animation-delay: var(--ema-delay, 0s);
    transform-origin: top center;
}
/* Wood grain */
.ema-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        90deg, transparent, transparent 10px,
        rgba(0,0,0,0.04) 10px, rgba(0,0,0,0.04) 11px
    );
    pointer-events: none;
}
/* Red rope — extends above the card like a real ema cord */
.ema-card-rope {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 48px;
    background: linear-gradient(to bottom, #6b0000, #c41010 35%, #c41010 65%, #6b0000);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    z-index: 2;
}
/* Rope splits into a small loop at the top */
.ema-card-rope::before,
.ema-card-rope::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 12px;
    border: 2px solid #c41010;
    border-radius: 50% 50% 0 0;
}
.ema-card-rope::before { left: -6px; border-right: none; }
.ema-card-rope::after  { right: -6px; border-left: none; }
/* Hole — hole in the wood the cord threads through */
.ema-card-hole {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 2px solid #c41010;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);
    z-index: 3;
}
.ema-card-seal {
    position: absolute;
    top: 30px; right: 12px;
    width: 26px; height: 26px;
    border-radius: 4px;
    background: #b52020;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.ema-card-message {
    flex: 1;
    font-family: 'Shippori Mincho', serif;
    font-size: 13.5px;
    line-height: 1.78;
    color: #fff5e0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    margin: 0 0 14px;
    word-break: break-word;
    position: relative;
}
.ema-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 10px;
    position: relative;
}
.ema-card-name  { color: rgba(255,245,220,0.80); font-style: italic; font-size: 12px; }
.ema-card-date  { color: rgba(255,245,220,0.45); font-size: 10px; }

/* Skeleton */
.ema-skeleton {
    height: 200px;
    border-radius: 6px 6px 14px 14px;
    background: linear-gradient(90deg, #2a1a10 25%, #3a2415 50%, #2a1a10 75%);
    background-size: 400% 100%;
    animation: nws-shimmer 1.4s infinite;
}

/* Empty */
.ema-empty { text-align: center; padding: 60px 0; }
.ema-empty-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 72px;
    color: rgba(201,147,42,0.3);
    line-height: 1;
    margin-bottom: 16px;
}
.ema-empty p { color: rgba(245,232,200,0.5); font-size: 15px; }

.ema-total-note {
    text-align: center;
    color: rgba(245,232,200,0.35);
    font-size: 13px;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .ema-page { padding: 32px 0 48px; }
    .ema-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
    .ema-form { padding: 24px 20px 20px; }
    .ema-card { min-height: 170px; padding: 38px 14px 16px; }
    .ema-card-message { font-size: 12.5px; }
}



/*--- # schedule ---*/

/* ── Hero ───────────────────────────────────────────────────── */
.sch-page {
    background: url('images/jula_background.png') repeat;
    background-size: 500px auto;
    min-height: 100vh;
}

.sch-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0d0516 0%, #1a0a2e 55%, #2a0d1e 100%);
    overflow: hidden;
}

.sch-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(225,36,84,.18) 0%, transparent 65%);
}

.sch-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sch-hero-pre {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    color: rgba(201,147,42,.8);
    letter-spacing: 4px;
    margin: 0 0 8px;
}

.sch-hero-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 46px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 6px;
    margin: 0 0 12px;
    text-shadow: 0 2px 24px rgba(225,36,84,.4);
}

.sch-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    letter-spacing: 1px;
    margin: 0;
}

.sch-hero-kanji {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Shippori Mincho', serif;
    font-size: 180px;
    color: rgba(255,255,255,.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ── Body ───────────────────────────────────────────────────── */
.sch-body {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* ── Loading / Empty ─────────────────────────────────────────── */
/* ── Skeleton loading ─────────────────────────────────── */
@keyframes sch-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes sch-sk-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sch-petal-drift {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(.6); }
    20%  { opacity: .7; }
    100% { opacity: 0; transform: translateY(-80px) rotate(200deg) scale(1.1); }
}

.sch-sk-shimmer {
    background: linear-gradient(90deg,
        #f0ebfa 0%,
        #e8dff7 40%,
        #f9f5ff 60%,
        #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}

.sch-loading {
    padding: 16px 0 80px;
    position: relative;
    animation: sch-sk-fade-up 0.4s ease both;
}

/* picker bar */
.sch-sk-picker {
    height: 52px;
    border-radius: 14px;
    margin-bottom: 36px;
    extend: .sch-sk-shimmer; /* won't work — inline below */
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}

/* day header row */
.sch-sk-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.sch-sk-day-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}
.sch-sk-day-line {
    height: 20px;
    width: 200px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}

/* slot row */
.sch-sk-slot {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
    opacity: 0;
    animation: sch-sk-fade-up 0.4s ease forwards;
}
.sch-sk-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    flex-shrink: 0;
    padding-top: 16px;
}
.sch-sk-rail-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}
.sch-sk-rail-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, #e8dff7, transparent);
    margin-top: 6px;
}
.sch-sk-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(225,36,84,.06);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0 8px 12px;
}
.sch-sk-idx {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}
.sch-sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}
.sch-sk-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sch-sk-name {
    height: 14px;
    width: 55%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}
.sch-sk-note {
    height: 11px;
    width: 35%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s 0.1s ease-in-out infinite;
}
.sch-sk-time {
    width: 80px;
    height: 28px;
    border-radius: 20px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e8dff7 40%, #f9f5ff 60%, #f0ebfa 100%);
    background-size: 800px 100%;
    animation: sch-shimmer 1.6s ease-in-out infinite;
}

/* floating petals overlay */
.sch-sk-petals {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    pointer-events: none;
}
.sch-sk-petal {
    font-size: 16px;
    color: #e12454;
    opacity: 0;
    animation: sch-petal-drift 2.4s ease-in-out infinite;
}

.sch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 0;
    text-align: center;
}

.sch-empty-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 72px;
    color: rgba(225,36,84,.25);
    line-height: 1;
}

.sch-empty p {
    font-family: 'Noto Sans JP', sans-serif;
    color: #5A7A8C;
    font-size: 15px;
    margin: 0;
}

.sch-empty-sub { color: #8b7aaa !important; font-size: 13px !important; }

/* ── Festival tabs ───────────────────────────────────────────── */
/* ── Festival dropdown picker ─────────────────────────────────── */
.sch-fest-drop-wrap {
    position: relative;
    margin-bottom: 36px;
}

.sch-fest-drop-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(225,36,84,.22);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
}
.sch-fest-drop-btn:hover,
.sch-fest-drop-btn.open {
    border-color: #e12454;
    box-shadow: 0 4px 18px rgba(225,36,84,.12);
}

.sch-fest-drop-icon { font-size: 18px; flex-shrink: 0; }

.sch-fest-drop-label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #223a66;
}

.sch-fest-drop-meta {
    font-size: 12px;
    color: #9b7ec8;
    background: #f3eeff;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.sch-fest-drop-chevron {
    font-size: 14px;
    color: #e12454;
    flex-shrink: 0;
    transition: transform 0.2s;
    display: inline-block;
}
.sch-fest-drop-chevron.up { transform: rotate(-180deg); }

/* backdrop to close on outside click */
.sch-fest-drop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.sch-fest-drop-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid rgba(225,36,84,.18);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(34,58,102,.12);
    overflow: hidden;
    z-index: 11;
    animation: sch-drop-in 0.18s ease;
}
@keyframes sch-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sch-fest-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #5A7A8C;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.sch-fest-drop-item:not(:last-child) { border-bottom: 1px solid #f5f0ff; }
.sch-fest-drop-item:hover { background: #fdf5f7; color: #e12454; }
.sch-fest-drop-item.active {
    background: linear-gradient(90deg, rgba(225,36,84,.07), transparent);
    color: #c0123e;
    font-weight: 600;
}

.sch-fest-drop-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex-shrink: 0;
}
.sch-fest-drop-item.active .sch-fest-drop-item-dot { opacity: 1; }

.sch-fest-drop-item-name { flex: 1; }

.sch-fest-drop-item-count {
    font-size: 11px;
    color: #9b7ec8;
    background: #f3eeff;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ── Day block ───────────────────────────────────────────────── */
.sch-day-block {
    margin-bottom: 40px;
}

.sch-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(225,36,84,.12), rgba(168,0,44,.08));
    border: 1px solid rgba(225,36,84,.2);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 4px;
}

.sch-day-icon { font-size: 22px; line-height: 1; }

.sch-day-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sch-day-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a0a2e;
    line-height: 1.2;
}

.sch-day-date {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #8b7aaa;
    letter-spacing: .5px;
}

.sch-day-count {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: rgba(225,36,84,.7);
    font-weight: 600;
    background: rgba(225,36,84,.08);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Timeline ─────────────────────────────────────────────────── */
.sch-timeline {
    padding: 8px 0 8px 20px;
}

.sch-no-slots {
    padding: 16px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #aaa;
    font-style: italic;
}

.sch-slot {
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* Rail: dot + vertical line */
.sch-slot-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22px;
    flex-shrink: 0;
    padding-top: 22px;
}

.sch-slot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e12454;
    box-shadow: 0 0 0 3px rgba(225,36,84,.18);
    flex-shrink: 0;
}

.sch-slot-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(180deg, rgba(225,36,84,.35) 0%, rgba(225,36,84,.08) 100%);
    margin-top: 4px;
    min-height: 24px;
}

/* Slot card */
.sch-slot-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(225,36,84,.1);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0 8px 12px;
    backdrop-filter: blur(6px);
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s, opacity 0.25s, filter 0.25s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sch-slot-card:hover {
    border-color: rgba(225,36,84,.3);
    box-shadow: 0 4px 18px rgba(225,36,84,.1);
    transform: translateX(2px);
}

/* ── highlight: lit card ── */
@keyframes sch-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225,36,84,.0), 0 6px 24px rgba(225,36,84,.18); }
    50%       { box-shadow: 0 0 0 5px rgba(225,36,84,.12), 0 6px 32px rgba(225,36,84,.30); }
}
@keyframes sch-sparkle-float {
    0%   { opacity: 0; transform: translateY(4px) scale(.6); }
    40%  { opacity: 1; transform: translateY(-2px) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(.7); }
}

.sch-slot-card--lit {
    background: linear-gradient(135deg, rgba(255,240,245,.98) 0%, rgba(255,255,255,.98) 100%);
    border-color: #e12454;
    border-width: 1.5px;
    transform: translateX(4px) scale(1.015);
    animation: sch-pulse-glow 2s ease-in-out infinite;
    z-index: 1;
}

.sch-slot-card--lit .sch-slot-team {
    color: #c0123e;
    font-weight: 700;
}

.sch-slot-card--lit .sch-slot-time-pill {
    background: linear-gradient(90deg, #e12454, #ff6b9d);
    color: #fff;
}

.sch-slot-dot--lit {
    background: #e12454;
    width: 14px;
    height: 14px;
    margin-left: -3px;
    box-shadow: 0 0 0 4px rgba(225,36,84,.2), 0 0 10px rgba(225,36,84,.4);
}

/* sparkle chips */
.sch-slot-sparkle {
    position: absolute;
    top: 6px;
    right: 10px;
    display: flex;
    gap: 5px;
    pointer-events: none;
}
.sch-slot-sparkle span {
    font-size: 11px;
    color: #e12454;
    opacity: 0;
    animation: sch-sparkle-float 1.6s ease-in-out infinite;
}
.sch-slot-sparkle span:nth-child(2) { animation-delay: .35s; }
.sch-slot-sparkle span:nth-child(3) { animation-delay: .7s; }

/* ── dimmed cards ── */
.sch-slot-card--dim {
    opacity: 0.3;
    filter: grayscale(60%);
    transform: none;
}

/* Index badge */
.sch-slot-idx {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f3eeff;
    color: #9b7ec8;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.sch-slot-idx--lit {
    background: #e12454;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(225,36,84,.2);
}

/* Avatar */
.sch-slot-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(225,36,84,.2);
    background: linear-gradient(135deg, #e12454, #a8002c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sch-slot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sch-slot-avatar-fallback {
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* Body */
.sch-slot-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sch-slot-team {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a0a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-slot-note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #8b7aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Time pill */
.sch-slot-time {
    flex-shrink: 0;
}

.sch-slot-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(225,36,84,.1), rgba(168,0,44,.08));
    border: 1px solid rgba(225,36,84,.2);
    border-radius: 20px;
    padding: 5px 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #a8002c;
    white-space: nowrap;
}

.sch-slot-time-icon { font-size: 12px; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sch-hero-title { font-size: 30px; letter-spacing: 3px; }
    .sch-hero-kanji { font-size: 100px; right: 4%; }
    .sch-body { padding: 32px 16px 48px; }
    .sch-slot-card { flex-wrap: wrap; gap: 10px; }
    .sch-slot-time { width: 100%; }
    .sch-day-name { font-size: 15px; }
}

/*--- # festival-skeleton ---*/
@keyframes fsk-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
@keyframes fsk-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fsk-pulse {
    background: linear-gradient(90deg,
        #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Card list skeletons ─────────────────────────────── */
.fsk-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fsk-card {
    display: flex;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(34,58,102,.06);
    border: 1px solid rgba(225,36,84,.06);
    opacity: 0;
    animation: fsk-fade-up 0.4s ease forwards;
}

.fsk-img {
    width: 300px;
    min-height: 220px;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}

.fsk-badge-status {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 90px;
    height: 24px;
    border-radius: 20px;
    background: rgba(255,255,255,.45);
}

.fsk-badge-date {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 52px;
    background: rgba(255,255,255,.55);
    border-radius: 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.fsk-bd-month { width: 34px; height: 9px;  border-radius: 4px; background: rgba(34,58,102,.15); }
.fsk-bd-day   { width: 28px; height: 18px; border-radius: 4px; background: rgba(34,58,102,.15); }
.fsk-bd-year  { width: 34px; height: 9px;  border-radius: 4px; background: rgba(34,58,102,.15); }

.fsk-body {
    flex: 1;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
}

.fsk-cat {
    width: 80px;
    height: 20px;
    border-radius: 20px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}

.fsk-name {
    height: 22px;
    width: 75%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}
.fsk-name--short { width: 45%; height: 18px; }

.fsk-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fsk-meta-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}
.fsk-meta-text { width: 160px; height: 13px; border-radius: 5px; background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%); background-size: 1200px 100%; animation: fsk-shimmer 1.7s ease-in-out infinite; }
.fsk-meta-text--short { width: 110px; }

.fsk-summary { width: 100%; height: 12px; border-radius: 5px; background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%); background-size: 1200px 100%; animation: fsk-shimmer 1.7s ease-in-out infinite; }
.fsk-summary--short { width: 60%; }

.fsk-cta {
    width: 120px;
    height: 36px;
    border-radius: 8px;
    margin-top: 4px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}

/* ── Calendar sidebar skeleton ───────────────────────── */
.fsk-cal {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(34,58,102,.08);
    border-top: 3px solid rgba(225,36,84,.2);
    padding-bottom: 16px;
}

.fsk-cal-header {
    height: 52px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
    margin-bottom: 14px;
}

.fsk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0 14px;
    margin-bottom: 16px;
}
.fsk-cal-cell {
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}

.fsk-cal-legend {
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fsk-cal-legend-row {
    height: 16px;
    border-radius: 5px;
    width: 85%;
    background: linear-gradient(90deg, #f0ebfa 0%, #e6ddf5 38%, #faf7ff 55%, #f0ebfa 100%);
    background-size: 1200px 100%;
    animation: fsk-shimmer 1.7s ease-in-out infinite;
}

/* mobile */
@media (max-width: 768px) {
    .fsk-card { flex-direction: column; }
    .fsk-img  { width: 100%; min-height: 160px; }
}

/*--- # festival-skeleton-orbit ---*/
@keyframes fsk-arm-spin      { to { transform: rotate(360deg); } }
@keyframes fsk-petal-counter { to { transform: rotate(-360deg) scale(1.15); } from { transform: rotate(0deg) scale(0.9); } }
@keyframes fsk-hub-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(225,36,84,.13), 0 0 22px rgba(225,36,84,.18); transform: translate(-50%,-50%) scale(1); }
    50%       { box-shadow: 0 0 0 11px rgba(225,36,84,.07), 0 0 38px rgba(225,36,84,.30); transform: translate(-50%,-50%) scale(1.07); }
}
@keyframes fsk-ring-spin {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes fsk-dot-blink {
    0%, 80%, 100% { opacity: 0; }
    40%           { opacity: 1; }
}

.fsk-wrap {
    position: relative;
}

/* centred orbit stage */
.fsk-orbit-scene {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 32px auto 10px;
}

/* dashed guide ring */
.fsk-orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 108px; height: 108px;
    border-radius: 50%;
    border: 1.5px dashed rgba(225,36,84,.22);
    transform: translate(-50%,-50%);
    animation: fsk-ring-spin 8s linear infinite;
}

/* central kanji hub */
.fsk-orbit-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe6ee 0%, #ffd0e0 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    color: #e12454;
    animation: fsk-hub-pulse 2.2s ease-in-out infinite;
    z-index: 1;
}

/* each arm is a zero-size pivot that rotates */
.fsk-orbit-arm {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform-origin: 0 0;
    animation: fsk-arm-spin 2s linear infinite;
}

/* petal sits at the end of the arm */
.fsk-orbit-petal {
    position: absolute;
    left: 48px;
    top: -12px;
    font-size: 20px;
    display: block;
    animation: fsk-petal-counter 2s linear infinite;
    filter: drop-shadow(0 1px 5px rgba(225,36,84,.35));
}

/* label + animated dots */
.fsk-orbit-label {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #b89ec8;
    letter-spacing: 0.5px;
    margin: 0 0 28px;
}
.fsk-orbit-dots span {
    display: inline-block;
    animation: fsk-dot-blink 1.4s ease-in-out infinite;
}
.fsk-orbit-dots span:nth-child(2) { animation-delay: 0.2s; }
.fsk-orbit-dots span:nth-child(3) { animation-delay: 0.4s; }

/*--- # sakura-orbit (shared loading component) ---*/
.sk-orbit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0 24px;
}
.sk-orbit-wrap--sm .sk-orbit-scene { width: 90px;  height: 90px; }
.sk-orbit-wrap--sm .sk-orbit-hub   { width: 32px;  height: 32px; font-size: 14px; }
.sk-orbit-wrap--sm .sk-orbit-ring  { width: 76px;  height: 76px; }
.sk-orbit-wrap--sm .sk-orbit-arm   { width: 0; }
.sk-orbit-wrap--sm .sk-orbit-petal { left: 32px; top: -9px; font-size: 15px; }

.sk-orbit-scene {
    position: relative;
    width: 130px;
    height: 130px;
}
.sk-orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 108px; height: 108px;
    border-radius: 50%;
    border: 1.5px dashed rgba(225,36,84,.22);
    transform: translate(-50%,-50%);
    animation: fsk-ring-spin 8s linear infinite;
}
.sk-orbit-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe6ee 0%, #ffd0e0 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    color: #e12454;
    animation: fsk-hub-pulse 2.2s ease-in-out infinite;
    z-index: 1;
}
.sk-orbit-arm {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform-origin: 0 0;
    animation: fsk-arm-spin 2s linear infinite;
}
.sk-orbit-petal {
    position: absolute;
    left: 48px; top: -12px;
    font-size: 20px;
    display: block;
    animation: fsk-petal-counter 2s linear infinite;
    filter: drop-shadow(0 1px 5px rgba(225,36,84,.35));
}
.sk-orbit-label {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #b89ec8;
    letter-spacing: 0.5px;
    margin: 6px 0 0;
}
.sk-orbit-dots span {
    display: inline-block;
    animation: fsk-dot-blink 1.4s ease-in-out infinite;
}
.sk-orbit-dots span:nth-child(2) { animation-delay: 0.2s; }
.sk-orbit-dots span:nth-child(3) { animation-delay: 0.4s; }

/*--- # wishes-hold-button ---*/
.wishes-btn {
    position: relative;
    cursor: pointer;
    pointer-events: all;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    transition: filter 0.2s;
}

/* Growing ring while holding */
.wishes-ring {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.wishes-ring-bg {
    fill: none;
    stroke: rgba(225,36,84,0.15);
    stroke-width: 2.5;
}
.wishes-ring-fill {
    fill: none;
    stroke: #e12454;
    stroke-width: 2.5;
    stroke-dasharray: 125.7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(225,36,84,0.7));
}

/* Pulse glow while holding */
.wishes-holding {
    animation: wishes-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes wishes-pulse {
    from { filter: drop-shadow(0 0 0px rgba(225,36,84,0)); }
    to   { filter: drop-shadow(0 0 10px rgba(225,36,84,0.65)); }
}

/* Pop + fade on burst */
.wishes-burst {
    animation: wishes-pop 0.5s cubic-bezier(.17,.89,.32,1.27) forwards;
}
@keyframes wishes-pop {
    0%   { transform: scale(1);   opacity: 1; }
    45%  { transform: scale(1.35); filter: brightness(2) drop-shadow(0 0 16px #e12454); opacity: 1; }
    100% { transform: scale(0.7);  opacity: 0; }
}

/* Sakura petals flying outward */
.wishes-petal {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    z-index: 20;
    animation: wish-petal-fly 0.85s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes wish-petal-fly {
    0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1.3) rotate(200deg); opacity: 0; }
}

/*--- # festival-detail ---*/
.fdet-loading {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fdet-not-found {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #223a66;
}
.fdet-not-found-kanji {
    font-size: 80px;
    color: #e12454;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 16px;
}

/* Hero */
.fdet-header {
    min-height: 400px;
    background-color: #223a66;
}
.fdet-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(34,58,102,0.75) 100%);
}
.fdet-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fdet-header-location {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    letter-spacing: 0.04em;
}
.fdet-header-title {
    font-size: clamp(26px, 5vw, 46px);
}

/* Status badge */
.fdet-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fdet-badge--lg {
    font-size: 13px;
    padding: 5px 16px;
}
.fdet-badge--upcoming { background: #c9932a; color: #fff; }
.fdet-badge--ongoing  { background: #e12454; color: #fff; }
.fdet-badge--done     { background: #5A7A8C; color: #fff; }

/* Body layout */
.fdet-body {
    padding: 50px 0 60px;
}
.fdet-excerpt {
    font-size: 18px;
    color: #5A7A8C;
    line-height: 1.75;
    border-left: 4px solid #e12454;
    padding-left: 18px;
    margin-bottom: 32px;
    font-style: italic;
}
.fdet-content {
    color: #3a4a5a;
    font-size: 16px;
    line-height: 1.85;
}
.fdet-content h1, .fdet-content h2, .fdet-content h3 {
    color: #223a66;
    margin: 28px 0 14px;
    font-family: 'Shippori Mincho', serif;
}
.fdet-content h2 { font-size: 22px; border-bottom: 1px solid #e9d5c0; padding-bottom: 8px; }
.fdet-content h3 { font-size: 18px; }
.fdet-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 16px 0;
}
.fdet-content p { margin-bottom: 16px; }
.fdet-content ul, .fdet-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
}
.fdet-content a { color: #e12454; }
.fdet-content blockquote {
    border-left: 4px solid #c9932a;
    margin: 20px 0;
    padding: 12px 20px;
    background: rgba(201,147,42,0.06);
    color: #5A7A8C;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}

.fdet-no-content {
    text-align: center;
    padding: 60px 20px;
    color: #bbb;
}
.fdet-no-content span { font-size: 60px; display: block; margin-bottom: 12px; opacity: 0.35; }

.fdet-footer-nav {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9e9e9;
}
.fdet-back-btn {
    display: inline-block;
    color: #e12454;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: opacity 0.2s;
}
.fdet-back-btn:hover { opacity: 0.7; }

/* Sidebar */
.fdet-sidebar {
    padding-left: 20px;
    position: sticky;
    top: 100px;
}
.fdet-sidebar-block {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0e8e0;
}
.fdet-sidebar-block:last-child { border-bottom: none; }
.fdet-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c9932a;
    margin-bottom: 12px;
}
.fdet-sidebar-value {
    font-size: 15px;
    color: #223a66;
}
.fdet-location { line-height: 1.6; }

/* Date range display */
.fdet-date-range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fdet-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e9d5c0;
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 70px;
    box-shadow: 0 2px 8px rgba(34,58,102,0.06);
}
.fdet-date-day {
    font-size: 28px;
    font-weight: 700;
    color: #e12454;
    line-height: 1;
}
.fdet-date-month {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #223a66;
    margin-top: 2px;
}
.fdet-date-year {
    font-size: 11px;
    color: #5A7A8C;
    margin-top: 1px;
}
.fdet-date-arrow {
    font-size: 20px;
    color: #c9932a;
}

.fdet-sidebar-img-wrap {
    border-bottom: none;
    padding-bottom: 0;
}
.fdet-sidebar-img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(34,58,102,0.12);
}

@media (max-width: 991px) {
    .fdet-sidebar {
        padding-left: 0;
        margin-top: 40px;
    }
    .fdet-sidebar-block { padding-bottom: 16px; margin-bottom: 16px; }
}