/* Satori Tattoo: shop window at night. Tokens first, then the wall, shell, sections, pages. */
@font-face{font-family:'Musashi Brush';src:url('../fonts/musashi-brush.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#0a0708;--panel-a:rgba(12,8,9,.86);--ink:#f3ece4;--muted:#c9bcb0;--faint:#9c8f84;
  --accent:#e0492c;--accent-hi:#f0593b;--neon:#ff5a2c;--gold:#e6b94e;
  --line:rgba(230,185,78,.24);--line2:rgba(255,255,255,.1);
  --disp:'Musashi Brush','Hanken Grotesk',system-ui,sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1240px;--gut:clamp(16px,4vw,32px);--ease:cubic-bezier(.16,1,.3,1);--r:6px;
  --nav-h:68px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:#3d2b2a var(--bg);scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
main:focus{outline:none}
::selection{background:var(--accent);color:var(--bg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--gold);color:var(--bg);padding:10px 16px;font-weight:700;border-radius:3px}.skip:focus{top:12px}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:.92;margin:0;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.h-xl{font-size:clamp(64px,10.5vw,152px)}
.h-lg{font-size:clamp(42px,6vw,84px)}
.h-md{font-size:clamp(30px,3.4vw,46px)}
.h-sm{font-size:clamp(22px,2.2vw,28px);margin-top:22px}
p{margin:0 0 14px;text-wrap:pretty}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--muted);max-width:46ch}
.muted{color:var(--muted)}.small{font-size:14px}
/* small text links stay a 24px tap target (WCAG 2.5.8) */
p.small a{display:inline-block;padding:4px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- the wall (persistent scene) ---------- */
.wall{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg);view-transition-name:wall}
.wall picture,.wall-poster{position:absolute;inset:0;width:100%;height:100%}
.wall-poster{object-fit:cover;transition:opacity 1s var(--ease)}
.wall-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.wall.gl-on .wall-gl{opacity:1}
.wall.gl-on .wall-poster{opacity:0}
.wall-shade{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 100%,rgba(10,7,8,.86) 0%,rgba(10,7,8,.35) 46%,rgba(10,7,8,0) 70%),linear-gradient(180deg,rgba(10,7,8,.55) 0%,rgba(10,7,8,0) 22%)}
.wall[data-mode=faint] .wall-poster{opacity:.32}
.wall[data-mode=faint] .wall-shade,.wall[data-mode=shop] .wall-shade{background:rgba(10,7,8,.62)}
.wall[data-mode=shop] .wall-poster{opacity:.5}
.wall[data-mode=faint].gl-on .wall-poster,.wall[data-mode=shop].gl-on .wall-poster{opacity:0}
main,.foot,.nav{position:relative;z-index:2}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled,.nav.open{background:rgba(10,7,8,.9);border-bottom-color:var(--line2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{width:40px;height:auto}
.logo span{font-family:var(--disp);font-size:28px;line-height:1;letter-spacing:.04em;padding-top:4px}
.links{display:flex;align-items:center;gap:26px}
.links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:8px 0}
.links a:hover,.links a[aria-current]{color:var(--ink)}
.links a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.links .btn{color:#0a0708;padding:11px 18px;box-shadow:none}
.menu-btn{display:none;background:none;border:1px solid rgba(243,236,228,.3);color:var(--ink);border-radius:3px;min-height:44px;padding:0 16px;font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1060px){.no-js .nav{position:absolute;background:rgba(10,7,8,.92)}.no-js .nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.no-js .menu-btn{display:none!important}.no-js .links{display:flex!important;position:static!important;flex-direction:row!important;flex-wrap:wrap;gap:2px 18px!important;background:none!important;padding:0!important;border:0!important}.no-js .links a{border:0!important;padding:8px 0!important;font-size:13px!important}.no-js .links .btn{margin-top:0!important}}
@media(max-width:1060px){.menu-btn{display:block}.links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(10,7,8,.98);padding:6px var(--gut) 22px;border-bottom:1px solid var(--line2)}.nav.open .links{display:flex}.links a{padding:15px 0;border-bottom:1px solid var(--line2);font-size:15px}.links a[aria-current]{box-shadow:none;color:var(--gold)}.links .btn{margin-top:16px}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 22px;border:1px solid transparent;border-radius:3px;background:var(--accent);color:#0a0708;font:700 14px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease),color .25s}
.btn:hover{background:var(--accent-hi);color:#0a0708;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(10,7,8,.35);color:var(--ink);border-color:rgba(243,236,228,.32)}.btn.ghost:hover{border-color:var(--gold);color:var(--ink)}
.btn.sm{min-height:44px;padding:11px 16px;font-size:13px}
.btn .ic{width:17px;height:17px}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ar{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;color:var(--gold);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.more:hover{color:var(--ink)}.more:hover .ar{transform:translateX(4px)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(80px,11vw,140px) 0;background:linear-gradient(180deg,rgba(10,7,8,0) 0,var(--panel-a) 110px,var(--panel-a) calc(100% - 110px),rgba(10,7,8,0) 100%)}
.sec.tight{padding:clamp(48px,6vw,72px) 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:34px}
.head .lead{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.split.top{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- home: the window ---------- */
.window{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 40px) 0 clamp(40px,7vh,84px)}
.win-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:end;width:100%}
/* desktop: the grid fills the window so the sign (align-self:start) sits top right and the copy stays bottom left, as the contract says */
@media(min-width:901px){.win-grid{min-height:calc(100svh - var(--nav-h) - 40px - clamp(40px,7vh,84px))}}
.win-copy .h-xl{text-shadow:0 2px 24px rgba(0,0,0,.55)}
/* slogan: "Northern Colorado's" small over a full-size "#1 walk-in street shop" */
.win-copy .h-xl.slogan{font-size:clamp(52px,8vw,120px)}
.slogan .h1-pre{display:block;font-size:.4em;line-height:1.1;letter-spacing:.03em;margin-bottom:.1em}
.win-award{margin:16px 0 0;font-size:clamp(14px,1.15vw,16px);letter-spacing:.02em;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.win-copy .lead{margin:22px 0 0;color:#e6dbd0;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.win-copy .row{margin-top:28px}
/* a sentence, so sentence case (the Uppercase Tracking Rule keeps caps for controls and labels) */
.win-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:13px;color:rgba(243,236,228,.6);margin:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.wall.pickable~main .win-hint{opacity:1}
.window.pick{cursor:zoom-in}
/* 701 to 900px: the sign moves above the headline and keeps the right edge (the base .sign rule below wins on justify-self) */
@media(max-width:900px){.win-grid{grid-template-columns:1fr;gap:20px}.window{justify-content:flex-end}.sign{order:-1}}
@media(hover:none){.win-hint{display:none}}

/* neon OPEN sign */
.sign{justify-self:end;align-self:start;background:rgba(10,7,8,.72);border:1px solid rgba(255,90,44,.28);border-radius:10px;padding:18px 22px 16px;min-width:min(330px,100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sign-tube{margin:0 0 10px;font-family:var(--disp);font-size:clamp(52px,6vw,78px);line-height:.9;letter-spacing:.06em;color:#4a2219;transition:color .2s,text-shadow .2s}
.sign.lit .sign-tube{color:#fff3ec;text-shadow:0 0 2px #fff8f4,0 0 10px #ff8a62,0 0 24px var(--neon),0 0 52px rgba(255,90,44,.6)}
.sign.closed .sign-tube{color:#5a2a20;text-shadow:none}
.sign.flicker .sign-tube{animation:neon-on 1.4s steps(1) both}
.sign.lit:not(.flicker) .sign-tube{animation:buzz 9s 4s infinite steps(1)}
.sign-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
.sign-lines li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:baseline}
.sign-lines b{font-weight:700;min-width:72px;color:var(--ink)}
/* phone: the sign becomes one compact strip so the wall shows above the words, and the hero clears the call bar */
@media(max-width:700px){
  .window{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .sign{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 14px;padding:10px 14px;width:100%;min-width:0}
  .sign-tube{font-size:36px;margin:0}
  .sign-lines{gap:4px}
  .sign-lines li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;align-items:baseline}
  .sign-lines b{min-width:0;font-size:13.5px}
  .sign-lines .status{font-size:13.5px;align-items:baseline}
  .win-copy .lead{margin-top:14px}
  .win-copy .row{flex-wrap:nowrap;gap:10px;margin-top:20px}
  .win-copy .row .btn{flex:1 1 0;padding-inline:8px;font-size:12.5px;letter-spacing:.06em}
}
@keyframes neon-on{0%,9%,16%,33%{color:#4a2219;text-shadow:none}5%,12%,22%,40%,100%{color:#fff3ec;text-shadow:0 0 2px #fff8f4,0 0 10px #ff8a62,0 0 24px var(--neon),0 0 52px rgba(255,90,44,.6)}}
@keyframes buzz{0%,95%,97.5%,100%{opacity:1}96%{opacity:.6}}

/* live status */
.status{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14.5px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;opacity:.7}
.status.is-open{color:#7ff0ad}.status.is-open::before{box-shadow:0 0 0 0 rgba(127,240,173,.6);animation:pulse 2.4s infinite;opacity:1}
.status.big{font-size:15.5px;font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,240,173,.55)}70%{box-shadow:0 0 0 9px rgba(127,240,173,0)}100%{box-shadow:0 0 0 0 rgba(127,240,173,0)}}

/* tabs, rail, grid, pieces */
.tabs{display:flex;gap:4px 24px;flex-wrap:wrap;border-bottom:1px solid var(--line2);margin-bottom:24px}
.tab{min-height:44px;padding:8px 0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--faint);font:700 13px var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.tab:hover{color:var(--ink)}.tab[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}
/* phones: one scrolling row, so the active underline never floats between wrapped rows */
@media(max-width:700px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}.tabs::-webkit-scrollbar{display:none}.tab{flex:none}}
.rail-wrap{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 18px;scrollbar-width:thin;cursor:grab}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail .piece{flex:0 0 clamp(210px,23vw,300px);scroll-snap-align:start}
.rail-ctl{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.rail-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,236,228,.28);background:rgba(10,7,8,.5);color:var(--ink);cursor:pointer}
.rail-btn[data-dir="-1"] .ar{transform:scaleX(-1)}
.rail-btn:hover{border-color:var(--gold)}
.piece{margin:0;position:relative}
.piece[hidden]{display:none}
.piece-link{display:block;position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#171013;outline-offset:4px}
.piece-link img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.piece-link:hover img,.piece-link:focus-visible img{transform:scale(1.04)}
.piece figcaption{margin-top:9px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,44vw),1fr));gap:18px 14px}
.count{color:var(--muted);margin-top:18px}.count b{color:var(--ink);font-size:20px}
.note{margin-top:28px}

/* doors (two shops). The OPEN sign is the only neon on the site; this heading is plain brush type. */
.doors-sec{background:linear-gradient(180deg,rgba(10,7,8,0) 0,rgba(20,8,8,.82) 120px,rgba(20,8,8,.82) calc(100% - 120px),rgba(10,7,8,0) 100%)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
.door{display:flex;flex-direction:column;background:rgba(10,7,8,.8);border:1px solid var(--line2);border-radius:10px;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.door:hover{border-color:rgba(230,185,78,.45);transform:translateY(-3px)}
.door-plate{position:relative;aspect-ratio:16/10;overflow:hidden;background:#140d0f}.door-plate img{width:100%;height:100%;object-fit:cover}
.door-body{padding:22px 24px 18px;display:flex;flex-direction:column;gap:12px}
.door h3,.door h2{font-size:clamp(48px,5.4vw,76px)}
.door-line{color:var(--muted);margin:0}
.addr{margin:0;color:var(--ink)}
.door .more{margin-top:2px}
@media(max-width:820px){.doors{grid-template-columns:1fr}}

/* crew */
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 16px}
.crew.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 16px;scrollbar-width:thin}
.strip .cc{flex:0 0 clamp(190px,21vw,260px);scroll-snap-align:start}
.cc{display:flex;flex-direction:column;gap:3px;color:var(--ink);text-decoration:none}
.cc .ph{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#171013;margin-bottom:10px}
.cc .ph img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) brightness(.9);transition:filter .5s,transform .8s var(--ease)}
.cc:hover .ph img,.cc:focus-visible .ph img{filter:contrast(1.1) brightness(1.02);transform:scale(1.035)}
/* emblem plate: crew without a photo get the Satori mask, quiet, never a letter or an empty frame */
.ini{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 45%,#22161a 0,#171013 70%)}
.cc .ph .ini img{width:44%;height:auto;object-fit:contain;opacity:.22;filter:grayscale(1)}
.cc:hover .ph .ini img,.cc:focus-visible .ph .ini img{opacity:.34;filter:grayscale(1)}
.cc .nm{font-family:var(--disp);font-size:30px;line-height:1;text-transform:uppercase;padding-top:2px}
.cc:hover .nm{color:var(--gold)}
.cc .sp{font-size:14.5px;color:var(--muted);line-height:1.4}
.cc .lc{font-size:13px;color:var(--faint)}
.cc[hidden]{display:none}
@media(max-width:980px){.crew{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.crew,.crew.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* quotes, statement, answers, close */
/* a review is marked by one big brush quote mark, never a rule (gold rules are a Red Letter signature we must not take) */
.quote{margin:24px 0 0;max-width:52ch}
.quote::before{content:"\201C";display:block;height:.5em;font:800 80px/1 var(--body);color:var(--faint)}
.quote p{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink);margin:0 0 8px}
.quote p::after{content:"\201D"}
.quote cite{font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.statement-sec{overflow:hidden}
.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.statement{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px 60px;align-items:start;z-index:1}
.statement .big{font-size:clamp(21px,2.2vw,29px);line-height:1.42;font-weight:500;max-width:34ch;margin:0 0 18px}
.award{color:var(--gold);font-weight:600;margin:0;max-width:52ch}
@media(max-width:860px){.statement{grid-template-columns:1fr}}
.answers{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:start}
.answers .h-lg{margin-bottom:26px}
.close{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:sticky;top:calc(var(--nav-h) + 24px)}
.mask-stage{perspective:1000px;width:min(320px,70vw)}
.mask-stage .mask{width:100%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{scale:1.02}}
.close-line{font-size:19px;color:var(--ink);max-width:30ch;margin:0}
/* closing call band on browse pages (work, artists) */
.closer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;border-top:1px solid var(--line2);padding-top:30px}
.closer .close-line{font:400 clamp(30px,3.6vw,48px)/1 var(--disp);text-transform:uppercase;max-width:none}
@media(max-width:860px){.answers{grid-template-columns:1fr}.close{position:static}}

/* faq */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line2)}
/* questions are reading text: the brush face stays for names and headings */
.faq summary{position:relative;list-style:none;cursor:pointer;padding:20px 52px 20px 0;font:700 clamp(17px,1.5vw,19px)/1.35 var(--body);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:18px;height:2px;background:var(--gold);transition:transform .3s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary{color:var(--gold)}.faq details[open] summary::after{transform:rotate(0)}
.faq .a{padding:0 0 22px;color:var(--muted);max-width:68ch}.faq .a p:last-child{margin:0}
.faq-group{margin-top:52px}.faq-group:first-child{margin-top:0}.faq-group .h-md{margin-bottom:14px}
.qh{margin-bottom:26px}
.cta-row{margin-top:30px}

/* page heroes */
.page-hero{position:relative;padding:calc(var(--nav-h) + clamp(56px,8vw,96px)) 0 clamp(36px,5vw,56px)}
/* content follows the lead closely: the hero's own bottom padding is the gap */
.page-hero+.sec.tight{padding-top:clamp(8px,1.5vw,20px)}
.page-hero+.sec:not(.tight){padding-top:clamp(36px,4vw,56px)}
.narrow-only{display:none}
@media(max-width:860px){.narrow-only{display:flex}}
.page-hero .answer{font-size:clamp(18px,1.6vw,20.5px);color:#e6dbd0;max-width:64ch;margin-top:22px}
.page-hero .row{margin-top:26px}
.page-hero .role{font-size:18px;color:var(--muted);margin:16px 0 0}
.page-hero .award{margin-top:-4px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--faint);margin:0 0 22px;padding:0;list-style:none}.crumbs li+li::before{content:"/";margin-right:8px}.crumbs a{color:var(--muted)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pills-h{margin-top:40px}.pills-h+.pills{margin-top:14px}
.pill{display:inline-flex;align-items:center;min-height:42px;padding:6px 15px;border:1px solid rgba(243,236,228,.24);border-radius:30px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:rgba(10,7,8,.4)}.pill:hover{border-color:var(--gold);color:var(--gold)}
.shop-plate,.portrait{position:relative;border-radius:10px;overflow:hidden;background:#171013;aspect-ratio:4/5}
.shop-plate{aspect-ratio:1}
.shop-plate img,.portrait img{width:100%;height:100%;object-fit:cover}
.shop-status{margin:18px 0 0}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fact{background:rgba(10,7,8,.72);border:1px solid var(--line2);border-radius:10px;padding:24px}
.fact .h-sm{margin:0 0 12px}
@media(max-width:900px){.facts{grid-template-columns:1fr}}
.hours{display:grid;gap:7px;margin:0 0 12px;font-size:15.5px;max-width:420px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding-bottom:7px;border-bottom:1px dashed var(--line2)}.hours dt{color:var(--faint)}.hours dd{margin:0;font-variant-numeric:tabular-nums}
.artist-hero .h-xl{font-size:clamp(64px,9vw,128px)}
.hero-quote{align-self:center}.hero-quote .quote{margin:0}.hero-quote .quote p{font-size:clamp(22px,2.2vw,30px);line-height:1.4}

/* styles page */
.styles{border-top:1px solid var(--line2)}
.style{padding:44px 0;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 48px;align-items:start}
.style p{color:var(--muted);margin-top:12px}
/* minmax(0,1fr): a bare 1fr is minmax(auto,1fr), and a long rail's min-content width would push the page wide */
@media(max-width:900px){.style{grid-template-columns:minmax(0,1fr)}}

/* prices */
/* reference page: plain hairline rows, not a box grid */
.price-table{margin:0;max-width:880px;border-top:1px solid var(--line2)}
.price-table div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:6px 32px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line2)}
.price-table dt{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0}
.price-table dd{margin:0;font-size:19px;color:var(--ink)}
@media(max-width:700px){.price-table div{grid-template-columns:1fr}}

/* prose pages */
.prose>*{max-width:70ch}.prose h2{font-size:clamp(26px,3vw,38px);margin:46px 0 14px}.prose h2:first-child{margin-top:0}.prose li{margin-bottom:9px;color:var(--muted)}.prose p{color:var(--muted)}.prose strong{color:var(--ink)}
.band{border:1px solid var(--line);border-radius:10px;padding:18px 22px;color:var(--ink)!important;font-weight:600;margin-bottom:30px;background:rgba(10,7,8,.6)}
.supplies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0}.supplies dt{font-family:var(--disp);font-size:26px;text-transform:uppercase;margin-bottom:6px}.supplies dd{margin:0;color:var(--muted)}
@media(max-width:700px){.supplies{grid-template-columns:1fr}}
.draft{background:rgba(230,185,78,.1);border:1px solid var(--line);color:var(--gold)!important;padding:12px 16px;border-radius:6px;font-size:14px;margin-bottom:28px}

/* book form */
form.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:rgba(10,7,8,.75);border:1px solid var(--line2);border-radius:10px;padding:clamp(18px,3vw,30px)}
form.book .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.field .opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--faint)}
.field input,.field select,.field textarea{background:#0e0a0b;border:1px solid rgba(255,255,255,.22);color:var(--ink);padding:13px 14px;border-radius:4px;font:16px var(--body);min-height:48px}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8f8278}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,73,44,.25)}
.field [aria-invalid=true]{border-color:#ff7b62}
.err-msg{display:block;margin:6px 0 0;font-size:14px;font-weight:500;line-height:1.4;color:#ffb3a3;letter-spacing:0;text-transform:none}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted);line-height:1.5}.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status-msg{grid-column:1/-1;padding:16px 18px;border-radius:6px;font-size:15px}.status-msg.ok{background:rgba(127,240,173,.08);border:1px solid rgba(127,240,173,.35);color:#c9f4da}.status-msg.err{background:rgba(224,73,44,.1);border:1px solid rgba(224,73,44,.45);color:#ffd5cb}
.aside{background:rgba(10,7,8,.72);border:1px solid var(--line2);border-radius:10px;padding:26px}
.aside .h-sm{margin-top:24px}
/* phone: one column that can shrink below the artist select's long option labels (1fr alone means minmax(auto,1fr) and overflowed at 390) */
@media(max-width:640px){form.book{grid-template-columns:minmax(0,1fr)}}
.field input,.field select,.field textarea{width:100%;min-width:0}
/* under 700px the fixed call bar already carries the red Call buttons, so in-page tel buttons step back to ghost and Book keeps the red */
@media(max-width:700px){main .btn[href^="tel:"]{background:rgba(10,7,8,.35);color:var(--ink);border-color:rgba(243,236,228,.32)}main .btn[href^="tel:"]:hover{border-color:var(--gold)}}

/* gift card */
.giftcard{perspective:1400px;display:grid;place-items:center}
.giftcard .c{position:relative;width:min(440px,90%);aspect-ratio:1.6;border-radius:10px;background:radial-gradient(120% 120% at 20% 0%,#2a1412 0%,#120a0b 55%,#0a0708 100%);border:1px solid rgba(230,185,78,.35);transform:rotateY(-14deg) rotateX(6deg);transition:transform .6s var(--ease);display:flex;align-items:center;gap:18px;padding:0 28px}
.giftcard:hover .c{transform:rotateY(-4deg) rotateX(2deg)}
.giftcard .c img{width:34%}
.giftcard .c span{font-family:var(--disp);font-size:clamp(40px,5vw,58px);line-height:1}
.giftcard .c small{position:absolute;right:22px;bottom:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* footer */
.foot{border-top:1px solid var(--line2);padding:72px 0 120px;font-size:15px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:32px}
.foot img.wm{width:220px;margin-bottom:18px}
.foot h2{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;line-height:1.4}
.foot p,.foot li{color:var(--muted);margin:0 0 8px}.foot ul{list-style:none;padding:0;margin:0 0 16px}.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .hours{font-size:14px;margin:6px 0 10px}
.foot .lic{font-size:13.5px;color:var(--faint)}
.foot .base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line2);font-size:13px;color:var(--faint)}
.foot .base .row{gap:6px 18px}
.foot .base a{display:inline-block;padding:5px 0}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* phone call bar */
.callbar{display:none}
@media(max-width:700px){
  /* solid shop black like the footer: the bar sits over page text, and text read through it (review 2026-10-05) */
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg);border-top:1px solid var(--line2);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:4px;background:var(--accent);color:#0a0708;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
  .callbar a:last-child{background:var(--bg);color:var(--ink);border:1px solid rgba(243,236,228,.32)}
  /* live hours: site.js marks the button to lead; it takes the red, the other steps back. Color only, nothing moves. */
  .callbar.live a{background:var(--bg);color:var(--ink);border:1px solid rgba(243,236,228,.32)}
  .callbar.live a.lead{background:var(--accent);color:#0a0708;border-color:var(--accent)}
  /* the bar carries both calls, so page heroes and closers drop their Call buttons on phones (the bar is CSS only, so no-JS keeps both numbers) */
  .page-hero .row a[href^="tel:"],.closer .row a[href^="tel:"],.close .row a[href^="tel:"]{display:none}
  .callbar .ic{width:17px;height:17px}
  .callbar{padding-right:62px}
  .motion{bottom:calc(10px + env(safe-area-inset-bottom))!important;right:10px}
  .foot{padding-bottom:150px}
}

/* motion toggle */
.motion{position:fixed;right:14px;bottom:14px;z-index:80;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,236,228,.24);background:rgba(10,7,8,.88);color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.motion:hover{color:var(--ink);border-color:var(--gold)}
/* GHL's chat bubble (58px, 20px in from the corner) takes the bottom right when GHL sets it there; Pause steps left of it.
   Phones keep Pause inside the call bar, and site.js lifts the bubble above the bar, so this is wider screens only. */
@media(min-width:701px){html.chat-right .motion{right:92px}}
.motion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motion .i-play{display:none}html.motion-off .motion .i-play{display:block}html.motion-off .motion .i-pause{display:none}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}

/* viewer */
.viewer{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(6,4,5,.97);color:var(--ink)}
.viewer::backdrop{background:rgba(6,4,5,.9)}
.v-inner{position:relative;height:100%;display:grid;place-items:center;padding:64px clamp(56px,7vw,110px) 28px}
.v-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.v-img{max-height:calc(100vh - 246px);width:auto;max-width:100%;border-radius:6px;object-fit:contain;background:#120c0d}
.v-fig figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;max-width:70ch;text-align:center}
.v-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.v-alt{color:var(--muted);font-size:15px;flex-basis:100%}
.v-crew{flex-basis:100%;font-size:14px;line-height:1.6;color:var(--muted)}.v-crew:empty{display:none}
.v-crew a{color:#f3ece4;text-decoration:underline;text-decoration-color:rgba(243,236,228,.45);text-underline-offset:3px}.v-crew a:hover{text-decoration-color:var(--gold)}
.v-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,236,228,.3);background:rgba(10,7,8,.6);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.v-prev{left:clamp(8px,2vw,28px)}.v-prev .ar{transform:scaleX(-1)}.v-next{right:clamp(8px,2vw,28px)}
.v-close{position:absolute;top:16px;right:16px;min-height:44px;padding:0 16px;border-radius:3px;border:1px solid rgba(243,236,228,.3);background:rgba(10,7,8,.6);color:var(--ink);font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.v-btn:hover,.v-close:hover{border-color:var(--gold)}
@media(max-width:700px){.v-inner{padding:64px 12px 18px}.v-btn{top:auto;bottom:18px;transform:none}.v-img{max-height:calc(100vh - 300px)}}

/* reveal (JS adds .js-reveal on html) */
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal [data-reveal].in{opacity:1;transform:none}

/* cross-document page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
::view-transition-old(wall),::view-transition-new(wall){animation:none}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-reveal [data-reveal]{opacity:1;transform:none}
}