/* ══════════════════════════════════
   The Someone's Tale — Global Styles
   ══════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
    /* Element-level (px-fixed) */
    --space-1:4px;
    --space-2:8px;
    --space-3:16px;
    --space-4:24px;
    --space-5:32px;
    --space-6:48px;
    --space-7:64px;
    --space-8:96px;
    --space-9:128px;
    /* Grid system (clamp-based, predictable across viewport) */
    --gap-xs:0.5rem;                            /* 8px  tight */
    --gap-sm:clamp(1rem,1.5vw,1.5rem);          /* 16-24 element gap */
    --gap-md:clamp(1.5rem,2.5vw,2.5rem);        /* 24-40 inner gap */
    --gap-lg:clamp(2.5rem,4vw,4rem);            /* 40-64 block gap */
    --gap-xl:clamp(4rem,6vw,6rem);              /* 64-96 group gap */
    --gap-2xl:clamp(6rem,7vw,7rem);             /* 96-112 section gap (SP=96px floor, PC tightened from 160→112) */
    /* Legacy vh — only for FV/hero where viewport-height matters */
    --vh-sm:4vh;
    --vh-md:8vh;
    --vh-lg:12vh;
    --vh-xl:16vh;
    --content-px:8vw;
}
html{scrollbar-gutter:stable;background:#040711;}
html,body{
    width:100%;height:auto;background:#040711;
    min-height:100vh;
    min-height:100lvh;  /* always largest — avoids both bottom gap (when nav shrinks) and jank (no per-frame reflow) */
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    cursor:none;overflow-x:hidden;
    /* Global typography */
    font-kerning:normal;
    font-variant-ligatures:common-ligatures contextual;
    font-feature-settings:"palt" 1,"kern" 1,"liga" 1,"clig" 1,"calt" 1;
    text-rendering:optimizeLegibility;
}
canvas#gl{position:fixed;top:0;left:0;will-change:transform;opacity:0;}
.fv-canvas-wrap{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;overflow:hidden;z-index:0;}

/* Custom cursor */
.cursor{position:fixed;z-index:9999;pointer-events:none;mix-blend-mode:difference;will-change:transform;top:0;left:0;}
.cursor-dot{width:6px;height:6px;background:#e8e8e3;border-radius:50%;transform:translate(-50%,-50%);}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(232,232,227,0.25);border-radius:50%;transform:translate(-50%,-50%);transition:transform 0.15s ease-out,width 0.3s,height 0.3s,border-color 0.25s;}
.cursor-ring.hover{width:56px;height:56px;border-color:rgba(232,232,227,0.5);}

.fv-wrap{position:relative;height:100vh;height:100lvh;width:100%;overflow:hidden;}
.ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.ui a,.ui button{pointer-events:auto;}

/* Content wrap — bg moved to individual children so series-labels can let the FV canvas show through behind their headings */
.content-wrap{position:relative;z-index:2;}

/* Sections */
.sec{position:relative;padding:var(--gap-2xl) var(--content-px);}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--gap-2xl);}
.lbl{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:1.8px;text-transform:uppercase;color:rgba(232,232,227,0.35);}
.num{font-family:'Inter',sans-serif;font-size:12px;color:rgba(232,232,227,0.2);letter-spacing:0.5px;}

/* About — Liquid Glass text (self-contained, no background ornament) */
.about-catch{
    margin:0 0 var(--gap-xl);
    max-width:1000px;
    display:flex;flex-direction:column;
    gap:clamp(4px,0.6vw,14px);
}
.about-catch-line{display:block;margin:0;}
.about-catch-svg{
    display:block;
    height:clamp(42px,5.5vw,82px);
    width:auto;max-width:100%;
}
#about{padding-top:20px;padding-bottom:clamp(32px,4vw,56px);}
.about-poem{
    max-width:1160px;margin:0 auto;
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-style:normal;font-weight:300;
    color:#ffffff;
}
.poem-stanza{margin-bottom:clamp(24px,2vw,28px);}
.poem-stanza:last-child{margin-bottom:0;}
.poem-stanza p{
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    line-height:1.7;
    margin:0 0 0.2em;
    letter-spacing:0.01em;
}
.poem-stanza p:last-child{margin-bottom:0;}
.about-text{
    font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(0.95rem,1.2vw,1.1rem);font-weight:300;
    line-height:1.85;color:rgba(232,232,227,0.55);max-width:680px;
}
.about-text p{margin:0 0 1.8em;}
.about-text p:last-child{margin-bottom:0;}

/* Character animation — opacity-only (was: filter:blur which is GPU-heavy with many chars) */
.char{
    display:inline-block;
    opacity:0;
    transition:opacity 0.7s ease-out;
}
.char.clear{
    opacity:1;
}

/* News ticker */
.ticker-wrap{overflow:hidden;border-top:1px solid rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.04);padding:var(--space-3) 0;position:relative;}
.ticker{display:flex;gap:var(--space-8);white-space:nowrap;animation:tickerSlide 35s linear infinite;}
.ticker span{font-family:'Inter','Noto Sans JP',sans-serif;font-size:13px;font-weight:300;color:rgba(232,232,227,0.2);}
.ticker .dot{color:rgba(107,122,153,0.4);margin:0 0.3em;}
@keyframes tickerSlide{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* Statement — opening declaration (Tier 1) */
.statement-body{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(1.8rem,3.8vw,3.2rem);
    font-weight:300;
    line-height:1.45;
    letter-spacing:-0.015em;
    color:rgba(232,232,227,0.92);
    max-width:1100px;
}

/* About — 3 principles */
.about-principles{list-style:none;padding:0;margin:var(--gap-2xl) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);border-top:1px solid rgba(255,255,255,0.06);padding-top:var(--gap-xl);}
.about-principles li{display:flex;flex-direction:column;gap:var(--space-4);}
.principle-num{font-family:'Inter','Noto Sans JP',sans-serif;font-size:0.8rem;font-weight:300;letter-spacing:0.28em;color:rgba(232,232,227,0.4);}
.principle-text{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300;line-height:1.7;color:rgba(232,232,227,0.85);}

.exhibition-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--space-6);margin:var(--gap-md) 0;}
.meta-item{display:flex;flex-direction:column;gap:var(--space-2);}
.meta-label{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:1.5px;text-transform:uppercase;color:rgba(232,232,227,0.35);}
.meta-value{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(0.95rem,1.2vw,1.1rem);font-weight:300;color:rgba(232,232,227,0.85);letter-spacing:0.01em;}
.exhibition-statement{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(0.9rem,1.25vw,1.05rem);font-weight:300;line-height:1.9;color:rgba(232,232,227,0.55);max-width:640px;margin-bottom:var(--gap-md);}

.exhibition-divider{padding:clamp(48px,7vw,96px) var(--content-px) clamp(24px,4vw,48px);}
.exhibition-label{display:block;color:#ffffff;}
.exhibition-svg{display:block;height:clamp(40px,5.5vw,68px);width:auto;color:inherit;}

#black-and-blue{position:relative;z-index:1;padding-top:var(--gap-2xl);padding-bottom:var(--gap-xl);}
/* AURORA bottom matches #about so AURORA → Sky Blue gap == About → strangers */
#aurora{padding-bottom:clamp(32px,4vw,56px);}
#aurora .work-title-wrap{margin-bottom:0;}
/* Contact top matches .series-label so Sky Blue intro → Contact gap == About → strangers */
#contact{padding-top:clamp(180px,14vw,220px);}

/* Exhibition series label — "strangers" (FV ロゴと同じ DM Serif Display) */
.series-label{
    padding:clamp(180px,14vw,220px) var(--content-px) 0;
}
.series-label-eyebrow{display:none;}
.series-label p{
    max-width:1160px;
    margin:0 auto;
    font-family:'DM Serif Display','Bodoni 72',serif;
    font-size:clamp(4rem,17vw,15rem);
    font-weight:400;
    letter-spacing:-0.005em;
    color:#fff;
    line-height:1;
}
/* PC: match the FV title visual size (FV svg ≒ 106px tall at 1160px max-width) */
@media(min-width:769px){
    .series-label p{font-size:clamp(3.5rem,8vw,8rem);}
}

/* strangers intro + Read More + modal — bottom padding matches #about so series-intro → next series-label gap = About → strangers gap */
.series-intro{
    padding:40px var(--content-px) clamp(32px,4vw,56px);
}
.series-intro-inner{
    max-width:1160px;margin:0 auto;
}
.series-intro-text{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    font-weight:300;
    line-height:1.7;
    color:#ffffff;
    letter-spacing:0.01em;
    margin:0;
}
.series-more{
    display:inline-block;
    margin-top:clamp(36px,4.5vw,56px);
    background:none;border:none;
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(1.15rem,1.6vw,1.4rem);
    font-weight:300;
    color:rgba(232,232,227,0.7);
    cursor:pointer;
    padding:0 0 var(--space-2);
    border-bottom:1px solid rgba(255,255,255,0.15);
    transition:color 0.3s,border-color 0.3s;
}
@media (hover: hover){
    .series-more:hover{color:#e8e8e3;border-color:rgba(232,232,227,0.4);}
}
.text-modal{
    position:fixed;inset:0;z-index:500;
    background:#020510;
    opacity:0;pointer-events:none;
    transition:opacity 1.2s ease-out;
}
.text-modal.open{opacity:1;pointer-events:auto;}
.text-modal-close{
    align-self:center;
    margin-top:clamp(32px,5vh,56px);
    background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:13px;font-weight:300;letter-spacing:1.4px;
    padding:8px 14px;
    transition:color 0.2s;
    line-height:1;
}
@media (hover: hover){
    .text-modal-close:hover{color:rgba(255,255,255,0.85);}
}
.text-modal-title{
    font-family:'Shippori Mincho','Yu Mincho','YuMincho',serif;
    font-size:clamp(2rem,3.5vw,2.8rem);font-weight:400;
    color:#fff;margin:0 0 clamp(32px,4vw,48px);
    letter-spacing:0.02em;
}
.text-modal-logo{
    position:fixed;
    top:clamp(28px,3.5vw,48px);
    left:50%;
    transform:translateX(-50%);
    width:clamp(120px,16vw,200px);
    height:auto;
    filter:brightness(0) invert(1);
    opacity:0.45;
    z-index:1;
    pointer-events:none;
}

/* strangers modal hero — fixed-centered viewport overlay (scroll-triggered fade) */
.text-modal-hero{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(260px,34vw,420px);
    aspect-ratio:1/1;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
    transition:opacity 0.6s ease-out;
}
/* Layer 2: fully transparent — logo only visible when illuminated by orbs */
.text-modal-hero-logo{
    display:none;
}
/* Bright orb 1 — cool blue + sapphire mix (animations applied only via .text-modal.open to avoid base/override conflicts) */
.text-modal-hero-light{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 50%,
        rgba(212,224,250,0.75) 0%,
        rgba(154,178,239,0.55) 10%,
        rgba(111,149,232,0.25) 22%,
        transparent 45%);
    background-size:220% 220%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:0;
}
/* Bright orb 2 — lavender + pale sky mix */
.text-modal-hero-light2{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 50%,
        rgba(228,220,255,0.65) 0%,
        rgba(192,173,240,0.45) 12%,
        rgba(120,200,240,0.25) 26%,
        transparent 48%);
    background-size:240% 240%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:0;
}
/* Dark orb — color matches modal background (#020510 = rgb(2,5,16)) so the orb "blends out" against modal bg */
.text-modal-hero-dark{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 50%,
        rgba(2,5,16,0.65) 0%,
        rgba(2,5,16,0.35) 12%,
        rgba(2,5,16,0.15) 24%,
        transparent 45%);
    background-size:230% 230%;
    background-repeat:no-repeat;
    mix-blend-mode:multiply;
    opacity:0;
}
/* Strangers keeps SVG path mask */
#strangersModal .text-modal-hero-light,
#strangersModal .text-modal-hero-light2,
#strangersModal .text-modal-hero-dark{
    -webkit-mask:url('../data/strangers-logo-inverted.svg') center/contain no-repeat;
    mask:url('../data/strangers-logo-inverted.svg') center/contain no-repeat;
}

/* Detour / trade — text-based hero (real DM Serif Display via HTML, orbs masked via background-clip:text) */
.text-modal-hero--text .hero-text{
    position:absolute;inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Serif Display','Bodoni 72',serif;
    font-weight:400;
    font-size:clamp(72px,9vw,140px);
    letter-spacing:-0.005em;
    line-height:1;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    background-repeat:no-repeat;
    pointer-events:none;
    opacity:0;
    white-space:nowrap;
}
/* Detour hero-text — mirror of close-bar */
#detourModal .hero-text--light{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(245,120,40,0.65) 0%,
        rgba(238,105,38,0.59) 10%,
        rgba(228,88,38,0.53) 20%,
        rgba(215,72,38,0.46) 30%,
        rgba(200,58,38,0.39) 40%,
        rgba(182,45,38,0.31) 50%,
        rgba(162,35,38,0.24) 60%,
        rgba(140,25,35,0.13) 70%,
        transparent 80%);
    background-size:220% 220%;
    mix-blend-mode:screen;
}
#detourModal .hero-text--light2{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(210,55,30,0.70) 0%,
        rgba(200,48,28,0.62) 10%,
        rgba(190,42,28,0.54) 20%,
        rgba(178,35,27,0.46) 30%,
        rgba(165,30,26,0.38) 40%,
        rgba(150,25,25,0.30) 50%,
        rgba(132,20,23,0.22) 60%,
        rgba(115,15,20,0.13) 70%,
        transparent 80%);
    background-size:240% 240%;
    mix-blend-mode:screen;
}
/* dark orb disabled — was killing brightness with multiply */
#detourModal .hero-text--dark{
    background-image:none;
    animation:none;
}
/* trade hero-text — mirror of close-bar */
#tradeModal .hero-text--light{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(160,232,128,0.75) 0%,
        rgba(142,214,123,0.66) 10%,
        rgba(123,196,118,0.58) 20%,
        rgba(105,178,112,0.49) 30%,
        rgba(87,159,107,0.41) 40%,
        rgba(69,141,102,0.32) 50%,
        rgba(50,123,97,0.24) 60%,
        rgba(32,105,92,0.15) 70%,
        transparent 80%);
    background-size:220% 220%;
    mix-blend-mode:screen;
}
#tradeModal .hero-text--light2{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(55,170,118,0.75) 0%,
        rgba(51,156,110,0.66) 10%,
        rgba(47,143,102,0.56) 20%,
        rgba(43,129,94,0.47) 30%,
        rgba(39,116,86,0.38) 40%,
        rgba(35,102,78,0.29) 50%,
        rgba(32,89,70,0.19) 60%,
        rgba(28,75,62,0.10) 70%,
        transparent 80%);
    background-size:240% 240%;
    mix-blend-mode:screen;
}
/* dark orb disabled */
#tradeModal .hero-text--dark{
    background-image:none;
    animation:none;
}
/* "Sky Blue" is wider than other titles — expand the hero container so the original font-size fits on one line */
#skyblueModal .text-modal-hero{
    width:min(92vw,720px);
    aspect-ratio:5/2;
}
/* Today modal — 3-line stacked hero text, centered. Font-size matches other modals; hero container is widened (3/2 aspect) to fit the longest line "tomorrow" + 3 stacked lines vertically. */
#todayModal .text-modal-hero{
    width:min(92vw,720px);
    aspect-ratio:3/2;
}
#todayModal .hero-text{
    text-align:center;
    line-height:1;
    white-space:normal;
}
/* Sky Blue hero-text — turquoise (mirror of close-bar) */
#skyblueModal .hero-text--light{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(100,220,205,0.65) 0%,
        rgba(85,205,195,0.59) 10%,
        rgba(70,190,185,0.53) 20%,
        rgba(58,175,175,0.46) 30%,
        rgba(45,160,165,0.39) 40%,
        rgba(35,145,155,0.31) 50%,
        rgba(28,130,145,0.24) 60%,
        rgba(22,115,135,0.13) 70%,
        transparent 80%);
    background-size:220% 220%;
    mix-blend-mode:screen;
}
#skyblueModal .hero-text--light2{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(40,160,170,0.70) 0%,
        rgba(35,148,160,0.62) 10%,
        rgba(32,136,150,0.54) 20%,
        rgba(28,123,140,0.46) 30%,
        rgba(25,110,130,0.38) 40%,
        rgba(22,98,120,0.30) 50%,
        rgba(20,85,108,0.22) 60%,
        rgba(18,72,95,0.13) 70%,
        transparent 80%);
    background-size:240% 240%;
    mix-blend-mode:screen;
}
#skyblueModal .hero-text--dark{
    background-image:none;
    animation:none;
}
/* Today modal hero-text — pastel cyan / white / pastel yellow (mirror of strangers close-bar) */
#todayModal .hero-text--light{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(180,235,250,0.85) 0%,
        rgba(173,228,245,0.78) 10%,
        rgba(165,221,240,0.70) 20%,
        rgba(158,214,235,0.60) 30%,
        rgba(150,207,230,0.48) 40%,
        rgba(143,201,225,0.36) 50%,
        rgba(135,194,220,0.22) 60%,
        rgba(128,187,215,0.11) 70%,
        transparent 80%);
    background-size:220% 220%;
    mix-blend-mode:screen;
}
#todayModal .hero-text--light2{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.80) 0%,
        rgba(250,250,250,0.72) 10%,
        rgba(245,245,245,0.62) 20%,
        rgba(240,240,240,0.52) 30%,
        rgba(235,235,235,0.40) 40%,
        rgba(230,230,230,0.30) 50%,
        rgba(225,225,225,0.20) 60%,
        rgba(220,220,220,0.10) 70%,
        transparent 80%);
    background-size:240% 240%;
    mix-blend-mode:screen;
}
#todayModal .hero-text--dark{
    background-image:radial-gradient(circle at 50% 50%,
        rgba(255,245,180,0.80) 0%,
        rgba(250,239,170,0.72) 10%,
        rgba(246,234,161,0.62) 20%,
        rgba(241,228,151,0.50) 30%,
        rgba(236,222,142,0.40) 40%,
        rgba(232,217,133,0.28) 50%,
        rgba(227,211,123,0.18) 60%,
        rgba(223,205,114,0.10) 70%,
        transparent 80%);
    background-size:230% 230%;
    mix-blend-mode:screen;
}
/* Apply same hex orbit animations to hero-text layers */
.text-modal.open .hero-text--light{
    animation:hero-intro-light1 1s linear forwards,bar-orb1-intro 4s linear 1s both,bar-orb1 9s linear 5s infinite;
}
.text-modal.open .hero-text--light2{
    animation:hero-intro-light2 1s linear 1s forwards,bar-orb2-intro 4s linear 2s both,bar-orb2 13s linear 6s infinite;
}
.text-modal.open .hero-text--dark{
    animation:hero-intro-light1 1s linear forwards,bar-orb3 11s linear infinite;
}
/* Modal-open phase timings — all motions seamless, no warps */
/* light1: 0-1s opacity 0→1 (held at off-BL), 1-5s BL→hex-start sweep, 5s+ linear hexagonal orbit (no pauses, fewer corners) — blackout temporarily disabled */
.text-modal.open .text-modal-hero-light{
    animation:hero-intro-light1 1s linear forwards,hero-orb1-intro 4s linear 1s both,hero-orb1 9s linear 5s infinite;
}
/* light2: 1-2s opacity 0→1, 2-6s BR→hex-start sweep, 6s+ linear hexagonal orbit (mirror of light1) — blackout temporarily disabled */
.text-modal.open .text-modal-hero-light2{
    animation:hero-intro-light2 1s linear 1s forwards,hero-orb2-intro 4s linear 2s both,hero-orb2 13s linear 6s infinite;
}
/* dark orb: intro fade-in 0-1s (matches light1 timing), then runs free — blackout temporarily disabled */
.text-modal.open .text-modal-hero-dark{
    animation:hero-intro-light1 1s linear forwards,hero-orb3 11s linear infinite;
}
/* Light 1 — opacity 0→1 over the full 1s intro (held at off-BL position while ramping) */
@keyframes hero-intro-light1{
    0%   { opacity:0; }
    100% { opacity:1; }
}
/* Light 2 — same shape as light1, delayed 1s */
@keyframes hero-intro-light2{
    0%   { opacity:0; }
    100% { opacity:1; }
}
/* Mid-cycle blackout — cascades off one sphere at a time, brief all-dark moment, then cascades back on */
/* Light 2 — first to dim, last to return (mirrors intro order) */
@keyframes hero-blackout-light2{
    0%,40%   { opacity:1; }
    44%,56%  { opacity:0; }
    60%,100% { opacity:1; }
}
/* Light 1 — second to dim, second to return */
@keyframes hero-blackout-light1{
    0%,42%   { opacity:1; }
    46%,54%  { opacity:0; }
    58%,100% { opacity:1; }
}
/* Dark sphere — last to dim, first to return */
@keyframes hero-blackout-dark{
    0%,44%   { opacity:1; }
    48%,52%  { opacity:0; }
    56%,100% { opacity:1; }
}
/* Orb 1 intro — sweep from off-bottom-left into hex-start (NE of small central orbit) */
@keyframes hero-orb1-intro{
    0%   { background-position:100% 0%; }     /* off bottom-left — bright (-10, 110) */
    100% { background-position:38% 72%; }     /* hex-start — bright (65, 24) */
}
/* Orb 1 free motion — small hex orbit (r=30) CCW, stays in silhouette's dense central area to avoid visible "warp" when bright crosses empty mask regions */
@keyframes hero-orb1{
    0%      { background-position:38% 72%; }   /* NE — bright (65, 24), handoff from intro */
    16.67%  { background-position:63% 72%; }   /* NW — bright (35, 24) */
    33.33%  { background-position:75% 50%; }   /* W — bright (20, 50) */
    50%     { background-position:63% 28%; }   /* SW — bright (35, 76) */
    66.67%  { background-position:38% 28%; }   /* SE — bright (65, 76) */
    83.33%  { background-position:25% 50%; }   /* E — bright (80, 50) */
    100%    { background-position:38% 72%; }   /* loop back */
}
/* Orb 2 intro — mirror sweep from off-bottom-right into hex-start (NW of small central orbit) */
@keyframes hero-orb2-intro{
    0%   { background-position:0% 0%; }       /* off bottom-right — bright (110, 110) */
    100% { background-position:63% 72%; }     /* hex-start — bright (35, 24) */
}
/* Orb 2 free motion — mirror small hex orbit CW from NW */
@keyframes hero-orb2{
    0%      { background-position:63% 72%; }   /* NW — bright (35, 24), handoff from intro */
    16.67%  { background-position:38% 72%; }   /* NE — bright (65, 24) */
    33.33%  { background-position:25% 50%; }   /* E — bright (80, 50) */
    50%     { background-position:38% 28%; }   /* SE — bright (65, 76) */
    66.67%  { background-position:63% 28%; }   /* SW — bright (35, 76) */
    83.33%  { background-position:75% 50%; }   /* W — bright (20, 50) */
    100%    { background-position:63% 72%; }   /* loop back */
}
/* Orb 3 (dark) — even smaller inner hex (r=18) CCW, distinct from orbs 1/2 */
@keyframes hero-orb3{
    0%      { background-position:35% 50%; }   /* E — bright (68, 50) */
    16.67%  { background-position:42% 63%; }   /* NE — bright (59.6, 34.4) */
    33.33%  { background-position:58% 63%; }   /* NW — bright (40.4, 34.4) */
    50%     { background-position:65% 50%; }   /* W — bright (32, 50) */
    66.67%  { background-position:58% 37%; }   /* SW — bright (40.4, 65.6) */
    83.33%  { background-position:42% 37%; }   /* SE — bright (59.6, 65.6) */
    100%    { background-position:35% 50%; }   /* back to E */
}

/* Wide-rectangle orbit variants — same X range as hero-orb1/2/3 but Y stretched (10-90%) so orbs travel further up/down inside the bar / hero-text. Used by both hero-text logo AND close-bar (consistent feel) */
@keyframes bar-orb1-intro{
    0%   { background-position:100% 0%; }
    100% { background-position:38% 90%; }
}
@keyframes bar-orb1{
    0%      { background-position:38% 90%; }
    16.67%  { background-position:63% 90%; }
    33.33%  { background-position:75% 50%; }
    50%     { background-position:63% 10%; }
    66.67%  { background-position:38% 10%; }
    83.33%  { background-position:25% 50%; }
    100%    { background-position:38% 90%; }
}
@keyframes bar-orb2-intro{
    0%   { background-position:0% 0%; }
    100% { background-position:63% 90%; }
}
@keyframes bar-orb2{
    0%      { background-position:63% 90%; }
    16.67%  { background-position:38% 90%; }
    33.33%  { background-position:25% 50%; }
    50%     { background-position:38% 10%; }
    66.67%  { background-position:63% 10%; }
    83.33%  { background-position:75% 50%; }
    100%    { background-position:63% 90%; }
}
@keyframes bar-orb3{
    0%      { background-position:35% 50%; }
    16.67%  { background-position:42% 80%; }
    33.33%  { background-position:58% 80%; }
    50%     { background-position:65% 50%; }
    66.67%  { background-position:58% 20%; }
    83.33%  { background-position:42% 20%; }
    100%    { background-position:35% 50%; }
}
/* Close-bar-specific orbit — orbs sweep END-TO-END so the colored bar-tint shows through the middle. Different from bar-orb1/2/3 to keep the hero-text logo's "bottom-left sweep" intact while giving the close-bar a distinct end-to-end motion */
@keyframes close-bar-orb1-intro{
    0%   { background-position:0% 0%; }
    100% { background-position:100% 75%; }
}
@keyframes close-bar-orb1{
    0%      { background-position:100% 75%; }
    25%     { background-position:50% 50%; }
    50%     { background-position:0% 75%; }
    75%     { background-position:50% 50%; }
    100%    { background-position:100% 75%; }
}
@keyframes close-bar-orb2-intro{
    0%   { background-position:100% 0%; }
    100% { background-position:0% 25%; }
}
@keyframes close-bar-orb2{
    0%      { background-position:0% 25%; }
    25%     { background-position:50% 50%; }
    50%     { background-position:100% 25%; }
    75%     { background-position:50% 50%; }
    100%    { background-position:0% 25%; }
}
@keyframes close-bar-orb3{
    0%      { background-position:20% 50%; }
    25%     { background-position:50% 75%; }
    50%     { background-position:80% 50%; }
    75%     { background-position:50% 25%; }
    100%    { background-position:20% 50%; }
}

/* PC/Mobile toggle utility — uses 'revert' to preserve element's natural display */
.show-mobile{display:none;}
@media(max-width:768px){
    .show-pc{display:none !important;}
    .show-mobile{display:revert !important;}
}
/* Body — fixed-positioned over viewport, crossfades with hero on scroll (no slide). Content flows from top so padding-top creates reading breathing room */
/* Body — fixed-positioned, fits 1 screen (no scroll). Content vertically centered with all children fading in staggered on reveal */
.text-modal-body{
    position:fixed;
    top:0; left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:760px;
    height:100vh;
    height:100svh;  /* fallback */
    height:100dvh;  /* dynamic — follows visible area so content centers within and close stays above toolbar */
    box-sizing:border-box;
    padding:clamp(48px,8vh,96px) clamp(32px,6vw,72px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    touch-action:none;
    z-index:3;
}
/* Modal closed → body non-interactive so it doesn't block page beneath */
.text-modal:not(.open) .text-modal-body{pointer-events:none;}
/* Each child fades in independently (opacity 0 default, ramps to 1 when body is .active), with staggered transition-delay */
.text-modal-body > *{
    opacity:0;
    transition:opacity 1.2s ease-out;
}
.text-modal-body.active > *{opacity:1;transition-delay:0s;}
/* Closing — text fades first, close-bar lingers visible as 余韻, then close-bar itself fades */
.text-modal-body.closing > *{
    opacity:0;
    transition:opacity 0.25s ease-out;
    transition-delay:0s;
}
.text-modal-body.closing > .text-modal-close--bar{
    opacity:1;
    transition:opacity 0.9s ease-out;  /* slow fade-out for the bar itself */
}
.text-modal-body.closing-final > .text-modal-close--bar{
    opacity:0;
}
.text-modal-body p{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(12px,1.3vw,1rem);
    font-weight:300;line-height:1.6;
    color:rgba(255,255,255,0.78);
    margin:0 0 0.8em;
    letter-spacing:0.01em;
}
.text-modal-body p:last-child{margin-bottom:0;}
.text-modal-body p.text-modal-header{
    margin-bottom:1em;
}

/* Bar-style close — rectangle acts as mask, orbs glow inside (mirrors strangers hero pattern) */
.text-modal-close--bar{
    display:block;
    width:72%;
    max-width:420px;
    height:34px;
    background:rgba(255,255,255,0.05);
    border:none;
    padding:0;
    margin:clamp(48px,8vh,96px) auto 0;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    touch-action:manipulation;  /* avoid iOS 300ms tap delay + hover-tap dual-click bug */
    -webkit-tap-highlight-color:transparent;
}
.text-modal-close--bar > span{
    position:absolute; inset:0;
    pointer-events:none;
}
/* 9-stop gradients — sine-like alpha falloff with linearly interpolated hue for fully smooth orb edges */
.text-modal-close--bar .close-bar-light{
    background:radial-gradient(circle at 50% 50%,
        rgba(212,224,250,0.70) 0%,
        rgba(201,216,247,0.64) 10%,
        rgba(189,208,245,0.56) 20%,
        rgba(178,200,242,0.46) 30%,
        rgba(166,192,240,0.35) 40%,
        rgba(155,184,237,0.25) 50%,
        rgba(143,176,235,0.15) 60%,
        rgba(132,168,232,0.08) 70%,
        transparent 80%);
    background-size:220% 220%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:0;
}
.text-modal-close--bar .close-bar-light2{
    background:radial-gradient(circle at 50% 50%,
        rgba(228,220,255,0.60) 0%,
        rgba(219,215,253,0.54) 10%,
        rgba(211,210,251,0.47) 20%,
        rgba(202,205,249,0.38) 30%,
        rgba(194,200,247,0.30) 40%,
        rgba(185,195,245,0.22) 50%,
        rgba(177,190,243,0.14) 60%,
        rgba(168,185,240,0.07) 70%,
        transparent 80%);
    background-size:240% 240%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:0;
}
.text-modal-close--bar .close-bar-dark{
    background:radial-gradient(circle at 50% 50%,
        rgba(2,5,16,0.60) 0%,
        rgba(2,5,16,0.55) 10%,
        rgba(2,5,16,0.48) 20%,
        rgba(2,5,16,0.40) 30%,
        rgba(2,5,16,0.30) 40%,
        rgba(2,5,16,0.22) 50%,
        rgba(2,5,16,0.14) 60%,
        rgba(2,5,16,0.07) 70%,
        transparent 80%);
    background-size:1150% 1150%;
    background-repeat:no-repeat;
    mix-blend-mode:multiply;
    opacity:0;
}
/* Animations — wide-rectangle orbit variants (Y stretched) for close-bar */
/* Selector also matches body.closing so orbs keep animating through the close-bar fade-out */
.text-modal.open .text-modal-close--bar .close-bar-light,
.text-modal-body.closing .text-modal-close--bar .close-bar-light{
    animation:hero-intro-light1 1s linear forwards, close-bar-orb1-intro 3.4s linear 1s both, close-bar-orb1 7.5s linear 4.4s infinite;
}
.text-modal.open .text-modal-close--bar .close-bar-light2,
.text-modal-body.closing .text-modal-close--bar .close-bar-light2{
    animation:hero-intro-light2 1s linear 1s forwards, close-bar-orb2-intro 3.4s linear 2s both, close-bar-orb2 10.5s linear 5.4s infinite;
}
.text-modal.open .text-modal-close--bar .close-bar-dark,
.text-modal-body.closing .text-modal-close--bar .close-bar-dark{
    animation:hero-intro-light1 1s linear forwards, close-bar-orb3 9s linear infinite;
}

/* Per-section orb colors — match the FV sweep tint for that section (smoothed stops) */
/* Detour — saturation-based variation (no white peak). Hue stays in red-orange family throughout */
#detourModal .close-bar-light{
    background:radial-gradient(circle at 50% 50%,
        rgba(245,120,40,0.65) 0%,
        rgba(238,105,38,0.59) 10%,
        rgba(228,88,38,0.53) 20%,
        rgba(215,72,38,0.46) 30%,
        rgba(200,58,38,0.39) 40%,
        rgba(182,45,38,0.31) 50%,
        rgba(162,35,38,0.24) 60%,
        rgba(140,25,35,0.13) 70%,
        transparent 80%);
    background-size:220% 220%;
    background-repeat:no-repeat;
}
#detourModal .close-bar-light2{
    background:radial-gradient(circle at 50% 50%,
        rgba(210,55,30,0.70) 0%,
        rgba(200,48,28,0.62) 10%,
        rgba(190,42,28,0.54) 20%,
        rgba(178,35,27,0.46) 30%,
        rgba(165,30,26,0.38) 40%,
        rgba(150,25,25,0.30) 50%,
        rgba(132,20,23,0.22) 60%,
        rgba(115,15,20,0.13) 70%,
        transparent 80%);
    background-size:240% 240%;
    background-repeat:no-repeat;
}
/* dark orb disabled — was killing brightness with multiply */
#detourModal .close-bar-dark,
#tradeModal .close-bar-dark,
#skyblueModal .close-bar-dark{
    background:none;
    animation:none;
}
/* Per-modal bar base tint — keeps the rectangle warm/cool even when orb isn't peaking */
#detourModal  .text-modal-close--bar{ background:rgba(180,90,45,0.18); }
#tradeModal   .text-modal-close--bar{ background:rgba(60,130,100,0.18); }
#skyblueModal .text-modal-close--bar{ background:rgba(40,140,150,0.18); }
/* trade — linearly interpolated channels for smooth tonal progression */
#tradeModal .close-bar-light{
    background:radial-gradient(circle at 50% 50%,
        rgba(160,232,128,0.75) 0%,
        rgba(142,214,123,0.66) 10%,
        rgba(123,196,118,0.58) 20%,
        rgba(105,178,112,0.49) 30%,
        rgba(87,159,107,0.41) 40%,
        rgba(69,141,102,0.32) 50%,
        rgba(50,123,97,0.24) 60%,
        rgba(32,105,92,0.15) 70%,
        transparent 80%);
    background-size:220% 220%;
    background-repeat:no-repeat;
}
#tradeModal .close-bar-light2{
    background:radial-gradient(circle at 50% 50%,
        rgba(55,170,118,0.75) 0%,
        rgba(51,156,110,0.66) 10%,
        rgba(47,143,102,0.56) 20%,
        rgba(43,129,94,0.47) 30%,
        rgba(39,116,86,0.38) 40%,
        rgba(35,102,78,0.29) 50%,
        rgba(32,89,70,0.19) 60%,
        rgba(28,75,62,0.10) 70%,
        transparent 80%);
    background-size:240% 240%;
    background-repeat:no-repeat;
}
/* Sky Blue — turquoise (bright turquoise → deep teal) */
#skyblueModal .close-bar-light{
    background:radial-gradient(circle at 50% 50%,
        rgba(100,220,205,0.65) 0%,
        rgba(85,205,195,0.59) 10%,
        rgba(70,190,185,0.53) 20%,
        rgba(58,175,175,0.46) 30%,
        rgba(45,160,165,0.39) 40%,
        rgba(35,145,155,0.31) 50%,
        rgba(28,130,145,0.24) 60%,
        rgba(22,115,135,0.13) 70%,
        transparent 80%);
    background-size:220% 220%;
    background-repeat:no-repeat;
}
#skyblueModal .close-bar-light2{
    background:radial-gradient(circle at 50% 50%,
        rgba(40,160,170,0.70) 0%,
        rgba(35,148,160,0.62) 10%,
        rgba(32,136,150,0.54) 20%,
        rgba(28,123,140,0.46) 30%,
        rgba(25,110,130,0.38) 40%,
        rgba(22,98,120,0.30) 50%,
        rgba(20,85,108,0.22) 60%,
        rgba(18,72,95,0.13) 70%,
        transparent 80%);
    background-size:240% 240%;
    background-repeat:no-repeat;
}
/* strangers + today — pastel cyan / white / pastel yellow (9-stop smooth) */
#strangersModal .close-bar-light,
#todayModal .close-bar-light{
    background:radial-gradient(circle at 50% 50%,
        rgba(180,235,250,0.70) 0%,
        rgba(173,228,245,0.64) 10%,
        rgba(165,221,240,0.56) 20%,
        rgba(158,214,235,0.46) 30%,
        rgba(150,207,230,0.35) 40%,
        rgba(143,201,225,0.25) 50%,
        rgba(135,194,220,0.15) 60%,
        rgba(128,187,215,0.08) 70%,
        transparent 80%);
    background-size:220% 220%;
    background-repeat:no-repeat;
}
#strangersModal .close-bar-light2,
#todayModal .close-bar-light2{
    background:radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.60) 0%,
        rgba(250,250,250,0.55) 10%,
        rgba(245,245,245,0.48) 20%,
        rgba(240,240,240,0.40) 30%,
        rgba(235,235,235,0.30) 40%,
        rgba(230,230,230,0.22) 50%,
        rgba(225,225,225,0.14) 60%,
        rgba(220,220,220,0.07) 70%,
        transparent 80%);
    background-size:240% 240%;
    background-repeat:no-repeat;
}
#strangersModal .close-bar-dark,
#todayModal .close-bar-dark{
    background:radial-gradient(circle at 50% 50%,
        rgba(255,245,180,0.65) 0%,
        rgba(250,239,170,0.59) 10%,
        rgba(246,234,161,0.52) 20%,
        rgba(241,228,151,0.42) 30%,
        rgba(236,222,142,0.32) 40%,
        rgba(232,217,133,0.22) 50%,
        rgba(227,211,123,0.14) 60%,
        rgba(223,205,114,0.07) 70%,
        transparent 80%);
    background-size:230% 230%;
    background-repeat:no-repeat;
    mix-blend-mode:screen;  /* light pastel — additive instead of multiply */
}

/* Concept body — pull-quote style (short distilled curatorial statement) */
.concept-body{
    max-width:720px;margin:0 0 var(--gap-xl);
}
.concept-body p{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    font-weight:300;
    line-height:1.7;
    color:#ffffff;
    margin:0 0 0.2em;
    letter-spacing:0.01em;
}
.concept-body p:last-child{margin-bottom:0;}
.concept-closing{
    font-style:italic;
    color:rgba(232,232,227,0.5)!important;
    margin-top:3em!important;
    letter-spacing:0.025em;
}

/* IN SILENCE — fully white per request */
.work-title-wrap.silence .work-title{color:#ffffff;}
.work-title-wrap.silence .work-sub{color:rgba(255,255,255,0.6);font-style:italic;}
.work-link{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.work-title-wrap{position:relative;margin-bottom:var(--gap-xl);}
.work-title{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(2.6rem,5.4vw,4.5rem);font-weight:500;letter-spacing:-0.03em;line-height:1.05;color:#e8e8e3;}

/* BLACK AND BLUE — 2-column layout: key visual left, text right */
.bb-layout{
    display:grid;
    grid-template-columns:minmax(0,0.9fr) 1fr;
    column-gap:clamp(40px,6vw,96px);
    align-items:start;
}
.bb-key{
    margin:0;
    max-width:100%;
    width:100%;
}
.bb-key img{
    width:100%;
    height:auto;
    display:block;
}
.bb-content{
    padding-top:var(--gap-md);
}
.bb-content .work-sub{margin-top:0;margin-bottom:var(--gap-md);}
.bb-content .concept-body{margin:0;}
.bb-content .work-more{margin-top:clamp(36px,4.5vw,56px);}
@media(max-width:768px){
    .bb-layout{
        grid-template-columns:1fr;
        row-gap:clamp(20px,3.5vw,36px);
    }
    .bb-key{max-width:100%;width:100%;}
    .bb-content{padding-top:0;}
}
.work-sub{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(0.95rem,1.2vw,1.1rem);font-weight:300;font-style:normal;color:rgba(232,232,227,0.55);margin-top:var(--space-4);}
.work-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    column-gap:var(--space-4);
    row-gap:var(--space-5);
    /* Full-viewport-width black panel (extends beyond section padding) */
    margin:var(--gap-xl) calc(var(--content-px) * -1) 0;
    max-width:none;
    background:#000;
    padding:clamp(32px,5vw,64px) clamp(40px,8vw,120px);
}
.work-img{width:100%;overflow:hidden;border-radius:1px;position:relative;}
.work-img img{width:100%;object-fit:cover;display:block;}
.work-img .img-num{
    position:absolute;bottom:14px;left:16px;
    font-family:'Inter',sans-serif;font-size:10px;
    color:rgba(255,255,255,0.55);letter-spacing:1px;
}
/* Hero — first image spans 3 cols, landscape crop */
.work-img:nth-child(1){grid-column:1/-1;}
.work-img:nth-child(1) img{aspect-ratio:16/9;}
/* Thumbnails — 3 portraits below */
.work-img:nth-child(n+2) img{aspect-ratio:3/4;}
@media(max-width:768px){
    .work-grid{
        grid-template-columns:1fr 1fr;
        column-gap:4px;
        row-gap:4px;
        margin:var(--gap-xl) 0 0;
        max-width:none;
        width:100%;
    }
    .work-img{margin:0;width:auto;}
    .work-img:nth-child(n){margin-top:0;}
    /* Row 1: img1 full width */
    .work-img:nth-child(1){grid-column:1/-1;}
    .work-img:nth-child(1) img{aspect-ratio:4/5;}
    /* Row 2: img2 full width */
    .work-img:nth-child(2){grid-column:1/-1;}
    .work-img:nth-child(2) img{aspect-ratio:4/5;}
    /* Row 3: img3 + img4 side by side */
    .work-img:nth-child(3){grid-column:1;}
    .work-img:nth-child(3) img{aspect-ratio:3/4;}
    .work-img:nth-child(4){grid-column:2;}
    .work-img:nth-child(4) img{aspect-ratio:3/4;}
}
.work-more{
    display:inline-block;margin-top:var(--gap-xl);
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:300;
    color:rgba(232,232,227,0.7);
    border-bottom:1px solid rgba(255,255,255,0.15);
    padding-bottom:var(--space-2);
    text-decoration:none;
    transition:all 0.3s;
}
.work-more:hover,.work-link:hover .work-more{
    color:#e8e8e3;border-color:rgba(232,232,227,0.4);
}
.work-more.disabled{
    margin-top:clamp(36px,4.5vw,56px);
    color:rgba(232,232,227,0.35);
    border-color:rgba(255,255,255,0.08);
    cursor:default;pointer-events:none;
    letter-spacing:0.05em;text-transform:uppercase;font-size:clamp(0.9rem,1.1vw,1rem);
}
.work-more.disabled:hover{color:rgba(232,232,227,0.35);border-color:rgba(255,255,255,0.08);}

/* Consulting — omake (compact, "we also do this" section) */
.sec.sec-mini{padding:var(--gap-xl) var(--content-px);}
.sec.sec-mini .sec-head{margin-bottom:var(--gap-md);}
.con-mini{max-width:720px;margin-bottom:var(--space-5);}
.con-mini-text{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    font-weight:300;line-height:1.8;
    color:rgba(232,232,227,0.7);
    margin:0 0 var(--space-3);
}
.con-mini-list{
    font-family:'Inter','Noto Sans JP',sans-serif;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    font-weight:300;line-height:1.7;
    color:rgba(232,232,227,0.45);
    letter-spacing:0.02em;
    margin:0;
}

/* Consulting (full-size variant — currently unused, kept for reference) */
.con-intro{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(2.2rem,4.6vw,4rem);font-weight:300;line-height:1.45;letter-spacing:-0.015em;color:rgba(232,232,227,0.85);max-width:950px;margin-bottom:var(--gap-2xl);}
.con-intro span{color:rgba(232,232,227,0.25);}
.con-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.con-card{padding:var(--space-6) var(--space-6);border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden;transition:background 0.5s;}
.con-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(107,122,153,0.04);transform:scaleY(0);transform-origin:bottom;transition:transform 0.5s cubic-bezier(0.23,1,0.32,1);}
.con-card:hover::before{transform:scaleY(1);}
.con-card h4{font-family:'Inter','Noto Sans JP',sans-serif;font-size:1.1rem;font-weight:400;margin-bottom:var(--space-3);position:relative;z-index:1;color:#e8e8e3;}
.con-card p{font-size:0.75rem;font-weight:300;color:rgba(232,232,227,0.25);line-height:1.7;position:relative;z-index:1;}
.con-card .con-n{position:absolute;top:var(--space-4);right:var(--space-4);font-family:'Inter','Noto Sans JP',sans-serif;font-size:2rem;font-weight:300;color:rgba(255,255,255,0.06);z-index:1;}
.con-clients{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:1.5px;text-transform:uppercase;color:rgba(232,232,227,0.25);margin-top:var(--gap-md);}

/* Contact */
.contact-title{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(2.6rem,5.4vw,4.5rem);font-weight:500;line-height:1.05;letter-spacing:-0.03em;color:#e8e8e3;margin-bottom:var(--gap-xl);}
.contact-links{display:flex;gap:var(--space-7);margin-top:var(--gap-xl);}
.contact-links a{
    font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:300;
    color:rgba(232,232,227,0.75);text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:var(--space-2);
    transition:all 0.3s;
}
.contact-links a:hover{color:#e8e8e3;border-color:rgba(232,232,227,0.3);}

/* Footer */
.footer{position:relative;padding:clamp(48px,8vw,96px) var(--content-px) clamp(20px,2vw,28px);overflow:hidden;}
.footer-logo{display:block;color:rgba(255,255,255,0.18);margin-bottom:clamp(48px,7vw,80px);transition:color 0.3s ease-out;}
.footer-logo:hover{color:rgba(255,255,255,0.4);}
.footer-ghost{display:block;width:100%;height:auto;color:inherit;}
.footer-nav{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,4vw,56px);
    margin-bottom:clamp(36px,5vw,56px);
    padding-bottom:clamp(28px,4vw,40px);
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer-col-label{
    font-family:'Inter',sans-serif;font-size:10px;font-weight:500;
    letter-spacing:2.5px;text-transform:uppercase;
    color:rgba(232,232,227,0.4);
    margin-bottom:clamp(14px,1.6vw,20px);
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);}
.footer-col a,.footer-col li{
    font-family:'Inter','Noto Sans JP',sans-serif;font-size:14px;font-weight:300;
    color:rgba(232,232,227,0.78);text-decoration:none;transition:color 0.3s;letter-spacing:0.01em;
}
.footer-col a:hover{color:#ffffff;}

.footer-bar{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:rgba(232,232,227,0.55);letter-spacing:0.5px;}
.footer-bar-company{font-size:15px;font-weight:400;letter-spacing:0.5px;}
.footer-bar-copy{font-size:11px;}
.footer-bar a{color:rgba(232,232,227,0.55);text-decoration:none;transition:color 0.3s;}
.footer-bar a:hover{color:rgba(232,232,227,0.9);}
.footer-motto{
    font-family:'Inter','Noto Sans JP',sans-serif;font-size:13px;font-style:italic;
    letter-spacing:0.02em;color:rgba(232,232,227,0.42);
}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(0.23,1,0.32,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Work-img reveal — clip-path wipe + inner image scale-down (holon-style) */
.work-img.reveal{
    opacity:1;
    transform:none;
    transition:none;
    clip-path:inset(100% 0 0 0);
    will-change:clip-path;
}
.work-img.reveal img{
    transform:scale(1.18);
    transform-origin:50% 50%;
    will-change:transform;
}

/* Nav */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:210;
    display:flex;justify-content:flex-end;align-items:center;
    padding:var(--space-5) var(--content-px);
    opacity:0;pointer-events:none;
}
.nav-links{display:none;}
.nav-links a{
    font-family:'Inter',sans-serif;font-size:11px;font-weight:300;
    letter-spacing:1px;text-transform:uppercase;
    color:rgba(232,232,227,0.3);text-decoration:none;
    position:relative;overflow:hidden;display:inline-block;
}
/* Nav hover — text slides up, duplicate slides in */
.nav-links a span{display:block;transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),color 0.3s;}
.nav-links a span.nav-dup{position:absolute;top:100%;left:0;color:rgba(232,232,227,0.8);}
.nav-links a:hover span.nav-main{transform:translateY(-100%);}
.nav-links a:hover span.nav-dup{transform:translateY(-100%);}
/* Active section indicator */
.nav-links a.active span.nav-main{color:#ffffff;}
.nav-links a.active::before{
    content:'';position:absolute;left:-12px;top:50%;
    width:6px;height:1px;background:#ffffff;
    transform:translateY(-50%);
}

/* Hamburger toggle — unified PC + SP. SP: hidden during FV, expands on scroll. PC: visible from load (gated by .nav fade-in) */
.nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:40px;height:40px;background:none;border:none;cursor:pointer;
    padding:0;position:relative;z-index:1;
    opacity:0;pointer-events:none;
    transition:opacity 0.5s cubic-bezier(0.23,1,0.32,1);
}
body.fv-scrolled .nav-toggle{opacity:1;pointer-events:auto;}
.nav-toggle span{
    display:block;width:100%;height:2px;background:rgba(255,255,255,0.92);
    border-radius:1px;
    transition:transform 0.5s cubic-bezier(0.7,0,0.3,1),opacity 0.3s,background 0.3s;
}
/* PC: keep the toggle subtle (thinner line, dimmer) and visible from page load */
@media(min-width:769px){
    .nav-toggle{opacity:1;pointer-events:auto;width:36px;height:36px;gap:7px;}
    .nav-toggle span{height:1px;background:rgba(255,255,255,0.55);}
    .nav-toggle:hover span{background:rgba(255,255,255,0.9);}
}
.nav-toggle.open span{background:#ffffff;}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:translateX(20px);}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Nav overlay — circular reveal from top-right where the toggle sits */
/* Cross-document page transition — mirrors hamburger open/close (circle wipe from top-right) */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation:none; }
::view-transition-new(root){
    animation:page-wipe 0.75s cubic-bezier(0.7,0,0.3,1) forwards;
}
@keyframes page-wipe{
    from{ clip-path:circle(0 at calc(100% - 36px) 36px); }
    to{ clip-path:circle(150% at calc(100% - 36px) 36px); }
}

.nav-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:#0a1428;
    z-index:200;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-5);
    padding-left:clamp(32px,8vw,72px);padding-right:24px;
    clip-path:circle(0 at calc(100% - 36px) 36px);
    pointer-events:none;
    transition:clip-path 0.75s cubic-bezier(0.7,0,0.3,1);
}
.nav-overlay.open{
    clip-path:circle(150% at calc(100% - 36px) 36px);
    pointer-events:auto;
}
.nav-overlay{gap:clamp(28px,5vw,42px);}
.nav-overlay a,.nav-overlay .nav-label{
    display:block;color:rgba(232,232,227,0.65);text-decoration:none;
    opacity:0;transform:translateY(20px);
    transition:color 0.3s,opacity 0.5s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.nav-overlay.open a,.nav-overlay.open .nav-label{opacity:1;transform:translateY(0);}
.nav-overlay.open > .nav-item:nth-child(1),.nav-overlay.open > .nav-item:nth-child(2){transition-delay:0.30s;}
.nav-overlay.open > .nav-item:nth-child(2){transition-delay:0.36s;}
.nav-overlay.open .nav-group .nav-label{transition-delay:0.42s;}
.nav-overlay.open .nav-group .nav-sub:nth-of-type(1){transition-delay:0.50s;}
.nav-overlay.open .nav-group .nav-sub:nth-of-type(2){transition-delay:0.56s;}
.nav-overlay.open .nav-group .nav-sub:nth-of-type(3){transition-delay:0.62s;}
.nav-overlay.open > .nav-item:last-child{transition-delay:0.70s;}
.nav-overlay a:hover{color:#ffffff;}
.nav-svg{display:block;height:clamp(34px,7.5vw,52px);width:auto;color:inherit;}
.nav-svg-sm{height:clamp(14px,2.8vw,18px);opacity:0.6;}
.nav-group{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,4vw,32px);margin:8px 0;}
.nav-group .nav-label{color:rgba(232,232,227,0.45);font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(14px,1.8vw,18px);font-weight:400;letter-spacing:1px;}
.nav-group .nav-sub .nav-svg{height:clamp(28px,6vw,42px);}

/* Title — absolute, pushed up from fv-wrap bottom (lvh) by the nav-bar height (lvh - svh) so title sits at the always-visible svh boundary. Static value → no jank */
.title-block{
    position:absolute;left:0;right:0;
    bottom:0;
    bottom:calc(100lvh - 100svh);
    padding:0 var(--content-px) clamp(16px,3vw,40px);
    z-index:60;pointer-events:none;
}
.title-svg{display:block;width:100%;max-width:1160px;margin:0 auto;height:auto;overflow:visible;}
.title-svg-sp{}

/* Section heading SVGs — Bodoni Moda paths with FV-level kerning */
.heading-svg{display:block;height:auto;color:#ffffff;}
.title-svg{color:#ffffff;}
.title-svg-sp{color:#ffffff;}
.about-catch-svg{color:#ffffff;}
/* .footer-ghost inherits color from .footer-logo (faint ghost treatment) */
/* Section headings — size by HEIGHT for consistent letter cap-height across all titles.
   BLACK AND BLUE is 2 lines so its viewBox is taller; sized 2x to keep per-line size matched. */
.work-title .heading-svg,.contact-title .heading-svg{
    height:clamp(48px,7vw,84px);
    width:auto;max-width:100%;
}
#black-and-blue .heading-svg{
    height:clamp(64px,10vw,120px);
}
.bb-key-col{display:flex;flex-direction:column;}
.work-title-wrap.bb-title-stacked{
    margin-top:0;
    margin-bottom:clamp(24px,3.5vw,40px);
}
.title-svg text,.title-svg-sp text{
    font-family:'DM Serif Display','Bodoni 72','Didot',serif;
    font-weight:400;
    letter-spacing:0.015em;
    /* Kerning — full stack */
    font-kerning:normal;
    font-variant-ligatures:common-ligatures contextual discretionary-ligatures;
    font-variant-numeric:lining-nums proportional-nums;
    font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1,"dlig" 1,"palt" 1,"pwid" 1;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.title-svg-sp{display:none;overflow:visible;}

html.is-loading{overflow:hidden;}

/* ══════════════════════════════════
   Responsive — Tablet
   ══════════════════════════════════ */
@media(max-width:768px){
    .sec{padding:var(--gap-2xl) var(--content-px);}
    .about-principles{grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--gap-xl);}
    .exhibition-meta{grid-template-columns:1fr;gap:var(--space-4);}
    .con-grid{grid-template-columns:1fr;}
    .contact-links{flex-direction:column;gap:var(--space-4);}
    .footer{padding:48px var(--content-px) 20px;}
    .footer-nav{grid-template-columns:1fr;gap:32px;}
    .footer-bar{flex-direction:column;align-items:flex-start;gap:8px;font-size:10.5px;}

    body{cursor:auto;}
    .cursor{display:none;}
    .nav{padding:var(--space-3) var(--content-px);}
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
    .title-block{padding:0 var(--content-px) calc(28px + env(safe-area-inset-bottom));bottom:calc(100lvh - 100svh);}
    .title-svg{display:none;}
    .title-svg-sp{display:block;width:100%;height:auto;}

    /* FV title が svh 基準で持ち上がってる分、後続セクションも同じだけ吸い上げて隙間を防ぐ */
    .content-wrap{margin-top:calc(-1 * (100lvh - 100svh));}

    /* tighten gap between In Silence and Aurora sections on SP */
    #in-silence{padding-bottom:40px;}
    #aurora{padding-top:40px;}
}

/* ══════════════════════════════════
   Responsive — Mobile
   ══════════════════════════════════ */
@media(max-width:480px){
    .sec{padding:var(--gap-2xl) var(--content-px);}
    /* Tier 1 — declarative hero text (Statement/Con-intro) */
    .statement-body,.con-intro{font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.45;}
    .about-catch{font-size:clamp(1.5rem,6.5vw,2.2rem);max-width:none;}
    .about-text{font-size:0.95rem;line-height:1.95;}
    /* Tier 2 — display words (Work title/Contact title) */
    .work-title,.contact-title{font-size:clamp(2.5rem,9vw,3.6rem);line-height:1.05;}
    .con-card{padding:var(--space-5) var(--space-5);}
    .contact-links{gap:var(--space-3);}
    .contact-links a{font-size:1.2rem;}
    .footer{padding:48px var(--content-px) 20px;}
}