/* ═══════════════════════════════════════════════════════════════════
   AmbyArtist · "Vitrine"
   Electric dark. Bento mosaic, tilting glass panels, and a palette
   lifted out of Amby's own flat-colour work — that teal / wine pairing.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --void:    #07080e;
  --void-2:  #0d0f18;
  --glass:   rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.09);
  --edge:    rgba(255,255,255,.09);
  --edge-2:  rgba(255,255,255,.18);
  --text:    #e7f0ee;
  --text-2:  #8e97a6;
  --text-3:  #656d7c;
  --teal:    #3ef0cf;
  --teal-in: #04140f;
  --wine:    #ff2f7f;
  --ease:    cubic-bezier(.16,1,.3,1);
  --pad:     clamp(18px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:96px }

body{
  background:var(--void);
  color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  font-size:15.5px; line-height:1.6; font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px }

.skip{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%); z-index:999;
  background:var(--teal); color:var(--teal-in); font-weight:600;
  padding:11px 22px; border-radius:0 0 12px 12px; text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{ top:0 }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

::selection{ background:var(--teal); color:var(--teal-in) }

/* ── atmosphere ──────────────────────────────────────────────────── */
.mesh{ position:fixed; inset:-25%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.5 }
.mesh i{ position:absolute; border-radius:50%; display:block }
.mesh i:nth-child(1){ width:46vw; height:46vw; left:-6%;  top:-4%;   background:var(--teal);
                      animation:orb1 26s var(--ease) infinite alternate }
.mesh i:nth-child(2){ width:40vw; height:40vw; right:-4%; top:18%;   background:var(--wine);
                      animation:orb2 31s var(--ease) infinite alternate }
.mesh i:nth-child(3){ width:34vw; height:34vw; left:36%;  bottom:-8%; background:#4a5cff;
                      animation:orb3 37s var(--ease) infinite alternate; opacity:.75 }
@keyframes orb1{ to{ transform:translate3d(22vw,16vh,0) scale(1.25) } }
@keyframes orb2{ to{ transform:translate3d(-18vw,26vh,0) scale(.82) } }
@keyframes orb3{ to{ transform:translate3d(14vw,-22vh,0) scale(1.18) } }

/* fine noise veil keeps the gradients from looking like plastic */
body::after{
  content:''; position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ position:relative; z-index:1 }

/* ── floating dock nav ───────────────────────────────────────────── */
.dock{
  position:fixed; z-index:300; left:50%; top:20px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; max-width:calc(100vw - 24px);
  padding:6px 6px 6px 18px; border-radius:100px;
  background:rgba(9,11,18,.62); border:1px solid var(--edge);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  transition:transform .5s var(--ease), opacity .4s;
}
.dock.hidden{ transform:translateX(-50%) translateY(-140%); opacity:0 }
.dock .sig{
  font-family:'Syne',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:-.02em; margin-right:14px; white-space:nowrap; text-decoration:none;
}
.dock .sig span{ color:var(--teal) }
.dock .links{ display:flex; gap:2px }
.dock .links a{
  text-decoration:none; font-size:12.5px; color:var(--text-2);
  padding:8px 14px; border-radius:100px; white-space:nowrap;
  transition:color .3s, background .3s;
}
.dock .links a:hover{ color:var(--text); background:var(--glass) }
.dock .go{
  background:var(--teal); color:var(--teal-in); font-weight:500; text-decoration:none;
  font-size:12.5px; padding:9px 16px; border-radius:100px; white-space:nowrap;
  transition:box-shadow .5s var(--ease), transform .35s var(--ease);
}
.dock .go:hover{ box-shadow:0 0 26px -2px rgba(62,240,207,.55); transform:translateY(-1px) }

/* ── hero ────────────────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:40px; padding:124px var(--pad) 64px; position:relative;
}
.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(62,240,207,.28); border-radius:100px; padding:6px 14px;
  margin-bottom:26px;
}
.tag b{
  width:6px; height:6px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 12px var(--teal); animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.7) } }

.hero h1{
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(48px,7.6vw,116px); line-height:.92; letter-spacing:-.045em;
}
.hero h1 .grad{
  background:linear-gradient(104deg,var(--teal) 0%,#8affe4 26%,var(--wine) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .out{ -webkit-text-stroke:1.5px var(--text); color:transparent }
.hero .sub{ margin-top:26px; max-width:46ch; color:var(--text-2); font-size:17px }
.hero .row{ margin-top:36px; display:flex; gap:12px; flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding:13px 24px; border-radius:100px; font:inherit; font-size:14px; font-weight:500;
  border:1px solid var(--edge); background:var(--glass); color:var(--text); cursor:pointer;
  transition:transform .35s var(--ease), background .35s, border-color .35s;
}
.btn:hover{ transform:translateY(-2px); background:var(--glass-2); border-color:var(--edge-2) }
.btn.solid{ background:var(--text); color:var(--void); border-color:var(--text) }
.btn.solid:hover{ background:#fff }

/* parallax card stack */
.stack{ position:relative; height:min(72vh,620px); perspective:1200px }
.stack .card{
  position:absolute; overflow:hidden; border-radius:18px;
  border:1px solid var(--edge); box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  transition:transform .9s var(--ease); will-change:transform;
}
.stack .card img{ width:100%; height:100%; object-fit:cover; display:block }
.stack .c1{ width:54%; left:2%;  top:0;     aspect-ratio:4/5;   z-index:3 }
.stack .c2{ width:40%; right:1%; top:19%;   aspect-ratio:4/5;   z-index:2 }
.stack .c3{ width:52%; left:11%; bottom:2%; aspect-ratio:16/10; z-index:4 }

/* ── ticker ──────────────────────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--edge); overflow:hidden;
  background:rgba(255,255,255,.02); padding:15px 0;
  display:flex; white-space:nowrap; user-select:none;
}
.ticker span{
  display:inline-flex; gap:44px; padding-right:44px; flex:none;
  font-family:'Syne',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
  animation:slide 34s linear infinite;
}
.ticker span b{ color:var(--teal); font-weight:600 }
.ticker span i{ font-style:normal; color:var(--wine) }
@keyframes slide{ to{ transform:translateX(-100%) } }

/* ── section heads ───────────────────────────────────────────────── */
.head{
  padding:86px var(--pad) 26px; display:flex; align-items:flex-end;
  justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.head h2{
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:clamp(30px,4.6vw,58px); line-height:1; letter-spacing:-.035em;
}
.head h2 em{ font-style:normal; color:var(--teal) }
.head p{ color:var(--text-2); max-width:40ch; font-size:14.5px }

/* ── gallery controls ────────────────────────────────────────────── */
.controls{
  padding:0 var(--pad) 30px; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chips button{
  font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
  padding:9px 18px; border-radius:100px;
  border:1px solid var(--edge); background:var(--glass); color:var(--text-2);
  transition:color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}
.chips button:hover{ color:var(--text); transform:translateY(-1px) }
.chips button[aria-pressed="true"]{
  background:var(--teal); border-color:var(--teal); color:var(--teal-in); font-weight:500;
}
.chips button .n{ opacity:.55; margin-left:6px; font-size:11.5px }

.tools{ display:flex; gap:10px; margin-left:auto; align-items:center; flex-wrap:wrap }

.search{ position:relative; display:flex; align-items:center }
.search svg{
  position:absolute; left:14px; width:15px; height:15px;
  color:var(--text-3); pointer-events:none;
}
.search input{
  font:inherit; font-size:13.5px; color:var(--text);
  background:var(--glass); border:1px solid var(--edge);
  border-radius:100px; padding:9px 16px 9px 38px; width:190px;
  transition:border-color .3s, background .3s, width .4s var(--ease);
}
.search input::placeholder{ color:var(--text-3) }
.search input:focus{ border-color:var(--edge-2); background:var(--glass-2); width:230px; outline:none }
.search input:focus-visible{ outline:2px solid var(--teal); outline-offset:2px }
.search .clear{
  position:absolute; right:6px; width:24px; height:24px; border-radius:50%;
  border:0; background:var(--glass-2); color:var(--text-2); cursor:pointer;
  font-size:13px; line-height:1; display:none; place-items:center;
}
.search.has-value .clear{ display:grid }

.sort{
  font:inherit; font-size:13.5px; color:var(--text-2); cursor:pointer;
  background:var(--glass); border:1px solid var(--edge);
  border-radius:100px; padding:9px 34px 9px 16px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e97a6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.sort option{ background:var(--void-2); color:var(--text) }

.tally{
  padding:0 var(--pad) 18px; font-size:12.5px; color:var(--text-3);
  letter-spacing:.04em;
}
.tally b{ color:var(--text-2); font-weight:400 }

/* ── bento mosaic ────────────────────────────────────────────────── */
.bento{
  display:grid; gap:14px; padding:0 var(--pad) 40px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:170px; grid-auto-flow:dense;
}
.tile     { grid-column:span 2; grid-row:span 2 }   /* base — squarish */
.tile.tall{ grid-column:span 2; grid-row:span 3 }
.tile.wide{ grid-column:span 4; grid-row:span 2 }
.tile.big { grid-column:span 3; grid-row:span 3 }

.tile{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--edge); background:var(--void-2);
  cursor:pointer; transform-style:preserve-3d; padding:0;
  font:inherit; color:inherit; text-align:left; display:block;
  opacity:0; clip-path:inset(14% 0 14% 0 round 16px);
  transition:opacity .8s var(--ease), clip-path .9s var(--ease),
             box-shadow .5s var(--ease), border-color .5s;
}
.tile.in{ opacity:1; clip-path:inset(0 0 0 0 round 16px) }
.tile:hover, .tile:focus-visible{
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(62,240,207,.3);
  border-color:rgba(62,240,207,.35); z-index:5;
}

.tile .inner{ position:absolute; inset:0; transition:transform .5s var(--ease); will-change:transform }
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease), filter .6s;
  filter:saturate(.9) brightness(.92);
}
.tile:hover img, .tile:focus-visible img{ transform:scale(1.07); filter:saturate(1.08) brightness(1) }

.tile .veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,10,.9) 0%,rgba(4,5,10,.3) 38%,transparent 68%);
  opacity:.35; transition:opacity .5s var(--ease);
}
.tile:hover .veil, .tile:focus-visible .veil{ opacity:1 }

.tile .info{
  position:absolute; left:16px; right:110px; bottom:14px; z-index:3;
  transform:translateY(12px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.tile:hover .info, .tile:focus-visible .info{ transform:none; opacity:1 }
.tile .info h3{
  font-family:'Syne',sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.02em; line-height:1.15;
}
.tile .info p{ font-size:11.5px; color:var(--text-2); margin-top:3px }
.tile .pin{
  position:absolute; left:14px; top:13px; z-index:3;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px;
  background:rgba(7,8,14,.55); border:1px solid var(--edge);
  backdrop-filter:blur(6px); color:var(--text-2);
  opacity:0; transform:translateY(-8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tile:hover .pin, .tile:focus-visible .pin{ opacity:1; transform:none }

/* --- the on-page watermark ------------------------------------------
   This marks the grid thumbnails, which are served unbaked so the mark stays
   crisp at any tile size. The full-size files behind the lightbox carry a
   baked-in mark instead (tools/watermark.py), so the two never double up. */
.wm{
  position:absolute; right:11px; bottom:10px; z-index:4;
  display:flex; align-items:center; gap:6px;
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:9.5px; letter-spacing:.14em; text-transform:lowercase;
  color:rgba(255,255,255,.92);
  padding:5px 10px 5px 7px; border-radius:100px;
  background:rgba(7,8,14,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(5px) saturate(1.3);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  opacity:.72; transition:opacity .4s var(--ease), border-color .4s;
  pointer-events:none; user-select:none;
}
.wm svg{ width:10px; height:10px; color:var(--teal) }
.tile:hover .wm, .tile:focus-visible .wm, .stack .card:hover .wm{
  opacity:1; border-color:rgba(62,240,207,.4);
}


/* ── empty state + load more ─────────────────────────────────────── */
.empty{
  padding:60px var(--pad) 90px; text-align:center; color:var(--text-2);
  display:none;
}
.empty.show{ display:block }
.empty h3{ font-family:'Syne',sans-serif; font-weight:700; font-size:22px; margin-bottom:8px; color:var(--text) }

.more{ display:flex; justify-content:center; padding:0 var(--pad) 100px }
.more[hidden]{ display:none }

/* ── studio ──────────────────────────────────────────────────────── */
.studio{ padding:40px var(--pad) 20px }
.studio .grid{
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,5vw,72px);
  align-items:start;
}
.studio .bio p{ color:var(--text-2); font-size:16.5px; margin-bottom:18px; max-width:56ch }
.studio .bio p.lead{
  color:var(--text); font-size:clamp(19px,2.2vw,26px); line-height:1.42;
  font-weight:300; margin-bottom:26px;
}
.studio .bio p.lead b{ font-weight:600; color:var(--teal) }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:34px 0 0;
}
.stats div{
  border:1px solid var(--edge); border-radius:14px; padding:18px 16px;
  background:var(--glass);
}
.stats dt{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); margin-top:4px;
}
.stats dd{
  font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.03em; line-height:1;
}

.toolkit h3, .process h3{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:14px;
}
.toolkit ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px }
.toolkit li{
  font-size:13px; color:var(--text-2);
  border:1px solid var(--edge); border-radius:100px;
  padding:7px 15px; background:var(--glass);
}
.toolkit li.key{ color:var(--teal); border-color:rgba(62,240,207,.3) }

.process{ margin-top:34px }
.process .strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.process figure{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--edge); aspect-ratio:3/4; background:var(--void-2);
}
.process img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85) brightness(.85); transition:filter .6s var(--ease), transform 1s var(--ease);
}
.process figure:hover img{ filter:saturate(1) brightness(1); transform:scale(1.05) }
.process figcaption{
  position:absolute; left:10px; bottom:9px; z-index:2;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); text-shadow:0 1px 6px rgba(0,0,0,.9);
}

/* ── commission strip ────────────────────────────────────────────── */
.strip-cta{
  margin:80px var(--pad) 90px; padding:clamp(32px,5vw,56px) clamp(24px,4vw,44px);
  border-radius:26px; border:1px solid var(--edge);
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(62,240,207,.16), transparent 62%),
    radial-gradient(600px 300px at 88% 100%, rgba(255,47,127,.16), transparent 62%),
    rgba(255,255,255,.03);
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
  backdrop-filter:blur(6px);
}
.strip-cta h3{
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(28px,4.4vw,54px); line-height:1; letter-spacing:-.04em;
}
.strip-cta h3 em{ font-style:normal; color:var(--wine) }
.strip-cta p{ color:var(--text-2); margin-top:14px; max-width:40ch }
.strip-cta .acts{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end }

/* ── footer ──────────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--edge); padding:40px var(--pad) 36px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; font-size:13px; color:var(--text-3);
}
footer .links{ display:flex; gap:22px }
footer a{ text-decoration:none; transition:color .3s }
footer a:hover{ color:var(--teal) }

/* ── lightbox ────────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:800; display:none;
  background:rgba(4,5,9,.93); backdrop-filter:blur(26px);
  padding:60px clamp(12px,6vw,84px) 76px;
}
.lb.open{ display:grid; place-items:center; animation:fade .3s ease }
@keyframes fade{ from{opacity:0} to{opacity:1} }
/* the stage hugs the image so the caption aligns to the artwork's edges
   rather than floating in a letterbox */
.lb .stage{ position:relative; max-width:min(1120px,100%); width:fit-content }
.lb .shot{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--edge); display:grid; place-items:center;
  background:var(--void-2); min-height:140px;
}
.lb img{
  max-height:calc(100vh - 210px); width:auto; max-width:100%;
  display:block; filter:none;
}
.lb .shot.loading::after{
  content:''; position:absolute; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--edge); border-top-color:var(--teal);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.lb .bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; margin-top:16px; flex-wrap:wrap;
}
.lb .bar h3{ font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(18px,2.6vw,24px); letter-spacing:-.02em }
.lb .bar p{ font-size:12.5px; color:var(--text-2) }
.lb button{
  position:absolute; width:50px; height:50px; border-radius:50%; cursor:pointer;
  border:1px solid var(--edge); background:rgba(255,255,255,.05); color:var(--text);
  font-size:16px; backdrop-filter:blur(10px);
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.lb button:hover{ background:var(--teal); color:var(--teal-in); transform:scale(1.06) }
.lb .prev{ left:clamp(4px,1.5vw,20px); top:50%; margin-top:-25px }
.lb .next{ right:clamp(4px,1.5vw,20px); top:50%; margin-top:-25px }
.lb .shut{ top:22px; right:22px; width:42px; height:42px }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; padding-top:112px; min-height:auto }
  .stack{ height:min(58vh,440px); order:-1 }
  .strip-cta{ grid-template-columns:1fr }
  .strip-cta .acts{ justify-content:flex-start }
  .bento{ grid-template-columns:repeat(4,1fr) }
  .tile.wide,.tile.big{ grid-column:span 4 }
  .studio .grid{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .dock .links{ display:none }
  .tools{ margin-left:0; width:100% }
  .search{ flex:1 }
  .search input{ width:100% }
  .search input:focus{ width:100% }
}
@media (max-width:640px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px }
  .tile,.tile.tall,.tile.wide,.tile.big{ grid-column:span 2; grid-row:span 2 }
  .stats{ grid-template-columns:1fr }
  .process .strip{ grid-template-columns:repeat(2,1fr) }
  .lb{ padding:56px 12px 68px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .tile{ opacity:1; clip-path:none }
}