/* ===== Art Forms page ===== */
.ah{position:relative;overflow:hidden;background:var(--ivory);padding:4rem 0 3.5rem;text-align:center}
.ah .container{position:relative}
.ah h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;color:var(--navy);margin:.9rem 0 1rem}
.ah p.lead{max-width:56ch;margin:0 auto;color:#4a4a63;font-size:1.05rem;line-height:1.7}
.reel{display:flex;gap:1.1rem;justify-content:center;align-items:flex-end;margin-top:3rem}
.reel a{display:block;width:clamp(120px,15vw,190px);text-decoration:none;text-align:center;transition:.4s}
.reel a:nth-child(1){--h:1.18}.reel a:nth-child(2){--h:1.34}.reel a:nth-child(3){--h:1.46}.reel a:nth-child(4){--h:1.34}.reel a:nth-child(5){--h:1.18}
.reel .fr{aspect-ratio:1/var(--h);border-radius:999px 999px 0 0;overflow:hidden;border:1px solid var(--gold);padding:6px;background:var(--ivory);transition:.4s}
.reel img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;display:block}
.reel a:hover{transform:translateY(-10px)}.reel a:hover .fr{box-shadow:0 14px 30px rgba(11,16,48,.2)}
.reel b{display:block;margin-top:.7rem;font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--navy)}
.reel small{display:block;color:var(--gold);letter-spacing:.2em;font-size:.65rem;text-transform:uppercase}
@media(max-width:991px){.reel{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1.25rem .8rem;margin:2.5rem -12px 0;scrollbar-width:none}
 .reel::-webkit-scrollbar{display:none}.reel a{flex:0 0 140px;scroll-snap-align:center}}

.intro-strip{background:var(--navy);color:var(--gold2);text-align:center;padding:1.1rem 1rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem}

/* each art section */
.art{--ac:var(--mari);--tint:#f3e8d0;padding:5rem 0;scroll-margin-top:70px;position:relative;background:var(--tint)}
.art:nth-of-type(even){background:var(--ivory)}
.art-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.art.flip .art-grid{grid-template-columns:6fr 5fr}.art.flip .art-vis{order:2}
.art-vis{position:relative;max-width:430px;margin:0 auto;width:100%}
.art-vis .fr{aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;border:1px solid var(--ac);padding:9px;background:#fff;box-shadow:0 24px 50px -24px rgba(11,16,48,.45)}
.art-vis img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;display:block;transition:transform 1.2s}
.art-vis:hover img{transform:scale(1.05)}
.art-vis .tag{position:absolute;right:-14px;bottom:36px;background:var(--navy);color:var(--gold2);padding:.55rem 1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.art-no{font-family:'Cormorant Garamond',serif;font-size:clamp(4rem,9vw,7rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ac);opacity:.7;display:block}
.art h2{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;color:var(--navy);margin:.2rem 0 0}
.art h2 span{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.4em;color:var(--ac);font-weight:600;letter-spacing:.04em;margin-top:.3rem}
.art .where{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.art .where i{color:var(--ac)}
.art p{color:#3a3a55;line-height:1.8;max-width:58ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.6rem 0;max-width:620px}
.facts div{border-top:2px solid var(--ac);padding-top:.6rem}
.facts dt{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);font-weight:500}
.facts dd{margin:.25rem 0 0;font-size:.9rem;color:var(--navy);line-height:1.4}
.facts{margin-left:0}
.look{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.look li{border:1px solid var(--ac);color:var(--navy);padding:.3rem .85rem;border-radius:999px;font-size:.82rem;background:rgba(255,255,255,.55)}
.art .btn-line{border-color:var(--ac)}.art .btn-line:hover{background:var(--navy);border-color:var(--navy)}
.art-vis,.art-txt{transition:.9s}
.art.w{--ac:#a24d26}.art.m{--ac:#c8372d}.art.k{--ac:#1f3b63}.art.p{--ac:#c0281f}.art.g{--ac:#1a8f8f}
@media(max-width:850px){
 .art{padding:3.5rem 0}
 .art-grid,.art.flip .art-grid{grid-template-columns:1fr;gap:2rem}.art.flip .art-vis{order:0}
 .art-vis{max-width:320px}.art-vis .tag{right:-6px}
 .facts{grid-template-columns:1fr 1fr}
}

/* did you know ribbon */
.dyk{background:var(--navy);color:#fff;padding:4.5rem 0;position:relative;overflow:hidden}
.dyk .container{position:relative}
.dyk h2{color:#fff}.dyk .eyebrow{color:var(--gold2)}
.dgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(201,162,75,.35);border:1px solid rgba(201,162,75,.35);margin-top:2.5rem}
.dgrid>div{background:var(--navy);padding:1.5rem 1.1rem}
.dgrid h3{font-size:1.5rem;color:var(--gold2);margin:0 0 .8rem}
.dgrid dl{margin:0;font-size:.85rem;color:#b4b7d3}.dgrid dt{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.7rem}.dgrid dd{margin:.1rem 0 0;line-height:1.45}
@media(max-width:991px){.dgrid{grid-template-columns:1fr 1fr}.dgrid>div:last-child{grid-column:1/-1}}
@media(max-width:520px){.dgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ah::before{animation:none}}

/* ===== v5: each art gets its own mood ===== */
.intro-strip{overflow:hidden;white-space:nowrap;padding:.8rem 0;font-size:1.3rem}
.intro-strip div{display:inline-block;animation:mq 40s linear infinite}
.reel .fr{animation:bob 6s ease-in-out infinite alternate}
.reel a:nth-child(2) .fr{animation-delay:-1.2s}.reel a:nth-child(3) .fr{animation-delay:-2.4s}.reel a:nth-child(4) .fr{animation-delay:-3.6s}.reel a:nth-child(5) .fr{animation-delay:-4.8s}
.art{background:var(--bg)!important;color:var(--tx);overflow:hidden;padding:6rem 0 5rem}
.art .container{position:relative;z-index:1}
.art h2,.art .facts dd,.art .where{color:var(--hd)}
.art p{color:var(--tx)}
.art .facts dt{color:var(--ac)}
.art .look li{color:var(--hd);background:var(--chip);border-color:var(--ac)}
.art .btn-line{color:var(--hd);border-color:var(--hd)}.art .btn-line:hover{background:var(--hd);color:var(--bg);border-color:var(--hd)}
.art .art-no{-webkit-text-stroke-color:var(--ac)}
.art h2 span{color:var(--ac)}
.art .art-vis .fr{border-color:var(--ac);background:var(--frbg,#fff)}
.art .art-vis .tag{background:var(--hd);color:var(--bg)}
.art::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background-repeat:repeat-x;background-position:top left;z-index:2}
.art::after{content:attr(data-dev);position:absolute;right:2%;bottom:-1.2rem;font-family:'Noto Serif Devanagari','Cormorant Garamond',serif;font-weight:600;font-size:clamp(7rem,24vw,20rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ac);opacity:.16;pointer-events:none;white-space:nowrap}
.art.flip::after{right:auto;left:2%}
.art.w{--bg:#a24d26;--hd:#fff6e8;--tx:#f7e3d2;--ac:#f6cfae;--chip:rgba(255,255,255,.1);--frbg:#8f4220}
.art.w::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M0 16 L14 0 L28 16Z' fill='%23fbf3e2'/%3E%3C/svg%3E")}
.art.m{--bg:#f8e3a8;--hd:#2a1510;--tx:#4a2e22;--ac:#c8372d;--chip:rgba(255,255,255,.6)}
.art.m::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cpath d='M13 1 L24 8 L13 15 L2 8Z' fill='%23c8372d' stroke='%231c1210' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='8' r='2' fill='%23f2b21b'/%3E%3C/svg%3E")}
.art.k{--bg:#efe0c2;--hd:#1f3b63;--tx:#3a3a4f;--ac:#a43a2c;--chip:rgba(255,255,255,.55)}
.art.k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='16'%3E%3Cpath d='M0 0 a14 14 0 0 0 28 0z' fill='%231f3b63'/%3E%3Cpath d='M28 0 a14 14 0 0 0 28 0z' fill='%23a43a2c'/%3E%3C/svg%3E")}
.art.p{--bg:#b8231a;--hd:#fff1d6;--tx:#fbe3c6;--ac:#f6c433;--chip:rgba(0,0,0,.18);--frbg:#fbf1dc}
.art.p::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cpath d='M13 1 L24 8 L13 15 L2 8Z' fill='%23fbf1dc' stroke='%231b0f0b' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='8' r='2.2' fill='%23254f8f'/%3E%3C/svg%3E")}
.art.g{--bg:#15110f;--hd:#ffffff;--tx:#d9d2c9;--ac:#f5b700;--chip:rgba(255,255,255,.06);--frbg:#15110f}
.art.g::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23f5b700'/%3E%3Ccircle cx='24' cy='8' r='3' fill='%2322a6a6'/%3E%3Ccircle cx='40' cy='8' r='3' fill='%23e0517c'/%3E%3C/svg%3E")}
.art.g .art-vis .fr{box-shadow:0 0 60px -10px rgba(245,183,0,.35)}
/* swatches */
.sw{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:0 0 1.2rem}
.swc{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--hd)}
.swc i{width:22px;height:22px;border-radius:50%;border:2px solid var(--hd);box-shadow:0 0 0 1px rgba(0,0,0,.15);display:block;transition:transform .3s}
.swc:hover i{transform:scale(1.35)}
/* art reveal */
.js .art-vis.reveal{transform:translateY(40px) rotate(-3deg) scale(.96)}
.js .art-vis.reveal.show{transform:none}
/* side dots */
.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:1015;display:flex;flex-direction:column;gap:.9rem}
.dots a{position:relative;width:14px;height:14px;border-radius:50%;background:var(--ivory);border:2px solid var(--navy);box-shadow:0 0 0 2px rgba(255,255,255,.6);transition:.3s}
.dots a::after{content:attr(data-n);position:absolute;right:26px;top:50%;transform:translateY(-50%);background:var(--navy);color:var(--gold2);padding:.25rem .7rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s}
.dots a:hover::after,.dots a.on::after{opacity:1}
.dots a.on{background:var(--mari);transform:scale(1.4)}
@media(max-width:1100px){.dots{display:none}}
/* mood picker */
.mood{background:var(--ivory);padding:5rem 0}
.mchips{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:2rem 0}
.mchips button{border:1px solid var(--navy);background:none;padding:.65rem 1.3rem;border-radius:999px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);transition:.3s}
.mchips button:hover{background:rgba(201,162,75,.25)}
.mchips button.on{background:var(--navy);color:var(--gold2)}
.mres{display:grid;grid-template-columns:210px 1fr;gap:2.5rem;align-items:center;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--gold);padding:1.6rem 2rem 1.6rem 1.6rem;border-radius:6px;box-shadow:0 24px 50px -30px rgba(11,16,48,.5);animation:pop .5s}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mimg{aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;border:1px solid var(--gold);padding:5px}
.mimg img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;display:block}
.mtxt small{color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font-size:.66rem}
.mtxt h3{font-size:clamp(2rem,4vw,2.8rem);color:var(--navy);margin:.2rem 0 .6rem}.mtxt h3 span{font-size:.5em;color:var(--mari);font-style:italic;margin-left:.4rem}
.mtxt p{color:#3a3a55;line-height:1.7}
.mbtn{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
@media(max-width:640px){.mres{grid-template-columns:1fr;text-align:center;padding:1.4rem}.mimg{max-width:170px;margin:0 auto}.mbtn{justify-content:center}.mchips button{font-size:.7rem;padding:.55rem 1rem}}
@media(max-width:850px){.art{padding:4.5rem 0 3.5rem}.art::after{font-size:clamp(5rem,32vw,9rem);bottom:-.6rem}}
@media(prefers-reduced-motion:reduce){.intro-strip div,.reel .fr{animation:none}.js .art-vis.reveal{transform:none}}