/* ==========================================================================
   MAMMXTH — Walls That Speak
   Design system: warm ink canvas / bone type / ochre + rust paint accents
   Display: Bebas Neue · Poetic: Fraunces italic · Body: Archivo
   ========================================================================== */

:root{
  --ink:        #0B0A08;
  --char:       #16120D;
  --char-2:     #1F1A13;
  --bone:       #EDE4D3;
  --bone-dim:   #B7AC99;
  --gold:       #C9963A;
  --gold-hi:    #E4B45C;
  --rust:       #A64E2A;
  --smoke:      #847A6C;
  --line:       rgba(237,228,211,.14);

  --font-display: "Bebas Neue", sans-serif;
  --font-poetic:  "Fraunces", serif;
  --font-body:    "Archivo", sans-serif;

  --ease-paint: cubic-bezier(.77,0,.18,1);
  --pad: clamp(1.25rem, 4vw, 4rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--gold); color: var(--ink); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ---------- Texture: film grain over everything ---------- */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  pointer-events:none; z-index:9000;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-2%,3%); }
  50%{ transform:translate(3%,-2%); } 75%{ transform:translate(-3%,-3%); }
}

/* ---------- Scroll progress: paint roller ---------- */
.roller{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9500; background:rgba(237,228,211,.06); }
.roller span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--rust), var(--gold));
  box-shadow:0 0 12px rgba(201,150,58,.6);
}

/* ---------- Custom cursor ---------- */
.cursor{ display:none; }
@media (pointer:fine){
  .cursor{
    display:block; position:fixed; z-index:9999; pointer-events:none;
    width:10px; height:10px; border-radius:50%;
    background:var(--gold);
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease-paint), height .25s var(--ease-paint), background .25s, opacity .3s;
    mix-blend-mode:difference; opacity:0;
  }
  body.cursor-on .cursor{ opacity:1; }
  .cursor.is-link{ width:46px; height:46px; background:var(--bone); }
}

/* ---------- Type system ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.015em;
  line-height:.92;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--font-body); font-weight:500;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:1.2rem;
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow--center{ text-align:center; }
.lede{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--bone-dim); max-width:46ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:500;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 2.2rem;
  border:1px solid var(--bone);
  position:relative; overflow:hidden;
  transition:color .35s var(--ease-paint), border-color .35s;
  isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-paint);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); }
.btn:hover, .btn:focus-visible{ color:var(--ink); }
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid::before{ background:var(--gold); transform-origin:right; }
.btn--ghost{ border-color:rgba(237,228,211,.4); }
.btn--gold{ border-color:var(--gold); color:var(--gold); }
.btn--gold::before{ background:var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible{ color:var(--ink); }
.btn--small{ padding:.65rem 1.2rem; font-size:.68rem; }
.btn--full{ width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Painted placeholder "murals" ----------
   Each .mural is a layered, painterly CSS composition.
   In production, replace with: background-image:url(assets/img/xxx.jpg)
   (see README §3) — all layout/masking continues to work unchanged. */
.mural{
  width:100%; height:100%;
  background-color:var(--char-2);
  background-blend-mode:normal;
  position:relative;
}
.mural::after{ /* concrete tooth */
  content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.02' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}
.mural--hero{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(228,180,92,.5), transparent 55%),
    radial-gradient(90% 110% at 12% 85%, rgba(166,78,42,.65), transparent 60%),
    radial-gradient(60% 60% at 50% 55%, rgba(31,26,19,.2), transparent 70%),
    conic-gradient(from 220deg at 65% 40%, #2A2017, #4A2E1B, #7A4A24, #2A2017),
    var(--ink);
}
.mural--1{ background:
  radial-gradient(100% 80% at 20% 20%, rgba(201,150,58,.55), transparent 60%),
  radial-gradient(80% 90% at 85% 80%, rgba(166,78,42,.6), transparent 55%),
  linear-gradient(165deg, #2B2115 0%, #4D331C 50%, #1A140D 100%); }
.mural--2{ background:
  radial-gradient(90% 70% at 70% 25%, rgba(132,122,108,.5), transparent 60%),
  radial-gradient(110% 90% at 15% 90%, rgba(201,150,58,.4), transparent 55%),
  linear-gradient(200deg, #1F1A13, #3A2A1A 60%, #14100B); }
.mural--3{ background:
  radial-gradient(80% 100% at 30% 70%, rgba(166,78,42,.55), transparent 58%),
  radial-gradient(70% 60% at 80% 20%, rgba(228,180,92,.45), transparent 60%),
  linear-gradient(150deg, #241B11, #50321F 55%, #191309); }
.mural--4{ background:
  radial-gradient(120% 70% at 50% 100%, rgba(201,150,58,.5), transparent 60%),
  radial-gradient(60% 80% at 10% 10%, rgba(132,122,108,.45), transparent 55%),
  linear-gradient(120deg, #1C1610, #45301C 50%, #100D08); }
.mural--5{ background:
  radial-gradient(90% 90% at 65% 65%, rgba(166,78,42,.6), transparent 55%),
  radial-gradient(70% 70% at 20% 25%, rgba(228,180,92,.4), transparent 60%),
  linear-gradient(180deg, #211910, #3D2C1A 55%, #15100A); }
.mural--drop{ background:
  radial-gradient(120% 100% at 50% 0%, rgba(201,150,58,.35), transparent 55%),
  radial-gradient(100% 100% at 80% 100%, rgba(166,78,42,.45), transparent 60%),
  linear-gradient(180deg, #14100A, #2C2113 60%, #0B0A08); }
.mural--sketch{ background:
  repeating-linear-gradient(45deg, rgba(237,228,211,.05) 0 2px, transparent 2px 14px),
  linear-gradient(160deg, #232323, #161311); }
.mural--wall{ background:
  repeating-linear-gradient(0deg, rgba(237,228,211,.06) 0 1px, transparent 1px 48px),
  repeating-linear-gradient(90deg, rgba(237,228,211,.06) 0 1px, transparent 1px 48px),
  linear-gradient(180deg, #26221C, #15120D); }
.mural--paint{ background:
  radial-gradient(70% 70% at 35% 40%, rgba(201,150,58,.5), transparent 55%),
  radial-gradient(50% 60% at 75% 70%, rgba(166,78,42,.5), transparent 60%),
  linear-gradient(170deg, #20180F, #181209); }
.mural--final{ background:
  radial-gradient(110% 80% at 60% 30%, rgba(228,180,92,.55), transparent 55%),
  radial-gradient(80% 90% at 15% 80%, rgba(166,78,42,.6), transparent 55%),
  linear-gradient(140deg, #2A1F12, #4E351D 55%, #130F09); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  background:linear-gradient(180deg, rgba(11,10,8,.85), rgba(11,10,8,0));
  backdrop-filter:blur(2px);
  transition:background .4s;
}
.nav.is-scrolled{ background:rgba(11,10,8,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.nav__mark{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.08em; }
.nav__dot{ color:var(--gold); }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500;
  color:var(--bone-dim); transition:color .3s; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-paint);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__right{ display:flex; align-items:center; gap:1rem; }
.cart-btn{ position:relative; display:flex; padding:.4rem; color:var(--bone); }
.cart-count{
  position:absolute; top:-4px; right:-6px;
  background:var(--gold); color:var(--ink);
  font-size:.6rem; font-weight:600; min-width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease-paint);
}
.cart-count.bump{ transform:scale(1.5); }
.nav__burger{ display:none; flex-direction:column; gap:6px; padding:.5rem; }
.nav__burger span{ width:24px; height:2px; background:var(--bone); transition:transform .3s, opacity .3s; }
.nav__burger.is-open span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__burger.is-open span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:950;
  background:rgba(11,10,8,.97);
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  padding:0 var(--pad);
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:2.6rem; letter-spacing:.04em; color:var(--bone); }
.mobile-menu a:hover{ color:var(--gold); }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__art{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; }
.hero__canvas{ width:100%; height:100%; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,.15) 40%, rgba(11,10,8,.92) 100%),
    radial-gradient(120% 60% at 50% 100%, rgba(11,10,8,.6), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; padding:0 var(--pad) clamp(4rem,9vh,7rem); max-width:1200px; }
.hero__eyebrow{ opacity:0; animation:fadeUp 1s .3s var(--ease-paint) forwards; }
.hero__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(4.2rem, 14vw, 12.5rem);
  line-height:.85; letter-spacing:.01em; text-transform:uppercase;
  margin:.6rem 0 1.4rem;
}
.hero__line{ display:block; overflow:hidden; }
.hero__line span{ display:inline-block; transform:translateY(110%); animation:riseUp 1s var(--ease-paint) forwards; }
.hero__line:nth-child(1) span{ animation-delay:.45s; }
.hero__line:nth-child(2) span{ animation-delay:.6s; }
.hero__line:nth-child(3) span{ animation-delay:.75s; }
.hero__line--offset{ padding-left:clamp(2rem, 8vw, 9rem); color:transparent; -webkit-text-stroke:1.5px var(--bone); }
.hero__period{ color:var(--gold); font-style:normal; -webkit-text-stroke:0; }
.hero__sub{
  font-family:var(--font-poetic); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem, 1.8vw, 1.4rem); color:var(--bone-dim);
  max-width:42ch; opacity:0; animation:fadeUp 1s 1s var(--ease-paint) forwards;
}
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; opacity:0; animation:fadeUp 1s 1.2s var(--ease-paint) forwards; }
.hero__scrollcue{
  position:absolute; right:var(--pad); bottom:2rem; z-index:2;
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.4em; color:var(--smoke);
  display:flex; align-items:center; gap:.8rem;
}
.hero__scrollcue span{ width:1px; height:54px; background:var(--smoke); position:relative; overflow:hidden; }
.hero__scrollcue span::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--gold); animation:drip 2.2s var(--ease-paint) infinite;
}
@keyframes drip{ 0%{ top:-100%; } 60%,100%{ top:100%; } }
@keyframes riseUp{ to{ transform:translateY(0); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Sections shared ---------- */
section{ padding:clamp(5rem,10vh,9rem) var(--pad); }
.section-head{ margin-bottom:clamp(2.5rem,6vh,4.5rem); max-width:1400px; }
.section-head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.section-head .lede{ margin-top:1.2rem; }

/* ---------- Paint reveal (signature) ----------
   Elements with .reveal-paint uncover left→right with a ragged painted edge */
.reveal-paint{
  clip-path:polygon(0 0, 0 0, 0 8%, 0 22%, 0 41%, 0 63%, 0 80%, 0 100%, 0 100%);
  transition:clip-path 1.1s var(--ease-paint);
}
.reveal-paint.is-in{
  clip-path:polygon(0 0, 101% 0, 103% 8%, 100% 22%, 102% 41%, 100% 63%, 103% 80%, 101% 100%, 0 100%);
}
.reveal-paint[data-delay="1"]{ transition-delay:.12s; }
.reveal-paint[data-delay="2"]{ transition-delay:.24s; }
.reveal-paint[data-delay="3"]{ transition-delay:.36s; }

.reveal-line{ display:block; opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-paint), transform .8s var(--ease-paint); }
.reveal-line.is-in{ opacity:1; transform:none; }

/* ---------- 2. Featured ---------- */
.featured__grid{
  display:grid; gap:clamp(.8rem,1.5vw,1.4rem);
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(140px, 22vw, 300px);
  max-width:1500px;
}
.feat{ position:relative; overflow:hidden; grid-column:span 5; grid-row:span 1; }
.feat--xl{ grid-column:span 7; grid-row:span 2; }
.feat--tall{ grid-row:span 2; }
.feat--wide{ grid-column:span 12; }
.feat .mural{ position:absolute; inset:0; transition:transform 1.2s var(--ease-paint), filter .6s; }
.feat:hover .mural{ transform:scale(1.05); filter:saturate(1.2); }
.feat figcaption{
  position:absolute; left:0; bottom:0; right:0; z-index:2;
  padding:1.4rem; display:flex; flex-direction:column; gap:.15rem;
  background:linear-gradient(180deg, transparent, rgba(11,10,8,.85));
}
.feat__num{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.05em; }
.feat__meta{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }

/* ---------- 3. Wall Walk ---------- */
.wallwalk{ padding-right:0; }
.wallwalk__nav{ display:flex; gap:.6rem; padding-right:var(--pad); }
.walk-arrow{
  width:52px; height:52px; border:1px solid var(--line); color:var(--bone);
  font-size:1.1rem; transition:background .3s, color .3s, border-color .3s;
}
.walk-arrow:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.wallwalk__track{
  display:flex; gap:clamp(1rem,2vw,1.8rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) 1.5rem 0;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.wallwalk__track::-webkit-scrollbar{ height:4px; }
.wallwalk__track::-webkit-scrollbar-thumb{ background:var(--gold); }
.wall-card{
  position:relative; flex:0 0 clamp(290px, 36vw, 540px);
  aspect-ratio:4/5; overflow:hidden; scroll-snap-align:start;
}
.wall-card .mural{ position:absolute; inset:0; transition:transform 1s var(--ease-paint); }
.wall-card:hover .mural{ transform:scale(1.06); }
.wall-card__tag{
  position:absolute; top:1.1rem; left:1.1rem; z-index:3;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500;
  padding:.45rem .8rem; border:1px solid rgba(237,228,211,.35);
  background:rgba(11,10,8,.45); backdrop-filter:blur(4px);
}
.wall-card__hud{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:1.6rem;
  background:linear-gradient(180deg, transparent, rgba(11,10,8,.94) 55%);
  transform:translateY(calc(100% - 4.6rem));
  transition:transform .55s var(--ease-paint);
}
.wall-card:hover .wall-card__hud,
.wall-card:focus-within .wall-card__hud{ transform:translateY(0); }
.wall-card__hud h3{ font-family:var(--font-display); font-size:2rem; letter-spacing:.04em; margin-bottom:.9rem; }
.wall-card__hud dl{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.wall-card__hud dt{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--smoke); }
.wall-card__hud dd{ font-size:.82rem; color:var(--bone); }
.wall-card__hud p{ font-family:var(--font-poetic); font-style:italic; font-size:.95rem; color:var(--bone-dim); }
.wall-card--cta{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); background:var(--char);
}
.wall-card--cta .display{ font-size:clamp(2.6rem,4vw,4rem); margin-bottom:1.6rem; color:transparent; -webkit-text-stroke:1px var(--bone); }

/* ---------- 4. Statement ---------- */
.statement{ background:var(--char); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.statement__inner{ max-width:880px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.statement__quote{
  font-family:var(--font-poetic); font-style:italic; font-weight:300;
  font-size:clamp(1.7rem, 4vw, 3.1rem); line-height:1.3;
  margin:1rem 0 2.4rem;
}
.statement__sig{ font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }
.statement__sig strong{ color:var(--gold); font-weight:500; }
.statement__mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-size:clamp(8rem,24vw,22rem);
  color:transparent; -webkit-text-stroke:1px rgba(237,228,211,.05);
  z-index:1; pointer-events:none; white-space:nowrap;
}

/* ---------- 5. Drop ---------- */
.drop{ position:relative; overflow:hidden; text-align:center; }
.drop__bg{ position:absolute; inset:0; opacity:.9; }
.drop__bg::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 80% at 50% 50%, transparent, rgba(11,10,8,.85));
}
.drop__inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; }
.drop__title{ margin-bottom:1rem; }
.drop .lede{ margin:0 auto; }
.countdown{
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(.6rem,2vw,1.4rem);
  margin:3rem 0 2.6rem;
}
.countdown__cell{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.countdown__num{
  font-family:var(--font-display);
  font-size:clamp(3.2rem, 9vw, 6.5rem); line-height:1;
  min-width:1.6ch; text-align:center;
  color:var(--gold-hi);
  text-shadow:0 0 32px rgba(201,150,58,.35);
  font-variant-numeric:tabular-nums;
}
.countdown__num.tick{ animation:tick .4s var(--ease-paint); }
@keyframes tick{ 0%{ transform:translateY(-8px); opacity:.4; } 100%{ transform:none; opacity:1; } }
.countdown__lbl{ font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--smoke); }
.countdown__sep{ font-family:var(--font-display); font-size:clamp(2.2rem,6vw,4.5rem); color:var(--smoke); padding-top:.2rem; }
.drop__mount{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.drop__fineprint{ font-size:.72rem; letter-spacing:.14em; color:var(--smoke); text-transform:uppercase; }

/* ---------- 7. Shop ---------- */
.shop__grid{
  display:grid; gap:clamp(1rem,2vw,1.8rem);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  max-width:1500px;
}
.product{ background:var(--char); border:1px solid var(--line); transition:transform .5s var(--ease-paint), border-color .4s, box-shadow .5s; }
.product:hover{ transform:translateY(-8px); border-color:rgba(201,150,58,.5); box-shadow:0 24px 48px -24px rgba(0,0,0,.8); }
.product__img{ position:relative; aspect-ratio:1; overflow:hidden; }
.product__img.mural{ width:auto; height:auto; }
.product__badge{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  padding:.4rem .7rem; background:rgba(11,10,8,.7); border:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.product__badge--gold{ border-color:var(--gold); color:var(--gold); }
.product__info{ padding:1.3rem; }
.product__info h3{ font-family:var(--font-display); font-size:1.45rem; letter-spacing:.04em; }
.product__type{ font-size:.74rem; color:var(--bone-dim); letter-spacing:.06em; margin:.25rem 0 1rem; }
.product__row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.product__price{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold); }
.shop__note{ margin-top:2rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke); }

/* ---------- 8. Commission ---------- */
.commission{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2.5rem,6vw,6rem);
  background:var(--char); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  align-items:start; max-width:none;
}
.commission__copy .display{ font-size:clamp(2rem,4.4vw,3.6rem); margin-bottom:2rem; }
.commission__list{ list-style:none; }
.commission__list li{
  padding:1rem 0; border-bottom:1px solid var(--line);
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  position:relative; padding-left:1.6rem;
}
.commission__list li::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:8px; background:var(--gold); transform:translateY(-50%) rotate(45deg); }
.commission__form{ display:flex; flex-direction:column; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--smoke); }
.field input, .field select, .field textarea{
  background:var(--ink); border:1px solid var(--line); color:var(--bone);
  padding:.95rem 1.1rem; font:inherit; font-size:.95rem;
  transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; }
.form-status{ font-size:.8rem; color:var(--gold); min-height:1.2em; }

/* ---------- 9. Process ---------- */
.process__steps{
  list-style:none; display:grid; gap:clamp(1rem,2vw,1.8rem);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  max-width:1500px; counter-reset:step;
}
.step{ counter-increment:step; }
.step__img{ aspect-ratio:4/3; margin-bottom:1.2rem; position:relative; overflow:hidden; }
.step__img.mural{ width:auto; height:auto; }
.step h3{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.04em; display:flex; align-items:baseline; gap:.7rem; margin-bottom:.5rem; }
.step h3::before{ content:counter(step, decimal-leading-zero); font-size:.8rem; color:var(--gold); letter-spacing:.1em; }
.step p{ font-size:.9rem; color:var(--bone-dim); }

/* ---------- 10. Press ---------- */
.press{ border-top:1px solid var(--line); text-align:center; padding-left:0; padding-right:0; }
.marquee{ overflow:hidden; margin:2.5rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{
  display:flex; gap:3rem; width:max-content;
  animation:marquee 28s linear infinite;
  font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.8rem);
  letter-spacing:.06em; color:var(--bone-dim); white-space:nowrap;
}
.marquee__track span:nth-child(even){ color:var(--gold); }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.press__quote{ max-width:640px; margin:0 auto; padding:0 var(--pad); }
.press__quote p{ font-family:var(--font-poetic); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.7rem); margin-bottom:.8rem; }
.press__quote cite{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke); font-style:normal; }

/* ---------- 11. Contact ---------- */
.contact{ text-align:center; padding-bottom:clamp(6rem,12vh,10rem); }
.contact__title{ font-size:clamp(3.4rem,11vw,9rem); margin-bottom:1rem; }
.contact .lede{ margin:0 auto 2.4rem; }
.contact__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:3rem var(--pad); text-align:center; display:flex; flex-direction:column; gap:.9rem; align-items:center; }
.footer__mark{ font-family:var(--font-display); font-size:2rem; letter-spacing:.1em; }
.footer p{ font-size:.8rem; color:var(--bone-dim); }
.footer__links{ display:flex; gap:1.6rem; }
.footer__links a{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--smoke); transition:color .3s; }
.footer__links a:hover{ color:var(--gold); }
.footer__legal{ font-size:.66rem; color:var(--smoke); }

/* ---------- 6. Cart drawer ---------- */
.cart-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(11,10,8,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s;
}
.cart-overlay.is-open{ opacity:1; }
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:1200;
  width:min(440px, 92vw);
  background:var(--char); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%);
  transition:transform .5s var(--ease-paint);
}
.cart.is-open{ transform:none; }
.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.6rem; border-bottom:1px solid var(--line);
}
.cart__head h2{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.06em; }
.cart__close{ font-size:1.1rem; color:var(--bone-dim); padding:.4rem; transition:color .3s, transform .3s; }
.cart__close:hover{ color:var(--bone); transform:rotate(90deg); }
.cart__items{ flex:1; overflow-y:auto; padding:1.4rem 1.6rem; display:flex; flex-direction:column; gap:1.2rem; }
.cart__empty{ font-family:var(--font-poetic); font-style:italic; color:var(--smoke); text-align:center; margin-top:3rem; }
.cart-item{ display:flex; gap:1rem; align-items:center; border-bottom:1px solid var(--line); padding-bottom:1.2rem; }
.cart-item__thumb{ width:64px; height:64px; flex:0 0 64px; }
.cart-item__body{ flex:1; }
.cart-item__body h4{ font-size:.85rem; font-weight:500; letter-spacing:.04em; }
.cart-item__body p{ font-size:.78rem; color:var(--gold); margin-top:.2rem; }
.cart-item__qty{ display:flex; align-items:center; gap:.6rem; margin-top:.5rem; }
.cart-item__qty button{ width:24px; height:24px; border:1px solid var(--line); font-size:.8rem; line-height:1; transition:border-color .3s; }
.cart-item__qty button:hover{ border-color:var(--gold); }
.cart-item__qty span{ font-size:.8rem; min-width:1.4ch; text-align:center; }
.cart-item__remove{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke); transition:color .3s; }
.cart-item__remove:hover{ color:var(--rust); }
.cart__foot{ padding:1.4rem 1.6rem; border-top:1px solid var(--line); }
.cart__total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:1.3rem; letter-spacing:.06em; margin-bottom:1rem; }
.cart__total span:last-child{ color:var(--gold); }
.cart__note{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); text-align:center; margin-top:.8rem; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:1.6rem; left:50%; transform:translate(-50%, 140%);
  z-index:1300; background:var(--bone); color:var(--ink);
  font-size:.78rem; letter-spacing:.1em; font-weight:500;
  padding:.9rem 1.6rem; transition:transform .45s var(--ease-paint);
}
.toast.is-on{ transform:translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .featured__grid{ grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(150px,30vw,240px); }
  .feat, .feat--xl, .feat--tall, .feat--wide{ grid-column:span 6; grid-row:span 2; }
  .commission{ grid-template-columns:1fr; }
  .hero__line--offset{ padding-left:clamp(1rem,6vw,3rem); }
}
@media (max-width: 560px){
  .countdown{ gap:.4rem; }
  .countdown__sep{ display:none; }
  .wall-card{ flex-basis:82vw; }
  .wall-card__hud{ transform:translateY(0); background:linear-gradient(180deg, transparent, rgba(11,10,8,.96) 40%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal-paint, .reveal-paint.is-in{ clip-path:none; }
  .reveal-line{ opacity:1; transform:none; }
  .hero__line span{ transform:none; animation:none; }
  .hero__eyebrow, .hero__sub, .hero__cta{ opacity:1; animation:none; }
  .grain{ display:none; }
  .marquee__track{ animation:none; }
}