/* Hallmark · macrostructure: Gallery Marquee · tone: dark American-traditional tattoo · anchor hue: traditional-red (27deg) · studied: yes · DNA-source: image (inspiration/ref.png) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* paper / surfaces */
  --color-paper:    oklch(16% 0.012 60);
  --color-paper-2:  oklch(21% 0.014 55);
  --color-paper-3:  oklch(26% 0.016 50);
  /* ink / text */
  --color-ink:      oklch(94% 0.012 85);
  --color-ink-2:    oklch(73% 0.012 75);
  --color-ink-3:    oklch(55% 0.010 70);
  /* accent */
  --color-accent:   oklch(57% 0.195 27);
  --color-accent-d: oklch(50% 0.185 27);
  --color-gold:     oklch(80% 0.095 78);
  /* lines */
  --color-line:     oklch(30% 0.010 60);
  --color-line-2:   oklch(38% 0.012 55);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  --wrap: 1240px;
  --space-2xs: 6px; --space-xs: 12px; --space-sm: 20px; --space-md: 32px;
  --space-lg: 56px; --space-xl: 88px; --space-2xl: 132px;

  --text-eyebrow: .82rem;
  --text-display: clamp(3.2rem, 9vw, 7.6rem);
  --text-h2: clamp(2.3rem, 5.2vw, 4.4rem);
  --text-h3: clamp(1.5rem, 2.6vw, 2.1rem);
  --text-stat: clamp(5rem, 18vw, 15rem);

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in:  cubic-bezier(.5,0,.8,.3);
  --ease-in-out: cubic-bezier(.6,0,.3,1);

  --dur: .5s;
  --radius: 4px;
}

*{ box-sizing:border-box; margin:0; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,1.05vw,1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:.94; letter-spacing:-.005em; overflow-wrap:break-word; word-break:normal; hyphens:none; min-width:0; text-wrap:balance; }
::selection{ background:var(--color-accent); color:var(--color-ink); }

/* ---- texture overlays ---- */
.grain, .vignette{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.grain{
  opacity:.05; mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{ background:radial-gradient(120% 90% at 50% 0%, transparent 55%, oklch(10% 0.01 60 / .55) 100%); }

/* ---- layout ---- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.full{ width:100%; }
section{ position:relative; z-index:2; }
.eyebrow{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:var(--text-eyebrow); color:var(--color-accent);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--color-gold); display:inline-block; }
.lead{ color:var(--color-ink-2); font-size:clamp(1.05rem,1.4vw,1.25rem); max-width:54ch; text-wrap:pretty; }

/* ---- buttons ---- */
.btn{
  --bg:var(--color-accent); --fg:var(--color-ink);
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:1.05rem; padding:.85em 1.5em; border-radius:var(--radius);
  background:var(--bg); color:var(--fg); border:2px solid var(--bg); cursor:pointer;
  transition:transform .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn svg{ width:1.1em; height:1.1em; }
.btn:hover{ background:var(--color-accent-d); border-color:var(--color-accent-d); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--color-ink); border-color:var(--color-line-2); }
.btn--ghost:hover{ background:transparent; border-color:var(--color-ink); transform:translateY(-2px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible{ outline:2px solid var(--color-gold); outline-offset:3px; }

/* ---- nav (scroll-morph) ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:18px clamp(20px,5vw,40px);
  transition:background .35s var(--ease-out), padding .35s var(--ease-out), border-color .35s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:oklch(14% 0.012 60 / .92); backdrop-filter:blur(10px); padding:12px clamp(20px,5vw,40px); border-bottom-color:var(--color-line); }
.nav__brand{ display:flex; align-items:center; gap:.7em; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; line-height:.95; }
.nav__brand img{ width:40px; height:auto; filter:invert(1) brightness(1.4); }
.nav__brand span{ max-width:11ch; }
.nav__links{ display:flex; align-items:center; gap:var(--space-md); }
.nav__links a{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; color:var(--color-ink-2); position:relative; transition:color .2s var(--ease-out); }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--color-accent); transition:right .3s var(--ease-out); }
.nav__links a:hover{ color:var(--color-ink); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__phone{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.02em; color:var(--color-ink); }
.nav__menu-links{ display:flex; gap:var(--space-md); }

/* ---- hero ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-bottom:var(--space-xl); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 35%; }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, oklch(12% .012 60 / .92) 0%, oklch(12% .012 60 / .6) 42%, oklch(12% .012 60 / .15) 100%),
             linear-gradient(0deg, oklch(12% .012 60 / .9) 0%, transparent 55%); }
.hero__inner{ position:relative; z-index:2; max-width:none; }
.hero__content{ max-width:min(680px,92vw); text-shadow:0 2px 30px oklch(10% .01 60 / .55); }
.hero h1{ font-size:clamp(3rem,7.4vw,6rem); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin:.28em 0 .35em; }
.hero h1 em{ font-style:normal; color:var(--color-accent); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-md); }
.hero__loc{ margin-top:var(--space-md); color:var(--color-ink-2); font-size:.98rem; }
.hero__scroll{ position:absolute; right:clamp(20px,5vw,40px); bottom:var(--space-lg); z-index:2; writing-mode:vertical-rl; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.3em; font-size:.78rem; color:var(--color-ink-3); }

/* ---- trust strip (shop-window decal marquee) ---- */
.trust{ border-block:1px solid var(--color-line); background:var(--color-paper-2); overflow:hidden; }
.trust__marquee{ display:flex; width:max-content; padding-block:16px; }
.trust__track{
  display:flex; align-items:center; flex:none; list-style:none; margin:0; padding:0;
  font-family:var(--font-display); text-transform:uppercase;
  font-size:1.18rem; font-weight:600; letter-spacing:.06em; line-height:1;
  color:var(--color-ink);
}
.trust__item{ display:flex; align-items:baseline; white-space:nowrap; padding-inline:clamp(20px,4vw,44px); }
.trust__num{ color:var(--color-accent); font-weight:700; letter-spacing:.02em; margin-right:.45em; }
.trust__sep{ flex:none; color:var(--color-gold); font-size:.85em; opacity:.8; }
.trust__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:no-preference){
  .trust__track{ animation:trust-scroll 38s linear infinite; }
  .trust:hover .trust__track{ animation-play-state:paused; }
}
@keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ---- section head ---- */
.head{ display:flex; flex-direction:column; gap:var(--space-sm); margin-bottom:var(--space-lg); max-width:60ch; }
.head h2{ font-size:var(--text-h2); }
.head h2 em{ font-style:normal; color:var(--color-accent); }

/* ---- work gallery ---- */
.work{ padding-block:var(--space-2xl) var(--space-xl); }
.gallery{ columns: 3; column-gap:18px; }
.gallery figure{ break-inside:avoid; margin:0 0 18px; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--color-paper-2); }
.gallery img{ width:100%; transition:transform .6s var(--ease-out), filter .4s var(--ease-out); filter:saturate(.96); }
.gallery figure::after{ content:""; position:absolute; inset:0; border:1px solid oklch(100% 0 0 / 0); transition:border-color .35s var(--ease-out); border-radius:var(--radius); pointer-events:none; }
.gallery figure:hover img{ transform:scale(1.05); filter:saturate(1.08); }
.gallery figure:hover::after{ border-color:var(--color-accent); }

/* ---- full-bleed studio band ---- */
.band{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__bg img{ width:100%; height:100%; object-fit:cover; }
.band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, oklch(12% .012 60 / .94) 0%, oklch(12% .012 60 / .72) 50%, oklch(12% .012 60 / .4) 100%); }
.band__content{ position:relative; z-index:2; max-width:34ch; }
.band h2{ font-size:var(--text-h2); margin:.3em 0 .4em; }
.band h2 em{ font-style:normal; color:var(--color-accent); }

/* ---- artists ---- */
.artists{ padding-block:var(--space-2xl); }
.artist-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.artist{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); border:1px solid var(--color-line); }
.artist img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); filter:grayscale(.25) brightness(.85); }
.artist::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, oklch(10% .01 60 / .92) 8%, transparent 60%); }
.artist:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(.95); }
.artist__meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--space-sm); }
.artist__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.55rem; line-height:.95; }
.artist__role{ color:var(--color-ink-2); font-size:.88rem; margin-top:4px; }
.artist__link{ display:inline-flex; align-items:center; gap:.4em; margin-top:10px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--color-accent); }
.artist__link svg{ width:1em; height:1em; transition:transform .25s var(--ease-out); }
.artist:hover .artist__link svg{ transform:translateX(4px); }

/* ---- stat moment ---- */
.stat{ text-align:center; padding-block:var(--space-2xl); border-block:1px solid var(--color-line); background:
  radial-gradient(80% 120% at 50% 0%, var(--color-paper-2) 0%, var(--color-paper) 70%); }
.stat__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(5rem,16vw,13rem); line-height:.82; letter-spacing:-.02em; }
.stat__num .star{ color:var(--color-gold); }
.stat__sub{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em; color:var(--color-ink-2); margin-top:var(--space-sm); font-size:clamp(.9rem,1.4vw,1.1rem); }
.stat__line{ color:var(--color-ink-2); max-width:46ch; margin:var(--space-md) auto 0; }
.stat__link{ display:inline-flex; gap:.5em; margin-top:var(--space-md); color:var(--color-accent); border-bottom:1px solid var(--color-accent); padding-bottom:2px; font-weight:600; }

/* ---- faq ---- */
.faq{ padding-block:var(--space-2xl); }
.faq__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,90px); align-items:start; }
.faq__list{ border-top:1px solid var(--color-line); }
.faq details{ border-bottom:1px solid var(--color-line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:var(--space-md) 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:0; transition:color .2s var(--ease-out); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--color-accent); }
.faq__icon{ flex:none; width:26px; height:26px; position:relative; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--color-accent); transition:transform .3s var(--ease-out); }
.faq__icon::after{ transform:rotate(90deg); }
.faq details[open] .faq__icon::after{ transform:rotate(0); }
.faq__body{ overflow:hidden; }
.faq__body p{ padding:0 0 var(--space-md); color:var(--color-ink-2); max-width:58ch; }
.faq details[open] .faq__body{ animation:reveal-faq .4s var(--ease-out); }
@keyframes reveal-faq{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---- cta band ---- */
.cta{ padding-block:var(--space-2xl); position:relative; }
.cta__inner{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-lg);
  border:1px solid var(--color-line); border-radius:8px; padding:clamp(32px,5vw,72px); background:var(--color-paper-2); }
.cta h2{ font-size:var(--text-h2); }
.cta h2 em{ font-style:normal; color:var(--color-accent); }
.cta__addr{ color:var(--color-ink-2); margin-top:var(--space-sm); font-size:1.05rem; }
.cta__addr strong{ color:var(--color-ink); font-weight:600; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---- footer ---- */
.footer{ border-top:1px solid var(--color-line); padding-block:var(--space-xl) var(--space-lg); }
.footer__word{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.01em;
  font-size:clamp(2.6rem,9vw,7rem); color:var(--color-paper-3); margin-bottom:var(--space-lg); }
.footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-lg); }
.footer__cols h4{ font-family:var(--font-display); letter-spacing:.01em; font-size:1.05rem; color:var(--color-ink-3); margin-bottom:var(--space-sm); font-weight:600; }
.footer p, .footer a{ color:var(--color-ink-2); }
.footer__nap a, .footer__nap p{ display:block; margin-bottom:6px; }
.footer__nap a:hover{ color:var(--color-accent); }
.footer__social{ display:flex; gap:14px; }
.footer__social a{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--color-line-2); border-radius:var(--radius); transition:border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); }
.footer__social a:hover{ border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }
.footer__social svg{ width:20px; height:20px; }
.footer__nav{ display:flex; flex-direction:column; gap:8px; }
.footer__nav a{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; }
.footer__nav a:hover{ color:var(--color-accent); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-sm); margin-top:var(--space-xl); padding-top:var(--space-md); border-top:1px solid var(--color-line); color:var(--color-ink-2); font-size:.88rem; }

/* ---- reveal (progressive enhancement: visible without JS) ---- */
.reveal, .stagger > *{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .reveal.in{ opacity:1; transform:none; }

/* staggered children (gallery tiles, artist cards) */
html.js .stagger > *{ opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms); }
html.js .stagger.in > *{ opacity:1; transform:none; }

/* subtle hero content entrance on load */
@media (prefers-reduced-motion:no-preference){
  html.js .hero__content > *{ animation:hero-in .75s var(--ease-out) backwards; }
  html.js .hero__content > *:nth-child(1){ animation-delay:.06s; }
  html.js .hero__content > *:nth-child(2){ animation-delay:.16s; }
  html.js .hero__content > *:nth-child(3){ animation-delay:.26s; }
  html.js .hero__content > *:nth-child(4){ animation-delay:.36s; }
}
@keyframes hero-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* ---- responsive ---- */
@media (max-width:1024px){
  .gallery{ columns:2; }
  .artist-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq__grid{ grid-template-columns:1fr; gap:var(--space-md); }
}
@media (max-width:760px){
  .nav__menu-links{ display:none; }
  .nav__links{ gap:var(--space-sm); }
  .nav__phone{ display:none; }
  .nav__brand span{ display:none; }
  .hero{ align-items:flex-end; }
  .hero__content{ max-width:100%; }
  .hero__scroll{ display:none; }
  .trust__track{ font-size:1.05rem; }
  .footer__cols{ grid-template-columns:1fr; gap:var(--space-md); }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .gallery{ columns:2; column-gap:12px; }
  .gallery figure{ margin-bottom:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  html.js .reveal{ transition:opacity .15s linear; transform:none; }
  html.js .stagger > *{ transition:opacity .15s linear; transform:none; transition-delay:0s; }
  html.js .hero__content > *{ animation:none; }
  .gallery img, .artist img, .btn, .nav__links a::after{ transition:none !important; }
  .faq details[open] .faq__body{ animation:none; }
  .hero__bg img{ object-position:60% 35%; }
  /* trust strip: stop the ticker, render the first set static & readable */
  .trust__track{ animation:none !important; }
  .trust__marquee{ width:auto; flex-wrap:wrap; }
  .trust__track:nth-child(2){ display:none; }
  .trust__track{ flex-wrap:wrap; justify-content:center; gap:.2em 0; }
}