/* ───────────────────────────────────────────────────────────
   DHUMRA KIT · ལྡུམ་ར།  — shared design + motion system
   Every page: <link rel="stylesheet" href="/assets/kit/dhumra.css">
               <script src="/assets/kit/dhumra.js" defer></script>
   Bilingual rule: Tibetan is the hero, English is the whisper.
   ─────────────────────────────────────────────────────────── */
:root{
  --ink:#0D0906;
  --ink-2:#17100B;
  --ink-3:#241A12;
  --gold:#E2BE7C;
  --gold-hi:#FFE9B8;
  --gold-lo:#9A7A45;
  --cream:#F1E3C6;
  --cream-dim:rgba(241,227,198,.82);
  --cream-faint:rgba(241,227,198,.42);
  --line:rgba(226,190,124,.18);
  --oxblood:#C2492F;
  --turquoise:#3FA89B;
  --accent:var(--gold);
  --saffron:var(--gold);--saffron-hi:var(--gold-hi);--saffron-lo:var(--gold-lo);--vermilion:var(--oxblood);--lapis:#1B2552;

  --f-bo:'Jomolhari','Noto Serif Tibetan','Kailasa',serif;
  --f-disp:'Cormorant Garamond','Times New Roman',serif;
  --f-ui:'DM Sans',system-ui,sans-serif;

  --pad:clamp(1.1rem,4vw,3.4rem);
  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--ink);color:var(--cream);
  font-family:var(--f-ui);line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
html.js body.is-loading{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:4px}
.skip{position:fixed;left:1rem;top:-5rem;z-index:600;background:var(--gold);color:var(--ink);padding:.7rem 1.2rem;border-radius:99px;transition:top .3s}
.skip:focus{top:1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--gold);color:var(--ink)}

/* ── BILINGUAL PRIMITIVES ── */
.bi{display:flex;flex-direction:column;gap:.35em}
.bo{font-family:var(--f-bo);font-weight:400;line-height:1.45}
.en{font-family:var(--f-disp);font-size:1.22rem;letter-spacing:.015em;color:var(--cream-dim);font-style:italic;font-weight:500;line-height:1.3}
.bi.inline{flex-direction:row;align-items:baseline;gap:.8em}
/* language modes: both (default) · bo · en */
html[data-lang="bo"] .en{display:none}
html[data-lang="en"] .bo{display:none}
html[data-lang="en"] .en{font-size:1.3em;font-style:normal;letter-spacing:.01em;color:var(--cream)}

/* ── CANVAS BACKGROUND (gold smoke shader) ── */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
#sparks{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:91;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
main,footer,.layer{position:relative;z-index:2}

/* ── CURSOR ── */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:200;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}
  html.has-cursor .cur,html.has-cursor .cur-dot{display:block}
}
.cur{
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:1px solid var(--gold);mix-blend-mode:difference;
  display:grid;place-items:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s,border-color .3s;
}
.cur span{font-family:var(--f-bo);font-size:1.15rem;line-height:1;color:var(--gold-hi);opacity:0;transition:opacity .2s;white-space:nowrap}
.cur.is-link{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(13,9,6,.55);border-color:var(--gold);mix-blend-mode:normal;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cur.is-link span{opacity:1}
.cur.is-down{transform:scale(.8)}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold-hi)}

/* ── PAGE TRANSITION (mandala iris) ── */
.iris{
  position:fixed;inset:0;z-index:500;pointer-events:none;
  background:var(--gold);
  clip-path:circle(0px at 50% 50%);
  display:grid;place-items:center;
}
.iris .in{position:absolute;inset:0;background:var(--ink);clip-path:circle(0px at 50% 50%)}
.iris img{position:relative;z-index:2;width:min(34vw,170px);opacity:0}
/* covers the page instantly while the previous page's iris is still closed */
html.dh-arr body::before{content:'';position:fixed;inset:0;background:var(--ink);z-index:499}
.iris.is-on{pointer-events:all}

/* ── LOADER ── */
.loader{
  position:fixed;inset:0;z-index:400;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.loader svg{width:min(52vw,230px);height:auto;overflow:visible}
.loader svg *{fill:none;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.loader .count{font-family:var(--f-bo);font-size:clamp(2.2rem,8vw,4rem);color:var(--gold-hi);line-height:1;letter-spacing:.05em}
.loader .count-en{font-family:var(--f-disp);font-style:italic;font-size:1rem;color:var(--cream-faint)}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.4rem) var(--pad);
  transition:translate .5s var(--ease-out);
}
.nav.is-hidden{translate:0 -120%}
.nav .mark{display:flex;align-items:center;gap:.7rem}
.nav .mark img{width:42px;height:42px;border-radius:50%;transition:transform 1s var(--ease-out)}
.nav .mark:hover img{transform:rotate(180deg)}
.nav .mark .bo{font-size:1.25rem;color:var(--gold-hi)}
.nav-r{display:flex;align-items:center;gap:1rem}
.lang{
  display:flex;border:1px solid var(--line);border-radius:99px;padding:3px;
  background:rgba(13,9,6,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lang button{
  font-size:.9rem;padding:.38rem .8rem;border-radius:99px;color:var(--cream-dim);
  font-family:var(--f-ui);letter-spacing:.1em;transition:background .3s,color .3s;
}
.lang button[data-set="bo"]{font-family:var(--f-bo);font-size:1.05rem;padding:.12rem .8rem;line-height:1.7}
.lang button.on{background:var(--gold);color:var(--ink)}
.burger{
  width:50px;height:50px;border-radius:50%;border:1px solid var(--line);
  background:rgba(13,9,6,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;position:relative;
}
.burger i{position:absolute;left:15px;right:15px;height:1px;background:var(--gold);transition:transform .5s var(--ease-out),top .5s var(--ease-out)}
.burger i:nth-child(1){top:20px}.burger i:nth-child(2){top:29px}
.menu-open .burger i:nth-child(1){top:24px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:24px;transform:rotate(-45deg)}

/* ── FULLSCREEN MENU ── */
.menu{
  position:fixed;inset:0;z-index:140;background:var(--ink-2);
  clip-path:circle(0px at calc(100% - 3rem) 2.6rem);
  visibility:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:8rem var(--pad) 3rem;overflow-y:auto;
}
.menu::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 80% 20%,rgba(226,190,124,.14),transparent 55%);
}
.menu ol{list-style:none;position:relative;counter-reset:m}
.menu li{overflow:hidden;border-top:1px solid var(--line)}
.menu li:last-child{border-bottom:1px solid var(--line)}
.menu li a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:clamp(.5rem,1.6vh,1.1rem) 0;transition:padding .5s var(--ease-out),color .3s;
}
.menu li a .bo{font-size:clamp(2rem,min(6vw,8.2vh),4.4rem);line-height:1.55;transition:transform .6s var(--ease-out),color .3s}
.menu li a .en{font-size:clamp(1.1rem,1.9vw,1.5rem)}
.menu li a:hover{padding-left:1.4rem}
.menu li a:hover .bo{color:var(--gold-hi)}
.menu-foot{position:relative;margin-top:2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--cream-dim);font-size:.85rem}

/* ── TYPE SCALE ── */
.mega{font-family:var(--f-bo);font-size:clamp(4.5rem,22vw,22rem);line-height:1.15;color:var(--gold-hi)}
.h1{font-family:var(--f-bo);font-size:clamp(2.6rem,9vw,8rem);line-height:1.3}
.h2{font-family:var(--f-bo);font-size:clamp(2rem,5.5vw,4.6rem);line-height:1.35}
.body-bo{font-family:var(--f-bo);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.9;color:var(--cream)}
.lead-en{font-family:var(--f-disp);font-size:clamp(1.1rem,1.8vw,1.55rem);font-style:italic;color:var(--cream-dim);line-height:1.5}
.gold-text{
  background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold-hi) 40%,var(--gold) 55%,var(--gold-hi) 70%,var(--gold-lo) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:-250% 0}}

/* split-reveal helper (JS wraps words/syllables) */
.sp{display:inline-block;overflow:hidden;vertical-align:top;padding:.6em 0 .75em;margin:-.6em 0 -.75em}
.sp>span{display:inline-block;will-change:transform}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  padding:.95rem 1.6rem;border:1px solid var(--gold);border-radius:99px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease-out);
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--gold);z-index:-1;
  transform:translateY(101%);border-radius:50% 50% 0 0/100% 100% 0 0;
  transition:transform .6s var(--ease-out),border-radius .6s var(--ease-out);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0);border-radius:0}
.btn .bo{font-size:1.1rem}
.btn .en{color:inherit;font-size:1rem}

/* ── MARQUEE ── */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:1.2rem 0;position:relative;z-index:2;background:rgba(13,9,6,.55);backdrop-filter:blur(4px)}
.marquee-track{display:inline-flex;align-items:center;gap:2.5rem;will-change:transform}
.marquee .bo{font-size:clamp(2rem,6vw,4.5rem);color:var(--cream)}
.marquee .en{font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--gold)}
.marquee .star{color:var(--gold);font-size:1.6rem}

/* ── FOOTER ── */
.foot{
  padding:clamp(4rem,12vw,9rem) var(--pad) 2rem;position:relative;overflow:hidden;
  border-top:1px solid var(--line);background:linear-gradient(to bottom,transparent,rgba(13,9,6,.85));
}
.foot-mega{font-family:var(--f-bo);font-size:clamp(7rem,32vw,30rem);line-height:1.05;text-align:center;color:transparent;-webkit-text-stroke:1px var(--gold-lo);user-select:none}
.foot-row{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-end;margin-top:2rem;color:var(--cream-dim);font-size:.85rem}
.foot-row nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot-row a:hover{color:var(--gold)}

/* ── HUB (list pages) ── */
/* ── ART PLATE: a piece mounted like a gilded thangka door — burnished-gold keyline, deep tinted ground, soft glow, art large ── */
.frame{display:block;position:relative;padding:9px;border-radius:999px 999px 22px 22px;
  background:linear-gradient(165deg,#F6E2B0,#B88F4A 26%,#6E5127 50%,#C9A96E 76%,#F6E2B0);
  box-shadow:0 44px 80px -32px rgba(0,0,0,.9),0 0 0 1px rgba(255,233,184,.16)}
.frame>.in{display:block;position:relative;aspect-ratio:3/4;border-radius:inherit;overflow:hidden;
  background:radial-gradient(115% 80% at 50% 34%,color-mix(in srgb,var(--tone,#C9A96E) 36%,#1B130D) 0,#150E09 60%,#0C0805 100%)}
.frame>.in::after{content:'';position:absolute;inset:10px;border-radius:inherit;border:1px solid rgba(255,233,184,.26);pointer-events:none}
.frame .halo{position:absolute;inset:0;display:grid;place-items:center;padding:13% 8% 9%}
.frame .halo::before{content:'';position:absolute;width:82%;aspect-ratio:1;left:50%;top:46%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tone,#C9A96E) 62%,transparent),transparent 68%);filter:blur(16px)}
.frame .halo img{position:relative;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.62))}
.frame .halo img.cover{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;filter:none}

/* ── LIST PAGES (hub / artwork): a gallery of plates ── */
.hub-hero{min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end;padding:9rem var(--pad) 3rem;position:relative}
.crumb{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:2.6rem;color:var(--cream-dim)}
.crumb a:hover{color:var(--accent)}
.hub-hero .sub{margin-top:1rem;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--accent)}
.hub-hero .mega{color:var(--accent);font-size:clamp(3.2rem,11vw,10rem);line-height:1.35}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.8rem);padding:1rem var(--pad) 7rem;max-width:1500px;margin:0 auto}
.card{display:flex;flex-direction:column;gap:1.1rem}
.card .frame{transition:transform .8s var(--ease-out),box-shadow .6s}
.card:hover .frame{transform:translateY(-10px);box-shadow:0 56px 90px -30px rgba(0,0,0,.95),0 0 60px -10px color-mix(in srgb,var(--tone,#C9A96E) 50%,transparent)}
.card .cap{display:flex;flex-direction:column;gap:.15rem;text-align:center;align-items:center}
.card .cap .bo{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--cream)}
.card .cap .ct{font-family:var(--f-bo);color:var(--gold);font-size:1rem}
.empty{padding:5rem var(--pad) 8rem;text-align:center;color:var(--cream-dim)}
.empty .bo{font-size:2rem;margin-top:1rem}
.empty .en{margin-top:.5rem}
.empty .glyph{font-size:4rem;color:var(--accent);animation:spin 18s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  .grain,.gold-text,.empty .glyph{animation:none}
  .loader{display:none}
}

/* ── strict-CSP helpers (no inline style attributes anywhere) ── */
.bi.center{align-items:center;text-align:center}
.nowrap{white-space:nowrap}

/* ── BACKDROP: faint Tibetan-brocade lotus lattice that lights up around the cursor / finger (replaces heavy smoke) ── */
.fx{position:fixed;inset:0;z-index:1;pointer-events:none}
.fx-brocade{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'><g fill='none' stroke='%23E2BE7C' stroke-width='1' stroke-linejoin='round'><g id='m'><circle r='7'/><circle r='22' stroke-dasharray='1.5 4'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(45)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(90)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(135)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(180)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(225)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(270)'/><path d='M0 -7 C-9 -20 -9 -34 0 -46 C9 -34 9 -20 0 -7Z' transform='rotate(315)'/></g></g><g fill='none' stroke='%23E2BE7C' stroke-width='1'><use href='%23m' x='66' y='66'/><use href='%23m' x='0' y='0'/><use href='%23m' x='132' y='0'/><use href='%23m' x='0' y='132'/><use href='%23m' x='132' y='132'/></g></svg>");background-size:132px 132px;background-position:calc(var(--sy,0px) * -.05) calc(var(--sy,0px) * -.08);
  opacity:0;-webkit-mask-image:radial-gradient(circle var(--lr,360px) at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.07) 100%);mask-image:radial-gradient(circle var(--lr,360px) at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.07) 100%)}


.fx-brocade{opacity:.34}
.fx-vig{background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(8,5,3,.7) 100%)}
@media (max-width:760px){.fx-brocade{--lr:230px}}
@media (prefers-reduced-motion:reduce){.fx-brocade{opacity:.22}}

.foot-social{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-row a{padding:.2rem 0}

/* ── FOOTER v2: quiet nav row · "Follow us" + round icons · small legal line ── */
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 3rem;margin-top:2.2rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.foot-nav a{display:inline-flex;padding:.3rem 0;color:var(--cream-dim);transition:color .3s}
.foot-nav .bo{font-size:1.15rem}.foot-nav .en{font-size:1.05rem}
.foot-nav a:hover{color:var(--gold-hi)}
.foot-follow{display:flex;align-items:center;gap:1.1rem 1.4rem;flex-wrap:wrap}
.foot-follow-t{align-items:flex-end;text-align:right;gap:0}
.foot-follow-t .bo{font-size:1.15rem;color:var(--cream)}.foot-follow-t .en{font-size:1rem}
.foot-icons{display:flex;gap:.7rem}
.ico{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);background:rgba(13,9,6,.5);transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease-out)}
.ico svg{width:21px;height:21px}
.ico:hover,.ico:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 2rem;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--cream-faint);font-size:.9rem}
.foot-legal nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot-legal a{color:var(--cream-faint);transition:color .3s}.foot-legal a:hover{color:var(--gold-hi)}
.foot-legal .bo{font-size:1rem}.foot-legal .en{font-size:.95rem}
@media (max-width:700px){.foot-top{flex-direction:column;align-items:flex-start}.foot-follow{width:100%;justify-content:space-between}.foot-follow-t{align-items:flex-start;text-align:left}}