/* Perfect Scents legal + showcase pages, rebranded to the new identity.
   Scoped to .legal-page and .showcase-page, loaded after the global styles.
   Re-skin only: no structure, script or content change. */

.legal-page, .showcase-page{
  --night:#0a1020; --night-2:#0d1526;
  --cream:#f5ecdb; --cream-2:#fdf8ee; --ink:#16120a; --ink-soft:#4a4335;
  --g1:#8a6414; --g3:#e9c65f; --gold:#d4a72c; --bone:#f6efe2;
  --metal:linear-gradient(103deg,#8a6414,#c9992c 20%,#f6e4a6 42%,#e3b845 58%,#a2761a 76%,#f0d47f);
  --b-display:"Archivo Black","Helvetica Neue","Arial Black",system-ui,sans-serif;
  --b-serif:"Didot","Bodoni MT","Hoefler Text",Garamond,Georgia,serif;
  --b-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream); color:var(--ink); font-family:var(--b-sans);
}

/* ---- header (shared chrome) ---- */
.legal-page .site-header, .showcase-page .site-header{background:linear-gradient(#f5ecdb 62%,transparent); color:var(--ink)}
.legal-page .brand, .showcase-page .brand{flex-direction:row; align-items:center}
.legal-page .brand-main, .legal-page .brand-sub,
.showcase-page .brand-main, .showcase-page .brand-sub{display:none}
.legal-page .brand::before, .showcase-page .brand::before{content:""; display:block; width:150px; height:50px;
  background:url('/brand/perfect-scents-logo-transparent.png') left center / contain no-repeat}
.legal-page .site-header nav a, .showcase-page .site-header nav a{color:var(--ink-soft); font-weight:600}
.legal-page .site-header nav a::after, .showcase-page .site-header nav a::after{background:var(--gold)}
.legal-page .menu-toggle span:not(.sr-only), .showcase-page .menu-toggle span:not(.sr-only){background:var(--ink)}
.showcase-page .header-cta{color:#14100a; border:0; background:var(--metal); border-radius:100px; font-weight:800}
.showcase-page .header-cta span{color:#14100a}

/* ---- type (shared) ---- */
.legal-page h1, .legal-page h2, .showcase-page h1, .showcase-page h2{font-family:var(--b-display);
  font-weight:900; letter-spacing:-.02em; text-transform:uppercase; line-height:.98}
.legal-page h1 em, .legal-page h2 em, .showcase-page h1 em, .showcase-page h2 em{font-style:normal;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent}
.legal-page .eyebrow, .legal-page .panel-no, .showcase-page .eyebrow, .showcase-page .panel-no{color:var(--g1)}
.legal-page .eyebrow>span, .showcase-page .eyebrow>span{background:var(--gold)}

/* ---- buttons (shared) ---- */
.legal-page .button-primary, .showcase-page .button-primary{background:var(--metal); color:#14100a}
.legal-page .button-primary span, .showcase-page .button-primary span{color:#14100a}

/* ---- legal specifics ---- */
.legal-page .legal-shell>header h1{font-size:clamp(2.8rem,8vw,5.2rem)}
.legal-page .legal-shell>header p:not(.eyebrow){color:var(--ink-soft)}
.legal-page .legal-index a{color:var(--ink-soft)}
.legal-page .legal-index a:hover{color:var(--g1)}
.legal-page .legal-content section>span{color:var(--g1); font-family:var(--b-serif)}
.legal-page .legal-content h2{font-size:clamp(1.4rem,3vw,2.1rem)}
.legal-page .legal-content p{color:var(--ink-soft)}
.legal-page #privacy-request-form input,
.legal-page #privacy-request-form select,
.legal-page #privacy-request-form textarea{border-color:rgba(22,18,10,.2)}
.legal-page .bundle-footer{background:var(--night); color:rgba(246,239,226,.6)}
.legal-page .bundle-footer a{color:var(--g3)}

/* ---- showcase specifics ---- */
.showcase-page .showcase-hero{background:radial-gradient(circle at 78% 30%,rgba(255,255,255,.85),transparent 30%),linear-gradient(135deg,#ede3d0,#fdf8ee)}
.showcase-page .showcase-hero h1{font-size:clamp(2.8rem,8vw,5.4rem)}
.showcase-page .showcase-intro p{color:var(--ink-soft)}
.showcase-page .showcase-filters button{border-color:rgba(22,18,10,.14)}
.showcase-page .showcase-filters button.active{background:var(--night); color:#fff}
.showcase-page .showcase-closing{background:var(--night); color:var(--bone)}
.showcase-page .showcase-closing .eyebrow{color:var(--g3)}
.showcase-page .showcase-closing .text-link{color:rgba(246,239,226,.8)}
.showcase-page .showcase-footer{background:var(--night); color:rgba(246,239,226,.6)}
.showcase-page .showcase-footer a{color:var(--g3)}

/* ---- uniform showcase grid ----
   The base theme used an editorial mosaic (nth-child spans of 7/5/4 columns with
   alternating 16/10 and 4/5 media ratios). With mixed client content (portrait
   flyers, landscape video, square art) that reads as disorder. Every card is now
   the same width and the same shape, in a plain responsive grid. */
.showcase-page .showcase-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; align-items:stretch}
.showcase-page .showcase-card,
.showcase-page .showcase-card:nth-child(n),
.showcase-page .showcase-card:nth-child(6n+1),
.showcase-page .showcase-card:nth-child(6n+2){grid-column:auto; display:flex; flex-direction:column;
  background:var(--cream-2); border:1px solid rgba(22,18,10,.1); border-radius:12px; overflow:hidden}
.showcase-page .showcase-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,18,10,.14)}
/* one shape for every tile, whatever the source media */
.showcase-page .showcase-card .showcase-media,
.showcase-page .showcase-card:nth-child(n) .showcase-media,
.showcase-page .showcase-card:nth-child(6n+1) .showcase-media,
.showcase-page .showcase-card:nth-child(6n+2) .showcase-media{aspect-ratio:4/5; width:100%; background:#efe7d5}
.showcase-page .showcase-card .showcase-media img,
.showcase-page .showcase-card .showcase-media video{width:100%; height:100%; object-fit:cover; display:block}
/* copy block fills the remaining height so card feet line up across a row */
.showcase-page .showcase-card-copy{flex:1; display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px}
.showcase-page .showcase-card-copy strong{font-family:var(--b-serif); font-size:19px; font-weight:400; line-height:1.25}
.showcase-page .showcase-card-copy>span:not(.showcase-kind){color:var(--ink-soft); font-size:13px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.showcase-page .showcase-kind{color:var(--g1); font-size:9px; letter-spacing:.18em; text-transform:uppercase}
.showcase-page .showcase-card-copy small{margin-top:auto; color:var(--ink-soft); font-size:11px}
@media(max-width:620px){
  .showcase-page .showcase-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .showcase-page .showcase-card-copy{padding:12px 13px 14px}
  .showcase-page .showcase-card-copy strong{font-size:16px}
}