/* ==========================================================================
   NEXIFY STUDIO: gold identity + type upgrade (loaded last; type and colour only,
   no layout positions are changed)

   Light: the hero film, plate, poster and chair cut-out carry a champagne-gold
   light grade baked into the assets (warm mid-tones of the light, neutral
   blacks, highlights rolling back to white), so the scroll film, the plate
   hand-over and the layered chair stay matched. Here the section spotlights
   take the same warm champagne.

   Metal: brushed / polished gold on the background typography (the giant
   "NEXIFY STUDIO", the section words, the decorative numbers), the navigation and
   the wordmark: light champagne highlights, champagne and gold mid-tones,
   antique-gold shadows. No glows.

   Type: BBH Bogle is the primary face (see the last section): headings, hero
   type, navigation, titles, buttons, labels and numbers. It is an all-caps
   condensed grotesque in one weight, so long body copy stays in Jost for
   reading. The section background words keep their
   letterforms: they are the composition.
   ========================================================================== */

/* fonts, the gold palette and metal gradients now live in css/brand.css
   (shared with the staff pages); here they are mapped onto the site */
:root {
  --font-headline: var(--font-bogle);
  --font-ui: var(--font-body);
  --font-mono: var(--font-bogle);           /* labels (mono before) */

  --grey-body: #d4cfc6;        /* body copy: bright and warm for reading */
  --grey-rating: var(--gold-ink);   /* labels take gold */
  --offwhite: #f3eee4;         /* warm ivory where light text is needed */
  --line: var(--gold-line);              /* every hairline separator is gold */
  --line-strong: var(--gold-line-strong);
  --hairline: var(--gold-line);
  --rule: rgba(220, 180, 102, 0.55);     /* hero dividers */
}

/* placeholders stay unmistakably placeholders */
.ph { font-family: var(--font-code); }

/* ---- metal text helper ------------------------------------------------------ */
.gold-text,
.nav a,
.gnav__links a,
.gnav__menu .lg-links a > span:first-child,
.logo__text,
.gnav__word,
.footer__logo span {
  color: transparent;
  background-image: var(--gold-text);
  background-size: 100% 220%;
  background-position: 50% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* hover / the section in view: the light runs down the letters (no glow) */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover,
  .gnav__links a:hover,
  .gnav__menu .lg-links a:hover > span:first-child { background-image: var(--gold-text-hi); background-position: 50% 60%; text-shadow: none; }
}
.nav a.is-active,
.gnav__links a.is-active,
.gnav__menu .lg-links a.is-active > span:first-child,
.lg-links a:focus-visible { background-image: var(--gold-text-hi); background-position: 50% 40%; text-shadow: none; }

/* logo slash and the eyebrow slash in gold */
.logo__slash line,
.gnav__logo line,
.footer__logo line { stroke: var(--gold-ink); }
.eyebrow::before { background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); }

/* ---- hero giant words: polished gold under the spotlight ---------------------- */
/* "hard": the spotlight cone, now champagne at its core, falling to antique gold */
.giant--hard {
  background-image:
    var(--gold-brush),
    linear-gradient(102deg, rgba(255, 240, 200, 0) 34%, rgba(255, 240, 200, 0.2) 45%, rgba(255, 240, 200, 0) 56%),
    conic-gradient(
      from 146deg at calc(705 * var(--u)) calc(-75 * var(--u)),
      #33250f 0deg,
      #3e2d13 5deg,
      #553d18 9deg,
      #72531f 13deg,
      #906a28 17deg,
      #ad8434 22deg,
      #cfa452 29deg,
      #e7c47e 34deg,
      #cfa452 39deg,
      #ad8434 46deg,
      #906a28 51deg,
      #72531f 55deg,
      #553d18 59deg,
      #3e2d13 63deg,
      #33250f 68deg,
      #33250f 360deg
    );
  background-size: 100% 100%;
}
/* "part": the pool of light under the chair catches the "p" in light gold */
.giant--part {
  background-image:
    var(--gold-brush),
    radial-gradient(
      circle at calc(895 * var(--u)) calc(845 * var(--u)),
      #e2bb6c 0,
      #cfa553 calc(56 * var(--u)),
      #b68c43 calc(100 * var(--u)),
      #987235 calc(160 * var(--u)),
      #7b5b29 calc(215 * var(--u)),
      #57401c calc(290 * var(--u)),
      #422f14 calc(370 * var(--u)),
      #372710 calc(440 * var(--u))
    );
  background-size: 100% 100%;
}

/* ---- hero type ------------------------------------------------------------------ */
.headline { font-size: calc(35 * var(--u)); line-height: calc(39 * var(--u)); }
.headline__light { font-style: italic; font-weight: 400; letter-spacing: 0; }
.headline__bold { font-weight: 700; letter-spacing: 0.005em; }
.intro { font-weight: 400; letter-spacing: 0.005em; }
.intro strong { font-weight: 500; margin-left: 0; letter-spacing: 0; }
.nav a { font-weight: 500; letter-spacing: 0.06em; }
.nav a:nth-child(2) { letter-spacing: 0.06em; }
.logo__text { font-weight: 600; letter-spacing: 0.2em; }
.book__label { font-weight: 600; letter-spacing: 0.08em; }
.btn--primary .btn__label, .btn--ghost .btn__label { letter-spacing: 0.03em; font-weight: 500; }
.contact { letter-spacing: 0.01em; }
.rating__stars { fill: var(--gold-ink); }
.rating__clients { letter-spacing: 0.16em; font-weight: 500; }
.rating__score { font-weight: 400; letter-spacing: 0; font-size: calc(13.6 * var(--u)); }   /* fits its slot before the divider */

/* ---- floating navigation ----------------------------------------------------------- */
.gnav__links a { font-weight: 500; letter-spacing: 0.06em; font-size: 0.98rem; }
.gnav__logo { letter-spacing: 0.2em; }
.gnav__book, .gnav__cta { letter-spacing: 0.07em; }
.gnav__menu .lg-links a { font-family: var(--font-headline); font-weight: 500; font-size: 1.22rem; letter-spacing: 0.01em; }
.gnav__idx { letter-spacing: 0.14em; }

/* ---- section lights and background words ------------------------------------------------ */
.sec::before {
  background: radial-gradient(ellipse 34% 70% at 50% 0%, rgba(240, 202, 124, 0.11), rgba(240, 202, 124, 0.03) 45%, transparent 72%);
}
.sec--contact::before {
  background: radial-gradient(ellipse 40% 55% at 50% 0%, rgba(240, 202, 124, 0.15), rgba(240, 202, 124, 0.035) 50%, transparent 75%);
}
.crew__stage::before {
  background: radial-gradient(ellipse 24% 72% at 66% 0%, rgba(240, 202, 124, 0.12), rgba(240, 202, 124, 0.03) 50%, transparent 76%);
}
.sec__giant {
  background-image:
    var(--gold-brush),
    radial-gradient(ellipse 60% 90% at 45% 0%, #876631 0%, #5a4320 38%, #2f2312 75%);
  opacity: 0.9;
}
.barber__num,
.crew__num {
  background-image: var(--gold-brush), linear-gradient(100deg, #f0d08c 0%, #c4953f 40%, #553b17 85%);
}

/* ---- headings: Bodoni Moda, italic light line, bold line ---------------------------------- */
.sec__title,
.cta__title,
.chapter__title { letter-spacing: 0; }
.sec__title { font-size: clamp(2.3rem, 4vw, 4.3rem); line-height: 1.06; }
.cta__title { font-size: clamp(3rem, 6.4vw, 6.9rem); line-height: 1.04; }
.t-light,
.chapter__light { font-style: italic; font-weight: 400; }
.t-bold,
.chapter__bold { font-weight: 700; }
.barber__name,
.location__name,
.workshop__title,
.principle__title,
.crew__name { font-weight: 700; letter-spacing: 0; }
.crew__name { font-size: clamp(2.4rem, 4vw, 4.6rem); }
.location__name { font-size: clamp(2rem, 2.8vw, 3rem); }
.workshop__title { font-size: clamp(1.4rem, 1.8vw, 1.9rem); }
.principle__title { font-size: clamp(1.3rem, 1.7vw, 1.8rem); }
.bk__q { font-style: italic; font-weight: 400; letter-spacing: 0; font-size: clamp(1.55rem, 2.2vw, 2.2rem); }
.bk__day { font-weight: 700; letter-spacing: 0; }
.bk__donetitle { letter-spacing: 0; }
/* the menu reads like a menu: service names set in the serif */
.menu__name { font-family: var(--font-headline); font-weight: 600; font-size: clamp(1.4rem, 1.7vw, 1.8rem); letter-spacing: 0.005em; }

/* ---- body and labels: Jost, a touch larger and heavier -------------------------------------- */
.sec__lede { font-size: clamp(1.08rem, 1.22vw, 1.3rem); line-height: 1.58; font-weight: 400; }
.menu__desc, .barber__intro, .crew__intro, .workshop__desc, .principle__text { font-size: 1.05rem; line-height: 1.58; }
.location__facts dd, .contact-grid__list li, .hours td { font-size: 1.04rem; }
.eyebrow {
  font-weight: 500;
  font-size: clamp(0.76rem, 0.82vw, 0.9rem);
  letter-spacing: 0.24em;
  color: var(--grey-rating);
}
.menu__index, .principle__num, .barber__specialty, .crew__specialty, .barber__where, .crew__where,
.menu__meta dt, .location__facts dt, .workshop__facts dt, .contact-grid__k, .gallery__cat, .bk__railnum,
.bk__progress, .bk__slotlabel, .workshop__level, .crew__count, .lightbox__figure figcaption, .footer__staff {
  font-weight: 500;
  letter-spacing: 0.18em;
}
.menu__index, .principle__num { color: var(--gold-2); }
.crew__win { color: var(--gold-1); }
.crew__rail i { background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); }
.pill, .link-arrow { letter-spacing: 0.04em; }

/* ==========================================================================
   BBH Bogle: the primary face
   An all-caps condensed grotesque with a single weight (400). Hierarchy comes
   from size, tone and spacing; the browser is never allowed to fake a bold or
   an italic, so its proportions stay exactly as drawn. Long body copy stays in
   Jost. Colours, gold gradients and positions are unchanged.
   ========================================================================== */
:root {
  --tone-quiet: #c9c1b4;                          /* the first line of a two-line title */
}

/* everything prominent */
.headline, .contact, .rating__score, .rating__clients, .btn, .book__label, .logo__text,
.nav a, .gnav__links a, .gnav__word, .gnav__book, .gnav__cta, .gnav__menu .lg-links a, .gnav__idx,
.footer__logo, .footer__staff,
.sec__title, .cta__title, .eyebrow, .pill, .link-arrow,
.menu__name, .menu__index, .menu__meta, .barber__name, .barber__num, .barber__specialty, .barber__where,
.crew__name, .crew__num, .crew__specialty, .crew__where, .crew__count,
.gallery__cap, .gallery__cat, .lightbox__figure figcaption,
.location__name, .location__facts dt, .location__more, .hours th,
.workshop__title, .workshop__level, .workshop__facts dt,
.principle__num, .principle__title, .contact-grid__k,
.bk__q, .bk__subq, .bk__opttitle, .bk__raillabel, .bk__railnum, .bk__progress, .bk__day, .bk__dow, .bk__mon,
.bk__slot, .bk__slotlabel, .bk__field label, .bk__sumrow dt, .bk__donetitle {
  font-family: var(--font-bogle);
  font-weight: 400;
  font-style: normal;
}

/* ---- hero giant words: NEXIFY / STUDIO in BBH Bogle ---------------------------------
   Same places in the composition as the words they replace (reference units):
   NEXIFY behind the chair, ink x 79-976, cap top y 196, baseline y 484;
   STUDIO in front of the chair's base, ink x 875-1549, cap top y 727, baseline 929.
   The gold lighting gradients above stay in stage coordinates, unchanged. */
.giant--hard,
.giant--part { font-family: var(--font-bogle); font-weight: 400; font-style: normal; text-transform: uppercase; }
/* fitted by measuring the rendered ink: NEXIFY x 79.7-974.4, baseline 483.9;
   STUDIO x 874.7-1551.6, baseline 929.5 (letter shapes untouched; size and tracking only) */
.giant--hard { font-size: calc(380 * var(--u)); padding-left: calc(64.9 * var(--u)); padding-top: calc(161 * var(--u)); letter-spacing: -0.034em; }
.giant--part { font-size: calc(270 * var(--u)); padding-left: calc(871 * var(--u)); padding-top: calc(695.3 * var(--u)); letter-spacing: -0.0148em; }
.giant--hard .g-d, .giant--part .g-p { letter-spacing: inherit; }

/* ---- hero ------------------------------------------------------------------------ */
.headline { font-size: calc(36 * var(--u)); line-height: calc(36.5 * var(--u)); }
.headline__light { font-style: normal; font-weight: 400; letter-spacing: 0.012em; color: var(--tone-quiet); }
.headline__bold { font-weight: 400; letter-spacing: 0.012em; color: #fff; }
.logo__text { font-size: calc(21.43 * var(--u)); letter-spacing: 0.15em; }
.logo { width: calc(222 * var(--u)); }   /* the whole NEXIFY STUDIO wordmark is the home link (still well clear of the nav pill) */
.nav a, .nav a:nth-child(2) { font-size: calc(18.4 * var(--u)); letter-spacing: 0.085em; }
.book__label { font-size: calc(18.6 * var(--u)); letter-spacing: 0.11em; }
.btn--primary .btn__label { font-size: calc(16.6 * var(--u)); letter-spacing: 0.07em; }
.btn--ghost .btn__label { font-size: calc(17 * var(--u)); letter-spacing: 0.08em; }
.contact { font-size: calc(16 * var(--u)); letter-spacing: 0.045em; }
.rating__score { font-size: calc(15 * var(--u)); letter-spacing: 0.05em; }
.rating__clients { font-size: calc(14.4 * var(--u)); letter-spacing: 0.14em; }

/* ---- navigation ----------------------------------------------------------------------- */
.gnav__logo { font-size: 1rem; letter-spacing: 0.16em; }
@media (max-width: 420px) {   /* NEXIFY STUDIO is longer: keep clear air before Book on narrow phones */
  .gnav__logo { font-size: 0.88rem; letter-spacing: 0.1em; padding: 0 0.85rem 0 0.8rem; }
  .gnav__word { margin-left: 0.6rem; }
}
.gnav__links a { font-size: 1.06rem; letter-spacing: 0.085em; }
.gnav__book { font-size: 1.04rem; letter-spacing: 0.1em; }
.gnav__cta { font-size: 1.08rem; letter-spacing: 0.08em; }
.gnav__menu .lg-links a { font-size: 1.5rem; letter-spacing: 0.04em; }
.gnav__idx { font-size: 0.78rem; letter-spacing: 0.16em; }
.footer__logo { letter-spacing: 0.16em; font-size: 1.02rem; }

/* ---- headings: one weight, two tones ------------------------------------------------------ */
.sec__title { font-size: clamp(2.7rem, 4.9vw, 5.4rem); line-height: 0.98; letter-spacing: 0.008em; }
.cta__title { font-size: clamp(3.4rem, 8vw, 8.8rem); line-height: 0.95; letter-spacing: 0.01em; }
.t-light, .chapter__light { font-style: normal; font-weight: 400; color: var(--tone-quiet); }
.t-bold, .chapter__bold { font-weight: 400; color: #fff; }
.eyebrow { font-size: clamp(0.86rem, 0.92vw, 1rem); letter-spacing: 0.2em; }

/* ---- titles, names, numbers ----------------------------------------------------------------- */
.menu__name { font-size: clamp(1.6rem, 2vw, 2.15rem); letter-spacing: 0.025em; line-height: 1; }
.menu__index, .principle__num { font-size: 0.95rem; letter-spacing: 0.12em; }
.menu__meta dt, .location__facts dt, .workshop__facts dt, .contact-grid__k, .bk__sumrow dt, .bk__field label {
  font-size: 0.82rem; letter-spacing: 0.16em;
}
.menu__meta dd { font-family: var(--font-bogle); font-size: 1rem; letter-spacing: 0.06em; }
.menu__meta .ph { font-size: 0.8em; }             /* placeholders keep their old footprint */
@media (max-width: 640px) { .menu__meta { gap: 1.05rem; } .menu__meta dt { letter-spacing: 0.12em; } }
.barber__name { font-size: clamp(2rem, 2.6vw, 2.8rem); letter-spacing: 0.02em; }
.barber__specialty, .crew__specialty { font-size: 0.86rem; letter-spacing: 0.16em; }
.barber__where, .crew__where { font-size: 0.86rem; letter-spacing: 0.1em; }
.crew__name { font-size: clamp(3rem, 5.2vw, 5.9rem); line-height: 0.96; letter-spacing: 0.015em; }
.crew__count { font-size: 1rem; letter-spacing: 0.14em; }
.crew__num { font-size: calc(var(--cw) * 0.44); letter-spacing: 0.01em; bottom: -0.32em; }
.barber__num { font-size: clamp(5.6rem, 10.5vw, 11rem); letter-spacing: 0.01em; bottom: -0.34em; }
.gallery__cap { font-size: clamp(1.05rem, 1.2vw, 1.25rem); letter-spacing: 0.05em; }
.gallery__cat, .workshop__level, .lightbox__figure figcaption { font-size: 0.8rem; letter-spacing: 0.16em; }
.location__name { font-size: clamp(2.4rem, 3.4vw, 3.8rem); letter-spacing: 0.02em; line-height: 1; }
.hours th { font-size: 0.86rem; letter-spacing: 0.12em; }
.workshop__title { font-size: clamp(1.7rem, 2.2vw, 2.4rem); letter-spacing: 0.02em; line-height: 1; }
.principle__title { font-size: clamp(1.6rem, 2.1vw, 2.3rem); letter-spacing: 0.02em; }

/* ---- buttons and links ------------------------------------------------------------------------ */
.pill { font-size: clamp(0.98rem, 1.02vw, 1.08rem); letter-spacing: 0.08em; }
.pill--big { font-size: clamp(1.08rem, 1.2vw, 1.25rem); }
.link-arrow { font-size: 1.02rem; letter-spacing: 0.08em; }

/* ---- booking -------------------------------------------------------------------------------------- */
.bk__q { font-size: clamp(1.8rem, 2.6vw, 2.7rem); letter-spacing: 0.015em; line-height: 1.02; }
.bk__subq { font-size: 1.1rem; letter-spacing: 0.06em; }
.bk__opttitle { font-size: 1.2rem; letter-spacing: 0.04em; }
.bk__raillabel { font-size: 1.04rem; letter-spacing: 0.06em; }
.bk__railnum, .bk__progress, .bk__slotlabel, .bk__dow, .bk__mon { letter-spacing: 0.14em; }
.bk__day { font-size: 1.7rem; letter-spacing: 0.02em; }
.bk__slot { font-size: 1rem; letter-spacing: 0.08em; }
.bk__donetitle { font-size: clamp(2.2rem, 3.6vw, 3.6rem); letter-spacing: 0.015em; line-height: 1; }

/* body copy stays in Jost (an all-caps condensed face is for display, not paragraphs) */
.intro, .sec__lede, .menu__desc, .barber__intro, .crew__intro, .workshop__desc, .principle__text,
.location__facts dd, .contact-grid__list li, .hours td, .bk__optsub, .bk__note, .bk__hint, .footer__legal {
  font-family: var(--font-ui);
}

/* ==========================================================================
   Gold everywhere (tokens: css/brand.css)
   One system for the whole site: gold on the first line of every title, gold
   leaf on the primary buttons, gold edges on the outline ones, gold hairlines,
   gold focus, and the booking planner's selected states in gold.
   ========================================================================== */

/* ---- titles: the first line in polished gold, the second in white ------------- */
.headline__light,
.chapter__light,
.t-light:not(:has(.mwi, .mc)) {
  color: transparent;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}
/* titles the scroll engine splits into words or letters: each piece carries the metal */
.t-light { color: var(--gold-2); }
.t-light .mwi,
.t-light .mc {
  color: transparent;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---- buttons -------------------------------------------------------------------------- */
.btn--primary,
.pill--light {
  background: var(--gold-fill);
  color: var(--gold-ink-on);
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.7), inset 0 -1px 0 rgba(90, 58, 16, 0.25), 0 10px 26px -14px rgba(0, 0, 0, 0.85);
}
.btn--primary .btn__arrow { stroke: var(--gold-ink-on); }
.pill--light:hover { background: var(--gold-fill-hi); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--gold-fill-hi); } }
.btn--ghost { border-color: var(--gold-2); color: var(--gold-1); }
.pill--ghost { border-color: var(--gold-2); color: var(--gold-1); }
.pill--ghost:hover { border-color: var(--gold-1); background: var(--gold-tint); }
.pill.is-disabled { border-color: var(--gold-line-strong); color: var(--grey-body); }
.link-arrow { border-bottom-color: var(--gold-line-strong); }
.link-arrow:hover { border-bottom-color: var(--gold-2); }
.menu__item:hover .menu__book,
.menu__book:focus-visible { background: var(--gold-fill); color: var(--gold-ink-on); border-color: transparent; }
/* the glass Book pills: gold leaf under the glass light */
.lg--milk {
  background:
    linear-gradient(180deg, rgba(255, 248, 226, 0.5) 0%, rgba(255, 248, 226, 0) 52%, rgba(60, 36, 6, 0.08) 100%),
    var(--gold-fill);
}
.lg--milk::after { background: linear-gradient(var(--rim-a, 155deg), rgba(255, 250, 232, 0.95), rgba(255, 236, 190, 0.35) 35%, rgba(90, 58, 16, 0.15) 70%, rgba(255, 240, 205, 0.6)); }
.book.lg--milk, .gnav__book, .gnav__cta { color: var(--gold-ink-on); }

/* ---- glass: gold light on the rims and the lens ------------------------------------------- */
.lg::after { background: linear-gradient(var(--rim-a, 155deg), rgba(250, 224, 160, 0.55), rgba(220, 178, 100, 0.14) 28%, rgba(200, 158, 86, 0.05) 60%, rgba(240, 205, 135, 0.3)); }
.nav.lg { border-color: rgba(220, 180, 102, 0.16); }
.lg-lens {
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 236, 190, 0.22), rgba(255, 236, 190, 0) 70%), rgba(220, 180, 102, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.36), inset 0 0 0 1px rgba(220, 180, 102, 0.22), inset 0 -6px 10px -6px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.75);
}
.lg-lens.is-hover { background-color: rgba(220, 180, 102, 0.18); }

/* ---- small marks, focus, placeholders -------------------------------------------------------- */
.contact__dot { background: var(--gold-ink); }
.ph { border-bottom-color: rgba(220, 180, 102, 0.38); }
a:focus-visible,
button:focus-visible,
.sec :focus-visible,
.gallery__item:focus-visible { outline-color: var(--gold-1); }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold-1); }
@media (hover: hover) and (pointer: fine) {
  .menu__item::after { background: radial-gradient(32rem 9rem at var(--mx, 50%) 50%, rgba(232, 192, 110, 0.08), rgba(232, 192, 110, 0) 70%); }
}

/* ---- booking planner --------------------------------------------------------------------------- */
.bk__panel { background: linear-gradient(180deg, rgba(220, 180, 102, 0.05), rgba(255, 255, 255, 0.008)); }
.bk__railitem.is-current .bk__railbtn { color: var(--gold-1); border-left-color: var(--gold-2); background: var(--gold-tint); }
.bk__railitem.is-done .bk__railbtn { border-left-color: var(--gold-line-strong); }
.bk__railbtn:not(:disabled):hover { color: var(--gold-1); }
.bk__opt:hover:not(:disabled) { border-color: var(--gold-line-strong); background: rgba(220, 180, 102, 0.05); }
.bk__opt.is-on { border-color: var(--gold-2); background: var(--gold-tint); }
.bk__opt.is-on::after { background-color: var(--gold-2); }
.bk__date.is-on, .bk__slot.is-on { background: var(--gold-fill); color: var(--gold-ink-on); border-color: transparent; }
.bk__date.is-on .bk__dow, .bk__date.is-on .bk__mon { color: #5c4320; }
.bk__field input:focus, .bk__field textarea:focus { border-color: var(--gold-2); background: rgba(220, 180, 102, 0.04); }
.bk__check input:checked { background-color: var(--gold-2); border-color: var(--gold-2); }
.bk__check input { border-color: var(--gold-line-strong); }
.bk__tick { background: var(--gold-fill); }
.bk__done { border-color: var(--gold-line); background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--gold-light), transparent 70%), rgba(255, 255, 255, 0.015); }
.bk__note--proto { border-left-color: var(--gold-line-strong); }
@media (max-width: 960px) {
  .bk__railitem.is-current .bk__railbtn { border-bottom-color: var(--gold-2); }
}