/* ═══════════════════════════════════════════════
           MISAKI AXIS — DESIGN SYSTEM
           Aesthetic: Wabi-Sabi Futurism
        ═══════════════════════════════════════════════ */
        :root {
            --black:      #060608;
            --ink:        #0C0C0E;
            --charcoal:   #141416;
            --dark:       #1A1A1E;
            --mid:        #282830;
            --mist:       #686872;
            --silver:     #9898A4;
            --cream:      #EDE8DF;
            --parchment:  #F5F1E8;
            --gold:       #B89458;
            --gold-lt:    #D0AA6A;
            --gold-dk:    #7A6238;
            --gold-faint: rgba(184,148,88,0.07);

            --navy:    #1B2340;
            --exprsso: #2A1C10;
            --dblue:   #1E2D4A;

            --font-d: 'Noto Serif JP', serif;
            --font-b: 'Cormorant Garamond', serif;
            --font-m: 'Space Mono', monospace;

            --exp: cubic-bezier(0.16,1,0.3,1);
        }

        *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }

        body {
            background: var(--black);
            color: var(--cream);
            font-family: var(--font-b);
            overflow-x: hidden;
        }

        /* The custom cursor is a mouse-only flourish. Touch and coarse
           pointers keep the native cursor so nothing goes invisible. */
        @media (pointer: fine) {
            body.cursor-ready,
            body.cursor-ready * { cursor: none; }
        }
        .cursor { display: none; }
        @media (pointer: fine) {
            body.cursor-ready .cursor { display: block; }
        }

        /* Grain overlay */
        body::after {
            content:'';
            position:fixed; inset:0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: 0.022;
            pointer-events: none;
            z-index: 9998;
        }

        /* ═══════════════════════════════════════════════
           CUSTOM CURSOR
        ═══════════════════════════════════════════════ */
        .cursor {
            position:fixed; top:0; left:0;
            pointer-events:none; z-index:99999;
        }
        .cur-dot {
            position:absolute; width:4px; height:4px;
            background:var(--gold); border-radius:50%;
            transform:translate(-50%,-50%);
        }
        .cur-ring {
            position:absolute; width:32px; height:32px;
            border:1px solid rgba(184,148,88,0.45);
            border-radius:50%;
            transform:translate(-50%,-50%);
            transition:transform 0.28s var(--exp), opacity 0.28s var(--exp);
        }
        .cur-h { position:absolute; width:12px; height:1px; background:var(--gold); opacity:0.3; transform:translate(-50%,-50%); }
        .cur-v { position:absolute; width:1px; height:12px; background:var(--gold); opacity:0.3; transform:translate(-50%,-50%); }

        body.hovering .cur-ring { transform:translate(-50%,-50%) scale(2); opacity:0.15; }

        /* ═══════════════════════════════════════════════
           LOADER
        ═══════════════════════════════════════════════ */
        .loader {
            position:fixed; inset:0;
            background:var(--black); z-index:9997;
            display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            transition:opacity 1s var(--exp), visibility 1s;
        }
        .loader.out { opacity:0; visibility:hidden; }

        .loader-name {
            font-family:var(--font-d); font-size:clamp(1.6rem,3.5vw,2.8rem);
            font-weight:200; letter-spacing:0.45em; color:var(--cream);
            opacity:0; animation:slideUp 0.7s var(--exp) 0.3s forwards;
        }
        .loader-jp {
            font-family:var(--font-d); font-size:0.72rem; font-weight:200;
            letter-spacing:0.6em; color:var(--gold); margin-top:0.5rem;
            opacity:0; animation:slideUp 0.7s var(--exp) 0.6s forwards;
        }
        .loader-bar {
            width:200px; height:1px; background:var(--dark);
            margin-top:3.5rem; overflow:hidden;
        }
        .loader-fill {
            height:100%;
            background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
            width:0; animation:barFill 2s var(--exp) 0.5s forwards;
        }

        @keyframes barFill { to { width:100%; } }
        @keyframes slideUp {
            from { opacity:0; transform:translateY(18px); }
            to   { opacity:1; transform:none; }
        }
        @keyframes slideLeft {
            from { opacity:0; transform:translateX(22px); }
            to   { opacity:1; transform:none; }
        }
        @keyframes fadeIn { to { opacity:1; } }

        /* ═══════════════════════════════════════════════
           NAVIGATION
        ═══════════════════════════════════════════════ */
        /* Scoped to the site header. A bare `nav` selector also caught
           the breadcrumb and footer navs and pinned them to the top. */
        #nav {
            position:fixed; top:0; left:0; right:0;
            z-index:1000; padding:2rem 5rem;
            display:flex; align-items:center;
            justify-content:space-between;
            transition:opacity 0.4s, transform 0.4s;
        }
        #nav::before {
            content:''; position:absolute; inset:0;
            background:linear-gradient(to bottom,rgba(6,6,8,0.75) 0%,transparent 100%);
            pointer-events:none; transition:opacity 0.4s;
        }
        #nav.fixed {
            background:rgba(6,6,8,0.94);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--dark);
        }
        #nav.fixed::before { opacity:0; }

        .nav-logo {
            font-family:var(--font-d); font-size:0.95rem; font-weight:300;
            letter-spacing:0.32em; color:var(--cream); text-decoration:none;
            display:flex; flex-direction:column; line-height:1.35; position:relative;
        }
        .nav-logo-jp {
            font-size:0.58rem; font-weight:200;
            letter-spacing:0.5em; color:var(--gold);
        }
        .nav-links {
            display:flex; gap:3rem; list-style:none; position:relative;
        }
        .nav-links a {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.25em; text-transform:uppercase;
            color:var(--silver); text-decoration:none;
            transition:color 0.3s; cursor:pointer; position:relative;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-3px; left:0;
            width:0; height:1px; background:var(--gold);
            transition:width 0.4s var(--exp);
        }
        .nav-links a:hover { color:var(--cream); }
        .nav-links a:hover::after { width:100%; }

        .nav-cta {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.2em; text-transform:uppercase;
            color:var(--gold); text-decoration:none;
            border:1px solid var(--gold-dk); padding:0.65rem 1.6rem;
            transition:background-color 0.3s, color 0.3s, border-color 0.3s; cursor:pointer; position:relative;
        }
        .nav-cta:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }

        /* ═══════════════════════════════════════════════
           MOBILE NAVIGATION
        ═══════════════════════════════════════════════ */
        .nav-burger {
            display:none; width:44px; height:44px; flex:none;
            background:transparent; border:1px solid var(--gold-dk);
            flex-direction:column; align-items:center; justify-content:center;
            gap:5px; padding:0; transition:border-color 0.3s;
        }
        .nav-burger:hover { border-color:var(--gold); }
        .nav-burger span {
            display:block; width:18px; height:1px; background:var(--gold);
            transition:transform 0.4s var(--exp), opacity 0.25s;
        }
        .nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
        .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
        .nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

        .nav-drawer {
            position:fixed; inset:0; z-index:9996;
            background:var(--black);
            padding:7rem 2rem 3rem;
            display:flex; flex-direction:column;
            transform:translateY(-100%);
            transition:transform 0.65s var(--exp);
            overflow-y:auto;
        }
        .nav-drawer.open { transform:translateY(0); }
        .nav-drawer a {
            font-family:var(--font-d); font-weight:200;
            font-size:1.6rem; letter-spacing:0.06em;
            color:var(--cream); text-decoration:none;
            padding:1.1rem 0; border-bottom:1px solid var(--dark);
            display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
            transition:color 0.3s;
        }
        .nav-drawer a:hover { color:var(--gold); }
        .nav-drawer a .jp {
            font-family:var(--font-m); font-size:0.6rem;
            letter-spacing:0.24em; color:var(--mist); text-transform:uppercase;
        }
        .nav-drawer .drawer-cta {
            margin-top:2.5rem; justify-content:center;
            border:1px solid var(--gold-dk); border-bottom-color:var(--gold-dk);
            color:var(--gold); font-family:var(--font-m);
            font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
            padding:1.1rem;
        }
        .nav-drawer .drawer-cta:hover { background:var(--gold); color:var(--black); }

        /* ═══════════════════════════════════════════════
           HERO — CANVAS ANIMATED (NO VIDEO)
        ═══════════════════════════════════════════════ */
        .hero {
            position:relative; height:100vh; min-height:680px;
            display:flex; align-items:center; overflow:hidden;
            background:var(--black);
        }
        .hero-bg-img {
            position:absolute; inset:0;
            width:100%; height:100%;
            object-fit:cover; object-position:center;
            opacity:0.38;
            filter:brightness(0.55) saturate(0.7);
        }

        #heroCanvas {
            position:absolute; inset:0;
            width:100%; height:100%;
        }

        /* Cinematic gradient overlays */
        .hero-vignette {
            position:absolute; inset:0; pointer-events:none;
            background:
                linear-gradient(to right,  rgba(6,6,8,0.72) 0%, rgba(6,6,8,0.18) 55%, rgba(6,6,8,0.55) 100%),
                linear-gradient(to bottom, rgba(6,6,8,0.55) 0%, transparent 20%, transparent 70%, rgba(6,6,8,1) 100%);
        }

        /* Hero content */
        .hero-inner {
            position:relative; z-index:2;
            max-width:1400px; width:100%; margin:0 auto;
            padding:0 5rem;
            display:grid;
            grid-template-columns:1fr 240px;
            gap:4rem; align-items:center;
        }

        .hero-eyebrow {
            display:flex; align-items:center; gap:1rem;
            margin-bottom:2.5rem;
            opacity:0; animation:slideUp 0.9s var(--exp) 2.5s forwards;
        }
        .hero-eyebrow::before {
            content:''; width:34px; height:1px;
            background:var(--gold); flex-shrink:0;
        }
        .hero-eyebrow span {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.35em; color:var(--gold); text-transform:uppercase;
        }

        .hero-h1 {
            font-family:var(--font-d);
            font-size:clamp(3.8rem,9vw,9.5rem);
            font-weight:200; line-height:0.87;
            letter-spacing:-0.02em; color:var(--cream);
            margin-bottom:0.6rem;
            opacity:0; animation:slideUp 0.9s var(--exp) 2.7s forwards;
        }
        .hero-h1 em { font-style:italic; color:var(--gold); }

        .hero-jp {
            font-family:var(--font-d); font-weight:200;
            font-size:clamp(0.8rem,1.8vw,1.3rem); letter-spacing:0.58em;
            color:var(--mist); margin-bottom:2.5rem;
            opacity:0; animation:slideUp 0.9s var(--exp) 2.9s forwards;
        }

        .hero-p {
            font-size:1.08rem; font-weight:300; line-height:1.9;
            color:var(--silver); max-width:440px; margin-bottom:3rem;
            opacity:0; animation:slideUp 0.9s var(--exp) 3.1s forwards;
        }

        .hero-btns {
            display:flex; gap:1.8rem; align-items:center;
            opacity:0; animation:slideUp 0.9s var(--exp) 3.3s forwards;
        }

        .btn-primary {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.25em; text-transform:uppercase;
            color:var(--black); background:var(--gold);
            padding:1.1rem 2.8rem; text-decoration:none;
            cursor:pointer; position:relative; overflow:hidden;
            transition:color 0.3s;
        }
        .btn-primary::before {
            content:''; position:absolute;
            top:0; left:-100%; width:100%; height:100%;
            background:var(--cream); transition:left 0.4s var(--exp);
        }
        .btn-primary:hover::before { left:0; }
        .btn-primary span { position:relative; z-index:1; }

        .btn-ghost {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.25em; text-transform:uppercase;
            color:var(--silver); text-decoration:none; cursor:pointer;
            transition:color 0.3s; display:flex; align-items:center; gap:0.55rem;
        }
        .btn-ghost::after { content:'→'; transition:transform 0.3s; }
        .btn-ghost:hover { color:var(--cream); }
        .btn-ghost:hover::after { transform:translateX(5px); }

        /* Hero right stats */
        .hero-side {
            display:flex; flex-direction:column;
            align-items:flex-end; gap:2.5rem;
            opacity:0; animation:slideLeft 0.9s var(--exp) 3.5s forwards;
        }
        .hero-vert {
            writing-mode:vertical-rl;
            font-family:var(--font-d); font-size:0.82rem; font-weight:200;
            letter-spacing:0.65em; color:rgba(255,255,255,0.09);
        }
        .hero-stats { display:flex; flex-direction:column; gap:2rem; }
        .hero-stat {
            text-align:right; padding-right:1.5rem;
            border-right:1px solid var(--gold-dk);
        }
        .hero-stat-n {
            font-family:var(--font-d); font-size:2.1rem;
            font-weight:200; color:var(--cream); line-height:1;
        }
        .hero-stat-l {
            font-family:var(--font-m); font-size:0.48rem;
            letter-spacing:0.22em; color:var(--mist);
            text-transform:uppercase; margin-top:0.2rem;
        }

        /* Scroll indicator */
        .hero-scroll {
            position:absolute; bottom:3rem; left:50%;
            transform:translateX(-50%);
            display:flex; flex-direction:column; align-items:center; gap:0.55rem;
            opacity:0; animation:fadeIn 1s var(--exp) 4s forwards;
        }
        .hero-scroll span {
            font-family:var(--font-m); font-size:0.48rem;
            letter-spacing:0.35em; color:var(--mist); text-transform:uppercase;
        }
        .hero-scroll-line {
            width:1px; height:52px;
            background:linear-gradient(to bottom, var(--gold), transparent);
            animation:pulse 2.3s ease-in-out infinite;
        }
        @keyframes pulse { 0%,100%{opacity:0.35} 50%{opacity:1} }

        /* ═══════════════════════════════════════════════
           MARQUEE
        ═══════════════════════════════════════════════ */
        .marquee { overflow:hidden; background:var(--gold-dk); padding:1.1rem 0; }
        .marquee-track {
            display:flex; gap:3rem;
            animation:tick 30s linear infinite; white-space:nowrap;
        }
        .marquee-item {
            display:flex; align-items:center; gap:2rem; flex-shrink:0;
            font-family:var(--font-d); font-size:0.7rem; font-weight:300;
            letter-spacing:0.35em; color:var(--cream); text-transform:uppercase;
        }
        .marquee-item::after { content:'岬'; color:rgba(255,255,255,0.22); font-size:1rem; }
        @keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

        /* ═══════════════════════════════════════════════
           SHARED SECTION UTILITIES
        ═══════════════════════════════════════════════ */
        .sec-tag {
            display:flex; align-items:center; gap:1rem;
            font-family:var(--font-m); font-size:0.56rem;
            letter-spacing:0.35em; color:var(--gold);
            text-transform:uppercase; margin-bottom:2.5rem;
        }
        .sec-tag::before { content:''; width:26px; height:1px; background:var(--gold); flex-shrink:0; }

        /* ═══════════════════════════════════════════════
           PHILOSOPHY
        ═══════════════════════════════════════════════ */
        .philosophy {
            padding:11rem 5rem;
            position:relative; overflow:hidden;
        }
        .phil-kanji {
            position:absolute; right:-0.08em; top:50%;
            transform:translateY(-50%);
            font-family:var(--font-d);
            font-size:clamp(16rem,30vw,42rem);
            font-weight:700; color:rgba(255,255,255,0.016);
            line-height:1; pointer-events:none; user-select:none;
        }
        .phil-inner {
            max-width:1400px; margin:0 auto;
            display:grid; grid-template-columns:1fr 1fr;
            gap:7rem; align-items:center;
        }
        .phil-h {
            font-family:var(--font-d); font-weight:200;
            font-size:clamp(2.3rem,4.5vw,4.3rem);
            line-height:1.08; color:var(--cream); margin-bottom:2rem;
        }
        .phil-h em { font-style:italic; color:var(--gold); }
        .phil-p {
            font-size:1.05rem; font-weight:300; line-height:2;
            color:var(--silver); margin-bottom:1.4rem;
        }
        .phil-quote {
            border-left:2px solid var(--gold);
            padding-left:2rem; margin:2.8rem 0;
        }
        .phil-qt {
            font-family:var(--font-d); font-size:1.2rem;
            font-weight:200; font-style:italic;
            line-height:1.65; color:var(--cream);
        }
        .phil-qjp {
            font-family:var(--font-d); font-size:0.78rem;
            font-weight:200; letter-spacing:0.35em;
            color:var(--gold); margin-top:0.7rem;
        }

        /* Principle cards */
        .principles {
            display:grid; grid-template-columns:1fr 1fr;
            gap:1px; background:var(--dark);
        }
        .principle {
            background:var(--ink); padding:2.8rem 2.3rem;
            position:relative; overflow:hidden; transition:background 0.4s;
        }
        .principle:hover { background:var(--charcoal); }
        .principle::after {
            content:''; position:absolute;
            top:0; left:0; right:0; height:1px;
            background:linear-gradient(90deg,transparent,var(--gold),transparent);
            transform:scaleX(0); transition:transform 0.5s var(--exp);
        }
        .principle:hover::after { transform:scaleX(1); }
        .principle-kanji {
            font-family:var(--font-d); font-size:2rem; font-weight:200;
            color:var(--gold); display:block; margin-bottom:0.9rem;
            transition:transform 0.4s var(--exp);
        }
        .principle:hover .principle-kanji { transform:translateY(-3px) scale(1.06); }
        .principle-title {
            font-family:var(--font-m); font-size:0.56rem;
            letter-spacing:0.2em; text-transform:uppercase;
            color:var(--silver); margin-bottom:0.65rem;
        }
        .principle-desc {
            font-size:0.92rem; font-weight:300;
            line-height:1.78; color:var(--mist);
        }

        /* ═══════════════════════════════════════════════
           COLLECTION
        ═══════════════════════════════════════════════ */
        .collection { padding:8rem 0; background:var(--ink); }
        .col-head {
            max-width:1400px; margin:0 auto; padding:0 5rem;
            display:flex; justify-content:space-between;
            align-items:flex-end; margin-bottom:5rem;
        }
        .col-h {
            font-family:var(--font-d); font-weight:200;
            font-size:clamp(2.3rem,4.5vw,4rem);
            color:var(--cream); line-height:1.05;
        }
        .col-h em { font-style:italic; color:var(--gold); }
        .col-note {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.18em; color:var(--mist);
            text-transform:uppercase; max-width:250px;
            text-align:right; line-height:1.9;
        }
        .col-grid {
            display:grid; grid-template-columns:repeat(3,1fr);
            gap:1px; background:var(--dark);
        }

        /* ─── Product Card ─── */
        .pc { background:var(--black); cursor:pointer; position:relative; overflow:hidden; }

        .pc-vis {
            aspect-ratio:3/4; position:relative;
            overflow:hidden; display:flex;
            align-items:center; justify-content:center;
            background:var(--charcoal);
        }

        /* Studio photography backdrop */
        .pc-backdrop {
            position:absolute; inset:0; transition:opacity 0.6s;
        }
        .pc--n1 .pc-backdrop {
            background:
                radial-gradient(ellipse at 50% 20%, rgba(40,50,80,0.35) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 80%, rgba(10,14,28,0.6) 0%, transparent 50%),
                linear-gradient(160deg, #0e1220 0%, #060608 60%);
        }
        .pc--e .pc-backdrop {
            background:
                radial-gradient(ellipse at 50% 20%, rgba(55,35,20,0.4) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 80%, rgba(15,10,6,0.6) 0%, transparent 50%),
                linear-gradient(160deg, #130d08 0%, #060608 60%);
        }
        .pc--n2 .pc-backdrop {
            background:
                radial-gradient(ellipse at 50% 20%, rgba(30,50,90,0.38) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 80%, rgba(10,16,30,0.6) 0%, transparent 50%),
                linear-gradient(160deg, #0c1220 0%, #060608 60%);
        }

        /* AI Image — replaces SVG once loaded */
        .pc-img {
            position:absolute; inset:0; z-index:2;
            width:100%; height:100%;
            object-fit:cover; object-position:center top;
            opacity:0; transition:opacity 0.6s ease;
        }
        .pc-img.loaded {
            opacity:1;
        }
        .pc-img.loaded ~ .pc-svg,
        .pc-img.loaded ~ .pc-shine {
            opacity:0;
            pointer-events:none;
        }

        /* SVG trouser illustration (fallback / placeholder) */
        .pc-svg {
            position:relative; z-index:1;
            width:52%; height:80%;
            transition:transform 0.7s var(--exp), opacity 0.5s;
            filter:drop-shadow(0 20px 50px rgba(0,0,0,0.7))
                   drop-shadow(0 5px 15px rgba(0,0,0,0.5));
        }
        .pc:hover .pc-svg { transform:scale(1.04) translateY(-2.5%); }

        /* Studio light shine on hover */
        .pc-shine {
            position:absolute; inset:0; z-index:2;
            background:linear-gradient(120deg, transparent 40%, rgba(184,148,88,0.04) 60%, transparent 70%);
            opacity:0; transition:opacity 0.5s;
        }
        .pc:hover .pc-shine { opacity:1; }

        /* Hover overlay */
        .pc-overlay {
            position:absolute; inset:0; z-index:5;
            background:rgba(6,6,8,0.8);
            display:flex; flex-direction:column;
            align-items:center; justify-content:center; gap:1rem;
            opacity:0; transition:opacity 0.4s var(--exp);
        }
        .pc:hover .pc-overlay { opacity:1; }

        .ov-btn {
            font-family:var(--font-m); font-size:0.58rem;
            letter-spacing:0.2em; text-transform:uppercase;
            padding:0.85rem 2.2rem; text-decoration:none;
            cursor:pointer; transition:background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
        }
        .ov-btn--p { background:var(--gold); color:var(--black); border:1px solid var(--gold); }
        .ov-btn--p:hover { background:var(--cream); border-color:var(--cream); }
        .ov-btn--s { color:var(--silver); border:1px solid var(--mid); }
        .ov-btn--s:hover { border-color:var(--silver); color:var(--cream); }

        /* Info panel */
        .pc-info { padding:2.2rem 2.5rem 3rem; border-top:1px solid var(--dark); }
        .pc-tag {
            font-family:var(--font-m); font-size:0.5rem;
            letter-spacing:0.3em; text-transform:uppercase;
            color:var(--gold); display:flex; align-items:center;
            gap:0.45rem; margin-bottom:0.75rem;
        }
        .pc-name {
            font-family:var(--font-d); font-size:1.65rem;
            font-weight:300; color:var(--cream);
            line-height:1.1; margin-bottom:0.4rem;
        }
        .pc-name-jp {
            font-family:var(--font-d); font-size:0.76rem;
            font-weight:200; letter-spacing:0.35em;
            color:var(--mist); margin-bottom:1.3rem;
        }
        .pc-swatches { display:flex; gap:0.5rem; margin-bottom:1.4rem; }
        .swatch {
            width:14px; height:14px; border-radius:50%;
            border:1px solid rgba(255,255,255,0.07);
            cursor:pointer; transition:transform 0.2s;
        }
        .swatch:hover { transform:scale(1.25); }
        .swatch.on { box-shadow:0 0 0 1px var(--gold); }

        .pc-foot { display:flex; justify-content:space-between; align-items:flex-end; }
        .pc-price-lbl {
            font-family:var(--font-m); font-size:0.48rem;
            letter-spacing:0.2em; color:var(--mist);
            text-transform:uppercase; display:block; margin-bottom:0.2rem;
        }
        .pc-price {
            font-family:var(--font-b); font-size:1.45rem;
            font-weight:400; color:var(--cream);
        }
        .pc-arrow {
            width:40px; height:40px; border:1px solid var(--dark);
            display:flex; align-items:center; justify-content:center;
            color:var(--silver); font-size:0.9rem; transition:color 0.3s, padding-left 0.3s;
        }
        .pc:hover .pc-arrow { background:var(--gold); border-color:var(--gold); color:var(--black); }

        /* ═══════════════════════════════════════════════
           CRAFTSMANSHIP
        ═══════════════════════════════════════════════ */
        .craft { padding:11rem 5rem; position:relative; overflow:hidden; }
        .craft-kanji {
            position:absolute; left:-0.1em; top:50%;
            transform:translateY(-50%);
            font-family:var(--font-d);
            font-size:clamp(14rem,26vw,36rem);
            font-weight:700; color:rgba(255,255,255,0.016);
            line-height:1; pointer-events:none; user-select:none;
        }
        .craft-inner { max-width:1400px; margin:0 auto; position:relative; }
        .craft-head { text-align:center; margin-bottom:5.5rem; }
        .craft-head .sec-tag { justify-content:center; }
        .craft-h {
            font-family:var(--font-d); font-size:clamp(2.3rem,4.5vw,4.3rem);
            font-weight:200; color:var(--cream); line-height:1.1; margin-bottom:1rem;
        }
        .craft-h em { font-style:italic; color:var(--gold); }
        .craft-sub {
            font-size:1.05rem; font-weight:300; color:var(--mist);
            max-width:440px; margin:0 auto; line-height:1.85;
        }
        .craft-grid {
            display:grid; grid-template-columns:repeat(4,1fr);
            gap:1px; background:var(--dark);
        }
        .craft-item {
            background:var(--ink); padding:3rem 2.5rem 3.5rem;
            position:relative; overflow:hidden; transition:background 0.4s;
        }
        .craft-item:hover { background:var(--charcoal); }
        .craft-item::before {
            content:''; position:absolute;
            bottom:0; left:0; right:0; height:1px;
            background:linear-gradient(90deg,transparent,var(--gold),transparent);
            transform:scaleX(0); transition:transform 0.5s var(--exp);
        }
        .craft-item:hover::before { transform:scaleX(1); }
        .craft-num {
            font-family:var(--font-m); font-size:0.52rem;
            letter-spacing:0.3em; color:var(--gold-dk); margin-bottom:2rem;
        }
        .craft-icon {
            font-family:var(--font-d); font-size:2.6rem; font-weight:200;
            color:rgba(184,148,88,0.2); margin-bottom:1.4rem;
            transition:color 0.4s, transform 0.4s;
        }
        .craft-item:hover .craft-icon { color:var(--gold); transform:scale(1.08); }
        .craft-title {
            font-family:var(--font-d); font-size:1.2rem;
            font-weight:300; color:var(--cream); margin-bottom:0.7rem;
        }
        .craft-desc { font-size:0.9rem; font-weight:300; line-height:1.82; color:var(--mist); }

        /* ═══════════════════════════════════════════════
           SPECIFICATIONS
        ═══════════════════════════════════════════════ */
        .specs { padding:10rem 5rem; background:var(--charcoal); position:relative; overflow:hidden; }
        .specs::before {
            content:''; position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            width:600px; height:600px;
            background:radial-gradient(circle,rgba(184,148,88,0.035) 0%,transparent 70%);
            pointer-events:none;
        }
        .specs-inner {
            max-width:1400px; margin:0 auto;
            display:grid; grid-template-columns:1fr 1fr;
            gap:8rem; align-items:center;
        }

        /* Annotated product visual */
        .specs-vis { position:relative; }
        .specs-box {
            aspect-ratio:3/4; background:var(--dark);
            position:relative; overflow:hidden;
            display:flex; align-items:center; justify-content:center;
        }
        .specs-box::before {
            content:''; position:absolute; inset:0;
            background:linear-gradient(140deg,transparent 45%,rgba(184,148,88,0.05) 100%);
        }
        .specs-box svg { width:52%; }

        /* Annotation markers */
        .ann { position:absolute; display:flex; align-items:center; gap:0.6rem; }
        .ann-dot {
            width:6px; height:6px; border-radius:50%; background:var(--gold);
            flex-shrink:0; animation:dotPulse 2.5s ease-in-out infinite;
        }
        .ann-line { width:32px; height:1px; background:rgba(184,148,88,0.4); }
        .ann-txt {
            font-family:var(--font-m); font-size:0.5rem;
            letter-spacing:0.14em; color:var(--silver); white-space:nowrap;
        }
        .ann--1 { top:12%; left:54%; }
        .ann--2 { top:32%; left:60%; }
        .ann--3 { top:52%; left:57%; }
        .ann--4 { top:70%; left:51%; }
        @keyframes dotPulse {
            0%,100%{box-shadow:0 0 0 0 rgba(184,148,88,0.5)}
            50%{box-shadow:0 0 0 6px rgba(184,148,88,0)}
        }

        .specs-h {
            font-family:var(--font-d); font-weight:200;
            font-size:clamp(1.9rem,3.8vw,3.3rem);
            color:var(--cream); margin-bottom:2.8rem; line-height:1.1;
        }
        .specs-h em { font-style:italic; color:var(--gold); }

        .specs-list { list-style:none; }
        .specs-item {
            display:grid; grid-template-columns:1fr auto;
            gap:1.8rem; padding:1.4rem 0;
            border-bottom:1px solid var(--dark);
        }
        .specs-item:first-child { border-top:1px solid var(--dark); }
        .specs-lbl {
            font-family:var(--font-m); font-size:0.52rem;
            letter-spacing:0.2em; color:var(--gold);
            text-transform:uppercase; margin-bottom:0.3rem;
        }
        .specs-val { font-size:0.97rem; font-weight:300; color:var(--silver); line-height:1.5; }
        .specs-chk {
            font-family:var(--font-m); font-size:0.52rem;
            letter-spacing:0.12em; color:var(--gold);
            display:flex; align-items:center; gap:0.3rem;
            padding-top:0.15rem; white-space:nowrap;
        }
        .specs-chk::before { content:'✓'; }

        /* ═══════════════════════════════════════════════
           CTA
        ═══════════════════════════════════════════════ */
        .cta {
            padding:12rem 5rem; text-align:center;
            position:relative; overflow:hidden;
        }
        .cta::before {
            content:''; position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            width:700px; height:700px;
            background:radial-gradient(circle,rgba(184,148,88,0.055) 0%,transparent 65%);
            pointer-events:none;
        }
        .cta::after {
            content:''; position:absolute;
            top:0; left:50%; transform:translateX(-50%);
            width:1px; height:70px;
            background:linear-gradient(to bottom,transparent,var(--gold-dk));
        }
        .cta-jp {
            font-family:var(--font-d); font-size:0.8rem; font-weight:200;
            letter-spacing:0.65em; color:var(--gold); margin-bottom:2.5rem;
        }
        .cta-h {
            font-family:var(--font-d); font-weight:200;
            font-size:clamp(2.8rem,8vw,7.5rem);
            color:var(--cream); line-height:0.9; margin-bottom:2.5rem;
        }
        .cta-h em { font-style:italic; color:var(--gold); }
        .cta-p {
            font-size:1.08rem; font-weight:300; color:var(--silver);
            max-width:460px; margin:0 auto 3.5rem; line-height:1.85;
        }
        .cta-btns { display:flex; gap:1.8rem; justify-content:center; align-items:center; }

        /* ═══════════════════════════════════════════════
           FOOTER
        ═══════════════════════════════════════════════ */
        footer { background:var(--ink); border-top:1px solid var(--dark); padding:5rem 5rem 3rem; }
        .footer-grid {
            max-width:1400px; margin:0 auto;
            display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
            gap:4rem; margin-bottom:4rem;
        }
        .footer-brand {
            font-family:var(--font-d); font-size:1.3rem; font-weight:200;
            letter-spacing:0.25em; color:var(--cream); margin-bottom:0.4rem;
        }
        .footer-brand-jp {
            font-family:var(--font-d); font-size:0.65rem; font-weight:200;
            letter-spacing:0.45em; color:var(--gold); margin-bottom:1.5rem;
        }
        .footer-about {
            font-size:0.9rem; font-weight:300; line-height:1.85;
            color:var(--mist); max-width:270px;
        }
        .footer-col-h {
            font-family:var(--font-m); font-size:0.52rem;
            letter-spacing:0.3em; text-transform:uppercase;
            color:var(--gold); margin-bottom:1.5rem;
        }
        .footer-links { list-style:none; display:flex; flex-direction:column; gap:0.65rem; }
        .footer-links a {
            font-size:0.87rem; font-weight:300;
            color:var(--mist); text-decoration:none;
            transition:color 0.3s; cursor:pointer;
        }
        .footer-links a:hover { color:var(--cream); }
        .footer-bottom {
            max-width:1400px; margin:0 auto;
            border-top:1px solid var(--dark); padding-top:2rem;
            display:flex; justify-content:space-between; align-items:center;
        }
        .footer-copy {
            font-family:var(--font-m); font-size:0.52rem;
            letter-spacing:0.14em; color:var(--mist);
        }
        .footer-dec {
            font-family:var(--font-d); font-size:0.78rem; font-weight:200;
            letter-spacing:0.55em; color:rgba(255,255,255,0.07);
        }

        /* ═══════════════════════════════════════════════
           SCROLL REVEAL
        ═══════════════════════════════════════════════ */
        .rv { opacity:0; transform:translateY(32px); transition:opacity 0.85s var(--exp), transform 0.85s var(--exp); }
        .rv.in { opacity:1; transform:none; }
        .rv.d1{transition-delay:0.1s} .rv.d2{transition-delay:0.2s}
        .rv.d3{transition-delay:0.3s} .rv.d4{transition-delay:0.4s}

        /* ═══════════════════════════════════════════════
           RESPONSIVE
        ═══════════════════════════════════════════════ */
        @media(max-width:1100px){
            #nav{padding:1.5rem 2.5rem}
            .nav-links{gap:1.5rem}
            .hero-inner{padding:0 2.5rem;grid-template-columns:1fr}
            .hero-side{display:none}
            .philosophy{padding:7rem 2.5rem}
            .phil-inner{grid-template-columns:1fr;gap:4rem}
            .collection .col-head{padding:0 2.5rem}
            .col-grid{grid-template-columns:1fr 1fr}
            .craft{padding:7rem 2.5rem}
            .craft-grid{grid-template-columns:1fr 1fr}
            .specs{padding:7rem 2.5rem}
            .specs-inner{grid-template-columns:1fr;gap:4rem}
            .cta{padding:7rem 2.5rem}
            footer{padding:4rem 2.5rem 2.5rem}
            .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
        }
        @media(max-width:860px){
            .nav-links{display:none}
            .nav-cta{display:none}
            .nav-burger{display:flex}
        }
        @media(max-width:640px){
            #nav{padding:1.5rem}
            .col-grid{grid-template-columns:1fr}
            .craft-grid{grid-template-columns:1fr}
            .principles{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr}
            .cta-btns{flex-direction:column}
        }

        /* ═══════════════════════════════════════════════
           SAFETY NETS
           .rv starts at opacity:0 and is revealed by JS. If JS
           never runs, the page must not stay blank.
        ═══════════════════════════════════════════════ */
        .no-js .rv { opacity:1; transform:none; }
        .no-js .loader { display:none; }
        .no-js #heroCanvas { display:none; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior:auto; }
            *,*::before,*::after {
                animation-duration:0.01ms !important;
                animation-iteration-count:1 !important;
                transition-duration:0.01ms !important;
            }
            .rv { opacity:1 !important; transform:none !important; }
            .marquee-track { animation:none !important; }
        }

/* ═══════════════════════════════════════════════
   INTERIOR PAGES
   Used by the generated pages (collection, product,
   craft, size guide, care, shipping, contact, legal).
═══════════════════════════════════════════════ */

.skip{
    position:absolute; left:1rem; top:-4rem; z-index:10000;
    background:var(--charcoal); color:var(--cream);
    border:1px solid var(--gold-dk); padding:0.85rem 1.4rem;
    font-family:var(--font-m); font-size:0.7rem; text-decoration:none;
    transition:top 0.25s var(--exp);
}
.skip:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── page hero ── */
.phero{
    padding:11rem 5rem 3rem;
    position:relative; border-bottom:1px solid var(--dark);
}
.phero-inner{ max-width:1400px; margin:0 auto; }
.phero-h{
    font-family:var(--font-b); font-weight:300;
    font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02;
    letter-spacing:-0.01em; color:var(--cream); margin-bottom:1.6rem;
    text-wrap:balance;
}
.phero-h em{ font-style:italic; color:var(--gold); }
.phero-p{
    font-size:clamp(0.98rem,1.4vw,1.15rem); color:var(--mist);
    line-height:1.8; max-width:58ch; font-weight:300;
}

.crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem;
    font-family:var(--font-m); font-size:0.6rem; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--mist); margin-bottom:2rem;
}
.crumbs a{ color:var(--silver); text-decoration:none; transition:color 0.3s; }
.crumbs a:hover{ color:var(--gold); }
.crumbs span[aria-current]{ color:var(--cream); }
.crumbs span[aria-hidden]{ opacity:0.35; }

/* ── bands ── */
.band{ padding:5.5rem 5rem; position:relative; }
.band--alt{ background:var(--ink); border-block:1px solid var(--dark); }

/* ── collection grid ── */
.pgrid{
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
.pcard{ background:var(--charcoal); border:1px solid var(--dark); }
.pcard-vis{
    display:block; position:relative; aspect-ratio:1; overflow:hidden;
    background:var(--black);
}
.pcard-vis img{
    width:100%; height:100%; object-fit:cover;
    transition:transform 1.1s var(--exp), opacity 0.6s;
    opacity:0.88;
}
.pcard:hover .pcard-vis img{ transform:scale(1.05); opacity:1; }
.pcard-sw{
    position:absolute; left:1.2rem; bottom:1.2rem;
    width:26px; height:26px; border-radius:50%;
    border:1px solid rgba(237,232,223,0.35);
}
.pcard-body{ padding:1.8rem 1.6rem 2rem; }
.pcard-name{
    font-family:var(--font-b); font-weight:300; font-size:1.8rem;
    color:var(--cream); margin-top:0.7rem; letter-spacing:0.01em;
}
.pcard-jp{
    font-family:var(--font-d); font-weight:200; font-size:0.72rem;
    letter-spacing:0.28em; color:var(--gold); margin-top:0.35rem;
}
.pcard-blurb{
    color:var(--mist); font-size:0.94rem; line-height:1.72;
    margin-top:1.1rem; font-weight:300;
}
.pcard-link{
    display:inline-flex; align-items:center; gap:0.6rem; margin-top:1.5rem;
    font-family:var(--font-m); font-size:0.62rem; letter-spacing:0.22em;
    text-transform:uppercase; color:var(--gold); text-decoration:none;
    border-bottom:1px solid var(--gold-dk); padding-bottom:0.4rem;
    transition:gap 0.4s var(--exp), border-color 0.3s;
}
.pcard-link:hover{ gap:1.2rem; border-color:var(--gold); }

/* ── product detail ── */
.pdp{
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
    align-items:start;
}
.pdp-vis{ background:var(--black); border:1px solid var(--dark); aspect-ratio:1; overflow:hidden; }
.pdp-vis img{ width:100%; height:100%; object-fit:cover; }
.pdp-name{
    font-family:var(--font-b); font-weight:300;
    font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.05;
    color:var(--cream); margin-top:0.8rem;
}
.pdp-jp{
    font-family:var(--font-d); font-weight:200; font-size:0.78rem;
    letter-spacing:0.3em; color:var(--gold); margin-top:0.5rem;
}
.pdp-blurb{
    font-size:1.08rem; color:var(--cream); line-height:1.75;
    margin-top:1.8rem; font-weight:300;
}
.pdp-note{
    font-size:0.96rem; color:var(--mist); line-height:1.78;
    margin-top:1rem; font-weight:300;
}
.pdp-sw{ margin-top:2rem; }
.pdp-sw-lbl{
    display:block; font-family:var(--font-m); font-size:0.58rem;
    letter-spacing:0.24em; text-transform:uppercase; color:var(--mist);
    margin-bottom:0.7rem;
}
.sw-chip{
    display:inline-flex; align-items:center; gap:0.7rem;
    font-family:var(--font-m); font-size:0.66rem; letter-spacing:0.14em;
    color:var(--cream); border:1px solid var(--dark);
    padding:0.55rem 1rem;
}
.sw-chip span{
    width:16px; height:16px; border-radius:50%;
    border:1px solid rgba(237,232,223,0.3);
}
.pdp-act{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.pdp-avail{
    font-family:var(--font-m); font-size:0.66rem; line-height:1.9;
    letter-spacing:0.06em; color:var(--mist); margin-top:1.8rem;
    padding-top:1.4rem; border-top:1px solid var(--dark);
}

.altgrid{
    display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;
    max-width:760px; margin:2.5rem auto 0;
}
.alt-card{
    display:flex; flex-direction:column; align-items:center; gap:0.6rem;
    padding:2rem 1.4rem; text-decoration:none;
    background:var(--charcoal); border:1px solid var(--dark);
    transition:border-color 0.4s var(--exp), transform 0.4s var(--exp);
}
.alt-card:hover{ border-color:var(--gold-dk); transform:translateY(-3px); }
.alt-sw{
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(237,232,223,0.25);
}
.alt-n{
    font-family:var(--font-m); font-size:0.58rem; letter-spacing:0.24em;
    text-transform:uppercase; color:var(--gold);
}
.alt-name{
    font-family:var(--font-b); font-size:1.25rem; font-weight:300;
    color:var(--cream);
}

/* ── panels ── */
.panel-wrap{ max-width:1000px; margin:0 auto; }
.panel{
    background:var(--charcoal); border:1px solid var(--dark);
    padding:clamp(1.8rem,4vw,3rem);
}
.panel + .panel{ margin-top:1.4rem; }
.panel-h{
    font-family:var(--font-b); font-weight:300;
    font-size:clamp(1.4rem,2.6vw,2rem); color:var(--cream);
    margin-bottom:1.2rem;
}
.panel-h.center{ text-align:center; }
.panel-p{
    color:var(--mist); font-size:0.98rem; line-height:1.78;
    font-weight:300; margin-top:1rem;
}
.panel-p a, .speclist a, .prose a{
    color:var(--gold); text-decoration:none;
    border-bottom:1px solid var(--gold-dk); transition:border-color 0.3s;
}
.panel-p a:hover, .speclist a:hover, .prose a:hover{ border-color:var(--gold); }
.panel-act{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

.speclist{ list-style:none; display:grid; gap:1.1rem; }
.speclist li{
    color:var(--mist); font-size:0.96rem; line-height:1.75; font-weight:300;
    padding-left:1.4rem; position:relative;
}
.speclist li::before{
    content:''; position:absolute; left:0; top:0.72em;
    width:6px; height:1px; background:var(--gold); opacity:0.7;
}
.speclist span{
    display:block; font-family:var(--font-m); font-size:0.58rem;
    letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
    margin-bottom:0.35rem;
}

/* ── prose ── */
.prose{ max-width:70ch; margin:0 auto; }
.prose p{ color:var(--mist); font-size:1.02rem; line-height:1.85; font-weight:300; }
.prose p + p{ margin-top:1.4rem; }
.prose h2{
    font-family:var(--font-b); font-weight:300; color:var(--cream);
    font-size:clamp(1.3rem,2.4vw,1.8rem); margin-top:2.8rem;
    margin-bottom:0.9rem; scroll-margin-top:6rem;
}
.prose blockquote{
    border-left:1px solid var(--gold-dk); padding:0.4rem 0 0.4rem 1.8rem;
    margin:2.2rem 0;
}
.prose blockquote p{
    font-style:italic; color:var(--cream); font-size:1.1rem; line-height:1.8;
}
.prose cite{
    display:block; font-family:var(--font-d); font-weight:200;
    font-size:0.7rem; letter-spacing:0.3em; color:var(--gold);
    margin-top:0.9rem; font-style:normal;
}
.upd{
    font-family:var(--font-m) !important; font-size:0.6rem !important;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--mist);
    margin-bottom:1rem;
}
.legal-note{
    margin-top:2.6rem; padding:1.2rem 1.4rem;
    border:1px solid var(--dark); background:var(--charcoal);
    font-size:0.92rem !important;
}
.legal-note strong{ color:var(--cream); }

/* ── size table ── */
.tablewrap{ overflow-x:auto; margin-top:1.5rem; }
.sizetable{
    width:100%; border-collapse:collapse; min-width:420px;
    font-variant-numeric:tabular-nums;
}
.sizetable th, .sizetable td{
    text-align:left; padding:0.85rem 1rem;
    border-bottom:1px solid var(--dark);
}
.sizetable th{
    font-family:var(--font-m); font-size:0.58rem; letter-spacing:0.22em;
    text-transform:uppercase; color:var(--gold); font-weight:400;
}
.sizetable td{ color:var(--cream); font-size:0.95rem; font-weight:300; }
.sizetable tbody tr:hover{ background:rgba(184,148,88,0.045); }

/* ── contact ── */
.contact-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.contact-cols .panel + .panel{ margin-top:0; }
.bigmail{ margin-top:1.4rem; }
.bigmail a{
    font-family:var(--font-b); font-size:clamp(1.1rem,2.2vw,1.5rem);
    font-weight:300; color:var(--gold); text-decoration:none;
    border-bottom:1px solid var(--gold-dk);
}
.bigmail a:hover{ border-color:var(--gold); }

@media(max-width:1100px){
    .phero{ padding:10rem 2.5rem 2.5rem; }
    .band{ padding:4.5rem 2.5rem; }
    .pgrid{ grid-template-columns:1fr 1fr; }
    .pdp{ grid-template-columns:1fr; }
    .contact-cols{ grid-template-columns:1fr; }
}
@media(max-width:640px){
    .phero{ padding:9rem 1.5rem 2rem; }
    .band{ padding:3.5rem 1.5rem; }
    .pgrid{ grid-template-columns:1fr; }
    .altgrid{ grid-template-columns:1fr; }
    .pdp-act{ flex-direction:column; align-items:stretch; }
}