/* Jihann Art Collection — site styles */
:root{
  --ground:#0d1719; --ground-2:#142225; --ground-3:#08100f; --ink:#efe5cf; --ink-2:#d6ccb5; --ink-3:#b9ad94;
  --gold:#c9a14a; --gold-hi:#e3c477; --gold-pale:#f2dc9c; --line:rgba(201,161,74,.35);
  --f-display:"Fraunces",Georgia,"Times New Roman",serif; --f-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%}
a{color:var(--gold-hi)}a:hover{color:var(--gold-pale)}
:focus-visible{outline:2px solid var(--gold-pale);outline-offset:3px}
.disp{font-family:var(--f-display)}
h1,h2,h3{text-wrap:balance;margin:0}
em.g{color:var(--gold-hi);font-style:italic}
.eyebrow{margin:0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--ink-2)}
.wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:50;background:var(--gold);color:#1a1206;padding:10px 14px}

/* Header */
.top{position:relative;z-index:6;background:var(--ground);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-block:16px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto}
.brand span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.nav{display:flex;flex-wrap:wrap;gap:4px 26px}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:12px 2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-hi);border-bottom-color:var(--gold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;text-decoration:none;font:600 14px var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:0;transition:background .3s,color .3s,transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:#1a1206}.btn.gold:hover{background:var(--gold-hi);color:#1a1206}
.btn.ghost{border:1px solid var(--gold);color:var(--ink);background:transparent}.btn.ghost:hover{background:rgba(201,161,74,.12);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Gilded frames */
.gilt{display:block;padding:12px;background:linear-gradient(135deg,#7d5f20 0%,#e3c477 22%,#9c7a2e 45%,#f2dc9c 68%,#8a6a26 100%);box-shadow:0 34px 70px rgba(0,0,0,.65),inset 0 0 0 2px #4d3812}
.gilt img{display:block;width:100%;height:100%;object-fit:cover;outline:1px solid #2b1f08}
.gilt.thin{padding:6px}
.frame-h{transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
a:hover .frame-h,.frame-h:hover{transform:perspective(1000px) rotateY(-5deg) rotateX(3deg) translateY(-6px);box-shadow:0 50px 90px rgba(0,0,0,.75),0 0 40px rgba(227,196,119,.25),inset 0 0 0 2px #4d3812}

/* Painted backdrops */
.bdsec{position:relative;overflow:hidden}
.bdsec>.inner{position:relative;z-index:1}
.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;display:block}
.bd-dim{filter:brightness(.34) saturate(.95);transform:scale(1.12);animation:drift 46s ease-in-out infinite alternate}
.bd-ghost{mix-blend-mode:screen;opacity:.2;filter:saturate(1.2);transform:scale(1.2);animation:drift2 60s ease-in-out infinite alternate}
.bd-aura{filter:blur(40px) brightness(.5) saturate(1.3);transform:scale(1.25);animation:breathe 14s ease-in-out infinite alternate}
.bd-faint{filter:brightness(.6) saturate(.9);opacity:.14;transform:scale(1.1);animation:drift 50s ease-in-out infinite alternate}
.shade{position:absolute;inset:0;pointer-events:none;z-index:0}
@keyframes drift{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.22) translate(-2.5%,-2%)}}
@keyframes drift2{from{transform:scale(1.2) translate(0,0) rotate(0deg)}to{transform:scale(1.32) translate(3%,2%) rotate(1.5deg)}}
@keyframes breathe{from{transform:scale(1.2)}to{transform:scale(1.34)}}
.rule{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--gold-hi);transform:translate(-50%,-50%) rotate(45deg)}

/* Load animations */
.word{display:inline-block;animation:wordrise 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordrise{from{opacity:0;transform:translateY(.55em) rotate(5deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.flyin{animation:flyin 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes flyin{from{opacity:0;transform:scale(.6) rotate(-12deg) translateY(80px);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
.fade{animation:fadeup 1.2s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.float{animation:float 8s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-10px) rotate(-1deg)}to{transform:translateY(14px) rotate(1.2deg)}}

/* Scroll reveals (only hide when JS is running) */
.js .rv{opacity:0;transform:translateY(60px) scale(.97);filter:blur(8px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.1s ease}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .unveil{clip-path:inset(-80px -80px 100% -80px);transform:translateY(40px);transition:clip-path 1.5s cubic-bezier(.7,0,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1)}
.js .unveil.in{clip-path:inset(-80px -80px -120px -80px);transform:none}
.js .swing{opacity:0;transform:perspective(900px) rotateX(-40deg) translateY(60px);transform-origin:50% 0;transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .swing.in{opacity:1;transform:none}

/* Hero */
.hero{min-height:860px;padding-bottom:130px}
.herogrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;max-width:1180px;margin:0 auto;padding:96px clamp(16px,3vw,32px) 0}
.hero h1{font:400 clamp(46px,6.4vw,92px)/.98 var(--f-display);letter-spacing:-.01em;display:flex;flex-wrap:wrap;gap:0 .26em}
.lede{margin:0;font-size:18px;line-height:1.65;color:var(--ink-2);max-width:30em}
.stage{position:relative;min-height:660px}
.side{position:absolute}
.clock{position:absolute;pointer-events:none;width:560px;right:4%;top:10px;opacity:.3;z-index:0;animation:spin 160s linear infinite}
.hand{transform-box:view-box;transform-origin:200px 200px;animation:spin 7s linear infinite reverse}
.hand.slow{animation-duration:42s}
@keyframes spin{to{transform:rotate(360deg)}}

/* Sections */
.sec{padding-block:120px}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px}
.sechead h2{font:400 clamp(38px,4.6vw,64px)/1 var(--f-display)}
.sechead p{margin:0;max-width:34em;color:var(--ink-2)}
.quote{font:300 italic clamp(28px,3.4vw,46px)/1.25 var(--f-display);margin:0}
.center{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}

/* Collections mosaic */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px;align-items:start;margin-top:48px}
.card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:16px}
.card .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.card h3{font:400 32px var(--f-display)}
.count{font-size:13px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.card p{margin:0;font-size:15px;color:var(--ink-2)}
.veiled{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:56px}
.veilwrap{display:flex;flex-direction:column;gap:14px}
.veilwrap h3{font:400 24px var(--f-display)}
.veilwrap p{margin:0;font-size:14px;color:var(--ink-2)}
.veilbox{position:relative;overflow:hidden;aspect-ratio:.82;background:#071012}
.haze{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(18px) brightness(.55) saturate(1.25);transition:filter 1.2s ease,transform 1.2s ease}
.veilwrap:hover .haze{filter:blur(7px) brightness(.72) saturate(1.25);transform:scale(1.06)}
.tag{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#f0d999;background:rgba(13,23,25,.75);padding:8px 12px;white-space:nowrap}

/* Featured */
.band{background:var(--ground-2);border-block:1px solid var(--line)}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;align-items:end;margin-top:44px}
.work{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.work .t{font:400 19px var(--f-display)}
.work .m{font-size:13px;color:var(--ink-3)}

/* Life */
.life{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:center;max-width:1180px;margin:0 auto}
.oval{width:100%;max-width:380px;aspect-ratio:.74;border-radius:50%;padding:14px;margin:0 auto}
.oval img{border-radius:50%}
.timeline{display:flex;border-top:1px solid rgba(201,161,74,.5)}
.timeline div{flex:1;display:flex;flex-direction:column;gap:6px;padding:18px 14px 0 0}
.timeline b{font:400 30px var(--f-display);color:var(--gold-hi)}
.timeline span{font-size:14px;color:var(--ink-2)}

/* Studio */
.studio{background:#071012;border-block:1px solid var(--line)}
.studiogrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin-top:48px}
.studio canvas{display:block;width:100%;height:auto;background:var(--ground)}
.step{display:flex;flex-direction:column;gap:14px}
.step h3{font:400 24px var(--f-display)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slot{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer;text-align:left;font-family:var(--f-body);transition:border-color .3s,transform .3s}
.slot:hover{border-color:var(--gold)}
.slot[aria-pressed="true"]{border-color:var(--gold-hi);box-shadow:0 0 0 2px var(--gold-hi);transform:translateY(-3px)}
.slot img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.slot .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.slot .nm{font-size:13px}
.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pal{position:relative;padding:0;border:2px solid transparent;background:#071012;cursor:pointer;aspect-ratio:1;overflow:hidden;transition:border-color .3s}
.pal img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pal:hover img{transform:scale(1.1)}
.pal:hover{border-color:rgba(227,196,119,.6)}
.pal.used{border-color:var(--gold-hi)}
.badge{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;background:var(--gold-hi);color:#1a1206;font:700 13px/26px var(--f-body);text-align:center}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mode{min-height:44px;padding:10px 14px;border:1px solid rgba(201,161,74,.5);background:transparent;color:var(--ink);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;font-family:var(--f-body)}
.mode b{font-size:14px}.mode span{font-size:12px;opacity:.85}
.mode[aria-pressed="true"]{background:var(--gold);color:#1a1206;border-color:var(--gold)}
.range{width:100%;accent-color:var(--gold);height:28px}
.note{margin:0;font-size:12px;line-height:1.6;color:var(--ink-3)}
.status{margin:0;min-height:22px;font-size:14px;color:var(--gold-hi)}

/* Collection page */
.procenium{padding-bottom:90px}
.coltitle{font:300 clamp(54px,8vw,120px)/.92 var(--f-display)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;max-width:980px;margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a,.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(201,161,74,.4);color:var(--ink-2);text-decoration:none;font-size:13px;letter-spacing:.06em}
.chips span{opacity:.5}
.chips a:hover{border-color:var(--gold);color:var(--ink)}
.chips a[aria-current="page"]{background:rgba(201,161,74,.16);border-color:var(--gold);color:var(--ink)}
.toggle{display:flex}
.seg{min-height:44px;padding:0 18px;border:1px solid var(--gold);background:transparent;color:var(--ink);font:600 13px var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.seg[aria-pressed="true"]{background:var(--gold);color:#1a1206}
.wall.salon{column-count:3;column-gap:40px}
.wall.salon>a{break-inside:avoid;display:flex;margin-bottom:48px}
.wall.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}
.wall.grid .gilt{aspect-ratio:.8;padding:7px}
.nextroom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);text-decoration:none;color:var(--ink);background:var(--ground-2);border:1px solid var(--line)}
.nextroom .txt{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.nextroom .big{font:300 clamp(40px,4.4vw,64px)/1 var(--f-display)}

/* Artwork page */
.room{padding:40px 0 130px}
.viewer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:center}
.viewer .frame{width:72%;max-width:100%;margin:0 auto;padding:18px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.viewer.zoom .frame{width:100%}
.arrows{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.arrow{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(201,161,74,.6);color:var(--ink);text-decoration:none;border-radius:50%}
.arrow:hover{background:rgba(201,161,74,.15);color:var(--ink)}
.dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px 20px;margin:0}
.dl dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-top:4px}
.dl dd{margin:0}
.crumb{font-size:13px;letter-spacing:.06em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:10px;padding-top:22px}
.crumb a{color:var(--ink-3)}

/* Biography */
.stop{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:0 28px;align-items:start}
.stop .y{font:400 54px/1 var(--f-display);color:var(--gold-hi)}
.stop .p{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.stop .tx{margin:6px 0 0;color:var(--ink-2)}
.stop .l{text-align:right;display:flex;flex-direction:column;gap:8px}
.stop .r{display:flex;flex-direction:column;gap:8px}
.dot{width:18px;height:18px;margin:14px auto 0;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 6px var(--ground-2),0 0 0 7px rgba(201,161,74,.6)}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{min-height:48px;padding:0 4px;margin-right:28px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-3);font:500 15px var(--f-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.pillars>div{display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--gold);padding-top:22px}
.pillars h3{font:400 30px var(--f-display)}
.pillars p{margin:0;color:var(--ink-2);line-height:1.75}

/* Footer */
.foot{position:relative;background:var(--ground-3);padding:90px 0 40px;border-top:1px solid var(--line)}
.foot .grid2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}
.foot h2{font:400 clamp(34px,3.6vw,50px)/1.1 var(--f-display)}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;font-size:15px}
.contact span:first-child{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(201,161,74,.25);padding-top:28px;margin-top:60px}
.legal img{height:38px;width:auto;opacity:.85}
.legal span{font-size:13px;color:var(--ink-3)}

@media (max-width:1000px){.wall.salon{column-count:2}.wall.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .side,.clock{display:none}
  .herogrid,.studiogrid,.life,.split,.viewer,.foot .grid2,.nextroom{grid-template-columns:1fr}
  .stage{min-height:0}
  .mosaic{grid-template-columns:1fr 1fr}.mosaic>*{grid-column:span 2!important;padding-top:0!important}
  .veiled,.four{grid-template-columns:1fr 1fr}
  .timeline{flex-direction:column}
  .pillars{grid-template-columns:1fr}
  .stop{grid-template-columns:40px minmax(0,1fr)}.stop .l:empty{display:none}.stop .l:not(:empty){grid-column:2;grid-row:1;text-align:left}.stop .dotcol{grid-column:1;grid-row:1}
  .viewer .frame{width:100%}
  .hero{min-height:0}
}
@media (max-width:560px){.wall.salon{column-count:1}.wall.grid,.veiled,.four{grid-template-columns:1fr}.palette{grid-template-columns:repeat(4,minmax(0,1fr))}.contact{grid-template-columns:1fr}.nextroom .txt{padding:36px 24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv,.js .unveil,.js .swing{opacity:1;transform:none;filter:none;clip-path:none}}