/*
 * Archivo Nocturno — style principal : encre, pétrole Tarraco, maquette éditoriale brisée.
 * Chaque choix soutient l’identité artisanale et contemporaine de Zion Tattoo Family.
 */
:root {
  --ink: #0c0d0d;
  --ink-soft: #141717;
  --coal: #1a1e1d;
  --petrol: var(--zion-petrol, #1e4c4d);
  --petrol-light: #286164;
  --ivory: #f1e9da;
  --ivory-muted: #cfc7b8;
  --patina: #b29a5e;
  --wine: #662a2a;
  --line: rgba(241, 233, 218, .18);
  --display: 'Bebas Neue', Impact, sans-serif;
  --body: Manrope, Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--ivory); font-family: var(--body); font-size: 16px; line-height: 1.65; }
body.menu-is-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--patina); outline-offset: 5px; }
.screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { z-index: 1000; top: 1rem; left: 1rem; clip: auto; width: auto; height: auto; padding: .65rem 1rem; background: var(--ivory); color: var(--ink); }

.site-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; color: var(--ivory); transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), backdrop-filter 240ms var(--ease-out); }
.site-header.is-scrolled { background: rgba(12, 13, 13, .88); border-bottom: 1px solid rgba(241, 233, 218, .12); backdrop-filter: blur(16px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: min(100% - 3rem, 1480px); height: 92px; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 165px; }
.brand__seal { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--patina); border-radius: 50%; color: var(--ivory); font-family: var(--display); font-size: 1.7rem; line-height: 1; box-shadow: inset 0 0 0 3px rgba(178,154,94,.17); }
.brand__wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand__wordmark strong { font-family: var(--display); font-size: 1.95rem; font-weight: 400; letter-spacing: .105em; }
.brand__wordmark small { margin-top: .18rem; font-size: .55rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.brand__custom-logo .custom-logo-link, .brand__custom-logo img { display: block; max-height: 54px; width: auto; }
.primary-nav { margin-left: auto; }
.nav__list, .footer-nav { display: flex; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.nav__list a, .footer-nav a { position: relative; font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav__list a::after, .footer-nav a::after, .text-link::after { position: absolute; right: 0; bottom: -.38rem; left: 0; height: 1px; transform: scaleX(0); transform-origin: right; background: var(--patina); content: ''; transition: transform 220ms var(--ease-out); }
.nav__list a:hover::after, .footer-nav a:hover::after, .text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header__actions { display: flex; align-items: center; gap: 1.15rem; margin-left: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 53px; padding: .75rem 1.2rem; border: 1px solid var(--ivory); background: var(--ivory); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .13em; line-height: 1.1; text-transform: uppercase; transition: transform 160ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.button:hover { background: var(--patina); border-color: var(--patina); }
.button:active { transform: scale(.97); }
.button--compact { min-height: 40px; padding: .58rem .8rem; font-size: .61rem; }
.button--ghost { background: transparent; color: var(--ivory); }
.button--ghost:hover { background: rgba(241,233,218,.12); border-color: var(--ivory); color: var(--ivory); }
.button--outline { border-color: rgba(241,233,218,.45); background: transparent; color: var(--ivory); }
.button--outline:hover { background: var(--ivory); color: var(--ink); }
.button--ivory { background: var(--ivory); color: var(--ink); }
.menu-toggle { display: none; width: 36px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-toggle span:not(.screen-reader-text) { display: block; width: 28px; height: 1px; margin: 7px auto; background: currentColor; transition: transform 180ms var(--ease-out); }

.hero { position: relative; display: flex; min-height: max(680px, 100svh); align-items: end; overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__media, .hero__media::after, .hero__placeholder { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after { background: linear-gradient(90deg, rgba(12,13,13,.98) 0%, rgba(12,13,13,.78) 33%, rgba(12,13,13,.22) 76%), linear-gradient(0deg, rgba(12,13,13,.82) 1%, transparent 44%); content: ''; }
.hero__placeholder { background: radial-gradient(circle at 74% 34%, rgba(40,97,100,.55), transparent 26%), radial-gradient(circle at 85% 65%, rgba(178,154,94,.16), transparent 26%), linear-gradient(118deg, #0c0d0d 20%, #101818 55%, #1e4c4d 145%); }
.hero__placeholder::after { position: absolute; inset: 0; background: repeating-linear-gradient(110deg, transparent 0, transparent 78px, rgba(241,233,218,.04) 79px, transparent 80px); content: ''; }
.hero__grain { position: absolute; z-index: 1; inset: 0; opacity: .28; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 2; display: grid; width: min(100% - 3rem, 1480px); margin: 0 auto; padding: 148px 0 7.5rem; }
.eyebrow { margin: 0 0 1.05rem; color: var(--patina); font-size: .64rem; font-weight: 800; letter-spacing: .19em; line-height: 1.2; text-transform: uppercase; }
.eyebrow::before { display: inline-block; width: 27px; height: 1px; margin: 0 .6rem .18rem 0; background: currentColor; content: ''; vertical-align: middle; }
.hero__eyebrow { color: var(--ivory); }
.hero__title { max-width: 900px; margin: 0; color: var(--ivory); font-family: var(--display); font-size: clamp(5.4rem, 12.6vw, 13.4rem); font-weight: 400; letter-spacing: -.025em; line-height: .83; text-wrap: balance; }
.hero__lower { display: flex; max-width: 770px; align-items: end; gap: clamp(2rem, 6vw, 6rem); margin-top: 3.5rem; }
.hero__copy { max-width: 315px; margin: 0; color: var(--ivory-muted); font-size: .91rem; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__seal { position: absolute; top: 30%; right: clamp(3rem, 8vw, 9rem); display: grid; width: clamp(54px, 6vw, 84px); height: clamp(54px, 6vw, 84px); place-items: center; border: 1px solid rgba(178,154,94,.85); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(178,154,94,.14), 0 0 24px rgba(178,154,94,.14); color: var(--ivory); font-family: var(--display); font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 1; }
.hero__side-note { position: absolute; right: .2rem; bottom: 7.7rem; margin: 0; transform: rotate(-90deg) translateX(100%); transform-origin: right bottom; color: rgba(241,233,218,.62); font-size: .58rem; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; }

.section { position: relative; padding: clamp(6rem, 11vw, 10.5rem) max(1.5rem, calc((100vw - 1480px) / 2)); }
.section::after { position: absolute; top: 4.7rem; right: max(1.5rem, calc((100vw - 1480px) / 2)); width: 38px; height: 38px; transform: rotate(45deg); border: 1px solid currentColor; color: rgba(30, 76, 77, .35); content: ''; }
.services::after, .gallery::after { color: rgba(178, 154, 94, .5); }
.section-marker { position: absolute; top: 4.6rem; left: max(1.5rem, calc((100vw - 1480px) / 2)); display: flex; align-items: center; gap: .65rem; color: var(--petrol); font-family: var(--display); font-size: 1.35rem; letter-spacing: .08em; }
.section-marker i { position: relative; display: block; width: 3rem; height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.section-marker i::after { position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%) rotate(45deg); background: currentColor; content: ''; }
.section-marker--light { color: var(--patina); }
h2, h3 { margin-top: 0; color: inherit; font-family: var(--display); font-weight: 400; }
h2 { font-size: clamp(3.8rem, 7vw, 7.6rem); letter-spacing: -.015em; line-height: .86; }
h3 { font-size: 2.15rem; line-height: .95; }
.lead { font-size: clamp(1.2rem, 1.7vw, 1.48rem); font-weight: 600; line-height: 1.42; }
.text-link { position: relative; display: inline-flex; gap: .5rem; padding-bottom: .35rem; color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.text-link::after { bottom: 0; background: var(--petrol); transform: scaleX(1); }
.text-link span { color: var(--petrol); font-size: 1.05rem; line-height: .75; }
.about {
	position: relative;
	overflow: hidden;
	background: var(--ivory);
	color: var(--ink);
}

/* =========================================
   01 — EL ESTUDIO
   ========================================= */

.about__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
	column-gap: clamp(3rem, 8vw, 9rem);
	row-gap: 5rem;
	align-items: start;
	padding-top: 3rem;
}

/* Titre — colonne gauche */
.about__heading {
	grid-column: 1;
	grid-row: 1;
}

.about__heading .eyebrow {
	margin-bottom: 1.2rem;
	color: var(--petrol);
}

.about__heading h2 {
	max-width: 800px;
	margin: 0;
	font-size: clamp(4rem, 7vw, 7.6rem);
	line-height: .84;
	letter-spacing: -.015em;
}

/* Texte — colonne droite */
.about__copy {
	grid-column: 2;
	grid-row: 1;
	padding-top: 5.8rem;
}

.about__copy .lead {
	max-width: 430px;
	margin: 0;
	font-size: clamp(1.2rem, 1.7vw, 1.48rem);
	font-weight: 600;
	line-height: 1.42;
}

.about__copy > p:not(.lead) {
	max-width: 360px;
	margin: 1.6rem 0 0;
	color: #565451;
	font-size: .83rem;
	line-height: 1.75;
}

.about__copy .text-link {
	margin-top: 1.8rem;
}

/* Grande image sous le contenu */
.about__figure {
	grid-column: 1 / -1;
	grid-row: 2;
	width: min(100%, 1050px);
	margin: 0 0 0 auto;
}

.about__image {
	display: block;
	width: 100%;
	height: clamp(420px, 48vw, 650px);
	object-fit: cover;
	object-position: center;
	background: var(--petrol);
}

.about__figure figcaption {
	margin-top: .65rem;
	color: #6e6a65;
	font-size: .59rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.services {
	position: relative;
	background: var(--ink-soft);
	color: var(--ivory);
	overflow: hidden;
}

.services__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
	column-gap: clamp(3rem, 8vw, 9rem);
	align-items: end;
	margin-left: min(15vw, 220px);
	padding-top: 3rem;
}

.services__intro .eyebrow {
	grid-column: 1 / -1;
	margin-bottom: 1.2rem;
}

.services__intro h2 {
	grid-column: 1;
	max-width: 760px;
	margin: 0;
}

.services__intro > p:last-child {
	grid-column: 2;
	max-width: 360px;
	margin: 0 1rem .55rem 0;
	color: var(--ivory-muted);
	font-size: .88rem;
	line-height: 1.7;
}

.style-list {
	margin-top: clamp(4rem, 7vw, 7.5rem);
	border-top: 1px solid var(--line);
}

.style-list__item {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr) 2rem;
	align-items: center;
	min-height: 92px;
	border-bottom: 1px solid var(--line);
	transition:
		padding 240ms var(--ease-out),
		color 240ms var(--ease-out),
		background-color 240ms var(--ease-out);
}

.style-list__item span {
	color: var(--patina);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
}

.style-list__item strong {
	font-family: var(--display);
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: 400;
	letter-spacing: .03em;
	line-height: 1;
}

.style-list__item i {
	justify-self: end;
	color: var(--patina);
	font-size: 1.3rem;
	font-style: normal;
}

.style-list__item:hover {
	padding-right: 1rem;
	padding-left: 1rem;
	background: var(--petrol);
	color: var(--ivory);
}

.piercing-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(240px, .75fr) auto;
	align-items: end;
	gap: 2.5rem;
	margin-top: clamp(4rem, 9vw, 10rem);
	padding: 2.6rem;
	border: 1px solid rgba(178,154,94,.5);
	background:
		linear-gradient(
			110deg,
			rgba(30,76,77,.52),
			rgba(12,13,13,.1)
		);
}

.piercing-panel > div {
	min-width: 0;
}

.piercing-panel .eyebrow {
	margin-bottom: 1rem;
}

.piercing-panel h3 {
	max-width: 440px;
	margin: 0;
}

.piercing-panel > p {
	max-width: 300px;
	margin: 0;
	color: var(--ivory-muted);
	font-size: .82rem;
	line-height: 1.7;
}

.piercing-panel .button {
	white-space: nowrap;
}

.artists { background: var(--ivory); color: var(--ink); }
.artists__top { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-left: min(15vw, 220px); padding-top: 3rem; }
.artists__top h2 { max-width: 650px; margin-bottom: 0; }
.artists__top > p { max-width: 300px; margin: 0 1.4rem .65rem 0; color: #565451; font-size: .83rem; }
.artists__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: clamp(4rem, 6vw, 7.5rem); }
.artist-card { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid #282a29; }
.artist-card__image { position: relative; overflow: hidden; height: 420px; background: var(--petrol); }
.artist-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.artist-card:hover .artist-card__image img { transform: scale(1.035); }
.artist-card__body { padding: 1.35rem 0 1.8rem; }
.artist-card__body .eyebrow { margin-bottom: .6rem; color: var(--petrol); }
.artist-card__body h3 { margin-bottom: .65rem; font-size: 2.65rem; }
.artist-card__body > p { max-width: 330px; margin: 0 0 1rem; color: #5d5a55; font-size: .8rem; }

.gallery { background: var(--coal); }
.gallery__heading { max-width: 720px; margin-left: min(15vw, 220px); padding-top: 3rem; }
.gallery__heading h2 { margin-bottom: 0; }
.gallery__grid { display: grid; grid-template-columns: 1.06fr .9fr 1.18fr; grid-auto-flow: dense; gap: .85rem; margin-top: clamp(4rem, 7vw, 7rem); }
.gallery-card { position: relative; display: block; min-height: 270px; overflow: hidden; padding: 0; border: 0; background: var(--petrol); text-align: left; cursor: pointer; }
.gallery-card:nth-child(3n+1) { grid-row: span 2; min-height: 550px; }
.gallery-card:nth-child(5n+2) { grid-column: span 2; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out), filter 500ms var(--ease-out); }
.gallery-card:hover img { transform: scale(1.045); filter: contrast(1.08); }
.gallery-card > span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.2rem 1.25rem 1.05rem; transform: translateY(10px); background: linear-gradient(0deg, rgba(12,13,13,.88), transparent); color: var(--ivory); font-size: .65rem; font-weight: 800; letter-spacing: .13em; opacity: 0; text-transform: uppercase; transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out); }
.gallery-card:hover > span { transform: translateY(0); opacity: 1; }
.gallery-card > span i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(241,233,218,.65); border-radius: 50%; font-size: 1rem; font-style: normal; }
.gallery-card--demo { cursor: default; }
.gallery-card--demo > span { transform: none; opacity: 1; }
.lightbox { width: min(94vw, 1100px); max-width: none; max-height: 92vh; overflow: visible; padding: 0; border: 1px solid rgba(241,233,218,.25); background: var(--ink); }
.lightbox::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(8px); }
.lightbox img { max-height: 86vh; width: auto; max-width: 100%; margin: auto; }
.lightbox__close { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(241,233,218,.45); border-radius: 50%; background: rgba(12,13,13,.8); color: var(--ivory); cursor: pointer; font-size: 1.35rem; line-height: 1; }

.booking { position: relative; display: flex; min-height: 630px; align-items: center; justify-content: center; overflow: hidden; padding: 7rem 1.5rem; background: var(--petrol); text-align: center; isolation: isolate; }
.booking::before, .booking::after { position: absolute; width: 54vw; height: 54vw; max-width: 830px; max-height: 830px; border: 1px solid rgba(241,233,218,.22); border-radius: 50%; content: ''; }
.booking::before { transform: translate(-33%, -24%); }
.booking::after { transform: translate(43%, 18%); }
.booking__ornament { position: absolute; z-index: -1; color: rgba(241,233,218,.08); font-family: var(--display); font-size: min(90vw, 870px); line-height: .7; }
.booking__content { max-width: 735px; }
.booking h2 { margin: 0 0 1.5rem; font-size: clamp(5rem, 10vw, 10rem); }
.booking__content > p:not(.eyebrow) { max-width: 460px; margin: 0 auto 2.25rem; color: rgba(241,233,218,.84); font-size: .93rem; }

.location { background: var(--ivory); color: var(--ink); }
.location__grid { display: grid; grid-template-columns: 1fr .75fr; gap: 10vw; margin-left: min(15vw, 220px); padding-top: 3rem; }
.location h2 { margin-bottom: 1.5rem; }
.location .lead { max-width: 400px; margin: 0 0 1.6rem; }
.location__facts { display: grid; gap: 0; border-top: 1px solid rgba(12,13,13,.3); }
.location__facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(12,13,13,.3); }
.location__facts span { color: var(--petrol); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.location__facts strong { font-size: .85rem; line-height: 1.65; }
.muted { color: #6e6a65; font-size: .75rem; }

.site-footer { padding: clamp(4rem, 7vw, 7rem) max(1.5rem, calc((100vw - 1480px) / 2)) 1.35rem; background: var(--ink); }
.site-footer__top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 10vw; padding-bottom: 5rem; }
.footer-intro > .brand__seal { margin-bottom: 2rem; }
.footer-intro h2 { max-width: 540px; margin: 0 0 2rem; font-size: clamp(4rem, 6vw, 6.6rem); }
.footer-intro .text-link { color: var(--ivory); }
.footer-intro .text-link::after { background: var(--patina); }
.footer-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 4.5rem; }
.footer-details h3 { margin-bottom: 1rem; color: var(--patina); font-family: var(--body); font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.footer-details p { margin: .45rem 0; color: var(--ivory-muted); font-size: .74rem; }
.footer-details a:hover { color: var(--patina); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line); color: rgba(241,233,218,.58); font-size: .62rem; letter-spacing: .075em; }
.site-footer__bottom p { margin: 0; }
.footer-nav { gap: 1.1rem; }
.footer-nav a { font-size: .57rem; }

.content-shell { min-height: 70vh; max-width: 1050px; margin: 0 auto; }
.archive-heading, .entry__header { max-width: 850px; padding-top: 3rem; }
.archive-heading h1, .entry h1, .not-found h1 { margin: 0; font-family: var(--display); font-size: clamp(4rem, 9vw, 8rem); font-weight: 400; line-height: .85; }
.post-list { margin-top: 4rem; border-top: 1px solid var(--line); }
.post-list__item { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.post-list__item h2 { margin-bottom: 1rem; font-size: clamp(2.4rem, 4vw, 4rem); }
.post-list__item p { max-width: 620px; color: var(--ivory-muted); font-size: .88rem; }
.entry__media { margin: 3rem 0; }
.entry__media img { width: 100%; max-height: 620px; object-fit: cover; }
.entry__content { max-width: 720px; color: var(--ivory-muted); }
.entry__content h2, .entry__content h3 { color: var(--ivory); }
.not-found { min-height: 70vh; padding-top: 12rem; text-align: center; }
.not-found__number { margin: 0; color: var(--petrol); font-family: var(--display); font-size: 16rem; line-height: .55; }
.not-found > p:not(.eyebrow):not(.not-found__number) { max-width: 380px; margin: 1.4rem auto 2rem; color: var(--ivory-muted); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } [data-reveal] { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  .site-header__inner { width: min(100% - 2rem, 1480px); height: 76px; }
  .primary-nav { position: fixed; top: 76px; right: 0; bottom: 0; left: 0; width: 100%; height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; transform: translateX(100%); background: #000; transition: transform 280ms var(--ease-out); }
  .primary-nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: center; gap: 1.7rem; }
  .nav__list a { font-family: var(--display); font-size: 2.5rem; font-weight: 400; letter-spacing: .05em; }
  .menu-toggle { display: block; }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .hero__inner { width: min(100% - 2rem, 1480px); padding-bottom: 4rem; }
  .section { padding-right: 1.5rem; padding-left: 1.5rem; }
  .section-marker { left: 1.5rem; }
.about__layout {
	grid-template-columns: 1fr 1fr;
	column-gap: 3rem;
	row-gap: 4rem;
	padding-top: 2.5rem;
}

.about__heading {
	grid-column: 1 / -1;
	grid-row: 1;
}

.about__copy {
	grid-column: 2;
	grid-row: 2;
	padding-top: 0;
}

.about__figure {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-top: 0;
}

.services__intro,
.artists__top,
.gallery__heading,
.location__grid {
	margin-left: 0;
	padding-top: 2.5rem;
}

.services__intro {
	grid-template-columns: 1fr;
	gap: 2.4rem;
}

.services__intro .eyebrow,
.services__intro h2,
.services__intro > p:last-child {
	grid-column: auto;
}

.services__intro > p:last-child {
	margin: 0;
}

.piercing-panel {
	grid-template-columns: 1fr;
	gap: 1.7rem;
	padding: 1.55rem;
}

.piercing-panel .button {
	justify-self: start;
}
  .piercing-panel .button { justify-self: start; }
  .artists__grid { grid-template-columns: repeat(2, 1fr); }
  .artists__grid .artist-card:last-child:nth-child(odd) { max-width: calc(50% - .75rem); }
  .site-footer__top { grid-template-columns: 1fr; gap: 0; }
  .footer-details { padding-top: 1.5rem; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .brand__wordmark strong { font-size: 1.65rem; }
  .brand__wordmark small { font-size: .48rem; }
  .site-header__actions .button { display: none; }
  .hero { min-height: 720px; }
  .hero__media::after { background: linear-gradient(90deg, rgba(12,13,13,.93), rgba(12,13,13,.45)), linear-gradient(0deg, rgba(12,13,13,.9), transparent 64%); }
  .hero__inner { padding-top: 120px; }
  .hero__title { font-size: clamp(4.7rem, 24vw, 7rem); }
  .hero__lower { display: block; margin-top: 2.4rem; }
  .hero__copy { margin-bottom: 1.5rem; }
  .hero__side-note { display: none; }
  .hero__seal { top: 18%; right: 1.3rem; }
.about__layout {
	grid-template-columns: 1fr;
	gap: 2.8rem;
	padding-top: 2.5rem;
}

.about__heading {
	grid-column: 1;
	grid-row: 1;
}

.about__copy {
	grid-column: 1;
	grid-row: 2;
	padding-top: 0;
}

.about__figure {
	grid-column: 1;
	grid-row: 3;
	width: 100%;
	margin-top: 0;
}

.about__image {
	height: 360px;
	min-height: 0;
}
  .services__intro, .artists__top, .gallery__heading, .location__grid { margin-left: 0; padding-top: 2.5rem; }
  .artists__top { display: block; }
  .artists__top > p { margin-top: 1.2rem; }
  .style-list__item { grid-template-columns: 3rem 1fr 1.5rem; min-height: 75px; }
  .style-list__item strong { font-size: 2.45rem; }
  .piercing-panel { grid-template-columns: 1fr; gap: 1.7rem; padding: 1.55rem; }
  .artists__grid { grid-template-columns: 1fr; }
  .artists__grid .artist-card:last-child:nth-child(odd) { max-width: none; }
  .artist-card__image { height: 400px; }
  .gallery__grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .gallery-card { min-height: 185px; }
  .gallery-card:nth-child(3n+1) { min-height: 375px; }
  .gallery-card:nth-child(5n+2) { grid-column: auto; }
  .gallery-card > span { transform: none; padding: 2rem .7rem .65rem; font-size: .55rem; opacity: 1; }
  .booking { min-height: 560px; }
  .booking h2 { font-size: clamp(4.5rem, 22vw, 6rem); }
  .location__facts > div { grid-template-columns: 1fr; gap: .4rem; }
  .site-footer__top { padding-bottom: 3.5rem; }
  .footer-details { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .site-footer__bottom { flex-wrap: wrap; justify-content: flex-start; }
  .footer-nav { order: 3; width: 100%; }
  .not-found__number { font-size: 10rem; }
}
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #b6a36a;
	border-radius: 50%;
	background: #0f1914;
	color: #b6a36a;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top:hover {
	background: #b6a36a;
	color: #0f1914;
}
.location .text-link {
  position: relative;
  z-index: 9999;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Zion Tattoo — action icons */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: currentColor;
	vertical-align: -0.15em;
}

.text-link .icon {
	margin-right: .45rem;
}

.icon--whatsapp,
.icon--location {
	width: 1.05em;
	height: 1.05em;
}

/* Zion Tattoo — action icons */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: currentColor;
	vertical-align: -0.15em;
}

.text-link .icon {
	margin-right: .45rem;
}

.icon--whatsapp,
.icon--location {
	width: 1.05em;
	height: 1.05em;
}

/* =========================================================
   LEGAL POPUPS
   ========================================================= */

.legal-dialog {
	width: min(900px, calc(100% - 2rem));
	max-width: 900px;
	max-height: min(80vh, 760px);
	padding: 0;
	border: 1px solid rgba(241, 233, 218, .16);
	background: var(--ink);
	color: var(--ivory);
	box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
}

.legal-dialog::backdrop {
	background: rgba(0, 0, 0, .72);
	backdrop-filter: blur(8px);
}

.legal-dialog__inner {
	position: relative;
	padding: clamp(2rem, 5vw, 4.5rem);
	overflow-y: auto;
	max-height: 80vh;
}

.legal-dialog__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(241, 233, 218, .2);
	background: transparent;
	color: var(--ivory);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.legal-dialog__close:hover {
	background: rgba(241, 233, 218, .08);
}

.legal-dialog h2 {
	margin: .5rem 0 2rem;
	font-family: var(--display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 400;
	line-height: .95;
}

.legal-dialog__content {
	max-width: 720px;
}

.legal-dialog__content h3 {
	margin: 2rem 0 .65rem;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--patina);
}

.legal-dialog__content p {
	margin: 0 0 1rem;
	line-height: 1.8;
	color: rgba(241, 233, 218, .78);
}

.legal-dialog__content a {
	color: var(--ivory);
}

.legal-dialog__note {
	margin-top: 3rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(241, 233, 218, .12);
	font-size: .75rem;
	opacity: .55;
}

.footer-legal-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.footer-legal-links a {
	font-size: .65rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.legal-dialog {
		width: calc(100% - 1rem);
		max-height: 90vh;
	}

	.legal-dialog__inner {
		padding: 3.5rem 1.5rem 2rem;
		max-height: 90vh;
	}

	.legal-dialog h2 {
		font-size: 2.8rem;
	}

	.footer-legal-links {
		width: 100%;
		flex-wrap: wrap;
		gap: .8rem 1.2rem;
	}
}

/* Fix: keep custom cursor visible above the gallery lightbox */
dialog.lightbox {
    cursor: none !important;
}

dialog.lightbox *,
dialog.lightbox::backdrop {
    cursor: none !important;
}

.zion-cursor-dot,
.zion-cursor-ring {
    z-index: 2147483647 !important;
    pointer-events: none !important;
}