*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090608;color:#f4e7ea;font-family:"DM Sans",sans-serif}
.page{max-width:1380px;margin:auto;padding:14px 10px 0}
body{
  margin:0;
  color:#f4e7ea;
  font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(circle at 12% 10%,rgba(196,73,111,.12),transparent 28%),
    radial-gradient(circle at 90% 22%,rgba(113,45,82,.16),transparent 30%),
    linear-gradient(135deg,#080507 0%,#10070c 48%,#070507 100%);
  background-attachment:fixed;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:-1;
  background-image:radial-gradient(rgba(255,210,220,.18) .6px,transparent .6px);
  background-size:5px 5px;
}
.page{max-width:1380px;margin:auto;padding:28px 22px 40px;position:relative}
.hero{position:relative;height:610px;isolation:isolate}
.page-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.glow-a{width:340px;height:340px;background:rgba(223,82,125,.16);left:-80px;top:70px}
.glow-b{width:420px;height:420px;background:rgba(108,53,87,.16);right:-120px;bottom:-80px}
.hero-blur-art{
  position:absolute;inset:12px 0 0;
  border-radius:18px;
  background:url("images/hero-new.png") center/cover no-repeat;
  filter:blur(38px) saturate(.75);
  transform:scale(1.035);
  opacity:.52;
  z-index:-2;
}
.hero-card{
  position:absolute;inset:0;overflow:hidden;border-radius:14px;
  border:1px solid rgba(235,145,170,.28);
  background:#160b10;
  box-shadow:0 25px 90px rgba(0,0,0,.58),0 0 45px rgba(221,84,123,.08);
}
.hero-art{
  position:absolute;inset:0;
  background:url("images/hero-new.png") right center/auto 100% no-repeat;
  background-color:#695657;
}
.hero-art-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,4,7,.985) 0%,rgba(14,6,10,.92) 23%,rgba(17,7,11,.48) 46%,rgba(17,7,11,.06) 72%),
    linear-gradient(0deg,rgba(8,4,6,.34),transparent 38%,rgba(8,4,6,.14));
}
.topbar{
  position:absolute;left:18px;right:18px;top:15px;height:48px;
  display:flex;align-items:center;padding:0 17px;
  border:1px solid rgba(235,150,173,.14);border-radius:8px;
  background:rgba(11,5,9,.45);backdrop-filter:blur(16px);
  z-index:5;
}
.logo{position:relative;color:#f6dce3;text-decoration:none;font:700 17px "Space Grotesk";width:180px}
.logo span{color:#f18ba6}.logo small{display:block;font:5px "Space Grotesk";letter-spacing:.25em;color:#b88f9c;margin-top:-1px}
.topbar nav{display:flex;gap:6px;margin:auto}
.topbar nav a{
  color:#d9c1c9;text-decoration:none;font-size:9px;padding:8px 12px;
  border:1px solid transparent;border-radius:5px;transition:.2s
}
.topbar nav a:hover{border-color:rgba(235,120,151,.4);background:rgba(238,120,151,.08);color:#ffdce5}
.icons{display:flex;width:180px;justify-content:flex-end}.icons a{color:#f0a0b3;text-decoration:none;font-size:17px}
.menu-toggle{display:none;background:none;border:0;color:#f0a0b3;font-size:20px;padding:5px}
.hero-copy{position:absolute;left:58px;top:155px;width:310px;z-index:3}
.tiny-heart{position:absolute;right:15px;top:-42px;color:#f18ba6;font-size:30px;transform:rotate(-10deg)}
.hero-title{font:700 clamp(74px,8vw,112px)/.82 "Space Grotesk";letter-spacing:-.08em;color:#ee7697;text-shadow:0 0 30px rgba(238,117,150,.13)}
.subtitle{font:11px "Space Grotesk";letter-spacing:.32em;color:#edc3cd;margin:15px 0 27px}
.hero-copy ul{list-style:none;padding:0;margin:0;color:#ead0d6;font-size:12px;line-height:1.95}
.commission-button{display:inline-block;margin-top:29px;border:1px solid #ed7897;border-radius:5px;padding:12px 18px;color:#f1a1b4;text-decoration:none;font:600 10px "Space Grotesk";background:rgba(35,9,18,.28);backdrop-filter:blur(8px);transition:.25s}
.commission-button:hover{background:rgba(237,120,151,.12);box-shadow:0 0 22px rgba(237,120,151,.12)}
.commission-button b{margin-left:18px}.hero-socials{display:flex;margin-top:32px}.hero-socials a{color:#f0a0b3;text-decoration:none;font-size:17px}
.gallery-preview{padding:22px 4px 0}.section-head{display:flex;align-items:end;justify-content:space-between;padding:8px 22px 15px;border-bottom:1px solid #3a252d}.section-head h2,.section h2{font:500 42px/1 "Space Grotesk";letter-spacing:-.04em;margin:0}.section-head h2 span{color:#ed7897;font-size:24px}.eyebrow{color:#ed819c;font:700 9px "Space Grotesk";letter-spacing:.2em;margin-bottom:9px}.filters{display:flex;gap:5px}.filters button{background:none;border:0;color:#9e838c;font-size:10px;padding:7px 11px;cursor:pointer}.filters button.active{background:#ffd1dd;color:#35131f;border-radius:99px}
.masonry{columns:3 260px;column-gap:10px;padding:14px 4px}.work{position:relative;break-inside:avoid;margin:0 0 10px;overflow:hidden;border-radius:5px;background:#130b0f;border:1px solid #2e1b22}.work img{display:block;width:100%;height:auto;transition:transform .45s,filter .45s}.work:hover img{transform:scale(1.025);filter:saturate(1.04)}.work figcaption{position:absolute;left:9px;bottom:9px;background:rgba(11,5,8,.82);border:1px solid rgba(240,135,159,.35);color:#f2b1c0;padding:6px 9px;border-radius:3px;font-size:9px;letter-spacing:.04em}.wide{break-inside:avoid}
.section{padding:80px 4vw}.section h2{font-size:64px;margin-bottom:30px}.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.prices article{background:#130b0f;border:1px solid #38232b;border-radius:5px;overflow:hidden}.prices img{width:100%;height:190px;object-fit:cover;display:block}.prices article>div{padding:15px}.prices small{color:#9c7883}.prices h3{font:500 21px "Space Grotesk";margin:6px 0}.prices strong{color:#ee829d;font:600 21px "Space Grotesk"}.prices p{color:#987f87;font-size:10px}.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.extras span{border:1px solid #38232b;padding:15px;color:#c8abb3;font-size:11px}.extras b{float:right;color:#ed829d}
.terms{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #38232b}.terms>div{padding:22px 20px 22px 0;border-right:1px solid #38232b}.terms>div+div{padding-left:20px}.terms>div:last-child{border:0}.terms b{color:#ed829d;font-size:10px}.terms h3{font:500 21px "Space Grotesk";margin:45px 0 8px}.terms p{font-size:11px;color:#9b858c}
.contact{margin:0 4px 25px;padding:60px 5vw;background:linear-gradient(120deg,#2b111b,#12090d);border:1px solid #4b2c37;border-radius:8px;display:grid;grid-template-columns:1fr .45fr;align-items:center;gap:30px}.contact h2{font:500 55px "Space Grotesk";margin:0 0 25px}.contact a{color:#f09ab0;border:1px solid #ef7898;padding:11px 16px;text-decoration:none;font-size:10px}.contact img{width:100%;max-height:280px;object-fit:cover;border-radius:5px}
footer{display:flex;justify-content:space-between;color:#725e66;font-size:9px;letter-spacing:.1em;padding:18px 20px 25px}
@media(max-width:800px){
.page{padding:6px}.hero{height:min(720px,92vh);min-height:570px;border-radius:8px}
.topbar{height:58px;padding:0 16px}.logo{width:auto;font-size:16px}.topbar nav{position:absolute;top:58px;left:10px;right:10px;display:none;flex-direction:column;gap:5px;padding:9px;background:rgba(13,6,10,.95);border:1px solid #4b2c37;border-radius:7px;backdrop-filter:blur(14px)}.topbar nav.open{display:flex}.topbar nav a{font-size:11px;padding:10px 12px}.menu-toggle{display:block;margin-left:10px}.icons{width:auto;margin-left:auto}
.hero-art{background-position:right center}.hero-copy{left:22px;right:22px;top:auto;bottom:52px;width:auto}.hero-title{font-size:clamp(60px,18vw,88px)}.subtitle{font-size:9px;margin:10px 0 17px}.hero-copy ul{font-size:11px;line-height:1.75}.commission-button{margin-top:18px}.hero-socials{margin-top:22px}
.gallery-preview{padding-top:10px}.section-head{padding:10px 14px 13px;display:block}.section-head h2{font-size:38px;margin-bottom:13px}.filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.filters button{white-space:nowrap}.masonry{columns:2 150px;column-gap:7px;padding:10px 2px}.work{margin-bottom:7px}
.section{padding:60px 20px}.section h2{font-size:48px}.prices{grid-template-columns:repeat(2,1fr);gap:7px}.prices img{height:160px}.extras{grid-template-columns:1fr;gap:7px}.terms{grid-template-columns:1fr}.terms>div,.terms>div+div{border-right:0;border-top:1px solid #38232b;padding:20px 0}.terms>div:first-child{border-top:0}.contact{grid-template-columns:1fr;padding:48px 22px;margin:0 4px 18px}.contact h2{font-size:42px}.contact img{max-height:260px}
}
@media(max-width:480px){
.hero{height:calc(100svh - 12px);min-height:550px}.hero-art{background-position:72% center}.hero-copy{bottom:36px}.hero-title{font-size:68px}.masonry{columns:2 130px}.prices{grid-template-columns:1fr 1fr}.prices img{height:145px}.prices h3{font-size:18px}.prices strong{font-size:19px}.contact{grid-template-columns:1fr;padding:45px 20px}.contact h2{font-size:40px}
}
body.no-scroll{overflow:hidden}
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;visibility:hidden;pointer-events:none}
.overlay-backdrop{position:absolute;inset:0;background:rgba(5,2,4,.78);backdrop-filter:blur(16px);opacity:0;transition:opacity .35s}
.window{position:relative;z-index:1;width:min(1180px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(145deg,#160b10,#0b0709);border:1px solid #65404c;border-radius:12px;box-shadow:0 25px 100px rgba(0,0,0,.7);transform:translateY(35px) scale(.96);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s}
.overlay.show{visibility:visible;pointer-events:auto}.overlay.show .overlay-backdrop{opacity:1}.overlay.show .window{transform:none;opacity:1}
.window-top{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 30px 17px;border-bottom:1px solid #38232b;position:sticky;top:0;background:rgba(17,8,12,.92);backdrop-filter:blur(12px);z-index:4}
.window-top h2{font:500 45px/1 "Space Grotesk";margin:0}.window-top h2 span{color:#ed7897}
.close-window{width:38px;height:38px;border-radius:50%;border:1px solid #704552;background:#1a0d12;color:#f2a0b5;font-size:25px;cursor:pointer}
.gallery-window .filters{padding:14px 30px 3px;display:flex;gap:5px}.gallery-window .masonry{padding:12px 30px 30px;columns:3 230px;column-gap:10px}
.gallery-window .work{break-inside:avoid;margin:0 0 10px}.commission-window .prices{padding:24px 30px 0}.commission-window .extras{margin:10px 30px 0}
.commission-note{margin:22px 30px 0;color:#9d858d;font-size:12px}.commission-window>.commission-button{margin-left:30px;margin-bottom:28px}
@media(max-width:800px){
 .overlay{padding:7px}.window{width:100%;max-height:94vh;border-radius:9px}.window-top{padding:19px 16px 13px}.window-top h2{font-size:35px}
 .gallery-window .filters{padding:11px 15px 2px;overflow-x:auto;flex-wrap:nowrap}.gallery-window .filters button{white-space:nowrap}
 .gallery-window .masonry{padding:10px 12px 20px;columns:2 130px}.commission-window .prices{padding:14px 12px 0}.commission-window .extras{margin:8px 12px 0}
 .commission-note{margin:18px 12px 0}.commission-window>.commission-button{margin-left:12px}
}

@media(max-width:800px){
  .hero-bg,.hero-photo{background-position:center 31%}
}
@media(max-width:480px){
  .hero-bg,.hero-photo{background-position:center 29%}
}

/* Full-art hero: show the complete character instead of cropping the face */
.hero-bg{
  background-size:cover;
  background-position:center;
}
.hero-photo{
  background-size:auto 100%;
  background-position:right center;
  background-repeat:no-repeat;
  background-color:#5a4647;
  opacity:.92;
}
@media(max-width:800px){
  .hero-bg{background-size:cover;background-position:center}
  .hero-photo{
    background-size:auto 82%;
    background-position:72% 100%;
  }
}
@media(max-width:480px){
  .hero-photo{
    background-size:auto 76%;
    background-position:72% 100%;
  }
}

@media(max-width:800px){
  .page{padding:10px 7px 28px}
  .hero{height:calc(100svh - 18px);min-height:590px}
  .hero-card{border-radius:10px}
  .hero-blur-art{inset:5px -5px 0}
  .hero-art{
    background-size:auto 70%;
    background-position:72% 0%;
  }
  .hero-art-shade{
    background:
      linear-gradient(180deg,rgba(8,4,7,.34) 0%,rgba(8,4,7,.18) 36%,rgba(8,4,7,.9) 69%,rgba(8,4,7,.98) 100%);
  }
  .topbar{left:10px;right:10px;top:10px;padding:0 11px}
  .logo{width:auto;font-size:15px}
  .icons{width:auto;margin-left:auto}
  .topbar nav{
    position:absolute;top:52px;left:0;right:0;display:none;flex-direction:column;
    padding:8px;background:rgba(12,5,9,.94);border:1px solid #4b2c37;border-radius:7px;
    backdrop-filter:blur(18px)
  }
  .topbar nav.open{display:flex}.topbar nav a{font-size:11px;padding:10px 12px}.menu-toggle{display:block;margin-left:8px}
  .hero-copy{left:23px;right:23px;top:auto;bottom:42px;width:auto}
  .tiny-heart{right:20px;top:-30px;font-size:25px}
  .hero-title{font-size:70px}.subtitle{font-size:9px;margin:10px 0 16px}
  .hero-copy ul{font-size:11px;line-height:1.75}.commission-button{margin-top:18px}.hero-socials{margin-top:22px}
}
@media(max-width:480px){
  .hero{min-height:560px}
  .hero-art{background-size:auto 64%;background-position:71% 0}
  .hero-title{font-size:64px}
}

/* Reference-style commission block */
.commission-preview{
  position:relative;
  margin:18px 0 0;
  padding:18px 22px 22px;
  border:1px solid rgba(235,145,170,.22);
  border-radius:12px;
  background:
    linear-gradient(120deg,rgba(43,15,27,.94),rgba(15,7,11,.96)),
    radial-gradient(circle at 80% 20%,rgba(229,101,139,.16),transparent 40%);
  box-shadow:0 20px 70px rgba(0,0,0,.4), inset 0 0 30px rgba(235,100,140,.03);
  overflow:hidden;
}
.commission-preview:before{
  content:"";
  position:absolute;inset:-30%;
  background:url("images/hero-new.png") center/cover no-repeat;
  filter:blur(35px);opacity:.08;transform:scale(1.1);pointer-events:none
}
.preview-head,.preview-cards{position:relative;z-index:1}
.preview-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}
.preview-head h2{font:500 25px "Space Grotesk";margin:0;letter-spacing:-.03em}
.preview-head h2 span{color:#ed7897}
.preview-head>a{color:#ee91a8;text-decoration:none;font:600 9px "Space Grotesk";letter-spacing:.08em;border:1px solid rgba(235,120,151,.35);padding:9px 12px;border-radius:5px}
.preview-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.preview-cards article{overflow:hidden;border:1px solid rgba(235,145,170,.22);border-radius:7px;background:rgba(12,6,10,.55)}
.preview-cards img{display:block;width:100%;height:135px;object-fit:cover}
.preview-cards article>div{display:flex;justify-content:space-between;align-items:center;padding:9px 10px}
.preview-cards span{font-size:10px;color:#e6cbd2}.preview-cards b{font:600 15px "Space Grotesk";color:#ef7f9c}

.commission-window{padding-bottom:22px}
.compact-top{padding-bottom:14px}
.commission-hero-strip{
  margin:0 30px 15px;
  min-height:150px;
  display:grid;grid-template-columns:.9fr 1.4fr;
  overflow:hidden;border:1px solid #432934;border-radius:8px;
  background:#170b10;position:relative
}
.commission-hero-copy{padding:24px 22px;display:flex;flex-direction:column;justify-content:center}
.commission-hero-copy span{font:700 8px "Space Grotesk";letter-spacing:.2em;color:#ed7897}
.commission-hero-copy h3{font:500 25px "Space Grotesk";margin:8px 0;color:#f2dce1}
.commission-hero-copy p{font-size:10px;color:#9d858d;margin:0}
.commission-hero-strip img{width:100%;height:100%;min-height:150px;object-fit:cover;object-position:center 28%;filter:saturate(.86) brightness(.82)}
.commission-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 30px}
.commission-cards article{border:1px solid #38232b;background:#11090d;border-radius:6px;overflow:hidden}
.commission-cards img{width:100%;height:145px;display:block;object-fit:cover}
.commission-cards h3{font:500 14px "Space Grotesk";margin:9px 10px 2px;color:#ead4da}
.commission-cards strong{display:block;color:#ed7897;font:600 18px "Space Grotesk";margin:0 10px 11px}
.commission-addons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 30px}
.commission-addons span{border:1px solid #38232b;padding:12px;color:#bda3ab;font-size:10px}.commission-addons b{float:right;color:#ed7897}
.commission-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 30px 0}
.commission-bottom p{margin:0;color:#927b84;font-size:10px}
.commission-bottom .commission-button{margin:0}

@media(max-width:800px){
  .commission-preview{padding:15px 12px 17px;margin-top:10px}
  .preview-head{align-items:start;gap:10px}.preview-head h2{font-size:21px}.preview-head>a{font-size:8px;padding:8px}
  .preview-cards{grid-template-columns:repeat(2,1fr);gap:7px}.preview-cards img{height:125px}
  .commission-hero-strip{margin:0 12px 12px;grid-template-columns:1fr;min-height:0}
  .commission-hero-copy{padding:17px}.commission-hero-strip img{height:145px;min-height:0}
  .commission-cards{grid-template-columns:repeat(2,1fr);padding:0 12px;gap:7px}
  .commission-cards img{height:130px}
  .commission-addons{grid-template-columns:1fr;margin:8px 12px}
  .commission-bottom{display:block;margin:15px 12px 0}.commission-bottom p{margin-bottom:12px}
}

.commission-hero-strip{
  background:
    linear-gradient(90deg,rgba(22,8,14,.98) 0%,rgba(22,8,14,.92) 35%,rgba(22,8,14,.22) 72%),
    #170b10;
}
.commission-hero-strip:after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,5,9,.1),transparent 60%,rgba(238,120,151,.08));
}

/* =========================
   ALOR — polished airy pass
   ========================= */
:root{
  --ink:#09070a;
  --panel:rgba(24,10,17,.78);
  --panel-2:rgba(36,14,23,.68);
  --line:rgba(244,159,181,.20);
  --line-strong:rgba(244,135,165,.40);
  --pink:#f28aa6;
  --pink-soft:#f5b1c1;
  --text:#f5e8ec;
  --muted:#b99ca6;
}

body{
  background:
    radial-gradient(900px 500px at 8% 7%,rgba(232,100,139,.13),transparent 62%),
    radial-gradient(850px 560px at 93% 26%,rgba(155,83,113,.13),transparent 62%),
    radial-gradient(600px 400px at 50% 78%,rgba(95,44,67,.10),transparent 68%),
    #080609;
}
body:after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  opacity:.12;
  background:
    radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 80% 70%,#fff 0 1px,transparent 1.5px);
  background-size:95px 95px,125px 125px;
}

.page{max-width:1340px;padding:24px 20px 60px}
.hero{height:610px;margin-bottom:18px}

.hero-card{
  border-radius:18px;
  border-color:rgba(245,151,177,.30);
  box-shadow:
    0 30px 100px rgba(0,0,0,.62),
    0 0 70px rgba(238,105,145,.08),
    inset 0 1px rgba(255,255,255,.05);
}
.hero-blur-art{
  filter:blur(48px) saturate(.72);
  opacity:.48;
  transform:scale(1.055);
}
.hero-art{
  background-size:contain;
  background-position:right center;
  background-repeat:no-repeat;
  background-color:transparent;
}
.hero-art-shade{
  background:
    linear-gradient(90deg,rgba(8,4,7,.98) 0%,rgba(12,5,9,.88) 23%,rgba(15,7,11,.40) 48%,rgba(15,7,11,.03) 75%),
    linear-gradient(0deg,rgba(8,4,7,.48),transparent 38%,rgba(8,4,7,.12));
}

.topbar{
  left:16px;right:16px;top:14px;height:50px;
  border-radius:10px;
  background:rgba(11,5,9,.42);
  border-color:rgba(255,185,202,.16);
}
.topbar nav a{
  padding:8px 13px;
  border-radius:999px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.topbar nav a:hover{
  transform:translateY(-1px);
  background:rgba(244,132,164,.10);
  border-color:rgba(244,132,164,.28);
}
.logo{letter-spacing:-.03em}

.hero-copy{left:58px;top:164px}
.hero-title{
  color:#f083a2;
  text-shadow:0 0 32px rgba(240,131,162,.18);
}
.commission-button{
  border-radius:999px;
  padding:12px 18px 12px 19px;
  background:linear-gradient(90deg,rgba(241,126,155,.17),rgba(241,126,155,.05));
  border-color:rgba(245,137,165,.72);
  box-shadow:0 8px 28px rgba(235,101,139,.08);
}
.commission-button:hover{
  transform:translateY(-2px);
  background:rgba(241,126,155,.16);
}
.hero-socials a{
  width:31px;height:31px;border:1px solid rgba(245,151,177,.20);
  border-radius:50%;display:grid;place-items:center;
  background:rgba(12,5,9,.32);
}

.artist-strip{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;
  min-height:44px;padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(26,10,17,.58);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0,0,0,.18);
  color:var(--muted);
  font-size:10px;
}
.artist-strip>span{
  color:#e884a1;font:700 8px "Space Grotesk";letter-spacing:.18em;
}
.artist-strip b{font-weight:500;color:#dfc8cf}
.artist-strip i{font-style:normal;color:#8e6471}
.artist-strip a{
  margin-left:auto;color:#f0a0b4;text-decoration:none;
  font:600 9px "Space Grotesk";letter-spacing:.08em;
}

.commission-preview{
  margin:0;
  padding:20px 20px 21px;
  border-radius:16px;
  border-color:rgba(244,151,178,.24);
  background:
    linear-gradient(135deg,rgba(35,13,23,.92),rgba(13,7,11,.94)),
    radial-gradient(circle at 80% 20%,rgba(229,101,139,.13),transparent 42%);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.preview-head{margin-bottom:15px}
.preview-head h2{font-size:27px}
.preview-head>a{
  border-radius:999px;
  padding:9px 13px;
  background:rgba(240,129,157,.07);
}
.preview-cards{gap:10px}
.preview-cards article{
  border-radius:10px;
  border-color:rgba(244,151,178,.20);
  background:rgba(12,7,11,.70);
  box-shadow:0 8px 25px rgba(0,0,0,.22);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.preview-cards article:hover{
  transform:translateY(-3px);
  border-color:rgba(244,151,178,.42);
  box-shadow:0 15px 35px rgba(0,0,0,.30),0 0 25px rgba(238,112,148,.07);
}
.preview-cards img{
  height:180px;
  object-fit:contain;
  object-position:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(239,139,164,.13),transparent 55%),
    #181015;
}
.preview-cards article>div{padding:10px 12px}
.preview-cards b{font-size:16px}

.commission-window{
  border-radius:16px;
  border-color:rgba(244,151,178,.25);
  box-shadow:0 35px 100px rgba(0,0,0,.66),0 0 50px rgba(231,102,140,.07);
}
.commission-hero-strip{
  border-radius:12px;
  border-color:rgba(244,151,178,.18);
  min-height:180px;
  background:
    linear-gradient(90deg,rgba(22,8,14,.98),rgba(22,8,14,.84) 40%,rgba(22,8,14,.20)),
    #170b10;
}
.commission-hero-strip img{
  object-fit:contain;
  object-position:right center;
  background:#1a0e14;
}
.commission-cards{gap:10px}
.commission-cards article{
  border-radius:9px;
  border-color:rgba(244,151,178,.18);
  box-shadow:0 8px 25px rgba(0,0,0,.20);
}
.commission-cards img{
  height:185px;
  object-fit:contain;
  object-position:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(239,139,164,.10),transparent 58%),
    #171015;
}
.commission-addons span{
  border-radius:7px;
  background:rgba(255,255,255,.015);
}
.close-window{
  width:40px;height:40px;border-radius:50%;
  transition:.2s ease;
}
.close-window:hover{background:rgba(240,128,158,.12);transform:rotate(8deg)}

@media(max-width:800px){
  .page{padding:10px 8px 35px}
  .hero{height:calc(100svh - 18px);min-height:590px}
  .hero-art{
    background-size:contain;
    background-position:72% 4%;
  }
  .hero-art-shade{
    background:
      linear-gradient(180deg,rgba(8,4,7,.18) 0%,rgba(8,4,7,.12) 33%,rgba(8,4,7,.78) 65%,rgba(8,4,7,.98) 100%);
  }
  .hero-copy{left:23px;right:23px;bottom:40px}
  .artist-strip{
    border-radius:12px;flex-wrap:wrap;gap:7px 9px;padding:10px 12px;
    justify-content:center;
  }
  .artist-strip>span{width:100%;text-align:center}
  .artist-strip a{margin-left:0}
  .preview-cards img{height:160px}
  .commission-hero-strip img{height:170px;min-height:170px;object-fit:contain}
  .commission-cards img{height:160px}
}
@media(max-width:480px){
  .hero{min-height:560px}
  .hero-art{background-size:92% auto;background-position:72% 3%}
  .preview-cards img{height:145px}
  .commission-cards img{height:145px}
}

/* ===== Starry background + interactive commission builder ===== */
body{
  background:
    radial-gradient(700px 430px at 8% 8%,rgba(238,105,145,.12),transparent 65%),
    radial-gradient(600px 450px at 90% 20%,rgba(132,79,112,.12),transparent 68%),
    radial-gradient(500px 360px at 48% 90%,rgba(82,45,67,.10),transparent 70%),
    #080609;
}
body:before{
  opacity:.25;
  background-image:
    radial-gradient(circle,rgba(255,220,230,.85) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(239,143,170,.55) 0 1px,transparent 1.5px);
  background-size:87px 87px,137px 137px;
}
body:after{
  opacity:.12;
  background-image:
    radial-gradient(circle at 12% 22%,rgba(242,138,166,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 64%,rgba(255,225,235,.75) 0 1px,transparent 1.5px);
  background-size:190px 190px,230px 230px;
}

.preview-head>a{display:none}
.preview-hint{
  color:#ad8b97;
  font:500 9px "Space Grotesk";
  letter-spacing:.12em;
  align-self:center;
}
.preview-cards{position:relative}
.commission-card{
  position:relative;
  padding:0;
  margin:0;
  border:1px solid rgba(244,151,178,.20);
  border-radius:10px;
  overflow:hidden;
  background:rgba(12,7,11,.70);
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
  box-shadow:0 8px 25px rgba(0,0,0,.22);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.commission-card:before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 28%,rgba(246,137,168,.18),transparent 52%);
  opacity:0;transition:.28s ease;pointer-events:none;z-index:2;
}
.commission-card:after{
  content:"";
  position:absolute;inset:8px;
  border:1px solid rgba(255,186,205,0);
  border-radius:7px;
  transition:.28s ease;pointer-events:none;z-index:3;
}
.commission-card:hover,
.commission-card:focus-visible{
  transform:translateY(-7px);
  border-color:rgba(248,141,171,.72);
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 32px rgba(238,112,150,.16);
  outline:none;
}
.commission-card:hover:before,
.commission-card:focus-visible:before{opacity:1}
.commission-card:hover:after,
.commission-card:focus-visible:after{border-color:rgba(255,186,205,.22)}
.commission-card .card-sparkle{
  position:absolute;right:12px;top:9px;z-index:5;
  color:#ffb2c8;font-size:13px;opacity:0;
  transform:scale(.5) rotate(-20deg);
  text-shadow:0 0 12px rgba(255,154,183,.8);
  transition:.25s ease;
}
.commission-card:hover .card-sparkle,
.commission-card:focus-visible .card-sparkle{
  opacity:1;transform:scale(1) rotate(0);
}
.commission-card:nth-child(2) .card-sparkle{transition-delay:.04s}
.commission-card:nth-child(3) .card-sparkle{transition-delay:.08s}
.commission-card:nth-child(4) .card-sparkle{transition-delay:.12s}
.commission-card img{
  display:block;width:100%;height:180px;
  object-fit:contain;object-position:center;
  background:radial-gradient(circle at 50% 35%,rgba(239,139,164,.13),transparent 55%),#181015;
}
.commission-card>div{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;
}
.commission-card span:not(.card-sparkle){font-size:10px;color:#e6cbd2}
.commission-card b{font:600 16px "Space Grotesk";color:#ef7f9c}

.order-window{max-width:1020px}
.order-layout{
  display:grid;grid-template-columns:minmax(280px,.9fr) minmax(350px,1.1fr);
  gap:22px;padding:0 28px 28px;
}
.order-art{
  position:relative;min-height:500px;border:1px solid rgba(244,151,178,.18);
  border-radius:12px;overflow:hidden;background:#160d12;
  display:grid;place-items:center;
}
.order-art img{
  width:100%;height:100%;max-height:560px;object-fit:contain;position:relative;z-index:2;
}
.order-art-glow{
  position:absolute;inset:-20%;
  background:radial-gradient(circle at 50% 45%,rgba(239,122,153,.22),transparent 48%);
  filter:blur(28px);
}
.order-content{padding:12px 4px}
.order-description{color:#bda5ad;font-size:12px;line-height:1.7;max-width:520px;margin:0 0 22px}
.option-group{margin:0 0 16px}
.option-label{
  color:#d58a9e;font:700 8px "Space Grotesk";letter-spacing:.18em;margin-bottom:8px
}
.option-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{
  min-height:48px;padding:9px 12px;border:1px solid rgba(244,151,178,.17);
  border-radius:8px;background:rgba(255,255,255,.02);color:#d8c0c8;
  text-align:left;cursor:pointer;font:500 11px "DM Sans";transition:.2s
}
.choice b{display:block;color:#9f7c88;font:600 9px "Space Grotesk";margin-top:3px}
.choice:hover{border-color:rgba(244,151,178,.45);background:rgba(244,126,158,.05)}
.choice.active{border-color:rgba(244,126,158,.72);background:rgba(244,126,158,.10);box-shadow:0 0 20px rgba(244,126,158,.08)}
.choice.active b{color:#ed89a3}
.order-total{
  display:flex;justify-content:space-between;align-items:center;
  margin:24px 0 13px;padding:15px 0;border-top:1px solid rgba(244,151,178,.15);
  border-bottom:1px solid rgba(244,151,178,.15);
}
.order-total span{font:700 8px "Space Grotesk";letter-spacing:.18em;color:#9f7f89}
.order-total strong{font:600 28px "Space Grotesk";color:#f18ba6}
.order-button{
  width:100%;border:1px solid #ef8ca7;border-radius:999px;padding:13px 17px;
  background:linear-gradient(90deg,rgba(240,125,155,.20),rgba(240,125,155,.06));
  color:#f5c1ce;font:600 10px "Space Grotesk";letter-spacing:.08em;cursor:pointer;
  transition:.22s
}
.order-button:hover{transform:translateY(-2px);background:rgba(240,125,155,.16);box-shadow:0 10px 30px rgba(240,125,155,.12)}
.order-note{font-size:9px;line-height:1.5;color:#816872;text-align:center;margin:10px 0 0}

@media(max-width:800px){
  .preview-hint{font-size:8px}
  .commission-card img{height:150px}
  .order-layout{grid-template-columns:1fr;padding:0 14px 18px;gap:14px}
  .order-art{min-height:260px;max-height:340px}
  .order-art img{max-height:330px}
  .order-content{padding:0}
}
@media(max-width:480px){
  .preview-cards{grid-template-columns:repeat(2,1fr)}
  .commission-card img{height:135px}
  .option-row{grid-template-columns:1fr}
  .order-window .window-top{padding:16px 14px}
}

/* Order builder uses the same modal state as Gallery */
.overlay.show{visibility:visible;pointer-events:auto}
.overlay.show .overlay-backdrop{opacity:1}
.overlay.show .order-window{transform:none;opacity:1}
.commission-card{appearance:none;-webkit-appearance:none}


/* ===== Final mobile polish + explicit order-copy flow ===== */
.order-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.copy-order-button,
.open-x-button{
  min-height:48px;
  border-radius:999px;
  padding:12px 14px;
  font:600 10px "Space Grotesk";
  letter-spacing:.07em;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:none;
}
.copy-order-button{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(239,140,167,.72);
  background:linear-gradient(90deg,rgba(240,125,155,.20),rgba(240,125,155,.06));
  color:#f5c1ce;
}
.copy-order-button .copy-icon{
  color:#ffadc2;
  font-size:13px;
  transition:none;
}
.copy-order-button .copy-check{
  display:none;
  font-size:14px;
}
.copy-order-button.copied{
  background:rgba(105,205,166,.10);
  border-color:rgba(135,225,190,.55);
  color:#bcefd9;
  box-shadow:0 0 26px rgba(100,210,166,.10);
}
.copy-order-button.copied .copy-icon{display:none}
.copy-order-button.copied .copy-check{
  display:inline-block;
  animation:none;
}
.open-x-button{
  border:1px solid rgba(239,140,167,.34);
  background:rgba(255,255,255,.025);
  color:#e8c8d0;
}
.open-x-button:hover{
  border-color:rgba(239,140,167,.65);
  background:rgba(240,125,155,.08);
}
.open-x-button b{color:#ef8aa5}
.order-note strong{color:#c99daa;font-weight:600}
.copy-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,18px) scale(.96);
  z-index:160;
  pointer-events:none;
  opacity:0;
  padding:10px 16px;
  border:1px solid rgba(239,140,167,.35);
  border-radius:999px;
  background:rgba(19,8,13,.92);
  color:#f5c5d0;
  box-shadow:0 12px 35px rgba(0,0,0,.38),0 0 25px rgba(239,125,155,.10);
  backdrop-filter:blur(12px);
  font:600 10px "Space Grotesk";
  letter-spacing:.05em;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.copy-toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

@media(max-width:800px){
  /* Hero becomes a deliberate two-zone card instead of a full-screen cropped image. */
  .hero{
    height:650px;
    min-height:0;
    overflow:hidden;
  }
  .hero-card{
    border-radius:12px;
  }
  .hero-art{
    inset:0 0 auto;
    height:54%;
    background-size:auto 100%;
    background-position:center top;
    background-repeat:no-repeat;
  }
  .hero-blur-art{
    inset:0;
    height:58%;
    filter:blur(30px) saturate(.72);
    opacity:.40;
  }
  .hero-art-shade{
    inset:0 0 auto;
    height:67%;
    background:
      linear-gradient(180deg,rgba(8,4,7,.12) 0%,rgba(8,4,7,.08) 42%,rgba(8,4,7,.65) 82%,rgba(8,4,7,.98) 100%);
  }
  .topbar{
    left:12px;
    right:12px;
    top:12px;
    height:54px;
    border-radius:12px;
    background:rgba(18,9,14,.58);
  }
  .hero-copy{
    left:24px;
    right:24px;
    top:auto;
    bottom:30px;
    width:auto;
  }
  .tiny-heart{top:-24px;right:10px;font-size:23px}
  .hero-title{
    font-size:clamp(55px,17vw,72px);
    line-height:.84;
  }
  .subtitle{margin:10px 0 15px;font-size:8px}
  .hero-copy ul{
    font-size:11px;
    line-height:1.72;
  }
  .commission-button{
    margin-top:16px;
    padding:12px 17px;
  }
  .hero-socials{margin-top:18px}

  .order-actions{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .hero{
    height:630px;
  }
  .hero-art{
    height:52%;
    background-size:auto 100%;
    background-position:center top;
  }
  .hero-blur-art{height:56%}
  .hero-art-shade{height:67%}
  .hero-copy{
    left:21px;
    right:21px;
    bottom:27px;
  }
  .hero-title{font-size:61px}
  .topbar{left:10px;right:10px;top:10px;height:54px}
  .logo{font-size:15px}
  .order-note{font-size:9px;line-height:1.55}
}

/* ===== Commission builder visual refresh ===== */
#orderWindow .order-content{padding:18px 8px 8px}
#orderWindow .option-group{padding:14px 0 16px;margin:0;border-bottom:1px solid rgba(244,151,178,.09)}
#orderWindow .option-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#ef9aae;font-size:9px}
#orderWindow .option-label:before{content:"♡";font-size:10px;opacity:.75}
#orderWindow .option-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#orderWindow .background-row{grid-template-columns:repeat(3,minmax(0,1fr))}
#orderWindow .choice{position:relative;overflow:hidden;min-height:56px;padding:12px 13px;border-radius:12px;border:1px solid rgba(244,151,178,.14);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transform:translateY(0);transition:none}
#orderWindow .choice:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,190,207,.10) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (pointer:fine){#orderWindow .choice:hover{transform:translateY(-2px);border-color:rgba(244,126,158,.45);background:linear-gradient(145deg,rgba(244,126,158,.08),rgba(255,255,255,.022));box-shadow:0 8px 20px rgba(0,0,0,.16),0 0 16px rgba(244,126,158,.055);transition:none}#orderWindow .choice:hover:after{transform:translateX(120%);transition:transform .7s cubic-bezier(.22,.61,.36,1)}}

#orderWindow .choice:active{transform:translateY(0) scale(.992);transition-duration:.08s}
#orderWindow .choice.active{transform:translateY(0);border-color:rgba(244,126,158,.72);background:linear-gradient(145deg,rgba(244,126,158,.13),rgba(244,126,158,.045));box-shadow:0 0 0 1px rgba(244,126,158,.06),0 7px 20px rgba(244,126,158,.07),inset 0 0 18px rgba(244,126,158,.035)}
#orderWindow .choice.active:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(244,126,158,.10),inset 0 0 18px rgba(244,126,158,.04)}
#orderWindow .choice.active:before{content:"✦";position:absolute;right:10px;top:8px;color:#ff9fb7;font-size:9px;opacity:.8}
#orderWindow .choice b{color:#92717d}
#orderWindow .choice.active b{color:#f095aa}
#orderWindow .choice-pop{animation:choicePop .32s cubic-bezier(.2,.8,.2,1)}
.character-stepper{width:100%;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border:1px solid rgba(244,151,178,.2);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(244,126,158,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
@media (hover:hover) and (pointer:fine){.character-stepper:hover{border-color:rgba(244,126,158,.48);box-shadow:0 0 18px rgba(244,126,158,.07);transform:translateY(-1px);transition:border-color .2s,box-shadow .2s,transform .2s}}
.stepper-btn{height:48px;border:0;background:transparent;color:#f19aae;font-size:21px;cursor:pointer;transition:background .2s,color .2s,transform .15s}
@media (hover:hover) and (pointer:fine){.stepper-btn:hover:not(:disabled){background:rgba(244,126,158,.10);color:#ffc1ce;transition:background .2s,color .2s,transform .15s}}
.stepper-btn:active:not(:disabled){transform:scale(.88)}
.stepper-btn:disabled{opacity:.25;cursor:not-allowed}
.character-count{text-align:center;color:#f7d1da;font:600 17px "Space Grotesk";letter-spacing:.03em}
.character-note,.background-note{margin-top:7px;color:#80646f;font:500 8px "DM Sans";letter-spacing:.01em}
.character-note b{color:#d9869d;font-weight:600}
#orderWindow .order-total{margin:18px 0 13px;padding:17px 2px;border-color:rgba(244,151,178,.13);position:relative;overflow:hidden}
#orderWindow .order-total:after{content:"";position:absolute;inset:0 -50%;background:linear-gradient(90deg,transparent,rgba(255,170,193,.08),transparent);transform:translateX(-100%);pointer-events:none}
#orderWindow .order-total:has(.price-pulse):after{animation:totalSweep .65s ease}
#orderWindow #orderTotal.price-pulse{animation:pricePulse .42s cubic-bezier(.2,.8,.2,1)}
#orderWindow .copy-order-button{box-shadow:none;transition:none}

@keyframes choicePop{0%{transform:scale(.96)}65%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes tinySpark{0%,100%{transform:scale(.8) rotate(0);opacity:.45}50%{transform:scale(1.2) rotate(18deg);opacity:1}}
@keyframes pricePulse{0%{transform:scale(.92);text-shadow:0 0 0 rgba(241,139,166,0)}55%{transform:scale(1.07);text-shadow:0 0 20px rgba(241,139,166,.35)}100%{transform:scale(1);text-shadow:0 0 0 rgba(241,139,166,0)}}
@keyframes totalSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:480px){#orderWindow .background-row{grid-template-columns:repeat(3,1fr);gap:6px}#orderWindow .background-row .choice{padding:10px 7px;font-size:10px}#orderWindow .background-row .choice b{font-size:8px}.character-stepper{grid-template-columns:50px 1fr 50px}}


/* Mobile hero polish: keep the heart attached to the artwork and center the lower copy. */
@media (max-width: 800px){
  .hero-copy{
    left:21px; right:21px;
    text-align:center;
  }
  .hero-copy ul{
    display:inline-block;
    text-align:left;
  }
  .commission-button{
    display:table;
    margin-left:auto; margin-right:auto;
  }
  .hero-socials{
    justify-content:center;
  }
  .tiny-heart{
    top:calc(70% - 7px);
    right:16px;
    z-index:8;
    font-size:25px;
    transform:rotate(-10deg);
    pointer-events:none;
  }
}
@media (max-width:480px){
  .tiny-heart{
    top:calc(52% - 7px);
    right:14px;
  }
}


/* Final mobile hero-heart placement: attached to the artwork/card, not the copy block. */
.tiny-heart{position:absolute;right:22px;top:50%;z-index:6;color:#f18ba6;font-size:28px;line-height:1;transform:rotate(-10deg);pointer-events:none}
@media (max-width:800px){
  .tiny-heart{top:52%;right:18px;font-size:25px}
}
@media (max-width:480px){
  .tiny-heart{top:50%;right:14px;font-size:25px}
}


/* Heart placement: keep it visually attached to the ALOR wordmark. */
.title-heart{
  display:inline-block;
  margin-left:6px;
  color:#f18ba6;
  font-size:.42em;
  font-weight:400;
  vertical-align:top;
  position:relative;
  top:-.08em;
  letter-spacing:0;
  text-shadow:0 0 18px rgba(238,117,150,.12);
}
.tiny-heart{display:none !important}
@media (max-width:640px){
  .title-heart{
    margin-left:5px;
    font-size:.38em;
    top:-.12em;
  }
}