/* =============================================================================
   SALON ($SALON) — the most serious museum for the least serious art.
   Refined museum-editorial. The elegance is the joke's straight man.
   ========================================================================== */

:root{
  --wall:#5B1A22;        --wall-deep:#3A1016;   --wall-black:#210A0E;
  --black:#141013;       --cream:#EDE2C4;
  --gold:#C9A227;        --gold-hi:#E8C766;     --gold-lo:#9A7B1C;
  --brass:#B08D3C;       --verm:#B23A2E;
  --ink:#EDE2C4;         --muted:rgba(237,226,196,.60);   --faint:rgba(237,226,196,.40);
  --line:rgba(201,162,39,.22);
  --f-word:"Cinzel", Georgia, serif;
  --f-head:"Playfair Display", Georgia, serif;
  --f-crit:"Cormorant Garamond", Georgia, serif;
  --f-body:"EB Garamond", Georgia, serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; color:var(--ink); font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .3vw,1.16rem); line-height:1.7;
  background-color:var(--wall-black);
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(255,220,160,.10), transparent 55%),
    radial-gradient(160% 130% at 50% 30%, var(--wall) 0%, var(--wall-deep) 58%, var(--wall-black) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ /* plaster grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url("../assets/grain.png"); opacity:.5; mix-blend-mode:overlay;
}
body::after{ /* room vignette */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}
main{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:var(--gold-hi); text-decoration:none; }
a:hover{ color:var(--cream); }
:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.4rem); }
.section{ position:relative; z-index:1; padding-block:clamp(3.6rem,8vw,7.5rem); }
.center{ text-align:center; }
.narrow{ max-width:72ch; margin-inline:auto; }

/* ---- skip link ---- */
.skip{ position:absolute; left:-999px; top:0; background:var(--gold); color:#241a0f; padding:.6rem 1rem; z-index:100; font-family:var(--f-word); }
.skip:focus{ left:1rem; top:1rem; }

/* ---- eyebrows / headings ---- */
.eyebrow{
  font-family:var(--f-word); text-transform:uppercase; letter-spacing:.32em;
  font-size:.72rem; color:var(--brass); display:inline-flex; align-items:center; gap:.8rem; margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::after{ content:""; width:2.2rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
h1,h2,h3{ font-family:var(--f-head); font-weight:700; line-height:1.08; margin:0; color:var(--cream); }
.h-display{ font-size:clamp(2rem,1.3rem + 3.6vw,3.5rem); letter-spacing:.005em; }
.lede{ font-family:var(--f-crit); font-style:italic; font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); color:rgba(237,226,196,.86); line-height:1.5; }
p{ margin:0 0 1.1rem; }
p.body-muted{ color:var(--muted); }

/* ---- ornament divider ---- */
.ornament{ display:flex; align-items:center; justify-content:center; gap:1.1rem; color:var(--gold); margin:0 auto; }
.ornament::before,.ornament::after{ content:""; height:1px; width:min(140px,24vw); }
.ornament::before{ background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.ornament b{ font-size:.7rem; letter-spacing:.2em; color:var(--gold-hi); }

/* =========================== NAV =========================== */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  background:linear-gradient(180deg, rgba(19,12,14,.86), rgba(19,12,14,.42));
  border-bottom:1px solid var(--line);
}
.nav-inner{ max-width:var(--wrap); margin-inline:auto; padding:.75rem clamp(1.1rem,4vw,2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ font-family:var(--f-word); font-weight:700; letter-spacing:.24em; font-size:1.12rem; color:var(--cream); text-transform:uppercase; }
.brand:hover{ color:var(--gold-hi); }
.brand .tick{ color:var(--gold); font-size:.66em; vertical-align:.28em; margin-left:.15em; letter-spacing:.05em; }
.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); }
.nav-links a{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem;
  color:var(--muted); position:relative; padding:.3rem 0; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--cream); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold-hi); transition:width .3s ease; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ margin-left:.4rem; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:5px; padding:.5rem .6rem; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--cream); margin:4px 0; transition:.3s; }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:.2rem;
    padding:1rem clamp(1.1rem,4vw,2.4rem) 1.4rem; background:rgba(15,9,11,.98); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .35s ease, opacity .25s ease;
  }
  .nav.nav-open .nav-links{ max-height:24rem; opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:.9rem; padding:.7rem 0; width:100%; }
  .nav-cta{ margin:.6rem 0 0; }
}

/* =========================== BUTTONS =========================== */
.btn{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.13em; font-size:.78rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  padding:.85em 1.7em; border-radius:5px; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:active{ transform:translateY(1px); }
.btn-gold{ color:#2a2012; border-color:#7a5f16;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 52%,var(--gold-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(0,0,0,.38); }
.btn-gold:hover{ color:#221a0e; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 26px rgba(0,0,0,.45); transform:translateY(-2px); }
.btn-ghost{ color:var(--cream); border-color:rgba(201,162,39,.5); background:rgba(20,16,19,.25); }
.btn-ghost:hover{ border-color:var(--gold-hi); background:rgba(201,162,39,.10); color:var(--gold-hi); }
.btn-lg{ padding:1.05em 2.1em; font-size:.84rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; }
.center .btn-row{ justify-content:center; }

/* =========================== HERO =========================== */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,8vw,6rem); }
.hero::before{ content:""; position:absolute; inset:-5% 0 auto; height:70%;
  background:url("../assets/spotlight.png") center top / clamp(700px,120%,1600px) auto no-repeat;
  opacity:.6; mix-blend-mode:screen; pointer-events:none; z-index:0; animation:lightsOn 1.7s ease both; }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)); pointer-events:none; z-index:0; }
@keyframes lightsOn{ from{opacity:0} to{opacity:.6} }
@media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; opacity:.6; } }

.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero-word{ font-family:var(--f-word); font-weight:700; color:var(--cream);
  font-size:clamp(3.6rem,2rem + 9vw,7rem); letter-spacing:.045em; line-height:.92; margin:.4rem 0 .2rem;
  text-shadow:0 2px 0 rgba(0,0,0,.25), 0 14px 40px rgba(0,0,0,.35); }
.hero-rule{ width:min(360px,60%); height:1px; margin:.9rem 0 1.2rem; background:linear-gradient(90deg,var(--gold),transparent); }
.hero-tag{ font-family:var(--f-crit); font-style:italic; color:var(--gold-hi); font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); margin:0 0 1rem; }
.hero-lore{ color:rgba(237,226,196,.82); max-width:46ch; margin:0 0 1.6rem; }

.hero-art{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero-art .piece{ width:min(340px,84%); }
.pedestal{ width:min(420px,92%); height:26px; margin-top:-2px;
  background:
    linear-gradient(180deg, rgba(237,226,196,.14), rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px);
  border-top:1px solid rgba(237,226,196,.18);
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%); filter:blur(.2px); opacity:.85;
}
.rope{ width:min(440px,96%); margin-top:.4rem; color:var(--verm); }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:2.5rem; }
  .hero-art{ order:-1; }
  .hero-rule{ margin-inline:auto; }
  .hero-lore{ margin-inline:auto; }
  .hero .btn-row{ justify-content:center; }
  .hero .countdown-wrap,.hero .ca-wrap{ justify-content:center; align-items:center; }
}

/* =========================== COUNTDOWN =========================== */
.countdown-wrap{ display:flex; flex-direction:column; gap:.55rem; margin:.4rem 0 1.4rem; }
.countdown-lab{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--muted); }
.countdown-lab b{ color:var(--gold-hi); font-weight:400; }
.countdown{ display:inline-flex; gap:.55rem; }
.cd-cell{ min-width:62px; padding:.5rem .35rem .42rem; text-align:center; border-radius:5px; border:1px solid #6e5410;
  background:linear-gradient(160deg,#d3b458,#9a7a2b 70%,#7d6122);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.34); }
.cd-num{ font-family:var(--f-word); font-weight:700; font-size:1.5rem; line-height:1; color:#221a0c; }
.cd-lab{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.14em; font-size:.52rem; margin-top:.28rem; color:#4a3814; }
.countdown.is-open .cd-cell{ background:linear-gradient(160deg,#e7c766,#c9a227 70%,#9a7b1c); }

/* =========================== CONTRACT BAR =========================== */
.ca-wrap{ display:flex; flex-direction:column; gap:.4rem; }
.ca-cap{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.2em; font-size:.6rem; color:var(--muted); }
.ca-bar{ display:inline-flex; align-items:center; gap:.6rem; max-width:100%;
  font-family:var(--f-mono); font-size:.82rem; padding:.55rem .6rem .55rem .8rem;
  background:rgba(15,10,12,.6); border:1px solid rgba(176,141,60,.55); border-radius:7px; }
.ca-bar .ca{ color:var(--gold-hi); word-break:break-all; overflow-wrap:anywhere; }
.ca-copy{ flex:none; font-family:var(--f-word); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem;
  color:#2a2012; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)); border:1px solid #6e5410;
  border-radius:4px; padding:.42rem .7rem; cursor:pointer; transition:filter .2s ease; }
.ca-copy:hover{ filter:brightness(1.08); }
.ca-copy.copied{ background:linear-gradient(180deg,#bfe0a0,#7fae72); }

/* =========================== ARTWORK (frame + painting) =========================== */
.artwork{ position:relative; aspect-ratio:748 / 948; width:100%;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.artwork .spot{ position:absolute; left:50%; top:-16%; width:126%; height:64%; transform:translateX(-50%);
  background:radial-gradient(58% 100% at 50% 0%, rgba(255,224,168,.34), rgba(255,224,168,0) 72%);
  filter:blur(6px); pointer-events:none; opacity:.85; z-index:0; }
.artwork .painting{ position:absolute; left:9.9%; right:9.9%; top:7.8%; bottom:7.8%; overflow:hidden; background:#0b0809; z-index:1; }
.artwork .paint-el{ width:100%; height:100%; object-fit:cover; display:block; }
.artwork .frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; user-select:none; }
.artwork .acq-dot{ position:absolute; top:10.5%; right:12%; width:15px; height:15px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 34% 30%, #e5715f, #97201a);
  box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.5); }
.artwork:hover{ transform:translateY(-8px); filter:drop-shadow(0 36px 46px rgba(0,0,0,.6)); }

/* placard */
.placard{ position:relative; border-radius:5px; padding:.95rem 1.1rem 1.05rem; color:#241a0c;
  background:linear-gradient(158deg,#ddc06e 0%,#c3a24d 24%,#a9852f 58%,#8f6f26 100%);
  border:1px solid #6a5010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 7px rgba(0,0,0,.32), 0 10px 22px rgba(0,0,0,.4);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(60,44,14,.55) 1.4px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(60,44,14,.55) 1.4px, transparent 2.2px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(60,44,14,.55) 1.4px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(60,44,14,.55) 1.4px, transparent 2.2px),
    linear-gradient(158deg,#ddc06e 0%,#c3a24d 24%,#a9852f 58%,#8f6f26 100%);
}
.placard::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(52,38,12,.4); border-radius:3px; pointer-events:none; }
.placard-title{ font-family:var(--f-word); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:.92rem; line-height:1.2; color:#241a0a; margin:0 0 .25rem; }
.placard-meta{ font-family:var(--f-body); font-style:italic; font-size:.8rem; color:#4a3714; margin:0 0 .5rem; }
.placard-crit{ font-family:var(--f-crit); font-style:italic; font-size:1.02rem; line-height:1.34; color:#2c2010; margin:0 0 .55rem; }
.placard-rate{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem; }
.placard-rate .stars{ color:#6e5410; letter-spacing:.08em; font-size:.95rem; }
.placard-rate .verdict{ font-family:var(--f-crit); font-style:italic; font-size:.9rem; color:#4a3714; }

/* piece = artwork + placard */
.piece{ margin:0; display:flex; flex-direction:column; align-items:center; }
.piece .placard{ width:88%; margin-top:1.1rem; }

/* gallery wall */
.gallery-wall{ display:grid; gap:clamp(2.2rem,4vw,3.6rem) clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fill, minmax(clamp(210px,25vw,290px),1fr)); align-items:start; }

/* =========================== TRIPTYCH (how it works) =========================== */
.triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); }
@media (max-width:820px){ .triptych{ grid-template-columns:1fr; } }
.panel{ position:relative; padding:clamp(1.5rem,3vw,2.1rem); border-radius:9px;
  background:linear-gradient(180deg, rgba(20,13,15,.55), rgba(20,13,15,.22));
  border:1px solid var(--line); }
.panel .roman{ font-family:var(--f-word); color:var(--gold-hi); letter-spacing:.18em; font-size:.9rem; }
.panel h3{ font-family:var(--f-head); font-size:1.4rem; margin:.55rem 0 .55rem; color:var(--cream); }
.panel p{ color:var(--muted); font-size:1rem; margin:0; }

/* wide lore panel */
.lore-panel{ position:relative; border-radius:12px; padding:clamp(2rem,5vw,3.6rem);
  background:linear-gradient(180deg, rgba(12,8,10,.6), rgba(20,13,15,.32));
  border:1px solid var(--line); overflow:hidden; }
.lore-panel::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.quote{ font-family:var(--f-crit); font-style:italic; font-size:clamp(1.35rem,1.05rem + 1.4vw,2rem); line-height:1.42; color:rgba(237,226,196,.9); }
.quote .drop{ color:var(--gold-hi); }
.attn{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--brass); margin-top:1.4rem; }

/* =========================== STATS + LEDGER =========================== */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.1rem; }
.stat{ border:1px solid var(--line); border-radius:9px; padding:1.2rem 1.3rem; background:rgba(18,11,13,.4); }
.stat .k{ font-family:var(--f-word); font-weight:700; font-size:1.85rem; color:var(--cream); line-height:1; }
.stat .l{ font-size:.82rem; color:var(--muted); letter-spacing:.04em; margin-top:.4rem; }

.ledger-wrap{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(14,9,11,.4); }
.ledger{ width:100%; border-collapse:collapse; font-family:var(--f-body); }
.ledger caption{ text-align:left; font-family:var(--f-word); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--gold-hi); padding:1rem 1.2rem .2rem; }
.ledger th,.ledger td{ text-align:left; padding:.85rem 1.2rem; border-bottom:1px solid rgba(201,162,39,.14); vertical-align:top; }
.ledger thead th{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.13em; font-size:.66rem; color:var(--brass); }
.ledger tbody tr:last-child td{ border-bottom:none; }
.ledger td.amt{ font-family:var(--f-mono); color:var(--gold-hi); white-space:nowrap; }
.ledger td .sub{ display:block; color:var(--muted); font-size:.9rem; margin-top:.15rem; }

/* =========================== PROSE / CATALOGUE =========================== */
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); margin:2.4rem 0 .8rem; }
.prose h3{ font-family:var(--f-head); font-size:1.3rem; margin:1.8rem 0 .5rem; color:var(--cream); }
.prose p{ color:rgba(237,226,196,.82); }
.prose a{ text-decoration:underline; text-decoration-color:rgba(201,162,39,.5); text-underline-offset:3px; }
.steps{ counter-reset:step; list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:1.05rem; }
.steps li{ position:relative; padding-left:3.2rem; color:rgba(237,226,196,.84); }
.steps li strong{ color:var(--cream); font-weight:600; }
.steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-.15rem;
  width:2.2rem; height:2.2rem; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%;
  font-family:var(--f-word); font-weight:700; font-size:.9rem; color:var(--gold-hi); }
.glossary{ display:grid; gap:.1rem; margin-top:1rem; }
.glossary dt{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--gold-hi); margin-top:1.1rem; }
.glossary dd{ margin:.25rem 0 0; color:var(--muted); }

/* =========================== FAQ (Docent) =========================== */
.faq{ max-width:76ch; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; position:relative; padding:1.15rem 2.2rem 1.15rem 0;
  font-family:var(--f-head); font-size:1.16rem; color:var(--cream); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:1.05rem; font-family:var(--f-word); color:var(--gold-hi); font-size:1.3rem; transition:transform .25s ease; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details[open] summary{ color:var(--gold-hi); }
.faq .ans{ padding:0 0 1.3rem; color:rgba(237,226,196,.8); max-width:70ch; }
.faq .ans p{ margin:0 0 .8rem; }

/* =========================== CTA BAND =========================== */
.cta-band{ position:relative; overflow:hidden; text-align:center; border-radius:14px;
  padding:clamp(2.4rem,6vw,4.2rem) clamp(1.2rem,4vw,3rem);
  background:linear-gradient(180deg, rgba(12,8,10,.55), rgba(30,10,14,.4)); border:1px solid var(--line); }
.cta-band::before{ content:""; position:absolute; left:50%; top:-40%; width:80%; height:120%; transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 30%, rgba(255,220,160,.16), transparent 70%); pointer-events:none; }

/* =========================== FOOTER =========================== */
.footer{ position:relative; z-index:1; border-top:1px solid var(--line); background:rgba(9,6,7,.55); margin-top:2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-block:clamp(2.4rem,5vw,3.6rem); }
.footer .brand{ font-size:1.2rem; }
.footer-tag{ font-family:var(--f-crit); font-style:italic; color:var(--gold-hi); margin:.6rem 0 1rem; }
.foot-col h4{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--brass); margin:0 0 .9rem; }
.foot-col a{ display:block; color:var(--muted); padding:.28rem 0; font-size:.95rem; }
.foot-col a:hover{ color:var(--cream); }
.socials{ display:flex; gap:.7rem; margin-top:.4rem; }
.socials a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.socials a:hover{ border-color:var(--gold-hi); color:var(--gold-hi); }
.footer-base{ border-top:1px solid var(--line); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; justify-content:space-between; }
.disclaimer{ font-size:.8rem; color:var(--faint); max-width:70ch; line-height:1.55; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:1.6rem; } }

/* =========================== REVEAL =========================== */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){ .reveal,.reveal.in{ opacity:1; transform:none; transition:none; } }

/* =========================== ATELIER (commission) =========================== */
.atelier{ max-width:880px; margin-inline:auto; }
.atelier-panel{ border:1px solid var(--line); border-radius:13px; padding:clamp(1.4rem,3vw,2.1rem);
  background:linear-gradient(180deg, rgba(12,8,10,.6), rgba(20,13,15,.3)); position:relative; overflow:hidden; }
.atelier-panel::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.atelier label{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--brass); display:block; margin-bottom:.7rem; }
.atelier textarea{ width:100%; min-height:98px; resize:vertical; color:var(--cream);
  background:rgba(10,7,9,.5); border:1px solid rgba(201,162,39,.28); border-radius:9px; padding:.9rem 1.05rem;
  font-family:var(--f-crit); font-style:italic; font-size:1.2rem; line-height:1.45; }
.atelier textarea::placeholder{ color:rgba(237,226,196,.38); }
.atelier textarea:focus{ outline:none; border-color:var(--gold-hi); box-shadow:0 0 0 3px rgba(201,162,39,.14); }
.atelier-actions{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; margin-top:1.05rem; }
.atelier-hint{ font-size:.8rem; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.chips .lab{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; color:var(--faint); align-self:center; margin-right:.2rem; }
.chip{ font-family:var(--f-crit); font-style:italic; font-size:.98rem; color:var(--gold-hi);
  background:rgba(201,162,39,.08); border:1px solid var(--line); border-radius:999px; padding:.35rem .95rem; cursor:pointer; transition:.2s; }
.chip:hover{ border-color:var(--gold-hi); background:rgba(201,162,39,.16); }
.atelier-status{ min-height:1.4rem; margin:1.4rem 0 0; font-family:var(--f-crit); font-style:italic; color:var(--gold-hi); font-size:1.02rem; }
.empty-note{ text-align:center; color:var(--muted); font-family:var(--f-crit); font-style:italic; font-size:1.18rem;
  padding:2.4rem 1rem; border:1px dashed var(--line); border-radius:13px; }

/* =========================== NAV TOOLS (socials · copy CA · buy) =========================== */
.nav-tools{ display:flex; align-items:center; gap:.55rem; margin-left:.4rem; padding-left:.9rem; border-left:1px solid var(--line); }
.nav-ico{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--muted); transition:.2s; }
.nav-ico:hover{ border-color:var(--gold-hi); color:var(--gold-hi); background:rgba(201,162,39,.08); }
.nav-ca{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; user-select:none; -webkit-appearance:none; appearance:none; line-height:1;
  font-family:var(--f-mono); font-size:.72rem; color:var(--gold-hi);
  background:rgba(15,10,12,.55); border:1px solid rgba(176,141,60,.5); border-radius:8px; padding:.36rem .55rem; transition:.2s; }
.nav-ca:hover{ border-color:var(--gold-hi); background:rgba(201,162,39,.08); }
.nav-ca.copied{ border-color:#8fbf72; color:#bfe0a0; }
.nav-ca-dot{ width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e5715f,#97201a); box-shadow:0 0 0 2px rgba(255,255,255,.08); flex:none; }
.nav-ca-val{ max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-ca svg{ opacity:.7; flex:none; }
.nav-tools .nav-cta{ margin-left:.15rem; }
@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:.15rem;
    padding:1rem clamp(1.1rem,4vw,2.4rem) 1.4rem; background:rgba(15,9,11,.98); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .35s ease, opacity .25s ease;
  }
  .nav.nav-open .nav-links{ max-height:34rem; opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:.92rem; padding:.7rem 0; width:100%; }
  .nav-tools{ margin:.7rem 0 0; padding:.9rem 0 0; border-left:0; border-top:1px solid var(--line); width:100%; flex-wrap:wrap; gap:.6rem; }
  .nav-tools .nav-ca{ font-size:.8rem; }
  .nav-ca-val{ max-width:16ch; }
  .nav-tools .nav-cta{ margin-left:auto; }
}

/* =========================== CREST / SEAL =========================== */
.crest{ display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; color:var(--gold); }
.crest svg{ flex:none; }
.crest .crest-txt{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.24em; font-size:.6rem; color:var(--brass); line-height:1.5; }

/* gold corner flourishes on panels */
.framed{ position:relative; }
.framed::before,.framed::after{ content:""; position:absolute; width:26px; height:26px; pointer-events:none; opacity:.75; }
.framed::before{ left:12px; top:12px; border-left:1px solid var(--gold); border-top:1px solid var(--gold); }
.framed::after{ right:12px; bottom:12px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); }

/* drop cap */
.dropcap::first-letter{ font-family:var(--f-word); font-weight:700; float:left; font-size:3.4em; line-height:.78; padding:.05em .12em 0 0; color:var(--gold-hi); }

/* =========================== THE LONG GALLERY (corridor marquee) =========================== */
.corridor{ position:relative; overflow:hidden; padding-block:clamp(2rem,4vw,3rem); }
.corridor::before,.corridor::after{ content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.corridor::before{ left:0; background:linear-gradient(90deg, var(--wall-deep), transparent); }
.corridor::after{ right:0; background:linear-gradient(270deg, var(--wall-deep), transparent); }
.corridor-track{ display:flex; gap:clamp(1.4rem,3vw,2.4rem); width:max-content; animation:slide 46s linear infinite; }
.corridor:hover .corridor-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .corridor-track{ animation:none; } }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.corridor .mini{ width:clamp(160px,20vw,210px); flex:none; }
.corridor .mini .artwork{ width:100%; }
.corridor .mini .cap{ margin-top:.7rem; text-align:center; }
.corridor .mini .cap b{ display:block; font-family:var(--f-word); text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; color:var(--cream); line-height:1.25; }
.corridor .mini .cap span{ font-family:var(--f-crit); font-style:italic; font-size:.82rem; color:var(--gold-hi); }

/* =========================== DASHBOARD (The Registry) =========================== */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.metric{ position:relative; border:1px solid var(--line); border-radius:11px; padding:1.3rem 1.35rem;
  background:linear-gradient(180deg, rgba(18,11,13,.5), rgba(20,13,15,.28)); overflow:hidden; }
.metric::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--gold-hi),transparent); }
.metric .mlabel{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.15em; font-size:.62rem; color:var(--brass); }
.metric .mval{ font-family:var(--f-word); font-weight:700; font-size:2rem; color:var(--cream); line-height:1; margin:.5rem 0 .25rem; }
.metric .msub{ font-family:var(--f-crit); font-style:italic; font-size:.92rem; color:var(--muted); }

.dash-two{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.4rem,3vw,2.2rem); align-items:start; }
@media (max-width:900px){ .dash-two{ grid-template-columns:1fr; } }

.motd{ border:1px solid var(--line); border-radius:13px; padding:clamp(1.4rem,3vw,2rem);
  background:linear-gradient(180deg, rgba(12,8,10,.6), rgba(30,10,14,.32)); position:relative; overflow:hidden; }
.motd::before{ content:""; position:absolute; left:50%; top:-30%; width:70%; height:90%; transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 30%, rgba(255,220,160,.14), transparent 70%); pointer-events:none; }
.motd-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2rem); align-items:center; position:relative; }
@media (max-width:560px){ .motd-grid{ grid-template-columns:1fr; text-align:center; } }
.motd .piece{ width:min(220px,60vw); margin-inline:auto; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1.4rem; }
.filter-bar .lab{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.15em; font-size:.62rem; color:var(--faint); margin-right:.3rem; }
.filter-btn{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; cursor:pointer; transition:.2s; }
.filter-btn:hover{ border-color:var(--gold-hi); color:var(--cream); }
.filter-btn.active{ color:#241a0c; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)); border-color:#6e5410; }

.dash-log{ font-family:var(--f-body); }
.dash-log .row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(201,162,39,.14); }
.dash-log .row:last-child{ border-bottom:0; }
.dash-log .t{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; color:var(--cream); }
.dash-log .t small{ display:block; font-family:var(--f-crit); font-style:italic; letter-spacing:0; text-transform:none; font-size:.9rem; color:var(--gold-hi); margin-top:.15rem; }
.dash-log .when{ font-family:var(--f-mono); font-size:.72rem; color:var(--muted); white-space:nowrap; }

.burn-meter{ height:10px; border-radius:6px; background:rgba(0,0,0,.35); border:1px solid var(--line); overflow:hidden; margin:.7rem 0 .3rem; }
.burn-meter i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--verm),var(--gold-hi)); transition:width 1.4s cubic-bezier(.2,.7,.2,1); }

/* misc helpers */
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3.2rem; }
.tag-line{ font-family:var(--f-word); text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--muted); }
.hr-gold{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:clamp(2.4rem,6vw,4rem) 0; }