/* =========================================================
   LIYA LIBOV — STUDIO
   Custom design system. No frameworks. RTL-first, Hebrew.
   ========================================================= */

/* ---------- 0. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}

::selection{background:var(--ink);color:var(--bone)}

/* ---------- 1. TOKENS ---------- */
:root{
  /* color */
  --ink:        #0F0E0C;
  --ink-2:      #1A1815;
  --graphite:   #2A2724;
  --ash:        #6B655C;
  --ash-2:      #A39C90;
  --bone:       #F4EFE5;
  --paper:      #FAF6EC;
  --cream:      #EDE6D6;
  --line:       rgba(15,14,12,.18);
  --line-soft:  rgba(15,14,12,.10);
  --line-inv:   rgba(244,239,229,.20);
  --brass:      #B69569;
  --brass-2:    #8B7351;
  --ember:      #8C3A2C;
  --cobalt:     #1E3A52;
  --mint:       #6E8E76;

  /* type */
  --font-display: 'Frank Ruhl Libre','Cormorant Garamond',serif;
  --font-body:    'Heebo','Frank Ruhl Libre',-apple-system,sans-serif;
  --font-italic:  'Cormorant Garamond','Italiana','Frank Ruhl Libre',serif;
  --font-mono:    'Cormorant Garamond',serif;

  /* metrics */
  --pad-x: clamp(1.25rem, 4vw, 4.5rem);
  --pad-y: clamp(5rem, 12vw, 10rem);
  --rad: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.7,0,.2,1);
  --ease-glide: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. UTILITIES ---------- */
.serif{font-family:var(--font-display);font-weight:300}
.italic{font-family:var(--font-italic);font-style:italic;font-weight:300;letter-spacing:.005em}

/* generic reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s var(--ease-glide), transform 1.1s var(--ease-glide);
  will-change:transform,opacity;
}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 3. NOISE / GRAIN ---------- */
.grain{
  position:fixed;inset:-50%;
  pointer-events:none;z-index:90;
  opacity:.07;mix-blend-mode:multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}
  80%{transform:translate(2%,-1%)}
  100%{transform:translate(0,0)}
}

/* ---------- 4. CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;z-index:100;pointer-events:none;mix-blend-mode:exclusion}
.cursor__dot,.cursor__ring{
  position:absolute;top:0;left:0;border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor__dot{
  width:6px;height:6px;background:#F4EFE5;
  transition:transform .18s var(--ease), background .25s ease;
}
.cursor__ring{
  width:34px;height:34px;border:1px solid #F4EFE5;
  transition:transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease), border-color .25s ease, opacity .25s ease;
  opacity:.7;
}
.cursor.is-hover .cursor__ring{width:64px;height:64px;opacity:1}
.cursor.is-hover .cursor__dot{transform:translate(-50%,-50%) scale(.4)}
.cursor.is-view  .cursor__ring{width:88px;height:88px;background:rgba(244,239,229,.04);border-color:#F4EFE5}
.cursor.is-view::after{
  content:"צפי";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#F4EFE5;font:300 11px/1 var(--font-body);letter-spacing:.18em;
}
.cursor.is-down .cursor__ring{transform:translate(-50%,-50%) scale(.85)}
@media(hover:none),(pointer:coarse){.cursor{display:none}body{cursor:auto}}

/* ---------- 5. INTRO LOADER ---------- */
.intro{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--bone);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease-glide), visibility .9s var(--ease-glide);
}

/* רמז גלילה בתוך ההקדמה */
.intro__scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:300 10px/1 var(--font-body);letter-spacing:.4em;text-transform:uppercase;
  color:var(--bone);opacity:0;
  animation:introScrollIn 1s var(--ease-glide) 1.6s both;
  pointer-events:none;
}
.intro__scroll i{
  display:block;width:1px;height:40px;background:currentColor;
  position:relative;overflow:hidden;
}
.intro__scroll i::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--bone);
  animation:scrollLine 2.6s var(--ease) infinite;
}
@keyframes introScrollIn{
  from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to  {opacity:.55;transform:translateX(-50%) translateY(0)}
}
.intro__inner{
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.intro__mark{
  font:300 14px/1 var(--font-italic);font-style:italic;
  letter-spacing:.6em;opacity:.6;
}
.intro__name{
  font:300 clamp(2.4rem,7vw,4.5rem)/1.05 var(--font-display);
  letter-spacing:.04em;
  opacity:0;animation:introIn 1.2s var(--ease-glide) .25s forwards;
}
.intro__line{display:block;width:140px;height:1px;background:rgba(244,239,229,.2);overflow:hidden}
.intro__line i{display:block;width:0;height:1px;background:var(--bone);animation:introLine 1.4s var(--ease-glide) .4s forwards}

@keyframes introIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes introLine{ to{width:100%} }

body:not(.is-loading) .intro{opacity:0;visibility:hidden}

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;
  padding:18px var(--pad-x);
  transition:background .4s ease, padding .4s ease, color .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
  color:var(--ink);
  mix-blend-mode:normal;
}
.nav.is-stuck{
  background:rgba(244,239,229,.78);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--line);
  padding:10px var(--pad-x);
}
.nav.is-dark{color:var(--bone)}
.nav.is-dark.is-stuck{background:rgba(15,14,12,.6);border-bottom-color:var(--line-inv)}

.nav__brand{
  display:flex;align-items:center;gap:14px;justify-self:start;
}
.nav__brand-mark{
  width:34px;height:34px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;
  font:400 11px/1 var(--font-italic);font-style:italic;letter-spacing:.1em;
}
.nav__brand-text{
  font:300 14px/1.1 var(--font-display);letter-spacing:.06em;
  display:flex;flex-direction:column;
}
.nav__brand-text em{
  font:300 9px/1 var(--font-italic);font-style:italic;
  letter-spacing:.32em;text-transform:uppercase;opacity:.55;margin-top:4px;
}

.nav__menu{display:flex;gap:2.2rem;justify-self:center}
.nav__link{
  position:relative;
  font:300 12.5px/1 var(--font-body);letter-spacing:.16em;
  display:inline-flex;align-items:baseline;gap:.6em;
  padding:6px 0;
}
.nav__link i{font:300 10px/1 var(--font-italic);font-style:italic;opacity:.55}
.nav__link::after{
  content:"";position:absolute;right:0;left:auto;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .5s var(--ease-glide);
}
.nav__link:hover::after{width:100%}

.nav__cta{
  justify-self:end;
  display:inline-flex;align-items:center;gap:.6em;
  padding:11px 22px;border:1px solid currentColor;border-radius:60px;
  font:400 12px/1 var(--font-body);letter-spacing:.18em;
  transition:background .35s ease, color .35s ease, transform .4s var(--ease);
}
.nav__cta svg{transform:rotate(180deg);transition:transform .4s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--bone)}
.nav.is-dark .nav__cta:hover{background:var(--bone);color:var(--ink)}
.nav__cta:hover svg{transform:rotate(180deg) translateX(-3px)}

/* mobile nav */
@media (max-width: 880px){
  .nav__menu{display:none}
  .nav{grid-template-columns:1fr auto;gap:.5rem}
}

/* ---------- 7. SIDE DOTS ---------- */
.dots{
  position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;gap:18px;
}
.dots__item{
  position:relative;display:flex;align-items:center;gap:10px;
  pointer-events:auto;
}
.dots__item span{
  display:block;width:8px;height:8px;border-radius:50%;
  border:1px solid currentColor;background:transparent;
  transition:background .35s ease, transform .35s ease;
}
.dots__item b{
  position:absolute;right:18px;
  white-space:nowrap;
  font:300 10px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transform:translateX(-6px);transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.dots__item:hover b{opacity:.9;transform:translateX(0)}
.dots__item.is-active span{background:currentColor;transform:scale(1.3)}
@media (max-width: 1100px){.dots{display:none}}

/* ---------- 8. SECTION HEAD ---------- */
.section-head{
  display:flex;align-items:center;gap:1rem;
  font:300 11px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section-head__num{
  font-family:var(--font-italic);font-style:italic;
  font-size:13px;letter-spacing:.2em;opacity:.65;
}
.section-head__rule{flex:1;height:1px;background:currentColor;opacity:.35}
.section-head__label{position:relative;padding-bottom:2px}

/* ---------- 9. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.8em;
  padding:18px 30px;
  font:400 12px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:60px;
  position:relative;overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:translateY(101%);transition:transform .55s var(--ease-glide);
  z-index:-1;
}
.btn:hover::before{transform:translateY(0)}
.btn span{position:relative;z-index:1;transition:color .5s var(--ease)}

.btn--ghost{color:var(--ink)}
.btn--ghost:hover{color:var(--bone)}

.btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--solid::before{background:var(--bone)}
.btn--solid:hover{color:var(--ink)}

.btn--line{color:var(--bone)}
.btn--line:hover{color:var(--ink)}

.btn--whatsapp{
  background:var(--ink);color:var(--bone);border-color:var(--ink);
  padding:20px 34px;font-size:13px;
}
.btn--whatsapp::before{background:var(--brass)}
.btn--whatsapp:hover{color:var(--ink);border-color:var(--brass)}

.btn__arrow{
  position:relative;z-index:1;
  width:18px;height:1px;background:currentColor;
  transform-origin:left center;transition:transform .45s var(--ease);
}
.btn__arrow::before{
  content:"";position:absolute;left:-1px;top:-3px;
  width:7px;height:7px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .btn__arrow{transform:scaleX(1.4)}

/* ---------- 10. HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  padding:calc(var(--pad-y) + 60px) var(--pad-x) 6rem;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto 1fr auto;
  gap:clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem);
  align-items:center;
  background:var(--bone);
}

.hero__year, .hero__loc{
  position:absolute;
  font:300 10.5px/1 var(--font-body);letter-spacing:.4em;text-transform:uppercase;opacity:.55;
}
.hero__year{
  top:50%;right:1.6rem;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-lr;
}
.hero__loc{
  top:50%;left:1.6rem;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-lr;
}
@media (max-width: 1100px){.hero__year,.hero__loc{display:none}}

.hero__type{position:relative;z-index:2;max-width:38rem}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font:300 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;opacity:.7;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.hero__eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--ember);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(140,58,44,.5)}
  50%{transform:scale(1.1);box-shadow:0 0 0 10px rgba(140,58,44,0)}
}

.hero__title{
  font:300 clamp(3.2rem,9vw,7.5rem)/.95 var(--font-display);
  letter-spacing:-.01em;
  margin:0 0 clamp(2rem,4vw,3rem);
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .word{display:inline-block;padding:0 .04em}
.hero__title .word.italic{font-family:var(--font-italic);font-style:italic;font-weight:300}
.hero__title .word.serif{font-family:var(--font-display);font-weight:300}
.hero__title .amp{display:inline-block;color:var(--ember);font-style:italic;font-family:var(--font-italic)}

.hero__lede{
  font:300 clamp(.95rem,1.2vw,1.05rem)/1.75 var(--font-body);
  max-width:30em;color:var(--graphite);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.hero__lede em{font-family:var(--font-italic);font-style:italic;color:var(--ink);font-weight:400}

.hero__meta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hero__sep{width:1px;height:30px;background:var(--line)}
.hero__link{
  font:400 12px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:opacity .3s ease;
}
.hero__link:hover{opacity:.6}

/* hero art */
.hero__art{
  position:relative;
  aspect-ratio:5/6;
  width:100%;max-width:560px;justify-self:center;
}
.hero__art figcaption{
  position:absolute;bottom:-3rem;right:0;
  display:flex;align-items:center;gap:14px;
  font:300 11px/1.6 var(--font-body);letter-spacing:.08em;color:var(--graphite);
  max-width:22ch;
}
.hero__art figcaption i{
  display:block;width:60px;height:1px;background:currentColor;flex:0 0 60px;
}

/* the abstract glass composition (CSS art) */
.glass{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1a1815 0%, #0F0E0C 100%);
  border:1px solid rgba(15,14,12,.4);
  overflow:hidden;
  box-shadow:
    0 60px 100px -40px rgba(15,14,12,.5),
    0 1px 0 rgba(255,255,255,.04) inset;
}
.glass::before{
  content:"";position:absolute;inset:14px;border:1px solid rgba(244,239,229,.06);
  z-index:3;pointer-events:none;
}
.glass__shard{
  position:absolute;
  background-blend-mode:screen;
  filter:saturate(1.1) brightness(1.05);
  transition:transform 1s var(--ease-glide), filter .6s ease;
}
.glass__shard--a{
  top:0;right:0;width:62%;height:48%;
  background:radial-gradient(ellipse at 30% 30%, #d99e6c 0%, #b06a3b 35%, #5a2715 100%);
  clip-path:polygon(0 0, 100% 0, 100% 80%, 60% 100%, 0 60%);
}
.glass__shard--b{
  top:30%;left:0;width:48%;height:42%;
  background:radial-gradient(ellipse at 70% 50%, #4a90b8 0%, #1e3a52 60%, #0e1c2a 100%);
  clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}
.glass__shard--c{
  bottom:0;right:8%;width:50%;height:46%;
  background:radial-gradient(ellipse at 50% 50%, #c3aa7e 0%, #8b6f44 40%, #3a2c18 100%);
  clip-path:polygon(0 30%, 100% 10%, 100% 100%, 30% 100%, 0 80%);
}
.glass__shard--d{
  top:18%;right:32%;width:36%;height:30%;
  background:radial-gradient(ellipse at 50% 40%, #edd9b6 0%, #b89968 60%, #6a4f30 100%);
  clip-path:polygon(20% 0, 100% 30%, 80% 100%, 0 80%);
}
.glass__shard--e{
  bottom:20%;left:10%;width:34%;height:28%;
  background:radial-gradient(ellipse at 50% 50%, #8c3a2c 0%, #4a1c14 70%, #1c0a08 100%);
  clip-path:polygon(0 20%, 100% 0, 100% 100%, 30% 100%);
}
.glass__shard--f{
  top:6%;left:24%;width:24%;height:22%;
  background:radial-gradient(ellipse at 30% 40%, #9eb89a 0%, #4d6e58 70%, #1c2c20 100%);
  clip-path:polygon(0 0, 100% 20%, 80% 100%, 10% 80%);
}
.glass__shard--g{
  bottom:10%;right:46%;width:22%;height:18%;
  background:radial-gradient(ellipse at 50% 50%, #2d4a64 0%, #102434 70%, #050d14 100%);
  clip-path:polygon(20% 0, 100% 30%, 80% 100%, 0 70%);
}
/* lead lines (the dark separators between shards) */
.glass__lead{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    /* horizontals */
    linear-gradient(180deg,transparent 47%, rgba(8,7,6,.85) 47%, rgba(8,7,6,.85) 48.2%, transparent 48.2%),
    linear-gradient(180deg,transparent 30%, rgba(8,7,6,.7) 30%, rgba(8,7,6,.7) 30.8%, transparent 30.8%),
    /* verticals */
    linear-gradient(90deg,transparent 38%, rgba(8,7,6,.85) 38%, rgba(8,7,6,.85) 39%, transparent 39%),
    linear-gradient(90deg,transparent 64%, rgba(8,7,6,.6) 64%, rgba(8,7,6,.6) 64.7%, transparent 64.7%);
  mix-blend-mode:multiply;
}
.glass__light{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 30% 25%, rgba(255,235,200,.18) 0%, transparent 45%);
  mix-blend-mode:screen;
}

.hero__art:hover .glass__shard{filter:saturate(1.3) brightness(1.12)}
.hero__art:hover .glass__shard--a{transform:translate(-4px,2px)}
.hero__art:hover .glass__shard--c{transform:translate(3px,-3px)}
.hero__art:hover .glass__shard--e{transform:translate(-2px,4px)}

/* hero ticker */
.ticker{
  grid-column:1/-1;align-self:end;
  margin:0 calc(var(--pad-x)*-1);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;overflow:hidden;
  font:300 14px/1 var(--font-italic);font-style:italic;letter-spacing:.04em;
}
.ticker__track{
  display:inline-flex;gap:1.4rem;white-space:nowrap;
  animation:tick 38s linear infinite;
  padding-left:1.4rem;
}
.ticker__track i{opacity:.4;font-style:normal}
@keyframes tick{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}

.hero__scroll{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:300 10px/1 var(--font-body);letter-spacing:.4em;text-transform:uppercase;opacity:.6;
}
.hero__scroll i{
  display:block;width:1px;height:46px;background:currentColor;position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--bone);
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{top:-100%}50%{top:0}100%{top:100%}
}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;text-align:right}
  .hero__art{max-width:420px;margin-top:1rem}
  .hero__art figcaption{position:relative;bottom:auto;margin-top:1.5rem}
}

/* ---------- 11. MANIFEST ---------- */
.manifest{
  padding:var(--pad-y) var(--pad-x);
  background:var(--paper);
  border-top:1px solid var(--line);
  position:relative;
}
.manifest__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-template-areas:
    "title  body"
    "title  body"
    "sig    body";
  gap:clamp(2rem,5vw,5rem);
}
.manifest__title{
  grid-area:title;
  font:300 clamp(2.6rem,6.4vw,5.2rem)/1.04 var(--font-display);
  letter-spacing:-.01em;
}
.manifest__title .italic{color:var(--ember)}
.manifest__body{grid-area:body;max-width:36rem;font-size:1.04rem;line-height:1.85}
.manifest__body p+p{margin-top:1.4em}
.manifest__credits{
  margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem;
}
.manifest__credits li{display:flex;flex-direction:column;gap:6px}
.manifest__credits b{
  font:400 10.5px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.manifest__credits span{font:300 1rem/1.3 var(--font-display)}

.manifest__signature{
  grid-area:sig;
  display:flex;flex-direction:column;gap:8px;
  padding-top:2rem;border-top:1px solid var(--line);
  max-width:240px;
}
.manifest__signature svg{width:200px;height:auto;color:var(--ink)}
.manifest__signature span{
  font:300 12px/1 var(--font-italic);font-style:italic;letter-spacing:.18em;
  color:var(--ash);
}

@media (max-width: 880px){
  .manifest__grid{grid-template-columns:1fr;grid-template-areas:"title" "body" "sig"}
  .manifest__credits{grid-template-columns:1fr 1fr}
}

/* ---------- 12. WORKS ---------- */
.works{
  padding:var(--pad-y) var(--pad-x);
  background:var(--ink);color:var(--bone);
  position:relative;
}
.section-head--invert{color:var(--bone)}

.works__intro{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.works__title{
  font:300 clamp(3rem,8vw,6.5rem)/1 var(--font-display);
  letter-spacing:-.01em;
}
.works__title .italic{color:var(--brass)}
.works__lede{
  font-size:1rem;line-height:1.8;color:var(--ash-2);max-width:36em;
  font-weight:300;
}

.works__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(2.4rem,4vw,4rem) clamp(1.6rem,3vw,3rem);
}

/* piece base */
.piece{position:relative;display:flex;flex-direction:column;gap:1.2rem}
.piece__media{
  display:block;position:relative;width:100%;aspect-ratio:4/5;
  background:#0a0907;overflow:hidden;
  isolation:isolate;
}
.piece__media::before{
  content:"";position:absolute;inset:0;border:1px solid rgba(244,239,229,.06);
  pointer-events:none;z-index:5;
}
.piece__art{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s var(--ease-glide), filter .6s ease;
}
.piece:hover .piece__art{transform:scale(1.04);filter:saturate(1.15) brightness(1.05)}

.piece__hover{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(15,14,12,0) 30%, rgba(15,14,12,.7) 100%);
  opacity:0;transition:opacity .55s var(--ease);
  z-index:4;
}
.piece__hover i{
  font:400 11px/1 var(--font-body);letter-spacing:.4em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--bone);border-radius:60px;
  font-style:normal;
}
.piece:hover .piece__hover{opacity:1}

.piece__info{display:flex;flex-direction:column;gap:6px;padding:0 4px}
.piece__num{
  font:400 10.5px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ash-2);
}
.piece__name{
  font:300 clamp(1.4rem,2vw,1.8rem)/1.15 var(--font-display);
  color:var(--bone);
}
.piece__meta{
  font:300 12.5px/1.5 var(--font-italic);font-style:italic;color:var(--ash-2);
  margin-top:2px;
}

/* piece sizes (asymmetric editorial) */
.piece--xl       {grid-column:1 / span 7}
.piece--xl + .piece--tall{grid-column:9 / span 4;margin-top:5rem}
.piece--wide     {grid-column:1 / span 8;margin-top:3rem}
.piece--m        {grid-column:auto / span 4}
.piece--xl.piece--align-end{grid-column:6 / span 7;align-self:end}
.piece + .piece--tall{}

/* explicit grid placement for our 7 pieces */
.works__grid > :nth-child(1){grid-column:1 / span 7}
.works__grid > :nth-child(2){grid-column:9 / span 4;margin-top:6rem}
.works__grid > :nth-child(3){grid-column:1 / span 8;margin-top:1rem}
.works__grid > :nth-child(4){grid-column:10 / span 3;margin-top:-2rem}
.works__grid > :nth-child(5){grid-column:1 / span 4;margin-top:3rem}
.works__grid > :nth-child(6){grid-column:6 / span 7;margin-top:1rem}
.works__grid > :nth-child(7){grid-column:1 / span 4;margin-top:-3rem}

/* media aspect overrides per piece type */
.works__grid > :nth-child(2) .piece__media{aspect-ratio:3/5}
.works__grid > :nth-child(3) .piece__media{aspect-ratio:7/4}
.works__grid > :nth-child(4) .piece__media{aspect-ratio:4/5}
.works__grid > :nth-child(5) .piece__media{aspect-ratio:1/1}
.works__grid > :nth-child(6) .piece__media{aspect-ratio:5/4}
.works__grid > :nth-child(7) .piece__media{aspect-ratio:3/4}

@media (max-width: 880px){
  .works__intro{grid-template-columns:1fr}
  .works__grid > *{grid-column:1 / -1 !important;margin-top:0 !important}
}

/* CSS placeholder art per piece (looks like glass — replace by adding background-image to .piece__art--N or to <img>) */
.piece__art--01{
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(217,158,108,.85) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(140,58,44,.85) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(184,153,104,.6) 0%, transparent 55%),
    linear-gradient(135deg, #2a1a14 0%, #0e0a08 100%);
}
.piece__art--01::after, .piece__art--02::after, .piece__art--03::after, .piece__art--04::after,
.piece__art--05::after, .piece__art--06::after, .piece__art--07::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 38%, rgba(8,7,6,.55) 38%, rgba(8,7,6,.55) 39%, transparent 39%),
    linear-gradient(180deg,transparent 64%, rgba(8,7,6,.5) 64%, rgba(8,7,6,.5) 65%, transparent 65%),
    linear-gradient(90deg,transparent 32%, rgba(8,7,6,.6) 32%, rgba(8,7,6,.6) 33%, transparent 33%),
    linear-gradient(90deg,transparent 70%, rgba(8,7,6,.5) 70%, rgba(8,7,6,.5) 71%, transparent 71%);
  mix-blend-mode:multiply;
}
.piece__art--02{
  background-image:
    radial-gradient(ellipse at 50% 25%, rgba(74,144,184,.85) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(110,142,118,.7) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(195,170,126,.6) 0%, transparent 50%),
    linear-gradient(180deg, #14202a 0%, #0a0f14 100%);
}
.piece__art--03{
  background-image:
    radial-gradient(ellipse at 25% 50%, rgba(237,217,182,.7) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 40%, rgba(176,106,59,.85) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(140,58,44,.6) 0%, transparent 50%),
    linear-gradient(110deg, #1a120c 0%, #0c0807 100%);
}
.piece__art--04{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(184,153,104,.85) 0%, rgba(140,58,44,.6) 40%, transparent 70%),
    linear-gradient(135deg, #1a1410 0%, #0a0706 100%);
}
.piece__art--05{
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(74,144,184,.8) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(176,106,59,.5) 0%, transparent 40%),
    linear-gradient(45deg, #0e1622 0%, #060a10 100%);
}
.piece__art--06{
  background-image:
    radial-gradient(ellipse at 35% 40%, rgba(217,158,108,.7) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(110,142,118,.7) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(140,58,44,.6) 0%, transparent 40%),
    linear-gradient(160deg, #1a1814 0%, #08070a 100%);
}
.piece__art--07{
  background-image:
    radial-gradient(circle at 30% 30%, rgba(184,153,104,.7) 0%, transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(140,58,44,.7) 0%, transparent 30%),
    radial-gradient(circle at 30% 70%, rgba(74,144,184,.7) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(110,142,118,.7) 0%, transparent 30%),
    linear-gradient(180deg, #1a1612 0%, #0a0806 100%);
}

.works__more{
  margin-top:clamp(4rem,8vw,7rem);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-top:3rem;border-top:1px solid var(--line-inv);
}
.works__note{
  font:300 12px/1.6 var(--font-italic);font-style:italic;color:var(--ash-2);max-width:34ch;
}

/* ---------- 13. CRAFT ---------- */
.craft{
  padding:var(--pad-y) var(--pad-x);
  background:var(--bone);position:relative;
  border-top:1px solid var(--line);
}
.craft__title{
  font:300 clamp(3rem,9vw,7rem)/1 var(--font-display);
  letter-spacing:-.01em;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.craft__title .italic{color:var(--ember)}

.craft__steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.craft__step{
  padding:2.5rem 2rem;border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:.8rem;
  min-height:280px;position:relative;
  transition:background .5s ease;
}
.craft__step:nth-child(3n){border-left:0}
.craft__step:hover{background:var(--paper)}
.craft__step-num{
  font:400 12px/1 var(--font-italic);font-style:italic;letter-spacing:.2em;
  color:var(--ash);
}
.craft__step h3{
  font:300 1.6rem/1.2 var(--font-display);letter-spacing:-.005em;
  margin-top:.4em;
}
.craft__step p{font-size:.95rem;line-height:1.75;color:var(--graphite);max-width:32ch}

.craft__quote{
  margin-top:clamp(4rem,8vw,7rem);
  text-align:center;
  font:300 clamp(1.6rem,3.5vw,2.6rem)/1.4 var(--font-display);font-style:italic;
  font-family:var(--font-italic);
  max-width:42ch;margin-left:auto;margin-right:auto;
  position:relative;color:var(--graphite);
}
.craft__quote em{color:var(--ink);font-weight:400}
.craft__quote-mark{
  display:block;font:400 6rem/.7 var(--font-italic);font-style:italic;
  color:var(--ember);opacity:.6;margin-bottom:.4em;
}

@media (max-width: 980px){
  .craft__steps{grid-template-columns:repeat(2,1fr)}
  .craft__step:nth-child(3n){border-left:1px solid var(--line)}
  .craft__step:nth-child(2n){border-left:0}
}
@media (max-width: 600px){
  .craft__steps{grid-template-columns:1fr}
  .craft__step{border-left:0!important;min-height:auto}
}

/* ---------- 14. CATS ---------- */
.cats{
  padding:0 var(--pad-x) var(--pad-y);background:var(--bone);
}
.cats__list{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);
}
.cats__item{
  position:relative;
  padding:2.5rem 1.5rem 4rem;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:1rem;
  min-height:280px;
  transition:background .5s var(--ease), color .5s var(--ease);
  cursor:pointer;
}
.cats__item:last-child{border-left:0}
.cats__num{
  font:400 11px/1 var(--font-italic);font-style:italic;
  letter-spacing:.18em;color:var(--ash);
}
.cats__item h3{font:300 2rem/1.1 var(--font-display)}
.cats__item p{font-size:.95rem;line-height:1.7;color:var(--graphite);max-width:24ch}
.cats__arrow{
  position:absolute;bottom:1.6rem;left:1.5rem;
  width:38px;height:38px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;
  transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.cats__arrow::before{
  content:"";display:block;width:8px;height:8px;
  border-top:1px solid currentColor;border-left:1px solid currentColor;
  transform:rotate(-45deg) translate(2px,2px);
}
.cats__item:hover{background:var(--ink);color:var(--bone)}
.cats__item:hover .cats__arrow{background:var(--bone);color:var(--ink);transform:scale(1.08)}
.cats__item:hover p{color:var(--ash-2)}

@media (max-width: 980px){.cats__list{grid-template-columns:repeat(2,1fr)} .cats__item:nth-child(2n){border-left:0}}
@media (max-width: 600px){.cats__list{grid-template-columns:1fr} .cats__item{border-left:0!important;border-bottom:1px solid var(--line)}}

/* ---------- 15. COMMISSION ---------- */
.commission{
  padding:var(--pad-y) var(--pad-x);
  background:var(--ink);color:var(--bone);
  position:relative;
}
.commission__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  grid-template-areas:
    "title title"
    "text  steps";
  gap:clamp(2rem,5vw,5rem);
}
.commission__title{
  grid-area:title;
  font:300 clamp(3rem,8vw,6.5rem)/1 var(--font-display);
  margin-bottom:1rem;
}
.commission__title .italic{color:var(--brass)}

.commission__col--text{grid-area:text;max-width:34rem}
.commission__col--text p{
  font-size:1rem;line-height:1.85;color:var(--ash-2);font-weight:300;
}
.commission__col--text p+p{margin-top:1.4em}
.commission__col--text .btn{margin-top:2.5rem}

.commission__col--steps{
  grid-area:steps;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  align-self:start;
  border-top:1px solid var(--line-inv);
}
.commission__col--steps li{
  padding:1.6rem 1.2rem;border-bottom:1px solid var(--line-inv);
  border-left:1px solid var(--line-inv);
  display:flex;flex-direction:column;gap:.45rem;
  transition:background .4s ease;
}
.commission__col--steps li:nth-child(2n){border-left:0}
.commission__col--steps li:hover{background:rgba(244,239,229,.03)}
.commission__col--steps b{
  font:400 11px/1 var(--font-italic);font-style:italic;letter-spacing:.2em;color:var(--brass);
}
.commission__col--steps h4{
  font:300 1.15rem/1.2 var(--font-display);color:var(--bone);
}
.commission__col--steps span{
  font:300 13px/1.55 var(--font-body);color:var(--ash-2);
}

@media (max-width: 880px){
  .commission__inner{grid-template-columns:1fr;grid-template-areas:"title" "text" "steps"}
}

/* ---------- 16. NUMBERS ---------- */
.numbers{
  padding:var(--pad-y) var(--pad-x);
  background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.numbers ul{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
}
.numbers li{
  background:var(--paper);
  padding:2.6rem 1.4rem;
  display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;
}
.numbers b{
  font:300 clamp(2.6rem,5vw,4.4rem)/1 var(--font-display);
  letter-spacing:-.02em;
}
.numbers span{
  font:300 13px/1.6 var(--font-italic);font-style:italic;color:var(--graphite);
  max-width:24ch;
}
@media (max-width: 880px){.numbers ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 540px){.numbers ul{grid-template-columns:1fr}}

/* ---------- 17. CONTACT ---------- */
.contact{
  padding:var(--pad-y) var(--pad-x);
  background:var(--bone);position:relative;
  text-align:center;
}
.contact .section-head{justify-content:center;max-width:42rem;margin-inline:auto}
.contact__title{
  font:300 clamp(3rem,8vw,6.5rem)/1.05 var(--font-display);
  letter-spacing:-.01em;max-width:14ch;margin:0 auto;
}
.contact__title .italic{color:var(--ember)}
.contact__lede{
  margin:2.4rem auto 0;max-width:34rem;
  font-size:1.05rem;line-height:1.8;color:var(--graphite);font-weight:300;
}
.contact__cta{
  margin-top:3rem;display:flex;align-items:center;gap:1.6rem;justify-content:center;flex-wrap:wrap;
}
.contact__or{font:300 12px/1 var(--font-italic);font-style:italic;letter-spacing:.3em;text-transform:uppercase;opacity:.55}
.contact__mail{
  font:300 1.1rem/1 var(--font-display);letter-spacing:.04em;
  border-bottom:1px solid currentColor;padding-bottom:6px;
  transition:opacity .3s ease;
}
.contact__mail:hover{opacity:.6}

.contact__cards{
  margin-top:clamp(4rem,8vw,6rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);text-align:right;
}
.contact__cards li{
  padding:2rem 1.4rem;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;
}
.contact__cards li:last-child{border-left:0}
.contact__cards h4{
  font:400 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.contact__cards p{font:300 .98rem/1.55 var(--font-display)}
.contact__cards a{border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width: 880px){.contact__cards{grid-template-columns:repeat(2,1fr)} .contact__cards li:nth-child(2n){border-left:0}}
@media (max-width: 540px){.contact__cards{grid-template-columns:1fr} .contact__cards li{border-left:0!important;border-bottom:1px solid var(--line)}}

/* ---------- 18. FOOTER ---------- */
.foot{
  background:var(--ink);color:var(--bone);
  padding:clamp(3rem,6vw,5rem) var(--pad-x) 2rem;
}
.foot__top{
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  padding-bottom:2.5rem;border-bottom:1px solid var(--line-inv);
}
.foot__brand{
  display:flex;flex-direction:column;gap:6px;
  font:300 1rem/1.3 var(--font-display);
}
.foot__brand em{
  font:300 12px/1 var(--font-italic);font-style:italic;
  letter-spacing:.4em;text-transform:uppercase;opacity:.55;
}
.foot__back{
  display:inline-flex;align-items:center;gap:.7em;
  font:400 11.5px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:opacity .3s ease;
}
.foot__back i{
  display:block;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;
  position:relative;
}
.foot__back i::before{
  content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;
  border-top:1px solid currentColor;border-left:1px solid currentColor;
  transform:rotate(45deg);left:0;right:0;top:0;bottom:2px;
}
.foot__bot{
  margin-top:2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:300 11px/1.6 var(--font-italic);font-style:italic;letter-spacing:.06em;
  color:var(--ash-2);
}

/* ---------- 19. ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  .ticker__track{animation:none}
  .grain{animation:none}
}

/* ---------- 20. SECTION TRANSITION FRAMES ---------- */
.works,.commission,.foot{
  position:relative;
}
.works::before,
.commission::before{
  content:"";position:absolute;top:-1px;left:var(--pad-x);right:var(--pad-x);
  height:1px;background:var(--line-inv);
}


/* =========================================================
   PART 2 — CINEMATIC ENHANCEMENTS, NEW SECTIONS, WORK PAGE
   ========================================================= */

/* ---------- 21. HERO — CINEMATIC LIGHT LAYERS ---------- */
.hero{
  overflow:hidden;
  isolation:isolate;
}
.hero__atmos{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.hero__atmos::before,
.hero__atmos::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);
  mix-blend-mode:multiply;opacity:.55;
}
/* warm spotlight */
.hero__atmos::before{
  top:-15%;right:-10%;
  width:720px;height:720px;
  background:radial-gradient(circle,#e3b27e 0%, transparent 60%);
  animation:lightDrift 18s var(--ease-glide) infinite alternate;
  mix-blend-mode:soft-light;opacity:.9;
}
/* cool counter-light */
.hero__atmos::after{
  bottom:-20%;left:-15%;
  width:640px;height:640px;
  background:radial-gradient(circle,#7d8ea0 0%, transparent 60%);
  animation:lightDrift 22s var(--ease-glide) -6s infinite alternate-reverse;
  opacity:.45;
}
@keyframes lightDrift{
  0%   {transform:translate(0,0) scale(1)}
  50%  {transform:translate(40px,30px) scale(1.06)}
  100% {transform:translate(-30px,20px) scale(.95)}
}
/* light beams */
.hero__beam{
  position:absolute;top:-10%;width:200vw;height:200vh;pointer-events:none;
  z-index:0;opacity:.18;
  background:
    repeating-linear-gradient(115deg,
      transparent 0,
      transparent 40px,
      rgba(229,196,140,.0) 40px,
      rgba(229,196,140,.18) 42px,
      transparent 80px,
      transparent 220px);
  mix-blend-mode:screen;
  animation:beamSlide 26s linear infinite;
}
@keyframes beamSlide{
  0%   {transform:translate(0,0)}
  100% {transform:translate(-220px,-220px)}
}

/* dust particles */
.hero__dust{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  overflow:hidden;
}
.hero__dust i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#f6e6c2 0%, transparent 70%);
  filter:blur(.4px);
  animation:dustFloat 16s linear infinite;
  opacity:0;
}
.hero__dust i:nth-child(1) {left: 8%;top:80%;animation-delay:0s;animation-duration:18s}
.hero__dust i:nth-child(2) {left:18%;top:90%;animation-delay:-3s;animation-duration:14s;width:2px;height:2px}
.hero__dust i:nth-child(3) {left:24%;top:75%;animation-delay:-7s;animation-duration:22s}
.hero__dust i:nth-child(4) {left:36%;top:95%;animation-delay:-1s;animation-duration:17s;width:4px;height:4px}
.hero__dust i:nth-child(5) {left:48%;top:80%;animation-delay:-11s;animation-duration:20s}
.hero__dust i:nth-child(6) {left:58%;top:88%;animation-delay:-5s;animation-duration:15s}
.hero__dust i:nth-child(7) {left:66%;top:92%;animation-delay:-9s;animation-duration:19s}
.hero__dust i:nth-child(8) {left:74%;top:78%;animation-delay:-2s;animation-duration:24s;width:2px;height:2px}
.hero__dust i:nth-child(9) {left:82%;top:96%;animation-delay:-13s;animation-duration:16s;width:4px;height:4px}
.hero__dust i:nth-child(10){left:92%;top:84%;animation-delay:-6s;animation-duration:21s}
@keyframes dustFloat{
  0%   {transform:translate(0,0);opacity:0}
  10%  {opacity:.7}
  60%  {opacity:.5}
  100% {transform:translate(-40px,-110vh);opacity:0}
}

/* ensure type/art sit above atmos */
.hero__type, .hero__art, .ticker, .hero__year, .hero__loc, .hero__scroll{position:relative;z-index:2}

/* enhanced glass piece — subtle floor reflection beneath */
.hero__art{position:relative}
.hero__art::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-44px;height:120px;
  background:radial-gradient(ellipse at top, rgba(15,14,12,.30) 0%, transparent 70%);
  filter:blur(8px);
  z-index:-1;pointer-events:none;
}

/* glass — cinematic glow */
.glass{
  box-shadow:
    0 80px 120px -50px rgba(15,14,12,.55),
    0 30px 60px -20px rgba(140,58,44,.18),
    0 1px 0 rgba(255,235,200,.05) inset;
}
.glass__light{
  background:
    radial-gradient(circle at 25% 18%, rgba(255,232,196,.32) 0%, transparent 38%),
    radial-gradient(circle at 70% 88%, rgba(255,180,120,.10) 0%, transparent 45%);
  animation:glassGlow 10s var(--ease) infinite alternate;
}
@keyframes glassGlow{
  0%  {opacity:.85}
  100%{opacity:1}
}

/* hero title — softer line behavior */
.hero__title .word{transition:color .4s ease}
.hero__title .word:hover{color:var(--ember)}

/* ---------- 22. ABOUT (deeper, personal) ---------- */
.about{
  padding:var(--pad-y) var(--pad-x);
  background:var(--paper);
  border-top:1px solid var(--line);
  position:relative;overflow:hidden;
}
.about__grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.about__media{
  position:relative;aspect-ratio:4/5;
  background:linear-gradient(160deg,#241a13 0%, #100a07 100%);
  overflow:hidden;
}
.about__media::before{
  content:"";position:absolute;inset:0;
  background:
    /* warm window light */
    radial-gradient(ellipse 80% 60% at 80% 25%, rgba(229,176,120,.55) 0%, transparent 60%),
    /* second light */
    radial-gradient(ellipse at 25% 80%, rgba(140,58,44,.18) 0%, transparent 50%),
    /* window pane shadows */
    linear-gradient(90deg, transparent 60%, rgba(8,7,6,.18) 60%, rgba(8,7,6,.18) 61%, transparent 61%, transparent 78%, rgba(8,7,6,.16) 78%, rgba(8,7,6,.16) 79%, transparent 79%);
  mix-blend-mode:screen;
}
.about__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(8,7,6,.6) 100%);
}
.about__media-cap{
  position:absolute;bottom:1.5rem;right:1.5rem;left:1.5rem;
  display:flex;align-items:center;gap:14px;color:var(--bone);
  font:300 11px/1.5 var(--font-italic);font-style:italic;letter-spacing:.06em;
  z-index:2;
}
.about__media-cap i{
  display:block;width:50px;height:1px;background:currentColor;flex:0 0 50px;
}

.about__text h2{
  font:300 clamp(2.6rem,6.5vw,5rem)/1.05 var(--font-display);
  letter-spacing:-.01em;margin-bottom:1.6rem;
}
.about__text h2 .italic{color:var(--ember)}
.about__text p{
  font-size:1.04rem;line-height:1.85;color:var(--graphite);
  max-width:34em;
}
.about__text p+p{margin-top:1.4em}
.about__text p em{font-family:var(--font-italic);font-style:italic;color:var(--ink);font-weight:400}

.about__pull{
  margin:2.5rem 0;
  font:300 italic 1.5rem/1.5 var(--font-italic);font-style:italic;
  color:var(--ink);
  border-right:2px solid var(--ember);padding-right:1.5rem;
  max-width:30em;
}

.about__sign{
  display:flex;align-items:center;gap:1.6rem;margin-top:3rem;
  padding-top:2rem;border-top:1px solid var(--line);
}
.about__sign svg{width:140px;height:auto;color:var(--ink)}
.about__sign-name{
  font:300 12px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.about__sign-name b{display:block;font:400 1rem/1 var(--font-display);color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:4px}

@media (max-width: 880px){
  .about__grid{grid-template-columns:1fr}
  .about__media{aspect-ratio:5/6;max-height:60vh}
}

/* ---------- 23. EXHIBITIONS (timeline list) ---------- */
.exhibitions{
  padding:var(--pad-y) var(--pad-x);
  background:var(--bone);border-top:1px solid var(--line);
}
.exhibitions__title{
  font:300 clamp(2.6rem,6.5vw,5rem)/1.05 var(--font-display);
  letter-spacing:-.01em;margin-bottom:clamp(2.5rem,5vw,4rem);max-width:14ch;
}
.exhibitions__title .italic{color:var(--ember)}

.exhibitions__list{
  border-top:1px solid var(--ink);
}
.exhibitions__item{
  display:grid;
  grid-template-columns:120px 1fr 1fr auto;
  gap:1.6rem;align-items:baseline;
  padding:1.8rem 0;
  border-bottom:1px solid var(--line);
  transition:padding-right .5s var(--ease), background .5s ease;
  position:relative;
}
.exhibitions__item:hover{padding-right:1rem;background:rgba(15,14,12,.02)}
.exhibitions__year{
  font:400 14px/1 var(--font-italic);font-style:italic;letter-spacing:.18em;
  color:var(--ash);
}
.exhibitions__name{
  font:300 1.5rem/1.2 var(--font-display);letter-spacing:-.005em;
}
.exhibitions__loc{
  font:300 .98rem/1.4 var(--font-body);color:var(--graphite);
}
.exhibitions__type{
  font:300 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--line);border-radius:60px;
  color:var(--ash);
  white-space:nowrap;
}

/* placeholder row — for upcoming */
.exhibitions__item--placeholder{
  background:linear-gradient(90deg, transparent, rgba(140,58,44,.04), transparent);
}
.exhibitions__item--placeholder .exhibitions__name{
  font-style:italic;color:var(--ash);font-family:var(--font-italic);
}
.exhibitions__item--placeholder .exhibitions__loc{
  font-style:italic;color:var(--ash);
}
.exhibitions__item--placeholder .exhibitions__type{
  border-color:var(--ember);color:var(--ember);
}
.exhibitions__item--placeholder::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--ember);transform:translateY(-50%);
  animation:pulse 2.4s var(--ease) infinite;
}

@media (max-width: 720px){
  .exhibitions__item{grid-template-columns:80px 1fr;gap:.6rem 1rem}
  .exhibitions__loc, .exhibitions__type{grid-column:2/-1}
  .exhibitions__type{justify-self:start;margin-top:.3rem}
}

/* ---------- 24. VOICES (testimonial cards + placeholder) ---------- */
.voices{
  padding:var(--pad-y) var(--pad-x);
  background:var(--ink);color:var(--bone);position:relative;
}
.voices__title{
  font:300 clamp(2.6rem,6.5vw,5rem)/1.05 var(--font-display);
  letter-spacing:-.01em;margin-bottom:clamp(2.5rem,5vw,4rem);
}
.voices__title .italic{color:var(--brass)}
.voices__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-inv);
}
.voices__card{
  background:var(--ink);padding:2.4rem 2rem;
  display:flex;flex-direction:column;gap:1.4rem;
  min-height:360px;position:relative;
  transition:background .5s ease, transform .5s var(--ease);
}
.voices__card:hover{background:#13110e}
.voices__mark{
  font:400 4rem/.6 var(--font-italic);font-style:italic;color:var(--brass);
  opacity:.55;
}
.voices__quote{
  font:300 1.1rem/1.7 var(--font-display);font-style:italic;color:var(--bone);
  flex:1;
}
.voices__author{
  display:flex;flex-direction:column;gap:6px;
  font:300 12px/1.4 var(--font-body);
  border-top:1px solid var(--line-inv);padding-top:1.2rem;
  color:var(--ash-2);
}
.voices__author b{
  font:400 .96rem/1 var(--font-display);color:var(--bone);font-style:normal;
}
.voices__author i{
  font:300 11px/1 var(--font-italic);font-style:italic;letter-spacing:.18em;
  color:var(--brass);text-transform:uppercase;
}

/* placeholder voice — elegant invitation */
.voices__card--placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:transparent;
  border:1px dashed var(--line-inv);
}
.voices__card--placeholder .voices__inner{
  display:flex;flex-direction:column;gap:14px;align-items:center;max-width:24ch;
}
.voices__card--placeholder em{
  font:300 italic 1rem/1.6 var(--font-italic);color:var(--ash-2);font-style:italic;
}
.voices__card--placeholder span{
  font:400 10px/1 var(--font-body);letter-spacing:.34em;text-transform:uppercase;color:var(--brass);
}
.voices__card--placeholder i{
  display:block;width:40px;height:1px;background:var(--brass);margin:8px auto;
}

@media (max-width: 880px){
  .voices__grid{grid-template-columns:1fr}
  .voices__card{min-height:auto}
}

/* ---------- 25. UPCOMING ---------- */
.upcoming{
  padding:var(--pad-y) var(--pad-x);
  background:var(--bone);position:relative;overflow:hidden;
  border-top:1px solid var(--line);
}
.upcoming__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
  position:relative;z-index:2;
}
.upcoming__text .eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font:300 11px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ember);margin-bottom:1.2rem;
}
.upcoming__text .eyebrow::before{
  content:"";width:24px;height:1px;background:currentColor;
}
.upcoming__title{
  font:300 clamp(3rem,8vw,6rem)/1 var(--font-display);
  letter-spacing:-.01em;margin-bottom:1.4rem;
}
.upcoming__title .italic{color:var(--ember)}
.upcoming__lede{
  font-size:1.04rem;line-height:1.85;color:var(--graphite);max-width:34em;
}

.upcoming__visual{
  position:relative;aspect-ratio:1/1;width:100%;max-width:480px;justify-self:center;
}
.upcoming__visual i{
  position:absolute;border-radius:50%;border:1px solid var(--line);
  inset:0;animation:rotate 60s linear infinite;
}
.upcoming__visual i:nth-child(1){inset:0;animation-duration:80s}
.upcoming__visual i:nth-child(2){inset:8%;animation-duration:60s;animation-direction:reverse}
.upcoming__visual i:nth-child(3){inset:18%;animation-duration:48s}
.upcoming__visual i:nth-child(4){inset:30%;animation-duration:36s;animation-direction:reverse;border-color:var(--ember)}
.upcoming__visual i:nth-child(5){inset:42%;animation-duration:24s;border-style:dashed}
.upcoming__visual b{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font:300 italic clamp(2rem,4vw,3rem)/1 var(--font-italic);font-style:italic;
  letter-spacing:.04em;color:var(--ink);text-align:center;
}
.upcoming__visual b small{display:block;font:400 11px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;color:var(--ember);margin-top:10px}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.upcoming__list{
  margin-top:2.4rem;border-top:1px solid var(--line);
}
.upcoming__list li{
  padding:1.2rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:50px 1fr auto;gap:1rem;align-items:baseline;
}
.upcoming__list li b{font:400 12px/1 var(--font-italic);font-style:italic;color:var(--ash);letter-spacing:.18em}
.upcoming__list li span{font:300 1rem/1.4 var(--font-display)}
.upcoming__list li em{font:300 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--ember);font-style:normal}

@media (max-width: 880px){
  .upcoming__inner{grid-template-columns:1fr}
  .upcoming__visual{max-width:340px}
}

/* ---------- 26. CONTACT — REBUILT ---------- */
.contact{text-align:right}
.contact .section-head{justify-content:flex-start;margin-inline:0;max-width:none}
.contact__title{margin:0;max-width:none}

.contact__split{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(3rem,5vw,5rem);align-items:start;
}

.contact__direct{
  padding:2.2rem 2rem;border:1px solid var(--ink);background:var(--paper);
  display:flex;flex-direction:column;gap:1.4rem;
}
.contact__direct h3{
  font:300 1.6rem/1.2 var(--font-display);
}
.contact__direct p{font-size:.96rem;line-height:1.7;color:var(--graphite)}
.contact__direct .btn--whatsapp{align-self:flex-start;margin-top:.4rem}
.contact__channels{
  display:flex;gap:1.6rem;flex-wrap:wrap;
  padding-top:1.2rem;border-top:1px solid var(--line);margin-top:.6rem;
}
.contact__channels a{
  display:inline-flex;align-items:center;gap:.55em;
  font:400 12px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid currentColor;
}
.contact__channels svg{width:16px;height:16px}

/* form */
.contact__form{
  display:flex;flex-direction:column;gap:1.6rem;
}
.contact__form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
}
.field{
  position:relative;display:flex;flex-direction:column;
}
.field > span{
  font:400 10.5px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ash);margin-bottom:.7rem;
}
.field input, .field textarea{
  font:300 1rem/1.5 var(--font-display);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:.6rem 0 .8rem;outline:none;
  transition:border-color .35s ease, padding .35s ease;
  width:100%;font-family:var(--font-body);font-weight:300;
}
.field input{font-size:1rem}
.field textarea{min-height:120px;resize:vertical;font-family:var(--font-body)}
.field input:focus, .field textarea:focus{border-color:var(--ember)}
.field input::placeholder, .field textarea::placeholder{color:var(--ash);font-style:italic;font-family:var(--font-italic)}

.field--full{grid-column:1/-1}

.contact__send{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  margin-top:.4rem;
}
.contact__legal{font:300 italic 11.5px/1.6 var(--font-italic);color:var(--ash);max-width:30em}

.contact__feedback{
  margin-top:1rem;padding:1rem 1.4rem;background:var(--cream);
  border-right:2px solid var(--ember);
  font:300 italic 14px/1.6 var(--font-italic);color:var(--ink);
  display:none;
}
.contact__feedback.is-visible{display:block;animation:fadeIn .6s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width: 880px){
  .contact__split{grid-template-columns:1fr}
  .contact__form-row{grid-template-columns:1fr}
}

/* ---------- 27. ELEGANT PLACEHOLDERS (universal) ---------- */
.placeholder{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    linear-gradient(180deg, rgba(15,14,12,.04), rgba(15,14,12,.08)),
    var(--cream);
  color:var(--ash);
}
.placeholder--soft{
  background:linear-gradient(180deg, #1a1814 0%, #100c08 100%);color:var(--ash-2);
}
.placeholder__inner{
  display:flex;flex-direction:column;gap:10px;align-items:center;
  font:300 italic 12.5px/1.5 var(--font-italic);font-style:italic;letter-spacing:.04em;
  padding:1rem;
}
.placeholder__rule{display:block;width:40px;height:1px;background:currentColor;opacity:.6}
.placeholder em{font-style:italic}

/* ---------- 28. FOOTER (luxury gallery feel) ---------- */
.foot{
  padding:0 var(--pad-x) 1.5rem;
}
.foot__pre{
  padding:clamp(3rem,6vw,5rem) 0 2.5rem;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.4rem;
  border-bottom:1px solid var(--line-inv);
}
.foot__col h4{
  font:400 11px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ash-2);margin-bottom:1.2rem;
}
.foot__col ul{display:flex;flex-direction:column;gap:.7rem}
.foot__col a{
  font:300 .98rem/1.4 var(--font-display);color:var(--bone);
  transition:color .3s ease;display:inline-block;
}
.foot__col a:hover{color:var(--brass)}

.foot__brand-block{
  display:flex;flex-direction:column;gap:1rem;
}
.foot__brand-block .foot__big{
  font:300 clamp(2.4rem,5vw,3.6rem)/1 var(--font-display);
  letter-spacing:-.01em;color:var(--bone);
}
.foot__brand-block .foot__big .italic{color:var(--brass)}
.foot__brand-block p{
  font:300 .96rem/1.7 var(--font-body);color:var(--ash-2);max-width:28em;
}

@media (max-width: 880px){
  .foot__pre{grid-template-columns:1fr 1fr;gap:2rem}
  .foot__brand-block{grid-column:1/-1}
}
@media (max-width: 540px){
  .foot__pre{grid-template-columns:1fr}
}

/* ---------- 29. WORK PAGE ---------- */
.work{
  padding:calc(var(--pad-y) - 1rem) var(--pad-x) var(--pad-y);
  background:var(--bone);
}

/* breadcrumb */
.work__crumb{
  display:flex;align-items:center;gap:1rem;
  margin-top:80px;margin-bottom:clamp(2rem,4vw,3.5rem);
  font:300 12px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);
}
.work__back{
  display:inline-flex;align-items:center;gap:.6em;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:opacity .3s ease;
}
.work__back i{
  display:inline-block;width:24px;height:1px;background:currentColor;position:relative;
}
.work__back i::after{
  content:"";position:absolute;left:-1px;top:-3px;width:7px;height:7px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.work__back:hover{opacity:.6}
.work__crumb-sep{opacity:.5}
.work__crumb-cat{color:var(--ink);font-family:var(--font-italic);font-style:italic;text-transform:none;letter-spacing:.05em;font-size:13px}

/* head */
.work__head{
  display:grid;grid-template-columns:200px 1fr;gap:2rem;
  margin-bottom:clamp(3rem,5vw,4.5rem);
  align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:clamp(2rem,4vw,3rem);
}
.work__head-meta{
  display:flex;flex-direction:column;gap:.8rem;
  padding-bottom:.5rem;
}
.work__num{
  font:400 14px/1 var(--font-italic);font-style:italic;letter-spacing:.2em;color:var(--ash);
}
.work__sub{
  font:400 11.5px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
}
.work__title{
  font:300 clamp(3rem,9vw,7rem)/1 var(--font-display);
  letter-spacing:-.01em;
}
.work__title span{display:inline-block}
.work__pull{
  grid-column:2;
  display:block;margin-top:1.4rem;
  font:300 italic clamp(1rem,1.4vw,1.2rem)/1.6 var(--font-italic);font-style:italic;
  color:var(--graphite);max-width:36em;
}
@media (max-width: 720px){
  .work__head{grid-template-columns:1fr}
  .work__pull{grid-column:1}
}

/* hero image */
.work__hero{
  position:relative;
  margin:0 calc(var(--pad-x) * -.4);
  margin-bottom:clamp(3rem,5vw,5rem);
}
.work__hero-frame{
  position:relative;aspect-ratio:16/10;width:100%;
  background:var(--ink);overflow:hidden;
}
.work__hero-art{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 8s ease;
}
.work__hero:hover .work__hero-art{transform:scale(1.03)}
.work__hero-art .glass__light{
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%, rgba(255,232,196,.22) 0%, transparent 50%);
  pointer-events:none;
}
.work__hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 38%, rgba(8,7,6,.55) 38%, rgba(8,7,6,.55) 39%, transparent 39%),
    linear-gradient(180deg,transparent 64%, rgba(8,7,6,.5) 64%, rgba(8,7,6,.5) 65%, transparent 65%),
    linear-gradient(90deg,transparent 32%, rgba(8,7,6,.6) 32%, rgba(8,7,6,.6) 33%, transparent 33%),
    linear-gradient(90deg,transparent 70%, rgba(8,7,6,.5) 70%, rgba(8,7,6,.5) 71%, transparent 71%);
  mix-blend-mode:multiply;
}
.work__hero-shadow{
  position:absolute;left:6%;right:6%;bottom:-30px;height:100px;pointer-events:none;
  background:radial-gradient(ellipse at top, rgba(15,14,12,.45) 0%, transparent 70%);
  filter:blur(12px);z-index:-1;
}
.work__hero figcaption{
  display:flex;align-items:center;gap:14px;margin-top:1.4rem;
  font:300 12px/1.5 var(--font-italic);font-style:italic;color:var(--graphite);
}
.work__hero figcaption i{display:block;width:60px;height:1px;background:currentColor;flex:0 0 60px}

/* body — story + meta */
.work__body{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(2rem,4vw,4rem) 0;
  border-top:1px solid var(--line);
}
.work__story p{
  font-size:1.05rem;line-height:1.9;color:var(--graphite);max-width:34em;
}
.work__story p+p{margin-top:1.4em}

.work__meta-list{
  display:flex;flex-direction:column;gap:0;margin-bottom:2rem;
}
.work__meta-list li{
  display:grid;grid-template-columns:130px 1fr;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.work__meta-list li:first-child{border-top:1px solid var(--line)}
.work__meta-list b{
  font:400 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.work__meta-list span{font:300 1rem/1.4 var(--font-display);color:var(--ink)}

.work__palette{
  margin-top:1.5rem;display:flex;align-items:center;gap:1rem;
}
.work__palette-label{
  font:400 11px/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.work__palette-list{display:flex;gap:8px}
.work__palette-list li{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);
  position:relative;
}
.work__palette-list li::after{
  content:attr(data-c);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font:300 9px/1 var(--font-mono);color:var(--ash);white-space:nowrap;
  opacity:0;transition:opacity .25s ease;
}
.work__palette-list li:hover::after{opacity:1}

@media (max-width: 880px){.work__body{grid-template-columns:1fr}}

/* details gallery */
.work__details{padding-top:clamp(3rem,5vw,5rem)}
.work__shots{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,3vw,2.4rem);
}
.work__shot{display:flex;flex-direction:column;gap:.8rem}
.work__shot:nth-child(1){grid-column:1 / span 7}
.work__shot:nth-child(2){grid-column:9 / span 4;margin-top:3rem}
.work__shot:nth-child(3){grid-column:1 / span 5;margin-top:1rem}
.work__shot:nth-child(4){grid-column:7 / span 6;margin-top:-2rem}

.work__shot-img{
  position:relative;aspect-ratio:4/5;background:#0a0907;overflow:hidden;
  background-size:cover;background-position:center;
  transition:transform 1.2s var(--ease-glide), filter .6s ease;
}
.work__shot:nth-child(2) .work__shot-img{aspect-ratio:3/4}
.work__shot:nth-child(3) .work__shot-img{aspect-ratio:1/1}
.work__shot:nth-child(4) .work__shot-img{aspect-ratio:5/4}
.work__shot:hover .work__shot-img{transform:scale(1.02);filter:saturate(1.08)}
/* small lead overlay */
.work__shot-img:not(.placeholder)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 45%, rgba(8,7,6,.4) 45%, rgba(8,7,6,.4) 46%, transparent 46%),
    linear-gradient(90deg,transparent 50%, rgba(8,7,6,.4) 50%, rgba(8,7,6,.4) 51%, transparent 51%);
  mix-blend-mode:multiply;
}
.work__shot figcaption{
  font:300 italic 12px/1.5 var(--font-italic);color:var(--graphite);
}

@media (max-width: 720px){
  .work__shots > *{grid-column:1/-1!important;margin-top:0!important}
}

/* CTA */
.work__cta{
  margin-top:clamp(4rem,8vw,7rem);
  padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);
  background:var(--ink);color:var(--bone);
  text-align:center;
  position:relative;overflow:hidden;
}
.work__cta::before{
  content:"";position:absolute;top:-50%;left:-20%;
  width:60%;height:200%;
  background:radial-gradient(ellipse, rgba(182,149,105,.2) 0%, transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}
.work__cta-eyebrow{
  display:inline-block;
  font:400 11px/1 var(--font-body);letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1.4rem;
}
.work__cta-title{
  font:300 clamp(2rem,5vw,3.4rem)/1.2 var(--font-display);max-width:18ch;margin:0 auto;
  position:relative;
}
.work__cta-title em{font-family:var(--font-italic);font-style:italic;color:var(--brass)}
.work__cta-lede{
  margin:1.6rem auto 0;max-width:32rem;
  font-size:1rem;line-height:1.8;color:var(--ash-2);font-weight:300;
  position:relative;
}
.work__cta-btn{margin-top:2.4rem;position:relative}
.work__cta-or{
  display:block;margin:1.4rem 0 .6rem;
  font:300 italic 12px/1 var(--font-italic);font-style:italic;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ash-2);
}
.work__cta-mail{
  font:300 1rem/1 var(--font-display);color:var(--bone);
  border-bottom:1px solid currentColor;padding-bottom:4px;
  display:inline-block;
}

/* other works */
.work__other{
  margin-top:clamp(4rem,8vw,7rem);
}
.work__other-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,2.4rem);
}
.work__other-card{
  display:flex;flex-direction:column;gap:1rem;
  transition:transform .6s var(--ease-glide);
}
.work__other-card:hover{transform:translateY(-4px)}
.work__other-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0907;
  background-size:cover;background-position:center;
}
.work__other-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 45%, rgba(8,7,6,.4) 45%, rgba(8,7,6,.4) 46%, transparent 46%),
    linear-gradient(90deg,transparent 50%, rgba(8,7,6,.4) 50%, rgba(8,7,6,.4) 51%, transparent 51%);
  mix-blend-mode:multiply;
}
.work__other-name{font:300 1.3rem/1.2 var(--font-display)}
.work__other-meta{
  font:300 italic 12px/1.4 var(--font-italic);color:var(--ash);
}
.work__other-num{font:400 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--ash)}

@media (max-width: 880px){.work__other-row{grid-template-columns:1fr 1fr}}
@media (max-width: 540px){.work__other-row{grid-template-columns:1fr}}

/* ---------- 30. NAV ON WORK PAGE ---------- */
body.is-work .nav{background:rgba(244,239,229,.78);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}


/* =========================================================
   PART 3 — SLOW LUXURY UX
   parallax · reflections · depth · transitions
   ========================================================= */

/* ---------- 31. PAGE TRANSITIONS ---------- */
.page-fade{
  position:fixed;inset:0;z-index:199;
  background:var(--bone);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .9s cubic-bezier(.7,0,.2,1), visibility .9s;
}
body.is-leaving .page-fade{opacity:1;visibility:visible}
body.is-leaving main,
body.is-leaving .nav,
body.is-leaving .dots,
body.is-leaving .foot{
  filter:blur(3px);
  transform:scale(.992);
  transition:filter .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.7,0,.2,1), opacity .7s;
  opacity:.6;
}

/* incoming (after navigation) — skip intro, smooth fade-in */
html.is-incoming .intro{display:none !important}
html.is-incoming body{opacity:1}
html.is-incoming main{
  animation:pageIn 1.4s cubic-bezier(.16,1,.3,1) .15s both;
  will-change:transform,opacity,filter;
}
html.is-incoming .nav, html.is-incoming .dots{
  animation:fadeIn 1.2s cubic-bezier(.16,1,.3,1) .25s both;
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(28px) scale(.992);filter:blur(8px)}
  to  {opacity:1;transform:none;filter:none}
}
@keyframes fadeIn{
  from{opacity:0}
  to  {opacity:1}
}

/* ---------- 32. REVEAL VARIANTS ---------- */
.reveal{transition-duration:1.4s}

.reveal--mask{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.7s cubic-bezier(.7,0,.2,1), opacity 1.4s;
  transform:none;
}
.reveal--mask.is-in{opacity:1;clip-path:inset(0 0 0 0)}

.reveal--blur{
  opacity:0;
  filter:blur(14px);
  transform:translateY(20px);
  transition:filter 1.7s cubic-bezier(.16,1,.3,1), opacity 1.5s, transform 1.5s cubic-bezier(.16,1,.3,1);
}
.reveal--blur.is-in{opacity:1;filter:none;transform:none}

/* slow letter spacing on reveal for editorial titles */
.reveal--track{letter-spacing:.05em;opacity:0;transform:translateY(18px);transition:letter-spacing 1.6s var(--ease-glide), opacity 1.4s, transform 1.4s var(--ease-glide)}
.reveal--track.is-in{letter-spacing:-.01em;opacity:1;transform:none}

/* ---------- 33. SECTION-HEAD ANIMATED RULE ---------- */
.section-head__rule{
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform 1.6s cubic-bezier(.7,0,.2,1) .25s;
}
.section-head.is-on .section-head__rule{transform:scaleX(1)}

/* ---------- 34. HERO — MOUSE-FOLLOW LIGHT ---------- */
.hero__cursor-light{
  position:absolute;top:0;left:0;
  width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle, rgba(229,196,140,.18) 0%, rgba(229,196,140,0) 60%);
  filter:blur(50px);
  transform:translate(-50%,-50%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:1;
  will-change:transform;
}
.hero.is-cursor-in .hero__cursor-light{opacity:1}

/* hero layers compose mouse offset (--mse-x/y) + scroll offset (--scrl-y) */
.hero__atmos, .hero__beam, .hero__dust, .hero__art, .hero__type{
  --mse-x:0px; --mse-y:0px; --scrl-y:0px;
  translate: var(--mse-x) calc(var(--mse-y) + var(--scrl-y));
  will-change:translate;
}

/* ---------- 35. GLASS / IMAGE SHEEN ---------- */
.piece__media,
.work__hero-frame,
.about__media,
.work__shot:not(:last-child) .work__shot-img{
  position:relative;
}
/* a separate sheen layer on top — slow sweep */
.piece__media::before,
.work__hero-frame::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,247,225,.0) 38%,
    rgba(255,247,225,.18) 50%,
    rgba(255,247,225,.0) 62%,
    transparent 70%);
  transform:translateX(-110%);
  transition:transform 1.8s cubic-bezier(.7,0,.2,1);
  pointer-events:none;
  z-index:7;
  mix-blend-mode:screen;
  /* in RTL we still want the visual sweep to read right-to-left, matching reading direction */
}
.piece:hover .piece__media::before,
.work__hero:hover .work__hero-frame::before{
  transform:translateX(110%);
}

/* about__media — soft sheen on hover (whole studio scene picks up light) */
.about__media{transition:filter 1.4s cubic-bezier(.16,1,.3,1)}
.about__media:hover{filter:brightness(1.06) saturate(1.05)}

/* ---------- 36. HOVER FOCUS — DIM OTHER PIECES ---------- */
.piece__art, .piece__info{
  transition-property:transform, filter, opacity;
  transition-duration:1.2s;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}
.works__grid:hover .piece:not(:hover) .piece__art{
  filter:saturate(.5) brightness(.6);
}
.works__grid:hover .piece:not(:hover) .piece__info{
  opacity:.4;
}

/* same for cats */
.cats__list:hover .cats__item:not(:hover){
  opacity:.55;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), background .5s, color .5s;
}
.cats__item{transition:opacity 1.1s cubic-bezier(.16,1,.3,1), background .6s var(--ease), color .6s var(--ease)}

/* ---------- 37. 3D TILT — PIECES, OTHER CARDS ---------- */
.piece__media,
.work__other-img,
.about__media{
  transform-style:preserve-3d;
  will-change:transform;
}
.piece__media{
  transition:transform 1.6s cubic-bezier(.16,1,.3,1), box-shadow 1.4s ease;
}
.work__other-img{
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}

/* depth shadows on hover */
.piece:hover .piece__media{
  box-shadow:0 60px 100px -40px rgba(15,14,12,.55), 0 30px 50px -20px rgba(15,14,12,.3);
}
.work__other-card:hover .work__other-img{
  box-shadow:0 40px 70px -25px rgba(15,14,12,.5);
}

/* ---------- 38. MAGNETIC BUTTONS ---------- */
.btn, .nav__cta, .hero__link, .foot__back{
  --mag-x:0px;--mag-y:0px;
  transform:translate(var(--mag-x), var(--mag-y));
  transition:background .6s var(--ease-glide),
             color .6s var(--ease-glide),
             border-color .6s var(--ease-glide),
             transform .9s cubic-bezier(.16,1,.3,1);
}
/* preserve press feedback while keeping magnetic translate */
.btn:active, .nav__cta:active, .hero__link:active, .foot__back:active{
  transform:translate(var(--mag-x), var(--mag-y)) scale(.985);
  transition-duration:.18s;
}

/* ---------- 39. PRESS / CLICK FEEDBACK ---------- */
.piece, .cats__item, .work__other-card, .voices__card, .exhibitions__item{
  transition:transform .9s cubic-bezier(.16,1,.3,1), background .6s, color .6s, padding .5s;
}
.piece:active{transform:scale(.992)}
.cats__item:active{transform:scale(.99)}
.work__other-card:active{transform:scale(.99)}
.voices__card:active{transform:scale(.995)}

/* nav links — slow underline */
.nav__link::after{transition:width .9s cubic-bezier(.16,1,.3,1)}
.nav__link{transition:opacity .6s ease}

/* ---------- 40. PIECE HOVER REFINEMENTS ---------- */
.piece__media{
  background:linear-gradient(180deg,#0a0907 0%, #050403 100%);
}
.piece__art{transition:transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.2s cubic-bezier(.16,1,.3,1), opacity 1.2s}
.piece:hover .piece__art{transform:scale(1.06)}
.piece__hover{transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.piece__hover i{
  transform:translateY(8px);opacity:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .15s, opacity 1s ease .15s, background .4s ease, color .4s ease;
}
.piece:hover .piece__hover i{transform:none;opacity:1}
.piece__hover i:hover{background:var(--bone);color:var(--ink)}

/* ---------- 41. HERO ART — SLOWER SHARDS ---------- */
.glass__shard{
  transition:transform 2s cubic-bezier(.16,1,.3,1), filter 1.4s ease;
  will-change:transform;
}
.hero__art:hover .glass__shard--a{transform:translate3d(-8px,4px,0)}
.hero__art:hover .glass__shard--b{transform:translate3d(-3px,-3px,0)}
.hero__art:hover .glass__shard--c{transform:translate3d(6px,-5px,0)}
.hero__art:hover .glass__shard--d{transform:translate3d(4px,3px,0)}
.hero__art:hover .glass__shard--e{transform:translate3d(-4px,6px,0)}
.hero__art:hover .glass__shard--f{transform:translate3d(2px,-3px,0)}
.hero__art:hover .glass__shard--g{transform:translate3d(-2px,2px,0)}

/* ---------- 42. UPCOMING — BREATHING TYPE ---------- */
.upcoming__visual b{
  animation:breathing 7s var(--ease) infinite alternate;
  will-change:letter-spacing;
}
@keyframes breathing{
  from{letter-spacing:.03em;opacity:.85}
  to  {letter-spacing:.07em;opacity:1}
}

/* ---------- 43. VOICES — CARD HOVER ---------- */
.voices__card{transition:background .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.voices__card:hover{background:#13110e;transform:translateY(-3px)}
.voices__quote{transition:color .8s ease}
.voices__mark{transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1)}
.voices__card:hover .voices__mark{opacity:.8;transform:translateY(-2px)}

/* ---------- 44. EXHIBITIONS — SLOW ROW HOVER ---------- */
.exhibitions__item{transition:padding-right 1s cubic-bezier(.16,1,.3,1), background .9s ease}
.exhibitions__item:hover .exhibitions__name{letter-spacing:.005em}
.exhibitions__name{transition:letter-spacing 1.1s cubic-bezier(.16,1,.3,1)}
.exhibitions__type{transition:background .6s ease, color .6s ease, border-color .6s ease}
.exhibitions__item:hover .exhibitions__type{border-color:var(--ink);color:var(--ink)}

/* ---------- 45. FOOTER LINKS — SLOW UNDERLINE ---------- */
.foot__col a{position:relative;display:inline-block}
.foot__col a::after{
  content:"";position:absolute;right:0;left:auto;bottom:-2px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.foot__col a:hover{color:var(--brass)}
.foot__col a:hover::after{transform:scaleX(1)}

/* ---------- 46. CURSOR — SLOWER ---------- */
.cursor__dot{transition:transform .35s var(--ease-glide), background .35s ease}
.cursor__ring{
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             width .55s cubic-bezier(.16,1,.3,1),
             height .55s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             opacity .35s ease,
             background .55s ease;
}
.cursor.is-view::after{transition:opacity .4s ease}

/* ---------- 47. DOTS — SLOWER ACTIVE ---------- */
.dots__item span{transition:background 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1)}
.dots__item b{transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}

/* ---------- 48. FORM — SLOWER FOCUS ---------- */
.field input, .field textarea{
  transition:border-color .8s cubic-bezier(.16,1,.3,1), padding .5s ease, background .5s ease;
}
.field:focus-within > span{color:var(--ink)}
.field > span{transition:color .5s ease}

/* ---------- 49. SCROLL CUE — SLOWER ---------- */
.hero__scroll i::after{animation-duration:3.6s}

/* ---------- 50. WORK SHOTS — HOVER REFINEMENT ---------- */
.work__shot-img{
  transition:transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.4s ease, box-shadow 1.4s ease;
}
.work__shot:hover .work__shot-img:not(.placeholder){
  transform:scale(1.025);
  filter:saturate(1.12) brightness(1.04);
  box-shadow:0 50px 80px -30px rgba(15,14,12,.5);
}

/* ---------- 51. CARDS — DEPTH ON HOVER ---------- */
.cats__item, .commission__col--steps li{
  transition:background .8s cubic-bezier(.16,1,.3,1), color .8s, opacity 1.1s, transform .9s cubic-bezier(.16,1,.3,1);
}

/* ---------- 52. TICKER — SLOWER PURE ---------- */
.ticker__track{animation-duration:60s}

/* ---------- 53. REDUCED MOTION — RESPECT ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__cursor-light, .hero__atmos, .hero__beam, .hero__dust,
  .upcoming__visual i, .upcoming__visual b{animation:none !important}
  .reveal, .reveal--mask, .reveal--blur, .reveal--track{
    opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;
  }
  .page-fade{display:none}
  html.is-incoming main{animation:none}
  body.is-leaving main, body.is-leaving .nav, body.is-leaving .dots, body.is-leaving .foot{
    filter:none;transform:none;opacity:1;
  }
}


/* =========================================================
   PART 4 — DARK MODE
   gallery editorial · night palette · amber glow · depth
   ========================================================= */

@media (prefers-color-scheme: dark) {

  /* ── BASE ── */
  html { color-scheme: dark; }

  body {
    background: #0D0C0A;
    color: #F0EBE0;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: #B69569; color: #0D0C0A; }

  /* ── GRAIN — overlay works on dark bg ── */
  .grain {
    mix-blend-mode: overlay;
    opacity: .045;
  }

  /* ── CURSOR ── */
  .cursor__dot  { background: #F0EBE0; }
  .cursor__ring { border-color: rgba(240,235,224,.6); }
  .cursor.is-view::after { color: #F0EBE0; }

  /* ── PAGE FADE ── */
  .page-fade { background: #0D0C0A; }

  /* ── INTRO ── */
  /* already dark (#0F0E0C) — no change needed */

  /* ── NAV ── */
  .nav {
    color: #F0EBE0;
  }
  .nav.is-stuck {
    background: rgba(10,9,7,.90);
    backdrop-filter: saturate(130%) blur(16px);
    -webkit-backdrop-filter: saturate(130%) blur(16px);
    border-bottom-color: rgba(240,235,224,.09);
  }
  .nav.is-dark.is-stuck {
    background: rgba(8,7,5,.94);
    border-bottom-color: rgba(240,235,224,.09);
  }
  .nav__cta:hover { background: #F0EBE0; color: #0D0C0A; }
  .nav.is-dark .nav__cta:hover { background: #F0EBE0; color: #0D0C0A; }

  /* ── SIDE DOTS ── */
  /* inherit color: #F0EBE0 from body — looks correct */

  /* ── SECTION HEAD ── */
  .section-head { color: #F0EBE0; }
  .section-head--invert { color: #F0EBE0; }
  .section-head__rule { opacity: .22; }
  .section-head.is-on .section-head__rule {
    box-shadow: 0 0 10px rgba(229,196,140,.12);
  }

  /* ────────────── HERO ────────────── */
  .hero {
    background: #0D0C0A;
  }
  /* atmos blobs — screen works on dark bg */
  .hero__atmos::before {
    mix-blend-mode: screen;
    opacity: .75;
  }
  .hero__atmos::after {
    mix-blend-mode: screen;
    opacity: .45;
  }
  .hero__beam   { opacity: .18; }
  .hero__lede   { color: #9E9488; }
  .hero__sep    { background: rgba(240,235,224,.12); }

  /* very faint warm aura on the main title */
  .hero__title { text-shadow: 0 0 80px rgba(229,196,140,.07); }
  .hero__title .amp {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.55);
  }
  .hero__eyebrow .dot {
    background: #C85040;
    box-shadow: 0 0 14px 4px rgba(200,80,64,.45);
  }

  /* enhanced glass reflection on dark bg */
  .glass {
    box-shadow:
      0 80px 130px -50px rgba(6,5,4,.95),
      0 30px 60px -20px rgba(182,149,105,.32),
      0 0 70px -15px rgba(182,149,105,.08) inset,
      0 1px 0 rgba(255,235,200,.08) inset;
  }
  .glass__light {
    background:
      radial-gradient(circle at 25% 18%, rgba(255,232,196,.42) 0%, transparent 44%),
      radial-gradient(circle at 70% 88%, rgba(255,180,120,.18) 0%, transparent 50%);
  }
  .hero__art::after {
    background: radial-gradient(ellipse at top, rgba(182,149,105,.28) 0%, transparent 70%);
  }
  .hero__cursor-light {
    background: radial-gradient(circle, rgba(229,196,140,.22) 0%, rgba(229,196,140,0) 60%);
  }

  /* ticker borders */
  .ticker {
    border-top-color:    rgba(240,235,224,.09);
    border-bottom-color: rgba(240,235,224,.09);
  }

  /* ────────────── MANIFEST ────────────── */
  .manifest {
    background: #111009;
    border-top-color: rgba(240,235,224,.08);
  }
  .manifest__title .italic {
    color: #C85040;
    text-shadow: 0 0 32px rgba(200,80,64,.28);
  }
  .manifest__body   { color: #B8AFA2; }
  .manifest__credits {
    border-top-color: rgba(240,235,224,.1);
  }
  .manifest__credits b    { color: #6B655C; }
  .manifest__credits span { color: #F0EBE0; font-family: var(--font-display); }
  .manifest__signature {
    border-top-color: rgba(240,235,224,.1);
  }
  .manifest__signature svg  { color: #F0EBE0; }
  .manifest__signature span { color: #6B655C; }

  /* ────────────── WORKS ────────────── */
  /* already dark — refine subtleties */
  .works { background: #0A0907; }
  .works::before    { background: rgba(240,235,224,.07); }
  .works__lede      { color: #6B655C; }
  .works__note      { color: #6B655C; }
  .works__more      { border-top-color: rgba(240,235,224,.10); }
  .works__title .italic {
    color: #C8AC78;
    text-shadow: 0 0 28px rgba(200,172,120,.28);
  }

  /* piece glow on hover */
  .piece:hover .piece__media {
    box-shadow:
      0 60px 110px -40px rgba(6,5,4,.95),
      0 30px 55px -20px rgba(6,5,4,.7),
      0 0 55px -12px rgba(182,149,105,.16);
  }

  /* ────────────── CRAFT ────────────── */
  .craft {
    background: #0D0C0A;
    border-top-color: rgba(240,235,224,.08);
  }
  .craft__title .italic {
    color: #C85040;
    text-shadow: 0 0 32px rgba(200,80,64,.28);
  }
  .craft__steps     { border-top-color: rgba(240,235,224,.12); }
  .craft__step {
    border-bottom-color: rgba(240,235,224,.09);
    border-left-color:   rgba(240,235,224,.09);
  }
  .craft__step:nth-child(3n)       { border-left: 0; }
  .craft__step:hover               { background: #131108; }
  .craft__step-num                 { color: #6B655C; }
  .craft__step h3                  { color: #F0EBE0; }
  .craft__step p                   { color: #9E9488; }
  .craft__quote                    { color: #9E9488; }
  .craft__quote em                 { color: #F0EBE0; }
  .craft__quote-mark {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.50);
  }

  @media (max-width: 980px) {
    .craft__step:nth-child(3n)    { border-left: 1px solid rgba(240,235,224,.09); }
    .craft__step:nth-child(2n)    { border-left: 0; }
  }
  @media (max-width: 600px) {
    .craft__step                  { border-left: 0 !important; }
  }

  /* ────────────── CATEGORIES ────────────── */
  .cats                           { background: #0D0C0A; }
  .cats__list                     { border-top-color: rgba(240,235,224,.14); }
  .cats__item {
    border-left-color: rgba(240,235,224,.09);
    color: #F0EBE0;
  }
  .cats__num                      { color: #6B655C; }
  .cats__item p                   { color: #9E9488; }
  .cats__item:hover               { background: #0A0907; color: #F0EBE0; }
  .cats__item:hover p             { color: #6B655C; }
  .cats__item:hover .cats__arrow  { background: #F0EBE0; color: #0A0907; }

  /* ────────────── ABOUT ────────────── */
  .about {
    background: #111009;
    border-top-color: rgba(240,235,224,.08);
  }
  .about__media {
    background: linear-gradient(160deg, #1c1510 0%, #100d09 100%);
  }
  .about__text h2             { color: #F0EBE0; }
  .about__text h2 .italic {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.22);
  }
  .about__text p              { color: #9E9488; }
  .about__text p em           { color: #F0EBE0; }
  .about__pull {
    color: #F0EBE0;
    border-right-color: #C85040;
  }
  .about__sign                { border-top-color: rgba(240,235,224,.1); }
  .about__sign svg            { color: #F0EBE0; }
  .about__sign-name           { color: #6B655C; }
  .about__sign-name b         { color: #F0EBE0; }
  .about__media-cap           { color: #A09488; }

  /* ────────────── EXHIBITIONS ────────────── */
  .exhibitions {
    background: #0D0C0A;
    border-top-color: rgba(240,235,224,.08);
  }
  .exhibitions__title .italic {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.22);
  }
  .exhibitions__list          { border-top-color: rgba(240,235,224,.14); }
  .exhibitions__item          { border-bottom-color: rgba(240,235,224,.08); }
  .exhibitions__item:hover    { background: rgba(240,235,224,.018); padding-right: 1rem; }
  .exhibitions__year          { color: #6B655C; }
  .exhibitions__name          { color: #F0EBE0; }
  .exhibitions__loc           { color: #9E9488; }
  .exhibitions__type {
    border-color: rgba(240,235,224,.13);
    color: #6B655C;
  }
  .exhibitions__item:hover .exhibitions__type {
    border-color: rgba(240,235,224,.36);
    color: #F0EBE0;
  }

  /* ────────────── VOICES ────────────── */
  .voices                          { background: #0A0907; }
  .voices__title .italic {
    color: #C8AC78;
    text-shadow: 0 0 28px rgba(200,172,120,.28);
  }
  .voices__card:hover              { background: #0F0D0B; }
  .voices__card--placeholder       { border-color: rgba(240,235,224,.11); }
  .voices__quote                   { color: #D0C8BC; }

  /* ────────────── UPCOMING ────────────── */
  .upcoming {
    background: #111009;
    border-top-color: rgba(240,235,224,.08);
  }
  .upcoming__title .italic {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.22);
  }
  .upcoming__lede               { color: #9E9488; }
  .upcoming__visual i           { border-color: rgba(240,235,224,.09); }
  .upcoming__visual i:nth-child(4) {
    border-color: #C85040;
    box-shadow: 0 0 22px rgba(200,80,64,.22);
  }
  .upcoming__visual i:nth-child(5) { border-color: rgba(240,235,224,.09); }
  .upcoming__visual b           { color: #F0EBE0; }
  .upcoming__list               { border-top-color: rgba(240,235,224,.1); }
  .upcoming__list li            { border-bottom-color: rgba(240,235,224,.08); }
  .upcoming__list li b          { color: #6B655C; }
  .upcoming__list li span       { color: #F0EBE0; }

  /* ────────────── COMMISSION ────────────── */
  .commission                   { background: #0A0907; }
  .commission::before           { background: rgba(240,235,224,.07); }
  .commission__title .italic {
    color: #C8AC78;
    text-shadow: 0 0 28px rgba(200,172,120,.28);
  }
  .commission__col--text p          { color: #6B655C; }
  .commission__col--steps           { border-top-color: rgba(240,235,224,.1); }
  .commission__col--steps li {
    border-bottom-color: rgba(240,235,224,.08);
    border-left-color:   rgba(240,235,224,.08);
  }
  .commission__col--steps li:hover  { background: rgba(240,235,224,.02); }

  /* ────────────── NUMBERS ────────────── */
  .numbers {
    background: #0A0907;
    border-top-color:    rgba(240,235,224,.08);
    border-bottom-color: rgba(240,235,224,.08);
  }
  .numbers ul   { background: rgba(240,235,224,.06); }
  .numbers li   { background: #0A0907; }
  .numbers span { color: #9E9488; }

  /* ────────────── CONTACT ────────────── */
  .contact       { background: #0D0C0A; }
  .contact__title .serif.italic,
  .contact__title .italic {
    color: #C85040;
    text-shadow: 0 0 28px rgba(200,80,64,.22);
  }
  .contact__direct {
    background: #141210;
    border-color: rgba(240,235,224,.14);
  }
  .contact__direct h3             { color: #F0EBE0; }
  .contact__direct p              { color: #9E9488; }
  .contact__channels              { border-top-color: rgba(240,235,224,.1); }
  .contact__channels a            { color: #F0EBE0; }

  /* form */
  .field > span                   { color: #6B655C; }
  .field:focus-within > span      { color: #F0EBE0; }
  .field input,
  .field textarea {
    color: #F0EBE0;
    border-bottom-color: rgba(240,235,224,.2);
  }
  .field input::placeholder,
  .field textarea::placeholder    { color: #6B655C; font-style: italic; }
  .field input:focus,
  .field textarea:focus           { border-bottom-color: #C85040; }

  .contact__legal                 { color: #6B655C; }
  .contact__feedback {
    background: #1c1610;
    border-right-color: #C85040;
    color: #F0EBE0;
  }
  .contact__cards                 { border-top-color: rgba(240,235,224,.1); }
  .contact__cards li              { border-left-color: rgba(240,235,224,.1); }
  .contact__cards h4              { color: #6B655C; }
  .contact__cards p               { color: #F0EBE0; }
  .contact__cards a               { color: #C8AC78; }

  /* ────────────── FOOTER ────────────── */
  .foot         { background: #080706; }
  .foot__pre    { border-bottom-color: rgba(240,235,224,.08); }
  .foot__top    { border-bottom-color: rgba(240,235,224,.08); }
  .foot__bot    { color: #504A44; }
  .foot__brand-block .foot__big   { color: #F0EBE0; }
  .foot__brand-block .foot__big .italic {
    color: #C8AC78;
    text-shadow: 0 0 20px rgba(200,172,120,.22);
  }
  .foot__brand-block p            { color: #504A44; }
  .foot__col h4                   { color: #504A44; }
  .foot__col a                    { color: #908880; }
  .foot__col a:hover              { color: #C8AC78; }
  .foot__col a::after             { background: #C8AC78; }

  /* ────────────── BUTTONS ────────────── */
  .btn--ghost {
    color: #F0EBE0;
    border-color: rgba(240,235,224,.28);
  }
  .btn--ghost::before             { background: #F0EBE0; }
  .btn--ghost:hover               { color: #0D0C0A; }

  .btn--solid {
    background: #F0EBE0;
    color: #0D0C0A;
    border-color: #F0EBE0;
  }
  .btn--solid::before             { background: #0D0C0A; }
  .btn--solid:hover               { color: #F0EBE0; }

  .btn--line                      { color: #F0EBE0; }
  .btn--line:hover                { color: #0D0C0A; }

  .btn--whatsapp {
    background: #1a1815;
    color: #F0EBE0;
    border-color: rgba(240,235,224,.18);
  }
  .btn--whatsapp::before          { background: #B69569; }
  .btn--whatsapp:hover {
    color: #0D0C0A;
    border-color: #B69569;
  }

  /* subtle warm glow on interactive elements */
  .btn:hover,
  .nav__cta:hover {
    box-shadow: 0 8px 44px rgba(182,149,105,.14);
  }
  .nav__brand-mark {
    box-shadow: 0 0 18px rgba(240,235,224,.05);
  }

  /* ────────────── WORK PAGE ────────────── */
  .work                           { background: #0D0C0A; color: #F0EBE0; }
  body.is-work .nav {
    background: rgba(13,12,10,.90);
    backdrop-filter: saturate(130%) blur(14px);
    -webkit-backdrop-filter: saturate(130%) blur(14px);
    border-bottom-color: rgba(240,235,224,.10);
  }
  .work__crumb                    { color: #6B655C; }
  .work__crumb-cat                { color: #F0EBE0; }
  .work__crumb-sep                { color: #504A44; }
  .work__back {
    color: #6B655C;
    border-bottom-color: rgba(107,101,92,.5);
  }
  .work__head                     { border-bottom-color: rgba(240,235,224,.1); }
  .work__num                      { color: #6B655C; }
  .work__sub                      { color: #F0EBE0; }
  .work__pull                     { color: #9E9488; }
  .work__hero-frame               { background: #080706; }
  .work__hero figcaption          { color: #6B655C; }
  .work__body                     { border-top-color: rgba(240,235,224,.1); }
  .work__story p                  { color: #9E9488; }
  .work__meta-list li             { border-bottom-color: rgba(240,235,224,.1); }
  .work__meta-list li:first-child { border-top-color: rgba(240,235,224,.1); }
  .work__meta-list b              { color: #6B655C; }
  .work__meta-list span           { color: #F0EBE0; }
  .work__palette-label            { color: #6B655C; }
  .work__palette-list li          { border-color: rgba(240,235,224,.15); }
  .work__shot figcaption          { color: #6B655C; }

  .work__cta                      { background: #0A0907; }
  .work__cta::before {
    background: radial-gradient(ellipse, rgba(182,149,105,.28) 0%, transparent 70%);
  }
  .work__cta-mail                 { color: #F0EBE0; }
  .work__cta-lede                 { color: #6B655C; }

  .work__other-name               { color: #F0EBE0; }
  .work__other-meta               { color: #6B655C; }
  .work__other-num                { color: #504A44; }
  .work__other-card:hover .work__other-img {
    box-shadow: 0 40px 70px -25px rgba(6,5,4,.9), 0 0 40px -10px rgba(182,149,105,.1);
  }

  /* placeholders */
  .placeholder {
    background: linear-gradient(180deg, rgba(240,235,224,.025), rgba(240,235,224,.05)), #0D0C0A;
    color: #6B655C;
  }
  .placeholder--soft {
    background: linear-gradient(180deg, #1a1814 0%, #0e0c0a 100%);
    color: #6B655C;
  }

  /* ────────────── SECTION TRANSITION FRAMES ────────────── */
  .works::before,
  .commission::before {
    background: rgba(240,235,224,.07);
  }

  /* ────────────── INCOMING PAGE ANIM ────────────── */
  @keyframes pageIn {
    from { opacity: 0; transform: translateY(28px) scale(.992); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

} /* end @media (prefers-color-scheme: dark) */

/* =========================================================
   ACCESSIBILITY & LEGAL ADDITIONS
   ========================================================= */

/* ---------- Skip Link ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  inset-inline-start: 1rem;
  z-index: 10000;
  padding: .75rem 1.5rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: .875rem;
  letter-spacing: .08em;
  border-radius: 2px;
  transition: top .2s ease;
  white-space: nowrap;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------- Focus Visible ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 0;
  border-color: var(--brass) !important;
}

/* ---------- Cookies Popup ---------- */
.cookies {
  position: fixed;
  bottom: clamp(1rem, 3vw, 2rem);
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--ink);
  color: var(--bone);
  border-radius: 60px;
  box-shadow: 0 8px 40px rgba(15,14,12,.25);
  max-width: min(600px, calc(100vw - 2rem));
  animation: cookieIn .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateX(50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(50%) translateY(0); }
}
.cookies[hidden] { display: none; }
.cookies p {
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(244,239,229,.65);
  line-height: 1.5;
  margin: 0;
}
.cookies p a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookies p a:hover { color: var(--bone); }
.cookies__btn {
  flex-shrink: 0;
  padding: .55rem 1.4rem;
  background: var(--brass);
  color: var(--ink);
  border-radius: 60px;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
  white-space: nowrap;
}
.cookies__btn:hover { background: var(--bone); }
.cookies__btn:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

/* בנייד: פס שטוח בתחתית המסך, לא גלולה צפה */
@media (max-width: 640px) {
  .cookies {
    inset-inline: 0;
    bottom: 0;
    transform: none;
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    padding: .9rem 1.1rem;
    /* מרווח עבור ה-home indicator של iPhone */
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
    gap: .85rem;
    box-shadow: 0 -4px 24px rgba(15,14,12,.35);
    animation: cookieInMobile .45s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes cookieInMobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cookies p {
    font-size: .75rem;
    line-height: 1.45;
  }
  .cookies__btn {
    padding: .48rem 1rem;
    font-size: .7rem;
  }
}

/* ---------- Footer Legal Links ---------- */
.foot__legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot__legal a {
  font-size: .7rem;
  letter-spacing: .14em;
  color: rgba(244,239,229,.3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease;
}
.foot__legal a:hover { color: rgba(244,239,229,.65); }

/* Dark mode cookies */
@media (prefers-color-scheme: dark) {
  .cookies {
    background: #1A1815;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
  }
}

/* ---------- Legal Pages ---------- */
.legal-page {
  min-height: 100svh;
  padding-top: clamp(6rem, 14vw, 10rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
  padding-inline: var(--pad-x);
  background: var(--bone);
}
.legal-page__inner {
  max-width: 720px;
  margin-inline: auto;
}
.legal-page__head {
  margin-bottom: 3.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.legal-page__label {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: .75rem;
}
.legal-page__head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: .5rem;
}
.legal-page__head p {
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--ash);
}
.legal-page__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.legal-page__body section {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.legal-page__body h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-soft);
}
.legal-page__body p,
.legal-page__body address {
  font-size: .9rem;
  line-height: 1.85;
  color: var(--graphite);
  font-style: normal;
}
.legal-page__body ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-inline-start: 1.25rem;
}
.legal-page__body ul li {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--graphite);
  list-style: disc;
}
.legal-page__body a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-page__body a:hover { color: var(--ink); }
.legal-page__body code {
  font-family: monospace;
  font-size: .8rem;
  background: var(--cream);
  padding: .1em .4em;
  border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  .legal-page { background: #0D0C0A; }
  .legal-page__head h1,
  .legal-page__body h2 { color: #F0EBE0; }
  .legal-page__body p,
  .legal-page__body address,
  .legal-page__body ul li { color: #9E9488; }
  .legal-page__body code { background: #1A1815; color: #F0EBE0; }
}


/* =========================================================
   PART 5 — L'ARTISANAT DU DÉTAIL
   The precise 5% that turns design into art.
   ─────────────────────────────────────────────────────────
   · Hero protagonist word → ember amber
   · Glass composition → passive breathing life
   · CSS art gallery → richer, more luminous
   · Intro → theatrical warm entrance
   · Section atmospheres → depth, not flatness
   · Typography glow → words that radiate
   ========================================================= */

/* ── A. HERO TITLE — THE PROTAGONIST WORD ── */
/*
   "אור נשבר לתוך צבע" — "Light breaks into color."
   Every other key italic word across the site gets ember.
   The hero's own star word ("Color/צבע") should too.
   This one rule transforms the entire title composition.
*/
.hero__title .word.italic {
  color: var(--ember);
}

/* ── B. HERO TITLE — COMMANDING SCALE ON LARGE SCREENS ── */
/*
   Gallery-scale titles command the room. The previous cap
   of 7.5rem (~120px) felt restrained. 10rem gives the
   title the architectural weight it deserves.
*/
.hero__title {
  font-size: clamp(3.2rem, 9.5vw, 10rem);
}

/* ── C. INTRO LOADER — WARM STUDIO ENTRANCE ── */
/*
   The first thing ever seen. Pure black feels like
   a screen. A warm amber radial feels like entering
   a lit studio where work is being made.
*/
.intro {
  background:
    radial-gradient(ellipse 65% 55% at 50% 40%,
      rgba(140,58,44,.20) 0%,
      rgba(15,14,12,0)   70%),
    var(--ink);
}
/* The mark already has letter-spacing animation from Part 1.
   Extend the fade-in with a tiny scale lift for more presence. */
.intro__mark {
  animation: introMarkIn 1.8s var(--ease-glide) .05s both;
}
@keyframes introMarkIn {
  from { opacity:0; transform:translateY(6px); letter-spacing:.8em; }
  to   { opacity:.6; transform:none;           letter-spacing:.6em; }
}
.intro__name {
  text-shadow: 0 0 80px rgba(217,158,108,.18);
}

/* ── D. GLASS COMPOSITION — AMBIENT BREATHING ── */
/*
   Still glass is dead glass. Real glass shifts as
   clouds move, as the sun turns. A very slow passive
   filter animation gives the composition environmental life —
   independent of any user interaction.
*/
.glass__shard--a,
.glass__shard--d { animation: shardBreathe 20s ease-in-out infinite alternate; }
.glass__shard--b,
.glass__shard--e { animation: shardBreathe 26s ease-in-out -8s  infinite alternate-reverse; }
.glass__shard--c { animation: shardBreathe 23s ease-in-out -5s  infinite alternate; }
.glass__shard--f,
.glass__shard--g { animation: shardBreathe 18s ease-in-out -14s infinite alternate-reverse; }

@keyframes shardBreathe {
  0%   { filter: saturate(.88) brightness(.94); }
  55%  { filter: saturate(1.22) brightness(1.10); }
  100% { filter: saturate(1.00) brightness(1.02); }
}

/* The glass light overlay also drifts its glow position slightly */
@keyframes glassGlow {
  0% {
    opacity: .72;
    background:
      radial-gradient(circle at 25% 18%, rgba(255,232,196,.30) 0%, transparent 38%),
      radial-gradient(circle at 72% 86%, rgba(255,180,120,.09) 0%, transparent 44%);
  }
  50% {
    opacity: .98;
    background:
      radial-gradient(circle at 29% 22%, rgba(255,232,196,.40) 0%, transparent 42%),
      radial-gradient(circle at 66% 82%, rgba(255,180,120,.15) 0%, transparent 48%);
  }
  100% {
    opacity: .82;
    background:
      radial-gradient(circle at 22% 14%, rgba(255,232,196,.26) 0%, transparent 35%),
      radial-gradient(circle at 74% 90%, rgba(255,180,120,.07) 0%, transparent 42%);
  }
}

/* ── E. WORKS SECTION — NOT JUST FLAT BLACK ── */
/*
   The gallery section deserves depth. A warm amber
   radial from the left edge and a cool blue from the
   opposite corner create the ambient tension of a lit
   gallery space.
*/
.works {
  background:
    radial-gradient(ellipse 65% 55% at  8% 38%,
      rgba(182,149,105,.058) 0%, transparent 65%),
    radial-gradient(ellipse 48% 40% at 90% 72%,
      rgba(30,58,82,.07)     0%, transparent 58%),
    var(--ink);
}

/* ── F. MANIFEST SECTION — WARM LIGHT FROM ABOVE ── */
/*
   A studio manifesto deserves the quality of studio light.
   A very subtle warm radial behind the content suggests
   afternoon sunlight entering from the upper left.
*/
.manifest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 15% 8%,
    rgba(229,176,120,.065) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  /* Ensure content sits above the atmospheric overlay */
}
.manifest__grid {
  position: relative;
  z-index: 1;
}

/* ── G. COMMISSION SECTION — BRASS WARMTH ── */
/*
   Commission enquiries should feel inviting. A warm
   brass radial behind the heading creates subtle luxury.
   (commission::before is taken by the transition-line rule)
*/
.commission::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 92% 15%,
    rgba(182,149,105,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.commission__inner {
  position: relative;
  z-index: 1;
}

/* ── H. WORK PAGE — ATMOSPHERIC NOT FLAT ── */
/*
   The parchment background of the work page gains a
   very faint warm bloom near the top where the title
   lives, and a cool shadow at the footer edge.
*/
.work {
  background:
    radial-gradient(ellipse 60% 35% at 78% 6%,
      rgba(229,176,120,.045) 0%, transparent 55%),
    var(--bone);
}

/* Work hero frame — CSS art fallback gets ambient light atmos */
.work__hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 20%,
      rgba(229,176,120,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 85%,
      rgba(30,58,82,.12)    0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: soft-light;
}

/* ── I. SECTION-HEAD RULE — WARM GLOW IN LIGHT MODE ── */
/* Previously only dark mode had this. Every section deserves it. */
.section-head.is-on .section-head__rule {
  box-shadow: 0 0 8px rgba(182,149,105,.14);
}

/* ── J. GLASS — RICHER ANCHOR SHADOW ── */
/*
   A stronger shadow beneath the glass composition grounds
   it in space, as if it's physically resting there.
*/
.glass {
  box-shadow:
    0 90px 130px -45px rgba(15,14,12,.70),
    0 40px  80px -30px rgba(140,58,44,.24),
    0 0     0   0      transparent,
    0 1px   0          rgba(255,235,200,.07) inset;
}

/* ── K. PIECE CARDS — INNER DEPTH ── */
/* A subtle inner shadow on all piece media creates a   */
/* sense of depth — the image exists inside the frame.  */
.piece__media {
  box-shadow: inset 0 0 80px rgba(8,7,6,.30);
}

/* ── L. CSS GALLERY ART — RICHER, MORE LUMINOUS ── */
/*
   Until real photographs exist, these CSS gradients ARE
   the art. More saturated center glow, stronger depth.
*/
.piece__art--01 {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(248,185,115,.95) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(172,72,56,.95)   0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(212,180,122,.72) 0%, transparent 55%),
    linear-gradient(135deg, #2a1a14 0%, #0e0a08 100%);
}
.piece__art--02 {
  background-image:
    radial-gradient(ellipse at 50% 25%, rgba(92,172,222,.92)  0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(130,172,142,.82) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(218,192,148,.72) 0%, transparent 50%),
    linear-gradient(180deg, #14202a 0%, #0a0f14 100%);
}
.piece__art--03 {
  background-image:
    radial-gradient(ellipse at 25% 50%, rgba(255,232,190,.82) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 40%, rgba(205,128,78,.92)  0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(172,72,56,.72)   0%, transparent 50%),
    linear-gradient(110deg, #1a120c 0%, #0c0807 100%);
}
.piece__art--04 {
  background-image:
    radial-gradient(circle at 50% 50%,  rgba(225,192,132,.96) 0%, rgba(172,72,56,.72) 42%, transparent 70%),
    radial-gradient(ellipse at 82% 18%, rgba(148,104,64,.45)  0%, transparent 50%),
    linear-gradient(135deg, #1a1410 0%, #0a0706 100%);
}
.piece__art--05 {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(92,168,218,.92) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(205,128,78,.62) 0%, transparent 40%),
    radial-gradient(ellipse at 82% 80%, rgba(32,60,86,.55)   0%, transparent 50%),
    linear-gradient(45deg, #0e1622 0%, #060a10 100%);
}
.piece__art--06 {
  background-image:
    radial-gradient(ellipse at 35% 40%, rgba(248,185,120,.82) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(130,172,142,.82) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 18%, rgba(172,72,56,.72)   0%, transparent 40%),
    linear-gradient(160deg, #1a1814 0%, #08070a 100%);
}
.piece__art--07 {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(218,182,122,.82) 0%, transparent 32%),
    radial-gradient(circle at 70% 30%, rgba(172,72,56,.82)   0%, transparent 32%),
    radial-gradient(circle at 30% 70%, rgba(92,168,218,.82)  0%, transparent 32%),
    radial-gradient(circle at 70% 70%, rgba(130,172,142,.82) 0%, transparent 32%),
    linear-gradient(180deg, #1a1612 0%, #0a0806 100%);
}

/* ── M. TICKER — EDITORIAL TYPE ── */
/* The running ticker uses italic type for a more editorial feel */
.ticker__track span {
  font-family: var(--font-italic);
  font-style: italic;
}

/* ── N. REDUCED MOTION — RESPECT ── */
@media (prefers-reduced-motion: reduce) {
  .glass__shard--a, .glass__shard--b, .glass__shard--c,
  .glass__shard--d, .glass__shard--e, .glass__shard--f,
  .glass__shard--g { animation: none !important; }
  .intro__mark     { animation: none; opacity: .6; letter-spacing: .6em; }
}

/* ── O. DARK MODE ADDITIONS ── */
@media (prefers-color-scheme: dark) {

  /* Hero protagonist word — warmer, more luminous ember in dark context */
  .hero__title .word.italic {
    color: #C85040;
    text-shadow: 0 0 40px rgba(200,80,64,.42);
  }

  /* Works section — richer atmospheric depth on dark bg */
  .works {
    background:
      radial-gradient(ellipse 65% 55% at  8% 38%,
        rgba(182,149,105,.075) 0%, transparent 65%),
      radial-gradient(ellipse 48% 40% at 90% 72%,
        rgba(30,58,82,.09)     0%, transparent 58%),
      #0A0907;
  }

  /* Glass — deeper, more cinematic on dark */
  .glass {
    box-shadow:
      0 90px 150px -50px rgba(6,5,4,.99),
      0 40px  80px -30px rgba(182,149,105,.40),
      0 0     80px -20px rgba(182,149,105,.12) inset,
      0 1px   0          rgba(255,235,200,.10) inset;
  }

  /* Work page atmospheric */
  .work {
    background:
      radial-gradient(ellipse 60% 35% at 78% 6%,
        rgba(229,176,120,.035) 0%, transparent 55%),
      #0D0C0A;
  }

  /* Section head rule — slightly brighter on dark */
  .section-head.is-on .section-head__rule {
    box-shadow: 0 0 12px rgba(182,149,105,.22);
  }

  /* Manifest atmospheric overlay — more present on dark */
  .manifest::before {
    background: radial-gradient(ellipse 60% 55% at 15% 8%,
      rgba(229,176,120,.045) 0%, transparent 65%);
  }

  /* Intro — richer ember glow on dark bg */
  .intro {
    background:
      radial-gradient(ellipse 65% 55% at 50% 40%,
        rgba(140,58,44,.28) 0%,
        rgba(15,14,12,0)   70%),
      #0F0E0C;
  }
  .intro__name {
    text-shadow: 0 0 80px rgba(217,158,108,.22);
  }
}