/* =====================================================================
   El Morado Jewelry. Tokens from the logo's pixels: lavender satin #CBC1F6, the diamond's gold #C5A16F, black lettering.
   Dark is the default category (deep morado, never black); light is the logo's lavender world. Both are finished.
   One bold thing: the ear map. Everything else stays calm.
   ===================================================================== */
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/libre-baskerville-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2")}

:root{
  color-scheme: dark;
  --lav:#CBC1F6; --lav-hi:#E4DEF9; --oro:#C9A46E; --oro-hi:#D8B57E; --morado:#1A1230; --noche:#110B21;
  --bg:#150E28; --surface:#1E1537; --ink:#F2EEFC; --muted:#BBB2D9; --line:#362B58; --field:#120C22;
  --accent:#CBC1F6; --gold-text:#D8B57E; --tile:#2B1E4A; --tile-ink:#CBC1F6; --tile-shade:#150E28;
  --dot:#C9A46E; --dot-num:#D8B57E; --press:#C9A46E; --press-ink:#150E28;
  --btn-bg:#CBC1F6; --btn-ink:#150E28; --btn-fill:#26193F; --btn-fill-ink:#CBC1F6; --btn-line:#CBC1F6;
  --ghost-ink:#F2EEFC; --ghost-line:rgba(242,238,252,.62); --ghost-fill:#F2EEFC; --ghost-fill-ink:#150E28;
  --skel1:#241A42; --skel2:#2F2454; --ring:rgba(203,193,246,.32); --danger:#FFB4C0; --footer:#110B21; --status-open:#D8B57E;
  /* the ground: hero, bands, footer, dashboard sidebar. Deep morado here, the logo's lavender in light mode. */
  --g-bg:#26193F; --g-ink:#F2EEFC; --g-muted:rgba(242,238,252,.8); --g-faint:rgba(242,238,252,.56); --g-line:rgba(203,193,246,.22); --g-hair:rgba(203,193,246,.4);
  --g-gold:#C9A46E; --g-gold-text:#D8B57E; --g-panel:#1E1537; --g-tile:rgba(203,193,246,.07); --g-tile-ink:#CBC1F6; --g-status:#D8B57E;
  --g-btn-bg:#CBC1F6; --g-btn-ink:#150E28; --g-btn-fill:#150E28; --g-btn-fill-ink:#CBC1F6; --g-ghost:rgba(242,238,252,.72); --g-ghost-fill:#F2EEFC; --g-ghost-fill-ink:#150E28;
  --display:"Libre Baskerville",Baskerville,Georgia,"Times New Roman",serif;
  --text:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --wrap:76rem; --gutter:clamp(1.25rem,4vw,3rem); --header-h:4.75rem;
  --r-sm:2px; --r-md:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F7F4FE; --surface:#FFFFFF; --ink:#1C1430; --muted:#564D6F; --line:#E1DAF3; --field:#FFFFFF;
  --accent:#5B3FA8; --gold-text:#7A5A22; --tile:#ECE6FC; --tile-ink:#3F2C7A; --tile-shade:#CBC1F6;
  --dot:#7E5F28; --dot-num:#7A5A22; --press:#C9A46E; --press-ink:#1C1430;
  --btn-bg:#1C1430; --btn-ink:#F7F4FE; --btn-fill:#5B3FA8; --btn-fill-ink:#FFFFFF; --btn-line:#1C1430;
  --ghost-ink:#1C1430; --ghost-line:rgba(28,20,48,.6); --ghost-fill:#1C1430; --ghost-fill-ink:#F7F4FE;
  --skel1:#ECE6FC; --skel2:#F7F4FE; --ring:rgba(91,63,168,.22); --danger:#B3261E; --footer:#BDB1EF; --status-open:#5B3FA8;
  --g-bg:#CBC1F6; --g-ink:#1C1430; --g-muted:rgba(28,20,48,.8); --g-faint:rgba(28,20,48,.72); --g-line:rgba(28,20,48,.16); --g-hair:rgba(28,20,48,.3);
  --g-gold:#7E5F28; --g-gold-text:#5E4416; --g-panel:#BDB1EF; --g-tile:rgba(255,255,255,.34); --g-tile-ink:#3F2C7A; --g-status:#1C1430;
  --g-btn-bg:#1C1430; --g-btn-ink:#F7F4FE; --g-btn-fill:#5B3FA8; --g-btn-fill-ink:#FFFFFF; --g-ghost:rgba(28,20,48,.72); --g-ghost-fill:#1C1430; --g-ghost-fill-ink:#F7F4FE;
}

@view-transition{ navigation:auto }

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
html.js body{opacity:0;animation:failsafe 0s 2.6s forwards}
html.js.is-ready body{opacity:1;transition:opacity .4s ease;animation:none}
@keyframes failsafe{to{opacity:1}}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lav);color:#150E28}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:120;border-radius:var(--r-sm)}
.skip:focus{top:1rem}
[hidden]{display:none !important}
html[data-lang="en"] [data-lang-block="es"],html[data-lang="es"] [data-lang-block="en"]{display:none}

/* ---------------------------------------------------------------- links */
.link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s,text-underline-offset .25s,color .25s}
@media (hover:hover){.link:hover{text-decoration-color:var(--accent);text-underline-offset:.34em;text-decoration-thickness:2px}}
.link:active{color:var(--gold-text)}

/* ---------------------------------------------------------------- buttons
   Hover: a second color wipes in from the left and the text flips. Press: the whole button flips to gold and sinks 1px.
   Squared corners, never pills. */
.btn{
  --b-bg:var(--btn-bg); --b-ink:var(--btn-ink); --b-fill:var(--btn-fill); --b-fill-ink:var(--btn-fill-ink); --b-line:var(--btn-line);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.1rem;padding:.75rem 1.6rem;border:1px solid var(--b-line);border-radius:var(--r-sm);
  background-color:var(--b-bg);color:var(--b-ink);font-weight:600;letter-spacing:.01em;line-height:1.2;text-decoration:none;cursor:pointer;
  background-image:linear-gradient(var(--b-fill),var(--b-fill));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .42s var(--ease),color .3s ease,border-color .3s ease,transform .12s ease,box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent;user-select:none}
.btn svg{width:1.15rem;height:1.15rem;flex:none}
@media (hover:hover){.btn:hover{background-size:100% 100%;color:var(--b-fill-ink);box-shadow:0 12px 26px -16px rgba(10,6,22,.7)}}
.btn:active{background-image:linear-gradient(var(--press),var(--press));background-size:100% 100%;color:var(--press-ink);border-color:var(--press);transform:translateY(1px) scale(.985);box-shadow:none;transition-duration:0s}
.btn-ghost{--b-bg:transparent;--b-ink:var(--ghost-ink);--b-fill:var(--ghost-fill);--b-fill-ink:var(--ghost-fill-ink);--b-line:var(--ghost-line)}
.btn-sm{min-height:2.5rem;padding:.45rem 1.05rem;font-size:.95rem}
.btn-block{width:100%}
.on-ground .btn,.over-hero .btn{--b-bg:var(--g-btn-bg);--b-ink:var(--g-btn-ink);--b-fill:var(--g-btn-fill);--b-fill-ink:var(--g-btn-fill-ink);--b-line:var(--g-btn-bg)}
.on-ground .btn-ghost,.over-hero .btn-ghost{--b-bg:transparent;--b-ink:var(--g-ink);--b-fill:var(--g-ghost-fill);--b-fill-ink:var(--g-ghost-fill-ink);--b-line:var(--g-ghost)}
.btn[disabled],.btn.is-busy{pointer-events:none;opacity:.85}
.btn .spin{display:none;width:1.05rem;height:1.05rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.text-btn{background:transparent;border:0;padding:.5rem;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.text-btn:active{color:var(--gold-text)}

/* ---------------------------------------------------------------- the mark and the lockup (the logo's real lettering, used as a mask so it takes any color) */
.mark{height:100%;width:auto;overflow:visible}
.word{display:block;background:currentColor;-webkit-mask:url("../img/wordmark.webp") center/contain no-repeat;mask:url("../img/wordmark.webp") center/contain no-repeat;aspect-ratio:663/354}
.word-caps{display:block;background:currentColor;-webkit-mask:url("../img/wordmark-caps.webp") left center/contain no-repeat;mask:url("../img/wordmark-caps.webp") left center/contain no-repeat;aspect-ratio:655/86}
.lockup{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.25rem)}
.lockup .mark{height:clamp(6.5rem,16vw,9rem);color:var(--g-gold)}
.lockup .word{width:clamp(11rem,30vw,16rem);color:var(--g-ink)}

/* ---------------------------------------------------------------- first-visit loader (Isidro's sequence, every site) */
.curtain{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:var(--g-bg);color:var(--g-ink);animation:curtainUp .9s cubic-bezier(.7,0,.2,1) 2.8s forwards}
html.show-loader .curtain{display:grid}
html.show-loader.is-loaded .curtain{animation:curtainUp .9s cubic-bezier(.7,0,.2,1) forwards}
.curtain-in{display:grid;justify-items:center;gap:1.3rem}
.curtain-seal{position:relative;width:min(10.5rem,40vw);aspect-ratio:1;display:grid;place-items:center}
.curtain-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.curtain-ring circle{fill:none;stroke:var(--g-gold);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:ringDraw 1.5s var(--ease) .15s forwards;transform:rotate(-90deg);transform-origin:center}
.curtain .mark{height:62%;color:var(--g-gold);opacity:0;transform:scale(.86);animation:markIn 1s cubic-bezier(.16,1,.3,1) .1s forwards}
.curtain .mark .mk-l{stroke-dasharray:1;stroke-dashoffset:1;animation:lineDraw 1.1s var(--ease) .2s forwards}
.curtain-name{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,6vw,2.3rem);letter-spacing:.7em;margin-right:-.7em;opacity:0;animation:nameIn 1s var(--ease) .35s forwards}
.curtain-line{width:7rem;height:1px;background:var(--g-gold);transform:scaleX(0);animation:lineIn .9s var(--ease) .6s forwards}
@keyframes curtainUp{to{transform:translateY(-101%);visibility:hidden}}
@keyframes markIn{to{opacity:1;transform:none}}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes lineDraw{to{stroke-dashoffset:0}}
@keyframes nameIn{to{opacity:1;letter-spacing:.18em;margin-right:-.18em}}
@keyframes lineIn{to{transform:scaleX(1)}}

/* ---------------------------------------------------------------- reveal system */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js .is-in .wipe,html.js .wipe.is-in{clip-path:inset(0)}
.rule{display:block;width:3.5rem;height:2px;background:var(--oro);transform-origin:left center}
html.js .rule{transform:scaleX(0);transition:transform .9s var(--ease) .2s}
html.js .is-in .rule,html.js .rule.is-in{transform:scaleX(1)}
.center .rule{margin-inline:auto;transform-origin:center}

/* ---------------------------------------------------------------- ribbon */
.ribbon{background:var(--noche);color:#E4DEF9;font-size:.85rem;line-height:1.4;text-align:center;padding:.5rem var(--gutter)}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.site-header.over-hero{background:color-mix(in srgb,var(--g-bg) 72%,transparent);border-color:transparent;color:var(--g-ink)}
.bar{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;color:inherit}
.wordmark .mark{height:2.35rem;color:var(--oro);flex:none}
.over-hero .wordmark .mark{color:var(--g-gold)}
.wordmark .word-caps{width:8.6rem}
.wordmark small{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);font-weight:600;align-self:flex-end;margin-bottom:.1rem}
.over-hero .wordmark small{color:var(--g-gold-text)}
.nav{display:flex;gap:1.6rem;margin-inline-start:auto}
.nav a{position:relative;text-decoration:none;padding:.5rem 0;white-space:nowrap;font-weight:500}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:active{color:var(--gold-text)}
.tools{display:flex;align-items:center;gap:.7rem}

.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid currentColor;border-radius:var(--r-sm);overflow:hidden;isolation:isolate}
.lang-thumb{position:absolute;z-index:-1;inset:0 50% 0 0;background:var(--ink);transition:transform .35s var(--ease)}
.over-hero .lang-thumb,.on-ground .lang-thumb{background:var(--g-ink)}
html[data-lang="en"] .lang-thumb{transform:translateX(100%)}
.lang button{background:transparent;border:0;padding:.38rem .7rem;min-width:2.7rem;min-height:2.3rem;font-size:.85rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--bg)}
.over-hero .lang button[aria-pressed="true"],.on-ground .lang button[aria-pressed="true"]{color:var(--g-bg)}
.lang button:active{color:var(--press)}

.icon-btn{display:grid;place-items:center;width:2.6rem;height:2.35rem;background:transparent;border:1px solid currentColor;border-radius:var(--r-sm);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.icon-btn svg{width:1.15rem;height:1.15rem;transition:transform .5s var(--ease)}
@media (hover:hover){.icon-btn:hover{background:var(--ink);color:var(--bg)}.icon-btn:hover svg{transform:rotate(35deg)}
  .over-hero .icon-btn:hover,.on-ground .icon-btn:hover{background:var(--g-ink);color:var(--g-bg)}}
.icon-btn:active{background:var(--press);border-color:var(--press);color:var(--press-ink);transform:scale(.94)}
.menu-btn{display:none}
@media (max-width:68rem){
  .nav,.header-cta{display:none}
  .wordmark .word-caps{width:7.4rem}.wordmark small{display:none}.wordmark .mark{height:2.1rem}
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;margin-inline-start:auto;min-height:2.5rem;padding:.35rem .9rem;background:transparent;border:1px solid currentColor;border-radius:var(--r-sm);cursor:pointer;font-weight:600;transition:background-color .25s,color .25s}
  .menu-btn:active{background:var(--press);border-color:var(--press);color:var(--press-ink)}
  .tools .icon-btn{display:none}
}
@media (max-width:26rem){.tools .lang{display:none}}
/* the header's call button: the number on wide screens, the phone icon alone where the bar gets tight (the number stays for screen readers) */
.header-cta{white-space:nowrap}
.tools .lang{flex:none}
@media (max-width:75rem){.header-cta{padding-inline:.75rem}.header-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* mobile menu */
dialog{border:0;padding:0;color:inherit;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:rgba(10,6,22,.72)}
.menu{width:100vw;height:100dvh;margin:0;background:var(--g-bg);color:var(--g-ink)}
.menu[open]{display:flex;flex-direction:column;animation:menuIn .45s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);padding-inline:var(--gutter)}
.menu-top .word-caps{width:7.4rem}
.menu-tools{display:flex;gap:.75rem;align-items:center}
.menu .icon-btn{display:grid}
.menu .text-btn{min-height:2.75rem;font-weight:600}
.menu-links{display:flex;flex-direction:column;padding:1.5rem var(--gutter);margin-block:auto;list-style:none}
.menu-links a{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,8vw,2.5rem);text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--g-line);opacity:0;transform:translateX(-14px);animation:linkIn .5s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
.menu-links a[aria-current="page"]{color:var(--g-gold-text)}
.menu-links a:active{color:var(--g-gold-text)}
@keyframes linkIn{to{opacity:1;transform:none}}
.menu-foot{display:grid;gap:.75rem;padding:0 var(--gutter) calc(2rem + env(safe-area-inset-bottom))}

/* ---------------------------------------------------------------- ground surfaces */
.ground{background:var(--g-bg);color:var(--g-ink)}
.ground .lede{color:var(--g-muted)}

/* home hero: a stacked headline over a band of what they carry */
.hero{margin-top:calc(var(--header-h) * -1);background:var(--g-bg);color:var(--g-ink);overflow:hidden}
.hero-in{position:relative;display:grid;gap:clamp(1rem,2.2vw,1.6rem);justify-items:start;padding-block:calc(var(--header-h) + clamp(2rem,6vw,4.75rem)) clamp(2rem,4vw,3rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-gold-text)}
.eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor}
/* the headline is a stack of short lines ("Aretes / para cada / piercing."): 5.2em is wider than the longest line and narrower than any two short words joined.
   The title box carries the size so the diamond can sit right after the text, in em, at every width. */
.hero-title{position:relative;font-size:clamp(2.45rem,6.2vw,5.4rem)}
.hero h1{font-size:1em;line-height:1.03;letter-spacing:-.02em;max-width:6.2em;white-space:pre-line}   /* "\n" in the headline = a new line; without one it wraps near 6 em */
.hero-sub{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--g-muted);max-width:50ch}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-mark{position:absolute;left:100%;top:50%;margin-left:.9em;height:3.9em;aspect-ratio:182/328;transform:translateY(-50%);color:var(--g-tile-ink);opacity:.3;pointer-events:none}
.hero-mark .mark{width:100%;height:100%;max-width:none;stroke-width:1.6}
:root[data-theme="light"] .hero-mark{opacity:.34}
@media (max-width:22.5rem){.hero-mark{margin-left:.55em;height:3.5em}}
@media (max-width:40rem){.hero-title{font-size:min(2.45rem,calc((100vw - 2 * var(--gutter)) / 9.3))}}   /* longest line (perforación, 6 em) + gap + diamond = 9.1 em must fit the phone */   /* the diamond shows on phones too, beside the stack; the smallest phones get it a little tighter */
html.js .hero .eyebrow,html.js .hero h1,html.js .hero .hero-sub,html.js .hero .actions,html.js .hero .band-row{opacity:0;transform:translateY(16px)}
html.is-ready .hero .eyebrow,html.is-ready .hero h1,html.is-ready .hero .hero-sub,html.is-ready .hero .actions,html.is-ready .hero .band-row{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--ease)}
html.is-ready .hero h1{transition-delay:.1s}html.is-ready .hero .hero-sub{transition-delay:.22s}html.is-ready .hero .actions{transition-delay:.34s}html.is-ready .hero .band-row{transition-delay:.46s}
html.show-loader .hero .eyebrow{transition-delay:1.05s}html.show-loader .hero h1{transition-delay:1.2s}html.show-loader .hero .hero-sub{transition-delay:1.32s}html.show-loader .hero .actions{transition-delay:1.44s}html.show-loader .hero .band-row{transition-delay:1.56s}
@media (max-width:60rem){.hero .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.hero .actions .btn{padding-inline:.8rem}}

.band-row{padding-bottom:clamp(2.25rem,5vw,3.5rem)}
.band-label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-faint);margin-bottom:.9rem}
.cat-band{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;list-style:none}
.cat-band:empty{display:none}
.cat{display:grid;gap:.15rem;text-decoration:none;color:inherit;padding:.75rem .75rem .9rem;background:var(--g-tile);border:1px solid var(--g-line);border-radius:var(--r-md);transition:border-color .3s,background-color .3s,transform .3s var(--ease)}
.cat-art{position:relative;display:grid;place-items:center;aspect-ratio:1.25;min-height:0;overflow:hidden;border-radius:var(--r-sm);color:var(--g-tile-ink)}
.cat-art svg{width:74%;height:auto;transition:transform .6s var(--ease)}
.cat-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}   /* a photo fills the tile; it never sets the tile's height */
.cat b{font-weight:600;font-size:.98rem;line-height:1.25}
.cat small{font-size:.85rem;color:var(--g-faint)}
@media (hover:hover){.cat:hover{border-color:var(--g-hair);transform:translateY(-3px)}.cat:hover .cat-art svg{transform:scale(1.06)}.cat:hover .cat-art img{transform:scale(1.05)}}
.cat:active{background:var(--press);border-color:var(--press);color:var(--press-ink)}.cat:active small,.cat:active .cat-art{color:var(--press-ink)}
@media (max-width:64rem){.cat-band{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:40rem){.cat-band{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.6rem;padding-bottom:.4rem;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .cat-band::-webkit-scrollbar{display:none}.cat-band li{flex:0 0 40%;scroll-snap-align:start}}

/* interior page hero: slim */
.page-hero{margin-top:calc(var(--header-h) * -1);background:var(--g-bg);color:var(--g-ink)}
.page-hero-in{display:grid;gap:.9rem;padding-block:calc(var(--header-h) + clamp(2rem,5vw,3.75rem)) clamp(2.25rem,5vw,3.75rem);max-width:54rem}
.crumbs{display:flex;flex-wrap:nowrap;gap:.5rem;font-size:.9rem;color:var(--g-muted);list-style:none;min-width:0}
.crumbs li{flex:none;white-space:nowrap}
.crumbs li[aria-current]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumbs li+li::before{content:"/";margin-inline-end:.5rem;opacity:.6}
.crumbs a{text-underline-offset:.2em}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,3.6rem);letter-spacing:-.015em}
.page-hero-slim .page-hero-in{padding-block:calc(var(--header-h) + clamp(1.5rem,3.5vw,2.5rem)) clamp(1.25rem,3vw,2rem)}
.page-hero p{font-size:1.15rem;color:var(--g-muted);max-width:56ch}

/* ---------------------------------------------------------------- sections */
.section{padding-block:clamp(4rem,8vw,7rem)}
.section-tight{padding-block:clamp(3rem,6vw,5rem)}
.surface{background:var(--surface)}
.section-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4.5vw,3.25rem);max-width:46rem}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
.section-head h2{font-size:clamp(1.85rem,3.6vw,2.8rem);letter-spacing:-.015em}
.lede{color:var(--muted);max-width:60ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:56rem){.split{grid-template-columns:1fr}}
.stick{position:sticky;top:calc(var(--header-h) + 2rem)}
@media (max-width:56rem){.stick{position:static}}
.prose{display:grid;gap:1.1rem;max-width:64ch}
.prose p{color:var(--ink)}
.case-foot{margin-top:clamp(2rem,4vw,3rem)}

/* ---------------------------------------------------------------- the ear map: the one bold thing */
.map-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
/* narrow: heading, then the ear, then the card right under it (so a tap shows its answer on the same screen), then the list */
@media (max-width:56rem){
  .map-grid{grid-template-columns:1fr;gap:0}
  .map-grid>div{display:contents}
  .map-grid .section-head{order:0}
  .map-grid .ear-fig{order:1;max-width:26rem;min-height:0;margin-bottom:1.25rem;aspect-ratio:340/332;overflow:hidden;overflow:clip}   /* the drawing ends at y 316 of 400: drop the empty bottom (clipped, so it cannot cover the card or widen the page) */
  .map-grid .ear-fig .ear{transform:translateX(4%)}   /* the drawing sits left in its box to leave room for labels on desktop; center it here */
  .map-grid .spot-card{order:2}
  .map-grid .spot-list{order:3}
}
@media (max-width:40rem){.map-grid .ear-fig{max-width:21rem}}
.ear-fig{margin:0;width:100%;max-width:33rem;justify-self:center;position:relative}
.ear{width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.ear-skin{fill:var(--tile)}
.ear-line{fill:none;stroke:var(--tile-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ear-soft{fill:none;stroke:var(--tile-ink);stroke-width:1.5;stroke-linecap:round;opacity:.5}
.ear-shade{fill:var(--tile-shade);opacity:.45}
.ear-canal{fill:var(--bg);stroke:var(--tile-ink);stroke-width:1.2}
.surface .ear-canal{fill:var(--surface)}
.ear-spot{cursor:pointer}
.ear-hit{fill:transparent}
.ear-dot{fill:var(--bg);stroke:var(--dot);stroke-width:2;transition:fill .3s}
.surface .ear-dot{fill:var(--surface)}
.ear-num{font:700 10px/1 var(--text);fill:var(--dot-num);text-anchor:middle;pointer-events:none;transition:fill .3s}
.ear-halo{fill:none;stroke:var(--dot);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset .8s var(--ease)}
.ear-tag{opacity:0;transition:opacity .3s ease .15s;pointer-events:none}
.ear-tag rect{fill:var(--ink)}
.ear-tag text{font:600 14px/1 var(--text);fill:var(--bg);text-anchor:middle}
.ear-spot.is-on .ear-dot{fill:var(--dot)}
.ear-spot.is-on .ear-num{fill:var(--bg)}
.ear-spot.is-on .ear-halo{stroke-dashoffset:0}
.ear-spot.is-on .ear-tag{opacity:1}
@media (hover:hover){.ear-spot:hover .ear-dot{fill:color-mix(in srgb,var(--dot) 30%,var(--bg))}.ear-spot.is-on:hover .ear-dot{fill:var(--dot)}}
.ear-spot:active .ear-dot{fill:var(--press)}
html.js .ear-fig.reveal .ear-spot .ear-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1),fill .3s;transition-delay:calc(var(--i) * 70ms + .3s)}
html.js .ear-fig.reveal.is-in .ear-spot .ear-dot{transform:none}

.spot-card{display:grid;gap:.6rem;padding:clamp(1.25rem,3vw,1.75rem);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--oro);border-radius:var(--r-md);min-height:13.5rem;align-content:start}
.surface .spot-card{background:var(--bg)}
.spot-head{display:flex;align-items:baseline;gap:.9rem}
.spot-num{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--gold-text);font-variant-numeric:tabular-nums}
.spot-card h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.spot-card p{color:var(--muted)}
.spot-fits{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:baseline}
.spot-fits span{font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spot-fits b{font-weight:600;color:var(--ink)}
.spot-card .link{justify-self:start;margin-top:.2rem}
html.js .spot-card.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.spot-list{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin-top:1.25rem}
.spot-list button{display:inline-flex;align-items:center;gap:.45rem;min-height:2.6rem;padding:.3rem .8rem .3rem .45rem;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-size:.92rem;transition:background-color .25s,border-color .25s,color .25s,transform .12s}
.spot-list button i{display:grid;place-items:center;width:1.55rem;height:1.55rem;border:1.5px solid var(--dot);border-radius:50%;font:700 .72rem/1 var(--text);font-style:normal;color:var(--dot-num)}
@media (hover:hover){.spot-list button:hover{border-color:var(--ink)}}
.spot-list button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.spot-list button[aria-pressed="true"] i{background:var(--dot);border-color:var(--dot);color:var(--bg)}
.spot-list button:active{background:var(--press);border-color:var(--press);color:var(--press-ink);transform:scale(.97)}

/* ---------------------------------------------------------------- pieces: the masonry wall (home) and the grid (collection) */
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2rem) clamp(1rem,2vw,1.75rem);align-items:stretch}
.wall-col{display:flex;flex-direction:column;gap:clamp(1.25rem,2.6vw,2rem)}
.wall-col>.piece:last-child{flex:1 0 auto;display:flex;flex-direction:column;gap:.65rem}
.wall-col>.piece:last-child .piece-art{flex:1 0 auto}
@media (max-width:40rem){.wall{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.85rem}}
.wall[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.wall[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem)}
@media (max-width:64rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:44rem){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.piece{display:grid;gap:.65rem;align-content:start;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.piece-art{--art-bg:var(--tile);position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--tile);color:var(--tile-ink);border-radius:var(--r-md);overflow:hidden}
.piece[data-shape="tall"] .piece-art{aspect-ratio:4/5}
.piece[data-shape="wide"] .piece-art{aspect-ratio:5/4}
.piece-art svg{width:62%;height:auto;transition:transform .7s var(--ease)}
.piece-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.piece-art::after{content:"";position:absolute;inset:.7rem;border:1px solid var(--oro);opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s var(--ease);pointer-events:none}
.piece-ask{position:absolute;left:0;right:0;bottom:0;padding:.6rem .9rem;background:var(--ink);color:var(--bg);font-size:.9rem;font-weight:600;text-align:center;transform:translateY(101%);transition:transform .4s var(--ease)}
@media (hover:hover){
  .piece:hover .piece-art svg{transform:scale(1.07)}.piece:hover .piece-art img{transform:scale(1.05)}
  .piece:hover .piece-art::after{opacity:.9;transform:none}
  .piece:hover .piece-ask{transform:none}
  .piece:hover .piece-name{text-decoration-color:var(--oro)}
}
.piece:focus-visible .piece-art::after{opacity:.9;transform:none}
.piece:active .piece-art{filter:brightness(1.1)}
.piece:active .piece-name{color:var(--gold-text)}
.piece-name{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .3s,color .2s}
.piece-meta{color:var(--muted);font-size:.92rem}
.badge{position:absolute;top:.6rem;left:.6rem;z-index:1;padding:.18rem .55rem;background:var(--oro);color:#150E28;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-sm)}

/* skeletons */
.skel{background:linear-gradient(100deg,var(--skel1) 40%,var(--skel2) 50%,var(--skel1) 60%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-sm)}
.skel-art{aspect-ratio:1}.skel-line{height:1rem;margin-top:.7rem;width:80%}.skel-line.short{width:45%}
@keyframes shimmer{to{background-position:-200% 0}}

/* filters */
.filters{display:grid;gap:1rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.6rem;padding:.35rem .95rem;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-weight:500;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.chip small{color:var(--muted);font-size:.8rem;transition:color .25s}
@media (hover:hover){.chip:hover{border-color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] small{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.chip:active{background:var(--press);border-color:var(--press);color:var(--press-ink);transform:scale(.97)}
.filter-row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:end;justify-content:space-between}
.filter-selects{display:flex;flex-wrap:wrap;gap:1rem}
.mini{display:grid;gap:.25rem;font-size:.9rem}
.mini select{min-height:2.6rem;padding:.3rem .7rem;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm)}
.count{color:var(--muted);font-size:.95rem}
.empty{display:grid;gap:.9rem;justify-items:start;padding:clamp(2rem,5vw,3.5rem);border:1px dashed var(--line);border-radius:var(--r-md)}
.empty h2,.empty h3,.empty h1{font-size:1.6rem}

/* note */
.note{display:grid;gap:.6rem;padding:clamp(1.25rem,3vw,2rem);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--oro);border-radius:var(--r-md)}
.surface .note{background:var(--bg)}
.note h3{font-size:1.35rem}

/* ---------------------------------------------------------------- the layaway band and the steps */
.band{background:var(--g-bg);color:var(--g-ink)}
.band .lede{color:var(--g-muted)}
.band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:56rem){.band-grid{grid-template-columns:1fr}}
.band h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.015em}
.band-copy{display:grid;gap:1.1rem;justify-items:start}
.steps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2rem);counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-content:start;padding-top:1.1rem;border-top:1px solid var(--g-line)}
.steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--g-gold)}
.steps h3{font-size:1.2rem}
.steps p{font-size:.98rem;color:var(--g-muted)}
@media (max-width:34rem){.steps{grid-template-columns:1fr}}
.ladder{list-style:none;display:grid;gap:0;counter-reset:step;max-width:44rem}
.ladder li{position:relative;counter-increment:step;display:grid;grid-template-columns:3.25rem 1fr;gap:.25rem 1.25rem;padding-bottom:clamp(1.75rem,4vw,2.5rem)}
.ladder li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1.5px solid var(--oro);border-radius:50%;font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--gold-text);background:var(--bg)}
.surface .ladder li::before{background:var(--surface)}
.ladder li::after{content:"";position:absolute;left:1.625rem;top:3.25rem;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.ladder li:last-child::after{display:none}
.ladder h3{font-size:1.35rem;align-self:end}
.ladder p{color:var(--muted)}
.dates{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;list-style:none;margin-top:.9rem;font-family:var(--display);font-size:1.18rem;line-height:1.4}
.dates li{display:inline-flex;align-items:center}
.dates li::before{content:"";flex:none;width:6px;height:6px;margin-right:.65rem;background:var(--gold-text);transform:rotate(45deg)}

/* ---------------------------------------------------------------- metals table */
.metals{width:100%;border-collapse:collapse;font-size:1rem}
.metals th,.metals td{text-align:start;vertical-align:top;padding:1.1rem 1rem;border-bottom:1px solid var(--line)}
.metals thead th{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-block:.6rem}
.metals tbody th{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.25;width:22%}
.metals tbody th::before{content:"";display:block;width:1.6rem;height:2px;background:var(--oro);margin-bottom:.6rem}
.metals td{color:var(--muted)}
@media (max-width:48rem){
  .metals thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .metals tr{display:grid;gap:.4rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
  .metals th,.metals td,.metals tbody th{display:block;padding:0;border:0;width:auto}
  .metals td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
  .metals td{color:var(--ink)}
}

/* ---------------------------------------------------------------- values and care lists */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);list-style:none}
.values li{display:grid;gap:.6rem;align-content:start;padding-top:1.1rem;border-top:2px solid var(--oro)}
.values h3{font-size:1.3rem}
.values p{color:var(--muted)}
@media (max-width:52rem){.values{grid-template-columns:1fr}}
.ticks{list-style:none;display:grid;gap:.9rem}
.ticks li{display:grid;grid-template-columns:1.4rem 1fr;gap:.75rem;align-items:start}
.ticks li::before{content:"";width:.6rem;height:.6rem;margin-top:.55rem;border:1.5px solid var(--oro);transform:rotate(45deg)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;min-height:3rem;cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.9vw,1.28rem);transition:color .25s,padding .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.85rem;height:.85rem;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.faq summary:hover{color:var(--gold-text);padding-inline-start:.5rem}}
.faq summary:active{color:var(--gold-text)}
.faq-a{padding:0 0 1.4rem;max-width:64ch;color:var(--muted)}
.faq details[open] .faq-a{animation:faqIn .45s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* closing call to action on the ground */
.cta{text-align:center;background:var(--g-bg);color:var(--g-ink)}
.cta-in{display:grid;justify-items:center;gap:1.3rem;padding-block:clamp(4rem,8vw,6.5rem)}
.cta-mark{height:clamp(4.5rem,9vw,6rem);color:var(--g-gold)}
.cta-mark .mark{height:100%}
.cta h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.015em}
.cta p{max-width:52ch;color:var(--g-muted)}
.cta .actions{justify-content:center}

/* visit */
.visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:56rem){.visit-grid{grid-template-columns:1fr}}
.facts{display:grid;gap:1.75rem}
.fact{display:grid;gap:.35rem}
.fact h3{font-family:var(--text);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.map-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:start;font-weight:400;padding:.42rem 0;border-bottom:1px solid var(--line)}
.hours td{text-align:end;font-variant-numeric:tabular-nums}
.hours tr.today th,.hours tr.today td{font-weight:600}
.hours tr.today th::after{content:"";display:inline-block;width:.42rem;height:.42rem;margin-inline-start:.5rem;border:1.5px solid var(--oro);transform:rotate(45deg) translateY(-2px)}
.status{font-weight:600}
.status-open{color:var(--status-open)}
.site-footer .status-open,.ground .status-open{color:var(--g-status)}

/* forms */
.form{display:grid;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2.25rem)}
.surface .form{background:var(--bg)}
/* how to reach the store: this site has no visitor forms, so each "ask us" spot is a card with the phone and two buttons */
.contact-card{display:grid;gap:1rem;align-content:start;background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--oro);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2.25rem)}
.surface .contact-card{background:var(--bg)}
.contact-card h2{font-size:1.65rem}
.contact-phone{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,3.6vw,1.9rem);font-variant-numeric:tabular-nums;line-height:1.2}
/* call + Instagram pairs: one line each, side by side when they fit, full width when they stack */
.contact-card .actions .btn,.piece-info .row-actions .btn,.prose .actions .btn{flex:1 1 auto;white-space:nowrap}
@media (max-width:22rem){.contact-card .actions .btn,.piece-info .row-actions .btn,.prose .actions .btn{white-space:normal}}
.form-head{display:grid;gap:.4rem}
.form-head h2,.form-head h3{font-size:1.55rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;min-height:3.1rem;padding:.7rem .85rem;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:6.5rem;resize:vertical}
@media (hover:hover){.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.field.bad input,.field.bad textarea{border-color:var(--danger)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:36rem){.two{grid-template-columns:1fr}}
.hint{color:var(--muted);font-size:.9rem}
.err{color:var(--danger);font-size:.92rem;min-height:1.3em}
.hp{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.done{display:grid;gap:.8rem;justify-items:start;padding:.5rem 0}
.done h3{font-size:1.6rem}
.check{width:3.4rem;height:3.4rem;color:var(--gold-text)}
.check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .7s var(--ease) forwards}
.check path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .45s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.demo-note{padding:.8rem 1rem;border:1px dashed var(--line);border-radius:var(--r-sm);font-size:.92rem;color:var(--muted)}

/* password field with an eye that shows what you typed (dashboard login, customer sign-in) */
.pw{position:relative}
.pw input{padding-inline-end:3.2rem}
.pw-eye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2.5rem;height:2.5rem;background:transparent;border:0;border-radius:var(--r-sm);color:var(--muted);cursor:pointer;transition:color .2s,background-color .2s}
.pw-eye svg{width:1.25rem;height:1.25rem}
.pw-eye .eye-off{display:none}
.pw-eye[aria-pressed="true"] .eye-on{display:none}.pw-eye[aria-pressed="true"] .eye-off{display:block}
@media (hover:hover){.pw-eye:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}}

/* piece page */
.piece-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:56rem){.piece-layout{grid-template-columns:1fr}}
.gallery{display:grid;gap:.75rem}
.gallery .piece-art{aspect-ratio:1}
.gallery .piece-art svg{width:56%}
.thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.thumbs button{width:4.5rem;height:4.5rem;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--tile)}
.thumbs button[aria-pressed="true"]{border-color:var(--oro);box-shadow:0 0 0 2px var(--oro)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.piece-info{display:grid;gap:1.4rem}
@media (min-width:56.01rem){.piece-layout .gallery{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
.share-row{margin-top:-.6rem}
.share-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0;background:none;border:0;color:var(--muted);font-weight:500;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.3em;text-decoration-thickness:1px}
.share-btn svg{width:1.1rem;height:1.1rem}
@media (hover:hover){.share-btn:hover{color:var(--ink);text-decoration-color:currentColor}}
.piece-info h1{font-size:clamp(1.9rem,3.8vw,2.7rem);letter-spacing:-.015em}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:start;padding:.55rem 0;border-bottom:1px solid var(--line);font-weight:400}
.spec th{color:var(--muted);width:40%}
.row-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.tag{display:inline-block;padding:.15rem .55rem;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.8rem;color:var(--muted)}

/* the flatback diagram (piercings page) */
.fb-fig{margin:0;padding:clamp(1rem,3vw,1.75rem);background:var(--tile);border-radius:var(--r-md);color:var(--tile-ink)}
.fb-fig svg{width:100%;height:auto;overflow:visible}
.fb-lead{fill:none;stroke:var(--dot);stroke-width:1.4}
.fb-dot{fill:var(--dot)}
.fb-label{font:600 15px/1 var(--text);fill:var(--ink);stroke:none;letter-spacing:.01em}
@media (max-width:40rem){.fb-label{font-size:19px}}

/* legal */
.legal-doc{max-width:46rem}
.legal-doc h2{font-size:1.45rem;margin-top:2.6rem;margin-bottom:.8rem}
.legal-doc h3{font-family:var(--text);font-weight:600;font-size:1.05rem;margin-top:1.4rem;margin-bottom:.4rem}
.legal-doc p,.legal-doc li{color:var(--ink);margin-bottom:.9rem}
.legal-doc ul{padding-inline-start:1.25rem;margin-bottom:1rem}
.legal-doc .meta{color:var(--muted);font-size:.95rem}
.legal-toc{list-style:none;display:grid;gap:.35rem;padding:1.25rem 1.5rem;margin:1.5rem 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.legal-toc li{margin:0}

/* footer */
.site-footer{background:var(--footer);color:var(--g-ink);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.foot-top{display:grid;justify-items:start;gap:1rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.foot-top .lockup .mark{height:clamp(5rem,12vw,6.5rem)}
.foot-top .lockup .word{width:clamp(9rem,26vw,12.5rem)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
@media (max-width:56rem){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:32rem){.foot-grid{grid-template-columns:1fr}}
.foot-col{display:grid;gap:.7rem;align-content:start}
.foot-col h2{font-family:var(--text);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-gold-text)}
.foot-col p{color:var(--g-muted)}
.foot-list{list-style:none;display:grid;gap:.45rem}
.site-footer a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0% 1px no-repeat;transition:background-size .35s var(--ease),color .25s;padding-bottom:1px}
@media (hover:hover){.site-footer a:hover{background-size:100% 1px}}
.site-footer a:active{color:var(--g-gold-text)}
.foot-legal{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--g-line);font-size:.875rem;color:var(--g-muted)}
.foot-legal .lang{border-color:var(--g-hair)}

/* mobile action bar */
.actionbar{display:none}
@media (max-width:48rem){
  .actionbar{position:fixed;inset-inline:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 30px -22px rgba(10,6,22,.7)}
  .actionbar a{display:grid;justify-items:center;gap:.15rem;padding:.55rem .25rem .5rem;min-height:3.4rem;text-decoration:none;font-size:.82rem;font-weight:600;border-inline-start:1px solid var(--line);transition:background-color .15s,color .15s}
  .actionbar a:first-child{border-inline-start:0}
  .actionbar a:active{background:var(--press);color:var(--press-ink)}
  .actionbar svg{width:1.25rem;height:1.25rem}
  .actionbar .primary{background:var(--btn-bg);color:var(--btn-ink)}
  body{padding-bottom:calc(3.7rem + env(safe-area-inset-bottom))}
}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom));z-index:150;transform:translate(-50%,1.5rem);opacity:0;padding:.7rem 1.1rem;background:var(--ink);color:var(--bg);border-radius:var(--r-sm);font-size:.95rem;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* 404 */
.nf{display:grid;justify-items:center;gap:1.4rem;text-align:center;padding-block:calc(var(--header-h) + clamp(3rem,10vw,7rem)) clamp(4rem,10vw,8rem)}
.nf h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.nf .mark{height:6rem;color:var(--g-gold)}

/* about */
.about-lockup{justify-self:start}
.about-lockup .mark{color:var(--oro)}
.about-lockup .word{color:var(--ink)}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;transition-delay:0s !important}
  html.js .reveal,html.js .wipe,html.js .rule,html.js .hero .eyebrow,html.js .hero h1,html.js .hero .hero-sub,html.js .hero .actions,html.js .hero .band-row{opacity:1;transform:none;clip-path:none}
  html.js .ear-fig.reveal .ear-spot .ear-dot{transform:none}
  .curtain{display:none !important}
}
@media print{.site-header,.actionbar,.ribbon,.curtain,.site-footer{display:none}body{opacity:1 !important}}

/* ---------------------------------------------------------------- customer accounts (only built when ACCOUNTS is on) */
.acc-wrap{max-width:34rem}
.acc-tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line)}
.acc-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.7rem .9rem;font-weight:600;cursor:pointer;color:var(--muted);transition:color .25s,border-color .25s}
.acc-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold-text)}
.acc-tabs button:active{color:var(--gold-text)}
.acc-head{display:grid;gap:.5rem;justify-items:start;margin-bottom:2rem}
.acc-head h2{font-size:2rem}
.acc-me h3{font-size:1.3rem;margin-bottom:.75rem}
.acc-reqs{list-style:none;display:grid;gap:.5rem}
.acc-reqs li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.acc-reqs em{font-style:normal;color:var(--gold-text);font-weight:600}

/* the phone bar's third slot shows Instagram or the question form, never both icons */
.actionbar [data-third] .i-chat,.actionbar [data-third][data-mode="ask"] .i-ig{display:none}
.actionbar [data-third][data-mode="ask"] .i-chat{display:block}