:root{--gold:#C4982A;--gold-lt:#E8C25A;--gold-dk:#8C6A0F;--bg:#FAF8F3;--bg-alt:#F0EBE0;--bg-sec:#F5F0E8;--text:#1A0F08;--text-m:#7C5A3A;--text-s:#A88060;--surface:#FFFFFF;--border:#E0D4C0;--sh:0 4px 24px rgba(0,0,0,.07);--sh-lg:0 12px 48px rgba(0,0,0,.12);--nav-h:80px;--r:12px;--r-lg:20px;--cont:1200px;--sp:clamp(60px,8vw,100px)}
[data-theme=dark]{--gold:#D4A843;--gold-lt:#F0C85A;--gold-dk:#B08820;--bg:#0D0906;--bg-alt:#160C07;--bg-sec:#1A0E08;--text:#F5F0E8;--text-m:#B8A08A;--text-s:#7A5A48;--surface:#1C1410;--border:#2E1F12;--sh:0 4px 24px rgba(0,0,0,.4);--sh-lg:0 12px 48px rgba(0,0,0,.55)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Jost',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
img,picture{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}
::selection{background:var(--gold);color:#0D0906}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollDot{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(8px);opacity:.3}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{background-position:-200% 50%}100%{background-position:200% 50%}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){:root{--nav-h:68px}}
#main-nav{transition:background .4s,box-shadow .4s,border-color .4s,backdrop-filter .4s}
#main-nav.nav-hero{background:transparent!important;box-shadow:none!important;border-bottom:1px solid transparent!important;backdrop-filter:none!important}
#main-nav.nav-hero #desktop-nav a{color:rgba(245,240,232,.92)!important}
#main-nav.nav-hero .nav-art-studio{color:rgba(245,240,232,.55)!important}
#main-nav.nav-hero #hamburger span{background:rgba(245,240,232,.9)!important}
#main-nav.nav-hero #hamburger{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.22)!important}
#main-nav.nav-hero .nav-icon-btn{color:rgba(245,240,232,.88)!important;background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.22)!important}
#main-nav.nav-solid{background:color-mix(in srgb,var(--bg) 94%,transparent)!important;border-bottom:1px solid var(--border)!important;box-shadow:0 1px 28px rgba(0,0,0,.08)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
[data-theme=dark] #main-nav.nav-solid{box-shadow:0 1px 28px rgba(0,0,0,.4)!important;background:color-mix(in srgb,var(--bg) 96%,transparent)!important}

/* ── Image media system ── */
.media-frame{overflow:hidden;position:relative}
.media-frame>picture{display:block;width:100%;height:100%}
.media-fill{width:100%;height:100%;object-fit:cover}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-4{aspect-ratio:3/4}
.ratio-3-2{aspect-ratio:3/2}
.ratio-4-5{aspect-ratio:4/5}
.ratio-16-9{aspect-ratio:16/9}
.ratio-1-1{aspect-ratio:1/1}

/* Uniform artwork card image area (featured, gallery, about disciplines) */
.art-card-media{aspect-ratio:4/5;overflow:hidden;position:relative;width:100%}
.art-card-media>picture{display:block;width:100%;height:100%}
.art-card-media img,.art-card-media .media-fill{width:100%;height:100%;object-fit:cover;object-position:center}
.art-flip-card{position:relative}
@keyframes flipHint{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.art-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,.2,.2,1)}
.art-flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.art-flip-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--bg-alt) 0%,var(--surface) 100%);display:flex;flex-direction:column;padding:22px 20px;overflow-y:auto}

/* Hero */
.hero-section{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center}
#hero-parallax{position:absolute;top:-20%;left:0;right:0;height:140%;z-index:0}
#hero-parallax picture{display:block;width:100%;height:100%}
#hero-parallax img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Process step images (one per timeline column) */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(32px,5vw,48px);align-items:stretch}
.process-step-media{aspect-ratio:4/3;width:100%;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--sh);border:1px solid var(--border);transition:box-shadow .3s,transform .3s}
.process-step-media:hover{box-shadow:var(--sh-lg);transform:translateY(-4px)}
.process-step-media picture{display:block;width:100%;height:100%}
.process-step-media img,.process-step-media .media-fill{width:100%;height:100%;object-fit:cover;object-position:center}

/* Page hero background (lessons etc.) */
.page-hero-bg{position:absolute;inset:0;opacity:.2}
.page-hero-bg picture,.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* Wellness intro photo – picture must fill 3:2 frame */
.wellness-intro-photo picture{display:block;width:100%;height:100%}

/* Artwork grids – avoid squashed columns on tablet */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
@media(max-width:900px){.art-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}}
@media(max-width:480px){.art-grid{grid-template-columns:1fr}}

/* Flip-card image face */
.art-flip-face img{width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:768px){
  .hero-section{min-height:520px;height:min(100vh,800px)}
  #hero-parallax{height:130%;top:-15%}
}