/* =========================
   POSH — Global Styles
   ========================= */
:root{
  --bg: #0e1013;
  --surface: #14181d;
  --surface-2: #1b2128;
  --text: #e9edf1;
  --muted: #b7c0ca;
  --brand: #b46b36;   /* Copper */
  --brand-2: #6b93b4; /* Gray-blue accent */
  --ring: #ffdfc8;
  --ok: #48c78e; --warn:#ffb84d; --err:#ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px; --radius-sm: 12px;
  --maxw: 1200px;
  --link: color-mix(in oklab, var(--brand-2) 70%, white 30%);
  --link-hover: color-mix(in oklab, var(--brand) 70%, white 20%);
  --link-visited: color-mix(in oklab, var(--brand-2) 55%, black 15%);
  --header-h: 64px;
}

*{ 
  min-width: 0;
  box-sizing: border-box; 
}
html, body{ 
  height:100%; 
  max-width: 100%;
  overflow-x: hidden;
}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 70% -100px, rgba(180,107,54,.15), transparent 60%),
    var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top: calc(var(--header-h) + 3px);
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hard stop: no layout can be wider than the viewport */
main, header, footer, .hero, .section, .grid, .services-grid, .gallery-grid, .contact-wrap {
  max-width: 100vw;
}

/* Absolutely no horizontal scroll from fixed/absolute layers */
.progress, .site-header, .nav, .hero-bg {
  left: 0;
  right: 0;
}

/* When a background image is used as a hero, keep it inside the viewport */
.hero-bg {
  display: block;            /* prevents inline-image whitespace quirks */
  max-width: 100vw;          /* clamp image box itself */
}

/* Extra safety in case any card content or long link tries to overflow */
.card, .service, .contact-form, .contact-info .card {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* Safety clamps to stop any child from pushing the page wider */
.section{ overflow-x: clip; }  /* clip is better than hidden for perf */
.grid, .services-grid, .gallery-grid, .contact-wrap{
  min-width: 0;       /* allow grid/flex children to shrink */
  overflow-x: clip;   /* no sideways scroll from wide children */
}

/* Clean anchor offset for fixed header */
html{ scroll-padding-top: calc(var(--header-h) + 8px); }


/* Slightly taller header on wider screens */
@media (min-width: 880px){
  :root{ --header-h: 72px; }
}

/* Global link styling (readable on dark background) */
a:not(.btn):not(.brand):not(.nav a){
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:not(.btn):not(.brand):not(.nav a):hover,
a:not(.btn):not(.brand):not(.nav a):focus-visible{
  color: color-mix(in oklab, var(--brand) 80%, white 10%);
  text-decoration-thickness: 2px;
}
a:not(.btn):not(.brand):not(.nav a):visited{
  color: var(--link-visited);
}


/* Progress bar */
.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:9999; background:transparent; }
.progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--brand-2)); transition:width .1s linear; }

/* A11y */
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Header */
.site-header{
  position: fixed;           /* was sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:1rem;
  padding: calc(.6rem + env(safe-area-inset-top, 0px)) clamp(.8rem, 3vw, 1.2rem);
}

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text); }
.logo-img{ width:44px; height:44px; object-fit:contain; border-radius:999px; background:#0e1013; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-weight:800; letter-spacing:.04em; font-size:1.05rem; }
.brand-tag{ font-size:.8rem; color:var(--muted); }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.nav a{ text-decoration:none; color:var(--text); padding:.5rem .7rem; border-radius:999px; transition:opacity .2s ease; }
.nav a:hover{ opacity:.85; }
.nav .btn{ margin-left:.25rem; }

.nav-toggle{ display:none; background:none; border:0; margin-left:auto; }
.burger{ width:26px; height:18px; position:relative; }
.burger::before,.burger::after,.burger div{ content:""; position:absolute; left:0; width:100%; height:2px; background:var(--text); }
.burger::before{ top:0; } .burger::after{ bottom:0; } .burger div{ top:8px; }

/* Buttons (accessible, high-contrast, polished) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow);
  line-height:1;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
  /* Ensure button text never gets overridden by link rules */
  color:#fff;
}

/* Primary: copper gradient, forced white text for contrast */
.btn-primary{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 94%, black 6%),
    color-mix(in oklab, var(--brand) 70%, white 10%)
  );
  border-color: transparent;
  color:#fff; /* force high contrast */
}
.btn-primary:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), var(--shadow);
}
.btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(180,107,54,.35), var(--shadow);
}
.btn-primary:active{
  transform: translateY(1px);
}

/* Outline: subtle by default, readable hover/focus */
.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: var(--text);
}
.btn-outline:hover{
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), var(--shadow);
}
.btn-outline:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-2) 45%, white 10%), var(--shadow);
}
.btn-outline:active{
  transform: translateY(1px);
}

/* Make sure nav buttons and reveal buttons inherit the same polish */
.nav .btn,
.reveal .actions .btn{
  white-space: nowrap;
}

/* Hero */
.hero{ position:relative; min-height:60vh; display:grid; place-items:center; overflow:hidden; }
.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;           /* ⬅ hard stop at viewport width */
  object-fit: contain;        /* using a logo; keep it fully visible */
  filter: saturate(.95) contrast(1.02) brightness(.82);
  pointer-events: none;       /* background only */
}

.hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 25% -50px, rgba(107,147,180,.25), transparent 60%),
              linear-gradient(to top, rgba(14,16,19,.85), rgba(14,16,19,.35));
}
.hero-inner{ position:relative; z-index:1; text-align:center; padding:3rem 1rem; max-width:860px; }
.hero-title {
  max-width: 720px;
  margin: 0 auto 1.4rem;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  opacity: 0;
  transform: translateY(14px);
  animation: heroTitleFade 0.8s ease-out 0.1s forwards;
}

.hero-title-line {
  display: inline-block;
  font-size: clamp(1.7rem, 2.2vw + 1rem, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--text) 94%, var(--brand) 6%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  position: relative;
}

.hero-title-line::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--brand) 85%, black 10%),
    color-mix(in oklab, var(--brand-2) 80%, white 10%)
  );
}

.hero-title-subline {
  font-size: clamp(0.95rem, 0.7vw + 0.9rem, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: color-mix(in oklab, var(--muted) 80%, white 20%);
}

/* Subtle entrance */
@keyframes heroTitleFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-logo{ width:min(520px, 85vw); height:auto; display:block; margin:0 auto .8rem; }
.hero-tag{ color:var(--muted); margin:.2rem 0 1.2rem; }
.hero-ctas{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* Sections */
.section{ padding: clamp(2rem, 5vw, 3.5rem) 1rem; }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 25%), var(--surface); }
.section-head{ max-width:var(--maxw); margin:0 auto 1.5rem; padding:0 0 .5rem; }
.section-head h2{ font-size: clamp(1.4rem, 1.4rem + 1.5vw, 2rem); margin:0 0 .3rem; }
.sub{ color:var(--muted); margin:0; }
.note {
  text-align: center;
  margin: 1.5rem auto 0;
  max-width: var(--maxw);
}

.grid, .services-grid, .gallery-grid{ max-width:var(--maxw); margin:0 auto; display:grid; gap:1rem; }
.grid{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.services-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.filter-row{ max-width:var(--maxw); margin:.8rem auto 1rem; display:flex; justify-content:flex-end; padding:0 .1rem; }
#serviceFilter{ background:var(--surface-2); color:var(--text); border:1px solid rgba(255,255,255,.12); padding:.55rem .7rem; border-radius:999px; outline:none; }

/* Artist Card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden; position:relative; box-shadow:var(--shadow);
}
.card .media{ aspect-ratio:4/3; background:#0b0d10; }
/* Smaller visual weight for the Shop card */
#shop .card {
  max-width: 420px;
  margin: 0 auto;
}

#shop .card .media {
  aspect-ratio: 1 / 1;      /* make it square */
  height: auto;
}

#shop .card img {
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.card img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.97) contrast(1.03); }
.card .body{ padding:.9rem; }
.card h3{ margin:.2rem 0 .1rem; font-size:1.05rem; }
.role{ color:var(--muted); font-size:.9rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem; }
.tag{ font-size:.75rem; color:var(--ring); border:1px solid rgba(255,255,255,.12); padding:.2rem .5rem; border-radius:999px; }

/* Reveal panel */
.reveal{
  position:absolute; inset:auto 0 0 0; transform:translateY(100%);
  background: linear-gradient(180deg, rgba(20,24,29,.1), rgba(20,24,29,.9) 40%, rgba(20,24,29,.98));
  color:var(--text); padding:.9rem; display:flex; flex-direction:column; gap:.5rem;
  transition: transform .35s ease; border-top:1px solid rgba(255,255,255,.08);
}
.card:focus-within .reveal, .card:hover .reveal, .card.show .reveal{ transform:translateY(0); }
/* Links inside the reveal panel, but NOT buttons */
.reveal a:not(.btn){
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reveal a:not(.btn):hover,
.reveal a:not(.btn):focus-visible{
  color: var(--link-hover);
}


/* Long strings won’t force the card wider than the viewport */
.reveal, .reveal p, .reveal a,
.socials a {
  overflow-wrap: anywhere;
}


.reveal .actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.reveal .actions .btn{ padding:.45rem .7rem; font-size:.9rem; }

/* Services */
.service{ background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:1rem; box-shadow:var(--shadow); }
.service h3{ margin:.2rem 0 .4rem; }
.pill{ display:inline-block; margin-top:.6rem; padding:.2rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--ring); font-size:.8rem; }

/* Gallery */
.gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.06); }

/* Contact area */
.contact-wrap{ max-width:var(--maxw); margin:0 auto; display:grid; gap:1rem; grid-template-columns:1fr; }
.contact-form, .contact-info .card{ background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow); }
.contact-form{ padding:1rem; }
.form-row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.85rem; }
label{ color:var(--muted); font-size:.9rem; }
input, select, textarea{
  width:100%; color:var(--text); background:var(--surface-2);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.6rem .7rem; outline:none;
}
input:focus, select:focus, textarea:focus{ border-color: color-mix(in oklab, var(--brand) 70%, white 15%); box-shadow:0 0 0 3px rgba(180,107,54,.25); }
#formMsg{ min-height:1.2rem; font-size:.95rem; margin-top:.4rem; }

.contact-info{ display:grid; gap:1rem; }
.contact-info .card{ padding:1rem; }

/* Socials - instagram & facebook icons */
.socials{ display:flex; gap:.6rem; flex-wrap:wrap; }
.socials a i {
  font-size: 1.2rem;
}
.socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--link);
  font-size: 1.1rem;
  transition: all .20s ease;
}
.socials a:hover,
.socials a:focus-visible{
  color: #fff;
  background: color-mix(in oklab, var(--brand) 60%, black 20%);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(180,107,54,.20);
}

/* Prevent the Google Maps iframe from causing horizontal scroll */
.map{ overflow:hidden; }

.map iframe{
  width:100%;
  max-width:100%;
  height:300px;
  display:block;         /* removes inline whitespace quirks */
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}


/* Footer */
.footer{ padding:2rem 1rem; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); margin-top:2rem; }
.footer .tiny{ font-size:.85rem; }

/* Hidden Class */
.hidden {
  display: none;
}


/* Layout—wider screens */
@media (min-width: 880px){
  .nav-toggle{ display:none; }
  .contact-wrap{ grid-template-columns: 1.1fr .9fr; align-items:start; }

  /* Limit card width when only one artist is visible (desktop only) */
  #artistGrid.single-result .card {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Small screens: mobile nav */
@media (max-width: 880px){
  .nav-toggle{ 
    display:block; 
    padding:.4rem; border-radius:10px;
  }

  .nav-toggle:active { background:rgba(255,255,255,.06); }

  .nav{
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(var(--header-h) + 8px); /* sits just under the fixed header when opened */
    background: var(--surface);
    padding: .7rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
    display: grid;
    gap: .2rem;

    /* fully hide when closed */
    transform: translateY(calc(-100% - 40px));  /* push completely above the top */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear .2s;
    z-index: 999; /* below header/progress, above page */
  }

  .nav.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s ease, opacity .2s ease;
  }
}

@media (max-width: 420px){
  .hero-inner{ padding: 2rem 1rem; }
  .hero-logo{ width: min(400px, 80vw); }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }