/* ============================================================
   STYLE.CSS  —  THE LAYOUT  (New Wave Tattoo)
   ------------------------------------------------------------
   This controls spacing, sizing, and how things are arranged.
   You usually DON'T need to touch this — your COLORS and FONTS
   live in tokens.css, and your WORDS and IMAGES live in the
   .html files.

   It's here, fully readable, if you ever want to adjust the
   layout. But you can build your whole site without opening it.
   ============================================================ */

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--pink); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer;
  padding: 14px 28px; border: 2px solid transparent;
  font-family: var(--font-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .84rem;
  text-decoration: none; border-radius: var(--radius);
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-pink {
  background: var(--pink); color: #fff; border-color: var(--pink);
  box-shadow: 0 0 22px rgba(250, 12, 107, .40);
}
.btn-pink:hover { background: var(--pink-hot); border-color: var(--pink-hot); }
.btn-ghost { background: transparent; color: var(--ice); border-color: var(--ice); }
.btn-ghost:hover { background: var(--ice); color: var(--bg); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 6, 18, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-logo { height: 44px; width: auto; }
.brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }

.nav-toggle {
  display: block; background: none; border: none; color: var(--ink);
  font-size: 1.6rem; cursor: pointer;
}
.nav-links { list-style: none; display: none; }           /* hidden on mobile until opened */
.nav-links.open {
  display: flex; flex-direction: column; gap: 4px;
  position: fixed; top: 72px; left: 0; right: 0;
  background: var(--panel); padding: 18px 24px 26px;
  border-bottom: 1px solid var(--line); z-index: 29;
}
.nav-links a {
  text-decoration: none; color: var(--muted);
  font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .82rem;
  padding: 8px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ice); }
.nav-links .nav-book {
  color: #fff; background: var(--pink); padding: 9px 18px;
  border-radius: var(--radius); box-shadow: 0 0 18px rgba(250,12,107,.4);
}
.nav-links .nav-book:hover { color: #fff; background: var(--pink-hot); }

/* ---------- hero (logo is the star) ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 64px 24px 80px;
}
/* the synthwave sunset glow behind the logo */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(250,12,107,.34), rgba(251,103,44,.14) 42%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(127,212,245,.045) 22px 23px);
}
.hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.hero-logo {
  width: min(460px, 78vw); margin: 0 auto;
  filter: drop-shadow(0 10px 46px rgba(250, 12, 107, .45));
}
.hero-sub { color: #e0d9ee; font-size: 1.15rem; margin: 16px auto 26px; max-width: 520px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- trust strip (sunset gradient) ---------- */
.strip { background: var(--sunset); color: #fff; }
.strip-inner { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; padding: 15px 0; }
.strip-inner span {
  font-family: var(--font-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; font-size: .76rem;
  display: flex; align-items: center; gap: 9px;
}
.strip-inner span::before { content: "◆"; font-size: .7em; opacity: .85; }

/* ---------- sections ---------- */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--panel); }
.eyebrow {
  color: var(--ice); font-family: var(--font-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .3em; font-size: .76rem;
}
.sec-head { font-family: var(--font-head); font-weight: 600; font-size: 2rem; margin: 10px 0 8px; }
.sec-head .grad {
  background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-sub { color: var(--muted); margin-bottom: 30px; max-width: 54ch; }
.specialty {
  display: inline-block; margin-bottom: 26px; padding: 6px 14px;
  border: 1px solid var(--pink); color: var(--pink);
  font-family: var(--font-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  border-radius: var(--radius);
}

/* ---------- browse by style ---------- */
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.style {
  position: relative; height: 210px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px; text-decoration: none;
}
.style-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.style:hover .style-img { transform: scale(1.07); }
.style:hover { border-color: var(--pink); }
.style-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(10,6,18,.86)); }
.style-bar { position: relative; z-index: 2; }
.style-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.style-desc { display: block; color: var(--ice); font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin-top: 6px; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.stat-n { font-family: var(--font-head); font-weight: 600; font-size: 2.6rem; line-height: 1;
  background: linear-gradient(90deg, var(--ice), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { color: var(--muted); font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin-top: 8px; }

/* ---------- artists ---------- */
.artists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.artist { display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg); transition: border-color .15s ease, transform .15s ease; }
.artist:hover { border-color: var(--pink); transform: translateY(-3px); }
.artist:hover .artist-profile-link { color: var(--pink); }
.artist-photo { height: 300px; background-size: cover; background-position: center; }
.artist-info { padding: 18px; }
.artist-name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.artist-tag { color: var(--pink); font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin: 8px 0 10px; }
.artist-bio { color: var(--muted); font-size: .9rem; }

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.story-logo { display: flex; align-items: center; justify-content: center; padding: 30px;
  background: radial-gradient(circle, rgba(250,12,107,.18), transparent 70%); }
.story-logo img { width: 100%; max-width: 300px; }
.story-copy h2 { margin-bottom: 14px; }
.story-copy p { color: #c6bdd6; margin-bottom: 14px; }

/* ---------- closing CTA band ---------- */
.cta-band { background:
  radial-gradient(circle at 50% 120%, rgba(250,12,107,.22), transparent 60%), var(--bg); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0 24px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-links { list-style: none; display: flex; gap: 18px; }
.footer-links a { color: var(--muted); text-decoration: none; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.footer-links a:hover { color: var(--ice); }
.credit { text-align: center; color: var(--muted); opacity: .6; font-family: var(--font-label);
  letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; margin-top: 16px; }

/* ---------- contact form (used on contact.html) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  padding: 12px; font-family: var(--font-body); border-radius: var(--radius);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pink); }
.contact-info p { margin-bottom: 12px; }
.contact-info strong { color: var(--ice); font-family: var(--font-label); letter-spacing: .06em; display: block; text-transform: uppercase; font-size: .76rem; margin-bottom: 2px; }
.map-box { min-height: 200px; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(127,212,245,.05) 22px 23px), var(--panel); }

/* ---------- simple page hero (inner pages) ---------- */
.page-hero { padding: 54px 0 20px; }
.page-hero .eyebrow { display: block; margin-bottom: 8px; }
.page-hero h1 { font-family: var(--font-head); font-weight: 600; font-size: 2.6rem; }
.page-hero .grad { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- cards used on inner pages (about values, etc.) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .94rem; }
.about-img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.review blockquote { color: var(--ink); font-size: 1.02rem; }
.review figcaption { color: var(--muted); font-size: .88rem; margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; background: var(--panel); }
.faq-q { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.faq-a { color: var(--muted); font-size: .94rem; }

/* ---------- cookie banner ---------- */
/* CRITICAL: the [hidden] attribute must win over display:flex below,
   or clicking Accept/Decline sets hidden=true but the banner stays
   visible (looks like the buttons do nothing). */
.cookie-banner[hidden] { display: none !important; }

.cookie-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  width: calc(100% - 32px); max-width: 680px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.cookie-banner p { flex: 1 1 260px; color: var(--muted); font-size: .9rem; }
.cookie-banner .btn { padding: 10px 18px; font-size: .78rem; }

/* ---------- no-JS safety: if scripts fail, content still shows ---------- */
html:not(.js) .nav-links { display: flex; }

/* ============================================================
   MOBILE — one breakpoint. The desktop nav shows at 860px+.
   ============================================================ */
@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; align-items: center; gap: 26px; }
}
@media (max-width: 859px) {
  .styles, .artists, .reviews, .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .story, .contact-grid, .grid-2 { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 2rem; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ---------- artist pages ---------- */
.artist-specialty { color: var(--pink); font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .9rem; margin-top: 6px; }
.artist-profile-link { display: inline-block; margin-top: 12px; color: var(--ice);
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; text-decoration: none; }
.artist-profile-link:hover { color: var(--pink); }
.awork-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.awork { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.awork img { width: 100%; height: 220px; object-fit: cover; display: block; }
@media (max-width: 859px) { .awork-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- styles page: example galleries ---------- */
.style-blocks { display: flex; flex-direction: column; gap: 40px; }
.style-block-name { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; }
.style-block-name::after { content: ""; display: block; width: 44px; height: 3px;
  background: var(--sunset); margin-top: 8px; border-radius: 2px; }
.style-block-desc { color: var(--muted); margin: 10px 0 16px; max-width: 60ch; }
.style-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.style-examples img { width: 100%; height: 240px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 859px) { .style-examples { grid-template-columns: 1fr; } }

/* ---------- full-width tattoo work strip ---------- */
.work-strip { width: 100%; line-height: 0; background: var(--bg); }
.work-strip img { width: 100%; height: clamp(140px, 22vw, 300px); object-fit: cover; display: block; }

/* ============================================================
   TOC PAGES (The Shop, FAQ + Aftercare) — sticky left table of
   contents + scroll-tracking. Lets visitors jump to a section
   instead of scrolling.
   ============================================================ */
.toc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.toc {
  position: sticky; top: 92px; /* clears the fixed header */
  align-self: start;
}
.toc-title { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-link {
  display: block; padding: 8px 12px; border-left: 2px solid var(--line);
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.toc-link:hover { color: var(--ink); border-left-color: var(--pink); }
.toc-link.is-current {
  color: var(--ice); border-left-color: var(--pink);
  background: linear-gradient(90deg, rgba(254,12,107,.08), transparent);
}
/* each TOC-targeted section: offset so the fixed header doesn't cover the heading */
.toc-section { scroll-margin-top: 92px; padding-bottom: 8px; }
.toc-section + .toc-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }

/* Mobile: TOC becomes a horizontal scroll bar pinned under the header */
@media (max-width: 859px) {
  .toc-layout { grid-template-columns: 1fr; gap: 0; }
  .toc {
    position: sticky; top: 64px; z-index: 20; margin: 0 -24px 24px;
    padding: 10px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .toc-title { display: none; }
  .toc-list { flex-direction: row; gap: 6px; overflow-x: auto; }
  .toc-link { border-left: none; border-bottom: 2px solid var(--line); white-space: nowrap; padding: 6px 10px; }
  .toc-link.is-current { border-left: none; border-bottom-color: var(--pink); background: none; }
}

/* ---------- nav dropdown (FAQ + Aftercare) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { position: relative; padding-right: 16px; }
.nav-dropdown-toggle .nav-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.nav-caret { font-size: .7em; opacity: .8; transition: transform .15s ease; }
.nav-dropdown-menu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 170px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}
.nav-dropdown-link {
  display: block; padding: 9px 14px; border-radius: 7px;
  color: var(--muted); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: .92rem;
  text-transform: none; letter-spacing: normal; white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--pink); color: #fff; }

/* Desktop: open on hover */
@media (min-width: 860px) {
  .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
/* Mobile drawer: show inline (indented), no floating popover */
@media (max-width: 859px) {
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: 2px 0 2px 16px; min-width: 0;
  }
  .nav-caret { display: none; }
}