/* Base Resets and Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: #F7F5F0;
    color: #1A1A1A;
}

/* ---------------------------------
   Loading Animation Overlay
----------------------------------- */
.global-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Solid cream background */
    background-color: #F7F5F0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* Block interactions during load */
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px; /* fixed width for the gauge */
}

.loader-title {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #1A1A1A; /* Dark brown/black */
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
}

.loader-gauge-container {
    width: 100%;
    height: 1px;
    background-color: rgba(26, 26, 26, 0.15); /* faint line */
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.loader-gauge-fill {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #1A1A1A;
    transform: scaleX(0); /* starts empty */
    transform-origin: left center;
}

.loader-counter {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #1A1A1A;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    align-self: flex-end; /* right-align */
}

/* ---------------------------------
   Barba.js Page Transition Wipe
----------------------------------- */
.page-transition-wipe {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #F7F5F0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(100%); /* Start hidden at bottom */
    pointer-events: none;
}

.page-transition-text {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #1A1A1A;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    opacity: 0; /* Hidden initially */
}

html.is-routing .page-transition-wipe {
    transform: translateY(0%);
}

html.is-routing .page-transition-text {
    opacity: 1;
}

/* ---------------------------------
   Global Header (Fixed & Difference Blended)
----------------------------------- */
.global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Avoid scrollbar overflow */
    padding: 30px 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    color: #F7F5F0;
    /* Cream text (turns dark against cream bg, light against dark bg) */
    mix-blend-mode: difference;
    pointer-events: none;
    /* Let clicks pass to content below */
}

.header-logo {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    pointer-events: auto;
    /* Re-enable clicks for logo */
    line-height: 1.2;
}

.header-nav {
    display: flex;
    align-items: center;
    pointer-events: auto;
    /* Re-enable clicks for buttons */
}

.btn-booking,
.btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F7F5F0;
    /* Cream border */
    background: transparent;
    color: #F7F5F0;
    /* Cream text */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}

.btn-booking {
    height: 48px;
    padding: 0 20px;
    border-right: none;
    /* Merge border with hamburger */
    letter-spacing: 0.05em;
}

.btn-booking .en {
    margin-right: 6px;
    font-size: 0.85rem;
    font-weight: 900;
}

.btn-booking .jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
}

.btn-booking:hover,
.btn-hamburger:hover {
    opacity: 0.6;
}

.btn-hamburger {
    width: 48px;
    height: 48px;
    flex-direction: column;
    gap: 6px;
}

.btn-hamburger .line {
    width: 20px;
    height: 1px;
    background-color: #F7F5F0;
    transition: transform 0.3s ease;
}

.btn-hamburger:hover .line:first-child {
    transform: translateY(2px);
}

.btn-hamburger:hover .line:last-child {
    transform: translateY(-2px);
}

.btn-hamburger.is-active .line:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.btn-hamburger.is-active .line:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------------------------------
   Mask Reveal Utilities
----------------------------------- */
.mask-wrap {
    overflow: hidden;
    display: block;
}

.mask-wrap.inline {
    display: inline-block;
    vertical-align: top;
}

.mask-reveal {
    display: block;
}

/* ---------------------------------
   Layout Structure
----------------------------------- */
.section-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Removed background-color to see fixed image behind it */
}

.mask-text {
    font-size: 28vw;
    /* Default size for PC */
}

/* Layer 1: Background Image */
.hero-image-container {
    position: fixed;
    /* CHANGED to fixed to act as universal background */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    /* Set default scale to match the start of the scroll animation */
}

/* Layer 2: SVG Mask Overlay */
.hero-mask-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.svg-mask {
    position: absolute;
    top: 0;
    left: 0;
}

/* Layer 3: Typography Layer */
.poster-typography {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* Meta Data Blocks */
.poster-meta {
    position: absolute;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Top right is on the cream background, so it needs to be dark */
.poster-meta.top-right {
    top: 5%;
    right: 4%;
    text-align: right;
    color: #1A1A1A;
}

/* Bottom left is on the dark image, so it needs to be light */
.poster-meta.bottom-left {
    bottom: 10%; /* Increased from 5% to avoid EST.2026 overlap */
    left: 4%;
    color: #F7F5F0;
    font-weight: 400;
}

/* Bottom right is on the dark image */
.poster-meta.bottom-right {
    bottom: 3%;
    right: 4%;
    color: #F7F5F0;
}

.large-num {
    font-size: 4vw;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #F7F5F0;
    z-index: 10;
}

/* ---------------------------------
   Content Sections
----------------------------------- */
.content-area {
    position: relative;
    z-index: 10;
    background: transparent;
    pointer-events: none;
    /* Let background clicks pass through */
}

.content-area * {
    pointer-events: auto;
}

.section-concept {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align content to the right (Zig-Zag flow) */
    padding: 0 10vw;
    color: #F7F5F0;
}

.concept-content {
    max-width: 600px;
    padding-right: 5vw;
    /* Slight indent from the right edge */
}

.section-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
}

.section-title {
    font-size: 2.4rem;
    line-height: 1.4;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.section-text {
    font-size: 0.9rem;
    line-height: 2.0;
    opacity: 0.9;
}

/* ---------------------------------
   Our Concept Detail (Sticky Scroll)
----------------------------------- */
.section-concept-detail {
    width: 100vw;
    height: 100vh;
    /* GSAP will pin this container */
    position: relative;
    color: #F7F5F0;
}

.concept-detail-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left: Text Area */
.concept-text-area {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5vw 0 10vw;
}

/* Right: Image Area */
.concept-image-area {
    width: 55%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5vw 0 0;
}

.editorial-image-stack {
    position: relative;
    height: 60vh;
    /* Base height */
    aspect-ratio: 3 / 4;
    /* Force 3:4 vertical ratio */
    max-width: 100%;
    /* Ensure it doesn't overflow container width */
    overflow: hidden;
}

.editorial-image {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: auto;
    height: auto;
    overflow: hidden;
    /* Keeps inner image scale effect contained */
}

/* Initial clip-path for image wipe effect. */
.img-1,
.img-2,
.img-3 {
    clip-path: inset(100% 0 0 0);
    /* Hidden at the bottom initially */
}

.editorial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
}

/* ---------------------------------
   Whiteout Transition & Services (Horizontal Scroll)
----------------------------------- */
.whiteout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F7F5F0;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    /* Above fixed-bg (0) but below content-area (10) */
}

.section-services {
    position: relative;
    z-index: 10;
    /* Ensure it sits above the whiteout overlay */
    width: 100vw;
    height: 100vh;
    background-color: #F7F5F0;
    /* Bright cream space */
    color: #1A1A1A;
    /* Dark text */
    overflow: hidden;
}

.services-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100vh;
    padding-left: 0;
}

/* Individual Panel */
.service-panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* Vertical Intro (SERVICE) */
.vertical-intro {
    position: absolute;
    left: 2vw;
    /* Flush with the left edge of CUT panel, slight margin */
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* MUST BE UPRIGHT */
    font-size: clamp(4rem, 9vh, 10vh);
    /* Safe size for 7 letters to fit in 100vh */
    font-weight: 900;
    color: #1A1A1A;
    letter-spacing: -0.05em;
    /* Tighter vertical spacing */
    line-height: 0.85;
    /* Squeeze the letters together vertically */
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

/* Massive Black Title (e.g. CUT) at bottom */
.massive-title {
    position: absolute;
    bottom: -2vh;
    /* Safer cutoff */
    left: 15vw;
    /* Distance from vertical SERVICE */
    font-size: min(22vw, 24vh);
    /* Safely adjusts to window size */
    font-weight: 900;
    color: #1A1A1A;
    line-height: 0.75;
    margin: 0;
    letter-spacing: -0.04em;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* Split Layout */
.split-layout {
    display: flex;
    width: 100vw;
    box-sizing: border-box;
    padding-left: 15vw;
    /* Match massive-title alignment */
    padding-right: 5vw;
    height: 60vh;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    position: relative;
    margin-bottom: 5vh;
}

/* Text Column */
.text-column {
    width: 55vw;
    /* Wider for more text */
    padding-right: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-ja-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.service-subtitle {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 2rem;
    letter-spacing: 0.15em;
}

.service-description {
    font-size: 0.95rem;
    line-height: 2.2;
    color: #4A4A4A;
    margin-bottom: 3rem;
}

.service-price-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.service-price-list li {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: #1A1A1A;
}

.service-price-list li span:last-child {
    font-weight: 600;
}

/* Image Column */
.image-column {
    width: 30vw;
    height: 100%;
}

.image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.editorial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
}

/* ==========================================================================
   STAFF SECTION (Phase 3)
   ========================================================================== */
.section-staff {
    position: relative;
    width: 100vw;
    min-height: 150vh;
    background-color: #F7F5F0;
    /* Warm cream background to match the MCM aesthetic */
    color: #1A1A1A;
    z-index: 20;
    /* Sit above the pinned SERVICES section */
    margin-top: -100vh;
    /* Curtain overlap effect! */
    padding-top: 20vh;
    padding-bottom: 25vh;
}

.staff-container {
    width: 85vw;
    margin: 0 auto;
}

.staff-header {
    text-align: center;
    margin-bottom: 15vh;
}

.staff-title {
    font-size: clamp(3rem, 7vw, 8rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}


/* 3-Column Staggered Grid */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
}

/* Temporary: 2-Column Layout */
.staff-grid.is-two-staff {
    grid-template-columns: repeat(2, 1fr);
    gap: 8vw;
    max-width: 80%;
    margin: 0 auto;
}

/* Staggering (Inverted V-shape) */
.staff-left {
    margin-top: 15vh;
}

.staff-center {
    margin-top: 0;
}

.staff-right {
    margin-top: 25vh;
    /* Even more staggered for organic feel */
}

/* Staff Card */
.staff-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.staff-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.staff-img {
    width: 100%;
    height: 120%;
    /* Taller for GSAP parallax y-translation */
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Overlay for Reveal Animation */
.staff-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: auto;
    height: auto;
    background-color: #F7F5F0;
    z-index: 10;
    /* Match section background */
}

.staff-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.staff-role {
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    border: 1px solid #DDD;
    padding: 0.4em 1em;
    border-radius: 20px;
    background-color: #FFF;
}

.staff-name-en {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
    color: #1A1A1A;
}

.staff-name-ja {
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.staff-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #444;
    text-align: left;
    margin: 0 auto;
    max-width: 90%;
    /* Keep it contained within the card */
}

/* ==========================================
   Phase 3.5: GALLERY Section
   ========================================== */
.section-gallery {
    background-color: #F7F5F0;
    position: relative;
    z-index: 20;
    padding: 14vh 0 16vh;
    color: #1A1A1A;
    overflow: hidden;
}

.gallery-container {
    width: 88vw;
    max-width: 1440px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
    margin-bottom: 8vh;
}

.gallery-subtitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #888;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.gallery-title {
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #1A1A1A;
    line-height: 1;
    margin: 0;
}

/* 4-Column Mosaic Grid for PC (Architectural Poster Collage) */
.gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.75fr 1.5fr 0.8fr;
    gap: 16px;
    align-items: start;
}

.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Col 1 (Left): Drops down from center peak */
.gallery-col.col-1 {
    margin-top: 6.5vw;
}

/* Col 2 (Center-Left): The highest peak of the poster */
.gallery-col.col-2 {
    margin-top: 0;
}

/* Col 3 (Center-Right): Slightly lower than Col 2, extends down to the lowest bottom */
.gallery-col.col-3 {
    margin-top: 2.2vw;
}

/* Col 4 (Right): Narrow column, significantly dropped down */
.gallery-col.col-4 {
    margin-top: 11.5vw;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background-color: #ECE9E1;
    width: 100%;
}

/* Aspect ratios & specialized placement matching reference collage */
.gallery-item.item-1 { aspect-ratio: 16/10; }
.gallery-item.item-2 { aspect-ratio: 1/1; width: 80%; margin-left: auto; }

.gallery-item.item-3 { aspect-ratio: 16/11; }
.gallery-item.item-4 { aspect-ratio: 1/1; }

.gallery-item.item-5 { aspect-ratio: 1/1.15; }
.gallery-item.item-6 { aspect-ratio: 3/4.2; }

.gallery-item.item-7 { aspect-ratio: 16/11; }
.gallery-item.item-8 { aspect-ratio: 1/1.05; }

.gallery-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.gallery-item:hover .gallery-img-wrapper img {
    transform: scale(1.05);
}

/* Gallery Footer / Button */
.gallery-footer {
    display: flex;
    justify-content: center;
    margin-top: 8vh;
}

.btn-gallery {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 2.4rem;
    border: 1px solid #1A1A1A;
    color: #1A1A1A;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: transparent;
}

.btn-gallery .btn-arrow {
    display: inline-block;
    transition: transform 0.4s ease;
}

.btn-gallery:hover {
    background-color: #1A1A1A;
    color: #F7F5F0;
}

.btn-gallery:hover .btn-arrow {
    transform: translate(3px, -3px);
}

/* ==========================================
   Phase 4: NEWS Section
   ========================================== */
.section-news {
    background-color: #F7F5F0;
    position: relative;
    z-index: 20;
    padding: 0;
    height: 100vh;
    /* Full viewport height for GSAP pinning */
    overflow: hidden;
}

.news-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.news-left {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 5vw;
}

.massive-title-news {
    font-size: clamp(6rem, 12vw, 15rem);
    font-weight: 900;
    line-height: 0.8;
    color: #1A1A1A;
    margin: 0;
    letter-spacing: -0.02em;
}

.news-right {
    width: 55%;
    padding: 10vh 5vw 10vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    --line-width: 0%;
}

.news-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    width: var(--line-width);
}

.news-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* For GSAP animation initial state */
    opacity: 0;
    transform: translateY(30px);
}

.news-item a {
    display: flex;
    align-items: center;
    padding: 2rem 0;
    text-decoration: none;
    color: #1A1A1A;
    transition: padding-left 0.4s ease, color 0.4s ease;
}

.news-item a:hover {
    padding-left: 1rem;
    color: #888;
}

.news-date {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    width: 120px;
    flex-shrink: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.news-title {
    font-size: 1.1rem;
    font-weight: 500;
    flex-grow: 1;
    padding-right: 2rem;
}

.news-arrow {
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}

.news-item a:hover .news-arrow {
    transform: translateX(10px);
}

.news-more {
    margin-top: 3rem;
    text-align: right;
    /* For GSAP animation initial state */
    opacity: 0;
}

.btn-view-more {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1A1A1A;
    text-decoration: none;
    border: 1px solid #1A1A1A;
    padding: 1rem 3rem;
    transition: all 0.4s ease;
}

.btn-view-more:hover {
    background-color: #1A1A1A;
    color: #F7F5F0;
}

/* ==========================================
   Phase 5: INFORMATION Section (Booking/Access)
   ========================================== */
.section-info {
    position: relative;
    z-index: 30;
    /* Higher than #news (20) to slide over it */
    margin-top: -100vh;
    /* Slides up over the pinned #news section */
    width: 100vw;
    background-color: #1F1A17;
    /* Deep warm charcoal derived from interior wood */
    color: #F7F5F0;
    overflow: hidden;
}

.info-container {
    display: flex;
    width: 100%;
    height: 100vh;
    /* Exactly 100vh for pinning */
    overflow: hidden;
}

/* Left: Typography TOC */
.info-left {
    width: 50%;
    height: 100vh;
    padding: 0 5vw 0 10vw;
    display: flex;
    align-items: center;
}

.info-left-content {
    width: 100%;
}

.info-main-title {
    font-size: clamp(2rem, 4vw, 4rem);
    /* Much more compact */
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    /* Reduced margin */
    color: #F7F5F0;
}

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

.info-item {
    margin-bottom: 1.5rem;
    /* Reduced margin */
    padding-top: 1rem;
    border-top: 1px solid rgba(247, 245, 240, 0.15);
    /* GSAP animation initial states */
    opacity: 0;
    transform: translateY(20px);
}

.info-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 1rem;
}

.info-num {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1.5rem;
    opacity: 0.6;
}

.info-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
}

.info-content {
    padding-left: 2.7rem;
    /* Indent to match title */
}

.info-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.info-tel {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* Much smaller */
    font-weight: 900;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    line-height: 1;
}

.info-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-info {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border: 1px solid #F7F5F0;
    color: #F7F5F0;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.4s ease;
}

.btn-info:hover {
    background-color: #F7F5F0;
    color: #1F1A17;
}

.info-text {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.3rem;
    opacity: 0.85;
}

.access-label {
    display: inline-block;
    width: 50px;
    font-weight: 600;
}

.info-map-link {
    display: inline-block;
    margin-top: 1rem;
    color: #F7F5F0;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(247, 245, 240, 0.4);
    padding-bottom: 0.2rem;
    transition: border-color 0.4s ease;
}

.info-map-link:hover {
    border-color: #F7F5F0;
}

/* Right: Framed Image */
.info-right {
    width: 50%;
    height: 100vh;
    padding: 0 5vw 0 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-image-frame {
    width: 80%;
    height: 65vh;
    /* Smaller framed height */
    max-height: 700px;
    border: 8px solid #F7F5F0;
    /* Slightly thinner frame */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.info-img {
    width: 100%;
    height: 130%;
    /* Taller than frame for parallax scrub */
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: -15%;
    left: 0;
    /* will-change: transform; set by GSAP */
}

/* ==========================================
   11. Footer
   ========================================== */
.global-footer {
    background-color: #1F1A17;
    /* Dark tone continued from Info section */
    color: #F7F5F0;
    position: relative;
    padding: 10vh 5vw 4vh 5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 50vh;
    z-index: 40;
    /* Above Info section */
}

.footer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.footer-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.footer-link {
    color: #F7F5F0;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.3rem;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #F7F5F0;
    transition: width 0.4s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(247, 245, 240, 0.2);
    padding-top: 2rem;
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.back-to-top {
    background: none;
    border: none;
    color: #F7F5F0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    opacity: 0.7;
}

.footer-huge-text {
    position: absolute;
    bottom: -6vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 32vw;
    font-weight: 900;
    color: rgba(247, 245, 240, 0.04);
    /* Extremely faint */
    line-height: 0.8;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* ==========================================
   12. Fullscreen Menu
   ========================================== */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1F1A17; /* Dark background */
    z-index: 90; /* Below header (100) */
    display: flex;
    overflow: hidden;
    /* GSAP will animate clip-path for wipe down */
    clip-path: inset(0 0 100% 0);
    pointer-events: none; /* Initially non-interactive */
}

.fullscreen-menu.is-active {
    pointer-events: auto;
}

.menu-mobile-watermark {
    display: none; /* Only show on mobile */
}

/* Left Image Column (PC) */
.menu-left {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5vw;
}

.menu-img-frame {
    width: 100%;
    height: 70vh;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    /* initial state for GSAP */
    opacity: 0;
    transform: scale(0.95);
}

.menu-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1); /* For GSAP zoom out */
}

/* Right Links Column (PC) */
.menu-right {
    width: 55%;
    height: 100%;
    padding: 15vh 10vw 10vh 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6vh; /* Increased gap for fewer items */
}

.menu-nav-item {
    overflow: hidden; /* For stagger reveal */
}

.menu-link {
    font-size: clamp(2rem, 3.5vw, 4rem); /* Reduced size */
    font-weight: 900;
    color: #F7F5F0;
    text-decoration: none;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 1.5rem;
    transform: translateY(100%); /* Initial for GSAP */
    transition: opacity 0.4s ease, color 0.4s ease;
}

.menu-link .jp {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    opacity: 0.7;
    font-family: 'Noto Sans JP', sans-serif;
}

.menu-nav-list:hover .menu-link {
    opacity: 0.3; /* Dim all others */
}

.menu-nav-list .menu-link:hover {
    opacity: 1; /* Highlight hovered */
}

.menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    opacity: 0; /* GSAP reveal */
    transform: translateY(20px);
}

.btn-menu-booking {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    border: 1px solid #F7F5F0;
    color: #F7F5F0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.4s ease;
}

.btn-menu-booking .jp {
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
}

.btn-menu-booking:hover {
    background-color: #F7F5F0;
    color: #1F1A17;
}

.menu-sns {
    display: flex;
    gap: 2rem;
}

.menu-sns a {
    color: #F7F5F0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.2rem;
}

.menu-sns a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #F7F5F0;
    transition: width 0.4s ease;
}

.menu-sns a:hover::after {
    width: 100%;
}

/* ==========================================
   Responsive Adjustments (Mobile/Tablet)
   ========================================== */
@media (max-width: 768px) {

    /* 01. Header */
    .global-header {
        padding: 20px 5vw;
    }

    .header-logo {
        font-size: 1.1rem;
        /* Slightly smaller */
    }

    .btn-booking {
        padding: 0.6rem 1rem;
        height: 40px;
    }

    .btn-booking .en {
        font-size: 0.75rem;
    }

    .btn-booking .jp {
        font-size: 0.6rem;
    }

    .btn-hamburger {
        width: 40px;
        height: 40px;
    }

    /* 02. Hero Typography */
    .mask-text {
        font-size: 35vw;
        /* Slightly smaller to leave some margin, but fill width nicely */
    }

    .poster-meta.bottom-left {
        bottom: 18%; /* Increased from 12% to avoid EST.2026 overlap */
        font-size: 0.9rem;
        /* Slightly smaller to fit mobile */
    }

    .poster-meta.bottom-right {
        bottom: 40px;
    }

    .large-num {
        font-size: 15vw;
        /* Make /01 huge on mobile */
    }

    /* ==========================================
       03. Welcome Section (Mobile)
       ========================================== */
    .section-concept {
        padding: 0 5vw;
        justify-content: flex-start;
        /* Keep everything left-aligned */
    }

    .concept-content {
        padding-right: 0;
        max-width: 100%;
    }

    .section-concept .section-title {
        font-size: 1.8rem;
    }

    .section-concept .section-text {
        font-size: 0.85rem;
    }

    /* ==========================================
       04. Our Concept Section (Mobile GSAP Pin)
       ========================================== */
    .section-concept-detail {
        padding: 0;
        /* Remove horizontal padding so we can use absolute positioning */
    }

    .concept-detail-container {
        position: relative;
        height: 100dvh;
        /* Use dynamic viewport height so bottom margin isn't hidden by browser UI */
        width: 100vw;
        overflow: hidden;
        /* Contains the scroll effect */
        display: block;
        /* Override flex */
    }

    .concept-text-area {
        width: 100%;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
    }

    .concept-text-header {
        position: absolute;
        top: 120px;
        /* Below global header, a bit more breathing room */
        left: 5vw;
        width: 90vw;
        z-index: 10;
    }

    .concept-text-header .section-title {
        font-size: 1.7rem;
        /* Slightly larger for readability */
        margin-bottom: 0;
    }
    .concept-image-area {
        position: absolute;
        top: 250px;
        /* Below the title */
        bottom: 25px;
        /* Leave exactly 5px margin at the bottom */
        height: auto;
        /* Override PC height: 100% so top and bottom dictate size */
        left: 50%;
        transform: translateX(-50%);
        /* Center horizontally */
        width: 85vw;
        /* Almost full width */
        max-width: 400px;
        /* Cap width for larger phones */
        padding: 0; /* REMOVE inherited PC padding-right to fix overlay width bug */
        /* Removed aspect-ratio, height is now responsive between top and bottom */
        overflow: hidden;
        z-index: 5;
        --overlay-opacity: 0; /* Animated by GSAP */
    }

    /* The dark overlay that fades in */
    .concept-image-area::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        opacity: var(--overlay-opacity);
        pointer-events: none;
        z-index: 10;
    }

    .editorial-image-stack {
        display: block;
        /* Overlap images */
        position: relative;
        width: 100%;
        height: 100%;
    }

    .editorial-image-stack .editorial-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .editorial-image-stack img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .concept-text-body {
        position: absolute;
        top: 320px;
        /* Overlay text position, pushed down to clear title */
        left: 5vw;
        width: 90vw;
        z-index: 20;
        color: #F7F5F0;
        /* White text for contrast */
        /* Initially pushed down and hidden (managed by GSAP) */
        transform: translateY(100vh);
        opacity: 0;
    }

    .concept-text-body .section-text {
        font-size: 0.9rem;
        line-height: 2.2;
    }

    /* =========================================
       05 Services (Mobile Redesign)
       ========================================= */
    .services-scroll-container {
        display: block; /* Disable horizontal flex */
        width: 100vw;
        height: 100vh; /* Fixed height for sticky container */
        padding: 0;
    }

    .service-panel.panel-intro {
        display: none; /* Hide intro panel for mobile */
    }

    .service-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        display: block; /* Remove flex centering */
        overflow: hidden;
    }

    /* SERVICE title (Horizontal at Top) */
    .vertical-intro {
        position: absolute;
        top: 100px; /* Below header */
        left: 5vw;
        writing-mode: horizontal-tb; /* Switch to horizontal */
        text-orientation: mixed;
        transform: none;
        font-size: 4rem; /* Increased size as requested */
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* CUT, COLOR, PERM titles (Vertical on Left) */
    .massive-title {
        position: absolute;
        top: 190px; /* Top-aligned to match the image column */
        left: 0; /* Flush left as requested */
        transform: none; /* Remove vertical centering */
        bottom: auto;
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 15vh; /* Massive vertical text */
        line-height: 0.8;
        letter-spacing: -0.05em;
        margin: 0;
    }

    /* Split Layout adjustment */
    .split-layout {
        display: block;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    /* Image area (Centered like Concept) */
    .service-panel .image-column {
        position: absolute;
        top: 190px; /* Push down a bit for the larger SERVICE title */
        bottom: 25px; /* Margin at bottom */
        height: auto;
        left: 50%;
        transform: translateX(-43%); /* Slightly offset to clear massive vertical text */
        width: 80vw;
        max-width: 400px;
        padding: 0;
        margin: 0;
        --overlay-opacity: 0; /* GSAP animation */
        clip-path: inset(100% 0 0 0); /* Initial state: hidden for wipe */
    }

    .service-panel .image-column::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        opacity: var(--overlay-opacity);
        pointer-events: none;
        z-index: 10;
    }

    .service-panel .image-column img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Text Column (Overlay) */
    .service-panel .text-column {
        position: absolute;
        top: 270px; /* Push down into the image area */
        left: 55%;
        transform: translateX(-43%);
        width: 70vw;
        max-width: 350px;
        z-index: 20;
        color: #F7F5F0; /* White text for contrast */
        opacity: 0; /* Initial hidden */
    }

    /* Change specific text colors for overlay */
    .service-panel .service-ja-title {
        font-size: 1.5rem;
        margin-bottom: 5px;
        color: inherit;
    }

    .service-panel .service-subtitle {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 20px;
        color: inherit;
    }

    .service-panel .service-description {
        font-size: 0.85rem;
        line-height: 1.8;
        margin-bottom: 30px;
        color: inherit;
    }

    .service-panel .service-price-list {
        width: 100%;
    }

    .service-panel .service-price-list li {
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: 12px 0;
        font-size: 0.85rem;
        border-top: none;
        color: inherit;
    }

    /* ==========================================================================
       STAFF SECTION (Mobile)
       ========================================================================== */
    .section-staff {
        padding-top: 10vh;
        padding-bottom: 15vh;
        min-height: auto;
        /* margin-top: -100vh; is inherited from PC, which provides the curtain effect! */
    }

    .staff-container {
        width: 90vw;
    }

    .staff-header {
        margin-bottom: 8vh;
    }

    .staff-title {
        font-size: 18vw; /* Large but fits screen */
    }

    /* 1-Column Zig-Zag Stack */
    .staff-grid {
        display: block; /* Disable Grid */
    }

    .staff-card {
        width: 85%; /* Leave room for zig-zag offset */
        margin-bottom: 10vh;
        gap: 1rem;
    }

    /* Remove PC staggered top margins */
    .staff-left, .staff-center, .staff-right {
        margin-top: 0; 
    }

    /* Zig-Zag Alignment */
    .staff-left, .staff-right {
        margin-left: 0;
        margin-right: auto;
    }

    .staff-center {
        margin-left: auto;
        margin-right: 0;
    }

    /* ==========================================================================
       GALLERY SECTION (Mobile) - 案A: エディトリアル2カラム千鳥スタック
       ========================================================================== */
    .section-gallery {
        padding: 10vh 0 12vh;
    }

    .gallery-container {
        width: 90vw;
    }

    .gallery-header {
        margin-bottom: 5vh;
    }

    .gallery-title {
        font-size: 16vw;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 12px;
    }

    .gallery-col {
        display: contents;
    }

    /* モバイルでは自動配置で左列・右列に流す */
    .gallery-item.item-1,
    .gallery-item.item-2,
    .gallery-item.item-3,
    .gallery-item.item-4,
    .gallery-item.item-5,
    .gallery-item.item-6,
    .gallery-item.item-7,
    .gallery-item.item-8 {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    /* 左右でリズムをつけるMasonry千鳥アスペクト比（行揃えを解消） */
    .gallery-item.item-1 { aspect-ratio: 3/4; }
    .gallery-item.item-2 { aspect-ratio: 1/1; margin-top: 36px; }
    .gallery-item.item-3 { aspect-ratio: 1/1; }
    .gallery-item.item-4 { aspect-ratio: 3/4.2; margin-top: -20px; }
    .gallery-item.item-5 { aspect-ratio: 3/4.2; }
    .gallery-item.item-6 { aspect-ratio: 1/1; margin-top: 24px; }
    .gallery-item.item-7 { aspect-ratio: 1/1; }
    .gallery-item.item-8 { aspect-ratio: 3/4; margin-top: -14px; }

    .gallery-footer {
        margin-top: 6vh;
    }

    .btn-gallery {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    /* ==========================================================================
       NEWS SECTION (Mobile)
       ========================================================================== */
    .news-container {
        display: block;
        position: relative;
    }

    .news-left {
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 10vh; /* Sit behind the list, near bottom */
        left: 0;
        padding: 0 0 0 5vw; /* Left padding to match PC */
        justify-content: flex-start; /* Align to the left */
        pointer-events: none; /* Prevent clicks on background text */
        z-index: 1;
        overflow-x: hidden;
    }

    .massive-title-news {
        font-size: 26vw; /* Massive text filling width */
        opacity: 0.06; /* B案: Watermark effect for high readability */
        text-align: left; /* Align to the left */
        width: auto;
    }

    .news-right {
        width: 100%;
        height: 100%;
        padding: 15vh 5vw;
        position: relative;
        z-index: 10;
        justify-content: flex-start; /* Align list near top on mobile */
    }

    .news-item a {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem 0;
        position: relative; /* For absolute arrow positioning */
    }

    .news-date {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        width: auto;
    }

    .news-title {
        font-size: 1rem;
        padding-right: 2rem; /* Leave room for arrow */
        line-height: 1.4;
    }

    .news-arrow {
        position: absolute;
        right: 0;
        bottom: 1.5rem;
    }

    /* ==========================================================================
       INFORMATION SECTION (Mobile)
       ========================================================================== */
    .info-container {
        display: block; /* 1-column layout */
        height: auto;
        padding-top: 15vh;
        padding-bottom: 15vh;
        overflow: visible;
    }

    .info-right {
        display: none; /* Hide image on mobile */
    }

    .info-left {
        width: 100%;
        height: auto;
        padding: 0 5vw;
    }

    .info-main-title {
        font-size: 11.5vw; /* Slightly reduced scale with screen width */
        margin-bottom: 3rem;
    }

    .info-header {
        margin-bottom: 0.5rem;
    }

    .info-title {
        font-size: 1.3rem;
    }

    .info-tel {
        font-size: 9vw; /* Make telephone number scalable and prominent */
    }

    .info-content {
        padding-left: 0; /* Remove indent to save space on mobile */
    }

    .info-num {
        margin-right: 1rem;
    }

    .info-buttons {
        gap: 0.8rem;
    }

    .btn-info {
        padding: 0.8rem 1.2rem;
        font-size: 0.75rem;
        flex: 1 1 auto;
        text-align: center;
    }

    /* ==========================================================================
       FOOTER SECTION (Mobile)
       ========================================================================== */
    .global-footer {
        padding: 10vh 5vw 8vh 5vw; /* More bottom padding for mobile */
    }

    .footer-content {
        gap: 3rem; /* Reduce gap between links and bottom area */
    }

    .footer-links {
        flex-direction: column; /* Stack links vertically */
        align-items: flex-start;
        gap: 1.5rem; /* Reduce gap between vertical links */
    }

    .footer-link {
        font-size: 0.95rem; /* Reduce font size */
    }

    .footer-bottom {
        flex-direction: column; /* Stack copyright and back-to-top */
        align-items: flex-start;
        gap: 1.5rem;
        border-top: 1px solid rgba(247, 245, 240, 0.2);
        padding-top: 2rem;
    }

    .copyright {
        font-size: 0.75rem;
    }

    .back-to-top {
        font-size: 0.85rem;
    }

    .footer-huge-text {
        font-size: 35vw; /* Ensure it fits nicely on mobile */
        bottom: 5%; /* Adjust position to avoid overlap */
        right: -5%;
    }

    /* ==========================================================================
       FULLSCREEN MENU (Mobile)
       ========================================================================== */
    .fullscreen-menu {
        flex-direction: column;
    }

    .menu-left {
        display: none; /* Hide image on mobile */
    }

    .menu-mobile-watermark {
        display: block;
        position: absolute;
        bottom: -2vh;
        left: 50%;
        transform: translateX(-50%);
        font-size: 40vw;
        font-weight: 900;
        color: #F7F5F0;
        opacity: 0.04;
        pointer-events: none;
        z-index: 0;
        white-space: nowrap;
    }

    .menu-right {
        width: 100%;
        padding: 15vh 5vw 10vh 5vw;
        z-index: 1;
        justify-content: center;
        gap: 8vh;
    }

    .menu-nav-list {
        align-items: flex-start; /* Align left on mobile */
        gap: 8vh; /* Increased gap for fewer items */
    }

    .menu-link {
        font-size: 2.2rem; /* Smaller font on mobile */
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    
    .menu-link .jp {
        font-size: 0.8rem;
    }

    .menu-footer {
        flex-direction: column;
        align-items: flex-start; /* Align left */
        gap: 2rem;
    }
}

/* ==========================================================================
   MENU PAGE STYLES (A Plan: Minimal Modern)
   ========================================================================== */
/* HERO */
.menu-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    padding: 0 5vw 10vh 5vw;
}

.menu-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-page-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    color: #1F1A17;
    line-height: 0.9;
    letter-spacing: -0.04em;
    transform: translateY(100%); /* For GSAP */
}

.menu-page-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F1A17;
    transform: translateY(100%); /* For GSAP */
}

/* CONTENT */
.menu-content-section {
    padding: 10vh 5vw;
    background-color: #F7F5F0;
}

.menu-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15vh; /* Large gap between categories */
}

.menu-category {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 769px) {
    .menu-category {
        flex-direction: row;
        align-items: flex-start;
        gap: 5vw;
    }
}

.menu-category-header {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-category-en {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #1F1A17;
    /* GSAP */
    opacity: 0;
    transform: translateY(20px);
}

.menu-category-jp {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1F1A17;
    opacity: 0.6;
    /* GSAP */
    opacity: 0;
}

.menu-list {
    flex: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-top: 1rem; /* Align with large title roughly */
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(31, 26, 23, 0.1);
    /* GSAP */
    opacity: 0;
    transform: translateY(20px);
}

.menu-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-item-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1F1A17;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
}

.menu-item-desc {
    font-size: 0.85rem;
    font-weight: 400;
    color: #1F1A17;
    opacity: 0.7;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 0.5rem;
}

.menu-item-price {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1F1A17;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .menu-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .menu-item-price {
        align-self: flex-end;
    }
}

/* ==========================================================================
   INFORMATION PAGE STYLES
   ========================================================================== */

/* HERO */
.info-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    padding: 0 5vw 10vh 5vw;
}

.info-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-page-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    color: #1F1A17;
    line-height: 0.9;
    letter-spacing: -0.04em;
    transform: translateY(100%); /* For GSAP */
}

.info-page-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F1A17;
    transform: translateY(100%); /* For GSAP */
}

/* CONTENT */
.info-content-section {
    padding: 10vh 5vw 20vh 5vw;
    background-color: #F7F5F0;
    display: flex;
    justify-content: center;
}

.info-page-container {
    width: 100%;
    max-width: 800px; /* Centered narrow column layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12vh;
}

/* RESERVATION BLOCK */
.info-reservation-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
    width: 100%;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.info-res-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.info-res-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #1F1A17;
    letter-spacing: -0.02em;
}

.info-res-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #1F1A17;
}

.info-res-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #1F1A17;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.info-res-tel {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1rem;
}

.info-res-tel .tel-label {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1F1A17;
}

.info-res-tel .tel-number {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.8rem, 8vw, 4.5rem); /* Adjusted min size for mobile screens */
    font-weight: 900;
    color: #1F1A17;
    letter-spacing: -0.02em;
}

.info-res-buttons {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.btn-res {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 280px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #1F1A17;
    color: #1F1A17;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: transparent;
}

.btn-res svg {
    transition: all 0.3s ease;
}

.btn-res:hover {
    background-color: #1F1A17;
    color: #F7F5F0;
}

.btn-res:hover svg path {
    fill: #F7F5F0;
}

/* Specific icon hover handling for LINE (invert inside) */
.btn-res.btn-line:hover svg rect {
    fill: #F7F5F0;
}
.btn-res.btn-line:hover svg path {
    fill: #1F1A17;
}

@media (max-width: 600px) {
    .info-res-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn-res {
        width: 100%;
        max-width: 100%;
    }
}

/* DETAILS BLOCK */
.info-details-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
    width: 100%;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.info-page .info-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: #1F1A17;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.info-access-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(31, 26, 23, 0.2);
}

.info-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.info-address {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #1F1A17;
}

.info-transport {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.info-transport p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    color: #1F1A17;
    opacity: 0.8;
}

.info-transport .label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-right: 0.5rem;
}

.btn-map {
    margin-top: 1rem;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1F1A17;
    text-decoration: none;
    border-bottom: 1px solid #1F1A17;
    padding-bottom: 0.2rem;
    transition: opacity 0.3s ease;
}

.btn-map:hover {
    opacity: 0.5;
}

/* ==========================================================================
   ARCHIVE PAGE STYLES (WordPress Standard DOM)
   ========================================================================== */

/* HERO */
.archive-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    padding: 0 5vw 10vh 5vw;
}

.archive-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.archive-page-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    color: #1F1A17;
    line-height: 0.9;
    letter-spacing: -0.04em;
    transform: translateY(100%);
}

.archive-page-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F1A17;
    transform: translateY(100%);
}

/* CONTENT */
.archive-content-section {
    padding: 10vh 5vw 20vh 5vw;
    background-color: #F7F5F0;
    display: flex;
    justify-content: center;
}

.archive-container {
    width: 100%;
    max-width: 1000px; /* Wider for list view */
    display: flex;
    flex-direction: column;
    gap: 0; /* Handled by border bottoms on articles */
}

/* POST LIST (1-Column Wide) */
.hentry {
    display: flex;
    gap: 4vw;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(31, 26, 23, 0.1);
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.hentry:first-of-type {
    border-top: 1px solid rgba(31, 26, 23, 0.1);
}

.post-thumbnail {
    flex: 0 0 35%; /* 35% width for image */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-thumbnail a:hover img {
    transform: scale(1.05);
}

.no-thumbnail {
    width: 100%;
    height: 100%;
    background-color: #1F1A17;
    color: #F7F5F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    opacity: 0.1; /* Subtle watermark look */
}

.entry-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center text vertically next to image */
    gap: 1.5rem;
}

.entry-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(31, 26, 23, 0.6);
}

.entry-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-meta a:hover {
    color: #1F1A17;
}

.cat-links {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.cat-links a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.cat-links a:hover {
    opacity: 0.6;
}

.entry-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.entry-title a {
    color: #1F1A17;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.entry-title a:hover {
    opacity: 0.6;
}

.entry-summary {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(31, 26, 23, 0.8);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* PAGINATION */
.pagination {
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

.page-numbers {
    color: rgba(31, 26, 23, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem;
}

.page-numbers:hover {
    color: #1F1A17;
}

.page-numbers.current {
    color: #1F1A17;
    font-weight: 900;
    border-bottom: 2px solid #1F1A17;
}

/* RESPONSIVE ARCHIVE */
@media (max-width: 768px) {
    .hentry {
        flex-direction: column;
        padding: 3rem 0;
        gap: 2rem;
    }
    .post-thumbnail {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   SINGLE POST PAGE STYLES (WordPress Standard DOM + TinyMCE)
   ========================================================================== */

/* Reset .hentry for single page since archive animations don't apply */
.page-single .hentry {
    opacity: 1;
    transform: translateY(0);
    border-bottom: none;
    border-top: none;
    padding: 0;
    display: block;
}

/* LAYOUT */
.single-content-section {
    padding: 15vh 5vw 10vh 5vw;
    background-color: #F7F5F0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.single-container {
    width: 100%;
    max-width: 800px; /* Narrower reading width */
    margin: 0 auto;
}

/* SINGLE BACK BUTTON */
.back-to-archive {
    margin-top: 5rem;
    margin-bottom: 3rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F1A17;
    text-decoration: none;
    transition: opacity 0.3s ease;
    transform: translateY(100%);
}

.btn-back:hover {
    opacity: 0.6;
}

/* HEADER */
.single-header {
    text-align: left;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.single-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(31, 26, 23, 0.6);
}

.single-meta span.mask-reveal {
    transform: translateY(100%);
}

.single-meta .cat-links {
    opacity: 1;
    transform: none;
    font-size: 0.8rem;
}

.single-title {
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.4;
    color: #1F1A17;
    letter-spacing: 0.02em;
    transform: translateY(100%);
}

.single-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 5rem;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.single-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ENTRY CONTENT (TinyMCE Styles) */
.entry-content {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F1A17;
    line-height: 1.8;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

/* Paragraphs */
.entry-content p {
    margin-bottom: 2rem;
}

/* Headings */
.entry-content h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 4rem 0 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(31, 26, 23, 0.1);
}

.entry-content h3 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    margin: 3rem 0 1.5rem 0;
}

.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
    font-weight: 700;
    margin: 2rem 0 1rem 0;
}

/* Lists */
.entry-content ul, 
.entry-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

/* Blockquotes */
.entry-content blockquote {
    margin: 3rem 0;
    padding: 2rem;
    background-color: rgba(31, 26, 23, 0.03);
    border-left: 4px solid #1F1A17;
    font-style: italic;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Images & Figures */
.entry-content img,
.entry-content .wp-block-image {
    max-width: 100%;
    height: auto;
    margin: 3rem 0;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
    font-size: 0.85rem;
    color: rgba(31, 26, 23, 0.6);
    text-align: center;
    margin-top: -2rem; /* Pull up closer to image */
    margin-bottom: 3rem;
}

/* Links */
.entry-content a {
    color: #1F1A17;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
}

.entry-content a:hover {
    opacity: 0.6;
}


/* ==========================================================================
   RELATED POSTS
   ========================================================================== */
.related-posts {
    width: 100%;
    max-width: 1200px;
    margin: 10rem auto 10vh auto;
    padding: 0 5vw;
}

.related-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #1F1A17;
    margin-bottom: 3rem;
    text-align: center;
    letter-spacing: -0.02em;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
}

.related-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.related-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.related-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.related-thumb-link:hover .related-thumbnail img {
    transform: scale(1.05);
}

.related-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(31, 26, 23, 0.6);
}

.related-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-meta a:hover {
    color: #1F1A17;
}

.related-meta .cat-links {
    opacity: 1;
    transform: none;
    font-size: 0.8rem;
}

.related-item-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
}

.related-item-title a {
    color: #1F1A17;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.related-item-title a:hover {
    opacity: 0.6;
}

/* RESPONSIVE RELATED POSTS */
@media (max-width: 900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

/* ==========================================================================
   GALLERY PAGE STYLES (Minimal Poster / Dense Masonry Collage & Lightbox)
   ========================================================================== */

/* HERO */
.gallery-page-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    padding: 0 5vw 10vh 5vw;
}

.gallery-page-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-page-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    color: #1F1A17;
    line-height: 0.9;
    letter-spacing: -0.04em;
    transform: translateY(100%); /* For GSAP */
}

.gallery-page-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F1A17;
    transform: translateY(100%); /* For GSAP */
}

/* CONTENT & CONTAINER */
.gallery-page-section {
    padding: 0 5vw 15vh 5vw;
    background-color: #F7F5F0;
}

.gallery-page-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* CATEGORY TABS */
.gallery-tabs-wrap {
    margin-bottom: 6vh;
    display: flex;
    justify-content: center;
}

.gallery-tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.gallery-tab-btn {
    display: inline-block;
    padding: 0.75rem 1.8rem;
    border: 1px solid #1F1A17;
    background: transparent;
    color: #1F1A17;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: 0;
    text-transform: uppercase;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-tab-btn:hover {
    background: rgba(31, 26, 23, 0.08);
}

.gallery-tab-btn.active {
    background: #1F1A17;
    color: #F7F5F0;
}

/* DENSE MASONRY GRID (PC) */
.gallery-masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    grid-auto-flow: dense;
    gap: 16px;
}

/* MASONRY ITEM SIZES */
.gallery-masonry-item {
    position: relative;
    overflow: hidden;
    background-color: #ECE9E1;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
}

/* INFINITE SCROLL SENTINEL & LOADER */
.gallery-sentinel {
    width: 100%;
    height: 40px;
    pointer-events: none;
    visibility: hidden;
}

.gallery-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    width: 100%;
}

.gallery-loader .loader-line {
    width: 40px;
    height: 2px;
    background: #1F1A17;
    animation: ortoLoaderPulse 1.2s infinite ease-in-out;
}

@keyframes ortoLoaderPulse {
    0%, 100% { transform: scaleX(0.2); opacity: 0.3; }
    50% { transform: scaleX(1); opacity: 1; }
}

.gallery-masonry-item.size-square {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-masonry-item.size-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.gallery-masonry-item.size-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.gallery-masonry-item.size-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* ITEM INNER & IMAGE */
.gallery-item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.gallery-masonry-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-masonry-item:hover .gallery-masonry-img {
    transform: scale(1.06);
}

/* HOVER OVERLAY */
.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 13, 12, 0.8) 0%, rgba(15, 13, 12, 0.2) 50%, rgba(15, 13, 12, 0) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    color: #FFFFFF;
}

.gallery-masonry-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-info {
    align-self: flex-start;
    margin-top: auto;
}

.gallery-item-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #D4D0C5;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.gallery-item-caption-snippet {
    font-size: 0.85rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-item-zoom-icon {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 300;
}

/* FOOTER / BOOKING */
.gallery-page-footer {
    display: flex;
    justify-content: center;
    margin-top: 12vh;
}

.btn-gallery-booking {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.8rem;
    border: 1px solid #1F1A17;
    background-color: transparent;
    color: #1F1A17;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-gallery-booking:hover {
    background-color: #1F1A17;
    color: #F7F5F0;
}

/* LIGHTBOX MODAL */
.orto-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.orto-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 13, 12, 0.92);
    backdrop-filter: blur(8px);
}

.lightbox-dialog {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-close-btn {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-close-btn:hover {
    border-color: #FFFFFF;
    background: rgba(255,255,255,0.1);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-nav-btn:hover {
    border-color: #FFFFFF;
    background: rgba(255,255,255,0.15);
}

.lightbox-nav-btn.prev {
    left: -70px;
}

.lightbox-nav-btn.next {
    right: -70px;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 85vh;
}

.lightbox-img-wrap {
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.lightbox-main-img {
    max-width: 85vw;
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.lightbox-details {
    margin-top: 1rem;
    text-align: center;
    color: #F7F5F0;
    max-width: 600px;
}

.lightbox-cat {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #A09E98;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.lightbox-caption {
    font-size: 0.95rem;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
}

/* RESPONSIVE FOR GALLERY PAGE */
@media (max-width: 1024px) {
    .gallery-masonry-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
    }
    .lightbox-nav-btn.prev { left: 10px; }
    .lightbox-nav-btn.next { right: 10px; }
}

@media (max-width: 768px) {
    .gallery-page-hero {
        min-height: 40vh;
        padding-bottom: 6vh;
    }

    .gallery-tabs-wrap {
        margin-bottom: 4vh;
    }

    .gallery-tab-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.78rem;
    }

    .gallery-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
        gap: 10px;
    }

    .gallery-masonry-item.size-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-masonry-item.size-wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-masonry-item.size-tall {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-masonry-item.size-square {
        grid-column: span 1;
        grid-row: span 1;
    }

    .lightbox-dialog {
        max-width: 95vw;
    }

    .lightbox-main-img {
        max-width: 95vw;
        max-height: 60vh;
    }

    .lightbox-close-btn {
        top: -45px;
        right: 0;
        width: 36px;
        height: 36px;
    }

    .lightbox-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .lightbox-nav-btn.prev { left: 5px; }
    .lightbox-nav-btn.next { right: 5px; }
}