/* =========================================================================
   The NewYou Skin Clinic, Bromley Cross, Bolton.
   Brand captured from the clinic's own gold signage and treatment room
   (Treatwell venue photography, 2026-07-16). Palette sampled from the real
   brass lettering: champagne highlight #FAEFC7, brass mid #C9BA9F,
   deep brass #7C6D53, warm grey wall #978E8B, greige sign face #B5B0A4.
   Signature motif = the gold ring that frames their wall sign and is
   embroidered on their treatment chair.
   ========================================================================= */

:root {
  /* real brass, sampled from the signage photograph */
  --brass-deep: #7C6D53;
  --brass-mid: #C9BA9F;
  --brass-lift: #FAEFC7;
  --brass-ink: #6B5A3E;      /* text-safe brass, AA on cream */

  /* real room tones */
  --wall: #978E8B;
  --greige: #B5B0A4;

  /* ink + paper */
  --ink: #24211E;
  --ink-soft: #55504B;
  --ink-mute: #6E6862;
  --cream: #FBF9F6;
  --cream-2: #F4F0EA;
  --cream-3: #EBE5DC;
  --white: #FFFFFF;

  --shell: min(1180px, 100% - 2.5rem);
  /* Viewport based twin of --shell. --shell contains a percentage, which resolves
     against the ELEMENT, so it cannot be used to work out a page gutter inside a
     calc() on a padding. This one is safe to use anywhere. */
  --gutter: max(1.25rem, calc((100vw - min(1180px, 100vw - 2.5rem)) / 2));
  /* Decorative brass, for rings, rules and borders: the full specular range. */
  --ring: linear-gradient(135deg, var(--brass-deep) 0%, var(--brass-mid) 38%, var(--brass-lift) 52%, var(--brass-mid) 66%, var(--brass-deep) 100%);
  /* Brass for TEXT on a light ground. Capped at #A5804A so the lightest point of
     the sheen still clears 3:1 against cream for large display type. */
  --ring-text: linear-gradient(100deg, #5E4E34 0%, #8A6E42 34%, #A5804A 50%, #8A6E42 66%, #5E4E34 100%);
  /* Brass for TEXT on the ink ground, where the bright range is legible. */
  --ring-text-dark: linear-gradient(100deg, #A08A66 0%, var(--brass-mid) 34%, var(--brass-lift) 50%, var(--brass-mid) 66%, #A08A66 100%);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

/* figure and blockquote carry a default 40px side margin, which insets the hero
   photograph away from the page edge and pulls the review plaques off their grid. */
figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  font-family: 'Marcellus', Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.005em;
}

a { color: var(--brass-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: var(--shell); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--cream); padding: .7rem 1.1rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- the brass system -------------------------------------------- */
/* Brass never carries body copy: it is decorative or large display only. */
.brass-text {
  background: var(--ring-text);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.js .brass-text { animation: sheen 9s var(--ease) infinite; }
@keyframes sheen {
  0%, 62%, 100% { background-position: 0% 50%; }
  30% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .brass-text { animation: none; }
}
/* On the ink ground the bright brass is the legible one. */
.band-ink .brass-text, .site-foot .brass-text, .plaque .brass-text {
  background-image: var(--ring-text-dark);
}
/* Fallback for browsers without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brass-text { color: var(--brass-ink); -webkit-text-fill-color: currentColor; }
  .band-ink .brass-text, .site-foot .brass-text { color: var(--brass-mid); }
}

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--brass-mid) 18%, var(--brass-deep) 50%, var(--brass-mid) 82%, transparent);
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--brass-ink);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 1.4rem; height: 1.4rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--brass-mid);
  background: radial-gradient(circle at 34% 30%, var(--brass-lift), transparent 62%);
}
.eyebrow.centred { justify-content: center; }

/* ---------- the wordmark (rebuilt from their gold wall sign) ------------- */
.mark { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.mark-ring {
  width: 3.05rem; height: 3.35rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--ring) border-box;
}
.mark-ring span {
  font-family: 'Allura', cursive;
  font-size: 1.45rem;
  line-height: 1;
  padding-bottom: .18em;
}
.mark-word { display: flex; flex-direction: column; line-height: 1; }
.mark-script {
  font-family: 'Allura', cursive;
  font-size: 1.9rem;
  line-height: .96;
}
.mark-sub {
  font-size: .53rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: .2em;
  margin-top: .18rem;
}

/* ---------- header ------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 249, 246, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-3);
}
.head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.site-nav ul {
  list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .3rem 0;
  position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ring);
  transition: right .4s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--cream-3);
  border-radius: 999px;
  padding: .5rem .95rem;
  font: inherit; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
}

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.btn-solid {
  background: var(--ink); color: var(--cream);
  box-shadow: 0 1px 0 var(--brass-deep) inset;
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(36,33,30,.24); }
.btn-ring {
  color: var(--ink);
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--ring) border-box;
  border-color: transparent;
}
.btn-ring:hover { transform: translateY(-2px); background: linear-gradient(var(--cream-2), var(--cream-2)) padding-box, var(--ring) border-box; }
.btn-lg { padding: 1.05rem 2.1rem; }

/* ---------- hero: the real sign ----------------------------------------- */
.hero {
  display: grid;
  /* minmax(0, ...) is load bearing: a bare fr floors at min-content, which let the
     copy panel's padding starve the photograph and crop the gold ring in half. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-3);
}
.hero-copy { padding: clamp(2.6rem, 4.6vw, 4.2rem) clamp(1.25rem, 3.4vw, 3.6rem) clamp(2.6rem, 4.6vw, 4.2rem) var(--gutter); align-self: center; }
/* The copy column sets the row height, and the row height decides how hard the
   photograph gets cropped. Keep the headline near three lines so the figure box
   stays close to the 3:2 of the original photograph and the ring stays whole. */
.hero h1 {
  font-size: clamp(2rem, 3.3vw, 3.05rem);
  margin: 0 0 1.15rem;
  letter-spacing: -0.01em;
  /* 15ch is wider than a small phone, and a bare 15ch would force the column to
     overflow the viewport. Cap it against the available width. */
  max-width: min(15ch, 100%);
}
.hero h1 .script {
  font-family: 'Allura', cursive;
  font-size: 1.28em;
  line-height: .8;
  display: inline-block;
  padding-right: .06em;
}
.hero-lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 0 0 1.8rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-figure { position: relative; min-height: 24rem; max-height: 40rem; overflow: hidden; }
/* Keep the emblem itself in frame: the ring sits centre right in the photograph. */
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
/* a soft cream feather so the photograph melts into the copy panel */
.hero-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(251,249,246,.55) 12%, transparent 34%);
  pointer-events: none;
}
/* The sign is photographed against a pale wall, so a gradient scrim never gets
   dark enough under the caption. Use a solid chip instead: guaranteed contrast,
   and it reads as a small engraved label, which suits the brand. */
.hero-note {
  position: absolute; right: 1rem; bottom: 1rem;
  margin: 0;
  padding: .5rem .9rem;
  background: rgba(30, 27, 24, .9);
  border: 1px solid rgba(201, 186, 159, .45);
  border-radius: 999px;
  color: #F1EADD;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 1;
}

/* the accreditation strip */
.creds {
  background: var(--ink);
  color: #D9D2C8;
  padding: 1.15rem 0;
}
.creds-in {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .85rem clamp(1.4rem, 4vw, 3.2rem);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
}
.creds-in span { display: inline-flex; align-items: center; gap: .7rem; }
.creds-in span::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--brass-mid);
  flex: none;
}

/* ---------- sections ---------------------------------------------------- */
.band { padding: clamp(3.6rem, 8vw, 6.6rem) 0; }
.band-soft { background: var(--cream-2); }
.band-ink { background: var(--ink); color: #E6E0D7; }
.band-ink h2, .band-ink h3 { color: var(--cream); }
.band-ink .eyebrow { color: var(--brass-mid); }
.band-ink p { color: #CFC8BE; }

.band-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.band-head.centred { margin-inline: auto; text-align: center; }
.band-head h2 { font-size: clamp(1.95rem, 3.5vw, 2.9rem); margin-bottom: 1rem; }
.band-head p { color: var(--ink-mute); margin: 0; font-size: 1.08rem; }
.band-ink .band-head p { color: #B8B1A7; }

/* ---------- signature: the ring menu ------------------------------------ */
/* Every treatment sits inside their own gold ring, the way their emblem
   frames the wordmark on the wall and on the treatment chair. */
.rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.ring-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 2.2rem 1.4rem;
  position: relative;
}
.ring-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50% / 42%;
  border: 1px solid var(--cream-3);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.ring-card:hover::before { transform: scale(1.015); border-color: var(--brass-mid); }
.ring-dial {
  width: 5.6rem; height: 6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    radial-gradient(circle at 36% 30%, var(--white), var(--cream-2)) padding-box,
    var(--ring) border-box;
  margin-bottom: 1.15rem;
  position: relative;
}
.ring-dial b {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 1.32rem;
  color: var(--brass-ink);
  line-height: 1;
}
.ring-dial small { display: block; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-top: .2rem; }
.ring-card h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.ring-card p { font-size: .95rem; color: var(--ink-mute); margin: 0 0 .9rem; max-width: 26ch; }
.ring-meta { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }

/* ---------- signature: the engraved plaque ------------------------------ */
/* Reviews are presented as brushed brass plaques, the same object as the
   ring sign screwed to their clinic wall. */
.plaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
}
.plaque {
  position: relative;
  padding: 2.1rem 1.7rem 1.7rem;
  background:
    linear-gradient(148deg, #2E2A26 0%, #3A342D 38%, #2B2724 100%);
  border: 1px solid #4A4238;
  border-radius: 3px;
  color: #E9E2D6;
  overflow: hidden;
}
/* the two standoff screws that mount the plaque */
.plaque::before, .plaque::after {
  content: "";
  position: absolute; top: .7rem;
  width: .44rem; height: .44rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-lift), var(--brass-deep));
}
.plaque::before { left: .8rem; }
.plaque::after { right: .8rem; }
.plaque-quote {
  font-family: 'Marcellus', serif;
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  color: #F0EADF;
}
.plaque-by {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-mid);
  border-top: 1px solid #4A4238;
  padding-top: .9rem;
}
/* #9B9287 measured 4.01:1 on the plaque, under AA for text this size. */
.plaque-by em { font-style: normal; color: #ADA79C; letter-spacing: .1em; }

/* ---------- signature: the word medallions ------------------------------ */
/* Their real Treatwell tallies of the words clients use about Sharon. */
.words {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.word {
  display: grid; place-items: center;
  width: clamp(7.4rem, 15vw, 9.4rem);
  aspect-ratio: 1 / 1.08;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--ring) border-box;
  text-align: center;
  padding: .6rem;
}
.word b {
  display: block;
  font-family: 'Marcellus', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--brass-mid);
  line-height: 1;
}
.word span {
  display: block;
  font-size: .62rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #B8B1A7;
  margin-top: .45rem;
}

/* ---------- practitioner ------------------------------------------------ */
.person {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.4rem);
  align-items: center;
}
.person-figure { position: relative; }
.person-figure img {
  width: 100%;
  border-radius: 50% 50% 46% 46% / 44% 44% 52% 52%;
  border: 1px solid var(--cream-3);
  background: var(--cream-2);
}
.person-figure::after {
  content: "";
  position: absolute;
  inset: -.7rem;
  border-radius: 50% 50% 46% 46% / 44% 44% 52% 52%;
  border: 1px solid transparent;
  background: var(--ring) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.person h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1.1rem; }
.person p { color: var(--ink-soft); }
.sig {
  font-family: 'Allura', cursive;
  font-size: 2.5rem;
  line-height: 1;
  margin-top: 1.4rem;
}
.sig small {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .5rem;
}

/* ---------- treatment tables -------------------------------------------- */
.menu-group { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.menu-group h3 {
  font-size: 1.5rem;
  margin-bottom: .4rem;
}
.menu-note { color: var(--ink-mute); font-size: .97rem; margin: 0 0 1.5rem; max-width: 56ch; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem 1.6rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--cream-3);
}
.menu-row:first-child { border-top: 1px solid var(--cream-3); }
.menu-row dt, .menu-row .name {
  font-family: 'Marcellus', serif;
  font-size: 1.13rem;
}
.menu-row .name small {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .3rem;
}
.menu-row .price {
  font-family: 'Marcellus', serif;
  font-size: 1.13rem;
  color: var(--brass-ink);
  white-space: nowrap;
}
.menu-row .price s { color: var(--ink-mute); font-size: .85em; margin-right: .45rem; }
.menu-row .price.consult {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.note-card {
  border: 1px solid var(--cream-3);
  border-left: 2px solid var(--brass-mid);
  background: var(--white);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0 0;
}
.note-card h4 { font-size: 1.1rem; margin-bottom: .5rem; }
.note-card p { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* ---------- hours dial -------------------------------------------------- */
.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--cream-3);
  font-size: 1rem;
}
.hours li:first-child { border-top: 1px solid var(--cream-3); }
.hours .day { letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--ink-soft); }
.hours .time { font-family: 'Marcellus', serif; font-size: 1.05rem; }
.hours .closed { color: var(--ink-mute); font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: .8rem 0; border-bottom: 1px solid var(--cream-3); }
.contact-list li:first-child { border-top: 1px solid var(--cream-3); }
.contact-list .k { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .25rem; }
.contact-list .v { font-family: 'Marcellus', serif; font-size: 1.12rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--brass-mid); }
.contact-list a:hover { color: var(--ink); }

.figure-frame { position: relative; }
.figure-frame img { border: 1px solid var(--cream-3); }
.figure-frame figcaption {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: .8rem;
}

/* ---------- closing call ------------------------------------------------ */
.closer { text-align: center; }
.closer h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 1.2rem; }
.closer h2 .script { font-family: 'Allura', cursive; font-size: 1.24em; line-height: .8; display: inline-block; }
.closer p { max-width: 44ch; margin: 0 auto 2rem; }

/* ---------- footer ------------------------------------------------------ */
.site-foot { background: var(--ink); color: #A79F94; padding: clamp(3rem, 5vw, 4.4rem) 0 2rem; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #3B352E;
}
.site-foot .mark-ring { background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--ring) border-box; }
.site-foot .mark-sub { color: #8D8579; }
.site-foot h4 { color: var(--cream); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-family: 'Jost', sans-serif; margin-bottom: 1rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .6rem; font-size: .95rem; }
.site-foot a { color: #A79F94; text-decoration: none; }
.site-foot a:hover { color: var(--brass-mid); }
.foot-base {
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  font-size: .78rem;
  /* #857D72 measured 3.95:1 on ink, under AA for text this size. */
  color: #968D81;
}

/* ---------- demo ribbon ------------------------------------------------- */
.demo-ribbon {
  background: var(--brass-deep);
  color: #FDF8EC;
  text-align: center;
  padding: .62rem 1rem;
  font-size: .76rem;
  letter-spacing: .05em;
}
.demo-ribbon a { color: #FDF8EC; }

/* ---------- reveals ----------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-inline: var(--gutter); order: 2; }
  .hero-figure { order: 1; min-height: 20rem; }
  .hero-figure::after { background: linear-gradient(0deg, var(--cream) 0%, transparent 40%); }
  .person { grid-template-columns: 1fr; }
  .person-figure { max-width: 17rem; }
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-3);
    padding: 1rem 0 1.4rem;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; width: var(--shell); margin-inline: auto; }
  .site-nav li { border-bottom: 1px solid var(--cream-2); }
  .site-nav a { display: block; padding: .9rem 0; }
  .head-in { position: relative; }
}