:root{
--noir-950:#0A0908;--noir-900:#121110;--noir-850:#1A1815;--noir-800:#242019;
--ivory-50:#FDFCF9;--ivory-100:#FBF8F1;--ivory-200:#F5F0E4;--ivory-300:#EAE3D2;
--gold-100:#E9DCBE;--gold-300:#D6BE8A;--gold-500:#C6A75E;--gold-700:#A2854A;--gold-900:#7A6236;
--gold-metallic:linear-gradient(135deg,#B08D45 0%,#E3C87E 45%,#C6A75E 60%,#8F7038 100%); /* @kind color */
--stone-500:#8C8577;--stone-300:#B8B0A0;
--border-gold-hairline:rgba(198,167,94,0.35);--border-on-dark:rgba(253,252,249,0.10);--border-on-light:rgba(18,17,16,0.10);
/* semantic aliases */
--surface-page-dark:var(--noir-950);--surface-dark:var(--noir-900);--surface-dark-raised:var(--noir-850);--surface-dark-hover:var(--noir-800);
--surface-page-light:var(--ivory-100);--surface-card-light:var(--ivory-50);--surface-cream:var(--ivory-200);--surface-recessed:var(--ivory-300);
--text-on-dark:var(--ivory-50);--text-muted-on-dark:var(--stone-300);--text-on-light:var(--noir-900);--text-muted-on-light:var(--stone-500);
--text-gold-on-dark:var(--gold-500);--text-gold-on-light:var(--gold-900);
--accent:var(--gold-500);--accent-hover:var(--gold-300);
--status-success:#6B7D5A;--status-warning:#A2854A;--status-danger:#8C5A50;
}

:root{
--font-serif-display:"Cormorant Garamond",Georgia,serif;
--font-sans:"Jost","Helvetica Neue",sans-serif;
--display-xl:clamp(4rem,8vw,8rem); /* @kind font */
--display-lg:clamp(3rem,6vw,6rem); /* @kind font */
--heading-xl:clamp(2.5rem,5vw,4.5rem); /* @kind font */
--heading-lg:clamp(2rem,4vw,3.5rem); /* @kind font */
--heading-md:clamp(1.5rem,3vw,2.5rem); /* @kind font */
--heading-sm:1.25rem;
--body-lg:1.125rem;--body-md:1rem;--body-sm:0.875rem;--label:0.75rem;
--tracking-label:0.14em;--leading-body:1.65;--leading-display:1.05;
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;
--radius-none:0;--radius-sm:2px;--radius-md:6px;
--content-max:1360px;--gutter:56px;
}

:root{
--shadow-soft:0 2px 6px rgba(18,17,16,0.05),0 16px 40px rgba(18,17,16,0.08);
--ease-luxe:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--dur-slow:500ms; /* @kind other */
--dur-med:300ms; /* @kind other */
--overlay-noir-30:rgba(10,9,8,0.30);--overlay-noir-55:rgba(10,9,8,0.55);
--focus-ring:0 0 0 2px var(--gold-500);
}

body{margin:0;font-family:var(--font-sans);font-weight:400;font-size:var(--body-md);line-height:var(--leading-body);color:var(--text-on-light);background:var(--surface-page-light)}
h1,h2,h3{font-family:var(--font-serif-display);font-weight:500;line-height:var(--leading-display);margin:0}
a{color:var(--gold-900);text-decoration:none;border-bottom:1px solid var(--border-gold-hairline);transition:border-color var(--dur-med) var(--ease-luxe),color var(--dur-med) var(--ease-luxe)}
a:hover{color:var(--gold-700);border-bottom-color:var(--gold-500)}
::selection{background:var(--gold-100);color:var(--noir-900)}

/* ---- Old Art Studio · site styles (shared) ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0A0908;font-family:var(--font-sans);color:var(--text-on-light);overflow-x:hidden}
main{display:block}
img{max-width:100%}
button{font:inherit}
.dc-root{display:contents}
[hidden]{display:none !important}

/* Design-system Button */
.ds-btn{font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:all var(--dur-med) var(--ease-luxe);display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:0;
  font-size:0.75rem;padding:14px 32px;line-height:1.2;box-sizing:border-box;text-decoration:none}
.ds-btn-sm{font-size:0.6875rem;padding:10px 20px}
.ds-btn-lg{font-size:0.8125rem;padding:18px 44px}
.ds-btn-primary{background:var(--gold-metallic);color:var(--noir-900);border:1px solid transparent}
.ds-btn-primary:hover{background:linear-gradient(135deg,#C6A75E 0%,#EED9A0 45%,#D6BE8A 60%,#A2854A 100%)}
.ds-btn-outline{background:var(--noir-900);color:var(--ivory-50);border:1px solid var(--gold-500)}
.ds-btn-outline:hover{background:var(--noir-800);border-color:var(--gold-300)}
.ds-btn-ghost{background:transparent;color:var(--gold-900);border:1px solid transparent;box-shadow:inset 0 -1px 0 var(--border-gold-hairline);padding:6px 2px}
.ds-btn-ghost:hover{color:var(--gold-700);box-shadow:inset 0 -1px 0 var(--gold-500)}
a > .ds-btn{cursor:pointer}

/* Design-system Input / Select */
.ds-field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans);min-width:0}
.ds-label{font-size:var(--label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-900)}
.ds-field.ds-dark .ds-label{color:var(--gold-500)}
.ds-field input,.ds-field select{background:transparent;font-family:var(--font-sans);font-size:var(--body-md);color:var(--noir-900);
  padding:12px 2px;outline:none;border-radius:var(--radius-sm);border:none;border-bottom:1px solid var(--border-on-light);
  transition:border-color var(--dur-med) var(--ease-luxe);width:100%;box-sizing:border-box}
.ds-field.ds-dark input,.ds-field.ds-dark select{color:var(--ivory-50);border-bottom-color:var(--border-on-dark)}
.ds-field input:focus,.ds-field select:focus{border-bottom-color:var(--gold-500)}
.ds-field input::placeholder{color:var(--stone-500);opacity:1}
.ds-field.ds-dark input::placeholder{color:var(--stone-500)}
.ds-selwrap{position:relative;display:block}
.ds-selwrap select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer}
.ds-selwrap svg{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none}
.ds-field.ds-dark select option{background:#121110;color:#FDFCF9}
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-text-fill-color:inherit;transition:background-color 9999s ease-in-out 0s}

/* form feedback */
.oas-sending{opacity:0.6;pointer-events:none}

/* small screens: make store grid / checkout comfortable */
@media (max-width:900px){
  aside[role="dialog"]{width:100vw !important}
  div[style*="grid-template-columns:minmax(0,1fr) 380px"],div[style*="grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr)"]{grid-template-columns:minmax(0,1fr) !important}
}

/* hover/focus states from prototype */
.hv1:hover{color:#F2E1A6 !important;text-shadow:0 0 18px rgba(214,190,138,0.6) !important}
.hv2:hover{border-color:#E4CF9A !important;box-shadow:0 0 18px rgba(214,190,138,0.35) !important}
.hv3:hover{background:#E4CF9A !important;transform:translateY(-2px) !important}
.hv4:hover{background:#C6A75E !important;color:#121110 !important;transform:translateY(-2px) !important}
.hv5:hover{background:rgba(20,17,12,0.88) !important}
.hv6:hover{border-color:#7A6236 !important;box-shadow:0 18px 40px rgba(18,17,16,0.14) !important}
.hv7:hover{transform:scale(1.1) !important}
.hv8:hover{border-color:rgba(198,167,94,0.75) !important;background:linear-gradient(180deg,rgba(198,167,94,0.11),rgba(198,167,94,0.02)) !important;transform:translateY(-6px) !important}
.hv9:hover{border-color:rgba(198,167,94,0.75) !important;background:linear-gradient(180deg,rgba(198,167,94,0.11),rgba(198,167,94,0.02)) !important;transform:translateY(18px) !important}
.hv10:hover{border-color:#E4CF9A !important}
.hv11:hover{color:#FDFCF9 !important}
.hv12:hover{opacity:1 !important}
.hv13:hover{color:#FDFCF9 !important;border-color:#E4CF9A !important;background:rgba(198,167,94,0.10) !important;box-shadow:0 0 0 4px rgba(198,167,94,0.10),0 0 28px rgba(214,190,138,0.25) !important}
.hv14:hover{color:#D6BE8A !important}
.hv15:hover{color:#121110 !important;background:#C6A75E !important;border-color:#C6A75E !important}
.hv16:hover{color:#E4CF9A !important}
.hv17:hover{transform:scale(1.04) !important}
.hv18:hover{border-color:#E4CF9A !important;background:rgba(198,167,94,0.10) !important}
.hv19:hover{transform:scale(1.1) !important;filter:saturate(1) brightness(1) !important}
.hv20:hover{color:#FDFCF9 !important;border-color:#E4CF9A !important}
.hv21:hover{color:#121110 !important}
.hv22:hover{background:rgba(198,167,94,0.12) !important}
.hv23:hover{background:#E4CF9A !important;transform:translateY(-1px) !important}
.hv24:hover{border-color:#121110 !important}
.fc25:focus{border-color:#C6A75E !important}
.hv26:hover{border-color:rgba(198,167,94,0.6) !important;transform:translateY(-4px) !important}
.hv27:hover{background:#7A6236 !important;transform:translateY(-1px) !important}
.hv28:hover{background:#13100C !important}
.hv29:hover{background:#14110D !important}
.fc30:focus{border-bottom-color:#C6A75E !important}