/* Suze - Modern Japanese Minimalist Design */

:root {
    /* Color Palette */
    --color-bg: #FFFFFF;
    --color-text: #111111;
    --color-subtle: #888888;
    --color-accent: #333333;
    --color-border: #EEEEEE;

    /* Typography */
    --font-serif: 'Noto Serif JP', serif;
    --font-sans: 'Noto Sans JP', sans-serif;

    /* Layout */
    --container-width: 1000px;
    --header-height: 80px;
}

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 2.0;
    letter-spacing: 0.1em;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    opacity: 0.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    width: 88%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.3em;
    line-height: 2.5;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    z-index: 100;
    padding: 10px 0;
    /* Vertical only, horizontal by container */
    /* Strictly Hidden Initially */
    opacity: 0 !important;
    visibility: hidden !important;
    background-color: transparent !important;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease, background-color 0.6s ease;
    mix-blend-mode: normal;
}

.site-header.scrolled {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo img {
    height: 24px;
    /* Reduced from 32px */
    width: auto;
}

.header-cta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    /* White Text */
    text-transform: uppercase;
    border: 1px solid #3A4A5A;
    /* Match bg */
    padding: 10px 24px;
    background-color: #3A4A5A;
    /* Solid Dull Navy */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth ease */
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-cta:hover {
    background-color: #FFFFFF;
    color: #3A4A5A;
    /* Navy Text */
    border-color: #3A4A5A;
}

/* Hero Section - Advanced Editorial Design */
.hero-composition {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 35fr 65fr;
    /* 35% Whitespace, 65% Image */
    position: relative;
    overflow: hidden;
    background-color: #F9F9F9;
    /* Warm paper-like white */
}

/* ... existing styles ... */

/* About / Intro Section - Arubekiyou Style */
.intro-section {
    padding: 160px 0;
    /* Standardized spacing */
    background-color: transparent;
    /* Transparent for slider */
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Grain Texture Overlay */
.hero-composition::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Left Column: Text & Logo */
.hero-text-layer {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    padding-left: 8%;
    /* Indentation */
    z-index: 5;
}

.hero-logo-wrapper {
    position: absolute;
    top: 40px;
    left: 8%;
    /* Fixed logo position */
}

.hero-main-logo {
    width: 120px;
    height: auto;
    opacity: 0;
    animation: fade-in 1s ease-out forwards 0.2s;
}

.hero-tagline-container {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-serif);
    color: var(--color-text);
    height: auto;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Space between lines if multiple */
}

.hero-tagline-main {
    font-size: 2.2rem;
    font-weight: 400;
    /* Light weight */
    letter-spacing: 0.3em;
    line-height: 1.8;
    margin-right: -20px;
    /* Pull closer to image boundary */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-text 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}

.hero-tagline-sub {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: var(--color-subtle);
    margin-top: 20px;
    /* Space from main text */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-text 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.0s;
}

/* Right Column: Image with Mask Reveal */
.hero-image-mask {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Create a reveal effect using clip-path or transform */
    clip-path: inset(0 0 0 100%);
    /* Start hidden from left */
    animation: reveal-image 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s;
}

.hero-image-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    /* Start slightly zoomed in */
    animation: scale-down-image 2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

/* Animations */
/* Animations - Quiet Life */
@keyframes reveal-image {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes scale-down-image {
    to {
        transform: scale(1.0);
    }
}

@keyframes fade-up-text {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

/* Scroll Reveal Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-100 {
    transition-delay: 0.1s;
}

.reveal-delay-200 {
    transition-delay: 0.2s;
}

.reveal-delay-300 {
    transition-delay: 0.3s;
}

/* Text Reveal (for vertical text primarily) */
.reveal-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.reveal-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Soft Hover Transitions */
a,
button,
.btn-main {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    /* Force soft ease */
}

a:hover,
button:hover,
.btn-main:hover {
    opacity: 0.7;
}

/* Style Section (Infinite Slider) */
.style-section {
    padding: 140px 0;
    /* Increased */
    overflow: hidden;
    background-color: #FFFFFF;
    /* White (changed from Gray) */
}

.style-slider {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.style-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scroll-left 40s linear infinite;
}

.style-item {
    width: 300px;
    /* Fixed width for visual consistency */
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    overflow: hidden;
}

.style-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover effect on desktop only */
@media (hover: hover) {
    .style-item:hover img {
        transform: scale(1.05);
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Assumes track contains 2 sets of images */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .site-header {
        /* Ensure normal header is hidden or adjusted if needed,
           but we are using custom logo placement in hero */
        background: transparent;
        backdrop-filter: none;
    }

    .container {
        width: 92%;
        /* Slightly wider on mobile */
    }

    .hero-composition {
        display: flex;
        flex-direction: column;
        height: 100vh;
        /* Fill screen */
    }

    .hero-image-mask {
        height: 60%;
        /* Image takes top 60% */
        width: 100%;
        clip-path: inset(100% 0 0 0);
        /* Reveal from bottom up */
        animation: reveal-image-mobile 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    }

    @keyframes reveal-image-mobile {
        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .hero-text-layer {
        height: 40%;
        width: 100%;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        /* Space between logo and tagline */
    }

    .hero-logo-wrapper {
        position: relative;
        /* Reset from absolute */
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        margin-bottom: 0;
    }

    .hero-tagline-container {
        writing-mode: horizontal-tb;
        /* Horizontal on mobile */
        max-height: auto;
        width: 100%;
        align-items: center;
        margin-top: 0;
        gap: 10px;
    }

    .hero-tagline-main {
        font-size: 1.2rem;
        /* Reduced size */
        margin-right: 0;
        line-height: 1.6;
        letter-spacing: 0.15em;
        text-align: center;
        transform: none !important;
        /* Reset animation transform if needed for simplicity */
    }

    .hero-tagline-sub {
        display: block;
        /* Show if desired, or keep hidden. Let's show small. */
        font-size: 0.7rem;
        display: block;
        margin-top: 5px;
        transform: none !important;
    }

    /* Intro / About Responsive */
    .intro-text-vertical {
        writing-mode: horizontal-tb;
        height: auto;
        width: 100%;
        text-align: left;
        line-height: 2.2;
    }

    /* Works Grid - Mixed Layout */
    .works-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 Columns */
        gap: 15px;
    }

    /* Pattern: 1 Full, 2 Half, 1 Full... */
    /* 1st, 4th, 7th items span 2 columns */
    .work-card:nth-child(3n+1) {
        grid-column: span 2;
    }

    .work-card:nth-child(3n+1) .work-image {
        aspect-ratio: 16 / 9;
        /* Cinematic aspect for feature items */
    }

    .profile-content {
        flex-direction: column;
        gap: 40px;
    }

    .profile-text {
        width: 100%;
    }
}

/* About / Intro Section - Arubekiyou Style */
.intro-section {
    padding: 160px 0;
    /* Standardized spacing */
    background-color: transparent;
    /* Transparent for slider */
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Background Slider */
.concept-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.concept-bg-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: bgCycle 18s infinite;
}

/* Staggered Animation for 3 images (6s each) */
.concept-bg-item:nth-child(1) {
    animation-delay: 0s;
}

.concept-bg-item:nth-child(2) {
    animation-delay: 6s;
}

.concept-bg-item:nth-child(3) {
    animation-delay: 12s;
}

@keyframes bgCycle {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    43% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}

.concept-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    /* Further reduced opacity */
    backdrop-filter: blur(0px);
    /* Removed blur for clarity */
    z-index: -1;
}

/* Background Navigation Dots */
.concept-bg-nav {
    position: absolute;
    bottom: 20px;
    right: 30px;
    display: flex;
    gap: 12px;
    z-index: 2;
}

.concept-nav-dot {
    width: 6px;
    height: 6px;
    background-color: #3A4A5A;
    /* Navy for visibility on pale bg */
    border-radius: 50%;
    opacity: 0.2;
    /* Less conspicuous */
    transition: opacity 0.3s;
    animation: dotCycle 18s infinite;
}

.concept-nav-dot:nth-child(1) {
    animation-delay: 0s;
}

.concept-nav-dot:nth-child(2) {
    animation-delay: 6s;
}

.concept-nav-dot:nth-child(3) {
    animation-delay: 12s;
}

@keyframes dotCycle {
    0% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    28% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    33% {
        opacity: 0.2;
        transform: scale(1);
    }

    100% {
        opacity: 0.2;
        transform: scale(1);
    }
}

.intro-container {
    max-width: 1100px;
    /* Match Works */
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-content-wrapper {
    display: flex;
    flex-direction: row;
    /* L-R Side-by-Side */
    writing-mode: horizontal-tb;
    /* Container layout is horizontal */
    gap: 60px;
    height: auto;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
}

.section-header-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
    writing-mode: vertical-rl;
    /* Vertical Text */
    text-orientation: mixed;
    font-family: var(--font-serif);
    border-right: 1px solid var(--color-accent);
    /* Line between Title and Body */
    padding-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    height: 300px;
    /* Sufficient height for vertical text */
    text-align: left;
}

/* Mobile Adjustment for Header Position */
@media (max-width: 768px) {
    .section-header-vertical {
        writing-mode: horizontal-tb;
        /* Reset to Horizontal */
        margin-left: 0;
        margin-bottom: 20px;
        border-right: none;
        border-left: 1px solid var(--color-accent);
        /* 1px to match Works */
        padding-right: 0;
        padding-left: 15px;
        text-align: left;
        align-items: flex-start;
        height: auto;
        /* Reset height */
        width: 100%;
    }
}

.en-title {
    font-size: 0.8rem;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-orientation: mixed;
}

.jp-title {
    font-size: 1.5rem;
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.intro-text-block {
    writing-mode: vertical-rl;
    /* Vertical Text */
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 2.4;
    letter-spacing: 0.15em;
    text-align: justify;
    max-width: none;
    height: 400px;
    /* Allow height for text flow */
}

.intro-text-block p {
    margin-block-end: 2.5em;
    margin-block-start: 0;
}

.intro-text-block p:last-child {
    margin-block-end: 0;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* For normal elements */
    }
}

/* Special handling for vertical text animation if needed, 
   but translateY affects Y axis regardless of writing mode. 
   For vertical text, Y is the block flow direction? No, stick to physical Y.
*/

/* Mobile Adjustments for Hero/About */
@media (max-width: 768px) {
    .hero-text-layer {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin: 0 auto;
        /* Removed top margin here, controlled by logo wrapper */
        /* Center block vertically/horizontally */
        padding: 0 20px;
        /* Reset desktop padding-left: 8% */
        font-size: 1rem;
        width: 100%;
        max-width: 320px;
        /* Slightly wider */
        text-align: center;
        line-height: 2;
        padding-bottom: 40px;
        /* Add space below text before image */
    }

    .hero-tagline-container {
        writing-mode: horizontal-tb;
        align-items: center;
        width: 100%;
        margin-top: 0;
    }

    .hero-tagline-main {
        margin-right: 0;
        /* Reset desktop offset */
        text-align: center;
    }

    .hero-logo-wrapper {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 40px;
        /* Moved UP (was 60px) */
        margin-bottom: 20px;
        /* Reduced gap (was 30px) */
        width: 100%;
        display: flex;
        justify-content: center;
        /* Strict centering */
    }

    .hero-main-logo {
        width: 100px;
        margin-bottom: 0;
    }

    .intro-section {
        padding: 60px 0;
    }

    .intro-content-wrapper {
        flex-direction: column;
        writing-mode: horizontal-tb;
        height: auto;
        margin-top: 0;
        width: 100%;
        gap: 30px;
    }

    .section-header-vertical {
        writing-mode: horizontal-tb;
        position: relative;
        left: auto;
        top: auto;
        text-align: left;
        width: 100%;
        margin-bottom: 20px;
        border-bottom: none;
        border-left: 1px solid var(--color-accent);
        border-right: none;
        padding-left: 15px;
        padding-right: 0;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }

    .en-title {
        display: block;
        margin-bottom: 5px;
        text-orientation: upright;
    }

    .intro-text-block {
        writing-mode: horizontal-tb;
        height: auto;
        width: 100%;
        padding-left: 15px;
        /* Align with Header */
        text-align: left;
        line-height: 2.0;
        margin-top: 0;
    }

    .intro-text-block p {
        margin-block-end: 2.5em;
    }
}

/* Works / Products Grid */
.works-section {
    padding-bottom: 160px;
    padding-top: 60px;
    /* Added top padding balance */
}

/* Revised Section Headers */
.section-label,
.style-label {
    font-family: var(--font-serif);
    /* Switch to Serif for elegance */
    font-size: 1.4rem;
    /* Larger presence */
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-text);
    /* Darker */
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Decorative vertical line above header */
.section-label::before,
.style-label::before {
    content: "";
    display: block;
    width: 1px;
    height: 60px;
    background-color: var(--color-accent);
    margin-bottom: 5px;
}

/* Lookbook Layout (New) */
.lookbook-layout {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
}

/* Stage (Large Preview) */
.lookbook-stage {
    flex: 1;
    /* 50% width roughly */
    position: sticky;
    top: 100px;
    /* Sticky scroll */
}

.stage-image-wrapper {
    width: 100%;
    aspect-ratio: 1;
    /* Square for impact */
    background-color: #f7f7f7;
    margin-bottom: 25px;
    overflow: hidden;
}

.stage-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease-out, transform 0.6s ease-out;
}

.stage-image-wrapper img.fade-out {
    opacity: 0.5;
    transform: scale(0.98);
}

.stage-info {
    text-align: left;
}

.stage-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.stage-price {
    font-family: var(--font-sans);
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.stage-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-text);
    opacity: 0.8;
}

/* Thumbnails Grid */
.lookbook-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lookbook-thumb {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    /* Reserve space for border */
    background: transparent;
    padding: 0;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    opacity: 1;
    /* Keep fully visible */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

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

.lookbook-thumb:hover img {
    transform: scale(1.05);
}

/* Active State: Shrink & Frame */
.lookbook-thumb.active {
    border-color: var(--color-text);
    /* Elegant thin frame */
    background-color: #fff;
    /* White matting */
}

.lookbook-thumb.active img {
    transform: scale(0.85);
    /* Shrink to reveal frame */
}

/* Remove old shadow/lift */
.lookbook-thumb.active {
    box-shadow: none;
    z-index: 1;
}

/* CTA in Grid (High Impact) */
.lookbook-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-text);
    /* Solid Dark for Impact */
    border: none;
    color: #fff;
    /* High Contrast */
    text-decoration: none;
    aspect-ratio: 1;
    transition: background-color 0.4s ease, transform 0.4s ease;
    position: relative;
    overflow: hidden;
}

.lookbook-cta:hover {
    background-color: var(--color-accent);
    /* Brand Accent on Hover */
    opacity: 1;
    transform: scale(1.02);
    /* Subtle popping */
}

.cta-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    z-index: 1;
}

.cta-arrow {
    font-size: 1.2rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Subtle Breathing Animation for CTA Arrow */
@keyframes cta-breath {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

.lookbook-cta .cta-arrow {
    animation: cta-breath 2s infinite ease-in-out;
}

.lookbook-cta:hover .cta-arrow {
    animation: none;
    /* Stop breath on hover */
    transform: translateX(8px);
    /* Glide arrow */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .lookbook-layout {
        flex-direction: column;
        gap: 30px;
    }

    .lookbook-stage {
        position: relative;
        top: 0;
        width: 100%;
    }

    .stage-title {
        font-size: 1.2rem;
    }

    .lookbook-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Cols for better space */
        gap: 15px;
    }

    .cta-text {
        font-size: 0.85rem;
        /* Adjustment for mobile fitting */
    }
}

/* Works Grid (Pick Up Item) */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
}

/* Card Style (Reset for Button) */
button.work-card {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    text-align: inherit;
    font-family: inherit;
    width: 100%;
    cursor: zoom-in;
}

.work-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    transition: opacity 0.3s ease;
}

/* Ensure CTA has pointer */
.work-card.is-cta {
    cursor: pointer;
}

.work-image {
    aspect-ratio: 1;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    overflow: hidden;
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Hover Effect - Target Direct Children or General */
.work-card:hover .work-image img {
    transform: scale(1.03);
}

.work-info {
    text-align: center;
}

.work-title {
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.work-price {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-subtle);
}

/* Lightbox Styles (Quiet Life) */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    /* Almost opaque white */
    z-index: 9999;
    /* Maximize z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    pointer-events: none;
}

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

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.95);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.active .lightbox-content {
    transform: scale(1.0);
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: var(--color-text);
    cursor: pointer;
    font-weight: 200;
    transition: opacity 0.3s ease;
    padding: 10px;
    line-height: 1;
}

.lightbox-close:hover {
    opacity: 0.5;
}

.lightbox-caption {
    margin-top: 20px;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text);
    text-align: center;
    letter-spacing: 0.1em;
}

/* CTA Card in Grid (High Contrast) */
.work-card.is-cta {
    background-color: var(--color-text);
    /* Dark Background */
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    transition: opacity 0.3s ease;
}

.work-card.is-cta:hover {
    opacity: 0.8;
}

.work-card.is-cta .work-title {
    color: #FFFFFF;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

.work-card.is-cta .work-price {
    color: #AAAAAA;
    font-size: 0.8rem;
}

/* Final CTA Section (Bottom) */
.final-cta-section {
    padding: 100px 0 140px;
    background-color: #FFFFFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.final-cta-message {
    font-family: var(--font-serif);
    font-weight: 400;
    /* Light weight */
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    margin-bottom: 0px;
}

.cta-button-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.btn-main {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    /* Fixed width for equal size */
    padding: 18px 0;
    /* Vertical padding only, horizontal handled by width */
    background-color: #3A4A5A;
    /* Standard Navy */
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid #3A4A5A;
    /* Match bg */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

/* Secondary/Ghost Button Style */
.btn-ghost {
    background-color: transparent;
    color: #3A4A5A;
    border: 1px solid #3A4A5A;
}

.btn-ghost:hover {
    background-color: #3A4A5A;
    color: #FFFFFF;
    opacity: 1;
}

.btn-main:hover {
    background-color: #FFFFFF;
    color: #3A4A5A;
    /* Navy Text */
    transform: translateY(-2px);
    opacity: 1;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-text);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
    margin-top: 10px;
}

.social-link:hover {
    border-color: var(--color-text);
    opacity: 1;
}

.social-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Gift Section */
.gift-section {
    padding: 100px 0;
    background-color: #FAFAFA;
    /* Light Gray to separate from Profile (White) */
    text-align: center;
}

.gift-content {
    display: flex;
    flex-direction: row;
    /* Side by side on Desktop */
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
}

.gift-visual {
    width: 200px;
    height: 200px;
    /* Fallback */
    overflow: hidden;
}

.gift-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-text {
    text-align: left;
}

.gift-message {
    font-family: var(--font-serif);
    /* Match body/stage-desc (Inherited) */
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
    /* Match body/stage-desc (Inherited) */
    color: var(--color-text);
    opacity: 0.8;
    margin-bottom: 20px;
}

.gift-price {
    font-family: var(--font-en-serif);
    font-size: 0.9rem;
    /* Reduced size */
    letter-spacing: 0.1em;
    color: var(--color-subtle);
    /* Subtler color */
    border-bottom: 1px solid var(--color-border);
    /* Faint underline */
    padding-bottom: 3px;
    display: inline-block;
}

/* Profile Section */
.profile-section {
    padding: 100px 0 160px;
    background-color: #FFFFFF;
    /* White to separate from Style (Gray) */
}

/* Framed Container for Profile */
.profile-section .container {
    border: 1px solid var(--color-border);
    padding: 80px 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.profile-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
}

.profile-image {
    width: 250px;
}

.profile-text {
    width: 400px;
    font-size: 0.9rem;
    line-height: 2.0;
    margin-bottom: 20px;
}

.profile-link {
    display: inline-block;
    margin-top: 15px;
    font-family: var(--font-en-serif);
    color: var(--color-accent);
    font-size: 1.0rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

.profile-link:hover {
    opacity: 0.7;
}

/* FAQ Section */
.faq-section {
    padding: 100px 0 160px;
    background-color: #FAFAFA;
    /* Slight contrast */
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: #FFFFFF;
    padding: 30px;
    border: 1px solid var(--color-border);
}

.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-family: var(--font-serif);
    font-size: 1.0rem;
    color: var(--color-text);
    line-height: 1.6;
}

.faq-q-mark {
    font-family: var(--font-en-serif);
    color: var(--color-accent);
    font-size: 1.2rem;
    font-weight: 500;
}

.faq-answer {
    padding-left: 30px;
    /* Indent to align with text */
    font-size: 0.9rem;
    color: var(--color-subtle);
    line-height: 1.8;
}

/* Footer */
.site-footer {
    background-color: #F9F9F9;
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    font-family: var(--font-en-sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-text);
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--color-text);
    transition: width 0.3s ease;
}

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

.copyright {
    font-family: var(--font-en-sans);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--color-subtle);
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: var(--color-text);
    color: #FFFFFF;
    border-color: var(--color-text);
}

/* Craftsmanship Section (New WORKS) - Split Layout */
.craftsmanship-section {
    padding: 160px 0;
    /* Standardized to 160px */
    background-color: #F2F2F2;
    /* Distinct tone from Intro */
    display: flex;
    justify-content: center;
}

.craftsmanship-container {
    max-width: 1100px;
    width: 90%;
    display: flex;
    align-items: center;
    /* Center vertically */
    justify-content: center;
    gap: 80px;
}

/* Visual Side */
.craftsmanship-visual {
    width: 45%;
    aspect-ratio: 4 / 5;
    /* Portrait orientation */
    overflow: hidden;
    /* Optional: shadow or frame? Minimalist prefers none or subtle. */
}

.craftsmanship-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    /* Editorial moody look */
    transition: transform 0.8s ease;
}

.craftsmanship-section:hover .craftsmanship-visual img {
    transform: scale(1.03);
}

/* Content Side - Vertical Text Wrapper */
.craftsmanship-content {
    width: 45%;
    display: flex;
    flex-direction: row;
    /* Stack Top->Bottom (Vertical in Vertical Mode) */
    writing-mode: vertical-rl;
    gap: 0;
    /* Remove gap, handle with margin if needed to pull closer */
    height: 600px;
    /* Ample height for long lines */
    align-items: flex-start;
    margin-top: -30px;
    /* Pull entire block up slightly */
    position: relative;
    right: -20px;
    /* Slight offset to right to clear image if needed */
}

.craftsmanship-title-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-right: 1px solid var(--color-accent);
    /* Desktop Accent Line */
    padding-right: 20px;
    margin-bottom: 70px;
    /* Space between Title and Text */
    margin-left: 20px;
    /* Indent Title relative to text? No, remove if not needed */
}

.craftsmanship-en-title {
    font-size: 0.8rem;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-orientation: mixed;
}

.craftsmanship-jp-title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* Text Area Styles */
.craftsmanship-text-area {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 2.4;
    letter-spacing: 0.15em;
    text-align: justify;
}

.craftsmanship-text-area p {
    margin-block-end: 2.5em;
    /* Spacing between groups (Horizontal space in Vertical mode) */
    margin-block-start: 0;
}

/* Remove margin from last p to align with edge if needed */
.craftsmanship-text-area p:last-child {
    margin-block-end: 0;
}

/* COLORS Section */
.colors-section {
    padding: 140px 0;
    background-color: #FAFAFA;
    /* Gray to alternate with White */
}

.colors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 800px;
    margin: 60px auto 0;
}

.color-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.color-visual {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* Circle */
    position: relative;
    /* For pseudo-elements if needed */
}

/* Standard: Deep, Delicate (Dull Navy) */
.standard-visual {
    background: linear-gradient(135deg, #3A4A5A, #1C2530);
    /* Dull Navy */
    box-shadow: 0 10px 30px rgba(28, 37, 48, 0.2);
}

/* Seasonal: Changing, Temporary (Soft Pink/Gold - Example for Feb) */
.seasonal-visual {
    background: linear-gradient(135deg, #e6c8c8, #d4a5a5);
    box-shadow: 0 10px 30px rgba(212, 165, 165, 0.2);
}

.color-title {
    font-family: var(--font-en-serif);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    color: var(--color-text);
}

.color-desc {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 2.0;
    color: var(--color-text-light);
}

/* Voice Section */
.voice-section {
    padding: 140px 0;
    background-color: #FAFAFA;
    /* Gray */
}

.voice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

.voice-card {
    background-color: #FFFFFF;
    padding: 30px;
    border: 1px solid var(--color-border);
    /* Faint border */
    /* Simple card style */
}

.voice-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.voice-item {
    font-family: var(--font-en-serif);
    font-size: 1.0rem;
    color: var(--color-text);
}

.voice-name {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    color: var(--color-subtle);
}

.voice-comment {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 2.0;
    text-align: justify;
}

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

    /* Hero Adjustments */
    .hero-main-logo {
        width: 40px;
        /* Reduced from 40px */
    }

    .hero-tagline-main {
        font-size: 1.0rem;
        /* Reduced size for tagline */
        letter-spacing: 0.15em;
    }



    /* Craftsmanship (Works) Mobile Layout */
    .craftsmanship-section {
        height: auto;
        padding: 60px 0;
    }

    .craftsmanship-container {
        flex-direction: column;
        gap: 40px;
        width: 100%;
        height: auto;
    }

    .craftsmanship-visual {
        width: 100%;
        aspect-ratio: 3/2;
        /* Landscape */
    }

    .craftsmanship-content {
        width: 100%;
        height: auto;
        writing-mode: horizontal-tb;
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        /* Side padding */
        margin-top: 0;
        /* Reset desktop offset */
        right: 0;
        /* Reset desktop offset */
    }

    .craftsmanship-title-group {
        flex-direction: column;
        border-left: 1px solid var(--color-accent);
        /* Restore vertical line */
        border-right: none;
        padding-left: 15px;
        /* Spacing for line */
        padding-right: 0;
        margin-bottom: 20px;
        margin-left: 0;
        /* Reset desktop margin */
    }

    .craftsmanship-en-title {
        display: block;
        margin-bottom: 5px;
    }

    .craftsmanship-jp-title {
        font-size: 1.3rem;
    }

    .craftsmanship-text-area {
        writing-mode: horizontal-tb;
        line-height: 2.0;
        height: auto;
        padding-left: 16px;
        /* Align with Title text */
    }

    .craftsmanship-text-area {
        writing-mode: horizontal-tb;
        line-height: 2.0;
        height: auto;
    }

    /* Pick Up Item (Works Grid) - 2 Column Layout */
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for compact view */
        gap: 15px;
        /* Tighter gap */
    }

    .work-card:nth-child(3n+1) {
        grid-column: span 1;
        /* Reset desktop span if any */
        grid-column: span 2;
        /* Highlight every 3rd item? Or just uniform? 
                              Let's keep it uniform or maybe span every 5th for rhythm.
                              Actually user wants "reduce scroll". 2 cols is good.
                              Let's make sure images fit. */
    }

    /* Resetting the span logic for mobile simplicity if needed, 
       but let's keep the texture of having some full width items if it aids rhythm.
       Actually, to reduce scroll, standard 2-col is best. */
    .work-card:nth-child(n) {
        grid-column: span 1;
    }

    /* Concept Mobile Alignment */
    .intro-container {
        width: 100%;
        /* Reset to full width to prevent double spacing (90% + padding) */
        padding: 0 20px;
        /* Add side padding to match Works */
        align-items: flex-start;
    }



    .profile-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .profile-section .container {
        padding: 40px 20px;
    }

    .profile-image {
        width: 180px;
        max-width: 80%;
    }

    .profile-text {
        width: 100%;
        max-width: 20em;
        margin: 0 auto;
    }

    /* Mobile Spacing Optimizations (Scroll Consideration) */
    .lookbook-layout {
        padding: 30px 0;
    }

    .style-section {
        padding: 60px 0;
    }

    .style-item {
        width: 200px;
        /* Reduced from 300px for mobile */
    }

    .gift-section {
        padding: 60px 0;
    }

    .gift-content {
        flex-direction: column;
        gap: 30px;
    }

    .gift-visual {
        width: 150px;
        height: 150px;
    }

    .gift-text {
        text-align: center;
    }

    .gift-message {
        max-width: 19em;
        /* Restrict width for better line breaks */
        margin-left: auto;
        margin-right: auto;
    }

    .profile-section {
        padding: 60px 0 80px;
    }

    .final-cta-section {
        padding: 30px 0 80px;
    }

    /* COLORS Section Mobile */
    .colors-section {
        padding: 60px 0;
    }

    .colors-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 40px;
    }

    .color-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 20px;
        padding: 40px 0;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
        /* Dotted separator */
    }

    .color-card:first-child {
        padding-top: 0;
    }

    .color-card:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .color-visual {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .color-info {
        display: block;
        /* Ensure normal block flow for text */
    }

    .color-name {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    /* Tighter Mobile Spacing Overrides */
    .works-section {
        padding-bottom: 80px;
        /* Reduced from 160px */
    }

    .section-label {
        margin-bottom: 30px;
        /* Reduced from 50px for title-content gap */
    }



    .color-desc {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* Voice Section Mobile */
    .voice-section {
        padding: 60px 0;
    }

    .voice-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* FAQ Mobile */
    .faq-section {
        padding: 60px 0;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}