
:root,
::backdrop {
  --color-maroon: #5A1625;
  --color-burgundy: #7A1F35;
  --color-gold: #B3975B;
  --color-champagne: #C5AD74;
  --color-bg: #F8F6F3;
  --color-surface: #FFFFFF;
  --color-text: #2B2326;
  --color-muted: #6B6266;
  --color-border: #E4DED8;

  --color-maroon-deep: #43101B;      
  --color-maroon-shade: #300C14;     
  --color-night: #1D0B0E;            
  --color-plate: #EFEBE7;            
  --color-gold-ink: #7A6234;         
  --color-field-border: #7B716A;     
  --color-on-maroon: #FAF7F1;        
  --color-on-maroon-muted: #E6DAD3;  
  --color-on-maroon-label: #C5AD74;  
  --color-rule-on-maroon: rgba(197, 173, 116, .42);  
  --color-tint-on-maroon: rgba(250, 247, 241, .10);  
  --color-tint-on-maroon-strong: rgba(250, 247, 241, .18);  
  --color-backdrop: rgba(29, 11, 14, .55);            
  --color-maroon-veil: rgba(90, 22, 37, .83);         
  --color-wine: #581725;             
  --color-cream: #F7F1E9;            
  --color-backdrop-search: rgba(29, 11, 14, .5);      

  --color-error: #A1260D;
  --color-error-bg: #F9E8E2;
  --color-success: #1F6A45;
  --color-success-bg: #E4EFE6;
  --color-disabled-bg: #E4DED8;      
  --color-disabled-text: #6B6266;    

  --ink: var(--color-text);            
  --ink-heading: var(--color-maroon);  
  --ink-muted: var(--color-muted);     
  --ink-accent: var(--color-maroon);   
  --ink-label: var(--color-maroon);    
  --ink-label-quiet: var(--color-gold-ink); 
  --rule: var(--color-border);         
  --rule-accent: var(--color-gold);    
  --underline: var(--color-gold);      
  --focus: var(--color-maroon);        
  --tint-hover: transparent;
  --ink-hover: var(--color-burgundy);  
  --rule-strong: var(--color-maroon);  
  --disabled-bg: var(--color-disabled-bg);
  --disabled-bd: var(--color-disabled-bg);
  --disabled-fg: var(--color-disabled-text);
  --accent-fg: var(--color-text);
  --accent-bd: var(--color-gold);
  --accent-hover-bg: var(--color-surface);
  --accent-hover-fg: var(--color-maroon);
  --accent-hover-bd: var(--color-maroon);
  --accent-active-bg: var(--color-bg);
  --brand-fg: var(--color-maroon);          
  --brand-amp: var(--color-gold-ink);       
  --badge-bg: var(--color-maroon);          
  --badge-fg: var(--color-on-maroon);
  --tint-quiet: var(--color-plate);         

  --color-toast-bg: var(--color-text);
  --color-toast-fg: var(--color-on-maroon);
  --color-toast-action: var(--color-champagne);
  --color-skip-bg: var(--color-maroon);
  --color-skip-fg: var(--color-on-maroon);

  --scrim-header: linear-gradient(180deg, rgba(29, 11, 14, .80) 0, rgba(29, 11, 14, .62) var(--header-h-overlay), rgba(29, 11, 14, 0) calc(var(--header-h-overlay) + var(--space-10)));
  --scrim-side: linear-gradient(90deg, rgba(48, 12, 20, .94) 0, rgba(48, 12, 20, .86) 40%, rgba(48, 12, 20, 0) 72%);
  --scrim-foot: linear-gradient(0deg, rgba(29, 11, 14, .92) 0, rgba(29, 11, 14, .80) 10%, rgba(29, 11, 14, 0) 30%);
  --scrim-tile: linear-gradient(0deg, rgba(48, 12, 20, .92) 0, rgba(48, 12, 20, .70) 38%, rgba(48, 12, 20, 0) 70%);

  --font-display: "Bodoni Moda", "Bodoni 72", "Bodoni MT", Didot, "Iowan Old Style", Georgia, serif;  
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;            
  --font-brand: "Cinzel", "Trajan Pro", var(--font-display);   

  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);        
  --text-h1: clamp(2.125rem, 1.75rem + 1.65vw, 3.25rem);        
  --text-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);            
  --text-h3: clamp(1.375rem, 1.25rem + .5vw, 1.75rem);          
  --text-h4: clamp(1.1875rem, 1.125rem + .25vw, 1.375rem);      
  --text-row-title: clamp(2rem, 1.6rem + 1.1vw, 2.75rem);       
  --text-row-body: 1.0625rem;                                   
  --text-row-label: .875rem;                                    
  --text-body-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);     
  --text-body: clamp(1rem, .97rem + .13vw, 1.0625rem);          
  --text-small: clamp(.875rem, .855rem + .09vw, .9375rem);      
  --text-label: clamp(.8125rem, .79rem + .1vw, .875rem);        
  --text-meta: .8125rem;                                        
  --text-eyebrow: clamp(.75rem, .72rem + .13vw, .8125rem);      
  --text-stock-badge: .75rem;                                   
  --text-button: clamp(.9375rem, .915rem + .1vw, 1rem);         
  --text-button-sm: var(--text-small);                          
  --text-price: clamp(.9375rem, .9rem + .17vw, 1.0625rem);      
  --text-price-lg: clamp(1.5rem, 1.35rem + .65vw, 2rem);        
  --text-menu: clamp(1.875rem, 8.6vw - .06rem, 2.25rem);        
  --text-brand: 1.125rem;                                       
  --text-brand-overlay: 1.125rem;                               
  --text-brand-footer: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-tight: 1.15;       
  --leading-persona: 1.25;
  --leading-snug: 1.3;
  --leading-notes: 1.45;       
  --leading-lead: 1.6;
  --leading-body: 1.65;
  --leading-button: 1.1;
  --leading-flat: 1;           
  --tracking-display: -.03em;   
  --tracking-heading: -.032em;  
  --tracking-title: -.028em;    
  --tracking-eyebrow: .12em;   
  --tracking-label: .12em;     
  --tracking-brand: .16em;
  --tracking-brand-footer: .14em;
  --tracking-menu: .14em;      
  --tracking-meta: .06em;      
  --tracking-nav: .02em;
  --tracking-button: .02em;    
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 500;
  --weight-display-strong: 600;   

  --opsz-sturdy: 6;      
  --opsz-firm: 8;
  --opsz-fine: 12;       
  --opsz-text: var(--opsz-sturdy);     
  --opsz-heading: var(--opsz-firm);    
  --opsz-display: var(--opsz-fine);    

  --space-1: .25rem;   
  --space-1-5: .375rem; 
  --space-2: .5rem;    
  --space-3: .75rem;   
  --space-4: 1rem;     
  --space-5: 1.5rem;   
  --space-6: 2rem;     
  --space-7: 3rem;     
  --space-8: 4rem;     
  --space-9: 6rem;     
  --space-10: 8rem;    
  --section-y: clamp(4rem, 2.6rem + 6.2vw, 7.5rem);   
  --gutter: clamp(1rem, 4vw, 3.5rem);                  
  --grid-gap: clamp(.75rem, 1.7vw, 1.5rem);            
  --footer-gap: clamp(2rem, 6vw, 6rem);                

  --container: 80rem;          
  --container-wide: 87.5rem;   
  --container-mid: 66rem;      
  --container-narrow: 45rem;   
  --measure: 36rem;            
  --measure-form: 34rem;       
  --measure-heading: 17em;     
  --measure-lead: 26rem;       
  --measure-short: 24rem;      
  --measure-newsletter: 30rem; 
  --measure-row: 21.5em;       

  --radius-none: 0;      
  --radius-sm: 2px;      
  --radius-md: 4px;      
  --radius-full: 999px;  

  --shadow-bar: 0 1px 0 var(--color-border);                     
  --shadow-bar-top: 0 -1px 0 var(--color-border);                
  --shadow-lift: 0 20px 36px -26px rgba(67, 16, 27, .45);        
  --shadow-overlay: 0 24px 64px -24px rgba(29, 11, 14, .50);     
  --shadow-fab: 0 10px 22px -10px rgba(29, 11, 14, .55);         

  --ease-out: cubic-bezier(.2, .7, .2, 1);      
  --ease-in-out: cubic-bezier(.45, 0, .2, 1);   
  --dur-fast: 160ms;     
  --dur-base: 280ms;     
  --dur-panel: 420ms;    
  --dur-slow: 600ms;     
  --dur-hero: 800ms;     
  --dur-none: .01ms;     
  --dur-pulse: 1200ms;   
  --dur-toast: 6000ms;   
  --dur-crossfade: 1200ms; 
  --dur-slide: 6000ms;   
  --dur-clip: 900ms;     
  --dur-row-clip: 800ms; 
  --stagger-hero: 100ms; 
  --hero-zoom: 1.04;     
  --dur-fab: 300ms;      
  --dur-nudge: 900ms;    
  --dur-launch: 450ms;   
  --stagger: 90ms;       
  --stagger-menu: 50ms;  
  --reveal-shift: 1rem;  
  --rise: .75rem;        
  --panel-drop: -1rem;   
  --press-shift: 1px;    
  --lift: 3px;           
  --arrow-shift: .25rem; 
  --underline-rest: 1;      
  --underline-hover: .38;   
  --underline-drop: .8em;   
  --underline-offset: .3em;
  --skeleton-dim: .6;
  --sold-out-dim: .55;
  --rosette-dim: .3;        
  --rosette-dim-dark: .17;  

  --tap: 2.75rem;                 
  --tap-dense: 2.25rem;           
  --control: 3.25rem;             
  --control-sm: 2.75rem;          
  --control-lg: 3.5rem;           
  --control-lg-w: 15rem;          
  --fab: 3rem;                    
  --nav-gap: var(--space-6);      
  --header-h: 3.75rem;            
  --header-h-overlay: 3.75rem;    
  --header-frost: 74%;            
  --header-frost-blur: 16px;      
  --hero-photo-h: clamp(32.5rem, 78vh, 51.25rem);   
  --hero-gap: clamp(2rem, 4vw, 5rem);               
  --hero-tone: .24;               
  --hero-dash-w: 2rem;            
  --row-gap: 4.5rem;              
  --row-gap-x: 6vw;               
  --sticky-bar-h: 4rem;           
  --bottom-offset: 0px;           
  --drawer-w: 26.25rem;           
  --menu-w: 30rem;                
  --border-w: 1px;
  --rule-thick: 2px;              
  --rule-gap: 2px;                
  --focus-w: 2px;
  --focus-offset: 3px;
  --focus-offset-field: 1px;      
  --focus-inset: -2px;            
  --focus-inset-deep: -4px;       

  --icon: 1.25rem;                
  --icon-sm: 1rem;                
  --icon-lg: 1.5rem;              
  --icon-stroke: 1.5;             
  --badge: 1.25rem;               
  --check: 1.25rem;               
  --dot: .625rem;                 
  --dot-sm: .5rem;                
  --star: 1rem;                   
  --hairline-kicker: 3rem;        
  --hairline-label: 1.5rem;       
  --stock-rule-w: .75rem;         
  --thumb-w: 4rem;                
  --thumb-h: 5rem;
  --thumb-sm-w: 3.5rem;           
  --thumb-sm-h: 4.375rem;
  --notes-label-w: 3.5rem;        
  --accordion-h: 3.5rem;          
  --dialog-head-h: 4rem;          
  --search-field-h: 3.5rem;       
  --textarea-h: 9rem;
  --line-total-w: 6.5rem;         
  --sheet-max-h: 88dvh;
  --search-max-h: 86dvh;
  --search-capsule-w: 66rem;      
  --search-capsule-h: 3.5rem;     
  --search-blur: 18px;            
  --crumbs-pad: var(--space-2);   
  --modal-w: 32rem;               
  --toast-w: 28rem;
  --rosette: 6rem;                
  --menu-rosette-w: 118%;
  --testimonial-w: 86%;           
  --skeleton-line: .875em;

  --plate-ratio: 4 / 5;
  --plate-zoom: 1.03;

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;     
  --z-sticky: 30;     
  --z-fab: 35;        
  --z-header: 40;
  --z-overlay: 60;    
  --z-toast: 70;
  --z-skip: 100;

  --radius-card-media: .875rem;              
  --color-card-edge: rgba(90, 22, 37, .08);  
  --dur-card-fade: var(--dur-slow);          
  --card-notes-max: 60%;                     
  --card-notes-max-narrow: 100%;             
  --card-notes-fade: 2rem;                   
  --card-add: var(--tap);                    
  --card-dot: .375rem;                       
  --card-step: 2rem;                         
}

@media (min-width: 480px) {
  :root { --text-brand: 1.25rem; --text-brand-overlay: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --plate-zoom: 1; }
}

html[lang="ms"] { --notes-label-w: 4.5rem; }
@media (min-width: 768px) {
  :root { --tracking-eyebrow: .16em; }
}
@media (min-width: 1024px) {
  :root { --header-h: 4.5rem; --header-h-overlay: 5.5rem; --text-brand: 1.5rem; --text-brand-overlay: 1.875rem; }
  :root { --search-capsule-h: 4rem; }

  :root { --text-display: clamp(3.25rem, .9rem + 3.68vw, 5.5rem); }

  :root { --row-gap: 7.5rem; }

  html:not(.js)[lang="ms"],
  html.no-menu[lang="ms"] { --nav-gap: var(--space-4); --text-brand-overlay: 1.5rem; }
}
@media (min-width: 1280px) {
  html:not(.js)[lang="ms"],
  html.no-menu[lang="ms"] { --nav-gap: var(--space-6); --text-brand-overlay: 1.875rem; }
}

.on-dark,
body[data-header="overlay"] .site-header:not(.is-scrolled),
body[data-header="solid"] .site-header.is-scrolled,
body[data-header="stage"] .site-header:not(.is-scrolled):not(:hover),
body[data-header="stage"] .site-crumbs {
  --ink: var(--color-on-maroon);
  --ink-heading: var(--color-on-maroon);
  --ink-muted: var(--color-on-maroon-muted);
  --ink-accent: var(--color-on-maroon);
  --ink-label: var(--color-on-maroon-label);
  --ink-label-quiet: var(--color-on-maroon-label);
  --rule: var(--color-rule-on-maroon);
  --rule-accent: var(--color-rule-on-maroon);
  --underline: var(--color-champagne);
  --focus: var(--color-champagne);
  --tint-hover: var(--color-tint-on-maroon);
  --ink-hover: var(--color-on-maroon);
  --rule-strong: transparent;
  --disabled-bg: var(--color-tint-on-maroon-strong);
  --disabled-bd: transparent;
  --disabled-fg: var(--color-on-maroon-muted);
  --accent-fg: var(--color-on-maroon);
  --accent-bd: var(--color-champagne);
  --accent-hover-bg: var(--color-tint-on-maroon);
  --accent-hover-fg: var(--color-on-maroon);
  --accent-hover-bd: var(--color-on-maroon);
  --accent-active-bg: var(--color-tint-on-maroon-strong);
  --brand-fg: var(--color-on-maroon);
  --brand-amp: var(--color-champagne);
  --badge-bg: var(--color-on-maroon);
  --badge-fg: var(--color-maroon);
  --tint-quiet: var(--color-tint-on-maroon);
  --opsz-heading: var(--opsz-sturdy);   
  --opsz-display: var(--opsz-firm);
  color: var(--ink);
}
.on-light {
  --ink: var(--color-text);
  --ink-heading: var(--color-maroon);
  --ink-muted: var(--color-muted);
  --ink-accent: var(--color-maroon);
  --ink-label: var(--color-maroon);
  --ink-label-quiet: var(--color-gold-ink);
  --rule: var(--color-border);
  --rule-accent: var(--color-gold);
  --underline: var(--color-gold);
  --focus: var(--color-maroon);
  --tint-hover: transparent;
  --ink-hover: var(--color-burgundy);
  --rule-strong: var(--color-maroon);
  --disabled-bg: var(--color-disabled-bg);
  --disabled-bd: var(--color-disabled-bg);
  --disabled-fg: var(--color-disabled-text);
  --accent-fg: var(--color-text);
  --accent-bd: var(--color-gold);
  --accent-hover-bg: var(--color-surface);
  --accent-hover-fg: var(--color-maroon);
  --accent-hover-bd: var(--color-maroon);
  --accent-active-bg: var(--color-bg);
  --brand-fg: var(--color-maroon);          
  --brand-amp: var(--color-gold-ink);       
  --badge-bg: var(--color-maroon);          
  --badge-fg: var(--color-on-maroon);
  --tint-quiet: var(--color-plate);         
  --opsz-heading: var(--opsz-firm);
  --opsz-display: var(--opsz-fine);
  color: var(--ink);
}

:root {
  --color-amber: #B7802B;           
  --dur-breathe: 2.4s;              
  --meter-step: .875rem;            
  --meter-h: .125rem;               
  --meter-gap: .1875rem;            
  --dispatch-ring: 2rem;            
  --dispatch-ring-sm: 1.75rem;      
  --dispatch-node: .4375rem;        
  --dispatch-label-w: 5.75rem;      
  --pill-h: 1.125rem;               
  --pill-h-sm: .9375rem;            
  --pill-text: .6875rem;            
  --pill-text-sm: .6875rem;         
  --pill-tracking-sm: .04em;        
  --pill-pad: .5rem;                
  --pill-pad-sm: .375rem;           
  --pill-inset: var(--pill-pad);
  --pill-dot: .375rem;              
  --pill-cal: .625rem;              
  --pill-blur: 6px;                 
  --pill-glass: rgb(247 241 233 / .88);   
  --pill-edge: rgb(90 22 37 / .1);        
}

:root {
  --dur-press-sweep: 650ms;    
  --press-angle: 112deg;       
}

:root {
  --stagger-card: 80ms;        
  --stagger-notes: 60ms;       
  --dur-notes-line: 360ms;     
  --dur-meter: 700ms;          
  --dur-hint: 1300ms;          
  --hint-shift: 15%;           
  --meter-h: .1875rem;         
}
