/* ==========================================================================
   ABDULRAHMAN AL-ESSA — "The Creation", second edition
   A museum of code at night: marble, bronze, candlelight.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--bg)}

/* ---------- Tokens ---------- */
:root{
  --bg:#0b0a08;
  --bg-2:#12100c;
  --bg-3:#1a1712;
  --panel:#15130f;
  --ink:#efe6d4;
  --ink-soft:#b3a78f;
  --ink-faint:#7a705e;
  --gold:#c9a463;
  --gold-2:#e8cd92;
  --gold-3:#8f7340;
  --blood:#8b2a1b;
  --blood-2:#b4432c;
  --line:rgba(239,230,212,.10);
  --line-2:rgba(239,230,212,.22);
  --glow:rgba(232,205,146,.55);
  --hand-filter:sepia(.28) saturate(.9) brightness(.86) contrast(1.06);
  --shadow:0 40px 80px -30px rgba(0,0,0,.7);

  --f-display:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --f-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --gutter:clamp(16px,4vw,64px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3ede1;
  --bg-2:#ebe3d3;
  --bg-3:#e2d8c4;
  --panel:#eee7da;
  --ink:#1b1812;
  --ink-soft:#544b3c;
  --ink-faint:#877c68;
  --gold:#94733a;
  --gold-2:#7a5c27;
  --gold-3:#b8955a;
  --blood:#8b2a1b;
  --blood-2:#a5381f;
  --line:rgba(27,24,18,.12);
  --line-2:rgba(27,24,18,.26);
  --glow:rgba(201,164,99,.55);
  --hand-filter:none;
  --shadow:0 40px 80px -40px rgba(60,40,10,.35);
  color-scheme:light;
}

html{background:var(--bg);scroll-behavior:auto}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  overflow-x:hidden;min-height:100vh;
  transition:background-color .6s var(--ease),color .6s var(--ease);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Atmosphere: grain + vignette ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;transform:translateZ(0);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="light"] .grain{opacity:.12;mix-blend-mode:multiply;filter:invert(1)}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;transform:translateZ(0);
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
:root[data-theme="light"] .vignette{background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(120,90,40,.12) 100%)}
#dust{position:fixed;inset:0;z-index:1;pointer-events:none;transform:translateZ(0)}

/* ---------- Type primitives ---------- */
.display{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;line-height:.9}
.display em,.it{font-style:italic}
.mono,.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{color:var(--gold)}
.muted{color:var(--ink-soft)}
.gold{color:var(--gold)}
.gilded{
  background:linear-gradient(100deg,var(--gold-3) 0%,var(--gold-2) 30%,#fff3d6 45%,var(--gold) 60%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* split-text lines (filled by JS) */
.line-mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line-inner{display:block}

/* reveal fallback (if JS/GSAP fails, content stays visible) */
.js .rv{opacity:0;transform:translateY(28px)}
.no-motion .rv{opacity:1!important;transform:none!important}

/* ---------- Cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;will-change:transform;
  transform:translate3d(-100px,-100px,0)}
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--gold);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,border-color .35s;
  display:grid;place-items:center}
.cursor span{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .25s}
.cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(201,164,99,.12)}
.cursor.is-view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--gold);border-color:var(--gold)}
.cursor.is-view span{opacity:1}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--gold-2);box-shadow:0 0 12px var(--glow)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;pointer-events:none}
.loader__inner{text-align:center}
.loader__num{font-family:var(--f-display);font-style:italic;font-size:clamp(64px,10vw,140px);line-height:1;color:var(--gold-2);min-width:4ch;display:inline-block}
.loader__bar{width:min(280px,60vw);height:1px;background:var(--line-2);margin:24px auto 0;position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.loader__cap{margin-top:18px;color:var(--ink-faint)}
.loader.done{display:none}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gutter);transition:padding .5s var(--ease),background-color .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent}
.nav.is-scrolled{padding:14px var(--gutter);background:color-mix(in srgb,var(--bg) 94%,transparent);border-color:var(--line)}
.nav.is-hidden{transform:translateY(-110%)}
.nav{transition:transform .6s var(--ease),padding .5s var(--ease),background-color .5s,border-color .5s}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{font-family:var(--f-display);font-style:italic;font-size:26px;line-height:1;color:var(--gold-2)}
.brand__name{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px)}
.nav__links a{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links sup{font-size:8px;color:var(--gold);margin-right:4px}
.theme-toggle{width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:border-color .3s,transform .6s var(--ease)}
.theme-toggle:hover{border-color:var(--gold);transform:rotate(180deg)}
.theme-toggle svg{width:16px;height:16px;color:var(--gold-2)}
@media (max-width:720px){
  .nav__links a:not(.keep){display:none}
  .brand__name{display:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--ease);z-index:-1}
.btn:hover{color:var(--bg);border-color:var(--gold)}
.btn:hover::before{transform:translateY(0)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--solid{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.btn--solid::before{background:var(--ink)}

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Hero / The Creation ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;z-index:3}
.hero__stage{position:absolute;inset:0}
.hero__hands{position:absolute;left:0;right:0;top:12%;height:58%;pointer-events:none}
.hand{position:absolute;top:0;height:100%;width:auto;max-width:none;will-change:transform;backface-visibility:hidden}
.hand .tone-dark,.hand .tone-light{display:block;height:100%;width:auto;max-width:none}
.hand .tone-light{display:none}
:root[data-theme="light"] .hand .tone-dark{display:none}
:root[data-theme="light"] .hand .tone-light{display:block}
.hand--l{right:50%;margin-right:calc(16px - 2.06vh);transform:translateX(-22vw)}
.hand--r{left:50%;margin-left:calc(16px - .52vh);transform:translateX(22vw)}
.spark{position:absolute;left:50%;top:calc(12% + 58% * .51);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,#fff8e4 0%,var(--gold-2) 30%,rgba(232,205,146,0) 70%);
  box-shadow:0 0 30px 10px var(--glow),0 0 120px 40px rgba(232,205,146,.18);opacity:0;transform:scale(.2);z-index:2}
.spark::after{content:"";position:absolute;inset:-300%;border-radius:50%;border:1px solid rgba(232,205,146,.35);opacity:0;animation:none}
.spark.lit::after{animation:ripple 2.6s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.4);opacity:0}}

.hero__top{position:absolute;top:96px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;z-index:3}
.hero__top .mono{color:var(--ink-faint)}
.hero__top .mono b{color:var(--gold);font-weight:400}
.hero__avail{display:flex;align-items:center;gap:10px}
.hero__avail i{width:7px;height:7px;border-radius:50%;background:#7fbf7a;box-shadow:0 0 0 0 rgba(127,191,122,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,191,122,.55)}70%{box-shadow:0 0 0 12px rgba(127,191,122,0)}100%{box-shadow:0 0 0 0 rgba(127,191,122,0)}}

.hero__title{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,72px);z-index:3}
.hero__name{font-family:var(--f-display);font-weight:400;line-height:.82;letter-spacing:-.035em;font-size:clamp(40px,13.2vw,232px);white-space:nowrap}
.hero__name .row2{display:flex;align-items:flex-end;justify-content:space-between;gap:4vw}
.hero__name em{font-style:italic;color:var(--gold-2)}
.hero__lede{max-width:380px;font-size:15px;line-height:1.55;color:var(--ink-soft);padding-bottom:1.6vw;white-space:normal;letter-spacing:0;font-family:var(--f-body)}
.hero__lede strong{color:var(--ink);font-weight:500}
.hero__scroll{position:absolute;right:var(--gutter);top:50%;z-index:3;writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;color:var(--ink-faint)}
.hero__scroll i{width:1px;height:70px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold-2);animation:drip 2s var(--ease-in-out) infinite}
@keyframes drip{to{top:110%}}
.hero__caption{position:absolute;left:50%;top:calc(12% + 58% * .8);transform:translateX(-50%);z-index:3;text-align:center;opacity:0}
.hero__caption .display{font-size:clamp(22px,2.6vw,40px);font-style:italic;color:var(--ink)}
.hero__caption .mono{display:block;margin-top:10px;color:var(--gold)}
@media (max-width:820px){
  .hero__hands{top:18%;height:40%}
  .spark{top:calc(18% + 40% * .51)}
  .hand--l{margin-right:calc(10px - 1.42vh)}
  .hand--r{margin-left:calc(10px - .36vh)}
  .hero__caption{top:calc(18% + 40% * .8);width:90%}
  .hero__name .row2{flex-direction:column;align-items:flex-start;gap:20px}
  .hero__lede{padding-bottom:0}
  .hero__scroll{display:none}
}

/* ---------- Marquee ---------- */
.marquee{position:relative;z-index:3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg)}
.marquee__track{display:flex;width:max-content;animation:marq 48s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:36px;padding-right:36px;font-family:var(--f-display);font-size:clamp(26px,3.2vw,48px);white-space:nowrap}
.marquee__item:nth-child(even){font-style:italic;color:var(--gold-2)}
.marquee__item .star{font-size:.5em;color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Generic section ---------- */
.section{position:relative;z-index:3;padding:clamp(100px,16vh,200px) 0}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(16px,3vw,48px);margin-bottom:clamp(48px,8vh,100px)}
.sec-head__num{font-family:var(--f-display);font-style:italic;font-size:clamp(64px,9vw,150px);line-height:.8;color:var(--gold);opacity:.9}
.sec-head__title{font-family:var(--f-display);font-size:clamp(40px,6vw,104px);line-height:.9;letter-spacing:-.03em}
.sec-head__title em{font-style:italic;color:var(--ink-soft)}
.sec-head__aside{text-align:right;color:var(--ink-faint);padding-bottom:10px}
.sec-head__rule{grid-column:1/-1;height:1px;background:var(--line-2);transform-origin:left}
@media (max-width:720px){.sec-head{grid-template-columns:auto 1fr}.sec-head__aside{display:none}}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.portrait{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow)}
.portrait img{width:100%;height:118%;object-fit:cover;will-change:transform}
.portrait::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(232,205,146,.18);pointer-events:none}
.portrait__cap{display:flex;justify-content:space-between;margin-top:14px;color:var(--ink-faint)}
.about__lead{font-family:var(--f-display);font-size:clamp(30px,3.6vw,58px);line-height:1.04;letter-spacing:-.02em;margin-bottom:clamp(28px,4vh,48px)}
.about__lead em{font-style:italic;color:var(--gold-2)}
.about__body{display:grid;grid-template-columns:1fr 1fr;gap:28px;color:var(--ink-soft);max-width:760px}
.about__body strong{color:var(--ink);font-weight:500}
.about__body p:first-child::first-letter{font-family:var(--f-display);font-style:italic;float:left;font-size:4.2em;line-height:.8;padding:6px 10px 0 0;color:var(--gold-2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line-2)}
.stat{padding:24px 18px 0 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat + .stat{padding-left:18px}
.stat__n{font-family:var(--f-display);font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.03em}
.stat__n sup{font-size:.4em;color:var(--gold);vertical-align:top;margin-left:4px;position:relative;top:.3em}
.stat__l{margin-top:10px;color:var(--ink-faint);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.honors{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .portrait{max-width:440px}
  .about__body{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(3){padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line);margin-top:24px}
}

/* ---------- Opera: horizontal gallery ---------- */
.opera{position:relative;z-index:3}
.opera__pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.opera__head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--gutter);margin-bottom:clamp(20px,4vh,44px)}
.opera__head h2{font-family:var(--f-display);font-size:clamp(40px,6vw,104px);line-height:.85;letter-spacing:-.03em}
.opera__head h2 em{font-style:italic;color:var(--gold-2)}
.opera__count{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-faint);text-align:right}
.opera__count b{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:44px;letter-spacing:0;color:var(--ink);display:block;line-height:1}
.opera__progress{height:1px;background:var(--line);margin:0 var(--gutter) clamp(20px,3vh,36px);position:relative}
.opera__progress i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.opera__track{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--gutter);width:max-content;will-change:transform;backface-visibility:hidden}
.plate{width:min(78vw,1180px);height:min(64vh,640px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border:1px solid var(--line-2);background:var(--panel);position:relative;overflow:hidden}
.plate__art{position:relative;overflow:hidden;background:var(--bg-2);border-right:1px solid var(--line)}
.plate__art > *{position:absolute;inset:0;width:100%;height:100%}
.plate__art img{object-fit:cover;transition:transform 1.4s var(--ease)}
.plate:hover .plate__art img{transform:scale(1.04)}
.plate__body{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;min-width:0}
.plate__meta{display:flex;justify-content:space-between;color:var(--ink-faint);gap:12px}
.plate__meta b{color:var(--gold);font-weight:400}
.plate__title{font-family:var(--f-display);font-size:clamp(44px,5.6vw,96px);line-height:.88;letter-spacing:-.03em;margin:auto 0 16px}
.plate__title em{font-style:italic;color:var(--gold-2)}
.plate__desc{color:var(--ink-soft);font-size:15px;max-width:44ch}
.plate__tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 26px}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-soft)}
.plate__cta{align-self:flex-start}
.plate--end{width:min(40vw,520px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,4vw,56px);background:transparent;border-style:dashed}
.plate--end p{font-family:var(--f-display);font-size:clamp(28px,3vw,48px);line-height:1;margin-bottom:28px}
.plate--end p em{font-style:italic;color:var(--gold-2)}
@media (max-width:900px){
  .opera__pin{height:auto;padding:100px 0 40px}
  .opera__track{flex-direction:column;width:100%}
  .plate{width:100%;height:auto;grid-template-columns:1fr}
  .plate__art{aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--line)}
  .plate__title{margin-top:28px}
  .plate--end{width:100%}
  .opera__progress{display:none}
}

/* ---------- Plate art: shared generative pieces ---------- */
.art-routes{background:radial-gradient(80% 80% at 50% 50%,#17140f,#0d0b08)}
:root[data-theme="light"] .art-routes{background:radial-gradient(80% 80% at 50% 50%,#efe7d7,#e3d8c3)}
.art-routes svg{width:100%;height:100%}
.art-routes .route{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.art-routes .cust{fill:var(--ink)}
.art-routes .depot{fill:var(--gold-2)}
.art-routes .grid{stroke:var(--line);stroke-width:.5}

.art-pipe{background:#0f0d0a;display:grid;place-items:center}
:root[data-theme="light"] .art-pipe{background:#e8dfcd}
.art-pipe svg{width:100%;height:auto;padding:0 3%}
.art-pipe .stage{fill:none;stroke:var(--line-2)}
.art-pipe .stage-l{font-family:var(--f-display);font-style:italic;fill:var(--ink);font-size:40px}
.art-pipe .stage-s{font-family:var(--f-mono);fill:var(--ink-soft);font-size:13px;letter-spacing:.12em}
.art-pipe .reg{fill:var(--gold-3)}
.art-pipe .bus{stroke:var(--line-2);stroke-width:1;fill:none}
.art-pipe .fwd{stroke:var(--blood-2);stroke-width:1.2;fill:none;stroke-dasharray:4 5;animation:dash 1.2s linear infinite}
.art-pipe .pulse{fill:var(--gold-2);filter:drop-shadow(0 0 6px var(--glow))}
@keyframes dash{to{stroke-dashoffset:-18}}

.art-jads{background:radial-gradient(70% 70% at 60% 40%,#1d2a3a,#0b1018);display:grid;place-items:center;overflow:hidden}
.phone{position:relative;width:min(44%,240px);aspect-ratio:9/19.5;border-radius:34px;background:#0a0a0a;padding:9px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -20px rgba(0,0,0,.8);transform:rotate(-8deg)}
.phone__screen{width:100%;height:100%;border-radius:26px;background:#f6f4ef;overflow:hidden;display:flex;flex-direction:column;color:#13213a;font-family:var(--f-body)}
.phone__notch{position:absolute;top:16px;left:50%;width:30%;height:18px;margin-left:-15%;border-radius:20px;background:#0a0a0a;z-index:2}
.phone__bar{background:#13213a;color:#f6f4ef;padding:44px 14px 14px;font-size:10px}
.phone__bar b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:20px;margin-top:2px}
.phone__ticket{margin:14px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -10px rgba(19,33,58,.35);padding:12px;text-align:center}
.phone__ticket small{display:block;font-family:var(--f-mono);font-size:7px;letter-spacing:.14em;color:#7b879a;text-transform:uppercase}
.phone__ticket strong{display:block;font-size:11px;margin:4px 0 8px}
.qr{width:78%;margin:0 auto;aspect-ratio:1;display:grid;grid-template-columns:repeat(21,1fr);gap:0}
.qr i{background:#13213a}
.qr i.o{background:transparent}
.phone__rows{padding:0 14px;display:grid;gap:7px}
.phone__rows span{height:8px;border-radius:4px;background:#e5e1d8}
.phone__rows span:nth-child(2){width:70%}
.phone__rows span:nth-child(3){width:85%}
.art-jads .float-card{position:absolute;padding:10px 14px;border-radius:12px;background:rgba(30,42,60,.82);border:1px solid rgba(246,244,239,.16);color:#f6f4ef;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.art-jads .float-card b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:#fff}
.art-jads .fc1{left:8%;top:16%}
.art-jads .fc2{right:8%;bottom:16%}
.art-jads .fc3{right:12%;top:12%}

.art-glass{background:
  radial-gradient(60% 60% at 25% 30%,#ff9f6b 0%,transparent 60%),
  radial-gradient(60% 60% at 80% 70%,#6b8bff 0%,transparent 60%),
  radial-gradient(60% 60% at 70% 20%,#d36bff 0%,transparent 55%),#22202a;display:grid;place-items:center;overflow:hidden}
.mac{width:84%;aspect-ratio:16/10.5;border-radius:14px;background:rgba(32,30,38,.82);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 70px -20px rgba(0,0,0,.7);position:relative;overflow:hidden}
.mac__bar{height:9%;display:flex;align-items:center;gap:6px;padding:0 3%}
.mac__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.mac__bar i:nth-child(2){background:#febc2e}.mac__bar i:nth-child(3){background:#28c840}
.mac__bar span{margin-left:auto;margin-right:auto;font-family:var(--f-body);font-size:10px;color:rgba(255,255,255,.6)}
.mac__body{position:absolute;inset:9% 0 0;display:grid;grid-template-columns:18% 1fr;background:#3a3842}
.mac__side{background:rgba(255,255,255,.04);padding:8% 12%;display:grid;gap:8%;align-content:start}
.mac__side i{aspect-ratio:1/1.3;border-radius:3px;background:#f3f1ec;opacity:.85}
.mac__side i:first-child{outline:2px solid #6b8bff;outline-offset:2px}
.mac__page{margin:5% auto 0;width:62%;background:#fbfaf7;border-radius:2px;padding:6% 7%;display:grid;gap:5px;align-content:start;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.mac__page span{height:5px;border-radius:2px;background:#d9d5cc}
.mac__page span.h{height:9px;width:60%;background:#2b2a30;margin-bottom:6px}
.mac__page span.hl{background:#ffe066;opacity:.85}
.mac__page span.ul{box-shadow:0 2px 0 #ff5f57}
.mac__page .ink{height:28px;background:none;position:relative}
.mac__page .ink svg{position:absolute;inset:0;width:100%;height:100%}
.glass-pal{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(120,116,138,.72),rgba(64,60,78,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 10px 30px -8px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.3)}
.glass-pal b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:9px;color:rgba(255,255,255,.85);transition:background .25s,transform .25s}
.glass-pal b.on{background:rgba(255,255,255,.9);color:#222}

/* ---------- Catalogue (minor works) ---------- */
.cat{border-top:1px solid var(--line-2)}
.cat__row{display:grid;grid-template-columns:70px minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr) 90px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);position:relative;cursor:default;isolation:isolate}
.cat__row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:var(--bg-2);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.cat__row:hover::before{transform:scaleY(1)}
.cat__n{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.12em}
.cat__t{font-family:var(--f-display);font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:-.02em;transition:transform .6s var(--ease),color .4s}
.cat__row:hover .cat__t{transform:translateX(12px);color:var(--gold-2)}
.cat__t small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.cat__d{color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.cat__s{display:flex;flex-wrap:wrap;gap:6px}
.cat__a{justify-self:end;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
a.cat__a{color:var(--ink)}
a.cat__a .ring{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .4s,border-color .4s,transform .6s var(--ease)}
.cat__row:hover a.cat__a .ring{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:rotate(-45deg)}
.cat__lock{display:inline-flex;align-items:center;gap:6px}
@media (max-width:980px){
  .cat__row{grid-template-columns:44px 1fr auto;row-gap:12px}
  .cat__d{grid-column:2/-1}
  .cat__s{grid-column:2/-1}
  .cat__a{grid-row:1;grid-column:3}
}

/* ---------- Cursus (timeline) ---------- */
.cursus{position:relative;display:grid;gap:0}
.cursus__line{position:absolute;left:calc(220px + 20px);top:0;bottom:0;width:1px;background:var(--line)}
.cursus__line i{position:absolute;inset:0;background:linear-gradient(var(--gold-2),var(--gold-3));transform-origin:top;transform:scaleY(0)}
.epoch{display:grid;grid-template-columns:220px 40px 1fr;align-items:start;padding:32px 0}
.epoch__date{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding-top:16px}
.epoch__dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);margin:20px auto 0;position:relative;z-index:1;transition:background .4s,box-shadow .4s}
.epoch.on .epoch__dot{background:var(--gold-2);box-shadow:0 0 18px var(--glow)}
.epoch__role{font-family:var(--f-display);font-size:clamp(28px,3vw,48px);line-height:1.05;letter-spacing:-.02em}
.epoch__role em{font-style:italic;color:var(--gold-2)}
.epoch__org{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:10px 0 12px}
.epoch__desc{color:var(--ink-soft);max-width:62ch}
@media (max-width:720px){
  .cursus__line{left:5px}
  .epoch{grid-template-columns:28px 1fr;grid-template-areas:"dot date" ". role" ". org" ". desc"}
  .epoch__dot{grid-area:dot;margin:4px 0 0}
  .epoch__date{grid-area:date;padding-top:0}
  .epoch__role{grid-area:role;margin-top:8px}
  .epoch__org{grid-area:org}
  .epoch__desc{grid-area:desc}
}

/* ---------- Instrumenta ---------- */
.instr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2)}
.instr__col{padding:28px 24px 32px 0;border-right:1px solid var(--line)}
.instr__col + .instr__col{padding-left:24px}
.instr__col:last-child{border-right:0}
.instr__col h3{font-family:var(--f-display);font-weight:400;font-size:28px;margin-bottom:22px;display:flex;align-items:baseline;gap:10px}
.instr__col h3 span{font-style:italic;color:var(--gold);font-size:18px}
.instr__col li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.instr__col li span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.instr__col li span.core{color:var(--gold-2)}
@media (max-width:1100px){
  .instr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .instr__col{padding-left:0!important;padding-right:20px;border-right:0}
}
@media (max-width:760px){.instr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .instr{grid-template-columns:1fr}
  .instr__col{border-right:0;padding-left:0!important}
}

/* ---------- Contact ---------- */
.contact{position:relative;z-index:3;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:140px 0 60px;text-align:center}
.contact__hands{position:absolute;left:0;right:0;bottom:4vh;height:34vh;pointer-events:none;opacity:.35}
.contact__hands .hand{opacity:1}
.contact__hands .hand--l{margin-right:3vw;transform:none}
.contact__hands .hand--r{margin-left:3vw;transform:none}
.contact .eyebrow{margin-bottom:28px;display:block}
.contact__big{font-family:var(--f-display);font-size:clamp(56px,11vw,200px);line-height:.85;letter-spacing:-.04em;position:relative}
.contact__big em{font-style:italic}
.contact__p{max-width:520px;margin:36px auto 44px;color:var(--ink-soft)}
.contact__mail{font-family:var(--f-display);font-style:italic;font-size:clamp(24px,3.2vw,48px);display:inline-block;position:relative;color:var(--gold-2)}
.contact__mail::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(.25);transition:transform .7s var(--ease)}
.contact__mail:hover::after{transform:scaleX(1)}
.contact__links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:48px}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:3;border-top:1px solid var(--line);padding:28px var(--gutter);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-faint)}
.foot a:hover{color:var(--gold-2)}

/* ==========================================================================
   CASE STUDY PAGES
   ========================================================================== */
.case-hero{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 0 clamp(40px,7vh,80px)}
.case-hero__crumb{position:absolute;top:110px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:var(--ink-faint)}
.case-hero__crumb a:hover{color:var(--gold-2)}
.case-hero__opus{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.case-hero__opus i{flex:0 0 60px;height:1px;background:var(--gold)}
.case-hero__title{font-family:var(--f-display);font-size:clamp(76px,17vw,300px);line-height:.8;letter-spacing:-.045em}
.case-hero__title em{font-style:italic;color:var(--gold-2)}
.case-hero__sub{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(28px,5vh,56px);align-items:end}
.case-hero__lede{font-family:var(--f-display);font-size:clamp(22px,2.2vw,34px);line-height:1.18;letter-spacing:-.01em}
.case-hero__lede em{font-style:italic;color:var(--gold-2)}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
.fact{padding:14px 0;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){padding-right:16px}
.fact dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.fact dd{font-size:14.5px}
.fact dd a{color:var(--gold-2);border-bottom:1px solid var(--gold-3)}
.fact dd a:hover{color:var(--ink)}
@media (max-width:820px){.case-hero__sub{grid-template-columns:minmax(0,1fr)}}

.case-banner{position:relative;z-index:3;height:clamp(360px,78vh,860px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-banner > *{position:absolute;inset:0;width:100%;height:100%}
.case-banner img{object-fit:cover}

.chapter{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,5vw,80px);padding:clamp(80px,14vh,160px) 0 0}
.chapter__label{position:sticky;top:110px;align-self:start}
.chapter__label .n{font-family:var(--f-display);font-style:italic;font-size:64px;line-height:1;color:var(--gold)}
.chapter__label .t{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px;display:block}
.chapter__body > * + *{margin-top:24px}
.chapter h2{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.025em}
.chapter h2 em{font-style:italic;color:var(--gold-2)}
.chapter h3{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.2vw,34px);line-height:1.1;margin-top:48px}
.chapter p{color:var(--ink-soft);max-width:68ch;font-size:clamp(15.5px,1.1vw,18px)}
.chapter p strong{color:var(--ink);font-weight:500}
.chapter code,.kbd{font-family:var(--f-mono);font-size:.86em;padding:2px 6px;border:1px solid var(--line-2);border-radius:4px;color:var(--gold-2);background:var(--bg-2)}
.chapter .pull{font-family:var(--f-display);font-style:italic;font-size:clamp(26px,3vw,46px);line-height:1.12;color:var(--ink);border-left:1px solid var(--gold);padding-left:clamp(18px,2.4vw,36px);max-width:none;margin:48px 0}
@media (max-width:820px){
  .chapter{grid-template-columns:minmax(0,1fr)}
  .chapter__label{position:static;display:flex;align-items:baseline;gap:16px}
  .chapter__label .n{font-size:44px}
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}}

.card{border:1px solid var(--line-2);background:var(--panel);padding:clamp(20px,2.4vw,32px);position:relative}
.card .eyebrow{display:block;margin-bottom:14px}
.card h4{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.05;margin-bottom:10px}
.card p{font-size:15px;color:var(--ink-soft)}
.card ul{margin-top:12px;display:grid;gap:8px}
.card li{font-size:14.5px;color:var(--ink-soft);padding-left:18px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--gold)}

.figure{margin-top:40px}
.figure__frame{border:1px solid var(--line-2);background:var(--bg-2);overflow:hidden;position:relative}
.figure__frame img{width:100%;height:auto}
.figure__frame--light{background:#f3f2f2;padding:clamp(12px,2vw,28px)}
.figure figcaption{display:flex;gap:14px;margin-top:12px;color:var(--ink-faint);font-size:13.5px}
.figure figcaption b{font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap;padding-top:2px}
.figure--wide{margin-left:calc(-1 * (100% / 9 * 3 + clamp(24px,5vw,80px)) );}
@media (max-width:820px){.figure--wide{margin-left:0}}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);margin-top:40px}
.gallery .figure{margin-top:0}
.g-7{grid-column:span 7}.g-5{grid-column:span 5}.g-6{grid-column:span 6}.g-4{grid-column:span 4}.g-8{grid-column:span 8}.g-12{grid-column:span 12}
@media (max-width:820px){.gallery > *{grid-column:span 12!important}}

.table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:28px}
.table th{font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line-2)}
.table td{padding:14px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.table td.num,.table th.num{text-align:right}
.table tr.best td{color:var(--gold-2)}
.table tr.ours td:first-child{color:var(--ink)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bar{height:6px;background:var(--line);position:relative;border-radius:3px;overflow:hidden;min-width:80px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold-3),var(--gold-2));border-radius:3px;transform-origin:left}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);margin-top:36px}
.step{padding:24px 20px 0 0}
.step + .step{padding-left:20px;border-left:1px solid var(--line)}
.step .n{font-family:var(--f-display);font-style:italic;font-size:44px;line-height:1;color:var(--gold)}
.step h4{font-family:var(--f-display);font-weight:400;font-size:24px;margin:10px 0 8px}
.step p{font-size:14.5px}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:0}.step:nth-child(n+3){margin-top:24px;border-top:1px solid var(--line)}}

.tree{font-family:var(--f-mono);font-size:13px;line-height:1.85;color:var(--ink-soft);background:var(--bg-2);border:1px solid var(--line-2);padding:clamp(18px,2.4vw,32px);overflow-x:auto;white-space:pre}
.tree b{color:var(--gold-2);font-weight:400}
.tree i{color:var(--ink-faint);font-style:normal}

.lab{border:1px solid var(--line-2);background:var(--panel);margin-top:40px}
.lab__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.lab__bar .eyebrow{display:flex;align-items:center;gap:10px}
.lab__bar .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blood-2);box-shadow:0 0 10px var(--blood-2)}
.lab__ctrls{display:flex;flex-wrap:wrap;gap:8px}
.lab__btn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.lab__btn:hover,.lab__btn.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.lab__foot{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);padding:14px 18px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint)}
.lab__foot b{color:var(--ink);font-weight:400}

.next{position:relative;z-index:3;display:block;padding:clamp(100px,18vh,220px) 0 clamp(60px,10vh,120px);border-top:1px solid var(--line);margin-top:clamp(100px,16vh,200px);overflow:hidden}
.next .eyebrow{display:block;margin-bottom:22px}
.next__title{font-family:var(--f-display);font-size:clamp(72px,15vw,260px);line-height:.82;letter-spacing:-.045em;transition:color .5s,transform .9s var(--ease);display:inline-block}
.next__title em{font-style:italic}
.next:hover .next__title{color:var(--gold-2);transform:translateX(2vw)}
.next__arr{display:inline-block;font-family:var(--f-display);font-size:.5em;vertical-align:middle;transition:transform .9s var(--ease)}
.next:hover .next__arr{transform:translateX(3vw)}

/* ---------- Page transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:250;pointer-events:none;display:grid;grid-template-columns:repeat(5,1fr)}
.curtain i{background:var(--bg-3);transform:scaleY(0);transform-origin:bottom}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hand--l,.hand--r{transform:none}
}
.gilded:has(.line-inner){background:none;color:inherit}
.gilded .line-inner{padding:0 .08em;margin:0 -.08em;
  background:linear-gradient(100deg,var(--gold-3) 0%,var(--gold-2) 35%,#fff3d6 50%,var(--gold) 65%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* animations inside art pause when off-screen (toggled by main.js) */
.is-offscreen *,.is-offscreen{animation-play-state:paused!important}
.art-pipe,.art-routes,.art-jads,.art-glass{contain:paint}

/* ---------- Tibbuk: clinical store art ---------- */
.art-tibbuk{background:radial-gradient(70% 70% at 35% 40%,#e9f1f1,#c9dcdc);display:grid;place-items:center;overflow:hidden}
.art-tibbuk .steth{width:min(62%,420px);height:auto;overflow:visible}
.art-tibbuk .tube{fill:none;stroke:var(--steth,#1f4e5a);stroke-width:9;stroke-linecap:round}
.art-tibbuk .metal{fill:#d7dde0;stroke:#9aa6ab;stroke-width:2}
.art-tibbuk .bell{fill:url(#bellGrad);stroke:#8e9aa0;stroke-width:2}
.art-tibbuk .engrave{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;fill:#3c4a50;text-transform:uppercase}
.art-tibbuk .tag{position:absolute;padding:10px 14px;border-radius:12px;background:#fff;color:#16323a;box-shadow:0 14px 30px -14px rgba(22,50,58,.45);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.art-tibbuk .tag b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:21px;letter-spacing:0;text-transform:none;color:#16323a}
.art-tibbuk .t1{left:7%;top:12%}.art-tibbuk .t2{right:7%;top:20%}.art-tibbuk .t3{left:9%;bottom:12%}

/* ---------- Abujad: fragrance art ---------- */
.art-abujad{background:radial-gradient(60% 70% at 50% 60%,#3a2412 0%,#160d07 70%);display:grid;place-items:center;overflow:hidden;color:#f3e3c4}
.art-abujad .bottle{width:min(34%,230px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.art-abujad .ar{position:absolute;top:9%;left:0;right:0;text-align:center;font-family:'Reem Kufi',var(--f-display);font-size:clamp(28px,3.4vw,52px);color:#e6c27a;direction:rtl}
.art-abujad .note{position:absolute;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,227,196,.75);display:flex;align-items:center;gap:10px}
.art-abujad .note i{width:46px;height:1px;background:rgba(230,194,122,.6)}
.art-abujad .n1{left:10%;top:38%}.art-abujad .n2{right:10%;top:52%;flex-direction:row-reverse}.art-abujad .n3{left:12%;top:68%}