/* ============ SÓRA MUSEUM demo ============ */
:root{
  --ink:#16130f; --ink2:#4a453d; --bg:#f4f1ea; --bg2:#ece7dc;
  --paper:#faf8f2; --line:#d8d1c3; --accent:#9a835a; --accent-d:#7d6942;
  --serif:"Cormorant Garamond",serif; --mincho:"Shippori Mincho",serif; --sans:"Zen Kaku Gothic New",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:2;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,88%);margin:0 auto}
.h2{font-family:var(--mincho);font-weight:500;font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.45;letter-spacing:.02em}
.label{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.06em;color:var(--accent-d)}
.progress{position:fixed;top:0;left:0;height:2px;width:var(--sp,0);background:var(--accent);z-index:300;transition:width .1s linear}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:400;font-size:.86rem;letter-spacing:.08em;padding:16px 34px;border-radius:2px;transition:.4s var(--ease)}
.btn i{font-style:normal;transition:.4s var(--ease)}
.btn:hover i{transform:translateX(5px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent-d)}
.btn--line{border:1px solid currentColor;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============ HEADER ============ */
.hd{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4vw,52px);transition:.5s var(--ease);mix-blend-mode:difference;color:#fff}
.hd.shrink{mix-blend-mode:normal;color:var(--ink);background:rgba(244,241,234,.86);backdrop-filter:blur(14px);padding-top:16px;padding-bottom:16px;box-shadow:0 1px 0 var(--line)}
.hd__logo{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.14em;line-height:1;display:flex;flex-direction:column}
.hd__logo span{font-family:var(--sans);font-weight:300;font-size:.5rem;letter-spacing:.44em;margin-top:3px}
.hd__nav{display:flex;align-items:center;gap:30px}
.hd__nav a{font-size:.82rem;font-weight:400;letter-spacing:.08em;position:relative}
.hd__nav a:not(.hd__cta)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:.4s var(--ease)}
.hd__nav a:not(.hd__cta):hover::after{width:100%}
.hd__cta{border:1px solid currentColor;padding:9px 20px;border-radius:2px;transition:.4s var(--ease)}
.hd.shrink .hd__cta:hover{background:var(--ink);color:var(--paper)}
.hd__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px}
.hd__burger span{width:26px;height:1.5px;background:currentColor;transition:.35s var(--ease)}
.hd__burger.on span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.hd__burger.on span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:center}
.hero__bg{position:absolute;inset:0}
.hero__img{position:absolute;inset:-18% 0;background-size:cover;background-position:center;will-change:transform}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.5),rgba(10,8,6,.15) 55%,transparent);}
.hero__grain{position:absolute;inset:0;opacity:.5;background:radial-gradient(120% 100% at 0% 100%,rgba(0,0,0,.35),transparent 55%)}
.hero__inner{position:relative;z-index:3;color:#f3efe6;width:min(1200px,88%);margin:0 auto;padding-top:60px}
.hero__kick{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2.4vw,1.4rem);letter-spacing:.08em;margin-bottom:18px;opacity:.92}
.hero__title{font-family:var(--mincho);font-weight:500;font-size:clamp(2.8rem,9vw,6.4rem);line-height:1.14;letter-spacing:.04em;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero__title .reveal-mask{display:block;overflow:hidden}
.hero__title .reveal-mask>span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.hero__title .reveal-mask:nth-child(2)>span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
.hero__sub{margin-top:26px;font-size:clamp(.95rem,2vw,1.12rem);font-weight:300;line-height:2;letter-spacing:.04em;max-width:520px;opacity:0;animation:fade 1.2s ease .7s forwards}
.reveal-line>span{display:inline-block;opacity:0;transform:translateY(20px);animation:fadeup 1s var(--ease) forwards}
.hero__kick.reveal-line>span{animation-delay:.15s}
@keyframes fade{to{opacity:1}}
@keyframes fadeup{to{opacity:1;transform:none}}
.hero__meta{position:absolute;right:clamp(20px,4vw,52px);bottom:36px;z-index:3;color:#f3efe6cc;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--serif);font-size:.9rem;letter-spacing:.1em}
.hero__scroll{position:absolute;left:clamp(20px,4vw,52px);bottom:34px;z-index:3;color:#f3efe6;font-size:.66rem;letter-spacing:.3em;display:flex;align-items:center;gap:12px;writing-mode:horizontal-tb}
.hero__scroll i{width:44px;height:1px;background:#f3efe6;display:block;position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:line 2s ease-in-out infinite}
@keyframes line{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ============ MARQUEE ============ */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;white-space:nowrap;background:var(--bg)}
.mq__t{display:inline-flex;align-items:center;gap:28px;animation:marq 40s linear infinite;font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em;color:var(--ink2)}
.mq__t i{color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ ABOUT ============ */
.about{padding:clamp(90px,13vw,180px) 0}
.about__lead{font-family:var(--mincho);font-weight:400;font-size:clamp(1.15rem,3vw,1.8rem);line-height:2.1;letter-spacing:.03em;margin:26px 0 clamp(50px,7vw,90px);max-width:900px}
.about__lead span{color:var(--accent-d)}
.about__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.about__cell b{font-family:var(--serif);font-size:1.6rem;color:var(--accent);display:block;margin-bottom:14px}
.about__cell h3{font-family:var(--mincho);font-weight:500;font-size:1.2rem;margin-bottom:12px;letter-spacing:.03em}
.about__cell p{color:var(--ink2);font-size:.92rem;line-height:1.95}

/* ============ COLLECTION ============ */
.coll{padding:clamp(60px,8vw,110px) 0 clamp(80px,10vw,130px);background:var(--bg2)}
.coll__head{margin-bottom:clamp(30px,4vw,50px)}
.coll__head .h2{margin-top:10px}
.coll__note{font-size:.86rem;color:var(--ink2);letter-spacing:.06em;margin-top:12px}
.coll__note span{color:var(--accent)}
.coll__scroller{display:flex;gap:clamp(20px,3vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px clamp(24px,6vw,120px) 30px;scrollbar-width:none}
.coll__scroller::-webkit-scrollbar{display:none}
.work{flex:0 0 auto;width:min(72vw,440px);scroll-snap-align:center}
.work__img{overflow:hidden;background:var(--paper);aspect-ratio:4/5;box-shadow:0 30px 60px -40px rgba(20,16,12,.6)}
.work__img img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease);filter:saturate(.96)}
.work:hover .work__img img{transform:scale(1.05)}
.work__cap{padding-top:20px}
.work__no{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem;letter-spacing:.08em}
.work__cap h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.03em;margin-top:4px}
.work__cap p{color:var(--ink2);font-size:.82rem;letter-spacing:.04em}
.work--more{width:min(56vw,300px);display:grid;place-items:center}
.work--more a{display:grid;place-items:center;gap:14px;text-align:center;width:100%;aspect-ratio:4/5;border:1px solid var(--line);transition:.5s var(--ease)}
.work--more a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.work--more span{font-family:var(--serif);font-size:3rem;line-height:1}
.work--more b{font-family:var(--mincho);font-weight:500;font-size:1rem;letter-spacing:.06em}

/* ============ EXHIBITION ============ */
.exh{position:relative;padding:clamp(110px,16vw,220px) 0;overflow:hidden;color:#f3efe6}
.exh__img{position:absolute;inset:-18% 0;background-size:cover;background-position:center;will-change:transform}
.exh__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,4,.78),rgba(8,6,4,.4) 60%,rgba(8,6,4,.2))}
.exh__in{position:relative;z-index:2;max-width:640px}
.label--l{color:#e9dcbf}
.exh__ttl{font-family:var(--mincho);font-weight:500;font-size:clamp(2rem,6vw,3.6rem);line-height:1.3;letter-spacing:.03em;margin:16px 0 20px}
.exh__ttl i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.06em;color:#f0e6cf}
.exh__meta{font-family:var(--serif);font-size:1.05rem;letter-spacing:.08em;color:#e9dcbfcc;margin-bottom:18px}
.exh__lead{font-weight:300;line-height:2;color:#efeadfdd;margin-bottom:32px;font-size:.98rem}
.exh .btn--line{color:#f3efe6}
.exh .btn--line:hover{background:#f3efe6;color:var(--ink);border-color:#f3efe6}

/* ============ IN FOCUS (parallax art) ============ */
.focus{position:relative;height:clamp(560px,92vh,880px);overflow:hidden;background:#0b0906}
.focus__img{position:absolute;inset:-22% 0;background-size:cover;background-position:center;will-change:transform}
.focus__veil{position:absolute;inset:0;background:radial-gradient(120% 110% at 50% 46%,transparent 26%,rgba(8,6,4,.55)),linear-gradient(180deg,rgba(8,6,4,.42),rgba(8,6,4,.12) 42%,rgba(8,6,4,.55))}
.focus__frame{position:absolute;inset:clamp(18px,3.4vw,52px);border:1px solid rgba(243,239,230,.34);pointer-events:none}
.focus__txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#f3efe6;padding:24px;will-change:transform}
.focus .label--l{color:#e9dcbf;margin-bottom:16px}
.focus__q{font-family:var(--mincho);font-weight:500;font-size:clamp(1.8rem,5.6vw,3.5rem);line-height:1.55;letter-spacing:.08em;text-shadow:0 4px 34px rgba(0,0,0,.45)}
.focus__q i{font-family:var(--serif);font-style:italic;color:#f1e7cf;letter-spacing:.04em}
.focus__by{font-family:var(--serif);font-style:italic;letter-spacing:.16em;margin-top:22px;color:#e9dcbfcc;font-size:1.05rem}

/* ============ ARCHITECTURE ============ */
.arch{padding:clamp(70px,10vw,140px) 0;background:var(--bg2)}
.arch__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,6vw,80px);align-items:center}
.arch__p{color:var(--ink2);margin:22px 0 26px;line-height:2.05;font-size:.96rem}
.arch__list{list-style:none;border-top:1px solid var(--line)}
.arch__list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.05em;color:var(--ink2)}
.arch__imgwrap{overflow:hidden;aspect-ratio:16/11;box-shadow:0 40px 70px -46px rgba(20,16,12,.7)}
.arch__imgwrap img{width:100%;height:100%;object-fit:cover;transition:1.4s var(--ease)}
.arch__media:hover .arch__imgwrap img{transform:scale(1.05)}

/* ============ VISIT ============ */
.visit{padding:clamp(70px,10vw,140px) 0}
.visit__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.visit__cell{background:var(--bg);padding:clamp(24px,3vw,40px)}
.visit__cell .label{display:block;margin-bottom:16px;font-size:.95rem}
.visit__cell p{font-family:var(--mincho);font-weight:500;font-size:1.05rem;line-height:1.7}
.visit__cell small{font-family:var(--sans);font-weight:300;font-size:.78rem;color:var(--ink2);line-height:1.8;letter-spacing:.02em}

/* ============ CTA ============ */
.ct{padding:clamp(90px,13vw,180px) 0;text-align:center;background:var(--ink);color:var(--paper)}
.label--c{color:var(--accent);display:block}
.ct__h{font-family:var(--mincho);font-weight:500;font-size:clamp(2rem,6vw,3.6rem);line-height:1.35;letter-spacing:.04em;margin:18px 0 22px}
.ct__p{font-weight:300;line-height:2.05;color:#efeaddcc;margin-bottom:38px;font-size:1rem}
.ct__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ct .btn--solid{background:var(--paper);color:var(--ink)}
.ct .btn--solid:hover{background:var(--accent)}
.ct .btn--line{color:var(--paper);border-color:#ffffff55}
.ct .btn--line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ct__mini{margin-top:30px;font-size:.74rem;color:#efeadd66;letter-spacing:.04em}

/* ============ FOOTER ============ */
.ft{padding:56px 0 30px;border-top:1px solid var(--line)}
.ft__in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ft__brand p{color:var(--ink2);font-size:.82rem;margin-top:12px;letter-spacing:.04em}
.ft__nav{display:flex;gap:26px;flex-wrap:wrap}
.ft__nav a{font-size:.82rem;letter-spacing:.06em;color:var(--ink2);transition:.3s}
.ft__nav a:hover{color:var(--ink)}
.ft__copy{text-align:center;color:var(--ink2);font-size:.74rem;margin-top:40px;letter-spacing:.05em}

/* ============ reveal ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .hd__nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:30px;transform:translateY(-100%);transition:.5s var(--ease);z-index:150}
  .hd__nav.open{transform:none}
  .hd__nav a{font-size:1.1rem;color:var(--ink)}
  .hd__burger{display:flex;z-index:160}
  .hd,.hd.shrink{mix-blend-mode:normal;color:var(--ink)}
  .about__grid{grid-template-columns:1fr;gap:34px}
  .nums__grid{grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
  .num{background:var(--bg);border-left:0;padding:26px 10px}
  .arch__grid{grid-template-columns:1fr}
  .visit__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .visit__grid{grid-template-columns:1fr}
  .hero__meta{display:none}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:opacity .3s ease!important;scroll-behavior:auto}
  .reveal,.hero__title .reveal-mask>span,.hero__sub,.reveal-line>span{opacity:1!important;transform:none!important}
}

/* ============ GALLERY ============ */
.gal{padding:clamp(70px,10vw,130px) 0}
.gal .coll__head{margin-bottom:clamp(30px,4vw,50px)}
.mg{column-count:3;column-gap:18px}
.mg-item{break-inside:avoid;margin:0 0 18px;position:relative;cursor:pointer}
.mg-item.reveal{transform:translateY(38px) scale(.972)}
.mg-item.reveal.in{transform:none}
.mg-item__wrap{display:block;overflow:hidden;background:var(--bg2);position:relative;box-shadow:0 24px 50px -38px rgba(20,16,12,.7)}
.mg-item img{width:100%;height:auto;display:block;transition:transform 1.3s var(--ease),filter 1.1s var(--ease);filter:saturate(.96)}
.mg-item:hover img{transform:scale(1.08)}
.mg-item__wrap::after{content:"";position:absolute;inset:12px;border:1px solid rgba(247,241,226,0);transition:.55s var(--ease);pointer-events:none}
.mg-item:hover .mg-item__wrap::after{inset:15px;border-color:rgba(247,241,226,.6)}
.mg-item__zoom{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(8,6,4,.45);color:#f3efe6;font-size:1.1rem;backdrop-filter:blur(3px);opacity:0;transform:scale(.6) rotate(-20deg);transition:.45s var(--ease)}
.mg-item:hover .mg-item__zoom{opacity:1;transform:none}
.mg-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;color:#f5f0e5;font-family:var(--serif);font-style:italic;font-size:1.1rem;letter-spacing:.05em;background:linear-gradient(transparent,rgba(8,6,4,.78));opacity:0;transform:translateY(14px);transition:.5s var(--ease)}
.mg-item:hover figcaption{opacity:1;transform:none}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:6vh 5vw;background:rgba(8,6,4,0);backdrop-filter:blur(0);visibility:hidden;transition:background .55s ease,backdrop-filter .55s ease,visibility .55s}
.lb.on{visibility:visible;background:rgba(8,6,4,.93);backdrop-filter:blur(7px)}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(1040px,92vw);opacity:0;transform:scale(.9);clip-path:inset(7% 7% 7% 7%);transition:opacity .6s var(--ease),transform .75s var(--ease),clip-path .75s var(--ease)}
.lb.on .lb__fig{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.lb.switching .lb__fig{opacity:0;transform:scale(.985);transition:opacity .25s ease,transform .25s ease}
.lb__fig img{max-width:100%;max-height:80vh;object-fit:contain;box-shadow:0 50px 110px -30px rgba(0,0,0,.85)}
.lb__fig figcaption{color:#e9dcbf;font-family:var(--serif);font-style:italic;letter-spacing:.12em;margin-top:18px;font-size:1.1rem;opacity:0;transition:opacity .6s ease .25s}
.lb.on .lb__fig figcaption{opacity:1}
.lb__close,.lb__nav{position:absolute;background:rgba(243,239,230,.06);border:1px solid rgba(243,239,230,.32);color:#f3efe6;cursor:pointer;transition:.35s var(--ease);border-radius:50%;display:grid;place-items:center;line-height:1;font-family:var(--serif)}
.lb__close{top:3vh;right:4vw;width:50px;height:50px;font-size:1.7rem}
.lb__nav{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2rem}
.lb__prev{left:3vw}.lb__next{right:3vw}
.lb__close:hover,.lb__nav:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.lb__nav:hover{transform:translateY(-50%) scale(1.08)}

@media(max-width:900px){ .mg{column-count:2} }
@media(max-width:560px){
  .mg{column-count:1}
  .mg-item figcaption{opacity:1;transform:none}
  .lb__nav{width:46px;height:46px;font-size:1.6rem}
  .lb__prev{left:2vw}.lb__next{right:2vw}
  .lb__close{width:44px;height:44px;top:2vh;right:3vw}
}
@media (prefers-reduced-motion:reduce){
  .mg-item{opacity:1!important;animation:none!important;transform:none;clip-path:none;filter:none}
  .lb__fig{clip-path:none}
}