/* =====================================================================
   WALK THE LINE TATTOO CO. — Vintage Americana / Outlaw
   Hand-built stylesheet. No framework. Fully self-contained.
   Palette: aged paper, leather, oxblood, antique gold, ink black.
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Core palette */
  --ink:        #17120c;   /* warm near-black */
  --ink-soft:   #211a12;
  --leather:    #3a2718;   /* dark brown */
  --leather-2:  #4d3522;
  --paper:      #f4ecda;   /* aged cream (main light bg) */
  --paper-2:    #ece0c6;   /* deeper cream / cards */
  --paper-3:    #e2d2b2;   /* edges / wells */
  --oxblood:    #8a2521;   /* primary red accent / CTA */
  --oxblood-2:  #6f1c19;   /* hover */
  --gold:       #c2a14e;   /* brass / gold accent */
  --gold-2:     #9c7c33;
  --text:       #241b12;   /* main text on paper */
  --text-soft:  #5b4a36;   /* muted text on paper */
  --cream:      #f4ecda;   /* text on dark */
  --cream-soft: #d8c8a8;   /* muted text on dark */
  --line:       rgba(36,27,18,.16);
  --line-strong:rgba(36,27,18,.32);

  /* Type */
  --f-display: 'Alfa Slab One', Georgia, serif;
  --f-head:    'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'Merriweather', Georgia, serif;
  --f-type:    'Special Elite', 'Courier New', monospace;

  /* Rhythm */
  --maxw: 1200px;
  --gut: clamp(1.1rem, 4vw, 2rem);
  --r: 3px;           /* vintage = nearly-square corners */
  --shadow-sm: 0 1px 2px rgba(23,18,12,.18);
  --shadow:    0 14px 34px -18px rgba(23,18,12,.55);
  --shadow-lg: 0 30px 70px -30px rgba(23,18,12,.7);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ----------------------------- Reset ------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* Film-grain overlay across the whole site */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------- Layout ----------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ink   { background: var(--ink); color: var(--cream); }
.section--leather { background: linear-gradient(160deg, var(--leather), var(--ink)); color: var(--cream); }
.section--paper2 { background: var(--paper-2); }
.bleed { position: relative; }

/* Visually hidden */
.vh { position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link {
  position:absolute; left:50%; transform:translateX(-50%) translateY(-150%);
  top:8px; z-index:10000; background:var(--oxblood); color:var(--cream);
  padding:.6rem 1rem; font-family:var(--f-head); letter-spacing:.06em; text-transform:uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* ----------------------------- Type ------------------------------- */
h1,h2,h3,h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.06; letter-spacing: .01em; }
.display { font-family: var(--f-display); font-weight: 400; line-height: .98; letter-spacing: .005em; }

.eyebrow {
  font-family: var(--f-type);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  color: var(--oxblood);
  display: inline-flex; align-items: center; gap: .65rem;
}
.section--ink .eyebrow, .section--leather .eyebrow { color: var(--gold); }
.eyebrow::before, .eyebrow.dual::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7;
}
.eyebrow.solo::before { width: 18px; }

.h-xl { font-size: clamp(2.6rem, 7vw, 5rem); }
.h-lg { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.h-md { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); color: var(--text-soft); }
.section--ink .lead, .section--leather .lead { color: var(--cream-soft); }
.muted { color: var(--text-soft); }
.section--ink .muted, .section--leather .muted { color: var(--cream-soft); }
.center { text-align: center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
p + p { margin-top: 1rem; }

/* Section heading block */
.head-block { max-width: 62ch; }
.head-block.center { margin-inline: auto; }
.head-block .h-lg { margin-top: .7rem; }
.head-block p { margin-top: 1rem; }

/* The recurring "line" rule */
.rule {
  display: flex; align-items: center; gap: 1rem; color: var(--gold-2);
}
.rule::before, .rule::after { content:""; height:2px; flex:1; background:
  linear-gradient(90deg, transparent, currentColor, transparent); opacity:.55; }
.rule .star { color: var(--oxblood); flex: 0 0 auto; }
.section--ink .rule .star { color: var(--gold); }

/* ----------------------------- Buttons ---------------------------- */
.btn {
  --bg: var(--oxblood); --fg: var(--cream); --bd: var(--oxblood);
  --swp: var(--oxblood-2); --swp-fg: var(--cream);   /* ink-sweep fill + text on hover */
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; font-size: .9rem;
  padding: .95rem 1.7rem; min-height: 48px;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bd); border-radius: var(--r);
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .12s var(--ease);
  box-shadow: var(--shadow-sm);
}
/* the ink sweeps across the button on hover */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--swp);
  transform: translateX(-101%); transition: transform .42s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--swp-fg); border-color: var(--swp); box-shadow: var(--shadow); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico, .btn:focus-visible .ico { transform: translateX(3px); }

.btn--gold { --bg: var(--gold); --bd: var(--gold); --fg: var(--ink); --swp: var(--gold-2); --swp-fg: var(--ink); }
/* light sheen sweeps across the gold CTA — like brass catching the light */
.btn--gold::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -80%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn--gold:hover::after, .btn--gold:focus-visible::after { opacity: 1; animation: sheen .9s var(--ease); }
@keyframes sheen { from { left: -80%; } to { left: 130%; } }

.btn--ghost { --bg: transparent; --fg: var(--text); --bd: var(--line-strong); --swp: var(--text); --swp-fg: var(--paper); box-shadow: none; }
.section--ink .btn--ghost, .section--leather .btn--ghost,
.hero .btn--ghost, .ctaband .btn--ghost, .pagehero .btn--ghost { --fg: var(--cream); --bd: rgba(244,236,218,.45); --swp: var(--cream); --swp-fg: var(--ink); }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.btn-row.center { justify-content:center; }

.txtlink {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: .1em;
  font-size: .85rem; color: var(--oxblood); display:inline-flex; align-items:center; gap:.5rem;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease), color .2s var(--ease);
}
.txtlink:hover { border-color: var(--oxblood); gap: .8rem; }
.section--ink .txtlink, .section--leather .txtlink { color: var(--gold); }
.section--ink .txtlink:hover, .section--leather .txtlink:hover { border-color: var(--gold); }
.txtlink .ico { width: 16px; height: 16px; }

/* ----------------------------- Header ----------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(23,18,12,.96);
  color: var(--cream);
  border-bottom: 1px solid rgba(194,161,78,.28);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled { box-shadow: 0 10px 30px -16px rgba(0,0,0,.8); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: .7rem; color: var(--cream); }
.brand__mark { width: 42px; height: 42px; flex: 0 0 auto; color: var(--gold); }
.brand__name { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; line-height: 1.05; font-weight: 600; }
.brand__name small { display:block; font-family: var(--f-type); letter-spacing:.2em; font-size:.56rem; color: var(--gold); margin-top:2px; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem,2.4vw,2rem); }
.nav__links a {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; color: var(--cream-soft); padding: .4rem 0; position: relative;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--gold); }
.nav__cta { display: flex; align-items: center; gap: .8rem; }
.nav__cta .btn { padding: .7rem 1.2rem; min-height: 44px; }

.nav__toggle { display: none; width: 46px; height: 46px; align-items:center; justify-content:center; color: var(--cream); border:1px solid rgba(244,236,218,.3); border-radius: var(--r); }
.nav__toggle svg { width: 24px; height: 24px; }

@media (max-width: 920px) {
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink); border-bottom: 1px solid rgba(194,161,78,.28);
    display: grid; gap: .25rem; padding: 1rem var(--gut) 1.4rem;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .nav__panel.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: .85rem .2rem; border-bottom: 1px solid rgba(244,236,218,.1); font-size: .95rem; }
  .nav__links a::after { display:none; }
  .nav__cta { margin-top: 1rem; }
  .nav__cta .btn { width: 100%; }
}
@media (min-width: 921px) {
  .nav__panel { display: contents; }
}

/* ----------------------------- Hero ------------------------------- */
.hero {
  position: relative; color: var(--cream);
  background: var(--ink);
  overflow: hidden;
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; z-index:0; }
.hero__bg::after { /* darkening + vignette so the left-aligned headline stays legible */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(20,15,10,.93) 0%, rgba(20,15,10,.62) 42%, rgba(20,15,10,.30) 100%),
    radial-gradient(120% 90% at 80% 12%, rgba(138,37,33,.34), transparent 55%),
    linear-gradient(180deg, rgba(23,18,12,.30), rgba(23,18,12,.70) 80%, var(--ink));
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(4.5rem, 11vw, 9rem); }
.hero__inner .eyebrow { color: var(--gold); }
.hero h1 { margin-top: 1rem; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.hero h1 .accent { color: var(--gold); }
.hero .lead { max-width: 54ch; margin-top: 1.4rem; }
.hero .btn-row { margin-top: 2.2rem; }
.hero__meta { display:flex; flex-wrap:wrap; gap: 1.4rem 2.2rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(244,236,218,.18); }
.hero__meta .item { display:flex; align-items:center; gap:.7rem; }
.hero__meta .ico { width: 22px; height: 22px; color: var(--gold); flex:0 0 auto; }
.hero__meta .k { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color: var(--cream-soft); }
.hero__meta .v { font-family: var(--f-head); font-size: 1rem; }

/* ----------------------------- Marquee ---------------------------- */
.marquee {
  background: var(--oxblood); color: var(--cream); overflow: hidden;
  border-block: 2px solid var(--gold-2);
}
.marquee__track {
  display: flex; gap: 2.5rem; width: max-content;
  padding: .7rem 0; animation: slide 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; display:flex; align-items:center; gap: 2.5rem; }
.marquee__item .dot { color: var(--gold); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content:center; } }

/* ----------------------------- Cards / Frames --------------------- */
.frame { border: 1px solid var(--line-strong); border-radius: var(--r); position: relative; }
.frame--double::before {
  content:""; position:absolute; inset:5px; border:1px solid var(--line); border-radius: 1px; pointer-events:none;
}

/* Image placeholder — clearly marked, on-theme, replaceable */
.ph {
  position: relative; overflow: hidden; background: var(--leather);
  color: var(--cream-soft); border-radius: var(--r);
  display: grid; place-items: center; isolation: isolate;
}
.ph::before { /* texture */
  content:""; position:absolute; inset:0; z-index:0; opacity:.9;
  background:
    radial-gradient(140% 120% at 30% 0%, rgba(194,161,78,.18), transparent 45%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.16) 0 12px, rgba(0,0,0,0) 12px 24px),
    linear-gradient(160deg, var(--leather-2), var(--ink));
}
.ph__body { position: relative; z-index:1; text-align:center; padding: 1.2rem; display:grid; gap:.55rem; justify-items:center; }
.ph__body .flash { width: 54px; height: 54px; color: var(--gold); opacity: .9; }
.ph__tag { font-family: var(--f-type); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); }
.ph__cap { font-family: var(--f-head); font-size: .9rem; letter-spacing:.04em; color: var(--cream); }
.ph[data-ar="1/1"]{aspect-ratio:1/1}.ph[data-ar="4/5"]{aspect-ratio:4/5}.ph[data-ar="3/4"]{aspect-ratio:3/4}
.ph[data-ar="4/3"]{aspect-ratio:4/3}.ph[data-ar="3/2"]{aspect-ratio:3/2}.ph[data-ar="16/9"]{aspect-ratio:16/9}

/* When a real image is dropped in, just add <img> inside .ph and it fills */
.ph > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
/* Black-and-white photo treatment (vintage). Harmless no-op on already-B&W images. */
.bw { filter: grayscale(1) contrast(1.04) brightness(.98); }

/* ----------------------------- Feature cards ---------------------- */
.cards { display: grid; gap: 1.4rem; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow); border-color: var(--gold-2); }
.card__ico { width: 48px; height: 48px; color: var(--oxblood); margin-bottom: 1rem; }
.card h3 { font-size: 1.18rem; letter-spacing:.02em; }
.card p { margin-top: .55rem; color: var(--text-soft); font-size: .98rem; }
.section--ink .card, .section--leather .card { background: rgba(244,236,218,.05); border-color: rgba(244,236,218,.14); }
.section--ink .card p { color: var(--cream-soft); }
.section--ink .card__ico { color: var(--gold); }

/* Numbered steps */
.steps { counter-reset: step; display:grid; gap:1.4rem; }
.step { display:grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items:start; }
.step__n {
  counter-increment: step; width: 56px; height: 56px; flex:0 0 auto;
  display:grid; place-items:center; border-radius: 50%;
  border: 2px solid var(--gold); color: var(--gold);
  font-family: var(--f-display); font-size: 1.4rem;
}
.step__n::before { content: counter(step,decimal-leading-zero); }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--text-soft); margin-top:.35rem; }
.section--ink .step p { color: var(--cream-soft); }

/* ----------------------------- Gallery ---------------------------- */
.filterbar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.filter {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing:.1em; font-size:.78rem;
  padding:.6rem 1.1rem; min-height:44px; border:1px solid var(--line-strong); border-radius: 999px;
  color: var(--text-soft); background: var(--paper-2);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter:hover { border-color: var(--oxblood); color: var(--oxblood); }
.filter.active { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }

.masonry { columns: 3 260px; column-gap: 1.1rem; }
.masonry .tile { break-inside: avoid; margin-bottom: 1.1rem; }
.tile {
  position: relative; border-radius: var(--r); overflow: hidden; cursor: pointer;
  border:1px solid var(--line); background: var(--leather);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover { box-shadow: var(--shadow); }
.tile .ph { border-radius: 0; }
.tile__overlay {
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1rem; gap:.2rem; opacity:0;
  background: linear-gradient(0deg, rgba(23,18,12,.86), rgba(23,18,12,.1) 55%, transparent);
  transition: opacity .25s var(--ease);
}
.tile:hover .tile__overlay, .tile:focus-within .tile__overlay { opacity: 1; }
.tile__overlay .style { font-family: var(--f-type); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); }
.tile__overlay .by { font-family: var(--f-head); color: var(--cream); font-size:.98rem; }
.tile.hide { display:none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(13,10,7,.94); place-items: center; padding: 4vw;
}
.lightbox.open { display: grid; }
.lightbox__stage { max-width: min(900px, 92vw); width:100%; }
.lightbox figure { background: var(--paper); border:1px solid var(--gold-2); border-radius: var(--r); overflow:hidden; }
.lightbox .ph { aspect-ratio: 4/5; }
.lightbox figcaption { background: var(--paper); color: var(--text); padding: 1rem 1.2rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.lightbox figcaption .style { font-family: var(--f-type); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--oxblood); }
.lightbox figcaption .by { font-family: var(--f-head); }
.lb-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; display:grid; place-items:center;
  background: rgba(244,236,218,.1); color: var(--cream); border:1px solid rgba(244,236,218,.3); border-radius: 50%;
  transition: background .2s var(--ease);
}
.lb-btn:hover { background: var(--oxblood); }
.lb-prev { left: 3vw; } .lb-next { right: 3vw; }
.lb-close { position: fixed; top: 3vw; right: 3vw; transform:none; }
.lb-btn svg { width: 24px; height: 24px; }
@media (max-width:640px){ .lb-prev{left:1rem}.lb-next{right:1rem}.lb-close{top:1rem;right:1rem} }

/* ----------------------------- Artists ---------------------------- */
.artist {
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.artist:hover { box-shadow: var(--shadow); border-color: var(--gold-2); }
.artist .ph { aspect-ratio: 4/5; }
.artist__body { padding: 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.artist__body h3 { font-size: 1.35rem; }
.artist__role { font-family: var(--f-type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--oxblood); }
.artist__body p { color: var(--text-soft); font-size:.96rem; }
.artist__tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.tag { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; padding:.3rem .6rem; border:1px solid var(--line-strong); border-radius:999px; color: var(--text-soft); }
.artist__foot { margin-top:auto; padding-top: 1rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; border-top:1px solid var(--line); }
.icolink { display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px; border:1px solid var(--line-strong); border-radius:var(--r); color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.icolink:hover { background: var(--ink); color: var(--cream); }
.icolink svg { width:20px;height:20px; }

/* ----------------------------- Split media ------------------------ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem); align-items:center; }
.split--rev .split__media { order: 2; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split__media .ph { aspect-ratio: 4/5; box-shadow: var(--shadow); }
.statline { display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem; margin-top: 1.8rem; }
.stat .n { font-family: var(--f-display); font-size: clamp(2rem,4vw,2.8rem); color: var(--oxblood); line-height:1; }
.section--ink .stat .n, .section--leather .stat .n { color: var(--gold); }
.stat .l { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color: var(--text-soft); margin-top:.35rem; }
.section--ink .stat .l, .section--leather .stat .l { color: var(--cream-soft); }

/* ----------------------------- Testimonials ----------------------- */
.quotes { display:grid; gap:1.4rem; grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }
.quote { background: rgba(244,236,218,.05); border:1px solid rgba(244,236,218,.14); border-radius:var(--r); padding:1.8rem; position:relative; }
.quote .stars { display:flex; gap:.2rem; color: var(--gold); margin-bottom: .9rem; }
.quote .stars svg { width:18px;height:18px; }
.quote p { font-style: italic; color: var(--cream); }
.quote .who { margin-top: 1.1rem; font-family: var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color: var(--gold); }

/* ----------------------------- CTA band --------------------------- */
.ctaband { background: linear-gradient(160deg, var(--oxblood), var(--oxblood-2)); color: var(--cream); text-align:center; border-block:2px solid var(--gold-2); }
.ctaband .h-lg { color: var(--cream); }
.ctaband .lead { color: rgba(244,236,218,.85); margin-inline:auto; max-width: 50ch; }
.ctaband .btn--gold { box-shadow: var(--shadow); }

/* ----------------------------- Info / hours ----------------------- */
.info-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items:start; }
@media (max-width:860px){ .info-grid { grid-template-columns:1fr; } }
.hours { width:100%; border-collapse:collapse; }
.hours th, .hours td { text-align:left; padding:.75rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
.hours th { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.85rem; }
.hours td { text-align:right; font-family: var(--f-head); }
.hours tr.closed td, .hours tr.closed th { color: var(--text-soft); }
.hours tr.today { color: var(--oxblood); }
.hours tr.today th, .hours tr.today td { font-weight:700; }
.badge-open { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; padding:.4rem .8rem; border-radius:999px; }
.badge-open.is-open { background: rgba(56,110,60,.16); color:#2f6b35; border:1px solid #2f6b35; }
.badge-open.is-closed { background: rgba(138,37,33,.12); color: var(--oxblood); border:1px solid var(--oxblood); }
.badge-open .dot { width:9px;height:9px;border-radius:50%;background:currentColor; }

.contact-list { display:grid; gap:1.1rem; }
.contact-list .row { display:flex; gap:1rem; align-items:flex-start; }
.contact-list .ico { width:24px;height:24px;color:var(--oxblood);flex:0 0 auto;margin-top:2px; }
.contact-list .k { font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color: var(--text-soft); }
.contact-list .v { font-size:1.05rem; }
.contact-list a.v:hover { color: var(--oxblood); }

.mapframe { width:100%; aspect-ratio: 16/10; border:1px solid var(--line-strong); border-radius:var(--r); filter: sepia(.25) contrast(1.02); }

/* ----------------------------- Forms ------------------------------ */
.form { display:grid; gap:1.2rem; }
.field { display:grid; gap:.4rem; }
.field label { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; color: var(--text); }
.field .req { color: var(--oxblood); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--text);
  background: var(--paper); border:1px solid var(--line-strong); border-radius:var(--r);
  padding: .85rem .95rem; width:100%; min-height:48px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(138,37,33,.15); outline: none; }
.field .hint { font-size:.82rem; color: var(--text-soft); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--oxblood); background: #fbeeec; }
.field .err { color: var(--oxblood); font-size:.82rem; font-family: var(--f-head); letter-spacing:.04em; display:none; }
.field.invalid .err { display:block; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:560px){ .grid-2 { grid-template-columns:1fr; } }
.form__note { font-size:.86rem; color: var(--text-soft); }
.form__success {
  display:none; gap:.9rem; align-items:flex-start;
  background: rgba(56,110,60,.1); border:1px solid #2f6b35; color:#234f29; border-radius:var(--r); padding:1.2rem 1.3rem;
}
.form__success.show { display:flex; }
.form__success svg { width:26px;height:26px;color:#2f6b35;flex:0 0 auto; }
fieldset { border:none; padding:0; }
.choice-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span {
  display:block; text-align:center; padding:.8rem .6rem; border:1px solid var(--line-strong); border-radius:var(--r);
  font-family: var(--f-head); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color: var(--text-soft);
  background: var(--paper); transition: all .15s var(--ease); min-height:48px; display:flex; align-items:center; justify-content:center;
}
.choice:hover span { border-color: var(--oxblood); color: var(--oxblood); }
.choice input:checked + span { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.choice input:focus-visible + span { outline:3px solid var(--gold); outline-offset:2px; }

/* ----------------------------- FAQ -------------------------------- */
.faq { display:grid; gap:.8rem; }
.faq details {
  background: var(--paper-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--gold-2); }
.faq summary {
  list-style:none; cursor:pointer; padding:1.2rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family: var(--f-head); font-size:1.08rem; letter-spacing:.01em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { width:24px;height:24px;flex:0 0 auto;color:var(--oxblood); transition: transform .25s var(--ease); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 1.3rem 1.3rem; color: var(--text-soft); }
.faq .ans p + p { margin-top:.7rem; }

/* Aftercare do/don't */
.dd { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:760px){ .dd { grid-template-columns:1fr; } }
.dd__col { background: var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; }
.dd__col h3 { display:flex; align-items:center; gap:.6rem; font-size:1.2rem; }
.dd__col h3 .ico { width:26px;height:26px; }
.dd__col.do h3 .ico { color:#2f6b35; }
.dd__col.dont h3 .ico { color: var(--oxblood); }
.checklist { display:grid; gap:.8rem; margin-top:1.1rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; color: var(--text); }
.checklist li .ico { width:20px;height:20px;flex:0 0 auto;margin-top:3px; }
.do .checklist li .ico { color:#2f6b35; }
.dont .checklist li .ico { color: var(--oxblood); }

/* ----------------------------- Page hero (interior) --------------- */
.pagehero { background: linear-gradient(160deg, var(--leather), var(--ink)); color: var(--cream); position:relative; overflow:hidden; }
.pagehero::after { content:""; position:absolute; inset:0; background: radial-gradient(100% 80% at 80% 0%, rgba(138,37,33,.28), transparent 55%); }
.pagehero__inner { position:relative; z-index:1; padding-block: clamp(3.2rem,8vw,5.5rem); }
.pagehero .eyebrow { color: var(--gold); }
.pagehero h1 { margin-top:.8rem; }
.pagehero p { margin-top:1rem; max-width: 60ch; color: var(--cream-soft); }
.crumbs { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color: var(--cream-soft); display:flex; gap:.5rem; align-items:center; }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { color: var(--gold); }

/* ----------------------------- Footer ----------------------------- */
.site-footer { background: var(--ink); color: var(--cream-soft); border-top: 3px solid var(--oxblood); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-block: clamp(3rem,6vw,4.5rem); }
@media (max-width:900px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; color: var(--gold); margin-bottom:1.1rem; }
.footer-grid a { color: var(--cream-soft); transition: color .2s var(--ease); }
.footer-grid a:hover { color: var(--cream); }
.footer-grid li + li { margin-top:.6rem; }
.footer-brand .brand { margin-bottom:1rem; }
.footer-brand p { font-size:.95rem; max-width: 34ch; }
.socials { display:flex; gap:.6rem; margin-top:1.2rem; }
.socials a { width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(244,236,218,.2);border-radius:var(--r);color:var(--cream-soft); transition: all .2s var(--ease); }
.socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.socials svg { width:20px;height:20px; }
.footer-bottom { border-top:1px solid rgba(244,236,218,.12); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between; align-items:center; font-size:.82rem; }
.footer-bottom a:hover { color: var(--gold); }
.footer-note { font-family: var(--f-type); letter-spacing:.04em; }

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

/* ----------------------------- Utilities -------------------------- */
.stack > * + * { margin-top: 1rem; }
.divider { height:1px; background: var(--line); margin-block: 2rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.pill { font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-soft); }
.section--ink .pill, .section--leather .pill { border-color: rgba(244,236,218,.25); color: var(--cream-soft); }

/* ===================================================================
   INTERACTIONS & MOTION
   Tattoo-themed but restrained. All disabled under prefers-reduced-motion
   via the global cap at the top of this file.
   =================================================================== */

/* Cursor glow — a soft warm light trailing the pointer. Brightest on the dark
   sections; near-invisible on cream (screen blend). Mouse devices only. */
.cursor-glow {
  position: fixed; inset: 0; z-index: 95; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  mix-blend-mode: screen;
  background: radial-gradient(260px circle at var(--mx, -200px) var(--my, -200px),
    rgba(232,194,116,.30), rgba(216,174,96,.17) 30%, rgba(138,37,33,.10) 55%, transparent 75%);
}
.cursor-glow.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* Scroll "line" — fills as you move down the page (walk the line). */
.scroll-line {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--gold), var(--oxblood));
  box-shadow: 0 0 10px rgba(194,161,78,.5);
  transition: width .08s linear; pointer-events: none;
}

/* Hero photo — slow Ken Burns drift so the background feels alive. */
.hero__img { animation: kenburns 26s ease-in-out alternate infinite; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.13); } }

/* Scattered see-through flash sheets — like sketches taped around a shop wall.
   Sit behind the headline (z-index 0, above the photo), faint + casually rotated. */
.hero__sheets {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--maxw)); z-index: 0; pointer-events: none; overflow: hidden;
}
.sheet {
  position: absolute; left: var(--x); top: var(--y); margin: 0;
  width: var(--w, 130px); aspect-ratio: var(--ar, 3/4);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  border-radius: 10px; overflow: hidden;
  background: #f4ede1;
  border: 1px solid rgba(244,236,218,.22);
  box-shadow: 0 18px 36px -16px rgba(0,0,0,.78);
  opacity: .6;                  /* see-through, but the detail still reads */
}
.sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) { .hero__sheets { display: none; } }   /* only show where there's room beside the copy */

/* Hanging tattoo flash — gold motifs swing from strings like pinned flash sheets.
   Idle sway is CSS; scroll-reactive swing is JS (sets --swing per piece). */
.hero__flash {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--maxw)); z-index: 1; pointer-events: none;
}
.flash-hang {
  position: absolute; top: 0; left: var(--x);
  transform: translateX(-50%) rotate(var(--swing, 0deg));
  transform-origin: 50% 0;
}
.flash-hang__inner {
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
  animation: flash-sway var(--dur, 4.5s) ease-in-out var(--d, 0s) infinite alternate;
}
.flash-hang__hook { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(23,18,12,.5); }
.flash-hang__string { width: 2px; height: var(--len, 90px); background: linear-gradient(var(--gold), rgba(194,161,78,.12)); border-radius: 2px; margin-top: -1px; }
.flash-hang__art { margin-top: -2px; line-height: 0; }
.flash-hang__art svg { width: var(--size, 70px); height: var(--size, 70px); color: var(--gold); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
@keyframes flash-sway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
@media (prefers-reduced-motion: reduce) { .flash-hang__inner { animation: none; } }
@media (max-width: 860px) { .hero__flash { display: none; } }   /* keep the mobile hero clean */

/* Service / specialty cards — flash motif "draws in" and warms to gold on hover. */
.card__ico { transition: color .3s var(--ease), transform .3s var(--ease); }
.card:hover .card__ico {
  color: var(--gold); transform: scale(1.06) rotate(-3deg);
  animation: ink-draw .7s var(--ease);
}
.section--ink .card:hover .card__ico { color: var(--cream); }
@keyframes ink-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.card { transform: translateZ(0); }
.card:hover { transform: translateY(-4px); }

/* Gallery tiles — image zoom + the flash placeholder lifts on hover. */
.tile .ph > img { transition: transform .6s var(--ease), filter .4s var(--ease); }
.tile:hover .ph > img { transform: scale(1.06); }
.tile .ph .ph__body { transition: transform .4s var(--ease); }
.tile:hover .ph .ph__body { transform: translateY(-4px) scale(1.04); }

/* Artist cards — portrait lifts subtly behind the frame. */
.artist .ph .ph__body, .artist .ph > img { transition: transform .5s var(--ease); }
.artist:hover .ph > img { transform: scale(1.05); }
.artist:hover { transform: translateY(-4px); }
.artist { transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease); }

/* Live "Open now" dot — gentle pulse so it reads as a live status. */
.badge-open.is-open .dot { animation: pulse-dot 2.2s ease-out infinite; }
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,53,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(47,107,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,107,53,0); }
}

/* Reveal stagger — children of a grid fade up in sequence. */
.cards .reveal:nth-child(2){ transition-delay:.06s }
.cards .reveal:nth-child(3){ transition-delay:.12s }
.cards .reveal:nth-child(4){ transition-delay:.18s }
.cards .reveal:nth-child(5){ transition-delay:.24s }
.cards .reveal:nth-child(6){ transition-delay:.30s }

/* Social / icon links — playful tilt on hover. */
.socials a:hover svg, .icolink:hover svg { transform: rotate(-8deg) scale(1.08); }
.socials a svg, .icolink svg { transition: transform .25s var(--ease); }

/* Count-up numbers shouldn't reflow while animating. */
.stat .n { font-variant-numeric: tabular-nums; }

/* ===================================================================
   TOUCH / MOBILE
   Hover effects don't fire on touch, so give tap feedback and surface
   the things that were hover-only.
   =================================================================== */
@media (hover: none), (pointer: coarse) {
  /* Gallery captions are hover-only on desktop — always show them on touch. */
  .tile__overlay { opacity: 1; background: linear-gradient(0deg, rgba(23,18,12,.85), rgba(23,18,12,.05) 55%, transparent); }
  /* Press feedback for cards/tiles since there's no hover state. */
  .card:active, .artist:active { transform: translateY(-2px); box-shadow: var(--shadow); }
  .tile:active { box-shadow: var(--shadow); }
  /* Keep the cursor glow off entirely (also gated in JS). */
  .cursor-glow { display: none; }
}
/* Tap feedback on the small controls. */
.filter:active, .icolink:active, .txtlink:active { transform: translateY(1px); }

/* A touch more breathing room at the smallest sizes. */
@media (max-width: 400px) {
  .hero__meta { gap: 1rem 1.6rem; }
  .btn-row .btn { width: 100%; }            /* full-width CTAs are easier to tap */
  .btn-row { gap: .7rem; }
}