/* =========================================================================
   BORZ Tattoo — css/style.css · v2.0.0 · "Dark Gallery"
   Shared core (every page) + home page (home-*) sections.
   Owner: chrome + home (Agent A). Page devs: never edit; override in your own page CSS.

   01 Tokens               12b Language hint         22 Home · artist teaser
   02 Reset & base         12c Text (SMS) dialog     23 Home · styles index
   03 Typography           13 Footer                 24 Home · works teaser
   04 Layout               14 Cursor                 24b Home · awards wall
   05 Icons, skip link     15 Grain                  25 Home · process (needle)
   06 Components           16 Preloader              26 Home · aftercare (bone)
   07 Header + languages   17 Page transition        27 Home · testimonials
   08 Sound toggle         18 Split text + roll      28 Home · FAQ
   09 Menu toggle          19 Reveal system          29 Home · contact + map
   10 Mobile menu          20 Tilt glare             30 Utilities / RM safety
   11 Scroll progress      21 Home · hero (+ 21b awards band)
   12 Floating controls
   ========================================================================= */

/* ===== 01 · Tokens ===================================================== */
:root{
  /* — color — */
  --ink:#0B0A09;          /* page background */
  --ink-2:#16130F;        /* raised: cards, header, lightbox meta, form card */
  --ink-3:#211D18;        /* chips, inputs, hovered rows */
  --bone:#EDE6D8;         /* primary text on dark; bg of the single bone section */
  --bone-2:#E2D9C6;       /* cards on bone */
  --ash:#A39C90;          /* secondary text on dark */
  --dim:#8E877B;          /* meta/captions on dark only (never on bone) */
  --umber:#4A443B;        /* secondary text on bone */
  --line:rgba(237,230,216,.12);   /* decorative hairlines */
  --line-2:rgba(237,230,216,.22); /* hover hairlines */
  --line-strong:#6E685E;  /* control borders (>=3:1 on ink/ink-2) */
  --brass:#B8925A;        /* THE accent: CTA fill, active, numerals, focus ring */
  --brass-2:#D2AF78;      /* accent text/hover on dark */
  --brass-deep:#7A5C2E;   /* accent on bone */
  --error:#E8806F;        /* errors only */
  --success:#8DBB9A;      /* valid/success only */
  --ember:#7A2E22;        /* decorative glow in hero aura only — never text */
  --pig-red:#A64B3C;      /* ART ONLY */
  --pig-green:#5E7D6A;    /* ART ONLY */
  --header-bg:rgba(11,10,9,.82);
  --glass-bg:rgba(22,19,15,.55);
  --glass-line:rgba(237,230,216,.10);
  --glass-blur:14px;
  --exhibit:radial-gradient(120% 90% at 50% 28%, #221E19 0%, #16130F 55%, #100E0B 100%);

  /* — type — */
  --font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --fs-hero-sans:clamp(3.5rem, 13vw, 15rem);    /* home hero words A/B, >=900px */
  --fs-hero-serif:clamp(4rem, 16vw, 18rem);     /* home hero word C, >=900px */
  --fs-hero-sans-m:clamp(3.5rem, 16vw, 7.5rem); /* <900px */
  --fs-hero-serif-m:clamp(4rem, 19vw, 9rem);    /* <900px */
  --fs-h1:clamp(3rem, 9vw, 10rem);
  --fs-h2:clamp(2.25rem, 5.6vw, 6rem);
  --fs-index:clamp(2rem, 4.6vw, 4.75rem);       /* style index rows, menu links */
  --fs-h3:clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
  --fs-quote:clamp(1.875rem, 4.4vw, 4.5rem);
  --fs-stat:clamp(2.75rem, 5.5vw, 6rem);
  --fs-lead:clamp(1.125rem, 1rem + .55vw, 1.5rem);
  --fs-body:clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-small:.875rem;
  --fs-micro:.75rem;
  --lh-tight:.92; --lh-head:1; --lh-snug:1.2; --lh-body:1.65;
  --ls-hero:-.045em; --ls-h1:-.035em; --ls-h2:-.03em; --ls-h3:-.015em; --ls-micro:.16em;

  /* — space — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
  --gutter:clamp(16px, 5vw, 96px);
  --col-gap:clamp(16px, 2vw, 32px);
  --section-y:clamp(64px, 8vw, 128px);
  --container:1600px;
  /* left/right edge of .container content, for full-bleed absolutely positioned layers (use on full-width boxes only) */
  --edge:max(var(--gutter), calc((100% - var(--container)) / 2));
  --header-h:64px;

  /* — radii — */
  --r-xs:6px; --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:40px; --r-pill:999px;
  --r-arch:999px 999px var(--r-l) var(--r-l);

  /* — shadows — */
  --sh-card:0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(237,230,216,.06);
  --sh-pop:0 18px 40px -12px rgba(0,0,0,.6);
  --sh-glow:0 0 0 1px rgba(184,146,90,.45), 0 12px 40px -12px rgba(184,146,90,.35);
  --sh-text:0 2px 30px rgba(11,10,9,.65);
  /* display type laid over light art: a tight ink edge keeps letterforms readable on bone */
  --sh-text-crisp:0 0 1px rgba(11,10,9,.95), 0 0 3px rgba(11,10,9,.7), 0 2px 24px rgba(11,10,9,.75);

  /* — z-index — */
  --z-base:1; --z-raised:10; --z-sticky:50; --z-floating:110; --z-progress:210;
  --z-menu:190; --z-header:200; --z-grain:300; --z-lightbox:400; --z-cursor:500;
  --z-preloader:600; --z-pt:700; --z-skip:800;

  /* — motion — */
  --ease-expo:cubic-bezier(.16,1,.3,1);   /* default reveal */
  --ease-quart:cubic-bezier(.76,0,.24,1); /* curtains, covers, in-out */
  --ease-out:cubic-bezier(.25,1,.5,1);    /* small UI */
  --ease-soft:cubic-bezier(.65,0,.35,1);  /* line drawing */
  --ease-in:cubic-bezier(.55,0,1,.45);    /* exits */
  --ease-back:cubic-bezier(.34,1.56,.64,1); /* pops — sparingly */
  --t-xs:150ms; --t-s:250ms; --t-m:400ms; --t-l:600ms; --t-xl:800ms;
  --t-2xl:1000ms; --t-3xl:1300ms; --t-4xl:1600ms;
  --st-char:18ms; --st-word:35ms; --st-line:90ms; --st-item:70ms;
}
@media (min-width:900px){ :root{ --header-h:80px; } }

/* ===== 02 · Reset & base =============================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:clip;scrollbar-gutter:stable;background:var(--ink);color-scheme:dark;
  font-variant-ligatures:no-common-ligatures;
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
html.is-locked{overflow:hidden}
body{
  margin:0;min-height:100vh;overflow-x:clip;background:var(--ink);color:var(--bone);
  font:400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
p,figure,blockquote,dl,dd,ol,ul,address{margin:0}
ol,ul{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%;height:auto}
img{border:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.on-bone :focus-visible{outline-color:var(--ink)}
#main:focus{outline:none} /* landmark target of the skip link; never interactive */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden}

/* ===== 03 · Typography ================================================= */
.h1{font:600 var(--fs-h1)/.95 var(--font-sans);letter-spacing:var(--ls-h1);text-wrap:balance}
.h2{font:600 var(--fs-h2)/1 var(--font-sans);letter-spacing:var(--ls-h2);text-wrap:balance;max-width:16ch}
.h3{font:600 var(--fs-h3)/1.15 var(--font-sans);letter-spacing:var(--ls-h3)}
.lead{font-size:var(--fs-lead);font-weight:400;line-height:1.5;color:var(--bone);max-width:38ch}
p,.body{max-width:62ch}
.body{font-size:var(--fs-body);line-height:var(--lh-body)}
.small{font-size:var(--fs-small);line-height:1.55;color:var(--ash)}
.micro{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-micro);line-height:1.4;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--dim)}
.eyebrow{display:flex;align-items:center;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-micro);line-height:1.4;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ash)}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--brass)}
.numeral{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.25em;line-height:1;letter-spacing:0;color:var(--brass)}
.quote{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--fs-quote);line-height:1.08;letter-spacing:-.01em;max-width:22ch}
.accent,em.accent{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em}
strong,b{font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.prose a:hover{color:var(--brass-2)}

/* ===== 04 · Layout ===================================================== */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)} }
.section{position:relative;padding-block:var(--section-y)}
/* adjacent sections share the gap instead of stacking two full paddings */
.section + .section{padding-top:calc(var(--section-y) * .6)}
main{display:block}

/* ===== 05 · Icons, skip link =========================================== */
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.skip-link{
  position:fixed;left:12px;top:12px;z-index:var(--z-skip);padding:12px 18px;border-radius:var(--r-pill);
  background:var(--brass);color:var(--ink);font:600 14px/1 var(--font-sans);
  transform:translateY(-200%);transition:transform var(--t-s) var(--ease-out);
}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline-color:var(--bone)}

/* ===== 06 · Components ================================================= */
/* — Buttons — */
.btn{
  --btn-bg:transparent;--btn-fg:var(--bone);--btn-fill:var(--bone);--btn-fg-hover:var(--ink);--btn-border:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 26px;border-radius:var(--r-pill);border:1px solid var(--btn-border);
  font:600 15px/1 var(--font-sans);letter-spacing:.01em;white-space:nowrap;text-decoration:none;
  color:var(--btn-fg);background:var(--btn-bg);cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:color var(--t-m) var(--ease-out),background-color var(--t-m) var(--ease-out),border-color var(--t-m) var(--ease-out),scale var(--t-s) var(--ease-out);
}
.btn--solid{--btn-bg:var(--brass);--btn-fg:var(--ink);--btn-fill:var(--ink);--btn-fg-hover:var(--bone)}
.btn--ghost{--btn-border:var(--line-strong)}
.btn--sm{height:44px;padding:0 20px;font-size:14px}
.btn--block{width:100%;justify-content:center}
.btn__fill{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--btn-fill);transform:scaleY(0);transform-origin:50% 100%;transition:transform 500ms var(--ease-quart)}
.btn__label{position:relative;display:block;height:1.2em;line-height:1.2;overflow:hidden}
.btn__text{display:block;transition:transform 450ms var(--ease-expo)}
.btn__icon{transition:translate 450ms var(--ease-expo)}
.btn:active{scale:.97}
@media (hover:hover){
  .btn:hover{color:var(--btn-fg-hover);border-color:var(--btn-fill)}
  .btn:hover .btn__fill{transform:scaleY(1)}
  .btn:hover .btn__text{transform:translateY(-100%)}
  .btn:hover .btn__icon{translate:4px 0}
}
.btn:focus-visible{color:var(--btn-fg-hover)}
.btn:focus-visible .btn__fill{transform:scaleY(1)}
.btn:focus-visible .btn__text{transform:translateY(-100%)}
.btn--solid:focus-visible{outline-color:var(--bone)}

/* — Icon button — */
.icon-btn{
  display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--bone);background:transparent;
  transition:background-color var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out),scale var(--t-s) var(--ease-out);
}
.icon-btn:active{scale:.94}
@media (hover:hover){ .icon-btn:hover{background:var(--ink-3);border-color:var(--ash)} }
.icon-btn:disabled,.icon-btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}

/* — Chip (fill grows from the click side; core sets --chip-o) — */
.chip{
  position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--bone);
  font:600 14px/1 var(--font-sans);white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color 300ms var(--ease-out),border-color 300ms var(--ease-out),opacity 300ms var(--ease-out);
}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bone);transform:scaleX(0);transform-origin:var(--chip-o,50%) 50%;transition:transform 300ms var(--ease-out)}
.chip[aria-pressed="true"],.chip.is-active,.chip.is-checked,.chip:has(input:checked){color:var(--ink);border-color:var(--bone)}
.chip[aria-pressed="true"]::before,.chip.is-active::before,.chip.is-checked::before,.chip:has(input:checked)::before{transform:scaleX(1)}
@media (hover:hover){ button.chip:hover,label.chip:hover{border-color:var(--ash)} }
.chip__count{font-size:11px;line-height:1;color:var(--dim);transform:translateY(-.45em)}
.chip[aria-pressed="true"] .chip__count,.chip.is-active .chip__count,.chip:has(input:checked) .chip__count{color:var(--ink)}
.chip:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:3px}

/* — Links — */
.link{position:relative;display:inline-flex;align-items:center;gap:8px;color:inherit}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform 450ms var(--ease-expo)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.link-btn{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.link-btn .icon{width:16px;height:16px}

/* — Rail (section header) — */
.rail{display:flex;align-items:center;gap:16px;margin-bottom:var(--s-7);font-size:1rem}
.rail__index{flex:none}
.rail__label{flex:none;color:var(--ash)}
.rail__line{flex:1;min-width:24px;height:1px;background:var(--line);transform-origin:0 50%}
.rail__meta{flex:none;color:var(--dim)}

/* — Glass — */
.glass{background:var(--glass-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:var(--r-l)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--ink-2)} }

/* — Media frame — */
.media{position:relative;display:block;border-radius:var(--r-l);overflow:hidden;background:var(--exhibit);aspect-ratio:4/5}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-expo)}
@media (hover:hover) and (pointer:fine){
  .media:hover img,a:hover > .media img,button:hover > .media img{transform:scale(1.06)}
}

/* — Placard, stats — */
.placard{display:block;font:600 var(--fs-micro)/1.5 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ash)}
.placard .sep{color:var(--dim);margin-inline:.35em}
.stat{position:relative;display:flex;flex-direction:column;gap:8px}
.stat__rule{display:block;height:1px;margin-bottom:16px;background:var(--line);transform-origin:0 50%}
.stat__num{display:block;font:500 var(--fs-stat)/1 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--bone);white-space:nowrap}
.stat__num [data-count-to]{display:inline-block}
.stat__label{font-size:var(--fs-small);line-height:1.4;color:var(--ash)}

/* — Rotating textPath badge — */
.badge-ring{width:120px;height:120px;color:var(--brass);overflow:visible}
.badge-ring text{font:600 9.5px var(--font-sans);letter-spacing:.18em;fill:var(--ash);transform-box:view-box;transform-origin:50% 50%;animation:spin 24s linear infinite}
.badge-ring use{color:var(--brass)}
@keyframes spin{to{transform:rotate(360deg)}}

/* — CTA band + orb — */
.cta-band{position:relative;padding-block:var(--section-y);border-top:1px solid var(--line);overflow:clip}
.cta-band__inner{display:grid;gap:24px;justify-items:start}
.cta-band__title{max-width:14ch}
.cta-band .lead{color:var(--ash)}
.cta-orb{
  position:relative;justify-self:center;display:grid;place-items:center;margin-top:24px;
  width:128px;height:128px;border-radius:50%;background:var(--brass);color:var(--ink);
  box-shadow:var(--sh-glow);transition:scale 500ms var(--ease-expo),background-color var(--t-m) var(--ease-out);
}
.cta-orb__ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:spin 24s linear infinite}
.cta-orb__ring text{font:600 13px var(--font-sans);letter-spacing:.2em;fill:var(--ink)}
.cta-orb__text{position:relative;font:600 13px/1 var(--font-sans);letter-spacing:.01em}
.cta-orb:focus-visible{outline-color:var(--bone);outline-offset:6px}
@media (min-width:600px){ .cta-orb{width:168px;height:168px} .cta-orb__text{font-size:15px} }
@media (hover:hover) and (pointer:fine){ .cta-orb:hover{scale:1.06;background:var(--brass-2)} }
@media (min-width:900px){
  .cta-band__inner{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:24px;align-items:center}
  .cta-band__inner > :not(.cta-orb){grid-column:1 / 9}
  .cta-orb{grid-column:10 / 13;grid-row:1 / 4;margin:0}
}

/* — Accordion (.acc) — no-JS: open; .js: closed unless .is-open — */
.acc{border-bottom:1px solid var(--line)}
.acc__item{border-top:1px solid var(--line)}
.acc__head{margin:0}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;text-align:left;
  font:500 clamp(1.0625rem,.95rem + .5vw,1.375rem)/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--bone);
}
.acc__q{transition:color var(--t-s) var(--ease-out)}
@media (hover:hover){ .acc__btn:hover .acc__q{color:var(--brass-2)} }
.acc__icon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);color:var(--bone);transition:transform 500ms var(--ease-expo),background-color 300ms,border-color 300ms,color 300ms}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;border-radius:2px;background:currentColor}
.acc__icon::after{transform:rotate(90deg)}
.acc__item.is-open .acc__icon{transform:rotate(45deg);background:var(--brass);border-color:var(--brass);color:var(--ink)}
.acc__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows 500ms var(--ease-expo)}
.acc__inner{min-height:0;overflow:hidden}
.acc__inner > :last-child{padding-bottom:28px}
.acc__inner p{color:var(--ash)}
/* collapsed only while the core can open them: .js before the boot failsafe, or once booted (html.is-booted) */
:is(.js:not(.reveal-all),.is-booted) .acc__item:not(.is-open) .acc__panel{grid-template-rows:0fr}
:is(.js:not(.reveal-all),.is-booted) .acc__inner{transition:opacity 500ms var(--ease-expo),transform 500ms var(--ease-expo),visibility 0s 0s}
:is(.js:not(.reveal-all),.is-booted) .acc__item:not(.is-open) .acc__inner{opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity 300ms var(--ease-out),transform 500ms var(--ease-expo),visibility 0s 500ms}

/* — Marquee — */
.marquee{position:relative;overflow:hidden;user-select:none;pointer-events:none}
.marquee__track{display:flex;align-items:center;width:max-content;will-change:transform}
.marquee__item{margin-right:.32em;font:800 clamp(3rem,9vw,9rem)/1 var(--font-sans);letter-spacing:-.04em;white-space:nowrap;color:var(--bone)}
.marquee__item--outline{color:transparent;-webkit-text-stroke:1px var(--ash)}
.marquee__sep{width:.4em;height:.4em;margin-right:.32em;color:var(--brass);font-size:clamp(3rem,9vw,9rem);fill:currentColor;stroke:none}

/* — Form base (page devs prefix their own specifics) — */
.form-field{display:grid;gap:8px}
.form-label{font:600 14px/1.3 var(--font-sans);color:var(--bone)}
.form-input{
  width:100%;height:56px;padding:0 16px;border-radius:var(--r-s);border:1px solid var(--line-strong);background:var(--ink-3);
  font:400 16px/1.4 var(--font-sans);color:var(--bone);appearance:none;-webkit-appearance:none;
  transition:border-color var(--t-s) var(--ease-out),box-shadow var(--t-s) var(--ease-out);
}
textarea.form-input{height:auto;min-height:140px;padding:14px 16px;resize:vertical}
.form-input::placeholder{color:var(--dim);opacity:1}
.form-input:focus{border-color:var(--brass)}
.form-input[aria-invalid="true"]{border-color:var(--error)}
.form-input:disabled{opacity:.5}
.form-select-wrap{position:relative}
.form-select-wrap::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);transform:rotate(45deg);pointer-events:none}
.form-select-wrap .form-input{padding-right:48px}
.form-help{font-size:var(--fs-small);line-height:1.5;color:var(--ash)}
.form-error{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-small);line-height:1.5;color:var(--error)}
.form-error .icon{width:16px;height:16px;margin-top:3px}
.form-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:var(--fs-small);line-height:1.55;color:var(--bone)}
.form-check input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:22px;height:22px;margin:1px 0 0;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:var(--ink-2);cursor:pointer;transition:background-color var(--t-s),border-color var(--t-s)}
.form-check input::after{content:"";width:11px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform 250ms var(--ease-back)}
.form-check input:checked{background:var(--brass);border-color:var(--brass)}
.form-check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.form-check input[aria-invalid="true"]{border-color:var(--error)}

/* ===== 07 · Header ===================================================== */
.site-header{
  position:fixed;left:0;right:0;top:0;height:var(--header-h);z-index:var(--z-header);
  border-bottom:1px solid transparent;
  transition:transform 450ms var(--ease-expo),background-color 300ms var(--ease-out),border-color 300ms var(--ease-out);
}
.site-header.is-scrolled{background:var(--header-bg);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-header.is-scrolled{background:rgba(11,10,9,.94)} }
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Logo = the artist: first name in the display serif + surname (or title) as a small, widely tracked line; the brass
   drop hangs in front of the first name, standing on its baseline. Names and labels can be in any language, so the
   logo never changes letter case (no text-transform): it shows exactly what was typed in the settings.
   Only the logo may shrink in the header: when the name runs out of room the surname moves under the first name
   (aligned with it), then wraps at its spaces, and a single word that still cannot fit ends in an ellipsis. */
.brand{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;min-height:44px;padding-left:19px;color:var(--bone)}
.brand__lockup{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:3px;min-width:0}
.brand__mark{position:relative;font:italic 400 28px/.9 var(--font-serif);letter-spacing:-.01em;white-space:nowrap;padding-right:.06em}
.brand__drop{position:absolute;right:calc(100% + 9px);bottom:.14em;width:10px;height:16px;color:var(--brass)}
.brand__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;font:500 11px/1.2 var(--font-sans);letter-spacing:.14em;color:var(--ash)}
.site-nav{display:none}
.site-header__actions{display:flex;flex:none;align-items:center;gap:12px}
.site-header__cta{display:none}
body[data-page="randevu"] .site-header__cta{display:none!important}
@media (min-width:900px){
  .brand__mark{font-size:32px}
  .brand__name{font-size:11.5px;letter-spacing:.18em}
  .site-nav{display:block;flex:none}
  .site-nav__list{display:flex;align-items:center;gap:36px}
  .site-nav__link{
    position:relative;display:inline-block;padding:10px 0;white-space:nowrap;
    font:600 var(--fs-micro)/1.4 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;
    color:var(--bone);opacity:.72;transition:opacity var(--t-s) var(--ease-out);
  }
  .site-nav__link:hover,.site-nav__link:focus-visible,.site-nav__link[aria-current="page"]{opacity:1}
  .site-nav__link[aria-current="page"]::after{
    content:"";position:absolute;left:50%;top:calc(100% - 4px);width:4px;height:4px;margin-left:-2px;border-radius:50%;
    background:var(--brass);animation:navdot 600ms var(--ease-back) 400ms both;
  }
  .site-header__cta{display:inline-flex}
}
@keyframes navdot{from{transform:scale(0)}to{transform:scale(1)}}
@media (min-width:900px) and (max-width:1199px){ .brand__name{font-size:11px;letter-spacing:.14em} }
/* a very long word in the small line (PHP adds .brand--long): tighter tracking where the header is tight */
@media (max-width:599px),(min-width:900px) and (max-width:1023px){ .brand--long .brand__name{font-size:10.5px;letter-spacing:.08em} }
/* No JS (or main.js never booted): the header is always solid, the inert Sound/Menu
   controls are hidden and phones get the page links as a compact 2x2 grid instead */
:is(.no-js,.reveal-all:not(.is-booted)) .site-header{background:var(--header-bg);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :is(.no-js,.reveal-all:not(.is-booted)) .site-header{background:rgba(11,10,9,.94)} }
:is(.no-js,.reveal-all:not(.is-booted)) :is(.sound-toggle,.menu-toggle){display:none}
@media (max-width:899px){
  :is(.no-js,.reveal-all:not(.is-booted)) .site-nav{display:block}
  :is(.no-js,.reveal-all:not(.is-booted)) .site-nav__list{display:grid;grid-template-columns:auto auto;column-gap:16px}
  :is(.no-js,.reveal-all:not(.is-booted)) .site-nav__link{display:inline-flex;align-items:center;min-height:26px;font:600 11px/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
  :is(.no-js,.reveal-all:not(.is-booted)) .site-nav__link[aria-current="page"]{color:var(--brass-2)}
}

/* — Language switcher (EN | ES): header (wide screens), mobile menu, footer — */
.lang-switch{display:flex;align-items:center;gap:6px;flex:none}
.lang-switch__globe{width:16px;height:16px;color:var(--ash)}
.lang-switch__list{display:flex;align-items:center}
.lang-switch__list li{display:flex;align-items:center}
.lang-switch__list li + li::before{content:"";width:1px;height:12px;margin-inline:1px;background:var(--line-2)}
.lang-switch__link{
  display:inline-grid;place-items:center;min-width:34px;min-height:32px;padding:0 7px;border-radius:var(--r-pill);
  font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:.14em;color:var(--dim);transition:color var(--t-s) var(--ease-out),background-color var(--t-s) var(--ease-out);
}
.lang-switch__link:hover{color:var(--bone)}
.lang-switch__link[aria-current="true"]{color:var(--bone);background:var(--ink-3)}
.lang-switch__code{padding-left:.14em} /* optical centre with the tracking */
.lang-switch--header{display:none;height:40px;padding:0 4px 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill)}
@media (min-width:900px){ .lang-switch--header{display:flex} }
@media (min-width:900px) and (max-width:1099px){ .lang-switch--header .lang-switch__globe{display:none} .lang-switch--header{padding-left:4px} }
.lang-switch--menu .lang-switch__link,.lang-switch--footer .lang-switch__link{min-width:44px;min-height:44px}
.lang-switch--menu .lang-switch__globe,.lang-switch--footer .lang-switch__globe{color:var(--brass)}
:is(.no-js,.reveal-all:not(.is-booted)) .lang-switch--header{display:flex}

/* ===== 08 · Sound toggle =============================================== */
.sound-toggle{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--bone);transition:border-color var(--t-s) var(--ease-out),background-color var(--t-s);
}
@media (min-width:900px){ .sound-toggle{height:40px} }
/* phones and the tight 900–1199 header: bars only (the name stays in aria-label) */
@media (max-width:1199px){ .sound-toggle{width:44px;padding:0;justify-content:center} .sound-toggle__text{display:none} }
@media (min-width:900px) and (max-width:1199px){ .sound-toggle{width:40px} }
@media (hover:hover){ .sound-toggle:hover{background:var(--ink-2)} }
.sound-toggle__bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sound-toggle__bars i{display:block;width:2px;height:14px;border-radius:1px;background:var(--ash);transform-origin:50% 100%;transform:scaleY(.22);transition:background-color var(--t-s),transform var(--t-m) var(--ease-out)}
.sound-toggle__text{font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--bone)}
.sound-toggle[aria-pressed="true"]{border-color:var(--brass)}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i{background:var(--brass);animation:eq .9s var(--ease-soft) -.2s infinite alternate}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){animation-duration:1.15s;animation-delay:-.5s}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){animation-duration:.75s;animation-delay:-.1s}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4){animation-duration:1.05s;animation-delay:-.7s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* ===== 09 · Menu toggle ================================================ */
.menu-toggle{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--bone);transition:border-color var(--t-s),background-color var(--t-s);
}
.menu-toggle__lines{position:relative;display:block;width:18px;height:8px}
.menu-toggle__lines i{position:absolute;left:0;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform 400ms var(--ease-back)}
.menu-toggle__lines i:first-child{top:0}
.menu-toggle__lines i:last-child{bottom:0}
.menu-toggle[aria-expanded="true"]{border-color:var(--bone)}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu-toggle__text{font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--bone)}
@media (min-width:900px){ .menu-toggle{display:none} }

/* ===== 10 · Mobile menu ================================================ */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--ink);
  padding:calc(var(--header-h) + 32px) var(--gutter) max(24px, env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu__bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
/* ghost of the logo's first name: as large as the screen allows (--ghost-len = letter count, set by PHP) */
.menu__ghost{position:absolute;right:-.02em;bottom:-.1em;font:italic 400 min(78vw, 66svh, calc(200vw / var(--ghost-len,4)))/.8 var(--font-serif);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px var(--line-2);white-space:nowrap}
.menu__nav{position:relative}
.menu__list{display:grid;gap:4px}
.menu__link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:16px;padding-block:6px}
.menu__no{font-size:14px}
.menu__text{font:600 var(--fs-index)/1.05 var(--font-sans);letter-spacing:-.03em;color:var(--bone)}
.menu__link[aria-current="page"] .menu__text{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--brass-2)}
.menu__foot{position:relative;display:grid;gap:20px}
.menu__contact{display:grid}
.menu__contact a{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);color:var(--bone);font-size:15px}
.menu__contact .icon{color:var(--brass)}
.menu__contact-k{font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--dim)}
.menu__contact-v{min-width:0;overflow-wrap:anywhere}
.menu__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.menu__hours{color:var(--dim);max-width:none}
@media (prefers-reduced-motion:no-preference){
  .menu .menu__text .w__i{transform:translate3d(0,115%,0) rotate(4deg)}
  .menu.is-open .menu__text .w__i{transform:none;transition:transform 800ms var(--ease-expo) calc(250ms + var(--mi,0)*60ms + var(--wi,0)*var(--st-word))}
  .menu .menu__no{opacity:0}
  .menu.is-open .menu__no{opacity:1;transition:opacity 400ms var(--ease-out) calc(400ms + var(--mi,0)*60ms)}
  .menu .menu__foot{opacity:0;transform:translate3d(0,24px,0)}
  .menu.is-open .menu__foot{opacity:1;transform:none;transition:opacity 600ms var(--ease-expo) 550ms,transform 600ms var(--ease-expo) 550ms}
  .menu.is-open.is-closing .menu__nav,.menu.is-open.is-closing .menu__foot{opacity:0;transition:opacity 200ms var(--ease-out)}
}

/* ===== 11 · Scroll progress ============================================ */
.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:var(--z-progress);pointer-events:none}
.progress__bar{display:block;width:100%;height:100%;background:var(--brass);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ===== 12 · Floating controls ========================================== */
.floating{
  position:fixed;right:max(16px, calc(env(safe-area-inset-right) + 16px));bottom:max(16px, calc(env(safe-area-inset-bottom) + 16px));
  z-index:var(--z-floating);display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s 0s;
}
.floating.is-away{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s 300ms}
.fab{-webkit-tap-highlight-color:transparent}
.fab--sms{
  display:inline-flex;align-items:center;gap:10px;height:56px;min-width:56px;max-width:56px;padding:0 16px;
  border-radius:var(--r-pill);background:var(--brass);color:var(--ink);overflow:hidden;white-space:nowrap;
  box-shadow:var(--sh-pop);transition:max-width 450ms var(--ease-expo),background-color var(--t-s);
}
.fab--sms .icon{width:24px;height:24px;flex:none}
.fab__label{font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink);clip-path:inset(0 0 0 100%);transition:clip-path 450ms var(--ease-expo)}
.fab--sms:focus-visible{outline-color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .fab--sms:hover,.fab--sms:focus-visible{max-width:280px;background:var(--brass-2)}
  .fab--sms:hover .fab__label,.fab--sms:focus-visible .fab__label{clip-path:inset(0)}
}
.fab--top{
  position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--ink-2);border:1px solid var(--line-strong);color:var(--bone);
  opacity:0;scale:.6;visibility:hidden;pointer-events:none;
  transition:opacity 400ms var(--ease-back),scale 400ms var(--ease-back),visibility 0s 400ms,background-color var(--t-s);
}
.fab--top.is-shown{opacity:1;scale:1;visibility:visible;pointer-events:auto;transition:opacity 400ms var(--ease-back),scale 400ms var(--ease-back),visibility 0s 0s,background-color var(--t-s)}
@media (hover:hover){ .fab--top:hover{background:var(--ink-3)} }
.fab__ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);pointer-events:none}
.fab__ring circle{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
/* phones/tablets/small laptops: one compact button only, so it stays clear of the content edge
   (the footer has "Back to top", the header returns on scroll-up) */
@media (max-width:1279px){
  .fab--top{display:none}
  .fab--sms{height:48px;min-width:48px;max-width:48px;padding:0 12px}
  .fab--sms .icon{width:22px;height:22px}
}
/* the auto-hide needs JS; without it the buttons would sit on the footer */
:is(.no-js,.reveal-all:not(.is-booted)) .floating{display:none}

/* ===== 12b · Language hint (English pages, Spanish-preferring browsers) = */
.lang-hint{
  position:fixed;z-index:var(--z-floating);left:max(16px, calc(env(safe-area-inset-left) + 16px));bottom:max(16px, calc(env(safe-area-inset-bottom) + 16px));
  display:flex;align-items:center;gap:10px;max-width:min(460px, calc(100vw - 104px));padding:8px 8px 8px 16px;border-radius:var(--r-pill);
  background:rgba(22,19,15,.9);border:1px solid var(--line-2);box-shadow:var(--sh-pop);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;translate:0 18px;transition:opacity 450ms var(--ease-expo),translate 450ms var(--ease-expo);
}
.lang-hint.is-in{opacity:1;translate:0 0}
.lang-hint__globe{width:18px;height:18px;color:var(--brass)}
.lang-hint__q{max-width:none;font:500 14px/1.3 var(--font-sans);color:var(--bone);white-space:nowrap}
.lang-hint__go{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--brass);color:var(--ink);font:600 13px/1 var(--font-sans);white-space:nowrap;transition:background-color var(--t-s)}
.lang-hint__go .icon{width:16px;height:16px}
.lang-hint__go:focus-visible{outline-color:var(--bone)}
@media (hover:hover){ .lang-hint__go:hover{background:var(--brass-2)} .lang-hint__x:hover{color:var(--bone);background:var(--ink-3)} }
.lang-hint__x{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ash);transition:color var(--t-s),background-color var(--t-s)}
.lang-hint__x .icon{width:16px;height:16px}
@media (max-width:599px){
  .lang-hint{flex-wrap:wrap;border-radius:var(--r-l);padding:12px 8px 10px 16px;row-gap:6px}
  .lang-hint__q{flex:1}
}
@media (prefers-reduced-motion:reduce){ .lang-hint{translate:none;transition:opacity 200ms linear} }
:is(.no-js,.reveal-all:not(.is-booted)) .lang-hint{display:none}

/* ===== 12c · Text (SMS) dialog — desktop: QR code + number + copy ====== */
.sms-pop{position:fixed;inset:0;z-index:450;display:grid;place-items:center;padding:24px;overscroll-behavior:contain}
.sms-pop__scrim{position:absolute;inset:0;background:rgba(11,10,9,.74);-webkit-backdrop-filter:blur(8px) saturate(.9);backdrop-filter:blur(8px) saturate(.9)}
.sms-pop__card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:min(780px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;
  border-radius:var(--r-xl);background:radial-gradient(120% 120% at 100% 0%, rgba(184,146,90,.10), transparent 50%), var(--ink-2);border:1px solid var(--line-2);
  box-shadow:0 40px 120px -24px rgba(0,0,0,.85);
}
.sms-pop__qr{position:relative;display:grid;place-items:center;padding:30px;background:var(--bone);color:var(--ink);min-height:240px}
.sms-pop__code{display:block;width:100%;max-width:260px;height:auto;aspect-ratio:1}
.sms-pop__qr-wait{display:block;width:min(100%,220px);aspect-ratio:1;border-radius:14px;background:linear-gradient(110deg, rgba(11,10,9,.06) 30%, rgba(11,10,9,.14) 50%, rgba(11,10,9,.06) 70%) 0 0 / 300% 100%;animation:qr-wait 1.2s linear infinite}
@keyframes qr-wait{to{background-position:-150% 0}}
.sms-pop.has-qr .sms-pop__qr-wait,.sms-pop.no-qr .sms-pop__qr{display:none}
.sms-pop.no-qr .sms-pop__card{width:min(540px,100%)}
.sms-pop__body{display:grid;gap:16px;align-content:center;padding:36px 36px 28px}
.sms-pop__eyebrow{gap:10px;color:var(--brass-2)}
.sms-pop__eyebrow::before{display:none}
.sms-pop__eyebrow .icon{width:18px;height:18px}
.sms-pop__title{padding-right:48px;font:italic 400 clamp(2.5rem,4vw,3.5rem)/.95 var(--font-serif);letter-spacing:-.01em;color:var(--bone)}
.sms-pop__lede{max-width:40ch;font-size:var(--fs-small);line-height:1.6;color:var(--ash)}
.sms-pop__num{display:grid;gap:8px;padding-block:16px;border-block:1px solid var(--line)}
.sms-pop.no-qr .sms-pop__numlabel{display:none}
.sms-pop__phone{font:600 clamp(1.5rem,2.6vw,2rem)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--bone);font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all}
.sms-pop__actions{display:flex;flex-wrap:wrap;gap:10px}
.sms-pop__copy.is-done{--btn-bg:var(--success);--btn-fill:var(--success);--btn-fg-hover:var(--ink)}
.sms-pop__status{min-height:1.5em;color:var(--ash)}
.sms-pop__x{position:absolute;top:16px;right:16px;z-index:2;background:rgba(22,19,15,.7)}
.sms-pop__x .icon{width:18px;height:18px}
@media (min-width:720px){
  .sms-pop__card{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  .sms-pop__qr{min-height:0;padding:36px}
}

/* ===== 13 · Footer ===================================================== */
.site-footer{position:relative;padding-block:var(--s-10) var(--s-6);border-top:1px solid var(--line)}
.site-footer__top{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.site-footer__tagline{font:600 var(--fs-h2)/1 var(--font-sans);letter-spacing:var(--ls-h2);max-width:none}
.site-footer__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-block:var(--s-9)}
.site-footer__col h2{margin-bottom:16px}
.site-footer__col address{color:var(--bone);margin-bottom:10px;line-height:1.6}
.site-footer__note{max-width:34ch;margin-bottom:14px;font-size:var(--fs-small);line-height:1.55;color:var(--ash)}
.site-footer__col .site-footer__note:last-child{margin:12px 0 0}
.site-footer__map .icon{width:14px;height:14px}
.site-footer__col ul{display:grid;gap:10px}
.site-footer__col .link{color:var(--bone)}
.hours div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-bottom:1px solid var(--line)}
.hours div:first-child{padding-top:0}
.hours dt{color:var(--ash)}
.hours dd{color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The wordmark is the artist's name. em units below are in wordmark size: padding keeps accents (Í, ñ, ö dots) and the
   y descender unclipped. Never larger than the original scale (19vw, max 22rem); a longer name shrinks so its longest
   line fits the container: --wm-chars (letters in the longest line, from PHP) gives the no-JS size, js/main.js then
   fits it exactly. Long multi-word names come as two balanced lines (.wm__line). */
.site-footer__mark{position:relative;user-select:none;overflow:hidden;font:800 clamp(2.5rem,min(48vw,calc(min(100vw - 2 * var(--gutter),var(--container)) / (var(--wm-chars,9) * .52))),44rem)/.86 var(--font-sans);letter-spacing:-.05em;padding:.16em .02em .34em;margin:-.1em -.02em -.28em}
.wm{display:block;font:inherit;letter-spacing:inherit;white-space:nowrap}
.wm__line{display:block;width:max-content}
.site-footer__mark--lines{line-height:.96}
/* opaque page-colour fill painted over a 2px stroke hides the variable font's overlapping inner contours */
.wm--outline{color:var(--ink);-webkit-text-stroke:2px var(--line-strong);paint-order:stroke fill}
.wm--fill{position:absolute;left:.02em;top:.16em;color:var(--bone);-webkit-text-stroke:2px var(--bone);paint-order:stroke fill;clip-path:inset(-.2em calc(100% - var(--fill,0) * 100%) -.3em 0)}
.no-js .wm--fill,.reveal-all .wm--fill{clip-path:none}
.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:var(--s-6);color:var(--dim)}
.site-footer__bottom .small{color:var(--dim)}
.site-footer__bottom .link-btn{color:var(--bone);font-size:var(--fs-small);min-height:44px}
.site-footer__end{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-left:auto}
@media (min-width:600px){ .site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .site-footer__top{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .site-footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== 14 · Cursor (fine pointers only; created by JS) ================= */
.cursor{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity 300ms var(--ease-out)}
.cursor.is-visible{opacity:1}
.cursor__ring{
  position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--bone);background:transparent;
  scale:calc(var(--cs,1) * var(--cd,1));
  transition:scale 300ms var(--ease-expo),background-color 300ms var(--ease-expo),border-color 300ms var(--ease-expo),opacity 300ms var(--ease-expo);
}
.cursor__label{
  position:absolute;left:0;top:0;translate:-50% -50%;scale:.45;opacity:0;
  font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink);white-space:nowrap;
  transition:scale 300ms var(--ease-expo),opacity 300ms var(--ease-expo);
}
.cursor.is-link .cursor__ring{--cs:.5;background:rgba(237,230,216,.9)}
.cursor.is-label{mix-blend-mode:normal}
.cursor.is-label .cursor__ring{--cs:2.2;background:var(--brass);border-color:var(--brass)}
.cursor.is-label .cursor__label{opacity:1;scale:1}
.cursor.is-hidden .cursor__ring,.cursor.is-hidden .cursor__label{opacity:0}
.cursor.is-down .cursor__ring{--cd:.85}

/* ===== 15 · Grain ====================================================== */
body::after{content:"";position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;opacity:.08;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 1s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,5%)}83%{transform:translate(-2%,6%)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ===== 16 · Preloader (index only) ===================================== */
.preloader{position:fixed;inset:0;z-index:var(--z-preloader);display:grid;place-items:center;background:var(--ink);animation:preloader-failsafe 0s linear 4.5s forwards}
@keyframes preloader-failsafe{to{visibility:hidden}}
.is-returning .preloader,.pt-in .preloader,.reveal-all .preloader,.no-js .preloader{display:none}
.preloader__mono{width:auto;height:88px}
.preloader__mono path{stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.preloader__mono .mono__drop{fill:var(--brass);stroke:var(--brass)}
.preloader__mono .mono__stem{fill:var(--bone);stroke:var(--bone)}
.preloader.is-drawing .preloader__mono path{stroke-dashoffset:0;transition:stroke-dashoffset 1400ms var(--ease-soft)}
.preloader.is-drawing .preloader__mono .mono__stem{transition-delay:150ms}
.preloader.is-filled .preloader__mono path{fill-opacity:1;transition:stroke-dashoffset 1400ms var(--ease-soft),fill-opacity 300ms var(--ease-out)}
/* the artist's name + title, exactly as typed (no case change); a long one wraps instead of running under the counter */
.preloader__brand{position:absolute;left:var(--gutter);right:calc(var(--gutter) + clamp(3rem,8vw,6rem) * 1.8);bottom:24px;color:var(--ash);text-transform:none}
.preloader__count{position:absolute;right:var(--gutter);bottom:10px;font:italic 400 clamp(3rem,8vw,6rem)/1 var(--font-serif);color:var(--brass);font-variant-numeric:tabular-nums;max-width:none}
.preloader__panel{position:absolute;inset:0;background:var(--brass);clip-path:inset(100% 0 0 0)}
@media (min-width:600px){ .preloader__mono{height:120px} }
/* Reduced motion: preloader skipped entirely (never traps the visitor). */
@media (prefers-reduced-motion:reduce){ .preloader{display:none} }

/* ===== 17 · Page transition ============================================ */
.pt{position:fixed;inset:0;z-index:var(--z-pt);pointer-events:none;visibility:hidden;overflow:hidden}
.pt__edge{position:absolute;left:0;top:0;width:100%;height:calc(100vh + 120px);background:var(--brass);transform:translateY(100vh)}
.pt__ink{position:absolute;left:0;top:0;width:100%;height:calc(100vh + 280px);display:flex;flex-direction:column;transform:translateY(100vh)}
.pt__wave{display:block;flex:none;width:100%;height:120px;max-width:none;fill:var(--ink);margin-bottom:-1px}
.pt__body{flex:none;height:100vh;background:var(--ink)}
.pt__drips{display:block;flex:none;width:100%;height:160px;max-width:none;fill:var(--ink);margin-top:-1px}
.pt__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0}
.pt__center .mono{width:auto;height:56px}
.mono__drop{fill:var(--brass)}
.mono__stem{fill:var(--bone)}
.pt__label{font:italic 400 clamp(2.5rem,6vw,5rem)/1 var(--font-serif);color:var(--bone);letter-spacing:-.01em}
.pt__label:empty::after{content:var(--pt-label,"")}
.pt-in .pt{visibility:visible;animation:pt-failsafe 0s linear 2.5s forwards}
.pt-in .pt__ink{transform:translateY(-120px)}
.pt-in .pt__edge{transform:translateY(100vh)}
.pt-in .pt__center{opacity:1}
@keyframes pt-failsafe{to{visibility:hidden}}
.reveal-all .pt,.no-js .pt{display:none}

/* ===== 18 · Split text + roll ========================================== */
.split{display:inline}
.w{display:inline-block;vertical-align:top}
.w__i{display:inline-block}
.split--words .w{overflow:hidden;padding:.14em .06em .16em;margin:-.14em -.06em -.16em}
.split--words .w--accent{padding-right:.2em;margin-right:-.2em}
.split--nomask .w{overflow:visible;padding:0;margin:0}
.split--chars .w{white-space:nowrap;perspective:600px}
.c{display:inline-block;transform-origin:50% 100%}
.roll{display:inline-grid;vertical-align:top;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.roll__i{grid-area:1 / 1;display:inline-block}

/* ===== 19 · Reveal system ==============================================
   Hidden states only under .js and never under .reveal-all.
   Revealed state is the default; transitions only while .is-in:not(.reveal-done).
   --d = delay (set by JS). Transform-ish reveals use individual properties
   (scale / translate) so JS-driven `transform` (tilt, parallax, magnetic) composes. */
[data-reveal="draw"] .draw{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-all) :is([data-reveal="words"],[data-reveal="chars"]):not(.is-split):not(.is-in){opacity:0}
  /* words */
  .js:not(.reveal-all) [data-reveal="words"]:not(.is-in) .w__i{transform:translate3d(0,115%,0) rotate(4deg)}
  .js [data-reveal="words"].is-in:not(.reveal-done) .w__i{transition:transform var(--t-2xl) var(--ease-expo) calc(var(--d,0ms) + var(--wi,0) * var(--st-word))}
  /* chars */
  .js:not(.reveal-all) [data-reveal="chars"]:not(.is-in) .c{opacity:0;transform:translate3d(0,.45em,0) rotateX(-90deg)}
  .js [data-reveal="chars"].is-in:not(.reveal-done) .c{transition:transform var(--t-xl) var(--ease-expo) calc(var(--d,0ms) + var(--ci,0) * var(--st-char)),opacity var(--t-m) var(--ease-out) calc(var(--d,0ms) + var(--ci,0) * var(--st-char))}
  /* lines (authored .ln > .ln__i) */
  .ln{display:block;overflow:hidden;padding:.14em .06em .16em;margin:-.14em -.06em -.16em}
  .ln__i{display:inline-block}
  .js:not(.reveal-all) [data-reveal="lines"]:not(.is-in) .ln__i{transform:translate3d(0,110%,0) rotate(3deg)}
  .js [data-reveal="lines"].is-in:not(.reveal-done) .ln__i{transition:transform var(--t-3xl) var(--ease-expo) calc(var(--d,0ms) + var(--li,0) * var(--st-line))}
  /* curtain */
  .js:not(.reveal-all) [data-reveal="curtain"]:not(.is-in){clip-path:inset(100% 0 0 0)}
  .js:not(.reveal-all) [data-reveal="curtain"]:not(.is-in) [data-reveal-inner]{scale:1.25}
  .js [data-reveal="curtain"].is-in:not(.reveal-done){clip-path:inset(0 0 0 0);transition:clip-path var(--t-3xl) var(--ease-quart) var(--d,0ms)}
  .js [data-reveal="curtain"].is-in:not(.reveal-done) [data-reveal-inner]{scale:1;transition:scale var(--t-4xl) var(--ease-expo) var(--d,0ms),transform 1.4s var(--ease-expo)}
  /* wipe */
  .js:not(.reveal-all) [data-reveal="wipe"]:not(.is-in){clip-path:inset(0 100% 0 0)}
  .js [data-reveal="wipe"].is-in:not(.reveal-done){clip-path:inset(0 0 0 0);transition:clip-path var(--t-2xl) var(--ease-quart) var(--d,0ms)}
  /* iris */
  .js:not(.reveal-all) [data-reveal="iris"]:not(.is-in){clip-path:circle(0% at var(--ix,50%) var(--iy,70%))}
  .js:not(.reveal-all) [data-reveal="iris"]:not(.is-in) [data-reveal-inner]{scale:1.2}
  .js [data-reveal="iris"].is-in:not(.reveal-done){clip-path:circle(75% at 50% 50%);transition:clip-path 1400ms var(--ease-expo) var(--d,0ms)}
  .js [data-reveal="iris"].is-in:not(.reveal-done) [data-reveal-inner]{scale:1;transition:scale var(--t-4xl) var(--ease-expo) var(--d,0ms),transform 1.4s var(--ease-expo)}
  /* scale */
  .js:not(.reveal-all) [data-reveal="scale"]:not(.is-in){opacity:0;scale:.88}
  .js [data-reveal="scale"].is-in:not(.reveal-done){scale:1;transition:opacity var(--t-xl) var(--ease-out) var(--d,0ms),scale var(--t-2xl) var(--ease-expo) var(--d,0ms)}
  /* blur */
  .js:not(.reveal-all) [data-reveal="blur"]:not(.is-in){opacity:0;filter:blur(14px);translate:0 16px}
  .js [data-reveal="blur"].is-in:not(.reveal-done){filter:blur(0);translate:0 0;transition:opacity var(--t-2xl) var(--ease-out) var(--d,0ms),filter var(--t-2xl) var(--ease-out) var(--d,0ms),translate var(--t-2xl) var(--ease-out) var(--d,0ms)}
  /* rise (body paragraphs only) */
  .js:not(.reveal-all) [data-reveal="rise"]:not(.is-in){opacity:0;translate:0 32px}
  .js [data-reveal="rise"].is-in:not(.reveal-done){translate:0 0;transition:opacity var(--t-xl) var(--ease-out) var(--d,0ms),translate var(--t-2xl) var(--ease-expo) var(--d,0ms)}
  /* rule */
  .js:not(.reveal-all) [data-reveal="rule"]:not(.is-in){scale:0 1;transform-origin:0 50%}
  .js [data-reveal="rule"].is-in:not(.reveal-done){scale:1 1;transform-origin:0 50%;transition:scale var(--t-3xl) var(--ease-expo) var(--d,0ms)}
  /* tilt-in */
  .js:not(.reveal-all) [data-reveal="tilt-in"]:not(.is-in){opacity:0;transform:perspective(1200px) rotateX(-28deg) translate3d(0,48px,0);transform-origin:50% 0}
  .js [data-reveal="tilt-in"].is-in:not(.reveal-done){transform-origin:50% 0;transition:opacity var(--t-2xl) var(--ease-expo) var(--d,0ms),transform var(--t-2xl) var(--ease-expo) var(--d,0ms)}
  /* draw */
  .js:not(.reveal-all) [data-reveal="draw"]:not(.is-in) .draw{stroke-dashoffset:1}
  .js [data-reveal="draw"].is-in:not(.reveal-done) .draw{transition:stroke-dashoffset var(--t-4xl) var(--ease-soft) calc(var(--d,0ms) + var(--pi,0) * var(--draw-st,60ms))}
  .js:not(.reveal-all) [data-reveal="draw"]:not(.is-in) .draw-fade{opacity:0}
  .js [data-reveal="draw"].is-in:not(.reveal-done) .draw-fade{transition:opacity 600ms var(--ease-out) calc(var(--d,0ms) + var(--fade-d,900ms))}
}
@media (prefers-reduced-motion:reduce){
  .ln{display:block}
  .js:not(.reveal-all) [data-reveal]:not(.is-in){opacity:0}
  .js [data-reveal].is-in:not(.reveal-done){transition:opacity 300ms linear var(--d,0ms)}
}

/* ===== 20 · Tilt glare ================================================= */
.tilt-glare{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(237,230,216,.18), transparent 50%);opacity:0;transition:opacity 400ms var(--ease-out)}
.is-tilting > .tilt-glare{opacity:1}

/* =========================================================================
   HOME PAGE (body[data-page="home"])
   ========================================================================= */

/* ===== 21 · Home · hero ================================================ */
/* Three giant words around an arched frame of real photography (featured work, crossfading with an ink-drop
   reveal and a slow Ken Burns drift). Layers use --edge (not --gutter) so they line up with the header/.container. */
.home-hero{position:relative;min-height:100vh;min-height:100svh;overflow:clip;background:var(--ink)}
/* <900px: the arch (width --hw, 3:4) sits under the micro line; the headline overlaps its lower part */
.home-hero__stage{
  --hw:min(76vw,400px);--ft:calc(var(--header-h) + 82px);--fh:calc(var(--hw) * 4 / 3);
  --ya:calc(var(--ft) + var(--fh) * .64);--yb:calc(var(--ya) + var(--fs-hero-sans-m) * .9);--yc:calc(var(--yb) + var(--fs-hero-sans-m) * .86);
  position:relative;height:calc(var(--yc) + var(--fs-hero-serif-m) + 8px);isolation:isolate;overflow:clip;
}
.home-hero__ink,.home-hero__vignette,.home-hero__aura,.home-hero__spot,.home-hero__fade{position:absolute;pointer-events:none}
.home-hero__ink{left:0;top:0;width:100%;height:100%;z-index:1;max-width:none}
.js .home-hero__ink{opacity:0}
.home-hero__vignette{inset:0;z-index:2;background:radial-gradient(120% 85% at 56% 45%, transparent 35%, rgba(11,10,9,.7) 75%, var(--ink) 100%)}
.home-hero__aura{z-index:3;left:50%;top:calc(var(--ft) + var(--fh) * .45);width:80vmin;height:80vmin;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side, rgba(184,146,90,.2), rgba(122,46,34,.09) 55%, transparent 100%)}
.home-hero__spot{z-index:6;left:0;top:0;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side, rgba(237,230,216,.06), transparent 70%);transform:translate3d(calc(50vw - 450px),-150px,0)}
.home-hero__fade{z-index:4;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top, var(--ink) 0%, rgba(11,10,9,.8) 40%, transparent 100%)}
.home-hero__title{margin:0} /* never a stacking context: no transform/opacity/filter/will-change/isolation/contain */
.hero-word{position:absolute;display:block;white-space:nowrap;color:var(--bone);font:600 var(--fs-hero-sans-m)/.86 var(--font-sans);letter-spacing:var(--ls-hero);pointer-events:none}
.hero-word .ln{display:block;overflow:hidden;padding:.14em .06em .16em;margin:-.14em -.06em -.16em}
.hero-word .ln__i{display:inline-block}
/* A sits behind the frame on wide screens; B and C (and A on phones) sit in front with a crisp ink edge so the
   headline never loses letters to the photograph */
.hero-word--a{z-index:4;left:var(--edge);top:var(--ya)}
.hero-word--b{z-index:8;right:var(--edge);top:var(--yb);text-shadow:var(--sh-text-crisp)}
.hero-word--c{z-index:8;left:var(--edge);top:var(--yc);font-family:var(--font-serif);font-size:var(--fs-hero-serif-m);font-weight:400;line-height:.9;letter-spacing:-.01em;text-shadow:var(--sh-text-crisp)}
.hero-word--c .ln{padding-right:.22em;margin-right:-.22em}
.hero-word--c .accent{font-size:1em;letter-spacing:-.015em;color:var(--brass-2);-webkit-text-stroke:1px rgba(11,10,9,.6);paint-order:stroke fill}
@media (max-width:899px){ .hero-word--a{z-index:8;text-shadow:var(--sh-text-crisp)} }

/* — the arched frame — */
.hero-frame{position:absolute;z-index:5;left:50%;top:var(--ft);width:var(--hw);aspect-ratio:3 / 4;translate:-50% 0}
.hero-frame__inner{position:relative;width:100%;height:100%;transform-origin:50% 60%}
.hero-frame__arch{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;cursor:pointer;
  border-radius:999px 999px var(--r-l) var(--r-l);background:var(--exhibit);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(237,230,216,.09);
}
.hero-frame__arch::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(237,230,216,.07), inset 0 0 60px rgba(11,10,9,.35)}
.hero-frame__slide{position:absolute;inset:0;margin:0;opacity:0}
.hero-frame__slide.is-active{opacity:1;z-index:2}
.hero-frame__slide.is-leaving{opacity:1;z-index:1}
.hero-frame__slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:var(--kb-o,50% 40%)}
.hero-frame__slide.is-leaving img{filter:brightness(.45) saturate(.85);transition:filter 1.3s var(--ease-out)}
@media (prefers-reduced-motion:no-preference){
  .hero-frame__slide:is(.is-active,.is-leaving) img{animation:kenburns 8.5s linear both}
}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.15)}}
.hero-frame__shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top, rgba(11,10,9,.82) 0%, rgba(11,10,9,.28) 26%, transparent 46%)}
/* caption chip: the piece's number, title and style, linked to it in the portfolio; pause toggle; progress */
.hero-frame__cap{
  position:absolute;z-index:6;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:6px 6px 8px 14px;
  border-radius:var(--r-m);background:rgba(16,14,11,.62);border:1px solid rgba(237,230,216,.12);overflow:hidden;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hero-frame__cap{background:rgba(16,14,11,.92)} }
.hero-cap{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:44px;color:var(--bone)}
.hero-cap__no{flex:none;font-size:1.375rem;color:var(--brass-2)}
.hero-cap__txt{display:grid;gap:3px;min-width:0}
.hero-cap__title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/1.2 var(--font-sans);letter-spacing:-.005em}
.hero-cap__style{display:block;overflow:hidden;white-space:nowrap;font:600 10.5px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.hero-cap__go{flex:none;width:18px;height:18px;margin-left:auto;color:var(--brass-2);transition:translate 450ms var(--ease-expo)}
@media (hover:hover){ .hero-cap:hover .hero-cap__go{translate:3px -3px} .hero-cap:hover .hero-cap__title{color:var(--brass-2)} }
.hero-cap:focus-visible{outline-offset:2px;border-radius:var(--r-s)}
.hero-cap__toggle{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);color:var(--bone);transition:background-color var(--t-s),border-color var(--t-s)}
.hero-cap__toggle .icon{width:15px;height:15px}
@media (hover:hover){ .hero-cap__toggle:hover{background:var(--ink-3);border-color:var(--ash)} }
.hero-cap__bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:rgba(237,230,216,.1);overflow:hidden}
.hero-cap__bar span{display:block;width:100%;height:100%;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}
.hero-frame.is-paused .hero-cap__bar span{background:var(--ash)}
/* phones/tablets: the chip hangs on the top of the arch (the headline covers its foot) */
@media (max-width:899px){
  .hero-frame__cap{top:0;bottom:auto;left:50%;right:auto;width:min(calc(100vw - 2 * var(--gutter)), 330px);transform:translate(-50%,-50%)}
}

.home-hero__micro{position:absolute;z-index:9;top:calc(var(--header-h) + 14px);left:var(--edge);right:var(--edge);display:flex;justify-content:space-between;gap:24px;max-width:none;color:var(--ash)}
/* the right-hand line carries the artist's name and title: shown exactly as typed (names are never re-cased) */
.home-hero__credit{text-transform:none}
.home-hero__micro > span:nth-child(2),.home-hero__coords{display:none}
.home-float{position:absolute;z-index:9;pointer-events:none;overflow:visible}
.home-float--drop1{width:14px;height:22px;color:var(--brass);left:12vw;top:62%}
.home-float--drop2{width:8px;height:13px;color:var(--brass);opacity:.6;right:18vw;top:24%}
.home-float--spark1{width:18px;height:18px;color:var(--ash);left:46vw;top:18%;display:none}
.home-float--spark2{width:12px;height:12px;color:var(--brass);right:9vw;top:58%}
.home-float--spark3{width:10px;height:10px;color:var(--ash);left:30vw;top:80%;display:none}
/* <900: the floaters stay in the margins beside the arch, never inside the headline */
@media (max-width:899px){
  .home-float--drop1{left:6vw;top:calc(var(--ft) + 24px)}
  .home-float--drop2{right:5vw;top:calc(var(--ft) + var(--fh) * .3)}
  .home-float--spark2{right:6vw;top:calc(var(--ft) + 8px)}
}
/* the rotating seal on the arch's shoulder (wide screens) */
.home-hero__badge{position:absolute;z-index:7;right:-64px;top:3%;width:136px;height:136px;display:none}
.home-hero__badge text{fill:rgba(237,230,216,.82)}
.badge-ring__disc{fill:rgba(11,10,9,.72);stroke:rgba(184,146,90,.35);stroke-width:1}
.badge-ring__icon{color:var(--brass-2);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.home-hero__bottom{position:relative;z-index:10;display:grid;gap:24px;padding:20px var(--gutter) 40px;pointer-events:none}
/* the band's empty grid area lies over the arch's caption on wide screens: only its children take clicks */
.home-hero__bottom > *{pointer-events:auto}
.home-hero__bottom.is-faded > *{pointer-events:none}
.home-hero__lede{max-width:36ch}
.home-hero__ctas{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.home-hero__ctas .btn{width:100%}
.home-hero__cue{display:none}
.home-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:16px 8px}
.home-hero__stats .stat{gap:6px;padding:0 10px;border-left:1px solid var(--line)}
.home-hero__stats .stat:first-child{border-left:0}
.home-hero__stats .stat__num{font-size:1.5rem}
.home-hero__stats .stat__label{font-size:12px;line-height:1.35}
@media (min-width:600px) and (max-width:899px){ .home-hero__stage{--hw:min(60vw,420px)} }
/* landscape phones: the arch shrinks with the height so the photo AND the whole headline fit */
@media (max-width:899px) and (orientation:landscape) and (max-height:500px){
  .home-hero{--fs-hero-sans-m:clamp(2.5rem,15svh,7rem);--fs-hero-serif-m:clamp(3rem,18svh,8rem)}
  .home-hero__stage{--hw:min(40vw,42svh)}
}
@media (min-width:900px){
  .home-hero{height:100vh;height:100svh;min-height:680px;max-height:1600px}
  .home-hero__stage{position:absolute;inset:0;height:auto}
  .home-hero__aura{left:56%;top:47%}
  .home-hero__spot{transform:translate3d(calc(56vw - 450px),calc(47vh - 450px),0)}
  .home-hero__fade{z-index:4;height:30%}
  /* sizes capped by viewport height so short laptops (1280x720) never collide with the bottom band */
  .hero-word{font-size:min(var(--fs-hero-sans),20vh);font-size:min(var(--fs-hero-sans),20svh)}
  /* words longer than ~4 letters shrink (PHP writes --len) so they frame the photograph instead of covering it */
  .hero-word--a,.hero-word--b{font-size:calc(min(var(--fs-hero-sans),20svh) * min(1, 4.2 / var(--len,4)))}
  .hero-word--a{top:calc(var(--header-h) + 6%)}
  .hero-word--b{top:34%}
  .hero-word--c{left:max(19vw, var(--edge));top:min(48%, calc(100% - 20svh - 250px));font-size:min(var(--fs-hero-serif),22vh);font-size:calc(min(var(--fs-hero-serif),22svh) * min(1, 6.5 / var(--len,6)))}
  /* --fx / --fhd: the arch's centre and height, shared with the lede so the text column always stops short of it */
  .home-hero{--fx:56vw;--fhd:min(66svh, 760px)}
  .hero-frame{left:var(--fx);top:47%;width:auto;height:var(--fhd);translate:-50% -50%}
  .home-hero__lede{max-width:min(36ch, calc(var(--fx) - var(--fhd) * .375 - max(var(--gutter), (100vw - var(--container)) / 2) - 32px))}
  .home-hero__coords,.home-float--spark1,.home-float--spark3{display:inline}
  .home-float--spark1,.home-float--spark3{display:block}
  .home-hero__badge{display:block}
  .home-hero__bottom{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(24px,4svh,48px);padding:0;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
  .home-hero__ctas{flex-direction:row;flex-wrap:wrap;margin-top:20px}
  .home-hero__ctas .btn{width:auto}
  .home-hero__stats{display:flex;justify-self:end;padding:16px 20px;gap:20px}
  .home-hero__stats .stat{padding:0 0 0 20px}
  .home-hero__stats .stat:first-child{padding-left:0}
  .home-hero__stats .stat__num{font-size:clamp(1.5rem,2.4vw,2.5rem)}
  .home-hero__stats .stat__label{max-width:12ch}
}
/* 900–1199: the lede column reaches under the arch, so the arch moves right and a little smaller */
@media (min-width:900px) and (max-width:1199px){ .home-hero{--fx:62vw;--fhd:min(56svh, 760px)} .hero-frame{top:46%} .home-hero__aura{left:62%} }
@media (min-width:900px) and (max-height:820px){
  .home-hero__lede{font-size:1.0625rem}
  .home-hero__ctas{margin-top:16px}
  .home-hero{--fhd:min(62svh, 760px)}
  .hero-frame{top:45%}
}
@media (min-width:1200px){
  .home-hero__micro > span:nth-child(2){display:inline}
  .home-hero__bottom{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .home-hero__cue{display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:center;padding-bottom:4px;color:var(--ash)}
  .home-hero__stats{padding:18px 24px;gap:28px}
  .home-hero__stats .stat{padding-left:28px}
  .home-hero__stats .stat__label{max-width:14ch}
}
.home-hero__needle{position:relative;display:block;width:1px;height:56px;background:var(--line-2)}
.home-hero__needle::after{content:"";position:absolute;left:-3px;top:0;width:6px;height:6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brass);animation:needle-drop 2200ms var(--ease-soft) infinite}
@keyframes needle-drop{0%{translate:0 0;opacity:1}100%{translate:0 50px;opacity:0}}
/* H01 — entrance (JS adds .is-entered at pagereveal, .is-settled when done) */
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-all) .home-hero:not(.is-entered) .hero-frame__arch{clip-path:inset(100% 0 0 0)}
  .js .home-hero.is-entered:not(.is-settled) .hero-frame__arch{clip-path:inset(0 0 0 0);transition:clip-path 1300ms var(--ease-quart)}
  .js:not(.reveal-all) .home-hero:not(.is-entered) .hero-frame__slide.is-active img{scale:1.2}
  .js .home-hero.is-entered:not(.is-settled) .hero-frame__slide.is-active img{transition:scale 1800ms var(--ease-expo)}
  .js:not(.reveal-all) .home-hero:not(.is-entered) .hero-frame__cap{opacity:0;translate:0 14px}
  .js .home-hero.is-entered:not(.is-settled) .hero-frame__cap{transition:opacity 800ms var(--ease-expo) 1000ms,translate 800ms var(--ease-expo) 1000ms}
  .js:not(.reveal-all) .home-hero:not(.is-entered) :is(.home-hero__aura,.home-hero__spot){opacity:0}
  .js .home-hero.is-entered:not(.is-settled) :is(.home-hero__aura,.home-hero__spot){transition:opacity 1200ms var(--ease-out) 200ms}
  .js:not(.reveal-all) .home-hero:not(.is-entered) :is(.hero-word--a,.hero-word--b) .ln__i{transform:translate3d(0,110%,0) rotate(3deg)}
  .js .home-hero.is-entered:not(.is-settled) .hero-word--a .ln__i{transition:transform 1300ms var(--ease-expo) 300ms}
  .js .home-hero.is-entered:not(.is-settled) .hero-word--b .ln__i{transition:transform 1300ms var(--ease-expo) 390ms}
  .js:not(.reveal-all) .home-hero:not(.is-entered) .hero-word--c .accent{clip-path:inset(-10% 100% -20% 0);translate:-4% 0}
  .js .home-hero.is-entered:not(.is-settled) .hero-word--c .accent{clip-path:inset(-10% -10% -20% 0);transition:clip-path 1400ms var(--ease-expo) 600ms,translate 1400ms var(--ease-expo) 600ms}
  .js:not(.reveal-all) .home-hero:not(.is-entered) :is(.home-hero__micro,.home-hero__badge,.home-float){opacity:0;translate:0 12px}
  .js .home-hero.is-entered:not(.is-settled) :is(.home-hero__micro,.home-hero__badge,.home-float){transition:opacity 800ms var(--ease-expo) calc(900ms + var(--fi,0) * 60ms),translate 800ms var(--ease-expo) calc(900ms + var(--fi,0) * 60ms)}
  .js:not(.reveal-all) .home-hero:not(.is-entered) .home-hero__cue{opacity:0}
  .js .home-hero.is-entered:not(.is-settled) .home-hero__cue{transition:opacity 600ms var(--ease-out) 1300ms}
  .home-hero.is-settled .hero-word .ln{overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  .js:not(.reveal-all) .home-hero:not(.is-entered) :is(.hero-frame,.home-hero__aura,.home-hero__spot,.hero-word,.home-hero__micro,.home-float,.home-hero__badge,.home-hero__cue){opacity:0}
  .js .home-hero.is-entered :is(.hero-frame,.home-hero__aura,.home-hero__spot,.hero-word,.home-hero__micro,.home-float,.home-hero__badge,.home-hero__cue){transition:opacity 300ms linear}
  .home-hero__needle::after{animation:none;translate:0 22px}
  /* crossfade instead of the ink drop; no drift */
  .hero-frame__slide{transition:opacity 650ms linear}
  .hero-frame__slide.is-leaving{opacity:0}
  .hero-frame__slide.is-leaving img{filter:none}
}

/* ===== 21b · Home · awards band (ticker under the hero) ================ */
/* Decorative (aria-hidden): the accessible list is the Awards section. Glides to a stop under the mouse;
   reduced motion: static, faded at the edge. */
.aw-band{position:relative;z-index:1;display:flex;align-items:stretch;border-block:1px solid var(--line);background:linear-gradient(90deg, rgba(184,146,90,.08), rgba(184,146,90,0) 40%), var(--ink);overflow:hidden}
.aw-band__tag{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:0 18px 0 var(--edge);background:var(--ink);box-shadow:28px 0 28px -6px var(--ink);font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--brass-2);max-width:none}
.aw-band__tag .icon{width:18px;height:18px}
.aw-band__marquee{flex:1;min-width:0;padding-block:20px;pointer-events:auto;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent)}
.aw-tick{display:inline-flex;align-items:baseline;gap:14px;margin-right:30px;white-space:nowrap}
.aw-tick__place{font:italic 400 clamp(1.375rem,2.2vw,2.125rem)/1 var(--font-serif);letter-spacing:-.005em;padding-right:.08em}
.aw-tick__cat{font:600 clamp(.9375rem,1.2vw,1.1875rem)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--bone)}
.aw-tick__fest{font:600 var(--fs-micro)/1 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--dim)}
.aw-tick__sep{flex:none;width:12px;height:12px;margin-right:30px;color:var(--brass);fill:currentColor;stroke:none;align-self:center}
/* gold / silver / bronze within the brass palette (also used by the awards wall) */
:is(.aw-tick--p1 .aw-tick__place,.plaque--p1 .plaque__num){background:linear-gradient(172deg,#F7E4B5 0%,#DDBA7E 34%,#B8925A 62%,#8A6833 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.aw-tick--p2 .aw-tick__place,.plaque--p2 .plaque__num){background:linear-gradient(172deg,#FBF7F0 0%,#D9D2C6 38%,#ABA498 68%,#7F796F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.aw-tick--p3 .aw-tick__place,.plaque--p3 .plaque__num){background:linear-gradient(172deg,#F0C9A2 0%,#CB9363 40%,#A06A3D 70%,#6F4626 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.aw-tick--p0 .aw-tick__place){color:var(--brass-2)}
@media (max-width:599px){
  .aw-band__tag span{display:none}
  .aw-band__tag{padding-right:12px}
  .aw-band__marquee{padding-block:16px}
}

/* ===== 22 · Home · artist teaser ======================================= */
.home-artist__grid{row-gap:56px}
.home-artist__portrait{position:relative;width:min(74vw,440px);margin:0 auto;padding-right:14%}
.home-artist__arch{border-radius:var(--r-arch);aspect-ratio:2 / 3}
.home-artist__arch img{object-position:50% 30%}
/* the small second photo (at work) overlaps the portrait's lower right corner */
.home-artist__inset-wrap{position:absolute;right:0;bottom:64px;width:40%;z-index:2}
.home-artist__inset{aspect-ratio:3 / 5;border-radius:var(--r-l);box-shadow:0 0 0 6px var(--ink), var(--sh-card)}
.home-artist__inset img{object-position:50% 35%}
.home-artist__portrait .placard{margin-top:18px;text-align:center;text-transform:none}   /* name — title, as typed */
.home-artist__text{display:grid;gap:24px;justify-items:start}
.home-artist__text .h2{max-width:15ch}
.home-artist__text .lead{color:var(--bone)}
.home-artist__text p:not(.lead):not(.quote){color:var(--ash)}
.home-artist__quote{max-width:20ch;margin-block:8px;color:var(--bone);font-size:clamp(1.75rem,3.2vw,3.25rem)}
@media (min-width:900px){
  /* the text column is taller: the portrait keeps its own height and rides along while the story scrolls */
  .home-artist__portrait{grid-column:1 / 6;width:auto;max-width:none;margin:0;padding-right:16%;align-self:start;position:sticky;top:calc(var(--header-h) + 40px)}
  .home-artist__inset-wrap{right:-2%;bottom:15%;width:38%}
  .home-artist__portrait .placard{text-align:left}
  .home-artist__text{grid-column:7 / 13;align-self:center;gap:28px}
  .home-artist__quote{margin-block:24px}
}

/* ===== 23 · Home · styles index ======================================== */
.home-styles{padding-bottom:0}
.home-styles__head{row-gap:24px}
@media (min-width:900px){ .home-styles__head .h2{grid-column:1 / 10} .home-styles__head .lead{grid-column:1 / 7} }
.home-styles__head .lead{color:var(--ash)}
.home-styles__list{position:relative;z-index:6;margin-top:var(--s-8);border-bottom:1px solid var(--line)}
/* rows are links: a shorter wipe keeps them hit-testable sooner (clip-path clips hit areas) */
@media (prefers-reduced-motion:no-preference){ .js .home-style[data-reveal="wipe"].is-in:not(.reveal-done){transition-duration:700ms} }
.home-style{border-top:1px solid var(--line)}
.home-style__link{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;padding-block:20px}
.home-style__no{display:none}
.home-style__thumb{grid-column:1;grid-row:1 / 3;width:64px;height:80px;border-radius:var(--r-s);object-fit:cover;background:var(--exhibit)}
.home-style__name{grid-column:2;font:500 2rem/1 var(--font-sans);letter-spacing:-.03em;color:var(--bone);transition:transform 600ms var(--ease-expo),color var(--t-s)}
.home-style__desc{grid-column:2;margin-top:8px;font-size:var(--fs-small);line-height:1.55;color:var(--ash);max-width:40ch}
.home-style__go{display:none}
.home-style__go .icon{width:16px;height:16px}
@media (min-width:900px){
  .home-style__link{grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr) auto;column-gap:var(--col-gap);padding-block:28px}
  .home-style__no{display:block;transition:color var(--t-m) var(--ease-out);color:var(--dim)}
  .home-style__thumb{display:none}
  .home-style__name{grid-column:auto;font-size:var(--fs-index)}
  .home-style__desc{grid-column:auto;margin:0}
  .home-style__go{display:inline-flex;align-items:center;gap:8px;color:var(--brass-2);clip-path:inset(0 100% 0 0);transition:clip-path 600ms var(--ease-expo)}
  .home-style__link:hover .home-style__name,.home-style__link:focus-visible .home-style__name{transform:translateX(24px)}
  .home-style__link:hover .home-style__no,.home-style__link:focus-visible .home-style__no{color:var(--brass)}
  .home-style__link:hover .home-style__go,.home-style__link:focus-visible .home-style__go{clip-path:inset(0 0 0 0)}
}
/* floats ABOVE the list (z 7 > 6), offset beside the cursor so the hovered row stays readable */
.home-styles__preview{position:fixed;left:0;top:0;z-index:7;width:280px;height:350px;display:none;pointer-events:none;opacity:0;scale:.6;box-shadow:var(--sh-pop);transition:opacity 300ms var(--ease-out),scale 300ms var(--ease-out)}
.home-styles__preview.is-visible{opacity:1;scale:1;transition:opacity 400ms var(--ease-expo),scale 400ms var(--ease-expo)}
.home-styles__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--exhibit)} /* opaque: the art is transparent SVG, layers must never composite */
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .home-styles__preview{display:block} }
.home-styles .marquee{margin-top:var(--s-9);padding-block:24px;border-block:1px solid var(--line)}

/* ===== 24 · Home · works teaser ======================================== */
.home-works__head{row-gap:24px;margin-bottom:var(--s-8)}
.home-works__head .lead{color:var(--ash)}
@media (min-width:900px){ .home-works__head .h2{grid-column:1 / 9} .home-works__head .lead{grid-column:9 / 13;align-self:end} }
.home-works__track{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 24px;scroll-padding-inline:var(--gutter);scrollbar-width:none;
}
.home-works__track::-webkit-scrollbar{display:none}
.home-works__col{display:contents}
.home-work{flex:0 0 82vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;color:var(--bone)}
.home-work__cap{display:grid;gap:8px}
.home-work__title{transition:transform 600ms var(--ease-expo)}
@media (hover:hover) and (pointer:fine){ .home-work:hover .home-work__title{transform:translateX(8px)} }
.home-works__more{display:flex;justify-content:center;margin-top:var(--s-8)}
@media (min-width:600px){
  .home-works__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--col-gap);overflow:visible;margin-inline:0;padding:0}
  .home-work{flex:none}
}
@media (min-width:900px){
  .home-works__track{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .home-works__col{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
  .home-works__col:nth-child(2){margin-top:120px}
  .home-works__col:nth-child(3){margin-top:40px}
}

/* ===== 24b · Home · awards wall ========================================= */
/* Festival groups of plaques: big ordinal numerals in gold / silver / bronze (brass palette, see 21b), tilt +
   glare under the mouse, a single sheen sweep when each plaque arrives. */
.home-awards__grid{row-gap:56px}
.home-awards__head{display:grid;gap:22px;align-content:start;justify-items:start}
.home-awards__head .h2{font-size:clamp(2.25rem,4.6vw,5rem);max-width:13ch}
.home-awards__sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:none;font:600 var(--fs-micro)/1.4 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--brass-2)}
.home-awards__sum .sep{color:var(--dim)}
.home-awards__intro{color:var(--ash)}
.home-awards__wall{display:grid;gap:44px;align-content:start}
.aw-group__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.aw-group__fest{font:500 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--font-sans);letter-spacing:var(--ls-h3);color:var(--bone)}
.aw-group__meta{color:var(--dim)}
.aw-group__list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.plaque{position:relative}
.plaque__inner{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;height:100%;min-height:124px;padding:20px 22px 20px 20px;
  border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 0% 0%, rgba(184,146,90,.10), transparent 55%), linear-gradient(160deg,#1C1813 0%,#13110D 100%);
  transition:border-color 400ms var(--ease-out),box-shadow 400ms var(--ease-out);
}
@media (hover:hover){ .plaque__inner:hover{border-color:rgba(184,146,90,.5);box-shadow:0 24px 48px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(184,146,90,.18)} }
.plaque__num{display:block;min-width:1.12em;font:italic 400 clamp(3rem,2.4rem + 1.9vw,4.25rem)/.82 var(--font-serif);letter-spacing:-.03em;padding:.06em .08em .1em 0;color:var(--brass-2)}
.plaque__num .icon{width:.6em;height:.6em;stroke-width:1.2}
.plaque__suf{font-size:.4em;letter-spacing:0;margin-left:.06em;vertical-align:.95em}
.plaque__body{display:grid;gap:6px;min-width:0}
.plaque__place{color:var(--ash)}
.plaque__cat{font:600 1.03rem/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--bone);text-wrap:pretty}
.plaque__work{margin-top:4px;font-size:var(--fs-small);color:var(--brass-2)}
.plaque__mark{position:absolute;right:-18px;bottom:-22px;z-index:-1;width:110px;height:110px;color:rgba(237,230,216,.035);fill:none;stroke:currentColor;stroke-width:1;pointer-events:none}
.plaque--p1 .plaque__mark{color:rgba(221,186,126,.07)}
.plaque__inner::after{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;background:linear-gradient(105deg, transparent 35%, rgba(247,228,181,.14) 48%, rgba(247,228,181,.04) 54%, transparent 64%);transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){
  .plaque.is-in .plaque__inner::after{animation:plaque-sheen 1500ms var(--ease-out) calc(var(--d,0ms) + 450ms) 1 both}
}
@keyframes plaque-sheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.home-awards__foot{display:grid;gap:28px;align-content:start}
.home-awards__press{max-width:44ch;font-size:var(--fs-body);line-height:1.6;color:var(--ash)}
.home-awards__press .accent{color:var(--bone)}
.home-awards__photo{margin:0;max-width:420px}
.home-awards__media{aspect-ratio:4 / 5}
.home-awards__media img{object-position:50% 62%}
.home-awards__photo .placard{margin-top:14px;text-transform:none;letter-spacing:.02em;font-size:var(--fs-small);font-weight:500;line-height:1.5}
@media (min-width:600px){
  .aw-group__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-awards__foot{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end}
}
@media (min-width:900px){
  .home-awards__head{grid-column:1 / 6;grid-row:1}
  .home-awards__foot{grid-column:1 / 6;grid-row:2;align-self:start;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .home-awards__wall{grid-column:7 / 13;grid-row:1 / span 2}
}

/* ===== 25 · Home · process (needle path) =============================== */
.home-process__body{position:relative;margin-top:var(--s-8)}
.home-process__path{display:none;width:100%;height:auto;aspect-ratio:1200 / 160;overflow:visible;margin-bottom:24px}
.home-process__vpath{position:absolute;left:0;top:0;width:80px;height:100%;overflow:visible}
.home-process__base{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 6}
.home-process__ink{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.no-js .home-process__ink,.reveal-all .home-process__ink{stroke-dashoffset:0}
.home-process__ring{fill:var(--ink-2);stroke:var(--line-strong);stroke-width:1.5}
.home-process__dot{fill:var(--brass);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.home-process__node.is-active .home-process__dot{transform:scale(1);animation:node-pop 500ms var(--ease-back)}
@keyframes node-pop{0%{transform:scale(0)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
.home-process__needle line{stroke:var(--bone);stroke-width:1.5;stroke-linecap:round}
.home-process__needle circle{fill:var(--brass)}
.home-process__steps{display:grid;gap:24px;padding-left:72px}
.home-step{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-radius:var(--r-l);background:var(--ink-2);border:1px solid var(--line)}
.home-step__no{font-size:2.5rem;color:var(--dim);transition:color var(--t-l) var(--ease-out)}
.home-step.is-active .home-step__no{color:var(--brass)}
.home-step p{font-size:var(--fs-small);line-height:1.6;color:var(--ash)}
.home-step__chip{align-self:flex-start;margin-top:auto;height:32px;padding:0 14px;font-size:13px;color:var(--ash);border-color:var(--line-strong)}
@media (min-width:900px){
  .home-process__path{display:block}
  .home-process__vpath{display:none}
  .home-process__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);padding-left:0}
}

/* ===== 26 · Home · aftercare (the single bone section) ================= */
.home-care.section{padding-block:clamp(16px,3vw,48px)}
.home-hero + .section{padding-top:calc(var(--section-y) * .5)}
.home-care__panel{background:var(--bone);color:var(--ink);border-radius:var(--r-xl);margin-inline:clamp(8px,2vw,32px);padding:var(--section-y) var(--gutter);transform-origin:50% 0}
.home-care__inner{max-width:var(--container);margin-inline:auto}
.on-bone .rail__label,.on-bone .rail__meta{color:var(--umber)}
.on-bone .rail__line{background:rgba(11,10,9,.15)}
.on-bone .rail__index{color:var(--brass-deep)}
.on-bone .h2,.on-bone .h3{color:var(--ink)}
.home-care__lead{margin-top:24px;color:var(--umber)}
.home-care__grid{row-gap:56px;margin-top:var(--s-8)}
.home-care__timeline{position:relative;align-self:start} /* own height, so the rule ends at the last step */
.home-care__timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:rgba(11,10,9,.2)}
.home-care__step{position:relative;padding:0 0 32px 36px}
.home-care__step:last-child{padding-bottom:0}
.home-care__step:last-child::after{content:"";position:absolute;left:0;top:16px;bottom:-8px;width:11px;background:var(--bone)} /* the rule stops at the last dot */
.home-care__step::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--brass-deep);box-shadow:0 0 0 4px var(--bone)}
.home-care__when{margin-bottom:8px;font:600 var(--fs-micro)/1.4 var(--font-sans);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--brass-deep)}
.home-care__step p{color:var(--umber)}
.home-care__lists{display:grid;gap:48px}
.home-care__group .h3{margin-bottom:16px}
.home-care__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;padding-block:16px;border-top:1px solid rgba(11,10,9,.12);color:var(--ink)}
.home-care__list .icon{width:22px;height:22px;margin-top:2px;color:var(--brass-deep);stroke-width:1.8}
.home-care__group--avoid .icon{color:var(--umber)}
@media (min-width:900px){
  .home-care__timeline{grid-column:1 / 6;position:sticky;top:calc(var(--header-h) + 32px)}
  .home-care__lists{grid-column:7 / 13}
}

/* ===== 27 · Home · testimonials ======================================== */
.home-reviews__grid{row-gap:40px}
.home-reviews__title{font-size:var(--fs-h3);line-height:1.15;letter-spacing:var(--ls-h3);max-width:14ch}
.home-reviews__slides{display:grid;touch-action:pan-y}
.home-review{grid-area:1 / 1;display:flex;flex-direction:column;gap:28px}
/* JS hides inactive slides (hidden attr) and adds .is-ready; without JS every quote is listed */
.js:not(.reveal-all) .home-reviews:not(.is-ready) .home-review:not(:first-child){display:none}
.no-js .home-review,.reveal-all .home-reviews:not(.is-ready) .home-review{grid-area:auto}
.no-js .home-reviews__slides,.reveal-all .home-reviews:not(.is-ready) .home-reviews__slides{gap:56px}
:is(.no-js,.reveal-all:not(.is-booted)) .home-reviews__controls{display:none}
.home-review .quote{max-width:24ch;color:var(--bone)}
.home-review .quote::before{content:"\201C";display:block;height:.5em;margin-bottom:.1em;font-size:1.4em;line-height:1;color:var(--brass)}
.home-review__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.home-review__name{font-weight:600;color:var(--bone)}
.home-reviews__controls{display:flex;align-items:center;gap:12px;margin-top:40px}
.home-reviews__count{min-width:64px;text-align:center;color:var(--ash);font-variant-numeric:tabular-nums}
.home-reviews__track{position:relative;flex:1;min-width:40px;height:1px;margin-left:12px;background:var(--line)}
.home-reviews__bar{position:absolute;inset:0;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}
@media (min-width:900px){
  .home-reviews__title{grid-column:1 / 5;align-self:start}
  .home-reviews__carousel{grid-column:5 / 13}
}
@media (prefers-reduced-motion:no-preference){
  .js .home-reviews:not(.is-started) .home-review .w__i{transform:translate3d(0,105%,0)}
  .js .home-reviews:not(.is-started) .home-review__cap{clip-path:inset(0 100% 0 0)}
  .home-review.is-pre .w__i{transform:translate3d(0,105%,0)!important;transition:none!important}
  .home-review.is-pre .home-review__cap{clip-path:inset(0 100% 0 0);transition:none}
  .home-review.is-entering .w__i{transition:transform 900ms var(--ease-expo) calc(350ms + var(--wi,0) * 30ms)}
  .home-review.is-entering .home-review__cap{clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-quart) 500ms}
  .home-review.is-leaving .w__i{transform:translate3d(0,-105%,0);transition:transform 500ms var(--ease-in) calc(var(--wi,0) * 15ms)}
  .home-review.is-leaving .home-review__cap{opacity:0;transition:opacity 300ms var(--ease-out)}
}

/* ===== 28 · Home · FAQ ================================================= */
.home-faq__grid{row-gap:40px}
.home-faq__aside{display:grid;gap:24px;align-content:start;justify-items:start}
.home-faq__aside p{color:var(--ash)}
@media (min-width:900px){
  .home-faq__aside{grid-column:1 / 5;position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
  .home-faq__acc{grid-column:6 / 13}
}

/* ===== 29 · Home · contact + map ======================================= */
.home-contact__grid{row-gap:48px;margin-top:var(--s-8)}
.home-contact__details{display:grid;gap:36px;align-content:start}
.home-contact__addr{font:500 var(--fs-h3)/1.25 var(--font-sans);letter-spacing:var(--ls-h3);color:var(--bone)}
.home-contact__block{display:grid;gap:12px}
.home-contact__block .micro{margin-bottom:4px}
.home-contact__studio{text-transform:none;color:var(--ash)}   /* the studio's own name, as typed */
.home-contact__list{border-top:1px solid var(--line)}
.home-contact__row{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;gap:16px;min-height:60px;padding-block:8px;border-bottom:1px solid var(--line);color:var(--bone)}
.home-contact__row > .icon:first-child{color:var(--brass)}
.home-contact__txt{display:grid;gap:2px;min-width:0}
.home-contact__txt .micro{line-height:1.2}
.home-contact__v{overflow-wrap:anywhere;font-size:1.0625rem;transition:color var(--t-s)}
.home-contact__go{color:var(--dim);transition:color var(--t-s),translate 450ms var(--ease-expo)}
@media (hover:hover){ .home-contact__row:hover .home-contact__go{color:var(--brass-2);translate:2px -2px} .home-contact__row:hover .home-contact__v{color:var(--brass-2)} }
.home-contact__actions{display:flex;flex-wrap:wrap;gap:12px}
/* Stylized line map of Seattle between Puget Sound and Lake Washington (no street address: a private studio) */
.home-map{order:-1;margin:0;aspect-ratio:4 / 3;border:1px solid var(--line)}
.home-map__svg{width:100%;height:100%}
.home-map__water{fill:url(#map-water)}
.home-map__land{fill:#1A1612}
.home-map__canal{fill:none;stroke:#090807;stroke-width:7;stroke-linecap:round}
.home-map__shore{fill:none;stroke:#6E685E;stroke-width:1.5;stroke-linejoin:round}
.home-map__road{fill:none;stroke:rgba(184,146,90,.55);stroke-width:2;stroke-linecap:round}
.home-map__label{font:600 16px var(--font-sans);letter-spacing:.2em;fill:#8E877B}
.home-map__city{font:700 23px var(--font-sans);letter-spacing:.32em;fill:var(--bone)}
.home-map__compass circle{fill:rgba(11,10,9,.5);stroke:#6E685E;stroke-width:1}
.home-map__compass path{fill:var(--brass)}
.home-map__compass text{font:600 11px var(--font-sans);letter-spacing:.1em;fill:#A39C90}
.home-map__cap{position:absolute;left:16px;right:16px;bottom:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;color:var(--dim);pointer-events:none}
.home-map__coords{color:var(--ash);font-variant-numeric:tabular-nums}
.home-map__pulse{fill:none;stroke:var(--brass);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:map-pulse 2000ms var(--ease-out) infinite}
.home-map.is-paused .home-map__pulse{animation-play-state:paused}
@keyframes map-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-all) .home-map__svg:not(.is-in) .home-map__pin{opacity:0;translate:0 -80px}
  .js .home-map__svg.is-in:not(.reveal-done) .home-map__pin{transition:opacity 500ms var(--ease-out) calc(var(--d,0ms) + 900ms),translate 800ms var(--ease-back) calc(var(--d,0ms) + 900ms)}
  .js:not(.reveal-all) .home-map__svg:not(.is-in) .home-map__pulse{animation-play-state:paused;opacity:0}
}
@media (prefers-reduced-motion:reduce){ .home-map__pulse{animation:none;opacity:.35} }
@media (max-width:599px){ .home-map__label{font-size:23px;letter-spacing:.16em} .home-map__city{font-size:27px;letter-spacing:.24em} .home-map__compass{scale:1.35} }
@media (min-width:900px){
  .home-contact__details{grid-column:1 / 6}
  .home-map{grid-column:7 / 13;order:0;align-self:start}
}

/* ===== 30 · Reduced-motion safety for core components ================== */
@media (prefers-reduced-motion:reduce){
  /* the fill stays CLOSED (scaleY(0)); state feedback is a plain background swap */
  .btn__fill{transition:none!important;transform:scaleY(0)!important}
  .btn__text,.btn__icon{transition:none!important;transform:none!important;translate:none!important}
  .btn--solid:hover,.btn--solid:focus-visible{background:var(--brass-2);color:var(--ink)}
  .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--bone);color:var(--ink)}
  .home-process__node.is-active .home-process__dot{animation:none}
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i{animation:none}
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(1){transform:scaleY(.9)}
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){transform:scaleY(.5)}
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){transform:scaleY(1)}
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4){transform:scaleY(.65)}
  .badge-ring text,.cta-orb__ring{animation:none}
  .sms-pop__qr-wait{animation:none}
  .fab--sms{transition:none}
  .site-nav__link[aria-current="page"]::after{animation:none}
  .acc__panel,.acc__inner,.acc__icon{transition:none!important}
  .wm--fill{clip-path:none}
  .link::after{transition:none}
  .site-header{transition:background-color 300ms,border-color 300ms}
  .fab--top,.fab--top.is-shown{scale:1}
  .media img{transition:none}
}

/* ===== Home · item counts edited in the admin (index.php writes style="--stats:N" / "--steps:N") ===== */
.home-hero__stats{grid-template-columns:repeat(var(--stats,3),minmax(0,1fr))}
@media (min-width:900px){ .home-process__steps{grid-template-columns:repeat(var(--steps,4),minmax(0,1fr))} }
@media (min-width:900px) and (max-width:1199px){ .home-process__steps--dense .home-step{padding-inline:16px} }
.home-step__title{overflow-wrap:break-word}
/* the stats stay in the right column even when the scroll cue is left empty */
@media (min-width:1200px){ .home-hero__stats{grid-column:3} }

/* ===== Messaging (shared): the "Your messages" floating button =====
   (includes/partials/footer.php renders it only when this browser has a conversation; js/main.js fills the unread count) */
.fab--msg{
  position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;min-width:48px;max-width:48px;padding:0 13px;
  border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line-strong);color:var(--bone);overflow:hidden;white-space:nowrap;
  box-shadow:var(--sh-pop);transition:max-width 450ms var(--ease-expo),border-color var(--t-s),background-color var(--t-s);
}
.fab--msg .icon{width:20px;height:20px;color:var(--brass)}
.fab--msg .fab__label{color:var(--bone)}
.fab--msg.has-unread{border-color:var(--brass)}
.fab--msg:focus-visible{outline-color:var(--brass)}
.fab__badge{position:absolute;left:25px;top:6px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--brass);color:var(--ink);font:800 10px/1 var(--font-sans);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .fab--msg:hover,.fab--msg:focus-visible{max-width:240px;border-color:var(--brass);background:var(--ink-3)}
  .fab--msg:hover .fab__label,.fab--msg:focus-visible .fab__label{clip-path:inset(0)}
}
@media (prefers-reduced-motion:no-preference){
  .fab__badge.is-pop{animation:fab-badge-pop 700ms var(--ease-back)}
  .fab--msg.has-unread .icon{animation:fab-nudge 3.6s var(--ease-soft) 1.2s infinite}
}
@keyframes fab-badge-pop{0%{scale:0}60%{scale:1.3}100%{scale:1}}
@keyframes fab-nudge{0%,86%,100%{rotate:0deg}90%{rotate:-12deg}94%{rotate:10deg}97%{rotate:-4deg}}
@media (prefers-reduced-motion:reduce){ .fab--msg{transition:none} }
/* five pages in the desktop menu: a little tighter until there is room (and tighter still near 900px,
   so a long artist name in the logo keeps its room) */
@media (min-width:900px) and (max-width:1199px){
  .site-nav__list{gap:clamp(14px,4vw - 22px,22px)}
  .site-nav__link{letter-spacing:.12em}
}
/* no-JS phones: the page links wrap into a compact grid */
@media (max-width:899px){
  :is(.no-js,.reveal-all:not(.is-booted)) .site-nav__list{grid-template-columns:auto auto auto;column-gap:14px}
}
.home-contact__actions{display:flex;flex-wrap:wrap;gap:12px}