/* Stacy Tennent. Black is the 60, purple the 30, white the 10.
 * The signature is the ink: a live ink-in-water field behind the hero and the closing band
 * (js/site.js draws it), drips off every purple band, an ink splat behind every nav link, and
 * every piece of work arriving through an ink blot. Display face Playfair Display italic 900
 * (Stacy's pick, 2026-10-02), body Instrument Sans. */
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-italic-var.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --ink: #09070d;
  --ink-2: #110b1a;
  --plum: #1c1030;
  --plum-2: #2a1846;
  --violet: #6a3fe0;
  --violet-hover: #7d55ef;
  --orchid: #c7aaff;
  --bone: #f4f0fa;
  --dim: #b8adc9;
  --white: #ffffff;
  --placeholder: #8f84a1;
  --st-lime: #b4ff39;
  --line: rgba(199, 170, 255, .2);
  --line-strong: rgba(199, 170, 255, .42);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --gutter: 16px;
  --max-wide: 1760px;
  --max: 760px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1180px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orchid); text-underline-offset: .2em; }
a:hover { color: var(--bone); }
h1, h2, h3 { font-family: var(--font-display); font-style: italic; font-weight: 900; line-height: 1; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
h3 { font-size: 2rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }
/* !important on the size: `.form input { width: 100% }` outranks a bare class, and the spam trap
   became a full-width box that pushed /book sideways at every width (gate, 2026-10-02) */
.visually-hidden, .trap { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bone); color: var(--ink); padding: .6rem 1rem; }
.skip:focus { top: 12px; }
.muted { color: var(--dim); }

.wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.eyebrow, .label { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--orchid); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .8rem; }
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: var(--violet); flex: none; }
.label::before { content: none; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.6rem; border-radius: 999px; background: var(--violet); color: var(--white); border: 1px solid var(--violet); font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease); text-align: center; }
.btn:hover { background: var(--violet-hover); border-color: var(--violet-hover); color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(199, 170, 255, .1); border-color: var(--orchid); color: var(--bone); }
.btn-sm { min-height: 44px; padding: .5rem 1.2rem; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---- header: numbered links | the name | call + book. Each link blooms an ink splat on hover. */
/* The blur lives on a ::before, never on the header itself: backdrop-filter makes an element the
   containing block for its fixed children, so the full-screen phone menu was boxed into the
   72px header and cut off under it (Stacy, Messenger's browser, 2026-10-02). */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(9, 7, 13, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--bone); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--orchid); }
.nav { display: none; align-items: center; gap: .4rem; }
.nav-link { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: .4rem; min-height: 44px; padding: .7rem .9rem; color: var(--bone); text-decoration: none; font-size: .98rem; font-weight: 500; }
.nav-link::before { content: ''; position: absolute; inset: -8px -12px; z-index: -1; background: var(--violet); -webkit-mask: url('/images/blot.svg') center / 0% 0% no-repeat; mask: url('/images/blot.svg') center / 0% 0% no-repeat; transition: -webkit-mask-size .55s var(--ease), mask-size .55s var(--ease); }
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current] { color: var(--white); }
.nav-link:hover::before, .nav-link:focus-visible::before, .nav-link[aria-current]::before { -webkit-mask-size: 230% 230%; mask-size: 230% 230%; }
.nav-num { font-family: var(--font-display); font-style: italic; font-size: .82rem; color: var(--orchid); }
.nav-link:hover .nav-num, .nav-link[aria-current] .nav-num { color: var(--bone); }
.header-right { display: flex; align-items: center; gap: .8rem; }
.nav-phone { display: none; color: var(--bone); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-phone:hover { color: var(--orchid); }
.header-book { display: none; }
@media (min-width: 480px) { .header-book { display: inline-flex; } }
@media (min-width: 1100px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav { display: flex; margin-left: -.9rem; }
  .brand { font-size: 2.1rem; justify-self: center; }
  .header-right { justify-self: end; }
  .menu { display: none; }
}
@media (min-width: 1360px) { .nav-phone { display: inline; } }
@media (max-width: 1099px) { .brand { order: -1; } .header-inner > .nav { display: none; } }

/* ---- phone menu: ink floods the screen from the button outward */
.menu summary { position: relative; z-index: 2; list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-weight: 600; background: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; background: var(--bone); position: relative; transition: transform .35s var(--ease), background-color .2s; }
.menu-bars::before, .menu-bars::after { content: ''; position: absolute; left: 0; }
.menu-bars::before { top: -6px; } .menu-bars::after { top: 6px; }
.menu[open] .menu-bars { background: transparent; }
.menu[open] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-rows: 1fr auto; gap: 2rem; padding: 104px var(--gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(120% 70% at 100% 0%, var(--plum-2), var(--ink) 70%); }
.menu[open] .menu-panel { animation: flood .7s var(--ease) both; }
@keyframes flood { from { clip-path: circle(0 at calc(100% - 60px) 36px); } to { clip-path: circle(150% at calc(100% - 60px) 36px); } }
.menu-links { display: grid; align-content: center; gap: .2rem; }
.menu-links a { display: flex; align-items: baseline; gap: 1rem; padding: .35rem 0; color: var(--bone); text-decoration: none; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(2.4rem, 10vw, 4.2rem); line-height: 1.25; border-bottom: 1px solid var(--line); }
.menu-links a:hover, .menu-links a[aria-current] { color: var(--orchid); }
.menu-links .nav-num { font-size: 1rem; font-weight: 400; min-width: 1.6rem; }
.menu[open] .menu-links a { animation: rise .6s var(--ease) both; }
.menu[open] .menu-links a:nth-child(2) { animation-delay: .06s; } .menu[open] .menu-links a:nth-child(3) { animation-delay: .12s; }
.menu[open] .menu-links a:nth-child(4) { animation-delay: .18s; } .menu[open] .menu-links a:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.menu-foot .actions { margin: .6rem 0 1rem; }
.menu-foot .btn { flex: 1 1 auto; }

/* ---- the ink */
.ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ink-fallback .ink-canvas, .no-js .ink-canvas { display: none; }
.hero, .page-hero, .cta-band { position: relative; isolation: isolate; overflow: hidden; background-color: var(--ink); }
.ink-fallback, .no-js .hero, .no-js .page-hero, .no-js .cta-band {
  background-image: radial-gradient(60% 70% at 72% 40%, rgba(106, 63, 224, .45), transparent 70%), radial-gradient(40% 50% at 20% 80%, rgba(42, 24, 70, .9), transparent 70%);
}
.hero::after, .page-hero::after, .cta-band::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(9, 7, 13, .78) 0%, rgba(9, 7, 13, .35) 55%, rgba(9, 7, 13, 0) 100%); }

/* ---- hero: the name on the left, her best real tattoo in an arch on the right */
.hero { min-height: min(100svh, 1100px); display: grid; align-items: center; }
.hero-inner { position: relative; z-index: 2; display: grid; gap: 3rem; align-items: center; padding: 5rem 0 4.5rem; }
@media (min-width: 1000px) { .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 6rem); } }
.hero-copy { min-width: 0; }
/* Chad's standing rule (2026-10-08): the headline leads; the small line sits under it, never above */
.hero-eyebrow { max-width: 40rem; margin-bottom: 1.6rem; }
.eyebrow-under { margin: -.2rem 0 1.2rem; }
.hero-name { font-size: clamp(4.2rem, 13vw, 11.5rem); line-height: .86; margin: 0 0 1.1rem; letter-spacing: -.02em; text-shadow: 0 0 60px rgba(106, 63, 224, .45); }
.hero-name span { display: block; }
.hero-name span + span { padding-left: .5em; }
@media (min-width: 1000px) { .hero-name { font-size: clamp(5rem, 9.4vw, 11.5rem); } }
.hero-sub { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.3; max-width: 34ch; color: var(--bone); margin: 0; }
.ink-hint { display: none; margin: 2.4rem 0 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
@media (hover: hover) and (pointer: fine) { .js .ink-hint { display: block; } }
.hero-piece { margin: 0; justify-self: center; width: min(100%, 440px); }
.arch { position: relative; }
.arch img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 999px 999px 8px 8px; box-shadow: 0 40px 120px -30px rgba(106, 63, 224, .75); }
.arch::before { content: ''; position: absolute; inset: -14px; border: 1px solid var(--line-strong); border-radius: 999px 999px 14px 14px; pointer-events: none; }
.hero-piece figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-top: 1.6rem; font-size: .92rem; }
.hero-piece figcaption span { color: var(--dim); }
.js .hero-piece { animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.page-hero { min-height: 52vh; display: grid; align-items: end; }
.page-hero-inner { position: relative; z-index: 2; padding: 6rem 0 3.5rem; }
.page-hero h1 { font-size: clamp(3.4rem, 8vw, 8.4rem); line-height: 1.08; margin-bottom: 1.2rem; }
.lede { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; max-width: 36ch; margin: 0; }
.notfound { min-height: 70vh; }

/* ---- sections */
.section { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.plum { background: var(--plum); }
/* ink drips off the bottom of every purple band, into whatever comes next */
.plum::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 96px; z-index: 3; pointer-events: none; background: url('/images/drip.svg') repeat-x top left / 900px 96px; }
.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.6rem); max-width: 60rem; }
.row-head { display: grid; gap: 1.2rem; max-width: none; }
.row-head > p { max-width: 46ch; color: var(--dim); }
@media (min-width: 960px) { .row-head { grid-template-columns: 1.2fr 1fr; align-items: end; } .row-head > p { justify-self: end; margin-bottom: 1.2rem; } }
.section-foot { margin: 2.6rem 0 0; }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
.body > p { max-width: 54ch; }

/* ---- the gallery: an even 4:5 grid, explicit column counts per width, never auto-fit.
   Tiles crop to the middle of the piece; the lightbox always shows the whole photo. */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } .gallery-home { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gallery-home { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2300px) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gallery-home { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.piece { margin: 0; min-width: 0; }
.piece[hidden] { display: none; }
.piece-link { display: block; position: relative; overflow: hidden; border-radius: 4px; background: var(--ink-2); aspect-ratio: 4 / 5; }
.piece-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.piece-link::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; pointer-events: none; transition: box-shadow .4s; }
@media (hover: hover) { .piece-link:hover img { transform: scale(1.04); } .piece-link:hover::after { box-shadow: inset 0 0 0 2px var(--orchid), inset 0 -80px 80px -40px rgba(106, 63, 224, .5); } }
/* the hover box: point at a piece and its details rise over it */
.piece-box { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: .15rem; padding: .8rem .95rem; border-radius: 6px; background: rgba(9, 7, 13, .88); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); color: var(--bone); font-size: .9rem; line-height: 1.3; opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; }
.piece-box strong { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.2rem; }
.piece-box span { color: var(--dim); }
.piece-box em { font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orchid); margin-top: .35rem; }
@media (hover: hover) { .piece-link:hover .piece-box, .piece-link:focus-visible .piece-box { opacity: 1; transform: none; } }
@media (hover: none) { .piece-box { display: none; } }
.piece-cap { display: grid; gap: .1rem; margin: .6rem 0 0; font-size: .92rem; line-height: 1.35; }
.piece-cap strong { font-weight: 600; }
.piece-cap span { color: var(--dim); font-size: .86rem; }
/* each piece arrives through an ink blot */
.js .piece[data-reveal] .piece-link { -webkit-mask-image: url('/images/blot.svg'); mask-image: url('/images/blot.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 0% 0%; mask-size: 0% 0%; transition: -webkit-mask-size 1.6s var(--ease), mask-size 1.6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .piece[data-reveal].in .piece-link { -webkit-mask-size: 420% 420%; mask-size: 420% 420%; }
.js .piece[data-reveal].settled .piece-link { -webkit-mask-image: none; mask-image: none; }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.work-note { max-width: 60ch; color: var(--dim); margin: 0 0 1.4rem; }
/* a very wide piece (lettering across a forearm) shows whole, centred on the ink, never cut mid-word */
.piece-link.is-wide img { object-fit: contain; }
.piece-link.is-wide { background: radial-gradient(80% 60% at 50% 50%, var(--plum), var(--ink-2)); }
.chip { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--bone); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.chip:hover { border-color: var(--orchid); }

/* ---- lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; color: var(--bone); }
.lightbox::backdrop { background: rgba(9, 7, 13, .94); }
.lightbox-inner { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 64px var(--gutter) 20px; gap: 12px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lightbox-cap { margin: 0; text-align: center; }
.lightbox-cap span { color: var(--dim); display: block; font-size: .92rem; }
.lb-btn { position: absolute; min-width: 48px; min-height: 48px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--bone); font: inherit; font-size: 1.3rem; cursor: pointer; }
.lb-btn:hover { border-color: var(--orchid); }
.lb-close { top: 12px; right: var(--gutter); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: var(--gutter); } .lb-next { right: var(--gutter); }
@media (max-width: 767px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } }

/* ---- styles: hover boxes. On a mouse one of her pieces fills the card on hover; on a phone it
   sits at the top of the card. */
.styles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.style { position: relative; isolation: isolate; display: grid; background: var(--plum); color: var(--bone); text-decoration: none; min-width: 0; overflow: hidden; }
.style-media { display: block; overflow: hidden; }
/* on phones the crop sits high on each piece: these are portraits, and the face is near the top */
.style-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
.style-body { display: grid; align-content: start; padding: clamp(1.6rem, 3vw, 2.6rem); }
.style-num { font-family: var(--font-display); font-style: italic; font-size: 3rem; line-height: 1; color: var(--orchid); margin: 0 0 1.2rem; }
.style-title { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 2.2rem; line-height: 1.05; margin-bottom: .8rem; }
.style-text { color: var(--dim); }
.style-more { margin-top: 1.4rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orchid); }
@media (hover: hover) and (min-width: 1000px) {
  .style { min-height: 460px; }
  .style-media { position: absolute; inset: 0; z-index: -1; opacity: .16; filter: grayscale(1); transition: opacity .6s var(--ease), filter .6s var(--ease); }
  .style-media img { height: 100%; aspect-ratio: auto; transform: scale(1.08); transition: transform 1.4s var(--ease); }
  .style-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9, 7, 13, .96) 18%, rgba(28, 16, 48, .55) 70%, rgba(28, 16, 48, .2)); }
  .style-body { align-content: end; height: 100%; }
  .style-more { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .style:hover .style-media, .style:focus-visible .style-media { opacity: 1; filter: none; }
  .style:hover .style-media img, .style:focus-visible .style-media img { transform: scale(1); }
  .style:hover .style-text, .style:focus-visible .style-text { color: var(--bone); }
  .style:hover .style-more, .style:focus-visible .style-more { opacity: 1; transform: none; }
}

/* ---- about */
/* Stacy in the same arch as the hero tattoo and the home portraits */
.about-art { position: relative; max-width: 480px; width: 100%; justify-self: center; }
.about-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 10px 10px; box-shadow: 0 40px 100px -30px rgba(106, 63, 224, .65); }
.about-art::before { content: ''; position: absolute; inset: -14px; border: 1px solid var(--line-strong); border-radius: 999px 999px 16px 16px; pointer-events: none; }

/* ---- steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 900px) { #booking .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { counter-increment: step; position: relative; padding: 1.6rem 0 0; border-top: 1px solid var(--line-strong); min-width: 0; }
.steps li::before { content: counter(step); display: block; font-family: var(--font-accent); font-style: italic; font-size: 3rem; line-height: 1; color: var(--orchid); margin-bottom: .8rem; }
.steps h3 { font-size: 2rem; margin-bottom: .5rem; }
.steps p { color: var(--dim); margin: 0; max-width: 40ch; }

/* ---- studio */
.studio-address { font-family: var(--font-accent); font-style: italic; font-size: 1.7rem; line-height: 1.3; }
.studio-art { display: grid; place-items: center; }
.studio-art img { width: min(100%, 420px); filter: drop-shadow(0 30px 60px rgba(106, 63, 224, .45)); }
.js .studio-art img { transform: rotate(-8deg) scale(.92); transition: transform 1.6s var(--ease); }
.js .studio-art.in img { transform: none; }
.studio-link { margin: 1.4rem 0 0; }

/* ---- closing band */
.cta-band { padding: clamp(5rem, 10vw, 9rem) 0; }
.cta-inner { position: relative; z-index: 2; display: grid; gap: 1.6rem; }
@media (min-width: 960px) { .cta-inner { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.cta-band h2 { font-size: clamp(3rem, 6.4vw, 6.6rem); line-height: 1.05; margin: 0; max-width: 14ch; }
.cta-inner p { font-size: 1.15rem; max-width: 42ch; }

/* ---- forms */
.form-grid { align-items: start; }
@media (min-width: 960px) { .form-grid { grid-template-columns: 7fr 5fr; } }
.form { display: grid; gap: 1.2rem; min-width: 0; }
.form label { display: grid; gap: .45rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--dim); }
.form input, .form textarea, .form select { width: 100%; min-height: 52px; padding: .75rem .95rem; font: inherit; font-weight: 400; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; }
.form input::placeholder { color: var(--placeholder); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--orchid) 50%), linear-gradient(135deg, var(--orchid) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.form textarea { min-height: 0; resize: vertical; }
.form input[type="file"] { padding: .6rem; cursor: pointer; }
.form input[type="file"]::file-selector-button { margin-right: .9rem; min-height: 38px; padding: .4rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--plum); color: var(--bone); font: inherit; font-weight: 600; cursor: pointer; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--orchid); outline-offset: 0; border-color: var(--orchid); }
.form .row { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.form .check { display: flex; align-items: center; gap: .6rem; font-weight: 400; min-height: 44px; }
.form .check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--violet); }
.form-note { font-size: .92rem; color: var(--dim); margin: 0; }
/* the hidden attribute must beat .btn and the step rules, which set display themselves */
[hidden] { display: none !important; }

/* ---- the booking wizard: three steps, a progress bar, Back / Next (the Oma Gourd pattern).
   .is-wizard is added by script, so with no script every step shows and the form is one page. */
.q-progress { display: none; }
.is-wizard .q-progress { display: block; margin-bottom: 1.8rem; }
.q-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.q-progress-label strong { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--bone); }
.q-progress-track { height: 8px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; }
.q-progress-fill { height: 100%; width: var(--progress, 33.333%); border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--orchid)); box-shadow: 0 0 18px rgba(106, 63, 224, .7); transition: width .6s var(--ease); }
.q-step { display: grid; gap: 1.2rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.q-step + .q-step { margin-top: 2rem; }
.q-step > legend { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.9rem; line-height: 1.2; padding: 0; margin-bottom: 1rem; }
.is-wizard .q-step > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-wizard .q-step { display: none; }
.is-wizard .q-step + .q-step { margin-top: 0; }
.is-wizard .q-step.is-current { display: grid; animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.q-nav { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.q-nav [data-next], .q-nav [data-send] { margin-left: auto; }
.q-nav [data-prev], .q-nav [data-next] { display: none; }
.is-wizard .q-nav [data-prev], .is-wizard .q-nav [data-next] { display: inline-flex; }
.ts-slot:empty { display: none; }

.form-status:empty { display: none; }
.form-status { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: 1.6rem; margin: 0; }
.form .btn { justify-self: start; }
.form-empty { padding: 2rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--ink-2); }
.form-empty h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.form-side { padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--plum); border-radius: 14px; min-width: 0; }
.form-side .steps { margin-bottom: 1.6rem; }
.form-side .steps h3 { font-size: 1.7rem; }
.form-side .steps li::before { font-size: 2.2rem; }
/* the 300px floor: min-width 0 keeps the grid track from inflating, and the small bleed lets the
   widget breathe on the narrowest phones (SOP v7.9) */
.cf-turnstile { min-height: 65px; min-width: 0; }
@media (max-width: 380px) { .cf-turnstile { margin-inline: -6px; } }

/* ---- prose */
.prose p { max-width: 68ch; }
.prose b { color: var(--orchid); }

/* ---- footer */
.site-footer { position: relative; background: var(--ink-2); border-top: 1px solid var(--line); padding: 4.5rem 0 1.5rem; font-size: .98rem; }
.footer-grid { display: grid; gap: 2.4rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-name { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 3rem; line-height: 1; margin: 0 0 .8rem; }
.footer-line { color: var(--dim); max-width: 32ch; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.site-footer a { color: var(--bone); }
.site-footer a:hover { color: var(--orchid); }
.socials { display: flex; flex-wrap: wrap; gap: 1rem; }
.socials:empty { display: none; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .9rem; }
.footer-base p { margin: 0; }
.st-credit { text-decoration: none; color: inherit; }
.st-wm { font-weight: 700; }
.st-wm u { text-decoration: none; color: var(--st-lime); }

/* ---- phone action bar: call, text, book are the whole point on a phone */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line-strong); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--ink-2); color: var(--bone); text-decoration: none; font-weight: 600; }
.action-bar .action-book { background: var(--violet); color: var(--white); }
body { padding-bottom: 57px; }
@media (min-width: 1000px) { .action-bar { display: none; } body { padding-bottom: 0; } }

/* ---- home: the first pieces two at a time, big, in arched portrait frames. The right column
   hangs lower than the left, like a gallery wall. Two across at every width. */
.portraits { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 5rem) clamp(1rem, 4vw, 5.5rem); max-width: 1320px; }
@media (min-width: 768px) { .portraits .portrait:nth-child(even) { margin-top: clamp(3rem, 9vw, 9rem); } }
.portrait { margin: 0; min-width: 0; }
.portrait-frame { display: block; position: relative; aspect-ratio: 4 / 5; padding: clamp(6px, 1vw, 14px); border-radius: 999px 999px 10px 10px; background: linear-gradient(160deg, var(--plum-2), var(--ink-2) 55%, var(--plum)); box-shadow: 0 50px 120px -40px rgba(106, 63, 224, .7); overflow: visible; }
.portrait-frame::before { content: ''; position: absolute; inset: clamp(-10px, -1vw, -6px); border: 1px solid var(--line-strong); border-radius: 999px 999px 16px 16px; pointer-events: none; }
.portrait-frame::after { content: none; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 6px 6px; transition: transform 1.4s var(--ease), filter .6s; }
.portrait-frame .piece-box { left: 12%; right: 12%; bottom: 7%; text-align: center; }
@media (hover: hover) { .portrait-frame:hover img { transform: scale(1.02); filter: brightness(1.06); } }
.portrait-cap { display: grid; justify-items: center; gap: .2rem; margin: 1.6rem 0 0; text-align: center; }
.portrait-cap strong { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(1.2rem, 2.4vw, 2.2rem); line-height: 1.15; }
.portrait-cap span { color: var(--dim); font-size: .9rem; }
.js .portrait[data-reveal] .piece-link { -webkit-mask-image: none; mask-image: none; }
.js .portrait[data-reveal] .portrait-frame img { clip-path: inset(100% 0 0 0 round 999px 999px 6px 6px); transition: clip-path 1.6s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); }
.js .portrait[data-reveal].in .portrait-frame img { clip-path: inset(0 0 0 0 round 999px 999px 6px 6px); }
.portraits-foot { text-align: center; margin-top: clamp(3rem, 6vw, 5rem); }

/* ---- the hero on load: the name wipes up out of the ink line by line, the arch draws its ring,
   the tattoo fills from the bottom like ink rising, then the rest of the copy follows. CSS only,
   so it runs before any script and the reduced-motion block below switches it off. */
.js .hero-name span { clip-path: inset(0 0 100% 0); transform: translateY(.35em); animation: name-up 1.2s var(--ease) forwards; }
.js .hero-name span + span { animation-delay: .22s; }
@keyframes name-up { to { clip-path: inset(-20% -10% -30% -10%); transform: none; } }
.js .hero-eyebrow, .js .hero-sub, .js .hero .actions, .js .ink-hint { opacity: 0; transform: translateY(16px); animation: hero-rise .9s var(--ease) forwards; }
.js .hero-eyebrow { animation-delay: .5s; }
.js .hero-sub { animation-delay: .7s; }
.js .hero .actions { animation-delay: .9s; }
.js .ink-hint { animation-delay: 1.3s; }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
.js .hero-piece .arch::before { opacity: 0; transform: scale(.94); animation: ring-in 1.2s var(--ease) .3s forwards; }
@keyframes ring-in { to { opacity: 1; transform: none; } }
.js .hero-piece .arch img { clip-path: inset(100% 0 0 0 round 999px 999px 8px 8px); animation: ink-fill 1.8s var(--ease) .45s forwards; }
@keyframes ink-fill { to { clip-path: inset(0 0 0 0 round 999px 999px 8px 8px); } }
.js .hero-piece figcaption { opacity: 0; animation: hero-rise .8s var(--ease) 1.5s forwards; }

/* ---- motion: headings settle out of a blur like ink finding the paper; content rises */
.js .bleed { opacity: 0; filter: blur(14px); letter-spacing: .06em; transition: opacity 1.3s var(--ease), filter 1.5s var(--ease), letter-spacing 1.8s var(--ease); }
.js .bleed.in { opacity: 1; filter: blur(0); letter-spacing: .005em; }
.js [data-reveal]:not(.piece) { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].in:not(.piece) { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .bleed, .js [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; letter-spacing: inherit !important; }
  .js .piece[data-reveal] .piece-link { -webkit-mask-image: none; mask-image: none; }
  .js .studio-art img, .js .hero-piece { transform: none !important; }
  .js .hero-name span, .js .hero-eyebrow, .js .hero-sub, .js .hero .actions, .js .ink-hint, .js .hero-piece figcaption, .js .hero-piece .arch::before { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .hero-piece .arch img, .js .portrait[data-reveal] .portrait-frame img { clip-path: none !important; }
}