/* ==========================================================================
   MOXY TATTOO STUDIO
   Shared stylesheet. Every page links this one file.
   Class names are generic on purpose so index / about / gallery / contact
   all pull from the same vocabulary.

   ORDER
   01 tokens
   02 reset + base
   03 typography
   04 buttons, pill labels, arrow links, social proof
   05 header
   06 footer
   07 section shell
   08 split hero
   09 ticker
   10 packed image row + dense gallery grid
   11 photo cards, avatars, tiles
   12 artist feature
   13 team cards
   14 process track
   15 reviews
   16 faq
   17 contact rows + closing
   18 animation utilities
   19 responsive
   20 reduced motion
   21 contact page
   22 gallery page
   23 about page
   24 colour system in use  (accent words, buttons, pills, tags, washes)
   25 logo lockups          (header, footer, favicon-adjacent)
   26 hero slider           (the right hand panel of the split hero)
   27 stencil to skin       (the signature headline, JS driven)
   28 google reviews
   29 instagram reel frames
   30 booking options
   31 gallery mosaic
   32 responsive + reduced motion for 24-31

   COLOUR, and what each accent MEANS.  From DESIGN-PLAN.md.
   The palette encodes the arc of getting tattooed: idea -> skin -> proof.
     --stencil  transfer violet.  Everything BEFORE skin: the design stage,
                process steps 01/02, "bring a reference".
     --ember    heat.  Everything ON skin, or right now: every primary CTA,
                booking, finished work.
     --gold     earned proof ONLY: the 5.0, star rows, review cards. Nowhere else.
   Two accents maximum in any one viewport.
   ========================================================================== */


/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root{
  /* ---- the six values, exactly as DESIGN-PLAN.md specifies them ---- */
  --ink:#0E0E0D;          /* the ground */
  --bone:#E7E9DE;         /* type */
  --ash:#26231F;          /* raised surfaces, cards, FAQ rows */
  --stencil:#7C5CD6;      /* transfer violet: the design stage, before skin */
  --ember:#F04438;        /* heat: on skin, or act now. Every primary CTA */
  --gold:#F5B942;         /* earned proof only */

  --bg:var(--ink);        /* alias, so every rule written before the plan resolves */
  --bg-raise:#151513;
  --frame:#171614;

  --bone-72:rgba(231,233,222,.72);
  --bone-56:rgba(231,233,222,.56);
  --bone-40:rgba(231,233,222,.40);
  --bone-22:rgba(231,233,222,.22);
  --bone-08:rgba(231,233,222,.08);
  --line:rgba(231,233,222,.13);

  /* Contrast, measured against --ink, not guessed:
       --ember  5.1:1   passes for body text
       --gold  10.8:1   passes for body text
       --stencil 4.0:1  DOES NOT pass. Marks, rules, outlines and large type
                        only, never body copy. Small type in the stencil
                        family uses --stencil-lift (8.9:1) instead.
     On --ash, ember drops to 4.2:1, so small ember type on a raised card
     uses --ember-lift (5.6:1 on ash). */
  --stencil-lift:#B9A6F0;
  --stencil-soft:rgba(124,92,214,.14);
  --stencil-line:rgba(124,92,214,.45);

  --ember-lift:#FF6B5C;
  --ember-deep:#7A1E17;                 /* gradient depth only, never type */
  --ember-soft:rgba(240,68,56,.14);
  --ember-line:rgba(240,68,56,.45);

  --gold-soft:rgba(245,185,66,.14);
  --gold-line:rgba(245,185,66,.45);

  /* one raised surface for every card on the site */
  --surface:linear-gradient(180deg,var(--ash) 0%,#1A1815 100%);
  --surface-hi:linear-gradient(180deg,#2E2A25 0%,#201E1A 100%);

  /* kept as aliases so the rules written before the colour pass still work */
  --red:var(--ember);
  --red-soft:var(--ember-soft);

  --paper:#EFE9DB;
  --paper-2:#E2DAC7;
  --paper-ink:#221D18;
  --paper-ink-2:#514738;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Permanent Marker","Segoe Script",cursive;

  --pad:24px;
  --max:1240px;
  --gutter:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  --sec:clamp(72px,9vw,140px);
  --hdr:74px;

  --r-card:20px;
  --r-pill:30px;
  --packed-gap:4px;
  --grid-gap:6px;

  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   02 RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 12px);
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--bone);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.4;               /* 22.4px */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
figure,blockquote{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--bone);outline-offset:4px;border-radius:4px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{
  left:14px;top:14px;background:var(--bone);color:var(--bg);
  padding:11px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:500;
}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.bleed{width:100%}                      /* full width, no page margin */
.center{text-align:center}


/* ==========================================================================
   03 TYPOGRAPHY
   ========================================================================== */
h1,.h1{font-size:clamp(46px,9.4vw,100px);line-height:.94;letter-spacing:-.03em}
h2,.h2{font-size:clamp(38px,7.6vw,88px);line-height:.95;letter-spacing:-.012em}
h3,.h3{font-size:clamp(22px,2.6vw,30px);line-height:1.06;letter-spacing:-.01em}
h4,.h4{font-size:clamp(19px,2vw,22px);line-height:1.1;letter-spacing:-.01em}

.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.4;color:var(--bone-72)}
.small{font-size:14px;line-height:1.45;color:var(--bone-72)}
.eyebrow{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-56);font-weight:500;
}
.hand{font-family:var(--hand);font-size:15px;line-height:1.25;color:var(--bone-56)}
.serif{font-family:var(--display)}
.muted{color:var(--bone-72)}

.prose p + p{margin-top:1.1em}
.prose a{border-bottom:1px solid var(--bone-22);padding-bottom:1px}
.prose a:hover{border-color:var(--bone)}


/* ==========================================================================
   04 BUTTONS, PILL LABELS, ARROW LINKS, SOCIAL PROOF
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);padding:12px 30px;
  font-family:var(--body);font-size:15px;line-height:1.35;font-weight:500;
  border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease);
}
.btn-fill{background:var(--bone);color:var(--bg)}
.btn-fill:hover{transform:translateY(-2px);background:#fff}
.btn-line{border-color:var(--bone-40);color:var(--bone)}
.btn-line:hover{transform:translateY(-2px);border-color:var(--bone);background:var(--bone-08)}
.btn-sm{padding:8px 20px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* pill label chip that sits above a heading */
.pill-label{
  display:inline-block;background:var(--bone);color:var(--bg);
  border-radius:100px;padding:6px 16px;
  font-size:11px;font-weight:500;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;
}
.pill-label-line{
  background:transparent;color:var(--bone-72);
  border:1px solid var(--bone-22);
}

/* text link followed by repeating arrows */
.arrow-link{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(17px,2vw,21px);line-height:1.2;color:var(--bone);
}
.arrow-link .arrows{display:inline-flex;align-items:center;gap:2px;font-size:.9em}
.arrow-link .arrows i{
  font-style:normal;display:inline-block;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.arrow-link .arrows i:nth-child(1){opacity:1}
.arrow-link .arrows i:nth-child(2){opacity:.72}
.arrow-link .arrows i:nth-child(3){opacity:.48}
.arrow-link .arrows i:nth-child(4){opacity:.26}
.arrow-link:hover .arrows i{opacity:1}
.arrow-link:hover .arrows i:nth-child(1){transform:translateX(4px)}
.arrow-link:hover .arrows i:nth-child(2){transform:translateX(7px)}
.arrow-link:hover .arrows i:nth-child(3){transform:translateX(10px)}
.arrow-link:hover .arrows i:nth-child(4){transform:translateX(13px)}
.arrow-link-lg{font-size:clamp(21px,3.4vw,38px);font-family:var(--display);letter-spacing:-.01em}

/* 5.0 + stars + review count. Gold, because this is earned proof and gold
   is not allowed to appear anywhere that is not. */
.proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proof-score{font-family:var(--display);font-size:30px;line-height:1;color:var(--gold)}
.proof-stars{color:var(--gold);letter-spacing:.12em;font-size:14px}
.proof-text{font-size:14px;color:var(--bone-56)}
.proof-rule{width:1px;height:26px;background:var(--line)}


/* ==========================================================================
   05 HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(14,14,13,.84);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(8px)){
  .site-header{backdrop-filter:blur(10px)}
}
.header-in{
  max-width:var(--max);margin:0 auto;padding:13px var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.brand{
  font-family:var(--display);font-size:22px;line-height:1;
  letter-spacing:.22em;text-indent:.22em;
}
.brand small{
  display:block;font-family:var(--body);font-size:9px;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--bone-56);margin-top:6px;
}
.nav{display:flex;gap:34px;align-items:center;justify-self:center}
.nav a{
  position:relative;font-size:15px;color:var(--bone-72);
  padding:4px 0;transition:color .25s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--bone);
}
.header-right{justify-self:end;display:flex;align-items:center;gap:12px}

/* small screen menu, native details so it works with JS off */
.menu{display:none;position:relative}
.menu > summary{
  list-style:none;cursor:pointer;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bone-40);border-radius:100px;
}
.menu > summary::-webkit-details-marker{display:none}
.bars{position:relative;display:block;width:16px;height:1px;background:var(--bone)}
.bars::before,.bars::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:var(--bone);
}
.bars::before{top:-5px}
.bars::after{top:5px}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 15px);min-width:190px;z-index:70;
  display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:16px;
  background:rgba(14,14,13,.97);box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.menu-panel a{display:block;padding:11px 14px;border-radius:10px;font-size:15px;color:var(--bone-72)}
.menu-panel a:hover{color:var(--bone);background:var(--bone-08)}
.menu-panel a[aria-current="page"]{color:var(--bone);background:var(--bone-08)}


/* ==========================================================================
   06 FOOTER
   ========================================================================== */
.site-footer{
  overflow:hidden;background:var(--bg);
  border-top:1px solid var(--line);
  padding-top:clamp(48px,6vw,80px);
}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4vw,56px);align-items:start;
}
.footer-rows{display:grid;gap:2px}
.footer-rows a,.footer-rows div{
  display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.footer-rows .label{
  flex:0 0 auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-56);
}
.footer-rows .value{
  flex:1 1 auto;text-align:right;font-family:var(--display);
  font-size:clamp(18px,2vw,24px);line-height:1.15;letter-spacing:-.01em;
}
.footer-rows a:hover .value{color:#fff}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.footer-nav a{font-size:15px;color:var(--bone-72)}
.footer-nav a:hover{color:var(--bone)}
.footer-note{
  margin-top:clamp(30px,4vw,48px);padding-bottom:clamp(20px,3vw,34px);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-56);
}
/* giant wordmark, letters spread across the full width, cropped by the page edge */
.wordmark{
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--display);
  font-size:clamp(64px,18vw,268px);line-height:.92;
  color:rgba(231,233,222,.16);
  /* the negative margin is what crops the letters against the page edge,
     the footer's overflow:hidden does the cutting */
  padding:0 var(--pad);margin:0;padding-bottom:.10em;
  user-select:none;pointer-events:none;
}


/* ==========================================================================
   07 SECTION SHELL
   ========================================================================== */
.section{padding:var(--sec) 0;position:relative}
.section-tight{padding:clamp(48px,6vw,88px) 0}
.section-line{border-top:1px solid var(--line)}

.section-head{max-width:960px}
.section-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .pill-label{margin-bottom:20px}
.section-head h2{max-width:14em}
.section-head.is-center h2{margin-left:auto;margin-right:auto}
.section-head .lead{margin-top:22px;max-width:58ch}
.section-head.is-center .lead{margin-left:auto;margin-right:auto}

/* heading on the left, link on the right */
.head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,60px);flex-wrap:wrap;
}
.head-row .section-head{max-width:min(640px,100%)}
.head-row .arrow-link{padding-bottom:6px}


/* ==========================================================================
   08 SPLIT HERO
   ========================================================================== */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  min-height:640px;
  min-height:clamp(560px,calc(100svh - var(--hdr)),900px);
  position:relative;
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  /* max-width + margin-left:auto lands the text on the same line as .wrap */
  width:100%;max-width:calc(var(--max) / 2);
  margin-left:auto;
  padding:clamp(56px,7vw,96px) var(--pad);
}
.hero-copy .pill-label{align-self:flex-start}
.hero-copy h1{margin-top:26px;max-width:11ch}
.hero-copy h1 em{font-style:italic;color:var(--bone-72)}
.hero-support{
  margin-top:clamp(22px,2.6vw,30px);max-width:44ch;
  font-family:var(--display);font-size:clamp(21px,2.3vw,27px);
  line-height:1.14;letter-spacing:-.01em;color:var(--bone-72);
}
.hero-support cite{
  display:block;margin-top:14px;font-style:normal;font-family:var(--body);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-56);
}
.hero-copy .btn-row{margin-top:clamp(26px,3vw,36px)}
.hero-copy .proof{margin-top:clamp(26px,3vw,34px)}

.hero-media{position:relative;overflow:hidden;background:var(--frame);min-height:320px}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,14,13,.55),rgba(14,14,13,0) 34%);
}
.hero-media figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px;
  font-family:var(--hand);font-size:14px;color:var(--bone);
  text-shadow:0 1px 10px rgba(0,0,0,.65);
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.7));
}

/* interior page head, same family, less height */
.page-head{padding:clamp(56px,7vw,104px) 0 clamp(34px,4vw,54px)}
.page-head h1{max-width:13ch}
.page-head .lead{margin-top:24px;max-width:56ch}


/* ==========================================================================
   09 TICKER
   ========================================================================== */
.ticker{
  position:relative;width:100%;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;background:var(--bg);
}
.ticker-track{
  display:flex;width:max-content;
  animation:tickerScroll 48s linear infinite;
  will-change:transform;
}
.ticker-group{display:flex;align-items:center;flex:0 0 auto}
.ticker-item{
  display:inline-flex;align-items:center;gap:28px;padding-right:28px;
  font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-72);white-space:nowrap;
}
.ticker-item::after{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--ember);
}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.ticker-red .ticker-item{color:var(--bone)}


/* ==========================================================================
   10 PACKED IMAGE ROW + DENSE GALLERY GRID
   ========================================================================== */
/* full bleed row of photographs butted together, no page margin */
.packed{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--packed-gap);width:100%;
}
.packed-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 3 column edge to edge grid, images completely fill each tile */
.grid-dense{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--grid-gap);width:100%;
}
.grid-dense-4{grid-template-columns:repeat(4,minmax(0,1fr))}


/* ==========================================================================
   11 PHOTO CARDS, AVATARS, TILES
   ========================================================================== */
.tile{
  position:relative;margin:0;overflow:hidden;background:var(--frame);
  aspect-ratio:5 / 7;
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.78));
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.tile:hover .tile-cap,.tile:focus-within .tile-cap{opacity:1;transform:none}

.photo-card{
  position:relative;margin:0;overflow:hidden;background:var(--frame);
  border-radius:var(--r-card);
}
.photo-card img{width:100%;height:100%;object-fit:cover}
.photo-card figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
  font-family:var(--hand);font-size:15px;color:var(--bone);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.78));
}
.ratio-45{aspect-ratio:5 / 4}
.ratio-43{aspect-ratio:4 / 3}
.ratio-57{aspect-ratio:5 / 7}
.ratio-11{aspect-ratio:1 / 1}

.avatar{
  flex:0 0 auto;width:100px;height:100px;border-radius:100px;overflow:hidden;
  background:var(--bone-08);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
/* portrait photos crop square here, so favour the top where the face is */
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.avatar-mono{
  font-family:var(--display);font-size:40px;line-height:1;color:var(--bone-72);
}
.avatar-sm{width:44px;height:44px}
.avatar-sm.avatar-mono{font-size:21px}

/* shared hover lift */
.lift{transition:transform .35s var(--ease)}
.lift:hover{transform:translateY(-6px)}


/* ==========================================================================
   12 ARTIST FEATURE
   ========================================================================== */
.artist-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,32px);align-items:end;
  margin-top:clamp(40px,5vw,64px);
}
.portrait-card{
  position:relative;border-radius:24px;overflow:hidden;background:var(--frame);
  aspect-ratio:3 / 4.05;container-type:inline-size;
}
.portrait-card img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.portrait-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.74));
}
.portrait-name{
  position:absolute;left:0;right:0;bottom:.1em;z-index:2;text-align:center;
  font-family:var(--display);line-height:.86;letter-spacing:-.02em;
  font-size:clamp(66px,11vw,148px);
  font-size:34cqw;
  color:rgba(231,233,222,.6);
}
.artist-side{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
.artist-shot{border-radius:24px;overflow:hidden;background:var(--frame);aspect-ratio:4 / 3}
.artist-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.artist-quote{
  font-family:var(--display);font-size:clamp(24px,3.2vw,38px);
  line-height:1.08;letter-spacing:-.01em;
}
.artist-quote span{
  display:block;font-family:var(--body);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-56);margin-top:18px;
}

/* staggered annotated points */
.points{margin-top:clamp(52px,6.5vw,92px);display:grid;gap:clamp(32px,4vw,52px)}
.points li{display:flex;gap:22px;max-width:640px;align-items:flex-start}
.points li:nth-child(2){margin-left:12%}
.points li:nth-child(3){margin-left:24%}
.points h3{margin-bottom:12px}
.points p{color:var(--bone-72)}
.ast{
  width:clamp(38px,4.6vw,60px);height:auto;flex:0 0 auto;
  color:var(--bone-22);margin-top:6px;
}
.ig-link{
  display:inline-block;margin-top:10px;padding:8px 0 3px;
  font-size:14px;letter-spacing:.06em;color:var(--bone-72);
  border-bottom:1px solid var(--bone-22);
}
.ig-link:hover{color:var(--bone);border-color:var(--bone)}


/* ==========================================================================
   13 TEAM CARDS
   ========================================================================== */
.team-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(44px,5.5vw,72px);
}
.team-card{
  position:relative;display:flex;flex-direction:column;gap:18px;
  padding:30px 26px 32px;border-radius:24px;
  border:1px solid var(--line);background:rgba(231,233,222,.035);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.team-card:hover{transform:translateY(-6px);border-color:var(--bone-22)}
.team-card h3{letter-spacing:-.01em}
.team-role{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-56);
  margin-top:6px;
}
.team-handle{
  font-size:14px;color:var(--bone-72);letter-spacing:.04em;
}
.team-styles{color:var(--bone-72);font-size:15px;line-height:1.45}
.team-card.is-flag{border-color:rgba(183,48,43,.45);background:rgba(183,48,43,.06)}
.team-note{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.4;color:var(--bone-72);
}
.team-note::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 4px var(--red-soft);margin-top:5px;
}


/* ==========================================================================
   14 PROCESS TRACK
   ========================================================================== */
/* The red thread down the middle is CUT, per the design plan's own
   self-critique: the stencil-to-skin headline already tells the
   before/after story, and the thread said it a second time. What is left
   is a quiet hairline that only exists so the step pins have something to
   sit on. Colour lives on the pins and the numbers instead. */
.track{position:relative;margin-top:clamp(52px,6vw,86px)}
.track::before{
  content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,
    rgba(231,233,222,0),var(--bone-22) 8%,
    var(--bone-22) 92%,rgba(231,233,222,0));
}
.step{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px);margin-bottom:clamp(30px,4vw,52px);
}
.step:last-child{margin-bottom:0}
.step-card{
  --rot:0deg;
  position:relative;border-radius:var(--r-card);padding:30px 30px 32px;
  background:linear-gradient(166deg,var(--paper) 0%,var(--paper-2) 100%);
  color:var(--paper-ink);box-shadow:0 20px 44px rgba(0,0,0,.45);
  transform:rotate(var(--rot));
}
.step:nth-child(odd) .step-card{grid-column:1;--rot:-.5deg}
.step:nth-child(even) .step-card{grid-column:2;--rot:.6deg}
.step .pin{
  position:absolute;top:44px;left:50%;width:13px;height:13px;border-radius:50%;
  background:var(--red);transform:translateX(-50%);z-index:2;
  box-shadow:0 0 0 5px var(--red-soft);
}
.step-num{
  display:block;font-family:var(--display);font-size:44px;line-height:1;
  color:var(--red);margin-bottom:10px;
}
.step-card h3{color:#1B1712;margin-bottom:12px}
.step-card p{color:var(--paper-ink-2)}
.step-card .scrawl{
  display:inline-block;margin-top:16px;
  font-family:var(--hand);font-size:15px;color:#8A3B31;
}
.process-shots{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);margin-top:clamp(52px,6vw,80px);
}


/* ==========================================================================
   15 REVIEWS
   ========================================================================== */
.says-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);margin-top:clamp(46px,5.5vw,74px);
}
.say{
  margin:0;padding:30px 28px;border-radius:24px;
  border:1px solid var(--line);background:rgba(231,233,222,.035);
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
}
.say blockquote{
  margin:0;font-family:var(--display);font-size:clamp(22px,2.4vw,30px);
  line-height:1.1;letter-spacing:-.01em;
}
.say figcaption{
  display:flex;align-items:center;gap:12px;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-56);
}
.say figcaption b{font-weight:500;color:var(--bone-72)}
.say-photo{position:relative;border-radius:24px;overflow:hidden;background:var(--frame)}
.say-photo::before{content:"";display:block;padding-top:118%}
.say-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.say-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
  font-family:var(--hand);font-size:15px;color:var(--bone);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.78));
}

/* big centred pull quote */
.pull{
  text-align:center;padding:clamp(66px,8vw,116px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pull p{
  font-family:var(--display);font-size:clamp(30px,5.2vw,58px);
  line-height:1.04;letter-spacing:-.02em;max-width:20ch;margin:0 auto;
}
.pull cite{
  display:block;margin-top:24px;font-style:normal;font-family:var(--body);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-56);
}


/* ==========================================================================
   16 FAQ
   ========================================================================== */
.faq-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4vw,64px);margin-top:clamp(44px,5.5vw,74px);
}
.faq-grid details{border-bottom:1px solid var(--line);align-self:start}
.faq-grid summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;padding:24px 0;
  font-family:var(--display);font-size:clamp(21px,2.4vw,26px);
  line-height:1.12;letter-spacing:-.01em;
}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary .plus{
  flex:0 0 auto;position:relative;width:16px;height:16px;margin-top:6px;
  transition:transform .3s var(--ease);
}
.faq-grid summary .plus::before,
.faq-grid summary .plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--bone-72);
  transform:translate(-50%,-50%);
}
.faq-grid summary .plus::before{width:16px;height:1px}
.faq-grid summary .plus::after{width:1px;height:16px;transition:opacity .3s var(--ease)}
.faq-grid details[open] summary .plus{transform:rotate(90deg)}
.faq-grid details[open] summary .plus::after{opacity:0}
.faq-answer{padding:0 36px 26px 0;color:var(--bone-72);max-width:56ch}
.faq-answer a{border-bottom:1px solid var(--bone-22);padding-bottom:2px}
.faq-answer a:hover{border-color:var(--bone)}


/* ==========================================================================
   17 CONTACT ROWS + CLOSING
   ========================================================================== */
.closing{position:relative;overflow:hidden}
.closing::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 0%, rgba(183,48,43,.14), transparent 70%);
}
.closing-in{position:relative;text-align:center}

.contact-rows{
  max-width:780px;margin:clamp(44px,5vw,66px) auto 0;
  border-top:1px solid var(--line);text-align:left;
}
.contact-rows > *{
  display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:22px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.contact-rows .label{
  flex:0 0 auto;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-56);
}
.contact-rows .value{
  flex:1 1 auto;text-align:right;font-family:var(--display);
  font-size:clamp(20px,2.6vw,30px);line-height:1.1;letter-spacing:-.01em;
}
.contact-rows a:hover .value{color:#fff}
.also{margin-top:28px;font-family:var(--hand);font-size:16px;color:var(--bone-56)}


/* ==========================================================================
   18 ANIMATION UTILITIES
   Hidden states live behind .anim, which JavaScript adds to <html>.
   With JS off, nothing is ever hidden.
   ========================================================================== */
.anim [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.anim [data-reveal="scale"]{transform:translateY(26px) scale(.95)}
.anim [data-reveal="left"]{transform:translateX(-26px)}
.anim [data-reveal].is-in{opacity:1;transform:none}

/* rotation and hover have to compose with the reveal transform,
   so these sit after the generic rules and out specify them on purpose */
.anim .step-card[data-reveal]{transform:rotate(var(--rot)) translateY(26px)}
.anim .step-card[data-reveal].is-in{transform:rotate(var(--rot))}
.anim .lift[data-reveal].is-in:hover{transform:translateY(-6px)}
.anim .team-card[data-reveal].is-in:hover{transform:translateY(-6px)}


/* ==========================================================================
   19 RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .says-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .header-in{display:flex;justify-content:space-between;gap:12px}
  .nav{display:none}
  .menu{display:block}

  .hero-split{grid-template-columns:1fr;min-height:0}
  .hero-copy{max-width:none;margin-left:0;padding:clamp(44px,8vw,72px) var(--pad) clamp(40px,6vw,60px)}
  .hero-media{min-height:0;aspect-ratio:4 / 3.3}
  .hero-media::after{background:linear-gradient(180deg,rgba(14,14,13,.45),rgba(14,14,13,0) 34%)}

  .artist-grid{grid-template-columns:1fr}
  .portrait-card{aspect-ratio:3 / 3.6}
  .points li:nth-child(2),.points li:nth-child(3){margin-left:0}

  .faq-grid{grid-template-columns:1fr}

  .track::before{left:7px}
  .step{grid-template-columns:1fr;padding-left:34px}
  .step:nth-child(odd) .step-card,
  .step:nth-child(even) .step-card{grid-column:1;--rot:0deg}
  .step .pin{left:7px;top:38px}
}

@media (max-width:760px){
  :root{--pad:20px;--packed-gap:3px;--grid-gap:4px}
  .packed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-dense,.grid-dense-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .says-grid{grid-template-columns:1fr}
  .process-shots{grid-template-columns:1fr}
  .brand{font-size:19px;letter-spacing:.18em;text-indent:.18em}
  .header-in{padding:12px var(--pad)}
  .hero-copy .btn-row{flex-direction:column;align-items:stretch}
  .hero-copy .btn-row .btn{width:100%}
  .contact-rows > *{flex-direction:column;gap:6px}
  .contact-rows .value{text-align:left}
  .footer-rows a,.footer-rows div{flex-direction:column;gap:4px}
  .footer-rows .value{text-align:left}
  .step-card{padding:24px 22px 26px}
  .step-num{font-size:38px}
  .team-card{padding:26px 22px 28px}
  .say{padding:26px 24px}
}

/* two team cards side by side get too narrow for a long handle, so the card
   turns into a compact row: avatar beside the name, everything else below */
@media (max-width:560px){
  .team-grid{grid-template-columns:1fr;gap:14px}
  .team-card{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:18px;row-gap:14px;align-items:center;
  }
  .team-card > :nth-child(n+3){grid-column:1 / -1}
}

@media (max-width:430px){
  .brand small{display:none}
  .header-in{gap:10px}
  .header-right{gap:10px}
  .menu > summary{width:34px;height:34px}
  .btn-sm{padding:7px 15px;font-size:13px}
  .points li{gap:16px}
  .ast{width:34px}
  .avatar{width:76px;height:76px}
  .avatar-mono{font-size:32px}
  .footer-note{font-size:10px;letter-spacing:.12em}
  .proof-score{font-size:26px}
}


/* ==========================================================================
   20 REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ticker-track{animation:none !important;transform:none !important;will-change:auto}
  .anim [data-reveal],
  .anim .step-card[data-reveal]{
    opacity:1 !important;transform:rotate(var(--rot,0deg)) !important;
  }
}


/* ==========================================================================
   21 CONTACT PAGE
   Appended for contact.html only. Nothing above this block is modified.
   Order inside the block: intro split, map, big call row, address block,
   then the responsive rules for all four.
   ========================================================================== */

/* --- headline on the left, support copy and the phone on the right --- */
.contact-top{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4vw,64px);align-items:end;
  padding:clamp(52px,7vw,104px) 0 clamp(40px,5vw,66px);
}
.contact-top .pill-label{margin-bottom:22px}
.contact-top h1{max-width:12ch}
.contact-top-side{padding-bottom:8px}
.contact-top-side .lead{max-width:42ch}
.contact-top-side .eyebrow{display:block;margin-top:clamp(22px,2.6vw,30px)}
.contact-top-side .proof{margin-top:clamp(22px,2.6vw,30px)}

/* the phone, one step up in size from the paragraph beside it */
.phone-lg{
  display:inline-block;margin-top:10px;
  font-family:var(--display);font-size:clamp(32px,4.4vw,52px);
  line-height:1;letter-spacing:-.02em;color:var(--bone);
  transition:color .25s var(--ease);
}
.phone-lg:hover{color:#fff}

/* --- full width map, page padding only, rounded and bone edged --- */
.map-bleed{width:100%;padding:0 var(--pad)}
.map-frame{
  position:relative;overflow:hidden;line-height:0;
  border-radius:var(--r-card);
  border:1px solid var(--bone-22);
  background:var(--frame);
}
.map-frame iframe{
  display:block;width:100%;height:420px;border:0;
  /* the stock map is bright white, this settles it into the dark page
     without inverting it, so street names stay readable */
  filter:grayscale(.45) brightness(.92) contrast(1.04);
}
.map-note{padding:16px var(--pad) 0}

/* --- small label on the left, large type on the right --- */
.cta-row{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(22px,4vw,60px);align-items:start;
}
.cta-row-head{padding-top:10px}
.cta-lead{
  font-family:var(--display);font-size:clamp(27px,4vw,52px);
  line-height:1.05;letter-spacing:-.015em;max-width:17ch;
}
.phone-xl{
  display:block;margin-top:clamp(16px,2.2vw,28px);
  font-family:var(--display);font-size:clamp(42px,9.2vw,116px);
  line-height:.92;letter-spacing:-.03em;color:var(--bone);
  transition:color .25s var(--ease);
}
.phone-xl:hover{color:#fff}
.cta-socials{
  margin-top:clamp(30px,3.8vw,50px);
  display:grid;gap:16px;justify-items:start;
}

/* --- address block beside a studio photo --- */
.address-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,2.6vw,34px);align-items:stretch;
  margin-top:clamp(40px,5vw,64px);
}
.address-card{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(26px,3vw,38px);padding:clamp(28px,3.4vw,46px);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:rgba(231,233,222,.035);
}
.address-lines{
  font-family:var(--display);font-size:clamp(25px,3.3vw,40px);
  line-height:1.1;letter-spacing:-.015em;font-style:normal;
}
.address-lines span{display:block}
.address-note{
  margin-top:16px;display:flex;align-items:flex-start;gap:10px;
  font-size:15px;line-height:1.45;color:var(--bone-72);
}
.address-note::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 4px var(--red-soft);margin-top:6px;
}

/* --- contact page responsive --- */
@media (max-width:900px){
  .contact-top{grid-template-columns:1fr;align-items:start;gap:24px;}
  .contact-top h1{max-width:none}
  .contact-top-side{padding-bottom:0}
  .cta-row{grid-template-columns:1fr;gap:22px}
  .cta-row-head{padding-top:0}
  .address-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .map-frame iframe{height:300px}
  .cta-lead{max-width:none}
  .address-card{padding:26px 22px 28px}
}


/* ==========================================================================
   21 GALLERY PAGE  (gallery.html)
   Appended for the gallery build. No rule above this block was changed.

   A 12 column mosaic, so a row can hold either three wide tiles or four
   narrower ones. That, plus a ratio shared by every tile in a row, is what
   makes the packing read as a mosaic while every row still sits flush.
   Tiles themselves are the shared .tile / .tile-cap components.
   ========================================================================== */
.gal-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gap);width:100%;
}
.gal-grid > .tile{grid-column:span 4;aspect-ratio:var(--gal-ar,5 / 7)}
.gal-grid > .g-3up{grid-column:span 4}     /* three across this row */
.gal-grid > .g-4up{grid-column:span 3}     /* four across this row  */

/* row height comes from the ratio the whole row shares */
.gal-grid > .ar-t{--gal-ar:5 / 7}
.gal-grid > .ar-m{--gal-ar:4 / 5}
.gal-grid > .ar-s{--gal-ar:1 / 1}

/* touch screens never fire hover, so the style caption just stays up */
@media (hover:none){
  .gal-grid .tile-cap{opacity:1;transform:none}
}

/* tablet and phone: two columns, one ratio, still edge to edge */
@media (max-width:960px){
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid > .tile{grid-column:span 1;--gal-ar:5 / 7}
}


/* ==========================================================================
   22 ABOUT PAGE  (about.html)
   Appended for about.html. Everything here is new, nothing above is changed.
   Selectors are page scoped so no other page picks these up by accident.
   ========================================================================== */

/* page hero, muted italic second line, same treatment as the home hero */
.about-head h1 em{font-style:italic;color:var(--bone-72)}

/* portrait crop that is not already in section 11 */
.ratio-portrait{aspect-ratio:4 / 5}

/* --- the studio story, big photo beside the prose --------------------- */
.story-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  margin-top:clamp(38px,4.5vw,60px);
}
.story-copy{max-width:56ch}
.story-copy .lead{color:var(--bone)}
.story-copy p{color:var(--bone-72)}
.story-copy .artist-quote{margin-top:clamp(28px,3.2vw,40px);color:var(--bone)}

/* --- one artist per row, alternating side ----------------------------- */
.profiles{margin-top:clamp(44px,5.5vw,72px);border-top:1px solid var(--line)}
.profile{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,56px);align-items:center;
  padding:clamp(30px,4vw,54px) 0;border-bottom:1px solid var(--line);
}
.profile-media{grid-column:1;grid-row:1}
.profile-body{grid-column:2;grid-row:1}
/* flipped rows swap the track widths too, so the words always get the wide
   column and the picture always gets the narrow one */
.profile-alt{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
.profile-alt .profile-media{grid-column:2}
.profile-alt .profile-body{grid-column:1}
.profile-media .photo-card img,
.profile-media img{object-position:50% 34%}

.profile-body h3{font-size:clamp(30px,4.2vw,50px);line-height:.98;letter-spacing:-.02em}
.profile-lead h3{font-size:clamp(34px,5.2vw,62px)}
.profile-lead .pill-label{margin-bottom:18px}
.profile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:14px}
.profile-role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-56)}
.profile-body p{margin-top:18px;color:var(--bone-72);max-width:54ch}
.profile-body .profile-quote{
  margin-top:22px;font-family:var(--display);
  font-size:clamp(21px,2.4vw,29px);line-height:1.1;letter-spacing:-.01em;
  color:var(--bone);
}
.profile-styles{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.profile-styles span{
  border:1px solid var(--bone-22);border-radius:var(--r-pill);padding:7px 15px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-72);
}

/* stands in where there is no photograph of that artist, so the row keeps
   its weight instead of collapsing to a wall of text */
.mono-plate{
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:24px;aspect-ratio:4 / 5;
  border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(231,233,222,.075),rgba(231,233,222,.015));
}
.mono-plate b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(96px,14vw,176px);line-height:.8;
  color:rgba(231,233,222,.2);
}
.mono-plate i{
  position:absolute;left:12px;right:12px;bottom:22px;text-align:center;
  font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-56);
}
.mono-plate.is-lead{
  border-color:rgba(183,48,43,.42);
  background:linear-gradient(168deg,rgba(183,48,43,.16),rgba(231,233,222,.02));
}

/* --- the style list --------------------------------------------------- */
.style-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(44px,5.5vw,72px);
}
.style-card{
  padding:30px 26px 32px;border-radius:24px;
  border:1px solid var(--line);background:rgba(231,233,222,.035);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.style-card:hover{transform:translateY(-6px);border-color:var(--bone-22)}
.style-num{
  display:block;font-family:var(--display);font-size:30px;line-height:1;
  color:var(--red);margin-bottom:16px;
}
.style-card h3{font-size:clamp(21px,2.2vw,26px)}
.style-card p{margin-top:12px;color:var(--bone-72);font-size:15px;line-height:1.5}

/* hover has to compose with the reveal transform, same pattern as section 18 */
.anim .style-card[data-reveal].is-in:hover{transform:translateY(-6px)}

/* --- about page responsive -------------------------------------------- */
@media (max-width:1080px){
  .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:26px}
  .story-copy{max-width:none}
  .profile,.profile-alt{grid-template-columns:1fr;gap:24px}
  .profile-media,
  .profile-body,
  .profile-alt .profile-media,
  .profile-alt .profile-body{grid-column:1;grid-row:auto}
  .mono-plate{aspect-ratio:16 / 9}
  .mono-plate b{font-size:clamp(72px,14vw,120px)}
  .mono-plate i{bottom:14px}
}

@media (max-width:760px){
  .style-grid{grid-template-columns:1fr}
  .style-card{padding:26px 22px 28px}
  .profile-styles span{padding:6px 13px;letter-spacing:.1em}
}

/* ---------- hero cover video ---------- */
.hero-media--video{position:relative;overflow:hidden;background:#0E0E0D}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media--video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, rgba(14,14,13,.72) 0%, rgba(14,14,13,0) 26%),
             linear-gradient(to top, rgba(14,14,13,.55) 0%, rgba(14,14,13,0) 34%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  .hero-media--video{background:#0E0E0D url("video/reel-showcase-poster-hero.jpg") center/cover no-repeat}
}
/* ---------- real logo lockup ---------- */
.cx-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.cx-lockup img{height:34px;width:auto;display:block;flex:0 0 auto}
.cx-type{display:flex;flex-direction:column;line-height:1;letter-spacing:.30em;text-indent:.30em;font-size:15px}
.cx-type small{letter-spacing:.22em;text-indent:.22em;font-size:9px;opacity:.62;margin-top:5px}
@media (max-width:600px){
  .cx-lockup img{height:26px}
  .cx-type{font-size:13px}
  .cx-type small{font-size:8px}
}
/* =========================================================
   MOBILE FIXES + MATERIALITY PASS
   Appended after review. Two bugs and one design problem:
   1. .ticker never clipped its 3000px track, so the whole
      page was wider than the viewport on phones.
   2. The hero panel was landscape while the video is 9:16,
      so the video cropped to a thin band.
   3. The ground was flat neutral black. Flat is the reason
      it reads as generated. Depth comes from warm-tinted
      layers, grain, and light, not from a lighter colour.
   ========================================================= */

/* ---------- 1. kill the page-wide overflow ---------- */
html,body{max-width:100%}
.ticker{overflow:hidden;max-width:100vw}
.ticker-track{max-width:none}
*,*::before,*::after{box-sizing:border-box}
img,video,iframe{max-width:100%}

/* ---------- 2. hero video: portrait panel on phones ---------- */
@media (max-width:900px){
  .hero-media,.hero-media--video{aspect-ratio:4 / 5;min-height:0}
  .hero-video{object-position:center 42%}
}
@media (max-width:600px){
  .hero-media,.hero-media--video{aspect-ratio:3 / 4}
  .btn{white-space:normal;line-height:1.25}
  .cx-lockup img{height:24px}
}

/* ---------- 3. materiality: warm blacks, layered, lit ---------- */
:root{
  --ink:#0D0C0B;          /* warmer than neutral black */
  --ink-2:#14120F;        /* raised */
  --ink-3:#1B1815;        /* raised more */
  --grain-o:.055;
}

/* film grain over the whole page, the single biggest anti-flat lever */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-o);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* alternate section tone so the page has rhythm instead of one flat wall */
.section:nth-of-type(even){background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%)}
.section{position:relative}

/* a light source behind every section head, so headings sit in a glow */
.section-head,.sec-head{position:relative}
.section-head::before,.sec-head::before{
  content:"";position:absolute;left:-8%;top:-70%;width:58%;height:240%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,68,56,.13),transparent 72%);
}

/* hairline top edge on raised blocks, the detail that reads as craft */
.card,.gcard,.book__opt,.artist-card{
  position:relative;
  background:linear-gradient(180deg,var(--ink-3) 0%,var(--ink-2) 100%);
  border:1px solid rgba(231,233,222,.10);
  box-shadow:0 1px 0 rgba(231,233,222,.05) inset,
             0 2px 6px rgba(0,0,0,.5),
             0 18px 40px rgba(0,0,0,.42);
}

/* photographs get a warm rim rather than sitting naked on the ground */
.work img,.mosaic img,.packed img{
  box-shadow:0 1px 0 rgba(231,233,222,.06) inset,0 14px 34px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion: reduce){
  body::after{opacity:.03}
}
/* =========================================================
   HERO VIDEO - desktop framing fix
   The source is 608x1080. Stretching it full-bleed across an
   800px+ panel upscaled it ~1.5x, which is why it looked both
   zoomed in and soft. Present it as a framed portrait instead:
   it never scales above its native width, it stays sharp, and
   a floating frame reads more designed than a stretched fill.
   ========================================================= */
@media (min-width:901px){
  .hero-media--video{
    aspect-ratio:auto;
    min-height:0;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(28px,3.4vw,56px);
    background:
      radial-gradient(60% 46% at 50% 44%, rgba(240,68,56,.14), transparent 72%),
      linear-gradient(180deg,#141210 0%,#0D0C0B 100%);
  }
  .hero-media--video::after{display:none}

  .hero-video{
    width:auto;
    height:auto;
    max-width:min(100%,520px);   /* never exceed native 608 */
    max-height:min(74vh,760px);
    aspect-ratio:608 / 1080;
    object-fit:cover;
    border-radius:20px;
    box-shadow:
      0 1px 0 rgba(231,233,222,.10) inset,
      0 6px 18px rgba(0,0,0,.55),
      0 34px 80px rgba(0,0,0,.55);
  }

  .hero-media--video figcaption{
    position:absolute;left:50%;bottom:clamp(14px,2vw,26px);
    transform:translateX(-50%);
    white-space:nowrap;
  }

  .hero-split{align-items:center}
}

/* tablet: keep it contained too, just smaller */
@media (min-width:601px) and (max-width:900px){
  .hero-media--video{padding:24px;display:flex;align-items:center;justify-content:center;aspect-ratio:auto}
  .hero-video{max-width:min(100%,420px);aspect-ratio:608 / 1080;border-radius:18px}
}
/* =========================================================
   HERO VIDEO v3 - full bleed, height capped
   v1 filled the panel but ran the full viewport height, which
   made it dominate. v2 shrank it to a framed card, which read
   as small. This keeps the full-bleed fill and simply caps how
   tall the hero is allowed to get. Source re-encoded at its
   native 720x1280 so filling the panel no longer upscales.
   ========================================================= */
@media (min-width:901px){
  .hero-split{
    align-items:stretch;
    min-height:0;
  }
  .hero-media--video{
    display:block;
    padding:0;
    aspect-ratio:auto;
    height:clamp(480px,72vh,720px);
    background:#0D0C0B;
    border-radius:0;
  }
  .hero-video{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 34%;
    border-radius:0;
    box-shadow:none;
  }
  /* soft edge back so the video meets the copy column cleanly */
  .hero-media--video::after{
    display:block;content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to right,rgba(13,12,11,.80) 0%,rgba(13,12,11,0) 22%);
  }
  .hero-media--video figcaption{
    position:absolute;left:auto;right:clamp(16px,2vw,28px);
    bottom:clamp(14px,2vw,24px);transform:none;white-space:nowrap;
  }
  .hero-copy{padding-top:clamp(32px,5vh,72px);padding-bottom:clamp(32px,5vh,72px)}
}

@media (min-width:601px) and (max-width:900px){
  .hero-media--video{display:block;padding:0;aspect-ratio:auto;height:clamp(380px,52vh,540px)}
  .hero-video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 34%;border-radius:0}
}
/* =========================================================
   IMAGE FRAMES - a real border treatment, not a 1px outline
   Three layers do the work: a warm hairline that reads as a
   bevel, an inset highlight along the top edge like light
   catching a frame, and a deep drop shadow so the photo sits
   above the ground instead of lying flat on it. An ember
   hairline appears on hover so the accent means "interactive".
   ========================================================= */
.work img, .mosaic img, .packed img, .board img,
.gallery-grid img, .tile img, .card img, .artist-card img,
figure.polaroid img, .hero-media img{
  border-radius:14px;
  border:1px solid rgba(231,233,222,.14);
  box-shadow:
    0 1px 0 rgba(231,233,222,.13) inset,
    0 0 0 1px rgba(13,12,11,.85),
    0 3px 8px rgba(0,0,0,.55),
    0 20px 44px rgba(0,0,0,.48);
  transition:border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

/* the tiles that sit edge to edge keep square corners, they are a wall */
.packed img, .packed picture{border-radius:0}

/* hover: the frame warms up */
.work a:hover img, .mosaic a:hover img, .tile:hover img,
.gallery-grid a:hover img, .card:hover img{
  border-color:rgba(240,68,56,.55);
  box-shadow:
    0 1px 0 rgba(231,233,222,.18) inset,
    0 0 0 1px rgba(13,12,11,.9),
    0 0 0 3px rgba(240,68,56,.16),
    0 6px 14px rgba(0,0,0,.55),
    0 26px 56px rgba(0,0,0,.52);
  transform:translateY(-3px);
}

/* the video gets the same language so it belongs to the set */
.reel-video{
  border-radius:14px;
  border:1px solid rgba(231,233,222,.14);
  box-shadow:
    0 1px 0 rgba(231,233,222,.13) inset,
    0 3px 8px rgba(0,0,0,.55),
    0 20px 44px rgba(0,0,0,.48);
}

/* portrait / feature images get a slightly heavier frame */
.artist-card img, .portrait img, .feature img{
  border-radius:16px;
  border-color:rgba(231,233,222,.18);
}

@media (prefers-reduced-motion: reduce){
  .work img,.mosaic img,.tile img,.card img{transition:none}
  .work a:hover img,.mosaic a:hover img,.tile:hover img,.card:hover img{transform:none}
}
/* ---------- artist cards: real photographs ---------- */
.profile-media.has-photo{
  position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:5 / 7;background:#141210;
  border:1px solid rgba(231,233,222,.16);
  box-shadow:0 1px 0 rgba(231,233,222,.12) inset,
             0 3px 8px rgba(0,0,0,.55),
             0 22px 48px rgba(0,0,0,.5);
}
.profile-media.has-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:0;border-radius:0;box-shadow:none;
  transition:transform 420ms cubic-bezier(.2,.6,.2,1);
}
.profile:hover .profile-media.has-photo img{transform:scale(1.04)}
.profile-media.has-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 46%);
}
@media (prefers-reduced-motion: reduce){
  .profile-media.has-photo img{transition:none}
  .profile:hover .profile-media.has-photo img{transform:none}
}
/* =========================================================
   REVIEWS BAND - sits directly under the hero.
   Horizontal rail so all twelve real reviews are reachable
   without pushing the rest of the page down a screen.
   ========================================================= */
.rv-band{
  position:relative;padding:clamp(28px,3.6vw,52px) 0 clamp(32px,4vw,60px);
  background:linear-gradient(180deg,#141210 0%,#0D0C0B 100%);
  border-top:1px solid rgba(231,233,222,.10);
  border-bottom:1px solid rgba(231,233,222,.10);
}
.rv-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.rv-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rv-num{font-family:var(--display);font-size:clamp(40px,5vw,62px);line-height:1;color:var(--gold)}
.rv-stars{color:var(--gold);font-size:18px;letter-spacing:3px}
.rv-count{font-size:13px;color:rgba(231,233,222,.62);letter-spacing:.04em}
.rv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.rv-actions .btn{width:auto}

.rv-rail{
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  padding:4px var(--pad) 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(231,233,222,.28) transparent;
}
.rv-rail::-webkit-scrollbar{height:8px}
.rv-rail::-webkit-scrollbar-thumb{background:rgba(231,233,222,.24);border-radius:8px}
.rv-rail:focus-visible{outline:2px solid var(--ember,#F04438);outline-offset:4px}

.rv-card{
  position:relative;flex:0 0 clamp(268px,26vw,336px);scroll-snap-align:start;
  padding:20px 20px 22px;border-radius:16px;
  background:linear-gradient(180deg,#1B1815 0%,#141210 100%);
  border:1px solid rgba(231,233,222,.12);
  box-shadow:0 1px 0 rgba(231,233,222,.06) inset,0 14px 30px rgba(0,0,0,.42);
}
.rv-g{position:absolute;top:16px;right:16px;line-height:0;opacity:.95}
.rv-top{display:flex;align-items:center;gap:11px;margin-bottom:10px;padding-right:26px}
.rv-av{
  width:38px;height:38px;border-radius:100px;flex:0 0 38px;
  display:grid;place-items:center;font-weight:600;font-size:16px;
}
.rv-who{display:flex;flex-direction:column;min-width:0}
.rv-who b{font-weight:500;font-size:14px;line-height:1.2}
.rv-who i{font-style:normal;font-size:11.5px;color:rgba(231,233,222,.5);margin-top:2px}
.rv-rate{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rv-rate span{color:var(--gold);font-size:13px;letter-spacing:1.5px}
.rv-rate time{font-size:11.5px;color:rgba(231,233,222,.45)}
.rv-card p{font-size:14px;line-height:1.62;color:rgba(231,233,222,.86);margin:0}

@media (max-width:600px){
  .rv-actions{margin-left:0;width:100%}
  .rv-actions .btn{flex:1}
  .rv-card{flex-basis:80vw}
}
/* =========================================================
   BRAND MARK - the real logo, used properly and repeatedly
   Header lockup, hero, a faint watermark mid page, and above
   the footer wordmark. The mark is bone on transparency so it
   sits straight on the ground with no plate behind it.
   ========================================================= */
.hero-mark{
  display:block;height:auto;width:auto;
  max-height:clamp(52px,5.2vw,74px);max-width:min(58%,240px);
  object-fit:contain;object-position:left center;
  margin:0 0 clamp(20px,2.2vw,30px);
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.6));
}
@media (max-width:600px){ .hero-mark{height:52px} }

.brand-watermark{
  position:absolute;left:50%;top:0;transform:translate(-50%,-38%);
  z-index:0;pointer-events:none;user-select:none;
  width:min(52vw,520px);opacity:.05;
}
.brand-watermark img{width:100%;height:auto;display:block;border:0;box-shadow:none}
.rv-band{overflow:hidden}

.footer-mark{
  display:flex;justify-content:center;
  padding:clamp(24px,3vw,44px) var(--pad) clamp(10px,1.4vw,18px);
}
.footer-mark img{
  height:clamp(70px,8vw,110px);width:auto;display:block;
  opacity:.9;border:0;box-shadow:none;border-radius:0;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.55));
}
/* the process rows are a layout grid, not cards. only the paper card inside is styled. */
.step{background:none;border:0;box-shadow:none}

/* =========================================================
   HEADER CONTRAST RESTORE + ADDRESS
   The nav had drifted to a dim grey. Header type is bone,
   full strength, with only the inactive links stepped back
   slightly. Never grey-on-black for navigation.
   ========================================================= */
.site-header{background:rgba(13,12,11,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(231,233,222,.10)}
.site-header .nav a{color:rgba(231,233,222,.78);font-weight:500}
.site-header .nav a:hover{color:#E7E9DE}
.site-header .nav a[aria-current="page"]{color:#E7E9DE}
.site-header .brand,.site-header .cx-type{color:#E7E9DE}
.site-header .cx-type small{color:rgba(231,233,222,.66)}

.hero-addr{margin:clamp(16px,2vw,22px) 0 0;font-size:14px;line-height:1.5}
.hero-addr a{
  color:#E7E9DE;text-decoration:none;
  border-bottom:1px solid rgba(240,68,56,.55);padding-bottom:2px;
}
.hero-addr a:hover{border-bottom-color:#F04438}
.hero-addr span{display:block;color:rgba(231,233,222,.55);font-size:12.5px;margin-top:5px}

.foot-addr{text-align:center;margin:0 0 clamp(10px,1.4vw,16px);font-size:13.5px}
.foot-addr a{color:rgba(231,233,222,.8);text-decoration:none;border-bottom:1px solid rgba(231,233,222,.24);padding-bottom:2px}
.foot-addr a:hover{color:#E7E9DE;border-bottom-color:#F04438}
/* =========================================================
   SECTION DIVIDERS
   The logo's own colours: cool steel-blue drawn from the
   plate the monogram sits on, resolving to bone at the
   centre with the monogram itself as the centrepiece.
   Each divider is a hairline that brightens toward the middle
   with the mark riding on top, so sections separate without
   another slab of flat black.
   ========================================================= */
:root{
  --logo-steel:#5C7A8C;   /* the cool blue-grey of the logo plate */
  --logo-steel-hi:#8FB0C2;
}

.mx-div{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);
  max-width:var(--max);margin:0 auto;
  padding:clamp(30px,4vw,58px) var(--pad);
  pointer-events:none;user-select:none;
}
.mx-div::before,.mx-div::after{
  content:"";height:1px;flex:1 1 auto;min-width:0;
}
.mx-div::before{
  background:linear-gradient(to right,
    rgba(231,233,222,0) 0%,
    rgba(92,122,140,.30) 38%,
    rgba(143,176,194,.68) 100%);
}
.mx-div::after{
  background:linear-gradient(to left,
    rgba(231,233,222,0) 0%,
    rgba(92,122,140,.30) 38%,
    rgba(143,176,194,.68) 100%);
}
.mx-div img{
  height:clamp(26px,3vw,40px);width:auto;display:block;
  opacity:.92;border:0;box-shadow:none;border-radius:0;
  filter:drop-shadow(0 3px 12px rgba(92,122,140,.42));
}

/* a plain variant with a diamond instead of the mark, for tighter spots */
.mx-div--dot::before,.mx-div--dot::after{height:1px}
.mx-div--dot i{
  width:7px;height:7px;flex:0 0 7px;transform:rotate(45deg);
  background:var(--logo-steel-hi);
  box-shadow:0 0 0 4px rgba(92,122,140,.16),0 0 18px rgba(143,176,194,.5);
}

/* accent variant, used once or twice where the page needs heat */
.mx-div--ember::before{background:linear-gradient(to right,rgba(231,233,222,0),rgba(240,68,56,.22) 40%,rgba(240,68,56,.6))}
.mx-div--ember::after{background:linear-gradient(to left,rgba(231,233,222,0),rgba(240,68,56,.22) 40%,rgba(240,68,56,.6))}
.mx-div--ember i{background:#F04438;box-shadow:0 0 0 4px rgba(240,68,56,.16),0 0 18px rgba(240,68,56,.55)}

@media (max-width:600px){
  .mx-div{padding-left:20px;padding-right:20px}
  .mx-div img{height:24px}
}
/* the studio's own line, sitting under the mark as the brand signature */
.brand-tagline{
  text-align:center;margin:0 0 clamp(18px,2.4vw,30px);
  font-family:var(--display);
  font-size:clamp(19px,2.2vw,30px);
  letter-spacing:.005em;
  color:rgba(231,233,222,.82);
}
.brand-tagline span{color:var(--ember,#F04438);font-style:italic}
/* =========================================================
   33 PEOPLE, NOT LETTER PLATES
   Final verification pass. Fourteen grey monogram discs were
   standing in for human faces across the home, about and
   contact pages, and on contact not one photograph appeared
   in the booking block at all. A tattoo studio sells faces
   and hands; a grey letter in a circle is the single cheapest
   looking thing on a site like this. Real photographs of the
   crew exist on disk, so they go in.

   Where there genuinely is no photograph of the person, the
   plate is designed and carries colour instead of sitting
   there as a dead grey rectangle.

   The colour law from DESIGN-PLAN.md is not bent here: gold
   is earned proof only, so nothing below is gold. A tattoo
   artist with no photo takes ember, because a finished tattoo
   is ember. Marie takes bone, because the jewelry bench is a
   different service and bone is the neutral.
   ========================================================= */

/* A photograph inside a round avatar. The IMAGE FRAMES block
   further up gives framed photos a 14px radius and a border,
   which inside a 100px circle reads as a square in a hole, so
   the avatar unwinds all of it. */
.avatar img{border:0;border-radius:0;box-shadow:none}
.avatar.is-photo{
  background:var(--frame);border-color:var(--bone-22);
  box-shadow:0 1px 0 rgba(231,233,222,.14) inset,0 10px 24px rgba(0,0,0,.45);
}
/* The round avatars point at their own square crops, cut to the
   face (assets/artists/*-av.jpg), rather than at the tall 5:7
   portrait with an object-position guessed on top of it. A guess
   put Ryan's chin at the top of his own circle. The full 5:7
   files stay in use for the about page profile frames, where
   there is no crop at all. */
.avatar.is-photo img{object-position:50% 50%}

/* The two people with no photograph. Warm surface, a real ring,
   and the initial in its own accent. Nothing grey left. */
.avatar-mono{background:var(--surface)}
.avatar-mono.is-ember{
  border-color:var(--ember-line);color:var(--ember-lift);
  background:linear-gradient(160deg,rgba(240,68,56,.26),rgba(240,68,56,.05));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 10px 24px rgba(0,0,0,.42);
}
.avatar-mono.is-jewel{
  border-color:var(--bone-22);color:var(--bone);
  background:linear-gradient(160deg,rgba(231,233,222,.17),rgba(231,233,222,.03));
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 10px 24px rgba(0,0,0,.42);
}

/* Marie's panel on the about page was the biggest dead
   rectangle on the site: a charcoal box with a faint M in it.
   A welded chain is the thing she actually makes, so the panel
   draws one. The letter stays, quieter, behind it. */
.mono-plate.is-jewel{
  border-color:var(--bone-22);
  background:
    radial-gradient(72% 62% at 50% 36%, rgba(231,233,222,.14), transparent 70%),
    linear-gradient(158deg,#221F1B 0%,#151311 100%);
}
.jewel-art{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  color:var(--bone);opacity:.5;
}
.mono-plate.is-jewel b{position:relative;z-index:2;color:rgba(231,233,222,.17)}
.mono-plate.is-jewel i{z-index:2}

/* One wide photograph of the people who work here. It does more
   for "this is a real room" than five cards ever will. */
.crew-shot{
  aspect-ratio:16 / 8;
  margin:clamp(34px,4vw,58px) 0 clamp(30px,3.6vw,52px);
}
.crew-shot img{object-position:50% 24%}
@media (max-width:760px){ .crew-shot{aspect-ratio:4 / 3} }

/* On a phone the sticky header already carries the mark, so the
   second copy sitting directly under it goes away. */
@media (max-width:600px){ .hero-mark{display:none} }

/* The hero poster: ink going into skin, not the frame the clip
   happens to open on. This is what shows before the video
   decodes, on a slow connection, and under reduced motion,
   where it is the entire hero. Declared last so it beats both
   earlier .hero-media--video background rules. */
@media (prefers-reduced-motion: reduce){
  .hero-media--video{
    background:#0D0C0B url("video/reel-showcase-poster-hero.jpg") center/cover no-repeat;
  }
}
/* mobile: the video leads. GIB 2026-08-20: "move the video up on mobile, its too low" */
@media (max-width:900px){
  .hero-split{display:flex;flex-direction:column}
  .hero-split .hero-media,
  .hero-split .hero-media--video{order:-1;aspect-ratio:4 / 5}
  .hero-copy{padding-top:clamp(22px,4vw,34px)}
}
/* =========================================================
   TITLE PRESENCE + HEADER CHARACTER
   GIB: "make the title stand out, and give that header some
   interesting design."
   Title: bigger, tighter, with a hand-drawn ember stroke
   under the accent word — the one flourish, nothing else.
   Header: a lit ember-to-gold hairline across the very top,
   the logo given a faint glow, and the active page marked
   with a short ember underscore instead of a plain state.
   ========================================================= */

/* ---- the title ---- */
.hero-copy h1{
  font-size:clamp(52px,7.6vw,108px);
  line-height:.92;
  letter-spacing:-.035em;
  text-shadow:0 2px 30px rgba(8,8,10,.75),0 1px 3px rgba(8,8,10,.5);
}
.hero-copy h1 em{color:#cfd2c4}
.hero-copy h1 .ac-ember,.hero-copy h1 .mx-accent{position:relative;white-space:nowrap}
.hero-copy h1 .ac-ember::after,.hero-copy h1 .mx-accent::after{
  content:"";position:absolute;left:-2%;right:-4%;bottom:.02em;height:.16em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 30 4, 60 11, 118 5' fill='none' stroke='%23F04438' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.9;pointer-events:none;
}

/* ---- the header ---- */
.site-header{position:sticky;top:0;z-index:50}
.site-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#F04438 18%,#F5B942 50%,#F04438 82%,transparent 100%);
  opacity:.85;
}
.site-header .cx-lockup img{filter:drop-shadow(0 0 10px rgba(231,233,222,.25))}
.site-header .nav a{position:relative;padding-bottom:6px}
.site-header .nav a::after{
  content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:#F04438;transform:translateX(-50%);
  transition:width 240ms ease;
}
.site-header .nav a:hover::after{width:60%}
.site-header .nav a[aria-current="page"]::after{width:100%;background:linear-gradient(90deg,#F04438,#F5B942)}
@media (prefers-reduced-motion: reduce){ .site-header .nav a::after{transition:none} }
/* =========================================================
   HEADER SIZE, MOBILE LOGO, MOBILE BUTTONS
   GIB, three asks in a row: bigger header so the logo shows,
   bigger logo on mobile, buttons that pop on mobile.
   ========================================================= */

/* taller header, larger mark at every width */
.site-header .header-in{padding-top:14px;padding-bottom:14px}
.cx-lockup img{height:46px}
.cx-type{font-size:16px}

@media (max-width:600px){
  .site-header .header-in{padding-top:12px;padding-bottom:12px}
  .cx-lockup img{height:40px}
  .cx-type{font-size:14px}
  .cx-type small{font-size:9px}
}

/* mobile buttons: full-width, taller, ember carries the primary,
   a visible press state, and real shadow so they sit above the page */
@media (max-width:700px){
  .btn-row{gap:12px}
  .btn{
    width:100%;padding:16px 24px;font-size:16px;font-weight:600;
    border-radius:30px;
  }
  .btn-fill,.btn-accent{
    background:#F04438;color:#fff;border-color:#F04438;
    box-shadow:0 4px 14px rgba(240,68,56,.38),0 14px 34px rgba(0,0,0,.5);
  }
  .btn-line{
    border-width:2px;border-color:rgba(231,233,222,.85);color:#E7E9DE;
    background:rgba(231,233,222,.05);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }
  .btn:active{transform:translateY(1px) scale(.99)}
}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }
/* faces sit in the top third of the solo portraits, so bias every
   profile frame toward the face and centre the crew shot's layout */
.profile-media img,.profile-media.has-photo img{object-position:center 18%}
.avatar.is-photo{overflow:hidden}
.avatar.is-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.crew-shot{margin-left:auto;margin-right:auto;max-width:980px}
/* =========================================================
   HERO VIDEO v4 - DESKTOP ONLY. Fixes the zoom GIB reported
   2026-08-20 ("far too zoomed in ... the owner's head is a
   zoomed up close").

   The history matters, so it is written down: v2 shrank the
   video to a framed card and was rejected for reading small.
   v3 went full bleed with object-fit:cover, which is what
   caused this bug - the clip is 720x1280 portrait and the
   desktop panel is roughly 800x720, so cover scaled it up and
   threw away about half the frame vertically. Anything left
   was the middle strip, hence the close-up face.

   v4 takes neither side. The panel still fills edge to edge,
   so it does not read small, but the video inside it is
   CONTAINED - the whole frame, zero crop. The space either
   side is filled by a blurred, darkened copy of the poster so
   it reads as a deliberate backdrop and not as black bars.

   Touches desktop (901px and up) ONLY. Tablet and mobile are
   deliberately untouched - GIB confirmed mobile was good.
   ========================================================= */
@media (min-width:901px){
  .hero-media--video{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:hidden;
    background:#0D0C0B;
  }

  /* blurred backdrop, built from the poster so there is no
     second video decode. scaled up past the edges so the
     blur never shows a soft border. */
  .hero-media--video::before{
    content:"";
    position:absolute;
    inset:-10%;
    z-index:0;
    background:url("video/reel-showcase-poster-hero.jpg") center/cover no-repeat;
    filter:blur(34px) saturate(.75) brightness(.42);
    transform:scale(1.14);
    pointer-events:none;
  }

  .hero-video{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:auto;
    object-fit:contain;      /* the whole frame. no crop, no zoom. */
    object-position:center center;
    border-radius:0;
    box-shadow:none;
  }

  /* the left fade still has to sit above the backdrop so the
     video meets the copy column cleanly */
  .hero-media--video::after{
    z-index:2;
  }
}

/* =========================================================
   2026-08-24 PRE-MEETING PASS (GIB)
   "the images of the tattoos look dark... it looks like it's
   got some kind of overlay over them." He was right on both
   counts: caption washes were covering up to half of each
   photo, and nothing lifted the photography off the near
   black ground. Fix is two parts - pull the washes back to a
   bottom strip, and grade the tattoo photography up.
   Declared last so it beats every earlier rule.
   ========================================================= */

/* 1. lift the photography itself */
.tile img,
.photo-card img,
.artist-shot img,
.portrait-card img,
.packed img,
.gal img{
  filter:brightness(1.26) contrast(1.08) saturate(1.08);
}

/* 2. caption washes: bottom strip only, not half the picture */
.portrait-card::after{
  height:26%;
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.60));
}
.photo-card figcaption{
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.58));
}
.tile-cap{
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.62));
}

/* 3. booking: current lead time per artist */
.book-wait{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:14px 0 2px;padding-top:12px;
  border-top:1px solid rgba(231,233,222,.12);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,233,222,.58);
}
.book-wait b{
  font-family:var(--display,inherit);
  font-size:15px;letter-spacing:.02em;text-transform:none;
  color:#F5B942;font-weight:500;
}
.book-wait.is-open b{color:#E7E9DE}

/* =========================================================
   .btn-ember WAS NEVER DEFINED. Found 2026-08-24 by GIB on
   the booking page: "the word goes away... I can't actually
   see the word Continue." Correct - the class is used on the
   home hero CTA and on every booking step button, but there
   was no rule for it anywhere in this file, so it fell back
   to the bare .btn (transparent, inherited colour) and the
   label disappeared against the surface. This defines it.
   ========================================================= */
.btn-ember{
  background:#F04438;
  color:#FFFFFF;
  border-color:#F04438;
  box-shadow:0 4px 14px rgba(240,68,56,.30);
}
.btn-ember:link,
.btn-ember:visited,
.btn-ember:hover,
.btn-ember:focus,
.btn-ember:active{color:#FFFFFF}
.btn-ember:hover{background:#D93A2E;border-color:#D93A2E;transform:translateY(-2px)}
.btn-ember:focus-visible{outline:2px solid #F5B942;outline-offset:3px}
.btn-ember[disabled],
.btn-ember:disabled{
  background:rgba(240,68,56,.30);
  border-color:rgba(240,68,56,.30);
  color:rgba(255,255,255,.72);
  box-shadow:none;transform:none;cursor:not-allowed;
}

/* =========================================================
   HERO VIDEO v5 - 2026-08-24. THE SHAPE FIX.
   GIB: "the video looks fucking terrible, it is too far off
   to the right on my laptop." Fifth report on the same hero.

   Why every previous version failed: the source is a 9:16
   phone clip (720x1280) and the panel was always half the
   viewport - wide and near-square. From there you only get
   bad choices. v1/v3 used object-fit:cover, which upscaled
   ~1.6x and threw away half the frame (his "far too zoomed
   in... the owner's head is zoomed up close"). v2 shrank it
   to a card, which read as small. v4 used object-fit:contain
   with a blurred poster backdrop - but the poster is nearly
   black and it was filtered to brightness(.42), so the
   "backdrop" rendered as a dead black rectangle and the clip
   read as a thin strip shoved to the right. That is exactly
   what he is seeing.

   v5 stops fighting the aspect ratio and MATCHES it. The
   right column is narrowed to a portrait strip, so the clip
   fills it edge to edge, flush to the viewport edge:
     - no letterbox, no black field, nothing floating
     - crop drops from ~50% to ~7% of frame height
     - 720px source rendered at ~375px = downscaled, so it is
       sharper than every prior version, not softer
   Desktop only (901px+). Tablet and mobile untouched - GIB
   confirmed those are good.
   ========================================================= */
@media (min-width:901px){

  /* 1. the column becomes portrait-shaped. 9:16 at a ~620px
        tall hero wants ~350px of width; 26vw lands there on a
        laptop and is clamped so it holds on any monitor. */
  .hero-split{
    grid-template-columns:minmax(0,1fr) clamp(300px,26vw,420px);
    align-items:stretch;
    min-height:0;
  }

  /* 2. copy column got wider, so pin the text's left edge to
        the site gutter instead of letting margin-left:auto
        shove it toward the middle of the page. */
  .hero-copy{
    max-width:min(640px,100%);
    margin-left:max(var(--pad), calc((100vw - var(--max)) / 2));
    margin-right:auto;
    padding-left:0;
  }

  /* 3. the panel: plain, full, flush. */
  .hero-media--video{
    display:block;
    position:relative;
    padding:0;
    aspect-ratio:auto;
    height:clamp(480px,72vh,720px);
    background:#0D0C0B;
    border-radius:0;
    overflow:hidden;
  }

  /* 4. kill v4's blurred backdrop. There is no empty space
        left for it to fill, and it was the black rectangle. */
  .hero-media--video::before{display:none}

  .hero-video{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:auto;
    object-fit:cover;          /* ~7% crop now, not ~50% */
    object-position:center 45%;
    border-radius:0;
    box-shadow:none;
  }

  /* 5. a short fade on the left edge only, so the video meets
        the copy column without a hard seam. Narrow, because
        the column is narrow. */
  .hero-media--video::after{
    display:block;content:"";position:absolute;inset:0;
    pointer-events:none;z-index:2;
    background:linear-gradient(to right,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 14%);
  }

  /* 6. caption sits inside the narrow column, so it can wrap. */
  .hero-media--video figcaption{
    position:absolute;left:0;right:0;bottom:0;
    transform:none;white-space:normal;
    text-align:center;padding:20px 14px;
    background:linear-gradient(180deg,rgba(13,12,11,0),rgba(13,12,11,.78));
  }
}

/* =========================================================
   HOMEPAGE BOOKING CALENDAR - 2026-08-24
   GIB: "add a booking calendar to the site too, so you don't
   have to click Book Now every time."

   This replaces the dashed violet "coming to this space"
   placeholder that was holding the calendar seat in the BOOK
   section. It runs the SAME availability logic as book.html
   (same seed, same isOpenDay, same slotsFor) so the homepage
   and the booking page can never show different open days -
   which would look broken to a client sitting next to you.

   Front end only. Nothing submits. Swap for the GHL calendar
   group embed once Moxy's account is live: replace the inner
   .hb-body with the iframe and delete this block.
   ========================================================= */
.book-tail{grid-template-columns:minmax(0,320px) minmax(0,1fr)}

.hb-cal{
  padding:30px 28px 30px;border-radius:var(--r-card);
  border:1px solid var(--ember-line);
  background:linear-gradient(160deg,rgba(240,68,56,.07),rgba(20,18,15,.55));
}
.hb-cal .eyebrow{display:block}
.hb-cal h3{margin-top:12px;color:var(--bone)}
.hb-lead{margin-top:10px;color:var(--bone-72);font-size:14.5px;line-height:1.5;max-width:52ch}

/* artist chips */
.hb-artists{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hb-chip{
  appearance:none;cursor:pointer;font-family:var(--body);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;color:var(--bone-72);
  border:1px solid rgba(231,233,222,.16);background:rgba(231,233,222,.03);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.hb-chip:hover{color:var(--bone);border-color:rgba(240,68,56,.5)}
.hb-chip.is-on{color:#fff;border-color:#F04438;background:rgba(240,68,56,.16)}

/* two columns: month on the left, times on the right */
.hb-body{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,32px);margin-top:24px;align-items:start;
}

.hb-calhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hb-calhead span{
  font-family:var(--display);font-size:19px;letter-spacing:.01em;color:var(--bone);
}
.hb-nav{
  appearance:none;cursor:pointer;width:30px;height:30px;line-height:1;
  border-radius:8px;font-size:16px;color:var(--bone-72);
  border:1px solid rgba(231,233,222,.16);background:rgba(231,233,222,.03);
}
.hb-nav:hover:not(:disabled){color:#fff;border-color:rgba(240,68,56,.55)}
.hb-nav:disabled{opacity:.3;cursor:default}

.hb-dow,.hb-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hb-dow{margin-top:16px}
.hb-dow span{
  text-align:center;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-56);
}
.hb-days{margin-top:8px}
.hb-day{
  position:relative;appearance:none;cursor:pointer;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-radius:7px;font-family:var(--body);font-size:13px;color:var(--bone);
  border:1px solid rgba(231,233,222,.12);background:rgba(231,233,222,.03);
  transition:border-color .16s ease,background .16s ease;
}
.hb-day .dot{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#F04438;
}
.hb-day:hover:not(:disabled){border-color:rgba(240,68,56,.6)}
.hb-day:disabled{opacity:.26;cursor:default;border-color:transparent;background:transparent}
.hb-day.is-empty{border:0;background:none;pointer-events:none}
.hb-day.is-picked{background:#F04438;border-color:#F04438;color:#fff}
.hb-day.is-picked .dot{background:#fff}

.hb-note{margin-top:14px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-56)}

/* times */
.hb-slothead{font-family:var(--display);font-size:19px;color:var(--bone);letter-spacing:.01em}
.hb-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hb-slot{
  appearance:none;cursor:pointer;font-family:var(--body);font-size:13.5px;
  padding:10px 16px;border-radius:9px;color:var(--bone);
  border:1px solid rgba(231,233,222,.16);background:rgba(231,233,222,.03);
  transition:border-color .16s ease,background .16s ease;
}
.hb-slot:hover{border-color:rgba(240,68,56,.6)}
.hb-slot.is-picked{background:#F04438;border-color:#F04438;color:#fff}
.hb-empty{margin-top:14px;font-size:14px;color:var(--bone-72)}

.hb-go{margin-top:22px;width:100%;white-space:normal;text-align:center;line-height:1.3}
.hb-go[aria-disabled="true"]{opacity:.4;pointer-events:none}
.hb-ryan{margin-top:16px;font-size:13px;line-height:1.5;color:var(--bone-56)}
.hb-ryan a{color:var(--ember-lift);border-bottom:1px solid rgba(240,68,56,.4)}
.hb-ryan a:hover{color:#fff}

/* the card needs the full row once the phone card can't sit beside it */
@media (max-width:1080px){
  .book-tail{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hb-cal{padding:26px 20px 28px}
  .hb-body{grid-template-columns:1fr;gap:26px}
  .hb-day{font-size:12px}
}

/* the line on book.html that tells you your homepage pick came with you */
.bk-carry{
  margin:0 0 20px;padding:12px 16px;border-radius:10px;
  font-size:14px;line-height:1.5;color:var(--bone);
  border:1px solid rgba(240,68,56,.35);background:rgba(240,68,56,.10);
}

/* =========================================================
   PHOTOGRAPHY BRIGHTNESS - 2026-08-24, SECOND ATTEMPT
   GIB, again: "the tattoo images need to be brighter, there
   is a dark overlay over them."

   The morning's fix did not work, for two separate reasons,
   and his wording was literally correct on both:

   1. THERE REALLY IS AN OVERLAY. body::after is a fixed film
      grain layer at z-index:9999 covering the entire page,
      with mix-blend-mode:overlay. On a near black ground an
      overlay blend pulls midtones DOWN, so every photo sat
      under a dimming film. Pulled from .055 to .022 - the
      texture survives, the dimming does not.

   2. THE GALLERY WAS NEVER TARGETED. The morning rule listed
      `.tile img` and friends, but gallery.html builds its
      grid from `.mx-tile > .mx-frame > img`. `.tile img` does
      not match `.mx-frame img`, so the entire gallery page -
      the one page that is nothing BUT tattoo photos - got no
      lift at all.

   One rule now covers every photo container on every page.
   Do not add another partial list; extend THIS selector.
   ========================================================= */
:root{ --grain-o:.022 }

.mx-frame img,
.tile img,
.packed img,
.photo-card img,
.artist-shot img,
.portrait-card img,
.gal img,
.work img,
.mosaic img,
.board img,
.gallery-grid img,
.artist-card img,
figure.polaroid img{
  /* brightness alone greys the blacks out, so contrast and
     saturation come up with it and the piece keeps its punch */
  filter:brightness(1.20) contrast(1.12) saturate(1.14);
}

/* the reels and the hero are graded in the file itself now,
   so they must not be lifted twice */
.hero-video,.reel-video{filter:none}

/* Hero size: GIB picked layout B, 2026-08-24. Video column takes
   ~42% of the screen instead of the narrow strip. Last word. */
@media (min-width:901px){
  .hero-split{grid-template-columns:minmax(0,1fr) clamp(420px,42vw,720px)}
  .hero-video{object-position:center 40%}
}

/* =========================================================
   GALLERY: WORK BY ARTIST - 2026-08-24
   GIB: "I have no idea which work belongs to who."
   Heading block per artist above their own mosaic.
   ========================================================= */
.mx-artist-head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid rgba(231,233,222,.14);
}
.mx-artist-head h3{
  margin:0;font-family:var(--display);letter-spacing:-.01em;
  font-size:clamp(26px,3.2vw,38px);color:var(--bone);
}
.mx-artist-handle{
  font-size:13px;letter-spacing:.05em;color:var(--ember-lift);
  border-bottom:1px solid rgba(240,68,56,.35);
}
.mx-artist-handle:hover{color:#fff}
.mx-artist-blurb{
  margin:14px 0 22px;max-width:56ch;
  font-size:15px;line-height:1.55;color:var(--bone-72);
}

/* =========================================================
   MOBILE HEADER OVERFLOW - 2026-08-24
   On a 390px phone the lockup + burger + "Book Now" pill add
   up to more than the viewport, so the button ran off the
   right edge and the word was cut in half. Nothing was
   clipping it; the row was simply wider than the screen.
   Tighten the three pieces so the row fits, and stop the
   grid children from refusing to shrink.
   ========================================================= */
@media (max-width:460px){
  .header-in{gap:8px;padding-left:14px;padding-right:14px}
  .header-in > *{min-width:0}
  .cx-lockup{gap:8px}
  .cx-lockup img{height:22px}
  .cx-type{font-size:11.5px;letter-spacing:.20em;text-indent:.20em}
  .cx-type small{font-size:7.5px;margin-top:4px}
  .header-right{gap:8px}
  .header-right .btn-sm{
    padding:7px 13px;font-size:12px;white-space:nowrap;letter-spacing:.02em;
  }
}
@media (max-width:360px){
  .cx-type small{display:none}
  .header-right .btn-sm{padding:7px 11px;font-size:11.5px}
}