/* =========================================================
   Piercing Lilith — design tokens
   Palette: deep plum-black, bordeaux, aged brass, ivory
   Signature element: "the stud" — a small dot on a thin
   thread line, echoing a stud piercing. Used as bullets,
   dividers, the active-nav mark and a hover accent on
   gallery images.
   ========================================================= */

:root{
  --bg:        #0e0b10;
  --surface:   #17121a;
  --surface-2: #1f1822;
  --line:      #2c2430;
  --ivory:     #f1e9df;
  --ivory-dim: #b9aeb2;
  --bordeaux:  #7c1330;
  --bordeaux-2:#a3213f;
  --brass:     #c8a15e;
  --brass-dim: #8e7442;

  --display: "Cormorant Garamond", serif;
  --gothic: "Cinzel Decorative", serif;
  --body: "Jost", sans-serif;
  --mono: "Space Mono", monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* subtle film-grain texture, fixed over the whole page */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:200; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 .4em;
  color:var(--ivory);
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; font-style:italic; font-weight:500; }
h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
h3{ font-size:1.3rem; letter-spacing:.02em; }

p{ margin:0 0 1em; color:var(--ivory-dim); max-width:60ch; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 0 3px rgba(200,161,94,.18);
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- announcement bar (opt-in — see commented block in HTML) ---------- */
.announce-bar{
  background:linear-gradient(90deg, var(--bordeaux), var(--bordeaux-2));
  color:var(--ivory);
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.05em;
  text-align:center;
  padding:.7rem 0;
  position:relative;
}
.announce-bar .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; flex-wrap:wrap;
  position:relative;
  padding-right:2.5rem;
}
.announce-bar a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }
.announce-close{
  position:absolute; right:clamp(1.25rem,4vw,3rem); top:50%;
  transform:translateY(-50%);
  background:none; border:0; color:var(--ivory);
  font-size:1.2rem; line-height:1; cursor:pointer;
  padding:.2rem .4rem; opacity:.75;
}
.announce-close:hover{ opacity:1; color:var(--brass); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,11,16,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.1rem; padding-bottom:1.1rem;
}
.header-right{
  display:flex; align-items:center; gap:1.75rem;
}
@media (max-width: 820px){
  .header-right{ gap:1rem; }
}
.logo{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--gothic);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.logo-img{ height:32px; width:auto; display:block; }
.logo span{ color:var(--brass); }

nav.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:2rem;
}
nav.main-nav a{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory-dim);
  position:relative;
  padding-bottom:.5rem;
  transition:color .3s ease;
}
nav.main-nav a::before{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0; height:1px;
  background:var(--brass);
  transition:width .35s cubic-bezier(.22,1,.36,1);
  transform:translateX(-50%);
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:50%; bottom:-2px;
  width:4px; height:4px; border-radius:50%;
  background:var(--brass);
  opacity:0; transform:translateX(-50%) scale(.3);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 0 8px 1px rgba(200,161,94,.7);
}
nav.main-nav a:hover{ color:var(--ivory); }
nav.main-nav a:hover::before{ width:100%; }
nav.main-nav a:hover::after{ opacity:1; transform:translateX(-50%) scale(1); }
nav.main-nav a.active{ color:var(--brass); }
nav.main-nav a.active::before{ width:100%; }
nav.main-nav a.active::after{ opacity:1; transform:translateX(-50%) scale(1); }

.nav-toggle{
  display:none;
  background:none; border:0; color:var(--ivory);
  width:38px; height:38px; cursor:pointer;
}
.nav-toggle svg{ width:100%; height:100%; }

.lang-switch{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
}
.lang-switch a{ color:var(--ivory-dim); transition:color .25s ease; }
.lang-switch a:hover{ color:var(--ivory); }
.lang-switch a.active{ color:var(--brass); }
.lang-switch .sep{ color:var(--line); }

@media (max-width: 820px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    position:fixed; inset:0 0 0 auto;
    width:min(78vw,320px); height:100vh;
    background:var(--surface);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .35s ease;
    padding:6rem 2rem 2rem;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav ul{ flex-direction:column; gap:1.5rem; }
  nav.main-nav a{ font-size:.85rem; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  position:relative;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.95em 1.8em;
  border:1px solid var(--brass-dim);
  color:var(--ivory);
  transition:border-color .25s ease, color .25s ease;
  isolation:isolate;
}
.btn::before,.btn::after{
  content:"";
  position:absolute; width:10px; height:10px;
  border:1px solid var(--brass);
  opacity:0; transition:opacity .3s ease, width .3s ease, height .3s ease;
}
.btn::before{ top:-5px; left:-5px; border-right:0; border-bottom:0; }
.btn::after{ bottom:-5px; right:-5px; border-left:0; border-top:0; }
.btn:hover{ border-color:var(--brass); color:var(--brass); animation:flicker 1.6s infinite; }
.btn:hover::before,.btn:hover::after{ opacity:1; width:14px; height:14px; }
.btn.solid{
  background:var(--bordeaux);
  border-color:var(--bordeaux);
  color:var(--ivory);
}
.btn.solid:hover{ background:var(--bordeaux-2); border-color:var(--brass); color:var(--ivory); }

@keyframes flicker{
  0%,100%{ box-shadow:0 0 8px 0 rgba(200,161,94,.25); }
  8%{ box-shadow:0 0 3px 0 rgba(200,161,94,.1); }
  22%{ box-shadow:0 0 12px 1px rgba(200,161,94,.35); }
  35%{ box-shadow:0 0 6px 0 rgba(200,161,94,.2); }
  60%{ box-shadow:0 0 10px 1px rgba(200,161,94,.3); }
  78%{ box-shadow:0 0 4px 0 rgba(200,161,94,.15); }
}
@media (prefers-reduced-motion: reduce){
  .btn:hover{ animation:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  min-height:88svh;
  display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(14,11,16,.15) 0%, rgba(14,11,16,.55) 55%, var(--bg) 100%), var(--surface);
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .hero{ background-attachment:fixed; }
}
.hero-inner{ padding-bottom:5rem; max-width:640px; }
.hero .eyebrow{ color:var(--brass); }
.hero-thread{
  position:absolute; top:0; left:50%;
  width:1px; height:64px;
  background:linear-gradient(var(--brass), transparent);
}
.hero-thread::after{
  content:""; position:absolute; left:50%; top:64px;
  width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:var(--brass);
  box-shadow:0 0 14px 2px rgba(200,161,94,.5);
}

/* ---------- sections ---------- */
section{ padding:clamp(4rem,8vw,7rem) 0; }
.section-alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.section-head{ max-width:640px; margin-bottom:3rem; }

.divider{
  border:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin:3.5rem 0;
}

/* ---------- three-up feature row (home) ---------- */
.feature-grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(3,1fr);
  background:var(--line);
  border:1px solid var(--line);
}
.feature{
  background:var(--bg);
  padding:2.4rem 2rem;
  position:relative;
  transition:background .3s ease;
}
.feature::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brass); display:block; margin-bottom:1.2rem;
  transition:box-shadow .3s ease;
}
.feature::after{
  content:"";
  position:absolute; inset:10px;
  border:1px solid var(--brass);
  opacity:0; transform:scale(.97);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.feature:hover{ background:var(--surface); }
.feature:hover::before{ box-shadow:0 0 10px 2px rgba(200,161,94,.6); }
.feature:hover::after{ opacity:1; transform:scale(1); }
.feature h3{ margin-bottom:.5rem; }
.feature p{ font-size:.94rem; margin-bottom:1.4rem; }
@media (max-width: 760px){
  .feature-grid{ grid-template-columns:1fr; }
}

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
}
.gallery-item{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:50% 50% 3px 3px / 26% 26% 0 0;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
  filter:grayscale(35%) brightness(.85);
}
.gallery-item:hover img{ transform:scale(1.05); filter:grayscale(0%) brightness(1); }
.gallery-item::after{
  content:""; position:absolute; top:12px; right:12px;
  width:7px; height:7px; border-radius:50%;
  background:var(--brass);
  opacity:0; transform:scale(.4);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 0 10px 2px rgba(200,161,94,.6);
}
.gallery-item:hover::after{ opacity:1; transform:scale(1); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.9rem 1rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ivory);
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
@media (max-width: 760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- price list ---------- */
.price-group{ margin-bottom:2.6rem; }
.price-group h3{
  color:var(--brass); font-style:italic; font-weight:600;
  margin-bottom:1rem;
}
.price-row{
  display:flex; align-items:baseline; gap:1rem;
  padding:.85rem 0;
  border-bottom:1px dashed var(--line);
}
.price-row .name{ flex:1; color:var(--ivory); font-size:1rem; }
.price-row .note{ display:block; font-size:.8rem; color:var(--ivory-dim); margin-top:.15rem; }
.price-row .amount{
  font-family:var(--mono); color:var(--brass); font-size:1rem; white-space:nowrap;
}
.price-note{ font-size:.85rem; color:var(--ivory-dim); margin-top:1rem; }

/* ---------- contact / form ---------- */
.contact-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
}
@media (max-width: 860px){ .contact-layout{ grid-template-columns:1fr; gap:3rem; } }

.info-list{ list-style:none; margin:0 0 2rem; padding:0; }
.info-list li{
  padding:1rem 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.2rem;
}
.info-list li:last-child{ border-bottom:1px solid var(--line); }
.info-list .label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.info-list .value{ color:var(--ivory); }

form.contact-form{ display:flex; flex-direction:column; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim);
}
.field input, .field select, .field textarea{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ivory);
  padding:.85em 1em;
  font-family:var(--body);
  font-size:.95rem;
  resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brass); }
.form-note{ font-size:.8rem; color:var(--ivory-dim); }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:3.5rem 0 2.5rem;
  background:var(--surface);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  margin-bottom:2.5rem;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  margin:0 0 1rem;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-grid a{ color:var(--ivory-dim); font-size:.92rem; }
.footer-grid a:hover{ color:var(--ivory); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--ivory-dim);
}

/* ---------- page-load veil (fade in from black) ---------- */
.page-veil{
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  pointer-events:none;
  animation:veil-out .9s ease forwards;
  animation-delay:.15s;
}
@keyframes veil-out{
  to{ opacity:0; visibility:hidden; }
}
@media (prefers-reduced-motion: reduce){
  .page-veil{ display:none; }
}

/* ---------- custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  .cursor-dot{
    position:fixed; top:0; left:0; z-index:400;
    width:8px; height:8px; border-radius:50%;
    background:var(--brass);
    box-shadow:0 0 10px 2px rgba(200,161,94,.55);
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .2s ease, height .2s ease, background .2s ease, opacity .2s ease;
    opacity:0;
  }
  .cursor-dot.active{ opacity:1; }
  .cursor-dot.hover{
    width:26px; height:26px;
    background:transparent;
    border:1px solid var(--brass);
    box-shadow:0 0 14px 2px rgba(200,161,94,.4);
  }
}

/* ---------- ornamental divider ---------- */
.divider{
  position:relative;
  border:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin:3.5rem 0;
}
.divider::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:22px; height:22px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg);
  border:1px solid var(--brass-dim);
}
.divider::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--brass);
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px 1px rgba(200,161,94,.6);
}

/* ---------- wax seal ---------- */
.wax-seal{
  width:76px; height:76px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--bordeaux-2), var(--bordeaux) 65%, #4a0c1c 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:1.8rem; color:var(--brass);
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.08), inset 0 -3px 6px rgba(0,0,0,.4);
  position:relative;
  flex-shrink:0;
}
.wax-seal::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px dashed rgba(200,161,94,.35);
}

/* ---------- misc page hero (non-home) ---------- */
.page-hero{
  padding:7rem 0 3.5rem;
  border-bottom:1px solid var(--line);
}
.page-hero p{ max-width:52ch; }

.page-hero-split .wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:3rem;
  align-items:top;
}
.page-hero-split .frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  aspect-ratio:4/5;
}
.page-hero-split .frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(30%) brightness(.88);
  transition:transform .6s ease, filter .6s ease;
}
.page-hero-split .frame:hover img{ transform:scale(1.04); filter:grayscale(0%) brightness(1); }
.page-hero-split .frame::after{
  content:""; position:absolute; inset:8px;
  border:1px solid var(--brass);
  opacity:0; transform:scale(.97);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.page-hero-split .frame:hover::after{ opacity:1; transform:scale(1); }
@media (max-width: 820px){
  .page-hero-split .wrap{ grid-template-columns:1fr; gap:2rem; }
  .page-hero-split .frame{ aspect-ratio:16/10; order:-1; }
}

@media (max-width: 480px){
  .nav-toggle{ width:44px; height:44px; }
  .hero-inner > div{ flex-direction:column; align-items:stretch; }
  .hero-inner .btn{ justify-content:center; }
  .price-row{ flex-wrap:wrap; }
  .price-row .amount{ margin-left:auto; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- studio space gallery ---------- */
.studio-gallery{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:.6rem;
}
.studio-gallery .frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
}
.studio-gallery .frame.lead{ grid-row:1 / span 2; aspect-ratio:4/5; }
.studio-gallery .frame:not(.lead){ aspect-ratio:16/10; }
.studio-gallery .frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(30%) brightness(.88);
  transition:transform .6s ease, filter .6s ease;
}
.studio-gallery .frame:hover img{ transform:scale(1.04); filter:grayscale(0%) brightness(1); }
.studio-gallery .frame::after{
  content:""; position:absolute; inset:8px;
  border:1px solid var(--brass);
  opacity:0; transform:scale(.97);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.studio-gallery .frame:hover::after{ opacity:1; transform:scale(1); }
.studio-gallery .frame figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.7rem .9rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ivory);
  background:linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}
@media (max-width: 700px){
  .studio-gallery{ grid-template-columns:1fr 1fr; }
  .studio-gallery .frame.lead{ grid-column:1 / span 2; grid-row:auto; aspect-ratio:16/10; }
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- map ---------- */
.map-frame{
  position:relative;
  border:1px solid var(--line);
  aspect-ratio:4/3;
  overflow:hidden;
}
.map-frame iframe{
  width:100%; height:100%; border:0;
  filter:grayscale(85%) invert(92%) contrast(88%) brightness(.9);
}
.map-frame::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--brass-dim);
  margin:8px;
  pointer-events:none;
}