/* GLOW — the warm face for The Kae Effect.
 *
 * Every colour here was sampled out of the concept the client supplied rather
 * than matched by eye: the page cream, the deeper band the trust bar sits on,
 * the warm charcoal of the buttons and the bronze of the rules. A palette
 * guessed from a screenshot lands "close enough", which on a beauty brand reads
 * as a cheap copy of the thing it is copying.
 *
 * Scoped to .face-glow throughout. It restyles the SHARED masthead and footer,
 * which every other client also renders, so nothing in here may leak: no bare
 * element selectors, no :root, no variable defined outside the scope.
 */

.face-glow {
  --gw-cream:  #F8F3EE;   /* page */
  --gw-cream-2:#F9F5F0;   /* the band the three columns sit on */
  --gw-sand:   #F0E8E1;   /* trust bar, tiles */
  --gw-ink:    #2F2A24;   /* headlines, buttons */
  --gw-ink-2:  #6B6058;   /* body */
  /* TWO bronzes, and the split matters.
     The concept's bronze is #A28972, which is 3.0:1 on this cream — fine for a
     rule, a fail for type, and the site check flags every label set in it. So
     the light one draws lines and the darker one sets words: 5.3:1 on the cream
     and 4.8:1 on the sand, both past AA, and close enough in hue that they read
     as one colour. */
  --gw-bronze: #A28972;   /* rules and borders only — never text */
  --gw-bronze-tx: #7A6049; /* labels, prices, small caps */
  --gw-line:   #E4DBD1;

  --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans:  'Jost', 'Avenir Next', system-ui, sans-serif;

  background: var(--gw-cream);
  color: var(--gw-ink-2);
  font-family: var(--sans);
  font-weight: 300;
}

.face-glow main { background: var(--gw-cream); }

/* The Look paints its own background layer behind everything; on this face the
   cream IS the design, so it has to go. Without this the navy shows through
   between sections and the whole thing reads as two sites fighting. */
.face-glow .bg-layer,
.face-glow .bg,
.face-glow [class*='bg-art'] { display: none !important; }

.face-glow h1, .face-glow h2, .face-glow h3 {
  font-family: var(--serif);
  color: var(--gw-ink);
  font-weight: 400;
  letter-spacing: .002em;
  text-wrap: balance;
}

/* The label above every heading. Letterspaced caps in the sans, bronze — the
   one piece of styling that repeats down the page and ties the sections
   together. */
.face-glow .gw-lbl {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gw-bronze-tx);
  margin: 0 0 .5rem;
}

.face-glow .gw-btn {
  display: inline-block;
  background: var(--gw-ink);
  color: var(--gw-cream);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 2.1rem;
  border: 0;
  border-radius: 0;
  transition: background .18s ease;
}
.face-glow .gw-btn:hover { background: #443C33; }
.face-glow .gw-btn.is-block { display: block; text-align: center; margin-top: 1.6rem; }

/* ---- the shared masthead, in cream -------------------------------------- */
/* The concept centres the mark. The masthead ships as brand-row then nav-row,
   and the links are one element, so they cannot be split to sit either side of
   the logo without rebuilding markup every other client also uses. Centred and
   stacked reads the same on the page and costs nobody else anything. */
.face-glow .topstack,
.face-glow .masthead {
  background: var(--gw-cream);
  border-bottom: 1px solid var(--gw-line);
  box-shadow: none;
}
.face-glow .masthead-row { display: block; padding: .2rem 0 0; }
.face-glow .masthead-in {
  justify-content: center;
  border: 0;
  padding-bottom: .1rem;
}
.face-glow .brand { justify-content: center; gap: .6rem; }
.face-glow .brand-txt b {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--gw-ink);
  text-transform: none;
}
.face-glow .brand-txt i { color: var(--gw-bronze-tx); }
/* Her lockup is white artwork drawn for the navy face. On cream it renders as a
   faint smudge behind the wordmark rather than a logo. The concept's mark IS a
   serif wordmark, which is exactly what .brand-txt already sets, so the image
   comes out and the type does the job. */
.face-glow .brand img,
.face-glow .brand svg,
.face-glow .brand .mark { display: none; }
/* The masthead already carries the name; the motto repeats the strapline the
   hero is about to set in 40px serif. Two sub-headings before the headline is
   one too many. */
.face-glow .motto { display: none; }

.face-glow .nav { border: 0; background: none; }
.face-glow .nav-in {
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  padding: .2rem 0 .9rem;
}
.face-glow .nav a {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gw-ink-2);
  background: none;
  border: 0;
  padding: .3rem 0;
}
.face-glow .nav a:hover { color: var(--gw-ink); }
.face-glow .nav a[aria-current],
.face-glow .nav a.is-on {
  color: var(--gw-ink);
  background: none;
  border-bottom: 1px solid var(--gw-bronze);
}
.face-glow .nav-toggle span { background: var(--gw-ink); }
/* The phone cart button sits in the cream masthead this face paints, so it
   takes the face's ink, not the kit's on-dark token (1.1:1 on cream). */
.face-glow .masthead-cart { color: var(--gw-ink-2); border-color: var(--gw-line); }
.face-glow .masthead-cart:hover { color: var(--gw-ink); }
.face-glow .nav-cart-n, .face-glow .masthead-cart .nav-cart-n { background: var(--gw-ink); color: var(--gw-cream); }

/* ---- hero ---------------------------------------------------------------- */
/* Text on cream at the left, photograph bleeding off the right edge. The image
   column is wider than the text column because the concept's is, and because a
   half-and-half split reads as a slideshow rather than a hero. */
.face-glow .gw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  background: var(--gw-cream);
  /* A DEFINITE height, not a min-height. With only a minimum the figure has no
     height to fill, so the portrait falls back to its own 900x1172 aspect and
     drags the hero past 1000px — object-fit can only fit inside a box that has
     been given a size. */
  height: clamp(430px, 64vh, 610px);
}
.face-glow .gw-hero-tx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(2.4rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4.5rem);
  /* Pull the text off the far-left rail so it sits under the centred mark
     rather than against the window edge. */
  margin-left: auto;
  max-width: 34rem;
}
.face-glow .gw-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 300;
}
.face-glow .gw-hero h1 span { display: block; }
/* Roman then italic on its own line. This is the concept's signature and the
   reason the headline needs a real text italic rather than a slanted roman. */
.face-glow .gw-hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 300;
}
.face-glow .gw-sub {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--gw-ink-2);
}
.face-glow .gw-hero .gw-btn { align-self: start; margin-top: .5rem; }

.face-glow .gw-hero-img { margin: 0; position: relative; overflow: hidden; height: 100%; }
.face-glow .gw-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;   /* her face sits high in the frame */
  display: block;
}
/* A wash that carries the sunset in the photograph toward the page cream, so
   the join at the left edge is a gradient rather than a seam. */
.face-glow .gw-hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gw-cream) 0%, rgba(248,243,238,.62) 14%, rgba(248,243,238,0) 46%);
  pointer-events: none;
}

@media (max-width: 780px) {
  .face-glow .gw-hero { grid-template-columns: 1fr; height: auto; }
  .face-glow .gw-hero-tx { margin: 0; max-width: none; order: 2; text-align: center; }
  .face-glow .gw-hero .gw-btn { align-self: center; }
  .face-glow .gw-hero-img { order: 1; height: 58vh; min-height: 300px; }
  .face-glow .gw-hero-img::after {
    background: linear-gradient(180deg, rgba(248,243,238,0) 62%, var(--gw-cream) 100%);
  }
}

/* ---- the three columns --------------------------------------------------- */
.face-glow .gw-three { background: var(--gw-cream-2); }
.face-glow .gw-three-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: clamp(2.6rem, 5vw, 4.2rem) 0;
}
/* Hairlines between the columns, the way the concept divides them — drawn as
   borders on the columns rather than as gaps so they run the full height. */
.face-glow .gw-col {
  padding: 0 clamp(1.1rem, 2.4vw, 2.4rem);
  border-left: 1px solid var(--gw-line);
  display: flex;
  flex-direction: column;
}
.face-glow .gw-col:first-child { border-left: 0; padding-left: 0; }
.face-glow .gw-col:last-child { padding-right: 0; }
.face-glow .gw-col h2 {
  margin: 0 0 1.4rem;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 400;
}
/* The button sits on the floor of every column, so three columns of different
   lengths still line their buttons up. */
.face-glow .gw-col .gw-btn.is-block { margin-top: auto; }

/* Featured collection */
/* Two products in a three-up grid leaves a hole and shrinks both to thumbnails.
   The count comes through as --n. */
.face-glow .gw-goods {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: .7rem;
}
.face-glow .gw-good { text-decoration: none; display: block; color: inherit; }
.face-glow .gw-good-img {
  display: block;
  background: var(--gw-sand);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: .5rem;
}
.face-glow .gw-good-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-glow .gw-good-n {
  display: block;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--gw-ink);
  line-height: 1.3;
}
.face-glow .gw-good-p { display: block; font-size: .68rem; color: var(--gw-bronze-tx); }
.face-glow .gw-good:hover .gw-good-img img { opacity: .88; }

/* Services */
.face-glow .gw-svc { list-style: none; margin: 0; padding: 0; }
.face-glow .gw-svc li {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--gw-line);
}
.face-glow .gw-svc li:first-child { border-top: 1px solid var(--gw-line); }
.face-glow .gw-svc-i {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--gw-sand);
  color: var(--gw-ink);
  display: grid; place-items: center;
}
.face-glow .gw-svc-i svg { width: 1.15rem; height: 1.15rem; }
.face-glow .gw-svc a { text-decoration: none; color: inherit; display: block; }
.face-glow .gw-svc b {
  display: block;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  color: var(--gw-ink);
}
.face-glow .gw-svc i {
  display: block;
  font-style: normal;
  font-size: .76rem;
  color: var(--gw-ink-2);
  line-height: 1.45;
}
.face-glow .gw-svc-go { color: var(--gw-bronze-tx); font-size: .9rem; }
.face-glow .gw-svc li:hover .gw-svc-i { background: var(--gw-bronze); color: var(--gw-cream); }

/* Follow along */
.face-glow .gw-ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.face-glow .gw-ig figure { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--gw-sand); }
.face-glow .gw-ig img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .face-glow .gw-three-in { grid-template-columns: 1fr; gap: 2.6rem; }
  .face-glow .gw-col {
    border-left: 0; padding: 0;
    border-top: 1px solid var(--gw-line); padding-top: 2rem;
  }
  .face-glow .gw-col:first-child { border-top: 0; padding-top: 0; }
  .face-glow .gw-col .gw-btn.is-block { margin-top: 1.6rem; }
}

/* ---- trust bar ----------------------------------------------------------- */
.face-glow .gw-trust { background: var(--gw-sand); }
.face-glow .gw-trust-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
}
.face-glow .gw-trust-i { display: flex; align-items: flex-start; gap: .85rem; }
.face-glow .gw-trust-i svg { width: 1.6rem; height: 1.6rem; color: var(--gw-ink); }
.face-glow .gw-trust-i b {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gw-ink);
  margin-bottom: .2rem;
}
.face-glow .gw-trust-i i {
  display: block;
  font-style: normal;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--gw-ink-2);
}
@media (max-width: 820px) {
  .face-glow .gw-trust-in { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
}
@media (max-width: 460px) {
  .face-glow .gw-trust-in { grid-template-columns: 1fr; }
}

/* ---- the menu ------------------------------------------------------------ */
.face-glow .gw-menu { background: var(--gw-cream); padding: clamp(3rem, 6vw, 5rem) 0; }
.face-glow .gw-mhead { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.face-glow .gw-mhead h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; }
.face-glow .gw-mcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.face-glow .gw-mgroup h3 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 400;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--gw-bronze);
}
/* Name, leader, figure — a printed salon menu. The leader is a border on a
   flexible middle cell, so it stretches to whatever gap is left and the prices
   stay in a column however long the names get. */
.face-glow .gw-mrow {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
}
.face-glow .gw-mn { color: var(--gw-ink); font-size: .92rem; }
.face-glow .gw-mn i {
  display: block;
  font-style: normal;
  font-size: .76rem;
  color: var(--gw-ink-2);
}
.face-glow .gw-mlead {
  flex: 1;
  border-bottom: 1px dotted var(--gw-line);
  transform: translateY(-.2rem);
  min-width: 1.5rem;
}
.face-glow .gw-mv {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--gw-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.face-glow .gw-mv i { display: block; font-style: normal; font-size: .72rem; color: var(--gw-bronze-tx); }

/* ---- who you're booking -------------------------------------------------- */
.face-glow .gw-her { background: var(--gw-cream-2); padding: clamp(3rem, 6vw, 5rem) 0; }
.face-glow .gw-her-in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.face-glow .gw-her figure { margin: 0; overflow: hidden; }
.face-glow .gw-her img {
  width: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
}
.face-glow .gw-her h2 { margin: 0 0 .3rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 300; }
.face-glow .gw-role {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gw-bronze-tx);
}
.face-glow .gw-her p { line-height: 1.7; }
.face-glow .gw-her .gw-btn { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .face-glow .gw-her-in { grid-template-columns: 1fr; }
}

/* ---- footer -------------------------------------------------------------- */
.face-glow .footer {
  background: var(--gw-ink);
  color: #D9CFC4;
  border-top: 0;
}
.face-glow .footer h2 {
  color: var(--gw-cream);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
}
.face-glow .footer a { color: #D9CFC4; }
.face-glow .footer a:hover { color: var(--gw-cream); }
.face-glow .footer-motto, .face-glow .footer-by { color: #B7A897; }
.face-glow .footer-mark img { filter: brightness(0) invert(1); opacity: .9; }

/* ---- panels the Look still paints -------------------------------------- */
/* Found by walking the live pages for any element whose computed background is
   still the navy, rather than by guessing class names. Two came back.
   article.offer was the serious one: the service cards kept the dark blue while
   this face had already set the type to near-black, so every service name on
   /services was 1.12:1 — effectively invisible. */
.face-glow .offer,
.face-glow .offer-list > * {
  background: var(--gw-cream);
  border: 1px solid var(--gw-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--gw-ink-2);
}
.face-glow .offer h3, .face-glow .offer h2 { color: var(--gw-ink); }
/* The gallery tile's fill only shows before its photograph loads, so this is
   cosmetic — but a navy flash on a cream page is still the wrong colour. */
.face-glow .shot { background: var(--gw-sand); }

/* ---- inner page headers -------------------------------------------------- */
/* Shop, gallery, about and contact all open with .page-hd, which the Look
   paints navy. Left alone it put a dark blue slab under a cream masthead with
   near-black serif on top of it — the title was barely legible and the site
   read as two designs bolted together. It becomes the same cream band the home
   page opens with, ruled off rather than filled. */
.face-glow .page-hd {
  background: var(--gw-cream) !important;
  border-bottom: 1px solid var(--gw-line);
  padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}
.face-glow .page-hd::before,
.face-glow .page-hd::after { display: none !important; }
.face-glow .page-hd h1 {
  color: var(--gw-ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0;
}
.face-glow .page-hd p {
  color: var(--gw-ink-2);
  font-family: var(--sans);
  font-weight: 300;
  margin: .5rem 0 0;
}

/* ---- the rest of the site ------------------------------------------------ */
/* Shop, gallery and contact are the shared pages. They inherit the Look, which
   is still the navy one, so the cream stops at the bottom of the home page and
   the site reads as two designs. These carry the palette across without
   rebuilding pages every other client uses. */
.face-glow .sec, .face-glow .sec-light, .face-glow .sec-alt { background: var(--gw-cream); }
.face-glow .sec-light, .face-glow .sec-alt { background: var(--gw-cream-2); }
.face-glow .card, .face-glow .prodcard, .face-glow .evcard {
  background: var(--gw-cream);
  border: 1px solid var(--gw-line);
  border-radius: 0;
  box-shadow: none;
}
.face-glow .eyebrow,
.face-glow .prodcard-cat,
.face-glow .cat-lbl,
.face-glow .shop-cat { color: var(--gw-bronze-tx); letter-spacing: .2em; }
/* Anything still reaching for the Look's accent — category labels, prices,
   small links inside cards — takes the bronze instead of the navy blue. */
.face-glow .prodcard a, .face-glow .prodcard b { color: var(--gw-ink); }
.face-glow .price, .face-glow .prodcard-price { color: var(--gw-ink); }
/* The small note beside the big price ("each", a surcharge) inherits the kit's
   muted-on-DARK token; this face puts the product page on cream, where that
   token reads at 2.6:1. Bronze-tx is the label colour solved for this paper. */
.face-glow .detail-price span { color: var(--gw-bronze-tx); }
.face-glow .btn, .face-glow .btn-primary {
  border-radius: 0;
  background: var(--gw-ink);
  color: var(--gw-cream);
  border-color: var(--gw-ink);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
}
.face-glow .btn-ghost, .face-glow .btn-light {
  background: none;
  color: var(--gw-ink);
  border: 1px solid var(--gw-ink);
}
.face-glow .btn-ghost:hover, .face-glow .btn-light:hover {
  background: var(--gw-ink);
  color: var(--gw-cream);
}


/* ---- outranking the Look ------------------------------------------------- */
/* The shell emits the face stylesheet as a <link>, then the Look and theme as
   inline <style> after it. Equal specificity, later wins — so a plain
   `.face-glow .btn` loses every argument with `.look-signal .btn`, and the
   losses show up as contrast failures rather than as anything obviously
   broken: a button keeping the navy palette's text colour over this cream.
   
   `body.face-glow` adds the element to the selector and settles it. Kept as a
   short list at the end rather than applied to the whole file, because the
   general rules above win on their own and only these were actually losing.
   Reordering the two in the shell would fix it globally, but that changes how
   every face on every site cascades, which is not a change to make on one
   client's redesign. */
body.face-glow .btn,
body.face-glow button.btn,
body.face-glow .btn-primary,
body.face-glow input[type=submit] {
  background: var(--gw-ink);
  color: var(--gw-cream);
  border: 1px solid var(--gw-ink);
  border-radius: 0;
}
body.face-glow .btn-ghost,
body.face-glow .btn-light {
  background: transparent;
  color: var(--gw-ink);
  border: 1px solid var(--gw-ink);
}
body.face-glow .btn:hover,
body.face-glow button.btn:hover { background: #443C33; border-color: #443C33; color: var(--gw-cream); }
body.face-glow .btn-ghost:hover,
body.face-glow .btn-light:hover { background: var(--gw-ink); color: var(--gw-cream); }

/* Secondary prose that the Look sets in a muted blue-grey. On cream that lands
   around 2.6:1 — legible to me, not to somebody reading it on a phone outside. */
body.face-glow .offer-sum,
body.face-glow .addform-range,
body.face-glow .hint,
body.face-glow .muted,
body.face-glow .sub,
body.face-glow p.lede { color: var(--gw-ink-2); }

/* The plain .btn takes its text colour from
     .btn:not(.btn-primary):not(.btn-ghost):not(.btn-dark):not(.btn-light)
   which is five classes of specificity and outranks anything sensible this
   file can write — the cart's Update button kept the navy palette's text on
   this face's dark fill, 1.22:1, a button whose label cannot be read.
   
   That rule reads var(--ghost-fg, ...), which is the hook it is offering.
   Setting the variable settles it for every such button at once and needs no
   specificity war and no !important. .btn-ghost reads the same variable but
   sits on cream rather than on ink, so it is given its own colour just below —
   one variable cannot serve both a filled button and an outlined one. */
.face-glow { --ghost-fg: var(--gw-cream); }
/* site.css re-declares --ghost-fg on .sec-light, .panel, .carttable and .card,
   which sit BETWEEN the body and the button — so setting it once on the face
   never reached the cart's Update button. Custom properties resolve at the
   nearest ancestor that declares them, not at the most specific selector on the
   page, which is why this looked like a specificity problem and was not. */
.face-glow .sec-light,
.face-glow .panel,
.face-glow .carttable,
.face-glow .card { --ghost-fg: var(--gw-cream); }
body.face-glow .btn-ghost,
body.face-glow .btn-ghost.btn-sm,
body.face-glow .btn-light {
  background: transparent;
  color: var(--gw-ink);
  border-color: var(--gw-ink);
}

/* Reduced motion: the change still shows, it just does not travel (design rule 13). */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}