* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --black:#0a0a0a;
  --bone:#e8e3d8;
  --grey:#8a8a83;
  --dark-grey:#2b2b28;
  --rust:#5c2a1e;
  --serif:'Cormorant Garamond', serif;
  --mono:'Special Elite', monospace;
}

html{ scroll-behavior:smooth; }
body{ background:var(--black); color:var(--bone); font-family:var(--serif); overflow-x:hidden; }

.grain{
  position:fixed; inset:-50%; width:200%; height:200%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.5"/></svg>');
  opacity:0.06; pointer-events:none; z-index:9999;
  animation:grainMove 1s steps(6) infinite;
}
@keyframes grainMove{
  0%{transform:translate(0,0);} 20%{transform:translate(-2%,-3%);}
  40%{transform:translate(-3%,2%);} 60%{transform:translate(2%,-2%);}
  80%{transform:translate(3%,3%);} 100%{transform:translate(0,0);}
}

.eyebrow{ font-family:var(--mono); font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--grey); margin-bottom:1rem; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
h1,h2{ font-weight:300; letter-spacing:2px; }
a{ color:inherit; text-decoration:none; }

#navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(10,10,10,0); transition:background .4s ease, padding .4s ease; padding:1.6rem 0; }
#navbar.scrolled{ background:rgba(10,10,10,0.9); backdrop-filter:blur(6px); padding:1rem 0; border-bottom:1px solid rgba(232,227,216,0.1); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; }
.logo{ font-family:var(--mono); font-size:1.1rem; letter-spacing:2px; }
.logo span{ color:var(--rust); }
#nav-links{ display:flex; gap:2.2rem; }
#nav-links a{ font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; position:relative; padding-bottom:4px; }
#nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bone); transition:width .3s ease; }
#nav-links a:hover::after{ width:100%; }
#menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
#menu-toggle span{ width:24px; height:2px; background:var(--bone); }

.hero{
  height:100vh; min-height:560px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--black);
}

/* --- HERO BACKDROP --- */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:64% 44%;
  /* push the photo back: desaturated, dimmed, warmed to match the bone/rust palette */
  filter:grayscale(1) contrast(1.2) brightness(0.62) sepia(0.16) blur(1.5px);
  transform:scale(1.1);
  animation:heroDrift 32s ease-in-out infinite alternate;
  will-change:transform;
}
/* legibility scrim: dark core behind the headline + button, softer at the edges
   so the tattoo machine still reads, plus the original diagonal weave on top */
.hero-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(74% 58% at 50% 48%, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.74) 42%, rgba(10,10,10,0.34) 78%, rgba(10,10,10,0.2) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.3) 26%, rgba(10,10,10,0.4) 66%, rgba(10,10,10,0.95) 100%),
    repeating-linear-gradient(45deg, rgba(26,26,26,0.35) 0 2px, rgba(10,10,10,0.35) 2px 4px);
}
@keyframes heroDrift{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to{ transform:scale(1.16) translate3d(-1.6%,-1.4%,0); }
}

.hero-content{ position:relative; z-index:2; padding:0 2rem; opacity:0; transform:translateY(30px); transition:all 1s ease; text-shadow:0 2px 24px rgba(10,10,10,0.85); }
.hero-content.visible{ opacity:1; transform:translateY(0); }
.hero h1{ font-size:clamp(3rem, 10vw, 7rem); letter-spacing:8px; line-height:1; margin:0.5rem 0; }
.hero .tagline{ color:var(--bone); opacity:0.72; font-style:italic; margin-bottom:2rem; }
.hero .eyebrow{ color:var(--bone); opacity:0.65; }
.hero .btn{ text-shadow:none; box-shadow:0 10px 40px rgba(10,10,10,0.6); }
.scroll-cue{ position:absolute; z-index:2; bottom:2rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--grey); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

.btn{ display:inline-block; padding:0.9rem 2.2rem; border:1px solid var(--bone); font-family:var(--mono); font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; background:var(--bone); color:var(--black); transition:all .3s ease; cursor:pointer; }
.btn:hover{ background:transparent; color:var(--bone); }
.btn.outline{ background:transparent; color:var(--bone); }
.btn.outline:hover{ background:var(--bone); color:var(--black); }

.reveal{ opacity:0; transform:translateY(40px); transition:all 0.9s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

.about{ padding:8rem 2rem; max-width:1200px; margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:center; }
.about-text h2{ font-size:2.3rem; margin-bottom:1.5rem; }
.about-text p{ color:var(--grey); line-height:1.7; margin-bottom:1.2rem; font-size:1.05rem; }

/* empty portfolio slot — visible only until an <img> is dropped in */
.img-placeholder{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(232,227,216,0.2);
  color:var(--grey); font-family:var(--mono); font-size:0.8rem; letter-spacing:2px;
}

/* --- ARTIST PORTRAIT --- */
.portrait{ margin:0; }
.portrait-frame{ position:relative; }
.portrait-frame::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(232,227,216,0.22); transform:translate(16px,16px);
  transition:transform .6s ease;
}
.portrait:hover .portrait-frame::before{ transform:translate(8px,8px); }

.portrait-media{ position:relative; overflow:hidden; background:var(--black); border:1px solid rgba(232,227,216,0.15); }
.portrait-media img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 46%;
  filter:grayscale(0.5) saturate(0.9) contrast(1.12) brightness(1.18) sepia(0.12);
  transition:filter 1s ease, transform 1.2s ease;
}
.portrait:hover .portrait-media img{
  filter:grayscale(0.12) saturate(1.05) contrast(1.08) brightness(1.25) sepia(0.02);
  transform:scale(1.04);
}
.portrait-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0) 34%, rgba(10,10,10,0.34) 100%),
    radial-gradient(125% 85% at 50% 40%, rgba(92,42,30,0.12) 0%, rgba(10,10,10,0.42) 100%);
}

.portrait figcaption{
  display:flex; align-items:center; gap:0.8rem; margin-top:2.2rem;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--grey);
}
.portrait figcaption::before{ content:''; flex:none; width:28px; height:1px; background:var(--rust); }

.work{ padding:8rem 2rem; text-align:center; }.work h2{ font-size:2.5rem; margin-bottom:3rem; }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1200px; margin:0 auto 4rem; }
.gallery-item{ overflow:hidden; }
.gallery-item img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }

.ig-cta{ margin-top:2rem; }
.ig-cta p{ color:var(--grey); margin-bottom:1rem; }

.newsletter{ padding:8rem 2rem; background:var(--dark-grey); text-align:center; }
.newsletter-inner{ max-width:600px; margin:0 auto; }
.newsletter h2{ font-size:2rem; margin-bottom:1rem; }
.sub{ color:var(--grey); margin-bottom:2rem; }
.form-msg{ margin-top:1rem; font-family:var(--mono); font-size:0.8rem; color:var(--rust); }
.coming-soon{
  display:inline-block; font-family:var(--mono); font-size:0.9rem;
  letter-spacing:4px; text-transform:uppercase; color:var(--bone);
  padding:0.9rem 2rem; border:1px solid var(--grey); opacity:0.85;
}

/* --- UPCOMING EVENTS --- */
.events{ padding:8rem 2rem; text-align:center; }
.events h2{ font-size:2.5rem; margin-bottom:1rem; }
.events .sub{ max-width:460px; margin:0 auto 3.5rem; }

/* fixed-width cards so a single poster stays small and centred rather than
   stretching to fill the row. flex-wrap rather than grid: a grid leaves a
   short final row hanging on the left, flex centres every row it makes,
   including a trailing one with fewer cards than the row above */
.event-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:3rem 2.5rem;
  max-width:1000px; margin:0 auto;
}
.event-card{ text-align:left; width:240px; max-width:100%; }

.event-poster{
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  background:var(--black); border:1px solid rgba(232,227,216,0.15);
  cursor:zoom-in; transition:border-color .3s ease;
}
.event-poster img{
  display:block; width:100%; aspect-ratio:9/16; object-fit:cover;
  filter:grayscale(0.4) contrast(1.06) brightness(0.9);
  transition:filter .6s ease, transform 1s ease;
}
.event-poster:hover, .event-poster:focus-visible{ border-color:rgba(232,227,216,0.45); }
.event-poster:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
.event-poster:hover img, .event-poster:focus-visible img{
  filter:grayscale(0) contrast(1.02) brightness(1); transform:scale(1.04);
}

.event-zoom{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.8rem 0.7rem;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--bone); background:linear-gradient(to top, rgba(10,10,10,0.92), rgba(10,10,10,0));
  opacity:0; transition:opacity .3s ease;
}
.event-poster:hover .event-zoom, .event-poster:focus-visible .event-zoom{ opacity:1; }
/* touch devices never hover — keep the hint on screen */
@media (hover:none){ .event-zoom{ opacity:1; } }

.event-meta h3{ font-size:1.2rem; font-weight:300; letter-spacing:1.5px; margin-top:1.2rem; }
.event-where{
  font-family:var(--mono); font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--grey); margin-top:0.5rem;
}
.event-note{ color:var(--grey); font-size:0.92rem; line-height:1.6; margin-top:0.8rem; }

/* --- PAST EVENTS --- */
/* sits directly under Upcoming Events, so drop the top padding and let a hairline
   rule carry the divide instead of a double-height gap */
.past-events{ padding-top:0; }
.past-events > .eyebrow{
  padding-top:5rem; border-top:1px solid rgba(232,227,216,0.1);
  max-width:1000px; margin-left:auto; margin-right:auto;
}
/* archive posters are 3:4 and square, not the 9:16 of a phone-first promo, and they
   sit further back than what's still to come — colour returns on hover */
.past-events .event-poster img{
  aspect-ratio:3/4;
  filter:grayscale(1) contrast(1.04) brightness(0.78);
}

/* --- POSTER LIGHTBOX --- */
.lightbox{
  width:100%; max-width:100vw; height:100%; max-height:100vh;
  border:none; padding:2rem; background:transparent; color:var(--bone);
}
.lightbox::backdrop{ background:rgba(6,6,6,0.94); }
.lightbox[open]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; }
.lightbox img{
  max-width:min(100%, 640px); max-height:80vh; object-fit:contain;
  border:1px solid rgba(232,227,216,0.18);
}
.lightbox-caption{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--grey); text-align:center;
}
.lightbox-close{
  position:absolute; top:1rem; right:1.2rem; width:44px; height:44px;
  background:none; border:1px solid rgba(232,227,216,0.25); color:var(--bone);
  font-family:var(--serif); font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.lightbox-close:hover, .lightbox-close:focus-visible{ background:var(--bone); color:var(--black); }

.contact{ padding:8rem 2rem; max-width:1200px; margin:0 auto; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-info h2{ font-size:2.3rem; margin:1rem 0 2rem; }
.contact-info ul{ list-style:none; color:var(--grey); line-height:2; margin-bottom:2rem; }
.contact-info ul a{ text-decoration:underline; }
.note{ font-size:0.85rem; color:var(--grey); font-style:italic; }

.contact-form{ display:flex; flex-direction:column; gap:1.2rem; }
.contact-form input, .contact-form select, .contact-form textarea{
  background:transparent; border:1px solid var(--dark-grey); color:var(--bone);
  padding:0.9rem 1rem; font-family:var(--serif); font-size:1rem; width:100%;
}
.contact-form select{ cursor:pointer; background:#000; color:#fff; }
.contact-form select option{ background:#000; color:#fff; }
.contact-form textarea{ resize:vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--grey); }
/* honeypot — hidden from people, bots fill it and the submission is discarded */
.hp-field{ display:none; }
.contact-form button[disabled]{ opacity:0.55; cursor:not-allowed; }

/* --- BOOKING INFORMATION --- */
/* sits between the contact block and the footer, so a hairline rule carries the
   divide the same way Past Events separates from Upcoming */
.booking{ padding:0 2rem 7rem; text-align:center; }
.booking-inner{
  max-width:1100px; margin:0 auto;
  padding-top:5rem; border-top:1px solid rgba(232,227,216,0.1);
}
.booking h2{ font-size:2.5rem; margin-bottom:1rem; }
.booking .sub{ max-width:520px; margin:0 auto 3.5rem; line-height:1.7; }

/* four across, with the events card centred on its own row underneath */
.booking-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.booking-card{
  text-align:left; padding:2rem 1.8rem 2.1rem;
  border:1px solid rgba(232,227,216,0.18);
  background:linear-gradient(180deg, rgba(232,227,216,0.035), rgba(232,227,216,0));
  transition:border-color .4s ease, transform .4s ease;
}
.booking-card:hover{ border-color:rgba(232,227,216,0.4); transform:translateY(-3px); }
/* events sits alone on the second row, centred across the middle two columns */
.booking-card-wide{ grid-column:2 / span 2; justify-self:center; max-width:420px; }

/* same mono label + rust tick used by the portrait caption */
.booking-label{
  display:flex; align-items:center; gap:0.8rem;
  font-family:var(--mono); font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--grey);
}
.booking-label::before{ content:''; flex:none; width:24px; height:1px; background:var(--rust); }
.booking-card h3{ font-size:1.3rem; font-weight:300; letter-spacing:1px; margin:1.2rem 0 0.9rem; }
.booking-card p{ color:var(--grey); font-size:0.94rem; line-height:1.7; }

.booking-footnote{
  max-width:560px; margin:3rem auto 0;
  color:var(--grey); font-style:italic; font-size:0.95rem; line-height:1.7;
}
/* four columns get too tight before the site's 900px breakpoint, so drop to a
   2x2 with events spanning the full row underneath, then a single stack */
@media (max-width:980px){
  .booking-grid{ grid-template-columns:repeat(2,1fr); }
  .booking-card-wide{ grid-column:1 / -1; }
}
@media (max-width:700px){
  .booking-grid{ grid-template-columns:1fr; }
  .booking-card-wide{ justify-self:stretch; max-width:none; }
}

footer{ text-align:center; padding:3rem 2rem; border-top:1px solid var(--dark-grey); color:var(--grey); font-size:0.85rem; }
.footer-note{ margin-top:0.5rem; font-style:italic; font-family:var(--mono); font-size:0.7rem; letter-spacing:1px; }

/* --- FOOTER SOCIAL / CONTACT BUTTONS --- */
.social-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  max-width:600px; margin:0 auto 2.8rem;
}
.social-btn{
  flex:1 1 118px; max-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
  padding:1.3rem 0.75rem 1.1rem;
  border:1px solid rgba(232,227,216,0.22);
  color:var(--grey);
  font-family:var(--mono); font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  transition:color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.social-btn svg{ width:22px; height:22px; display:block; }
/* same bone inversion the outline button uses, so the icon flips to black with the label */
.social-btn:hover, .social-btn:focus-visible{
  background:var(--bone); border-color:var(--bone); color:var(--black); transform:translateY(-3px);
}
.social-btn:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }

/* --- RESPONSIVE --- */
@media (max-width:900px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-image{ max-width:420px; margin:0 auto; width:100%; }
  .portrait-frame::before{ transform:translate(10px,10px); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  #nav-links{
    position:fixed; top:0; right:-100%; width:70%; height:100vh;
    background:var(--black); flex-direction:column; justify-content:center; align-items:center; gap:2rem;
    transition:right .4s ease; border-left:1px solid var(--dark-grey);
  }
  #nav-links.open{ right:0; }
  #menu-toggle{ display:flex; z-index:1100; }
  .gallery{ grid-template-columns:1fr; }
}
/* tidy 2x2 grid rather than a 3+1 orphan on small phones */
@media (max-width:480px){
  .social-row{ max-width:300px; gap:0.8rem; }
}

/* the source is a tall portrait frame — on narrow screens it barely crops,
   so recentre on the machine and lean harder on the scrim for legibility */
@media (max-width:700px){
  .hero-media img{ object-position:58% 46%; filter:grayscale(1) contrast(1.2) brightness(0.55) sepia(0.16) blur(1px); }
  .hero-media::after{
    background:
      radial-gradient(96% 52% at 50% 46%, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.78) 48%, rgba(10,10,10,0.42) 100%),
      linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.42) 24%, rgba(10,10,10,0.5) 64%, rgba(10,10,10,0.96) 100%),
      repeating-linear-gradient(45deg, rgba(26,26,26,0.35) 0 2px, rgba(10,10,10,0.35) 2px 4px);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:scale(1.04); }
  .grain{ animation:none; }
  .scroll-cue{ animation:none; opacity:0.6; }
  .social-btn:hover, .social-btn:focus-visible{ transform:none; }
  .booking-card:hover{ transform:none; }
  .event-poster:hover img, .event-poster:focus-visible img{ transform:none; }
}