/* ==========================================================================
   Bio Esthetics — design layer (2026 redesign)
   Brand palette preserved: gold #ECCA80 · cream #FFF3CB · ink #211E1C · plum #343148
   ========================================================================== */

:root{
  --gold:#ECCA80;
  --gold-deep:#A9853F;
  --gold-text:#8A6A2F;
  --cream:#FFF3CB;
  --ink:#211E1C;
  --ink-60:#6B6560;
  --ink-40:#948D86;
  --plum:#343148;
  --sand:#FBF9F5;
  --shell:#F4EFE6;
  --line:rgba(33,30,28,.12);
  --line-soft:rgba(33,30,28,.07);

  /* Warm, brown-tinted shadows — never neutral grey, that reads cheap on cream.
     Each level is LAYERED: a tight contact shadow that anchors the edge, a mid
     shadow for body, and a wide ambient one for the room. A single blur always
     looks like a sticker; three stacked look like an object on paper.
     To dial the whole site up or down, scale the alpha values here — nothing
     else references shadow colours directly. */
  --shadow-xs:0 1px 2px rgba(72,52,24,.05), 0 3px 8px -5px rgba(72,52,24,.12);
  --shadow-sm:0 1px 2px rgba(72,52,24,.06), 0 5px 14px -7px rgba(72,52,24,.18);
  --shadow-md:0 2px 4px rgba(72,52,24,.06),
              0 10px 22px -12px rgba(72,52,24,.20),
              0 26px 50px -30px rgba(72,52,24,.26);
  --shadow-lg:0 3px 6px rgba(72,52,24,.07),
              0 18px 38px -20px rgba(72,52,24,.24),
              0 44px 84px -46px rgba(72,52,24,.34);
  --shadow-xl:0 4px 8px rgba(72,52,24,.08),
              0 28px 58px -28px rgba(72,52,24,.28),
              0 64px 120px -62px rgba(72,52,24,.40);
  --shadow-gold:0 2px 4px rgba(140,104,44,.12), 0 12px 26px -12px rgba(140,104,44,.42);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);
}

*{ -webkit-tap-highlight-color:transparent; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--sand);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

::selection{ background:var(--gold); color:var(--ink); }

img{ color:transparent; }
img.is-broken{ opacity:0; }

/* --- paper grain ---------------------------------------------------------- */
/* the single biggest tell between "flat digital cream" and a printed surface */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media (max-width:640px){ body::after{ opacity:.03; } }

/* --- focus ---------------------------------------------------------------- */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:2px;
}

/* --- display type --------------------------------------------------------- */
.font-display,
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Cormorant's old-style figures make numerals sit like book typography */
.figures{ font-variant-numeric:oldstyle-nums; font-feature-settings:"onum" 1; }

/* --- eyebrows & section indices ------------------------------------------- */
.eyebrow{
  display:flex;
  align-items:center;
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-text);
}
.eyebrow--light{ color:var(--gold); }

.rule{
  display:inline-block;
  width:30px;
  height:1px;
  background:currentColor;
  opacity:.55;
  margin-right:16px;
  flex:none;
}
.rule--light{ background:var(--gold); opacity:.7; }

/* "01 —— Treatments" */
.eyebrow-n{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:13px;
  font-style:italic;
  letter-spacing:.04em;
  text-transform:none;
  margin-right:14px;
  flex:none;
}
.eyebrow-n::after{
  content:"";
  display:inline-block;
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.5;
  vertical-align:middle;
  margin-left:14px;
}

/* --- buttons -------------------------------------------------------------- */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px 32px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-radius:999px;
  border:1px solid transparent;
  transition:color .5s var(--ease), border-color .5s var(--ease),
             transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn svg{ width:14px; height:14px; transition:transform .5s var(--ease); position:relative; z-index:1; }
.btn:hover svg{ transform:translateX(5px); }
.btn-gold:hover,
.btn-ink:hover,
.btn-ghost:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); }

/* the hover colour sweeps up from the bottom instead of snapping */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }

.btn-gold{ background:var(--gold); color:var(--ink); box-shadow:var(--shadow-gold); }
.btn-gold:hover{ box-shadow:var(--shadow-md); }
.btn-gold::before{ background:var(--ink); }
.btn-gold:hover{ color:var(--cream); }

.btn-ink{ background:var(--ink); color:var(--cream); box-shadow:var(--shadow-sm); }
.btn-ink:hover{ box-shadow:var(--shadow-md); }
.btn-ink::before{ background:var(--gold); }
.btn-ink:hover{ color:var(--ink); }

.btn-ghost{ border-color:rgba(33,30,28,.4); color:var(--ink); background:transparent; }
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover{ color:var(--cream); border-color:var(--ink); }

.btn-light{ border-color:rgba(255,243,203,.42); color:#fff; }
.btn-light::before{ background:var(--cream); }
.btn-light:hover{ color:var(--ink); border-color:var(--cream); }

.btn-sm{ padding:12px 24px; font-size:10px; letter-spacing:.18em; }

/* --- links ---------------------------------------------------------------- */
.link-u{ position:relative; display:inline-block; }
.link-u::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:100%; height:1px;
  background:currentColor;
  opacity:.34;
  transition:opacity .4s var(--ease);
}
.link-u:hover::after,
.link-u.is-active::after{ opacity:1; }

/* prominent inline call to action */
.link-cta{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:8px;
  border-bottom:1px solid var(--gold-deep);
  transition:color .45s var(--ease), border-color .45s var(--ease), gap .45s var(--ease);
}
.link-cta::after{
  content:"";
  width:18px; height:1px;
  background:currentColor;
  transition:width .45s var(--ease);
}
.link-cta:hover,
.group:hover .link-cta{ color:var(--gold-text); border-bottom-color:var(--ink); gap:15px; }
.link-cta:hover::after,
.group:hover .link-cta::after{ width:26px; }

.link-cta--light{ color:var(--cream); border-bottom-color:var(--gold); }
.link-cta--light:hover{ color:var(--gold); border-bottom-color:var(--cream); }

.nav-link{
  position:relative;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  padding-block:7px;
  transition:color .4s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold-deep);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-link[aria-current="page"]{ color:var(--gold-text); }

/* --- header --------------------------------------------------------------- */
#header{ transition:background-color .5s var(--ease), box-shadow .5s var(--ease); }
#header.is-stuck{
  background:rgba(251,249,245,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--line-soft), var(--shadow-sm);
}
#header.is-stuck .header-bar{ border-color:transparent; padding-block:10px; }

/* --- mobile menu ---------------------------------------------------------- */
#menu{
  transform:translateX(100%);
  transition:transform .7s var(--ease);
  visibility:hidden;
  box-shadow:var(--shadow-lg);
}
#menu.is-open{ transform:none; visibility:visible; }
#menuScrim{ opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
#menuScrim.is-open{ opacity:1; visibility:visible; }
#menu .menu-item{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
#menu.is-open .menu-item{ opacity:1; transform:none; }
#menu.is-open .menu-item:nth-child(1){ transition-delay:.14s }
#menu.is-open .menu-item:nth-child(2){ transition-delay:.20s }
#menu.is-open .menu-item:nth-child(3){ transition-delay:.26s }
#menu.is-open .menu-item:nth-child(4){ transition-delay:.32s }
#menu.is-open .menu-item:nth-child(5){ transition-delay:.38s }
#menu.is-open .menu-item:nth-child(6){ transition-delay:.44s }

.burger span{
  display:block; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s var(--ease), width .45s var(--ease);
}

/* --- scroll reveal -------------------------------------------------------- */
/* hidden only while JS runs (html gets .js in <head>), so a script failure can
   never leave content invisible.
   NB: never use clip-path here — Chromium reports a clip-path-hidden element as
   0% intersecting, which would deadlock any observer-based reveal. */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change:opacity, transform;
}
.js .reveal-img{
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1.2s var(--ease), transform 1.6s var(--ease-soft);
  will-change:opacity, transform;
}
.reveal.is-in,
.reveal-img.is-in{ opacity:1; transform:none; }

.reveal[data-d="1"]{ transition-delay:.10s }
.reveal[data-d="2"]{ transition-delay:.20s }
.reveal[data-d="3"]{ transition-delay:.30s }
.reveal[data-d="4"]{ transition-delay:.40s }
.reveal[data-d="5"]{ transition-delay:.50s }

/* --- photo frames --------------------------------------------------------- */
.frame{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#F0E8D8 0%,var(--cream) 48%,#EADFC8 100%);
  box-shadow:var(--shadow-md);
  transition:box-shadow .8s var(--ease);
}
.frame--flush{ box-shadow:none; }          /* full-bleed photos need no lift */
.zoom:hover,
.group:hover .zoom{ box-shadow:var(--shadow-lg); }
.frame::before{
  content:"Bio Esthetics";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(14px,2vw,22px);
  font-style:italic;
  letter-spacing:.14em;
  color:rgba(169,133,63,.42);
}
.frame > img,
.frame > picture > img,
.frame .slide img{
  position:relative;
  z-index:1;
  /* one warm grade across mixed stock photography makes it read as one shoot */
  filter:saturate(.93) contrast(1.03);
  transition:filter 1s var(--ease), transform 1.6s var(--ease-soft);
}
.zoom:hover img,
.group:hover .zoom img{ transform:scale(1.05); filter:saturate(1) contrast(1); }

/* --- editorial cards ------------------------------------------------------ */
.card-index{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:13px;
  font-style:italic;
  color:var(--gold-deep);
  letter-spacing:.06em;
}
.card-rule{
  display:block;
  height:1px;
  background:var(--line);
  position:relative;
}
.card-rule::after{
  content:"";
  position:absolute;
  left:0; top:0;
  height:1px; width:100%;
  background:var(--gold-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.group:hover .card-rule::after{ transform:scaleX(1); }
.group:hover .card-title{ color:var(--gold-text); }
.card-title{ transition:color .5s var(--ease); }

/* the whole card rises a touch, so the shadow reads as movement not decoration */
.card-lift{ transition:transform .7s var(--ease); }
.group:hover .card-lift{ transform:translateY(-6px); }

/* --- hero slideshow ------------------------------------------------------- */
.slide{
  position:absolute; inset:0;
  opacity:0; z-index:0;
  transition:opacity 1.8s ease-in-out;
}
.slide.is-prev{ opacity:1; z-index:1; transition:none; }
.slide.is-active{ opacity:1; z-index:2; }
.slide img{ width:100%; height:100%; object-fit:cover; }

.slide-dots button{
  width:20px; height:1px; background:rgba(33,30,28,.24);
  transition:background-color .5s var(--ease), width .5s var(--ease);
}
.slide-dots button[aria-selected="true"]{ background:var(--gold-deep); width:44px; }
.slide-dots--light button{ background:rgba(255,243,203,.3); }
.slide-dots--light button[aria-selected="true"]{ background:var(--gold); }

/* --- marquee -------------------------------------------------------------- */
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 52s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

.marquee-item{
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-60);
  white-space:nowrap;
}
.marquee-sep{
  display:inline-block;
  width:1px; height:11px;
  background:var(--gold-deep);
  opacity:.5;
}

/* --- horizontal snap rail ------------------------------------------------- */
.rail{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:4px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; flex:0 0 auto; }

@media (min-width:768px){
  .rail.rail-grid-md{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
    overflow:visible;
    scroll-snap-type:none;
    padding-bottom:0;
  }
  .rail.rail-grid-md > *{ flex:none; width:auto; max-width:none; }
}

/* --- testimonials --------------------------------------------------------- */
.stack{ display:grid; }
.stack > *{ grid-area:1 / 1; }

.quote{
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), visibility .9s;
}
.quote.is-active{ opacity:1; visibility:visible; transform:none; }

/* --- gift vouchers -------------------------------------------------------- */
.voucher{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:52px 40px 44px;
  border:1px solid var(--line);
  background:var(--sand);
  box-shadow:var(--shadow-sm);
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.voucher::before{
  content:"";
  position:absolute;
  left:0; top:-1px;
  height:1px; width:100%;
  background:var(--gold-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.voucher:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.voucher:hover::before{ transform:scaleX(1); }
.voucher--dark{ background:var(--ink); border-color:rgba(255,243,203,.16); color:var(--cream); box-shadow:var(--shadow-md); }
.voucher--dark:hover{ box-shadow:var(--shadow-xl); }

.voucher-num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15px;
  letter-spacing:.3em;
  color:var(--gold-deep);
  text-transform:uppercase;
}
.voucher--dark .voucher-num{ color:var(--gold); }
.voucher .btn{ margin-top:auto; }   /* buttons share one baseline across the row */

/* --- footer wordmark ------------------------------------------------------ */
.wordmark{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:300;
  line-height:.86;
  letter-spacing:-.015em;
  font-size:clamp(56px,13vw,190px);
  color:rgba(255,243,203,.07);
  white-space:nowrap;
  user-select:none;
}

/* --- form fields ---------------------------------------------------------- */
.field{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(33,30,28,.2);
  padding:15px 2px;
  font-size:15px;
  color:var(--ink);
  transition:border-color .4s var(--ease);
  border-radius:0;
}
.field::placeholder{ color:#A8A199; }
.field:focus{ outline:none; border-bottom-color:var(--gold-deep); }
.field:user-invalid{ border-bottom-color:#B4553F; }
textarea.field{ resize:vertical; min-height:110px; }

.form-note{ font-size:13px; letter-spacing:.02em; }

/* --- filter chips --------------------------------------------------------- */
.chip{
  padding:10px 21px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid rgba(33,30,28,.18);
  border-radius:999px;
  color:var(--ink-60);
  transition:all .45s var(--ease);
  white-space:nowrap;
}
.chip:hover{ border-color:rgba(33,30,28,.45); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.card-hide{ display:none; }

/* --- accordion ------------------------------------------------------------ */
details summary{ list-style:none; cursor:pointer; }
details summary::-webkit-details-marker{ display:none; }
details[open] .acc-icon{ transform:rotate(45deg); }
.acc-icon{ transition:transform .45s var(--ease); }
details summary h3{ transition:color .4s var(--ease); }
details summary:hover h3{ color:var(--gold-text); }

/* --- back to top ---------------------------------------------------------- */
#toTop{
  opacity:0; visibility:hidden; transform:translateY(10px);
  box-shadow:var(--shadow-md);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s,
             background-color .4s var(--ease), color .4s var(--ease);
}
#toTop.is-shown{ opacity:1; visibility:visible; transform:none; }

/* --- misc ----------------------------------------------------------------- */
.hairline{ border-top:1px solid var(--line); }
.hairline-light{ border-top:1px solid rgba(255,243,203,.14); }

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-img{ opacity:1 !important; transform:none !important; }
}

/* --- print ---------------------------------------------------------------- */
@media print{
  #header,#toTop,#menu,#menuScrim,.marquee{ display:none !important; }
  body{ background:#fff; }
  body::after{ display:none; }
}

/* --- elevated surfaces ----------------------------------------------------- */
.panel{ box-shadow:var(--shadow-md); }
.panel-lg{ box-shadow:var(--shadow-lg); }

.chip[aria-pressed="true"]{ box-shadow:var(--shadow-sm); }

/* the sticky filter bar casts onto the grid it floats over, and clears the
   announcement bar + header above it (tag+class beats a Tailwind utility) */
section.sticky-bar{ top:calc(70px + var(--bar-h)); box-shadow:var(--shadow-xs); }

/* testimonial avatars sit in the plum rather than on it */
.avatar{ box-shadow:0 2px 6px rgba(12,8,20,.45); }

/* ==========================================================================
   Landing pages — price lists and the mobile booking bar
   ========================================================================== */

/* menu-style price row: name, dotted leader, price. Reads like a printed card. */
.price-row{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.price-row:last-child{ border-bottom:0; }
.price-row dt{
  flex:1;
  display:flex;
  align-items:baseline;
  gap:14px;
  min-width:0;
  font-size:15px;
}
.price-row dt::after{
  content:"";
  flex:1;
  min-width:24px;
  border-bottom:1px dotted rgba(33,30,28,.3);
  transform:translateY(-5px);
}
.price-row dd{
  flex:none;
  margin:0;
  text-align:right;
  white-space:nowrap;
}
.price-row .amount{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:23px;
  font-weight:400;
  line-height:1;
}
.price-row .mins{
  display:block;
  margin-top:4px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-40);
}
.price-row--pending dd{ color:var(--ink-40); }

.price-group{
  background:var(--sand);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:34px 30px;
}
@media (min-width:768px){ .price-group{ padding:40px 38px; } }

/* mobile booking bar — the only thing that should follow you down an ad page */
.cta-bar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:45;
  display:flex;
  gap:10px;
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(251,249,245,.94);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 28px -14px rgba(72,52,24,.38);
}
.cta-bar .btn{ flex:1; padding-inline:14px; }
.has-cta-bar{ padding-bottom:84px; }
@media (min-width:1024px){
  .cta-bar{ display:none; }
  .has-cta-bar{ padding-bottom:0; }
}

/* honest-caveat callout — the block that says when we are not the right answer */
.caveat{
  border-left:2px solid var(--gold-deep);
  background:rgba(255,243,203,.4);
  padding:26px 28px;
}

/* ==========================================================================
   Announcement bar — sits above the header, both stay fixed
   ========================================================================== */
:root{ --bar-h:44px; }
@media (max-width:639px){ :root{ --bar-h:50px; } }

.promo-bar{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:48;
  height:var(--bar-h);
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#211E1C 0%,#343148 60%,#2A2740 100%);
  color:var(--cream);
  box-shadow:var(--shadow-sm);
}
.promo-bar__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  padding-inline:16px;
}
.promo-tag{
  flex:none;
  padding:4px 11px;
  border:1px solid rgba(236,202,128,.5);
  border-radius:999px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.promo-text{
  font-size:12.5px;
  letter-spacing:.01em;
  color:rgba(255,243,203,.78);
  text-align:center;
  min-width:0;
}
.promo-text strong{ font-weight:500; color:var(--gold); }
.promo-cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 17px;
  border-radius:999px;
  background:var(--gold);
  color:var(--ink);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.promo-cta:hover{ background:var(--cream); }
.promo-cta svg{ width:13px; height:13px; flex:none; }

/* the header drops below the bar; content drops by the same amount */
#header{ top:var(--bar-h); }
main{ margin-top:var(--bar-h); }
html{ scroll-padding-top:calc(104px + var(--bar-h)); }

@media (max-width:639px){
  .promo-tag{ display:none; }          /* the text already carries the word */
  .promo-bar__inner{ gap:10px; padding-inline:12px; }
  .promo-text{ font-size:11.5px; }
  .promo-cta{ padding:6px 13px; font-size:9px; letter-spacing:.14em; }
}