/* TAE Studio design system: one palette, two typefaces, one type scale and one spacing rhythm
   for the sales page, shop and FAQ. Loaded last so it settles earlier one-off overrides. */
:root{
 --tae-cream:#f7f2ec;--tae-paper:#fffaf5;--tae-blush:#efdcd6;--tae-line:#e3d6cf;
 --tae-ink:#2a2124;--tae-body:#5b4a4d;--tae-muted:#76666a;
 --tae-plum:#652a40;--tae-plum-deep:#4f1f31;
 --tae-serif:'Cormorant Garamond',Georgia,serif;--tae-sans:'DM Sans',system-ui,sans-serif;
 --tae-h1:clamp(46px,5.4vw,78px);--tae-h2:clamp(36px,4vw,58px);--tae-h3:clamp(26px,2.2vw,32px);
 --tae-section:clamp(64px,8vw,112px)
}

/* Logo: wide spaced TAE with a small STUDIO, plum on light grounds */
.tae-logo{display:inline-flex;align-items:baseline;gap:10px;color:var(--tae-plum);line-height:1;text-decoration:none}
.tae-logo b{font:600 26px/1 var(--tae-serif);letter-spacing:.24em;margin-right:-.24em}
.tae-logo small{font:600 10px/1 var(--tae-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--tae-body)}

/* Two typefaces everywhere: serif for display, sans for reading and controls */
body .artwork-page,body .artwork-page :is(p,li,a,button,input,select,textarea,label,summary,small,span,figcaption),
body .catalog-page :is(p,li,a,button,input,select,label,small),body .brand-faq :is(p,summary),body .edition-footer{font-family:var(--tae-sans)}
body .artwork-page :is(h1,h2,h3),body .catalog-page :is(h1,h2),body .brand-faq h2,body .artwork-page .package-price{font-family:var(--tae-serif);font-weight:400;color:var(--tae-ink);letter-spacing:-.02em}
body .artwork-page .tae-logo b{font-family:var(--tae-serif)}

/* Type scale */
body .artwork-page .art-copy-hero h1{font-size:var(--tae-h1);line-height:1.02}
body .artwork-page h2,body .brand-faq h2,body .catalog-page .catalog-intro h1{font-size:var(--tae-h2);line-height:1.06}
body .artwork-page h3{font-size:var(--tae-h3);line-height:1.15}
body .artwork-page p{font-size:17px;line-height:1.65;color:var(--tae-body)}
body .artwork-page .art-copy-hero .art-summary{font-size:19px;max-width:620px;color:var(--tae-body)}
body .artwork-page .art-copy-hero .art-price{font-size:17px;color:var(--tae-ink)}
body .artwork-page li{font-size:16px;line-height:1.55;color:var(--tae-ink)}
body .artwork-page :is(.fine,.package-footnote,.form-privacy,figcaption,.edition-preview-foot p){font-size:14px;color:var(--tae-muted)}
body .artwork-page :is(.sales-eyebrow,.eyebrow),body .brand-faq .eyebrow,body .catalog-page .eyebrow{font:600 12px/1.4 var(--tae-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tae-plum)}

/* Navigation */
body .artwork-page .art-navigation{padding:20px max(5%,calc((100% - 1200px)/2));background:var(--tae-cream);border-bottom:1px solid var(--tae-line)}
body .artwork-page .art-navigation>a.tae-home{display:inline-flex;text-decoration:none}
body .artwork-page .art-navigation div{gap:32px;font-size:15px}
body .artwork-page .art-navigation div :is(a,button){font:500 15px/1 var(--tae-sans);color:var(--tae-ink)}
body .artwork-page .art-navigation div button{min-height:44px;padding:0 20px;border:1px solid var(--tae-plum);color:var(--tae-plum);background:transparent}

/* Buttons: one height, one weight, two styles */
body .artwork-page :is(.hero-actions a,.hero-actions button,.button,.tier-cta,#edition-explore,#edition-choose,[data-art-quote]),body .catalog-page .button{min-height:50px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--tae-sans);letter-spacing:.01em;border-radius:2px}
body .artwork-page .hero-actions{gap:12px;margin-top:28px}
body .artwork-page .hero-actions a{background:transparent;color:var(--tae-plum);border:1px solid var(--tae-plum)}
body .artwork-page .hero-actions button{background:var(--tae-plum);color:#fff8f3;border:1px solid var(--tae-plum)}
body .artwork-page :is(.hero-actions button,.button,.tier-cta):hover{filter:brightness(.94)}

/* Section rhythm: every section breathes the same */
body .artwork-page .art-copy-hero{padding-top:clamp(48px,6vw,88px);padding-bottom:var(--tae-section)}
body .artwork-page .art-design-links{margin:0 auto;padding-bottom:var(--tae-section)}
body .artwork-page .package-options{margin:0 auto;padding-top:0;padding-bottom:var(--tae-section)}
body .artwork-page .gift-hook{margin:0}
body .artwork-page .beauty-story{margin:0}
body .artwork-page .website-package{margin:var(--tae-section) auto}
body .artwork-page .landing-extras{margin:0 auto var(--tae-section);align-items:start}
body .artwork-page .landing-extras>.art-beyond{padding-top:8px}
body .artwork-page .landing-extras>.art-products{grid-row:2;align-self:start;padding-top:8px}
body .artwork-page .salon-intake{padding-top:var(--tae-section);padding-bottom:var(--tae-section)}

/* Style picker labels read as part of the system */
body .artwork-page .edition-card-label{font:500 26px/1.1 var(--tae-serif);color:var(--tae-ink)}
body .artwork-page .edition-card-label span{font:500 13px/1.4 var(--tae-sans);color:var(--tae-muted)}

/* Gift section stats */
body .artwork-page .gift-hook :is(strong,b){font-family:var(--tae-serif)}

/* FAQ and footer */
body .brand-faq summary{font:500 18px/1.4 var(--tae-sans);color:var(--tae-ink);padding:6px 0}
body .brand-faq p{font-size:16px;line-height:1.65;color:var(--tae-body)}
body .edition-footer{color:var(--tae-muted);font-size:14px}

@media(max-width:700px){
 .tae-logo b{font-size:22px}
 .tae-logo small{font-size:9px}
 body .artwork-page .art-navigation div{gap:16px}
 body .artwork-page .art-navigation div :is(a,button){font-size:14px}
 body .artwork-page .art-copy-hero .art-summary{font-size:17px}
 body .artwork-page .hero-actions :is(a,button){flex:1 1 auto}
 body .artwork-page .landing-extras>.art-products{grid-row:3}
}

/* Composition fixes from the audit */
body .artwork-page .art-copy-hero{padding-bottom:0}
body .artwork-page .landing-hero-art.hero-film{margin-bottom:var(--tae-section)!important}
body .artwork-page .designs-intro{text-align:center;max-width:680px;margin:0 auto 40px}
body .artwork-page .designs-intro h2{margin:14px 0 16px}
body .artwork-page .designs-intro p{margin:0 auto;max-width:560px}
body .artwork-page .package-intro h2{margin-top:14px}
body .artwork-page .beauty-story{background:#f3e8e2}
body .artwork-page .landing-extras{grid-template-rows:auto 1fr}
body .brand-faq h2{font-size:clamp(34px,3.4vw,48px)}
body .brand-faq summary{font-size:17px}
@media(max-width:700px){
 body .artwork-page .art-navigation{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:14px 20px}
 body .artwork-page .art-navigation div{width:auto;gap:0}
 body .artwork-page .art-navigation div a{display:none}
 body .artwork-page .art-navigation div button{min-height:40px;padding:0 16px}
 body .artwork-page .art-copy-hero h1{font-size:40px}
 body .artwork-page .hero-actions{flex-direction:column;align-items:stretch}
 body .artwork-page .hero-actions :is(a,button){width:100%}
 body .artwork-page .preview-actions-new{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
 body .artwork-page .preview-actions-new :is(a,button){width:100%}
}
body .artwork-page .art-copy-hero :is(p,.art-summary,.art-price){font-family:var(--tae-sans)}
/* Enforce the scale over older per-section sizes */
body .artwork-page section h2,body .artwork-page .designs-intro h2,body .brand-faq h2{font-size:var(--tae-h2)!important;line-height:1.06!important}
body .artwork-page #edition-title{font-size:var(--tae-h3)!important}
body .artwork-page :is(.sales-eyebrow,.eyebrow){font-size:12px!important;letter-spacing:.2em!important}
body .artwork-page .salon-intake :is(p,.fine,label,button){font-family:var(--tae-sans)!important}
body .artwork-page .landing-extras>.art-beyond h2{color:var(--tae-ink)}
body .artwork-page .beauty-story{background:transparent;margin-top:var(--tae-section)}

/* Logo: SALON EDITIONS wordmark signed "by TAEgency" */
.tae-logo{flex-direction:column;align-items:flex-start;gap:6px}
.tae-logo b{font:600 21px/1 var(--tae-serif);letter-spacing:.16em;margin-right:0;text-transform:uppercase;white-space:nowrap}
.tae-logo small{font:500 12px/1 var(--tae-sans);letter-spacing:.06em;text-transform:none;color:var(--tae-body)}
.tae-logo small em{font-style:normal;font-weight:700;color:var(--tae-plum);letter-spacing:.08em}
@media(max-width:700px){.tae-logo b{font-size:17px;letter-spacing:.12em}.tae-logo small{font-size:11px}}
