: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}
}

/* ---- Footer: the design is a fixed 2048px "stage" scaled to the footer width.
   Below 1000px the text would become unreadable, so the stage reflows instead. ---- */
@media (max-width:1000px){
  [data-oas-foot] > img:first-child{display:none !important}
  [data-oas-fstage]{position:relative !important;top:auto !important;left:auto !important;width:auto !important;height:auto !important;transform:none !important;
    display:flex !important;flex-direction:column;gap:36px;padding:44px 24px 28px !important;
    background:#F6F1E2 linear-gradient(rgba(246,241,226,0.88),rgba(246,241,226,0.88)),url(../img/footer-nouveau.webp) center / cover no-repeat;background-blend-mode:normal}
  [data-oas-fstage] > div:nth-child(1){grid-template-columns:1fr !important;gap:22px !important}
  [data-oas-fstage] > div:nth-child(1) span{font-size:12px !important}
  [data-oas-fstage] > div:nth-child(1) > div > span:nth-child(2){font-size:26px !important}
  [data-oas-fstage] a[data-oas-fbtn]{width:auto !important;height:auto !important;padding:16px 26px !important;margin:0 !important;justify-self:start !important;border:1px solid rgba(165,132,47,0.6) !important;font-size:12px !important}
  [data-oas-fstage] a[data-oas-fbtn] > img{display:none !important}
  [data-oas-fstage] a[data-oas-fbtn] > span{font-size:12px !important;letter-spacing:0.18em !important}
  [data-oas-fstage] > div:nth-child(2) span[style*="letter-spacing:0.2em"]{font-size:11px !important}
  [data-oas-fstage] > div:nth-child(2){grid-template-columns:1fr 1fr !important;gap:32px 20px !important;padding-top:0 !important}
  [data-oas-fstage] > div:nth-child(2) > div:first-child{grid-column:1 / -1}
  [data-oas-fstage] > div:nth-child(2) > img{display:none !important}
  [data-oas-fstage] > div:nth-child(2) > div,[data-oas-fstage] > div:nth-child(2) > nav{align-items:flex-start !important}
  [data-oas-fstage] > div:nth-child(2) > div > span:first-child,[data-oas-fstage] > div:nth-child(2) > nav > span:first-child{align-items:flex-start !important}
  [data-oas-fstage] > div:nth-child(2) img[alt="Old Art Studio"]{height:72px !important}
  [data-oas-fstage] > div:nth-child(2) span,[data-oas-fstage] > div:nth-child(2) a{font-size:15px !important;line-height:1.5 !important}
  [data-oas-fstage] > div:nth-child(2) a[href^="tel"]{font-size:24px !important}
  [data-oas-fstage] > div:nth-child(2) > div > span:first-child > span:first-child,[data-oas-fstage] > div:nth-child(2) > nav > span:first-child > span:first-child{font-size:12px !important;letter-spacing:0.2em !important}
  [data-oas-fstage] > div:nth-child(2) span[aria-hidden][style*="width:320px"]{width:100% !important}
  [data-oas-fstage] > div:nth-child(3){position:static;flex-direction:column;align-items:flex-start !important;gap:12px !important;padding:22px 0 0 !important;white-space:normal !important;border-top:1px solid rgba(165,132,47,0.35)}
  [data-oas-fstage] > div:nth-child(3) span,[data-oas-fstage] > div:nth-child(3) a{font-size:11px !important;letter-spacing:0.16em !important}
}
@media (max-width:560px){
  [data-oas-fstage] > div:nth-child(2){grid-template-columns:1fr !important}
}
@media (max-width:560px){
  section[data-screen-label="Contact Hero"] div[style*="gap:40px"]{gap:18px 24px !important}
}
/* footer bottom bar: centered in the band between the two lower rules of the artwork */
@media (min-width:1001px){
  [data-oas-fstage] > div:nth-child(3){position:absolute;left:235px;right:235px;top:654px;height:92px;align-items:center !important}
}
/* footer hover states (stronger than the prototype's) */
a[data-oas-fsocial]{transition:color 350ms ease,background 350ms ease,transform 350ms ease,box-shadow 350ms ease !important}
a[data-oas-fsocial]:hover{background:#A5842F !important;color:#FDFCF9 !important;border-color:#A5842F !important;box-shadow:0 8px 20px rgba(138,110,47,0.35);transform:translateY(-2px)}
a[data-oas-fsocial]:hover svg{stroke:#FDFCF9}
a[data-oas-fbtn] > svg{transition:transform 350ms ease}
a[data-oas-fbtn]:hover{color:#3A2C10 !important;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(198,167,94,0.35),rgba(198,167,94,0) 75%) !important;transform:translateY(-2px) !important}
a[data-oas-fbtn]:hover > img{filter:brightness(1.1) saturate(1.5) drop-shadow(0 4px 10px rgba(138,110,47,0.35))}
a[data-oas-fbtn]:hover > svg{transform:translateX(8px)}
/* About · "A Word From The Master": keep the text inside the left panel of the frame artwork at every width */
@media (min-width:901px){
  section[data-screen-label="A Word From The Master"] > div{max-width:none !important;padding:0 5% 0 5.5% !important;grid-template-columns:20% minmax(0,1fr) !important;gap:6% !important}
  section[data-screen-label="A Word From The Master"] > div > div:first-child{padding:40px 0 !important}
}
@media (max-width:900px){
  section[data-screen-label="A Word From The Master"]{background:#F4EEE0 url(../img/bg-master.webp) center / cover no-repeat !important}
}
/* footer nav links: clearer hover */
[data-oas-fstage] nav a{transition:color 300ms ease,letter-spacing 300ms ease !important}
[data-oas-fstage] nav a:hover{color:#8A6E2F !important;text-decoration:underline !important;text-underline-offset:6px;text-decoration-color:rgba(165,132,47,0.6) !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{color:#F2E1A6 !important;filter:drop-shadow(0 0 10px rgba(214,190,138,0.45)) !important}
.hv3:hover{background:#E4CF9A !important;transform:translateY(-2px) !important}
.hv4:hover{background:#C6A75E !important;border-color:#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;transform:translateY(-6px) !important;box-shadow:0 30px 60px -30px rgba(0,0,0,0.9) !important}
.hv9:hover{border-color:#E4CF9A !important}
.hv10:hover{color:#FDFCF9 !important}
.hv11:hover{opacity:1 !important}
.hv12:hover{color:#5E4A1E !important;filter:brightness(1.08) drop-shadow(0 6px 14px rgba(138,110,47,0.25)) !important;transform:translateY(-2px) !important}
.hv13:hover{color:#FBF8F1 !important;background:#8A6E2F !important;transform:translateY(-2px) !important}
.hv14:hover{color:#8A6E2F !important}
.hv15:hover{transform:scale(1.04) !important}
.hv16:hover{border-color:#E4CF9A !important;background:rgba(198,167,94,0.10) !important}
.hv17:hover{transform:scale(1.1) !important;filter:saturate(1) brightness(1) !important}
.hv18:hover{color:#FDFCF9 !important;border-color:#E4CF9A !important}
.hv19:hover{color:#121110 !important}
.hv20:hover{background:rgba(198,167,94,0.12) !important}
.hv21:hover{background:#E4CF9A !important;transform:translateY(-1px) !important}
.hv22:hover{opacity:1 !important;border-color:#7A6236 !important}
.hv23:hover{transform:scale(1.08) !important}
.hv24:hover{border-color:#121110 !important}
.hv25:hover{background:rgba(198,167,94,0.15) !important}
.hv26:hover{filter:brightness(1.08) !important;transform:translateY(-1px) !important}
.hv27:hover{border-color:#7A6236 !important;transform:translateY(-4px) !important}
.hv28:hover{color:#F2E1A6 !important}
.hv29:hover{border-color:#7A6236 !important;background:rgba(198,167,94,0.06) !important}
.fc30:focus{border-color:#C6A75E !important}
.hv31:hover{transform:scale(1.09) !important;filter:saturate(1) brightness(1) !important}
.hv32:hover{border-color:rgba(198,167,94,0.7) !important;transform:translateY(-6px) !important;box-shadow:0 30px 50px -30px rgba(0,0,0,0.8) !important}
.hv33:hover{opacity:1 !important;transform:translateY(0) !important}
.hv34:hover{color:#E4CF9A !important}
.hv35:hover{transform:scale(1.12) !important;filter:saturate(1) brightness(1.04) !important}
.hv36:hover{background:rgba(10,9,8,0.7) !important}
.hv37:hover{filter:brightness(1.08) !important;transform:translateY(-2px) !important}
.hv38:hover{transform:scale(1.12) !important;filter:saturate(0.98) brightness(1.04) !important}
.hv39:hover{background:rgba(10,9,8,0.78) !important}
.fc40:focus{border-bottom-color:#C6A75E !important}
.hv41:hover{color:#D6BE8A !important}